The web and programming:
an introductionSimple, short and friendly
3 basic question
What are web apps and how do they work?
What is Ruby, how is it connected to Rails?
What is Rails and what can we use it for?
How does the web work?
• Let’s take a look at an example:- What happens when I type
railsgirls.com into my web browser?
1) The web browser looks up the IP address of the web site using DNS
I want to know more about
Rails Girls
Avtor fotografije: Ed Yourdon
Wait, I need to find the address of the web
server with that info.
(109.74.202.152)
2) The broswers sends a “GET” request to the server
HTTP request GETHost: railsgirls.com
Hey, I need info about Rails Girls
Just a moment ...
your computerhost server forrailsgirls.com
j j
3) The servers respons with a web page, written in HTML language
response inHTML language
tvoj računalnikhost server forrailsgirls.com
j j
Aha! Found it!
Let me see what this looks like...
4) The web browser makes sure the web site is displayed correctly
Ta-da! Isn’t this a nice
web site?
So, what are we going to work on today?
A web app for collecting ideas
j
What will the app look like in our browser?
Hmm... what are web apps?
And what are web pages?
Photo by: melanie_hughes
sushi.html
simplesushi.com
Octocat
jI want sushi!
web page
j
sushi.html
simplesushi.com
Octocat
jBut ... I don’t
eat fish ...
staticweb page
j
sushi.html is as it is!
fancysushi.com
Octocat
jWhat about
here? Can I get a sushi without fish?
fancysushi.com
Octocat
j Sure, Octocat, our sushi chef
can adjust!
web app on the server
jWhat about here? Can I get a sushi
without fish?
Photo by: iwillbehomesoon
fancysushi.com
Octocat
j
Here’s your personalized sushi.
Would you like a different one?
web app on the server
j
sushi.html
the result is anotherweb page
j
fancysushi.com
web appon the server
j
however it is now a dynamic web page, tailored to the user
Octocat
j
sushi.html
j
facebook.com
web appon the server
j
that’s why Facebook has different content for each of us
Octocat
j
jIn the real world ...
If we want to build web apps ...
If we want to build web apps ...
We need to be able to talk to the sushi chef on the server
j
Ruby is one of the programming languages that we can use in web apps
If you want me to do something, you’ve got to speak
Ruby!
Other popular languages: PHP, Python, Java, ASP.NET, Perl ...
As a starting point:1) We need to have Ruby installed (Installation Party!)
2) Use Terminal or Command Prompt (Windows)
How we can use Ruby to talk to a computer?
Simple exampleLet’s use irb = Interactive RuBy
“Rails Girls”
"Rails Girls" 2 + 2 2 * 2"Rails " * 2"Rails " + "Girls" "Rails" * "Girls""Rails Girls".length"Rails Girls".reverse ime = "Rails Girls" ime.lengthime.reverseime.upcaseime.downcaseime + ime
irb examples# strings# integers# Ruby as a simple calculator# multiplying a string# combining two string# multiplying strings doesn’t work# but string do have their own useful methods
# to simplify work, we can store objects into variables# same method as before used on a variable, same result
# variables can also be combined, just like before
Simple exampleLet’s save a program into a .rb file for easy access
Sublime Text 2 Terminal
simple.rb
puts “Rails Girls”
ime.rb
quiz.rb
Even the big, scary dragon is made out of simple Lego blocks!
Photo by: themickeyd
Bonus tip: learn programming at home with:
http://www.codecademy.com
http://tryruby.org http://www.codeschool.com
What about Rails?
= a framework, which makes sure we can easily use Ruby to build web apps
Rails = Ruby on Rails = RoR
= fast rails for Ruby on the web
We’ll build today’s app with Rails ...
... the app will be made with different text files with Ruby, HTML and other code
Rails* apps have three basic building blocks
* And a lot of other web apps in different languages
MVC architecture = Model | View | Controller
Photo by: Michael Kappel
Controller = sushi chefaccepts requests, makes all parts
work as a whole
Model = ingredientsrepresents database data View = sushi
the representation of the result, seen by users
Confused? No worries :)
When programming:• Googling is a must;• copy-paste a valid method;• getting a working result
is what really matters.
P.S.: Practice makes perfect!
My Bentobox
Backend.
How the application works.
Frontend.
How the application looks.
Backend.
How the application runs.
Backend.
How the application stores data.
Storage Logic
Style and structure
Infrastructure
Application: Designed by:
Let’s warm up before we make our own app:getting to know web technologies!