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.
Bringing it All Together
Phew - finally done - just one final bit left to see this working!
Calling the functions you created above is quite simple. You're just adding the relevant function call to the onClick property of the UI controls.
Add the following code between the body tags of index.html:
<body onload="loadToDoList()">
<input type="button" value="Add To-Do" onclick="createNewToDo()"/>
<input type="button" value="Remove Completed Tasks()" onclick="removeCompletedTasks()"/>
<br/><br/>
<table id="dataTable" width="100%" border="1">
</table>
</body>
In the code above, loadToDoList() is called when the page is first loaded. As well, createNewToDo() and removeCompletedTasks() are called when their respective buttons are tapped.
Build and run your app! It should look similar to the screenshot below:
One of the disadvantages of JavaScript is that it's an interpreted language. Unlike a compiled language such as Objective-C, JavaScript will execute the code line by line until an error occurs. If an error does occur and it's not handled properly, the app will likely crash.
Feel free to play around with the app; add some tasks and then delete them.
Well, the app seems to work okay - but it's pretty bland! You can't save the world with a corporate-looking app like that!
Don't worry — the next part of this PhoneGap tutorial will walk you through polishing the app to a standard that any zombie warrior would be proud of! :]
Oppa Zombie Style - Reworking Your App's Graphics
Now that the app fully functional, it's time to make it look great.
Download the necessary images here, and copy them to the img folder of the project.
Blood? Boards? Nails? Yup, sounds like an awesome header image for your app! :]
Add the following line to index.html, just below the opening body tag:
<img src="img/header.png" width="100%" />
This inserts the header image into your app via the HTML img tag.
Since you're using web technologies at the heart of your application, you'll be using CSS to influence how the rest of your app looks. Buttons, backgrounds, and other elements in your app can all be controlled by the definitions in your CSS files.
Each UI element that you want to style requires a class element — this indicates which style(s) in your CSS should apply to the element in question.
You'll begin your foray into CSS by styling the buttons in your app.
Update the existing button related code in index.html as in the code block below:
<button type="button" class="addToDo" onclick="createNewToDo()"><img src="img/button_addtodo.png" /></button>
<button type="button" class="removeTasks" onclick="removeCompletedTasks()"><img src="img/button_removetasks.png" /></button>
Notice that you added a class attribute to each button; this will allow you add a CSS style to it later. As well, each button now contains a reference to an image file that will be displayed, instead of the default buttons of the host UI.
You now need to add class attributes to the checkboxes, the textboxes, as well as the other buttons in your app so that they can also be styled using CSS.
Update the JavaScript section of index.html, adding the lines below:
...
element1.setAttribute("onclick","checkboxClicked()");
element1.className = "checkbox"; // ADD ME - Add the class name 'checkbox' to element1
cell1.appendChild(element1);
...
element2.setAttribute("onchange", "saveToDoList()");
element2.className = "textbox"; // ADD ME - Add the class name 'textbox' to element2
cell2.appendChild(element2);
...
element3.setAttribute("onclick", "viewSelectedRow(document.getElementById('text' + this.id))");
element3.className = "viewButton"; // ADD ME - Add the class name 'viewButton' to element3
cell3.appendChild(element3);
...
element4.setAttribute("onclick", "deleteSelectedRow(this)");
element4.className = "deleteButton"; // ADD ME - Add the class name 'deleteButton' to element4
cell4.appendChild(element4);
...
Now it's time to define all of the styles you've been referencing in your HTML above.
Open index.css (found in the css folder of your project), and find the following lines at the top:
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;
Those lines were providing the background gradient effect, which you won't need in your app. You'll be replacing it with something more fitting to your post-apocalyptic masterpiece!
Replace all of those lines with the following one line of code:
background-image: url('../img/bg_pattern.png');
That indicates that the background of the app is now just represented by a single image resource.
Scroll to the very end of index.css and add the following code:
.addToDo {
background-color: Transparent;
border-color: Transparent;
float: left;
margin-left: 0;
position: absolute;
left: 0px
}
.removeTasks {
background-color: Transparent;
border-color: Transparent;
float: right;
margin-right: 0;
position: absolute;
right: 0px;
}
.checkbox {
background-color: Transparent;
background-image: url('../img/check_box.png');
width: 34px;
height: 32px;
}
.textbox {
background-color: grey;
}
.viewButton {
background-color: Transparent;
background-image: url('../img/button_view.png');
width: 64px;
height: 32px;
}
.deleteButton {
background-color: Transparent;
background-image: url('../img/button_delete.png');
width: 64px;
height: 32px;
}
Each style class above — .deleteButton, .viewButton, and so on — defines the appearance of each UI element by way of setting such properties as width, height, background color, and positioning, among other things.
For example, every checkbox in your app does not need to be individually styled when it's defined; it just needs to reference the .checkbox class and it will take on the characteristics defined in the CSS.
Ready to see how it all works together?
Build and run your app! It should look like the image below:
Wow! Quite a difference, isn't it?
The changes that you can effect with simple CSS are quite stunning. Just by adjusting the dimensions of the buttons and adding some graphical elements to your app, you've really made your app "pop".
Okay, so your app is complete! But you need to get it out to all the other zombie hunters in the world - and you can bet that they own a mix of mobile devices. What to do?
One of PhoneGap's great features is that you can publish your application to various platforms without changing a bit of code. There's a few steps that you need to follow in order to get your app published — but it sure beats rewriting code! :]
Putting the "Gory" in App Store Category - Publishing Your App
First of all, you need to compress your project prior uploading it to Adobe Build.
Head to your desktop, right click on your Zombie folder and choose Compress "Zombie".
Launch the browser of your choice and head on over to http://build.phonegap.com to get started. Just click the big blue Get started! button to initiate the publishing process, as such:
You can investigate the paid plan when you have a need for more private apps, but for the purposes of this PhoneGap tutorial, choose the free package, as below:
If you have an existing Adobe ID (or wish to create a new Adobe ID), you can use that option to login. If you don't have or want an Adobe ID, you can also use your GitHub account to log in, as seen below:
If you choose the GitHub option, you'll need to authorize the login attempt.
Once you've authorized your GitHub account login, or chosen to use an Adobe ID, simply choose your country, agree to the Terms of Use and click Complete my registration.
Now you're ready to upload the compressed archive you created earlier.
Click Upload a .zip file and choose the Zombie.zip archive located on your desktop. Once the archive has finished uploading, click the Ready to build button, like so:
Once the build is done, you'll see a screen showing the compile state of the multiple mobile OS that PhoneGap supports. Notice that both the iOS and Blackberry indicators are red, while the others are blue, as shown in the screenshot below:
This indicates that there were issues when building the application for that particular platform.
In order to build your app for iOS, there are a few more things that you need to take care of.
Click the iOS button. You'll end up at the screen below:
Aha! It turns out you need to provide two more pieces of information to compile your app under iOS: your developer certificate and a provisioning profile.
If you've been doing iOS development in the past, you already have a certificate, so let's export it. If you don't already have a certificate, check out Apple's App Store Submission Tutorial.
Using Spotlight, search for KeyChain Access. If you previously installed your developer certificate issued by Apple via the provisioning portal, this is where you'll find it.
You now need to export the certificate.
Choose the My Certificates category, right-click the iPhone Distribution... certificate and choose Export "iPhone Distribution..." from the popup menu, like so:
Save the exported certificate to your desktop, making sure it's in the Personal Information Export (.p12) format. Choose a password for this certificate and enter it. You'll need this password along with your certificate later, so choose something that's easy for you to remember (but hard for the zombies to guess!).
Finally, click OK, and your desktop will now contain your exported certificate.
Now that you have your certificate, you need to generate a provisioning profile. To do this, head to developer.apple.com and sign in with your iOS developer account.
To get started with your provisioning profile, you'll first need to create an App ID for your Zombie Apocalypse app.
Choose App IDs from the options on the left. On the next page, click New App ID. Complete the form as necessary, making sure to enter com.raywenderlich.zombie for the Bundle Identifier, since that's what you used earlier when first generating the initial project using PhoneGap.
Your form should look similar to the screenshot below:
Finally, click Submit.
Now that you've created an App ID for your new app, choose Provisioning from the options on the left. On the next page, select the Distribution tab and click New Profile. Fill out the form as necessary, selecting the App ID you just created, and select the devices on which you plan to install the app.
Finally, click Submit. The page will now generate your provisioning profile.
Once the portal has finished generating the profile, download it to your desktop. You may need to refresh the page a couple of times to see when it's complete.
Now that you have both your certificate and provisioning profile, head back over to the Adobe Build site, enter a name for your app, and upload your certificate and your profile as shown below:
Click on the yellow lock icon and enter the certificate's password that you created previously, as such:
Finally, Click Submit key. After a short wait, you will be presented with a button on the top of the screen to download the .ipa file as shown here:
Download the .ipa file, and install it to your iOS device by simply dragging the file into iTunes and then syncing your device.
w00t - you are now prepared for the worst - fill in your to-do list and get your shotgun ready!
As you've seen, iOS requires a few additional steps in order to build the app using Adobe Build. However, it is very much a one-click process for other platforms such as Android, where you can directly download your builds without any extra steps required!