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!