💡Ionic Übungen

Du konntest jetzt Erfahrungen in Ionic sammeln, cooles Framework nicht?

Wie wäre es mit einer kleinen Übung mit ähnlichen Funktionalitäten wie "Tour of Heroes"? Du siehst unterhalb ein Mockup, wie die neue Applikation aussehen soll. Einen grossen Teil der Logik kannst du von "Tour of Heroes" übernehmen. Aber das UI musst du selbst implementieren, mit der Verwendung von Ionic.

1. Helden Screen

   1. Die Toolbar soll einen roten Hintergrund haben

   2. Lade alle Helden die Verfügbar sind und liste diese auf

      1. Klick auf einen Helden navigiert dich in eine Detailansicht

      2. Eine swipe Geste zeigt die Optionen "Editieren" und "Löschen", die Funktionalitäten dafür musst du nicht implementieren. Frage: Macht es Usability technisch Sinn Icons zu verwenden?

   3. Klick auf den "Add" Button in der oberen rechten Ecke öffnet einen Ionic Alert mit den notwendigen Formularelementen

      1. Formularelemente

         1. Id:

         2. Name:

         3. (optional) Power:

      2. Beim "Speichern" oder "Erstellen" Klick wird ein neuer Held erstellt und zu den Helden hinzugefügt

2. Einstellungen

   1. Erstelle einen Personenobjekt mit den folgenden Attributen:

      1. Firma

      2. Name

      3. Email

Tipp von Jason:

"Deep Cloning" ist eine Technik, bei der eine vollständige Kopie eines Objekts erstellt wird, einschliesslich aller verschachtelten Objekte und Arrays.

In Angular werden Objekte standardmässig als Referenzen übergeben ("pass by reference"). Das bedeutet, wenn du ein Objekt einer neuen Variable zuweist (z.B. const newHero = hero), wird nur die Referenz kopiert. Änderungen an newHero würde sich direkt auf das ursprüngliche hero-Objekt auswirken.

Um unabhängige Kopien von Objekten zu erstellen und unbeabsichtigte Änderungen am Original zu vermeiden, wird Deep Cloning verwendet.

// Methode 1: JSON Parse / Stringify
const clonedHero = JSON.parse(JSON.stringify(heroToClone))

// Methode 2: Strukturiertes Klonen
const clonedHero = structuredClone(heroToClone)