Transcript for:
iPhone-App mit Swift erstellen

In diesem Tutorial lernst du, wie du deine eigenen iPhone-Apps erstellen kannst mit der Programmiersprache Swift. Ganz konkret werden wir heute eine eigene Lern-App-App entwickeln, mit der du dann deine Swift-Kenntnisse vertiefen kannst. Und wer könnte mich dabei besser unterstützen als der iOS-Experte auf YouTube im deutschsprachigen Raum, Kevin Kromig. In diesem Tutorial lernst du also ganz konkret, wie du deine eigene iPhone-App erstellen kannst, alle grundlegenden Konzepte, die du brauchst, um auch weitere iPhone-Apps zu erstellen und natürlich auch, wie du die App auf dein Handy bekommst, um diese App dann auch deinen Freunden zeigen zu können.

Also, ich würde sagen, wir legen direkt los. Ich habe ganz viele Fragen an dich mitgebracht, Kevin, und ich würde sagen, wir starten direkt. Was brauche ich denn, um mit so einer Swift-App zu starten?

Genau, also das Wichtigste ist, dass wir Xcode installieren. Das ist unsere Entwicklungsumgebung. Das ist sozusagen das ganze Toolset, was wir von Apple bekommen, um unsere Apps für iPhone, iPad, Apple TV, macOS programmieren wollen. Eine Sache, man muss dafür ein Mac benutzen, weil Xcode tatsächlich nur für macOS existiert. Die einfachste Variante, um das runterzuladen, ist natürlich hier direkt im App Store.

Das heißt, wir öffnen mal den App Store. Und da können wir dann einfach nach Xcode suchen und das kostenlos runterladen? Genau, also das können wir hier einfach runterladen.

Wir suchen hier nach Xcode und dann sehen wir hier direkt, das ist praktisch wie eine App. Da wird dann halt alles mit installiert, was wir brauchen, um unsere App zu programmieren. Das ist dann alles sozusagen in einem Programm gebündelt. Das hast du jetzt schon runtergeladen und da muss man sich dann wahrscheinlich mit einem iCloud-Account einloggen oder sowas, ne?

Ganz genau, weil bei Apple ist es so, du brauchst halt einen Entwickler-Account, aber im Prinzip kannst du da deine ganz normale Apple benutzen und im Prinzip legst du da einfach einen Account an, registrierst dich und dann kannst du deine eigenen Apps programmieren. Hammer, okay. Und nachdem ich dann dieses Programm einfach installiert habe, mich eingeloggt habe und so weiter, kann ich einfach Xcode öffnen und kann dann oben einfach sagen, irgendwie New App oder sowas und dann geht's los. Genau, und dann, wenn wir Xcode das erste Mal starten, dann bekommen wir hier so eine Übersicht. Da haben wir dann drei verschiedene Optionen, zum Beispiel Create New Project, Clone Git Repository oder Open Existing Project.

Da wir jetzt noch kein Projekt haben, würde ich sagen, legen wir direkt mal eins an. Deshalb klicken wir hier drauf auf Create New Project. Und da können wir jetzt erstmal ganz viele Sachen auswählen.

Ich würde jetzt sagen, App macht am meisten Sinn. Genau, aber... Bei Apple ist es eigentlich so, dass fast alles eine App ist. Deswegen können wir uns überlegen, was für eine App wir bauen möchten.

Hier oben können wir sehen, Multiplattform, iOS, macOS, watchOS, falls du eine Apple Watch hast, tvOS für ein Apple TV und noch ein paar andere Sachen. Für uns natürlich als erstes mal eine interessante iOS-App, damit wir das Ganze für das iPad und für das iPhone programmieren können. Das heißt, wir klicken hier drauf und hier oben haben wir dann natürlich auch schon mal ein paar Optionen.

Hier können wir eine ganz normale App programmieren, zum Beispiel ein Game. Augmented Reality App und hier noch ein paar andere Sachen, die jetzt aber erstmal uninteressant für uns sind. Deswegen würde ich sagen, wählen wir hier direkt mal eine App aus.

Gehen hier auf Next und dann müssen wir hier unserer App einen Namen geben. Wir können jetzt mal Swift Lern-App App Developer-Akademie-App Academy, können wir es mal nennen. Das ist ein ziemlich langer Name für eine App, aber da kannst du reinschreiben, was du möchtest. Okay, dann können wir hier noch so Sachen auswählen wie das Team und was ist das noch?

Irgendwie ein Identifier und sowas? Muss ich da irgendwas ändern? Nein, also im Prinzip ist es so, dein Team ist dann praktisch dein Account, den du hast. Also ich habe jetzt hier bei mir zum Beispiel, weil ich auch beruflich damit arbeite, habe ich hier verschiedene Teams, weil ich natürlich mein privates Team habe, mit meinem privaten Account oder auch das von der Firma. Bei dir wird hier jetzt wahrscheinlich nur eins zur Auswahl stehen.

Das heißt, das kannst du erstmal so lassen. Der Organization Identifier ist praktisch sozusagen sozusagen der Identifier für all deine Apps. Das ist sozusagen ein Prefix und jede App hat dann so eine eigene Identifier, der dann noch hinten rankommt. Das ist eigentlich nur wichtig, weil auf deinem iPhone keine Apps installiert werden können, die doppelt mit dem gleichen Identifier haben. Also dadurch unterscheidet dein iPhone, dass es jetzt eine andere App ist.

Genau, also jede App hat einen eindeutigen Identifier. In dem Fall ist es jetzt halt einfach mein Organisations-Identifier, weil ich kann ja auch verschiedene Apps haben. Damit kann ich dann halt auch zeigen, okay, diese Apps werden alle von mir programmiert.

Und dieser Bundle-Identifier dahinter ist jetzt speziell für meine App. Im Prinzip wird einfach der Organization Identifier genommen und mein Produktname, also mein App, wird dann halt hier einfach hinten dran gehängt. Okay, das heißt, wenn ich das Ding jetzt das erste Mal offen habe, muss ich mir da wahrscheinlich noch ein Team anlegen und einfach ein Identifier reinschreiben. Genau, also es kann halt sein, dass hier noch gar nichts drinsteht und dann musst du halt dein Team auswählen und dich dann mit deiner Apple einloggen. Und wenn ich mir so ein Identifier auswählen möchte, dann ist das letztendlich einfach wie eine URL, ja, nur umgedreht.

Das heißt, das COM oder das DI steht am Anfang und danach... kommt dann die URL und es muss auch keine echte Internetseite sein, sondern das kann einfach etwas sein, was du dir selber ausdenkst, auch wenn es gar nicht in echt als Internetseite existiert. Ganz genau.

Also im Prinzip ist es hier nur so ein Reverse Identifier. Okay. Und dann?

Genau. Und dann haben wir jetzt noch zwei wichtige Sachen, die wir unbedingt beachten müssen. Also mittlerweile gibt es zwei verschiedene Arten, wie man Apps für iPhones programmieren kann, was die Benutzeroberfläche angeht. Das ist zum einen Storyboards, also das Alte mit UI-Kit, das ist das alte UI-Framework und das neue Swift.

Okay, UI bedeutet User Interface. Genau, also das ist die Benutzeroberfläche, damit man das programmieren kann, was man sieht. Also alle Knöpfe, Bilder und so weiter, alles damit man irgendwas visuell darstellen kann.

Als Sprache nehmen wir Swift. Hier könnte man theoretisch auch Objective-C auswählen. Das machen wir jetzt ja nicht, das ist die alte Programmiersprache. Das funktioniert übrigens nicht mit Swift.

Das heißt, wenn du wirklich mit Objective-C arbeiten wollen würdest, dann müsstest du hier Storyboard auswählen. Und dann hast du hier auch die Option Objective-C. Aber das ist eh etwas, was niemand als Anfänger machen sollte, oder? Auf gar keinen Fall.

Mittlerweile arbeiten alle professionellen iOS-Entwickler mit Swift. Es gibt nur noch wenige Ausnahmen, wieso man das machen sollte. Aber mittlerweile arbeitet eigentlich jeder mit Swift.

Genau, deshalb können wir das hier voreingestellt lassen. Swift und als Programmiersprache Swift. Store ist...

erstmal nicht angewählt. Da kannst du dann auswählen, wenn du eine interne Datenbank haben möchtest, weil du vielleicht Daten irgendwie abspeichern möchtest. In unserem Fall brauchen wir das jetzt nicht, deswegen lassen wir hier einfach non angeklickt.

Okay und jetzt steht hier noch include test. Das lassen wir jetzt erst einmal weg und drücken auf next, oder? Ganz genau.

Genau hier wird dann im Prinzip das neue Projekt angelegt. Da kannst du den Speicherort auf deinem Laptop festlegen. Wir klicken hier einfach create und dein erstes Projekt ist schon erstellt.

