Git Product home page Git Product logo

asset_tracker_tutorial_pre's Introduction

== Rails 3 Tutorial
-- Josh Adams, Isotope11

---

Rails3 is the latest, greatest version of Rails.  It's about to be released, and it came about from a merging of the Merb and Rails teams.

We're going to build an app using rails3.  It'll be the start of an open source project we're working on here at Isotope11.  We call it the asset tracker, and it's basically a ticketing system to keep track of work around here.  We've been using a version built in rails1, and upgraded to rails2, for about four years now for everything we do as a company.

---

1) Build base rails project

First, we tell rvm to switch to a ruby1.9.2/rails3 environment (I've already set this env up, and assume you've done the same.  We're using rails 3.0.0.rc in this tutorial)

  $ rvm use ruby-1.9.2-head@rails3-rc

Then, we generate a new starter rails app

  $ rails new asset_tracker_tutorial

We verify that everything worked by starting the server and hitting localhost:3000

  $ rails server

I also set up a .rvmrc in the project so I can be sure I'm always using the right version when I drop in there.  Put the rvm use line in the file.

Finally, push this sucker up to github (you guys can check it out at this url later, it's public): http://github.com/knewter/asset_tracker_tutorial_pre

---

2) Prepare for TDD/BDD

Now, we all do Test-or-Behavior-Driven Development in the rails world, so the very next step is to define some tests using rspec and cucumber.  This requires some setup to get everything ready.

To do this, we need to get rspec into the app.  In rails3, this means Bundler and editing a Gemfile.

Then, edit the Gemfile and add the following:

  group :test, :development do
    gem 'rspec-rails', '>= 2.0.0.beta.19'
  end

  $ bundle install # This will install the bundle for the app

Now, run the rspec install script to get your app ready for rspec

  $ script/rails generate rspec:install

Now, tell rails to use rspec instead of Test::Unit when using its generators.  Open config/application.rb and add:

  config.generators do |g|
    g.test_framework :rspec
  end

(Thanks, http://blog.notahat.com/posts/43, for the rails3/rspec/cucumber setup notes)

---

3) Generate your first model and start testing - Client

Now we're ready to start building the application.  Our asset tracker's general model layout looks something like this:

    * Client (Attachments, Notes, Watches) - [status {current, default, shitty, etc}]
          o Project (Attachments, Notes, Watches) - [manager]
                + Ticket (Attachments, Notes, Watches) - [priority, assigned_to, status]
                      # WorkUnit (Attachments, Notes) - [description, time, overtime {bool}, unbilled {bool}, payment_record, billed_record]
    * User
    * Note
    * Attachment
    * Watch
    * Role
    * PaymentRecord
    * BillRecord

That is, Clients are the base model from which the more important stuff descends.  We'll go ahead and start generating a Client model.  We'll move on from there.

  $ rails generate model Client name:string status:string

That generates the model and an rspec test for us.  Let's go ahead and run that test.

  $ rake db:migrate # Have to get the db table created
  $ rake spec

It tells us that the spec is pending, and nicely asks us to generate some specs.  Let's do that.  We'll test that the client model validates the presence of the name and status fields.

  $ rake spec

It should've failed because we didn't add the validations to the model yet.  Do that.  Then try again.

  $ rake spec

Now it succeeds.  Awesome.  We're great at stuff.  Finally, a client's name should be unique.  Let's test for that.

  $ rake spec

It fails.  Now add the uniqueness constraint to the model.

  $ rake spec

OK, moving on.

---

4) Cucumber and controllers/views.

Set up cucumber by adding the following to your Gemfile (This is actually including our view-related stuff for adam's talk later as well):

# For cucumber-rails
gem 'rspec', ">=2.0.0.beta.19", :group => :test

gem 'haml-edge', '3.1.66', :require => 'haml'
gem 'compass', '>= 0.10.4'
gem 'lemonade', '>= 0.3.4'
gem 'sqlite3-ruby', :require => 'sqlite3'
gem 'thin'

group :test do
  gem "webrat"
  gem 'rspec-rails', ">=2.0.0.beta.19"
  gem 'cucumber'
  gem 'capybara'
  gem 'database_cleaner'
  gem 'cucumber-rails'
  gem 'spork'
  gem 'launchy'    # So you can do Then show me the page
end

Use bundler to install everything:

  $ bundle install

Finally, set up your Rails app.

  $ script/rails generate cucumber:skeleton --rspec --capybara

Now we can generate features using cucumber and start to define the project.

---

5) Define a feature for Clients#index

  $ vim features/clients.feature

(See the feature I've already got in the code at this point, because it'll take a while to build it up)

Then run it with:
  $ script/cucumber features

There's a 'Then show me the page' feature that will let you easily pull up a page with sample data when running your tests, and that's kind of cool.  I added that to the end of the clients index feature so you always get a web browser popping up with the index each time you run the clients feature.

That covers our first feature - managing clients.  Now let's move on.

---

6) Define a feature for Projects#index

  $ vim features/projects.feature

We'll be re-using a lot of the same stuff we used in clients here.  Copy-pasta for the fail.

---

NOTES:

To get ruby-debug working in ruby1.9, do this:
http://dirk.net/2010/04/17/ruby-debug-with-ruby-19x-and-rails-3-on-rvm/

-------------------------------------------------------------------------------
Making the Views not suck
-------------------------------------------------------------------------------
first i add the compass-susy pro into the gem file then install it

  gem 'compass-susy-plugin'
  $ bundle install
  
then i generate compass inside the project, with susy

 $ compass init rails . -r susy --using susy/project

it asks questions:

  Compass recommends that you keep your stylesheets in app/stylesheets
    instead of the Sass default location of public/stylesheets/sass.
    Is this OK? (Y/n) Y

  Compass recommends that you keep your compiled css in public/stylesheets/compiled/
    instead the Sass default of public/stylesheets/.
    However, if you're exclusively using Sass, then public/stylesheets/ is recommended.
    Emit compiled stylesheets to public/stylesheets/compiled/? (Y/n) Y

answer yes.

now we create/import the layout, and a couple of shared partials

  (see code)

and make sure we add in the required parts of compass:

%head
  = stylesheet_link_tag 'compiled/screen.scss', :media => 'screen, projection'
  = stylesheet_link_tag 'compiled/print.scss', :media => 'print'
  = stylesheet_link_tag 'compiled/ie.scss', :media => 'screen, projection'

asset_tracker_tutorial_pre's People

Contributors

adamdill avatar adamgamble avatar benolee avatar yrgoldteeth avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.