Monaca에서 Milkcocoa로 데이터 보내기

2292 단어 milkcocoamonaca
Milkcocoa 을 만져 보려고 했는데, 딱 좋은 튜토리얼 가 있었으므로, Monaca 를 사용해 시험해 보았다.

Milkcocoa 준비



※자세한 것은 튜토리얼을 참조
1. 계정 만들기
2. 앱 만들기

Monaca에서 프로그래밍


  • 프로젝트 만들기 ( "최소한 템플릿"사용)
  • index.html의 body 태그 부분을 다음 내용으로 다시 작성

    index.html
    <body>
    <div id="output"></div>
    <script src='https://cdn.mlkcca.com/v2.0.0/milkcocoa.js'></script>
    <script src="main-sp.js"></script>
    </body>
    

  • index.html과 같은 계층에 main-sp.js 파일을 작성해, 이하의 내용을 기술한다

    main-sp.js
    window.onload = function(){
    
      var currentMode = 'portrait';
      var output = document.getElementById('output');
    
      // app_idは自分のものに書き換えてください
      var milkcocoa = new MilkCocoa("app_id.mlkcca.com");
      var ds = milkcocoa.dataStore('gravity');
    
      window.addEventListener('devicemotion', function(e){
        gravity = e.accelerationIncludingGravity;
    
        output.innerHTML
        = 'x方向: '+gravity.x
        + '<br>y方向: '+gravity.y;
    
        sendModeFromGravityValue(gravity);
    
      },true);
    
    
      function sendModeFromGravityValue(g){
    
        // 絶対値を取得
        var x = Math.sqrt(g.x * g.x);
        var y = Math.sqrt(g.y * g.y);
    
        // portrait -> landscape
        if(currentMode === 'portrait' && x > 8.5 && y < 1.5){
          currentMode = 'landscape';
          ds.push({mode: currentMode});
        }
    
        // landscape -> portrait
        if(currentMode === 'landscape' && x < 1.5 && y > 8.5){
          currentMode = 'portrait';
          ds.push({mode: currentMode});
        }
      }
    };
    

    ※공식 사이트의 튜토리얼은 ds.send(데이터를 보존하지 않는다)로 하고 있었지만 push로 변경

    저장된 데이터 확인



    스마트 폰의 방향을 바꾼 타이밍에서 Milkcocoa에 데이터가 전송됩니다.
    저장된 데이터는 대시보드에서 확인할 수 있다.

  • 좋은 웹페이지 즐겨찾기