Rails5APIとIonic3でTodoアプリ

2017年7月2日

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

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

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

Todo.create!([
  { title: "テスト1", description: "内容1" },
  { title: "テスト2", description: "内容2デース" },
  { title: "test3", description: "内容3なのだ" }
])

bundle install

rails db:migrate
rails db:seed

rails s

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

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

（２）ionic3アプリの作成

cd front

ionic start ionic3

// tabs　を選択、何か聞かれたらEnterを押す

cd ionic3

ionic serve

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

（３）モデルの作成

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

src/models/todo.ts

export class Todo {
  id: number;
  title: string;
  description: string;
}

（４）TodoServiceプロバイダーの作成

ionic g provider TodoService

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

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

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

(変更前)

(変更後)

（さらに変更）

（５）todo　 componentの作成

ionic g component todo

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

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

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

(変更前)

(変更後)

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

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

(変更前)

(変更後)

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

（６）create の実装

home.html

home.ts

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

ionic g page AddItem

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

add-item.ts

todo-service.ts

（７）deleteの実装

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

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

Updateはそのうち、、、

（８）ItemDetailページ

ionic g page ItemDetail

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

item-detail.ts

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

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

todo-service.ts

item.detail.html

item-detail.ts

他人のコードをぶっちぎってはコピペし、ぶっちぎってはコピペしているので、ぐちゃぐちゃだし、正しいかどうかも分からない（特に、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

（９）少し訂正

●Rails APIサーバ

rails new todo_api --api -T
cd todo_api
(Gemfileの編集)
bundle install
rails generate scaffold todo title:string description:string
rails db:migrate
(db/seeds.rb の編集)
rails db:seed

（config/application.rb の編集）
rails s

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

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

git add .
git commit -m "heroku"
heroku login
heroku create
git push heroku master
heroku run rake db:migrate // これを忘れやすい！

heroku run rake db:seed

heroku open

●Ionic3

ionic start front_ionic3

cd front_inoic3
ionic serve

(src/models/todo.ts の作成)
ionic g provider TodoService

（todo-service.ts の変更）
（home.html と、 home.ts　の変更）

ionic g page AddItem

ionic g page ItemDetail

（add-item.html、add-item.ts、item-detail.html、item-detail.tsの編集）

(app.module.ts の変更)

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-ｘｘｘｘｘｘｘ.herokuapp.com/todos/null

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

（１０）Ionic3アプリのbuildとスマホにインストール

ionic cordova platform add android

ionic cordova build android

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

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

（参考）

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