【JavaScript実践】単語帳作成 2

前回の続き。

kosumemo.hatenablog.com

外部データベースとしてmilkcocoaを使う。

mlkcca.com

  1. データベース作成
  2. データ送信用関数を作成
  3. データ取得用関数の編集
  4. 優先度変更用関数の編集

データベース作成

milkcocoaにデータベースとなるアプリを作成する。作り方は以下の記事を参考にする。

kosumemo.hatenablog.com

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Flash Cards</title>
</head>
<body>

  <script src="//cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

milkcocoaのライブラリを読み込む。

scripts/script.js

(function() {
  var milkcocoa = new MilkCocoa("eggis6459xn.mlkcca.com");
  var ds = milkcocoa.dataStore("flashcards");

  getWordsData(function(wordsData) {
    wordsData = sortWordsData(wordsData);

    wordsData.forEach(function(wordData) {
      showWordData(wordData);
    });
  });

  function showWordData(wordData) {
    // 略
  }

  function updateWordWeight(wordData, diff) {
    // 略
  }

  function sortWordsData(wordsData) {
    // 略
  }

  function getWordsData(callback) {
    // 略
  }
}());

Milkcocoaオブジェクトを初期化し、データストアを変数に格納しておく。

データ送信用関数を作成

scripts/script.js

(function() {
  var milkcocoa = new MilkCocoa("eggis6459xn.mlkcca.com");
  var ds = milkcocoa.dataStore("flashcards");

  getWordsData(function(wordsData) {
    wordsData = sortWordsData(wordsData);

    wordsData.forEach(function(wordData) {
      showWordData(wordData);
    });
  });

  function showWordData(wordData) {
    // 略
  }

  function updateWordWeight(wordData, diff) {
    // 略
  }

  function sortWordsData(wordsData) {
    // 略
  }

  function getWordsData(callback) {
    // 略
  }

  function sendWordData(wordData) {
    ds.push(wordData);
  }
}());

作成した関数を使ってseed.jsonのデータをmilkcocoaに送っておく。

データ取得用関数の編集

scripts/script.js

(function() {
  var milkcocoa = new MilkCocoa("eggis6459xn.mlkcca.com");
  var ds = milkcocoa.dataStore("flashcards");

  getWordsData(function(wordsData) {
    wordsData = sortWordsData(wordsData);

    wordsData.forEach(function(wordData) {
      showWordData(wordData);
    });
  });

  function showWordData(wordData) {
    // 略
  }

  function updateWordWeight(wordData, diff) {
    // 略
  }

  function sortWordsData(wordsData) {
    // 略
  }

  function getWordsData(callback) {
    ds.stream().next(function(err, data) {
      data = data.map(function(datum) {
        return {
          "id": datum.id,
          "en": datum.value.en,
          "ja": datum.value.ja,
          "example": datum.value.example,
          "weight": datum.value.weight,
        };
      });

      callback(data);
    });
  }

  function sendWordData(wordData) {
    // 略
  }
}());

f:id:kosumoro:20160822233139j:plain

データベースから取得したデータを整形してコールバック関数に渡す。

id はデータ更新の時に使用するので返すデータに含めておく。

優先度変更用関数の編集

scripts/script.js

(function() {
  var milkcocoa = new MilkCocoa("eggis6459xn.mlkcca.com");
  var ds = milkcocoa.dataStore("flashcards");

  getWordsData(function(wordsData) {
    wordsData = sortWordsData(wordsData);

    wordsData.forEach(function(wordData) {
      showWordData(wordData);
    });
  });

  function showWordData(wordData) {
    // 略
  }

  function updateWordWeight(wordData, diff) {
    wordData.weight = wordData.weight + diff;

    ds.set(wordData.id, {
      "weight": wordData.weight
    });

    return wordData;
  }

  function sortWordsData(wordsData) {
    // 略
  }

  function getWordsData(callback) {
    // 略
  }

  function sendWordData(wordData) {
    // 略
  }
}());

milkcocoaはデータのやりとりが楽でとても助かる。

次回以降フロント部分とログイン機能を実装したい。