diff --git a/da-DK/images/.keep b/da-DK/images/.keep new file mode 100644 index 0000000..e69de29 diff --git a/da-DK/images/Python-Webserver-with-Flask-TILE.png b/da-DK/images/Python-Webserver-with-Flask-TILE.png new file mode 100644 index 0000000..34679e7 Binary files /dev/null and b/da-DK/images/Python-Webserver-with-Flask-TILE.png differ diff --git a/da-DK/images/banner.png b/da-DK/images/banner.png new file mode 100644 index 0000000..082983c Binary files /dev/null and b/da-DK/images/banner.png differ diff --git a/da-DK/images/flask-app-link.png b/da-DK/images/flask-app-link.png new file mode 100644 index 0000000..52b2334 Binary files /dev/null and b/da-DK/images/flask-app-link.png differ diff --git a/da-DK/images/flask-app-with-colour.png b/da-DK/images/flask-app-with-colour.png new file mode 100644 index 0000000..84d625e Binary files /dev/null and b/da-DK/images/flask-app-with-colour.png differ diff --git a/da-DK/images/flask-cakes.png b/da-DK/images/flask-cakes.png new file mode 100644 index 0000000..7641f1b Binary files /dev/null and b/da-DK/images/flask-cakes.png differ diff --git a/da-DK/images/flask-hello-paul.png b/da-DK/images/flask-hello-paul.png new file mode 100644 index 0000000..8cb68dd Binary files /dev/null and b/da-DK/images/flask-hello-paul.png differ diff --git a/da-DK/images/flask-hello-world.png b/da-DK/images/flask-hello-world.png new file mode 100644 index 0000000..0c1152c Binary files /dev/null and b/da-DK/images/flask-hello-world.png differ diff --git a/da-DK/images/flask-on-android.png b/da-DK/images/flask-on-android.png new file mode 100644 index 0000000..8933425 Binary files /dev/null and b/da-DK/images/flask-on-android.png differ diff --git a/da-DK/images/flask-template.png b/da-DK/images/flask-template.png new file mode 100644 index 0000000..aefdb02 Binary files /dev/null and b/da-DK/images/flask-template.png differ diff --git a/da-DK/images/idle-css.png b/da-DK/images/idle-css.png new file mode 100644 index 0000000..090a1ac Binary files /dev/null and b/da-DK/images/idle-css.png differ diff --git a/da-DK/images/idle-flask.png b/da-DK/images/idle-flask.png new file mode 100644 index 0000000..e936352 Binary files /dev/null and b/da-DK/images/idle-flask.png differ diff --git a/da-DK/images/idle-html.png b/da-DK/images/idle-html.png new file mode 100644 index 0000000..f3d229a Binary files /dev/null and b/da-DK/images/idle-html.png differ diff --git a/da-DK/images/open-terminal.png b/da-DK/images/open-terminal.png new file mode 100644 index 0000000..c4bf48e Binary files /dev/null and b/da-DK/images/open-terminal.png differ diff --git a/da-DK/images/open-text-editor.png b/da-DK/images/open-text-editor.png new file mode 100644 index 0000000..552b289 Binary files /dev/null and b/da-DK/images/open-text-editor.png differ diff --git a/da-DK/images/pi-run-web-app.png b/da-DK/images/pi-run-web-app.png new file mode 100644 index 0000000..860d444 Binary files /dev/null and b/da-DK/images/pi-run-web-app.png differ diff --git a/da-DK/images/showcase.png b/da-DK/images/showcase.png new file mode 100644 index 0000000..93ae577 Binary files /dev/null and b/da-DK/images/showcase.png differ diff --git a/da-DK/meta.yml b/da-DK/meta.yml new file mode 100644 index 0000000..783d2ba --- /dev/null +++ b/da-DK/meta.yml @@ -0,0 +1,28 @@ +--- +title: Byg en Python Web Server med Flask +hero_image: images/banner.png +description: I denne guide installerer vi det simpel web framework Flask, og sætter en enkel web server op med forskellige sider, ved at bruge Python, HTML og CSS. +original_url: https://raspberrypi.org/learning/python-web-server-with-flask +theme: yellow +duration: 2 +listed: true +ingredient: false +copyedit: true +curriculum: 3, design-0, programming-3, phys-comp-0, manufacture-0, community-0 +interests: '' +technologies: python, html-css-javascript +site_areas: projects +hardware: '' +software: python, html-css-javascript +version: 4.1 +last_tested: 2018-08-02 +steps: +- title: Introduktion +- title: Byg en Flask hjemmeside +- title: Tilføj en ny side +- title: Returner HTML web sider +- title: "Udfordring: Tilføj en HTML template til den anden side" + challenge: true +- title: Tilføj farver med CSS +- title: Tilføj dynamisk indhold +- title: Hvad skal det næste være? diff --git a/da-DK/resources/.keep b/da-DK/resources/.keep new file mode 100644 index 0000000..e69de29 diff --git a/da-DK/solutions/webapp.zip b/da-DK/solutions/webapp.zip new file mode 100644 index 0000000..c5d280b Binary files /dev/null and b/da-DK/solutions/webapp.zip differ diff --git a/da-DK/step_1.md b/da-DK/step_1.md new file mode 100644 index 0000000..669d3ba --- /dev/null +++ b/da-DK/step_1.md @@ -0,0 +1,45 @@ +## Introduktion + +### Hvad skal du have + +Du sætter en web server op og laver en simpel hjemmeside med Flask, Python og HTML/CSS + +![flask web app](images/showcase.png) + +Web serveren vil kunne reagere på dynamisk indhold som en bruger giver. Altså din hjemmeside vil kunne mere end bare vise statisk information. + +--- collapse --- + +--- +title: Hvad har du brug for +--- + +### Hardware + ++ En computer der kan køre Python 3 (Det kan alle) + +### Software + ++ [Python 3](https://www.python.org/downloads/) + +--- /collapse --- + +--- collapse --- + +--- +title: Hvad du vil lære +--- + +- Hvordan man installerer Python moduler med `pip` +- Hvordan man bygger en enkel web app med Python og Flask + +Denne ressurse dækker elementer fra de følgende dele af [Raspberry Pi Digital Making Curriculum](https://www.raspberrypi.org/curriculum/): +- [Apply abstraction and decomposition to solve more complex problems](https://curriculum.raspberrypi.org/programming/developer/) + +--- /collapse --- + +--- no-print --- + +Hvis du har brug for at printe projektet ud på papir, så benyt denne [papir og printer venlige version](https://projects.raspberrypi.org/en/projects/python-web-server-with-flask/print){:target="_blank"}. + +--- /no-print --- diff --git a/da-DK/step_2.md b/da-DK/step_2.md new file mode 100644 index 0000000..c6bd6dc --- /dev/null +++ b/da-DK/step_2.md @@ -0,0 +1,120 @@ +## Byg en Flask Hjemmeside + +Det første vi skal gøre, er at lave en enkel web applikation med Flask og Python. + +Hvis du ikke har Python 3 på din computer, er du nødt til at installere det. + +--- task --- + +[Hent Python 3](https://www.python.org/downloads/) og installer det. + +[[[generic-python-install-python3]]] + +--- /task --- + +Du har også behov for at installer Flask pakken. + +--- task --- + +Installer `flask` Python modulet ved at bruge `pip`. Du skal være forbundet til internettet før du kan begynde. + +[[[generic-python-installing-with-pip]]] + +--- /task --- + +Når Flask er installeret, kan du oprette din web applikation. + +--- task --- + +Åben en terminal eller et vindue i kommandoprompt, og brug `mkdir` kommandoen til at lave en ny mappe der hedder `webapp`. + +```bash +mkdir webapp +``` + +--- /task --- + +--- task --- + +Brug 'change directory' kommandoen `cd` til at åbne den nye mappe. + +```bash +cd webapp +``` +--- /task --- + +--- task --- + +Åben Python 3 IDLE, og lav en ny fil ved at trykke på **File** og så på **New file**. + +--- /task --- + +--- task --- + +Gem den nye fil med navnet `app.py` inde i `webapp` mappen. + +--- /task --- + +--- task --- + +Skriv nu de følgende linjer kode i `app.py` filen: + +```python +from flask import Flask + +app = Flask(__name__) + +@app.route('/') +def index(): + return 'Hello world' + +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0') +``` + +![idle](images/idle-flask.png) + +Vi vil dykke ned i koden senere i næste skridt. Lige nu skal vi tjekke at koden virker. + +--- /task --- + +--- task --- + +Gem dine ændringer ved at trykke på **File** og så på **Save**, eller ved at trykke Ctrl og S på samme tid. + +--- /task --- + +Du er så nødt til at køre din web app fra a terminalen/kommandoprompten du åbnede tidligere. + +--- task --- + +### On Raspberry Pi/Linux/macOS + +Skriv kommandoen `python3 app.py` i terminal vinduet. + +### On Windows + +Skriv kommandoen `python app.py` i kommandoprompt vinduet. + +--- /task --- + +Hvis din kode er korrekt, så skulle vinduet vise dig noget i retningen af det her: + +``` + * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit) + * Restarting with stat + * Debugger is active! + * Debugger pin code: ***-***-*** +``` + +![pi run web app](images/pi-run-web-app.png) + +--- task --- + +Åben nu din browser og skriv URL'en `http://127.0.0.1:5000/`. Du burde se en hvid skærm med ordene `Hello world`. + +**Note:** `127.0.0.1` betyder 'home', i.e. altså din computer. `:5000` betyder 'port 5000', hvilket er porten web serveren kører på. + +--- /task --- + +![Flask Hello world](images/flask-hello-world.png) diff --git a/da-DK/step_3.md b/da-DK/step_3.md new file mode 100644 index 0000000..d08b6a4 --- /dev/null +++ b/da-DK/step_3.md @@ -0,0 +1,77 @@ +## Tilføj en ny side + +Nu skal du tilføje en ny side til din web app ved at lave en ny **route**. + +I en web applikation, er en route en bestemt sti ind i din hjemmeside. Stien er bestemt af den URL soms brugeren skriver i deres web browser's adressefelt. Du laver routes(ruter) og bestemmer hvad hver route skal gøre. + +I koden du allerede har i `app.py`, er der en enkelt route: + +```python +@app.route('/') +def index(): + return 'Hello world' +``` + +Denne route er lavet af 3 dele: + +- `@app.route('/')`: bestemmer indgangspunktet; symbolet `/` betyder roden af hjemmesiden, altså `http://127.0.0.1:5000/` +- `def index()`: er navnet du giver ruten, i dette tilfælde `index`, fordi det er indekset (eller forside) på hjemmesiden. +- `return 'Hello world'`: er indholdet på din hjemmeside, som bliver returneret når brugeren går ind på denne URL. + +Den anden halvdel af `app.py` koden kører web serveren og din app: + +```python +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0') +``` + +**Note:** `host='0.0.0.0'` betyder din web app er tilgængeligt til alle enheder på netværket. + +De følgende instrukser viser hvordan man laver en ny side og rute der hedder 'cakes'. Hvis du vil, kan du ændre navnet og indholdet til det du vil. + +--- task --- + +For at lave en ny side og en rute til den, tilføj disse linjer kode, som set nedenunder, hvor den første side og rute bliver lavet i `app.py`: + +```python +@app.route('/cakes') +def cakes(): + return 'Yummy cakes!' +``` + +--- /task --- + +--- collapse --- + +--- +title: Den færdige kode +--- + +Dit færdige kode burde se sådan her ud: + +```python +from flask import Flask + +app = Flask(__name__) + +@app.route('/') +def index(): + return 'Hello world' + +@app.route('/cakes') +def cakes(): + return 'Yummy cakes!' + +if __name__ == '__main__': + app.run(debug=True, host='0.0.0.0') +``` + +--- /collapse --- + +--- task --- + +Gem din kode og naviger til 'cakes' siden i din browser på adresssen `127.0.0.1:5000/cakes`. Du burde se en hjemmeside med teksten "Yummy cakes!" på den. + +![Yummy Cakes](images/flask-cakes.png) + +--- /task --- diff --git a/da-DK/step_4.md b/da-DK/step_4.md new file mode 100644 index 0000000..8e9cbc8 --- /dev/null +++ b/da-DK/step_4.md @@ -0,0 +1,83 @@ +## Returner HTML web sider + +Nu skal du modificere dine eksisterende ruter til at returnere en fuld HTML web side, i stedet for almindelig tekst. + +HTML web siden vil blive lavet fra en skabelon eller **template** som holder det statiske indhold af siden. I en senere sektion af dette projekt, vil du lære hvordan man indsætter data så man har en dynamisk version af siden. + +--- task --- + +Først, lav et `templates` mappe i din `webapp` mappe ved at skrive den følgende kommando i terminalen eller kommandoprompt vinduet: + +```bash +mkdir templates +``` + +--- /task --- + +--- task --- + +Lav en ny fil i IDLE ved at trykke på **File** og **New File**, og gem filen som `index.html` i din `templates` mappe. + +--- /task --- + +--- task --- + +Skriv den følgende HTML kode i `index.html`: + +```html + + +

