LU14 – Probeprüfung: Wetter-App [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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



<WRAP center round tip 80%>
**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.
</WRAP>


----

===== 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 ===

<WRAP center round box 80%>
^ Schritt ^ Aufgabe ^
| **1** | API-Daten von MockAPI laden |
| **2** | Antwort der API auslesen und der Variable zuweisen |
</WRAP>

=== <template>-Bereich ===
<WRAP center round box 80%>
^ Schritt ^ Aufgabe ^
| **3** | Über die geladenen Daten iterieren und jedes Element an die ''Day''-Komponente übergeben |
</WRAP>

----

==== Day.vue ====

=== <script>-Bereich ===
<WRAP center round box 80%>
^ Schritt ^ Aufgabe ^
| **4** | Erwartete Prop definieren (Name und Datentyp) |
| **5** | Reaktive Variable für den Öffnungs-Zustand anlegen |
</WRAP>

=== <template>-Bereich ===
<WRAP center round box 80%>
^ 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 |
</WRAP>
Die API gibt ein Array (Liste) mit Objekten zurück. Ein einzelnes Objekt (= einzelner Listeneintrag) hat diese Struktur:
<WRAP center round box 80%>
<code json>
{
  "id": 1,
  "wochentag": "Montag",
  "datum": "6. Juli",
  "icon": "https://storage.googleapis.com/m291-lb02-cases/weather/sun.png",
  "tempMax": 31,
  "tempMin": 18,
  "beschreibung": "Der Tag startet strahlend und die Temperatur wird bis zum Nachmittag auf bis zu 31 Grad klettern. Kein Wölkchen trübt den Himmel – ein perfekter Hochsommertag.",
  "feuchtigkeit": 38,
  "uvIndex": 8,
  "wind": "12 km/h W",
  "ratschlag": "Sonnencreme LSF 50 nicht vergessen!"
}
</code>
</WRAP>
==== Day.vue – CSS ====

=== <style>-Bereich ===
<WRAP center round box 80%>
^ Schritt ^ Aufgabe ^
| **10** | Darstellung des Datums aus Figma umsetzen |
| **11** | Darstellung der Beschreibung aus Figma umsetzen |
| **12** | Übergangsanimation für das Auf- und Zuklappen einrichten |
| **13** | Geöffneten Zustand der Detailansicht definieren |
| **14** | Layout der Chips (Feuchtigkeit, UV, Wind) umsetzen |
| 15 | ⭐ BONUS: Aktiven Zustand der Kachel gestalten |
| 16 | ⭐ BONUS: Versetzten Einblende-Effekt (Treppeneffekt) pro Kachel umsetzen |
</WRAP>
----

===== Abgabe =====

  - ''node_modules''-Ordner **nicht** im ZIP einschliessen
  - Projektordner als ''.zip'' komprimieren
  - ZIP-Datei in Moodle hochladen //(LU14 – Probeprüfung → Abgabe Wetter-App)//

----

===== Fertig =====

  * Vergleichen Sie Ihre Lösung mit der Musterlösung (wird auf Moodle freigeschaltet, sobald Sie abgegeben haben): Was stimmt überein? Was nicht?
  * Wiederholen Sie die Theorie auf Moodle zu den Punkten, wo Sie unsicher waren
  * In ''Container.vue'' wird der Ladezustand noch nicht dem User angezeigt. Ergänzen Sie die Komponente mit einer ''isLoading''-Variable. Hat sie den Wert ''true'', zeigen Sie den Text "Daten werden geladen..." an – ist sie falsch, zeigen Sie das ''div'' mit der Klasse ''forecast'' an. Sie brauchen dazu die Direktiven ''v-if'' und ''v-else''.