ニフティクラウドmobile backendを試してみる（７）早起きアプリpart2

2016年11月24日

前回は、monacaで早起きアプリの途中まで行った。

http://twosquirrel.mints.ne.jp/?p=11569

引き続き、以下の動画にしたがってやっていきたい。

（環境）
Cordova (PhoneGap) Loader Ver=1.0.0
Monaca Core Utility Ver=2.0.4
jQuery (Monaca Version) Ver=2.0.3
ncmb Ver=2.1.3

しかし、ここで要注意。

（参考）

ニフティクラウドmobile backend のJavaScript SDKでハマった話【早起きアプリ】
tsumi 2016年07月12日に更新
http://qiita.com/tsumi/items/4d1f9da56b3550e3be13

→このページ、本当に大事！！！

（８）JavaScript SDKを組み込む。

「上記の動画に従ってやっていく」といったが、2016年11月時点で上記動画に従うと失敗するので、いきなり、下記リンクにしたがって行っていく。

ニフティクラウドmobile backend のJavaScript SDKでハマった話【早起きアプリ】
tsumi 2016年07月12日に更新
http://qiita.com/tsumi/items/4d1f9da56b3550e3be13

具体的には、まず、　設定　＞　JS/CSSコンポーネントの追加と削除　

検索窓に、ncmb と入力して、検索　→　追加　→　インストール開始

（９）NiftyCloud MobileBackendのアプリを新規作成

hayaoki という名前のNCMBアプリを作成

ニフティクラウドmobile backendの初期化（ここが、動画と異なる。ncmbのJavascript SDKのVerisionが、1.xから、2.xに変更したかららしいが、詳細は不明。とにかく、動画通りにやるとうまくいかない。参考：http://qiita.com/tsumi/items/4d1f9da56b3550e3be13）

ここで出てくる、「APIキー」と、「クライアントキー」をコピペ。

//初期化
  var application_key = 'APIキー';
  var client_key = 'クライアントキー';
  //NCMB.initialize(application_key, client_key);
  var ncmb = new NCMB(application_key, client_key);

とにかく、var ncmb = new NCMB(application_key, client_key); と記載するところがポイント。その後も罠はいっぱい出てくる。

（１０）（１１）NCMBの「データストア」の利用

ど素人の私には、

データストア（JavaScript）基本的な使い方（公式のドキュメント）
http://mb.cloud.nifty.com/doc/current/datastore/basic_usage_javascript.html

を読んで実行するなんて無理。こちらを写経する。

<script>
    var onDeviceReady = function() {
        // 初期化
        var application_key = '(アプリケーションキー)'
        var client_key = '（クライアントキー）'
        //NCMB.initialize(application_key, client_key); //(旧バージョン)
        var ncmb = new NCMB(application_key, client_key);

        $(".btn").on("click", function() {
            // 今の時間を取得
            var hour = (new Date()).getHours();
            //var hour = 8;
            console.log(hour);

            // データの保存
            //var WakeUpClass = NCMB.Object.extend(“WakeUpClass”);
            var WakeUpClass = ncmb.DataStore("WakeUpClass");

            var wakeup = new WakeUpClass();
            wakeup.set("hour", hour);
            wakeup.save().then(function() {
                //データの抽出
                //var query = new NCMB.Query(WakeUpClass);
                //QueryはfetchAllと同じ
                //query.find().then(function(results) {
                WakeUpClass.count().fetchAll().then(function(results) {
                $(".msg").text("You're #" + results.count + "!");
            });
        });

            // 条件分岐
            // スマイルマークをハイライト
            if (hour < 12) $(".fa:nth-child(1").addClass("highlight");
            if (hour < 9) $(".fa:nth-child(2").addClass("highlight");
            if (hour < 7) $(".fa:nth-child(3").addClass("highlight");
        });
    }
    document.addEventListener("deviceready", onDeviceReady, false);
</script>

ここで、実機デバッグで、「Wake UP!!!」ボタンを押すと、NCMBのデータストアのところに、WakeUpClassというテーブルが作成されて、データが1個保存されている。

（１２）早起きした順番を表示する

</style>の直前に追加

.msg {
    margin: 0 auto;
    font-size: 22px;
    color: #0AF;
}

<div class="btn">Wake UP!!!</div>
<p class="msg"></p>
<script>

実機（Androidスマホ）でデバッグ　（なぜか、monacaのプレビュー画面ではうまくいかない）

ここまでとする。

Javascript,monaca,NiftyCloudMobileBackend

Posted by twosquirrel