How To Become A Programmer: 8 Steps To Building An App From Scratch

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

to Building an App from Scratch |
Codementor
Codementor
Intro
Whats 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 youve already googled
something along those lines and read enough articles/answers to
1 of 30
Thursday 24 March 2016 01:25 PM
the point where youre 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 dont), 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, dont throw shoes at me. As much as Id like to say theres a

one-size fits all method to learning how to code, there really isnt.
(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
2 of 30
Python or Ruby as your first language (dont get too hung up on the
language, youll never get started). If you need learning resources,
weve 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 youd get to this point:
3 of 30
If youre having that moment when youve become a lost sheep,

dont freak out because youre 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 its 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 youre 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 youre going to be building
your own app by yourself (ergo the front and back end), youll likely
have to know a database query language (usually SQL or
4 of 30
MongoDB). Unless youre building something that does not need to

interact with a database like Flappy Bird, for example.
Whats more, if youre looking to build a web app, youll 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 youre 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 dont want to learn
another language, then you can try Node.js, as its 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 youre looking to build games, then you can consider learning
5 of 30
Lua. As for native app development, youll need to know

Swift/Objective C for iOS development and Java for Android
development.
Without further ado, lets get to how to build an app from scratch.
Step 0: Understand Yourself

First and foremost, build something that youre 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 cant you live without?
Do you like playing games?
Do you enjoy designing things?
Etc
Identify your interests so youll be working on something youll have
fun with. This way, you are less likely to fizzle out and give up
halfway.
Step 1: Pick an Idea
6 of 30
Now that youve hopefully figured yourself out, its time to pick an
idea to build. Start simple.
Yeseven if youre thinking about building a game, right now you

shouldnt 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, dont look down on Flappy
Birdit 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 doesnt 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.
7 of 30
If youre a forgetful person who relies on task managers, try

building one yourself.
If youre addicted to the League of Legends, you can try looking
through Riots 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 youre on a diet, try building an app that will log your calorie
intake.
And so on, so forth. Heres 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
8 of 30
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?
Its great to have a dream project with awesome specs, but right
now the point is not building something thats complete with a lot of
cool features. Keep in mind that no app is ever complete, and
everything starts out simple.
Dont ever try building an all-in-one app. Dont go there. Ive
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, youll just
end up frustrated and discouraged if your first project is too hard to
build. Youre a beginnerthe point right now is to have fun. Fun is
the most efficient way to learn.
So, take a look at the list of functions youve made, and if its 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
its supposed to doeverything else can be left for a different
project.
9 of 30
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.xonly work on
these after you can actually launch version 1.0
10 of 30
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 apps 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. Youre
still in the brainstorming stage, so change stuff around until youre
somewhat satisfied with it.
Remember, keep things simple. If you shortened your list from
step 2, stick to only sketching functions listed theredont get
carried away. If you cant 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 Apps UI Flow

11 of 30
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 its time to figure out your apps 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
12 of 30
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, youd
need to keep track of things such as the username, user ID, the
users email, the password, whether users email is confirmed,
when the account was created as well as every time the user has
logged into your app.
If youre building a Twitter clone, youd need to know the tweets ID,
the tweets content, when the tweet was published/retweeted, how
many retweets it has, and how many stars it has. Youd also need
to keep a record of a users retweets and stars.
You can draw an ERM (Entity-Relationship Model) diagram to map
out the data relationship.
13 of 30
An example of a course selection sites 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 youre 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. youre trying to get
information from Yahoo! Weather ), then its likely a good idea to
draw a sequence diagram for you to get a better idea of how the
processes should operate.
14 of 30
(from Wikipedia)
Step 6: UX Wireframes
Okay, you have the back-end planned. Now, its time to plan your
front-end.
Hopefully, youre still as excited as the minions above. You know

what you neednow you have a much better idea of what your app
should look like.
(CC License)
15 of 30
Since humans are mostly visual creatures, youd have a better time
understanding what you should do if you have a visual of every
view youll be coding. However, if youre like me and your drawing
is so messy you can hardly understand the obscure piece
ofcough masterworkyouve created, its 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, youre probably going to design the app
before you start anywaymaybe you already designed it during
step 2.
If you dont 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):
16 of 30
UI Cloud
Graphicburger
UI Dock
For games:
Spriters Resource
Dont get too hung up on the apps appearance, however. Right
now you should be focusing on building an apps functions instead.
Step 7: Researching Solutions

