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