Firebase Web codelab

During this codelab, participants will learn how to use Firebase to create web applications by implementing and deploying a chat client using Firebase.

Transcript

1. Sandra Israel-Ovirih Firebase Web Codelab Frontend Developer
2. Frontend Developer Sandra Israel-Ovirih sandraio.com @sandraisrael_o
3. What are we building ? codelabs.developers.google.com/ codelabs/firebase-web/#0
4. • Firebase Authentication • Firebase Realtime Database • Cloud Storage for Firebase • Firebase Hosting • Firebase Cloud Messaging Overview
5. Let’s get started Step 1
6. console.firebase.google.com Create a Firebase Project and set up your project Step 2
7. Firebase Authentication • Enable Google Auth Step 2 Firebase Realtime Database • Enable the Realtime Database Cloud Storage for Firebase • Enable Cloud storage
8. Install Firebase CLI Step 3
9. Install Firebase CLI Step 3
10. Run your app Step 4 Localhost:5000
11. Small fix Step 4
12. Import and Configure Firebase SDK Step 5
13. Step 6 Firebase Authentication Sign in with Google
14. Sign users in with Firebase Authentication Step 6
15. Sign users out with Firebase Authentication Step 6
16. Track the Authentication State Step 6
17. AuthStateObserver Step 6
18. Step 6 AuthStateObserver
19. Display signed in user information Step 6
20. Check if user is signed in Step 6
21. • Firebase Authentication • Firebase Realtime Database • Cloud Storage for Firebase • Firebase Hosting • Firebase Cloud Messaging Progress… Firebase Authentication ✅
22. Step 7 Firebase Realtime Database Read Messages, Send Messages
23. Import initial_messages.json to your project’s Database Step 7
24. Synchronize Messages Step 7
25. Send Messages Step 7
26. App logic to send a message
27. App logic to send a message
28. App logic to send a message
29. App logic to send a message
30. • Firebase Authentication • Firebase Realtime Database • Cloud Storage for Firebase • Firebase Hosting • Firebase Cloud Messaging Progress… Firebase Realtime Database ✅ ✅
31. Step 8 Cloud Storage for Firebase Send and Store images
32. Uploading an image
33. Save uploaded image to Cloud Storage Step 8 Step 1 -Add a message with a loading icon to the database
34. Save uploaded image to Cloud Storage Step 8 Step 2- Upload the image file to Cloud Storage to the path /<uid>/<messageID>/ <filename>
35. Save uploaded image to Cloud Storage Step 3 - Generate a publicly readable URL for the image file. Step 4 - Update the chat message with the newly uploaded image file's URL in lieu of the temporary loading image.
36. • Firebase Authentication • Firebase Realtime Database • Cloud Storage for Firebase • Firebase Cloud Messaging • Firebase Hosting Progress… Cloud Storage for Firebase ✅ ✅ ✅
37. Step 9 Firebase Cloud Messaging Show Notifications
38. Whitelist the GCM sender ID Step 9
39. Add the Firebase Messaging service worker Step 9 • Create a file named firebase-messaging-sw.js
40. Get FCM Device Token Step 9 • When the user signs-in we call saveMessagingDeviceToken()
41. Request Permission to show Notifications Step 9 • When the user signs-in we call saveMessagingDeviceToken()
42. Get your Device Token Step 9 • Reload your app if it is still being served or run firebase serve on the command line to start serving the app from http://localhost:5000 then open it in your browser. • After signing-in, you should see the Notifications permission dialog being displayed • Click Allow and open your browser console, you should see the message that reads: Got FCM device token: kjnvrjknvjev ekjfnijen • Copy your device token.
43. Send a Notification to your device Step 9 • Get your Firebase Apps serverKey • Firebase Console > Project Settings > Cloud Messaging • Replace YOUR_SERVER_KEY and YOUR_DEVICE_TOKEN with your Server Key and your Device Token.
44. Send a Notification to your device Step 9 • Get your Firebase Apps serverKey • Firebase Console > Project Settings > Cloud Messaging • Replace YOUR_SERVER_KEY and YOUR_DEVICE_TOKEN with your Server Key and your Device Token.
45. • Firebase Authentication • Firebase Realtime Database • Cloud Storage for Firebase • Firebase Cloud Messaging • Firebase Hosting Progress… Cloud Storage for Firebase ✅ ✅ ✅ ✅
46. Step 10 Firebase Hosting
47. Step 10 Deploy your Firebase App using Firebase static Hosting
48. Take your app live Step 10
49. • Firebase Authentication • Firebase Realtime Database • Cloud Storage for Firebase • Firebase Cloud Messaging • Firebase Hosting What we’ve covered ✅ ✅ ✅ ✅ ✅
50. Sandra Israel-Ovirih sandraio.com Thank you