This is the third installment in a series covering four ways to develop a mobile application. In previous articles, we examined how to build a
native iOS and
native Android tip calculator. In this article, we’ll create a multi-platform solution using PhoneGap.
Adobe’s PhoneGap platform enables a developer to create an app that runs on a variety of mobile devices. The developer accomplishes this largely by writing the user interface portion of their application with Web technologies such as HTML, CSS and JavaScript. PhoneGap’s development tools then bundle the HTML, CSS and JavaScript files into platform-specific deployment packages. PhoneGap supports a wide variety of platforms:
- iOS
- Android
- Windows 8
- Windows Phone 7 and 8
- BlackBerry 5.x+
- WebOS
- Symbian
- Tizen
For this article, we’ll focus on getting our sample FasTip application running on iOS and Android:
As with the previous articles in this series, all of the code for our application may be obtained from a
GitHub repository.
Applications built with PhoneGap use the mobile platform’s Web view to render content. As such, the content will appear nearly identical on each platform, much as any Web page would. While you can style the controls differently on each platform, take care in doing this. This issue is covered in detail in the section below on
multi-platform considerations.
Plugins: Closing The Gap On Native Features Link
PhoneGap essentially wraps a Web view of your HTML, CSS and JavaScript in a native application. This is required because the Web view in an application does not inherently support many device features, such as access to the file system or the camera. PhoneGap has a bridging mechanismthat allows JavaScript running in the Web view to invoke native code contained in the application. PhoneGap comes complete with plugins to support device capabilities such as the following:
- accelerometer,
- camera,
- contacts,
- file system,
- media playback and recording,
- network availability.
A full list of capabilities for each platform is available
on PhoneGap’s website. If these capabilities aren’t enough, PhoneGap may be extended with plugins that enable the developer to access more device features, including these:
- barcode scanning,
- Bluetooth,
- push notifications,
- text to speech,
- calendars,
- Facebook Connect.
In previous versions of PhoneGap, a GitHub repository contained a set of
prebuilt plugins. With the arrival of PhoneGap 3, a new plugin architecture has resulted in the old repository being deprecated. A
registry has been created for all plugins compatible with PhoneGap 3.
Some command-line tools are also provided to make it easy to add the plugins to the repository for your project. We’ll see these later on in this article. PhoneGap also publishes documentation and examples on how to
write your ownplugins. Of course, development of plugins assumes familiarity with the native platform on which the plugin is to be supported.
An HTML, CSS And JavaScript Foundation For Mobile Development Link
The majority of PhoneGap’s capabilities lie in non-visual components — things that access the file system, network availability, geolocation, etc. PhoneGap does not provide much assistance with building the user interface itself. For this, you must rely on the HTML and CSS foundation that you’ve built yourself or on a framework. Applications written for mobile browsers must respect the limitations of the given mobile platform (processing speed, screen size, network speed, touch events, etc.).
Unless you have been working with HTML and CSS for a long time and are well aware of these issues, developing an effective mobile application without some sort of framework can be daunting.
Fortunately, some mobile frameworks have arisen to helpwith this. Here are just some of the offerings in this area:
These frameworks vary from CSS-oriented libraries (like Topcoat) to complete MVC-based libraries with sets of mobile UI controls (like Sencha Touch). Discussing the differences between these frameworks in detail is beyond the scope of this article and would require an entire series of articles. Visit the websites above and try some of the demonstrations on several mobile devices.
One distinction to be made is that some frameworks support a wider variety of devices and device versions than others. Some mobile frameworks are built on a particular MVC platform. For example, Ionic is built on the
AngularJSframework. This might make a particular library more attractive to developers who are already familiar with the respective MVC framework.
Frameworks such as Sencha Touch abstract the DOM from the developer through the use of APIs, freeing the developer from having to worry about details of browser vendor implementations. Sencha also provides graphic development tools, such as Sencha Architect, to aid the development process. Sencha provides commercial support and training, too, which are worth investigating.
I’m often asked to recommend a framework for mobile development. But the right tool depends largely on your application’s functionality, the mobile platforms you need to support, your demand for commercial support and your experience with Web and mobile development in general. I’m encouraged by some emerging frameworks, particularly Ionic, but as of the time of writing, Ionic is still in the alpha stage. If you are looking for something with a longer track record, then Sencha Touch or, for some cases, jQuery Mobile might be appropriate.
To be expedient and because of the wealth of tutorials and documentation available, I’ve written our FasTip application in jQuery Mobile, which provides a wide range of support for mobile devices. It’s a good choice for applications that do not require significant customization to the user interface. The simplicity of our application makes it well suited to jQuery Mobile.
http://www.webcreativeservices.com/four-ways-to-build-a-mobile-application
