Lab 0: Utvecklingsmiljö

I den här laborationen kommer vi steg för steg skapa en utvecklingsmiljö och installera webb-ramverket Flask. Efter genomförd labb kommer ni ha en färdig utvecklingsmiljö tillsammans med en fungerande Flask-server.

Del 1: Git

Läs mer

  1. Lägg in din publika ssh-nyckel på ditt gitlab-konto. Läs denna guide vid behov.

  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. Navigera till projektet och bjud in din labbpartner som Developer och din labbassistent som Maintainer via Members i vänstermenyn

  4. Gå till Settings->General, expandera Merge Requests och bocka i “All discussions 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. Klona ner projektet till en mapp på datorn via ssh. Detta görs med hjälp av kommandot git clone

  8. Öppna projektmappen (ert klonade repo) i Visual Studio Code. På IDAs system görs detta genom att köra följande i terminalen:

$ module add prog/vscode

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

T.ex. om terminalen står i den mapp ni vill köra VS Code i skriver ni följande i terminalen:

$ code .

  1. Följ instruktionerna för påbörjande av ny labb.

  2. Skapa två nya mappar, server och client. Mappen server kommer i princip innehålla er Python-kod och mappen client er HTML, CSS och JavaScript. Skapa en readme-fil i varje mapp och skriv in en valfri text i varje fil.

    Skapa även en fil med namn .gitignore
    # Python Cache
__pycache__

# Environment
venv/
  3. Lägg till alla nya filer i git-repot, gör en commit och ladda upp till GitLab. När allt är klart ska mappstrukturen se ut som bilden nedan.
    lab0-1-5
    Observera att filen .gitignore ligger i samma mapp som client och server.

Del 2: Virtuell miljö, Venv

Läs mer

För att enkelt hålla koll på Python-version samt kunna installera nödvändiga paket lokalt (i projektet) ska ni använda er av en virtuell miljö. Gör det genom att följa nedanstående steg. 1. Navigera er till mappen server/ i projektmappen och skapa en virtuell miljö där genom att köra följande kommando:

$ python3 -m venv venv

  1. Aktivera miljön med följande kommando; detta kommer ni behöva göra varje gång ni öppnar projektet.

$ source venv/bin/activate

Resultatet blir att en text (venv) placeras i terminalens inmatningsrad. Detta betyder att den virtuella miljön är aktiverad och att ni nu använder den.

Observera att den virtuella miljön inte ska versionshanteras. Mappen venv/ ska alltså inte finnas på GitLab.

Tips: Om ni skulle vilja använda vissa funktioner i VSCode, exempelvis den integrerade terminalen, kan det vara bra att tala om för VSCode vilken virtuella miljö ni vill att programmet ska använda. Mer information om detta finns på deras hemsida.

Del 3: Flask

Läs mer

Flask är ett litet ramverk för att bygga webbapplikationer. Ni kommer att använda det för att på ett enkelt sätt ta emot och svara på HTTP-förfrågningar. Med hjälp av Flask ska ni i Labb 1 bygga ett enklare API.

För att installera Flask (och andra paket) använder vi oss av pakethanteraren PIP. Med hjälp av PIP kan ni enkelt installera paket i er virtuella miljö.

  1. Installera flask i er virtuella miljö:

(venv)$ pip install flask
  1. Skapa en ny main.py i server-mappen.
     #!/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

  2. Starta sedan flask-servern genom att köra python-filen i terminalen med följande kommando:

(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)

  1. Öppna valfri webbläsare och gå till adressen localhost:5000/hello. Om allt genomförts korrekt ska webbläsaren visa en text; Hello, World!.

  2. 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.

Redovisning

Denna laboration redovisas lite omvänt än resternande labbar.

Börja med att följa Inlämning (skapa en Merge Request) och redovisa sedan för er labbassistent.