Make android app with PhoneGap Build

PhoneGap is a framework that use to build mobile applications for multiple platforms – Android, iOS, Windows Phone, Blackberry etc.

With HTML, CSS, and JavaScript you can build an application.

You don’t have to require to re-write code for other platforms.

App built with Cordova are native apps that can be published on the app store. With the plugins, you can extend your app functionality.

You can either deploy your project online or offline.

In this tutorial, I show how you can create an Android app and deploy it using PhoneGap build.

Make android app with PhoneGap Build


Contents

  1. Download
  2. Create and add platform
  3. Files
  4. Compile & download
  5. Conclusion

 

1. Download

To create the application, add the platform, and plugin requires Node.js.


 

2. Create and add platform

Navigate to the directory where you want to create an app using Node.js console and type the following command –

F:\phonegap>cordova create myapp

After executing this command you will see a new directory has been created with the myapp name that has 4 directories – hooks, platforms, plugins, www and config.xml file.

  • www directory – It contains all project files e.g. HTML, CSS and JavaScript.
  • config.xml – This file contains app configuration e.g. App title, description, icon, startup file, plugin, etc.

Currently, the platforms directory will be empty because no platform is been added.

Add Platform

Go to create project folder using Node.js console and type cordova platform add android --save.

F:\phonegap>cd myapp
F:\phonegap\myapp>cordova platform add android --save

Now the android platform is added to the project.

Similarly, you can add iOS platform

F:\phonegap\myapp>cordova platform add ios --save

 

3. Files

  • Copy or move config.xml file to www directory.
  • Copy platforms\android\platform_www\cordova.js to www directory.

I am using jQuery Mobile to create the layout of the app.

confix.xml

Set your Application name, description and with <content > you can set your application startup page.

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 <name>PhoneGap App</name>
 <description>
 A PhoneGap demo application.
 </description>
 <author email="dev@cordova.apache.org" href="http://cordova.io">
 Apache Cordova Team
 </author>
 <content src="index.html" />
 <plugin name="cordova-plugin-whitelist" spec="1" />
 <access origin="*" />
 <allow-intent href="http://*/*" />
 <allow-intent href="https://*/*" />

<platform name="android">
 <allow-intent href="market:*" />
 </platform>
 <platform name="ios">
 <allow-intent href="itms:*" />
 <allow-intent href="itms-apps:*" />
 </platform>
 <engine name="android" spec="~6.1.2" />
</widget>

index.html

Creating a simple layout using jQuery Mobile.

<!DOCTYPE html>
<html>
 <head>
 
 <!-- Include meta tag to ensure proper rendering and touch zooming -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>PhoneGap App</title>

 <link rel="stylesheet" href="js/jquery.mobile/jquery.mobile-1.4.5.min.css">

 <!-- Include the jQuery library -->
 <script src="js/jquery-1.10.2.js"></script>

 <!-- Include the jQuery Mobile library -->
 <script src="js/jquery.mobile/jquery.mobile-1.4.5.min.js"></script>

 <!-- Cordova -->
 <script type="text/javascript" src="cordova.js"></script>
 
 </head>
 <body>
  <!-- Login page (start) -->
  <div data-role="page" id="loginpage">
   <div data-role="header" data-position="inline" data-theme="b" >
   <h1 >PhoneGapp App</h1>
   <a href="#registerpage" data-transition="slide" class="ui-btn-right" ><img src="js/jquery.mobile/images/icons-png/carat-r-white.png" ></a> 
   </div>

   <div data-role="main" class="ui-content">
    <h2 >Login</h2>
    Username <input type="text" id="lusername"> <br/>
    Password <input type="password" id="lpassword"> <br/>
 
    <button class="ui-btn" data-theme="a" id='but_login'>Submit</button>
   </div>

   <div data-role="footer" data-theme="b">
    <h1>PhoneGap App</h1>
   </div>
  </div>
  <!-- Login page (end) -->

  <!-- Register page (start) -->
  <div data-role="page" id="registerpage">
   <div data-role="header" data-theme="b" >
    <a href="#loginpage" data-transition="slide" ><img src="js/jquery.mobile/images/icons-png/carat-l-white.png" ></a>
 
    <h1 >PhoneGapp App</h1>
   </div>

   <div data-role="main" class="ui-content">
    <h2 >Register</h2>
 
    Username <input type="text" id="txt_uname"> <br/>
    Name <input type="text" id="txt_name"> <br/>
    Email <input type="text" id="txt_email"> <br/>
    Password <input type="password" id="txt_password"> <br/>
 
    <button class="ui-btn" id="but_reg">Register</button>
   </div>

   <div data-role="footer" data-theme="b" >
    <h1>PhoneGap App</h1>
   </div>
  </div> 
  <!-- Register page (end) -->
 </body>
</html>

Create a zip of www directory files.


 

4. Compile & Download

  • Log in to your account, either with Adobe ID or GitHub account. If you are not registered user then click on the Sign-Up.

Choose a plan, for the demo purpose select free plan. With Adobe ID create your account.

  • Upload the zip file of www directory of the project.

Make android app with PhoneGap Build

  • Click on Ready to build Button.

  • Download the apk file by clicking the Android icon or using QR code.

Make android app with PhoneGap Build


 

5. Conclusion

With PhoneGap, you can build the mobile application using familiar web technologies – HTML, CSS, and JavaScript.

You can deploy your single application to multiple mobile platforms and not require to modify your existing code.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *