Tweet real-time web application – Backend Development

MEAN – Members Tweet real-time web application – Backend Development

Hello Guys,

This tutorial going to learn you building a real-time web application alongside me. If you want to learn a modern approach to build a real-time web application then MEAN a stack is an awesome option.

You want to know why? Because you will only use One programming language which is Javascript to build the entire Web application from Frontend (Angular) to Backend (Node.js + MongoDB + Express).

By the end of this tutorial, you will be proficient in these technologies
Angular.Js
Node.js
MongoDB
Express
As well as you will be able to build your own web application.

If you never coded before, my advice is to just dive in and get your fingers dirty and even if you don’t understand one concept, don’t worry, you can ask me a question.

Remember repetition is the key to learning something. The basic knowledge that you need to have before taking this course
HTML and CSS
JavaScript

As for JavaScript, you don’t need to be an expert to take this course, just learn these few concepts on your own.
If/else statement
Function
Object
Anonymous function
Promises
For every concept, just go Google and copy-paste the concept and don’t forget to add JavaScript at the end.

Let’s Start Now.
PART 1 – INTRO ABOUT SINGLE PAGE APPLICATION (SPA)
PART 2 – SET UP MEAN ENVIRONMENT
PART 3 – SERVER SIDE DEVELOPMENT

1. Open your Windows Powershell
2. Move to your projects directory and Create your project directory. Like here memberTweet is my project directory.

3. Move to your project directory and initialize the npm environment. npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you’re sharing. This will ask you a bunch of questions, and then write a package.json for you.

Your package.json file look likes below.

Now its time to add your dependencies(express, body-parser, morgan) into package.json file.back to powershell and install your dependencies.

package.json file after adding dependencies

READ MORE  What is Single-page Applications(SPA) ?

Now, We are almost good, We have to now create our server.js(index.js) file.Initially, we write the code to run our server on port 3000. So your server.js file should like below.

You can run your server file and test it.

Now, we are going to build our config.js file to initiate configurations and variables for our application.

How to use our config.js file into server.js

Next,step initialize our body data and create hello word index.html page, so your server.js

Now create public/views/index.html and write Hello World as text and run your server from PowerShell using a command
node sever.js, go to your favorite browser and access URL http://localhost:3000/

READ MORE  Setup the MEAN Stack on Windows

We are just completed our simple Hello Word Application.
DATABASE CREATION AND MAKING CONNECTION
Now its time to create new DATABASE and making a connection with our application.
Steps in details
You have to go URL https://mlab.com/
sign up your new account if you don’t have. Once you sign up to verify your account and login with it.
Now you can see a button create a new database
in the next screen choose your cloud to provide(i have selected Amazone),
Don’t require to change region box
then select a single node, it will give free sandbox account to choose.
It is up to 0.5 GB Free, now add your database name “membertweet”
finally, click on create MongoDB deployment.
This redirect to new home page where you can see your created database “membertweet”, click on this row
It redirects to screen where you can find the driver string to connect with database
example: mongodb://:@ds139082.mlab.com:39082/membertweet
A database user is required to connect to this database. To create one now, visit the ‘Users’ tab and click the ‘Add database user’ button.
You are done!

Copy this driver string and copy into config.js file like below

Its time to install mongoose in your dependencies,so it will update package.json

how to use this package in server.js

Now to test run node server.js from Powershell.

CREATING DATABASE SCHEMA and PASSWORD HASHING
install bcrypt-nodejs dependencies for password hashing functionality.

create app/models/member.js file into project directory.

SIGNUP API DEVELOPMENT
We are now creating our first SIGNUP API, to do that create api file at location app/routes/api.js

How to use your API call in server.js file

As we are not coming to the front end part, You can test your API call using http://localhost:3000/api/signup by POSTMAN a google chrome extension
pass your input data into BODY tab,
choose x-www-form-urlencoded
pass parameter name, membername, and password as key-value pair.
Click on the SEND button
This test should give you the success sign up message.

READ MORE  MEAN - Members Tweet real-time web application - Frontend Development

LISTING ALL MEMBERS FROM DATABASE

LOGIN API
Here you need to install jsonwebtoken into dependencies to validate token for correct user login

Now user want to post some tweets on home page, so let’s create a new model database schema that’s store members posted tweets.
create new file tweet.js at location app/models/tweet.js

Now its time to create API to post tweet data into our new TweetSchema and get all that tweets data.
below is the code for database.app/routes/api.js

CLICK TO CONTINUE FRONTEND DEVELOPMENT

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

powered by proof factor - increase conversions with social proof notifications
Share via
Copy link
Powered by Social Snap