• Graphic 20 Tools PhoneGap 848px

20 Mobile App Tools for 2015 – Part 2 – PhoneGap

posted in: Software | 2

 

In this session, we’ll look at PhoneGap… including what it is, where it came from and mention some of the key alternatives to it for creating mobile apps using HTML, CSS and Javascript. At the core of any of these tools is Cordova, which we’ll talk about also.

 

Recall in Part 1 of this post series, we looked at the high level differences between the various mobile app Native Development tools provided by the major platform players Google, Apple and Windows.

 

Some of the advantages mentioned for the Native Development tools included –

  • The price (they are free)
  • Complete access to the platform API
  • Future-proof since supported by platform provider

 

Some of the main disadvantages of the Native Development tools included –

  • The need to learn multiple programming languages and development tools if targeting multiple platforms
  • Having to maintain and support multiple versions of your source code and project if targeting multiple platforms
  • Slower app development and launch time when compared to alternative cross-platform development tools

 

In the remaining parts of this series we will look at the Cross-Platform development tools which allow the developer to target multiple platforms such as Android, iOS and Windows Phone using a single source code, common programming language and minimal to no code changes when publishing to each platform.

 

Here in Part 2, we look at the rise of Hybrid mobile app development. Fundamentally, this allows someone to use web development technologies as an easy entry into the world of mobile app publishing if they want to create a non-game based app. The programming languages that you need to use are: HTML5, CSS3 and Javascript.

 






 

Cross-Platform Dev Tools: Hybrid Mobile Apps

 

Two names that you will find that always come up when looking to build mobile apps with HTML, CSS and Javascript are –

  • PhoneGap
  • Cordova

What each of these actually is and how they differ is often a source of confusion for newcomers and those experienced in mobile development. The backstory of PhoneGap / Cordova is this –

  • PhoneGap was first created by a Canadian company based in Vancouver called Nitobi in 2009
  • Nitobi was bought by Adobe in 2011
  • In 2011, Adobe then donated PhoneGap to the Apache Software Foundation (ASF) as an open source project under the name Cordova

 

You will find the terms Cordova and PhoneGap often used as synonyms with each other. As stated on the PhoneGap site, in simple terms you can think of Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers the Chrome or Safari browsers. PhoneGap is technically a free open source distribution of Cordova, which is a free open source project.

 

The simple graphic below shows that Cordova acts as an application container to wrap your web application in a native Web View that can be displayed on a mobile device. Since the Web View is a native application component, native device API calls allow your app to access features like the device camera, accelerometer, etc. Your application can then be easily compiled into a native application format such as Android (.apk file), iOS (.ipa file), Windows Phone (.xap file), and other formats and published to their respective app stores.

 

PhoneGap, Cordova overview image 700px

 

One of the fundamental things that was not obvious to me initially was that you do not have access to any of the devices native user interface components, like buttons, tabs, etc that you would simply add in a Native tool like Android Studio or iOS SDK. Therefore, your application’s user interface will have to be created entirely by you. The most efficient way to do this is to use a UI Framework of which there are many choices. Some of the more popular ones are JQuery Mobile, Kendu UI, Ratchet, Sencha Touch, Dojo Mobile and the Ionic Framework. Ionic has its own CLI (Command Line Interface) to manage project creation, in a similar manner to the PhoneGap and Cordova CLI interaction to be covered in the next section.

 

Graphic of popular UI Frameworks

 

 

I personally have taken both Ratchet and Ionic for a test drive and I like them both. If you don’t know HTML, CSS or Javascript I recommend doing a crash course to get up to speed first.

 

Alternatives to PhoneGap

 

It you are new to PhoneGap, below we will walk you through a simple demo app project using it. If you have tried PhoneGap but feel it doesn’t quite fit what you are looking for, I recommended checking out two of the top HTML/CSS/JS app development alternatives

 

  • Telerik AppBuilder, or
  • Ionic Framework

 

The latter option, Ionic Framework, has generated a huge amount of traction since the beginning of 2014. From the integration of Push Notifications with Ionic Push, to the new Drag-and-Drop interface builder called Ionic Creator.. the team behind Ionic are bringing awesome features and beautiful interfaces to web tech mobile app developers.

 

Ionic Framework App features 600px

 

 






 

Hybrid App Development: PhoneGap

 

PhoneGap-Capture-700

 

The PhoneGap site states that it has been downloaded over 1 million times and is being used by over 400,000 developers !

 

The main way for project creation and interaction is through the PhoneGap CLI. As an alternative to the CLI, the folks at PhoneGap have recently release a Beta version of the PhoneGap Desktop which will hopefully bridge the gap for people that prefer the feel of a GUI for project creation/management. You don’t need to be a pro in the Terminal for Mac or CMD on Windows, but you have to be able to know how to fire them up and to be able to use some basic commands.

 

