Learning Code To Design App

How to Become a Programmer: 8 Steps to Building an App from Scratch

Published May 25, 2015 Last updated Jul 02, 2018

Intro

"What's the best way to learn how to code?"

"How to become a programmer"

"How to build an app"

These are common questions asked everyday by beginners who are eager to learn how to code. No doubt you've already googled something along those lines and read enough articles/answers to the point where you're sick of the "standard" advice.

If you have not, or if you somehow think I have something new to say and want to hear it anyway (I don't), here is a short and pretty much pointless answer (I shall give it a SEO-friendly click-bait name: "3 Steps to Becoming a Programmer"):

Step 1: Pick a Language

Step 2: Learn the Language

Step 3: Build Stuff and Keep Learning

boo

Hey, don't throw shoes at me. As much as I'd like to say there's a one-size fits all method to learning how to code, there really isn't. (Let me add a Step 0: accept that everyone learns differently).

Countless more detailed answers elaborating steps 1 & 2 already exist on the web, but the common answer to step one is to learn Python or Ruby as your first language (don't get too hung up on the language, you'll never get started). If you need learning resources, we've curated several guides you can check out:

Learn Python
Learn Ruby on Rails
Learn JavaScript (Always learn JavaScript before learning frameworks such as AngularJS or React )
Learn iOS Development
Learn Android Development

Several of you'd get to this point:

now what

If you're having that moment when you've become a lost sheep, don't freak out because you're not alone.

Pretty much every time you ask "how do I become a programmer", developers will tell you to build stuff, as building things is how you can improve as a programmer and it's the best way to learn, etcetera etcetera.

But how do you build your own app?

eck

You can always follow existing tutorials on how to build a Twitter/Pinterest/Instagram/etc clone with whatever language & technology you're using, but keep in mind that the authors of those tutorials have actually done most of the work for you, and all you are doing is understanding the code and their logic.

This article will attempt to provide you an outline you can follow when building your own app from scratch.

Pre-requisites

Most apps would need a database, so if you're going to be building your own app by yourself (ergo the front and back end), you'll likely have to know a database query language (usually SQL). Unless you're building something that does not need to interact with a database like Flappy Bird, for example.

What's more, if you're looking to build a web app, you'll need to know some basic DevOps to be able to set up your development environment/server, and to be able to actually launch the app.

If you're only aiming to be a front-end web developer, you can hone your HTML, CSS, and JavaScript skills at Codepen or JSfiddle. If you only know JavaScript and don't want to learn another language, then you can try Node.js, as it's a JavaScript platform for back-end development (You can also use MongoDB as your database since it's also based on JavaScript.)

Otherwise, you should also know one of the following languages (and usually a web framework) if you intend to build a complete web app:

Ruby
Python
PHP
Java
Go
C#

If you're looking to build games, then you can consider learning Lua, though C# is also a very good choice thanks to the Unity 3D game engine and its massive community. As for native mobile app development, you'll need to know Swift/Objective-C for iOS development and Java for Android development.

Without further ado, let's get to how to build an app from scratch.

Step 0: Understand Yourself

First and foremost, build something that you're passionate about. Interest is the best way to keep yourself motivated, so ask yourself what do you care about or what do you like to do.

For example:

What apps do you enjoy using the most?
What apps can't you live without?
Do you like playing games?
Do you enjoy designing things?
Etc.

Identify your interests so you'll be working on something you'll have fun with. This way, you are less likely to fizzle out and give up halfway.

Step 1: Pick an Idea

Now that you've hopefully figured yourself out, it's time to pick an idea to build. Start simple.

flappybird

Yes…even if you're thinking about building a game, right now you shouldn't be thinking about building the next CounterStrike but instead you should be thinking about how to build games as simple as the infamous Flappy Bird. Hey, don't look down on Flappy Bird─it was a sensation that made people all over the world discover their inner masochist. But I digress.

So, based on your interests, come up with an idea for a simple app that will do something neat. It doesn't matter if the app already exists (in fact it may help you if similar projects already exist).

Here are some pointers to help you get some inspiration:

If you like cooking, maybe you can think of building an app for people to showcase their homemade recipes.
If you always wanted to know how Twitter works, try building a super simple Twitter clone.
If you're a forgetful person who relies on task managers, try building one yourself.
If you're addicted to the League of Legends, you can try looking through Riot's API and build a site that can obtain & display game information.
If you like playing card games, try building a simple one (e.g. Black Jack)
If you're on a diet, try building an app that will log your calorie intake.

