Firebase Codelab - 2018 Milano

bit.ly/ﬁrebase-milano | @BretMcG
Build serverless web apps
with Google's Firebase
(2018)
Bret McGowen
@BretMcG
bit.ly/ﬁrebase-milano

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/ﬁrebase-milano

Contents
What is Firebase?
What are Cloud Functions for Firebase?
Why Cloud Functions?
Using Authentication Triggers
Using Storage Triggers
Using Database Triggers

Google's platform for building
mobile and web apps
Backed by the power of Google
Cloud Platform

Improve app quality
Crashlytics
Performance
Monitoring
Test Lab
Grow your app
Analytics
Predictions
Cloud
Messaging
Remote
Conﬁg
A/B Testing
Dynamic
Links
Build better apps
Auth
Cloud
Functions
Cloud
Firestore
Hosting
ML Kit
Realtime
Database
Cloud
Storage

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...

Cloud-hosted, serverless NoSQL
database
Synchronization & conflict resolution
in real-time
Access directly from your app

Demo

bit.ly/firebase-lab1
bit.ly/firebase-lab2
@BretMcG

tinyurl.com/functions-lab | @bretmcg
Automatically run backend code
in response to events triggered
by Firebase features
Cloud Functions
for Firebase

@bretmcg
Google's new serverless data center
not
^
@bretmcg

Serverless
No need to even think about servers
No upfront provisioning; scales as needed
Pay per use
Stateless / ephemeral

Cloud Storage
Authentication
Respond to Events
Realtime Database

Why Cloud Functions?
Extends and connects
Firebase features
Low maintenance Keeps your logic
private and secure

FriendlyChat
Realtime chat app

Setting Up FriendlyChat
bit.ly/ﬁrebase-lab2

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.

Try it Out!
Send some messages with
FriendlyChat

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"
},
...
}

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

// callback-hell.js
doThing1(function(a){
doThing2(a, function(b){
doThing3(b, function(c){
doThing4(c, function(d){
doThing5(d, function(e){
// ...
});
});
});
});
});

Promises

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);
});

Authentication
Triggers
Trigger a function to run when
a new user is created/deleted
Welcome!

● A user creates an account with email
account and password.
● A user signs in for the ﬁrst time using
a federated identity provider.
● The developer creates an account
using the Firebase Admin SDK.
Authentication
Triggers

● .onCreate
● .onDelete
Authentication
Triggers

Let's get coding!

Storage
Triggers
Trigger a function when data
changes in a Cloud Storage
bucket
hahaha

● uploading, updating, or
deleting of ﬁles and folders in
Cloud Storage.
Storage
Triggers

● .onChange
Storage
Triggers

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 beneﬁt from ML

Vision API
Complex image detection
with a simple REST request
$ npm install @google-cloud/vision
Free tier!

Database
Triggers
Trigger a function when data is
created, changed, or deleted
from the Database
lol
hahaha
lol
lol

● All writes at the database path
● First write at the database path
● All writes after the ﬁrst write at the
database path
● Delete at the database path
Database
Triggers

● .onCreate
● .onWrite
● .onChange
● .onDelete
Database
Triggers

Thank you!
ﬁrebase.google.com/docs/functions
tinyurl.com/functions-videos
Bret McGowen
@BretMcG

Slides I could add

Firebase Codelab - 2018 Milano

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Firebase Codelab - 2018 Milano

Ähnlich wie Firebase Codelab - 2018 Milano (20)

Mehr von Bret McGowen - NYC Google Developer Advocate

Mehr von Bret McGowen - NYC Google Developer Advocate (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Firebase Codelab - 2018 Milano