Angular is on Fire(base) - Shmuela Jacobs - Codemotion Amsterdam 2017
•
2 likes•899 views
Firebase is a great platform that gives a suite of tools with which you can easily create and manage your app’s backend, and concentrate on developing a marvelous frontend. This is where Angular steps in: it helps you build your app in component-based architecture, and provides solutions for various client-side aspects. The combination of the two gives a powerful connection between the application and the database. In this lecture I’ll show how to implement common use-cases of users and data management by leveraging Firebase’s and Angular’s strengths: realtime synchronization, OAuth and more.
Report
Share
Angular is on Fire(base) - Shmuela Jacobs - Codemotion Amsterdam 2017
- 1. Angular is on Fire(base)! Shmuela Jacobs AMSTERDAM 16 - 17 MAY 2017
- 2. Shmuela Jacobs Front-end Developer, Consultant & Trainer shmuela@ng-girls.org shmool @ShmuelaJ
- 3. Shmuela Jacobs Front-end Developer & Consultant shmuela@ng-girls.org shmool @ShmuelaJ
- 4. Shmuela Jacobs Front-end Developer & Consultant shmuela@ng-girls.org shmool @ShmuelaJ
- 5. Shmuela Jacobs Front-end Developer & Consultant shmuela@ng-girls.org shmool @ShmuelaJ
- 6. https://openfire-cookbook.firebaseapp.com Demo App - OpenFire Cookbook
- 7. Firebase
- 8. 4
- 10. https://github.com/angular/angularfire2 AngularFire2 Do stuff like: <div> {{ (authService.authState$ | async )?.displayName }} </div>
- 11. Firebase Authentication Email + Password - with all the needed features Federated identity providers - Google, Facebook... Other identity providers - using Cloud Functions Smart user management Anonymous user
- 12. DB with AngularFire2 Real time Read/write protection Lists Objects Queries - observables!
- 13. Cloud Functions Firebase cloud messaging (FCM) send emails send SMS modify realtime DB execute intensive tasks access storage batch jobs integrate with 3rd party services and APIs NEW!
- 14. Cloud Functions Triggers Realtime DB - on write Authentication - user created/deleted Cloud Storage Analytics HTTP Google Cloud Pub/Sub (messaging)
- 15. Project Setup npm i angular-cli -g ng new my-app --style=scss --prefix=sj -it --routing cd my-app npm i firebase angularfire2 -S npm i firebase-tools -g firebase login firebase init
- 16. OpenFire CookBook Authentication Real Time Database Cloud Functions NEW!
- 17. OpenFire Cookbook User Management Authentication - password + Google Routing User Avatar Read permission - all Write permission - authenticated user Edit permission - recipe owner
- 18. DB Rules { "rules": { ".read": "auth != null", ".write": "auth != null" } }
- 19. DB Rules { "rules": { ".read": true, ".write": true } }
- 20. DB Rules { "rules": { ".read": true, ".write": false, "recipes": { "$recipeId": { ".write": "auth.uid != null && (!data.exists() || data.child('uid').val() === auth.uid)" } } } }
- 21. DB Rules { "rules": { // By default, make all data private unless specified otherwise. ".read": false, ".write": false, "room-metadata": { ".read": true, "$roomId": { // Append-only by anyone, and admins can add official rooms, and edit or remove rooms as well. ".write": "(auth != null) && (!data.exists() || root.child('moderators').hasChild(auth.uid) || data.child('createdByUserId').val() === auth.uid)", ".validate": "newData.hasChildren(['name','type'])", "id": { ".validate": "(newData.val() === $roomId)" }, "createdByUserId": { ".validate": "(auth.uid === newData.val())" }, "numUsers": { ".validate": "(newData.isNumber())" }, "type": { ".validate": "('public' === newData.val()) || 'private' === newData.val() || ('official' Erik Haddad - firechat https://firechat.social erikhaddad
- 22. Deploy ng build --prod firebase deploy
- 23. More in Firebase Storage Notifications Invites AdWords Analytics ...and more! firebase.google.com angular.io github.com/angular/angularfire2 angularfirebase.com