Shopping Cart system using MERN stack - Part 3

Shopping Cart system using MERN stack - Part 3

   May 01, 2020       George Hiroshi Silva

---

It has been a couple of weeks since we started implementation. It has been not easy to manage the workflow among the group members. Even though the we have used GitHub as our version controlling platform, the correct utilization of the platform was a bit confusing for the group members. So we decided to learn about the correct workflow a team should follow to properly utilize GitHub. 

After learning the correct workflow depicted as above we were able to get back on track and work smoothly, there were still hiccups. We were a bit hesitant to use the git work flow at once because one wrong move can remove all the work we have done but it all worked out fine and we are much confident about it now.

Project implementation

While implementing the Product.js controller i came across several problems. While implementing the product add function it was needed to send the product details from the front end form to the back end as a form for that i had to use dependency named formidable , this dependency also comes in handy with file uploads since we need to upload a product image it was a good option. The rest of the methods such as updating , deleting , get a product , retrieve product image , retrieve all the products was implemented. Next step was to create the routes for the above created methods.

Read More

E commerce system using MERN stack - Part 2

E commerce system using MERN stack - Part 2

   April 24, 2020       George Hiroshi Silva

---

After setting up the project , it was time to get into coding , it was decided to implement the back-end first.

An express server was setup after installing the necessary dependencies. We opted to go with an open- source MongoDB GUI named Robo 3T . Once the necessary database connection was created and with the required project structure the project was pushed to a repository created on GitHub so that all the members of the team could follow the same structure.

I started working on the product model as it was a necessity for the requirements I had to follow. And then within the controllers folder I created the required methods that a stock manager needs to conduct the CRUD services , next within the routes folder the required routes were implemented to act as  REST API to the HTTP end points such as GET,POST,PUT and DELETE.

Read More

E commerce system using MERN stack - Part 1 (Diagrams)

E commerce system using MERN stack - Part 1 (Diagrams)

   April 17, 2020       George Hiroshi Silva

---

As our Application Framework module project we were given instructions to implement online shopping cart system for a Fashion store using the MERN stack. We as a 4 member group decided on the prerequisites such as ,

• The IDE to work on as WebStorm.
• To use GitHub to host the version controlling.
• As per the instructions to use the MERN stack to implement the application.
• Understand the requirements that is needed for the project.
• To use Bootstrap 4 and react-bootstrap to add styling.

According to the user roles provided I was given the user role of store manager, and according to the store manager's functionalities i was able to come up with several diagrams.

High level architecture diagram based on the store managers functionalities

Physical Diagram based on the store managers functionalities

After understanding about what needed to be implemented , we dived straight into  coding.....

Read More

Simple REST API using Express, & MongoDB -Project Implementation

Simple REST API using Express, & MongoDB -Project Implementation

   April 01, 2020       George Hiroshi Silva

---

In the previous post i described how to setup the project in order to move onto the project implementation to create a REST API using Express and MongoDB.

And now let's dive into the fun part

First we will be implementing the server.js


require('dotenv').config()

const express = require('express');
const app = express();
const mongooes = require('mongoose');

mongooes.connect(process.env.DB_URL,
{ useUnifiedTopology: true })

const db = mongooes.connection
db.on('error',(error) => console.log(error))
db.once('open',()=>console.log('Connected to DB'))

app.use(express.json())

const subscriberRouter = require('./routes/users')
app.use('/users',subscriberRouter)


app.listen(3000, () => console.log('Server started'))


Initially we need to require the all necessary dependencies. Then the DB connection is needed to be created. Next it is required to define a middleware using express to recognize all incoming Request object as JSON. Next the required route is needed to be defined.

Next, we will be implementing the users.js  inside the model folder.

const mongoose = require('mongoose')

const userSchema = mongoose.Schema({
name:{

  type :String,
  require: true
},
subscriberToChannel:{

  type :String,
  require: true
},
subscriberDate:{

  type:Date,
  required:true,
  default:Date.now
}

})
module.exports = mongoose.model('users',userSchema)


Finally, we will be implementing the users.js  inside the routes folder.


const express = require('express')
const router = express.Router()
const User = require('../models/users')

