Symfoware

Symfowareについての考察blog

Cordova(コルドバ)チュートリアル4 データの取得方法あれこれ

Cordova(コルドバ)チュートリアル3 サンプルプログラムの準備
こちらの続きです。

チュートリアル用のサンプルプログラムを配置しました。


次のステップに進みます。
Module 4: Choosing a Data Storage Strategy


Step 1: Explore different persistence mechanisms



この章では、データの取得方法について解説しています。

社員情報の持ち方のサンプルとして、以下の4つが紹介されています。

・ファイルに直接記載
www/js/services/memory/EmployeeService.js

・サーバーからjson形式で取得
www/js/services/json/EmployeeService.js

・ローカルストレージに保持
www/js/services/localstorage/EmployeeService.js

・websqlに保持
www/js/services/websql/EmployeeService.js




Step 2: Test the application with different persistence mechanisms



データの取得方法を切り替えるには、www/index.htmlを編集します。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6. </head>
  7. <body>
  8. <p><button class="help-btn">Help</button></p>
  9. <div class='header'><h1>Directory</h1></div>
  10. <div class='search-view'>
  11.     <input class='search-key' type="search" placeholder="Enter name"/>
  12.     <ul class='list employee-list'></ul>
  13. </div>
  14. <script src="lib/jquery.js"></script>
  15. <script src="js/services/memory/EmployeeService.js"></script>
  16. <script src="js/app.js"></script>
  17. </body>
  18. </html>




初期状態では
「js/services/memory/EmployeeService.js」
を読み込んでいるので、メモリーストレージですね。


ローカルストレージ
js/services/localstorage/EmployeeService.js

websql
js/services/websql/EmployeeService.js

これらに変更しても同様に動作します。


サーバーからjsonで取得するサンプルを動かすにはもちろんサーバーが必要です。

チュートリアル用のソース
https://github.com/ccoenraets/cordova-tutorial

こちらのserverフォルダを適当なディレクトリに保存。

保存したディレクトリに移動して、依存モジュールをインストール。


$ sudo npm install




サーバーを起動します。


$ node server




index.htmlの指定を以下に変更。

js/services/json/EmployeeService.js


これでサーバーと通信するサンプルが動かせます。


エミュレーターでの動作を確認したい場合は、
js/services/json/EmployeeService.jsを編集。

http://localhost:5000/employees

となっている箇所を、端末のIPアドレスに変更してやります。


色々なデータ保存方法が選択できるんですね。
アプリケーションにあったものを適切に選択しないと。
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2015/02/22(日) 14:31:53|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Cordova(コルドバ)チュートリアル5 端末標準の通知(Notification)を表示する | ホーム | Cordova(コルドバ)チュートリアル3 サンプルプログラムの準備>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1642-45215ca7
この記事にトラックバックする(FC2ブログユーザー)