Okay, hier steht jetzt schon mal ganz viel Code und außerdem haben wir hier links jetzt schon verschiedene Dateien und irgendeinen Ordner. Da steht Assets, Preview und so weiter. Was sehen wir jetzt hier gerade? Genau, also im Prinzip haben wir hier drei verschiedene Bereiche. Hier haben wir diesen Navigation, also die Navigationsübersicht.

Dort siehst du wirklich alle Dateien, die dein Projekt beinhaltet. Dann siehst du hier in der Mitte immer die gerade geöffnete Datei. Und hier hast du noch so eine Live-Preview deiner App. Das heißt, wenn du hier den Code änderst, dann siehst du automatisch in Echtzeit, wie die App jetzt gerade aussieht mit deinen Änderungen.

Das heißt, wenn wir jetzt hier mal diese Dateien durchgehen, dann sehen wir, dass hier einmal unser Projekt existiert. Hier sind alle Projekteinstellungen. Hier kannst du zum Beispiel festlegen, wie zum Beispiel deine iPhone-App bei der Rotation funktioniert, ob sie überhaupt im Landscape-Modus, also im Querformat funktioniert, ob du das Telefon hochkanntstellen kannst und so weiter.

Da würde ich sagen, lassen wir jetzt alles angehakt. Das gleiche hast du auch bei iPad. Da kannst du auch sagen, okay, meine App hier oben funktioniert für iPhone, iPad und macOS automatisch.

Du kannst natürlich auch sagen, ich möchte, dass meine iPhone-App nur auf dem iPhone läuft. Dann müsstest du halt dementsprechend hier iPad rausnehmen. Wir lassen das jetzt aber, denke ich mal, alles drin und gehen direkt mal in unsere App rein.

Und du siehst, dass hier an der Seite, das ist natürlich jetzt geschuldet unserem sehr langen Namen, haben wir zwei Dateien. Und einmal... diese Datei Swift Lern-App-App, Developer-Akademie-App-Akademie-App. Und wenn wir da reingehen, das ist sozusagen der Eintrittspunkt in unsere App.

Also wenn wir jetzt hier reinschauen, dann sehen wir, dass es hier ein Struct ist vom Typ App, weil es unsere App ist. Und hier gibt es ein Body. Das heißt, hier werden die Sachen reingerendert, sozusagen reingeladen, die wir anzeigen möchten.

Okay, also das bedeutet, das hier ist immer so ein Standard-Code, der automatisch generiert wird. Der ist immer da. wird jetzt auch von uns erst einmal nicht groß geändert und alles, was hier jetzt steht, ist in der Mitte, jetzt gucken wir mal in Zeile 14, Content View. Und das ist letztendlich die View, das heißt die Anzeige, das Ding, was wir als erstes sehen, wenn wir die App öffnen.

Ganz genau. Also im Prinzip ist es dann die zweite Swift-Datei, die dir erstellt wurde. Das gibt zwei Möglichkeiten. Entweder ich klicke jetzt hier drauf oder, was ich natürlich auch machen kann, ich kann die Kommandotaste gedrückt halten und dann da drauf tippen, dann springe ich automatisch hier rein.

Okay, das heißt, unsere ganze Action findet eigentlich in dieser Datei statt und der Rest, ja, das wird man dann wahrscheinlich, wenn man sich mehr mit Swift beschäftigt, mit der Zeit immer besser verstehen. Diese ganzen Wörter, da steht jetzt sowas wie struct, view und so weiter, ja, das sind alles viele fremde Vokabeln. Denn am Anfang ist es erstmal so, okay. Akzeptiere es erstmal und dann mit der Zeit wirst du Vokabel für Vokabel mehr verstehen. Und vor allen Dingen bauen wir uns jetzt auch eine App, wo man dann solche Vokabeln auch hinterlegen kann.

Ganz genau. Also es ist nicht schlimm, wenn man am Anfang nicht alles versteht, sondern man muss immer erst das verstehen, was man gerade braucht. Und dann versucht man neue Dinge zu machen und lernt diese dann auch. Und im Endeffekt lernt man dann ganz natürlich die Sprache und das Framework. Also da würde ich mir am Anfang nicht zu viel Sorgen machen, wenn man jetzt nicht alles sofort versteht.

Okay. So, dann haben wir jetzt hier diese Content View und wenn ich es jetzt richtig verstanden habe, ist das eine Demo-App. Das heißt, das, was wir hier sehen, produziert bereits die App, die wir auf der rechten Seite sehen können. Ganz genau.

Also im Prinzip habe ich hier, das sind die ganzen Inhalte, die meine App gerade anzeigen kann. Alles, was man sieht, ist hier praktisch in diesem Body abgebildet. Der zeigt einfach eine View an.

Und hier drin habe ich eine View, die zeigt ein Image an. Also das ist hier Image mit dem Systemnamen Globe. Das ist dieser kleine Globus, der hier angezeigt wird.

Und direkt darunter habe ich einen Text Hello World. Und damit ich das Ganze untereinander anzeigen kann, wird das Ganze in einen V-Stack reingeschoben. Das ist einfach ein vertikaler Stack.

Das heißt, ich kann diese Sachen dann vertikal anzeigen. Also ein Stapel. Das heißt, wir stapeln jetzt zwei Elemente in der App übereinander.

Einmal ein Image und einmal ein Text. Und deswegen steht da auch Image und Text. Und in den Klammern stehen ja noch so ein paar Informationen, was für ein Image bzw.

was für ein Text wir anzeigen wollen. Ganz genau. Was wir natürlich auch machen können, wir können diesen Stapel dann auch horizontal anzeigen.

Wenn wir wollen, dann können wir statt V-Stack einen H-Stack benutzen, also einen horizontalen Stack. Und dann werden die Sachen automatisch, ohne dass man irgendwie besonders noch was machen muss, automatisch horizontal angezeigt. Okay, das finde ich auch ganz gut von Swift, dass eigentlich der ganze Standard-Code erstmal schon da ist.

Und das heißt, wir können uns jetzt wirklich mit dem Internen hier beschäftigen. Das heißt, mit den Zeilen 15 bis 20 eigentlich. Und der Rest ist erstmal so Boilerplate, kann man sagen.

Ganz genau. Nennt man immer so im Fachjargon, also Code, der einfach dastehen muss. Und zwischendurch sagen wir es einfach ganz entspannt, Element Bild anzeigen, Text anzeigen.

Und wir wollen da jetzt so eine Liste langfristig schaffen. Ganz genau. Also unser Ziel ist, dass wir eine Liste erstellen mit verschiedenen Elementen, die man lernen kann, verschiedene Konzepte.

Und wenn man auf ein Element drauf tippt. dass eine Übersicht angezeigt wird, wo wir noch mehr Informationen bekommen mit einem Erklärtext und einem Code-Beispiel. Und das Ganze würde ich jetzt sagen, machen wir direkt mal. Ja, da bin ich wirklich gespannt. Also vor allen Dingen muss man ja erstmal überlegen, was für Informationen wollen wir darstellen.

Und ich glaube, da hast du dir auch schon was ausgedacht. Wir wollen letztendlich eine Liste haben mit einmal der Vokabel, dann eine Erklärung und dann so ein Code-Beispiel, oder? Genau, also diese Informationen, die wir anzeigen wollen, haben wir in einer JSON-Datei zusammengefasst.

Okay, das ist einfach ein Dateiformat, das auch relativ easy zu verstehen ist und da ist das alles drin. Und das stellen wir euch auch zum Download bereit. Das heißt, unter dem Video findet ihr einen Download-Link.

Da könnt ihr euch diese Daten einfach herunterladen. Genau, und das Ganze habe ich jetzt schon heruntergeladen. Und aus meinem Downloads-Ordner kann ich das hier einfach in mein Projekt reinziehen. Und hier sagen, okay, Copy Item if Needed, alles so wie es ist und sagen Finish.

Und die Datei ist dann automatisch hier in meinem Projekt drin. Okay, das heißt, man kann einfach weitere Dateien per Drag & Drop auf die linke Seite hier reinziehen und dann sind die Teil von unserem Projekt. Und wir sehen jetzt auch hier, okay, es scheint gar nicht so schwer verständlich zu sein.

Man sieht hier immer einen Title, man sieht eine Erklärung und dann Code Snippet. Und das alles im Komma getrennt und ein paar komische geschweifte Klammern, ein paar eckige Klammern. Und ja, letztendlich einfach die Art. wie man Dateien oder Daten letztendlich und Informationen speichert. Genau, also im Prinzip sind das hier jedes Mal unsere Lern-Appelemente, die wir halt lernen wollen. Also das sind dann verschiedene Konzepte.

Damit können wir jetzt erstmal noch nicht so viel anfangen. Wir müssen das Ganze jetzt sozusagen in unsere View reinladen, in unsere Content View. Und das Ganze machen wir mit einem Model. Okay, ein Model heißt, dass wir diese Daten jetzt aufbereiten, damit wir sie in unserer App auch verwenden können. Ganz genau.

