Designing Single page application using Angular JS 2 - Part 3

1. presented by
Paras Mendiratta
Session 3

2. Topics for Today
1. Connecting with Firebase
2. Consuming HTTP API
3. Authentication
4. Production Deployment
2
// Visit the site
https://cookbook-a98ee.firebaseapp.com/signin

3. 1. Connecting With
Firebase

4. https://console.firebase.google.com

6. Database Rules

7. Firebase Project
Database URL
Database Node
(JSON)

8. Install Firebase Module
// 3. Add Bootstrap Library
npm install firebase

9. 2. Consuming HTTP
API

10. Data-Storage Service
shared/data-storage.service.ts
import { Injectable } from ‘@angular/core';
import { Http, Response } from ‘@angular/http';
@Injectable()
export class DataStorageService {
constructor(private http: Http) { }
}

11. Save Recipes
shared/data-storage.service.ts
import { Injectable } from ‘@angular/core';
import { Http, Response } from ‘@angular/http';
import { RecipeService } from ‘app/recipes/recipe.service’;
@Injectable()
export class DataStorageService {
private let recipeDBURL = ‘https://cookbook-a98ee.firebaseio.com/recipes.json’;
constructor(private http: Http, private recipeService: RecipeService) { }
storeRecipes() {
return this.http.put(this.recipeDBURL, this.recipeService.getRecipes());
}
}

12. Fetch Recipes
shared/data-storage.service.ts
import { Recipe } from ‘app/recipes/recipe.model’;
@Injectable()
export class DataStorageService {
storeRecipes() {
this.http.get(this.recipeDBURL)
.map((response: Response) => {
const recipes: Recipe[] = response.json();
for (let recipe of recipes) {
recipe.ingredients = recipe.ingredients? recipe.ingredients : [];
}
})
.subscribe((recipes: Recipe[]) => {
this.recipeService.setRecipes(recipes);
});
}
}

13. 3. Authentication

15. Initialize Firebase
app.component.ts File:
import * as firebase from ‘firebase’;
export class AppComponent implements OnInit {
ngOnInit(): void {
firebase.initializeApp({
apiKey: ‘Your-API-Key’,
authDomain: ‘Firebase-App-Domain’
});
}
}
15

16. Database Rules

17. Signup Page

18. Signup Form
signup.component.html File:
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignup(f)" #f="ngForm">
<div class="form-group">
<label for="email">Mail</label>
<input type="email" id="email" name="email"
ngModel class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password"
name="password" ngModel class="form-control">
</div>
<button class="btn btn-primary"
type="submit" [disabled]="!f.valid">Sign Up</button>
</form>
</div>
</div>
18

19. SignUp Service
auth/auth.service.ts
import { Injectable } from ‘@angular/core';
import * as firebase from ‘firebase';
import { Router } from ‘@angular/router’;
@Injectable()
export class AuthService {
constructor(private router: Router) { }
signupUser(email: string, password: string) {
firebase.auth().createUserWithEmailAndPassword(email, password)
.then(response => {
this.router.navigate([‘/’]);
})
.catch(error => {
console.log(‘Sign up Error: ’, error);
})
}
}

20. SignIn Page

21. SignIn Form
signup.component.html File:
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSignin(f)" #f="ngForm">
<div class="form-group">
<label for="email">Mail</label>
<input type="email" id="email" name="email"
ngModel class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password"
name="password" ngModel class="form-control">
</div>
<button class="btn btn-primary"
type="submit" [disabled]="!f.valid">Sign In</button>
</form>
</div>
</div>
21

22. SignIn Service
auth/auth.service.ts
export class AuthService {
token: string;
signInUser(email: string, password: string) {
firebase.auth().signInWithEmailAndPassword(email, password)
.then(response => {
this.router.navigate([‘/’]);
firebase.auth().currentUser.getToken().then((token: string) => {
this.token = token;
})
})
.catch(error => {
console.log(‘Sign up Error: ’, error);
})
}
}

23. Authentication
auth/auth.service.ts
export class AuthService {
getToken() {
firebase.auth().currentUser.getToken()
.then(token => { this.token = token; });
return this.token;
}
isAuthenticated() {
return this.token != null;
}
logout() {
firebase.auth().signOut();
this.token = null;
}
}

24. Securing Routes
auth/auth-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angula
r/router";
import { Observable } from "rxjs/Observable";
import { AuthService } from "app/auth/auth.service";
@Injectable()
export class AuthGuardService implements CanActivate {
constructor(private authSevice:AuthService) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
boolean | Observable<boolean> | Promise<boolean> {
return this.authSevice.isAuthenticated();
}
}

25. Securing Routes
app-routing.module.ts
const appRoutes: Routes = [
{ path: '', redirectTo: '/recipes', pathMatch: 'full' },
{
path: 'recipes', component: RecipesComponent, children: [
{ path: '', component: RecipeStartComponent },
{ path: 'new', component: RecipeEditComponent,
canActivate:[AuthGuardService] },
{ path: ':id', component: RecipeDetailComponent },
{ path: ':id/edit', component: RecipeEditComponent,
canActivate:[AuthGuardService] }
]
},
{ path: 'shopping-list', component: ShoppingListComponent },
{ path: 'signup', component: SignupComponent },
{ path: 'signin', component: SigninComponent }
];

26. 4. Production
Deployment

27. Firebase Deployment
// 1. Install Firebase CLI tool
npm install -g firebase-tools
// 2. Build the production files
ng build ——prod
// 3. Firebase Login
firebase login
// 4. Firebase Init
firebase init

28. // 5. Select Destination Directory
/dist
// 6. Deploy Site
firebase deploy

29. Thank You