From Ruby Installation to Deploy

A presentation made to a group of computer art/design students on getting started with Ruby.

Transcript

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.) • 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
6. 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
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