Firebase Codelab - 2018 Milano

Build a serverless web app using Google Firebase. The sample app is called FriendlyChat and uses Firebase Hosting, Firebase Functions, Node.js Google Cloud Vision API, authentication and more.

From the Serverless Days Milano 2018 workshop event.

About Bret McGowen - Google Engineer

Bret McGowen - Google Cloud Examples on GitHub

Bret's Google Cloud speaking engagements

Transcript

1. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Build serverless web apps with Google's Firebase (2018) Bret McGowen @BretMcG bit.ly/firebase-milano
2. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG About me: Bret McGowen Google Developer Advocate Twitter - @BretMcG • Bret McGowen - Google Cloud YouTube channel • about.me/bret.mcgowen • Bret’s Google Cloud talks
3. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Node 8 (I recommend using NVM from github.com/creationix/nvm) Text editor Visual Studio Code, Sublime, etc Firebase tools $ npm -g install firebase-tools Install bit.ly/firebase-milano
4. Google's platform for building mobile and web apps Backed by the power of Google Cloud Platform
5. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Improve app quality Crashlytics Performance Monitoring Test Lab Grow your app Analytics Predictions Cloud Messaging Remote Config A/B Testing Dynamic Links Build better apps Auth Cloud Functions Cloud Firestore Hosting ML Kit Realtime Database Cloud Storage
6. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Firebase Google's mobile platform Serverless databases Authentication Analytics Notifications And much more... Google Cloud Platform Google's public cloud Machine Learning Big Data IoT Virtual machines And much more...
7. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Cloud-hosted, serverless NoSQL database Synchronization & conflict resolution in real-time Access directly from your app
8. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Demo
9. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG bit.ly/firebase-lab1 bit.ly/firebase-lab2 @BretMcG
10. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG tinyurl.com/functions-lab | @bretmcg Automatically run backend code in response to events triggered by Firebase features Cloud Functions for Firebase
11. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Serverless No need to even think about servers No upfront provisioning; scales as needed Pay per use Stateless / ephemeral
12. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Cloud Storage Authentication Respond to Events Realtime Database
13. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG FriendlyChat Realtime chat app
14. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Setting Up FriendlyChat bit.ly/firebase-lab2
15. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Database Structure messages: { -K2ib4H77rj0LYewF7dP: { name: "Jen", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg", text: "lol that's awesome!" }, -K2ib5JHRbbL0NrztUfO: { imageUrl: "gs://friendlychat-833ed.appspot.com/GJHZV...D0A.JPG", name: "Bret", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg" }, ... }
16. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Database Structure messages: { -K2ib4H77rj0LYewF7dP: { name: "Jen", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg", text: "lol that's awesome!" }, -K2ib5JHRbbL0NrztUfO: { imageUrl: "gs://friendlychat-833ed.appspot.com/GJHZV...D0A.JPG", name: "Bret", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg" }, ... }
17. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Database Structure messages: { -K2ib4H77rj0LYewF7dP: { name: "Jen", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg", text: "lol that's awesome!" }, -K2ib5JHRbbL0NrztUfO: { imageUrl: "gs://friendlychat-833ed.appspot.com/GJHZV...D0A.JPG", name: "Bret", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg" }, ... }
18. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Database Structure messages: { -K2ib4H77rj0LYewF7dP: { name: "Jen", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg", text: "lol that's awesome!" }, -K2ib5JHRbbL0NrztUfO: { imageUrl: "gs://friendlychat-833ed.appspot.com/GJHZV...D0A.JPG", name: "Bret", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg" }, ... }
19. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Cloud Functions environment - Node.js 6 or 8 - Open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side - Non-blocking - commands execute in parallel, and use callbacks to signal completion or failure - Debian 8 “Jessie” - Env contains ImageMagick
20. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Authentication Triggers Trigger a function to run when a new user is created/deleted Welcome!
21. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG tinyurl.com/functions-lab | @bretmcg • A user creates an account with email account and password. • A user signs in for the first time using a federated identity provider. • The developer creates an account using the Firebase Admin SDK. Authentication Triggers
22. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG tinyurl.com/functions-lab | @bretmcg • .onCreate • .onDelete Authentication Triggers
23. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Let's get coding!
24. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Storage Triggers Trigger a function when data changes in a Cloud Storage bucket hahaha
25. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG tinyurl.com/functions-lab | @bretmcg • uploading, updating, or deleting of files and folders in Cloud Storage. Storage Triggers
26. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG tinyurl.com/functions-lab | @bretmcg • .onChange Storage Triggers
27. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Machine learning as an API Cloud Vision API Cloud Translation API Cloud Natural Language API Use your own data to train models Cloud Speech API Cloud Video Intelligence Cloud Machine Learning Engine TensorFlow Two ways we can help you benefit from ML
28. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Vision API Complex image detection with a simple REST request $ npm install @google-cloud/vision Free tier!
29. Logo Detection
30. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Let's get coding!
31. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Database Triggers Trigger a function when data is created, changed, or deleted from the Database lol hahaha lol lol
32. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG tinyurl.com/functions-lab | @bretmcg • All writes at the database path • First write at the database path • All writes after the first write at the database path • Delete at the database path Database Triggers
33. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG tinyurl.com/functions-lab | @bretmcg • .onCreate • .onWrite • .onChange • .onDelete Database Triggers
34. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Database Structure messages: { -K2ib4H77rj0LYewF7dP: { name: "Jen", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg", text: "lol that's awesome!" }, -K2ib5JHRbbL0NrztUfO: { imageUrl: "gs://friendlychat-833ed.appspot.com/GJHZV...D0A.JPG", name: "Bret", photoUrl: "https://lh3.googleusercontent.com/-xDoJpI/photo.jpg" }, ... }
35. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Let's get coding!
36. bit.ly/firebase-milano | github.com/bretmcg | @BretMcG Thank you! firebase.google.com/docs/functions tinyurl.com/functions-videos Bret McGowen - @BretMcG • Bret McGowen - Google Cloud YouTube channel • about.me/bret.mcgowen • Bret’s Google Cloud talks