Lab 0: Development Environment

In this lab we will step by step create a development environment and install the web framework Flask. After completing the lab you will have a finished development environment together with a working Flask server.

Part 1: Git

Read more

1. Add your public SSH key to your GitLab account. Read this guide if needed.

2. Skapa ett nytt projekt på gitlab.liu.se med namnet “tddd83-labs-[liu id 1]-[liu id 2]”. Bocka i “Initialize repository with a README”. Detta projekt kommer att användas under hela laborationsserien. Se till att projektet är privat (endast tillgängligt till de som ni bjuder in).

3. Navigate to the project and invite your lab partner as Developer and your lab assistant as Maintainer via Members in the left menu.

4. Gå till Settings->General, expandera Merge Requests och bocka i “All threads must be resolved”

5. Gå till Settings->General, expandera Merge Request Approval och klicka på “Add approval rule”.

   1. Sätt “Rule name” till “Rättning”

   2. Välj main (eller master beroende på hur Gitlab skapade ditt repository) som “Target Branch”

   3. Lägg till er labbassist i “Approvers”

   4. Klicka på “Add approval rule”

   5. Sätt “Approvals required” för alla rader till 1

6. Gå till Settings->Repository, expandera “Protected Branches” och ändra “Allowed to push” till “No one” för main-branchen.

7. Clone the project to a folder on the computer via SSH. This is done using the command git clone.

8. Open the project folder (your cloned repo) in Visual Studio Code. On IDA’s systems this is done by running the following in the terminal:

$ module add prog/vscode

$ code (sökväg-till-projektmapp)

For example, if the terminal is in the folder where you want to run VS Code, type the following in the terminal:

$ code .

9. Follow the instructions for starting a new lab.

10. Create two new folders, server and client. The server folder will essentially contain your Python code and the client folder your HTML, CSS and JavaScript. Create a readme file in each folder and write some arbitrary text in each file.

    Also create a file named .gitignore.

    # Python Cache
    __pycache__
    
    # Environment
    venv/
    

11. Add all new files to the git repo, make a commit and push to GitLab. When everything is done the folder structure should look like the image below.

    

    Note that the .gitignore file is in the same folder as client and server.

Part 2: Virtual Environment, Venv

Read more

To easily keep track of the Python version and be able to install required packages locally (in the project) you should use a virtual environment. Do so by following the steps below. 1. Navigate to the server/ folder in the project folder and create a virtual environment there by running the following command:

$ python3 -m venv venv

2. Activate the environment with the following command; you will need to do this every time you open the project.

$ source venv/bin/activate

The result is that a text (venv) is placed in the terminal’s input line. This means that the virtual environment is activated and that you are now using it.

Note that the virtual environment should not be version controlled. The venv/ folder should therefore not exist on GitLab.

Tip: If you would like to use certain features in VSCode, such as the integrated terminal, it may be useful to tell VSCode which virtual environment you want the program to use. More information about this can be found on their website.

Part 3: Flask

Read more

Flask is a small framework for building web applications. You will use it to easily receive and respond to HTTP requests. Using Flask you will in Lab 1 build a simple API.

To install Flask (and other packages) we use the package manager PIP. Using PIP you can easily install packages in your virtual environment.

1. Install Flask in your virtual environment:

(venv)$ pip install flask

2. Create a new main.py in the server folder.

    #!/usr/bin/env python3
    from flask import Flask
    from flask import jsonify
   
    app = Flask(__name__)
   
    @app.route('/hello')
    def hello():
       return jsonify("Hello, World!")
   
    if __name__ == "__main__":
       app.run(port=5000) # På MacOS, byt till 5001 eller dylikt
   

3. Then start the Flask server by running the Python file in the terminal with the following command:

(venv)$ python main.py

(venv) ~/tddd83-labs/server$ python main.py
* Serving Flask app 'main' (lazy loading)
* Environment: production
  WARNING: This is a development server. Do not use it in a production deployment.
  Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

4. Open any web browser and go to the address localhost:5000/hello. If everything has been done correctly the browser should display a text; Hello, World!.

5. När ni har fått allt att fungera, gör då en commit och pusha till GitLab. Om ni är osäkra på hur ni ska gå tillväga finns det instruktioner om “Arbete med en labb” att följa.

Demonstration

This lab is demonstrated slightly in reverse compared to the remaining labs.

Start by following Submission (create a Merge Request) and then demonstrate to your lab assistant.