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
phonegap create FOLDER_NAME PACKAGE_NAME APP_NAME
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
-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
Config.xml:
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
IONIC
SENCHA
JQUERY MOBILE
SUPER SONIC
ONSEN UI
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() {
StatusBar.overlaysWebView(false)
....
...
...
}).
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
YOU CAN USE PHONE BAP BUILD WHICH IS AN ONLINE WEBSITE TO BUILD APPLICATIONS REMOTLY< BY THAT YOU DONT NEED MAC.
after you create an account, you can use
phonegap remote login
phonegap remote build ios
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
Config.xml:
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
IONIC
SENCHA
JQUERY MOBILE
SUPER SONIC
ONSEN UI
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() {
StatusBar.overlaysWebView(false)
....
...
...
}).
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
YOU CAN USE PHONE BAP BUILD WHICH IS AN ONLINE WEBSITE TO BUILD APPLICATIONS REMOTLY< BY THAT YOU DONT NEED MAC.
after you create an account, you can use
phonegap remote login
phonegap remote build ios
No comments:
Post a Comment