News

How to develop with PhoneGap

step_011

HOW TO DEVELOP WITH PHONEGAP

Install PhoneGap

We’re going to be using the PhoneGap framework to develop and deploy our web app. Start by visiting phonegap.com and installing the framework. The process is similar for any of the frameworks, so if you’d rather use an alternative you can do so. Keep in mind that if you have a Creative Cloud subscription, you’ve got a PhoneGap account already.

Create your project

There are a range of resources available on the PhoneGap website to help you get started quickly with your app build. If you want to manually create a project from scratch, open your computer’s command line interface (such as Terminal on a Mac) and use the Create keyword command to generate your project.

001 ./create ~/Desktop/MyToDo com.yourdomain.    mytodo MyToDo
002

Open the project

Once you’ve run the command shown in the previous step, you’ll find a folder on your desktop with the entire framework you’ll need for your completed project. Notice all of the different folders and files that have been generated by PhoneGap. Many of these should look familiar, as you may use the same naming process for some of your websites.

Compile and test

You’ll need Apple’s XCode environment to compile your PhoneGap project for iOS. If you haven’t already got this, download it from developer.apple.com or visit the Mac App Store to grab a copy. You should be able to simply select the project from your desktop, compile and test within the iPhone emulator.

Create your content

Now you’ve proven the concept, it’s time to develop the specific functionality you want to include within your project. In our case we’re going for a very simple to-do list app that allows the user to create and mark as ‘Done’ a basic list of tasks that need to be completed.

Write in HTML and JS

At this stage, you can think of your development process in the same way you’d develop any other website. Keep in mind that there is no server in this environment; if you want to access a database to store your information then you’ll need to read the documentation for your different options.

Test in your browser

Although you can compile your app repeatedly as you go, it’s often much quicker to test in your browser – we’re dealing with simple HTML, CSS and JavaScript after all! Do note, though, that device-specific functionality won’t work until you compile the complete app.

Build and go

When you’re happy that you’ve developed the functionality to the extent that it’s ready for your users, complete the build. Note that you will need to generate additional assets for any splash screens and icons – refer to the relevant documentation for either PhoneGap (available at bit.ly/HoIGjF) or your chosen platform for full details on how to put these assets in place.

Submit for approval

Finally, depending upon the platform you’re publishing for, you’ll need to submit your app for approval. In the case of the iOS App Store, this means you’ll need an Apple Developer Program account, which costs $99/year. Sign up at developer.apple.com/programs/ios bearing in mind you may need documentation to complete the sign-up procedure.

GOING MOBILE

The mobile space is perhaps more exciting than the desktop as it offers, for many developers, relatively unchartered territory. The shift towards mobile devices is exemplified by the range of frameworks and tools available for compiling web apps into native apps for all the popular operating systems.

When Apple first launched the iPhone in 2007, there was no such thing as the App Store and there was no option to install applications on the device. Nevertheless, developers were able to create rich, app-like experiences directly in the built-in Safari browser on the phone. These early experiments demonstrated both the capabilities and potential of the web platform on a mobile device. Once Apple created the App Store, much of the focus of developers moved from web-app-powered solutions to native, installable apps.
In many ways, this was a backward step for app development. While it’s true to say that some apps will always be best suited to being developed using the native tools, much of the content on the popular App Stores could be developed using web technologies. Increasingly these apps are being developed as web apps, packaged up as a native app using services such as PhoneGap or Titanium.

Just as on the desktop, these frameworks provide an environment in which web technologies can be used, but with the added benefit of device-specific APIs and tools. This is one of the key strengths of the web app approach: by extending JavaScript with a set of classes specific to the device profile, web developers can access rich data covering the likes of device orientation, GPS co-ordinates and tilt actions. Additionally, the touch-centric input characteristics of modern mobile devices present exciting new opportunities for unique and innovative user interfaces that can be quite easily implemented using web technologies.

5 KEY DIFFERENCES BETWEEN PLATFORMS

Some solutions have gone a stage further than simply allowing access to native hardware. Libraries that simplify the generation of assets, provide boilerplate solutions to common layouts and abstracted access to 3D rendering all contribute towards the capabilities of web apps on mobile devices.
Increasingly it’s becoming difficult to pick out web apps from their native competitors as the differentiation between what’s possible with each approach blurs. If you’ve got experience as a web developer, you’re only a small step away from developing fully-fledged mobile apps – and there is so much more left to discover.

