Building APP from scratch with Node.js, MongoDB
I write this blog from the beginners point of view.
Why I chose this one?
I chose Node.js as my server-side programming language and MongoDB as my Data Base. Because I know JS. But, When started learning Node.js and MongoDB. I struggled a lot. I think in myself, Don’t stop there are lot of resources.
What we are going to build?
Quote APP. The project is running here.
- HTML for creating UI.
- Use of server-side programming.
- Use of Data Base.
Note : If you see the 3 dots (line break) just stop and read the para’s above the line break once again. It will help you to clearly understand the flow.
I am strongly recommend you to use glitch. We can easily install modules by just searching and selecting, Directly host the Node.js App by just one click.
Steps on building Application!
Create one fresh project by clicking on hello-express.
Look at the project structure at the time of creating files or folders. It’s a easy way to eliminating errors.
Step -1 : Create folders and files as like as in the project structure.
Step -2 : Inside quotes.html, Create a form with input names( title, body, author).
Above form is sending the title, body, author to the server.
Step -3 : Inside viewquotes.html, Create a div tag for displaying the quotes which we stored in the database.
Step -4 : Inside viewquotes.js, Write AJAX function to send the get request to the server.
In the above AJAX function we are requesting the server to send the quotes which is in the database. (The above function will work once we write the server side code) . Please do read the code again until you get understood. Still, couldn’t understand. No worries. You will understand once we stepped into the server side code. Cheers!
Stepping into the database … Woohooo!!!
Step -6 : Create a schema and model (In other words, Table structure and Table using the structure)
In first line, There is a mongoose module (you must install it. Instruction is given under this para) which is used to create a schema and model in mongoDB. From 3rd to 8th line, Structure of the the model(table) is created. In the 10th line, Model is created using the structure. In the 12th line, Model is created which is to going to be imported inside the server.js file (later).
Inside the package.json file, Search for a module and select the module. It will be added under the dependencies which is inside the package.json.
When you click at the mongoose It will be added automatically under the dependencies (which you can find inside the package.json file).
Head to creating server side code inside the server.js file. Getting close to shutoff this project!!!
Step -7 : Run the server first.
Here, express.js framework is installed and required. Why framework?
See the code difference in creating a server with and without using express.js. There are also many advantage you can learn from here. Woohoo! You created the server. Awesome!
Step -8 : Importing files, Installing modules and Using the modules.
In the 3rd line, We required the body-parser module to parse the body request which will be coming from the client side after installing. In the 4th line, mongoose is required, Which is already installed. In the 5th line, We requiring the path It doesn’t need any installation process. In the 6th line, quote.js file is imported which is already created under the model folder and exported. In the 8th line, We connected the mlab. It will going act as a online mongo database (See the below video learn how to setting up the mlab and use cloud mongoDB). In the 10th line, the static files are served which is inside the public folder. In the 12th and 13th line, body-parser module is ready for using.
Step -8 : Serving the html file in URL’s.
Visiting ‘/’ will serve the quotes.html file and ‘/viewquotes’ will serve the viewquotes.html file.
Step -9 : Storing the quotes inside the database.
Just go back to the step-2 and see the code. We set the action to post. So, When we click the submit button. It will reach ‘/post’ and will perform the callback function ( which is the function written after the comma(,) ). In the 4th line, new quote object is created and from 3–7 lines we creating properties for the object. title, body and author must be same as the field name in the quote schema. req.body is using to parse the body request. title, body and author at the right hand side is the name of the input tags. from 6–15, object is saved in database and redirect to the ‘/viewquotes’ if the data is stored correctly otherwise it will send the error back.
Step -10 : Retrieving the quotes from the database.
Please do read the step-4. There AJAX is used to send the get request at the ‘/get/quotes’ end point. So here in the server It is getting the all quotes from the quote table and sending back to the client. In the client we getting the data(object) from the server and paste it in the document (displaying in the viewquotes.html).
Above code is part of the AJAX function, It’s is for your understanding. Now, Did you understand what is happening? That’s great! .
Step -10 : Deleting the quotes from the database.
It will delete the quote inside the database, in respect with the id we sent in the URL ‘:id’. When you click at the delete button, which you already created in the AJAX call back function. Try to understand the append function as much as you can.
Yup! That’s it. Delete button is working fine now.
Step -11 : Try to work with update function and update the quotes.
Ya, You are right! . You just created the node.js application and hosted it in the glitch.com. Excellent!
Comments are always welcome!
Day 1. That’s 1 blog, See you tomorrow!