• Mer info om frontend
• Mer info om backend

1. Se till att Python 3 och PIP 3 är installerat på din dator.
2. Gå in i mappen api med din kommandotolk. (allstå inte api/api, jag vet, det är förvirrande)
3. Skapa ett virtualenv i mappen (ni behöver bara göra detta en gång)
   • För Windows:
     • Dubbelkolla att ni använder Python 3 genom python --version
     • Kör pip install virtualenv
     • Kör python -m venv venv
   • För macOS/Linux:
     • Kör pip3 install virtualenv
     • Kör virtualenv -p python3 venv
4. Starta er virtualenv (ni behöver göra detta varje gång ni öppnar en ny kommandotolk)
   • För Windows:
     • Kör venv\Scripts\activate
   • För macOS/Linux:
     • Kör source venv/bin/activate
5. Installera paket genom att köra pip install -r requirements.txt
6. Starta servern
   • För Windows:
     • För kommandotolket: set FLASK_APP=api
     • För Powershell: $env:FLASK_APP = "api"
     • Kör flask run
   • För macOS/Linux:
     • Kör FLASK_APP=api flask run
7. KLAR! Servern finns nu på http://localhost:5000/

1. Se till att npm är installerat på din dator.
2. Gå in i mappen app med din kommandotolk.
3. Kör npm install
4. Kör npm start
5. KLAR! Hemsidan ligger nu på http://localhost:3000/
   • Kom ihåg att vissa saker inte funkar om backenden inte är startad. Om du inte vill använda den lokala backenden finns backenden på https://dev.medieteknik.com/ också. Ändra koden i Utility/Api.js för att ändra backend.

Mer information om hur frontenden och backenden funkar rent tekniskt finns skrivet om ni går in i app och api-mapparna.

Hemsidan är uppdelad i två delar, ett frontend och ett backend. Frontenden är koden som körs i användarens webbläsare, vilket innebär att den kontrollerar allt kring hur hemsidan ser ut och vad som ska hända när användaren interagerar med hemsidan. Backendkoden körs på en central server som tar hand om all information som hemsidan kan ändra på och visa. Detta innebär att backenden är kopplad till en databas där allting ligger lagrat. Frontenden kan skicka olika förfrågningar till backenden med hjälp av ett API. Detta innebär att backenden bryr sig inte om hur frontenden ser ut, utan gör bara vad frontenden säger åt den.

Här är ett praktiskt exempel för att demonstrera hur frontenden och backenden kommunicerar. Ifall en användare vill gå in och läsa senaste nyheterna på hemsidan så skulle den gå in något i stil med www.medieteknik.com/news. Frontenden vet nu att användaren vill se nyheter (eftersom att det står /news) så då börjar den förbereda att visa den upp sidan för nyheter. Frontenden frågar då backenden vilka de senaste nyheterna är genom att skicka en förfrågan till api.medieteknik.com/news. Backenden går då till databasen och frågar efter de senaste nyheterna, sätter de i rätt ordning och skickar tillbaka detta till frontenden formaterat på ett snyggt sätt. Frontenden tar nu datan från backenden och snyggar upp den och visar den för användaren.

Detta innebär att backenden inte bryr sig om vem som tar emot informationen. Så då blir det väldigt lätt att byta ut frontenden i bilden ovan med vad som helst. Kanske en app? Eller TV-skärmarna i META? Eller en smart kyl? Möjligheterna är oändliga! Det kommer också gå att använda APIet i backenden för studentprojekt i kurser, som exempelvis Interaktionprogrammeringen.