Presentation to wdim_students

1,084 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,084
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentation to wdim_students

  1. 1. From Ruby Installation to Deploy this is gonna hurt your head Tuesday, October 19, 2010
  2. 2. About Me Speaker.new({ :name => "Scotty Motte", :email => "scott@spitfiresky.com", :twitter => "@spitfiresky", :works_on => "http://smartevents.com" }) Tuesday, October 19, 2010
  3. 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. 4. Server Side Tuesday, October 19, 2010
  5. 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. 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. 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. 8. Database • Where we store our data • MySQL popular • skip Tuesday, October 19, 2010
  9. 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. 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. 11. Hello World app cont. • Create and edit app.rb require 'rubygems' require 'sinatra' get '/' do "Hello World!" end Tuesday, October 19, 2010
  12. 12. Hello World app cont. • Create and edit config.ru file require 'app' run Sinatra::Application Tuesday, October 19, 2010
  13. 13. Hello World app cont. • Create and edit .gems file for heroku sinatra --version '>= 0.9.4' haml Tuesday, October 19, 2010
  14. 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. 15. Deploy • Sign up on Heroku: http://heroku.com • [sudo] gem install heroku Tuesday, October 19, 2010
  16. 16. Deploy cont. • cd into your hello_world project • git init • git add . • git commit -am “initial import” Tuesday, October 19, 2010
  17. 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. 18. Deploy cont. • heroku create • git push heroku master • heroku rename yourchoice • browse to http://yourchoice.heroku.com Tuesday, October 19, 2010
  19. 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. 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. 21. views/index.haml %h1 Hello World! get '/' do haml :index end Tuesday, October 19, 2010
  22. 22. Browser Side Tuesday, October 19, 2010
  23. 23. public/javascripts • Add jquery.js - download from jquery.com • Add index.js Tuesday, October 19, 2010
  24. 24. public/javascripts/ index.js $(document).ready(function() { alert("It works!"); }); Tuesday, October 19, 2010
  25. 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. 26. app.rb (add route) get '/search' do @search_field_value = params[:search_field] haml :index end Tuesday, October 19, 2010
  27. 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. 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. 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. 30. The End Tuesday, October 19, 2010

×