### Welcome to
# Firebase Workshop
slide: https://hackmd.io/@wama/firebase
---
## 歡迎在 [slido](https://app.sli.do/event/2gDFZ2VStC7bfZwFUS9GnD) 上發問
---
## 今天要做什麼？
---
今天要做什麼？
# 一個純前端的網站！
只有 HTML & JavaScript 😮
<!-- 咦今天不是教 firebase 嗎 -->
---
範例：
## https://reurl.cc/NZklvp
https://web.cc.ncu.edu.tw/~109502544
<!-- 一邊看 doc 一邊實作 -->
<!-- 怎麼每個人看的東西是會互相牽動的？看起來就有後端啊 -->
<!-- 登登！firebase -->
---
 Firestore Database
&
Authentication 
---
## Who am I?
---
##  Wama
- 新生知訊網
- NCU App
- DSC NCU
- Open Source Community :D
- Tools: Laravel, Tailwind CSS
---
## Let's get started 🤩
# [fork & clone me!!](https://github.com/april1026/firebaseIntroguctionDemo)
---
# [進入 firebase 的世界](https://firebase.google.com/)
可參考[我以前寫的一篇小文章](https://medium.com/@wama.tw/%E7%AD%86%E8%A8%98-%E6%A0%A1%E5%9C%92-app-%E9%96%8B%E7%99%BC-firebase-25b76303bf77)，但 firebase 有更新所以不要全部照做
---
## 打開 firestore
## 連到自己的 firebase 專案
---
# [firebase document](https://firebase.google.com/docs/web/setup)
---
# Authentication
---
# Sign in
---
## Sign in
# 開啟登入方法
---
## Sign in
---
## Sign in
# Authentication State Persistence
---
# Sign out
---
開始操作之前...
# firestore 結構
---
firestore 結構
collection > document > data
---
# 新增
---
# 讀取資料
---
# 讀取資料 > 排序
---
## getDocs > order
---
# 讀取資料 > 條件
---
## getDocs > limit
---
# 刪除
---
# 讀取規則
---
---
## 解釋一下前端的東西？
---
### Get in touch with me
Search "Wama" on
- [GitHub](https://github.com/april1026)
- [Medium](https://medium.com/@wama.tw)
or
- Twitter: @wama.tw
- Telegram ID: @wama_tw
{"metaMigratedAt":"2023-06-16T16:21:30.493Z","metaMigratedFrom":"YAML","title":"Firebase workshop","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"68fba451-d0de-48c4-9c92-a6987d434d83\",\"add\":4749,\"del\":2649}]"}