![Google Firebaseに入門してみた[1]](/images/firebase.png)
Google Firebaseに入門してみた[1]
前回の記事はこちら: Google Firebaseに入門してみた[0] – すきなものをすきといえるせかいにしたい
実際にFirebaseのデータベースにつないで、読み書きをしてみます。
App側はVue.jsを使うことにしました。Nuxt.jsを考えましたが、薄く軽く作る予定なので、シンプルにVue.jsで作ってみることにしました。
というわけで、インストール。
$ npm i vue-cli
インストールできたら、さっそくinitします。とりあえずデフォルトで良いのでEnterでサクサクすすめます。
$ npx vue init webpack
? Generate project in current directory? Yes
? Project name carbdb
? Project description A Vue.js project
? Author t4traw
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "carbdb".
# Installing project dependencies ...
# ========================
と思ったら、このコマンドでREADME.mdとかpackage.jsonが上書きされていましたorz これは最初にvueもinitしておくべきだったか……。
必要に応じて内容を戻し、とりあえずbuildしてみます。
$ npm run build
そしたら、distディレクトリが作られ、そこにビルドしたモノが入っています。
公開時はこのディレクトリの中を見てほしいので、firebaseのpublicディレクトリをdistに設定します。
~~~省略~~~
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
~~~省略~~~
この状態でdeployしてみます。
$ npm run deploy
デプロイ先のページがこんな感じになっていたら成功です。
Firebaseにつないでみる
Firebaseのコンソールからアプリケーションを追加します。
設定からプロジェクトの設定をクリックし、
今回はWEB Appなのでブラケットのアイコンをクリックします。
適当なニックネームをつけ、Hostingの設定もしておきます。
Firebase SDKの追加が表示されますが、とりあえず『コンソールに進む』をクリックして先に進んでください。
そしたらfirebaseとつなぐためのライブラリをインストールします。
$ npm i firebase
src/main.jsにさきほど作成したappの情報を追加します。
firebaseConfigの値については
ここをまるっとコピーすれば大丈夫なはずです。
import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'
Vue.config.productionTip = false
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "carbdbapp.firebaseapp.com",
databaseURL: "https://carbdbapp.firebaseio.com",
projectId: "carbdbapp",
storageBucket: "carbdbapp.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
firebase.initializeApp(firebaseConfig)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
データベースの読み書きをしてみる
次に、データベースの読み書きをしてみたいと思います。
シンプルなKVSのRealtime Databseを利用します。Cloud Firestoreは別の方法になっているようです。
Realtime Databseを選択し、ruleを変更します。
{
"rules": {
".read": true,
".write": true
}
}
というわけで、文字を書き込み、リアルタイムで表示させてみます。
<template>
<div>
<input type="text" v-model="tweetText">
<button type="submit" v-on:click="submitText()">送信</button>
<ul>
<li v-for="tweet in showTweets" v-bind:key="tweet.key">
{{ tweet.body }}
</li>
</ul>
<router-view/>
</div>
</template>
<script>
import firebase from 'firebase'
export default {
name: 'App',
data () {
return {
database: null,
tweetRef: null,
tweetText: '',
tweets: []
}
},
created: function () {
this.database = firebase.database()
this.tweetRef = this.database.ref('tweets')
var _this = this
this.tweetRef.on('value', (snapshot) => {
_this.tweets = snapshot.val()
})
},
computed: {
showTweets: function () {
return this.tweets
}
},
methods: {
submitText: function () {
this.tweetRef.push({
body: this.tweetText
})
this.tweetText = ''
}
}
}
</script>
これで送信ボタンを押して見ると
無事データが送信されました。
ハマったり思ったことメモ
何も考えずアロー関数使ったら駄目だった
created: () =>{
}
みたいな感じで何も考えずアロー関数で書いていたのですが、動きませんでした。
参考: 【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita
書き換えて読んで成功してみて「あーなるほど」と思ったのですが、これは最初から「これアロー関数じゃ駄目かな?」と思えるようになりたい。
data returnをしっかり書かないといけない
data () {
return {
database: null,
tweetRef: null,
tweetText: '',
tweets: []
}
},
これを最初ちゃんと書かずにtweetTextだけにしていたらうまく動きませんでした。
Cloud Firestoreを使ってみたい
どうもRealtime Databaseより後発なのがCloud Firestoreらしく、どっちはドキュメント指向のNoSQLみたい。
いずれそっちの方も勉強してみたい。