Let’s overshare our obsessions 24/7. It’s healthy.

  • The coolest finds deserve to go viral.
  • TellStuff you might want to know. You know?
  • CreateA treasure trove of delights.

Building My First PhoneGap App

Create

app-splash-small

Continuing your education as a developer is very important if you want to maintain your desirability in the job market, as well as your value to your company. At Taylor Design, we are encouraged to take on new challenges and learn new things to benefit us personally, as well as Taylor Design itself, so I decided to figure out how to build a mobile application. Over the course of a few days and nights, I finally put the finishing touches on version 1.0 of my first app. Read on to find out what I learned, and hopefully some of it will be valuable for other developers looking to build their first app.

The App Idea

To build an app, the first thing you need is an idea. For my first app, I wanted to do something simple, but not so simple that it would essentially be useless. At Taylor Design, we have a website that we use to aggregate praise and testimonials from clients called Highfives. My idea was to somehow scrape the testimonials from this site and aggregate them into a mobile friendly format for easy viewing on our phones.

What I ended up with was just that. To achieve this, I installed a WordPress plugin (WP API) to the Highfives website that allowed it to output the site content as a JSON feed. In the mobile app code, I used Javascript to grab onto that JSON feed and generate the HTML needed for the app to display the testimonials. Lastly, I hooked into the mobile phone’s accelerometer to allow the app user to cycle through the testimonials by shaking the phone.

Picking the Platform

For mobile apps, you can either create apps natively (using the platform’s native coding language and API) or you can create a web app within a wrapper that hooks into the phone’s native features and API. Being a front-end web developer, this was a no-brainer for me. I chose to do the web app in a native wrapper approach, otherwise I would have had to learn a brand new coding language and slog through that JUST to build a super basic app. Using just HTML, CSS and javascript, I could dive right in and code the app with languages I already knew and get a very competitive application as a result.

There are currently many HTML/CSS/javascript frameworks available to developers to create phone apps. I chose to go with PhoneGap (a branch of Apache Cordova) for my first app. It was the first framework I heard about and it seemed to have a decent amount of support. Plus, I could use my favorite front-end frameworks as well like Twitter Bootstrap.

 

The splash screen on my app.

The splash screen on the Taylor Design Highfives app.

Setting up the Development Environment

I’m not going to lie, the bulk of the development time was spent setting up my development environment. I had never attempted to create a mobile app before, so I was going in blind. I ended up going through several dev environments until I figured out the correct one for me. Here is how I setup my (Mac) development environment:

1. Install BrewBrew is a command line program for Mac. It lets you easily install all the software you need to get the development environment going.

NOTE: any commands following this should be entered in Mac’s Terminal app. Here is a quick guide on using terminal’s command line interface.

2. Setup Node.js – In order to install PhoneGap itself, you have to first install node.js. The brew command for this is:

“brew install node”

3. Install Apache Ant  – Another prerequisite to installing PhoneGap is Apache Ant. You can install this from brew as well with the command:

“brew install ant”

4. Install Phonegap – Now it’s time to install Phonegap. Use the following command in terminal to install it:

sudo npm install g phonegap”

5. Setup an App – Setting up a PhoneGap App is actually very simple. First you must navigate in the command line to the directory you want to add your app to. Check the guide above on how to navigate folders within command line (it’s very simple). When you are ready to add the app, enter this command:

phonegap create myfirstapp com.myfirst.app MyFirstApp

Once the command finishes, you can navigate to the selected folder in finder and see that PhoneGap has added in a default project with files for you to work into, along with their default “Hello World” app files.

 

The Taylor Design Highfives app icon on my Android phone.

The Taylor Design Highfives app icon on my Android phone.

Developing and Testing the App

Now comes the fun part, actually building your app! Since PhoneGap creates an app out of HTML, CSS and Javascript files, you can build the app in your browser. All my app does is capture JSON data with javascript and format it on the screen in a readable design. This was fairly easy to do with javascript and I had it working in a few hours.

The tough part came when I tried to figure out how to tie into phone parts such as the accelerometer. The documentation on the PhoneGap site wasn’t very helpful (at the time), so I had to scour the internet for bits and pieces to figure this part out (Phonegap’s documentation has gotten a bit better since I looked to build my app, so take a look there if you choose to try yourself).

For my basic app, I kept all the app functions inside the standard PhoneGap onDeviceReady function. Any code inside this is enabled after the PhoneGap library is fully loaded into your phone. The only problem was that none of the javascript would work for me when I loaded this in the browser or it would fire some of the functions twice.

