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
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
現場で役立つAPIデザイン
nagix
29
10k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
171
14k
It's Worth the Effort
3n
184
28k
GraphQLとの向き合い方2022年版
quramy
44
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building an army of robots
kneath
302
45k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Why Our Code Smells
bkeepers
PRO
335
57k
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