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
74
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
110
Color Palettes Of The Most Colorful Birds
arnellebalane
0
120
Let's build a video streaming app using Web technologies
arnellebalane
0
140
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
140
Ridiculous Scientific Names
arnellebalane
0
230
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
120
Frontend Web Development in 2021+
arnellebalane
0
170
Extending CSS using Houdini
arnellebalane
0
110
Other Decks in Technology
See All in Technology
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
20250913_JAWS_sysad_kobe
takuyay0ne
2
250
slog.Handlerのよくある実装ミス
sakiengineer
4
470
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
メルカリIBISの紹介
0gm
0
120
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
510
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Code Reviewing Like a Champion
maltzj
525
40k
For a Future-Friendly Web
brad_frost
180
9.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Building Adaptive Systems
keathley
43
2.7k
Visualization
eitanlees
148
16k
Side Projects
sachag
455
43k
Done Done
chrislema
185
16k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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