Planen und Entwerfen

Planen

Das Team nimmt aus der Liste der Anforderungen so viele, wie in die Iteration passen, und zerlegt sie in Arbeitspakete. Wie viel Arbeit ein Arbeitspaket ist, schätzt es im Vergleich zu einem, das es schon kennt, in den Größen S, M und L. Jede Person schreibt ihre Größe verdeckt auf, dann zeigen alle gleichzeitig. Weichen die Größen stark ab, hat das Team das Arbeitspaket verschieden verstanden.

Entwerfen

Beim Entwerfen legt das Team fest, aus welchen Teilen das Programm besteht und womit es gebaut wird. Beides hängt von der Projektart ab. Auch wenn die KI das Programm schreibt, versteht ihr es leichter, schätzt Fehler und Sinn besser ein und prüft es sicherer, wenn ihr die Grundstrukturen der verwendeten Sprache selbst beherrscht. Wählt Sprache und Framework so, dass ihr den Quelltext lesen könnt und die KI gut damit umgehen kann. Die Abschnitte sind nach Schwierigkeit geordnet, das Einfachste steht zuerst.

Definition: Framework

Ein Framework ist ein Gerüst aus fertigem Code, in das du dein eigenes Programm einsetzt.

Hinweis

Frameworks und Programmiersprachen kannst du dir auch von der KI heraussuchen und dich von ihr beraten lassen. Beschreibe ihr dein Projekt und frage, welche Werkzeuge dazu passen und warum. Das ist ein guter erster Schritt, danach entscheidet ihr im Team.

Baut zuerst das Datenmodell. Fast alles Weitere baut auf den Daten auf: welche Dinge es gibt, welche Eigenschaften sie haben und wie sie zusammenhängen. Wie das geht, steht im Kapitel Datenmodellierung.

Spiel

Bei Spielen trennt ihr den Spielkern (Zustand und Regeln: wo ist die Figur, wer hat gewonnen) von der Anzeige, die den Zustand zeichnet. Dazu kommt der Taktgeber, der Spielkern und Anzeige in kurzen, gleichen Abständen aufruft (zum Beispiel 60-mal pro Sekunde). Die Trennung macht es leicht, die Regeln ohne Anzeige zu testen.

Pygame Zero

Der einfachste Einstieg in Python: ein Spiel in 20 Zeilen.

alien = Actor('alien')
alien.topright = 0, 10

WIDTH = 500
HEIGHT = alien.height + 20

def draw():
    screen.clear()
    alien.draw()

def update():
    alien.left += 2
    if alien.left > WIDTH:
        alien.right = 0

def on_mouse_down(pos):
    if alien.collidepoint(pos):
        print("Autsch!")
    else:
        print("Daneben!")

Bis zu einem Weltraum-Shooter in 580 Zeilen reicht es auch:

Pygame Zero ist die Grundlage, die ihr schon kennt.

Pygame

Mehr Freiheit, mehr Quelltext: ein Schülerspiel in 440 Zeilen.

Pygame ist die Bibliothek unter Pygame Zero.

Godot

Für knifflige Spiele eine Spiele-Engine mit eigener Oberfläche: Godot. Figuren und Szenen setzt du in der Oberfläche zusammen, das Verhalten schreibst du in der Sprache GDScript, die Python ähnelt. Als Beispiel das Spiel „Dodge the Creeps“, in dem man mit einer Figur Gegnern ausweicht. Sein Quelltext besteht aus vier Skripten mit zusammen 151 Zeilen. Hier ein Ausschnitt aus dem Skript der Spielfigur:

func _process(delta):
	var velocity = Vector2.ZERO # The player's movement vector.
	if Input.is_action_pressed(&"move_right"):
		velocity.x += 1
	if Input.is_action_pressed(&"move_left"):
		velocity.x -= 1
	if Input.is_action_pressed(&"move_down"):
		velocity.y += 1
	if Input.is_action_pressed(&"move_up"):
		velocity.y -= 1

	if velocity.length() > 0:
		velocity = velocity.normalized() * speed
		$AnimatedSprite2D.play()
	else:
		$AnimatedSprite2D.stop()

	position += velocity * delta
	position = position.clamp(Vector2.ZERO, screen_size)

Der gesamte Quelltext steht im Projekt godot-demo-projects (MIT-Lizenz).

Browser-Games

Ein Spiel, das im Browser läuft, besteht aus HTML, CSS und JavaScript, wie eine Webseite. Ein Beispiel ist Kronland, mit dem Entwicklertagebuch dazu:

https://kronland.wi7.net/blog/

Webseite und Web-Anwendung

Eine Webseite besteht aus HTML (Inhalt), CSS (Gestaltung) und JavaScript (Verhalten im Browser). Das Backend auf dem Server kann trotzdem in Python geschrieben sein.

Aufbau: MVC

Definition: MVC

