raspberrypilearning · lawsie · Nov 22, 2024 · Jun 1, 2022 · Nov 18, 2024 · Nov 18, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/en/.DS_Store b/en/.DS_Store
diff --git a/en/images/.DS_Store b/en/images/.DS_Store
diff --git a/en/images/Python-Webserver-with-Flask-TILE.png b/en/images/Python-Webserver-with-Flask-TILE.png
diff --git a/en/images/flask-app-link.png b/en/images/flask-app-link.png
diff --git a/en/images/flask-app-with-colour.png b/en/images/flask-app-with-colour.png
diff --git a/en/images/flask-cakes.png b/en/images/flask-cakes.png
diff --git a/en/images/flask-hello-paul.png b/en/images/flask-hello-paul.png
diff --git a/en/images/flask-hello-world.png b/en/images/flask-hello-world.png
diff --git a/en/images/flask-on-android.png b/en/images/flask-on-android.png
diff --git a/en/images/flask-template.png b/en/images/flask-template.png
diff --git a/en/images/html-file.png b/en/images/html-file.png
diff --git a/en/images/idle-flask.png b/en/images/idle-flask.png
diff --git a/en/images/pi-run-web-app.png b/en/images/pi-run-web-app.png
diff --git a/en/images/showcase.png b/en/images/showcase.png
diff --git a/en/images/solution.png b/en/images/solution.png
diff --git a/en/meta.yml b/en/meta.yml
@@ -18,16 +18,18 @@ software: python, html-css-javascript
 version: 4.1
 last_tested: 2018-08-02
 steps:
-- title: Introduction
-- title: Build a Flask website
-- title: Add a new page
+- title: What you will make
+- title: Create the app
   completion:
   - engaged
-- title: Using HTML
-- title: 'Challenge: Add a HTML template to your 2nd page'
-  challenge: true
-- title: Add colour with CSS
-- title: Adding dynamic content
+- title: Add a new page
+- title: Create a HTML template
+- title: Use CSS styles
   completion:
   - internal
-- title: What next?
+- title: Dynamic content
+  completion:
+  - external
+- title: 'Challenge'
+  challenge: true
+- title: What can you do now?
diff --git a/en/step_1.md b/en/step_1.md
@@ -1,46 +1,28 @@
-## Introduction
+## What you will make
 
-### What you will make
+Set up a web server and create a simple website using Flask, Python, and HTML/CSS. 
+The web server will be able to react to the dynamic content that the user inputs.
 
-You'll set up a web server and create a simple website using Flask, Python, and HTML/CSS.
+![A web browser open on a page with blue text on a beige background. The text says 'My website' and has a link to 'Hi Paul'.](images/flask-app-link.png)
 
-![flask web app](images/showcase.png)
 
-The web server will be able to react to the dynamic content that the user inputs, so your website will be a web application that can more than just show static information.
+### You will need:
+- A Raspberry Pi with the latest Raspberry Pi OS 
 
 --- collapse ---
-
 ---
-title: What you will need
+title: Installing Flask
 ---
 
