Vue.jsからFirebaseに 入門しようとしたら 使い方間違ってた件

1. Vue.jsからFirebaseに
入門しようとしたら
使い方間違ってた件

2. 自己紹介
RustとElmに憧れてる自称うぇっぶけいふるすたっくえんじにあ
javascriptとシェル芸が好き
仕事はIBM Cloudのつかってふるすたっくに頑張るひと
Spring BootとVue.js使ってAI系の案件をフワッとやってます。
最近Elmの勉強を始めました。
taka@SIではたらくフレンズ
@amanoese

3. Firebaseとは？
ｍBass?
２年前に自分が知っていたのは良い感じのデータベースがあるだけ。
ホスティングサービスとかFunctionサービス？とかあるらしいですが後の方がきっと話してくれる……は
ず。

4. Firebaseに入門したいし
相性良さそうな
データベース使ってみる

6. Cloud Firestoreと
RealTime Database
の２つがあるらしい。

7. 最新だし
Cloud Firestore
をつかう

8. とりあえず
ゲーム作ってみる

9. いったんFirebaseを使わずに作る
https://keen-jang-03e94b.netlify.com/

10. これを対戦形式に

11. Vuexfireが良いらしい？

12. これだけで動く
import { db } from '@/plugins/vuefire.js'
import { firebaseMutations,firebaseAction } from 'vuexfire'
export default {
state: {
todos: [],
},
mutations: {
...firebaseMutations,
},
actions: {
addTodo({commit},todo){
db.collection('todos').add(todo)
}
init({dispatch}){
dispatch('setTodosRef', db.collection('todos'))
},
setTodosRef : firebaseAction(({ bindFirebaseRef }, { ref }) => {
bindFirebaseRef('todos', ref)
})
}
}
}

13. ユーザーを認識するた
めにログインが必要

14. Firebase Authenticationで簡単にできるらしい

15. 良い感じのCSSと組み合わせる
https://lipis.github.io/bootstrap-social/

16. 簡単に実装できた
<b-button class="btn-social btn-github" @click="loginGithub">
<font-awesome-icon :icon="['fab','github']" class="m-1"/>
Sign in with Github
</b-button>
methods : {
loginGithub(){
const provider = new firebase.auth.GithubAuthProvider()
firebase.auth().signInWithPopup(provider)
}
}

17. あとはPongのデータ
をFirebaseにつなぐだ
け

18. できた
https://flamboyant-dubinsky-fc9a3e.netlify.com/
（動かないかも？ローカルだと動きます。。。）

19. ……動いていない？

20. read上限に引っかかる

22. リアルタイムにデータ
が同期されると言って
も、
そこまでリアルタイム
は無理

23. 感想
・ 通信速度とかもあるし、アクションゲーム？系は流石に無理
・ 将棋や囲碁などのボードゲームを作るべきだった。
・ Firebaseの権限周りでハマってしまった。
・ Vue CLI 3 が、カッコイイ Pluginが凄い便利
・ 次は、Nuxt.jsを使いたい

24. ソースコードとか
https://github.com/amanoese/vue-pong