Great! Youre done with the planning stagebut how are you
supposed to code all that stuff?
An important skill youll 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.
17 of 30
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 youll get better at doing so with
experience.
If youre feeling like a directionless boat lost on a vast ocean, take a

deep breath and dont panic. You can do this.
As you gain more experience with researching, honing your
Google-fu, and building things, youll eventually get a hang of this
process.
Looking at Solutions
Take a look at all diagrams youve drawn as well as the
functionality list youve 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?
18 of 30
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 writtendont just use
them blindly. Youre hopefully not going to be building anything too
complex right now, so right now youre 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 developers research

process for a particular function, you can check out this post about
how Angular-Plunkers creator built Plunkers drag-and-drop
directives.
Choosing Tools to Get Started With
If youre building a web app, perhaps you can check out Yeoman
19 of 30
as it aims to help you quickly kickstart new projects by helping you

set up the structure of your project.
If youre 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 youre 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). Dont worrymost of the time these tools come with
tutorials that will teach you how to install them.
Step 8: Building the App
20 of 30
Yes! Youre 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

youre not done with one task such as a commenting system, dont
suddenly start to build a user profile view. In other words, if youre
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, its 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 its worth it. However, if youre looking to build
21 of 30
bigger projects in the future in which youd continue to add new

features, this may happen to your app:
Then this (is an exaggeration of what) may happen:
Or god forbid:
22 of 30
And this would be you, trying to fix the app:
More or less.
So, its a good idea to start small and get into the habit of doing
Test-Driven Development (TDD), especially since youre starting
fresh and building something simple.
Youre not on some deadline with a project managers 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 youre building an iOS or Android app, its a good idea
to check out Crashlytics.
Use Git
Git is a version control system and a full-fledged repository with
23 of 30
complete history and full version-tracking capabilities. Its 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, youll feel like that hamster more often than not.
Youre not alone. Sometimes, all you have to do take a break and
let the issue simmer so you can clear your mind.
24 of 30
If this still doesnt 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 dont know why your
code isnt working, its a good idea to Google.
Ask on StackOverflow
Youd probably notice that your google results will mostly point to
questions and answers on StackOverflow. If you still cant find a
solution to your problem after googling your ass off, then you can
try posting a question on StackOverflow.
Remember to show that youve done your research in your
question youre more likely to get an answer that way.
Alternative: Find a Mentor
Some people will say that StackOverflow isnt beginner-friendly
because beginners dont know how to phrase their questions. But
what if you dont even know what your problem is?
25 of 30
If you get to the verge of headdesking (or if youre already

headdesking), you dont have to abuse your forehead (if you hit
your head hard enough youll just lose braincells).
One great alternative to facilitating your development and your
learning process is to get help from an experienced programmer.
You dont need to feel like youre 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 arent a big deal
right now but is actually a bad practice.
Remember, back then many self-taught developers didnt 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 youd 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
26 of 30
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 dont feel discouraged
when you cant even pass a test youve written or if youre
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 dont assume you can build the
most perfect, bug-free app out there (of course, this doesnt mean
you should set low standards for yourselfyou should always strive
to build quality apps).
In addition, its 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 wouldnt
need new programmers. Hell, wed probably be on a flawless
iOS100 now and living in a digitalized world like to one in the
Matrix.
Thus, a lot of times, youd hear the term make mistakes whenever
people are encouraging you to start building things. They mean it.
One thing youll have to accept as a programmer is that youre not
going to be a badass coding machine who can conjure up features
in a snap. Youll going to be failing a lot and thats ok.
Again, remember youre a beginner, so a lot of things are going to
be inevitably difficult at first. Youre going to be spending a lot of
time on something that you think should be simple and it will seem
27 of 30
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
28 of 30
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
29 of 30
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!
30 of 30

How To Become A Programmer: 8 Steps To Building An App From Scratch

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

How To Become A Programmer: 8 Steps To Building An App From Scratch

Загружено:

Авторское право:

Доступные форматы

How to Become a Programmer: 8 Steps to Build...