Presentation to wdim_students

From Ruby Installation
to Deploy
this is gonna hurt your head

Tuesday, October 19, 2010

About Me

Speaker.new({
:name => "Scotty Motte",
:email => "scott@spitfiresky.com",
:twitter => "@spitfiresky",
:works_on => "http://smartevents.com"
})


Building Web Apps
• Server Side
• Server Side Programming Language - Ruby

• Database - MySQL

• Versioning Software - GIT

• Browser Side
• HTML - HAML

• Javascript - jQuery

• AJAX


Server Side


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 (conﬁguration weirdos)
• .NET (put a gun to my head already)
• Perl (WTF)

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

Install Ruby
• Mac Users, I say rejoice, for thou haveth
Ruby already!
• Windows users - are you prejudiced
towards Japan or something?! Let’s ﬁx 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.

Database

• Where we store our data
• MySQL popular
• skip


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)


Hello World app

• [sudo] gem install sinatra
• [sudo] gem install unicorn
• [sudo] gem install haml
• mkdir hello_world
• cd hello_world


Hello World app cont.
• Create and edit app.rb
require 'rubygems'
require 'sinatra'

get '/' do
"Hello World!"
end


• Create and edit conﬁg.ru ﬁle
require 'app'
run Sinatra::Application


• Create and edit .gems ﬁle for heroku

sinatra --version '>= 0.9.4'
haml



• Run the local server: unicorn -p 3000
• Browse to: http://localhost:3000/
• Congrats! Drink a beer!


Deploy

• Sign up on Heroku: http://heroku.com
• [sudo] gem install heroku


Deploy cont.

• cd into your hello_world project
• git init
• git add .
• git commit -am “initial import”


Deploy cont.

• ssh-keygen -C “you@email.com” -t rsa
• (leave the passphrase blank unless it’s your
computer)


Deploy cont.

• heroku create
• git push heroku master
• heroku rename yourchoice
• browse to http://yourchoice.heroku.com


Deploy cont.
• Other things you can do
• Add an about page
• Switch to haml
• Add a layout ﬁle
• Add images under a public folder
• Move onto ajax

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


views/index.haml
%h1
Hello World!

get '/' do
haml :index
end


Browser Side


public/javascripts

• Add jquery.js - download from jquery.com
• Add index.js


public/javascripts/
index.js

$(document).ready(function() {
alert("It works!");
});


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


app.rb (add route)
get '/search' do
@search_field_value = params[:search_field]
haml :index
end


public/javascripts/
index.js
$("#search_btn").click(function() {
var search_text = $("#search_field").val();
alert(search_text);
return false;
});
});


public/javascripts/
index.js
$("#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;
});
});


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


The End


Presentation to wdim_students

More Related Content

Viewers also liked (8)

Similar to Presentation to wdim_students (20)

Recently uploaded (20)

Presentation to wdim_students