z_blog:2018:181009_ionic4_firestore_capacitor_camera2

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- z_blog:2018:181009_ionic4_firestore_capacitor_camera2 [2018/10/09] – [Event Serviceの作成] adash333
+++ z_blog:2018:181009_ionic4_firestore_capacitor_camera2 [2018/10/09] (現在) – [CameraとFirebase Storageの利用] adash333
@@ 行 10: / 行 10: @@
 src\app\services\event\event.service.ts
+{{:z_blog:2018:pasted:20181009-162157.png}}
@@ 行 17: / 行 17: @@
 年10月13日に更新
 Firestoreを試してみた
+===== 新規eventの作成 =====
+event-create.page.html
+{{:z_blog:2018:pasted:20181009-162710.png}}
+event-create.page.ts
+{{:z_blog:2018:pasted:20181009-163013.png}}
+一度、Ctrl+C => y + Enterでサーバ停止してから、再度、ionic serve
+新規イベントを入力して、登録ボタンをクリックすると、Firestoreにイベントが登録されて、HomePageへ移動した。
+{{:z_blog:2018:pasted:20181009-163501.png}}
+===== Eventのリスト表示 =====
+event-list.page.html
+{{:z_blog:2018:pasted:20181009-163755.png}}
+event-list.page.ts
+{{:z_blog:2018:pasted:20181009-164012.png}}
+リロードすると、データが反映された。
+続いて、Event Detailページ
+event-detail.page.ts
+{{:z_blog:2018:pasted:20181009-164133.png}}
+event-detail.page.html
+{{:z_blog:2018:pasted:20181009-164257.png}}
+Add Guestsのところに、"Tom"と入力してADD GUESTをクリックするとFirestore上に下記のように追加された。
+{{:z_blog:2018:pasted:20181009-164610.png}}
+event-detail.page.scss
+{{:z_blog:2018:pasted:20181009-164847.png}}
+どこが変化したのかよくわからない。
+また、上記のGuestは表示するページがあるのかどうかは、今のところ不明。
+===== Firestore Transactionの作成 =====
+トランザクション、、、難しい・・・
+.then(()=> { } を用いればよいらしい。。。
+{{:z_blog:2018:pasted:20181009-165244.png}}
+===== CameraとFirebase Storageの利用 =====
+event-detail.page.html　の一部
+<code>
+<ion-row>
+<ion-col size="4">
+  <ion-button (click)="takePicture()">
+    <ion-icon slot="icon-only" name="camera"></ion-icon>
+  </ion-button>
+</ion-col>
+</ion-row>
+<span *ngIf="guestPicture">Picture taken!</span>
+</code>
+event-detail.page.ts　と、 event.service.ts を変更。
+まだ、実機で試せてはいない。
+ここまでのソースコード
+https://github.com/adash333/ionic4-firestore-camera-crud/commit/7395396e777b7a6873fc9c6dddb5594eb2438a29
+===== 写経元サイト =====
+JAVEBRATT
+Ionic Framework Tutorials
+Build your first Firestore powered Ionic App
+https://javebratt.com/firebase-free-course/
+https://github.com/javebratt/master-firestore-event-manager

z_blog/2018/181009_ionic4_firestore_capacitor_camera2.1539069458.txt.gz · 最終更新: 2018/10/09 by adash333