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
72
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
110
Let's build a video streaming app using Web technologies
arnellebalane
0
130
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
140
Ridiculous Scientific Names
arnellebalane
0
220
Fishes With Terrestrial-Animal Names
arnellebalane
0
150
Making the Web more capable with Project Fugu
arnellebalane
0
110
Frontend Web Development in 2021+
arnellebalane
0
160
Extending CSS using Houdini
arnellebalane
0
110
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
580
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
200
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
620
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
120
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
420
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
310
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
220
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
150
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
150
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Fireside Chat
paigeccino
37
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Site-Speed That Sticks
csswizardry
10
670
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Building Adaptive Systems
keathley
43
2.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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