0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

Firebaseにアクセス こちら

Databaseをクリック

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

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

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

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

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

###paper-input

paper-inputは こちら

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

###paper-button

paper-buttonは こちら

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

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

ダウンロードしたpaper-inputpaper-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>

#データのやり取りは2種類

##データの書き込み

データベースの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)
}
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?