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. , it can take as long as you need to get it right. For you 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 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.com _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 MyLysts Let’s get started! 1. Read Inspirational Stories I have written a couple stories and on Medium to help beginners understand what it takes to succeed at learning to code and getting a job or building your own application: here here _In August of 2013, I decided to be a marketing major because I was afraid of the engineering related math._writingcooperative.com How I Went From Newbie to Interning at IBM, NASA, & Medium in 1 Year _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 Why It’s Not Too Late to Code & How to Maintain Your Sanity I have also collected a couple other stories on for the same reason: MyLysts _Learning to code? Some stories to help you be inspired and stay motivated. - 4 Links_www.mylysts.com List - Inspirational Stories 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 _The beauty of the computer science, software development and engineering industry is that we enjoy sharing. We like to…_medium.com Java for Humans {Learning to Code by Googling} 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 , but if you want something a little more powerful but still lightweight, . Here’s more in case those doesn’t suit your style: Sublime Text check out Visual Studio Code _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 List — Text Editors 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, You might here about something called an , 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. Google is your friend. IDE 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 and . Also, check out tutorials: HTML CSS Codecademy’s _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 Make a Website I have listed more resources right here for you to check out: _Resources for learning to code websites - 1 Link_www.mylysts.com List - Websites 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 is, what a or is, what a is, what an 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. variable function method loop if-else-statement 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 , you should know why my two queries presented me the most relevant answers. Learning How to Code by Googling 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 Javascript lessons. Codecademy’s _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 JavaScript 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: _Resources, tutorials, and guides to help you learn how to code in javascript. Learn how to add actionable buttons to…_www.mylysts.com List - Learn to Code in Javascript (JS) 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 . CRUD will be important as you learn about APIs later in this guide. here Server-side vs. Client-side 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. Server-Client Relationship: 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. _Learn the differences between a server and a client and how they interact to bring you an interactive website or mobile…_www.mylysts.com List - Difference Between Server & Client 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 field (key-value pair) being a simple , it is now an object that has two fields of its own: which is a string containing a number, and which is a string containing a word. weight String value unit 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: _JSON is so simple it can be hard to understand its use. Here are some resources to help - 4 Links_www.mylysts.com List - Learn Javascript Object Notation (JSON) HTTP The Hypertext Transfer Protocol ( ) is an application protocol for distributed, collaborative, hypermedia information systems. is the foundation of data communication for the World Wide Web. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text. — HTTP HTTP 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 ( ) 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. 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 status code to indicate that the server had successfully handled the client’s request. Hypertext Transfer Protocol HTTP status codes 200 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: _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 List - Learn HTTP & its Role in Internet 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 _Before I learned software development, API sounded like a kind of beer._medium.freecodecamp.com What is an API? In English, please. Here are some more resources and videos for you: _Some resources to learn about application program interfaces. The internet and connected services run through…_www.mylysts.com List - Learn About API's 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: _REST stands for Representational State Transfer. Resources to help you learn more about it and how to build one. - 8 Links…_www.mylysts.com List - RESTful API 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 ; Learn Git and GitHub without any code: here _The Hello World project is a time-honored tradition in computer programming. It is a simple exercise that gets you…_guides.github.com Hello World Here are some more resources for you to learn what Git and GitHub are: _Some resources to help you get started with Git and get your source code up on GitHub. - 7 Links_www.mylysts.com List - Learn Git & GitHub 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 and in two weeks each. It’s the MEAN Stack: SuperMeditor.com MyLysts.com 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 website, let’s start by learning what MEAN is MEAN.io MEAN stands for: is the leading NoSQL database, empowering businesses to be more agile and scalable. MongoDB 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. Express lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. AngularJS is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js 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. _Resources and tools for learning the MEAN stack and building your first webapp._www.mylysts.com List - MEAN Stack (JS) 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. _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 List - MEAN Stack Projects for Beginners 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 → _This tutorial demonstrates how to use the MEAN stack to rapidly create a RESTful API server and web application._devcenter.heroku.com Create a Web App and RESTful API Server Using the MEAN Stack | Heroku Dev Center 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: _This tutorial demonstrates how to use the MEAN stack to rapidly create a RESTful API server and web application._devcenter.heroku.com Create a Web App and RESTful API Server Using the MEAN Stack | Heroku Dev Center 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: _REST stands for Representational State Transfer. Resources to help you learn more about it and how to build one. - 8…_www.mylysts.com List — Learn & Build RESTful APIs 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: _Resources to help you learn the the Swift programming language and start building your own iOS (iPhone, iPad) apps._www.mylysts.com List - Learn to Code in Swift Built your first app? May be it’s time to try cloning Facebook, Instagram, Twitter, or Snapchat now: _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 Create FULL INSTAGRAM Clone with Swift and Xcode. Be advance 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 : . You can read it for free online or support my work by . source code Java for Humans 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. Here are some resources to help you through those steps: _Some resources & tutorials to help you learn how to program Android apps. There are more Android phones in the world than all other…_www.mylysts.com List - Learn to Code Android Conclusion That’s all it takes. If you’ve made it this far, I hope this guide has helped you accomplish the goals you set out to. Thanks for reading! Please click the recommend button below and share with anyone who wants to know how to go from noob to building a mobile application on the back of their own RESTful server and API. Related Reads _Or My Short Summer as a Small Person at A Medium Corporation With a Long List of Big Ideas…_byrslf.co My Summer Engineering Medium _Learn to Code Life. Teaching Java to beginners in more enjoyable and human relatable ways._medium.com Java for Humans | Table of Contents