Build an iPhone app in five days with PhoneGap and Framework 7
At the start of 2015 I made a resolution to publish an iPhone app into the App Store. As December rolled around, I still hadn’t achieved that goal. So I set myself a task of creating a fully functional iPhone app in just five days. And, mostly, that’s what happened.
The app: New Zealand Access Radio
The intention of my app was to provide a list of live audio streams from ‘Access Radio’ stations across New Zealand. Access Radio is a type of public-service broadcasting, where 12 regional radio stations provide a voice for their local community, with each hour (or half hour) containing a different type of radio show. Broadcasting regulations allow these stations to give preference to four types of show: Those for women, children/youth, people with disabilities, and the mix of ethnic cultures that exist within the local region.
Strictly not my ‘first’ app
In January/February 2015 I had used my summer break to create a similar iPhone app for just one station. I had started my broadcasting career at Radio Southland in Invercargill, so I decided to create a ‘test app’ which I’d use to learn the process of building a mobile app.
The app was very functional when completed (with a live audio stream, profile pages for each show, and a broadcasting timetable). However, the team at Radio Southland were not interested in acquiring it because there was already another app being developed by their governing organisation, which would service all 12 Access stations.
But, nearly one year on, I’m yet to see that particular app appear on the App Store. And so, here we are, creating an app that will serve this exact purpose.
PhoneGap/Cordova
The development style that I decided to use was hybrid development, where the application is actually just a collection of HTML/CSS/JS files, wrapped in a native Objective-C application. You’re probably already familiar with PhoneGap, the hybrid development platform which uses the Cordova core. (Yes, Cordova and PhoneGap are almost the same thing. Cordova is open-source, and PhoneGap is owned by Adobe, which allows it to have more professional features like cloud building of apps.)
PhoneGap is an excellent way to quickly get started in app development, especially if you already have a background in building web pages. PhoneGap allows your web page to access functions that are ordinarily beyond the scope of a mobile web browser, such as being able to read the phone’s contacts list, use TouchID, discover if the user is on Wifi or mobile data, and much more. The best feature is that if you already know HTML, CSS and Javascript, you don’t need to spend time getting to grips with Objective-C or Swift.
But PhoneGap has an enormous downside: The proliferation of terrible applications, owing to bad user interface design. PhoneGap is all about the code, and zero about design… There’s no existing PhoneGap library of user interface elements that you can just drag-and-drop onto a blank canvas. You have to design everything from scratch, and often that means creating an app that looks a lot like a native iPhone app, but somehow just isn’t quite right.
Framework 7
Thankfully, there are a bunch of existing UI frameworks that can perform this task for you. In my opinion, the best of the bunch is Framework 7, created by Vladimir Kharlampidi of ‘iDangero.us’.
A ‘framework’ is essentially just a bunch of existing CSS and JS files that can be added into your application, and then you write your HTML files to reference those CSS elements and Javascript functions. Of all the frameworks I’ve seen, Framework 7 is unbeaten in terms of:
- Speed (Applications scroll nicely, change views quickly, and animate in such a way that it looks like a native application)
- Appearance (Every element, such as tabs, alerts, navigation bars and lists, look identical to native elements in iOS9)
- Ease of use (Simply add DIV’s to your HTML page, apply the necessary CSS classes, and instantly your page looks like a native mobile app view.)
And, even though the documentation is already easy to understand, there is a very supportive forum community who can help newbies out. (As I continue to use F7 more, I find myself spending more time in the forum, helping out people who are just beginning to experiment with it.)
My five days of development:
- Design / Prototyping
- Building the user interface
- Programming
- Even more programming
- Debugging and finalising
Day one: Design / Prototyping
It’s very important to ‘see’ your app before you even write one line of code. My prototyping tool of choice is Adobe Photoshop CC, which has a template for mobile app design (where it creates an artboard which is sized exactly for a specific device).
Another great Photoshop feature is live preview to a real mobile device; Just open up ‘Adobe Preview’ on your iPhone, and the Photoshop image is instantly beamed to your screen. As you make changes to the image, the live preview is updated. It’s a wonderful way to sculpt your user interface, and especially to pick appropriate colours (because the default computer screen colour is generally not how iPhone colours will appear, especially when using a non-Apple brand display.)
From this design prototype I was able to extract elements to use in my app, such as the map of New Zealand and the types of gradients that I would later write in CSS (using the fantastic ‘Ultimate CSS Gradient Generator’.)
If you wanted to prototype not just the look of the app but also the function, I recommend ‘InVision’, where you upload your PSD files and view them inside the InVision iPhone app. You can set up the animation and navigation between these pages, so it looks and feels just like a real app… All before you’ve written one line of code.
Day two: Building the user interface
It’s time to break out PhoneGap, which I use on the command-line to set up a new project. It establishes a folder structure and give me an index.html file to work with, but I generally erase that whole file and replace it with a barebones Framework 7 project.
I use Microsoft Visual Studio Community (running on a Windows 10 machine) to start building a mobile app, which is fine until the point where you need to simulate the PhoneGap-specific features. For instance, my app uses HTML5 streaming audio, which is easy to debug in Chrome’s developer console (where you can easily see how your app will look at mobile-screen resolution). But one of the PhoneGap plugins I want to use is ‘Network Information’ so I can tell if the user is on Wifi or mobile data. I can’t debug this, nor can I even really include it, without moving over to the iOS desktop simulator. So it’s time to reboot out of Windows 10, and move back to OSX.
Visual Studio Code is the Mac-friendly version of Visual Studio, and I hadn’t used it until this project. It’s actually pretty good, but it’s missing lots of the features from the full VS. But for writing code, and looking at several files at once, it’s pretty good. For the rest of the day I wrote my HTML code, created a few custom CSS classes, and finally got my app looking right. (Note: Currently the app only looks ‘right’ on iPhone 6/6s. One of my next steps is to re-do some of the CSS so I can support iPhone 4S and iPhone 5.)
Day three (and four): Programming
It took slightly longer than expected to code the Javascript for this project. I wanted to have access to 12 different audio live streams, with an easy way to switch between them without using too much memory.
I started with the live audio code that I had used on my Radio Southland app, which was based on code from DevGeeks that streamed live audio in a PhoneGap app (and continued the audio when the phone was asleep). But I had to strip it back and re-write from scratch in order to support switching between audio streams, and this is where the work carried over into the fourth day.
Basically, the length of coding time just came down to all the functions I needed to achieve:
- Listening for the ‘play’ button, and discovering which radio station the user wanted to hear.
- Changing the interface to show the user the stream was buffering.
- Playing the sound, and showing a display which would count-up the time spent listening. It would also display whether the user was listening on wifi (for free) or on mobile data (which may impact usage of their data plan.)
- If another radio station was selected while the first one was still playing, it needed a graceful way to stop the audio and load a new stream without impacting performance.
- Plus, it needed error-handling so if something went wrong, the app wouldn’t completely fall apart.
- Finally, the user interface needed to be responsive to a sliding set of cards which would also highlight markers on a map, to show where each radio station was located across New Zealand.
I don’t use much in the way of Javascript debugging tools, aside from Chrome’s JS console. Luckily there’s always Google to help me with any stupid question I might have, such as how to correctly iterate through an array of radio stations to extract just the information I need. Thankfully, after hours of coding, I had something reasonably functional and relatively efficient.
Day five: Debugging
It was finally time to run the app on my iPhone. It used to be the case that a paid Apple Developer membership was required to debug on a physical device, but now you can achieve (most) functions with a free Developer account. (You’ll still need a paid account to publish your app to the App Store.)
Although PhoneGap has a desktop application to handle many functions, I still prefer to use it on the terminal command line. Typing ‘phonegap build ios’ will build the project into a file which can then be opened in Apple’s Xcode development software, which you will already need to have installed on your Mac. Once your device is plugged in, you can easily install and run the application on your iPhone.
Amazingly, things worked as expected. I think this is testament to an initial design process using an actual device for preview, and then debugging things in the desktop iOS simulator before even reaching the device.
Once you can actually pick up your app and use it like a regular person, you quickly start to see the things you like and the things you need to tweak. For me, the performance of the app was great, but some elements were just a few pixels off from where I wanted them positioned (totally my fault, from the way I had made the custom CSS classes.)
Conclusion
Aside from a few things that I still need to include in my app (such as an ‘about’ information page), I feel confident that my app is otherwise functional and looks great. PhoneGap is a great platform for developing in a web-friendly environment, and Framework 7 made it very easy to make an attractive app which also functions like any traditional iPhone app.
Of course, these five days of development were probably scheduled at the worst possible time: The week before Christmas. As such, iTunes Connect is on a break until late December, so I won’t be able to submit my app until then. At least this gives me a few days post-Christmas to finish things up and redesign some elements to support smaller screens.
In conclusion, if you’re someone who has already mastered HTML, CSS and knows a little bit of Javascript, then Framework 7 is going to make it very easy to design a great-looking mobile application. Cordova is a great backend for building your app, and if you only own a Windows PC and not a Mac, then you can just use Adobe’s PhoneGap Build service to test your app on a device and then get it into the App Store.
Finally, the best feature about everything I’ve described here is that when I want to repurpose my app for Android devices, I just need to change a tiny amount of code and it’s instantly ready to go. That’s the main selling point for cross-platform hybrid development, and it’s what has made it a very popular choice for new developers. Happy coding!
Update 1st March 2016: The app is now available!
New Zealand Access Radio is now available for free download on the App Store.
Putting the finishing touches on my app is worthy of an article in itself, but to summarise the experience:
- I learnt a lot about how Phonegap has many different versions, and sometimes it can be hard to follow the correct documentation for the version you’re using when the time comes for build/export. Especially when it comes to icons and splash screens… I found getting this process to run properly to be quite a headache.
- Apple’s TestFlight program is a great way to test your device, and happily when I installed my app on various phone sizes (such as iPhone 5S and iPhone 6+) I was pleased that it resized just as I’d expected it to in the XCode simulator.
- The App Store approval process takes at least as long as everybody says it does. In my case, I submitted the app on a Wednesday, and it was finally reviewed and approved by the following Tuesday.
I’ve created a one-page website to help promote the app (despite occasional DNS errors that throw it offline). I’m not expecting hundreds of people to download the app, but for me it is a personal goal completed: Build an app, start a portfolio, and enjoy breaking into the busy world of mobile development.