What We Have Done | 
Computers have made our lives easier, from simplifying bill payments to safeguarding sensitive information. The internet has taken this one step further and provided equal access to everybody. Now, anybody in the world can download or learn how to build an app.
There was a time when the most popular computer softwares were MP3 players and file compressors. Those days are long gone, along with Geocities and Napster. But apps have since evolved, and today you can get apps of all kinds that do things you never knew you needed.
Examples would be apps that convert DOC files into PDF, or image optimizers that help your pages load quicker. This excludes other wacky apps such as Flappy Bird, a frustratingly simple game, and Pointless Button, which does exactly what its name says.
The Big ‘Why’
The reason for building apps can vary from person to person, but it mostly ties down to earning an income or wanting to solve a problem. Some companies have managed to do both, examples being Uber, Airbnb, and WhatsApp.
Of course, the highest priority of learning how to build an app is technical knowledge itself. This means knowing a programming language. It’s a very individual choice, and it depends on the app you want to build as well as which one feels most intuitive to you. The rest relies on elbow grease.It may seem daunting, but when everything is broken down into manageable chunks, building an app isn’t as far-fetched as it seems.
To give you an idea of the thought process behind this, we’ve asked Er Whey, our resident developer, to break down the steps he’d take to create an app that acts like Snapchat or Instagram Stories.
Getting Started
Of course, before you start building an app, you’ve got to determine what it does. You can come up with a fresh idea or try to build a clone of an existing app. The latter is a good way to practice coding without needing to pry your brain for a new idea.
Pro-tip: If you’re learning how to build an app this way, make sure you don’t copy-paste any sample code and write things from scratch instead.
1. Determine the big picture
Like Snapchat or Instagram Stories, the purpose of this app is to send messages that disappear once read by the recipients. With that goal in mind, we can start breaking down the individual functions as well as the user interface for both sender and receiver.
This can also be where you decide on the programming language. It can be based on your familiarity with the language or the requirements of the project. For instance, if your company only puts out Android apps, then you’ll have to use Java.
For this instance, Er Whey chose HTML, CSS, and JavaScript as they’re fairly straight forward and don’t require any special IDE (Integrated Development Environment).
(We cover HTML, CSS, and JavaScript in our Front-End Web Development course.)
2. Plan the user flow
This is where you take into account the user experience. First, what is the general look of the app going to be like? Are there going to be any specific themes? Colors? Menus?
Next, how will things look like on the sender’s end? Will they be able to send messages to anyone, or will they have to add users to a list?
On the recipient’s side, what happens upon receiving a message? Will the message disappear once they close the window, or will it be time-based?
Thinking about the user flow might seem easy, but when you really get down to the specifics, you’ll realize that there are more elements to a simple app than you thought. It’s good to document the user flow in words before moving onto visualization.
e.g: John wants to send a picture of his new car, but he doesn’t want the picture circulating the internet forever. For his peace of mind, he will need to be able to tell that his message was read and deleted. Sara, as the recipient, will need ample time to read the message so that it doesn’t disappear before she finishes.
3. Visualize the app
This is where you sketch the rough design. You can use wireframing apps like Wireframe.cc or even the trusty pen and paper (a lot of my colleagues prefer the latter). It’s a great way to determine your display real-estate, and you’ll be able to see the limitations of one platform versus another.
Where do you align the buttons if it’s a desktop-based app? How many of those buttons would need to be removed for the mobile version? How can you display the most information in an efficient manner? Can you reduce the number of displays through the use of clever designs?
Uncovering potential problems at this phase is much better than running into them during the actual coding. However, don’t be afraid of the latter, as it’s an integral part of learning how to build an app.
4. Determine components
You’ll now need to ascertain all the moving parts required for this project. Do you need external resources? What about back-end servers with databases? In this case, Er Whey chose a couple of intermediaries for functionality. They are WhatsApp and Bitly, specific for the purposes of this app.
5. Get your hands dirty
This is where the coding begins. Using the wireframe you’ve created earlier, you can start building the scaffold. For this project, HTML will be used for the basic structure, then CSS for styling purposes. What you’ll have is a website without moving parts.
You’ll probably end up with a webpage that has fields like ‘Recipient’s Phone Number’ and ‘Message’ on it. But for now, you won’t have the ability to take a user’s input and process them. This is where JavaScript comes in. Using this powerful programming language, you’ll be able to process information and do fun things with them.
Break down the tasks you wish to program, then tackle them one by one. A brief example of this would be: take values (phone numbers and messages) from the user and send them to Bitly for processing. Then, get that resulting hyperlink and forward it to the recipient through Whatsapp. Finally, delete the message or link once opened.
You’ll code each of these functions, chunk by chunk, until you have a working app. Of course, that’s the ideal scenario. What tends to more is lots of debugging, documentation reading, and cursing at the monitor. But if you hunker down and actually put in the work, you’ll get there.
Continue Learning How To Build An App
All this assumes that you’re coding alone. If you’re building an app with other people, then you’ll also need to learn about version-control platforms, as well as how to code in a team.That’s it! You now get the gist of how to build an app. If you’re a non-coder, the only thing stopping you from building an app is not knowing a programming language. And our Full-Stack Web Development course will equip you with a comprehensive understanding on coding.