// Getting all users
router.get('/',async (req,res) =>{
try{
   const users = await User.find()
   res.json(users)
}catch (err){
   res.status(500).json({message:err.message})
}

})

//Getting one user
router.get('/:id',getUser,(req,res)=>{
   res.send(res.user.name)
})

//creating one user
router.post('/',async(req,res)=>{

const user = new User({
   name:req.body.name,
   subscriberToChannel:req.body.subscriberToChannel

})
try{
   const newUser = await user.save()
   res.status(201).json(newUser)

}catch(err){
   res.status(400).json({msg:err.message})
}

})

//updating a user
router.patch('/:id',getUser,async (req,res)=>{
  if(req.body.name !=null){
     res.user.name = req.body.name
}
  if(req.body.subscriberToChannel!=null){
     res.user.subscriberToChannel = req.body.subscriberToChannel
}
try{
   const updatedUser = await res.user.save()
   res.json(updatedUser)
}catch(err){
   res.status(400).json({msg:err.message})
}

})

//deleting a user
router.delete('/:id',getUser, async(req,res)=>{
try{
  await res.user.remove();
  res.json({msg:'Deleted Succesfully'})

}catch(err){
  res.status(500).json({msg:err.message})
}

})

async function getUser(req,res,next){
let user
try{

  user = await User.findById(req.params.id)
  if(user == null){
    return res.status(404).json({msg:'Cannot find subscriber'})
}
}catch (err){
  return res.status(500).json({msg:err.message})
}

res.user = user
next()
}

module.exports = router


Read More

Simple REST API using Express, & MongoDB -Project Setup

Simple REST API using Express, & MongoDB -Project Setup

   March 22, 2020       George Hiroshi Silva

---

decided to build a simple REST API using Express & MongoDB. This simple application is built on the following points.

• A simple program to observe subscriber details.
• A User schema is built using MongoDB to store user details in the database.
• HTTP requests are sent from the REST API that will allow to work with this simple program.

Let's Dive into the project

(Codes and Terminal commands will be written in italic)

1. As the very first step it is necessary to set up a new npm package - npm init
2. Some dependencies are needed to be installed 

- npm i express mongoose (install express and MongoDB)

-npm i --save -dev dotenv nodemon (install the developer dependencies)

After the required dependencies are installed , let's move on to the project structure.

• users.js contains the user schema for the user to be created in the DB.


• Within the routes folder route.rest is implemented to check the REST APIs and the users.js contains all the routes.


• .env file contains all the environment variables.

After creating your project as above , a simple change must be done in the package.json to activate the nodemon dependecy.

Under scripts change the test name to any word you prefer and the value it denotes to be nodemon server.js

Next we will be moving on to the .env file where the environment variables are stored.

• I have given a variable inside the .env file to declare the url to the database,

DB_URL=mongodb://localhost/(dbName)

That is all for the project setup, I will be implementing the code in the next blog

Read More

React Components

React Components

   March 18, 2020       George Hiroshi Silva

---

React components are independent and reusable bits of code. They are similar to JavaScript functions as they both serve the same purpose, but react components work in isolation and returns HTML through a render function.

Reacts lets you define 2 types of components.

1. Class - based components.
2. Functional components

With these components it is important have an understanding as to which kind of component can do what , what their history is and what the future holds for them.

Class-Based Components	Functional Components
Class A extends Component	const A = props => {...}
Access to state	With react hooks able to access state
Ability to use life cycle hooks	No support for life cycle hooks
Ability State and Props via "this"	Access props via "props"
Ability to use life cycle hooks	No support for life cycle hooks

Important :  Use class-based components if you need to manage state or access the Life cycle Hooks and if you cannot or do not want to use React Hooks.

Read More

Build a simple Quiz App with ReactJS

Build a simple Quiz App with ReactJS

   March 10, 2020       George Hiroshi Silva

---

 A simple quiz app which will be built using both class and functional components.

Outline of the Quiz App

The quiz app QuizMe will produce 5 general knowledge questions. For each question there will be four answer buttons. An answer should be selected , once an answer is selected the other 3 answers will be removed. Once all the questions have been answered you will be prompted to the score. And if needed you will be able to play the quiz app again with another set of different questions.

Important factors to consider

