5 minute tutorial

1. Let's make to chat

Let's take a look at the tutorial to make the easiest, the chat app in the app using milkcocoa! I'll explain in the video. First, let's make a skelton of the chat.

Create a file with copying and paste the following code, and let's check with your browser!Don't you have editor?jsfiddle is recommended.

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>simple chat!</title>
  <script src="http://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
  <script src="main.js"></script>
</head>
<body>
  <textarea name="" id="msg" cols="30" rows="4"></textarea>
  <button name="button" onClick="clickEvent()">send message!</button>
  <ul id="board"></ul>
</body>
</html>
var milkcocoa = new MilkCocoa('{ your-app-id }.mlkcca.com');
/* your-app-id にアプリ作成時に発行されるapp-idを記入します */
var chatDataStore = milkcocoa.dataStore('chat');
var textArea, board;
window.onload = function(){
  textArea = document.getElementById("msg");
  board = document.getElementById("board");
}

function clickEvent(){
  var text = textArea.value;
  sendText(text);
}

function sendText(text){
  chatDataStore.push({message : text});
  console.log("送信完了!");
  textArea.value = "";
}

chatDataStore.on("push",function(data){
  addText(data.value.message);
});

function addText(text){
  var msgDom = document.createElement("li");
  msgDom.innerHTML = text;
  board.insertBefore(msgDom, board.firstChild);
}
Copy a script at the manage view, and overwrite the one line that begins the "var milkcocoa".
var milkcocoa = new MilkCocoa("dummydummy.mlkcca.com");

That's all.