Monday, February 22, 2016

PhoneGap Demo Project for Beginner

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


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.

To Understand this Project one must have knowledge of HTML  and Javascript . For this demo an Angular JS knowledge would make advantage.

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



  1. Run Following Command  C:\>npm install -g cordova
  2. In Command Prompt go to directory where you want to create Project.
  3. Create Project using following Command cordova create hello com.example.hello HelloWorld
  4. 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/
  5.     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 
  6.  i) Splash Screen

  7. Now go in Project directory here it is "HelloWorld" Run following command to enable splash screen cordova plugin add cordova-plugin-splashscreen
  8. Now navigate to config.xml file in project Folder and open that in Any Editor. 
  9. 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" />

  10.     <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" />
  11. Now before building make sure that icon.png and splash.png file present in project directory
  12. icon.png size 300x300
    splash.png target device resolution or in that ratio
  13. Now navigate to index.html file and open that in any Editor like Notepad++ or Brackets.
  14.  ii) AngularJS Event Handling.

  15. Now before going for event handling we must install AngulaJS by 
  16. After downloading complete extract these files and navigate to "lib" folder

  17.  copy "lib" file got in above AngularJS download link  to your project folder and Include ng-cordova.js or ng-cordova.min.js in your index.html file before cordova.js 
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>
  18. 10. Download angular.min.js from below link and paste it project’s “js” folder and add its reference in index.html file

  19.  Now in index.html add ng-app="myApp" this line <html> tag
  20. And <div ng-controller="controller"> this line just below <body> tag
  21. Now Create one blank "Home.js" File and copy to projects respective "js" folder and add below code to that file                                                                                                                       
  22. var myApp = angular.module('myApp', []);
     myApp.controller("controller", function($scope ){
    });
  23. Now add Home.js file reference in "index.html" file <script type="text/javascript" src="js/Home.js"></script>                                                                                                                                                                       
  24. Now we will add button in index.html file just after the <p> tag 

  25. <p class="event received">Hello World</p>

    <br/> 
    <div class="cl_div_submit">

    <button  ng-click="JoinUs()">Join Us</button>
    </div>
  26. Now Open "Home.js" file in editor and following code to it
  27. For Testing purpose open index.html file in chrome.exe and click on "Join Us" button.




























Continue... PhoneGap Demo Project For Beginner - Sqlite DB connetion

iii) Sqlite DB connetion

1. Now to use Sqlite in PhoneGap first we need to install it by following command.
npm i cordova-sqlite-storage

2. then add plugin in project directory by following command

D:\>cordova plugin add cordova-sqlite-storage



3. No Create new Html File "JoinUs.html" You can Download this File here and paste that file in project "www" directory where the index.html is present. 

4. Now Modify "Home.js" file and Update JoinUs() funtion
$scope.JoinUs = function()
    {      
 //alert('Hello World');
 window.location = "joinUs.html"
 
    };

You Can Download Home.js File here.
Now it will look like below

iv) Ajax Request

1. Now For Ajax we will create on button that will call some ajax data for that add Below code in "JoinUs.html" File

          <div class="cl_div_submit">
<label>Ajax Data :{{lbltime}}</label>
                 <br/>
                <button  ng-click="ajaxReqs()">Ajax</button>
            </div>
2. Now we need to add base domain name of ajax request URL for eg here Ajax Get request is https://httpbin.org/get so we need to add that under <head> tag in "JoinUs.html" file as show below

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://httpbin.org 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

3. Now We need to Add ajaxReqs() this funtion in Home.js file

$scope.ajaxReqs = function()
    {
         var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
              data1 = xhttp.responseText;
                $scope.lbltime = xhttp.responseText;
$scope.$apply();//To refresh the page
                //alert('ajax Data '+$scope.lbltime);
            }
          };
          xhttp.open("GET", "https://httpbin.org/get", true);
          xhttp.send();
          
     };

You Can Download Complete Project Here

Here I end this demo project Tutorial..............
Thanks...