Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added cs-CZ/images/banner.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/flask-app-link.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/flask-app-with-colour.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/flask-cakes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/flask-hello-paul.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/flask-hello-world.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/flask-template.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/html-file.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/idle-css.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/idle-html.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/open-terminal.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/open-text-editor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/pi-run-web-app.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added cs-CZ/images/solution.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions cs-CZ/meta.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: Vytvoř webový server v Pythonu pomocí Flasku
hero_image: images/banner.png
description: Nainstaluj si webový framework Flask v Pythonu a nastav základní webový server s různými stránkami
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: 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
30 changes: 30 additions & 0 deletions cs-CZ/step_1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
## Co budeš dělat

Nastav webový server a vytvoř jednoduchý web pomocí Flasku, Pythonu a HTML/CSS.
Webový server bude schopen reagovat na dynamický obsah, který uživatel zadá.

![Webový prohlížeč otevřený na stránce s modrým textem na béžovém pozadí. Text říká „Moje webová stránka“ a obsahuje odkaz na „Ahoj Paule“.](images/flask-app-link.png)

### Co budeš potřebovat:

- Raspberry Pi s nejnovějším operačním systémem Raspberry Pi OS

## --- collapse ---

## title: Instalace Flasku

`Flask` by měl být předinstalován jako součást operačního systému Raspberry Pi, takže bys s ním neměl dělat nic dalšího.

Můžeš jej nainstalovat ručně pomocí příkazu:

## --- code ---

language: bash
line_numbers: false
--------------------------------------------------------

sudo apt install python3-flask

\--- /code ---

\--- /collapse ---
106 changes: 106 additions & 0 deletions cs-CZ/step_2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
## Vytvoř aplikaci

\--- task ---

Otevři terminál a pomocí příkazu `mkdir` vytvoř ve složce dokumentů nový adresář s názvem `webapp`.

## --- code ---

language: bash
line_numbers: false
--------------------------------------------------------

mkdir ~/Documents/webapp

\--- /code ---

\--- /task ---

\--- task ---

Pro otevření nového adresáře použij příkaz `cd` pro změnu adresáře.

## --- code ---

language: bash
line_numbers: false
--------------------------------------------------------

cd ~/Documents/webapp

\--- /code ---

\--- /task ---

\--- task ---

V nabídce **Programování** otevři **Thony**.

\--- /task ---

\--- task ---

Přidej tento kód Pythonu do prázdného souboru.

## --- code ---

language: python
line_numbers: false
--------------------------------------------------------

from flask import Flask

app = Flask(**name**)

@app.route('/')
def index():
return 'Ahoj světe'

if **name** == '**main**':
app.run(debug=True, host='0.0.0.0')

\--- /code ---

\--- /task ---

\--- task ---

Ulož nový soubor s názvem `app.py` do složky `webapp`, kterou jsi právě vytvořil.

\--- /task ---

\--- task ---

Vrať se do terminálového okna a spusť skript, který jsi právě napsal:

## --- code ---

language: bash
line_numbers: false
--------------------------------------------------------

python3 app.py

\--- /code ---

\--- /task ---

Pokud vše funguje správně, okno by mělo ukázat výstup podobný tomuto:

![spusť webovou aplikaci pi](images/pi-run-web-app.png)

\--- task ---

V nabídce Raspberry Pi otevři **Internet** > **Webový prohlížeč Chromium**

\--- /task ---

\--- task ---

Do adresního řádku zadej `localhost:5000` a stiskni <kbd>Enter</kbd>. Měl bys vidět uvítací stránku.

\--- /task ---

![Flask Ahoj světe](images/flask-hello-world.png)


57 changes: 57 additions & 0 deletions cs-CZ/step_3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
## Přidej novou stránku

Chceš-li do webové aplikace přidat novou stránku, vytvoř novou **trasu**.

## --- collapse ---

## title: Co je to trasa?

V kódu, který již máš, je jedna trasa:

```python
@app.route('/')
def index():
return 'Ahoj světe'
```

Tato trasa se skládá ze tří částí:

- `@app.route('/')`: co přidáš k webové adrese pro přístup k této trase - `/`
- `def index()`: název trasy - `index`
- `return 'Hello world'`: obsah, který uživatel uvidí - `Hello world`

\--- /collapse ---

\--- task ---

Přidej kód pro novou trasu do souboru `app.py` a soubor **ulož**.

## --- code ---

language: python
line_numbers: true
line_number_start: 5
line_highlights: 9-11
----------------------------------------------------------

@app.route('/')
def index():
return 'Ahoj světe'

@app.route('/dorty')
def dorty():
return 'Vynikající dorty!'

\--- /code ---

\--- /task ---

\--- task ---

V prohlížeči Chromium zadej do adresního řádku adresu `localhost:5000/cakes`.

Měl bys vidět webovou stránku s textem „Mňam dorty!“.

![Chutné dorty](images/flask-cakes.png)

\--- /task ---
118 changes: 118 additions & 0 deletions cs-CZ/step_4.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
## Vytvoř HTML šablonu

Styl stránky můžeš upravit pomocí **šablony**. Šablona bude používat **HyperText Markup Language (HTML)**.

\--- task ---

Přejdi do terminálu a stiskni <kbd>Ctrl</kbd> + <kbd>C</kbd> pro zastavení Flask serveru.

\--- /task ---

\--- task ---

Vytvoř adresář `templates` ve tvém adresáři `webapp`:

## --- code ---

language: bash
line_numbers: false
--------------------------------------------------------

mkdir templates

\--- /code ---

\--- /task ---

\--- task ---

Vrať se do **Thony** a vytvoř nový soubor. Ulož tento soubor jako `index.html` do složky `templates`.

\--- /task ---

\--- task ---

Přidej tento kód do souboru `index.html` a **ulož** změny.

## --- code ---

language: html
line_numbers: true
-------------------------------------------------------

<html>
<body>
<h1>Moje webová stránka</h1>
</body>
</html>

\--- /code ---

![Nový soubor s názvem index.html obsahující výše uvedený kód](images/html-file.png)

\--- /task ---

\--- task ---

\--- /task ---

\--- task ---

Vrať se do souboru `app.py` a změň první řádek kódu:

## --- code ---

language: python
line_numbers: true
-------------------------------------------------------

from flask import Flask, render_template

\--- /code ---

\--- /task ---

\--- task ---

Změň trasu `index()` tak, aby používala tvou HTML šablonu `index.html`:

## --- code ---

language: python
line_numbers: true
line_number_start: 5
line_highlights: 7
-------------------------------------------------------

@app.route('/')
def index():
return render_template('index.html')

\--- /code ---

\--- /task ---

\--- task ---

Ulož soubor `app.py` a poté se vrať do terminálu a spusť jej pro restartování serveru:

## --- code ---

language: bash
line_numbers: false
--------------------------------------------------------

python3 app.py

\--- /code ---

\--- /task ---

\--- task ---

V prohlížeči **Chromium** přejdi na stránku `localhost:5000/` a zobrazí se ti nová HTML šablona.

![Webový prohlížeč ukazoval na localhost:5000 s textem „Moje webová stránka“ velkým písmem v záhlaví](images/flask-template.png)

\--- /task ---

Loading