Learn Bootcamp From Zero

MongoDB is one of the most popular database with Node.js and Express.js. It is a NoSQL database. From Google Image Firstly, we need to install MongoDB in our server. The course TA created a good installation tutorial video on YouTube. Since the MongoDB has updated its system. In the installation, we need to set up the   Ubuntu 16.04 (Xenial)   code instead of 14.04 version which is shown on the video. Once we finish the installation, we need to call "./mongod" and run the code, then open a new terminal window, and call "mongo" , then you are ready to use Mongo shell, which is like JavaScript console.  We can type "help" to learn the main MongoDB commands and their explanation .  After I learned this lecture, I summarized four basic MongoDB commands to do with your database: insert, find, update and remove. Insert I want to create a student databases which include student name and GPA score. I can use insert command to create t...

What is Database? According to the course, the database is not only a collection of information data, but it also an interface to interact with data such as add new data, remove data, or edit data. Two Broad Categories of Database: SQL (sequel) SQL is also called relational database. Sequel database are tabular database which data is stored in a table.  From Google Image NoSQL(non-sequel) For NoSQL, they are no tables, and it is basically JavaScript objects with a bunch of key value pairs. What's the difference between SQL and NoSQL? SQL has been around the longest. When we mention database, most people include myself first think of table. Everything is tabular, and if we want to relate data, we have to build other tables to relate that data. However, NoSQL is non-relational database, so we don't have to define any tables and patterns. This is a much more flexible structure. The course also mentioned that flexible structure is bette...

The course shows us we can make API's requests with Node. The first thing we need to do is to create the "APIs" directory and touch "request.js" file inside that folder. Then, we need to npm install request package in the APIs directory. Once we have done those basic steps, we can start to require the "request" and make a request from a JavaScript file. In the request, we need to have the "url" , so the server knows where it should request the API. Next, we need to have a function. request("url", function(error, response, body) In the function, there are three things we pass in: error, response, and body . Error: it will hold any potential error that we get such as internet disconnect, 404, and etc. It is important to check for an error. Response : it will be the incoming message that we receive Body : it is the actual response body that came back like HTML code For example, in the "request.js" ...

What is API's? API's stands for application programming interface. They are interfaces for code or computers to talk to one another. For example, we can use a Facebook account to login to Instagram. When we connect these two apps, Instagrams will link to and access your Facebook data. When you upload photos on Instagram, it will be automatically uploaded on Facebook, too. We also use a lot of Web API's every day. Web API's generally to communicate via HTTP. For example, we may ask Yelp API's to recommend 10 nearby Sushi restaurants in a certain zip code. Data Formats There are two main formats that web API is responded with: XML and JSON . When we use the internet, we make an HTTP request and get HTML back. API's don't respond with HTML because HTML contains information about the structure of a page. API's respond with data, not structure. XML XML stands for Extended Markup Language. It is syntactically similar to HTML, but it...

So far I have learned from the course is all about GET Request which is retrieving information. We run app.get("url", function) in our application. Today, the course shows us how to develop a Post Request by creating a simple friends app. The friends app is a list of friends. There is a form at the bottom, so we can submit a new name to add a new friend to the list. How to develop a post request app? Step One: Set up basic route We create a new directory "PostRequestDemo" under "MoreExpress" directory. Then, in this new directory, we install the express and ejs, and also create a new file "app.js". In the app.js file, we require the express, set up the app, and write a test route "home". We want to make sure everything is connect correctly. Then, we write "/friends" route to render to "friends.ejs" page. In the friend.ejs, we write a simple h1 tag "friend list".  Then, we run the app and see...

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...

We continue to use the app.js which we have build to be the study example. In the last post, we only add a simple EJS tag <%= thingVar %> inside h1 tag. This will match the "thing" to any "thing" request from the user. If Statement Today, the course shows us to write a simple if statement in the EJS file. I learn to apply it to my own app. In the if statement, if users send"/wantto/workout" request, the page will show a new content "Good Idea!". We wrote the if statement in the "diet.ejs" file, and we add "<% %>" tags around the code. We have to wrap every line of JavaScript anytime JavaScript starts and ends. Moreover, you may see there are two types of ejs tags here: <%= %> The one with equal sign. According to the course, when we add equal sign, the value that is returned inside of the tag will be rendered to the HTML page. it will be added to the HTML. For example, if we write ...

In the last post, I shared an example to show you how to render a HTML page from a EJS file. And, I also mention that this way has limitation because users will receive the same page every time. To solve this kind problem, the course instructor  uses a template to send specific HTML responses to users depending on their specific requests. Step One: Create Another HTML Page We create another HTML page in EJS file. In my HTML page, I just put some diet text and named it as "diet.ejs". Step Two: Write The Route Parameter and render the EJS file In the app.js, I write a route parameter "/wantto/:thing" in the app.get. By following this pattern, users can request any word to replace the "thing" to match the route and get response. Inside the function, I write res.render("diet.ejs") to render the diet HTML page. Therefore, when I run the app, and request "/wantto/health", the app send the diet HTML page to me. ...

The Express.js apps we have developed so far are just simply getting requests from users and sending matched message back to them. However, it is not what we want in the real web application. In most case, we want to send back a relevant web page when our app receives request from user. In order to do that, we need to npm install ejs file in the Express, create HTML page in the ejs file, and render HTMl from the ejs file. I know it sounds confuse now. I am going to explain more details in the example. EJS stands for embedded JavaScript. It lets us embed JavaScript code variables if statements loops inside of HTML. How to render HTML from a EJS file? Step One: Create a HTML page in EJS file Firstly, in our server, we create a folder named "EJSDemo". In this folder, we touch two files, one is "app.js", and the other one is "home.ejs". We are going to write a simple HTML code in the "home.ejs" file. The instructor create a dog page,...

Last post, I have learned to develop my first Express App from the course. Basically,  it has three routes. When we type "/", "/bye" and "/cat", the app will receive the request and send the matched response to us. But, if we want to send a nice message when users type other texts after slash, what should we do? We can write a "*" route which will run whenever out app gets any request to any url aside from those three routes that we have already defined. app.get("*", function) In the App.js file, we add a new star route, and it will send you a new message whenever you type any undefined request. I run my app, and put some random texts after slash, and hit enter. All I get is "You are a star!". If we move the star route to the top of those three routes, what will happen? The instructor run the app, the result is even though we send the "/", "/bye" or "/cat" request, all we get...