Before running any command line tools you need to have the platform SDK‘s that you wish to target installed on your development machine (for example – XCode for iOS, Android SDK Tools for Android). The install process is a little bit convoluted, more so if you are targeting Android. To build for Android, you need to have an appropriate version of JDK (Java Development Kit), Apache Ant, and set an few path environment variables on your machine. Next, you install Node.js and the actual installation of PhoneGap or Cordova is processed by running the commands shown below –

 

On Mac or Linux, open the Terminal and run the following command –

On Windows, open up Command Prompt (CMD) and run the following command –

 

If installing the Cordova CLI, you simply duplicate the above commands but replace “phonegap” with “cordova”. Note: It is perfectly fine to install both the PhoneGap CLI and the Cordova CLI on the same machine. For detailed coverage of the installation sequence refer to the PhoneGap or Cordova CLI documentation.

 

To generate a PhoneGap app project using the CLI, we use the “create” command. In either the Terminal on a Mac or CMD on Windows, navigate to a folder where you would like to house your PhoneGap or Cordova project. Pick a name for your app project, we will chose ‘MyFirstApp’. For creating the app project you would enter – 

 

 

The 4th parameter in the command above is the app ID. This value refers to a domain-style identifier, like “com.example.myfirstapp”. This parameter is optional. The 5th parameter is the application’s display name. Note: the CLI does not like app names with spaces within the “create” command.

 

PhoneGap project folder structure

 

 

The view above shows a new directory called MyFirstApp that was created. There are several subdirectories including:

  • The hooks directory provides a place for us to modify the actual PhoneGap build process with custom instructions
  • The platforms directory is where each platform’s build file will be created
  • The plugins directory for any associated PhoneGap plugins we may install
  • The www directory is where most of the action happens

 

The PhoneGap CLI places a sample application in the www directory. Most of your actual development work will be within this www folder. The ‘index.html‘ file is used to start your phonegap application. The ‘config.xml‘ file is used to globally control many aspects of an app’s behavior, refer to the PhoneGap/Cordova documentation for a detailed discussion.

 

Back to the command line, you will want to include the platforms into the project that you wish to target. Assume you are targeting Android, the command would be –

Once this is completed you will find an “android” folder under the “plaforms” directory in your project. At this point the appropriate folder structure and platform resources have been setup, but the project is not actually built. To build the project with all the necessary Android build files, including the .apk output files, use the following command –

Note: Both Java and Apache Ant need to be configured correctly on your machine when building for Android.

If you have not edited the main ‘index.html’ file, you will find PhoneGap sets up a basic single page sample app skeleton by default. From here you can launch in the platform emulator / simulator or install on a connected device using the PhoneGap Developer App. To launch on either the platform emulator / simulator you use –

 

The best way to view your app during development is to use your own device in conjunction with the PhoneGap Developer App. The only requirement is that both your development machine and your mobile device are on the same network. You can use your iOS, Android or Windows Phone device you view you app as you make it. To make this work you first download the PhoneGap Developer App from the appropriate app store for your mobile device.

 

PhoneGap Developer App Page

 

Once you have the PhoneGap Developer App installed on your mobile device, switch back to your development machine and ensure you are still in your project folder within the Terminal on Mac or CMD on Windows. Next, use the following command –

 

When the “serve” command is executed take note of the IP address that belongs to your development machine. Next launch the PhoneGap Developer App shown below and enter the IP address of your development machine along with port 3000 (middle screen below). If all worked correctly you should see the default PhoneGap skeleton app appear on your mobile device (right screen below).

 

PhoneGap_Dev_Seq_1-848

 

You can then make live edits to your project files, such as the edit shown below to the <h1> tag in the file ‘index.html’. Here I change the <h1> tag from the text string “PhoneGap” to “My_First_App”,

 

Edit_The_Title_PhoneGap-700

 

and within a few seconds you will automatically see the change streamed to your device like the following –

 

PhoneGap_Dev_Img4

 

 

 

Since Cordova is the engine behind the PhoneGap platform, there has been a targeted effort to align PhoneGap more closely with Cordova’s features and commands. A major update to the PhoneGap CLI is discussed on the PhoneGap blog which talks about the alignment efforts, depreciated commands, etc.

For the latest information on the Cordova open source project, check out its Apache home page at http://cordova.apache.org as shown at the site below –

 

Apache-Cordova-Capture-700

 

So if you are going to develop a mobile app using HTML5, CSS3 and Javascript, being familiar with PhoneGap and Cordova is a must !

 

In a future session, we’ll discuss in more detail the alternative contenders to PhoneGap such as Telerik AppBuilder and Ionic Framework (which at their core… still use the Cordova engine under the hood).

See you next time….

 

2 Responses

Leave a Reply