Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

301 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Vue.jsからFirebaseに 入門しようとしたら 使い方間違ってた件
  2. 2. 自己紹介 RustとElmに憧れてる自称うぇっぶけいふるすたっくえんじにあ javascriptとシェル芸が好き 仕事はIBM Cloudのつかってふるすたっくに頑張るひと Spring BootとVue.js使ってAI系の案件をフワッとやってます。 最近Elmの勉強を始めました。 taka@SIではたらくフレンズ @amanoese
  3. 3. Firebaseとは? mBass? 2年前に自分が知っていたのは良い感じのデータベースがあるだけ。 ホスティングサービスとかFunctionサービス?とかあるらしいですが後の方がきっと話してくれる……は ず。
  4. 4. Firebaseに入門したいし 相性良さそうな データベース使ってみる
  5. 5. Cloud Firestoreと RealTime Database の2つがあるらしい。
  6. 6. 最新だし Cloud Firestore をつかう
  7. 7. とりあえず ゲーム作ってみる
  8. 8. いったんFirebaseを使わずに作る https://keen-jang-03e94b.netlify.com/
  9. 9. これを対戦形式に
  10. 10. Vuexfireが良いらしい?
  11. 11. これだけで動く 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) }) } } }
  12. 12. ユーザーを認識するた めにログインが必要
  13. 13. Firebase Authenticationで簡単にできるらしい
  14. 14. 良い感じのCSSと組み合わせる https://lipis.github.io/bootstrap-social/
  15. 15. 簡単に実装できた <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) } }
  16. 16. あとはPongのデータ をFirebaseにつなぐだ け
  17. 17. できた https://flamboyant-dubinsky-fc9a3e.netlify.com/ (動かないかも?ローカルだと動きます。。。)
  18. 18. ……動いていない?
  19. 19. read上限に引っかかる
  20. 20. リアルタイムにデータ が同期されると言って も、 そこまでリアルタイム は無理
  21. 21. 感想 ・ 通信速度とかもあるし、アクションゲーム?系は流石に無理 ・ 将棋や囲碁などのボードゲームを作るべきだった。 ・ Firebaseの権限周りでハマってしまった。 ・ Vue CLI 3 が、カッコイイ Pluginが凄い便利 ・ 次は、Nuxt.jsを使いたい
  22. 22. ソースコードとか https://github.com/amanoese/vue-pong

×