I came to figure out that the app must be loaded into an emulator, either on your phone, on a phone emulator on your computer or in your browser on a PhoneGap emulator (this came after hours of Googling I might add). I tried all the options and none seemed to work perfectly for me, until I found the browser Phonegap/Cordova.js emulator, Ripple. It is a Google Chrome extension and using it was fairly easy once you figure out a few things.

  1. You must load a very specific local version of Cordova.js into your app’s index.html file. It is the Android version from version 2.0.0 of Phonegap. Do NOT use the iOS version or the cordova.js file from PhoneGap version 3.0.0+!
  2. Once you have finished developing in your browser, make sure to remove the reference to the local copy of cordova and go back to the way the default index.html file references the cordova.js script. The build process will add in the needed files for it to work on a phone.

Once I had the emulator working, I was able to use scripts that tied into the phone’s functions, such as the accelerometer in my case. The emulator also lets you trigger the various phone devices from within the browser (such as a virtual shake to trigger the accelerometer). The other great thing about Ripple was that I could inspect the code in the app using the Chrome web inspector, which is something I really wanted from the PhoneGap Phone App.

Lastly, I wrote the code that refreshed the on screen testimonial when the phone was shaken and my app was basically ready to go.

General Performance/Coding Tips

In my opinion, two of the most important things in a phone app is performance and speed. When creating a phone app (or mobile website), you obviously want it to operate as fast as possible. This includes animations and load times. If your app requires an internet connection and the user is in a place with slow or spotty cell phone coverage, they can still have a somewhat smooth experience with your app by utilizing CSS3 animations and some clever javascript techniques to make your app appear to be more responsive than it might actually be.

In my app, I have several animated transitions. Some are movement based (items slide around on the screen) and others are opacity based (things fade in and out of sight). For both of these, I used some simple CSS3 transitions based on CSS class additions and removals. That’s a cool thing about CSS3 animations: you can trigger them by simply adding a CSS class to an element in your HTML code (or removing it). The result is a buttery smooth animation. Now you may be asking, why not simply use javascript or jQuery to accomplish the animations? The answer is, on mobile devices, javascript animations are not nearly as smooth as they are in your desktop browser. That normally smooth sliding animation looks like a jittery mess on a phone. CSS3 animations are hardware accelerated on phones and take up less CPU power. That’s why they are so much smoother in most (if not all) cases. The other thing is that using a javascript library like jQuery adds load time to your app or web page. As of now, mobile internet speeds aren’t the best everywhere in the world, so some users would be forced to download a bulky jQuery source file before the app would work.

Another interesting performance tip I found had to do with a function built into native phone internet browsers. Every WebKit based mobile phone browser will automatically add a 300 millisecond delay after a finger tap to make sure the user isn’t going to go for a double tap. Why is this important? Well if you are designing a phone app, you don’t want a delay after every single tap in your app. It makes it feel much slower. If you want a double tap feature in your app, you can add that in yourself with javascript and only target certain items with the ability to be double tapped. Luckily, there are small javascript libraries available just for this purpose. The one I used was the fastclick library. It simply removed the 300 millisecond delay. Perfect!

Generating the App for Phones

After I finished up my app and tested it, now was the time to actually package it up as a real app and add it to my phone. Exciting! Luckily for me, PhoneGap has a great application build web app on their website. What you do with this is you upload your app code to the PhoneGap build page and it automatically generates the app file for you to install on your phone. There is nothing more to do than follow some simple instructions and you are ready to use it on your phone.

I proceeded to put my app through the build process and then installed it on my Android phone. There are a couple lingering things that I can clean up (such as the app’s title loading before the app itself loads in a bar across the top) but since this isn’t going to be submitted to any app store, I figured I’d just leave it.

The Taylor Design Highfives app loaded with a testimonial loaded from the main Highfives website.

The Taylor Design Highfives app opened with a testimonial loaded from the main Highfives website.

Closing Thoughts

So, I finally did it. I built a mobile phone app. This is something I’ve been wanting to do for a while, and finally doing it feels pretty good. By no means is it a complex or fancy app, but it is mine. I most definitely didn’t code it in the best or most optimized way, but it works. This is just another step in the constant learning process of being any sort of developer.

If anyone reading this has become inspired to give it a try themselves, I’ve included the main links I used to help me along the way of building my app. Hope they help others like they helped me!

PhoneGap Documentation

PhoneGap From Scratch

Using Ripple For PhoneGap Development

How to Use Ripple Emulator for Windows to Test PhoneGap Application

Fast Touch Event Handling: Eliminate Click Delay

Contact Us

We would love to hear from you! Please fill out this form and we will get in touch with you shortly.
  • This field is for validation purposes and should be left unchanged.

Newsletter Signup

Sign up to receive periodic email updates about our latest stories.