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.
Picking the Platform
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 Brew – Brew 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.
Developing and Testing the App
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).
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.
- 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+!
- 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
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.
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!