ミルクココア？いいえmilkcocoaです

JavaScript
皆さん、こんにちはー！
井古田ですー。 

　本日はmilkcocoaについて簡単に紹介させていただきます。
「え、ミルクココア？」っていう人もいるかも知れませんが・・・milkcocoaです。
少し前に、日本発のBaaS(Backend as a Service)”Milkcocoa”と書いてある記事を見つけ興味を持ちました。
それが、ボクとMilkcocoaの出会いですヽ(*´∀｀)八(´∀｀*)ノ

　まえフリはこのくらいにして、実際にmilkcocoaを使ってみたので紹介していきます。
　milkcocoaは、フロントエンドのコーディングだけで、データの保存や更新、また変更を監視しリアルタイムでの反映を可能にしてくれます(￣ー￣)ﾆﾔﾘ

(´･д･｀)ハッ?
実際に動かしてみた方が分かりやすいので、頑張って最後まで読んでみてください

次に開発の流れを説明してきます。
  •  アカウントの作成
　まずは https://mlkcca.com/ で新規登録を行ってください。今のところフリープランしかないようですね～(いろいろと制限があります。。今後に期待！)
そしてダッシュボードからアプリの作成をします。
管理画面


　↑　こんな感じの画面がでてくると思います。
  • 開発準備
　次に書いてある通りに、scriptタグ設置し、「Javascriptを始めよう！」と書いてある場所のコードをコピーすれば準備完了です。
　たったこれだけで、バッグエンドの環境が出来ちゃうなんてビックリです！！！
　動作確認するときは、localhostでapacheやnginxなどのサーバーを立てて動かすか、なにかホスティングサービスを利用して確認してください。
  • 開発
　正直、チュートリアルやドキュメントが充実しており、またサンプルコードまでgithubで公開しているので、使い方に悩むことはあまりないと思います。

　今回は初歩の初歩なので、チュートリアルやドキュメントを見て出来る方はどんどん進めてみてください。 

　さて、それではコードを書いていきましょう！まずは以下のような簡単な入力画面を作成します。

　入力画面


　コードはこんな感じです↓

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="main.js"></script>
  <title>milkcocoaの練習</title>
</head>

<body>
 title: <input type="text" name="title" id="title" />
 <input type="button" name="submit" value="submit" id="submit" />
</body>

</html>
 main.js
$(document).ready(function() {
  var milkcocoa, ds, title;
  //1.milkcocoaインスタンスを作成
  milkcocoa = new MilkCocoa("https://io-{your appID}.mlkcca.com");

  //2."article"データストアを作成
  ds = milkcocoa.DataStore("article");

  $('#submit').on('click', function() {
    title = $('#title').val();

    //3."article"データストアにメッセージをプッシュする
    ds.push({ title: title, date: new Date() });
    $('#title').val("");
  })

}); 
　なんとたったこれだけの行でsubmitボタンを押すと、データストアに入力したデータが作られてしまうのですΣ(ﾟ∀ﾟﾉ)ﾉｷｬｰ
先ほどの管理画面から確認してみましょう！データストア


　すばらしいですねぇ～∩(´∀｀∩) 

　次は入力されたデータを取得し、表示させてみましょう。と思ったのですが、1つ1つ紹介していくと大変なので、データの更新を監視し、リアルタイムでデータを表示させるところまでやってみましょう
(￣ー+￣)ｷﾗｰﾝ

　完成はこんな感じ↓
完成画面
　リアルタイム感がだせなくてスイマセン(ＴＯＴ）

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="main.js"></script>
  <title>milkcocoaの練習</title>
</head>

<body>
 title: <input type="text" name="title" id="title" />
 <input type="button" name="submit" value="submit" id="submit" />

 <hr>
  <h3>タイトル一覧</h3>
  <div id="titles" class="content">
    <div id="dummy"></div>
  </div>
</body>

</html>
main.js
$(document).ready(function() {
  var milkcocoa, ds, title;
  //1.milkcocoaインスタンスを作成
  milkcocoa = new MilkCocoa("https://io-{your appID}.mlkcca.com");

  //2."article"データストアを作成
  ds = milkcocoa.DataStore("article");

  $('#submit').on('click', function() {
    title = $('#title').val();

    //3."article"データストアにメッセージをプッシュする
    ds.push({ title: title, date: new Date() });
    $('#title').val("");
  })

  //4."article"データストアのプッシュイベントを監視
  ds.on("push", function(e) {
    renderTitle(e.value);
  });

  //5."article"データストアからメッセージを取ってくる
  ds.query({}).done(function(e) {
    var i, len;
    for( i=0, len=e.length; i < len; i++ ) {
      renderTitle(e[i]);
    }
  });

});

function renderTitle(title) {
  $("#dummy").before('<div id="'+title.id+'">' + title.title + '</div>');
}
　みなさん出来ましたか？？　無事に出来ていることを祈ってます(-人-)
　
　以上で簡単なmilkcocoaの紹介を終わらせていただこうかなと思います。まだまだ紹介していない機能もあるので、ぜひみなさんも試してみてください！ボクも頑張ります(๑•́ ₃ •̀๑)
また会いましょう┏o ｱｻﾞｰｰｰｽ!