PolymerでFirebaseのリアルタイムデータベースとデータのやり取りをする

データベースを有効にする

Firebaseにアクセス こちら

Databaseをクリック

Realtime Databaseからデータベースを作成をクリック

• ロックモード
• テストモード

から、テストモードを選択して、有効にするをクリック

Polymerでデータ送信用のエレメントをつくる

コンポーネントのインストール

paper-input

paper-inputは こちら

DOWNLOADのコマンドをクリックしてコピー
ターミナルにペーストしてインストール

paper-button

paper-buttonは こちら

DOWNLOADのコマンドをクリックしてコピー
ターミナルにペーストしてインストール

テキスト入力欄と送信ボタンを作成

ダウンロードしたpaper-inputとpaper-buttonを
src/my-view1.htmlにインポート

<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">

<div class="card"></div>の中身を書き換える

<div class="card">
  <paper-input label="name" id="name"></paper-input>
  <paper-button raised on-click="submitName">submit</paper-button>
</div>

データのやり取りは２種類

データの書き込み

データベースのnameというパスに、inputのvalueを書き込むにはsetを使います。
setは同じ場所に既にデータが存在する場合は、上書きされます。

submitName() {
  const name = this.$.name.value
  window.firebase.database().ref(`name`).set(name)
}

データを追加する

データベースのnameというパスに、inputのvalueを追加したい場合はpushを使います。
pushによってデータが送信されると、自動的にkeyを付けて特定の場所にデータを追加してくれます。

submitName() {
  const name = this.$.name.value
  window.firebase.database().ref(`name`).push(name)
}