uvod v internet in programiranje: enostavno, kratko in prijazno

35
Uvod v internet in programiranje Enostavno, kratko in prijazno

Upload: alja-isakovic

Post on 05-Jul-2015

1.574 views

Category:

Technology


5 download

DESCRIPTION

Uvodno predavanje z osnovnimi koncepti spleta in spletnega programiranja za delavnico Rails Girls Ljubljana. Več o predavanju: http://ialja.blogspot.com/2012/12/explaining-web-and-web-programming-with.html

TRANSCRIPT

Page 1: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Uvod v internet in programiranje

Enostavno, kratko in prijazno

Page 2: Uvod v internet in programiranje: Enostavno, kratko in prijazno

3 osnovna vprašanja

Kaj so in kako delujejo spletne aplikacije?

Kaj je Ruby in kako je povezan z Railsi?

Kaj so Railsi in kaj z njimi početi?

Page 3: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Kako deluje internet?

• Poglejmo si na primeru:- Kaj se zgodi, ko v spletni brskalnik

vpišem railsgirls.com?

Page 4: Uvod v internet in programiranje: Enostavno, kratko in prijazno

1) Spletni brskalnik preko DNS poišče IP naslov spletne strani

Hočem vedeti več o Rails Girls

Avtor fotografije: Ed Yourdon

Čakaj, da najdem naslov strežnika, ki ti

lahko to pove.

(109.74.202.152)

Page 5: Uvod v internet in programiranje: Enostavno, kratko in prijazno

2) Brskalnik strežniku pošlje zahtevo “GET”

HTTP zahteva GETHost: railsgirls.com

Hej, potrebujem informacije o Rails Girls!

Trenutek ...

tvoj računalnikstrežnik, ki gosti

railsgirls.com

j j

Page 6: Uvod v internet in programiranje: Enostavno, kratko in prijazno

3) Strežnik brskalniku odgovoris spletno stranjo, napisano v jeziku HTML

odgovor v jeziku HTML

tvoj računalnikstrežnik, ki gosti

railsgirls.com

j j

Aha! Našel!

Čaki, da vidim, kaj si mi to poslal ...

Page 7: Uvod v internet in programiranje: Enostavno, kratko in prijazno

4) Brskalnik poskrbi za ustrezen prikaz spletne strani

Ta-da! A ni fajn stran?

Page 8: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Torej, kaj bomo danes naredili?

Spletno aplikacijo za zbiranje idej

j

Page 9: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Kako bo spletna aplikacija izgledala v brskalniku?

Page 10: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Hmm... kaj sploh so spletne aplikacije?

In kaj spletne strani?

Page 11: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Avtorica fotografije: melanie_hughes

sushi.html

simplsushi.com

Octocat

jHočem sushi!

spletna stran

j

Page 12: Uvod v internet in programiranje: Enostavno, kratko in prijazno

sushi.html

simplsushi.com

Octocat

jAmpak ...

ne jem rib ...

statičnaspletna stran

j

sushi.html je tak, kot je!

Page 13: Uvod v internet in programiranje: Enostavno, kratko in prijazno

fensisushi.com

Octocat

jKaj pa tu?

Lahko dobim sushi brez rib?

Page 14: Uvod v internet in programiranje: Enostavno, kratko in prijazno

fensisushi.com

Octocat

jKaj pa tu?

Lahko dobim sushi brez rib?

Seveda, Octocat, naš sushi mojster

se ti prilagodi!

spletna aplikacija na strežniku

jAvtor fotografije: iwillbehomesoon

Page 15: Uvod v internet in programiranje: Enostavno, kratko in prijazno

fensisushi.com

Octocat

j

Izvoli sushi po meri, lahko ti takoj

naredimo novega

spletna aplikacija na strežniku

j

sushi.html

rezultat je spet spletna stran

j

Page 16: Uvod v internet in programiranje: Enostavno, kratko in prijazno

fensisushi.com

spletna aplikacija na strežniku

j

vendar je to sedaj dinamična spletna stran, ki se prilagodi uporabniku

Octocat

j

sushi.html

j

