An Appmaker’s Toolbox
Everything you’ll need to get from idea to App Store.
Apps are like novels — everyone’s got at least one in them. But making an app from scratch, when you know little to nothing about coding, can feel like standing at the base of Everest wearing a poncho and flip flops. It’s not just that you suspect you won’t make it to the summit; it seems almost inevitable that your first step will be back in the direction of the hotel.
I’ve just been through this process to build Ripple, a private messaging app for sending links to your friends. It was a fairly daunting task — I knew I’d have to write the app’s code, connect up the user interface, manage logins, integrate it with Twitter, store data somewhere in the cloud, make it look good, and get it up on the App Store, and I had pretty much no idea how to do any of this.
Anyway, after so much Googling that my targeted ads are suggesting nothing but coding manuals, it’s now done, and I thought it might be useful for others in the same boat if I pulled together the various tools I discovered and the tutorials I used, in the hope that (i) it might convince you that this app-making business is no more insurmountable than any other hobby you might choose to fill your evenings with, and (ii) if it does, it guides you through the basics so that you can concentrate on what it is that makes your app unique. Consider it a high level walkthrough that points you to other, more useful walkthroughs. Sort of like a map with nothing on it except the locations of map stores.
I should stress that this is very much intended for beginners. If you’ve got a computer science degree, look away now.
I. App basics with Xcode
First things first — go and download Xcode. This will be your creative studio — the place where you’ll write your code, design your app and test it as you go.
Once you’ve downloaded it, follow a tutorial like this to create a basic app — this will get you acquainted with the various building blocks you’ll need to piece your app together. You’ll find it’s sort of like learning a language you’ve had on the radio in the background for five years but never really listened to — all the elements you’ll use have been right in front of you every time you’ve ever got your phone out of your pocket. Here are a few key concepts:
- The App Delegate controls what happens when the app opens or closes, as well as a bunch of related stuff.
- Navigation Controllers give you a header bar and let you add buttons to help you navigate between screens:
- View Controllers are the different screens in your app.
- Table Views and Collection Views let you display your app’s data in different ways. On the left is a table view I use in Ripple for displaying your messages.
- Tab Bar Controllers give you tabs across the bottom of the screen, handy for switching between views.
- The Storyboard is a canvas on which you can map out how your app works, dragging and dropping anything from extra screens to buttons, switches and sliders. Take a look at the Ripple storyboard below:
- The iPhone Simulator lets you run your app on a replica iPhone on your computer.
If you run into problems, head over to Stack Overflow (where it’s pretty much certain that some benevolent oracle will already have answered your question), or check out the Apple documentation if you’re after something wordier.
II. Behind the scenes with Parse
It’s pretty rare that an app’s activity is confined to the user’s iPhone. You might need to store photos people have uploaded, keep a list of your users, send notifications to people’s phones — all stuff that needs to be taken care of in the cloud. And unless you’re an expert in servers, databases, and the other migraine-inducing structures that lurk behind the colourful graphics on your screen, there’s a danger this realisation might be the point at which you throw in the towel.
Fortunately, Parse steps in to take care of all of this for you. Once you’ve signed up, they’ve got a handy guide that will walk you through bringing Parse into your app, and then a few lines of code are all you need to get access to a fully functioning database on their servers. Here are a couple of lines from Ripple that mark a message as unread in the Parse database:
Notifications are another thing that Parse helpfully takes care of for you. Here’s the code I use to send a message from one user’s phone to another:
… and here’s the result:
Other useful features provided by Parse include Cloud Code (which lets you run code outside of the app on their servers) and Scheduled Jobs (which let you write code that you can set to run on Parse’s servers at certain times). There are a bunch of others I’ll let you discover for yourself, but the last one I’ll mention is Parse Analytics. This lets you log how your users are using your app, with each data point tracked by inserting a single line of code. Here’s how I log when someone sends a message:
If you think these features could be useful for your app, it’s worth checking out the Parse tutorials, which will guide you through what you need to know.
III. Making it social
If you’re making a thermometer app, you can skip this step — otherwise, your app may well benefit from, or even hinge on, logging in and being connected to other people. In my case, Ripple is about receiving links from your friends — so integrating Twitter was an obvious move.
Luckily, Parse also makes it really easy to connect a user up with their Facebook and Twitter accounts, after which you can access friend lists and post statuses or Tweets to your heart’s content. Connecting a user to their Twitter account is as simple as this:
In order to interact with a user’s Twitter account, you’ll have to do a couple of things. First, go and set up a Twitter app on the Twitter Developer site. Then, to post a Tweet, for instance, follow the instructions given by this member of the Parse team.
Your app could be the most useful thing ever to hit people’s pockets, but if it looks like it was designed for the Nokia 3310 no one’s going to give it a second glance. Icons, buttons, toolbars — all of these need to be designed to a high enough standard that your users will either love them or, even better, won’t notice they’re there. Really great design is design that gets out of your way.
There are some great free design programs that will give you everything you need — I switch between GIMP and Inkscape, and it’s worth giving both a go. Both provide a load of tools that let you draw, colour and shade — they take some getting used to, but they let you make some really nice stuff. At the moment I’m using Inkscape a lot, as it lets you work with vectors (shapes that don’t become pixellated however far you zoom in, meaning you can easily scale them up and down to any size you want).
What should your app look like? Pretty much every app at the moment opts for ‘flat’ design — minimalist, with bold colours and no embellishments — so unless you’re reading this in 2016, by which time fashion will have no doubt raced onwards and everything will be flashing neon, it’s probably easiest to follow suit. For some flat design examples and tips, have a look here. You’ll need a colour scheme, too, which sounds easy but is harder to get right than you might think — playing around with a palette, it’s amazing how many colours it turns out are just plain bad. A favourite solution of mine at the moment is flatuicolours.com — 20 lovely colours, with a single click all you need to copy them straight into your app. And it’s important to make the icons and buttons in your app look professional — I’m yet to find a better resource for this than flaticons.net, which gives you hundreds of icons to choose from and download, all completely free.
V. To the App Store
When you’ve finished building your app, all that remains is to get it up on the App Store so that people can start using it. Unfortunately, this isn’t just a case of pressing a ‘Submit’ button — there are a bunch of hoops you have to jump through first. You’ll need to register as an Apple developer (which comes with a $99 price tag), download the right Provisioning Profile and Certificate (here’s a nice explanation of what these are for), and enter your app’s details on iTunes Connect (your portal to the App Store) before you can release it to the world. Thankfully, there are some great walkthroughs out there to untangle the mesh of terms and requirements thrust on you at this stage — it’s worth giving the official Apple guide a read, as well as this easier-to-digest tutorial, or, if you ended up using Parse’s push notification service, their specialised instructions (since using notifications slightly alters what you need to do).
So that’s it — a guide to the tools you’ll need to turn that great idea you had over your third beer of the night into something that you might one day see a stranger on the subway using. Remember — in two years, we’ll look back on 2014 and be able to list all the great apps that hadn’t been built yet that were there for the making. Your idea could be one of those. So get building.
Since I started learning to code in 2011, the main thing I’ve been building is Jukedeck, a system that composes original music and gives you unique, bespoke music for your videos. I’d love to know what you think!