ASE LAB ASSIGNMENT 3 - Lavanyacheldhi/ASE-ASSIGNMENTS GitHub Wiki

#*MUSICAL NEWS MASHUP

Class Id: 12
Student Id: 16242313
Student Name: Lavanya Cheldhi

Objective:

The main aim of this tutorial is to allow user to access application with Social logins (Facebook,Google,Twitter etc.) by using OAuth 2.0 Service. Also to develop a Mashup application using atleast two Web Services.

API's Used:

Social Login: Oauth,Google API,Facebook API
Mash Up: Spotify Music API , Alchemy News API

Languages/Software Used:

WebStorm, HTML, CSS, JavaScript, Angular JS, AJAX, JLint, Bootstrap.

Application Description:

  • Initially this application contains a home page where the user can either login/register.
  • On clicking Login/Register button the user is redirected to Login page.

INDEX PAGE

  • In the Login Page the user can either Login or Register(if he is a new User).
  • The User can Login by giving UserName and Password from where he will be redirected to Home Page.
  • If he is a new user the all the mandatory details under registration form has to be entered to proceed further to Home page.

LOGIN PAGE:

login

REGISTRATION PAGE:

Register

Oauth Social Logins

  • Apart from the above ways to validate user, he can also redirect to application using Social Logins such as Google and Facebook.

  • To do so initially developer account is created for both facebook and google plus where a client_id and secret_key will be generated.

  • This id's are appended in Google API and Facebook API URL which used in implementing social login.

  • Also the redirect URL also has to be specified, which is the destination page that is redirected once the user is logged in successfully.

  • In the Login Page on clicking Google sign in button, the google login page will pop-up to the user where he has to enter email id and password for successful login.

google

  • In the Login Page on clicking Facebook button, the facebook login page will pop-up to the user where he has to enter email id and password for successful login.

facebook

##Mashup Application:

  • Once the user is logged in successfully he will be redirected to home page.

home

  • The two API's that are used here to perform Mashup are Alchemy News API and Spotlight Music API.
  • The application helps in creating music playlists from Spotify based on what is happening in the news that is extracted from Alchemy.
  • In the home page search button the user enter few keywords of news they are interested in.
  • This information is sent to the Alchemy API which checks the news articles that are related to these keywords and returns the titles to those articles.
  • The news titles are then parsed and inserted into Spotify API that finds songs with titles that match to each and every word in the news titles.
  • For example, if the users gives keyword 'heart' and click on Go button then this keyword is sent to Alchemy API to fetch all the headlines related it.
  • The fetched headlines are displayed in the text-area as show below.

home1

  • The data is sent to Spotify API which reads every word in the headlines and returns the songs along with album name,artist etc. as shown below.

home2

  • To add these suggested songs into Spotify playlist then the user has to click on Create Spotify Playlist from suggested list button which will be redirected to Spotify login page.

spotify

spotify1