Suche senden
Hochladen
Ionicアプリのデータ管理
•
2 gefällt mir
•
1,329 views
Katsumi Honda
Folgen
IonicアプリやPWAのアプリ内のデータをどう管理するか悩んでいるのです
Weniger lesen
Mehr lesen
Software
Melden
Teilen
Melden
Teilen
1 von 27
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Bogra tailoring certificate
Bogra tailoring certificate
Tariful Islam
Skl, sk, kd, b arab ma
Skl, sk, kd, b arab ma
LP MA"ARIF NU 14 Sidorejo
Simple dan past participle
Simple dan past participle
fahira_ila
Li-Fi
Li-Fi
Vishnu_Ra
CHANDRAYAAN 1 AND 2
CHANDRAYAAN 1 AND 2
pranjeet
ISRO
ISRO
bhabagrahi dash
20120302第4回IOCJ情報交換会
20120302第4回IOCJ情報交換会
infoScoop
Obniz and cloud vision api
Obniz and cloud vision api
Kouhei Kido
Empfohlen
Bogra tailoring certificate
Bogra tailoring certificate
Tariful Islam
Skl, sk, kd, b arab ma
Skl, sk, kd, b arab ma
LP MA"ARIF NU 14 Sidorejo
Simple dan past participle
Simple dan past participle
fahira_ila
Li-Fi
Li-Fi
Vishnu_Ra
CHANDRAYAAN 1 AND 2
CHANDRAYAAN 1 AND 2
pranjeet
ISRO
ISRO
bhabagrahi dash
20120302第4回IOCJ情報交換会
20120302第4回IOCJ情報交換会
infoScoop
Obniz and cloud vision api
Obniz and cloud vision api
Kouhei Kido
IoTあるじゃん北海道支部勉強会#1
IoTあるじゃん北海道支部勉強会#1
Koyo Takenoshita
スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209
Yoichiro Shiba
Mebic Creative Business Forum 2013
Mebic Creative Business Forum 2013
Takashi EGAWA
多様化するロケーションビジネスのこれから
多様化するロケーションビジネスのこれから
Yahoo!デベロッパーネットワーク
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Nobutaka OSHIRO
Dynamic frameworks tips
Dynamic frameworks tips
Syo Ikeda
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
オラクルエンジニア通信
知ってみようPower Apps ポータルの世界
知ってみようPower Apps ポータルの世界
Tatsuya Kobayashi
ラジコンがネットと出会ったら
ラジコンがネットと出会ったら
Takuya Andou
スマートフォン市場動向 110525
スマートフォン市場動向 110525
Naoto Takeda
Mobile first
Mobile first
Tomoyuki Kashiro
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
icchiman
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
人が乗れる自動運転電気自動車作成中その4, -version up その1-
人が乗れる自動運転電気自動車作成中その4, -version up その1-
Takashi Yamanoue
androidアプリの狙い所と事例|ビヨンド株式会社
androidアプリの狙い所と事例|ビヨンド株式会社
Katsuaki Sato
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Yukihiro Kimura
Why android 2011
Why android 2011
Takashi Ohmoto
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
Shinya Tachihara
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
Daiyu Hatakeyama
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
光吉 浜谷
Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととか
Katsumi Honda
1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ
Katsumi Honda
Weitere ähnliche Inhalte
Ähnlich wie Ionicアプリのデータ管理
IoTあるじゃん北海道支部勉強会#1
IoTあるじゃん北海道支部勉強会#1
Koyo Takenoshita
スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209
Yoichiro Shiba
Mebic Creative Business Forum 2013
Mebic Creative Business Forum 2013
Takashi EGAWA
多様化するロケーションビジネスのこれから
多様化するロケーションビジネスのこれから
Yahoo!デベロッパーネットワーク
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Nobutaka OSHIRO
Dynamic frameworks tips
Dynamic frameworks tips
Syo Ikeda
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
オラクルエンジニア通信
知ってみようPower Apps ポータルの世界
知ってみようPower Apps ポータルの世界
Tatsuya Kobayashi
ラジコンがネットと出会ったら
ラジコンがネットと出会ったら
Takuya Andou
スマートフォン市場動向 110525
スマートフォン市場動向 110525
Naoto Takeda
Mobile first
Mobile first
Tomoyuki Kashiro
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
icchiman
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
アシアル株式会社
人が乗れる自動運転電気自動車作成中その4, -version up その1-
人が乗れる自動運転電気自動車作成中その4, -version up その1-
Takashi Yamanoue
androidアプリの狙い所と事例|ビヨンド株式会社
androidアプリの狙い所と事例|ビヨンド株式会社
Katsuaki Sato
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Yukihiro Kimura
Why android 2011
Why android 2011
Takashi Ohmoto
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
Shinya Tachihara
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
Daiyu Hatakeyama
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
光吉 浜谷
Ähnlich wie Ionicアプリのデータ管理
(20)
IoTあるじゃん北海道支部勉強会#1
IoTあるじゃん北海道支部勉強会#1
スマートコンバートセミナー資料 - 201209
スマートコンバートセミナー資料 - 201209
Mebic Creative Business Forum 2013
Mebic Creative Business Forum 2013
多様化するロケーションビジネスのこれから
多様化するロケーションビジネスのこれから
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Meteor勉強会発表資料「MeteorでiOSアプリを作ろう!」
Dynamic frameworks tips
Dynamic frameworks tips
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
新たなビジネスにおけるデータ活用 ~小田急電鉄のローカル・コミュニティ活性化アプリ「KYOUDOKO」の場合~(2021/9/15)
知ってみようPower Apps ポータルの世界
知ってみようPower Apps ポータルの世界
ラジコンがネットと出会ったら
ラジコンがネットと出会ったら
スマートフォン市場動向 110525
スマートフォン市場動向 110525
Mobile first
Mobile first
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
WEBがネイティブに勝つために - kaumoCTOMeetup(いっちマン)
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
人が乗れる自動運転電気自動車作成中その4, -version up その1-
人が乗れる自動運転電気自動車作成中その4, -version up その1-
androidアプリの狙い所と事例|ビヨンド株式会社
androidアプリの狙い所と事例|ビヨンド株式会社
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Sensor & Device Showcase 2014(Tokyo MotionControl Network)
Why android 2011
Why android 2011
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
xR Tech Tokyo 登壇資料 Mixed Realityではじまるコラボレーティブ・コンピューティング
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
明治大学理工学部情報科学科: 特別講義 - データが示す近い未来の世界と、準備すべき コト
Leapmotionとp5.js:DEMOと解説
Leapmotionとp5.js:DEMOと解説
Mehr von Katsumi Honda
Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととか
Katsumi Honda
1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ
Katsumi Honda
Meteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョン
Katsumi Honda
はじめてのMeteor
はじめてのMeteor
Katsumi Honda
Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発
Katsumi Honda
ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会
Katsumi Honda
イマドキのWebアプリの作り方
イマドキのWebアプリの作り方
Katsumi Honda
はじめてのPython
はじめてのPython
Katsumi Honda
はじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for Mac
Katsumi Honda
はじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for Windows
Katsumi Honda
冬だからAndroid再入門
冬だからAndroid再入門
Katsumi Honda
Osc2012 appinventor のその後
Osc2012 appinventor のその後
Katsumi Honda
秋だからEclipse再入門
秋だからEclipse再入門
Katsumi Honda
夏だからJava再入門
夏だからJava再入門
Katsumi Honda
OSC2011 Androidハンズオン
OSC2011 Androidハンズオン
Katsumi Honda
雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み
Katsumi Honda
激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた
Katsumi Honda
はじめてのAndroid開発
はじめてのAndroid開発
Katsumi Honda
Mehr von Katsumi Honda
(18)
Angularで新サービス作って学んだこととか
Angularで新サービス作って学んだこととか
1粒で6度おいしい(かもしれない) Ionicのススメ
1粒で6度おいしい(かもしれない) Ionicのススメ
Meteor intro-2015-rev1- 日本語バージョン
Meteor intro-2015-rev1- 日本語バージョン
はじめてのMeteor
はじめてのMeteor
Mobile Backend Starterを使ってサクサクアプリ開発
Mobile Backend Starterを使ってサクサクアプリ開発
ヨーマンおじさんと戯れる会
ヨーマンおじさんと戯れる会
イマドキのWebアプリの作り方
イマドキのWebアプリの作り方
はじめてのPython
はじめてのPython
はじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for Mac
はじめてのPython - 開発環境の準備 for Windows
はじめてのPython - 開発環境の準備 for Windows
冬だからAndroid再入門
冬だからAndroid再入門
Osc2012 appinventor のその後
Osc2012 appinventor のその後
秋だからEclipse再入門
秋だからEclipse再入門
夏だからJava再入門
夏だからJava再入門
OSC2011 Androidハンズオン
OSC2011 Androidハンズオン
雲から機器へ伝達させる為の枠組み
雲から機器へ伝達させる為の枠組み
激安Androidタブレットを買ってみた
激安Androidタブレットを買ってみた
はじめてのAndroid開発
はじめてのAndroid開発
Ionicアプリのデータ管理
1.
Ionicアプリのデータ管理
2.
わたしは誰ですか? 本田 克己(ほんだ かつみ) @kponda おんせん県おおいた県 株式会社クオックス GDG九州 コ・オーガナイザ(買い出し係) 日本Androidの会 大分支部(休眠中)
3.
Ionicとの出会い 以前はネイティブアプリ開発メインでHTTPとの付き合いはAPIや管理画面 2013年にMeteorに触れて衝撃を受ける -> はじめてのリアクティブ開発 -> Cordova使ったモバイルアプリ対応 Meteor-Angularでのモバイルアプリチュートリアル ->
Ionicと出会う (Meteorからの影響でGraphQLにも興味をしめす) https://pixabay.com/ja/%E6%B5%81%E6%98%9F-%E7%81%AB%E7%81%BD-%E5%BD%97%E6%98%9F-%E5%9C%B0%E7%90%83- %E3%82%AE%E3%83%A3%E3%83%A9%E3%82%AF%E3%82%B7%E3%82%A2-1420503/
4.
Ionicアプリの実行形態 ・ハイブリッドアプリ:Cordova・Capacitor ・Webアプリ : PWA的な
5.
データの保存先 オフライン アプリケーション オフラインでも動作する オンライン アプリケーション オンライン アプリケーション
6.
アプリで管理したいデータ例 ローカルデータ オフラインサポート オンラインデータ アプリの設定
SNSとか 他のユーザと共有する 複数の端末で共有する とか色々 オンラインデータの キャッシュ 未反映の書込みデータ ユーザデータ 辞書データ マスターデータ
7.
Ionicで使えそうな保存先 ローカルデータ オフラインサポート オンラインデータ SQLite
Firebase Cloud Firestore localStorage IndexedDB PouchDB Firebase Realtime Databaseとか クラウドDB色々 各種APIとか色々 CouchDB
8.
Ionicで使えそな保存先 名称 特徴 容量
Native SQLite モバイルアプリ開発でよく使われる RDB。SQLが使え る。TypeORM等のORマッパーも使える。 ○ ✔ LocalStorage お手軽、簡単、KVS。文字列しか保存できないので、 JSON.stringifyとかする。大きいデータは保存できな い。 5MB IndexedDB 大体のブラウザで使えるようになっているデータベー ス。操作の仕方がちょっと独特。 ○ PouchDB CouchDB互換のJSで動くDB。データの保存は IndexedDBを使っている。リモートの DBと同期が取れ たりする。 ○ Cloud Firestore みんなだいすきFirebase オフラインサポート機能もあってステキ ○ Realtime Database iOS/Android用SDKにはオフラインサポート機能がある けど、JS SDKにはないのが残念
9.
Realm JavaScriptは使うことができない ネイティブ開発でのDBにRealmもよく使っていました Realm JavaScriptという製品がでてIonicからも使えるかも♡と期待しましたが 残念ながらReact
NativeとNode.jsからだけしか使えません https://realm.io/docs/javascript/2.2.0/api/index.html
10.
ローカルデータの保存先
11.
事が足りればLocalStorage 簡単、お気楽
12.
事が足りない場合にどうするか
13.
LocalStorageじゃ事足りない場合 ハイブリッドアプリ Webアプリ ネイティブ開発の延長で SQLite使っていた IndexedDB 将来PWA対応するかもしれないから IndexedDBを使ったほうがいいかも PouchDBの機能も気になる
14.
Offline First
15.
オフラインサポート ローカルデータ オフラインサポート オンラインデータ Firebase
Cloud Firestore PouchDB CouchDB 独自に作る 基本オンラインでオフラインサポートを行う -> Firestoreがお気軽でよさそう 完全にオフラインでも使いたい -> PouchDBか独自に作るしか
16.
Firebaseで気をつけないといけないこと ・無料枠を超えるともちろん有償 ・中国本土からは繋がらない(台湾、香港は大丈夫) 余談:グレートファイアウォールはホスト名を元にブロックしているっぽい? Firebaseホスティングでカスタムドメイン設定していたら繋がりました (ページは表示されるけどFirestoreに繋がらないのでデータは読めない😥)
17.
とりあえずの結論 ハイブリッドアプリ ネイティブプラグインを色々 使ったりしてPWA対応しなさ そうなやつ PWAにも対応するアプリの オフラインデータ オンラインデータ localStorage PouchDB Cloud Firestore CouchDB SQLite
18.
雰囲気だけで選んでいたので実験 色々な利用ケースを想定した実験をしたかったのですが準備間に合わなかった
19.
多めのデータをデータベースに登録してみた 気象庁のホームページからダウンロー ドしたCSVファイルを各種DBに追加す る時間を計測 大分市の最低、最高気温16年間分 5840件 https://www.data.jma.go.jp/gmd/risk/obsdl/index.php
20.
思ってたのと全然違う結果
21.
実験前の雰囲気予想 時間が短い順に 1. localStorage 2. SQLite 3.
IndexedDB 4. PouchDB 5. Firebase RealtimeDatabase 6. Firebase Cloud Firestore
22.
計測端末 Xperia XZ
(2年以上前のポンコツ) 1件づつの書き込みが完了するのを待つようにしている (バルク処理していない) 1回目 2回目 3回目 平均 最小 localStorage 1.03 0.815 1.062 0.97 0.82 SQLite 101.906 110.103 106.832 106.28 101.91 IndexedDB 6.831 5.575 6.181 6.20 5.58 PouchDB 160.171 152.194 113.276 141.88 113.28 RealtimeDB 30.042 28.808 30.735 29.86 28.81 Firestore 30分以上まっても終わらず
23.
Firestore遅すぎじゃね? 無料プランだと速度でるはずがない https://firebase.google.com/docs/firestore/quotas?hl=ja Realtime Databaseは無料プラン での書き込み制限はないみたい
24.
従量課金に切り替えて再実行 してみたけど直ぐには反映されな い? 計測間に合いませんでした。ごめんなさい。
25.
計測結果 時間が短い順に 1. localStorage 2. IndexedDB 3.
Firebase RealtimeDatabase 4. PouchDB 5. SQLite 6. Firebase Firestore? とはいえバルクインサートで計測しただけなので色々なパターンを試して判断しようと思います。
26.
今の所の結論 事が足りるのであれば LocalStorage 事が足りなければ IndexedDB Firestoreは課金設定忘れずに とはいえバルクインサートで計測しただけなので色々なパターンを試して判断しようと思います。
27.
ご清聴ありがとうございました
Jetzt herunterladen