This post is part of my series about learning Ember.js with Ruby on Rails.
In previous post we explored what is Ember.js MVC and then did a high level overview of Ember Appkit Rails, in this post we’ll start to work on a project which we will use as reference for upcoming posts.
My mother lives in a small town in Colombia where she owns a store, access to credit cards in Colombia is really really hard, so stores and people in small towns tend to buy and sell on credit, trusting that people will come back and pay them (crazy, isn’t?).
During my last visit I was really shocked when I saw that she was keeping all her records on physical invoices in under an A-Z folder.
John Smith takes a t-shirt on credit, they would create an
invoice with his name, add a description (e.g. t-shirt) with the price
$25 and then throw that into the A-Z in the section for surnames
Later John returns to the store and makes a partial payment (e.g.
$10) or pays the whole thing.
This approach is horrible, insecure, my mother doesn’t know how much is people really owing her, she can’t have insights, etc.
Let’s then build an App for my mother where she can keep her records, the app name will be
facturas which means
invoices in Spanish.
Starting the project.
For this project we will use
Ruby on Rails 4.1.0.beta1 and
Install Ruby on Rails
gem install rails --pre, once it’s completed
rails new facturas and we should have the basic structure for
Let’s keep everything under
git so we can keep track of changes.
$ git init $ git add . $ git commit -m 'Getting started!.'
I use hub so I will just push this to a new repo on GitHub.
$ hub create ember-rails-week-1 Updating origin created repository: abuiles/ember-rails-week-1 $ git push origin master
Ember Appkit Rails, since I want to use a new feature we
have been working on to include testing out of the box, we won’t
install from rubygems but directly from GitHub.
Add the following to you Gemfile:
gem 'ember-appkit-rails', git: 'https://github.com/dockyard/ember-appkit-rails.git'
Now we can bootstrap our Rails project with Ember Appkit Rails.
$ rails g ember:bootstrap
For now just focus on this two files:
create config/router.es6 create config/application.js
router.es6 would be the main entry point for our Ember App, it’s
something similar to
routes.rb, it will help us defined how users
interact with our application. We will talk more about it later but if
you can’t wait, check the awesome routing
guide on Ember.js.
application.js is the replacement for
Start your rails server
rails s and go to
http://localhost:3000, you will see
"Welcome to Ember!".
We are ready to start! In the next post we will create our first model, talk a bit about testing and keep our journey of mastery of Ember.js with Ruby on Rails.
Create an ‘Ember’ application template
$ echo > app/templates/application.hbs
config/routes.rbuncomment the last line
get '*foo', :to => 'landing#index'. It should look like https://github.com/abuiles/ember-rails-week-1/blob/master/config/routes.rb#L64
- In route.es6 uncomment
location: 'history'it should look like https://github.com/abuiles/ember-rails-week-1/blob/master/config/router.es6#L8
EAKR also has a scaffold command try the following
$ rails g scaffold clients first_name:string last_name:string --ember $ rake db:migrate
Now navigate to
http://localhost:3000/clients – Congrats! you have your first Ember app running.