Time: 60 minutes

You have already written Python programs that run in the terminal. In this unit, you will build an application that people interact with through a web page.

Today, you will set up your project and use Flask to send data from Python to your browser. In later lessons, you will build the interface using HTML and AdminLTE.

By the end of this lesson, you should be able to:

• Create and activate a Python virtual environment.

• Start a local Flask server.

• Create two routes that return data.

• Explain what happens when you visit a route in your browser.

1. Understand what you are building — 5 minutes

When you visit your application in a browser:

1. The browser sends a request to your Flask server.

2. Flask matches the requested address to a route.

3. The Python function associated with that route runs.

4. Flask sends a response back to the browser.

Today, the response will contain JSON: a text format for exchanging structured data. It will look similar to a Python dictionary.

Your browser and server will both run on your own computer.

2. Create your project and virtual environment — 15 minutes

A virtual environment gives this project its own set of installed Python packages. We will create one using Python’s built-in venv module. (Flask Documentation (3.1.x))

Create a folder named my_first_web_app. Open that folder in VS Code using File → Open Folder.

Open Terminal → New Terminal. Make sure the terminal is working inside your project folder.

On macOS, enter these commands one at a time:

python3 -m venv .venv
source .venv/bin/activate

On Windows, use a Command Prompt terminal in VS Code. Select it from the dropdown beside the terminal’s + button, then enter:

py -3 -m venv .venv
.venv\Scripts\activate.bat

The first command creates the environment. The second activates it.

You should now see (.venv) near the beginning of your terminal prompt.

Install Flask:

python -m pip install Flask

Wait until installation finishes. Then check which Python you are using:

python -c "import sys; print(sys.executable)"

The displayed path should include .venv.

In VS Code, open the Command Palette:

• macOS: Command + Shift + P

• Windows: Ctrl + Shift + P

Search for Python: Select Interpreter and select the interpreter inside .venv.

Checkpoint: Show your teacher or partner that your Python path includes .venv and that Flask installed successfully.

Do not create or edit your own program files inside .venv.

3. Create your first Flask application — 15 minutes

In your project folder, create a file named app.py.

Enter:

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return {
        "message": "My first Flask application works!",
        "author": "Your first name"
    }

Replace "Your first name" with your first name. Save the file.

Read the following explanations before running it:

In the terminal, enter:

python -m flask --app app run --debug

This starts your local development server. Debug mode reloads your Python application when you save changes. (Flask Documentation (3.1.x))

Leave the terminal open. Open this address in your browser:

http://127.0.0.1:5000/

127.0.0.1 means your own computer. 5000 is the port your server is using.

You should see your message and name. The browser may display the JSON on one line or format it across several lines. Either is fine.

Now:

1. Change the message in app.py.

2. Save the file.

3. Refresh the browser.

4. Check that your new message appears.

Checkpoint: Explain to your partner which Python function runs when you refresh this address.

4. Add a route that generates something — 15 minutes

Add this import at the top of app.py:

import random

Add the following code below your existing function. Keep the first route.

@app.route("/api/generate")
def generate():
    adjectives = ["Ancient", "Rusty", "Glowing"]
    items = ["Sword", "Shield", "Staff"]

    adjective = random.choice(adjectives)
    item = random.choice(items)

    result = f"{adjective} {item}"

    return {"result": result}

Save the file. Visit:

http://127.0.0.1:5000/api/generate

Refresh several times.

Each request calls generate() again and makes new random selections. You might get the same result more than once.

Make it your own:

1. Choose a theme: food, sport, space, music, games, or another interest.

2. Change both lists to match your theme.

3. Include at least five options in each list.

4. Keep the formatted string that combines the selections.

5. Save and test your changes.

For example, a food generator could produce "Explosive Pancakes".

Think before you test:

• What do you expect to see at /?

• What do you expect to see at /api/generate?

• What do you expect to happen at /banana, which you have not defined?

Visit all three addresses and compare the results with your predictions.

Checkpoint: Show both working routes and explain why an undefined address produces a 404 Not Found response.

5. Save your work and complete the exit ticket — 10 minutes

Create a file named lesson1_notes.txt in your project folder.

Answer these questions in your own words:

1. Describe the purpose of your virtual environment.

2. Identify the route that runs your generator.

3. Explain what happens between refreshing /api/generate and seeing a result.

4. Predict what will happen if you stop Flask and then refresh the browser.

Test your final prediction:

• Click inside the terminal running Flask.

• Press Ctrl + C to stop the server.

• Refresh the browser.

Restart the server using:

python -m flask --app app run --debug

Before finishing, save your files and show your teacher:

• Your working home route.

• Your personalised generator route.

• Your completed exit ticket.

If something goes wrong

Finished early?

Add a third route named /api/about. Give its function a unique name. Return a dictionary containing your application’s name, theme, and a short description.

Test the route by entering its address directly in your browser.

Next lesson: You will begin building an HTML page that gives your application a visible interface.