HT21 - DA354 - Webbapplikationer

Transcript

9. Episode X: The Python Way Of The Force May the web be with you
14. Build our web site, you will
17. Dagens agenda • Demo på vad vi ska bygga • Bygga webbsidor med Python • Hur fungerar en webbserver? • Webbserver med Python • Server => Python • Klient => HTML/CSS • Bottle som mikroramverk • Vad är ett mikroramverk? • Routes => Funktioner • Bygga vår webbplats
18. Vad vi ska bygga
19. “You can’t stop the change, any more than you can stop the suns from setting.” - Shmi Skywalker
20. Webbserver? Important, this is!
21. En webbserver är antingen ett datorprogram som tillhandahåller webbsidor för en viss webbplats eller en serverdator på vilken sådan programvara körs.
22. ...datorprogram som tillhandahåller webbsidor ...
24. Webbserver • Ett webbserverprogram har som uppgift att tillhandahålla webbsidor och andra filer via protokollet HTTP eller HTTPS, vanligen över Internet. • Det förekommer också att en enskild användare kör en webbserver för eget lokalt bruk på sin egen dator. Vanligen kommunicerar användaren med webbservern med hjälp av en webbläsare. • Användaren väljer webbsidor och webbläsaren ”beställer” webbsidorna från webbservern och visar dem på användarens datorskärm. Webbläsaren är klient till webbservern.
25. Internet Klient Server Klient
26. Internet Klient Server Klient
27. URL Uniform Resource Locator Exempel på URL https://mau.se https://student.mau.se/mina-studier/ https://mau.instructure.com/courses/6601/discussion_topics/128343
28. https://student.mau.se/mina-studier/ Protokoll Domän / IP-adress Resurs Grundläggande URL
29. http://sv.wikipedia.org:80/w/index.php?title=Dator&action=edit#Historia Protokoll Domän / IP- adress Resurs Komplett URL Port Extra information (GET-parametrar) Ankare
30. Andra URI Uniform Resource Identifier ftp://ftp.is.co.za/rfc/rfc1808.txt http://www.ietf.org/rfc/rfc2396.txt mailto:John.Doe@example.com telnet://192.0.2.16:80/ news:comp.infosystems.www.servers.unix
31. No place like 127.0.0.1, there is.
32. python -3 -m http.server 8000 Starta en webbserver från en specifik mapp
34. 127.0.0.1 = Den här datorn
36. Demo – Lokal webbserver
37. Men – hur mycket Python var detta egentligen? Feel the power of the server side!
41. Vad kan vi hittills? DA106A - Webbutveckling • Skapa webbsidor genom: • HTML • CSS • (JavaScript) Vad behöver vi lära oss? => Bygga en webbtjänst! DA354A - Programmering • Programmera i Python • Variabler • Datatyper • Funktioner • Filhantering • Felhantering • JSON • M.m.
42. “Oh, my dear friend. How I’ve missed you.” - C-3PO
44. Behöver vi bygga allt själva? A simpler way, there is.
45. To be efficent, a tool you need.
46. https://www.mindinventory.com/blog/best-python-web-frameworks-2019/
47. “I’m just a simple man trying to make my way in the universe.” - Jango Fett
48. Koncept 1 - Routes
49. https://student.mau.se/mina-studier/ Protokoll Domän / IP-adress Resurs Grundläggande URL
50. Bottle - Routes •Vi vill kunna mappa URL till olika funktioner i Python • /home => def home() • /contact => def contact() • /about => def about() • 127.0.0.1/home => def home() • 127.0.0.1/contact => def contact() • 127.0.0.1/about => about()
51. Kom igång med routes
53. Hello <name>
55. 1. Första grunderna i koden
58. 2. Förstå routes och argument
63. 3. Förstå parametrar (& värde)
65. Ex. 1 Ex. 2
66. Namn på parameter till template
67. - En total översikt Riskerar att bli lite förvirrande´…
71. Att använda sig utav flera routes...
72. http://127.0.0.1/ http://127.0.0.1/contact http://127.0.0.1/about http://127.0.0.1/xxxxxxxxx
73. DEMO - Routes
74. Koncept 2 - Templates
75. Templates – Mallar i HTML Join the dark side, we have the prettiest web sites!
76. Bottle - Templates • Templates är mallar för hur vi ska presentera vår information • HTML • CSS • JavaScript • Vi kan skicka data (bearbetad utav python) till våra malla för att skapa dynamiska webbsidor
77. Bottle – Templates och statiska filer •Alla templates ska: • Ligga i mappen ”views” • Ha filändelsen *.tpl eller *.html •Statiska filer (bilder, css, js, etc.) ska: • Ligga i mappen ”static”
78. Hur ser detta ut i bottle?
79. Demo - Templates
81. JSON JavaScript Object Notation json.dumps() => omvandla datatyper till sträng json.loads() => omvändla stäng till datatyp
82. ”[ { ’title': 'Star Wars', 'year': 1977, 'director': 'George Lucas' }, { 'title': 'Fight club', 'year': 1999, 'director': 'David Fincher' } ]” [ { "title": "Star Wars", "year": 1977, "director": "George Lucas" }, { "title": "Fight club", "year": 1999, "director": "David Fincher" } ] json.dumps json.loads Lista Sträng Lista Sträng
83. Nu till vårt projekt “There’s always a bigger fish.” - Qui-Gon Jinn
85. Routes => Vilka behöver vi? Route Syfte Metod Template / Till vår startsida GET index /vote Rösta på en sida POST index /disqus Visa gästbok GET disqus /new-post Skriv ett inlägg POST disqus *error404* En sida som ej finns Alla error
87. Testa så att allt fungerar Let the battle begin
88. 1. Fixa röstningen 2. Fixa gästboken
89. Röstningen • Spara alla röster i filen ”votes.json” • Spara rösterna som JSON-format, enligt mallen: { "empire": 0, "rebels": 0 } • Vi kan omvandla lexikon i Python till JSON genom: • json_votes = json.dumps(votes) • Vi kan omvandla JSON till Python-datatyper genom: • votes = json.loads(json_votes)
91. Flödesschema Läs in textfilens innehåll Tolka JSON-data till ett lexikon { "empire": 0, "rebels": 0 } 1 2 3
92. Flödesschema Läs in textfilens innehåll Tolka JSON-data till ett lexikon Skriv ut imperiets röster Skriv ut Rebellers röster Skicka röster till template Webbsida på internet
93. Nu bygger vi! ;)
94. 2. Fixa gästboken
95. “Power! Unlimited power!” - Darth Sidious
96. Frågor?