Model-View-Controller teilt ein Programm in drei Teile: Das Model verwaltet die Daten, die View zeigt sie an, der Controller nimmt Eingaben entgegen und vermittelt zwischen beiden.

Definition: Client-Server

Bei einer Client-Server-Architektur schickt der Client (zum Beispiel der Browser) Anfragen, und der Server beantwortet sie.

Dabei läuft die View im Browser, Controller und Model liegen auf dem Server:

In Apps mit Backend gibt es auch auf dem Gerät einen Controller und ein Model:

View: Gestaltung

Vom Einfachsten zum Aufwendigsten:

pico.css

pico.css gestaltet Formulare und Seiten ohne eigene Klassen. Eine Zeile im <head> bindet es ein:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

Danach sieht schon einfaches HTML ordentlich aus:

<form>
  <fieldset role="group">
    <input type="email" placeholder="Deine E-Mail" />
    <button type="submit">Anmelden</button>
  </fieldset>
</form>

So sieht das Ergebnis aus:

Deine E-MailAnmelden

Eigenes CSS

Mit eigenem CSS gestaltest du alles selbst. Jedes Element ist eine Box mit Innenabstand (padding), Rand (border) und Außenabstand (margin). Die Regeln stehen in einer eigenen Datei, die du einbindest:

<link rel="stylesheet" href="style.css">

<p class="info"><span>Hinweis</span>Gießen nicht vergessen</p>

p.info {
    font-family: arial, sans-serif;
    line-height: 150%;
    margin-left: 2em;
    padding: 1em;
    border: 3px solid red;
    background-color: #f89;
    display: inline-block;
}
p.info span {
    font-weight: bold;
}
p.info span::after {
    content: ": ";
}

So sieht das Ergebnis aus:

Hinweis: Gießen nicht vergessen

Solches CSS schreibt eine KI sehr gut. Beschreibe ihr, wie die Box aussehen soll, und prüfe das Ergebnis im Browser.

Tailwind

Tailwind setzt die Gestaltung aus vielen kleinen Klassen zusammen, die direkt im HTML stehen. Zum Ausprobieren genügt eine Zeile im <head>:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<button class="rounded-lg bg-sky-600 px-4 py-2 font-bold text-white hover:bg-sky-700">
    Anmelden
</button>

So sieht das Ergebnis aus:

Anmelden

Die Klassen heißen: rounded-lg (runde Ecken), bg-sky-600 (Hintergrund), px-4 py-2 (Innenabstand), font-bold (fett), text-white (Schrift), hover:bg-sky-700 (dunkler beim Darüberfahren). In echten Projekten läuft Tailwind mit Vite, einem Werkzeug, das die Seite baut.

View: Verhalten

Vom Einfachsten zum Aufwendigsten:

Alpine.js

Alpine.js ist leichtgewichtig, ein paar Attribute im HTML genügen. Hier zeigt ein Klick auf den Knopf den Text:

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{ open: false }">
    <button @click="open = true">Aufklappen</button>

    <span x-show="open">
        Gießen nicht vergessen
    </span>
</div>

x-data legt den Zustand open fest, @click ändert ihn, x-show zeigt den Text nur, wenn open wahr ist.

Vue

Vue ist ein größeres Framework für Oberflächen mit vielen Zuständen. Dasselbe Beispiel in Vue:

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

<div id="app">
    <button @click="open = true">Aufklappen</button>

    <span v-show="open">
        Gießen nicht vergessen
    </span>
</div>

<script>
    Vue.createApp({
        data() {
            return { open: false }
        }
    }).mount('#app')
</script>

Model: Daten speichern

Vom Einfachsten zum Aufwendigsten:

JSON-Datei

Für wenig Daten genügt eine Textdatei im JSON-Format (ein Textformat für Daten aus Namen und Werten). Das Programm liest sie beim Start und schreibt sie bei Änderungen zurück:

[
  { "name": "Farn", "giesstag": "Montag" },
  { "name": "Kaktus", "giesstag": "Freitag" }
]

SQLite

SQLite ist eine Datenbank in einer Datei, ohne eigenen Server. Du fragst sie mit SQL ab:

CREATE TABLE pflanze (name TEXT, giesstag TEXT);
INSERT INTO pflanze VALUES ('Farn', 'Montag');
SELECT name FROM pflanze WHERE giesstag = 'Montag';

MariaDB und PostgreSQL

MariaDB und PostgreSQL sprechen dasselbe SQL, laufen aber als eigener Datenbankserver. Das lohnt sich für größere Projekte, in denen viele gleichzeitig zugreifen.

Controller: Anfragen annehmen

Vom einfachsten zum aufwendigsten Weg:

PocketBase

PocketBase kommt mit wenig Code aus und bringt Datenbank und Anmeldung mit. Du legst Sammlungen in einer Verwaltungsoberfläche an. Es ist ein bisschen wie Firebase, das sehr populär ist.