My website

+ + +``` + +![idle html](images/idle-html.png) + +--- /task --- + +--- task --- + +Gem dine ændringer ved at trykke **File** og **Save**, eller ved at trykke Ctrl og s. + +--- /task --- + +--- task --- + +Gå tilbage til din `app.py` fil i IDLE, og modificer den første linje af ddin kode for også at importere `render_template` funktionen fra `flask` modulet: + +```python +from flask import Flask, render_template +``` + +--- /task --- + +--- task --- + +Slutteligt, modificer din `index()` funktion til at returnere `index.html` HTML templaten i stedet for den normale tekst. Rediger kodden inde i funktionsdefinitionen så koden ser sådan her ud: + +```python +@app.route('/') +def index(): + return render_template('index.html') +``` + +Denne kode for Flask til at kigge efter `index.html` i `templates` mappen som `app.py` programet er i. + +--- /task --- + +--- task --- + +Gem filen. Vær sikker på at dit `app.py` program stadig kører. Hvis ikke, så kør det igen ved at bruge terminalen/kommandoprompten. + +--- /task --- + +--- task --- + +Indlæs `http://127.0.0.1:5000/` siden i din web browser for at se dit nye HTML template blive vist. + +![my website](images/flask-template.png) + +I dette tilfælde er hvad du ser ikke meget anderledes, fordi det eneste nye er en HTML header. Der er dog bedre mulighed for at tilføje mere! + +--- /task --- diff --git a/da-DK/step_5.md b/da-DK/step_5.md new file mode 100644 index 0000000..f66286c --- /dev/null +++ b/da-DK/step_5.md @@ -0,0 +1,43 @@ +## Udfordring: tilføj en HTML template til den anden side + +Nu ved du hvordan du ændrer din 'index' side til at bruge en HTML template, prøv nu at få din 'cakes' side til også at bruge HTML template! + +--- hints --- + +--- hint --- + +Gentage skridtene i den tidligere projekt sektion til at lave og bruge en HTML template for 'cakes' siden. + +--- /hint --- + +--- hint --- + +Lav en `cakes.html` fil og gem den i `templates`. + +Modificer `cakes()` funktionen i `app.py` til at bruge `render_template`. + +--- /hint --- + +--- hint --- + +Din `cakes.html` template burde se sådan her ud: + +```html + + +