Das heißt, wir klicken jetzt hier mal auf diesen Ordner oben drauf und erstellen hier eine neue Swift-Datei. Okay, da ist jetzt einfach so ein Fenster mit so einer Tastenkombination aufgegangen. Wie ist das passiert?

Genau, also mit Kommando N kann ich hier einfach eine neue Datei anlegen oder ich kann auch hier einfach sagen, rechtsklick und dann sagen New File und dann öffnet sich das Gleiche. Okay. Genau, dann sage ich einfach neue Swift-Datei anlegen, klicke hier auf Next. Dann sage ich, wie die heißen soll. Wir nennen sie einfach mal Topic, also der englische Begriff für Thema und klicke auf Create.

Also den Namen darf man frei bestimmen und du hast dich jetzt für Topic entschieden, weil wir verschiedene programmierte Themen quasi behandeln wollen. Ganz genau. Ich kann das jetzt mal hier nach oben ziehen, damit es ein bisschen schöner zusammen ist. Und im Prinzip muss ich jetzt dieses Model so... strukturieren, dass es praktisch die Elemente, die in meiner Data-JSON zu finden sind, dass die dort 1 zu 1 abgebildet werden.

Und wir sehen, dass ich hier praktisch eine Liste habe und die wiederholen sich ja jedes Mal. Nur die Werte, die da hinten dran stehen, sind anders. Das heißt, in meinem Model muss ich jetzt die Attribute für Titel, Explanation, für die Erklärung und Code-Snippet 1 zu 1 so angeben.

Und wir sehen auch, das sind alles Texte. Das heißt, wir können hier auch mit einem String arbeiten. Okay, das heißt, Unser Datenmodell besteht aus drei Variablen, Titel, Erklärung, Explanation und Code Snippet. Und das müssen wir jetzt in diesem Topic anlegen.

Dann hast du noch gerade das Wort String genannt. String ist einfach ein Text. Ganz genau, das ist einfach nur ein Text.

String, das ist eigentlich in jeder Programmiersprache das Gleiche. Das ist jetzt nichts süffenspezifisches. Genau. Das heißt, ich kann jetzt hier in dieser neuen Datei, da wird automatisch Foundation importiert.

Das sind sozusagen... So die Grundfunktion, was die Programmiersprache Swift mitgibt, es wird standardmäßig immer importiert. Okay, und alles, was in diesen zwei Strichen oben steht, das kann man erstmal ignorieren. Das ist einfach ein sogenannter Kommentar.

Das heißt einfach irgendeine Information, die uns als Programmierer weiterhilft, aber die jetzt nicht wirklich interpretiert wird. Das heißt, da kann man einfach irgendwas reinschreiben. Da steht jetzt Created by Kevin Kromig, aber du kannst auch sonst alles reinschreiben.

Genau, also man muss... das wird hier automatisch generiert. Ich kann natürlich auch später, wenn ich meinen eigenen Code programmiere und damit ich den vielleicht später besser verstehe, kann ich mit diesen zwei Schrägstrichen dann irgendwie einen Text, irgendwie eine Erklärung reinschreiben, damit wenn ich später wieder an diese Stelle komme, damit ich mich noch erinnern kann, was ich da gemacht habe oder wenn andere Leute deinen Code lesen, damit er vielleicht ein bisschen verständlicher ist, falls da irgendwie Erklärungsbedarf gibt. Ja, das ist übrigens auch zum Programmieren lernen extrem gut, dieser Tipp, denn wenn man jetzt die ersten Zeilen Code schreibt, was du ja wahrscheinlich gerade machst, dann kannst du einfach mit einem Kommentar, also mit diesen zwei Schrägstrichen, einfach hinter jede Zeile dahinter schreiben, was du da eigentlich gerade gemacht hast. Und dann kannst du es später nochmal durchlesen und dadurch verstehst du es einfach nochmal ein bisschen besser.

Ganz genau. Deshalb würde ich sagen, machen wir jetzt mal unser Topic Struct. Okay.

Also Struct ist praktisch eigentlich nur so eine Struktur, wo wir Informationen und Daten sammeln können. Okay, das heißt, wir haben strukturierte Daten, bestehen aus Titel, Explanation, Code Snippet und... Jetzt sagen wir, wie die Struktur aussieht. Ganz genau.

Das heißt, mein Structure hat jetzt den Namen Topic. Und jetzt muss ich diese drei Attribute mit angeben, diese Variablen. Oder in dem Fall benutzen wir Konstanten, weil wir die Werte nicht ändern wollen.

Und das macht man mit einem Let. Das heißt, Let Title, so nennen wir das. Das ist eins zu eins so, wie in unserem JSON vorgegeben.

Und sagen, das ist ein Text, also ein String. Okay. Also das, was wir eben auch schon angesprochen haben. Und ich schätze, das müssen wir jetzt dreimal machen, weil wir drei Informationen haben. Genau.

Wir haben ja hier, wenn wir nochmal reinschauen in unser Data, wir haben Title, Explanation und CodeSnippet. Das heißt, wir gehen jetzt hier wieder zurück. Title haben wir schon.

Title, Explanation, auch ein String und unser CodeSnippet. Jetzt gibt es aber noch eine Sache, die wir machen müssen. Und zwar müssen wir versuchen, diese Daten in unser Model reinzubekommen.

Und das machen wir natürlich nicht händisch, sondern das Ganze muss sozusagen dekodiert werden von einem JSON-Decoder. Das gibt uns Swift alles zur Hand, das müssen wir nicht selbst machen, aber wir müssen hier noch eine Kleinigkeit ändern. Damit wir dieses Topic dekodieren können, müssen wir hier dieses Protokoll implementieren mit Decodable, damit dieses Topic dekodierbar wird.

Okay, das heißt, damit wir es dekodieren können von der Textform in dieses Struct, mit der wir dann später arbeiten können, musst du Decodable hinterschreiben. Ganz genau. Und da wir das später in einer Swift-Liste anzeigen wollen, müssen wir noch das Protokoll Hashable auch noch implementieren.

Was das genau bedeutet, ist jetzt nicht so wichtig. Wir müssen es einfach nur mit anführen. Okay, damit wir es später in der Liste anzeigen können. Genau, und jetzt haben wir natürlich sozusagen unser Model, wir haben unsere Daten und wir haben schon die Content View, die jetzt im Prinzip noch nichts anzeigt. Allerdings müssen wir jetzt noch diese Schnittstelle implementieren, die praktisch diese Daten nimmt und unsere Topics initialisiert.

Okay, initialisieren bedeutet, dass wir jetzt was machen? Genau, also im Prinzip lesen wir diese JSON-Daten ein und werfen sie sozusagen in unsere Struct rein, damit wir die dann später lesen können und in unserer Swift-View anzeigen können. Okay, also das aus der Datei Data muss jetzt in dieses Ding rein und dafür brauchst du nochmal ein bisschen Code, der jetzt geschrieben werden muss. Ganz genau.

Dann machen wir hier wieder mit Kommando N oder mit Rechtsklick New File und sagen, das ist unser View Model. Hier ist sozusagen die Schnittstelle zwischen meinen Daten und der Benutzeroberfläche, die ich anzeigen will. Dort ist sozusagen die Logik. Dort werden die Daten zum Beispiel geladen und verarbeitet. Dann klicken wir wieder Create und in diesem Fall brauchen wir eine Klasse.

Also den Unterschied zu einem Struct brauchen wir jetzt hier nicht erklären, das ist dann wirklich zu tief. Aber im Prinzip können wir jetzt hier einfach ein View-Model erstellen und sagen, das muss vom Typ ObservableObject sein, damit unsere View sozusagen diese Klasse, dieses View-Model beobachten kann und die Daten darauf anzeigen und reagieren kann. Okay, das heißt, das Ding muss quasi wieder als Boilerplate, also als Standardcode da sein, um diesen Konverter zu schreiben. Und jetzt müssen wir noch sagen, was wir eigentlich importieren wollen. Ganz genau.

Also unser View-Model wird ja eine Liste von Topics anzeigen. Das heißt, ich habe hier nicht nur ein Topic, sondern ich habe hier eine Liste durch Komma separiert. Das sind ganz viele verschiedene Topics.

Und dieses View-Model, das können wir jetzt auch mal wieder hier hochziehen, direkt unter die Content-View. Und deshalb muss unser View-Model eine Liste von Topics haben, also ein sogenanntes Array. Okay, das bedeutet, dieses Topic... was jetzt hier ganz rechts steht, das ist das, was wir gerade in der Topic-Datei geschrieben haben.

Das muss genauso heißen. Diese eckigen Klammern nutzt du, damit es eine Liste ist von mehreren Topics. Und das Ganze speicherst du jetzt in einer sogenannten Variable. Die kannst du frei nennen.

