Introduction to Firebase

Transcript

1. Arnelle Balane @arnellebalane Web Developer, ChannelFix Introduction to
2. bit.ly/firebase-bacolod
3. You want to build an app
9. Build
10. Improve
11. Grow & Engage
14. Creating a project Create and manage projects at https://console.firebase.google.com/
15. Creating a project
16. Creating a project
17. Adding to your app https://www.gstatic.com/firebasejs/5.5.8/firebase.js via Google’s CDN
18. Adding to your app via Google’s CDN firebase initializeApp
19. Adding to your app via Firebase CLI
20. Adding to your app via Firebase CLI "/__/firebase/5.5.8/firebase.js" "/__/firebase/init.js"
22. Email and Password Authentication Federated Authentication (Google, Facebook, Twitter, Github) Phone Number Authentication Email Link Authentication Anonymous Authentication
23. Enabling email and password authentication
24. Using the authentication service
25. Create account with email and password createUserWithEmailAndPassword email password
26. Logging in with email and password signInWithEmailAndPassword email password
27. onAuthStateChanged Observing auth state
28. Observing auth state
29. Enabling federated authentication
30. GoogleAuthProvider signInWithPopup provider Logging in with Google
31. Logging in with Google
32. FacebookAuthProvider TwitterAuthProvider GithubAuthProvider GoogleAuthProvider Logging in with other auth providers
33. Logging in with passwordless auth sendSignInLinkToEmail email
34. isSignInWithEmailLink location.href signInWithEmailLink email Logging in with passwordless auth
35. Logging in with phone number
36. signInWithPhoneNumber phoneNumber recaptchaVerifier Logging in with phone number
37. Logging in with phone number confirmation confirm code
38. signInAnonymously Logging in anonymously
39. Account linking Sending confirmation emails Sending password reset emails Custom authentication system Custom claims More features FirebaseUI
42. NoSQL Cloud Database Stores data as JSON Syncs data across connected clients in realtime Offline capabilities
43. Stores data as JSON
44. Accessing parts of the database Reference
45. Accessing parts of the database "posts" "first-post" { "title": "First Post", "created_at": "2018-11-01" } Reference posts/first-post
46. Accessing parts of the database "posts" "first-post" "title" "First Post" Reference posts/first-post/title
47. Using the realtime database service
48. Creating a reference database.ref 'posts/third-post'
49. Writing data to the database reference set
50. Structuring our data
51. Structuring our data
52. Structuring our data "comments": { "1": { "content": "nice!" }, "2": { "content": "cooool!" } ... }
53. Structuring our data
54. Reading data from the database reference on 'value'
55. Reading data from the database 'value' 'child_added' 'child_removed' 'child_changed' 'child_moved'
56. value Reading data from the database
57. Deleting data from the database reference remove
58. Detecting when you go offline '.info/connected'
59. Detecting when you go offline
60. Letting others know you are offline connectionRef onDisconnect
61. Security rules
62. Security rules true "auth.uid === $uid"
63. Security rules database.rules.json
65. NoSQL Cloud Database Organizes data in documents and collections Syncs data across connected clients in realtime More expressive querying capabilities Offline support for mobile and web
66. ⇒
67. ⇒
69. Using the firestore service
70. Creating collection and document references collection 'posts' doc 'first-post' doc 'posts/first-post'
71. Writing data to the database documentRef set
72. Writing data to the database
73. Reading a document from the database doc 'posts/first-post' documentRef get
74. Reading a document from the database data
75. collection 'posts' collectionRef get Reading a collection from the database
76. snapshot forEach data Reading a collection from the database
77. Filtering the results where 'is_published' '==' true
78. Structuring our data
79. Structuring our data "posts" "first-post" ⇒ collection ⇒ document
80. Structuring our data "posts" "first-post" "comments" "1" "2" ⇒ collection ⇒ document ⇒ collection ⇒ document ⇒ document
81. collection 'posts' collectionRef onSnapshot Realtime updates
82. Realtime updates doc 'posts/first-post' documentRef onSnapshot
83. Security rules
84. match /posts/{post} if request.auth != null Security rules
85. Security rules match /comments/{comment}
86. Security rules read write get list create update delete
87. Security rules firestore.rules
88. Data Storage Offline Support JSON Collections, Documents Android, iOS Android, iOS, Web Querying Deep queries Shallow queries lesser need for denormalization or data flattening returns the entire subtree thanks to subcollections https://firebase.google.com/docs/firestore/rtdb-vs-firestore
90. Highly scalable object storage
91. Using the storage service
92. Uploading a file storage ref 'avatars/arnellebalane.jpg'
93. Uploading a file reference put file
94. Monitoring upload progress 'state_changed'
95. Monitoring upload progress upload upload bytesTransferred upload totalBytes
96. reference getDownloadURL Obtaining the file’s URL
97. reference delete Deleting a file
98. Security rules
99. Security rules match /avatars/{image} if request.auth != null && request.resource.contentType.matches('image/.*')
100. Security rules storage.rules
101. More features Pause/resume file uploads Custom file metadata
103. Fast and secure hosting for Web applications Quickly and easily deploy apps and content into a global CDN Secured with SSL
104. firebase deploy https://firebase-example.firebaseapp.com/ Deploying our site
105. Custom domains One-click rollbacks
107. Automatically run backend code in response to events and requests Our code is stored and runs in a managed environment on Google’s cloud
108. Cloud Firestore Triggers Realtime Database Triggers Cloud Functions triggers Firebase Authentication Triggers Cloud Storage Triggers Remote Config Triggers Google Analytics for Firebase Triggers Crashlytics Triggers Cloud Pub/Sub Triggers HTTP Triggers
109. Enabling Cloud Functions for Firebase
110. functions Enabling Cloud Functions for Firebase
111. Cloud Function for HTTP Triggers
112. Cloud Function for HTTP Triggers
113. helloWorld Cloud Function for HTTP Triggers
114. https onRequest Cloud Function for HTTP Triggers
115. request response Cloud Function for HTTP Triggers
116. Cloud Function for HTTP Triggers
117. Deploying Cloud Functions
118. Deploying Cloud Functions
119. Deploying Cloud Functions
120. Cloud Function for HTTP Triggers
121. Cloud Function for Firebase Authentication Triggers
122. sendWelcomeEmail auth user() onCreate user Cloud Function for Firebase Authentication Triggers
123. Cloud Function for Cloud Storage Triggers
124. generateImageThumbnails storage object() onFinalize object Cloud Function for Cloud Storage Triggers
125. More Cloud Functions guides at https://firebase.google.com/docs/functions/
127. Brings Google’s ML expertise in a powerful yet easy-to-use package for Android and iOS Provides ready-to-use APIs for common use cases Use custom TensorFlow Lite models Run on-device or in the cloud
128. Face Detection Barcode Scanning Image Labelling Ready-to-use APIs Text Recognition Landmark Recognition
129. Know more at https://firebase.google.com/docs/ml-kit/
130. Firebase Admin SDK
131. Interact with Firebase from our server Firebase Admin SDK
132. Installation Firebase Admin SDK
133. Installation Firebase Admin SDK Also available in:
134. Obtain a service account key Firebase Admin SDK
135. Initializing the SDK Firebase Admin SDK
136. Initializing the SDK Firebase Admin SDK
137. Initializing the SDK serviceAccount admin initializeApp serviceAccount Firebase Admin SDK
138. admin database Initializing the SDK Firebase Admin SDK
139. Firebase CLI firebase-tools
140. Installation Firebase CLI
141. Installation and setup Firebase CLI
142. Initializing a Firebase project Firebase CLI
143. Initializing a Firebase project Firebase CLI
144. Initializing a Firebase project Firebase CLI
145. Initializing a Firebase project Firebase CLI database.rules.json
146. Initializing a Firebase project Firebase CLI firestore.indexes.json firestore.rules
147. Initializing a Firebase project Firebase CLI functions index.js package.json
148. Initializing a Firebase project Firebase CLI public 404.html index.html
149. Initializing a Firebase project Firebase CLI storage.rules
150. Commands Firebase CLI
151. Commands Firebase CLI
152. Commands Firebase CLI
153. https://firebase.google.com/
154. Arnelle Balane @arnellebalane Web Developer, ChannelFix Introduction to