kishansingh77 / smart-mart-angular-frontend Goto Github PK

ITIS - 6177 SYSTEM INTEGRATION Team “Smart-Mart”

Team Members: Kishan Singh, Abinaya Vaidyanathan, Yunfei Liao, Ashay Shah, Pavani Velichati

                                       Application  URL

Download the project files from : Angular Frontend : https://github.com/KishanSingh77/Smart-Mart-Angular-Frontend Node Js Backend : https://github.com/KishanSingh77/Smart-Mart-Backend-Node.JS

Frontend URL :

Home : http://localhost:4200/ Customer Login :http://localhost:4200/app-login Vendor Login : http://localhost:4200/vendorLogin Cart : http://localhost:4200/cart ( Future Work ) Orders : http://localhost:4200/orders Payments : http://localhost:4200/app-payments

Backend URL :

Products : http://localhost:3000/products Orders : http://localhost:3000/orders

Angular Frontend

Run npm install Npm start Hit localhost:4200

Node js Backend :

Run npm install Npm start

There are three major flows that the application concerns itself with :

Customer Login -> product selection -> order placement -> checking orders from past Vendor Login ->create products -> see refreshed list of products Customer login -> Login with facebook->Enter credentials -> Click Login

The Explanation of three major flows are as follows:

Customer Login and order placement flow : Click on Customer Login .

You can enter the following credentials to get into the system

Email : [email protected] Password : eric@11

Click on the “Get All products” Button. Add items to cart from the list by choosing the “Add to Cart Button” which is located on the right of each product.

Click on make payments button that takes you to the payment page

Make Payment View :

Dummy details have been prefilled in the form, so we just need to add the details of the final final product or deciding to continue browsing other products.

Click Continue to Checkout :

The order is finalised and a mail is triggered to the vendor and the customer stating the product bought :

Click on the checkout button takes you to the orders page where in the list of past orders are displayed.

The order page has details of every past product that was ordered along with the unique ID that was generated by mongoose and the date the order was placed.

2. Vendor Login :

Vendor can be logged into the system using following credentials :

Email : [email protected] Password : Magna1234

Click the login button that takes you through a successful validation via JWT token authentication.

To further enquire what really happened behind the scenes, lets hit up https://jwt.io/.

Now paste the hash generated from console into the encoded textbox :

The payload data now shows you, the used credentials of [email protected] with the expiry details and other vendor details.

Similar authentication is also in place for the customer login but has been omitted for the purpose of this submission for simplicity.

We can now browse lot of functionalities on the vendor site, since they’re our virtual admin. Create products :

Click on create product on the vendor dashboard, fill out the form to your heart’s wish and The product is ready!

Edit products : Lets try editing one of our products from the vendor’s list . Click on “get All products” on the vendor dashboard and give the edit button to it's right a push.

Lets take for example : Avengers - Death Of Iron Man Click on the edit button to the right of the item. Traverse to the bottom of the page and try updating the contents of the item. Now click update and you can see a refreshed list of products with the new item price as 100.00 $ .

Let’s try deleting some of the items in our list : Hover over an item : say Casablanca ( 1942 )

Click delete and the item disappears :

3. Login with Facebook

Navigate to the Customer Login and click on the login with facebook button. Make sure your all the facebook accounts are closed in your system, otherwise the facebook account’s credentials whichever is open will be helping us logging in ,

The following screen pops out :

The same process can also be achieved through Cognito which is an alternate cloud service.

Here, Facebook SDK is used along with the Angular lifecycle to make the login work via the Angular frontend itself.

Click “Log In” on the dialog box newly opened and we reach the customer dashboard.

Security

JWT Authentication has already been discussed in the above flows. Frontend validation via angular reactive forms that were created programmatically with the help of two way binding. See the error msg below when wrong credentials are entered.

3. Strict type checks have been placed on the backend code .

password: { type: String, required: true } The required and type fields make sure they throw an error when encountering the invalid types. Another strict check would be the production level email regEx that has been used :

match: /[a-z0-9!#$%&'+/=?^_{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)@(?:a-z0-9?.)+a-z0-9?/

4.Bcrypt module from npm has been used to generate and salt the hashes.

const bcrypt = require("bcryptjs"); const jwt = require("jsonwebtoken");

DB Creation

Mongoose package has been used for backend mongoDB Atlas integration .

The best part about using mongoose models is that db creation was not required, merely the connection creates the instance of the collection in the cloud atlas.

*Actual data models have been provided in the presentation slides.

const mongoose = require("mongoose");

//starts connection mongoose.connect( "mongodb://admin:" + process.env.MONGO_ATLAS_PW + "@cluster0-shard-00-00-nk8pq.mongodb.net:27017,cluster0-shard-00-01-nk8pq.mongodb.net:27017,cluster0-shard-00-02-nk8pq.mongodb.net:27017/test?ssl=true&replicaSet=Cluster0-shard-0&authSource=admin&retryWrites=true", { useNewUrlParser: true } ); const db = mongoose.connection;

//event listeners used to print to console on db connection db.on("error", console.error.bind(console, "connection error:")); db.once("open", function() { console.log("connected to db"); });

Nodemon.json credentials

{ "env": { "MONGO_ATLAS_PW": "admin99", "JWT_KEY": "secret" } }

Access Details

As an Online shopping App, we have made an facility to get a mail triggered from the system once the order is placed by the customer. This is achieved using the one of the Amazon web services known as Amazon Simple Notification Services. This helps us in notifying the user wither thorugh the email or with the push notification.

This set up can be done with the following steps which are as follows: Step 1: Signing in using Amazon web service Console log In by having the credentials ready for IAM user. Step 2: Click on the services Step 3: click on the IAM from security , Identity and Compliance Step 4: Click on the “Add User” button which is on the right corner.

Step 5: Add the username and choose the password of your choice by clicking on the provision given to us in the below

Step 6: on the next screen, Choose the security group which are given with the Accesss of creating AWS SNS part.

Step 7: Add Tags as an optional field to your user and by clicking on the next screen, we are done with the user creation.

Step 8: Once the user is created successfully, our next steps are to download the access keys and secret keys that are generated from the before steps.

These keys are useful to connect to you a particular user from the third party system. Below are the steps that will help us in creating the services using AWS SNS.

Step 1: click on the services from the user navigation bar at the top. Scroll down through the services that are provided by the Amazon and choose the Simple Notification Service from the Application Integration.

Step 2: click on the Topics to create one new.

Step 3: click on the create Topic to proceed to the next steps. Step 4: Add the required details to complete the topic folder.

Step 5: once the details are filled out, hit on the create topic to complete the steps.

Step 6: An Arn url is created for you to get connected to particular group later from the email triggering system.

Step 7: Once the topic is created, next step is to create the Subscription.

Step 8: Hit the create subscription button to proceed with the subscriber account. Step 9: The created ARN is added will be copied automatically and The protocol has to be selected as “Email” from the list.

Step 10: Once the other details are filled, we need to fill out and add the endpoint to where the email has to be sent.

Step 11: After the steps of creating the subscription, email has been posted for the subscription of services.

Step 12: The user has to confirm the subscription.

Step 13: upon confirming the subscription, we can publish message by choosing the topics that was created before.

Step 14: Hit the publish message Step 15: Fill out the form with the required messages and click on the publish message button at the bottom.