Wir nennen sie Topics, weil es sinnvoll ist. Aber eigentlich dürftest du die benennen, wie du möchtest. Ganz genau. Also hier kann man reinschreiben, was man möchte. Hier ist es nur wichtig, dass es genau so heißt, wie dieses Topic, also dieses Struct, wie wir es hier genannt haben.

Jetzt geht es weiter. Jetzt haben wir noch nichts gewonnen, denn wir müssen ja immer noch sagen, dass es aus dieser Data-Datei da irgendwie rein soll. Ganz genau. Und hier schreiben wir jetzt unseren Initializer. Der ist am Anfang noch leer.

Im Prinzip, was wir hier machen in der Initializer in jeder Klasse und jedem Struct, ist eigentlich dafür da, die Attribute, die diese Klasse hat, zu befüllen, dass da irgendwelche Werte reinkommen. Weil aktuell, wenn wir dieses View-Model erstellen, dann haben wir ja noch keine Topics. Und...

Swift erlaubt es nicht, in diesem Fall zum Beispiel, dass diese Liste gar nicht existiert. In diesem Fall ist sie noch nicht mal leer. Sie muss mindestens leer sein.

Und dafür müssen wir jetzt diesen ganzen Prozess schreiben, um diese Daten aus diesem JSON zu laden, in unsere Topics reinzubringen und danach in diesem View-Model zu speichern. Okay, das heißt, das ist eigentlich jetzt eine der größten oder einer der Hauptaufgaben, die wir haben. Und dafür gibt es jetzt wahrscheinlich einfach eine feste Routine, die man machen muss, um das zu importieren.

Ganz genau. Also was wir jetzt machen ist, dass wir ein Guard implementieren. Ich weiß nicht, ob ihr euch schon mit If-Else und so weiter beschäftigt habt, aber Guard ist im Prinzip das gleiche wie If-Else, nur dass es umgedreht ist.

Das heißt, nur wenn es true ist, dann springt es weiter. Ansonsten geht es in die Klammer rein. Okay, also mit diesem Guard sagen wir, wir machen jetzt etwas, und zwar importieren, oder wir geben eine Alternative, wenn es nicht funktioniert. Ganz genau. Was wir jetzt als erstes machen müssen, wir müssen uns diese URL, also sozusagen den Pfad rauslesen, wo unsere Data liegt.

Weil im Prinzip liegt diese Data jetzt hier einfach in unserem Projekt rum, aber das gibt natürlich einen bestimmten Pfad dorthin. Und den müssen wir jetzt bestimmen, dass wir sagen, okay, let URL, wir erstellen uns eine neue URL und da benutzen wir bundle.main. Bundle ist im Prinzip alles, was sich hier drin befindet.

Das heißt, es sucht dann alle Dateien, die hier in meinem Projekt liegen. Main, weil ich ja verschiedene Projekte theoretisch haben könnte, aber wir haben hier nur ein Projekt und das ist unser Main, unser Hauptprojekt. Und deshalb können wir jetzt hier einfach sagen, okay, wir wollen die URL haben für eine Ressource mit der Extension, also mit der Erweiterung JSON. Okay, das war jetzt fancy.

URL geschrieben und dann hast du auf Enter gedrückt und dann kam alles automatisch, oder? Genau. Kannst du das nochmal zeigen?

Können wir nochmal zurückgehen. Wir sagen hier URL. Und dann habe ich hier verschiedene Methoden, die alle mit URL anfangen, aber verschiedene Parameter brauchen. Okay, das ist ganz praktisch, denn wir wollen jetzt eine Datei importieren und da muss man nur den Anfang, weil es ist ja ein sehr komplizierter Befehl, man schreibt einfach den Anfang auf, drückt auf Enter und dann wird einfach alles ausgefüllt.

Genau, also durch Autovervollständigung macht uns Xcode, wie die meisten Entwicklungsumgebungen, das Leben natürlich einfacher. In diesem Fall reicht uns das oberste, das ist das, was man in der Regel am meisten benötigt, dass wir einfach sagen, okay, für eine Ressource, die heißt Data, weil so heißt unsere Datei, und with extension, also die Dateiendung, das sieht man jetzt hier direkt nicht, weil Xcode die standardmäßig ausblendet. Aber wenn ich jetzt mal drauf tippe. und dann die Enter-Taste drücke, dann sieht man automatisch den Dateinamen und der heißt JSON. Okay.

Dann können wir hier die Extension noch mit reinschreiben, JSON. Und wenn ich diese URL nicht laden kann, weil die Datei zum Beispiel nicht existiert, sage meine Topics, weil die muss ich ja initialisieren, da muss ein Wert rein, und sage einfach Topics gleich, eine leere Liste. Es gibt keine Topics, weil die Data-Datei einfach fehlt.

Okay, das heißt da oben... In Zeile 12 sagen wir noch nicht, dass es eine leere Liste oder irgendeine Liste ist. Wir sagen nur, es ist vom Typ einer Liste. Und anschließend sagen wir jetzt in Zeile 15 und 16, auch wenn es ein komplizierter Befehl ist, am Ende des Tages nur, wir laden von einer URL, das ist nichts aus dem Internet, sondern einfach jetzt von unserem Computer, das sind auch URLs, die Datei data.json.

Bisschen kompliziert ausgedrückt, aber mehr passiert hier nichts. Und wenn das nicht funktionieren sollte, Dann geben wir eine Alternative in Zeile 16 bereit, und zwar eine leere Liste, eckige Klammer auf, eckige Klammer zu. Ganz genau.

Und was wir dann machen müssen, weil dann möchten wir ja gar nicht mehr weitergehen in dieser Funktion, sagen wir einfach return. Okay. Weil dann ist ja alles erledigt für uns.

Also return heißt einfach Ende. Genau, Ende, springe aus der Funktion raus und das war's. Und es geht dann auch nicht mehr weiter.

Aber wenn wir jetzt die URL haben, weil die Datei gefunden wird, dann müssen wir die Daten... aus dieser Datei lesen und in unsere Topics reinbringen. Und da brauchen wir einen sogenannten Do-Catch-Block.

Das heißt, im Prinzip rufe ich jetzt Funktionen auf, die einen Fehler werfen können, weil ich zum Beispiel die Daten nicht richtig lesen kann, weil die Daten kaputt sind oder sonst irgendwelche Gründe. Und damit mein Programm nicht crasht und die App abstürzt, muss ich diesen Fehler praktisch auffangen. Okay, das heißt, alles, was in einem Do-Catch-Block passiert, also in Zeile 20 ist jetzt,...

dass der Code, der zwischen diesen geschweiften Klammern, also zwischen Zeile 20 und zwischen Zeile 22 ausgeführt wird, theoretisch einen Fehler werfen kann, was dann aber nicht unsere ganze App zum Absturz bringt, sondern dass dann danach einfach nur irgendwie eine Fehlermeldung angezeigt wird oder was wir dann halt wollen. Genau, also das ist natürlich gängige Praxis, weil das Schlimmste wäre, dass unsere App einfach abstürzt und bei iOS sieht es dann so aus, dass die App einfach pum, sie ist weg und man landet auf dem Homescreen. Das ist natürlich keine... Gute Nutzererfahrung, deswegen versucht man solche Fehler aufzufangen, um dann gegebenenfalls eine Fehlermeldung anzuzeigen, wenn irgendwas schief gelaufen ist.

Was wir jetzt machen müssen, ist, dass wir diese Daten in eine Data-Konstante reinspeichern und dafür müssen wir einen anderen Initializer aufrufen von der Data-Klasse und sagen hier Contents of und hier übergeben wir die URL. Dieses Try brauchen wir nur, weil diese Data... weil dieser Data einen Fehler werfen kann und wir versuchen das sozusagen, den wir dann eben auffangen können, falls irgendetwas schief läuft.

Und wir sagen, erzeuge mir ein Data-Objekt für diese Daten, die hinter dieser URL liegen und speichern das hier in dieses Data rein. Okay, das heißt, jetzt haben wir die Daten aus der URL quasi geladen. Genau.

Aber sie sind jetzt sozusagen noch in einem URO-Format. Und was wir jetzt machen müssen, ist, dass wir sozusagen in unserem Topic initialisieren. Okay. Man muss dazu sagen, diese ganze Prozedur ist, glaube ich, in dem ganzen Beispiel eine der schwersten Aufgaben, die wir haben. Danach muss man nur noch die Daten anzeigen, das ist dann ein bisschen leichter.

Ganz genau, das ist der komplizierteste Teil, würde ich sagen. Und der spaßigste Teil kommt dann jetzt sofort mit der Benutzeroberfläche. Aber dafür brauchen wir natürlich die Daten, die wir jetzt hier in unsere Topics reinspeichern, weil wir versuchen ja nicht eine leere Liste anzuzeigen, sondern diese Daten hier zu initialisieren.

Da benutzen wir wieder diesen Try und dann... brauchen wir dafür einen JSON-Decoder. Das ist dann einfach, weil wir JSON-Daten, wie wir es in unserem Datenformat haben, dekodieren wollen und sagen dem, okay, dekodiere, nehmen wir das oberste, vom Typ und jetzt müssen wir den Typ mitgeben, den wir dekodieren wollen und hier wollen wir nicht ein einzelnes Topic, sondern ein Array von Topics, also eine Liste haben und sagen dann self.

Dort wird dann einfach der Typ mitgegeben. Also wenn wir hier hinten drauf gehen nochmal, dann sehen wir, dass es der Typ ist. Okay, also was jetzt passiert ist mit diesem JSON-Decoder, dass wir halt die JSON-Datei nehmen, das ist unser Dateiformat und wir überführen jetzt dieses Dateiformat in unsere Struktur, in dieses Topic, was wir in der Topic-Datei definiert haben, um zu sagen, wir haben jetzt Daten und diese Daten haben immer folgende Struktur. Titel, Beschreibung, Codesnippet.

Ganz genau. Und welche Daten wollen wir dekodieren? Diese Daten, die wir hier von dieser URL geladen haben. Und das war's schon. Was wir jetzt natürlich machen müssen ist, es kann natürlich sein, dass unser eine von diesen beiden Methoden einen Fehler wirft und wir müssen den jetzt catchen, also auffangen.

Was machen wir dann damit? Wir können zum Beispiel sagen print, dann wird hier das in der Konsole ausgegeben und sagen hier einfach einen Text. Fehler beim Laden des Inhalts.

Okay, dieser Fehler-Text, der wird nicht auf dem Handy angezeigt, sondern der wird jetzt nur für uns Software-Entwickler angezeigt, damit wir jetzt die App debuggen können. Das heißt, wenn das Ganze nicht funktionieren sollte, dann siehst du auf deinem Computer diese Fehlermeldung und kannst halt anhand dieser Fehlermeldung sagen, okay, offensichtlich habe ich bei diesem doch etwas komplizierten Code weiter oben etwas falsch geschrieben. Meistens, kleiner Spoiler, hat man nur einen Buchstaben falsch geschrieben oder einen...

Großbuchstaben kleingeschrieben oder andersrum. Und damit kann man als Entwickler das dann relativ schnell herausfinden und einfach jetzt die Zeilen darüber nochmal kontrollieren. Genau. Also was wir natürlich dann noch zur Ergänzung machen können, damit wir ein bisschen mehr Informationen haben, weil dieser Fehler, der geworfen wird, der sagt ja nicht einfach nur, etwas ist falsch gelaufen, sondern im Idealfall bekommt man dann noch zusätzliche Informationen, was falsch gelaufen ist. Also hier könnte es zum Beispiel sein, dass die Daten nicht gefunden werden oder hier konnten die Daten nicht eingelesen werden.

Was man dann machen kann, ist, dass man dieses... Print, diesen Text noch erweitert und zum Beispiel sagen, okay, ein Doppelpunkt und dass man hier eine Variable mitgibt und dann macht man einfach einen Backslash, also einen Schräg-Rückstrich. Ja, genau und übergibt dann hier einfach Error.

Okay, das heißt, man schreibt einfach dieses Rückstrich und dann in Klammern Error und dann wird nochmal eine automatisch generierte Fehlermeldung von Xcode oder von Swift dort angezeigt. Ganz genau. Super. Das heißt, wir haben sowohl unsere eigene, die wir auf jeden Fall verstehen, und dann nochmal extra Informationen von unserem Code.

Ganz genau. Und das Letzte, was jetzt halt noch wichtig ist, weil wir haben hier oben unser Topics. Und das Wichtigste ist, dass innerhalb dieses Initializers, egal wo wir aus dieser Funktion rausgehen, dass im Ende immer ein Wert in diesem Topics drin ist, selbst wenn es eine leere Liste ist. Das heißt, hier oben haben wir zum Beispiel diese URL.

Wenn diese nicht gefunden wird, dann haben wir eine leere Liste. Und hier unten machen wir genau das Gleiche. Wenn jetzt irgendwo ein Fehler geworfen wird, dann müssen wir ja trotzdem eine leere Liste anzeigen.

Deshalb machen wir auch hier einfach Topics und übergeben eine leere Liste. Und das war jetzt eigentlich alles zu unserem View-Model. Okay, ich würde sagen, wir verlinken auch den ganzen Code einfach mal unter dem Video.

Das heißt, wenn jetzt irgendwie ein Fehler bei dieser Prozedur passiert ist oder sowas, es wird ein bisschen komplizierter Quelltext, gleich wird es leichter, dann kannst du das auch immer mit unserer Musterlösung einfach abgleichen. Ganz genau. Und dann würde ich sagen, jetzt haben wir unsere Daten und dann machen wir unsere schöne Liste.

Okay, das heißt, jetzt kommt der spaßige Teil. Jetzt bauen wir die UI, also das User Interface, das, was man sehen kann, da, wo die Sachen angezeigt werden. Genau, dazu gehen wir in unsere Content View und ich würde sagen, wir löschen hier einfach mal alles raus.

Okay, weil das war ja unsere Demo-App und das, was da jetzt noch steht, ist dieser sogenannte Boilerplate-Code, der da immer da sein muss. Und zwischen diese View, zwischen diese geschweiften Klammern in Zeile 14 und Da schreiben wir jetzt einfach die Elemente rein, die wir anzeigen wollen, oder? Ganz genau.

Okay. Also was wir jetzt als erstes machen, ist, dass wir eine Liste erstellen, weil wir wollen ja eine Liste anzeigen. Und hier drin müssen wir jetzt alle Elemente reinschreiben, die wir anzeigen möchten. Und im Prinzip wollen wir eigentlich nur Texte untereinander zeigen für jedes Thema, also jedes Topic, was wir haben.

Das machen wir natürlich nicht manuell, sondern wir benutzen dafür eine Schleife. Das heißt, damit wir die Liste durchgehen von allen Topics, die wir haben und für jedes Element einen Text anzeigen. Okay, das heißt, ich könnte da jetzt auch einfach Text reinschreiben und dann würde ein einzelner Text drinstehen.

Und man kann das aber auch gleich machen für alle Elemente aus unserer Data, also aus dieser Datenquelle, die wir da angeschlossen haben. Und dann werden gleich alle Elemente angezeigt. Ganz genau. Deshalb, also man könnte jetzt hier theoretisch einfach auch Text schreiben und Hallo. Und dann wird hier automatisch eine Liste generiert, die auch schon scrollen kann.

Aber das wollen wir natürlich automatisieren und die ganze Liste so durchgehen und sagen hier, for each, also für jedes Element, brauchen wir hier unten und nehmen hier das hier, wo Data und ID und Content übergeben wird. Wir nehmen diese Option und als Data, ja dazu brauchen wir jetzt die Daten, die in unserem View-Model liegen. Dazu müssen wir jetzt aber erstmal unser View-Model erstellen. Das heißt, wir gehen jetzt hier über unseren Body und erstellen hier erstmal unser View-Model.

Okay, das heißt... Wir haben quasi alle die ganze Logik geschrieben, um die Daten zu importieren und so weiter und die in diese Struktur zu kriegen. Jetzt müssen wir uns diese Struktur hier reinholen, denn hier findet ja jetzt unsere Hauptlogik statt.

Hier erstellen wir unsere View, da brauchen wir auch die Daten. Genau, also wir müssen ja darauf zugreifen können. Dazu schreiben wir hier oben erstmal Observed Object, weil wir dieses Objekt sozusagen beobachten und die Daten daraus lesen wollen. Var und dann nennen wir die, wie wir wollen.

In diesem Fall können wir es View Model nennen. sehr eindeutig was dieses Objekt genau macht, sagen gleich und speichern dort rein eine neue Instanz des View Models mit Klammer auf und Klammer zu. Und die wird dann hier reingespeichert und in diesem View Model stecken jetzt unsere Daten drin, die wir lesen können.

Das heißt, wir gehen jetzt hier wieder in dieses erste Element rein und sagen hier forEach, wo Data steht, sagen hier ViewModel und dann Topics. Das sind ja die Elemente, die wir anzeigen wollen. Die ID, das ist jetzt, würde ich sagen, kann man mal erstmal ignorieren.

Was wir hier einfach reinschreiben ist.self, also............................................... damit es praktisch unterscheiden kann zwischen Elementen, die gleich sind und neu sind, damit die Liste effizienter geladen werden kann. Klicken auf das nächste drauf und sagen Content.

Und im Prinzip haben wir jetzt hier erstmal einen Parameter, das ist dann hier unser Topic. Schreiben wir einfach Topic rein. Das heißt, wir gehen jetzt hier diese Liste durch. Sagen, die Liste ist unsere Topics und hier haben wir dann jedes Mal ein einzelnes Topic.

