Lab Assignment 2 (Mashup application) - Ruthvicp/CS5551_team_11-2_labassignments GitHub Wiki

ASE Lab Assignment 2 - Mashup Application

Submitted by

Member 1 : Ruthvic Punyamurtula

Class id : 30

Member 2 : Navya Ramya Sirisha

Class id : 26

Team : 11-2

Objective :

Creating a web application using bootstrap with the following features

  • OAuth login
  • Login and Register using HTML5 – Local Storage
  • Home page having a mashup application containing at least one knowledge service
  • Creating About page – containing project description
  • Creating Contact page – containing team contact details
  • Good design – using css3, jquery
  • Checking JS with JS lint

1. Login and Register Page

a) OAuth login and Registration

Created social login by Facebook and Gmail. Brief steps and code snippets for creating login buttons in html are shown below

To create OAuth login, we need to create api keys for facebook. Check https://developers.facebook.com for more information

Similary, we need to generate client id for google as well. For steps and information for OAuth using google, please visit https://developers.google.com

Once the keys are generated we can login and navigate to the basic home page created.

b) Local storage

HTML5 provides local storage which helps in registering a user and then to login to the application. Validations are done in java script to user safe login.The below image shows the snippet for registration of a new user

While we login, we retrieve the information by ids and perform comparison to ensure logging activity.

Now let us proceed with the output screen shots of the login/registration page along with social login.

Registering a user, and then login with same user into the application

Now logging into the application using the registered user.

This will now give us the home page of our mash up application after the successful login.

We have also provided the authentication to login using Facebook and Google. Now trying to login with the Facebook account instead of the registered user.

In a similar manner, user can also login using their google account. On clicking login, it is redirected to the Home page which is shown in the below section.

2. Home Page of mash up application

For the mashup application we have used two knowledge service API

  • Watson – Text sentiment analysis
  • Text to speech conversion

When a user enters the current feeling in the text box, and clicks on get sentiment analysis, the Watson API is called and result is displayed in the text area. And for the same output, text to speech API is used to give the audio output. There is also a reset button to clear the text fields to enter the input again.

3. About and Contact Pages

We have created “About” page with our project description and a “Contact Us” page that provides the team details. Also provided the navigation from one page to another page modifying the respective side bar buttons.

Clicking on About button from “Home” page, navigates to “About” page

On clicking the contact us button, it navigates to “Contact us” page.

We have also provided the logout functionality from any page to navigate to the login page.

4. User Interface

We have improved the GUI of the application using CSS and jquery as required. Through out the application we have maintained a uniform design to make an appealing application.

5. Quality check

We used JS lint tool for improving the java script files of the application.

Improved and corrected the errors shown in the jslint tool

References

Contribution By

Ruthvic Punyamurtula, Class Id = 30

  • Created OAuth using Facebook and Google
  • Created login and registration using Local Storage
  • Created About and Contact pages of the application
  • Integrated the over all application
  • GUI design and JS improvements after using JS lint
  • Wiki page creation and documentation

Navya Ramya Sirisha, Class Id = 26

  • Watson – Text sentiment analysis API
  • Text to speech API