Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
PWA導入を楽にするFirebase
Daiki Takaya
April 17, 2018
Programming
0
1.5k
PWA導入を楽にするFirebase
Daiki Takaya
April 17, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
OSS貢献を気軽にしたい Let's Go Talk #1
yuyaabo
2
230
クックパッドマートの失敗したデータ設計 Before / After 大放出
mokuzon
20
25k
レビュー駆動学習のススメ_StaPy#83
soogie
0
300
SwiftUI+TCAに挑戦!NewsPicks iOSアプリのリアーキテクチャ/re-architecture-newspicks-ios-app-with-swiftui-and-tca
takehilo
0
370
Rector, time to refactor your code easily
guikingone
2
140
Better Angular Architectures: Architectures with Standalone Components @DWX2022
manfredsteyer
PRO
1
360
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
140
Efficient UI testing in Android
alexzhukovich
1
120
2022年のモダンCSS改
tonkotsuboy_com
24
16k
Scaling Productivity- How we have improved our dev experience
sockeqwe
1
120
Licences open source : entre guerre de clochers et radicalité
pylapp
2
550
夕食断食にTRY!/for-lt-12th
pachikuriii
0
230
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
Facilitating Awesome Meetings
lara
29
4.1k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Become a Pro
speakerdeck
PRO
3
900
Practical Orchestrator
shlominoach
178
8.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
In The Pink: A Labor of Love
frogandcode
131
21k
Infographics Made Easy
chrislema
233
17k
Transcript
PWA導入を楽にする Firebase 株式会社ソニックガーデン 高谷大樹
自己紹介 高谷大樹(たかやだいき) 埼玉在住 24歳 2018年新卒でソニックガーデンに入社 夢: 「 おじいさんになってもお酒とプログラミングは現役で いること」
普段の活動 まかない食堂
Firebaseって? 1. サーバーレス => googleさんのサーバーと fastlyのCDN 2. クライアントだけでデータの永続化 3. 超簡単なデプロイ作業
今までのweb
Firebase デプロイ! googleサーバ Fastly製
Firebaseはなにが 嬉しいのか?
全部セットアップされてるぜ WEBサーバー, APPサーバーを入れなくても大 丈夫! nginx, unicorn, MySQLなにそれ? うまいの?から始められる。
基本は無料 PWAを試すぐらいには十分! 外部APIを叩く, データのバックアップなどしな ければ、無料で利用できる。
セットアップ方法 1. まずは登録 2. CDNで読み込み 3. Firebase Toolsをnpmでインストール
None
None
None
<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>
辛いサーバーセットアップからの 解放
{ "hosting": { "public": "dist", "rewrites": [ { "source": "**",
"destination": "/index.html" } ] } } firebase.json
Vue CLIしてプロジェクトの雛形作成 https://qiita.com/567000/items/dde495d6a8ad1c2 5fa43 $ npm install -g vue-cli $
vue init webpack my-project
1. npm install -g firebase-tools 2. $ cd ~/my-project(作業dir) 3.
$ firebase init 4. $ firebase deploy
どうやってデータ保存? Cloud Fire Store Real Time Database
データの追加方法 var admin = require("firebase-admin"); var db = admin.database(); var
usersRef = db.ref.child("users"); usersRef.set({ { name: “高谷”, age: 24, email: “takaya@sonicgarden.jp” });
データのCRUD 1. set(データ作成, すでにデータがあると上 書き) 2. update(そのまま) 3. add(JSONツリーにデータを追加) 4.
transaction(そのまま)
どれもkey value形式
正規化は捨てよう!(1) データはフラットに! 深いネストは悪
正規化は捨てよう!(2) { "chats": { "room01": { "title": "チャットルーム01", "messages": {
"message01": { "sender": "Fumihiko Shiroyama", "message": "こんにちは。誰かいますか? " }, "message02": { ... }, "message03": { ... } } }, "room02": { ... } } }
正規化は捨てよう!(3) { "users": { "shiroyama": { "name": "Fumihiko Shiroyama" },
}, "rooms": { "room01": {} }, "room02": { ... } }, "messages": { "room01": { "message01": { "sender": "shiroyama", "message": "こんにちは。誰かいますか?" }, } }
まとめ 1. サーバー管理からの解放 2. CDNで簡単な導入 3. 無料
ご静聴ありがとうございました。