Desktop computers have resizable windows, while mobile devices tend to have fixed windows.
Mobile devices typically include a touchscreen interface, while desktop and laptop computers rely on a keyboard/mouse combination.
Mobile devices increasingly offer a superior screen resolution to that found on the desktop.
Mobile devices often have more specific hardware that can be accessed, including the likes of accelerometers and GPS units.Most importantly, mobile devices tend to be used away from the desk, while desktop and laptop computers are typically used in a static position.

FROM WEBSITE TO APP

 Install DeskShell

For this project we’re going to use the open source DeskShell project, which currently uses the Chromium project to provide a web environment in an app, including the ability to run PHP and Node.js projects! Visit deskshell.org and download the appropriate package for your operating system. Install it, downloading Chromium as prompted (if necessary).

Launch DeskShell

DeskShell works like a website itself, with different tabs across the top of the page, and content below. You can access all the documentation directly from this menu, as well as the packager tool itself. To get started, launch the DeskShell app, and click on the AppWizard tab. Once on the AppWizard page, click the Launch App Wizard button.

Complete the information

When you’re building a desktop version of your website, you need to configure some basic options for the environment. Start by choosing a window size for the app. Next, name your default document, and finally choose your backend environment. We won’t be using the backend for this example, so it doesn’t really matter which option you decide to go for.

Launch the app

Click on the Launch App button and you’ll get a build of your application, complete with a placeholder default web document. You can open the application’s folder by clicking on the Open App Folder button within the wizard. The file system should look quite familiar, as it mirrors many web servers.

Explore the files

Once you’re navigating through the file system, you’ll see that the most basic DeskShell project contains one folder with an index.html file within it, and two files at the level above. To use your own content, all you have to do is simply place your existing website inside the htdocs folder. That’s it!

A word on the backend

Alongside the ‘app.desk’ file, you’ll see an app.js file in the level above the htdocs folder. This is a regular JavaScript file that is run by Node.js, and handles the app set up and backend for you. Having access to a backend system is handy if you need to access resources such as the local file system (which wouldn’t normally be accessible to a sandboxed web app).

Create it manually

If you’d rather create your application folder manually, you can recreate the same folder structure as generated by the AppWizard, and create your own app.js file to describe the parameters of your app – see the example above. If you don’t have your default document named index.htm, simply update the code to reflect the name of your choice.

001 {
002    “name”: “webapp1”,
003    “version”: “1.0”,
004    “author”: “you@yourdomain.com”,
005    “description”: “My web app”,
006    “licence”: “MIT”,
007    “htdocs”: “htdocs”,
008    “frontend”: “chromium-portable”,
009    “backend”: “none”,
010    “width”: “640”,
011    “height”: “480”,
012    “defaultLocation”: “index.htm”
013 }

Test and deploy

While you’re working on your app, you can use standard browser shortcuts such as F5 to refresh the content of the app window. Because you’re running a browser in a window in essence, you can use all the standard front-end libraries and frameworks. When you’re ready to deploy, just return to DeskShell and click on the Packager tab.

Package and distribute

Finally, you can now choose the output properties for your app, and click on the Package App button in order to package your app ready for distribution. The window below the buttons shows the progress of the pack, and you will end up with either an ‘.appfs’ file (Mac) or ‘.exe’ file (Windows) which you can distribute without any other assets.

WHAT NEXT?

One of the major benefits of developing apps using web technologies is that they’re both rapid to prototype, and rapid to iterate. As more features from the CSS3 module specifications become W3C standards, so the visual effects possible using native web-based rendering expand.

As well as developments in the standards themselves, the hardware being used to run web apps is also rapidly changing. Different platforms are competing to present innovative hardware and software in a bid for customers. As a developer this provides a stream of new capabilities and creative possibilities. Examples of recent developments include the ability to generate push notifications on iOS, native capture of hardware accelerometer data and in-app billing.

But it’s not only about smartphones and tablet computers: the desktop remains a hugely viable delivery platform, not to mention the web itself. In a similar manner to the smartphone, desktop and laptop computers are developing apace. Recent innovations include the introduction of HiDPI displays, while on the web Microsoft have just released Internet Explorer 11, alongside the release of Windows 8.1. It’s an exciting time to be involved in web app development! Be sure to keep checking Web Designer for the latest news and developments.

×