ニフティクラウドmobile backendを試してみる(7)早起きアプリpart2

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

ニフティクラウドmobile backendを試してみる(6)早起きアプリpart1
以下の動画を見つけたので、やってみる。 大事なのは、ncmbのデータストアの使用方法が変更になっているところ。 参考ページが非常に大事。 ...

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

(環境)
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

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

(8)JavaScript SDKを組み込む。

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

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

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

image

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

image image

image image

image image

(9)NiftyCloud MobileBackendのアプリを新規作成

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

image

image

image

ニフティクラウド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); と記載するところがポイント。その後も罠はいっぱい出てくる。

(10)(11)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>

image

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

image

(12)早起きした順番を表示する

</style>の直前に追加

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

<script>の前に、以下のような感じで追加。

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

image

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

Screenshot_2016-11-24-17-06-25

ここまでとする。

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする