Confidential & Proprietary 1 1

Beena Thomas

Doyen Systems Pvt. Ltd.

Creating a Native Mobile Application

using Oracle Apex and Deploying on

Android

Confidential & Proprietary 2 2

Agenda

• Introduction

• Categories of Mobile Apps

• Process of Native App Creation & Deployment

• Questions and Answers

Confidential & Proprietary 3 3

Introduction

• What is Mobile App? A mobile app is a software application developed specifically for use on small, wireless computing devices, such as smartphones and tablets, rather than desktop or laptop computers

• Why Mobile App? Convenience and accessibility Despite the many inherent benefits of traditional websites, mobile apps and mobile websites are becoming very popular.

• Which Platforms? Market growth is mainly based on the constant development in Android & Windows Phone development Most of the platforms for mobile applications also have an integrated development environment, which provides tools to allow a developer to write, test and deploy applications into the target platform environment Oracle introduced usage of APEX applications in mobile by incorporating JQuery framework & HTML5 technology

• How are they Categorized? Mobile apps are categorized according to whether they are Web-based, Native apps, Hybrid Apps

Confidential & Proprietary 4 4

Categories of Mobile Apps

Native App A Native App is an app developed essentially for one particular mobile device and is installed directly onto the device itself. Users of native apps usually download them via app stores online or the app marketplace, such as the Apple App Store, the Google Play store and so on. An example of a native app is the Camera+ app for Apple’s iOS devices. It is more efficient than a web app in terms of usage and also, it will be faster in terms of accessing it in mobile. A native app provides more user-friendly app using JQuery framework.

Web App A Web App, on the other hand, are basically Internet-enabled apps that are accessible via the mobile device’s Web browser. They need not be downloaded onto the user’s mobile device in order to be accessed.

Hybrid mobile apps This combine the best parts of Web and native app development Because no mobile browser fully supports HTML5, support for hybrid apps across devices can be spotty.

Confidential & Proprietary 5 5

Process for Creating & Deploying Native App in Android •Create an application in Oracle Apex as type "JQuery Mobile" •Choose the platform in which the application will be deployed & used •The process involves using PhoneGap as a framework for building mobile applications What is PhoneGap ? •PhoneGap is a mobile application development framework, based upon the open source Apache Cordova project. •PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS. •It allows you to write an app once with HTML, CSS and JavaScript, and then deploy it to a wide range of mobile devices without losing the features of a native app. •It is used an intermediator between the mobile phones and the apex applications.

Confidential & Proprietary 6 6

PhoneGap Architecture

Confidential & Proprietary 7 7

Process for Creating & Deploying Native App Contd..

• Using PhoneGap, separate login using Adobe IDs is required through which we can have a separate workspace for creating and managing mobile applications

Confidential & Proprietary 8 8

Steps for Creation of Native App

• Creation of Application in Oracle Apex as type "JQuery Mobile"

• Incorporate the required pages and for navigation between pages, include lists.

• Choose the platform in which the application is going to be deployed and used.

• Deployment of the application in PhoneGap tool.

• Generate the required key for Android mobiles or IPhone or Windows Phone using CMD.

• Add the key to the corresponding platform in Phone Gap.

• Generate the .apk file and deploy it in the phone.

Confidential & Proprietary 9 9

Deployment of Application using PhoneGap

• The method involves first creating an application in PhoneGap by using an HTML file uploaded into the PhoneGap Source Code Section.

• Once it has been uploaded, we need to save the application as a whole. Also, icons can be uploaded for the application for usage in the mobiles

Confidential & Proprietary 10 10

• A file will be created in the name of index.html which contains a HTML code. The below code contains the URL of the apex application with the applications alias name.

Index.html <!DOCTYPE html>

<html>

<head>

<title>APEX DEMO</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

<meta charset="utf-8">

</head>

<body onload="window.location.href='http://apex.oracle.com/pls/apex/f?p=INSERT_APP_ALIAS_HERE';">

</body>

</html>

Deployment of Application using PhoneGap Contd..

Confidential & Proprietary 11 11

Generating Keystore file

• Provide the below command in the cmd window and enter the needed values for name, organization name, state, province, city which are the key values and press the enter to get the keystore file generated in the location specified in the below said command.

