This document provides an overview of installing Ruby and deploying a basic web application from development to production. It discusses setting up Ruby and related tools like MySQL, Git and Sinatra on Mac and Windows. It then walks through building a simple "Hello World" app locally and deploying it to Heroku using Git. The document also introduces concepts like adding stylesheets, layouts and basic JavaScript/jQuery to the app.

1. From Ruby Installation
to Deploy
this is gonna hurt your head
Tuesday, October 19, 2010

2. About Me
Speaker.new({
:name => "Scotty Motte",
:email => "scott@spitfiresky.com",
:twitter => "@spitfiresky",
:works_on => "http://smartevents.com"
})
Tuesday, October 19, 2010

3. Building Web Apps
• Server Side
• Server Side Programming Language - Ruby
• Database - MySQL
• Versioning Software - GIT
• Browser Side
• HTML - HAML
• Javascript - jQuery
• AJAX
Tuesday, October 19, 2010

4. Server Side
Tuesday, October 19, 2010

5. Programming Languages
• Ruby (writes like english. great community. hotter than
your mom. nuff said.)
• PHPbrackets)like someone shat all over the page with
curly
(looks
• Java (configuration weirdos)
• .NET (put a gun to my head already)
• Perl (WTF)
Tuesday, October 19, 2010

6. Why Ruby
• Created by Matz - he’s Japanese
• Programmer Happiness! - written for
humans not for computers
• Easy to read and write
5.times { puts "Have some chunky bacon Matz."}
['riverside', 'japan', 'america'].each {|locale|
puts locale.capitalize }
• Popularized by Ruby on Rails
Tuesday, October 19, 2010

7. Install Ruby
• Mac Users, I say rejoice, for thou haveth
Ruby already!
• Windows users - are you prejudiced
towards Japan or something?! Let’s fix that
by installing Ruby:
• http://www.ruby-lang.org/en/downloads/ - run the one-click installer
and make sure to de-check the SciTE and check enable ruby gems.
Important.
• (http://docs.heroku.com/windows) - very helpful. video.
Remember - friends don’t let friends use internet explorer.
Tuesday, October 19, 2010

8. Database
• Where we store our data
• MySQL popular
• skip
Tuesday, October 19, 2010

9. Git
• Keeps track of all the code you write
• http://code.google.com/p/msysgit/
(windows)
• http://code.google.com/p/git-osx-installer/
(mac)
• http://github.com (keep your code safe)
Tuesday, October 19, 2010

10. Hello World app
• [sudo] gem install sinatra
• [sudo] gem install unicorn
• [sudo] gem install haml
• mkdir hello_world
• cd hello_world
Tuesday, October 19, 2010

11. Hello World app cont.
• Create and edit app.rb
require 'rubygems'
require 'sinatra'
get '/' do
"Hello World!"
end
Tuesday, October 19, 2010

12. Hello World app cont.
• Create and edit config.ru file
require 'app'
run Sinatra::Application
Tuesday, October 19, 2010

13. Hello World app cont.
• Create and edit .gems file for heroku
sinatra --version '>= 0.9.4'
haml
Tuesday, October 19, 2010

14. Hello World app cont.
• Run the local server: unicorn -p 3000
• Browse to: http://localhost:3000/
• Congrats! Drink a beer!
Tuesday, October 19, 2010

15. Deploy
• Sign up on Heroku: http://heroku.com
• [sudo] gem install heroku
Tuesday, October 19, 2010

16. Deploy cont.
• cd into your hello_world project
• git init
• git add .
• git commit -am “initial import”
Tuesday, October 19, 2010

17. Deploy cont.
• ssh-keygen -C “you@email.com” -t rsa
• (leave the passphrase blank unless it’s your
computer)
Tuesday, October 19, 2010

18. Deploy cont.
• heroku create
• git push heroku master
• heroku rename yourchoice
• browse to http://yourchoice.heroku.com
Tuesday, October 19, 2010

19. Deploy cont.
• Other things you can do
• Add an about page
• Switch to haml
• Add a layout file
• Add images under a public folder
• Move onto ajax
Tuesday, October 19, 2010

20. views/layout.haml
!!!
%html
%head
%title Your App
%link{:rel=>'stylesheet', :href=>'/stylesheets/
layout.css', :type => "text/css"}
/ javascripts
%script{:type => "text/javascript", :src => "/javascripts/
jquery.js"}
%script{:type => "text/javascript", :src => "/javascripts/
index.js"}
%body
= yield
Tuesday, October 19, 2010

21. views/index.haml
%h1
Hello World!
get '/' do
haml :index
end
Tuesday, October 19, 2010

22. Browser Side
Tuesday, October 19, 2010

23. public/javascripts
• Add jquery.js - download from jquery.com
• Add index.js
Tuesday, October 19, 2010

24. public/javascripts/
index.js
$(document).ready(function() {
alert("It works!");
});
Tuesday, October 19, 2010

25. views/index.haml
%h1 Hello World
%h2 Search
%form{:id => "search_form", :method => "get", :action => "/search"}
%input{:type => "text", :id => "search_field", :name => "search_field"}
%input{:type => "submit", :value => "Search", :id => "search_btn"}
%ul#search_field_value
%li= @search_field_value
Tuesday, October 19, 2010

26. app.rb (add route)
get '/search' do
@search_field_value = params[:search_field]
haml :index
end
Tuesday, October 19, 2010

27. public/javascripts/
index.js
$(document).ready(function() {
$("#search_btn").click(function() {
var search_text = $("#search_field").val();
alert(search_text);
return false;
});
});
Tuesday, October 19, 2010

28. public/javascripts/
index.js
$(document).ready(function() {
$("#search_btn").click(function() {
var search_text = $("#search_field").val();
// alert(search_text);
$.ajax({
url: "/search?search_field="+search_text,
success: function(responseText, statusText, xhr) {
$('#search_field_value').append(responseText);
},
error: function(request, statusText, xhr) {
alert("There was an error!");
}
});
return false;
});
});
Tuesday, October 19, 2010

29. public/javascripts/
index.js
get '/search' do
@search_field_value = params[:search_field]
"<li>#{@search_field_value}</li>"
end
Tuesday, October 19, 2010

30. The End
Tuesday, October 19, 2010