スポンサーリンク

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

以下のサイトを、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

image_thumb_thumb_thumb_thumb

(1)Ionic3アプリの作成

ionic start IonicRestCall –blank

cd IonicRestCall
ionic serve


image

(2)RestServiceの作成

ionic g provider RestService

image

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

(3)src/provicers/rest-service/rest-service.ts の変更

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

(変更前)
image

(変更後)
image

(4)app/pages/home/home.ts の変更

(変更前)
image

(変更後)
image

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

src/app/app.module.ts

(変更前)
image

(変更後)
image

(5)src/pages/home/home.html の変更

(変更前)
image

(変更後)
image

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

(6)save new user to the REST API

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

ionic start ionic3-RestAPI

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

image

(6-1)app/pages/about/about.html の変更

(変更前)
image

(変更後)
image

(6-2)rest-service.ts の変更

saveUser(data)関数の定義

(変更前)
image

(変更後)
image

(6-3)src/pages/about/about.ts の変更

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

(変更前)
image

(変更後)
image

入力してみる

image

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

(7)DELETE機能

home.html

(変更後)
image

さらに変更

image

home.ts

(変更後)
image

rest-service.ts

(変更後)

 

 

(参考)

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

 

 

 

途中

スポンサーリンク