-### Hardware
-
-+ A computer capable of running Python 3
-
-### Software
-
-+ [Python 3](https://www.python.org/downloads/)
+`Flask` should be pre-installed as part of Raspberry Pi OS, so you shouldn't need to do anything.
 
---- /collapse ---
-
---- collapse ---
+You can install it manually with the command:
 
+--- code ---
 ---
-title: What you will learn
+language: bash
+line_numbers: false
 ---
-
-- How to install Python modules using `pip`
-- How to build a basic web app with Python and Flask
-
-This resource covers elements from the following strands of the [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 ---
-
-If you need to print this project, please use the [printer-friendly version](https://projects.raspberrypi.org/en/projects/python-web-server-with-flask/print){:target="_blank"}.
-
---- /no-print ---
-
+sudo apt install python3-flask
+--- /code ---
+--- /collapse ---
diff --git a/en/step_2.md b/en/step_2.md
@@ -1,65 +1,43 @@
-## Build a Flask website
-
-First, set up a basic web application with Flask and Python.
-
-If you don't have Python 3 on your computer, you need to download and install it.
-
---- task ---
-
-[Download Python 3](https://www.python.org/downloads/) and install it.
-
-[[[generic-python-install-python3]]]
-
---- /task ---
-
-You also need to install the Flask package. 
-
---- task ---
-
-Install the `flask` Python module using `pip`. Make sure you are connected to the internet before you start.
-
-[[[generic-python-installing-with-pip]]]
-
---- /task ---
-
-Once Flask is installed, you can create your web application.
+## Create the app
 
 --- task ---
+Open a terminal and use the `mkdir` command to create a new directory inside your documents folder called `webapp`.
 
-Open a terminal or command prompt window, and use the `mkdir` command to create a new directory called `webapp`.
-
-```bash
-mkdir webapp
-```
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+mkdir ~/Documents/webapp
+--- /code ---
 
 --- /task ---
 
 --- task ---
 
 Use the 'change directory' command `cd` to open the new directory.
 
-```bash
-cd webapp
-```
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+cd ~/Documents/webapp
+--- /code ---
 --- /task ---
 
 --- task ---
-
-Open Python 3 IDLE, and create a new file by clicking on**File** and then on **New file**.
-
+From the **Programming** menu, open **Thonny**.
 --- /task ---
-
 --- task ---
 
-Save the new file with the name `app.py` inside the `webapp` folder.
+Add this Python code into the blank file.
 
---- /task ---
-
---- task ---
-
-Now enter the following lines of code into the `app.py` file:
-
-```python
+--- code ---
+---
+language: python
+line_numbers: false
+---
 from flask import Flask
 
 app = Flask(__name__)
@@ -70,51 +48,40 @@ def index():
 
 if __name__ == '__main__':
     app.run(debug=True, host='0.0.0.0')
-```
-
-![idle](images/idle-flask.png)
-
-You will explore this code in more detail in the next step. But first, make sure the code works.
-
+--- /code ---
 --- /task ---
 
 --- task ---
-
-Save your changes by clicking on **File** and then on **Save**, or by pressing <kbd>Ctrl</kbd> and <kbd>S</kbd> at the same time. 
-
+Save the new file with the name `app.py` inside the `webapp` folder you just created.
 --- /task ---
 
-You need to run your web app from the terminal/command prompt window you opened earlier.
 
 --- task ---
+Go back to your terminal window and run the script you just wrote:
 
-### On Raspberry Pi/Linux/macOS
-
-Enter the command `python3 app.py` into the terminal window.
-
-### On Windows
-
-Enter the command `python app.py` into the command prompt window.
+--- code ---
+---
+language: bash
+line_numbers: false
+---
+python3 app.py
+--- /code ---
 
 --- /task ---
 
-If your code is correct, the window should show you output similar to this:
-
-```
- * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
- * Restarting with stat
- * Debugger is active!
- * Debugger pin code: ***-***-***
-```
+If everything is working correctly, the window should show you output similar to this:
 
 ![pi run web app](images/pi-run-web-app.png)
 
 --- task ---
+From your Raspberry Pi's menu, open **Internet** > **Chromium web browser**
+--- /task ---
 
-Now open your web browser and enter the URL `http://127.0.0.1:5000/`. You should see a white screen with the words `Hello world`.
-
-**Note:** `127.0.0.1` means 'home', i.e. your computer. `:5000` means 'port 5000', which is the port the web server is running on.
+--- task ---
+In the address bar, type `localhost:5000` and press <kbd>Enter</kbd>. You should see the welcome page.
 
 --- /task ---
 
 ![Flask Hello world](images/flask-hello-world.png)
+
+
diff --git a/en/step_3.md b/en/step_3.md
@@ -1,10 +1,13 @@
 ## Add a new page
 
-Now you're going to add a new page to your web app by creating a new **route**.
+To add a new page to your web app, you create a new **route**.
 
-In a web application, a route is a certain path into your website, determined by the URL the user types into their web browser's address bar. You create the routes and determine what each route does.
+--- collapse ---
+---
+title: What is a route?
+---
 
-In the code you already have in `app.py`, there is a single route:
+In the code you already have, there is a single route:
 
 ```python
 @app.route('/')
@@ -14,63 +17,39 @@ def index():
 
 This route is made up of three parts:
 
-- `@app.route('/')`: this determines the entry point; the `/` means the root of the website, so `http://127.0.0.1:5000/`
-- `def index()`: this is the name you give the route, in this case `index`, because it's the index (or homepage) of the website
-- `return 'Hello world'`: this is the content of the web page, which is returned when the user goes to this URL
-
-The second half of the `app.py` code runs the web server and your app:
-
-```python
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0')
-```
-
-**Note:** the `host='0.0.0.0'` means the web app is accessible to any device on the network.
+- `@app.route('/')`: what you add to the web address to access this route - `/`
+- `def index()`: the name of the route - `index`
+- `return 'Hello world'`: the contents the user will see - `Hello world`
 
-The following instructions show how to create a new page and route called 'cakes'. If you want, you can change the name and and the content to be whatever you wish.
+--- /collapse ---
 
 --- task ---
 
-To create a new page and a route to it, add these lines of code below where the first page and route are created in `app.py`:
-
-```python
-@app.route('/cakes')
-def cakes():
-    return 'Yummy cakes!'
-```
-
---- /task ---
-
---- collapse ---
+Add the code for a new route to `app.py` and **save** the file.
 
+--- code ---
 ---
-title: Complete code
+language: python
+line_numbers: true
+line_number_start: 5
+line_highlights: 9-11
 ---
-
-Your complete code should now look similar to this:
-
-```python
-from flask import Flask
-
-app = Flask(__name__)
-
 @app.route('/')
 def index():
     return 'Hello world'
 
 @app.route('/cakes')
 def cakes():
     return 'Yummy cakes!'
+--- /code ---
 
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0')
-```
-
---- /collapse ---
+--- /task ---
 
 --- task ---
 
-Save your code and navigate to the 'cakes' page in the browser at the address `127.0.0.1:5000/cakes`. You should see a web page with the text "Yummy cakes!" on it.
+In the **Chromium web browser**, type `localhost:5000/cakes` in the address bar.
+
+ You should see a web page with the text "Yummy cakes!" on it.
 
 ![Yummy Cakes](images/flask-cakes.png)