In this final step, we will add a finishing touch to our application and use another PhoneGap API for notifications to create a native popup. We’ll begin by creating a new page to view our saved projects. The page will look and behave similarly to the home page list but will be populated with just results from our database query.

Building the Page

First, let’s create a simple page to list the saved items which, again, will be very similar to the home page list. Name this page faves.html.

Loading Saved Items

Our saved items page doesn’t show anything yet because we need to load the saved items into the list when the page, favesHome, loads via the “pageshow” event. First, we need to load the data from our local database. This code will look similar to the database transaction code from the prior steps. Add this to index.js.

When the results are returned, we’ll loop through them to assemble and display the list in a manner very similar to the to the code that builds the list for the home page. You will note that we are simply reusing the project detail page here rather than creating an additional page. Also add this code to index.js.

Using the Notification API

You can test this in your browser at this point and, assuming you have saved a favorite or two, you should see the list populate properly and even be able to view the details page of a saved item. Of course, if you haven’t saved any favorites yet, the page simply remains blank. Let’s add a notification that let’s the user know that nothing has been saved. In order to do that we will use the PhoneGap notification API to launch a native popup.

Let’s change our txSuccessLoadFaves() method from earlier and add in an else to our if statement block.

We added an if statement around our notification API call simply so that it does not error when tested in the browser. However, since this API uses native alerts, it will not show in the browser and you will need to run it on a device to see it function properly.

The notification API allows you to define a callback handler for when the alert is dismissed. Let’s create this callback handler, and in it we’ll use the jQuery Mobile method to navigate the user back to the home page since we have no favorites to display for them.

function alertDismissed() {
$.mobile.changePage("index.html");
}

Below you can see a screenshot of the notification as it appears on my Android device. Clicking “OK” takes you back to the home screen. You can zip up your files and upload them to PhoneGap Build to test them on your device.

On Your Own

Obviously, while our app works, it isn’t quite complete. First, it could use some code cleanup. For example, we probably shouldn’t be putting all of our JavaScript into one file. Though this was done for the sake of simplicity of the tutorial, for long-term maintenance, we probably should separate out the various portions of our JavaScript code. We should also clean up all the console logs that are there for testing purposes. There are also probably some places we can prevent duplication such as in our database transaction methods and in our two jQuery methods to assemble the list of projects. a

Of course there are also a number of user-interface (UI) and functionality improvements we could do. If you want to continue this tutorial on your own, here are some ideas you can use.

Make the favorites persist when the app is closed and reopened (rather than rebuilding the table each time the application loads).

Allow the user to delete favorites.

Allow the search terms to be specified rather than hardcoded.

Allow the user to send repository details to a friend using the Contacts API.

Additional Resources

Hopefully this walkthrough has helped you get started using PhoneGap Build to create mobile apps but clearly this was just the tip of the iceberg. Thankfully there are a lot of great resources out there for you to continue learning. Below are just a few as well as a handful of alternatives to jQuery Mobile for your choice of mobile framework that you might consider checking out.

Related

Nice tutorial series. Thank you for providing back-links to previous steps in the series. One of my most frustrating experiences on the web is Googling my way to an article halfway through a series where the author says “Here you’ll need to use technique x that we explained in the last article…” and never link to the preceding article. A small opportunity for improvement might be to mention at the top of each article (with the back-links) that this is a 7-part series… just so a reader knows there is more if they miss the “next part” link at the bottom.

I am sorry, I am absolute beginner. I wanted to add everyweek notification into my app, but I don´t uderstand anything from the documentation about the PhoneGap notification API. What is the “txSuccessLoadFaves() method”? What is the “method”, what is the ” to define a callback handler”, what is the “handler”. On Apache Cordova Documentation is also a lot of information… BUT i don´t have “Command-line”, what is the Command line? I am using dreamweaver only… On phonegap-plugin-localNotifications I have downloaded zip file with the tons of code, but understand absolute nothing… It’s all Greek to me completely… My colleague is a programmer, but he is also confused form the documentation of all phonegap plugins… Is it possible to learn it if i am total beginner? I don´t think so, but I don´t want to say my client: sorry, the notification into your app is not possible… Thanks!