RESTAPIとIonic3の写経にtryしてみる

2017年7月6日

以下のサイトを、Ionic3で写経してみたい。

https://www.djamware.com/post/58b6e81980aca7432b5ff57a/ionic-2-consuming-rest-api

ありがたいことに、ソースコードもある。

https://github.com/didinj/Ionic2ConsumingRestApi

こんなサイトがあったなんて知らなかった。

https://jsonplaceholder.typicode.com/

（環境）
Windows 8.1
Ruby2.3.3-p222
SQLite 3.18.0
DevKit mingw64-64-4.7.2
Node.js v6.10.2
Rails 5.1.0
Git 2.8.1

（１）Ionic3アプリの作成

ionic start IonicRestCall –blank

cd IonicRestCall
ionic serve

（２）RestServiceの作成

ionic g provider RestService

src/app/app.module.ts に、自動的に、RestServiceをimportしてくれている。

（３）src/provicers/rest-service/rest-service.ts の変更

data と、 apiUrl を定義して、さらに、getUsers()関数を定義する。

(変更前)

(変更後)

（４）app/pages/home/home.ts　の変更

(変更前)

(変更後)

(参考)https://forum.ionicframework.com/t/no-provider-for-http-error-in-ionic-2/85762/15

src/app/app.module.ts

(変更前)

(変更後)

（５）src/pages/home/home.html の変更

(変更前)

(変更後)

ここまでは今までもできている。次以降が問題なのである。

（６）save new user to the REST API

ここで、ページ移動が苦手なので、最初から作り直す。

ionic start ionic3-RestAPI

で、tabモードで作成後、上記と同様に、getUsers()まで行う。

（６－１）app/pages/about/about.html の変更

(変更前)

(変更後)

（６－２）rest-service.ts の変更

saveUser(data)関数の定義

(変更前)

(変更後)

（６－３）src/pages/about/about.ts の変更

import { RestServiceProvider }
user の定義
saveUser()　関数の定義

(変更前)

(変更後)

入力してみる

なんかうまくいかない。。。

（７）DELETE機能

home.html

(変更後)

さらに変更

home.ts

(変更後)

rest-service.ts

(変更後)

 

 

（参考）

https://jinalshahblog.wordpress.com/2017/01/18/crud-operations-in-ionic2-to-do-application/

 

 

 

途中