Praktisch für jedes Element in dieser Liste müssen wir jetzt eine neue View, die wir anzeigen wollen, generieren. Okay, also diese Schleife, so heißt das, ist letztendlich immer nach der gleichen Struktur. Das heißt, wir schreiben for each und dann eigentlich immer durch welche Liste von Daten wir durchgehen wollen.

Dann halt dieses Ding mit der ID und dann wie wir ein einzelnes Element nennen wollen. Ganz genau. Und was wir jetzt hier machen können, ist, dass wir einfach sagen, okay, wir wollen jetzt hier einen Text anzeigen und übergeben jetzt halt nicht einfach irgendeinen Text, den wir selbst schreiben. wie wir es normalerweise gemacht haben, sondern sagen hier einfach Topic, Punkt. Und dann können wir sagen, zum Beispiel der Titel, den wir anzeigen wollen.

Und was dann passiert? Jetzt erwacht es zum Leben. Dann werden die Daten geladen. Wir sehen, die Preview lädt und unsere Liste ist schon da. Wow, okay.

Das heißt, jetzt plötzlich ist ein Riesensprung nach vorne gekommen. Die ganze Zeit hat man nichts gesehen. Und jetzt plötzlich haben wir durch diese Schleife quasi die ganze Liste.

dargestellt als Textelemente. Das heißt, was jetzt passiert ist, dass wir ganz viele Textelemente haben untereinander und zwar für jeden Titel aus unserer Data.json und die werden da jetzt angezeigt. Ganz genau. Jetzt ist es natürlich noch ein bisschen langweilig, weil da passiert nichts.

Ich kann da jetzt auch noch nicht draufdrücken. Deswegen würde ich sagen, wir implementieren noch eine Detailübersicht, dass wenn man da draufklickt auf Variable, dass ich dann noch die Erklärung und das Code-Beispiel noch mit angezeigt bekomme. Dazu müssen wir jetzt ein neues Swift-View erstellen. Dazu klicken wir hier oben wieder auf unseren Ordner drauf, machen wieder Kommando N oder mit rechtsklicken New File und wählen hier unten aus User Interface Swift View.

Klicken Next, den nennen wir mal Detail View, also für Detailansicht. Klicken OK und wir sehen, durch das, dass wir jetzt dieses Mal nicht einfach neue Swift-Datei, sondern neue Swift-Datei erstellen gedrückt haben, wird hier automatisch schon dieser Boilerplate-Code direkt für uns angezeigt. Und hier kommt jetzt unsere...

Detailansicht rein. Okay, das heißt, es ist jetzt sehr ähnlich zu dieser Datei, die wir eben offen hatten, ContentView. Es ist wieder dieser Boilerplate-Code und in diesem Body, da können wir jetzt Elemente wie Text und so weiter einfach reinpacken. Text steht schon drin, jetzt wollen wir aber die Informationen von eben da anzeigen.

Ganz genau und dazu, weil wir ein Topic anzeigen wollen, müssen wir hier oben erstmal ein Topic erstellen, dass wir dieser Detailansicht übergeben, damit wir praktisch sagen, hier ist ein Topic, hier ist die Detailansicht, zeige das an. Okay, das heißt, in dieser Variable der Topic wird jetzt das gespeichert, wo wir drauf gedrückt haben. Das jeweilige Element. Ja, und jetzt haben wir hier unten direkt einen Fehler.

Denn unsere Vorschau braucht jetzt auch immer ein Topic, was angezeigt werden muss. Das heißt, hier zeigt uns Xcode, okay, hier gibt es einen Fehler. Und durch diesen weißen Punkt in diesem roten Kreis können wir hier draufklicken und sagen Fix. Und dann wird hier direkt schon ein Topic erstellt.

Das löschen wir mal raus und erstellen hier ein neues Topic. Wir können hier auch einfach das so aufrufen und sagen hier from. Das machen wir jetzt nicht, sondern wir übergeben die ganzen Werte manuell.

Klicken hier drauf und dann können wir jetzt hier Dinge reinschreiben wie Titel, können wir sagen Konstante, Erklärung, können wir sagen Speichert Daten und Code Snippet, Let, Variable, Doppelpunkt, String zum Beispiel. Das ist einfach nur mein Code Snippet. Damit hier in dieser Vorschau wird dann genau dieses Element angezeigt.

Das sind sozusagen solche Demodaten. Und den müssen wir jetzt hier anzeigen. Dazu würde ich sagen, wir löschen mal hier diesen Text raus, sondern wir wollen ja hier oben anzeigen von unserem Topic als erstes mal die Erklärung, also Explanation.

Und hier wird direkt angezeigt, Speicherdaten. Was wir jetzt auch noch machen können ist, dass wir zum Beispiel eine Überschrift erstellen. und sagen hier Erklärung, damit es hier direkt angezeigt wird.

Es wird dann auch direkt hiermit angezeigt. Weil wir jetzt mehrere Sachen untereinander anzeigen, haben wir ja vorhin schon gelernt, dass wir einen V-Stack, also einen vertikalen Stapel benutzen können. Den machen wir mal einfach so und schieben diese Sachen hier rein, damit die Dinge, die hier angezeigt werden, auch vertikal angezeigt werden. Okay, das heißt, jetzt steht da Erklärung und darunter speichert Daten und es ist einfach semantisch richtig, das in diesen Stapel zu packen, damit es sicher untereinander angezeigt wird. Ganz genau.

Und was wir jetzt auch noch machen wollen, ist, dass wir hier noch unser Code-Beispiel anzeigen. Das heißt, wir nennen das jetzt einfach mal Code-Beispiel, wird dann hier auch direkt angezeigt. Das ist schön, dass wir jetzt hier direkt so eine Live-Vorschau haben und darunter wollen wir natürlich unser Code-Beispiel haben. Das nennen wir einfach mal Topic. Code Snippet.

Das sieht jetzt natürlich noch nicht so schön aus, deswegen formatieren wir das Ganze noch. Und zwar können wir hier so genannte View Modifier mit anwenden. Okay, das heißt mit diesem View Modifier können wir jetzt sagen, wie der Text zum Beispiel aussehen soll. Genau, also damit verändern wir sozusagen eine View.

Wir haben jetzt hier zum Beispiel Text und sobald ich da hinten dran einen Punkt mache, dann bekomme ich hier schon so Optionen, wie sagen, okay, ich möchte den Text bold machen oder eine bestimmte Font benutzen. Das können wir zum Beispiel mal machen, dass wir sagen Font. Und dann Punkt.

Ich kann natürlich eigene Fonts benutzen oder ich kann hier so eine systeme Fonts benutzen. Und dann nehmen wir mal hier Titel und sagen hier hinten dran, okay, Titel, ja, sieht schon ganz gut aus, aber ich möchte, dass der Titel auch noch bold ist. Das heißt, man sieht schon, es wird größer und wird auch noch fett dargestellt. Cool, das heißt, da können wir jetzt alles theoretisch beeinflussen. Du hast es jetzt fett gemacht, du hast die Schriftart und sowas geändert, aber man könnte auch die Farbe und alles ändern.

Ganz genau, also Farbe, da könnte ich dann einfach hier zum Beispiel Foreground. Style zum Beispiel benutzen und sagen hier der Foreground-Style wäre Red und dann wird der Text rot. Cool, klopfen wir da raus. Genau und dann das gleiche machen wir zum Beispiel auch noch bei unserem Code-Beispiel. Das können wir einfach mal kopieren.

Sagen, okay, das ist ja auch wieder eine Überschrift. Das sieht schon mal ganz gut aus, aber es wäre natürlich schön, wenn unser Code-Snippet auch ein bisschen mehr wie Code aussieht. Deswegen benutzen wir jetzt hier eine Mono-Spaced-Font. Das sind einfach Fonts, wo die Characters, also die Zeichen immer genau gleich groß sind.

Und das sind dann... so typische Fonts, die bei Programmierung eingesetzt werden. Okay, es sieht so richtig programmiermäßig aus.

Ganz genau. Das heißt, da kommt jetzt wieder Punkt oder sowas dahinter. Ganz genau. Ich mache hier wieder neue Zeile.

Ich mache hier Punkt und sage Font. Und was ich jetzt hier mache, ist, dass ich sage, ich nehme die Systemfont, gehe hier eins drunter und mit der Optionstaste gedrückt, werden dann alle Elemente, also alle Argumente mit angezeigt. Und dann drücke ich Enter. Die Größe sage ich jetzt okay, Font ist 14, Weight, das kann ich jetzt mal rauslöschen, das brauchen wir in diesem Fall nicht.

Das heißt, ich kann das jetzt hier komplett rausnehmen, damit ich hier nur Size, also die Größe habe und das Design. Und das Design ist Punkt Mono Spaced. Und wir sehen dann schon, dass wir eine andere Font haben, die ein bisschen mehr wie Programmiercode aussieht. Das ist natürlich der Hammer und ging jetzt auch relativ easy.

