Focus of this Blog: Backend fundamentals + real-world application via a demo project

1. Why This Lesson Matters

Most modern apps talk to a backend. This is where user data lives, permissions are handled, and logic runs.

Students often focus on frontend or visuals. Teaching backend logic introduces them to the engine under the hood.

Knowing how to build and test APIs will help students build real, connected applications.

2. Core Concepts

Flask (Python Web Framework)

Flask helps turn Python code into web-accessible endpoints (APIs).

Key ideas:

  • @app.route() is how you define an endpoint (like a URL)
  • HTTP methods (GET, POST, PUT, DELETE)
  • JSON is the main format used to send/receive data

Example:

@app.route('/user', methods=['POST'])
def create_user():
    data = request.json
    # Save to database
    return {'message': 'User created'}, 201

REST Client (API Testing in VS Code)

Install REST Client by Huachao Mao and open the Flask backend repository. Select its local environment, then open api/user_auth.http and api/user_crud.http. Choose Send Request above one request at a time and inspect the response status, headers, and body.

Students and teachers should show how to:

  • Send a POST request with JSON
  • View the response (status codes, error messages)
  • Authenticate through the prompted login request, then use the remembered response cookie for protected requests on the same host
  • Select baseUrl through the backend’s REST Client environment settings

Backend UI (Internal Tools / Dashboards)

Often used by admins, teachers, or managers to interact with the backend directly.

Can include:

  • Tables of users
  • Buttons to delete/update
  • Calendar views, etc.

Helps bridge the gap between “just APIs” and a full application.

3. Project Demo (Main Activity)

What We Demo-ed:

A real, running backend system using Flask that supports:

  • Jokes: hacks/joke.py and file-backed data in hacks/jokes.py
  • Users: api/user.py and model/user.py, including authentication
  • Microblog: api/microblog_api.py and model/microblog.py
  • Backend UI: server-rendered Jinja templates for administration

Suggested Tinkering Extensions for Teachers:

Use REST Client to:

  • Read /api/jokes/count and /api/jokes without authentication
  • Authenticate with api/user_auth.http, then inspect /api/id
  • Read /api/microblog?limit=5 with the authenticated cookie
  • Send an authenticated empty-content microblog request and inspect its validation error without creating a post

Switch to the backend UI and show:

  • The user now appears in the dashboard
  • Compare displayed backend data with the JSON returned by API requests
  • Optional: Edit something in the UI and check if it reflects when you query via REST Client again

4. Key Messages to Pass to Your Students

  • You don’t always need a frontend to test things; APIs can be tested standalone.
  • A well-structured backend separates logic from presentation. It’s clean, scalable, and reusable.
  • Backend UIs are very helpful and make your systems usable by real people.

5. Tips for Teaching Backend Logic

  • Start with teaching the logic behind REST Client and backend requests
  • Let students build one route at a time and test it as they go.
  • Encourage debugging with print statements/logs.
  • Keep the UI simple (e.g., a table of users, or just a form) to focus on function over form.

6. Wrap-Up

Recap: Flask handles routes and logic, REST Client helps test, backend UI makes it usable.

Provide access to:

  • The Flask codebase
  • Version-controlled .http request files without committed credentials
  • Simple UI templates or examples

Optional challenge: Let students extend the backend with one more API (e.g., notes, assignments)

Configure and Run the Server:

Follow the backend README for local configuration. Database reset is a separate, potentially destructive operation: inspect scripts/db_init.py and its backup requirements with your teacher rather than running it as a routine startup command.

   python main.py

Test with REST Client or Visit the UI:

  • Select the local environment and send a request from an .http file.
  • The full user CRUD sequence requires Admin access. Use a disposable UID, set kasm_server_needed to false unless provisioning is intended, and stop before Update/Delete if test-user creation did not succeed.
  • Read the Flask API learning path for the jokes, user, and microblog request examples.

🙌 Bonus Challenge

Try adding your own API route — maybe for notes, assignments, or anything else! Then use REST Client to test it.

Flask Knowledge Check (UI Runner)

Challenge

Build a Flask Incident Simulator in outputElement. 1) Start with a mission briefing. 2) Respond to backend incidents that keep growing. 3) Track timer, system integrity, threat level, and streak. 4) Each correct action adds a brand-new incident. 5) Wrong actions hurt integrity and can trigger failure.

Lines: 1 Characters: 0
UI Output

Let us know what you build!

Tag us on GitHub or submit an issue to share your progress and achievements!