Wednesday, January 2, 2013

Applying Apache Cordova and PhoneGap, O'Reilly Course

In order to start working with phonegap:
1- install node.js
2- install git
3- install phonegap
(open node.js cmd and write)
npm install -g phonegap
4- you can install phonegap desktop app

phonegap is something on top of cordova

use phonegap -v to check phonegap installed version

after you install, you can open phonegap desktop app, add new project. or you can use command line and write


after you add new project you will have this structure

config.xml: contains metadata about the project
hooks: you can add scripts here and tell phonegap to execute them at a certain step (e.g. after compilation).
platforms: list of platforms for this project (e.g. ios, android ...)
plugins: list of plugins for the project
www: basically www is your project
merger: doesnt appear here, you can use it to apply some stuff for specific app, for example apply something on IOS not android.

very important: you should always work on the www folder, dont work on the platforms folder

Deal with Platform
-phonegap platform add android
-phonegap platform add ios
-phonegap platform update ios
-phonegap platform remove ios

now if you want to tell phonegap to be optimized for android you can
phonegap platform add android --save

so when you add the platform you can tell phonegap to remember that android is used,

-phonegap comes with a list of template projects you can browse them by
phonegap template list

and you can create a project of a template:
phonegap create Hello com.asdf.hellp HelloPG --template TEMPLATE_NAME

Build your phonegap application
1- phonegap prepare
this will put the www folder inside each platform
2- phonegap build ios
this will build the platform
3- phonegap emulate ios
this will run the emulator, for android, phongap will comunicate with andriod studio to run the emulator
4- phonegap run
this will run the app on a mobile connected via usb to the computer, or run it on Genymotion simulator

Browser platform
there is a platform called browser, you can use it for testing
phonegap run browser

PhoneGap server:
in order not to emulate all the time (this takes time) you can use phonegap server
- phonegap server:
this will run a server, 
you can download phonegap application on your mobile and connect to this server to do test.
the mobile and computer must be on the same network

on the app: press with 3 fingers to go back
on the app: press with 4 fingers to referesh

Phonegap debugging:
with ios, you can debug with safari
with android, you can debug with chrome

in chrome, go to : Deverloper tool -> inspect devices 
here you will find all connected devices and geneymotions, and you can start debugging

Weinre Product
chorme will work with new android versions, for old versions use Winre

here you can find
<name> APP_NAME </name>: app name
<content src="index.html"/>: this is the first page, and you should have a single page application, dont build multiple pages

we have a plugin called cordova-plugin-whitelist, this plugin is used if the app wants to make call to the network, for example doing http request. Inside this plugin we have 
<access origin="..."/>: define the urls that we can access to, you should add all the urls that the app wants to access.

also you have <allow-intent> where you put what the application can do, for example "tel:*" to access the telphone functionality, "sms:*" to access sms, "geo:*" to access the gps ...

you can set allow-intent per platform

also you have a configuration for full screen (full screen means that you can see the clock and battery infomration, like when you play games)

also you have a configuration for orientation.

also you have overscroll configuration

also a section for ICONS.

check the documentation for other stuff.

Merger folder:
if you want to add a css for ios only, you can do that inside merge folder (if merger folder doesnt exist, create it manually).
inside Merger folder, create a platform folder for each platform, now you can put for example platform.css inside the ios platform folder.
just add a link to this css inside index.html

Phonegap Events
you have list of events in phonegap:

deviceready event: trigger when the device is ready
pause event: trigger basically when you press the home button, when we press the home button the appliction is paused
resume event: when we go back to the application.

some operating system doesnt have pause resume, they reload the application from scratch.

backbutton event: like the android back button.

Phonegap webview
you should know that each mobile operating system comes with a specific web view, which determines how the html will be rendered.

sometimes you need to use CROSWALK to work with olde webviews in android.

Some user interface libraries

Phonegap plugins
- phonegap plugin list
- phonegap plugin add
- phonegap plugin remove

you have plugins like camera battery ....
phonegap plugin add cordova-plugin-camer

sometimes you can change stuff using css or plugin,
for example you have a plugin to change the status bar
this plugin will give you an object only ON DEVICE READY, and you can use this object to manipulate the status bar.

document.addEventListner("deviceready", function() {

also you can use notification plugin to create alerts notifications and beeps ( better than using java script alert()

you have some 3rd party plugins, you can check them online

Enable debug mode on your mobile
go to setting and search for developer option menu
to enable the developer option menu go to "about" and press on the build Number 7 times until it becomes developer

build and release your app
phonegap build --release
however you should sign your app

so it is better to do that from inside android studio or Xcode, 
go to android studio, import the project inside android platform
got build->generate signed apk


after you create an account, you can use 
phonegap remote login
phonegap remote build ios

No comments:

Post a Comment