C:\Users\>keytool -genkey -v -keystore [Provide the

keystore_name].keystore -alias [Provide the alias_name] -keyalg RSA -keysize 2048 -validity 10000

Deployment of Application using PhoneGap Contd..

Confidential & Proprietary 12 12

Generating .apk file and deploying in mobile

• Once the key file has been generated, it should be added to the Phonegap application.

• Rebuild the entire PhoneGap app by clicking on the Rebuild button.

• Download the .apk file generated and transfer it to the Android mobile and deploy it.

Deployment of Application using PhoneGap Contd..

Confidential & Proprietary 13 13

Demo

Process for Creating & Deploying Native App in Android

Confidential & Proprietary 14 14

Confidential & Proprietary 15 15

Form & Report Navigation List

Confidential & Proprietary 16 16

Form Page

Confidential & Proprietary 17 17

Report Page

Confidential & Proprietary 18 18

Deployment of App in PhoneGap

Create a new PhoneGap app using ADOBE ID

Confidential & Proprietary 19 19

Confidential & Proprietary 20 20

Confidential & Proprietary 21 21

Create Index.html

Confidential & Proprietary 22 22

Uploading source file in PhoneGap Upload the index.html file in the below specified location of PhoneGap app. Settings -> Basic -> Source Code

Confidential & Proprietary 23 23

Enter the Keystore command to generate the Keystore file

Generation of keystore file for uploading key in PhoneGap app

Confidential & Proprietary 24 24

Keystore file generated

Confidential & Proprietary 25 25

In PhoneGap, goto Build -> Android. Select the add key value from the list. Upload the generated keystore file Rebuild the file or it will automatically get rebuild

Upload keystore in PhoneGap

Confidential & Proprietary 26 26

Download apk file

Download the generated .apk file

Android Phones or any Android simulator

Confidential & Proprietary 27 27

Confidential & Proprietary 28 28

Indication of Issues

Confidential & Proprietary 29 29

In order to get the .ipa apps file, the signing need to be done using a P12

certificate and for it the below steps are required to be performed

•An Apple IPhone Developer certificate needs to be provided by Apple while we

submit the request.

•Download and Install OpenSSL.

•Convert the developer certificate file you receive from Apple into a PEM

certificate file. To do this, run the following command-line statement from the

OpenSSL bin directory: openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM

•If we are using the private key from the keychain on a Mac computer, convert

it into a PEM key: openssl pkcs12 -nocerts -in mykey.p12 -out mykey.pem

•We can now generate a valid P12 file, based on the key and the PEM version

of the iPhone developer certificate:

openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12

Deployment of Application in iPhone OS (iOS)

Confidential & Proprietary 30 30

Register devices

•Go to Apple Developer Portal.

•Go to Device section. Under Manage tab, provide Device Name and Device ID (40 hex characters) and register the device.

Create Provisioning Profile

•Go to Apple Developer Portal.

•Navigate to Provisioning section. Create new profile under Development tab.

•Fill the form with Profile Name, Certificates (as per .cer above), App ID and your development device.

Submit to Build

•Go to PhoneGap Account > Edit Setting > Signing Keys' tab:

Deployment of Application in iPhone OS (iOS) Contd..

Confidential & Proprietary 31 31

•Click 'add a key...' and supply your previously Generated P12

Deployment of Application in iPhone OS (iOS) Contd..

Confidential & Proprietary 32 32

Deployment of Application in iPhone OS (iOS) Contd..

Unlocking the key.

• Go to your Account > Edit Setting > Signing Keys' tab:

• Click 'lock' button and supply the certificate password you used to export your certificate as specified below.

Confidential & Proprietary 33 33

Points to take care while converting an existing Desktop app to Mobile app

• The source application should not contain tabular form, since mobile applications does not support tabular form.

• If the multi-row is required, then a new template for multi-row needs to be created and used.

• Interactive reports are not supported in mobiles, they need to be converted into Classic Reports.

• Javascripts needs to be changed accordingly in certain scenarios.

• If any new templates have been built in Desktop app, then they need to be taken care of.

• Classic Date fields are not supported.

• The View will change for different phones accordingly, so the size needs to be taken care.

Confidential & Proprietary 34 34

Ashwath & Beena Thomas

Confidential & Proprietary 35 35