Save 37% off PRO during our Black Friday Sale! »

PWA導入を楽にするFirebase

 PWA導入を楽にするFirebase

5624d3a92cd7acc7ec5fe9e0c1020806?s=128

Daiki Takaya

April 17, 2018
Tweet

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でインストール

  11. None
  12. None
  13. None
  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. ご静聴ありがとうございました。