ニフティクラウドmobile backendを試してみる(3)クイズアプリ前半再挑戦

前回、クイズアプリ前半で挫折。

ニフティクラウドmobile backendを試してみる(2)クイズアプリ前半=>挫折
前回までに、 (1)Monaca (2)NiftyCloudMobileBackend (3)MonacaLocalkit (4...

しかし、それより前の、

ニフティクラウドmobile backendを試してみる(1)
を写経してみたいと思う。(途中で写経するものを変更したので、以下は、やや遠回りとなっている。) (環境)Windows8.1NCMB(ニフ...

では、とにかく、データをNCMBに登録できたので、それをコピペして、クイズアプリにつなげることができないか試してみる。

(1)NCMBで、新しいアプリを作成で、「testquiz201611」を作成。

アプリケーションキーと、クライアントキーを控えておく。

(2)monacaでアプリ作成

Import Projectで作成

image

dataDemo
https://github.com/ncmbadmin/monaca_data_registration
https://github.com/ncmbadmin/monaca_data_registration/archive/master.zip

image

quiz_app を開き、index.htmlに、appKeyと、clientKeyをコピペ。

image

さらに、

Monacaでクイズアプリを作る(前半)

http://mb.cloud.nifty.com/doc/current/tutorial/monaca_quiz_01.html

を参考に、ほんの少し書き換え。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var appKey    = "(アプリケーションキー)";
        var clientKey = "(クライアントキー)";
        var ncmb = new NCMB(appKey, clientKey);

        function saveData() {
            var Data = ncmb.DataStore("Data");
            var data = new Data();
            var key   = "message";
            var value = "Hello, NCMB!";
            data.set(key, value);
            data.save()
                .then(function(object) {
                    // 保存完了後に実行される
                    $("#message").html("<p>データ保存に成功!</p>");
                })
                .catch(function(error) {
                    // エラー時に実行される
                    $("#message").html("error:" + error.message);
                });
        }
    </script>
</head>
<body>
    <h1>データ保存</h1>
    <a class="button--large" onclick="saveData()">データ保存する</a>
    <div id="message"></div>
</body>
</html>

image

おお!?NCMBで確認。

image

ちゃんとできてる!

(参考)

image

(3)ログインページを作りたい。

www/js フォルダを作成し、www/js/app.js ファイルを作成。
index.html内のscriptをコピペ。

image

image

Onsen UI (Monaca Version)をインストール

image

image

image

image

onsen uiは使い方がよく分からないので、あきらめた。

index.htmlの書き換え

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- JavaScriptの読み込みを設定 -->
    <script src="js/app.js"></script>
</head>
<body>
    <h1>データ保存</h1>
    <a class="button--large" onclick="saveData()">データ保存する</a>
    <div id="message"></div>
    
    <div align="center">
        <h2>会員登録してみる</h2>
        <div align="center">
        <p>
        <!-- ユーザー名とパスワードを入力するテキストボックスを用意 -->
            ユーザー名<br/>
            <input type="text" id="user_name"/><br/>
            パスワード<br/>
            <input type="text" id="password"/><br/>
        </p>
    <!-- 会員登録するボタンが押されたらloginメソッドを呼び出す -->
        <a class="button--large" onclick="login()">会員登録する</a>

    <!-- ログインしている会員のユーザー名を表示する段落を用意 -->
        <p id="current_user">
        </p>
    </div>
    
</body>
</html>

app.js の書き換え

// This is a JavaScript file

        var appKey    = "(アプリケーションキー)";
        var clientKey = "(クライアントキー)";
        var ncmb = new NCMB(appKey, clientKey);

        function saveData() {
            var Data = ncmb.DataStore("Data");
            var data = new Data();
            var key   = "message";
            var value = "Hello, NCMB!";
            data.set(key, value);
            data.save()
                .then(function(object) {
                    // 保存完了後に実行される
                    $("#message").html("<p>データ保存に成功!</p>");
                })
                .catch(function(error) {
                    // エラー時に実行される
                    $("#message").html("error:" + error.message);
                });
        }
        
//mobile backendへの会員登録を行うメソッド
function login(){
    //テキストボックスからユーザー名とパスワードを取得
    var userName = $("#user_name").val();
    var password = $("#password").val();

    //ユーザークラスのインスタンスを作成
    var user = new ncmb.User();

    //インスタンスにユーザー名とパスワードを設定
    user.set("userName", userName)
        .set("password", password);

    //会員登録を行うsignUpByAccountメソッドを実行
    user.signUpByAccount()
        .then(function (object){
            //成功する時の処理
            ncmb.User.login(userName, password)
                     .then(function(data){
                        // ログイン後処理
                        getCurrentUser();              
                     })
                     .catch(function(err){
                        // エラー処理
                        console.log("error:" + error.message);
                     });
        })
        .catch(function (error){
            //エラーが発生する時の処理
            console.log("error:" + error.message);
        });
}

//ログイン中のユーザー名を取得して画面に表示する
function getCurrentUser(){
    //ログイン中の会員を取得
    var user = ncmb.User.getCurrentUser();

    //取得した会員のユーザー名を表示する
    $("#current_user").text("ログイン中のユーザー名:" + user.get("userName"));
}

page1とpage2にするやり方が分からなかったので、見栄えは悪いが、

image

ユーザ名とパスワードを入力して、「会員登録する」をクリックすると、NCMBの「会員管理」には、以下のようにuserNameと(おそらく)passwordが登録されている。

image

ちょっと感動!

これで、不完全ながらも、

Monacaでクイズアプリを作る(前半)

http://mb.cloud.nifty.com/doc/current/tutorial/monaca_quiz_01.html

をやることができた。

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

    シェアする

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

    フォローする