Supercharge your app with Cloud Functions for Firebase
•
5 likes•1,297 views
Say you have an existing app that uses Firebase. But now you want to add payment processing, image processing, send push notifications, or other functionality that really can't be done in the app itself. How can you do these things without spinning up your own servers? Firebase has you covered. In this codelab you learn how to write JavaScript functions that run in response to events that happen in Firebase. You then deploy these functions to Cloud Functions for Firebase, where they run auto-scaled on Google's infrastructure. To get the most value out of attending, be sure to have Node.js and npm installed on your machine along with your favorite text editor.
Report
Share
Supercharge your app with Cloud Functions for Firebase
- 1. tinyurl.com/functions-lab | @bretmcg Cloud Functions for Firebase Bret McGowen @bretmcg tinyurl.com/functions-lab
- 2. tinyurl.com/functions-lab | @bretmcg Contents What are Cloud Functions for Firebase? Why Cloud Functions? Using Authentication Triggers Using Storage Triggers Using Database Triggers
- 3. tinyurl.com/functions-lab | @bretmcgtinyurl.com/functions-lab | @bretmcg Automatically run backend code in response to events triggered by Firebase features Cloud Functions for Firebase
- 4. tinyurl.com/functions-lab | @bretmcg@bretmcg Google's new serverless data center not ^ @bretmcg
- 5. tinyurl.com/functions-lab | @bretmcg Serverless No need to even think about servers No upfront provisioning; scales as needed Pay per use Stateless / ephemeral
- 6. tinyurl.com/functions-lab | @bretmcg Cloud StorageAuthentication Respond to Events Realtime Database
- 7. tinyurl.com/functions-lab | @bretmcg Why Cloud Functions? Extends and connects Firebase features Low maintenance Keeps your logic private and secure
- 9. tinyurl.com/functions-lab | @bretmcg Setting Up FriendlyChat tinyurl.com/functions-lab or https://codelabs.developers.google.com/ and navigate to Cloud Functions Codelab
- 10. tinyurl.com/functions-lab | @bretmcg Setting Up FriendlyChat 02. Get the Sample Code git clone https://github.com/firebase/f riendlychat 01. Create a Firebase project and Set up your app From the console, create new project called FriendlyChat and enable Google Authentication Install Firebase CLI and deploy FriendlyChat $ npm -g install firebase-tools $ firebase deploy --except functions 03.
- 11. tinyurl.com/functions-lab | @bretmcg Setting Up FriendlyChat 02. Get the Sample Code git clone https://github.com/firebase/f riendlychat 01. Create a Firebase project and Set up your app From the console, create new project called FriendlyChat and enable Google Authentication Install Firebase CLI and deploy FriendlyChat $ npm -g install firebase-tools $ firebase deploy --except functions 03.
- 12. tinyurl.com/functions-lab | @bretmcg Setting Up FriendlyChat 02. Get the Sample Code git clone https://github.com/firebase/f riendlychat 01. Create a Firebase project and Set up your app From the console, create new project called FriendlyChat and enable Google Authentication Install Firebase CLI and deploy FriendlyChat $ npm -g install firebase-tools $ firebase deploy --except functions 03.
- 13. tinyurl.com/functions-lab | @bretmcg Try it Out! Send some messages with FriendlyChat
- 14. tinyurl.com/functions-lab | @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" }, ... }
- 15. tinyurl.com/functions-lab | @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. tinyurl.com/functions-lab | @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. tinyurl.com/functions-lab | @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. tinyurl.com/functions-lab | @bretmcg Cloud Functions environment - Node.js 6.11.1 - 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
- 19. tinyurl.com/functions-lab | @bretmcg // callback-hell.js doThing1(function(a){ doThing2(a, function(b){ doThing3(b, function(c){ doThing4(c, function(d){ doThing5(d, function(e){ // ... }); }); }); }); });
- 21. tinyurl.com/functions-lab | @bretmcg return mkdirp(tmpDir).then(() => { return file.download({destination: tmpFile}); }).then(() => { console.log('File downloaded to ', tmpFile); return spawn(...); //create the thumbnail }).then(() => { console.log('Thumbnail: ', tmpThumbFile); return bucket.upload(tmpFile, {destination: thu}); }).catch(function(error) { console.log("Argghhh!", error); });
- 22. tinyurl.com/functions-lab | @bretmcg Authentication Triggers Trigger a function to run when a new user is created/deleted Welcome!
- 23. tinyurl.com/functions-lab | @bretmcgtinyurl.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
- 24. tinyurl.com/functions-lab | @bretmcgtinyurl.com/functions-lab | @bretmcg ● .onCreate ● .onDelete Authentication Triggers
- 25. tinyurl.com/functions-lab | @bretmcg Let's get coding!
- 26. tinyurl.com/functions-lab | @bretmcg Storage Triggers Trigger a function when data changes in a Cloud Storage bucket hahaha
- 27. tinyurl.com/functions-lab | @bretmcgtinyurl.com/functions-lab | @bretmcg ● uploading, updating, or deleting of files and folders in Cloud Storage. Storage Triggers
- 28. tinyurl.com/functions-lab | @bretmcgtinyurl.com/functions-lab | @bretmcg ● .onChange Storage Triggers
- 29. tinyurl.com/functions-lab | @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
- 30. tinyurl.com/functions-lab | @bretmcg Vision API Complex image detection with a simple REST request $ npm install @google-cloud/vision Free tier!
- 31. Logo Detection
- 32. tinyurl.com/functions-lab | @bretmcg Let's get coding!
- 33. tinyurl.com/functions-lab | @bretmcg Database Triggers Trigger a function when data is created, changed, or deleted from the Database lol hahaha lol lol
- 34. tinyurl.com/functions-lab | @bretmcgtinyurl.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
- 35. tinyurl.com/functions-lab | @bretmcgtinyurl.com/functions-lab | @bretmcg ● .onCreate ● .onWrite ● .onChange ● .onDelete Database Triggers
- 36. tinyurl.com/functions-lab | @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" }, ... }
- 37. tinyurl.com/functions-lab | @bretmcg Let's get coding!
- 38. tinyurl.com/functions-lab | @bretmcg Thank you! firebase.google.com/docs/functions tinyurl.com/functions-videos Bret McGowen @bretmcg