Hello Guys
This Demo Project is for Phone Gap beginners.
In this Demo Project following points will be covered.
1. What is PhoneGap
2. Phone Gap Pre requirements.
3. Required Software's for PhoneGap.
4. A Demo Project
i) Splash Screen
ii) AngularJS Event Handling.
iii) Sqlite DB connetion
iv) Ajax Request.
To Understand this Project one must have knowledge of HTML and Javascript . For this demo an Angular JS knowledge would make advantage.
This Demo Project is for Phone Gap beginners.
In this Demo Project following points will be covered.
1. What is PhoneGap
2. Phone Gap Pre requirements.
3. Required Software's for PhoneGap.
4. A Demo Project
i) Splash Screen
ii) AngularJS Event Handling.
iii) Sqlite DB connetion
iv) Ajax Request.
1. What Is PhoneGap.
A PhoneGap is cross Platform(Android ,ios ,Windows etc..) Open source mobile Apps development framework.
A PhoneGap uses HTML and Javascript to develop Apps.
2. Phone Gap Pre-requirements.
3. Required Software's for PhoneGap.
PhoneGap Setup
1.Download Node JS Latest Version
2. Download PhoneGap Latest Version
3. Install PhoneGap Mobile App to see changes directly on target Device(Optional required internet in Mobile).
4. Install Git Client to build App through PhoneGap CLI
OR you can build App online
After Installing all above software follow below steps.
4. A Demo Project
i) Splash Screen
- Run Following Command C:\>npm install -g cordova
- Create Project using following Command cordova create hello com.example.hello HelloWorld
- Now add required platforms to your project by following command. But before building make sure there respective SDK are installed on machine for locally building the project or you can build Online for android and IoS. http://build.phonegap.com/
cordova platform add wp8 cordova platform add windows cordova platform add amazon-fireos cordova platform add android cordova platform add blackberry10 cordova platform add firefoxos
- Add below code in config.xml to make splash screen work and save file. as shown in below image.<preference name="phonegap-version" value="3.0.0" />
<icon src="icon.png" />
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="splash.png" />
</platform>
<preference name="android-minSdkVersion" value="18" /><preference name="android-maxSdkVersion" value="23" /><preference name="android-targetSdkVersion" value="20" /><preference name="android-installLocation" value="preferExternal" />- Now before building make sure that icon.png and splash.png file present in project directory
- icon.png size 300x300splash.png target device resolution or in that ratio.
- Now before going for event handling we must install AngulaJS by
- Download through https://github.com/driftyco/ng-cordova/archive/master.zip
- copy "lib" file got in above AngularJS download link to your project folder and Include
ng-cordova.js
orng-cordova.min.js
in yourindex.html
file beforecordova.js
- 10. Download angular.min.js from below link and paste it project’s “js” folder and add its reference in index.html file
- var myApp = angular.module('myApp', []);myApp.controller("controller", function($scope ){});
- Now we will add button in index.html file just after the <p> tag
<p class="event received">Hello World</p>
<br/>
<div class="cl_div_submit">
<button ng-click="JoinUs()">Join Us</button></div>