#データベースを有効にする
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>
#データのやり取りは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)
}