====== Ionic4でStorage利用でCRUDを写経してみる ======

以下のサイトを写経してみたい

https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/
{{:z_blog:2018:pasted:20181018-124000.png}}

ソースコード

https://github.com/joshuamorony/ionic-notepad
===== 開発環境 =====

<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 ionic-notepad blank --type=angular
// 何か聞かれたら、2回ともN + Enter とする。
</code>

C:/ionic4/ionic-notepad/　フォルダをVisualStudioCodeで開き、Ctrl+@　でターミナルを開き、以下を入力。
<code>
ionic serve
</code>
{{:z_blog:2018:pasted:20181018-124603.png}}

===== DetailPageの作成とNotesServiceの作成 =====

<code>
ionic g page Detail
ionic g service services/Notes
</code>
{{:z_blog:2018:pasted:20181018-125002.png}}

===== ルーティングの設定 =====

Ionic3とIonic4ではルーティングがだいぶ変わっている。

src/app/app-routing.module.ts

（変更前）
{{:z_blog:2018:pasted:20181018-125230.png}}

（変更後）
{{:z_blog:2018:pasted:20181018-125502.png}}

{{:z_blog:2018:pasted:20181018-125552.png}}

===== HomePageを編集（１） =====

src/app/home/home.page.html

（変更前）
{{:z_blog:2018:pasted:20181018-125753.png}}

（変更後）
{{:z_blog:2018:pasted:20181018-130032.png}}

src/app/home/home.page.ts

（変更前）
{{:z_blog:2018:pasted:20181018-130133.png}}

（変更後）
{{:z_blog:2018:pasted:20181018-130318.png}}

===== Note interfaceの作成 =====
src/app/interfaces/note.ts を新たに作成

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

===== Note service の実装と@inoic/storageのインストール =====

（変更前）
{{:z_blog:2018:pasted:20181019-084120.png}}

（変更後）
{{:z_blog:2018:pasted:20181019-085231.png}}

ionic serve し直すと以下のようなエラー。

@ionic/storage を利用するためには、@ionic/storageをnpm install --saveする必要があるとのこと。

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

Ctrl+C => y + Enterでサーバ停止し、ターミナルで以下を入力。

<code>
npm install @ionic/storage --save
</code>

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

ionic serve しておく。

src/app/app.module.ts

(変更前)
{{:z_blog:2018:pasted:20181019-180912.png}}

(変更後)
{{:z_blog:2018:pasted:20181019-181337.png}}

===== HomePageの編集 =====

src/app/home/home.page.ts

(変更前)
{{:z_blog:2018:pasted:20181019-181844.png}}

(変更後)
{{:z_blog:2018:pasted:20181019-204535.png}}

参考：https://beta.ionicframework.com/docs/api/alert/
{{:z_blog:2018:pasted:20181019-205643.png}}

src/app/home/home.page.html

(変更前)
{{:z_blog:2018:pasted:20181019-210028.png}}

(変更後)
{{:z_blog:2018:pasted:20181019-211912.png}}

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

タイトルを入力して、「保存」をクリックしても、保存されなかったので、Chromeの画面で、Ctrl+Shift+I でconsoleの画面でエラーを見たら、home.page.htmlのタイプミスが判明して、直したところ、以下のようにちゃんとリストが表示された。

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

===== NotesDetail Pageの実装 =====

src/app/detail/detail.page.ts

なお、下の画面は、トップページにリスト表示されるノートのうち、一番上のタイトルをクリックした後のページとしています。

アドレスは、http://localhost:8100/notes/1　となっています。
(変更前)
{{:z_blog:2018:pasted:20181019-215426.png}}

(変更後)
{{:z_blog:2018:pasted:20181019-220415.png}}

src/app/detail/detail.page.html

(変更前)
{{:z_blog:2018:pasted:20181019-220604.png}}

(変更後)
{{:z_blog:2018:pasted:20181019-222959.png}}

なぜか、リストの一部をクリックしても、Detailページに飛ばない。。。

Ctrl+Shift+I でconsole画面を見てみると、どうやら、Detailページのhtmlにタイプミスがありそう。

ここだったらしい。。。
{{:z_blog:2018:pasted:20181019-223139.png}}

<ion-textarea></ion-textarea>が、<ion-tetarea></ion-tetarea>になっていた。

（VisualStudioCodeのテキスト補完を利用して写経しているので、最初をタイプミスすると、後半も自動的にタイプミスとなる。）

直してみると、うまくいった。

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

書き込むだけで保存されるようである。

しかし、4行目以上になると、変な風になってしまう。

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

これをなんとかするためには、detail.page.scss を以下のように変更する必要があるらしい。

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

今回は、これでよしとする。

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

https://github.com/adash333/ionic4-notepad

===== Netlifyにデプロイしてスマホで確認 =====

[[https://www.netlify.com/|Netlify]]にログインして、https://github.com/adash333/ionic4-notepadを選択して、以下の設定を行い、デプロイしたものを、自分のAndroidスマホで確認。

<code>
npm run build --prod
www/
</code>

以下のように、なんとか、うまくいったようである。

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



===== 参考リンク =====


https://devdactic.com/ionic-4-firebase-angularfire/
===== 写経元サイト =====
https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/

ソースコード

https://github.com/joshuamorony/ionic-notepad