読者です 読者をやめる 読者になる 読者になる

【JavaScript実践】 外部データベースの利用(milkcocoa) 2

milkcocoaへの書き込み、milkcocoaからの読み込みを試す。簡易掲示板のようなものを作成する。

  1. フロントの作成
    • 入力エリア
    • 送信ボタン
    • 出力エリア
  2. データの書き込み
  3. データの読み込み

デモページ

リポジトリ

フロントの作成

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Practice Javascript</title>
</head>
<body>
  <p>
    <input id="input" type="text">
    
    <button id="send">Send</button>
  </p>
  
  <ul id="output"></ul>
  
  <script src="//cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

inputbuttonul 要素を設置した。

f:id:kosumoro:20160820124618j:plain

スクリプト内でそれぞれの要素を変数に格納しておく。

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");

  // 要素の取得
  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");
}

データの書き込み

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");
  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");
  
  sendButton.addEventListener("click", sendInputData);
  
  function sendInputData() {
    // データストアオブジェクトの生成
    let ds = milkcocoa.dataStore("messages");
    
    // データの書き込み
    ds.push({
      "datetime": (new Date()).toLocaleString(),
      "message": inputArea.value
    });
  }
}

milkcocoaとデータのやり取りをする場合は、Milkcocoaオブジェクトからさらにデータストアオブジェクトを生成する必要がある。

データストアオブジェクトは dataStore メソッドを使用して生成する。引数にはデータストア名を渡す。

データの書き込みには push メソッドを使用する。引数に渡したデータをmilkcocoaに保存することができる。

保存したデータはmilkcocoaダッシュボードの「DataStore」から確認できる。

f:id:kosumoro:20160820142231j:plain

データの読み込み

{
  let milkcocoa = new MilkCocoa("dogis2md77d.mlkcca.com");
  let inputArea = document.getElementById("input");
  let sendButton = document.getElementById("send");
  let outputList = document.getElementById("output");
  
  window.addEventListener("DOMContentLoaded", getData);
  sendButton.addEventListener("click", sendInputData);
  
  function sendInputData() {
    // 略
  }
  
  function getData() {
    // データストアオブジェクトの生成
    let ds = milkcocoa.dataStore("messages");
    
    // データの取得、取得したデータの使用
    ds.stream().next((err, data) => {
      // データは配列になっているのでforEachでループさせる
      data.forEach(datum => {
        let outputItem = createOutputItem(datum.value.datetime, datum.value.message);
        
        outputList.appendChild(outputItem);
      });
    });
  }
  
  function createOutputItem(date, message) {
    // 略
  }
}

milkcocoaからのデータの取得には stream メソッドを使用し、取得したデータを使用するためには next メソッドを使用する。

以下の形式でデータが取得できる。

[
  {
    "id": "is2qf7i6PybZtrs",
    "timestamp": 1471670171071,
    "value": {
      "datetime": "2016/8/20 14:15:51",
      "message": "Hello!"
    }
  }
]

先ほど書き込んだデータは配列内オブジェクトの value プロパティとして保存されている。

idtimestamp は自動で追加されるようである。

f:id:kosumoro:20160820144227j:plain