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
71
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
91
Color Palettes Of The Most Colorful Birds
arnellebalane
0
100
Let's build a video streaming app using Web technologies
arnellebalane
0
120
Let's build a video calling app with Web technologies and Firebase!
arnellebalane
0
130
Ridiculous Scientific Names
arnellebalane
0
180
Fishes With Terrestrial-Animal Names
arnellebalane
0
140
Making the Web more capable with Project Fugu
arnellebalane
0
100
Frontend Web Development in 2021+
arnellebalane
0
150
Extending CSS using Houdini
arnellebalane
0
94
Other Decks in Technology
See All in Technology
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Bounded Context: Problem or Solution?
ewolff
1
210
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
A Philosophy of Restraint
colly
203
16k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
A Tale of Four Properties
chriscoyier
158
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Side Projects
sachag
452
42k
Facilitating Awesome Meetings
lara
51
6.2k
The Language of Interfaces
destraynor
156
24k
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