Python Academy · Lektion

Bygga en enkel webbapp

Skapa din första webbapplikation med Flask.

Lektion 3 av 411 steg

Bygga en enkel webbapp är en gratis lektion i Python Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Python Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Python Academy innehåller totalt 4 lektioner.

Bygga en enkel webbapp

Nu när du har lärt dig grunderna i Flask är det dags att bygga en enkel webbapplikation. Den här appen kommer att innehålla flera rutter, HTML-mallar och viss interaktivitet.

I den här lektionen skapar vi en enkel webbapp steg för steg.

Steg 1: Konfigurera projektet

Skapa en ny mapp för projektet och initiera en virtuell miljö:

python -m venv venv

Aktivera den virtuella miljön och installera Flask:

pip install flask

# Setting up the project
from flask import Flask

app = Flask(__name__)
print("Project setup complete")

Steg 2: Skapa appens struktur

Skapa följande mappar och filer:

app.py: Huvudfilen för applikationen.
templates/: Mapp för HTML-mallar.
static/: Mapp för statiska filer som CSS och bilder.

Steg 3: Definiera rutter

Definiera rutter för startsidan och en informationssida i app.py:

# Defining routes
from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return '<h1>Welcome to My Web App</h1>'

@app.route('/about')
def about():
    return '<h1>About This App</h1>'

if __name__ == '__main__':
    app.run(debug=True)

Steg 4: Lägga till mallar

Skapa en HTML-fil med namnet home.html i mappen templates/:

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome to My Web App</h1>
    <a href="/about">About</a>
</body>
</html>

Steg 5: Använda render_template

Uppdatera rutterna home och about så att de använder mallarna:

# Using templates
from flask import render_template

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/about')
def about():
    return render_template('about.html')

Steg 6: Lägga till statiska filer

Skapa filen style.css i mappen static/ och länka till den i home.html:

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
}

Steg 7: Köra appen

Kör Flask-applikationen:

python app.py

Öppna webbläsaren och gå till http://127.0.0.1:5000/ för att se webbappen i funktion.

Vanliga misstag när du bygger webbappar

Här är några misstag att undvika:

Att inte strukturera appen (t.ex. genom att sakna mapparna templates/ och static/).
Att hårdkoda URL:er i stället för att använda url_for().
Att inte testa appen i felsökningsläge.

Vad har du lärt dig?

I den här lektionen har du lärt dig:

Hur du konfigurerar strukturen för ett Flask-projekt.
Hur du definierar rutter och använder mallar.
Hur du inkluderar statiska filer som CSS i appen.
Hur du kör Flask-applikationen och visar den i en webbläsare.

Bra jobbat! Nu går vi vidare till nästa ämne.

Bygga en enkel webbapp — illustration 11

Gratis att börja

Lär dig Python med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 76
Lektioner: 320

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bygga en enkel webbapp” gratis?

Ja – hela texten till ”Bygga en enkel webbapp” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Python Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Python Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bygga en enkel webbapp”?

Skapa din första webbapplikation med Flask. Ni övar på Python Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Python Academy?

Du behöver inga förkunskaper. Utbildningen i Python Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Bygga en enkel webbapp”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Python Academy-lektionen?

Ja. Varje Python Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Python Academy