Sunday, April 25, 2021

Connecting the MERN project to mongoose - Backend Connection Establishment

 👍    MongoDB     <>   VS code project  ---  Connection Establishment

👉    In this blog lets go across the steps involved in connecting the VS code project to the mongo DB.

👉    Before starting the process make sure you have:

           1. VS Code.

           2. Mongo DB instance running in the local machine.

           3. Signed into the MongoDB Atlas

               [If you haven't signed in use the following link and sign in for free]

               https://www.mongodb.com/cloud/atlas/efficiency?utm_source=google&utm_campaign=gs_apac_sri_lanka_search_core_brand_atlas_desktop&utm_term=mongodb%20atlas&utm_medium=cpc_paid_search&utm_ad=e&utm_ad_campaign_id=12212624368&gclid=Cj0KCQjwppSEBhCGARIsANIs4p7CpEcFIqqnN-57Y3VyLCzNZa5rOsCISYZPPA0GDO1ha-MPTxPgTmYaAsbuEALw_wcB  

        4.  Have node JS installed in the machine.

        5.  MongoDB Compass.

🔆    Make sure you have these materials installed and signed up before you start the project. In case we need to install any other package or sign into other application, stay focused throughout the process to grab them

 👉     STEP 01 - Setting VS Code environment.

*    Create a folder in the project directory and name it as 'server'.

*    Then navigate to the server folder in the VS code terminal and type 'npm init'.

*    A init project will be created in the server folder.

*    Then install ExpressJS and mongoose by issuing the command: 'npm install express mongoose'

*    Then create the 'index.js' file in the server folder.

*    Type the following code in the index.js file

The VS Code image

*    Here the highlighted link is the step 2 : So How to get that link? lets discuss that in step 2 elaborately.

 👉     STEP 02 - Setting up things in MongoDB Atlas.

*    As the initial step sign in using the email and the password.

*    Then create a new project by giving a name for the project.


*    Then after creating the project you have to create a cluster in the project.


*    Then select the free cluster and then choose the cloud storage along with county (Make sure you choose a county with free storage fee) and provide a cluster name. Finally the cluster is created.

*    The below images shows the windows needed for a successful cluster creation.








*    After creating the cluster you have to select the users who have database access.

*    Create a database user with a username and password as follows.



*    After creating the user for database access then select the network access from the project homepage. Here you have to specify from which device/location you are accessing he database.




*    Now we have created a user for the database and the access location/device of the database.

*    Now go back again to the project-cluster homepage.


*    Click on the connect tab.
        
    1.    We should connect the database with the application.
        
    2.    We connect the database with the MongoDB compass for monitoring the database.

👉     STEP 03 - Connect the database with MongoDB Compass.


*    Click on the connect tab as mentioned in the above image.

*    You are launched at the following window.


*    Select connect with 'MongoDB Compass'.

*    Since you have MongoDB Compass installed in the machine copy the link to connect the database.

*    Paste the link in the MongoDB Compass (New Connection). 

*    You can see a part in the link mentioned <password>.

*    Erase that and type the password you have been given for the database user (One you created before with a Username and Password).

*    That's it, now you have successfully connected your database to MongoDB Compass where you can monitor easily.


👉     STEP 04 - Connect the database with VS Code project.

*    Now select the 'connect with application'

*    You get a link, copy that as before.

*    Paste that link in the highlighted part in the below code. 

*    Make sure you give the password of the database user as before.


*     That's all now you have the database connected to your MERN project.

*     Note that the main steps are mentioned for the demo purpose but you can explore more.

*    Stay tuned for the next blog on creating schema on MongoDB from vs code project.  





Sunday, April 18, 2021

MERN stack and Introduction

👉    What is MERN stack ? 

*    MERN stands for MongoDB, ExpressJS, ReactJS, NodeJs.

*    This is a combination simply a stack of all 4 technologies listed above.

*    A MERN Project structure is simple represented as:

    The Database of the project is         :        Mongo Database [Document Database].

    The front-end/ UI                            :        React JS.

    The web framework                        :        Express JS.

    The web server                                :        Node JS

*    MERN is considered as the ideal way to work with JS and JSON in the industry.

👉    What is the MERN stack architecture ?

*    The MERN stack project can be either implemented in client-server (CS) architecture or the Model-View-Controller (MVC) architecture. 

*    Either way the basic architecture of a MERN stack project consists of  Front-end, back-end and database.

*    This can be represented as follows:

👉    React JS front-end.

*    The front-end of a MERN stack project is developed through the React JS.

*    React JS is a popular JS (JavaScript) framework which is used to create UI which renders the UI as the HTML page but actually codes in JS.

*    React JS is used in the front-end due to data driven interfaces with minimal code and the feature of handling the events.

*    React JS also provides features like hooks. webPack, Parcel, state and props to increase the supportability and usability.

👉    ExpressJS and NodeJS.

*    Express JS is a server-side framework running on NodeJS server.

*    Express JS is meant to be popular due to URL routing and handling HTTP request and response.

*    React JS interface interacts with the Express JS through HTTP requests like GET, POST, etc to update or modify data in MongoDB.

*    The functions implemented using Express JS calls the MongoDB driver through callbacks or promises to access the data in database.

👉    Mongo Database.

*    Mongo DB is used to store all the data that flows through the front-end.

*    The Reacts JS , Express JS and Node JS make use of MongoDB for data handling.

*    JSON comes into action when Mongo DB is used in a MERN stack project.

*    All data that are transmitted from the front-end are stored as JSON objects in Mongo DB.

*    Storing data as JSON facilitates in easy access and organized data storage.

 

.

👉    Pre-requirements to start a MERN stack project.

*    In this blog lets list down all the pre-conditions needed to start MERN project which means the packages that facilitates the MERN stack.

*    In coming blogs lets look into each important steps involved in a simple MERN project.

*    We will be using a Client Server architecture for the MERN project.

*    All the packages that are needed by client and server are listed below:


*    The above table shows all the required packages needed to create a MERN stack project.

*    HINT    :     You can use koaJS instead of ExpressJS according to your requirement in the project.







Monday, April 5, 2021

REST API and its 6 constrains

👉    What is REST API?

*    REST stands for Representational State Transfer.

*    It is often used in development in web services. (designing loosely coupled applications over HTTP).

*    It specifies highlevel design guidelines and leaves the implementation to be constructed by the developer.

*    REST is an architectural design, its not either a protocol or a standard.

*    When a client request through the REST API it transfers the resource state to the endpoint or requester.

*    The response from the REST API may be a JSON, HTML, XML, PHP or even a plain text.

*    The RESTful API HTTP request contain headers and parameters which consists of important identifier information such as request metadata, authorization, Uniform Resource Identifier (URI), cookies and more.


👉    What are the architectural constraints of REST API?

*    The above diagram shows the 6 main architectural constrains of the REST API. Although it states 6 the main constraints are only 5. The last constraint (Code-on-demand) is not that visible in the industry and either used in many instances.

1.    Uniform Interface.

*    Uniform interface gives us a simple idea of having a global language which can be understood by everyone.
*    This is based on the HTTP specification.
*    The person should be able to conclude that this is a RESTful API request by looking at the URI, HTTP verb.
*    An example for a URI is https://sliit.lk/api
*    Now lets look into some examples in handling a resource in REST API.

    💥    Create a resource.    POST v1/faculties
    💥    Fetch a resource.    GET v1/faculties
    💥    Update the entire  resource.    PUT v1/faculties/{faculty.id}
    💥    Delete a resource.    DELETE v1/faculties

*    Now lets create a department inside a faculty.
    
    💥    POST v1/faculties/{faculty.id}/departments

*    From the above example what is this faculty.id?
        This is known as the route parameter. There can be multiple route parameters only if it makes a meaning. In many cases the route parameters are not numerous in an URI.

*    What are query parameters?
        These are used in sorting, pagination. These are optional in an URI. There can be multiple query parameters in an URI depending on the logic.

     💥    POST v1/faculties?order-by=name

2.    Stateless.

*    This constrain states that the request has to self-contained.
*    The server does not maintain the state of the client.
*    This in turn can said as, in client-server communication the client information is not stored between the get request and each request is separated and unconnected.

3.    Client-server.

*    The REST API request and response follows a client server architecture.
*    This has a client, server and a HTTP request and response.
*    The HTTP stack is the communication platform between the server and the client.

4.    Cacheable.

*    The REST services should be cacheable.
*    In general the REST services are cacheable, but according to the business requirement the caching nature changes.
*    Consider a banking system, where it is needed to store the account transaction details. But this system is non-cacheable due to security reasons.

5.    Layered System.

*    This constrain mainly hides the inner complexities from the client.
*    In simple words, the inner business logic is not shown to the end user.
*    The client only request and receive the response, in which he/she can see only the URL, not how the resource is handled according to the request.

6.    Code-on-demand [OPTIONAL].

*    This states that the server is able to transfer some code logics to the client, to execute them in the client side.
*    This is not mainly done in the industry for security and performance issues.
*    On the other hand if the code is transferred to the client, it becomes an over-head from the client and results in non-reliable nature.

    


Monolithic vs Microservices

👉     Monolithic Architecture. *     Monolithic architecture was there before Microservices came into action.  *     All functionalities or...