Rails5APIとIonic3でTodoアプリ

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

http://yasun.hatenablog.jp/entry/2016/12/21/235334

ソースコード (非常にありがたい!)
https://github.com/yassun/todo-rails-xxx-js

=>Ionic3に書き換えようと努力した軌跡のソースコード(ぐちゃぐちゃ)

https://github.com/adash333/rails5_todo_api

https://github.com/adash333/ionic3_todo_front

(環境)
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

(1)Rails5APIは、下記ソースコードをダウンロードしてから、db/seeds.rb を以下のように書き換える。

https://github.com/yassun/todo-rails-xxx-js (ソースコード)

image

により、ブラウザで http://localhost:3000 を開くと、Railsの画面が表示される。

また、http://localhost:3000/todos を開くと、以下のような画面になる。

image

(2)ionic3アプリの作成

image

以下、front/ionic3/ 以下とする。

(3)モデルの作成

src/models/ フォルダを作成し、その中に、todo.tsを作成し、以下をコピペして保存。

src/models/todo.ts

image

(4)TodoServiceプロバイダーの作成

sr/providers フォルダ、src/providers/todo-service フォルダと、その中に、src/providers/todo-service/todo-service.ts ファイルが作成される。

image

それと同時に、自動的に、src/app/app.motulde.tsに、ちゃんと、TodoServiceProvider をimportして、providers: のところにも設定してくれている。

image

src/providers/todo-service/todo-service.ts の書き換え

(変更前)
image

(変更後)
image

(さらに変更)
image

(さらに変更)
image

(5)todo  componentの作成

src/ フォルダの下に、components/ フォルダ、さらにその下に、 todo/ フォルダが作成され、以下のような4つのファイルが作成される。

image

image

また、自動的に、src/app/app.module.ts にも、TodoComponentがimportされる

image

src/components/todo/todo.html の変更

(変更前)
image

(変更後)
image

(参考 というかコピペ)
https://github.com/yassun/todo-rails-xxx-js/blob/master/front/angular2/app/components/todo.component.html.ts

src/components/todo/todo.ts の変更

(変更前)
image

(変更後)

(参考)
No provider for Http! error in ionic 2
image

(6)create の実装

home.html
image

home.ts
image

以下のコマンドでAddItemページを作成

src/pages/add-item/add-item.html
image

add-item.ts
image

todo-service.ts
image
image

(7)deleteの実装

image

何をやっているのかさっぱり分からないが、これでやっと、

CRUDのうち、CRとDができるようになった。

Updateはそのうち、、、

(8)ItemDetailページ

src/pages/item-detail/item-detail.html
image

item-detail.ts

image

詳細を見ることはできたが、どうしても、これをupdateすることができなかった。。。。とほほ。

=> ぐちゃぐちゃだが、できたような気がする。。。

todo-service.ts
image

item.detail.html
image

item-detail.ts
image

他人のコードをぶっちぎってはコピペし、ぶっちぎってはコピペしているので、ぐちゃぐちゃだし、正しいかどうかも分からない(特に、this とか本当にさっぱりわからなん。)が、なんとか、CRUDができたような気がする。

結構な頻度で、

http:/localhost:3000/todos/null

というエラーが出るのだが、原因は全く分からない。

とりあえず、ソースコード(正しいか不明、とても汚い)をを以下にアップロードしておく。=>なぜかfront/ionic3がgitにpushできなかったので、あとで最初から作り直した。

https://github.com/adash333/rails5_todo_api

https://github.com/adash333/ionic3_todo_front

(9)少し訂正

●Rails APIサーバ

Herokuにデプロイする場合は、以下を参照。(Gemfileと、config/database.ymlを変更)

http://qiita.com/_naonosuke/items/e4cdf3b8178e976c8e67

●Ionic3

Railsを、Herokuにデプロイする場合は、data-service.ts のUrlの部分を変更する。

RailsをHerokuにデプロイしたところ、updateやdeleteが、以下のようなエラーになってしまってダメであった。。。とほほ。

Runtime Error

Uncaught (in promise): Response with status: 404 Not Found for URL: https://infinite-ocean-xxxxxxx.herokuapp.com/todos/null

なぜか、add-item.ts を以下のように変更することでうまくいくようになったのかもしれない。。。

image

image

(10)Ionic3アプリのbuildとスマホにインストール

image

出来上がったファイルを自分のスマホにメールして、インストール

Screenmemo_share_2017-07-08-05-10-38

やはり、目的のアプリを作成できると、うれしい。(コピペばかりなので、コードの理解できていませんが、、、)

(参考)

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

「Angular 2」のHTTPクライアント機能で非同期HTTP通信を使いこなす
次世代Webアプリケーションフレームワーク「Angular」の活用 第6回
WINGSプロジェクト  吉川 英一[著] / 山田 祥寛[監修] 2017/02/28 14:00
https://codezine.jp/article/detail/10009

HTML5テクニカルノート

Angular 2入門 07: HTTPサービスでデータを追加・削除する

02 HTTPサービスでデータを除く

http://www.fumiononaka.com/Business/html5/FN1701008.html

Angular + RxJS + WebSocket で チャットアプリを作る – Subject 利用サンプル
angular_high
2017年05月08日  和田祐介(16)  76
http://www.concretepage.com/angular-2/angular-2-http-post-examplehttp://dev.classmethod.jp/client-side/angular-rxjs-websocket-chat/

Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです!

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする