PWA導入を楽にするFirebase

Transcript

1. PWA導入を楽にする Firebase 株式会社ソニックガーデン 高谷大樹
2. 自己紹介 高谷大樹(たかやだいき) 埼玉在住 24歳 2018年新卒でソニックガーデンに入社 夢: 「 おじいさんになってもお酒とプログラミングは現役で いること」
3. 普段の活動 まかない食堂
4. Firebaseって? 1. サーバーレス => googleさんのサーバーと fastlyのCDN 2. クライアントだけでデータの永続化 3. 超簡単なデプロイ作業
5. 今までのweb
6. Firebase デプロイ! googleサーバ Fastly製
7. Firebaseはなにが 嬉しいのか？
8. 全部セットアップされてるぜ WEBサーバー, APPサーバーを入れなくても大 丈夫！ nginx, unicorn, MySQLなにそれ？ うまいの？から始められる。
9. 基本は無料 PWAを試すぐらいには十分! 外部APIを叩く, データのバックアップなどしな ければ、無料で利用できる。
10. セットアップ方法 1. まずは登録 2. CDNで読み込み 3. Firebase Toolsをnpmでインストール
14. <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase.js"></script> <script> const config = { apiKey: "<API_KEY>", authDomain: "<PROJECT_ID>.firebaseapp.com", databaseURL: "https://<DATABASE_NAME>.firebaseio.com", storageBucket: "<BUCKET>.appspot.com", messagingSenderId: "<SENDER_ID>", }; firebase.initializeApp(config); </script>
15. 辛いサーバーセットアップからの 解放
16. { "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } firebase.json
17. Vue CLIしてプロジェクトの雛形作成 https://qiita.com/567000/items/dde495d6a8ad1c2 5fa43 $ npm install -g vue-cli $ vue init webpack my-project
18. 1. npm install -g firebase-tools 2. $ cd ~/my-project(作業dir) 3. $ firebase init 4. $ firebase deploy
19. どうやってデータ保存? Cloud Fire Store Real Time Database
20. データの追加方法 var admin = require("firebase-admin"); var db = admin.database(); var usersRef = db.ref.child("users"); usersRef.set({ { name: “高谷”, age: 24, email: “takaya@sonicgarden.jp” });
21. データのCRUD 1. set(データ作成, すでにデータがあると上 書き) 2. update(そのまま) 3. add(JSONツリーにデータを追加) 4. transaction(そのまま)
22. どれもkey value形式
23. 正規化は捨てよう！(1) データはフラットに！ 深いネストは悪
24. 正規化は捨てよう！(2) { "chats": { "room01": { "title": "チャットルーム01", "messages": { "message01": { "sender": "Fumihiko Shiroyama", "message": "こんにちは。誰かいますか？ " }, "message02": { ... }, "message03": { ... } } }, "room02": { ... } } }
25. 正規化は捨てよう！(3) { "users": { "shiroyama": { "name": "Fumihiko Shiroyama" }, }, "rooms": { "room01": {} }, "room02": { ... } }, "messages": { "room01": { "message01": { "sender": "shiroyama", "message": "こんにちは。誰かいますか？" }, } }
26. まとめ 1. サーバー管理からの解放 2. CDNで簡単な導入 3. 無料
27. ご静聴ありがとうございました。