presentation to wdim_students
TRANSCRIPT
From Ruby Installation to Deploy
this is gonna hurt your head
Tuesday, October 19, 2010
About Me
Speaker.new({ :name => "Scotty Motte", :email => "[email protected]", :twitter => "@spitfiresky", :works_on => "http://smartevents.com"})
Tuesday, October 19, 2010
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
Server Side
Tuesday, October 19, 2010
Programming Languages
•Ruby (writes like english. great community. hotter than your mom. nuff said.)
• PHP (looks like someone shat all over the page with curly brackets)
• Java (configuration weirdos)
• .NET (put a gun to my head already)
• Perl (WTF)
Tuesday, October 19, 2010
Why Ruby• Created by Matz - he’s Japanese
• Programmer Happiness! - written for humans not for computers
• Easy to read and write
• Popularized by Ruby on Rails
5.times { puts "Have some chunky bacon Matz."}
['riverside', 'japan', 'america'].each {|locale| puts locale.capitalize }
Tuesday, October 19, 2010
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
Database
• Where we store our data
• MySQL popular
• skip
Tuesday, October 19, 2010
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
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
Hello World app cont.
• Create and edit app.rb
require 'rubygems'require 'sinatra'
get '/' do "Hello World!"end
Tuesday, October 19, 2010
Hello World app cont.
• Create and edit config.ru file
require 'app'run Sinatra::Application
Tuesday, October 19, 2010
Hello World app cont.
• Create and edit .gems file for heroku
sinatra --version '>= 0.9.4'haml
Tuesday, October 19, 2010
Hello World app cont.
• Run the local server: unicorn -p 3000
• Browse to: http://localhost:3000/
• Congrats! Drink a beer!
Tuesday, October 19, 2010
Deploy
• Sign up on Heroku: http://heroku.com
• [sudo] gem install heroku
Tuesday, October 19, 2010
Deploy cont.
• cd into your hello_world project
• git init
• git add .
• git commit -am “initial import”
Tuesday, October 19, 2010
Deploy cont.
• ssh-keygen -C “[email protected]” -t rsa
• (leave the passphrase blank unless it’s your computer)
Tuesday, October 19, 2010
Deploy cont.
• heroku create
• git push heroku master
• heroku rename yourchoice
• browse to http://yourchoice.heroku.com
Tuesday, October 19, 2010
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
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
views/index.haml%h1 Hello World!
get '/' do haml :index end
Tuesday, October 19, 2010
Browser Side
Tuesday, October 19, 2010
public/javascripts
• Add jquery.js - download from jquery.com
• Add index.js
Tuesday, October 19, 2010
public/javascripts/index.js
$(document).ready(function() { alert("It works!");});
Tuesday, October 19, 2010
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
app.rb (add route)
get '/search' do @search_field_value = params[:search_field] haml :indexend
Tuesday, October 19, 2010
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
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
public/javascripts/index.js
get '/search' do @search_field_value = params[:search_field] "<li>#{@search_field_value}</li>"end
Tuesday, October 19, 2010
The End
Tuesday, October 19, 2010