How to Go From Newb to Developing a Mobile Application on the Back of Your Own RESTful Javascript…

I am often approached by aspiring programmers who need direction in beginning their journey of learning how to program. While programming is not all about building websites and mobile applications, building something familiar is often a great first step to a future as a programmer / developer. Beginners also often say, “I want to build a mobile application.” I did, too, when I first started a couple years ago because it’s one of the easiest, while still being substantial, steps. Still, it can all be daunting.

So where to begin? What should I learn first? What else should I be learning at the same time? Do I need to pay for lessons? Where can I find help? There are many answers to each of those questions, but in the guide that follows, I will lay out what I believe is a manageable plan of attack for going from knowing nothing about coding to building a server and a mobile application that interacts with it. What this will not be is a tutorial. Instead, I will point you to resources that will better help you get started and pushing towards the finish line of your first project.

What You Will Learn

In this 10-section guide, you will be guided through learning the following:

Finding inspiration and staying motivated in your journey
How to google effectively
HTML & CSS
The Basics of Programming
Javascript
Some Important Jargon
A popular Javascript framework: The MEAN Stack
Building a MEAN Stack App
Build a Server and RESTful API With MongoDB, Express, NodeJS
Learn How to Build an iOS or Android App on the back of your RESTful NodeJS Server

The Focus of This Guide

This guide will focus on guiding you through learning Javascript to get to the point where you can build your own server and RESTful API with Javascript. Once you have the Javascript API, you will be able to interact with it through any front-end client, and that includes Android, iOS, and even Windows phone if that’s how you roll. That’s the beauty of a RESTful server: any client that you grant access to the API will have the ability to interact with the server to store and retrieve data. That means you could build a thousand or a million mobile applications on the back of a single server. You’ll learn more about this later.

Leading With Sound Advice

It is important to note that Java and Javascript are two independent and unrelated programming languages, but because they share similar implementations of concepts, I will use excerpts from my aforementioned book to explain some concepts throughout this guide.

You should take your time to work through this guide. For some, it may take a week to do everything this guide outlines and finish a project. For others, it can take three months. For you, it can take as long as you need to get it right.

Remember that this is a handbook to guide you through your learning experiences. It is not meant to be read straight through like a story. It is written so that each part is independent of the parts that come after it, so take it part by part.

Most of the references in this article are from lists I have made at MyLysts.com and while you go through this guide and your learning experience, it would be wise to make your own lists of resources that you like. Your lists can be public, unlisted, or private, so don’t worry about others seeing it if you don’t want them to:

MyLysts_Build your lists. Learn something new. Build public & private nested lists of text, links, & images. Collaborate with others to build large lists._www.mylysts.com

Let’s get started!

1. Read Inspirational Stories

I have written a couple stories here and here on Medium to help beginners understand what it takes to succeed at learning to code and getting a job or building your own application:

How I Went From Newbie to Interning at IBM, NASA, & Medium in 1 Year_In August of 2013, I decided to be a marketing major because I was afraid of the engineering related math._writingcooperative.com

Why It’s Not Too Late to Code & How to Maintain Your Sanity_Some who read my last article, “How I Went From Newbie to Interning at IBM, NASA, & Medium in 1 Year & How You Can, Too…_medium.com

I have also collected a couple other stories on MyLysts for the same reason:

List - Inspirational Stories_Learning to code? Some stories to help you be inspired and stay motivated. - 4 Links_www.mylysts.com

It is important that beginners read those stories or stories like them so they understand that while it won’t be a walk in the park, the journey will be worth embarking on. I urge you to start by at least reading my two stories above for inspiration, motivation, and understanding of how to get through the hard times.

2. Learn How to Google Effectively

As a software engineer, I must always be learning. The best way to learn is by asking the right questions and knowing how to find the right answers. I continue to master this art. — LincolnWDaniel.com

Java for Humans {Learning to Code by Googling}_The beauty of the computer science, software development and engineering industry is that we enjoy sharing. We like to…_medium.com

That is an excerpt from my website in my “Expert Researcher” section. I always tell people that I am largely an expert researcher who happens to enjoy solving tough problems with code. You, too, must become an expert researcher. You must learn how to ask the right questions to get the best answers. When you are trying to solve a problem and get stuck, you will need to look to the community for ideas on how to proceed. Sometimes, you may get a straight answer, but other times, you may need to dig deeper and use your newfound knowledge to ask another question that will get you closer to an answer. However, there will also be times when nobody knows the right answer. This is when you will need to apply reason and logic to solve the problem on your own. Further, even when you get an answer from the community, you may need to adapt it to fit your situation.

