【mBaaS 体験会】 Monaca datastore demo

Copyright @ NIFTY Corporation All Rights Reserved

ニフティ株式会社

ニフティクラウドmobile backend体験会 – Monaca版

1


全体

2

登録データー

取得データー

Monacaで作るアプリにサーバーにデータを格納する機能を作ります

以下、mBaaS


資料のDL

資料がここにあります

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

ここよりDLしてください

このようなZIPファイルがDLされます

3

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


手順

１．mBaaS利用登録

２．mBaaSにてアプリを作成

３. Monaca利用登録

４．MonacaとmBaaSの連携

５．動作確認

4


mBaaSの利用登録 1/3

無料登録をしていただくと、@nifty会員登録を行うフローに移ります。@nifty会員登録をしていただいた後、mBaaSにログインしていただくとmBaaSの利用登録が行えます。以下上記のフローの説明を行います。

まず、下記URLよりmBaaSのサービスサイトにアクセスしていただきます。http://mb.cloud.nifty.com/ ここをクリック

ここをクリック

IDを持っている場合、不要

5



必要事項を入力して@nifty会員登録してください


6



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

ニフティクラウドmobile backendの利用登録を行います。

ご登録いただいた@nifty IDでログイン

利用規約を確認後、同意して

利用開始！

ここをクリック


7


mBaaSのアプリ作成

利用登録が終わるとアプリの新規作成画面が表示されます。アプリ名を入力して新規作成してください。

mBaaSはアプリケーションキーとクライアントキーという2つの鍵を使い、サーバー接続の認証を行っています. その２つの鍵がアプリ作成時に生成されます

「quickmonaca」と入力してください

２つのキーは後で使います

OKをクリックすると管理画面が表示されます。

そのままにしておいてください！

8


monacaの利用登録

サインアップhttps://ja.monaca.io/左記URLよりMonacaのサービスサイトにアクセス

必要事項を記入して登録してください

Monacaが使えるようになります

※登録メールアドレス宛に確認メールが届いているので本登録を行ってください

9

https://ja.monaca.io/


アプリサンプルのインポート 1/2

「Import Project」をクリックインポートした

プロジェクトを開く

10

「Import Project」を選択し、ダウンロードしたプロジェクトを選択し、インポートします。


monacaの開発環境の確認

11

アプリのファイル構成

mBaaSのSDKが入っています

mBaaSのSDKはMonacaの「JS/CSSコンポーネント追加と削除」より、「ncmb」を検索し、インポートできます。今回は必要ないですが、ご自分でア

プリを開発される場合はご利用ください。

次はここに注目


monacaとmBaaSの連携

12

アプリケーションキー・クライアントキーをそれぞれコピペしてください

「OK」を押した方へコンパネでここを押してください

ここでアプリケーションキー・ク

ライアントキーが見られます


動作確認

13

データがmBaaSで確認できれば成功！

『StartDemo』ボタンをタップします


コード説明

14

初期化を行う

TestClassクラスデータ登録するためにTestClass変数を宣言

messageというフィルドにデータ“Hello, NCMB!” を設定

保存を非同期行います！success, errorに保存後の処理を設定

コードの解説Sの連携


おまけ

Monacaでプッシュ通知を組み込む内容でもドキュメントをご用意しています。ぜひご活用ください！

15

http://www.slideshare.net/mobilebackend/monacambaas

http://www.slideshare.net/mobilebackend/monacambaas

Copyright @ NIFTY Corporation All Rights Reserved 16

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

最後に

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


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

質問、作ったアプリの共有TIPSなどありましたらぜひ、ご活用ください！

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


Internet

【mBaaS 体験会】 Monaca datastore demo