Lab Assignment 1 - priyankag110/C5551_Team5-1_LabSubmission GitHub Wiki
-
Create the Web application using Angular JS and Bootstrap Framework with following requirements fulfilled. Mentioned below are the requirements in details with approach taken:
Login and Register Pages
Create Login to your application using Social login by using any of the OAuth 2.0 Service from Gmail:
Created Gmail Client ID and API Key for Gmail Login to start Login process for our application:
All the documentation required to get API key and Id can be found at following link:
The authorization sequence begins when your application redirects a browser to a Google URL; the URL includes query parameters that indicate the type of access being requested. Google handles the user authentication, session selection, and user consent. The following picture gives overall idea about process:
<script>
function onSuccess(googleUser) {
console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
alert('Logged in as: ' + googleUser.getBasicProfile().getName());
var str = window.location.href;
str = str.substr(0, str.lastIndexOf("\\"));
window.location.href=str;
}
function onFailure(error) {
console.log(error);
}
function renderButton() {
gapi.signin2.render('my-signin2', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
</script>
User Interface to User:
User can view Login(For existing Users),Register (New Users) and Login via Gmail option on Home screen as follows:
After clicking on Login via Gmail button, User is redirected to his Gmail login screen:
angular
.module('app')
.controller('LoginController', LoginController);
LoginController.$inject = ['$location', 'AuthenticationService', 'FlashService'];
function LoginController($location, AuthenticationService, FlashService) {
var vm = this;
vm.login = login;
(function initController() {
// reset login status
AuthenticationService.ClearCredentials();
})();
function login() {
alert('hi');
vm.dataLoading = true;
AuthenticationService.Login(vm.username, vm.password, function (response) {
if (response.success) {
AuthenticationService.SetCredentials(vm.username, vm.password);
$location.path('/');
} else {
FlashService.Error(response.message);
vm.dataLoading = false;
}
Local Storage:
HTML5 introduces the localStorage attribute which would be used to access a page's local storage area without no time limit and this local storage will be available whenever you would use that page.
$scope.login = function(loginForm){
localStorage.setItem('myVal',true);
console.log(loginForm);
var user = JSON.parse(localStorage.getItem('user'));
if(loginForm == undefined){
$scope.errorMessage = "Inavlid Email ID or Password";
}else if(loginForm.eMail == user.eMail && loginForm.pwd == user.pwd){
console.log("Login Successful");
document.getElementsByClassName('navStyle')[0].style.display="block";
$location.path("/homepage");
}else {
$scope.errorMessage = "Inavlid Email ID or Password";
}
}
Local storage setItem() adds key and value to local storage for User mail and password , and getItem(user) will retrieve this details and make necessary verification to display result to the user.
Home page should display the user name and contain the logout button.
We have used Knowledge Graph API and Watson speech to text API for Home Page:
$scope.kgsearch = function(ingrName) {
//alert('Enter Valid name' + ingrName);
var myurl = 'https://kgsearch.googleapis.com/v1/entities:search?query= ' + ingrName + ' &key=AIzaSyDGSTmdGK_Bj2a-BWUPPdxHYygtc6b6f4g&limit=2&indent=True'
$http.get(myurl).success(function (data) {
console.log(data);
$scope.kgraphRecords = data.itemListElement;
let text = ingrName + " is found.";
let nutritionURL = "https://stream.watsonplatform.net/text-to-speech/api/v1/synthesize?username=a81fb1d3-99e1-4ccb-8b70-e7d507df4f28&password=HMMSX5seHVdC&text=" + text;
let audio = new Audio(nutritionURL);
audio.play();
By using Google Knowledge Graph API, we can search any entity and respective searches are displayed on page along with text to speech conversion as shown above:
Knowledge Graph API will get the result and will be displayed on home page as shown below:
Audio.play function will convert the image search text in speech as "Image you are looking for is found"
<div ng-repeat="data in kgraphRecords" style="margin:0 auto;">
<span ng-if="data.result.image.contentUrl">
<div class="card" style="width: 250px;margin-left:10px;">
<img class="card-img-top" style="height:300px;width: 250px;" src={{data.result.image.contentUrl}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{data.result.name}}</h5>
<p class="card-text">{{data.result.description}}</p>
</div>
</div>
</span>
</div>
The ng-repeat directive repeats a set of pictures given number of times.
About Page: Briefly describe your project idea in the about page.
Contact Page: Display your teams contact information.
Both pages are simple HTML pages with some CSS styling to display information as shown below:
JS Lint Code Quality Check
In ZenHub issues for above tasks are created and assigned them to team members.Story points estimates,Milestone and epic creation is done in Zenhub.
Following are reports generated via zenhub:
Iteration 1:
Iteration 2:
Iteration 3:
Following are screenshot of basic validation on Login Screen:
Draw the class diagram for school library system
-
OAuth for Gmail and Facebook: Angular OAuth
Concepts used in ICP-2 and ICP-3 ( A lot of help from Nutritionix API to implement Knowledge Graph API in similar manner)