長野エンジニアライフ

東京から長野に移住したエンジニアのブログです。🦒🗻⛰

Module 4: Choosing a Data Storage Strategy(和訳)

Cordovaアプリがどのようにして永続的にデータを保持しているのか確認していきます。

永続化メカニズムの調査

以下のファイルを開いて、それぞれの永続化サービスを覗いてみましょう。

  1. www/js/services/memory/EmployeeService.js
  2. www/js/services/json/EmployeeService.js
  3. www/js/services/localstorage/EmployeeService.js
  4. www/js/services/websql/EmployeeService.js

(メモ) ざっと目を通すくらいで良さそう👀

それぞれの永続化メカニズムでアプリの動作を確認

Cordovaアプリでは、in-memoryデータストアを使用する初期設定がされています。(上記の項番1.)


使用するローカルのデータストアを変更する場合は

1.index.htmlにて、js/services/memory/EmployeeService.jsをインポートしてる箇所を、他のデータストアを読み込むよう変更する必要があります。(例:js/services/websql/EmployeeService.js

<script src="js/services/memory/EmployeeService.js"></script>
↓(変更例)
<script src="js/services/websql/EmployeeService.js"></script>

2.変更後、アプリを動作させてみましょう。

(メモ)js/services/websql/EmployeeService.jsの中身を書き換えて、実行したアプリのデータも書き変わればOK


JSONサービスの動作を確認するため、チュートリアル資料のNode.jsサーバを起動させてみましょう。

1.ターミナルを開きcordova-tutorial/serverに移動します。
2.依存パッケージをインストールします。

.../cordova-tutorial/server/ $ npm install

3.Node.jsサーバを起動します。

$ node server

f:id:kawakeee:20201104235107p:plain


services/json/EmployeeService.jsはローカルホストを示しているため、ローカルのブラザウでアプリを起動している場合にのみ機能します。デバイスでは実機をローカルホストとして認識しないため動作しません。

バイスJSONサービスを確認するためには、コンピューター(サーバ起動しているマシン)とデバイスが同じサブネットにいる必要があります。そして、コンピューターのIPアドレスを確認しservices/json/EmployeeService.js.にてlocalhostoを確認したIPアドレスに書き換えて下さい。

代替案として、利用可能なサーバにこのサービスを公開する方法もあります。(実際のアプリケーションでは、構成ファイル内のホスト名は外部化することが普通です。)


www/js/services内の他のストレージサービスは、アプリをデバイスのブラウザで起動するとそのまますぐに動作します。

原文/参考記事

ccoenraets.github.io

次のチュートリアル

kawakeee.hatenablog.com

前のチュートリアル

kawakeee.hatenablog.com