NutriApp Report - rahuldhar123/NutriApp GitHub Wiki

Lab Report-3

Student 1: Rahul Dhamerla – 16282037 Student-2: Teja Devarapalli - 16282634

Assignment: 1.Create login and register pages and implement local storage functionality on the register page.A user needs to login to view the home page with part-2.

2.Create your own necessary keys (Nutritionix and IBM Watson text to speech API’s) to complete assignment.

3.Make an application using *url-1 to display following info: Calories and serving weight in grams.

4.Use Watson Text to speech API using url-2 to speak out the searched keyword.

We have created login and register pages for a user and implemented local storage functionality to retrieve the details of the users who registered on the application. Once the user register on Nutri Check application , he can access through Username and password provided while signup. After Sign in , he can access the information like calories and serving weight in grams of any item. Requirements: -->Nodejs, Webstorm.

Open the project in Webstorm or go to the project folder using Command prompt.

Install bootstrap to use bootstrap frameworks to prevent using Bootstrap links. Install Angular.

Commands needed to run in the console to install the above. npm install bootstrap npm install @angularcli

Introduction: The Nutri Check application provides users the information about the calories and serving weight in grams for the food items.

Setting the things up to start building the project.

Installed bootstrap and angular in the project using NPM. Created a service called Hostservices to use the API services in the project. Imported Httpclient class and created methods to use the API services

Created the necessary child components : login,register and search

Preparing the parent app.module.ts After creating the services and child components. Import the components and Httpclientmodule Include components in the declarations,Modules in imports and services in providers of Ngmodule.

We used parent and three child components to show the functionalities or we can also use only child components and map them to parent component by router outlet.

To login to the application , user needs to enter the username and password and click on login button then submit() is triggered.The function of submit() is to verify the credentials to match with the ones in local storage used while register.Once the credentials are matched it will navigate to search page or else displays a popup stating invalid UserID and password.

If a new user try to access the application, he need to register and can sign in to the application.Once we click on sign Up button it will redirect to registration page as shown below. To SignUp few basic information has to be provided by user like full name,UserID and creating a password.After entering the basic details and click on submit button then report() is triggered.The function of report() method is to save the values into the local storage and then verifies whether the passwords match and displays registration successful popup if everything matches and then redirects to login page or else "Please fill the details and submit" message is displayed.