Der Gedanke für die App KidsKitchen ist mir im Gespräch mit meiner Nichte gekommen. Sie möchte gerne kochen lernen und hat mich gefragt, ob ich eine App kenne, mit der sie das lernen kann. Auf der Suche nach einer App, in der Kinder kochen lernen, bin ich leider nicht fündig geworden. Bei der Überlegung selbst eine App zu schreiben, ist mir aufgefallen, wie wenig ich eigentlich selbst über das Thema Ernährung weiß. Daraus resultierend, beschäftige ich mich jetzt auch selbst ein wenig mehr mit dem Thema Ernährung.
Das Projekt KidsKitchen im groben Zusammengefasst.
- Für wen ist das Projekt interessant
- Wer bin ich ?
Hiermit möchte ich potenzielle Arbeit- & Auftraggeber auf mich und meine Art und Weise zu Programmieren aufmerksam machen. Des weiteren darf dieser Code gerne als inspiration genutzt werden, da ich nach Möglichkeit, aktuelle Technologien, grade im Bereich von Animationen nutzen möchte. Auch möchte ich grade Kinder & Jugendlich dazu animieren, sich bewusster mit dem Thema Nahrung auseinander zu setzen ohne dabei voreingenommen, gegenüber einer dieser Ernährungsformen zu sein.
Ich bin Joscha (38) aus Berlin und befinde mich zur Zeit (September '24) in einer Weiterbildung zum App Entwickler am Syntax Institut in Berlin. Ich komme aus der Gastronomie, in der ich knapp 20 Jahre tätig gewesen bin. In den letzten 8-10 Monaten meiner Gastronomie Karriere, sind mir immer mehr Dinge aufgefallen, die ich gerne automatisiert hätte und so bin ich beim Syntax Institut gelandet. Diesen Schritt bereue ich zu keinem Zeitpunkt. Im Programmieren von Apps habe ich meine Passion gefunden und auch das möchte ich mit dieser App zum Ausdruck bringen.
Mehr zu meiner Person gibt es auf LinkedIn
In der ersten Phase werde ich mich den Anforderungen entsprechend mit folgendem Auseinandersetzen:
| Theme | Anwendung im Detail |
|---|---|
| MVVM | Als DesignPattern verwende ich Model View ViewModel. Auf diese Weise lassen sich meine Daten, von der Funktionälität und den angezeigten Screens trennen. |
| SwiftData1 | Verwende ich in diesem zusammenhang zum Speichern der Daten. Dies ist Apples aktuelle Technologie, welche sich auch über CloudKit verbinden lässt, um so zwischen allen Geräten zu Synchronisieren |
| NavigationStack & -Link | Um vom SignIn zum HomeScreen zu kommen |
| ForEach | Benutze ich für die MealList. Es gibt noch weitere Anwendungsbereich z.Bsp. bei den Ernährungsformen |
| Sheet & List | Verwende ich für das UserProfile |
-
mindestens 3 Screens
-
vertikale und horizontale Navigation: TabView, Sheet, Link ...
-
Dynamische Daten: Liste oder ForEach
-
Datenpersistrieren CoreData / Firebase / SwiftData
-
API Anbindung
-
MVVM
- Code selbst erarbeitet und verstanden
- Originelle Idee
- Sauberer Code
- Muss vorzeigbar sein Crashes vermeiden
- Ausblick erwünscht muss nicht fertig sein
Dies ist das Abschlussprojekt im 4. und letzten Modul meiner Weiterbildung zum App Entwickler am Syntax Institut in Berlin, dem iOS Modul. Es handelt sich hierbei um eine App für Kinder. Mit dieser App dürfen Kinder spielerisch lernen, wie man kocht. Auch die Eltern dürfen dabei nicht zu kurz kommen und so können sie sich den richtigen Umgang mit Kindern und essen, zusammen mit ihren Kindern aneignen.
8. September 2024: Auf meiner Suche, nach geeigneten Websites, bin ich unter anderem auf die folgenden Websites gestoßen:
- Reich an Wissen für das Kochen mit Kindern.
- Tolle Website für Kinder. Großer Wissenschatz
- sehr viel Wissen, bezüglich Ketogener Ernährumg.
- hat einen Eingebauten Rechner.
- jedoch sind leider immer Affiliate Links zu weiterführenden Seiten, die man nicht vorher einsehen kann.
- auch gibt es keinen Preisvergleich oder die Möglichkeit auf Bio Produkte oder die Links funktionieren garnicht.
Eine Keto API habe ich auch gefunden weiteres folgt
- Beim überfliegen, bieten sich hier beeindruckende Möglichkeiten.
- Super um Zutaten in seine Einzelteile zu zersetzen als Beispiel: 2 Teelöffel - Honig
- Viel Rezepte und weiteres
- Nicht einschätzbare kosten 🛑
- einige Apps basieren schon hierauf
- große Auswahl
- Tolle Optik möglich
OpenFoodFacts -> Suchen hilfe
- Free API
- Nur Teile von OpenFoodFacts sichtbar
Heroku ??? ???
- schon öffters gesehen, wozu?
- 10.000 Freie API Calls pro Monat
- riesige Auswahl
- up to 100 Results per Call #
Viele Gerichte Viele Ingredients mit Bildern mit Angaben zur Seite teilweise mit Video leider nur in Englisch Keine Nutritions
Die Umsetzung trennen ich in verschiedene Phasen & Bereiche. Möglicherweise gehört zu einer der Phasen auch dazu ein Backend zu bauen. Wie dies geschehen soll, erfährst du weiter unten im Bereich Die Umsetzung im Detail
| Phase | Zielsetzung |
|---|---|
| Phase 1 | In der ersten Phase geht es darum die Hauptfunktionalität der App sicherzustellen. Hierzu gehören: - das einloggen eines Users - das einzeigen von Meals in einer Liste - das Anzeigen eines Meals in der Detail Ansicht. |
| Phase 2 | In Phase zwei kommen weitere wichtige Funktionaliätäten hinzu: - das Auswählen von verschiedenen Ernährungsformen - das Auswählen verschiedener Gericht Typen - diese Dinge dann auch im Userprofil speichern |
| Phase 3 | In Phase drei geht es darum ein OnBoarding mit wichtigen Fakten bezüglich des Kochens mit Kindern etc .... Im Zuge dessen lassen sich die Screens um ein Quiz erweitern, _je nach Arbeitsaufwand auch erst in einer späteren Phase |
- Backend bauen
- Nährwertrechner
- Quiz erweitern
- Wissen erweitern
- Gesundheit und Nahrung mit einbringen
- Fitness Daten mit einbinden
- Ernährungstypen im Detail beleuchten
- Wochenpläne erstellen
- Saison abhängiges kochen
- … weitere folgen...
Damit ich das Wasserfall Prinzip beim Programmieren vermeide, unterteile ich den Bau der App in verschiedene Phasen. In Phase 1 liegt mein Hauptfokus darauf, die App zum laufen zu bringen und die Hauptanforderungen zu erfüllen. Dies beinhaltet unter anderem:
- die Wahl des richtigen Designs bei den Screens:
- Welcome
- SignIn / SignUp
- Home / RandomMealList
- UserProfile
- MealDetail
- das Anzeige aller Daten, im richtigen Format sicherzustellen:
- den korrekten Umgang mit der Api sicherstellen
- mindestens ein Repository bauen
- ein MealViewModel & ein UserViewModel bauen
Hier wird überprüft, ob es schon ob es einen angemeldeten User gibt. Des weiteren werden hier relevanten Daten von einer API geladen.
Die Wartezeit wird mit einer Animation des Logos überbrückt.
Der Screen wird in einen NavigationStack gebettet werden. Infolge dessen kann ich mit einem NavigationLink Vertical Navigieren.
- Für die Sicherheit der Daten bei diesem Prozess, gibt es die Überlegung, den User zu fragen, ob er auch ein Android Gerät besitzt und wenn ja, ob die Daten zwischen den Geräten Synchronisiert werden sollen. Sollte auch dies zutreffen, kann der User sich über Firebase anmelden. ?? ggf erst in einer späteren Phase mit einbauen ??
- Für die Anmeldung wird auf Apple Technologie gesetzt und der User kann sich über seine Apple ID anmelden um so auf die CloudFunktion von Apple zuzugreifen
- Auf dem Home Screen werden Anfangs nur 8 Random Gerichte aus 2 Kategorien zu sehen sein. möglicherweise sind diese Kategorien wählbar oder dies geschieht auch in einer späteren Phase
- Die Daten für diese Gerichte werden aus einem ViewModel geladen und dann in einer ForEach schleife angezeigt bei der Wahl ob es eine Liste oder ein ScrollView wird bin ich mir noch unschlüssig. Dies werde ich während des Programmeriens der Screens entscheiden, da ich auf diese Weise am besten meine Designs beurteilen kann. Auch die Frage der Machbarkeit erledigt sich dabei.
- Jedes dieser Gerichte wird klickbar sein, woraufhin man zum MealDetail gelangt. Hierfür werde ich einen Überblendungseffekt effekt nutzen, den ich aus de Buch SwiftUI Animations Mastery2 von Mark Moeykens habe.
- Des weiteren wird es ein User Profile geben, welches über einen Sheet nach oben fährt. Der Button dafür, wird in die toolbar des NavigationStack vom SignIn Bereich kommen.
- Wird anfangs sehr kurz gehalten werden.
- Möglichkeit, der Wahl von Ernährungsart
- Auschschluss Tabelle mit Hinweis auf Lebensmittelunverträglichkeitstests
- Ein Bild des Gerichtes wird hier angezeigt werden
- Die dazu gehörigen Zutaten inklusive der jeweiligen Maßeinheit
- Auch die Arbeitsschritte sind zu sehen
- hier bietet sich die Möglichkeit, mit Zeichnungen der jeweiligen Arbeitsschritte zu arbeiten
- alternativ findet man sicherlich viele Videos auf YouTube 🤷
- hier stellt sich zur Zeit noch die Frage, ob ich selbst eine API(?) oder möglicherweise auch einen Server bauen muss, da noch nicht sichergestellt ist, woher ich meine Daten bekomme.
stand 7. Sept.: habe ich 3 Websites, die sehr schönen Inhalt bieten angeschrieben oder angerufen, sollten sich hier neuigkeiten ereignen, werde ich dies hier selbstverständlich Updaten
Um auch mit der Zeit zu gehen, werde ich für meinen PersistentStore SwiftData verwenden. Da ich erst in einer späteren Version die Möglichkeit einbinden werde, zwischen Android & Apple Geräten zu Switchen. Bleibt es auch vorerst dabei.
möglicherweise, kann ich hier auch AppleServer verwenden
Ab hier lässt es sich leicht Feature Basiert zu arbeiten. Da Ich bis jetzt auch noch keinen TabView benutze um den Home Screen anzusteuern, kann ich so die App auf einfache Weise erweitern. Selbstverständlich ist das nicht alles, auch einige Screens werde ich um gewisse Funktionen erweitern.
- Da es sich um eine Kinder App handelt, möchte ich gleich schon beim einloggen auf relevante Dinge wie Anonymität & Sicherheit im Internet eingehen. grade im Bezug auch zu den folgenden Informationen
- Des weiteren werden beim SignUp auch User Informationen, wie bevorzugte Ernährungsweise etc abgefragt, sodass gleich ausschliesslich relevante Gerichte von der API geladen werden.
- Hier sollen gleich die ersten wirklich wichtigen Punkte beim Kochen erklärt werden:
- Hygiene
- Sicherheit
- Sauberes Arbeiten
- Mülltrennung
- das UserProfilVM wird um den Boolean isOnBoarded erweitert um die Erfolgschancen zu erhöhen, dass das OnBoarding auch wirklich verfolgt wird, werde ich hier mit Apples neuer TextAnimation arbeiten, sodass der Text ca in Lesegeschwindigkeit angezeigt wird gif Datei mit einem Beispiel dafür folgt
- Um sicherzustellen, das der OnBoarding Teil auch wirklich verstanden wurde, werden im Home Screen zu beginn nur 3 Gerichte angezeigt.
- Weitere Gerichte kann man nun dem Beantworten von Fragen zu den Themen aus dem OnBoarding Freischalten
- die Punkte aus dem Quiz geben an, welche Inhalte für den User freigeschaltet werden und welche nicht.
- das UserProfilVM wird um den Integer userPoints erweitert
- Quiz hat verschiedene Punkte stände und Kategorien
hier gibt es einiges an Funktionsumfang zum einbinden. Das sind unter anderem:
- Repository bauen, um Daten zu Nährwerten etc zu erhalten
- UserProfileVM um Bereiche zum Tracken der eigenen Nährwerte etc…
- Auflisten der Werte
- Kritische Bereich markieren
- hier bestet auch die Möglichkeit, zum anbinden der FitnessDaten ggf in Phase 3
mögliche Bereiche sind hier:
- Gesunde Lebensmittel, die die Heilung fördern(?) … etc …
- Geschmacksharmonien
Bier & Wein erklärt
Schnapps & Cocktails erklärt Möglichkeit zum anbinden an andere Apps 😉
- Meal
- MealCategory
- MealTyp
- DietForm
- Ingredient
- PreperationStep
- Level
- Season
- Nutrition
import SwiftData@Model
class Meal {
let id: String
let name: String
var isFavorite: Bool = false
let imageURL: String
let details: String
let duration: Int // in Minutes
let mealCategory: MealCategory
let level: Level
let mealTyp: MealTyp
let dietForms: [DietForm]
let season: [Season]
let ingredients: [Ingredient]
let preperation: [PreperationStep]
let nutritionInfo: NutritionInfo
}@Model
class {
let id: String
let name: String
var isFavorite: Bool = false
let imageURL: String
let details: String
let dietForms: [DietForm]
let ingredients: [Ingredient]
}@Model
class {
let id: String
let name: String
var isFavorite: Bool = false
let imageURL: String
let details: String
let dietForms: [DietForm]
let ingredients: [Ingredient]
}@Model
class {
let id: String
let name: String
var isFavorite: Bool = false
let imageURL: String
let details: String
}@Model
class {
let id: String
let name: String
var isFavorite: Bool = false
let imageURL: String
let details: String
var nutritionInfo: NutritionInfo
}@Model
class {
let id: String
let name: String
var isCompleted: Bool = false
let imageURL: String
let details: String
}@Model
class {
let id: String
let name: String
var isCompleted: Bool = false
let imageURL: String
let details: String
}@Model
class {
let id: String
let name: String
var isNow: Bool = false
let imageURL: String
let details: String
}@Model
class NutritionInfo {
let id: String
let ingridient: Ingredient
var fat: Int
var saturatedFat: Int
var kcal: Int
var protein: Int
}Footnotes
-
In den Beiträgen 👉 Meet SwiftData & 👉 Migrate to SwiftData kannst du mehr darüber erfahren. Beide Beiträge sind von der WWDC23. ↩
-
dies ist ein Affliate Link. Es handelt sich um eine bezahlte Partnerschaft. unabhängig davon, kann ich das Buch sehr empfehlen ↩