Introduction to Phonegap · 5. Connect phone to computer and run! cordova run android The app will...

Introduction to

Phonegap

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

What is phonegap?

Cross-Platform or Call it Hybrid

Pros and Cons:

One Language All Platform

Save Development Cost by A LOT

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:

Javascript, Jquery

PHP (use ajax)

Bootstrap

Plugins (Cordova add-ons)

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

..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

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

1. Download Node.js

Download Link : 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

(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.

..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

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

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>

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

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

Introduction to Phonegap · 5. Connect phone to computer and run! cordova run android The app will...

Documents

PhoneGap Day: PhoneGap Build

PhoneGap Introduction

PhoneGap · Phonegap: A History 2010 - IBM joins Nitobi in developing PhoneGap. 2011 - Adobe acquires Nitobi and PhoneGap and at the same time PhoneGap is renamed to Cordova and donated

HTML5 + PhoneGap & Windows Phone

PhoneGap - Quoin Inc · Phonegap: A History 2010 - IBM joins Nitobi in developing PhoneGap. 2011 - Adobe acquires Nitobi and PhoneGap and at the same time PhoneGap is renamed to Cordova

PhoneGap OSCON 2012assets.en.oreilly.com/1/event/80/PhoneGap _ Cross the Gap from HT… · PhoneGap Goals and Principles "The purpose of PhoneGap is for PhoneGap to cease to exist."

Run Your Sales From Your Phone

Mobile Java with GWT, Still Write Once Run Everywhere (mGWT+Phonegap)

Getting Started with PhoneGap Windows Phone 7

Phonegap Tutorial

Phonegap Development

PhoneGap –An Overview · Introduction to Mobile OS Cross platform frameworks Introduction to PhoneGap Features of PhoneGap Developing an Android app using PhoneGap

JuriUrbainczyk HTML5 PhoneGap · 2016-04-29 · PhoneGap = Apache Cordova. A:gon Solutions GmbH 29.04.2013 15 PhoneGap: How it works Server-Rechner Tablet / Smartphone PhoneGap Browser

Barcamp phonegap

07 PhoneGap

How to build PhoneGap App for Windows Phone?

PhoneGap, App Storecdn.cs76.net/2011/spring/lectures/12/lecture12-malan.pdf · 2012-08-22 · Wrap it with PhoneGap Using the free open source framework or Phone-Gap build you can

Windows Phone Mango and PhoneGap

Hello PhoneGap

Apresentação Phonegap