LAB TUTORIAL – PHONEGAP BUILD

This guide is geared to helping people new to PhoneGap get up and running as quickly as possible with the least amount of setup and time.

https://phonegap.com/getstarted/

1. Download

PhoneGap Desktop App 0.4.5 for Windows

You can also use npm to install the phonegap cli npm install -g phonegap

2. Install

1. Extract the download. 2. Install the app:

o On a Mac, drag & drop PhoneGap.app to the Applications folder. o On Windows, move the PhoneGap folder anywhere you want.

WINDOWS INSTALLATION

Complete download the latest Windows Installer.

**NOTE:** If you're unable to run the Windows Installer for some reason, there's also a zip file available that can be used to install PhoneGap Desktop manually. Download the [zip file for the latest release](https://github.com/phonegap/phonegap-app-desktop/releases) and follow the instructions in the README and INSTALL files within the downloaded zip.

1. Double click the downloaded file to run the installer. You will be prompted with the PhoneGap Desktop Setup Wizard:

2. Accept the license agreement:

3. Select the desired destination for the application and click Next:

4. Select the desired location for the shortcut and click Next:

5. Click Install to begin the installation:

6. Click Finish to close the Setup Wizard:

INSTALLING MOBILE APP

1. Open the PhoneGap Desktop App

Double-click the application from where you installed it.

Click the plus sign and select Create new PhoneGap project as shown below:

2. Create Your First App

1. Click the + on the left-panel.

2. Select Create new PhoneGap project… o Choose a local path to save your project o Choose a name for your project, such as “Hello World”

You will be prompted with the template list dialog as shown below, where you can choose to create an app based on a sample project.

Each template has a brief description below the name indicating what type of project will be created. To select a template, click on the radio button next to it. In the image below, the Hello World template is selected.

3. Select Create project.

The first template option in the list is the default Hello World project. It's proven to be the quickest and easiest way to understand the basics of building a mobile PhoneGap app so let's start there.

i. Ensure the radio button next to the Hello World template is selected. ii. Click on the green Next button. iii. You will be presented with a screen to enter information about your project. Choose the path

on your local hard drive where you want to create the project, a designated name and an optional identifier. Once the information has been entered, click the green Create project button.

3. Start the Server

The server should start by default.

You’ll know because the bottom of the app has a green banner with your IP address.

If the server has not started, click the arrow (>) to the right of your app’s name.

4. Pair with the PhoneGap Developer App

Get your device out.

Open the PhoneGap Developer App.

Type the IP address displayed by the Desktop app.

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 deviceready event and Apache Cordova core plugins more easily in an environment you're already familiar with.

5. Get to Work

It’s now business as usual. You can now edit and immediately preview your project on a device.

Open www/index.html.

Edit any content.

Save the file.

See the updates appear on your device.

Get involved!

Upload your existing website folder – you are developed using ionic framework builder.

Amend your code to work with Phonegap.

Assignment

Develop a mobile application, you are allowed to use ionic builder. Your application must have html5, css3, js. Amend your code to work with Phonegap to add interactive form Use Cardova to produce android (.apk) and/or ios to install on your mobile.