Ionic Übungen
Last updated
Last updated
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.
Helden Screen
Die Toolbar soll einen roten Hintergrund haben
Lade alle Helden die Verfügbar sind und liste diese auf
Klick auf einen Helden navigiert dich in eine Detailansicht
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?
Klick auf den "Add" Button in der oberen rechten Ecke öffnet einen Ionic Alert mit den notwendigen Formularelementen
Formularelemente
Id:
Name:
(optional) Power:
Beim "Speichern" oder "Erstellen" Klick wird ein neuer Held erstellt und zu den Helden hinzugefügt
Einstellungen
Erstelle einen Personenobjekt mit den folgenden Attributen:
Firma
Name
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 annewHero
würde sich direkt auf das ursprünglichehero
-Objekt auswirken.Um unabhängige Kopien von Objekten zu erstellen und unbeabsichtigte Änderungen am Original zu vermeiden, wird Deep Cloning verwendet.