Building an App with Ember App Kit - Part 1

Oct 29, 2013

In this first installment, we'll introduce the app and get started with the Rails API.

Demo | Ember Code | Rails Code

In this series of posts, we are going to walk through the building of a simple CRUD app. We’ll use Rails API to build the server side and Ember, Ember Data 1.0.0-beta, and Ember App Kit to build the client. There are existing blog posts that cover much of this material. In particular, on the Ember side, bcardarella put together a fantastic series that is definitely worth checking out. However, much has changed in the Ember world. Ember Data has seen a major reboot and Ember App Kit has appeared on the scene to help us improve our ember workflow. An example app tying all of these things together should be helpful to a lot of people.

We are going to focus on understanding the basics, and for that reason, we are going to ignore a bunch of things like validations, relationships, error handling, and testing. Hopefully, you will still find it useful to see how all the parts fit together. I hope to cover some of the other topics in later posts, but for now, let’s concentrate.

I am going to assume some basic knowldge of Ember, Rails, and Ember App Kit. So, if you need some refreshing, I suggest doing that before continuing here. Everything is pretty basic and I will be walking through almost everything step-by-step but you’ll get a lot more out of it if you have at least a basic understanding of the ideas behind each. Rails and Ember resources are almost too numerous to mention. Ember App Kit on the other hand is pretty new. However @tarasm and @mixonic have each put together great introductions here and here.

The app we are going to build is very similar to that in bcardarella’s posts mentioned earlier. There will a single simple contact model that will consist of a name, twitter handle, and some notes and we will implement each of the CRUD actions on this model. That’s it. Part 1 here will focus on getting the Rails side of things set up. Alright, let’s get started.

Part 1 - Rails API Setup

gem install rails-api
rails-api new contacts-server --skip-sprockets --database=postgresql

Note that we are skipping sprockets here as this is a pure JSON API and will not be responsible for serving any assets. Also, note that i am using Postgres. This isn’t strictly necessary, but we will deploying to heroku so I’d recommend it.

Add thin and active_model_serializers to the gemfile:

1 source 'https://rubygems.org'
2 
3 gem 'rails', '4.0.0'
4 gem 'rails-api'
5 gem 'pg'
6 gem 'thin'
7 gem 'active_model_serializers'
bundle install

Active model serializers will be used to convert our models to JSON before sending them down to the Ember app.

Now let’s go ahead and create our contact model:

rails-api g model Contact name:string twitter:string notes:text

While we’re at it, let’s go ahead and create the corresponding serializer as well:

rails-api g serializer Contact

The serializer in this case is trivial:

1 class ContactSerializer < ActiveModel::Serializer
2   attributes :id,
3              :name,
4              :twitter,
5              :notes
6 end

That’s all there is to it. Go ahead and migrate the database:

1 rake db:migrate

Now we can start building out the actual API layer. Let’s begin with the routes:

1 ContactsServer::Application.routes.draw do
2   resources :contacts, :except => [:edit, :new]
3 end

No need for the edit and new routes since this is a pure JSON API.

Next, we can create the controller:

1 rails-api g controller contacts

For now, let’s just implement the index action so we can verify everything is working:

1 class ContactsController < ApplicationController
2   def index
3     render json: Contact.all
4   end
5 end

I like to use the Chrome Dev HTTP Client when I’m building out APIs. Let’s fire up the server and try to hitting this index action:

API Response

Well, there’s no data there but it looks like everything is working ok. Cool. Let’s add some seed data though so we at least have something to look at. In db/seeds.rb:

1 Contact.create!(name: 'Jason Kriss', twitter: 'jasonkriss', notes: 'Some notes')
rake db:seed

Let’s try that index action again:

API Response

Awesome! We are on our way. This seems like a good breaking point, so let’s stop here for now. In part 2, we’ll get started with the Ember side of things.