OUTLINE
▸ Founded in 2011
▸ Acquired by google in 2014
▸ mBaaS(mobile Backend as a Service)
▸ Very similar to AWS Amplify
▸ Recommended for small business, personal development, start-up
▸ We can use a lot of functions even for free
Slide 9
Slide 9 text
SERVICES
Slide 10
Slide 10 text
FIREBASE SERVICES
Image by: https://
fi
rebase.google.com/docs?authuser=0
Slide 11
Slide 11 text
FIREBASE HOSTING
▸ Deliver content over a
secure connection
▸ Deliver content at high
speed
▸ Deploy new versions with a
single command
Image by: https://www.topgate.co.jp/
fi
rebase01-what-is-
fi
rebase
Slide 12
Slide 12 text
CLOUD FIRESTORE
▸ NoSQL type Database
▸ Realtime updates
▸ Sophisticated query
processing
▸ Of
fl
ine support
Image by: https://www.topgate.co.jp/
fi
rebase01-what-is-
fi
rebase
Slide 13
Slide 13 text
REALTIME DATABASE
▸ NoSQL type Database
▸ Realtime updates
▸ Scaling across multiple
databases
▸ Of
fl
ine support
Image by: https://www.topgate.co.jp/
fi
rebase01-what-is-
fi
rebase
Slide 14
Slide 14 text
CLOUD FIRESTORE OR REALTIME DATABASE
or
cloud
fi
restore realtime database
https://
fi
rebase.google.com/docs/
fi
restore/rtdb-vs-
fi
restore?authuser=0
Slide 15
Slide 15 text
AUTHENTICATION
▸ Drop-in Authentication
Solution
▸ Email and password based
authentication
▸ Integration with Federation
Identity Providers
Image by: https://www.topgate.co.jp/
fi
rebase01-what-is-
fi
rebase
Slide 16
Slide 16 text
CLOUD STORAGE FOR FIREBASE
▸ Robust operations
▸ Strong security
▸ High scalability
Image by: https://www.topgate.co.jp/
fi
rebase01-what-is-
fi
rebase
Slide 17
Slide 17 text
CLOUD FUNCTIONS
▸ Firebase platform
integration
▸ Maintenance free
▸ Maintain con
fi
dentiality
and security of logic
Image by: https://www.topgate.co.jp/
fi
rebase01-what-is-
fi
rebase
Slide 18
Slide 18 text
TODAY, WE USE
cloud
fi
restore
fi
rebase hosting
Slide 19
Slide 19 text
GET STARTED!
Slide 20
Slide 20 text
PRECONDITION
Slide 21
Slide 21 text
TODO LIST
▸ Create TODO app with React
▸ Deploy to
fi
rebase Hosting
▸ Manage data with
fi
rebase
fi
restore
▸ Add authentication capabilities with
fi
rebase auth
Slide 22
Slide 22 text
PRECONDITION
※ inlucde command
⊕
Slide 23
Slide 23 text
NODEJS AND NPM INSTALLER
Image by: https://nodejs.org/ja/
Slide 24
Slide 24 text
CHECK INSTALLED NODEJS AND NPM
Slide 25
Slide 25 text
CRAETE TODO APP
Slide 26
Slide 26 text
DEMO APP
Slide 27
Slide 27 text
DEMO APP
URL: https://github.com/kkeeth/todo-app-with-react-
fi
rebase
Slide 28
Slide 28 text
CHECK INSTALLED NODEJS AND NPM
Slide 29
Slide 29 text
SORRY…
🙇Sorry…🙇
This demo application is created using React. I will
explain the code as needed, but I assume you have a
basic knowledge of HTML/CSS/JavaScript, so if you
don't understand it, it would be helpful if you could
copy the code I write.
Slide 30
Slide 30 text
HOSTING
Slide 31
Slide 31 text
ACCESS TO FIREBASE CONSOLE
Image by: https://console.
fi
rebase.google.com/?hl=ja
Slide 32
Slide 32 text
CREATE PROJECT
Image by: https://console.
fi
rebase.google.com/?hl=ja
Slide 33
Slide 33 text
CREATE PROJECT
Image by: https://console.
fi
rebase.google.com/?hl=ja
Slide 34
Slide 34 text
ADD APP TO PROJECT
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
Slide 35
Slide 35 text
ADD APP TO PROJECT
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
Slide 36
Slide 36 text
ADD APP TO PROJECT
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
Slide 37
Slide 37 text
ADD APP TO PROJECT
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
We'll use it later, so
please copy it 📝
Slide 38
Slide 38 text
SETUP ENVIRONMENT
Slide 39
Slide 39 text
SETUP ENVIRONMENT
Slide 40
Slide 40 text
SETUP ENVIRONMENT
Slide 41
Slide 41 text
SETUP ENVIRONMENT
Slide 42
Slide 42 text
DEPLOY
Slide 43
Slide 43 text
DEPLOY
Slide 44
Slide 44 text
DEPLOY
Slide 45
Slide 45 text
DEPLOY
Slide 46
Slide 46 text
DEPLOY
Slide 47
Slide 47 text
CHECK SITE
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
Slide 48
Slide 48 text
FIRESTORE
Slide 49
Slide 49 text
SETUP FIRESTORE
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
Slide 50
Slide 50 text
SETUP FIRESTORE
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
Slide 51
Slide 51 text
SETUP FIRESTORE
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
Slide 52
Slide 52 text
SETUP FIRESTORE
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
Slide 53
Slide 53 text
CREATE FIREBASE INSTANCE
Slide 54
Slide 54 text
CREATE FIREBASE INSTANCE
Slide 55
Slide 55 text
CREATE FIREBASE INSTANCE
Slide 56
Slide 56 text
CREATE FIREBASE INSTANCE
Slide 57
Slide 57 text
FIRESTORE CONSOLE
Image by: https://console.
fi
rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
Slide 58
Slide 58 text
FIRESTORE CONSOLE
Slide 59
Slide 59 text
FIRESTORE CONSOLE
Slide 60
Slide 60 text
AT THE END
Slide 61
Slide 61 text
AT THE END
▸ There's nothing new today’s contents
▸ There is a lot of information on the internet
▸ We have to walk your own path beyond the introduction
▸ This is the same for academia and IT.