https://pocketbase.io

PHP

PHP läuft als Skript auf dem Server: Eine Datei mischt HTML und PHP.

<?php
// index.php

$name = "Welt";
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Hallo Welt</title>
</head>
<body>
    <h1>Hallo, <?= htmlspecialchars($name) ?>!</h1>
</body>
</html>

FastAPI mit Jinja

FastAPI ist in Python geschrieben, Jinja liefert die Vorlagen für die Seiten. Die Python-Datei legt fest, was bei einem Aufruf passiert, die Vorlage setzt den Wert ein:

# main.py
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
    return templates.TemplateResponse(request=request, name="index.html", context={"name": "Welt"})

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Hallo Welt</title>
</head>
<body>
    <h1>Hallo, {{ name }}!</h1>
</body>
</html>

Kombinationen aus dem Unterricht

Nehmt als Anfänger:in eine einfache Kombination. Beispiele aus dem Unterricht:

PHP + pico.css (LOPS-WLAN):

https://wlan.lopsleipzig.de

PHP + CSS (Suchly):

https://suchly.wi7.net

Alpine.js + Tailwind (+ Vite) (Spionage Camp):

https://spionage-camp.wi7.net/05-caeser

Vue + Tailwind + SQLite (+ Vite) (Query Quest):

https://queryquest.de

Desktop-Anwendung

GUI Zero baut mit Python Fenster mit Text und Knöpfen, hier eine Oberfläche in 12 Zeilen:

from guizero import App, Text, PushButton

def change_message():
    message.value = "Du hast den Knopf gedrückt!"

app = App(title="Hallo Welt")

message = Text(app, text="Willkommen in der Hallo-Welt-App!")

button = PushButton(app, text="Drück mich", command=change_message)

app.display()

Mobile App

Vom Einfachsten zum Aufwendigsten:

MIT App Inventor

MIT App Inventor baut Apps aus Bausteinen, ohne Quelltext.

https://appinventor.mit.edu

Webseite verpacken

Am einfachsten ist es, wenn ihr schon eine Webseite habt: Tauri oder Ionic verpacken sie als App. Modellwerk ist eine Webanwendung für Modellierung und Simulation, die so als Desktop- und Android-App erscheint. Als Webseite läuft sie hier:

https://modellwerk.wi7.net/

Eigene App

Mit Flutter schreibt ihr in der Sprache Dart einen Quelltext, aus dem eine App für Android und iOS entsteht. Anders als beim Verpacken einer Webseite entsteht dabei eine echte App, Kotlin oder Swift braucht ihr dafür nicht. Ein Beispiel ist GleeLight, eine App, die Lampen im WLAN steuert:

https://gleelight.de/

Wer für jedes System getrennt entwickelt, schreibt nativ mit Kotlin (Android) und Swift (iOS). Das sind zwei Quelltexte.

Robotik

Bei einem Roboter wie dem Calli:bot löst ein Sensorwert die Verarbeitung aus, nicht ein Klick. Mit Python zeigt das Projekt Eine Messstation mit dem Calliope, wie ein Programm auf dem Rechner Messwerte vom Calliope verarbeitet.

Datenanalyse und größere Programme

Hier baut ihr mit Python aus Klassen. Unterstreiche in den Anforderungen Nomen (mögliche Klassen oder Attribute) und Verben (mögliche Methoden). „Eine Pflanze hat einen Namen und einen Gießtag. Am Gießtag erinnert das Programm.“ Daraus wird die Klasse Pflanze mit den Attributen name und giesstag und der Methode erinnern. Streiche Kandidaten, deren Aufgabe du nicht in einem Satz sagen kannst. Sucht für Aufgaben, die andere schon gelöst haben (Dateien lesen, Diagramme zeichnen), bestehende Pakete heraus, statt sie selbst zu schreiben. Ein Beispiel ist Coldfront, eine wöchentliche Prognose der Arztbesuche wegen Atemwegsinfekten. Hier läuft es als Webseite:

https://coldfront.wi7.net/

Entwicklungsumgebung

Eine Entwicklungsumgebung verbindet Editor, Start-Knopf und Fehlermeldungen an einem Ort. Drei stehen zur Wahl:

Thonny

Thonny ist einfach und für Python-Einsteiger:innen gemacht.

Visual Studio Code

Visual Studio Code eignet sich für alle Sprachen, mit Erweiterungen und KI-Unterstützung.

Visual Studio Code mit KI-Agent

Claude Code

Claude Code ist eine KI-Umgebung, in der die KI Dateien selbst anlegt und ändert, auch in der Cloud.

Ordnerstruktur

Überlegt euch eine Ordnungsstruktur, in der ihr alle Dateien schnell wiederfindet. Oft hilft es, Bilder einzeln zu speichern oder verschiedene Aufgabenbereiche in eigene Ordner zu legen.