Dann, was wir jetzt noch machen können, ist, dass wir sagen, wir möchten da noch einen grauen Hintergrund haben. Also neue Zeile, wieder Punkt und sagen hier Background. Und hier in diesem Background, gehen wir mal in diese Klammer rein, sagen wir Punkt Grey, weil wir zum Beispiel sagen, der Hintergrund soll grau sein.

Der ist ein bisschen zu grau, deswegen sagen wir Opacity, also wie durchsichtig die ist, setzen wir mal auf 20%, dass es ein bisschen leichter ist. Da wird es nur so leicht angegraut. Sieht natürlich jetzt noch immer nicht so schön aus.

Deswegen würde ich sagen, dass wir das Ganze ein bisschen größer machen. und sagen, okay, wir wollen hier eine Clip-Shape haben. Eine Clip-Shape, okay.

Genau, denn was ich machen möchte, ist, dass der Hintergrund jetzt nicht einfach direkt hinter dem Text ist, sondern vielleicht ein bisschen größer mit abgerundeten Ecken dargestellt wird. Dann klicke ich hier einfach drauf und sage, die Shape, die ich anzeigen will, ist ein Rounded Rectangle mit einem Corner Radius, weil ich abgerundete Ecken haben will. Bestätige und sage, mein Corner Radius ist zum Beispiel 8. Also jetzt.

Damit sagen wir, dass die Ecken quasi von dieser Box, die noch relativ klein ist, darum jetzt um 8 Pixel so abgerundet ist. Also leicht rund. Genau.

Aber was wir jetzt natürlich machen wollen, ist, dass das alles ein bisschen mehr Platz wegnimmt und sagen dann direkt hinter meiner Font, dass es die Frame, also dort, was angezeigt wird, sozusagen der Container, dass der größer ist. Da kann ich einfach direkt hinter Font wieder eine neue Zeile machen, sagen Punkt, Frame. übergebe hier einmal die maximale Breite, sage das ist Infinity, also der soll wirklich von rechts nach links den ganzen Platz wegnehmen und ein Alignment möchte ich auch noch haben.

Also eine Ausrichtung? Genau, die Ausrichtung, denn ich möchte, dass der Text an der Seite angezeigt wird. Cool, jetzt wäre es natürlich gut, wenn er nicht direkt am Bildschirmrand ist, sondern wenn er auch so ein klein bisschen eingerückt ist, ein bisschen Abstand.

Genau, also sowas wird auch... padding genannt da können wir einfach wieder eine neue zeile machen und sagen einfach hier padding da kann ich dann sagen wie viel es hat aber ich glaube wir nehmen einfach die standard paddings und sehen dann dass es oben unten rechts und links so ein bisschen mehr platz erstellt wow okay das sieht jetzt schon richtig gut aus also gerade jetzt nachdem es eingerückt wurde hat sich jetzt schon vieles geändert klar die ausrichtung von den ganzen elementen muss man noch so ein bisschen machen aber das machen wir sicher gleich noch aber es sieht ja schon echt richtig gut aus genau also so ein wie stack also dort wo jetzt alles mit angezeigt wird standardmäßig wird alles einfach in der mitte angezeigt was wir jetzt aber sagen können ist dass wir hier einfach die Klammern erstellen, dass wir noch ein paar Parameter mitgeben in diesen vertikalen Stapel. Sagen wir hier zum Beispiel Alignment. Okay, das heißt Alignment ist eigentlich genauso geschrieben jetzt wie unten auch.

Und da kannst du jetzt wieder Punkt Leading schreiben. Ganz genau, Leading. Dann wird erstmal alles von links an die Seite geheftet.

Und ich finde, dass da noch ein bisschen zu wenig Platz dazwischen ist. Deswegen können wir hier ein Spacing noch mit rein machen. Das sind dann sozusagen die Abstände, die wir haben.

sagen hier 12, ja das sieht schon mal besser aus. Jetzt klebt dieses ganze Ding hier noch immer an der Seite. Deswegen würde ich sagen, dass wir diesem VStack auch noch ein Padding mitgeben können.

Da gehen wir einfach mal schauen, okay, wo hört dieses VStack auf? Das ist genau hier. Gehen dann eins drunter und sagen hier auch einfach Padding und es wird ein Padding erstellt. Wow, okay, das hat jetzt schon mal richtig viel geändert. Also ich finde gerade so sich das Padding, wirkt es gleich um einiges professioneller.

Ganz genau, aber jetzt haben wir natürlich noch ein Problem. Die Erklärung kann relativ lang sein und das Code-Beispiel kann natürlich auch theoretisch sehr lang sein. Da wäre es natürlich schön, wenn man hier scrollen kann. Deswegen, was wir jetzt machen können, ist folgendes, dass wir hier eine Scroll-View erstellen und sagen, dass alle Inhalte, die wir hier anzeigen, also unser V-Stack inklusive des Paddings, schneiden wir aus und kopieren das in unsere Scrollview rein.

Und automatisch wird alles zu einer Scrollview. Das heißt, ich kann hier automatisch scrollen. Das ist jetzt auch oben. Genau, und es ist automatisch oben, weil bei einer Scrollview automatisch natürlich alles erstmal oben angezeigt wird und neue Inhalte werden unten reingeschrieben.

Und in dem Fall ist es halt so, egal wie viel Text ich anzeige, ich könnte hier halt theoretisch immer weiter scrollen. Cool. Das heißt, jetzt sieht es schon richtig gut aus. Es sind allerdings glaube ich noch nicht die echten Daten, sondern jetzt einfach nur so ein Erklär-Test-Beispiel. Und jetzt müsste eigentlich noch das angezeigt werden, wo man draufklickt.

Genau, also was wir jetzt machen müssen, ist, dass wir diese Übersichtsseite, die wir hier schon programmiert haben, die wir ganz am Anfang mit dieser Liste angezeigt haben, dass wir die praktisch verbinden. Also was wir jetzt machen möchten, weil wenn ich hier drauf tippe auf irgendetwas, dann passiert noch gar nichts. Deswegen, wenn wir da jetzt einen Navigation-Stack benutzen, Dann können wir das Ganze navigierbar machen. Das heißt, ich muss hier direkt darunter, also über der Liste erstmal, ein Navigation-Stack erstellen.

Also nicht Navigation-Link, das ist wichtig, sondern ein Navigation-Stack. Und sage, okay, in diesem Navigation-Stack ist meine Liste drin. Also ausschneiden und dann reinkopieren, dass es halt drinnen ist sozusagen.

Und dann sehen wir schon, dass es automatisch so ein bisschen mehr nach Liste aussieht. Okay, durch diesen Stack haben wir jetzt die Möglichkeit, uns später zu navigieren, wenn wir auf ein Listen-Element draufdrücken. Ganz genau. Deshalb statt einfach einen Text hier anzuzeigen, wollen wir einen Navigation Link anzeigen. Okay, der sieht genauso aus wie ein Text, gehe ich mal von aus.

Also brauchen wir dafür einen Navigation Link. Und hier haben wir natürlich wieder verschiedene Optionen. Was für uns ganz wichtig ist, dass wir hier Title Key benutzen.

Also es ist der Titel, der angezeigt wird. Dann brauchen wir keinen speziellen Text nochmal. Und eine Destination, das ist sozusagen unser Ziel, wo ich hin navigiere, wenn ich da drauf tippe. Soll ja im Prinzip dann unsere Detail-View sein.

Dann wählen wir das mal aus mit Enter. Sagen, der Text, der da angezeigt wird, ist wieder einfach Topic.Title. Und dann klicken wir hier auf Destination, drücken Enter. Und hier müssen wir jetzt diese View anzeigen, die unser Ziel ist.

Und in dem Fall ist es halt diese Detail-View, die wir gerade erstellt haben. Wir sehen schon, hier kommt die Auswahl mit Topic. Und wir können halt hier auch wieder auf dieses Topic zugreifen für jedes Element in dieser Liste. Und übergeben hier nicht einfach nur den Text oder nur den Code-Snap-Bit, sondern wir sagen hier, nimm dieses ganze Topic, damit du das schön anzeigen kannst.

Okay, das heißt, da wo jetzt gerade Text stand, hast du jetzt Navigation-Link hingeschrieben, dann wieder Topic.title, genauso wie vorher. Aber es gibt jetzt noch diese geschweiften Klammern, die gehen auf. Und da drin steht jetzt noch eine zweite Information.

Und zwar, was wir machen wollen, wir mit draufdrücken. Und zwar, dass wir unsere zweite Komponente, die wir eben geschrieben haben, anzeigen. Diese Detail-View.

