Build You First HTML5 Mobile App Tutorial

Build An HTML5 Mobile Application using Adobe PhoneGap

We All Know That Building Mobile Apps made easy with the big collection of building tools that allow newbie developers to build Mobile Apps easy and without hard coding , HTML 5 Is on of the best tools for developers to build mobile apps based on web browsers compatible with all app stores on the internet Google play , Apple store, Amazon and others without making new build for each mobile operating system as we said "Write once run anywhere" , in this tutorial you will learn how to build HTML5 mobile app using PhoneGap by Adobe , its an easy way to build a mobile app without coding , but first you need to learn about HTML5 mobile apps VS Native mobile Apps to decide if you want to start building HTML5 mobile Apps . if is done lets start our tutorial :

Getting Started and prepare your self for :

1. Install PhoneGap Desktop for developing your app
2. Install The Mobile App For a complete preview for your App
3. Create Your App
4. Preview Your App
5. Understanding and updating Code

Step 1: Install PhoneGap

The PhoneGap Desktop application provides you with a drag and drop interface for creating HTML5 applications. built for those who prefer a visual user interface , Select your operating system to Download : 

• Mac OS X
• Windows

To install PhoneGap on windows Follow the steps below :

- Download the latest Windows Installer. you can also Download the zip file for the latest  release if you encounter troubleshoots with the windows installer .

- Double click the downloaded file to run the installer. You will be prompted with the PhoneGap Desktop Setup Wizard Click Next ,Accept,Next,Next,Install and You are Done and PhoneCap installed on your Window

PhoneGap Interface

- proceed to next step below where you will install the PhoneGap Developer App to your mobile device for    previewing the apps you build.




Step 2: Install Mobile App

The PhoneGap Developer App allows you to preview and test the HTML5 mobile apps you build across platforms without SDK setup. and without need to install plugins or compile codes locally. its an easy way for developers to build html5 mobile apps faster with an easy setup.

To Install PhoneGap Developer app download it from your supported app marketplaces and install it to your mobile device:

• iTunes
• Google Play
• Windows Phone Store

Once installed, Open PhoneGap App it should look like the image below :

For Now You are Ready To create Your First HTML5 Mobile App , you install PhoneGap Desktop and PhoneGap developer App to your Mobile device , The App project is a phonegap project with ability to run on multiple Mobile Os and Devices .


Step 3: Create Your  HTML5 Mobile App

To create Your HTML5 Mobile App Click the plus sign and select Create new PhoneGap project as shown in the image below:

a template list dialog ask you to choose to create an app based on a sample project,or start an empty project,select Hello World Then click Next , select The path of your Project and click finish , At this Moment you create your first HTML 5 Mobile Apps , See the Image below for More information how to creat a phonegap project.

• Choose Local Path for your project 
• Fill The AppName 
• Fill The Id : Note that Id is your unique package for your app for ex : com.myfirsthtml5app.demo

if you are done with all of the above steps , You should see a windows like below image , with your new project shown and marked with a green play button next to it and a green bar at the bottom.
a running server and the active project note that only one project will be active

Step 4: Preview Your App

in this last step to creat an HTML5 Mobile App you can choose between to preview your app in the embedded web browser with PhoneGap desktop or to preview your device using the PhoneGap developer without installing platform SDKs, registering devices, or compiling code.

PhoneGap Desktop starts a small web server to host your project and returns a server address you can then enter into the PhoneGap Developer app running on your mobile device or in your desktop browser. The project is served automatically upon project creation, but you can also manually start any project that's inactive by clicking the green play ( > ) button next to it.

- Preview in a Desktop Browser

You can leverage your desktop browser to preview and test yours apps first to speed up your initial development process. For instance, if you're using a framework like Angular or React, there are tools available for specifically debugging those frameworks in the browser that can be quite helpful before moving over to a device. Recently PhoneGap began supporting the browser platform as a target automatically to help you test with the device ready event and Apache Cordova core plugins more easily in an environment you're already familiar with.

- Preview on a Device

Double check to ensure you're running your device and computer on the same network before continuing.
In the previous step we created a project and ensured it was running by looking for the green play button to be highlighted and a green bar showing the server address it's running on at the bottom of the PhoneGap Desktop.

The screenshot is shown again below for reference. Locate the specific server address for your project before moving to the next step.




Go to your mobile device where the PhoneGap Developer App is running, enter the server address on the main screen and tap Connect.

NOTE: Tap directly on the server address displayed in the terminal screen of the PhoneGap Developer app to change it to match yours. The value filled in by default is only a sample.

Click Connect and You should see A message on your screen with success! , the phonegap connect and load your application as shown on the image below :


STEP 5 : understanding the code and Making Updates to your application

to make an update codes its very easy you need just to Use your favorite text editor, notpad++ or sublime text and open up the index.html file located within the www folder of your project for instance ~/appSample/www/index.html

For example we want to change the PHONEGAP text that's displayed in the app

from <h1>PhoneGap</h1> to <h1>My First HTML5 App</h1>. 

(This text has a CSS uppercase transform applied to it in the default project). Save it when you're finished and move on to the next step.

check your device again and you will see your application reload and display the new text , if you are familiar with web devlopement the job is very easy you can creat a powerfull apps just by creating HTML and Css , Javascript , Jquery and add all in the root folder .

Build, Package and Distribute for Production

This getting started workflow is meant for beginning mobile application development with PhoneGap in the quickest and simplest manner. At some point you will want to move out of the sandbox environment and into a more advanced environment suitable for building, packaging and distributing your mobile application.

There are two choices available for building and packaging your applications:

1. Build and package locally using the PhoneGap CLI
2. Use PhoneGap Build cloud service for simplifying the build and app packaging process

Which you choose will depend on how comfortable you are working with a command line environment and more closely with the native SDKs and tools versus leaving it to a cloud service and providing the required details.

Apache Cordova

Adobe PhoneGap™ is a distribution of Apache Cordova™. Cordova was originally created by Nitobi, who was then acquired by Adobe in 2011. The project was donated to the Apache Software Foundation (ASF) later that same year to maintain a transparent and open governance and provide a mechanism for other large organizations to contribute. Apache Cordova is the engine that powers Adobe PhoneGap™, similar to how WebKit powers Chrome or Safari. However, Adobe PhoneGap™ provides additional tools that tie into other Adobe services, including tools like the PhoneGap Developer App, the PhoneGap Desktop App, PhoneGap Build and PhoneGap Enterprise.