“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 .
Step 1: Pick a Language
Step 2: Learn the Language
Step 3: Build Stuff and Keep Learning
Hold on, 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).
- Learn iOS Development (For Apple application developments you must know Objective C or Swift)
- Learn Android Development (For Android application Development you must know Java)
- Learn Xamarin Development/PhoneGap Development (For Hybrid application Development if you know any other language, and interested in development)
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/Instagr
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 JavaScriptand don’t want to learn another language, then you can try Node.js, as it’s a JavaScriptplatform 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
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.
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. In addition, if you have any future features planned, this is the time to plan them into your 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.
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. You know what you need—now you have a much better idea of what your app should look like.
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 - minimal wireframing tool - for free, 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-esqueapp).
Many online databases exist for you to search for backend-related components/packages/gems/
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 CocoaPodsfor 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, your mind will get explode. 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?
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 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:
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.
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.
No comments:
Post a Comment