Rails5＠HerokuとIonic3アプリで通信（１）

2017年6月29日

前回、自分のパソコン内で、Rails5 APIと、Angular4で通信して、Rails5の内容を、Angular4で受け取って表示した。

http://twosquirrel.mints.ne.jp/?p=18532

今回は、この続きで、
（１）Rails5 APIを、Herokuにデプロイ
（２）Angular4アプリを、Ionic3アプリで書き直して、androidアプリをbuild
（３）スマホにIonic3アプリをインストールして、Heroku上のRails5APIと通信して表示
に書き換えて、やってみたい！

（参考）
angular4とrails5をスッと使ってみる
kanadai
2017年05月06日に更新
http://qiita.com/kanadai/items/0034f0c0fe26efab2f2b

Getting Started with Rails 5.x on Heroku
Last updated 08 May 2017
https://devcenter.heroku.com/articles/getting-started-with-rails5

（環境）
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 

＜ローカル（開発環境）のフォルダの構成＞
C:/angular4/testApp/ フォルダの中に、
test_api/ フォルダ　：　Rails5 APIサーバを作成
test-web-ionic3/ フォルダ　：　ionic3アプリを作成

＜production環境のフォルダの構成＞
Heroku : Rails5 APIサーバをデプロイ
androidスマホ :  ionic3アプリをインストール

＜ソースコード＞
Rails5 API　：　https://github.com/adash333/rails5_test_api
Ionic3　　　：　https://github.com/adash333/test-web-ionic3

（１）Rails5 APIを、Herokuにデプロイ

●ローカルでRails5APIの作成

rails new test_api --api -T
cd test_api
rails db:create
 
cd test_api
rails generate scaffold comment name:string
rails db:migrate

test_api/db/seed.rb を、以下に書きかえ

Comment.create!([
  { name: "I'm Kanadai." },
  { name: 'カナダイです' }
])

seed投入して、rails server する。

rails db:seed

rails server

ブラウザで、http://localhost:3000/comments.json　を開く。

一旦、Ctrl+C、y, Enterでrailsサーバを停止。

Gemfileを以下に書き換えてから、bundle install

source 'https://rubygems.org'
 
git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end
 
gem 'rails', '~> 5.1.0'
gem 'sqlite3'
gem 'puma', '~> 3.7'
gem 'rack-cors'
 
group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
 
group :production do
  gem 'pg'
end
 
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

git init
git add .
git commit -m "initialize repository"

●Rails5APIをHerokuにデプロイ

Heroku Toolbeltのインストール

https://devcenter.heroku.com/articles/heroku-cli#windows

上記のWindows の64-bitをダウンロードしてインストール。

どさくさにまぎれて、Git 2.8.1もインストールされる。

Herokuにメールアドレスとパスワードを登録しておく。
（このメールアドレスとパスワードを控えておく。）

https://www.heroku.com/home

VisualStudioCodeのcmd.exeで、以下のコマンドを実行。

heroku login
//(メールアドレスとパスワードを聞かれるので入力)
git remote show heroku
git push heroku master

sqlite3がなんたらのエラー。

Gemfileの変更

bundle install
git add .
git commit -m "modify Gemfile"
git push heroku master

heroku run rake db:migrate
heroku run rake db:seed
heroku open

以下のようなページが出て焦るが、

URLの続きに、comments.jsonと入れてブラウザのを更新すると、ちゃんとjsonファイルが表示される。少し安心。

このアドレスをコピーして、控えておく。あとで、ionic3アプリのhome.tsにコピペする。

（参考）
git push herRails 5 (非beta) + Heroku で作る、無料APIサーバ
dogwood008
2016年07月19日に投稿
http://qiita.com/dogwood008/items/ed7c82413500c2557ebb

（２）Angular4アプリを、Ionic3アプリで書き直して、androidアプリをbuild

testApp/ フォルダ下で、右クリック　＞　Open with Code で、VisualStudioCodeを開く。
Ctrl+@で、cmd.exeの画面を開き、以下のコマンドを入力。

ionic start test-web-ionic3
// 何か聞かれたら、とりあえず、Enterを押しておく。
cd test-web-ionic3
ionic serve

自動的にブラうザが開き、以下のような表示になる。

test-web-ionic3/src/app/app.module.ts

(変更前)

(変更後)

test-web-ionic3/src/pages/home/home.ts

(変更前)

(変更後)　http.get(‘xxxxx’)のxxxxxxのところには、（１）の最後の方の、xxxxx.herokuapp.com/comments.jsonをコピペする。

test-web-ionic3/src/pages/home/home.html

(変更前)

(変更後)

ちゃんと、Herokuから、jsonを受け取れているようである。

Ctrl+C, y, Enterでionicサーバを停止。

ionic cordova platform add android
ionic cordova build android

途中で何か聞かれたらEnterボタンを押しておく。

出来上がったapkファイル(約4MB)を自分のandroidスマホにメールして、インストール。

（３）スマホにIonic3アプリをインストールして、Heroku上のRails5APIと通信して表示

arrows M03

うまくいったようである。うれしい。

結局、Rails5APIの方で、

gem ‘rack-cors’

が必要であったのかどうかは、私には分からない。面倒なので、検証していません。。。

（４）ソースコード

Rails5 API
https://github.com/adash333/rails5_test_api

Ionic3
https://github.com/adash333/test-web-ionic3

Rails APIのherokuのアドレスは、消去してしまったので、既に存在していないはずなので、ionicアプリを作成する場合には、test-web-ionic3/src/pages/home/home.tsの、
http.get(‘xxxxx’)のxxxxxxのところには、ご自身でデプロイしたheokuのアドレスxxxxx.herokuapp.com/comments.jsonをコピペしてお使いください。

次は、todoアプリをRails5@HerokuとIonic3アプリで構築してみたい。

（参考）
20161221
Rails 5 + Angular2 + TypeScript でTodoアプリを作った。
http://yasun.hatenablog.jp/entry/2016/12/21/235334

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