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

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

https://www.joshmorony.com/building-a-notepad-application-from-scratch-with-ionic/

ソースコード

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

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

C:/ionic4/　フォルダをVisualStudioCodeで開き、Ctrl+@　でターミナルを開き、以下を入力。

ionic start ionic-notepad blank --type=angular
// 何か聞かれたら、2回ともN + Enter とする。

C:/ionic4/ionic-notepad/　フォルダをVisualStudioCodeで開き、Ctrl+@　でターミナルを開き、以下を入力。

ionic serve

ionic g page Detail
ionic g service services/Notes

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

src/app/app-routing.module.ts

（変更前）

（変更後）

src/app/home/home.page.html

（変更前）

（変更後）

src/app/home/home.page.ts

（変更前）

（変更後）

src/app/interfaces/note.ts を新たに作成

（変更前）

（変更後）

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

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

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

npm install @ionic/storage --save

ionic serve しておく。

src/app/app.module.ts

(変更前)

(変更後)

src/app/home/home.page.ts

(変更前)

(変更後)

参考：https://beta.ionicframework.com/docs/api/alert/

src/app/home/home.page.html

(変更前)

(変更後)

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

src/app/detail/detail.page.ts

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

アドレスは、http://localhost:8100/notes/1　となっています。
(変更前)

(変更後)

src/app/detail/detail.page.html

(変更前)

(変更後)

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

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

ここだったらしい。。。

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

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

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

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

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

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

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

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

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

npm run build --prod
www/

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

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