Background : You will need to install create-react-app tool and create the application , you also will need to delete the unnecessary files in the src folder since we will be developing from the beginning and start the development server.

Important   : To obtain the questions and answers we need to build an API. For that i have built an offline API. Also i have built a specific style sheet to style the components.

File Structure

Inside the src folder i have created 3 directories and 1 file.

• The assets directory consists of the style sheet that styles the components. 
• The components directory contains the components for the questions and the final result these will be explained in due time. 
• The quizService directory contains the manual API we create to obtain the questions and the answers. 
• The index. js file is the root component. This will act as the root of our application.

Specialty : Normally by using functional components react does not allow the state management features, this is because functional components mainly focuses on displaying data and not state management. But in a situation if you need to use state in functional components react provides a plug in  play API named React Hooks. Such a scenario has been used in this app.


To check the git hub deployed app click here

To check the git hub repository click here

Read More

The Top Node.js Frameworks in 2020

The Top Node.js Frameworks in 2020

   March 07, 2020       George Hiroshi Silva

---

A large number of developers have moved towards to the usage of JavaScript to build their applications specifically in web development. This has lead to a need to build and maintain frameworks for the JavaScript community to be able to develop application easily and efficiently.
The most important reason for Node to become more famous and accepted by every developer was the ability to use the same language both for the client-side and server-side scripting.  Through the past few years there have been a large amount of frameworks built around Node.js due to the demand from the developers. I will be discussing about some of the most popular and in demand Node.js frameworks that should be considered in developing we applications.

Before spilling out the frameworks it is necessary to understand what a Node framework is.

A Node.js framework is just an abstract design , built of Node.js, which follows the control flow of a given framework's design. 

Simply it it the skeleton of an application , the customized code that a developer writes provides the body to function as one and thereby complete the application. Every framework is unique and there is a path for every user to follow depending on the framework. The most important aspects of a framework are - its architecture and features

Selecting a Node Framework

Before randomly selecting a framework there are certain issues that is needed to be addressed. This is a bit tricky and it is mainly based on the way you want to develop your application. In a more technical manner , there are mainly 2 things to consider,

1.  The scalability and the validity of the framework.
2. If you as a developer is capable of dealing with the development process.

Now it is time to discuss about the reason why i decided to write this post

Express.Js

Express.Js is a framework that every developer has heard of, even if you are not JavaScript die hard fan, you still would have come across this framework , due to its popularity. Most of the developers primary selection is considered as Express.Js. Express.Js is very well known for it's speed, flexibility and minimalism. It possess a large number of dynamic set of features, and it is suitable for both web and mobile applications. 

It is simply a technology which is built on Node.js , which acts as a middleware that helps to manage our application servers and routes.

Features of Express.Js

• Ability to develop both single and multi-page applications in relationship with different web applications.
• Possess a view system supporting many template engines, providing the ability to create quick and quality applications.
• The framework comes with the MVC (Model-View-Controller), one of the most popular and sought out architectural patterns in development.
• Simply Express.Js is a routing table, performing many web actions based on HTTP methods.
• With extremely fast I/0 and robust API to make routing faster and easier, developers possess a big advantage.
• The learning curve is very low.
• Fully customisable.
• Express.Js always focuses on the performance.

Hapi.Js

Hapu.Js framework is a commercial centered server framework. It is both an Open Source Framework and a server framework. 

 It is simple yet rich , stable and reliable MVC framework for building applications and services.

It is best used to develop REST (Representational State Transfer) APIs. The framework is superb in configuration , stable and reliable. 

Hapi.Js is same as Express.Js , where the framework helps to serve data by being the intermediate between the server side and client. It can be considered as a good substitute for Express. Unique feature of Hapi.Js is the ability to create a server on a specific IP, with features like the 'onPreHandler', we are able to do something with a request before it is completing by intercepting it and doing some pre-processing on the request.

Features of Hapi.Js

• Fixing bugs and adding new features is quick and smart. There is a built in powerful plugin network to ease this process.
• It provides users with routing , I/O validation and caching. This is why Hapi.Js powerfully compatible with REST APIs.
• Since the users can use it with MySQL, MongoDB and Postgres ,Hapi,Js can be considered as the most usable framework with flexible features.
• Hapi.Js comes with a plugin - nes . It gives the developers the ability to use real-time chat applications and other social applications.
• Hapi.js provides a JavaScript Templating Engine which gives the ability to render dynamic contents easily.
• Detailed API reference and a good support for document generation.