One of the best ways to learn how to code is to dive in and build something from the ground up. Use the resources available to you to facilitate and expedite your learning process. When you get stuck, stand on the shoulders of the giants who came before you to get yourself back on the road to success. — Java for Humans “Learning to Code by Googling” Chapter

It is critical that you learn how to effectively Google. Start here.

3. Learn HTML & CSS

Get a Text Editor for Writing & Saving Your Code

Before we move on and get to HTML and CSS, you will need to get one of these bad boys:

Text Editors are the simplest means to writing code. The text editor you choose can have a big impact on how you code. One of my favorites is Sublime Text, but if you want something a little more powerful but still lightweight, check out Visual Studio Code. Here’s more in case those doesn’t suit your style:

List — Text Editors_Text Editors are the simplest means to writing code. The text editor you choose can have a big impact on how you code…_www.mylysts.com

You will need one of those to write and save your HTML, CSS, and Javascript code from now on. If you’re still not sure what they are or why they are useful and important, Google is your friend. You might here about something called an IDE, but nevermind that until you get to the end of this guide where you will need an IDE to build your mobile application for iOS or Android. Right now, you want a simple text editor that gets the job done neatly.

HTML & CSS

While we are not focussing on building a website, many tutorials that deal with building a server will use a website front-end (the client side of the application — this is what you see and the actions you are able to take) to interact with the back-end (the server side of the application — this is what you don’t see. It powers the app and handles the actions you take). You will want to understand what HTML is and what CSS is used for.

I just ran that query on google.

Really, it isn’t tough. Some don’t even want to call it coding. HTML, or Hypertext Markup Language, is simply the content that shows on your screen. Everything you see on a website is HTML. Then there’s CSS:

CSS, or cascading style sheets, is simply a bunch of rules that you can use to make your HTML look how you want. You can think of HTML as the frame of the house and CSS as the paint, furniture, and other things you can add to your house to make it beautiful.

Some people like to knock W3Schools, but it is a great place to start when learning HTML and CSS. Also, check out Codecademy’s tutorials:

Make a Website_Codecademy is the easiest way to learn how to code. It's interactive, fun, and you can do it with your friends._www.codecademy.com

I have listed more resources right here for you to check out:

List - Websites_Resources for learning to code websites - 1 Link_www.mylysts.com

4. Learn Basics of Programming

We program to capture and manipulate information, data, to create new data for users to consume. — Java for Humans “Variables” chapter.

You will need to learn what a variable is, what a function or method is, what a loop is, what an if-else-statement is, what datatypes are, and what a class and object are. You will also need to learn what mathematical operators are available to you when programming in any language. It would also behoove you learn what Object Oriented Programming (OOP) is.

While these concepts are virtually universal across programming languages, start by learning them in the context of Javascript. Don’t know where to start? Google!

By now, because you read Learning How to Code by Googling, you should know why my two queries presented me the most relevant answers.

5. Learn Javascript

We are finally getting into coding. Now that you know the basics of coding/programming, you can jump into Javascript. Javascript is the de facto language of the web. While it can be used for many things, it is most commonly used for adding actions to your website. When you click the “Like” button on Facebook, Javascript is what handles that action and sends your request to the server to allow you to show appreciation for the Facebook status. There is so much you can do with Javascript. You can build your front-end software system (app) with Javascript and you can even build your server (back-end) with Javascript as you will learn later in this guide. Before getting to the server, start on the front-end by adding buttons to your website that you learned how to build with HTML and CSS earlier in your journey.

A good place to start is Codecademy’s Javascript lessons.

JavaScript_Codecademy is the easiest way to learn how to code. It's interactive, fun, and you can do it with your friends._www.codecademy.com

After this, you will be ready to build something cool with HTML, CSS, and Javascript. I have listed a few more resources for you here:

List - Learn to Code in Javascript (JS)_Resources, tutorials, and guides to help you learn how to code in javascript. Learn how to add actionable buttons to…_www.mylysts.com

6. Learn Some Important Jargon

You’ve come a long way by now. You now know how to code in Javascript. What’s next? Jargon! Yay!

