firebaseを使って簡単にサイト作成！半年でそれっぽい クイズアプリを作成する！

https://pwanight.connpass.com/event/194223/

で発表した資料です。

Transcript

1. 2020/11/18 PWA Night vol.22 firebaseで簡単にサイトを作りましょう！ 半年でそれっぽい クイズアプリを作成する
2. サービスの紹介 ◦クイズを作ったり、解いたりできる ◦何かを「学びたい」時に使ってもらう ▪繰り返し解いて学べる ▪問題を作ることで学びになる ここからアクセスできます 🙂
3. 今日話すこと 機能紹介 • クイズ解答機能 • クイズ作成機能 • マイページ • メディア システムの裏側 • こんな技術を使いました • 工夫した箇所 ＼こんなことを話します！／
4. MDNでは 安全なコンテキスト (HTTPS)、1つ以上のサービスワー カー、マニフェストファイルを持つ※1 みんなのスタディはサービスワーカーは使ってません。 (オフライン利用等できないのでご認識お願いします) ※1 https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps 前置き PWAの定義(諸説あります）
5. 01 機能紹介
6. 機能紹介① クイズを解く
7. 機能紹介② クイズを作る マイページ
8. 機能紹介③ メディア
9. 02 システムの裏側 Behind the system
10. サイト構成 route53 firestore firebase Auth firebase hosting cloud function react
11. サイト構成 route53 firestore firebase Auth firebase hosting cloud function react
12. OGP対応 OGPの例 Botによっては、jsを正しく解釈できない可能性があるので、 予めビルドしたものを解釈させる必要がある。
13. OGP対応 "hosting": { "public": "build", "rewrites": [ { "source": "/answer/**", "function": "returnHtmlWithOGP" }, ~~~~~~ ], ~~~~~~~ } firebase.jsonに特定のリクエストのときだけ、 別途定義したfunctionを使うように指定するだけ！
14. サイト構成 route53 firestore firebase Auth firebase hosting cloud function react
15. 持っているデータ クイズデータ ユーザデータ
16. クイズデータについて クイズデータ quiz: { categories: { label: “ビジネス” value: “business” } userId: 1 creater: “なべ” title: “マーケ用語検定” description: “〜〜〜” content: { 0: { question: “CTAはなんの略” explanation: “マーケ用語で~~” answer: “Call to Action” false1: “~~~” false2: “~~~” } 1: {~~} } limited: false createdAt: xxxx/xx/xx updatedAt: xxxx/xx/xx }
17. なぜこんなデータ構成？ 1書き込み、読み込みあたりに料金がかかるため
18. キャッシュもできます cloud function firebase hosting 予めfirestoreから データ取得 キャッシュした データから読み込み
19. 使ってみてよかったこと • 環境構築がかなり楽、スピードは早い。 • 関連機能がかなりあるので、簡単なアプリ作成はかなり 楽
20. 使ってみてつらかったこと • 従量課金のため、いつ課金されるかが怖い ◦ Alertの設定はマスト 無料プランもあるが、cloud functionsが使えない。 • インフラ側の細かいチューニングがやりづらい
21. Thanks ありがとうございました！