Introduction to Phonegap · 5. Connect phone to computer and run! cordova run android The app will automatically open on your phone. **Note: Make sure you activate your developer

Introduction to

Phonegap

Liyana Lazim [http://liyanawritescode.wordpress.com]

What is phonegap?

Cross-Platform or Call it Hybrid

Pros and Cons:

Pros:

One Language All Platform

Save Development Cost by A LOT

Free

Cons:

Certain native features might not be supported

Slower in performance

Don’t use it for games, unless it is really simple. Due to performance, other platform like Flash and Unity3D are more recommended.

Web Developers can now do mobile apps


Phonegap features:

HTML5

CSS3

Javascript, Jquery

PHP (use ajax)

Bootstrap

Plugins (Cordova add-ons)

Etcs.


Requirements:

Desktop / Laptop

Internet

Android Phone with minimum Android 5

Install Phonegap Desktop, Phonegap Mobile Application, Node.js, Git

Download SDK Manager:


..Download SDK Manager

Link : https://developer.android.com/studio/index.html

Note : Only download the SDK manager, not the Android Studio bundle


https://developer.android.com/studio/index.html

..Install SDK Manager and Open SDK

manager SDK manager can be found at your Android folder


..Install Packages


Creating Phonegap

Project


1. Install Phonegap Desktop and Phonegap

Mobile App

Phonegap Desktop download link : http://phonegap.com/getstarted/

Phonegap Mobile App can be downloaded at Google Playstore and Apple Store


http://phonegap.com/getstarted/

2. Open Phonegap Desktop and Create

New Project


Editing the HTML file


1. Click on the local path link.


2. You’ll be directed to your project

directory.


3. Go to ‘www’ > ‘index.html’


4. Edit your files as you like!

You can use :

Jquery Mobile

Bootstrap

Any HTML5 and CSS codes

Javascript & JQuery


Debugging with

Phonegap Desktop and

Phonegap Mobile App


1. Run your project and you’ll see a server

number


2. On your phone, go to Phonegap App and

enter the server number.

** Make sure that your laptop is connected to the same wifi as your phone.

Click Connect and you’ll see your first phonegap app!


Debugging with your

Android Phone

(For Android project

only)


1. Download Node.js

Download Link : https://nodejs.org/download/


https://nodejs.org/download/

2. Open the node.js command prompt and key in: npm install -g cordova


3. In Node.js command prompt, go to

your directory


cd [file path]


4. Add platform:cordova platform add android


5. Connect phone to computer and run!

cordova run android

The app will automatically open on your phone.

**Note: Make sure you activate your developer mode.

Activating developer mode:

1. Go to settings on your phone

2. Find ‘About device’

3. Click ‘Build Number’ multiple times and you will activate the developer

mode.

(If your phone is not Samsung or the above steps does not work, google: ‘How to

activate developer mode for [phone model]’)


Adding Plugin


1. Download Git

Here is the link : https://git-scm.com/downloads

Once you have downloaded Git, find the folder inside C:.

Go inside the bin folder and copy the file location.


https://git-scm.com/downloads

..cont

Paste the file location inside the system variable path

(Windows : Control Panel > System and Security > System > Advanced system

settings > Environment Variable>System Variable>Path>Edit)


..cont

The function of Git is for plugins that start from https://github....

You can find plugins at Cordova’s website.

Here is an example of a plugin : https://www.npmjs.com/package/cordova-

plugin-x-socialsharing


https://github/

https://cordova.apache.org/plugins/

https://www.npmjs.com/package/cordova-plugin-x-socialsharing

2. Find a plugin and find the installation

code snippet


3. In Node.js command prompt, go to

your directory


cd [file path]


4. Add the plugin using nodejs cmd


5. In your html file, call the cordova.js

file


6. Implement the plugin.

You can use the example given in the plugin homepage (where you got the

plugin code snippet)


7. Run your project!


Publishing App


1. In nodeJS command prompt, go to your apk

directory(yourprojectfile > platforms > android > build > outputs > apk)



2. Release the app

Syntax :

cordova build --release android

Generated: Unsigned APK

You can find the unsigned APK at yourprojectfile > platforms > android > build

> outputs > apk




3. Generate keystore

Syntax:

Example:

Keystore generated : myTutorial.keystore

Note: Place the keystore inside yourprojectfile > platforms > android > build > outputs > apk

keytool -genkey -v -keystore <keystoreName>.keystore -alias <KeystoreAliasName> -keyalg <Key algorithm> -keysize <Key size> -validity <KeyValidity in Days>

keytool -genkey -v -keystore myTutorial.keystore -alias myTutorialAlias -keyalg RSA -keysize 2048 -validity 10000




4. Run the jarsigner tool

Syntax :

Example:

Generated: Signed APK

Note : Please make sure <Unsigned APK file> is the same as the one in your

apk file

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <keystorename <Unsigned APK file>

<Keystore Alias name>

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore myTutorial.keystore android-release-unsigned.apk myTutorialAlias



5. Optimize the signed APK using

zipalign

Syntax:

Example:

Generated: Renamed signed APK

zipalign -v 4 Example-release-unsigned.apk Example.apk

zipalign -v 4 android-release-unsigned.apk myFinishedApp.apk




Note

If there is an error regarding zipalign does not exist, try searching

‘zipalign.exe’ from your android SDK directory.

Copy them and paste at your apk directory

yourprojectfile > platforms > android > build > outputs > apk




..Note

If there is an error regarding "Jarsigner is not recognized internal external

command“

Make sure Java JDK is set on the PATH. In my case put

"D:\Java\jdk1.6.0_34\bin" into System Variable PATH.


Copy jdk bin path


Right Click on ‘My Computer’ and Click

‘Properties’


Click ‘Advanced System Settings’


Click ‘Environment Variables’


Paste jdk bin path then click ok


Documents

Introduction to Phonegap · 5. Connect phone to computer and run! cordova run android The app will automatically open on your phone. **Note: Make sure you activate your developer