Rails Girls: Programming, Web Applications and Ruby on Rails

Rails Girls: Programming, Web Applications and Ruby on Rails

All the Buzzwords for the Workshop in about 30 minutes

5b7ac75124cebf11ff0de894b365198e?s=128

DonSchado

May 24, 2014
Tweet

Transcript

  1. Programming, ! Web Applications ! and Ruby on Rails Marco

    Schaden! @donschado Saturday 24th May 2014
  2. Buzzwords! Web Application Ruby Rails Programming HTTP MVC Model View

    Controller Request Response Server Protocol ? ? ? ? ? ? ? HTML all the stuff in 30 minutes
  3. <<Programming>>

  4. None
  5. "It’s a boy’s thing"

  6. http://en.wikipedia.org/wiki/Women_in_computing

  7. http://en.wikipedia.org/wiki/Women_in_computing

  8. "You need a Ph.D. in mathematics"

  9. Not necessarily, but… communication: express your thoughts! and ideas properly

    passion: care about what you’re doing ! and be curious how things work research: read documentation, ! consult others or! just google it! problem solving: read the error messages ! and be hungry to solve issues + patience
  10. None
  11. programming: ! ! is telling a computer what to do!

    ! (no magic involved)
  12. step-by-step instructions = program

  13. 3.times0do0 0 print0"Hello0World!"0 end

  14. Ruby A PROGRAMMER’S BEST FRIEND https://www.ruby-lang.org/

  15. imagine all the programming languages Ruby

  16. Why Ruby? Yukihiro Matsumoto ! (Matz) Ruby is designed to

    be human- oriented. It reduces the burden of programming. It tries to push jobs back to machines.! ! You can accomplish more tasks with less work, in smaller yet readable code. "Matz is nice so we are nice"
  17. Later we will learn more about Ruby…

  18. Web Application ? "A web application is a program that

    is displayed in a web browser. * Web applications are usually stored (and executed) on a web server. They can be accessed through the Internet 
 via a communication protocol such as HTTP. " 
 – Wikipedia
  19. HTTP? Hyper Text Transfer Protocol http://weheartit.com/entry/17157559

  20. HTTP Request Cycle In 4 Easy Steps (or how the

    internet works)
  21. your computer! running a browser of your choice a web

    server ! somewhere on the internet! running a web application
  22. Hey$can$I$get$the$ railsgirls$website? 1 http://railsgirls.com/cologne

  23. Hey$can$I$get$the$ railsgirls$website? http$request$ get,$post,$put,$delete,… 1

  24. let$me$check…$. 2

  25. $ok,$here$it$is http$response$ generated$data,$HTML,$static$files,$images,… 3

  26. 4 Yay!

  27. GOT IT!

  28. None
  29. David Heinemeier Hansson! (DHH) Why Rails? Rails is an attempt

    to mold the beauty and productiveness of Ruby into a framework for web applications. Rails emphasizes principles such as:! • convention over configuration! • don't repeat yourself (DRY)! • model - view - controller architecture (MVC) http://contributors.rubyonrails.org/ http://rubyonrails.org/ *over 3000 people have contributed:
  30. MVC? Model - View - Controller http://weheartit.com/entry/17157559

  31. None
  32. Data$+$Logic Presentation Intermediary

  33. WHY…?!?!

  34. w/o MVC: http://media0.faz.net/ppmedia/aktuell/wirtschaft/777415979/1.1528426/default/wo-ist-noch-mal-die-rechnung-ein-buero-mit-sehr-kreativem-chaos.jpg

  35. with MVC: http://blog.meine-moebelmanufaktur.de/wp-content/uploads/2014/02/bunte_ordner_buero.jpg

  36. / Example MVC Web Application https://github.com/DonSchado/facebook-lite

  37. / Example MVC Web Application Layout View Post https://github.com/DonSchado/facebook-lite

  38. URL localhost:3000/ (remember the request cycle?)

  39. GET /! Request

  40. Router
 get "/" => "welcome#index"!

  41. Controller
 class WelcomeController < ApplicationController! def index! $$@posts0= Post.all !

    end! end!
  42. Model
 class Post < ActiveRecord::Base! end!

  43. Database * create_table "posts" do |t|! t.text "content"! t.integer "user_id"!

    t.datetime "created_at"! t.datetime "updated_at"! end!
  44. Model
 class Post < ActiveRecord::Base! end!

  45. Controller
 class WelcomeController < ApplicationController! def index! $$@posts0= Post.all !

    end! end!
  46. View
 <h1>Das neuste aus ...$</h1>! ! <ul>$ $$<%=0@posts.each$do$|post|$%>0 ! !

    ! ! ! 00<%0end0%>$ </ul>$ <li>$ $$<%=$image_tag(post.user.avatar)$%>$ $$<%=$post.user.name$%>$ $$<%=$post.content$%>$ </li>
  47. <html$lang="en">$ $$<head>$ $$$$$<title>Facebook$Lite</title>$ $$$$$<%=$stylesheet_link_tag$$$$"application",$media:$"all"$%>$ $$$$$<%=$javascript_include_tag$"application"$%>$ $$</head>$ $$<body>$ $$$$<div$class="container">$ $$$$$$<%=$yield$%>$ $$$$</div>$

    $$</body>$ </html> Layout

  48. Response (HTML)*
 <html lang="en">! <head>! <title>Facebook Lite</title>! <link href="/assets/application.css" media="all"

    rel="stylesheet">! <script src="/assets/application.js"></script>! </head>! <body>! <div>! <h1>Das Neuste aus dem ganzen Netzwerk</h1>! <ul>! <li>! <img src="https://somewhere.github.com/1062e0f.png">! <h4>Liane<small>19 Nov 20:32</small></h4>! <p>Ich bin hier!!!</p>! </li>! <li>! <img src="https://somwhere.github.com/fa47a113f69.png">! <h4>Marco<small>19 Nov 20:02</small></h4>! <p>Hallo, ist da wer?</p>! </li>! <li>! <img src="https://somwhere.github.com/fa47a113f69.png">! <h4>Marco<small>19 Nov 19:02</small></h4>! <p>Hallo Welt!</p>! </li>! </ul>! </div>! </body>! </html>
  49. URL localhost:3000/

  50. http://cheezburger.com/

  51. Response (HTML) Browser Layout View Request Router Controller Model Database

  52. Response (HTML) Browser Layout View Request Router Controller Model Database

  53. Response (HTML) Browser Layout View Request Router Controller Model Database

  54. Response (HTML) Browser Layout View Request Router Controller Model Database

  55. Response (HTML) Browser Layout View Request Router Controller Model Database

  56. Response (HTML) Browser Layout View Request Router Controller Model Database

  57. Response (HTML) Browser Layout View Request Router Controller Model Database

  58. Response (HTML) Browser Layout View Request Router Controller Model Database

  59. Response (HTML) Browser Layout View Request Router Controller Model Database

  60. Response (HTML) Browser Layout View Request Router Controller Model Database

  61. Response (HTML) Browser Layout View Request Router Controller Model Database

  62. Response (HTML) Browser Layout View Request Router Controller Model Database

  63. All The Tools You Need: A Text Editor for writing

    code and editing files. The Terminal (known as Command Prompt)! Where you start the rails server and run commands. A Web Browser (Firefox, Safari, Chrome,…) 
 for viewing and interacting with your application. Ruby, the amazing programming language we love Rails, the framework for building web applications
  64. Conclusion we’ve learned a lot of new stuff

  65. http$response$ generated$data,$HTML,$static$files,$images,… http$request$ get,$post,$put,$delete,…

  66. Have fun!! Enjoy your workshop!! Ask the coaches! http://tryruby.org Now

    let’s start coding! 1 http://guides.railsgirls.com/app 2