PhoneGap Development How to make an app using PhoneGap Build ?

Presentation By MobilePundits

Developing native apps for individual platforms is

not so easy.

You invest a lot of time in writing code for the same

piece of software in different programming languages.

Every individual cannot be technically sound, but

he/she can develop the app without any hassle or

pressure.

With PhoneGap you can smartly develop apps using

HTML5, CSS & JavaScript.

PhoneGap Build is an advanced version of PhoneGap

offering cloud based services to the developers.

In simple words PhoneGap is a service where

developers can develop native apps using web

technologies like HTML, CSS and JavaScript.

A Quick Guide to PhoneGap App Development

Using the PhoneGap Build

In your web browser, open the URL build.phonegap.com. You will see the homepage of the Adobe’s PhoneGap website

Till here we are assuming that you have the code of your sample app because in this tutorial we will be learning to create cross platform apps with a single code base & not writing the code from the scratch

Sign In With Your Account

Register and create your own Adobe ID

Sign in with your Adobe ID

In the next slide you will see how the login page

of PhoneGap Build looks like

Create New App

Click on the +NEW APP button for creating a

new app

From here you will upload the .zip file of your

project

Remember to compress your project in prior

Browse & Upload the .zip file

The original folder will comprise of all HTML +

CSS + JavaScript + JPG files in it

The name of the project and all the assets will

appear after uploading the project

There you will see a build button

Click on the button

Animations will appear showing the progress of the

builds taking place simultaneously

Once this process is completed, a QR code will be

generated as shown above in the picture

Scan your QR code through bar code reader

Install the app on your device!

This is how the app looks on the device

Open the uncompressed folder of your apps’ code

Open the file INDEX.HTML in your editor

Place a <BR> tag for line break just after the

Body’s content.

Place this h1 tag after BR, <h1 align = center>My

First App<h1>

Save the file.

See the next slide as an example

Update Your App

Update Again

After all the changes you’ve made, recompress

the folder & repeat the previous processes with the

newly created .zip file

Proceed to the next slide for more information

All the build will start again

Scan the newly generated QR code as shown

in the image and re - install the app on your

device

Run the application

You will see “My First App” has written just

below the MobilePundits Image.

See the changes in the next slide

MobilePundits

Visit our websitehttp://www.mobilepundits.com