Yummy cakes!

+ + +``` + +Modificer `cakes()` funktionen i `app.py`: + +```python +@app.route('/cakes') +def cakes(): + return render_template('cakes.html') +``` + +--- /hint --- + +--- /hints --- diff --git a/da-DK/step_6.md b/da-DK/step_6.md new file mode 100644 index 0000000..c3bf7be --- /dev/null +++ b/da-DK/step_6.md @@ -0,0 +1,86 @@ +## Tilføj farver med CSS + +Nu skal du tilføje noget Cascading Style Sheets (CSS) for at tilføje farve til din hjemmesisde. Cascading Style Sheets er regler for hvordan en brwoser viser HTML indhold. + +--- task --- + +Først, gå tilbage til terminal/kommandoprompt vinduet og naviger til `webapp` mappen. Hvis du er i `templates` directory, gå et level op med kommandoen `cd ..`. + +--- /task --- + +--- task --- + +Lav et nyt mappe der hedder `static`. + +```bash +mkdir static +``` + +--- /task --- + +--- task --- + +Lav en ny fil i IDLE ved at trykke på **File** og **New File**, og gem filen som `style.css` i`static` mappen. + +--- /task --- + +--- task --- + +Tilføj de følgende CSS regler til filen: + +```css +body { + background: red; + color: yellow; +} +``` + +![idle css](images/idle-css.png) + +**Note:** denne kode indeholder farvenavne, men du kan også bestemme farver ved at bruge hex koder som `#ff0000` (rød). + +--- /task --- + +--- task --- + +Gem dine ændringer. + +--- /task --- + +--- task --- + +Modificer nu din `index.html` HTML template til at inkludere CSS ved at tilføje en `` tag der indeholder et `` tag med en reference til style sheet filen: + +```html + + + + + +

