$30 off During Our Annual Pro Sale. View Details »

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

DonSchado

May 24, 2014
Tweet

More Decks by DonSchado

Other Decks in Programming

Transcript

  1. Programming, !
    Web Applications !
    and Ruby on Rails
    Marco Schaden!
    @donschado
    Saturday 24th May 2014

    View Slide

  2. Buzzwords!
    Web Application
    Ruby
    Rails
    Programming
    HTTP
    MVC
    Model
    View
    Controller
    Request
    Response
    Server
    Protocol
    ?
    ?
    ?
    ?
    ?
    ?
    ?
    HTML
    all the stuff in 30 minutes

    View Slide

  3. <>

    View Slide

  4. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  10. View Slide

  11. programming: !
    !
    is telling a computer what to do!
    !
    (no magic involved)

    View Slide

  12. step-by-step instructions
    = program

    View Slide

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

    View Slide

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

    View Slide

  15. imagine all the programming languages
    Ruby

    View Slide

  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"

    View Slide

  17. Later we will learn more about Ruby…

    View Slide

  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

    View Slide

  19. HTTP?
    Hyper Text Transfer Protocol
    http://weheartit.com/entry/17157559

    View Slide

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

    View Slide

  21. your computer!
    running a browser of your choice
    a web server !
    somewhere on the internet!
    running a web application

    View Slide

  22. Hey$can$I$get$the$
    railsgirls$website?
    1
    http://railsgirls.com/cologne

    View Slide

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

    View Slide

  24. let$me$check…$.
    2

    View Slide

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

    View Slide

  26. 4
    Yay!

    View Slide

  27. GOT IT!

    View Slide

  28. View Slide

  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:

    View Slide

  30. MVC?
    Model - View - Controller
    http://weheartit.com/entry/17157559

    View Slide

  31. View Slide

  32. Data$+$Logic
    Presentation
    Intermediary

    View Slide

  33. WHY…?!?!

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. GET /!
    Request

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  43. Database * create_table "posts" do |t|!
    t.text "content"!
    t.integer "user_id"!
    t.datetime "created_at"!
    t.datetime "updated_at"!
    end!

    View Slide

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

    View Slide

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

    View Slide

  46. View
 Das neuste aus ...$!
    !
    $
    $$<%[email protected]$do$|post|$%>0
    !
    !
    !
    !
    !
    00<%0end0%>$
    $
    $
    $$<%=$image_tag(post.user.avatar)$%>$
    $$<%=$post.user.name$%>$
    $$<%=$post.content$%>$

    View Slide

  47. $
    $$$
    $$$$$Facebook$Lite$
    $$$$$<%=$stylesheet_link_tag$$$$"application",$media:$"all"$%>$
    $$$$$<%=$javascript_include_tag$"application"$%>$
    $$$
    $$$
    $$$$$
    $$$$$$<%=$yield$%>$
    $$$$$
    $$$

    Layout


    View Slide

  48. Response
    (HTML)*

    !
    !
    Facebook Lite!
    !
    !
    !
    !
    !
    Das Neuste aus dem ganzen Netzwerk!
    !
    !
    !
    Liane19 Nov 20:32!
    Ich bin hier!!!!
    !
    !
    !
    Marco19 Nov 20:02!
    Hallo, ist da wer?!
    !
    !
    !
    Marco19 Nov 19:02!
    Hallo Welt!!
    !
    !
    !
    !

    View Slide

  49. URL localhost:3000/

    View Slide

  50. http://cheezburger.com/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  64. Conclusion
    we’ve learned a lot of new stuff

    View Slide

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

    View Slide

  66. Have fun!!
    Enjoy your workshop!!
    Ask the coaches!
    http://tryruby.org
    Now let’s start coding!
    1
    http://guides.railsgirls.com/app
    2

    View Slide