How to Become a Programmer: 8 Steps to Building an App ...docshare04.docshare.tips/files/31303/313039697.pdfHow to Become a Programmer: 8 Steps to Building an App from Scratch | Codementor

codementor.io

How to Become a Programmer: 8 Steps

to Building an App from Scratch |

Codementor

Codementor

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

How to Become a Programmer: 8 Steps to Build... about:reader?url=https://www.codementor.io/le...

1 of 30 Thursday 24 March 2016 01:25 PM

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

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:



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?

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.

Prerequisites

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 or



MongoDB). 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 feel

free to 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.

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. As for native 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.

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



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

(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, every step they

have to take and every scenario they might encounter. Try to

consider every use-case.

(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.



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

users need to create an account and login to your 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.



(from Wikipedia)

Step 6: UX Wireframes

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

front-end.

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.

(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):



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.



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.

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.

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.

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



Yes! You’re ready to build the app now! Here are some tips you

should keep in mind when building your app.

Checklist

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 the 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:

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

Or god forbid:



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

…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.

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…

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.



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?



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.

In addition, if you’d like to work with a dedicated mentor for your

project, you can also choose a Monthly Plan where you can learn

best practices and how to implement the skills necessary to build



your project. A dedicated mentor will be more aware of the context

of your situation and will have a better idea of how to help you.

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 iOS8, 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 living in a digitalized world like to 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.

Happy Coding!

Author

Yi-Jirr Chen



Content Marketing & Operations @Codementor

I'm your typical massive geek who games and loves science/tech.

I'm also a retired anime/manga fan. I also publish fiction under a

pen name that is a pen name for a reason :P

Questions about this tutorial? Get Live 1:1 help from Programming

experts!

David Farfara

Server (.Net) & Client (AngularJS) side technical leader.

An effective full stack .Net + client side leader and technical

Architect of software projects from proof of concept stages to client

delivery. Who...

Hire this Expert



Peter Figliozzi, Ph. D.

Professional data scientist/automated trading system developer

I work on projects in many areas including automated stock, futures

and options trading, risk analysis, modeling and simulation,

software and...

Hire this Expert

Or Become a Codementor!



Documents

How to Become a Programmer: 8 Steps to Building an App ...docshare04.docshare.tips/files/31303/313039697.pdfHow to Become a Programmer: 8 Steps to Building an App from Scratch | Codementor