Okay, fine, that may not be exciting, but what comes after will be. I promise, so hang in there. While a great deal of jargon in any field isn’t critical to understand and know like the back of your hand, some are indeed necessary if you want to get far. In order to build your server and your first mobile app, you will need to know a couple terms, phrases, and ideas surrounding server development. I suggest you learn them in the order I have written them in.

Database and CRUD

A database is simply where data is stored for later retrieval. CRUD stands for Create, Read, Update, and Delete in respect to data. A software program can create data and store it in a database, read data from the database, update data in the database, and delete data from the database. That is all you need to know for now, but you can do more research here. CRUD will be important as you learn about APIs later in this guide.

Server-side vs. Client-side

Server-Client Relationship: The server and client work together to create an interactive application for users to use. Most times, the client asks the server for data and the server delivers it. Other times, the client sends data and the server processes that data, saves it to a database, and retrieves it the next time the client asks for it.

An example of data that the client might ask for is the most common case: a webpage. When you visit a website, the client, your browser (Chrome, Safari, Firefox) sends a request to the server to ask for the HTML, CSS, and Javascript files to display to you. When the server responds with the data the client asked for, the client shows it to you, the user. Later, while browsing the website, say Twitter, you might want to sign up to see more cool stuff. The client will show you a form for you to enter your information (username, password, and email) for your account. When you hit “Save”, “Send”, or whatever the developer decided to put there, the action connected to that button through Javascript sends the request to create your account to the server. When the server receives that request from the client, it creates your account and stores it in the database for you to use when you sign in. When you make changes to your account later, perhaps you want to change your username, the client must send another request to the server to update your account in the database.

That’s pretty much how it goes, but you should definitely watch some videos for further more in depth explanations of how the server and client interact and how they are built. You will be building your own client and server soon, so be sure to pay attention.

List - Difference Between Server & Client_Learn the differences between a server and a client and how they interact to bring you an interactive website or mobile…_www.mylysts.com

Another phrase to learn is front-end development. Here’s a Google search ready for you.

JSON

Since you know how to code in Javascript, you’ve probably already worked with JSON. When I first started learning Javascript and how to build a server, I had a hard time grasping this JSON concept because of how simple it is. It is so simple, it is hard to understand its use, but I promise it is important. Javascript Object Notation (JSON) can be thought of as simply a dictionary of comma-separated key-value pairs. Take this JSON object for instance:

var baby = {"name": "Bob Joe","age": "2","weight_in_pounds": "15","height": "16 inches"}

That is a Javascript variable and it is an object. That object is written in Javascript Object Notation (JSON). That object could also be written like this:

var baby = {"name": {"first": "Bob","last": "Joe"},"age": "2","weight": {"value": "15","unit": "pounds"},"height": {"value": "16","unit": "inches"}}

Notice that the data still represents information about a baby. The only difference this time is we have chosen to nest objects inside of the root object; instead of the baby’s weight field (key-value pair) being a simple String, it is now an object that has two fields of its own: value which is a string containing a number, and unit which is a string containing a word.

When we have a JSON, as you may already know from your Javascript learnings, we can access its fields using dot notation or subscript notation:

//using subscript notation:var babyFirstName = baby["name"]["first"];//babyFirstName now equals "Bob"

//using dot notation:var babyLastName = baby.name.last;//babyLastName now equals "Joe"

//using both:var babyWeight = baby["weight"].value + " " + baby.weight["unit"]//babyWeight now equals "15 pounds"

JSON is important because the client can use it to send objects holding data from the user to the server and the server can respond with another object that holds data about how the client’s request was processed:

/*The client sends request with this JSON object to server*/

{"username": "LincolnWDaniel","password": "easy-as-abc-123""email": "me@email.com"}

/*the server uses the fields in the object from the client to create the user's account and then responds to the client with this JSON object*/

{"status": "200","statusText": "Success"}

There’s only a little more to learn about what JSON is and what it is used for, but it is too much for me to cover here. I have compiled some good videos and other resources to help you learn more about JSON and its role in communication between the client and the server:

List - Learn Javascript Object Notation (JSON)_JSON is so simple it can be hard to understand its use. Here are some resources to help - 4 Links_www.mylysts.com

HTTP

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text. — Wikipedia

Don’t get too wrapped up in the other jargon embedded in this single concept alone. All you need to know is that HTTP (Hypertext Transfer Protocol) is the protocol that lays out how we have all agreed to communicate over the internet to transfer data between clients and servers. An HTTP server is a server software that implements the HTTP protocol while a HTTP client is a client software that implements the HTTP protocol. One of the most important parts the HTTP protocol is its status codes that clients must recognize. HTTP status codes are codes that HTTP servers and HTTP clients have agreed to use to communicate the status of a request from a server to a client. Above, I used the 200 status code to indicate that the server had successfully handled the client’s request.

