今回は、localStorageからニフクラ mobile backendのデータストアにデータを保存するように改造します。


ncmb.min.jsというファイルが必要ですので、githubからダウンロードしてください。

ダウンロードしたncmb.min.jslibフォルダにアップロードします。

mBaaSにアプリ名を登録し、t_kaimonoというクラスを作成します。
nameというフィールドを追加します。

mBaaSに接続する場合、APIキーが必要となります。
アプリ設定を開き、アプリケーションキーとクライアントキーをコピーし、コードに組み込みます。

Monacaデバッガーで追加・修正・削除、初期化を実行すると、買い物リストとmBaaSのt_kaimonoクラスの商品名が同じ内容であることがわかります。

一つ注意する点があります。

例えば、商品名を追加すると、

①該当するobjectIdがあるか確認する。
②商品名を新規登録する。
③商品名一覧を取得する。

と、APIリクエスト数を3回分も消費してしまいます。

初期化を行うと、登録したレコード件数分のAPIリクエスト数を消費してしまいます。
※大量のレコード件数を削除する場合、mBaaSに削除用のスクリプトを登録し、それを呼び出すことで削除できます。
この場合、スクリプトAPIコール数を消費します。

※アプリケーションキーとクライアントキーを書き換えてください。

確かな力が身につくJavaScript「超」入門 第2版

新品価格
¥2,728から
(2019/11/11 15:00時点)

【Monaca】Onsen UI + JavaScriptで買い物リストを作る その4
Tagged on: