13. Server and Client App Samples

• 1: Flask server app
• 2: PyGame client app

1 - Flask server app

Intro

The Python web application above is written using the Flask framework. Flask is used by companies including Netflix, Uber, and LinkedIn to create web applications. It is installed as a Python library with the pip tool.

Webapp setup

Deploying this Flask web application to ada is your Assignment #7. Follow these steps to check out and run the project on your computer:

1. Accept the GitHub Classroom assignment #7: https://classroom.github.com/a/wbeITctx. This is an individual assignment.
2. Clone the repo to your your local computer. This should create a project directory called assn7-<your_name> or something similar.
3. Using your Terminal, cd into the project directory.
4. Open Visual Studio Code in the working directory with code .. It is essential that your assn7-<your-name>/ directory is the top-level of Visual Studio Code.
5. In the menu bar, select View → Command Palette
6. Search for “environment” and select Python: Create Environment…
7. Select Venv
8. Select a recent Python version.
9. On “Select dependencies to install”, check the box next to requirements.txt. Click “Okay”.

It may take a minute. Visual Studio Code will create a copy of Python in the directory in the .venv/ subdirectory. This is considered best practice in Python development when you need to install libraries, like Flask, so that you do not “pollute” the system Python directory with many libraries that are not needed for all your programs.

Project structure

You will see several files in the project folder:

• app.py: This is the main Python file that defines the Flask application. It specifies what types of requests to respond to. It calls the other files to handle the logic. Think of it as the user interface of the application.
• quizzer.py: a plain Python file that has some functions related to quiz questions and answers. This functions are called by app.py.
• questions.py: contains a Python class definition for a MultipleChoiceQuestion and initializes a list of QUESTIONS the app serves.
• test_quizzer.py: unit tests for quizzer.py. You can run pytest in the Terminal to try them.
• templates/: website files go in here to be sent to a browser. For now, there is only index.html, which app.py sends back to clients that browser to the server’s home page.
• Other things:
  • .venv/: the Python virtual environment used to run the app. Ignore this.
  • .gitignore: tells Git to ignore specific files.
  • requirements.txt: tells the virtual environment which pip libraries are needed to run the project.

Running the webapp

We need to run the Flask web application from Visual Studio Code’s integrated terminal.

Note: Flask will only run with the “virtual environment” in .venv/ active. Visual Studio Code will activate it for you automatically. If you want to run from your system Terminal, you will need to run source .venv/bin/activate first from your project directory.

Run flask --app app run --debug to start the Flask webapp. You should see output similar to the following in your Terminal:

You may be prompted by your OS to allow connections. You do not need to allow external connections for it to work.

Open a web browser to http://127.0.0.1:5000

You should see the Welcome Page:

Great! You are now running a web application built in Python using the Flask library.

Interacting with the web app

Your web browser is a client and the Flask app is a server. Web browsers issue HTTP requests to servers, and the servers send an HTTP response.

Think of HTTP requests and responses as another envelope. The envelope is a merely a string of text in a particular format. The contents of the envelope are bits that can be strings, images, videos, audio, integers, floats, etc.

This Flask web app is sending its contents as strings in JSON format. The JSON form is very similar to a Python dictionary: it has keys and values.

Key commands

Make sure you have the project open in Visual Studio code and are using the Integrated Terminal.

• To start: flask --app app run --debug
• To stop: Hit CTRL+C with the Terminal selected.

2 - PyGame client app

Intro

In the previous lab, we checked out and ran a Flask web app.

We saw that a web browser can work as a function for the Flask web app. Let’s use another client that is a game. After all, the Flask app is just sending JSON data, which is basically a dictionary. Python can handle dictionaries.

The app below is a game with minimal functionality that enables you to answer quiz questions.

Pygame app setup

1. Accept the PyGame Quizzer assignment: https://classroom.github.com/a/dPKVKNki.
2. Clone the repo to your your local computer. This should create a project directory called pygame-quizzer-<your_name> or something similar.
3. Using your Terminal, cd into the project directory.
4. Open Visual Studio Code in the working directory with code .. It is essential that your pygame-quizzer-<your-name>/ directory is the top-level of Visual Studio Code.
5. In the menu bar, select View → Command Palette
6. Search for “environment” and select Python: Create Environment…
7. Select Venv
8. Select a recent Python version.
9. On “Select dependencies to install”, check the box next to requirements.txt. Click “Okay”.

Visual Studio Code will take a minute to create a .venv/ subdirectory and install all the pygame libraries to it.

WSL users

You need to have WSL2 for GUI applications to work from WSL. On the Windows side, open a Command Prompt or PowerShell (not Ubuntu)

1. wsl --list --verbose
   

   You will see something like:

   NAME            STATE            VERSION
   * Ubuntu-24.04    Running          1
   

   If you see VERSION 2, you are good.

2. If you see VERSION 1, run

   wsl --set-version <Ubuntu name> 2  # e.g., wsl --set-version Ubuntu-24.04 2
   wsl --update
   

   This will take some time.

3. Finally, open a new Ubuntu terminal and run

   sudo apt update
   sudo apt install libsdl2-2.0-0 libsdl2-dev libsdl2-image-2.0-0 libsdl2-image-dev
   

Project structure

You will see a few files in the project folder:

• quiz_game.py: The only actual Python file. You will run this.
• Other things:
  • .venv/: the Python virtual environment used to run the app. Ignore this.
  • .gitignore: tells Git to ignore specific files.
  • requirements.txt: tells the virtual environment which pip libraries are needed to run the project.

Running the game

We need to run the game from Visual Studio Code’s integrated terminal.

Note: The game will only run with the “virtual environment” in .venv/ active. Visual Studio Code will activate it for you automatically. If you want to run from your system Terminal, you will need to run source .venv/bin/activate first from your project directory.

To run the game:

1. First, make sure your Flask webserver is also running. You will need to have two Visual Studio Codes running (or system Terminals with the virtual environments activated). To open a second Visual Studio Code:
   • In Code, File → New Window will open a second IDE. From second IDE, you can do File → Open Folder to open the server project directory.
   • You can also type code . in each of the game and server directories to open a separate IDE for each project.
2. From the client game’s IDE terminal, run python quizzer_game.py

You should see a screen like this:

• Use the arrow keys to make a choice.
• Hit enter to check the answer:
  • The app will do nothing if you are wrong.
  • The game will display a new question if you are right. There are only two questions, so 50/50 that you will see something different.
• Hit q or close the window to quit the game. Your score will always be 0.