今回はみなさんが一番知りたい内容と思いますが、cordova-sqlite-storageプラグインを使用してデータを保存するように改造します。


前回の記事「【Monaca】Onsen UI + JavaScriptで買い物リストを作る その4」のコードを流用します。

それから、moment.jsを使用しますので、moment.min.jsを事前にダウンロードし、[js]フォルダにアップロードしてください。

config.xmlの2行目にあるwidgetに以下のコードを追加します。
必要の有無に関係なく追加します。

config.xml

データベースの処理が完了するまでスプラッシュスクリーンを表示した状態にするため、config.xmlを変更します。

config.xml

動作確認のアプリを作成します。
基本的に前回使用したコードを流用します。

index.html

style.css

app.js

そして、データベースに関連するモジュールsqlite.jsです。

sqlite.js

実際にアプリをビルドしてAndroidにインストールします。

アプリを起動すると、スプラッシュスクリーンが表示されます。

その間にデータベース構築などの処理を行い、完了後にスプラッシュスクリーンを非表示にします。
ons-navigatordummy.htmlを指定し、list.htmlに切り替えた場合に発火するinitイベントのタイミングでデータベースからデータを取得します。

右下の(+)をタップすると、商品名入力画面が表示されます。
商品名を入力し、右上の保存アイコンをタップします。

前画面に戻ると、買い物リストが更新されます。

買い物リストの商品名をタップすると選択メッセージが表示されます。
商品名の編集・削除を行うことができます。

データベースからデータを取得する、挿入する、更新する、削除するなどを行う場合、SELECTINSERTUPDATEDELETEなどSQL文を理解する必要があります。

MonacaのProプランにてデバッグビルドを行い、Android au SHV40 + Chrome DevToolsにて動作確認済みです。

今回も特別に無料公開とします。
そのため、使い方などの説明は省略させていただきます。

もしお役に立ちましたら、投げ銭ではありませんが、以下のバナーなどから会員登録をお願いします。







【Monaca】Onsen UI + JavaScript + cordova-sqlite-storageプラグインで買い物リストを作る
Tagged on: