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.
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'
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
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:
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')
Let’s try that index action again:
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.Share