Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Serverless Angular, Material, Firebase and Google Cloud applications

1.824 Aufrufe

Veröffentlicht am

Presented at DevFest Florida 2019 - January 19, Orlando, FL.

In this talk we'll learn how to use all the power of Google stack technologies (Angular, Material, Firebase and Google Cloud) to develop a full stack application. We'll learn how we can empower a serverless Angular + Material application with Firebase and reactive programming by using realtime database, Firestore, authentication (with different providers) and Firebase hosting. And we if need any other functionality, we can use Cloud Functions or a NodeJS app. This talk will demonstrate the overview of a real world application (40k users), along with CI configuration and some details of the code (the good parts!).

Veröffentlicht in: Technologie
  • Login to see the comments

Serverless Angular, Material, Firebase and Google Cloud applications

  1. 1. Serverless Angular + Material + Firebase applications Loiane Groner @loiane Build a full stack app with Google technologies
  2. 2. Agenda Build a UI Make it responsive Build an API (Serverless) Realtime database x Firestore Authentication Cloud Functions Hosting Deployment
  3. 3. Loiane Groner @loiane github.com/loiane loiane.com loiane.training Developer / Business Analyst by day Blog / Youtube by night
  4. 4. Angular Modularized components Angular CLI Large Dev community
  5. 5. Setup Angular
  6. 6. Angular CLI
  7. 7. Angular Schematics: create new project
  8. 8. Angular Schematics
  9. 9. Angular Schematics for Visual Studio Code
  10. 10. Angular Material: cross platform
  11. 11. Angular Material: modern UI components
  12. 12. Angular Flex Layout: Angular directives and API
  13. 13. Angular Material + Flex Layout - Desktop
  14. 14. Angular Material + Flex Layout <mat-expansion-panel-header> <mat-panel-title> {{ module.name }} "</mat-panel-title> <mat-panel-description fxHide [fxHide.gt-md]=“false" > {{ module.lessons.length}} Lessons"</mat-panel-description> <span class="panel-title-time" fxShow [fxShow.xs]="false">{{ module.duration }}"</span> "</mat-expansion-panel-header> <mat-list dense *ngIf="module.lessons"> <ng-template ngFor let-lesson [ngForOf]="module.lessons"> <mat-list-item> <mat-icon mat-list-avatar …>"</mat-icon> <span mat-line>{{ lesson.name }}"</span> <p mat-line fxHide [fxHide.xs]="false">{{ lesson.duration }} min"</p> <div fxShow [fxShow.xs]="false" fxLayout="row"> <mat-icon fontSet="mdi" fontIcon=“mdi-clock" >"</mat-icon>{{ lesson.duration }} "</div> "</mat-list-item> "</ng-template> "</mat-list>
  15. 15. Angular Material + Flex Layout: Tablet <mat-expansion-panel-header> <mat-panel-title> {{ module.name }} "</mat-panel-title> <mat-panel-description fxHide [fxHide.gt-md]=“false" > {{ module.lessons.length}} Lessons "</mat-panel-description> <span class="panel-title-time" fxShow [fxShow.xs]=“false"> {{ module.duration }} "</span> "</mat-expansion-panel-header>
  16. 16. Angular Material + Flex Layout: Phone <mat-expansion-panel-header> <mat-panel-title> {{ module.name }} "</mat-panel-title> <mat-panel-description fxHide [fxHide.gt-md]=“false" > {{ module.lessons.length}} Lessons "</mat-panel-description> <span class="panel-title-time" fxShow [fxShow.xs]=“false"> {{ module.duration }} "</span> "</mat-expansion-panel-header>
  17. 17. Serverless
  18. 18. Pros x Cons No need to think about servers No upfront provisioning; scales as needed Pay per use Stateless Vendor Lock-in
  19. 19. Architecture Client (Browser) Authentication Database Student count Generate Certificate
  20. 20. Setup Firebase
  21. 21. Firebase Console
  22. 22. Firebase Console
  23. 23. Creating a DB
  24. 24. Firebase Rules
  25. 25. Creating a collection of documents
  26. 26. Entering Sample Data
  27. 27. Entering Sample Data
  28. 28. Differences with Realtime DB
  29. 29. Firebase config
  30. 30. Firebase libraries
  31. 31. @angular/fire (angularfire2) Observable based: use the power of RxJS, Angular, and Firebase. Authentication: log users in with a variety of providers and monitor authentication state in realtime.
  32. 32. Add Firebase config: dev and prod export const environment = { production: false, firebase: { apiKey: "AIzaSyDt4IqlLy7UYoPgCwwd_I6C7T5ZHjuFbrU", authDomain: "devfest-bcc98.firebaseapp.com", databaseURL: "https:"//devfest-bcc98.firebaseio.com", projectId: "devfest-bcc98", storageBucket: "devfest-bcc98.appspot.com", messagingSenderId: "228593776604" } }; src/environment/environment.ts
  33. 33. Angular: AppModule … import { AngularFireModule } from '@angular/fire'; import { environment } from '"../environments/environment'; @NgModule({ imports: [ …, AngularFireModule.initializeApp(environment.firebase) ], bootstrap: [AppComponent] }) export class AppModule { } src/app/app.module.ts
  34. 34. Firebase modules import { NgModule } from '@angular/core'; import { AngularFireModule } from '@angular/fire'; import { AngularFireAuthModule } from '@angular/fire/auth'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { AngularFireStorageModule } from '@angular/fire/storage'; @NgModule({ exports: [ AngularFireModule, "// needed for everything AngularFirestoreModule, "// only needed for database features AngularFireAuthModule, "// only needed for auth features AngularFireStorageModule "// only needed for storage features ] }) export class AppFirebaseModule { }
  35. 35. Building the API
  36. 36. Firestore: retrieving collections / documents export class FireApiService { constructor(public db: AngularFirestore) {} getCollection<T>(collectionName: string): Observable<T[]> { return this.db.collection<T>(collectionName).valueChanges(); } getCollectionItem<T>(collection: string, property: string, searchItem: string) { return this.db .collection<T>(collection, ref "=> ref.where(property, '"==', searchItem)) .valueChanges(); } getDocument(path: string) { "// path: /courses/XF40vxTSoSMNFXUndKaw return this.db.doc(path).valueChanges(); } }
  37. 37. Angular async pipe @Component({ selector: 'app-courses-list', template: ` <ul> <li *ngFor="let course of courses$ | async"> {{ course.name }} "</li> "</ul> ` }) export class CoursesListComponent { courses$: Observable<any[]>; constructor(db: AngularFirestore) { this.courses$ = db.collection('courses').valueChanges(); } }
  38. 38. Firestore: creating/updating data export class FireApiService { constructor(public db: AngularFirestore) {} createDoc(path: string, obj: any): Observable<firebase.firestore.DocumentReference> { return from(this.db.collection(path).add(obj)); } updateDoc(path: string, obj: any) { return this.db.doc(path).update(obj); "// this.db.doc(path).set(obj); "// overwrite } deleteDoc(path: string) { return this.db.doc(path).delete(); } }
  39. 39. Authentication
  40. 40. Auth: providers
  41. 41. Advanced config
  42. 42. @angular/fire export class AuthService { constructor(private afAuth: AngularFireAuth) {} get currentUser(): firebase.User { return this.afAuth.auth.currentUser; } signInWithGoogleAuthProvider() { return from(this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())); } signInWithEmailAndPassword( email: string, password: string ): Observable<firebase.auth.UserCredential> { return from(this.afAuth.auth.signInWithEmailAndPassword(email, password)); } signOut() { return from(this.afAuth.auth.signOut()); } }
  43. 43. Angular route guards export class AuthGuard implements CanActivate { constructor(private auth: AuthService, private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { if (!this.auth.currentUser) { this.router.navigate(['/login']); return false; } return true; } }
  44. 44. Sign in
  45. 45. Firebase UI Web
  46. 46. Firebase UI Web
  47. 47. Cloud Functions
  48. 48. Firebase CLI
  49. 49. firebase init
  50. 50. firebase init
  51. 51. Functions: JS or TS
  52. 52. Http import * as functions from 'firebase-functions'; "// "// Start writing Firebase Functions "// "// https:"//firebase.google.com/docs/functions/typescript "// export const helloWorld = functions.https.onRequest((request, response) "=> { response.send("Hello from Firebase!"); });
  53. 53. Firestore + auth trigger export const createUser = functions.firestore .document('users/{userId}') .onCreate((snap, context) "=> { "// Get an object representing the document "// e.g. {'name': 'Loiane', 'course': Angular} const newValue = snap.data(); const name = newValue.name; "// perform desired operations ""... }); export const sendWelcomeEmail = functions.auth.user().onCreate(user "=> { "// ""... });
  54. 54. Logs
  55. 55. Firebase Rules
  56. 56. Syntax Highlighting
  57. 57. Syntax Highlighting
  58. 58. Visual Studio Code Extension
  59. 59. Looks better now!
  60. 60. Some Tips
  61. 61. Avoiding templates changes: pipes for the rescue export class UserEnrolledPipe implements PipeTransform { constructor(priva: UserService) {} transform(user: any, course: Course): Observable<boolean> { if (user "&& course) { return this.userService.isUserEnrolled(course); } return of(false); } } <button *ngIf="(user | userEnrolled:course | async); else: enroll" [routerLink]="['/continue-course/', course.slug]" > Continue Course "</button>
  62. 62. Data modeling
  63. 63. Hosting and DevOps
  64. 64. Travis CI
  65. 65. firebase login:ci
  66. 66. Environment variables
  67. 67. .travis.yml language: node_js node_js: - node before_script: - npm install -g "--silent firebase-tools script: - npm run build after_success: - test $TRAVIS_BRANCH = "master" "&& test $TRAVIS_PULL_REQUEST = "false" "&& firebase deploy "--only hosting —token $FIREBASE_TOKEN "--non-interactive notifications: email: on_failure: change on_success: change
  68. 68. Hosting: custom domain
  69. 69. Full stack with Google technologies!
  70. 70. Thank you! @loiane github.com/loiane loiane.com loiane.training
  71. 71. Resources https://angular.io/resources https://material.angular.io/ https://github.com/angular/flex-layout/wiki https://angularfirebase.com/ https://www.fullstackfirebase.com/ http://bit.ly/organizing-firebase-cf

×