Dies ist eine alte Version des Dokuments!
LU14 – Probeprüfung: Wetter-App
Zeit: 60 Minuten
Hilfsmittel: Unterlagen auf Moodle, Internet, persönliche Notizen – keine KI, keine Lösungen anderer Lernenden
Rahmenbedingungen
Heute wird konzentriert und selbstständig gearbeitet. Wer sich vorbereiten oder üben möchte, soll das ungestört tun können.
- Jede/r arbeitet für sich – keine Gespräche, keine Ablenkungen
- Keine sozialen Medien, kein Shopping, kein Chatten
- Bei Fragen: Hand heben und die Lehrperson fragen
<note important> Hinweis: Die Daten von MockAPI stimmen unter Umständen nicht 1:1 mit dem Design überein. Das ist in der Praxis normal: Design arbeitet mit Dummy-Daten, die Programmierung mit echten Daten. </note>
Erste Schritte
- Starter-Projekt von Moodle herunterladen (LU14 – Probeprüfung)
- Projektordner im Code-Editor öffnen (VS Code oder WebStorm) und Figma-File analysieren
- Zeit für Fragen im Plenum
- Abhängigkeiten installieren
- Entwicklungsserver starten
- Projekt im Browser öffnen
Danach die Schritte unten gemäss den Kommentaren im Code ausführen.
Aufgaben
''Container.vue''
''<script>''-Bereich
| Schritt | Aufgabe |
|---|---|
| 1 | API-Daten von MockAPI laden |
| 2 | Antwort der API auslesen und der Variable zuweisen |
''<template>''-Bereich
| Schritt | Aufgabe |
|---|---|
| 3 | Über die geladenen Daten iterieren und jedes Element an die Day-Komponente übergeben |
''Day.vue''
''<script>''-Bereich
| Schritt | Aufgabe |
|---|---|
| 4 | Erwartete Prop definieren (Name und Datentyp) |
| 5 | Reaktive Variable für den Öffnungs-Zustand anlegen |
''<template>''-Bereich
| Schritt | Aufgabe |
|---|---|
| 6 | Klick-Interaktion auf dem Button einrichten |
| 7 | Wochentag, Maximal- und Minimaltemperatur anzeigen |
| 8 | Klasse für den geöffneten Zustand dynamisch setzen |
| 9 | Beschreibung, Luftfeuchtigkeit, UV-Index und Wind anzeigen |
Die API gibt ein Array (Liste) mit Objekten zurück. Ein einzelnes Objekt (= einzelner Listeneintrag) hat diese