Und zwar mit folgender Information. Topic, Doppelpunkt, Topic, was letztendlich bedeutet, dass wir als Topic das Topic übergeben, also die drei gebündelten Informationen, Titel, Beschreibung, Codesnippet, wo wir drauf gedrückt haben. Ganz genau. Also ich kann das mal ein bisschen noch zur Seite schieben, dann sieht man das auch noch ein bisschen besser, wie das dann aussieht.

Also nochmal kurz zur Erklärung, ich habe hier meinen Navigation-Stack, einfach damit ich sagen kann, okay, innerhalb... Dieses Element kann ich irgendwie navigieren, irgendwo anders hin. Und ich habe hier eine Liste und in dieser Liste habe ich eine Schleife, damit ich halt über jedes Element drüber gehen kann.

Und für jedes Element erstelle ich einen Navigation Link. Der hat einen Titel, das ist das, was ich hier anzeige. Und das Schöne ist, wenn ich einen Navigation Link benutze, bekomme ich automatisch hier diesen Pfeil mit an der Seite, damit die Nutzer auch direkt sehen, okay, wenn ich da drauf tippe, dann navigiere ich irgendwo hin. Und wo ich dann hin navigiere, komme dann hier in die Klammer rein. Und das ist dann in dem Fall meine Detail-View, die wir gerade eben erstellt haben.

Das ist diese hier. Und wenn ich jetzt hier wieder zurückgehe, läuft das Ganze hier auch schon. Und ich kann hier auch schon direkt draufklicken.

Das heißt, ich kann hier auf Variablen draufklicken. Und es wird hier automatisch hier alles schon angezeigt mit den Inhalten, die in unseren Daten drin sind. Das ist der Hammer.

Das heißt, wir hatten gerade quasi diese Mock-Component angelegt, dieses Mock-Topic. wo wir einfach so Testsachen hatten, aber hier werden jetzt direkt die echten Werte angezeigt. Ganz genau. Das heißt, die App ist eigentlich fertig.

Eine Kleinigkeit hätte ich noch, und zwar wäre es doch schön, wenn ich hier nicht einfach zurückstehen würde. Und hier oben möchten wir ja vielleicht auch wissen, okay, was für ein Topic wird hier überhaupt erklärt. Da habe ich jetzt einfach nur Erklärungen, Variablen, Speicherorte. Da könnt ihr schon sehen, aber es wäre natürlich schön, wenn ich das hier oben irgendwo sehen würde. Kann ich hier mal zurückgehen, hier oben.

ist es auch noch ziemlich nackt. Deshalb, was ich jetzt hier machen kann, ist, ich kann an die Liste gehen und sagen Enter und dann Punkt Navigation Title und kann hier einen Titel übergeben und den nennen wir mal Swift lernen. Die wird automatisch oben angezeigt.

Cool. Das schöne ist, ich kann es hier auch scrollen und die schiebt sich hier oben automatisch in diese Navigationsbar rein. Alles ohne viel Aufwand.

Das ist geil. Und wenn ich jetzt irgendwo drauf drücke? Genau, dann haben wir auch noch eine schöne Animation, dass es hier oben direkt reinrutscht und ich sehe dann auch, wo ich hin zurück oder wo ich wieder zurück navigiere, wenn ich da drauf klicke. Das ist natürlich geil. Also bei anderen Programmiersprachen kann ich aus Erfahrung sagen, ist es nicht so leicht, so etwas zu basteln wie hier bei Swift.

Jetzt können wir das Ganze natürlich auch noch bei unserer Detailansicht machen. Und zwar klicke ich hier drauf und hier ganz unten sage ich, ich möchte hier auch einen Navigation Title geben. Dann mache ich einfach Topic Punkt. title und das ganze wird dann hier auch automatisch mit angezeigt und damit es ein bisschen schöner aussieht damit es halt direkt in der der navigation bar mit drin ist kann ich ja noch ein paar informationen mit zugeben wie zum beispiel punkt navigation bar title display mode und bei dem display mode sage ich inline dann wird es automatisch hier oben mit angezeigt und wenn wir jetzt noch mal zurückgehen unsere content view und hinnavigieren dann sehen wir wenn ich jetzt hier auf variable drauf klicke dass hier oben automatisch Variablen als Titel sozusagen mit dabei steht. Das ist ja cool.

Okay, das heißt, jetzt hat man hier gleich nochmal eine gute Übersicht und weiß auch, wohin man kommt, wenn man auch zurückdrückt. Ganz genau. Also einfache App, super schnell programmiert.

Und genau, also wenn man sich jetzt natürlich noch für ein paar Swift-spezifische Sachen interessiert, dann muss man gar nicht mehr googeln, sondern ich kann hier einfach draufklicken und in der App, die wir programmiert haben, die können wir jetzt benutzen, um... Zwift zu lernen und theoretisch könnte ich natürlich auch einfach diese JSON-Daten erweitern mit irgendwelchen Daten, die ich haben möchte und habe die dann alle in einer App gebündelt. Das ist cool.

Das heißt, die App ist jetzt fertig. Jetzt möchte ich die natürlich auch irgendwie Leuten zeigen können und so. Das heißt, die muss noch irgendwie aufs Handy kommen. Das heißt, ich habe mein iPhone hier und irgendwie muss ich das jetzt auf dieses iPhone raufbekommen. Dafür brauchen wir wahrscheinlich ein Kabel und man muss dieses Handy in den Entwicklermodus bringen.

Ganz genau. Nachdem das Handy angeschlossen ist und man vertraut hat, muss man jetzt hier oben das iPhone noch auswählen. Genau, also wir haben hier verschiedene Simulatoren, wo wir die App laufen lassen können oder auf einem richtigen Gerät. Ich habe hier zum Beispiel iPhone von Kevin, das ist mein Telefon und iPhone von Yunus, das haucht jetzt auch hier mit auf.

Und was wir jetzt machen müssen, wir wählen das aus, wir drücken hier auf Play, also das heißt startet die App. Und was jetzt kommt ist, dass wir sein Gerät noch mit unserem Account registrieren müssen. Denn im Prinzip hat man als Entwickler nur eine limitierte Anzahl von richtigen Geräten, wo man die App drauf installieren kann.

Und deshalb müssen wir jetzt sein Gerät auch noch mit unserem Account verknüpfen. Okay, das heißt, da drückst du drauf. Genau, das wird dann registriert. Genau, und was wir jetzt machen müssen, ist auf seinem Telefon den Entwicklermodus einschalten.

Okay, das heißt, jetzt muss ich in die Einstellungen gehen und dann runter auf Datenschutz und Sicherheit. Und wenn ich jetzt hier ganz runter scrolle, sehen wir jetzt hier eine neue Option, die wir sonst nicht sehen. Entwicklermodus.

Und da mache ich jetzt hier oben einfach rein und muss mein Handy neu starten. Ganz genau. Okay, dann machen wir das mal. Genau, und jetzt sollten wir das Ganze nochmal probieren können.

Wir verbinden uns hier wieder mit iPhone von Junos, weil es hat sich natürlich wieder... disconnected, weil er sein Telefon neu starten musste, drücken hier wieder auf Start. So, jetzt sollte eigentlich alles vorbereitet sein.

Das dauert immer ein paar Minuten, wenn man es das erste Mal macht. Und deswegen drücken wir hier wieder auf Play und wir sehen auf Junos Smartphone, es lädt gerade noch. Beim ersten Mal dauert es immer ein bisschen länger, aber danach ist es schneller. Hammer Die App ist auf meinem Handy und ich kann sie jetzt hier ganz normal bedienen.

Ich kann jetzt sagen, okay, ich will wissen, was eine IF-Anweisung ist, gehe drauf und hier oben steht, was es ist. Und ich sehe sogar so ein kleines Code-Beispiel. Genau, du könntest hier sogar scrollen, das haben wir alles eingebaut.

Das ist ja der Hammer. Und hier könnte ich jetzt auch theoretisch beliebig meine Vokabeln in dieser JSON-Datei hinzufügen und kann diese App jetzt auch meinen Freunden zeigen und so weiter. Also App komplett fertig, würde ich sagen. App komplett fertig.

Herzlichen Glückwunsch. Und das kannst du natürlich auch als Basis nehmen, um deine eigene App zu bauen oder das Ding weiter zu erweitern. Es gibt noch unzählige Sachen, die mir hier jetzt direkt... einfallen, zum Beispiel, dass man Notizen dazu speichert, dass man weitere Felder anzeigt und so weiter und so fort. Da sind auf jeden Fall deiner Kreativität keine Grenzen gesetzt.

Von daher, danke, dass du da warst, Kevin. Danke, dass du uns gezeigt hast, wie man solch eine coole iOS-App baut. Wenn ihr mehr von Kevin sehen wollt, dann schaut unbedingt auf seinem Kanal vorbei. Er ist hier auch auf jeden Fall unten verlinkt.

Ansonsten abonnieren natürlich nicht vergessen. Wir sehen uns im nächsten Video. Macht's gut.

Ciao.