Remember CRUD from above? Well, HTTP enables us to put CRUD to use. HTTP has its own CRUD methods that HTTP clients must implement and HTTP servers must recognize:

POST: lets you send, or post, data to the server with a JSON object as the body of your HTTP request. Often times, the data sent to the server will be saved to a database. This is the Create part of CRUD
GET: lets you request data from the server. You cannot send a JSON object as the body for this HTTP request. This is the Read part of CRUD
PUT: lets you send a request to the server with a JSON object as the body to update data previously POSTED to the server and saved in your database. This is the Update part of CRUD
DELETE: lets you send a request to the server to delete data from your database. This is the Delete part of CRUD

You will learn more about HTTP request methods and CRUD when you get to learning about APIs and building your own server.

There’s a bit more to learn about HTTP, but not to worry. I have collected some of the best resources here for you to start with. There are some videos to help you better understand how we use HTTP to communicate between client and server:

List - Learn HTTP & its Role in Internet_Resources to help you learn what HTTP is and how/why it is used in building the internet and other connected software.…_www.mylysts.com

Don’t spend too long on this as you’ll learn it best by using it. Just watch a video or two to get an idea of what you will be using and why it matters.

API

When it comes to server and client software programming, an application program interface (API) is simply a way for a client to communicate with a server in an organized and previously agreed upon manner. Think of it as the middleman between the client and the server.

Do some research on it, but do your self a favor and don’t read too deep into the details or you’ll drown. You’ll learn what you need to about it by building one soon. For now, watch this video:

and read this article by Petr Gazarov:

What is an API? In English, please._Before I learned software development, API sounded like a kind of beer._medium.freecodecamp.com

Here are some more resources and videos for you:

List - Learn About API's_Some resources to learn about application program interfaces. The internet and connected services run through…_www.mylysts.com

RESTful API

I’m not even going to try to explain this one because I don’t want to risk either complicating or oversimplifying it and confusing you. There are many resources out there for you to learn about REST and API’s that can be built in adherence to it. Watch this video to start learning about REST. It can get confusing, but take it a step at a time. If you start to feel hopeless, back away from the readings and the videos and wait until you start building your own RESTful server; I promise it will be easier to build one than trying to understand the whole thing before starting.

Here are some more resources to help you better understand REST:

List - RESTful API_REST stands for Representational State Transfer. Resources to help you learn more about it and how to build one. - 8 Links…_www.mylysts.com

Git & GitHub

I won’t try to explain Git as I won’t do it much justice, but GitHub is simply a place where people publicly store and manage the versions of code for free. Git and GitHub go together. These two are pretty important as you’ll run into them quite a bit when building software, especially web apps. I suggest you start here; Learn Git and GitHub without any code:

Hello World_The Hello World project is a time-honored tradition in computer programming. It is a simple exercise that gets you…_guides.github.com

Here are some more resources for you to learn what Git and GitHub are:

List - Learn Git & GitHub_Some resources to help you get started with Git and get your source code up on GitHub. - 7 Links_www.mylysts.com

Others

There is definitely more jargon to be learned, but this should all of the ones that I project would have discouraged you quickly had you not done your research beforehand. Now that you understand these terms, you should be ready to build your server.

7. Learn A Popular Javascript Framework: The MEAN Stack

Javascript is a very powerful scripting language. It’s so powerful that you can use it to build both the client and server of your webapp. If you don’t want your client to be a website, you can make your client anything you want with any language you know and interact with your javascript server through an API that you build. Your API can be RESTful or not, but you’ll likely want it to be RESTful.

Anyway, let’s learn about one of the most popular Javascript frameworks that people are using to build huge websites and mobile applications. I used it to build SuperMeditor.com and MyLysts.com in two weeks each. It’s the MEAN Stack:

The Friendly & Fun Javascript Fullstack for your next web application.

MEAN is an opinionated fullstack javascript framework — which simplifies and accelerates web application development. — MEAN.io

Straight from the MEAN.io website, let’s start by learning what MEAN is

MEAN stands for:

MongoDB is the leading NoSQL database, empowering businesses to be more agile and scalable.

Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.

AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

