diff --git a/cs-CZ/meta.yml b/cs-CZ/meta.yml index 4c4b8e7..345657e 100644 --- a/cs-CZ/meta.yml +++ b/cs-CZ/meta.yml @@ -17,17 +17,17 @@ software: python, html-css-javascript version: 4.1 last_tested: 2018-08-02 steps: -- title: Co budeš dělat -- title: Vytvoř aplikaci - completion: - - engaged -- title: Přidej novou stránku -- title: Vytvoř HTML šablonu -- title: Použij CSS styl - completion: - - internal -- title: Dynamický obsah - completion: - - external -- title: 'Výzva' - challenge: true + - title: Co budeš dělat + - title: Vytvoř aplikaci + completion: + - engaged + - title: Přidej novou stránku + - title: Vytvoř HTML šablonu + - title: Použij CSS styl + completion: + - internal + - title: Dynamický obsah + completion: + - external + - title: 'Výzva' + challenge: true diff --git a/nl-NL/images/banner.png b/nl-NL/images/banner.png new file mode 100644 index 0000000..082983c Binary files /dev/null and b/nl-NL/images/banner.png differ diff --git a/nl-NL/images/flask-app-link.png b/nl-NL/images/flask-app-link.png new file mode 100644 index 0000000..c75fee1 Binary files /dev/null and b/nl-NL/images/flask-app-link.png differ diff --git a/nl-NL/images/flask-app-with-colour.png b/nl-NL/images/flask-app-with-colour.png new file mode 100644 index 0000000..11aee4b Binary files /dev/null and b/nl-NL/images/flask-app-with-colour.png differ diff --git a/nl-NL/images/flask-cakes.png b/nl-NL/images/flask-cakes.png new file mode 100644 index 0000000..2232934 Binary files /dev/null and b/nl-NL/images/flask-cakes.png differ diff --git a/nl-NL/images/flask-hello-paul.png b/nl-NL/images/flask-hello-paul.png new file mode 100644 index 0000000..e6b519e Binary files /dev/null and b/nl-NL/images/flask-hello-paul.png differ diff --git a/nl-NL/images/flask-hello-world.png b/nl-NL/images/flask-hello-world.png new file mode 100644 index 0000000..fa6c410 Binary files /dev/null and b/nl-NL/images/flask-hello-world.png differ diff --git a/nl-NL/images/flask-template.png b/nl-NL/images/flask-template.png new file mode 100644 index 0000000..a62457e Binary files /dev/null and b/nl-NL/images/flask-template.png differ diff --git a/nl-NL/images/html-file.png b/nl-NL/images/html-file.png new file mode 100644 index 0000000..dead737 Binary files /dev/null and b/nl-NL/images/html-file.png differ diff --git a/nl-NL/images/idle-css.png b/nl-NL/images/idle-css.png new file mode 100644 index 0000000..090a1ac Binary files /dev/null and b/nl-NL/images/idle-css.png differ diff --git a/nl-NL/images/idle-html.png b/nl-NL/images/idle-html.png new file mode 100644 index 0000000..f3d229a Binary files /dev/null and b/nl-NL/images/idle-html.png differ diff --git a/nl-NL/images/open-terminal.png b/nl-NL/images/open-terminal.png new file mode 100644 index 0000000..c4bf48e Binary files /dev/null and b/nl-NL/images/open-terminal.png differ diff --git a/nl-NL/images/open-text-editor.png b/nl-NL/images/open-text-editor.png new file mode 100644 index 0000000..552b289 Binary files /dev/null and b/nl-NL/images/open-text-editor.png differ diff --git a/nl-NL/images/pi-run-web-app.png b/nl-NL/images/pi-run-web-app.png new file mode 100644 index 0000000..6973df6 Binary files /dev/null and b/nl-NL/images/pi-run-web-app.png differ diff --git a/nl-NL/images/solution.png b/nl-NL/images/solution.png new file mode 100644 index 0000000..9f2de5a Binary files /dev/null and b/nl-NL/images/solution.png differ diff --git a/nl-NL/meta.yml b/nl-NL/meta.yml new file mode 100644 index 0000000..ce52950 --- /dev/null +++ b/nl-NL/meta.yml @@ -0,0 +1,33 @@ +--- +title: Bouw een Python-webserver met Flask +hero_image: images/banner.png +description: Installeer het Python webframework Flask en stel een eenvoudige webserver in met verschillende pagina's +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: Wat je gaat maken + - title: Maak de app + completion: + - engaged + - title: Een nieuwe pagina toevoegen + - title: Een HTML-sjabloon maken + - title: EDITED STRING + completion: + - internal + - title: Dynamische inhoud + completion: + - external + - title: 'Uitdaging' + challenge: true diff --git a/nl-NL/resources/.keep b/nl-NL/resources/.keep new file mode 100644 index 0000000..e69de29 diff --git a/nl-NL/solutions/webapp.zip b/nl-NL/solutions/webapp.zip new file mode 100644 index 0000000..c5d280b Binary files /dev/null and b/nl-NL/solutions/webapp.zip differ diff --git a/nl-NL/step_1.md b/nl-NL/step_1.md new file mode 100644 index 0000000..84016a4 --- /dev/null +++ b/nl-NL/step_1.md @@ -0,0 +1,32 @@ +## Wat je gaat maken + +Zet een webserver op en maak een eenvoudige website met behulp van Flask, Python en HTML/CSS. +De webserver kan reageren op de dynamische inhoud die de gebruiker invoert. + + + +### Wat heb je nodig: + +- Een Raspberry Pi met het nieuwste Raspberry Pi OS + +--- collapse --- +--- +title: Flask installeren +--- + +`Flask` zou vooraf geïnstalleerd moeten zijn als onderdeel van Raspberry Pi OS, dus u hoeft niets te doen. + +U kunt het handmatig installeren met de opdracht: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +sudo apt install python3-flask + +--- /code --- + +--- /collapse --- \ No newline at end of file diff --git a/nl-NL/step_2.md b/nl-NL/step_2.md new file mode 100644 index 0000000..5c69b69 --- /dev/null +++ b/nl-NL/step_2.md @@ -0,0 +1,110 @@ +## Maak de app + +--- task --- + +Open een terminal en gebruik de opdracht `mkdir` om een nieuwe map met de naam `webapp` te maken in uw documentenmap. + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +mkdir ~/Documents/webapp + +--- /code --- + +--- /task --- + +--- task --- + +Gebruik de opdracht `cd` om de nieuwe map te openen. + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +cd ~/Documents/webapp + +--- /code --- + +--- /task --- + +--- task --- + +Open **Thonny** in het menu **Programmeren**. + +--- /task --- + +--- task --- + +Voeg deze Python-code toe aan het lege bestand. + +## +--- code --- + +language: python +line_numbers: false +-------------------------------------------------------- + +from flask import Flask + +app = Flask(**name**) + +@app.route('/') +def index(): +return 'Hallo wereld' + +if **name** == '**main**': +app.run(debug=True, host='0.0.0.0') + +--- /code --- + +--- /task --- + +--- task --- + +Sla het nieuwe bestand op onder de naam `app.py` in de map `webapp` die u zojuist hebt gemaakt. + +--- /task --- + +--- task --- + +Ga terug naar uw terminalvenster en voer het script uit dat u zojuist hebt geschreven: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +python3 app.py + +--- /code --- + +--- /task --- + +Als alles goed werkt, ziet u in het venster uitvoer die er ongeveer zo uitziet: + + + +--- task --- + +Open in het menu van je Raspberry Pi **Internet** > **Chromium webbrowser** + +--- /task --- + +--- task --- + +Typ `localhost:5000` in de adresbalk en druk op en voerin. U zou de welkomstpagina moeten zien. + +--- /task --- + + + + diff --git a/nl-NL/step_3.md b/nl-NL/step_3.md new file mode 100644 index 0000000..9de5632 --- /dev/null +++ b/nl-NL/step_3.md @@ -0,0 +1,59 @@ +## Een nieuwe pagina toevoegen + +Om een nieuwe pagina aan uw web-app toe te voegen, maakt u een nieuwe **route**. + +--- collapse --- +--- +title: Wat is een route? +--- + +In de code die u al hebt, is er één route: + +```python +@app.route('/') +def index(): + return 'Hallo wereld' +``` + +Deze route bestaat uit drie delen: + +- `@app.route('/')`: wat u toevoegt aan het webadres om toegang te krijgen tot deze route - `/` +- `def index()`: de naam van de route - `index` +- `return 'Hallo wereld'`: de inhoud die de gebruiker zal zien - `Hallo wereld` + +--- /collapse --- + +--- task --- + +Voeg de code voor een nieuwe route toe aan `app.py` en **sla** het bestand op. + +## +--- code --- + +language: python +line_numbers: true +line_number_start: 5 +line_highlights: 9-11 +--- + +@app.route('/') +def index(): +return 'Hallo wereld' + +@app.route('/cakes') +def cakes(): +return 'Lekkere taarten!' + +--- /code --- + +--- /task --- + +--- task --- + +Typ in de **Chromium webbrowser** `localhost:5000/cakes` in de adresbalk. + +U zou een webpagina moeten zien met de tekst "Lekkere taarten!" erop. + + + +--- /task --- diff --git a/nl-NL/step_4.md b/nl-NL/step_4.md new file mode 100644 index 0000000..2dc7a5c --- /dev/null +++ b/nl-NL/step_4.md @@ -0,0 +1,123 @@ +## Een HTML-sjabloon maken + +U kunt een **sjabloon** gebruiken om uw pagina een stijl te geven. De sjabloon maakt gebruik van **HyperText Markup Language (HTML)**. + +--- task --- + +Ga naar je terminal en druk op Ctrl + C om je Flask-server te stoppen. + +--- /task --- + +--- task --- + +Maak een `templates`-map in uw `webapp`-map: + +## +--- code --- + +language: bash +line_numbers: false +-------------------------------------------------------- + +mkdir templates + +--- /code --- + +--- /task --- + +--- task --- + +Ga terug naar **Thomny** en maak een nieuw bestand. Sla dit bestand op als `index.html` in uw `templates`-map. + +--- /task --- + +--- task --- + +Voeg deze code toe aan `index.html` en **sla** uw wijzigingen op. + +## +--- code --- + +language: html +line_numbers: true +------------------------------------------------------- + + +
+