And so on, so forth. Here's a list of project ideas if you need more inspiration.

Once you have a direction, write down in one sentence the purpose, and, if applicable, the most important target users for this app.

For example: A pet adoption app for people who pick up stray animals.

Step 2: Define the Core Functionalities

note

Think about what your app should be able to do and list them out. If you end up listing a bunch of things, take a better look and ask yourself if this app REALLY needs, for example, Facebook login to work? Does it REALLY need to upload data to some cloud to work?

It's great to have a dream project with awesome specs, but right now the point is not building something that's complete with a lot of cool features. Keep in mind that no app is ever complete, and everything starts out simple.

Don't ever try building an all-in-one app. Don't go there. I've seen it happen even in a professional environment, and the result is a lot of pain and little progress.

Unless you have an iron will or you really love challenges, you'll just end up frustrated and discouraged if your first project is too hard to build. You're a beginner…the point right now is to have fun. Fun is the most efficient way to learn.

So, take a look at the list of functions you've made, and if it's too long, start crossing out functionalities your app can work without.

Remember, this is your version 1 and you should just keep things simple. Focus on things that will allow the app to perform whatever it's supposed to do—everything else can be left for a different project.

For a sample core functionality list for a Reddit clone:

users can create an account
users can retrieve lost passwords
users can change their passwords
users can post new links
users can comment on links
users can upvote/downvote links
users have a profile showing their history/activity

The features listed above are the core functionalities you should focus on first. Other features such as:

users can share to social media
users can delete comments
users can edit comments
users can delete their own account

Are secondary and can be saved for version 1.x—only work on these after you can actually launch version 1.0

Step 3: Sketch Your App

ui wireframe CC License

Nothing is quicker than a pen & paper. By now you should have a pretty solid idea of what your app should do, so sketch out the wireframe of your app's UI (user interface). Where buttons should be located, what the purpose of that button is, and so on.

Write down notes and flesh out how the app should work. You're still in the brainstorming stage, so change stuff around until you're somewhat satisfied with it.

Remember, keep things simple. If you shortened your list from step 2, stick to only sketching functions listed there—don't get carried away. If you can't help yourself, then sketch 2 versions: a basic version and the final version in your dreams.

All in all, this is not the final look but rather just a step to help you get a firmer grasp of your app.

Step 4: Plan Your App's UI Flow

All right. You have a good idea of what your app will look like, what every element should should do, and how users can interact with your app. Now it's time to figure out your app's UI flow. Meaning, how a user should use your app from start to end. Chart out every step they have to take, and every scenario they might encounter. Try to consider every use-case.

flowchart (CC License)

Include all the actions your user can take in the flowchart. For example, if your app requires users to log in, how do they create an account? What if users forgot their password? What if they inputed the wrong password? What should a user be able to do on each interface (add new list item > save; edit > save/delete)? So on, so forth. This is done the quickest with a pen and paper.

Again, as your app should be fairly simple, your diagram should not be too massive.

Step 5: Designing the Database

All right! After you planned out every possible scenario, take a look at it to determine what sort of data you would need to keep. For example, if your app requires users to create an account, you'd need to keep track of things such as the username, user ID, the user's email, the password, whether user's email is confirmed, when the account was created as well as every time the user has logged into your app.

If you're building a Twitter clone, you'd need to know the tweet's ID, the tweet's content, when the tweet was published/retweeted, how many retweets it has, and how many stars it has. You'd also need to keep a record of a user's retweets and stars.

You can draw an ERM (Entity-Relationship Model) diagram to map out the data relationship.

erd An example of a course selection site's Entity-Relationship Diagram CC License

In addition, if you have any future features planned, this is the time to plan them into your database. Here is a nice article to check out while you design a database.

Advanced

