Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Firebase
Search
Arnelle Balane
November 24, 2018
Technology
0
68
Introduction to Firebase
Arnelle Balane
November 24, 2018
Tweet
Share
More Decks by Arnelle Balane
See All by Arnelle Balane
Introduction to building Chrome Extensions
arnellebalane
0
41
Color Palettes Of The Most Colorful Birds
arnellebalane
0
72
Let's build a video streaming app using Web technologies
arnellebalane
0
83
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
98
Ridiculous Scientific Names
arnellebalane
0
110
Fishes With Terrestrial-Animal Names
arnellebalane
0
120
Making the Web more capable with Project Fugu
arnellebalane
0
74
Frontend Web Development in 2021+
arnellebalane
0
130
Extending CSS using Houdini
arnellebalane
0
67
Other Decks in Technology
See All in Technology
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
なんで私に登壇依頼が?! ~頼られるエンジニアになるためには~ /
mixi_engineers
PRO
2
200
統計的学習理論読み Chapter 1
kmatsui
3
770
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.4k
データ化エンジニアとしての1年を振り返る
sansantech
PRO
3
250
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
160
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
12k
Introduction to Jetpack Compose
pohjus
1
110
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
250
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
7
2.3k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Design by the Numbers
sachag
274
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Agile that works and the tools we love
rasmusluckow
323
20k
Embracing the Ebb and Flow
colly
78
4.1k
The Mythical Team-Month
searls
214
42k
Rails Girls Zürich Keynote
gr2m
91
13k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
Transcript
Arnelle Balane @arnellebalane Web Developer, ChannelFix Introduction to
bit.ly/firebase-bacolod
You want to build an app
None
None
None
None
None
Build
Improve
Grow & Engage
None
None
Creating a project Create and manage projects at https://console.firebase.google.com/
Creating a project
Creating a project
Adding to your app https://www.gstatic.com/firebasejs/5.5.8/firebase.js via Google’s CDN
Adding to your app via Google’s CDN firebase initializeApp
Adding to your app via Firebase CLI
Adding to your app via Firebase CLI "/__/firebase/5.5.8/firebase.js" "/__/firebase/init.js"
None
Email and Password Authentication Federated Authentication (Google, Facebook, Twitter, Github)
Phone Number Authentication Email Link Authentication Anonymous Authentication
Enabling email and password authentication
Using the authentication service
Create account with email and password createUserWithEmailAndPassword email password
Logging in with email and password signInWithEmailAndPassword email password
onAuthStateChanged Observing auth state
Observing auth state
Enabling federated authentication
GoogleAuthProvider signInWithPopup provider Logging in with Google
Logging in with Google
FacebookAuthProvider TwitterAuthProvider GithubAuthProvider GoogleAuthProvider Logging in with other auth providers
Logging in with passwordless auth sendSignInLinkToEmail email
isSignInWithEmailLink location.href signInWithEmailLink email Logging in with passwordless auth
Logging in with phone number
signInWithPhoneNumber phoneNumber recaptchaVerifier Logging in with phone number
Logging in with phone number confirmation confirm code
signInAnonymously Logging in anonymously
Account linking Sending confirmation emails Sending password reset emails Custom
authentication system Custom claims More features FirebaseUI
None
None
NoSQL Cloud Database Stores data as JSON Syncs data across
connected clients in realtime Offline capabilities
Stores data as JSON
Accessing parts of the database Reference
Accessing parts of the database "posts" "first-post" { "title": "First
Post", "created_at": "2018-11-01" } Reference posts/first-post
Accessing parts of the database "posts" "first-post" "title" "First Post"
Reference posts/first-post/title
Using the realtime database service
Creating a reference database.ref 'posts/third-post'
Writing data to the database reference set
Structuring our data
Structuring our data
Structuring our data "comments": { "1": { "content": "nice!" },
"2": { "content": "cooool!" } ... }
Structuring our data
Reading data from the database reference on 'value'
Reading data from the database 'value' 'child_added' 'child_removed' 'child_changed' 'child_moved'
value Reading data from the database
Deleting data from the database reference remove
Detecting when you go offline '.info/connected'
Detecting when you go offline
Letting others know you are offline connectionRef onDisconnect
Security rules
Security rules true "auth.uid === $uid"
Security rules database.rules.json
None
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
⇒
⇒
None
Using the firestore service
Creating collection and document references collection 'posts' doc 'first-post' doc
'posts/first-post'
Writing data to the database documentRef set
Writing data to the database
Reading a document from the database doc 'posts/first-post' documentRef get
Reading a document from the database data
collection 'posts' collectionRef get Reading a collection from the database
snapshot forEach data Reading a collection from the database
Filtering the results where 'is_published' '==' true
Structuring our data
Structuring our data "posts" "first-post" ⇒ collection ⇒ document
Structuring our data "posts" "first-post" "comments" "1" "2" ⇒ collection
⇒ document ⇒ collection ⇒ document ⇒ document
collection 'posts' collectionRef onSnapshot Realtime updates
Realtime updates doc 'posts/first-post' documentRef onSnapshot
Security rules
match /posts/{post} if request.auth != null Security rules
Security rules match /comments/{comment}
Security rules read write get list create update delete
Security rules firestore.rules
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
None
Highly scalable object storage
Using the storage service
Uploading a file storage ref 'avatars/arnellebalane.jpg'
Uploading a file reference put file
Monitoring upload progress 'state_changed'
Monitoring upload progress upload upload bytesTransferred upload totalBytes
reference getDownloadURL Obtaining the file’s URL
reference delete Deleting a file
Security rules
Security rules match /avatars/{image} if request.auth != null && request.resource.contentType.matches('image/.*')
Security rules storage.rules
More features Pause/resume file uploads Custom file metadata
None
Fast and secure hosting for Web applications Quickly and easily
deploy apps and content into a global CDN Secured with SSL
firebase deploy https://firebase-example.firebaseapp.com/ Deploying our site
Custom domains One-click rollbacks
None
Automatically run backend code in response to events and requests
Our code is stored and runs in a managed environment on Google’s cloud
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
Enabling Cloud Functions for Firebase
functions Enabling Cloud Functions for Firebase
Cloud Function for HTTP Triggers
Cloud Function for HTTP Triggers
helloWorld Cloud Function for HTTP Triggers
https onRequest Cloud Function for HTTP Triggers
request response Cloud Function for HTTP Triggers
Cloud Function for HTTP Triggers
Deploying Cloud Functions
Deploying Cloud Functions
Deploying Cloud Functions
Cloud Function for HTTP Triggers
Cloud Function for Firebase Authentication Triggers
sendWelcomeEmail auth user() onCreate user Cloud Function for Firebase Authentication
Triggers
Cloud Function for Cloud Storage Triggers
generateImageThumbnails storage object() onFinalize object Cloud Function for Cloud Storage
Triggers
More Cloud Functions guides at https://firebase.google.com/docs/functions/
None
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
Face Detection Barcode Scanning Image Labelling Ready-to-use APIs Text Recognition
Landmark Recognition
Know more at https://firebase.google.com/docs/ml-kit/
Firebase Admin SDK
Interact with Firebase from our server Firebase Admin SDK
Installation Firebase Admin SDK
Installation Firebase Admin SDK Also available in:
Obtain a service account key Firebase Admin SDK
Initializing the SDK Firebase Admin SDK
Initializing the SDK Firebase Admin SDK
Initializing the SDK serviceAccount admin initializeApp serviceAccount Firebase Admin SDK
admin database Initializing the SDK Firebase Admin SDK
Firebase CLI firebase-tools
Installation Firebase CLI
Installation and setup Firebase CLI
Initializing a Firebase project Firebase CLI
Initializing a Firebase project Firebase CLI
Initializing a Firebase project Firebase CLI
Initializing a Firebase project Firebase CLI database.rules.json
Initializing a Firebase project Firebase CLI firestore.indexes.json firestore.rules
Initializing a Firebase project Firebase CLI functions index.js package.json
Initializing a Firebase project Firebase CLI public 404.html index.html
Initializing a Firebase project Firebase CLI storage.rules
Commands Firebase CLI
Commands Firebase CLI
Commands Firebase CLI
https://firebase.google.com/
Arnelle Balane @arnellebalane Web Developer, ChannelFix Introduction to