Read More

MongoDB vs MySQL - The Basics

MongoDB vs MySQL - The Basics

   February 15, 2020       George Hiroshi Silva

---

The universe of innovation progresses each second thus the universe of business should be adjusted to such advances. In the online business world finding the ideal database model is a migraine. As the organization develops the measure of information develops, so finding a database that can cling to the load is significant.

Relational databases (MySQL, Oracle, MS SQL) were the first as a main priority for such organizations, be that as it may, the circumstances are different and the interest is high for something basic and adaptable.

Therefore it is essential to understand the importance of MongoDB and MySQL and observe what the contrasts are.

What is MongoDB ?

MongoDB is the most mainstream document- based database following NoSQL. It was first discharged in 2010 by the organization MongoDB inc. 

MongoDB utilizes key-value sets, called record store. These record stores made are put away in BSON(Binary JSON) documents. BSONs are altered JSON(JavaScript Object Notation).

JSON permits the information trade among customers and servers to be done in human documentation.

Since MongoDB is schema less,a fixed model structure isn't required. Additionally MongoDB will give an immense lift to execution and give solid unwavering quality and effectiveness.

What is MySQL ?

MySQL is an open-source Relational Database Management System (RDBMS). 

MySQL uses Structured Query Language (SQL) to conduct the CRUD (Create, Read, Update,Delete) operations. The CRUD operations are what is used to conduct all the operations related to database functions, starting from reading data to inserting, updating and deleting. It follows a concept of creating tables and inserting columns of data with the appropriate row.

Regardless of whether different tables are available in a database the utilization of JOIN is an amazing way to construct an association between numerous schema.

Flexibility of schema

MongoDB

• There are no restrictions on the schema creation, using collections documents can be added, without ever needing to create any relationships.
• High flexibility.

MySQL

• Tables needs to be defined before any data can be added, rows needs to be defined,and rows adjacent to columns needs to be defined.
• Due to normalization there is no flexibility in the manner of storing data.

Rigid table design is observed 

Querying language 

MongoDB

• un-Structured Query language
• A document(JSON) is needed to be build containing the properties that matches the values.

MySQL

• Structured Query language
• Consists of 2 main parts  

1. DDL(Data Definition Language)
2. DML(Data Manipulation Language)

Comparison of MySQL vs MongoDB query writing

To be continued....

Read More

What is 5G ?

What is 5G ?

   February 13, 2020       George Hiroshi Silva

---

Fed up of lagging internet connections? 

Want to stomp your laptop screen when the buffering starts?

Fear not 5G is here

5G has been in the radar for about a decade now among the tech giants, and finally it is becoming a reality. Carriers has slowly started to low out 5G for a selected cities in the past few years and with 5G becoming the future potential in communication it is important to get a thorough understanding.

5G is meant for greatness than it's predecessor - 4G LTE connection , and with time replace it.

What is 5G?

5G is simply the next generation of mobile broadband. 5G will advance the mobile networks that will not only improve interconnection but will also improve the usability of real time applications. 5G will offer extraordinary speeds,reliable connections thus improving the performance and providing a user experience that one has never undergone.

5G is said to possess a bandwidth of multi-GBps , extreme low latency providing stability to mobile networks.

How does 5G work ?

5G works on three different spectrum bands.

Low - band spectrum

• Also known as the 1Ghz spectrum.
• Pros 
1. Provides greater coverage.
2. Higher rate of wall penetration.
• Cons
1. Top speeds will only be up-to 100Mbps.

Mid - band spectrum

• Speeds up-to 1Gbps

• Pros 
1. High speeds than the low - band
2. Lower latency than the low - band.

• Cons
1. Inability to penetrate buildings unlike low - band.

High - band spectrum

• Delivers the highest performance for 5G.
• Refereed to as mmWave
• Speeds up to 10Gbps

• Pros 
1. Very low latency

• Cons
1. Low coverage and building penetration is very low.

Read More