z_blog:2018:181009_ionic4_firestore_capacitor_camera2
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
z_blog:2018:181009_ionic4_firestore_capacitor_camera2 [2018/10/09] – 作成 adash333 | z_blog:2018:181009_ionic4_firestore_capacitor_camera2 [2018/10/09] (現在) – [CameraとFirebase Storageの利用] adash333 | ||
---|---|---|---|
行 4: | 行 4: | ||
===== Event Serviceの作成 ===== | ===== Event Serviceの作成 ===== | ||
+ | |||
+ | -新規eventの作成create | ||
+ | -eventsリストの表示 | ||
+ | -eventsリストから、特定のeventを表示 | ||
src\app\services\event\event.service.ts | src\app\services\event\event.service.ts | ||
+ | {{: | ||
+ | |||
参考:https:// | 参考:https:// | ||
行 11: | 行 17: | ||
2017年10月13日に更新 | 2017年10月13日に更新 | ||
Firestoreを試してみた | Firestoreを試してみた | ||
+ | |||
+ | ===== 新規eventの作成 ===== | ||
+ | |||
+ | event-create.page.html | ||
+ | {{: | ||
+ | |||
+ | event-create.page.ts | ||
+ | {{: | ||
+ | |||
+ | 一度、Ctrl+C => y + Enterでサーバ停止してから、再度、ionic serve | ||
+ | |||
+ | 新規イベントを入力して、登録ボタンをクリックすると、Firestoreにイベントが登録されて、HomePageへ移動した。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Eventのリスト表示 ===== | ||
+ | |||
+ | event-list.page.html | ||
+ | {{: | ||
+ | |||
+ | event-list.page.ts | ||
+ | {{: | ||
+ | |||
+ | リロードすると、データが反映された。 | ||
+ | |||
+ | 続いて、Event Detailページ | ||
+ | |||
+ | event-detail.page.ts | ||
+ | {{: | ||
+ | |||
+ | event-detail.page.html | ||
+ | {{: | ||
+ | |||
+ | Add Guestsのところに、" | ||
+ | |||
+ | {{: | ||
+ | |||
+ | event-detail.page.scss | ||
+ | {{: | ||
+ | |||
+ | どこが変化したのかよくわからない。 | ||
+ | |||
+ | また、上記のGuestは表示するページがあるのかどうかは、今のところ不明。 | ||
+ | |||
+ | ===== Firestore Transactionの作成 ===== | ||
+ | トランザクション、、、難しい・・・ | ||
+ | |||
+ | .then(()=> | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ===== CameraとFirebase Storageの利用 ===== | ||
+ | event-detail.page.html の一部 | ||
+ | < | ||
+ | < | ||
+ | |||
+ | <ion-col size=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | <span *ngIf=" | ||
+ | </ | ||
+ | |||
+ | event-detail.page.ts と、 event.service.ts を変更。 | ||
+ | |||
+ | まだ、実機で試せてはいない。 | ||
+ | |||
+ | ここまでのソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | ===== 写経元サイト ===== | ||
+ | |||
+ | JAVEBRATT | ||
+ | Ionic Framework Tutorials | ||
+ | Build your first Firestore powered Ionic App | ||
+ | https:// | ||
+ | |||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
z_blog/2018/181009_ionic4_firestore_capacitor_camera2.1539069289.txt.gz · 最終更新: 2018/10/09 by adash333