How to build an app from scratch
This is a question that all programming beginners and or entrepreneurs have asked dozens of times.
There are steps you need to follow, languages you need to learn, logic you need to understand but I’ve tried to understand and bring it this way. So here goes.
How to build an app from scratch
Step 0 – (Yes, zero) Build something you are passionate about
Basically you need to understand yourself, that includes what you want, what you like and what you care about. Interest is the best way to keep motivated, so ask yourself these questions and be sure of what you want. It’s best to identify your interests so you can have fun with the project you are working on. By doing this, you are less likely to get tired and give up when you are halfway.
Ask yourself questions like:
What apps do I enjoy using the most?
What apps can’t i live without?
Do I like playing games?
Do I enjoy designing things?
And do on and so forth.
- Step 1: Pick an Idea
Now that you have figured yourself out, hopefully. It is time to pick an idea to build. Right now you shouldn’t be thinking of making things like RPG or something big and complicated. Start simple.
Based on your interests, come up with an idea for a simple app that will do something neat. It does not matter if the app already exist. In fact it may help you if similar projects already exist.
For example, if you like or enjoy cooking, you can maybe build an app for people to showcase their recipes. Homemade or otherwise.
Try building a simple playing card game like Black Jack, if you like card games.
If you enjoy playing League of Legends, you can try looking through Riot’s API and build a site that can obtain & display game information.
Once you have a direction, a path. Write down the purpose, in one sentence preferably, and, if applicable, the most important target users for this app.
Example: A cooking app for people who enjoy cooking or want to give it a try.
- Step 2: What are your app’s core functionalities
Think about what your app should be able to do and list them out. If you end up listing a lot of things, take a better look and ask yourself if the app REALLY needs them.
It’s great to have a dream project with awesome specs, but right now the point is not building something that is complete with a lot of cool features. Keep in mind that no app is ever complete, and everything starts out simple.
Do not try building an all-in-one app. Do not. I repeat. Do not go there. The result is a lot of pain and little progress. Unless, of course, you have an iron will or you really love challenges, if not you will just end up frustrated and discouraged if your first project is too hard to build.
You are a beginner, the point right now is to have fun which is the most efficient way to learn.
If the list of your app’s core functionalities is too long, start crossing out functionalities your app can work without. Remember that this is your version 1 and you should just keep things simple. Focus on the things that will allow the app to perform whatever it’s supposed to do—everything else can be left for a different project.
- Step 3: Sketch Your App
By now you should have a pretty solid idea of what your app should do, so go ahead and 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. Remember to 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.
- Step 4: Plan Your App’s UI Flow
You have a good idea of what your app will look like, what every element 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.
- Step 5: Designing the Database
After you have 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 would need to keep track of things such as the username, user ID, the user’s email, the password, whether the user’s email is confirmed, when the account was created and every time the user has logged into your app.
- Step 6: UX Wireframes
Hopefully, you are still excited. You know what you need—now you have a much better idea of what your app should look like. Humans are mostly visual creatures, you would have a better time understanding what you should do if you have a visual of every view you’ll be coding. 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 7: 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 are likely going to design the app before you start anyway. Don’t get too hung up on the app’s appearance. Right now you should be focusing on building an app’s functions instead.
- Step 7: Researching Solutions
You are done with the planning stage…but how are you supposed to code all that?
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.
Looking at Solutions
Take a look at all diagrams you have drawn as well as the functionality list you have made in step 2.
What are some things you have absolutely no idea how to build?
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 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.
Choosing Tools to Get Started With
If you are 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
Toe are ready to build the app now! Yeah! Go knock yourself out.
