PhoneGap Tutorial: A Cross-Platform Zombie App

PhoneGap is a mobile development framework that allows developers to build applications for a variety of mobile platforms, using familiar web technologies such as HTML, CSS, and JavaScript. By Dani Arnaout.

Leave a rating/review
Save for later
Share

Learn how to create a to-do app to survive the zombie apocalypse in this PhoneGap tutorial!

Learn how to create a to-do app to survive the zombie apocalypse in this PhoneGap tutorial!

PhoneGap is a mobile development framework that allows developers to build applications for a variety of mobile platforms, using familiar web technologies such as HTML, CSS, and JavaScript.

The concept is that you can develop one application using the PhoneGap architecture, and then deploy to multiple mobile platforms — without the need to re-write any code!

In this tutorial, you’ll learn the basics of using PhoneGap to make a simple to-do app, with a twist – it’s an app to help you survive the Zombie Apocalypse!

In the process, you’ll learn a ton about PhoneGap – such as installing PhoneGap, writing Javascript code, using local storage, and much more.

This tutorial assumes you have some basic familiarity with HTML, CSS, and Javascript. If you are new to these technologies you can still follow along with the tutorial, but you’ll be missing some background knowledge, so I recommend you read a book on those when you get a chance.

So if you think you have the brains, keep reading to get started – the zombies are waiting!

Getting Started

As with any new project, it’s always a good idea to plan ahead for what you’ll be building.

Here’s a sketch of what the app you’re developing will look like:

Basically this is an app to help you keep track of all the things you need to do in order to survive the Zombie Apocalypse.

The app’s logo sits at the top of the screen. Two buttons sit below the logo; one for adding a new task, and another for removing completed ones. When the user adds an item to their to-do list, a new table row will appear with four individual elements.

First, you have a checkbox which indicates a task’s status. Next is the content of the to-do item. Then, finally, there are two more buttons: one that will displays the text of the to-do item in a popup dialog, and another that will delete the to-do item.

The app will store the to-do list using the Local Storage API.

And, thanks to the graphic design talents of Vicki Wenderlich, this is how the final app will look:

Aww yeah. You’d never forget your zombie repellent spray if you had an app like that! :]

That’s it for the look and feel — time to take a look at how the app should behave.

  • Adding a task: When tapping the Add To-Do button, the user will be prompted to enter some text for their to-do list item.
  • Marking tasks as completed: The user will be able to mark tasks as completed by tapping the check box to the left of the task.
  • Removing completed tasks: Tapping the Remove Completed Tasks button will remove all completed tasks.
  • Viewing a task: When tapping the View button, the full text of the task will be displayed.
  • Deleting a task Tapping the Delete button will remove the corresponding task.

Altogether, it’s a relatively simple app. The purpose behind this PhoneGap tutorial is to demonstrate the development of a fully functional app without using any native code, and make it available on a variety of mobile platforms with nothing more than a single click!

Sound good? All right — time to get PhoneGap installed!

Installing PhoneGap

Note: If you already have PhoneGap and want to get started immediately, skip this section and download the starter project. If you choose to skip ahead, I encourage you to have a read through the official PhoneGap getting started guide and command line usage documentation, once you’ve completed the PhoneGap tutorial.

Head over to the PhoneGap website, and choose Download PhoneGap from the home page.

Click the big blue Download button on the next page to initiate the download, as shown in the screenshot below:

Unarchive the folder, and you might want to save it somewhere safe on your hard drive. And that’s all there is to installing PhoneGap!

It’s now time to create your project. Open up the Terminal app. It’s usually found in the Applications folder, within the Utilities folder. You’ll be presented with the Terminal interface, as below:

Type the following command in Terminal and hit enter (but replace the path with wherever your copy of PhoneGap is):

cd ~/Downloads/phoneGap-2.3.0/lib/ios/bin

Note: At the time of this writing, the most recent version of PhoneGap was 2.3.0. If the version you’ve downloaded is newer, then please replace the version number in the command above with the version you have.

To generate a new project, you need to use the command line script create, and pass in the project location, the bundle identifier and finally the project name as arguments to the call.

Type the following command into Terminal and hit Return to generate the project:

./create ~/Desktop/Zombie com.raywenderlich.zombie ZombieApocalypseToDoList

You’ll now find a Zombie folder on your desktop. Open it up, dive into the www folder and take a look at the files inside, as shown below:

The three key files and folders here are index.html, which is where you’ll be writing the app’s code; index.css, found in the css folder, which is used to style the look and feel of the app; and finally the img folder, which is where all the images for the app will be stored.

Go back to the top level folder and open up the ZombieApocalypseToDoList.xcodeproj file in Xcode.

In Xcode’s project navigator, open index.html. Then build and run your app. “Already?” you ask. Yes! Already! :]

You should see the following:

If your display matches the screenshot above, then everything is set up properly for your PhoneGap development environment.

Installation was a breeze – even the undead could have handled that one! :]

You’ll find that the coding of your PhoneGap app in the next section is almost as easy!

Structuring Your App

When your app first launches it displays index.html, so in this section you’ll edit that to give your app some bones to build upon.

Replace all of the existing template code in index.html with the following:

<!DOCTYPE html>
<html>
    <head>
        <title>Zombie Apocalypse To-Do List</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
        <script type="text/javascript" language="JavaScript">
            
        </script>
    </head>
    <body>
        
    </body>
</html>

What you see above is the main structure of any HTML code that leverages JavaScript; it contains html, head, body, and script tags. On a standard web page, JavaScript is usually found between the head tags, while the HTML lives between the body tags.

Now you’ll need to structure the app as designed in the mockup above. Recall that there were two main buttons at the top, followed by a table.

Add the following code to index.html between the body tags:

<input type="button" value="Add To-Do"/>
<input type="button" value="Remove Completed Tasks"/>
<br/><br/>
<table id="dataTable" width="100%" border="1">

</table>

Build and run your app! If all goes according to plan, it should look like this:

With a few simple lines of code, you now have some functional buttons displaying on the screen.

Now you need to add some logic behind the buttons to really bring your app to life!

Dani Arnaout

Contributors

Dani Arnaout

Author

Over 300 content creators. Join our team.