Page 17: Uvod v internet in programiranje: Enostavno, kratko in prijazno

facebook.com

spletna aplikacija na strežniku

j

zato je Facebook za vsekega izmed nas drugačen

Octocat

j

jV praksi ...

Page 18: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Če torej hočemo delati spletne aplikacije ...

Page 19: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Če torej hočemo delati spletne aplikacije ...

Se moramo znati pogovarjati s sushi mojstrom na strežniku

j

Page 20: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Ruby je en izmed programskih jezikov, ki ga lahko uporabimo v aplikacijah

Če hočeš, da kaj naredim, mi moraš povedati v Ruby-ju

Drugi priljubljeni jeziki: PHP, Python, Java, ASP.NET, Perl ...

Page 21: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Za začetek:1) Imeti moramo inštaliran Ruby (Installation Party!)

2) Uporabimo Terminal oz. Command Prompt (Win)

Kako se lahko z računalnikom pogovarjamo v Ruby-ju?

Page 22: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Preprost primerUporabimo irb = Interactive RuBy

“Rails Girls”

Page 23: Uvod v internet in programiranje: Enostavno, kratko in prijazno

"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# nizi znakov (strings)# števila (integers)# Ruby kot preprost kalkulator# nice lahko pomnožimo š številom# združimo dva niza# množenje dveh nizov ne dela# imamo pa na voljo posebne metode

# za poenostavitev dela shranimo objekte v spremenljivke# na spremenljivki uporabimo isto metodo kot prej

# združevanje spremenljivk, isto kot prej

Page 24: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Preprost primerProgram shranimo v datoteko .rb za lažji dostop

Sublime Text 2 Terminal

Page 25: Uvod v internet in programiranje: Enostavno, kratko in prijazno

simpl.rb

puts “Rails Girls”

Page 26: Uvod v internet in programiranje: Enostavno, kratko in prijazno

ime.rb

puts "Kako ti je ime?"

ime = gets.chomp!

puts "#{ime}, tvoje ime ima #{ime.length} znakov."

Page 27: Uvod v internet in programiranje: Enostavno, kratko in prijazno

racun.rb

puts "Koliko je 2 + 2?"

rezultat = 2 + 2

odgovor = gets.to_i

if odgovor == rezultat

puts "Bravo!"

else

puts "Hmm... Jaz dobim #{rezultat}"

end

Page 28: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Tudi velik, strašen zmaj je sestavljen iz preprostih Lego kock!

Avtor fotografije: themickeyd

Page 29: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Bonus namig: za lažje učenje doma obišči

http://www.codecademy.com

http://tryruby.org http://www.codeschool.com

Page 30: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Kaj pa Rails?

= ogrodje (framework), ki poskrbi, da Ruby enostavno uporabimo za izdelavo spletnih aplikacij

Rails = Ruby on Rails = RoR = “Ruby na tračnicah” :)

= hitre tračnice za Ruby na internetu

Page 31: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Današnjo aplikacijo bomo izdelali z Railsi ...

Page 32: Uvod v internet in programiranje: Enostavno, kratko in prijazno

... sestavljajo jo različne tekstovne datoteke z Ruby, HTML in ostalo kodo

Page 33: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Rails* aplikacije imajo v osnovi tri dele

* Pa tudi veliko ostalih spletnih aplikacijah v drugih jezikih

MVC arhitektura = Model | View | Controller

Avtor fotografije: Michael Kappel

Controller = sushi šefsprejema zahteve, povezuje vse

dele v delujočo celoto

Model = sestavinepredstavlja podatke iz baze View = sushi

predstavitev rezultata, ki ga vidimo uporabniki

Page 34: Uvod v internet in programiranje: Enostavno, kratko in prijazno

Nič jasno? Nič panike :)

Pri programiranju je:• Googlanje zaželjeno;• copy-paste ok;• važno, da dela.

P.S.: Vaja dela mojstrico!

Page 35: Uvod v internet in programiranje: Enostavno, kratko in prijazno

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:

Ogrevanje pred izdelavo aplikacije:spoznajmo spletne tehnologije!