how to build a mobile application: phonegap

4
How to Build a Mobile Application: PhoneGap Today we are going to discuss one of the ways to build a mobile app. In previous article, I have explained how to build an app with native iOS. PhoneGap is an open source framework that allows you to use HTML, CSS, and JavaScript to build mobile apps for multiple platforms. It supports a wide variety of platforms: Android, iOS, BlackBerry, Windows Phone 7and 8, webOS, Symbian, and Bada. Adobe’s PhoneGap platform helps create an app that runs on different mobile devices. PhoneGap’s development tools combines the HTML, CSS and JavaScript files into platform-specific deployment packages. For this article, we’ll take a sample FasTip application running on iOS and Android: It uses a mobile platform’s Web view to display content. As such, the content will appear nearly the same on each platform.

Upload: anthony-scoble

Post on 07-Jan-2017

30 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: How to Build a Mobile Application: PhoneGap

How to Build a Mobile Application: PhoneGap

Today we are going to discuss one of the ways to build a mobile app. In

previous article, I have explained how to build an app with native iOS.

PhoneGap is an open source framework that allows you to use HTML,

CSS, and JavaScript to build mobile apps for multiple platforms. It

supports a wide variety of platforms: Android, iOS, BlackBerry, Windows

Phone 7and 8, webOS, Symbian, and Bada.

Adobe’s PhoneGap platform helps create an app that runs on different

mobile devices. PhoneGap’s development tools combines the HTML, CSS

and JavaScript files into platform-specific deployment packages.

For this article, we’ll take a sample FasTip application running on iOS and

Android:

It uses a mobile platform’s Web view to display content. As such, the

content will appear nearly the same on each platform.

Page 2: How to Build a Mobile Application: PhoneGap

Plugins: Closing the Gap on Native Features

PhoneGap bundles a Web view of your HTML, CSS and JavaScript in a

native application. As Web view in an application does not support many

device features, such as access to the file system or the camera.

PhoneGap uses a mechanism that allows JavaScript running in the Web

view to invoke native code contained in the application.

PhoneGap include plugins to support device capabilities such as the

following:

accelerometer

camera

contacts

file system

media playback and recording

network availability

Plugins may be extended to allow people access more features -

barcode scanning

Bluetooth

push notifications

text to speech

calendars

Facebook Connect

You can use command line tools which make it easy to add plugins to

the repository for your project.

An HTML, CSS and JavaScript Foundation for Mobile Development

The major capabilities lie in non-visual components — things that access

the file system, network availability, geolocation, etc. Applications

Page 3: How to Build a Mobile Application: PhoneGap

written for mobile browsers must face the limitations of the given

mobile platform (processing speed, screen size, network speed, touch

events, etc.).

Here are some mobile frameworks that help you with this –

jQuery Mobile

Ionic

Sencha Touch

Kendo UI Complete

AppGyver’s Steroids

Enyo

TopCoat

Getting Our Project Into PhoneGap

PhoneGap provides a command-line tool, named Cordova, to set up a

new project, build an application, run the application and install plugins.

STEP 1

To create our application, navigate to an empty directory and use

the createcommand:

$ cordova create fastip org.traeg.fastip FastTip

This command will create a subdirectory, named fastip, to hold our

application files and to establish a new application named FasTip, with

an org.traeg.fastipnamespace.

STEP 2

Switch to the fastip directory that PhoneGap has just created from the

command above.

Page 4: How to Build a Mobile Application: PhoneGap

STEP 3

We’ll need to tell PhoneGap which platforms we want this app to run

on. We’re supporting iOS and Android, so run the following two

commands to support them:

$ cordova platform add ios

$ cordova platform add android

STEP 4

We can test our project to see whether PhoneGap has been properly

initialized:

$ cordova build ios

$ cordova emulate ios

STEP 5

The next time the cordova build command is executed, the application’s

content will be copied to the respective platform directories, and the

application will be run with that new content.

Hope this article help you develop mobile applications for multiple

platforms.

Custom Web Development Agency : iMediadesign is full-serviced digital

agency, provides cost effective web design & development service in

toronto.