If the app you're planning is going to interact with a server (e.g. if you're building a fullstack web app) or if your app is going to interact with an API (e.g. you're trying to get information from Yahoo! Weather ), then it's likely a good idea to draw a sequence diagram for you to get a better idea of how the processes should operate.

sequence diagram From Wikipedia

Step 6: UX Wireframes

Okay, you have the back-end planned. Now, it's time to plan your front-end.

cheering

Hopefully, you're still as excited as the minions above. You know what you need—now you have a much better idea of what your app should look like.

ux wireframes CC License

Since humans are mostly visual creatures, you'd have a better time understanding what you should do if you have a visual of every view you'll be coding. However, if you're like me and your drawing is so messy you can hardly understand the obscure piece of…cough masterwork…you've created, it's naturally unwise to proceed with the this step through abusing your poor artistic braincells.

Luckily, many wireframing and mockup tools exist online to help you plan your UX/UI flow (e.g. Gliffy, Mockflow, Framebox, Wireframe.cc, Invisionapp).

Step 6.5 (Optional): Design the UI

This is an optional step, but if you intend to specialize in front-end development or if you care a lot about what your app is going to look like to the point where a prettier app would motivate you to code, definitely go ahead and design the app so all those wireframe UI elements can be replaced with nicer-looking ones.

If you love designing, you're probably going to design the app before you start anyway—maybe you already designed it during step 2.

If you don't do design but still care about how your app will look like, consider using elements from UI kits. Here are a few resources for UI elements:
(Note: Photoshop required)

free ui elements

UI Cloud
Graphicburger
UI Dock

For games:
Spriters Resource

Don't get too hung up on the app's appearance, however. Right now you should be focusing on building an app's functions instead.

Step 7: Researching Solutions

Great! You're done with the planning stage…but how are you supposed to code all that stuff?

An important skill you'll have to learn as a programmer is to evaluate when you should use something another developer has already written, and when to build the function yourself.

onedoesnotsimply

Since everyone is building a unique app, not every use case is the same. Thus, you have to judge when to use an existing solution and when to build your own, and you'll get better at doing so with experience.

confused

If you're feeling like a directionless boat lost on a vast ocean, take a deep breath and don't panic. You can do this.

As you gain more experience with researching, honing your "Google-fu", and building things, you'll eventually get a hang of this process.

Looking at Solutions

Take a look at all diagrams you've drawn as well as the functionality list you've made in step 2.

What are some things you have absolutely no idea how to build?

For example, do users need to create an account? Does your app rely on real-time updates? What functions do you need?

Most of the time it is a good idea to just use an existing solution for large functions such as handling real-time syncing (e.g. Firebase), networking/routing (e.g. AFNetworking for iOS apps), authentication, and UI-related components (e.g. flipboard or pinterest-esque app).

Many online databases exist for you to search for backend-related components/packages/gems/etc, but you need to be careful with your evaluation of what other people have written—don't just use them blindly. You're hopefully not going to be building anything too complex right now, so right now you're probably not going to need components other people have written.

At any rate, the best way to start out is to study what other developers have done before you and learn the logic behind their decisions. GitHub is your best friend.

awww

For a real-life example of an experienced developer's research process for a particular function, you can check out this post about how Angular-Plunker's creator built Plunker's drag-and-drop directives.

Choosing Tools to Get Started With

If you're building a web app, perhaps you can check out Yeoman as it aims to help you quickly kickstart new projects by helping you set up the structure of your project.

yeoman

If you're building a React app, you can also check out starter kits and existing Flux implementations. HTML5Boilerplate and Bootstrap are popular front-end templates for your app. More often than not, boilerplates use Gulp or Grunt for task management.

Since you're likely going to be using some existing components or solutions, you should also install bower for dependency management (npm for those using Node.js and CocoaPods for iOS developers). Don't worry—most of the time these tools come with tutorials that will teach you how to install them.

Step 8: Building the App

excited

Yes! You're ready to build the app now! Here are some tips you should keep in mind when building your app.

Checklist

list

You should focus on building the app function by function. Thus, if you're not done with one task such as a commenting system, don't suddenly start to build a user profile view. In other words, if you're building a form, for example, you should work on both the front and back-end code until the function is complete.

All in all, to keep track of your progress, you can write down a to-do list of functions and use it as a checklist.

Write Tests First

Unless your building a game app, it's a good idea to write a test for your function first before you actually begin to code the feature. Bugs are inevitable, but testing will greatly reduce your mistakes and your chances of releasing buggy code to production.

Granted, writing unit tests take time and you may sometimes question whether it's worth it. However, if you're looking to build bigger projects in the future in which you'd continue to add new features, this may happen to your app:

explosion

Then this (is an exaggeration of what) may happen:

debug

Or god forbid:

bug

And this would be you, trying to fix the app:

frustrated

…More or less.

So, it's a good idea to start small and get into the habit of doing Test-Driven Development (TDD), especially since you're starting fresh and building something simple.

You're not on some deadline with a project manager's pitchfork behind your back now, are you?

For tips on unit testing patterns, you can check out this article. Another tip to keep in mind is to avoid asserting too much trivialities.

Many testing tools are available for you to choose from, such as Jasmine or Karma for JavaScript, Rspec for Ruby, PyTest for Python, PHPUnit for PHP, Quick as an alternative to xCTest for iOS development, or whatever tool you feel would work for you.

In addition, if you're building an iOS or Android app, it's a good idea to check out Crashlytics.

7 Steps to Debug Efficiently and Effectively

Use Git

Git is a version control system and a full-fledged repository with complete history and full version-tracking capabilities. It's a good idea to start learning how to use Git while building your first app. This way, you can easily undo your mistakes, recover lost data, and more. In addition, if you plan to work with a team of developers in the future, you will need to use git anyway. GitHub is the most popular Git repository hosting service for open source projects, while Bitbucket is for private repositories.

If you end up running into problems when using git, this post about the 10 Most Common Git Problems and How to Fix Them may help you.

If You Get Stuck…

stuck

As a beginner, you'll feel like that hamster more often than not.

You're not alone. Sometimes, all you have to do take a break and let the issue simmer so you can clear your mind.

coffee

If this still doesn't work, here are some ways to unstick yourself:

Google

I mentioned Google-fu in step 7, but let me stress again that learning how to Google is an important skill all programmers need to acquire. If you get stuck on a bug or you don't know why your code isn't working, it's a good idea to Google.

Ask on StackOverflow

You'd probably notice that your google results will mostly point to questions and answers on StackOverflow. If you still can't find a solution to your problem after googling your ass off, then you can try posting a question on StackOverflow.

Remember to show that you've done your research in your question – you're more likely to get an answer that way.

Alternative: Find a Mentor

Some people will say that StackOverflow isn't beginner-friendly because beginners don't know how to phrase their questions. But what if you don't even know what your problem is?

headdesk

If you get to the verge of headdesking (or if you're already headdesking…), you don't have to abuse your forehead (if you hit your head hard enough you'll just lose braincells).

One great alternative to facilitating your development and your learning process is to get help from an experienced programmer. You don't need to feel like you're somehow stupid because Person X is a famous expert and a self-taught programmer. People simply learn differently, and all beginners will benefit from personal guidance as you may be making mistakes that aren't a big deal right now but is actually a bad practice.

Remember, back then many self-taught developers didn't have the services that are now available to you.

Thus, you can get help from experienced programmers via live 1:1 sessions on Codementor, where rates of mentors start from $15/minutes. During these sessions, you can have a video chat with an experienced developers and share your screen/code with them, and the mentor will teach you how to fix your code as well as tell you what you have done wrong so you can avoid the mistake in the future. You can also review the code from the session or record the session to your local disk via the video chat tool. Sign up now and try the first 15 minutes for free with mentors offering the deal.

Final Tip

Programmers make mistakes all the time, so don't feel discouraged when you can't even pass a test you've written or if you're constantly tripping over yourself. I mean, think about iOS9, Android Lollipop, or some app you love to use. Surely even the most mature apps out there still have bugs, so don't assume you can build the most perfect, bug-free app out there (of course, this doesn't mean you should set low standards for yourself—you should always strive to build quality apps).

In addition, it's very common for you to spend hours or even days on one thing and to still have difficulty making it work as you want. If programming new features quickly were easy, the world wouldn't need new programmers. Hell, we'd probably be on a flawless iOS100 now and we'd have built a digitalized world like the one in the Matrix.

Thus, a lot of times, you'd hear the term "make mistakes" whenever people are encouraging you to start building things. They mean it. One thing you'll have to accept as a programmer is that you're not going to be a badass coding machine who can conjure up features in a snap. You'll going to be failing a lot and that's ok.

Again, remember you're a beginner, so a lot of things are going to be inevitably difficult at first. You're going to be spending a lot of time on something that you think should be simple and it will seem like a difficult uphill struggle, but as you gain more experience, things will get easier. Look forward to that sense of accomplishment when you finally manage to build your first app, and you can even consider selling your app if you see fit.

itworks

Happy Coding!

Author Bio

Yi-Jirr Chen || Content Maketing & Operations
Your typical massive geek who games and loves science/tech. Also publishes fiction under a pen name that is a pen name for a reason