Ionic + Rails API (JPN)

Question 1

Rails: Create the Rails Backend

Answer 1

$rails new agenda_backend -T

Question 2

Rails: Create the Person Model

Answer 2

$rails g model person name phone

Question 3

Rails: Seed the test database seed.rb

Answer 3

Person.create(name: ‘Laura’, phone: ‘1800-3137977’)
Person.create(name: ‘Jeniffer’, phone: ‘1800-123456’)
Person.create(name: ‘Tom’, phone: ‘1800-654321’)

Question 4

Rails: Add routes to Persons

Answer 4

namespace :api, constrains: { format: :json } do
get ‘people’ => ‘agenda#all’
end

Question 5

Rails: Install Rack-Cors Gem (CORS = Cross origin reference sharing)

Answer 5

gem ‘rack-cors’, :require => ‘rack/cors’

Question 6

Rails: Config the CORS middleware layer config > application.rb

Answer 6

config.middleware.use Rack::Cors do
    allow do
         origins '*'
         resource '*', :headers => :any, :methods => [ :get, :post, :options, :delete]
    end
end

Question 7

Rails: Install Serializer Gem

Answer 7

gem ‘active_model_serializers’

Question 8

Rails: Generate serializer

Answer 8

$rails g serializer person

Question 9

Rails: Config Serializer app > serializers > person_serializer.rb

Answer 9

class PersonSerializer

Question 10

Rails: Generate API Controller

Answer 10

$rails g controller api/agenda all –no-helper – no-assets

Question 11

Rails: Configure API Controller

Answer 11

module Api
  class Api::AgendaController

Question 12

Rails: API JSON Test

Answer 12

$ rails s

$ curl -X GET ‘http://localhost:3000/api/people’

Question 13

Ionic: Generate ionic app

Answer 13

$ ionic start agenda blank

Question 14

Ionic: Add iOS/Android platform

Answer 14

$ ionic platform add ios

$ ionic platform add android

Question 15

Ionic: Config People_Controller.js www > js > controllers > people_controller.js

Answer 15

(function() {
var app = angular.module(‘peopleController’, []);
app.controller(‘PeopleController’,
function($scope, $http) {
$scope.names = [‘Jeniffer’, ‘Jackson’, ‘Jose’];
} ); })

Question 16

Ionic: Depency injection

Answer 16

www > js > app.js
angular.module(‘starter’, [‘ionic’, ‘peopleController’])

index.html

Question 17

Ionic: Ng-Repeat for PeopleController

index.html

Answer 17

<ul class="list">
     <li class="item">
        {{name}}
     </li>
   </ul>

Question 18

Rails: Find Routes for API

Answer 18

$rake routes

Question 19

Ionic: Add route to PeopleController

people_controller.js

Answer 19

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.'); }); } );

Question 20

Ionic: Update the interation loop in index.html

Answer 20

<ul class="list">
      <li class="item">
         <h3>{{person.name}}</h3>    
         <p>{{person.phone}}</p>
       </li>
    </ul>

Question 21

Ionic: Emulate and Test

Answer 21

$ ionic serve
$ ionic emulate/run ios
$ ionic emulate/run android