This document provides an introduction to programming, web applications, and Ruby on Rails. It discusses key concepts like HTTP requests and responses, the MVC pattern, and the Rails framework. It encourages learning programming through communication, passion, research, problem solving and patience. The document concludes by recommending resources for learning to code in Ruby on Rails.

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>>

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

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?
HyperTextTransfer 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!

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

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:
AText Editor for writing code and editing files.
TheTerminal (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/app2