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

以下のページを写経してみたい。

https://devdactic.com/ionic-4-firebase-angularfire/
{{:z_blog:2018:pasted:20181019-231027.png}}

===== 開発環境 =====

<code>
Windows 8.1 Pro
VisualStudioCode
git version 2.16.1.windows.4

Node v8.12.0
npm 6.4.1
Ionic (Ionic CLI) 4.2.0
Ionic Framework @ionic/angular 4.0.0-beta.13
</code>
===== Ionic4アプリの作成 =====

C:/ionic4/ フォルダを、VisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力

<code>
ionic start ionic4-firestore-crud blank --type=angular
//何か聞かれたら、2回とも、N + Enter
</code>
{{:z_blog:2018:pasted:20181019-232551.png}}

VisualStudioCodeを閉じて、C:/ionic4/ionic4-firestore-crud/ フォルダを、VisualStudioCodeで開き、Ctrl+@でコマンドプロンプトを開き、以下を入力

<code>
ionic serve
</code>

{{:z_blog:2018:pasted:20181019-234505.png}}

===== firebase, angularfire2のインストールとtodoDetails page、todo serviceの作成 =====

<code>
npm install firebase angularfire2 --save
ionic g page pages/todoDetails
ionic g service services/todo
</code>

{{:z_blog:2018:pasted:20181020-000151.png}}

{{:z_blog:2018:pasted:20181020-000540.png}}

src/app/app-routing.module.ts　を編集し、`details/:id`　で、各detailページへ行けるように設定する。

(変更前)
{{:z_blog:2018:pasted:20181020-004718.png}}

(変更後)
{{:z_blog:2018:pasted:20181020-004924.png}}
===== firebaseのionicアプリへの設定 =====

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

のように、firebaseアプリを新規作成し、Firebaseの設定を、src/environments/environment.ts　にコピペする。

{{:z_blog:2018:pasted:20181020-002240.png}}


src/environments/environment.ts

(変更前)
{{:z_blog:2018:pasted:20181020-001507.png}}

(変更後)
{{:z_blog:2018:pasted:20181020-002557.png}}

src/app/app.module.ts

(変更前)
{{:z_blog:2018:pasted:20181020-002838.png}}

(変更後)
{{:z_blog:2018:pasted:20181020-004520.png}}

import文が、2017年以前と変更になっているので注意。

<code>
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
</code>

参考：https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md

なお、firebaseのセキュリティールールは、一時的に、以下のように、''allow read, write;'' としておく。

（後で、必ず戻しておく。）

{{:z_blog:2018:pasted:20181020-005403.png}}

ここまでのソースコード

https://github.com/adash333/ionic4-firestore-crud/commit/57ac9aa0fa371f050ba922f7cda63e222b4f6fb6

===== todo serviceの設定 =====

FirestoreにCRUDするためのコードを記載する。

src/app/services/todo.service.ts

(変更前)
{{:z_blog:2018:pasted:20181021-024120.png}}

(変更後)
{{:z_blog:2018:pasted:20181021-033610.png}}

{{:z_blog:2018:pasted:20181021-033626.png}}


import文が2018年から少し変更になっている。

<code>
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
</code>

参考：https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md
{{:z_blog:2018:pasted:20181021-033813.png}}



===== home.page.tsの変更 =====
src/app/home/home.page.ts

(変更前)
{{:z_blog:2018:pasted:20181021-203805.png}}

(変更後)
{{:z_blog:2018:pasted:20181021-205142.png}}

src/app/home/home.page.html

(変更前)
{{:z_blog:2018:pasted:20181021-212453.png}}

app/home/home.page.scss
{{:z_blog:2018:pasted:20181021-212952.png}}

===== todo-details.page.tsの変更 =====

src/app/pages/todo-details/todo-details.page.ts

(変更後)
{{:z_blog:2018:pasted:20181021-220931.png}}

src/app/pages/todo-details/todo-details.page.html

(変更前)
{{:z_blog:2018:pasted:20181021-221016.png}}

(変更後)
{{:z_blog:2018:pasted:20181021-221925.png}}

後日、ionic serveし直したら、以下のようなエラーになってしまった。

{{:z_blog:2018:pasted:20181022-225957.png}}

写経したつもりであったのだが、とりあえず、ルーティングの記載方法を変更してみる。

(変更後)
{{:z_blog:2018:pasted:20181022-233555.png}}

参考：[[ionic4:ionic4でルーティング|Ionic4でルーティング]]

<code>
// Ionic4でのルーティングの記載方法
import { Router } from '@angular/router';
（省略）
constructor(private router: Router) {}
(省略)
this.router.navigateByUrl('/home');
</code>



===== Netlifyにデプロイ =====
<code>
npm run build --prod
www/
</code>

自分のスマホで確認。

使用方法がよく分からないアプリだが、とりあえず、タスクを作成し、編集し、削除（スライドさせるのだが、なんかうまくいかない）は、なんとかできるようになったのか。。。

{{:z_blog:2018:pasted:20181023-001916.png}}

createdAtが表示されないので、変だなと思っていたら、home.page.htmlにタイプミスがあった。

訂正して、日付の記載方法も少し変更すると、以下のような表示になった。

{{:z_blog:2018:pasted:20181023-002930.png}}



===== ソースコード =====

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



===== 写経元サイト =====

https://devdactic.com/ionic-4-firebase-angularfire/