← Back to Blog Home

Data with Rails and Ember CLI, Part 1: Setting up the API

Web Apps
by: Laura Robb

Article summary

Earlier this year, I wrote a post about Getting Started with Rails and Ember CLI shortly after on-boarding onto my project. I didn’t originally plan on writing more tutorials with those technologies, but months after that guide was published, I received a comment asking if I would considering doing just that.

The topic specifically requested was sharing data between the Ember frontend and Rails backend. Because of the number of steps involved, I’ll actually be splitting the topic into two separate posts. For this post we’ll focus on setting up our Rails API.

This tutorial will assume you’ve completed my getting started guide, so please go follow along with that post if you have not yet done so. Once you’ve done that, you’re all set to dive in!

Rails Setup

Before we even think about sending a request to the server, we need to actually have something worth request. Our first step will be to generate and perform a rails migration that will create a table for us in the database. To do this, run the following commands:


$ rails g migration create_dogs name:string age:string breed:string
    invoke  active_record
    create    db/migrate/XXXXXXXXXXXXXX_create_dogs.rb
$ rake db:migrate
    == XXXXXXXXXXXXXX CreateDogs: migrating =======================================
    -- create_table(:dogs)
      -> 0.0010s
    == XXXXXXXXXXXXXX CreateDogs: migrated (0.0010s) ==============================

Now, we have a table for Dogs where we can store some information about our four-legged friends. Next, we need to set up a model and serializer.

Create the file app/models/dog.rb and simply define the Dog class, like so:


class Dog < ActiveRecord::Base
end

Then, create app/serializers/dog_serializer.rb and copy the following:


class DogSerializer < ActiveModel::Serializer
  attributes :id, :name, :age, :breed
end

With the model and serializer in place, we're ready to get our route and controller added.

Open up config/routes.rb and update it to look like this:


Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :dogs
    end
  end

  mount_ember_app :frontend, to: "/"
end

Now, create the controller in app/controllers/api/v1/dogs_controller.rb. For now, we'll just be adding an index method so we can get a list of all the dogs.


class Api::V1::DogsController < ApplicationController
  def index
    @dogs = Dog.all
    render :json => @dogs
  end
end

And with that, we have all the pieces in place to make our server request. It's still not very useful without any data, though, so let's fill our database with some tail-wagging goodness.

Generating Data

To pup-ulate the database (I’m sorry), we'll be creating our own rake task.

For this task we will be using FFaker to randomize some names for our dogs, so first you'll need to add this line to your Gemfile:


gem 'ffaker'

Next, create the task in lib/tasks/adopt_dogs.rake with the following code:


desc "Adopt all the dogs"
task adopt_dogs: :environment do
  breeds = [
    'Mutt',
    'Lab',
    'Pit Bull',
    'Beagle',
    'Rottweiler',
    'Husky',
    'Dachshund',
    'Pug',
    'German Shepherd',
    'Chihuahua',
    'Border Collie',
    'Greyhound',
    'Corgi',
    'Great Pyrenees',
    'Shar Pei',
    'Sheltie',
    'Poodle',
    'Great Dane',
    'Border Collie',
    'French Bulldog'
  ]

  ages = [
    'Puppy',
    'Young',
    'Adult',
    'Senior'
  ]

  15.times do
    Dog.create(name: FFaker::Food.ingredient, age: ages.sample, breed: breeds.sample)
  end
end

I promise that naming all of these dogs after food will pay off. To execute this task, all you need to do is run the following command:


$ rake adopt_dogs

Now it's like you have 15 new furry friends. Hooray! With the pups living safely in the database, it's finally time to retrieve them.

Fetching the Data

Start your server with the rails s command. If it was already running, you may need to restart it for everything to work properly. Once the server is up and running, visit http://localhost:3000/api/v1/dogs. You should now see a bunch of doggy-themed JSON spit out in the browser, like this:


[
  {
    id: 1,
    name: "Turnip",
    age: 13,
    breed: "Great Dane"
  },
  {
    id: 2,
    name: "Jujube",
    age: 1,
    breed: "Beagle"
  },
...
]

If you don't already use an extension or plugin to make JSON more readable in your browser, I recommend the JSONView extension for Chrome.

From this full list of dogs I hypothetically adopted, I was able to pick out a few favorites (though they are all still, in fact, good dogs). While Turnip the Great Dane and Jujube the Beagle both sound pretty awesome, my top pick has to be Cornish Game Hen the Pug. I told you that these food names were going to pay off.

To Be Continued...

In my next post (Data with Rails and Ember CLI, Part 2: Building the Front End), I'll show the steps involved in making requests and sending data from the frontend.

Related Posts