RailsとIonicの組み合わせってできるのかなと思っていたところ、参考になる動画があったので勉強させてもらいました。
rails new
まずはrails newコマンドで必要なファイルを作成します。
$ rails new agenda_backend -T
『-T』というのは『--skip-test-unit』の省略形です。
cdコマンドで移動
$ cd agenda_backend
rails gコマンドでModelを作成
$ rails g model person name phone
rake db:migrate
DBのマイグレーションを行います。
$ rake db:create $ rake db:migrate
DB seedファイルの編集
db > seeds.rbを編集します。
Person.create(name: 'Laura', phone: '1800-3137977') Person.create(name: 'Jeniffer', phone: '1800-123456') Person.create(name: 'Tom', phone: '1800-654321')
編集したら次のコマンドを実行
$ rake db:seed
実行後は『rails c』コマンドでクエリを実行して確認します。
$ rails c irb(main):001:0> Person.count irb(main):002:0> Person.first
configファイルの編集
config > rotues.rbファイルを編集します。
AgendaBackend::Application.routes.draw do namespace :api, constrains: { format: :json } do get 'people' => 'agenda#all' end end
rack-corsの準備
gemファイルに以下の内容を追加します。
gem 'rack-cors', :require => 'rack/cors'
追加したら次のコマンドを実行
$ bundle
application.rbの編集
config > application.rbを編集します。
config.middleware.use Rack::Cors do allow do origins '*' resource '*', :headers => :any, :methods => [ :get, :post, :options, :delete] end end
active_model_serializersを準備する
Gemに次の内容を追加します。
gem 'active_model_serializers'
追加が終わったら次のコマンドを実行
$ bundle
rails g serializer person
次のコマンドを実行します。
$ rails g serializer person
person_serializer.rbの編集
app > serializers > person_serializer.rbの内容を編集します。
class PersonSerializer < ActiveModel::Serializer attributes :id, :name, :phone end
rails g controller api/agenda all
次のコマンドを実行します。
$ rails g controller api/agenda all --no-helper -- no-assets
ちなみにオプションを付け忘れて実行してしまった場合は次のコマンドで削除できます。
$ rails destroy controller api/agenda all
agenda_controller.rbの編集
app > controller > api > agenda_controller.rbを編集します。
module Api class Api::AgendaController < ApplicationController respond_to :json def all render json: Person.all end def default_serializer_options { root: false } end end end
これでBackend側の準備が完了しました。試しにrails sコマンドを実行してlocalhostにアクセスできるようにします。
$ rails s
もうひとつターミナルを開いて次のコマンドを実行するとレコードにアクセスできます。
$ curl -X GET 'http://localhost:3000/api/people'
つづいてionic側の準備を行います。
Ionicの準備
どこでもいいのですが、作業ディレクトリに移動します。(今回はデスクトップになっています)
$ cd desktop
ionicコマンドでファイル作成
次のコマンドでテンプレートファイルを作成できます。
$ ionic start agenda blank
このように必要なファイルを用意できました。
cdコマンドで作業ディレクトリに移動します。
$ cd agenda
ionic platformの宣言
次のコマンドでiosで動作させることを宣言します。
$ ionic platform add ios
ionic serveでテスト完了を準備
次のコマンドでテスト完了を準備します。
$ ionic serve
これで準備OKです。
index.htmlの編集
www > index.htmlを編集します。
<ion-header-bar class="bar-stable"> <h1 class="title">My Ageda</h1> </ion-header-bar>
タイトル部分が正しく変更されることを確認します。
リストの表示
試しにリスト表示を行ってみます。
<ion-content> <ul class="list"> <li class="item" ng-repeat="name in ['Ulisses', 'Michael', 'Laura']"> {{name}} </li> </ul> </ion-content>
固定値ですがこれでリストを表示できます。
people_controller.jsの作成
www > js > controllers > people_controller.jsという感じでファイルを作成します。
(function() { var app = angular.module('peopleController', []); app.controller('PeopleController', function($scope, $http) { $scope.names = ['Jeniffer', 'Jackson', 'Jose']; } ); })
app.jsの編集
www > js > app.jsを編集
angular.module('starter', ['ionic', 'peopleController'])
リスト値をcontrollerから取得
index.htmlを編集します。まずはscriptタグの追加から。
<script src="js/controllers/people_controller.js"></script>
それとリスト部分の変更です。
<ion-content> <ul class="list" ng-controller="PeopleController"> <li class="item" ng-repeat="name in names"> {{name}} </li> </ul> </ion-content>
これでリスト値をコントローラから取得するようにできます。
rake routesの実行
rails側に戻って次のコマンドを実行します。
$ rake routes
実行したらrails sコマンドを実行して再度ionicに戻ります。
people_controller.jsの編集
app.controller('PeopleController', function($scope, $http) { var url = 'http://localhost:3000/api/people'; $http.get(url) .success(function(people) { $scope.people = people; }) .error(function(data) { console.log('server side error occurred.'); }); } );
index.htmlを編集
<ion-content> <ul class="list" ng-controller="PeopleController"> <li class="item" ng-repeat="person in people"> <h3>{{person.name}}</h3> <p>{{person.phone}}</p> </li> </ul> </ion-content>
これでRailsのDBから情報を取得して、ionic側で表示ができます。
ionic emulate ios
次のコマンドを実行するとエミュレータを起動できます。
$ ionic emulate ios
以上がRailsをBackEnd側に使用したionicアプリ作成の流れです。