Firebaseを用いたリアルタイムチャットの公開

Question

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

<template>
<div>
  <p>UID: {{uid || 'None'}}</p>
  <div v-if="user">
    <input v-model.trim="newTodoText" @keyup.enter="addTodo" placeholder="Add new todo">
    <ul>
      <li v-for="todo in todos">
        <div v-if="todo.owner === user.uid">
          <input :value="todo.text" @input="updateTodoText(todo, $event.target.value)">
          <button @click="removeTodo(todo)">X</button>
        </div>
        <div v-else>
          {{todo.text}}
        </div>
      </li>
    </ul>
  </div>
  <div v-else></div>
</div>
</template>

<script>
import firebase from './firebase'
const auth = firebase.auth()
const db = firebase.database()
const todosRef = db.ref('todos')
export default {
  data() {
    return {
      user: null,
      newTodoText: '',
    }
  },
  computed: {
    uid() {
      if (!this.user) {
        return null
      }
      return this.user.uid
    }
  },
  firebase: {
    todos: todosRef
  },
  mounted() {
    auth.onAuthStateChanged(user => {
      if (!user) {
        auth.signInAnonymously().catch(err => console.error(err))
      }
      this.user = user
    })
  },
  methods: {
    addTodo() {
      if (!this.newTodoText || !this.user) {
        return
      }
      todosRef.push({
        text: this.newTodoText,
        owner: this.user.uid,
      }).then(_ => {
        this.newTodoText = ''
      })
    },
    updateTodoText(todo, newText) {
      todosRef.child(todo['.key']).child('text').set(newText)
    },
    removeTodo(todo) {
      todosRef.child(todo['.key']).remove()
    }
  }
}
</script>

＜やりたいこと＞
Firebaseを用いたリアルタイムチャットの公開をしたいです。
上記のソースコードは他で拾ったものなのですがこのソースを用いて試しに自分で実際に公開してみたく、今回質問に至りました。

＜わからないこと＞
・Firebaseで上記のソースを公開する方法
・どこにこのソースを入力すればよいのか

かなり初歩的な質問ですみません。宜しくお願い致します。

Answer 1

ご希望のリアルタイムチャットは、どのような形でリリースされる予定でしょうか。
firebaseと言っても、細かく言うと実装の仕方が異なります。

ここを入り口にするのが分かりやすいかと思います。

https://firebase.google.com/docs

この類で一般的なのは、「ＷＥＢで使ってみる」でしょうかね。
そこを踏み台にまた質問するとよいのではないでしょうか。

Comments

[koyaGX]

回答ありがとうございます。webで公開するのがとりあえずの目標です。
webで使ってみる、を選択し、プロジェクト作成、あとホスティング、デプロイの方法はわかります。
しかしこのソースコードをどこに入力すればよいのかがわかりません。
わかりにくくてすみません。

[rinren]

ホスティングを利用するのであれば、ホスティングのチュートリアルを進めると、アップロード対象となるフォルダが理解できます。イニシャライズをすると、該当フォルダにindex.htmlが生成されるので、そこがまず最初の公開対象となります。そこをゴリゴリ改造すれば良いと思いますよ。