Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Pull request Compare This branch is 26 commits ahead of ncmbadmin:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.monaca
platforms/chrome update images, domain, upgrade to cordova v6.2 Sep 17, 2018
readme-img
res update images, domain, upgrade to cordova v6.2 Sep 17, 2018
www
README.md change domain URL Aug 20, 2018
README_en.md
config.xml

README.md

【Monaca】ニフクラ mobile backend を体験しよう!

画像1

概要

  • Monacaを利用して、ニフクラ mobile backendへデータ登録を行うサンプルアプリです
  • 「Start Demo」ボタンをタップするとクラウドにデータが上がります★
  • 簡単な操作ですぐに ニフクラ mobile backendを体験いただけます

ニフクラ mobile backendって何??

スマートフォンアプリのバックエンド機能(プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト)が開発不要、しかも基本無料(注1)で使えるクラウドサービス!今回はデータストアを体験します

注1:詳しくはこちらをご覧ください

画像2

動作環境

iOS

  • Mac OS X 10.11.6(El Capitan)
  • iPhone5 iOS 9.3.5
  • iPhone6s iOS 10.0.1

Android

  • Nexus 5X Androidバージョン 7.0

※上記内容で動作確認をしています。

手順

1. ニフクラ mobile backendの会員登録とログイン→アプリ作成

  • 上記リンクから会員登録(無料)をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します

画像3

  • アプリ作成されると下図のような画面になります
  • この2種類のAPIキー(アプリケーションキーとクライアントキー)はXcodeで作成するiOSアプリにニフクラ mobile backendを紐付けるために使用します

画像4

  • この後動作確認でデータが保存される場所も確認しておきましょう

画像5

2. Monacaでプロジェクトインポートしてアプリを起動

  1. Monacaにログインします
  2. 左上の「Import Project」をクリックします
  3. 「プロジェクト名」を入力します 例)「DBDEMO」
  4. 「インポート方法」の「URLを指定してインポート」をチェックし、下記リンクを右クリックでコピーし、貼り付けます
  5. プロジェクト:monaca_data_registration
  6. 「インポート」をクリックするとインポートされたプロジェクトが作成されます

画像6

  • 作成されたプロジェクトを「開く」をクリックして開きます
  • プロジェクトが開き、プレビュー画面が表示されます
  • プレビュー画面あるいはMonacaデバッガーで遊んでみましょう!

※ 動作確認は、プレビュー画面・Monacaデバッガーいずれも__iPhone6__以上の使用を推奨します

3. APIキーの設定

  • プロジェクトが開いたら、index.htmlを編集します
  • 先程ニフクラ mobile backendのダッシュボード上で確認したAPIキーを貼り付けます

画像7

  • それぞれYOUR_NCMB_APPLICATION_KEYYOUR_NCMB_CLIENT_KEYの部分を書き換えます
  • このとき、ダブルクォーテーション(")を消さないように注意してください!
  • 書き換え終わったら保存ボタンで保存します

4. Monacaデバッガーでの動作確認

  • スマートフォン端末でMonacaデバッガーを立ち上げてログインします。
  • 最初に設定した、アプリ名(例:DBDEMO)を選択してアプリを起動させてください。

画像8

  • 起動したら「Start Demo」ボタンをタップします

  • 動作結果が画面に表示されます

  • 保存に成功した場合:「New object created with objectId: ******

  • 保存に失敗した場合:「Failed to create new object, with error code: ******

  • objectIdはデータを保存したときに自動で割り振られるIDです

  • エラーが発生した場合は、こちらよりエラー内容を確認いただけます 画像1

  • 保存に成功したら、ニフクラ mobile backendのダッシュボードから「データストア」を確認してみましょう!

  • TestClassという保存用クラスが作成され、その中にデータが確認できます

解説

サンプルプロジェクトに実装済みの内容のご紹介

SDKのインポートと初期設定

ロジック

  • index.htmlにデザインとロジックの両方を書いています
  • testClassオブジェクトに対してkey, value形式で値をセット(set(key, value))し、save()メソッドを実行すると、非同期にてデータが保存されます
var appKey    = "YOUR_NCMB_APPLICATION_KEY";
var clientKey = "YOUR_NCMB_CLIENT_KEY";
var ncmb = new NCMB(appKey, clientKey);

function startDemo() {
    var TestClass = ncmb.DataStore("TestClass");
    var testClass = new TestClass();
    var key   = "message";
    var value = "Hello, NCMB!";
    testClass.set(key, value);
    testClass.save()
        .then(function() {
            // 保存完了後に実行される
            alert("New object created with objectId: " + testClass.objectId);
        })
        .catch(function(error) {
            // エラー時に実行される
            alert("Failed to create new object, with error code: " + error.text);
    });
}

SDKのインストール方法

SDKが最新になっていない場合は、以下画像をご参考いただき、ご自身でSDKを更新してください

画像9

参考

You can’t perform that action at this time.