====== Ionic4とFirestoreでCRUD ======

FirebaseとFirestoreの違いは、「料金体系の違い」と、<wrap hi>「Firestoreの方が検索しやすい」</wrap>ことにあるようです。


===== Ionic4とFirestoreでCRUD =====
以下のサイトは、Angular6とFirestoreでチャットアプリを作成しながら、AngularFire2を用いてCRUDを実装する方法を解説しています。日本語です！

https://qiita.com/Yamamoto0525/items/437a2884c0c51f5a3af8\\
{{:pasted:20181008-070016.png}}

上記サイトをIonic4で写経する場合

<code>
ionic start ionic4-firestore-crud blank --type=angular
npm install -g firebase-tools@4.2.1
npm install firebase @angular/fire --save
// src/environments/environment.ts にfirebaseのAPI KEYなどを入力
// src/app/app.module.ts にenvironmentとangular/fireをimport
</code>

{{:pasted:20181008-125102.png}}
===== Firestoreについて =====
https://qiita.com/subaru44k/items/a88e638333b8d5cc29f2\\
@subaru44k
2018年06月09日に更新
Firebase Cloud Firestoreの使い方



===== AngularFire2公式サイト =====
FirebaseやFireStoreを利用するためのツールとして、AngularFire2というものがありますが、必ずしも利用する必要はありません。

AngularFire2を利用するかどうかは好みの問題だと思われます。

英語です。

https://github.com/angular/angularfire2/tree/master/docs

===== AngularFirestoreのCollectionの利用例（リスト表示） =====

https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md


FireStoreでのデータ入力

{{:pasted:20181008-093858.png}}


Ionic4でのtodo.page.htmlと、todo.page.ts (FirebaseのAPIキーなどは入力済みとする)

{{:pasted:20181008-094122.png}}

{{:pasted:20181008-094205.png}}


===== Ionic4とFirestoreとCapacitorで写真アップロードつきCRUDアプリ =====
以下のサイトからメールアドレスを登録すると、capacitorを用いたカメラ画像を保存できるIonic4アプリ作成方法についての、無料のPDFファイルをダウンロードすることができます。ソースコードもhttps://github.com/javebratt/master-firestore-event-managerにアップロードしてくださっています。

https://javebratt.com/firebase-free-course/
{{:pasted:20180930-132234.png}}

こちらの本を写経してみたいと思います。

http://twosquirrel.mints.ne.jp/?p=28337

http://i-doctor.sakura.ne.jp/dokuwiki/doku.php/z_blog/2018/181008_ionic4_firestore_capacitor_camera#ionic4_firestore_capacitor_camera


===== Angular6とFirestoreで画像の追加と削除 =====


https://grokonez.com/frontend/angular/how-to-integrate-angular-6-firebase-tutorial-angularfire2-v5


https://grokonez.com/frontend/angular/angular-6-firebase-tutorial-upload-display-delete-files-from-firebase-storage




===== Ionic4とFirestoreでCRUD =====
英語ですが、以下のサイトが分かりやすいです。（ソースコードあり）

https://javebratt.com/crud-ionic-firestore/
{{:pasted:20180930-131233.png}}

ソースコード

https://github.com/javebratt/crud-firestore-ionic-v4

写経してみました。上記とほとんど同じですが、ソースコードを置いておきます。

https://github.com/adash333/ionic4-firestore-sample2