My website

+ + +``` + +--- /task --- + +--- task --- + +Gem ændringer til `index.html` og genindlæs din browser. Du burde nu se en mere farverig version af din web app! + +![Flask app with colour](images/flask-app-with-colour.png) + +--- /task --- + +Hvis din web app ikke ser helt rigtigt ud, kan det være din CSS fil ikke er i den rigtige mappe. + +Du har nu en række af filer og mapper i din web app. Det er værd at tjekke om din `webapp` projektmappe indeholder de følgende filer og har den følgende struktur: + +``` +├── app.py +├── static +│   └── style.css +└── templates + └── index.html + └── cakes.html +``` diff --git a/da-DK/step_7.md b/da-DK/step_7.md new file mode 100644 index 0000000..c2f7eb9 --- /dev/null +++ b/da-DK/step_7.md @@ -0,0 +1,86 @@ +## Tilføj dynamisk indhold + +Nu ved du hvordan man leverer statisk HTML hjemmesider ved at bruge templates(skabeloner). Store hjemmesider som Facebook, Youtube og DR har dynamis indhold: disse hjemmesider viser forskelligt indhold på de forskellige sider du besøger, selvom skabelonerne på siderne er meget ens. + +Du vil nu tilføje dynamisk indhold til dine sider så du kan vise forskellige information. + +Nu skal du lave en ny rute på din hjemmeside så når du går til `http://127.0.0.1/hello/name`, så siger siden 'Hello name!', hvor du erstatter 'name' med hvad end du skriver der. For eksempel, `/hello/Dana/` viser 'Hello Dana!'. + +--- task --- + +Tilføj den følgende kode til at lave en ny rute i din applikation: + +```python +@app.route('/hello/') +def hello(name): + return render_template('page.html', name=name) +``` + +- `@app.route('/hello/')`: Kodedelen `` betyder den putter navnet ind i `hello` funktionen som en variabel der hedder `name`. +- `def hello(name)`: dette er funktionen der bestemmer hvilket indhold der skal vises. Her vil funktionen take det givne navn som parameter. +- `return render_template('page.html', name=name)`: denne kode vil slå skabelonen `page.html` op og sende variablen `name` fra URL stien ind, så skabelonen kan bruge den. + +--- /task --- + +--- task --- + +Lav en ny HTML skabelon som hedder `page.html`, og tilføj det følgende HTML kode til det: + +```html + + +

