Posted at

mobile backend JSSDK 2.0-pre でクイックスタート(ブラウザ編)

More than 3 years have passed since last update.

8/17にニフティクラウド mobile backend のJavaScript SDK v2 のプレ版がGitHubで公開されました。

ニフティクラウド mobile backend : http://mb.cloud.nifty.com/

JavaScript SDK v2.0-pre : https://github.com/NIFTYCloud-mbaas/ncmb_js

正式な告知・リリースはまだですが、今回はこれを触ってクイックスタートをやってみたいと思います。


手順


  1. ニフティクラウド mobile backend への登録

  2. SDKのダウンロード

  3. コード作成

  4. mobile backendとの連携

  5. 動作確認


1. ニフティクラウド mobile backend への登録

下記サイト右上の「無料登録」から登録します。

http://mb.cloud.nifty.com/


2. SDKのダウンロード

フロントエンド用のjsファイル生成に npm コマンドが必須になるので、nodeが入っていない場合は事前にインストールしておいてください。→ https://nodejs.org/


方法1. npmからインストール

下記のコマンドを実行すると、モジュールのインストール及びフロント用のjsファイル(ncmb.min.js)の自動生成が完了します。

$npm install ncmb -S


方法2. GitHubからCloneする

GitHubのリポジトリからCloneしてきます。

https://github.com/NIFTYCloud-mbaas/ncmb_js

こちらの方法の場合、フロント用のファイルは自動生成されないので、以下のコマンドを実行する必要があります。

$npm install

方法1はコマンド一つで実行できる反面、バージョン単位での更新になるので最新のバグフィックスなどが反映されていない場合があります。

方法2は一手間増えますが、常に最新のmergeが適用された状態で使えます。


3. コード作成

htmlファイルを作成し、以下のコードを貼り付けます。

また、htmlファイルと同じディレクトリにjsフォルダを作成し、その中にncmb.min.jsを入れます。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript SDK クイックスタート(ブラウザ版)</title>
</head>
<!-- 1.SDKの読み込み -->
<script type="text/javascript" src="js/ncmb.min.js" charset="utf-8"></script>
<body>
<script>
// 2. mobile backendアプリとの連携
var ncmb = new NCMB("YOUR_APPLICATIONKEY","YOUR_CLIENTKEY");

// TestClassの作成
var TestClass = ncmb.DataStore("TestClass");
// 3.TestClassへの入出力
TestClass.equalTo("message", "Hello, NCMB!")
.fetchAll()
.then(function(results){
if(results[0] != null){
alert(results[0].get("message"));
}else{
var testClass = new TestClass();
testClass.set("message", "Hello, NCMB!");
testClass.save()
.then(function(){
alert("message is saved.");
})
.catch(function(err){
alert(err.text);
});
}
})
.catch(function(err){
alert(err.text);
});
</script>
</body>
</html>


4. mobile backendとの連携

mobile backendにログインし、アプリの新規作成を行います。

アプリ名はなんでも構いません。

アプリの作成が完了するとアプリケーションキーとクライアントキーが表示されるので、それぞれをコピーして、先ほどのコードのYOUR_APPLICATIONKEYとYOUR_CLIENTKEYに貼り付けます。


5. 動作確認

htmlファイルを実行します。

データが何も保存されていなければ"message is saved."のアラートが表示されます。そしてmobile backendのダッシュボードを開くと、データストアにTestClassが生成され、messageに"Hello, NCMB!"が入ったレコードが保存されていることが確認できます。

その状態で再度HTMLファイルを実行すると、今度は"Hello, NCMB!"のアラートが表示されます。

今回は以上です。