If you don’t know any of the terms used in those definitions, its time to exercise your right to a quick a speedy Google search. Here’s where I might start:

Now, you might be wondering what SQL even means… Continue your research, but don’t go too deep. Never go too deep in research while you’re learning how to build something new. It is better to understand the general idea and then build something to learn more of the practical use. By focusing on the practical use, you will learn more of the conceptual knowledge behind an idea from your successes and failures.

Before you start building your first MEAN app, it may or may not help to more deeply understand each of the individual parts of the MEAN Stack. For that, I have made you another list of resources. In this list, you will find four — one for each framework in the MEAN stack — more lists and each lists will have resources, including links and videos to help you learn and build with these tools. Once you feel comfortable with what MEAN is, it will be time to build your first web app with it.

List - MEAN Stack (JS)_Resources and tools for learning the MEAN stack and building your first webapp._www.mylysts.com

8. Build a MEAN Stack WebApp

It’s time to start learning by doing. Pull yourself up by your bootstraps and dive into your first project. I have collected some projects that should be an easy start for you. Choose one and work through it as slowly as you need. Do not rush. Do not copy code. Type out every line on your own if you really want to learn.

List - MEAN Stack Projects for Beginners_I built this website in just 2 weeks using the MEAN stack. Here are some fun projects you can start with to learn the…_www.mylysts.com

But I suggest you start with this one as it will teach you about how to build your webapp and how to make it live for all of the world to see for free! Look it →

Create a Web App and RESTful API Server Using the MEAN Stack | Heroku Dev Center_This tutorial demonstrates how to use the MEAN stack to rapidly create a RESTful API server and web application._devcenter.heroku.com

You will need to remember how to use Git for this Heroku one so look back up to the Jargon section of this guide.

9. Build a Server and RESTful API With MongoDB, Express, NodeJS

If you didn’t learn how to build a REST API in the last step, it is time to learn how to now. Notice here that we are going to use a modified version of the MEAN stack by removing the “A”. Because we only care about the server, we don’t need the front-end part of MEAN — AngularJS. We only need Express and NodeJS for building the server and MongoDB for building the database that will hold information about our mobile app.

Again, I urge you to start here with Heroku:

Because we only care about the server and the RESTful API this time, you can skip the parts about the webapp if you feel comfortable doing so; it doesn’t matter either way since the server and client are two independent entities. If you need a refresher on what a server is or what a RESTful API is, refer up to the jargon section.

Take you time in this part. If you don’t want to do the Heroku tutorial, feel free to do some googling for a more fitting tutorial. Here’s some resources:

List — Learn & Build RESTful APIs_REST stands for Representational State Transfer. Resources to help you learn more about it and how to build one. - 8…_www.mylysts.com

It helps to keep in mind what kind of mobile app you want to build because it will need to interact with the API and the server to send data to be saved in your database and retrieve data from your database. While you work on your server and RESTful API, keep in mind how you will need to modify it to work for your mobile app. You may even want to build your mobile app’s server while you learn in this section. I did the latter when I started, but do whatever you are comfortable with.

10. Learn How to Build a Mobile App

Welp, you made it this far. There’s no looking back now. You have learned how to make a RESTful server and an API to interact with it. It’s time to achieve what you set out to when you started reading this guide. It’s time to learn how to build a mobile app on the back of your server.

Want to Build for iPhones & iPads? Build an iOS App

Here are the steps you need to take to build your first iOS app that will interact with your server through your API:

Learn Swift
Build your first basic app in Swift
Learn how to add HTTP requests to your app to interact with your server through your API.

Here are some resources to help you through those steps:

List - Learn to Code in Swift_Resources to help you learn the the Swift programming language and start building your own iOS (iPhone, iPad) apps._www.mylysts.com

Built your first app? May be it’s time to try cloning Facebook, Instagram, Twitter, or Snapchat now:

Create FULL INSTAGRAM Clone with Swift and Xcode. Be advance_Learn how to create real full clone of Instagram using Swift 3 and Xcode. Learn how to create your own social network!_www.udemy.com

Want to Build for Androids? Build an Android App

Here are the steps you need to take to build your first Android app that will interact with your server through your API:

Android is built on Java, so learn Java first. Lucky for you, I’ve written an entire book on it and made it free to read online with the complete source code: Java for Humans. You can read it for free online or support my work by purchasing the Kindle ebook.
Build your first basic app in Android.
Learn how to add HTTP requests to your app to interact with your server through your API.