Hello {{ name }}!

+ + +``` + +--- /task --- + +--- task --- + +Gem filerne og besøg `http://127.0.0.1:5000/hello/paul`. Siden du ser burde se sådan ud: + +![Hello Paul!](images/flask-hello-paul.png) + +Prøv `http://127.0.0.1/hello/name` med forskellige navne! + +--- /task --- + +--- collapse --- + +--- +title: Hvad sker der her? +--- + +Flask bruger `jinja`, et Python bibliotek til at tegne skabeloner. Se på denne kode med krøllede paranteser: + +```html +

Hello {{ name }}!

+``` + +Denne kode fortæller skabelonen at tegne variablen `name` så den passer ind i rute funktionen `hello`. + +Når man besøger `127.0.0.1:5000/hello/` uden et navn, vil den lave en fejl. Prøv at tænk på en måde man undgår denne fejl. + +--- /collapse --- + +--- task --- + +Lav et link til din nye dynamiske "hello" side fra din indeks side. + +Rediger `index.html` til at have en link til din "hello" side under overskriften. + +```html +

My website

+Hi Paul +``` + +--- /task --- + +--- task --- + +Gem ændringerne til`index.html`, og så genindlæs index siden i din browser for at se den opdaterede version. + +![flask app link](images/flask-app-link.png) + +--- /task --- diff --git a/da-DK/step_8.md b/da-DK/step_8.md new file mode 100644 index 0000000..b7d7af4 --- /dev/null +++ b/da-DK/step_8.md @@ -0,0 +1,7 @@ +## Hvad skal det næste være? + +- Tilføj flere CSS regler til hver af dine sider +- Skab links til dine favorit hjemmesider +- Lær mere om HTML, CSS og webudvikling med [CoderDojo](https://projects.raspberrypi.org/en/CoderDojo/21), [Mozilla Developer Network](https://developer.mozilla.org/en-US/Learn) and [Codecademy](https://www.codecademy.com/en/tracks/web) +- Lær mere om Flask fra [Flask dokumentationen](http://flask.pocoo.org/docs) +- Lav et fysisk beregningsprojekt med Raspberry Pi og brug Flask som web interface - Du kan bruge [Matt Richardson's guide](http://mattrichardson.com/Raspberry-Pi-Flask/index.html) or [Ben Nuttall's BETT Bot code](https://github.com/bennuttall/bett-bot) som hjælp