====== Ionic4+firestore+capacitor(camera)アプリの作成の練習（２）CRUDの実装 ======

前回：[[181008_ionic4_firestore_capacitor_camera]]

===== Event Serviceの作成 =====

  -新規eventの作成create
  -eventsリストの表示
  -eventsリストから、特定のeventを表示

src\app\services\event\event.service.ts
{{:z_blog:2018:pasted:20181009-162157.png}}


参考：https://qiita.com/miyae/items/6988c1b61b76b4938ae6\\
@miyae
2017年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