Mobile App-Entwicklung mit Ionic und Reaktion - Idee zum App Store

1. Einführung – Beginne hier: Hi, das ist mein Callahan. Ich benutze Ionic für die Entwicklung mobiler Anwendungen seit 2014, bevor es sogar offiziell veröffentlicht wurde . Seitdem ist Ionic mein Weg zur Technologie für den Aufbau von Mobile APS. Mit der Veröffentlichung von Version vier im Jahr 2019 wuchs Ionic über seine bescheidenen Ursprünge hinaus als eckiges Framework für die Herstellung mobiler APS. Heute arbeitet Ionic mit einer Vielzahl von Web-Technologien. Es hat sich zu einem erstklassigen Bürger für den Aufbau aller Arten von Web-Anwendungen entwickelt. In diesem Kurs konzentrieren wir uns auf Reagieren, vom Nullcode bis zur APP an Ort und Stelle Türen. Während dieses Kurses werden wir die wichtigen Aspekte der Entwicklung mit Ionic abdecken und reagieren. Diese Lektion behandelt die absoluten Grundlagen und richtet Ihre Entwicklungsumgebung so ein, dass sie so effektiv wie möglich ist. Wir werden mit einem einfachen Hallo Ionic Anwendung wird direkt in die Anwendungsstruktur springen , erklärt, wie eine ionische Anwendungen ausgelegt. Wir werden einige der einfachen Sie I-Komponenten vorstellen und ein grundlegendes Seitenmenü für die Demo-Anwendung erstellen . In der nächsten Lektion geht es um die Speicherung von Anwendungen. Ionic bietet einen einfachen Speichermechanismus, der über Webbrowser und Geräte hinweg funktioniert. Wir verwenden dies, um persistente Anwendungsdaten zu verwalten, die Geräteneustarts überleben. Wenn Sie keine speziellen Hardwarefunktionen benötigen, die nicht über den Webbrowser verfügbar sind , können Sie Ihre Anwendung freigeben ist ein progressives Web oder PW A. Während das Web jeden Tag mehr und mehr fähig wird, benötigen einige Funktionen immer noch Zugriff auf das zugrunde liegende Gerät, auf dem Ihre APP läuft. Diese Lektion wird eine Einführung in die Geräteintegration mit Kondensator in der letzten Lektion werden die Anwendung bündeln, die im Apple App Store und im Google Play Store veröffentlicht werden soll . Ich werde ein paar Annahmen über einige Dinge machen, mit denen Sie schon vertraut sein sollten. Ich erwarte, dass Sie wissen, wie man Programme und mindestens eine einzige Programmiersprache schreibt. Sie sollten zumindest die Grundlagen des Webseitenlayouts mit HTML verstehen. Wenn Sie wissen, was es getan hat, ist, wie man eine HTML-Button zu erstellen. Es sollte dir gut gehen. Wir werden JavaScript und Typoskript intensiv nutzen, und es wird helfen, wenn Sie mindestens Einsteigerwissen haben. Sie werden auch einen Texteditor oder eine integrierte Entwicklungsumgebung wünschen. Ich verwende und empfehle Visual Studio Code B s Code ist eine kostenlose und Open-Source-und Cross-Plattform-Entwicklungsumgebung von Microsoft, die von Grund auf die Arbeit mit allen Technologien entwickelt wird. Natürlich können Sie das Werkzeug verwenden, mit dem Sie sich wohl fühlen. Noch eine Sache. Ich sollte klarstellen, dass dies kein Kurs auf reagieren ist. Während ich den grundlegenden Aspekt der Reaktion darauf hinweisen werde, wie sie sich auf Ionic beziehen, werde ich nicht tiefer gehen, als ich muss Um die Demo-Anwendung funktionieren zu lassen Weiter werden die Tools installieren , die für Sie benötigt werden, um die Demo-Anwendung auf die Bereitstellung von Anweisungen von Mac OS zu diesem Zeitpunkt verwende ich Catalina, aber der Prozess sollte auf jeder aktuellen Version von Mac OS Windows 10 identisch sein. Diese Anweisungen sollten auch funktionieren, wenn Sie auf Windows Server sind oder sogar zu sieben oder acht gewinnen und schließlich Oman zu Lennox. Aber Sie sollten in der Lage sein, mit jeder Limitverteilung zu folgen. nicht das Gefühl, dass Sie alle drei Lektionen beobachten müssen. Wählen Sie die, die Ihrem System am nächsten ist, und beobachten Sie, dass 2. Einführung in die Tooling – macOS: Ionic wird auf einer Vielzahl von Desktop-Plattformen unterstützt. In dieser Lektion konzentriere ich mich auf Mac OS. Ich zeige Ihnen, wie Sie die von mir verwendeten Tools installieren und die Grundlagen so schnell wie möglich in Betrieb nehmen . Will sicherstellen, dass Sie alle Befehlszeilen- und Build-Tools installiert haben, bevor Sie Code schreiben. Das ist es, was sich hier kümmern wird. Ionic nutzt Know-how J S, eine Java-Skript-basierte Laufzeitumgebung, die Sie benötigen, und die zugehörigen Rechnungs-Tools auf einem Mac . Sie haben es wahrscheinlich schon, aber wir sorgen dafür. Und natürlich müssen Sie auch Ionic installieren diese Artikel ziemlich unkompliziert. Sie sollten in der Lage sein, direkt entlang auf einem Mac zu folgen. Die meisten Tools, die Sie benötigen, wenn Sie sie noch nicht haben, können dort installiert werden. Homebrew Homebrew stellt sich als Max Missing Package Manager ab. Es gibt viele Tools und Laufzeitpakete, die über homebrew verfügbar sind, daher empfehle ich es zu installieren. Wenn Sie es noch nicht haben, können Sie es installieren, indem Sie den auf einer Tonseite angezeigten Befehl kopieren und in ein beliebiges Terminalfenster einfügen . Sobald wir Hausbrauen haben, können wir in die Installation von Git schauen, vorausgesetzt, Sie haben es nicht wirklich. zuerst sehen, Lassen Sie unszuerst sehen,ob Sie es haben, was Sie mit dem Befehl git Dash dash Version tun können. Wenn es installiert ist, sehen Sie eine Versionsnummer wahrscheinlich zwei Punkt etwas. Wenn Sie eine Version haben, die Apple sagt, erhalten Sie es wahrscheinlich bedeutet, dass Sie es über X-Codes installiert haben. Befehlszeilentools und dies sollte OK sein. Wenn Sie nicht erhalten haben oder möchten Sie es aktualisieren, können Sie es über Homebrew installieren. Einfach das gebraute Gebräu ausgeben. Hol Befehl. Dies gibt Ihnen die neueste geeignete Version für Ihr System Wenn es um Notiz und Knoten Paket Manager oder NPM kommt , ist meine Empfehlung, ein Tool namens Node Version Manager oder Neid zu installieren. M. Es ist etwas mehr involviert, aber auf lange Sicht viel flexibler. N V M ist eine Eleganz an einer Muschel. Skriptfunktionen, um die flexibelste Verwendung von Notizen zu ermöglichen. Sie können sich vorstellen, dass sein Hauptzweck darin besteht, Ihnen zu ermöglichen, sofort zwischen mehreren Versionen von Notiz auf NPM zu installieren und zu wechseln . Wenn Sie also ein Projekt haben, das kein Datum erfordert, sondern ein anderes, das zum Beispiel Nr. 12 benötigt , ist es einfach, sie beide installiert zu halten, aber dennoch unabhängig voneinander. Die wichtigsten Features von Note drehen sich um Route oder Administratorzugriff oder Superuser . Sobald Sie sich verpflichtet haben, M zu beneiden, gibt es keinen Grund, Sudo zu benutzen. In der Tat brauchen Sie nicht einmal Root-Zugriff, um in V M zu installieren Dies ist die empfohlene Methode für Mac OS, da es keine Befehle erfordert, nicht bereits auf einem Stock Mac-System. Sobald Sie in Stein haben, beneiden em. Sie können es verwenden, um jede Version von Nein zu installieren, in diesem Fall wird die neueste stabile Version installieren. Führen Sie einfach den hier gezeigten Befehl aus ,um die neueste langfristige Unterstützung oder LTs Version von Note herunterzuladen und zu installieren , . Da ich die Z-Shell auf Catalina verwende, muss ich dies in Anführungszeichen setzen. Andernfalls denkt er, dass es sich um einen Dateinamen handelt. Es gibt andere benvy M-Befehle zur Verfügung, die es Ihnen ermöglichen, verschiedene Versionen von Notiz zu installieren und zu verwenden. Die häufigsten werden hier gezeigt, und ich beschreibe sie ausführlicher auf der Kursunterrichtsseite direkt unter diesem Video. Das ist alles, was es dazu gibt. An dieser Stelle haben Sie alle diese Tools installiert und stehen Ihnen zur Verfügung. Als nächstes wird Ionic installieren und unsere allererste Anwendung erstellen. Ich hoffe, du bist genauso aufgeregt wie ich. 3. Einführung in die Tooling – Windows: Ionic wird auf einer Vielzahl von Desktop-Plattformen unterstützt. In dieser Lektion werde ich mich auf Windows konzentrieren. Ich zeige Ihnen, wie Sie die von mir verwendeten Tools installieren und die Grundlagen so schnell wie möglich in Betrieb nehmen . Will sicherstellen, dass Sie alle Befehlszeilen- und Build-Tools installiert haben, bevor Sie Code schreiben. Das ist es, was sich hier kümmern wird. Ionic nutzt Knoten Js, eine Java-Skript-basierte Laufzeitumgebung, die Sie benötigen, und die zugehörigen Bill-Tools. Und natürlich müssen Sie auch Ionic installieren diese Artikel ziemlich unkompliziert. Sie sollten in der Lage sein, direkt entlang auf Windows zu folgen, wenn Sie es noch nicht haben. Beachten Sie, ich empfehle, zu node.js dot-Org's zu übergehen. Wenn Sie dort sind, klicken Sie auf die große grüne Schaltfläche, um die neuesten LTs oder langfristige Support-Version für mich zu diesem Zeitpunkt herunterzuladen . Diese Version ist 12 über 16.1, aber es kann sich von Ihnen unterscheiden, was in Ordnung ist. Sobald es heruntergeladen wurde, sollten Sie in der Lage sein, es zu installieren alle Standardwerte zu akzeptieren. Als Nächstes geht es. Wir werden nicht viel mit get zumindest nicht sofort tun, aber Ionic verwendet es, so dass Sie es Kopf über haben sollten, um dash SCM dot com zu bekommen. Suchen Sie nach dem Download-Button und klicken Sie darauf. Einmal heruntergeladen, genau wie mit Hinweis, sollten Sie in der Lage sein, die Standardeinstellungen zu akzeptieren, sobald Sie installiert haben. Erhalten Sie eine Notiz, die Sie treffen müssen. In diesem Kurs werden wir gelegentlich die Befehlszeile verwenden. Holen Sie sich eine Version der beliebten Lennix Bash Shell namens Git Bash installiert. Sie können auch die normale Windows-Eingabeaufforderung oder Windows Power Show verwenden, je nachdem, was Sie sich am wohlsten fühlen. Ich verspreche, ich werde versuchen, keine Befehle zu verwenden, die für einen von ihnen einzigartig sind. Sie mit Ihrem bevorzugten Befehl show GebenSie mit Ihrem bevorzugten Befehl showden Notizbefehl mit dem Bindestrich Versionsschalter und dem Geschenk-Befehl ein. Auch mit dem Armaturenbrett-Versionsschalter sollten Sie etwas Ähnliches sehen, was ich hier zeige. Wenn nicht, ist etwas schief gelaufen und Sie müssen die Installationsprogramme erneut versuchen. Und wirklich, das ist alles, was es dazu gibt. Zu diesem Zeitpunkt sollten Sie alle diese Tools installiert und verfügbar haben. Als nächstes wird Ionic installieren und unsere allererste Anwendung erstellen 4. Einführung in die Tooling – Linux: Ionic wird auf einer Vielzahl von Desktop-Plattformen unterstützt. In diesem Abschnitt werde ich mich auf ein Brötchen konzentrieren, das begrenzt werden soll, aber Sie sollten in der Lage sein, mit jeder modernen Linux-Distribution zu folgen. Wir zeigen Ihnen, wie Sie die von mir verwendeten Tools installieren und die Grundlagen so schnell wie möglich in Betrieb nehmen können. Will sicherstellen, dass Sie alle Befehlszeilen- und Build-Tools installiert haben, bevor Sie Code schreiben. Das ist es, was sich hier kümmern wird. Ionic nutzt Knoten Js, eine Java-Skript-basierte Laufzeitumgebung, die Sie benötigen, und die zugehörigen Bill-Tools. Und natürlich müssen Sie auch Ionic installieren diese Artikel ziemlich unkompliziert. Sie sollten in der Lage sein, direkt entlang der Grenzen zu folgen. Benutzer neigen dazu, alles über Entscheidungen zu sein, so werde ich drei verschiedene Optionen für die Installation dieser Tools, die Sie wählen können, zur Verfügung stellen , und so alles direkt von den Anbieter-Websites können Sie Ihre Distributionen verwenden Paketmanager für Nr. Es gibt 1/3 Option, die den Notizversions-Manager besprechen wird. Die meisten, wenn nicht alle diese Optionen sollten für Sie funktionieren, unabhängig davon, welche Lennox-Distribution Sie verwenden, bevor Sie entscheiden, welche Methode für Sie geeignet ist . Mal sehen, ob Sie bereits installiert haben oder nicht. Es ist möglich, dass Sie ein Terminal öffnen und geben Sie den Befehl kennen Strich Version. Wenn Sie es bereits haben, antwortet Ihr System mit einer Versionsnummer. Wenn nicht, wie es mein Fall ist, wird es in einem Moment installieren. Die Brötchenröhre bietet hilfsbereit den Befehl, den wir brauchen, um es zu installieren. Mal sehen, was passiert, wenn wir das mit versuchen. Gehen Sie in den Befehl, holen Sie sich die Strich-Version wieder. Ich habe es nicht. Aber wenn Sie dies tun, sehen Sie eine Version hier und wieder aufgelistet. Sie möchten mir hilfsbereit sagen, wie ich über die Installation über den Paketmanager gehen soll. Ich werde Ihnen die anderen beiden Wege zeigen, aber jetzt lasst uns die Paketmanager-Methode machen. Alles, was ich tun muss, ist den Befehl einzugeben, der für mich bereitgestellt wurde, weil ich Pseudo verwende . Ich muss mein Passwort verwenden, und das ist wirklich alles, was es gibt. Schauen wir uns das Kommando an. Vergiss nochmal. Jetzt, da der Prozess abgeschlossen ist, sollte ich in der Lage sein, diese Befehle wieder zu tun und Sie werden sehen, dass ich Knoten Version acht gemeint habe . Das ist nicht, wo ich sein will, also gibt es einen besseren Weg, dies zu tun. Lassen Sie uns die Get-Version überprüfen, Versionen auch ein wenig alt bekommen, aber es wird gut gehen. Die Notizversion betrifft mich jedoch, jedoch, also schauen wir uns die alternativen Methoden an, die Lennox-Benutzer nicht direkt von der no Js-Site installieren können . Wenn Sie Ihren Distributionspaket-Manager nicht verwenden können oder wollen, um zu wissen, dass J. S nicht funktioniert Wenn Sie dorthin gelangen, klicken Sie auf die große grüne Schaltfläche, um die LTs oder langfristige Support-Version für mich zu diesem Zeitpunkt herunterzuladen . Diese Version ist 12 über 16.1, aber es kann für Sie anders sein, was in Ordnung ist. Einmal heruntergeladen, sollten Sie in der Lage sein, es zu installieren, indem Sie die Standardeinstellungen akzeptieren, die die gleichen Informationen gelten, um zu erhalten. Wir werden nicht viel mit Get zumindest nicht sofort machen. Aber Ionic verwendet es, also sollten Sie es Kopf über haben, um dash SCM dot com zu bekommen. Suchen Sie nach dem Download-Button und klicken Sie darauf, sobald Sie heruntergeladen haben, genau wie mit der Anmerkung, sollten Sie in der Lage sein, die Standardwerte zu akzeptieren. Lassen Sie mich Ihnen eine weitere Option für eine Notiz zeigen. Meine Empfehlung ist, ein Tool namens Knotenversions-Manager oder beneiden em zu installieren. Es ist etwas mehr involviert, aber auf lange Sicht viel flexibler. N V M ist ein eleganter Satz von Shell-Skript-Funktionen, um die flexibelste Nutzung der denkbaren Note zu ermöglichen . Der Hauptzweck von N B. M besteht darin, die sofortige Installation und den Wechsel zwischen mehreren Versionen von Note und NPM zu ermöglichen . Also, wenn Sie zufällig ein Projekt haben, das kein Datum erfordert, sondern ein anderes, das Nein erfordert. 12 Es ist einfach, beide installiert zu halten, aber immer noch unabhängig voneinander. Für mich drehen sich die wichtigeren Funktionen von NPM um den Root-Zugriff. Viele NPM-Paketinstallationsanweisungen finden Sie im Web, die angewiesen sind, den pseudo-Befehl zu verwenden , um Pakete global zu installieren, da der Standardspeicherort für diese globalen Pakete systemgeschützte Verzeichnisse sind. Obwohl unwahrscheinlich, ist es möglich, dass Sie Zugriff auf Ihre Lennox-Maschine haben könnten, was diese Anweisungen wertlos macht. Sobald Sie sich verpflichtet haben, M zu beneiden, gibt es keinen Grund, jemals zu tun. In der Tat brauchen Sie nicht einmal Root-Zugriff, um in B M zu installieren. Alles wird unter einem eigenen Benutzerkonto installiert, also lassen Sie uns sehen, wie das funktioniert. Dies ist die empfohlene Methode, um in VM auf Lennox zu installieren, geben Sie einfach einen dieser beiden Befehle ein, je nachdem, ob Ihr System curl oder w bereits installiert hat oder nicht. Ich möchte voran gehen und den w get Befehl in mein Terminal einschlagen. Ich habe die andere Knotenversion bereits deinstalliert, also lasse ich Neid m alles von hier an erledigen. Wie Sie sehen können, war es wirklich schnell. Es gibt eine Warnung, die mir sagt, dass ich mein Terminal wieder öffnen muss. Das liegt daran, dass es meinem Basho Pfade und Funktionen hinzugefügt hat. Lassen Sie mich das jetzt tun. Jetzt habe ich keine Notiz, weil ich nur installiert und VM Aber wenn ich jetzt möchte, kann ich mit Neid m jede Version von wissen, dass ich will installieren . Ich werde die neueste LTs Version installieren, die wiederum 12 16.1 ist. Und das ist alles, was es dazu gibt. Es gibt andere Neid, ähm, Befehle zur Verfügung, die es Ihnen ermöglichen, verschiedene Versionen von Notiz zu installieren und zu verwenden. Die häufigsten werden hier gezeigt, und ich werde sie ausführlicher auf der Kursunterrichtsseite direkt unter diesem Video beschrieben, und das ist alles, was es dazu gibt. An dieser Stelle sollten Sie alle diese Tools installiert haben in verfügbar Next up wird Ionic installieren und unsere allererste Anwendung erstellen 5. deine erste Ionic: Das letzte, was wir tun müssen, ist die neueste Version der Ionic CLI zu installieren, und wir werden das mit NPM tun. Sobald wir fertig sind, können Sie diese Eli verwenden, um unsere allererste App zu erstellen. Ich werde diese Befehle auf meinem Mac ausführen, aber Sie sollten auf jedem Betriebssystem folgen können, das wir bisher besprochen haben . Eines der Dinge, die ich in meinem Home-Verzeichnis mache, ist, dass ich einen Ordner namens Get You Can It Anything You Want Projects Meine Projekte Ionic habe. Es spielt keine Rolle, aber ich gehe jetzt in meinen Git-Ordner und ich werde NPM install dash G for Global bei ionic Slash cli spätestens ausführen . überrascht nicht, dies sicherstellen wird, dass wir die absolute neueste Version erhalten, die es für uns gibt und es Version 6.3 installiert hat, und das wird in einem Moment durch den Rest dieses Kurses wichtig sein, ich werde bleiben Sie an der Befehlszeile. Aber Ionic hat ein grafisches Tool Web-basiertes Tool für die Erstellung bionischer Projekte schnell als Ionic App Wizard bezeichnet . Also werde ich das jetzt versuchen und sehen, was für ein Projekt ich uns geben soll. Also hier ist es am ionischen Framework dot com Schrägstrich Start. Es wird mich um einen Namen bitten. Lassen Sie es uns versuchen. Hallo, Ionic. Ich bin teilweise bis violett, also werde ich Purple wählen. Ich möchte eine Seitenmenüvorlage Sieht ziemlich einfach aus und es reagiert standardmäßig. Also lasst uns weitermachen. Da ich also bereits ein Konto hatte, konnte ich mich schnell anmelden. Ich fügte das Teil für Sie hinzu. Also, jetzt, was es tut, ist es gibt uns einen benutzerdefinierten Installationsbefehl für die Ionics, Eli, und es warnt uns, dass wir Ionics Eli 6.3 oder höher haben müssen, weshalb ich sagte, es wäre wichtig später. Also zurück in mein Terminal, ich habe den Befehl eingefügt, den die ionischen Äpfel oder uns gegeben haben. Also, jetzt werde ich es laufen und sehen, was es für uns tut. Es möchte wissen, ob ich die App mit Kondensator integrieren möchte. - Das tue ich. Aber ich will es noch nicht tun, also übernehme ich den Standard von Nein. Und jetzt wird es eine NPM-Installation für mich laufen sollte nicht zu lange dauern, aber ich werde den längsten Teil für uns bearbeiten, also musst du es nicht durchsetzen. Liebst du nicht einfach die Magie der Bearbeitung an dieser Stelle? Will wissen, ob ich ein kostenloses Ionic Konto erstellen möchte. Ich habe bereits ein Ionic Konto, aber ich werde nicht mit dieser Zeit verbunden. Also werde ich einfach nein sagen. Es ist also alles gemacht, was ich brauche, ziemlich unkompliziert, und das nächste, was ich tun soll, ist CD in dieses Verzeichnis. Sie konnten sehen, dass es bereits ein Git-Repository erstellt hat, und wir sind im Master Branch. Nun, ohne weiteres, lassen Sie es uns abfeuern und sehen, wie es aussieht. Wir tun das mit einem ionischen Aufschlag, und Sie sollten sich dessen bewusst sein. Die meisten Dinge, die Ionics Eli erzwingen, es ist einfach, es an den Meeresverbündeten der Technologie zu delegieren , die wir in diesem Fall verwenden. Reagieren Sie, damit Sie dort sehen können. Es reagiert. Dash-Skripte starten, und es öffnet automatisch ein Browserfenster mit meinem Standardbrowser auf lokalen Host Port 8100 . Die Anwendung der gebauten Kraft sieht irgendwie wie eine E-Mail-Box aus. In der Tat, das ist es, was es sagt. Es ist ein Posteingang, der die Chrome-Entwickler-Tools öffnet. Ich kann Ihnen eine coole Sache über die Standard-Seitenmenüvorlage von Ionic zeigen. Es verwendet tatsächlich etwas, das eine Ionen-geteilte Ansicht genannt wird, die uns ein festes Seitenmenü auf breiteren Bildschirmen gibt. Aber wenn der Bildschirm schmaler wird, wie auf mobilen Geräten, bricht er zu einem Standard-Hamburger-Menü zusammen. Ziemlich cool, meinst du nicht? Also, das wird es dafür tun. Wir haben gerade eine App aus so ziemlich nichts erstellt. Wir haben den Ionic Seelye installiert und wir haben den brandneuen Ionic App Wizard verwendet, um diese App im nächsten Segment zu erstellen. Wir werden uns den Code dahinter ansehen und sehen, wie alles zusammengesetzt ist. 6. Sanfte Einführung in TSX: bevor ich den Code geöffnet habe. Ich möchte einen Moment über TSX sprechen. React-Komponenten werden in TSX geschrieben. Zumindest ist die Ionic React-Komponenten T s X wie JSX, aber mit Typoskript im Moment sagt Ihnen das wahrscheinlich nicht viel, wenn Sie es sehen. Ich hoffe, dass das intakt nicht zu lästig wird. Wenn Sie JSX oder TSX noch nie gesehen haben, kann es etwas dauern, sich an JSX zu gewöhnen Und durch Erweiterung ist TSX eine Erweiterung von JavaScript, mit der Sie HTML-Markup direkt in Ihren Code einfügen können, um Ihnen zu zeigen, wovon ich spreche. Betrachten Sie dieses Code-Snippet. Wir beginnen mit einer Reihe von Früchten, die für jeden, der mit JavaScript vertraut ist, ziemlich normal erscheinen sollten . Aber dann schau, was es tut und kehrt sofort zurück. HTML-Code. Also haben wir ein div, das einen H einen Absatz enthält, und jeder zwei und eine Norden-Liste im Inneren. Diese ärgerliche geordnete Liste der Dinge wird ein wenig interessanter. Wir referenzierten das Frucht-Array und rufen die Array-Map-Funktion auf. Die Map-Funktion nimmt eine Pfeilfunktion, die jedes Element akzeptiert, wie es über das Array iteriert . Hier gebe ich dieses Array-Element zu. Der Buchstabe F I empfehle normalerweise nicht, Variablen auf diese Weise zu benennen. Aber wenn ich eine einzelne Pfeilfunktion mit einer einzigen Codezeile wie hier habe, denke ich, dass es ziemlich offensichtlich ist, was los ist. So wird jedes Element des Frucht-Arrays einem Verbündeten mit der Frucht jedes Elements des Regens zugeordnet . Beachten Sie jedoch die geschweiften Klammern , die den Aufruf der Fruchtpunktkarte umgeben. Das ist ein Hinweis auf TSX, dass wir hier Code ausführen werden. Betrachten Sie es im Wesentlichen als Ersatzfunktion. An diesem Punkt, innerhalb des Brunnens, wird dieser Block durch die Ausführung dessen ersetzt, was sich darin befindet. Dasselbe passiert innerhalb des Verbündeten. Anstatt einen konstanten Wert anzuzeigen, werden wir den Wert von F bewerten und diesen momentan geschweiften Ausdruck durch den Wert ersetzen . An diesem Punkt verspreche ich, dass dies viel deutlicher wird, wenn wir gehen. Ich wollte nicht, dass Sie den Ionischen Reaktorcode zum ersten Mal sehen und nicht zuletzt diese kurze Erklärung hatten . Nun lassen Sie uns den V s Code starten und werfen einen Blick darauf, was wir in der rial App zu tun haben. Die ionische App wurde er generierte Kraft 7. Geführte Tour in der App: Jetzt möchte ich einige Zeit damit verbringen, den Code zu überprüfen, der für uns generiert wurde. Betrachten Sie dies eine Führung durch den Ionic React-Code, dass die Äpfel oder einfach gab uns zurück in meinem Terminal. Es gibt ein paar Befehle, die ich jetzt eingeben werde, wo du dich notifizieren möchtest . 1. 1 öffnet visuellen Studio-Code im aktuellen Verzeichnis, und ich mache das mit Codepunkt DOT das aktuelle Verzeichnis, und der nächste ist eine Option für Ionic serve. Das führt nicht dazu, dass der Browser automatisch geöffnet wird. Und das ist der Schalter Dash B. Während das im Raum eingerichtet wird, lassen Sie uns voran gehen und einen Teil des Codes betrachten, der für uns generiert wurde. Der erste Halt wird die Ionic Config sein. Jason-Akte. Hier drin ist nicht viel. Wir haben den Namen der Anwendung und leeres Objekt von Integrationen und Integrationen ist wie Cordova oder Kondensator, und Sie könnten die Art der Reaktion als nächstes sehen. Schauen wir uns den Index Punkt ts X-Datei an. Dies ist der programmatische Einstiegspunkt der Anwendung. Sie können sehen, dass wir importieren reagieren Dom, und was reagieren Dom ist eine High-Level-Bibliothek, die Methoden für das HTML-Dokumentobjektmodell zur Verfügung stellt . Und das wird von oben aufgerufen. Die meiste Ebene der Anwendung. Das einzige, was wir damit machen, ist das Aufrufen der Renderfunktion. Die Renderfunktion nimmt zwei Parameter an. Es dauert ein Objekt gerendert werden. In diesem Fall ist es die APP, die mit der APP-Komponente gekennzeichnet ist. Der zweite Parameter ist ein Element auf der Seite, dessen Ideen Route Also hier übergeben wir nur ein normales JavaScript get Element von I d Funktion. Also, wo ist das Wurzelelement zu finden, das hier im öffentlichen Index dot html oben , innerhalb des head-Tags ist. Da sind viele Meta-Tags drin, die das Ionic Team viel Zeit damit verbracht hat, richtig zu machen . Ich empfehle Ihnen nicht, sich jemals mit ihnen anzulegen. Also hier unten im Körper, hier ist das wichtige Stück. Hier ist die I D Route, nach der wir gesucht haben. Das ist das Einzige im Körper. Wenn Sie also einen Moment zurückdenken, werden wir diese Entwicklung erhalten und sie durch die APP-Komponente ersetzen. Jetzt fragen Sie wahrscheinlich, wo ist der AB Caponi? Die APP-Komponente ist in app dot tsx app dot ts X importiert viele Dinge. Wir überspringen alle Importe und scrollen einfach nach unten, wo die Komponente selbst definiert ist. Und hier beginnt die Anwendung wirklich. APP ist als konstante Pfeilfunktion vom Typ React dot fc definiert. Worum geht es also? FC ist die Abkürzung für Funktionskomponente. Grundsätzlich ist dies eine Funktion, die etwas HTML zurückgibt. Lassen Sie uns diese Datei in dieser Funktion durchlaufen, um zu sehen, was sie bedeutet. Das erste, was wir sehen, ist ein Aufruf der Use-Statusfunktion. Das ist ein Haken. Wenn Sie davon gehört haben, dass Reaktionshaken die ganze Wut sind, das, was sie sind. Sie Zustand ermöglicht es Ihnen, Zustandsüberraschung Überraschung zu den ansonsten zustandslosen Funktionskomponenten hinzuzufügen . Es nimmt den Standardstatus als Parameter. In diesem Fall übergeben wir eine leere Stärke. Es gibt ein Array, das zwei Elemente enthält. Das erste Element ist das Objekt, das unseren Zustand enthält. In diesem Fall handelt es sich um die aktuell ausgewählte Seite, die standardmäßig eine leere Stärke aufweist. Das zweite Element des Arrays ist eine Funktion, die wir innerhalb der Komponente Toe verwenden können. Ändern Sie diesen Zustand, wenn Sie Hooks verwenden, um Ihren Zustand zu verwalten, ist es ratsam. Ändern Sie niemals die Statusvariable direkt. Wenn Sie diesen Code durchschauen, sehen Sie keine Zuweisungen für die ausgewählte Seitenvariable. Betrachten Sie es nur lesbar, obwohl es technisch nicht ist. Also, was wird von dieser Funktion zurückgegeben? Und dafür möchte ich den Code oben auf dem Browser überlagern, damit wir sehen können, was mit jedem Stück gerendert wird . Nun, zuerst haben wir eine Ionen-App. Ion-App ist die Root-Ionen-Komponente, die alle Anwendungen verwenden müssen. diesem Inneren haben wir keinen Ion React Router. Dies ist Ionics Thin Wrapper um den Standard React Router. Die React-Router. Was können Sie mehrseitige Anwendungen mit Rich Page Übergängen in einer wirklich einzigen Seite Anwendung innerhalb des Auges auf React Router erstellen? Wir haben keinen Ionenspaltschmerz, glaube ich. Im letzten Videoclip habe ich auf eine geteilte Ansicht des Designs Bezug genommen. Technischer Name der Komponente ist ich besitze Split-Schmerz. Dies ist das Layout, das Ihnen das Sidebar-Menü gibt, das automatisch innerhalb des geteilten Schmerzes selbst zusammenbricht . Wir haben dieses Menü und Sie können sehen, das Menü hat ein Attribut namens Selected Page und wir setzen es auf den Wert unserer ausgewählten Seite. Status-Variable ist ein sofortiges gleichgeordnetes Element der Menükomponente. Wir haben eine Ionenrouter-Steckdose. Hier wird Ihr Seiteninhalt angezeigt. Das Menü ist auf der linken Seite ausgeschaltet, und die Ionenrouter-Steckdose enthält den Rest Ihrer Anwendung Ihres Inhalts. Und genau darin definieren wir einige Routen. Stellen Sie sich eine Route als Euro vor. Also gegeben einen Pfad, der mit Schrägstrich Seite beginnt, gefolgt von einer anderen identifizieren Luft und der Doppelpunkt bedeutet, dass wir nennen, die ihren Namen identifizieren , was auch immer wirklich da ist. So könnte es Posteingang Seite Schrägstrich Bücher sein. Trash, etcetera wurden auch an Route Orender Funktion übergeben und Orender Funktion bedeutet einfach, was wollen wir passieren, wenn diese Route übereinstimmt und versucht zu rendern? Das ist also auch eine schmale Funktion. Es dauert eine Reihe von Eigenschaften innerhalb dieser Funktion, die wir gesetzt ausgewählte Seite aufrufen. Denken Sie daran, wir die ausgewählte Seite nicht direkt festlegen möchten, indem Sie in die Variable schreiben, also rufen wir die Zustandsfunktion auf, die an uns zurückgegeben wurde. So setzen wir ausgewählte Seite auf den U. R L-Parameter , der durch Requisiten den zweiten Teil der Route übergeben wurde , der Name genannt wird. Und dann, was wir tun, ist, dass wir ein Seitenobjekt oder die Seitenkomponente zurückgeben, die alle Eigenschaften übergeben , die uns mit diesem Spread-Operator gegeben wurden. Was das bedeutet, ist, welche Eigenschaften an unsere Route übergeben wurden, wir werden diese Seitenkomponente mit den gleichen Eigenschaften und dann genau gleich rendern . Richtig, bedeutet einfach, dass wir diese Route nur dann übereinstimmen, wenn es wirklich Schrägstrich Seite ein anderes Wort . Das wird mehr Sinn machen, wenn wir anfangen, diese Dinge zu ändern. Schließlich haben wir eine Route namens Schrägstrich. Dies ist die Standardroute. Wenn nichts anderes eingegeben wurde, wurden einfach eine Umleitung zum Schrägstrich Seite Schrägstrich Posteingang zu rendern. Also, was genau ist eine Seite? Wie Sie vielleicht vermuten, ist es eine andere Komponente. Werfen wir einen Blick auf die Seite Punkt ts X-Datei. Es besteht aus einer Funktionskomponente, die eine Reihe von Ionic Marco zurückgibt. Der Hauptunterschied ist hier, dass die Funktionskomponente eine generische vom Typ Routenkomponente Requisiten ist, die selbst ein generisches ist. Diese lüften diese Winkelklammern. Wenn Sie mit diesem bestimmten Stil nicht vertraut sind, Dies ist, was der Router diese Routenparameter übergeben. In diesem Fall erwartet es, dass Routenrequisiten nur einen Namen enthalten, den sie in die Pfeilfunktion übergibt , wenn der Wert übereinstimmt. Ein wenig versteckt in diesem Dschungel von Ionic Components hinunter zu schauen, ist ein Erkundungscontainer . Ich klicke mit der rechten Maustaste darauf und wähle Gehe zur Definition, und ich wähle diesen einen Doppelklick aus. Ich hätte auch F 12 auf meiner Tastatur drücken können. Der Explore-Container ist eine weitere benutzerdefinierte Funktionskomponente, die auch einige Container-Requisiten akzeptiert. Dieser ist jedochviel einfacher und dass er jedoch nur einige einfache HTML mit nur einer einzigen Variablenerweiterung innerhalb dieser starken Technologie enthält . schließlich Lassen Sie unsschließlicheinen Blick auf das Menü in der Nähe der Spitze werfen. Das Menü definiert eine APP-Seitenschnittstelle, die verwendet wird, um einige gemeinsame Eigenschaften einer Seite zu halten wie seine U R L-Symbole berechtigen darunter, es ist ein Array von Seiten, so dass es ist ein Array von Seiten, Sie jetzt sehen, woher sie kommen. Als nächstes haben wir diese Liste von Etiketten, die wir im Menü sehen können, und knapp darunter ist der Markt. Das Menü selbst ist mit einem Auge auf Liste eine Komponente entwickelt, um Elemente in formatieren, Nun, Sie erraten es eine Liste. Die Ionennote stellt eine Kopfzeile dar. Dann kommen wir zu einem interessanten Mantel. Die Array-Map-Funktion wird auf dem APP-Seiten-Array aufgerufen, um es in eine Siris of Ionen-Menü-Toggle-Komponenten umzuwandeln , die verwendet werden, um ein Menü geöffnet oder geschlossen innerhalb des Auges auf Menü umzuschalten. Toggle ist kein Ionenelement, das eine andere Ionenkomponente ist, die verwendet wird, um andere Komponenten in diesem Fall zu gruppieren, und ich auf Symbol und ein Ionenlabel, die beide ziemlich selbsterklärend sein sollten. das Ionen-Element ist ein Router-Link-Attribute auf den Wert der aktuellen Seiten festgelegt. Du bist draußen. Dies weist Ionics Router an, zu dieser Seite zu wechseln, wenn Sie darauf klicken. Eine andere Sache, auf die ich auf das Ionen-Element hinweisen möchte, ist ein Attribut namens Klassenname, das auf den Wert eines Codes festgelegt ist, der ausgeführt wird. Also erinnere dich an ausgewählte Seite von App Punkt ts x. Nun, das ist, was wir damit machen. Was dieser Code sagt, ist, wenn ausgewählte Seiten gleich dem Seitentitel, dann werden wir Klassennamen auf das ausgewählte Wort setzen. Sonst setzen wir es auf eine leere Zeichenfolge. Und diese Klasse von dem, was für die Hervorhebung der Menüelemente unter dem Menü verantwortlich ist, ist eine andere Liste, die auf die gleiche Weise generiert wird, ist das Menü. Die Unterschiede. Es verwendet das Label-Array und enthält keine Router-Links. Nun, bevor wir komplett einpacken, möchte ich ein paar lustige Dinge machen, die im nächsten Video tun werden. 8. Ein weiterer Dinge: Nun, bevor wir diese hallo Ionic App verlassen, lassen Sie uns ein paar lustige Dinge machen. Wie denken Sie, dass Sie diese Seitenliste anpassen könnten? Wenn er sagte, modifizieren Sie die APP-Seiten um, geben Sie sich einen Klaps auf der Rückseite. Ich habe bemerkt, dass es keine gesendete Mail-Seite gibt, also lassen Sie uns eine wirklich schnell erstellen und sehen, was passiert. Lassen Sie es uns direkt zwischen Postausgang und Favoriten setzen. Also lassen Sie uns das Outbox-Objekt auswählen, Kopieren und fügen Sie eine neue Version direkt danach ein. Ändern Sie nun die zweite Inzidenz des Wortes Outbox Abstieg Elemente und ändern Sie den oder l zwei Schrägstrich Seite Schrägstrich gesendet. Lassen Sie uns die beiden Symbole in Ruhe. Microsoft Outlook verwendet dieses Papierflugzeugsymbol für gesendete Elemente. Stattdessen lassen Sie uns die Datei speichern. Im Moment, hier wird es Spaß. Sobald Sie diese Änderungen gespeichert haben, wird die Anwendung automatisch neu erstellt und der Browser wird neu geladen, um diese Änderungen widerzuspiegeln. Aber jetzt haben wir ein Problem. Wir haben zwei Seiten mit dem gleichen Symbol. Lassen Sie uns voran und ändern Sie das Symbol für die Out-Box zwei Alben Umriss für IOS und Alben Sharp für MD und für Ihre Verwendung von Visual Studio-Code, was Sie sehen, ist, dass es automatisch erkennt, dass diese IRS identifizieren und Angebote, sie zu importieren für Sie. Und das ist Teil der stark typisierten Codehinweise, die Sie von Ionic React erhalten, und wieder als wir die Seite gespeichert haben, ändert sich das Symbol entsprechend. Was denkst du, wird passieren, wenn du jetzt auf das neue gesendete Menü klickst? Wir haben keine neue Seite oder eine neue Route erstellt. Also kriegen wir eine 404? Nein. Die Seitenkomponente wird gerendert, wobei ihr Name auf den Name-Teil der Route festgelegt ist, die gesendet wird. Dies liegt daran, dass die Seitenkomponente selbst ein ziemlich generisches Objekt ist. Nicht jede Seite wird so sauber sein und ermöglicht es Ihnen, sie so wiederzuverwenden. Aber wir werden dieses Muster in späteren Kapiteln des Kurses verwenden. Wenn Sie sehen möchten, woher diese Symbole kamen, besuchen Sie Ich bin Symbole dot com für weitere Informationen über die Komponenten, Sie können auf den Link Komponenten direkt in der Mitte der hallo Ionic App selbst klicken, und das ist ein Wrap für diese Lektion und In diesem Kapitel sollten Sie eine vollständig installierte ionische Entwicklungsumgebung wissen, wie Sie eine neue Ionic React-App erstellen und sogar einige kleinere benutzerdefinierte Is ations tun. Also geh hinaus, freue dich über deine neu entdeckte Macht. Spielen Sie ein bisschen zwischen jetzt und der nächsten Lektion und hoffen, Sie bald dort zu sehen. 9. @10Dance – Die Demo App: Hi, hier ist Mike Callahan. In diesem Kapitel werden wir ein U I. mit HTML und dem Ionic Framework zu bauen . Ich werde damit beginnen, Ihnen eine Demo der fertigen Anwendung zu zeigen und sie dann nach und nach von Grund auf in den nächsten Lektionen zu erstellen , die die Anwendung durchgehend erstellen wird. Der Kurs wird als 10 Tanz bezeichnet. Es ist eine Anwesenheitsanwendung, die ursprünglich entworfen wurde, um Sonntagsschullehrern zu helfen, den Überblick über die Schüler in ihren Klassen zu behalten . Zunächst besteht das Apple aus drei Seiten Homepage, eine Klasse Dienstplan Seite und ein Schüler Detail. Seite beiseite, Menü lässt die Benutzer leicht zwischen der Startseite in der Klasse Dienstplanseiten navigieren. Wir werden überprüfen, wie das Menü erstellt wird und wie die Navigation so konfiguriert ist, dass sie von Seite zu Seite verschoben werden. Natürlich sind die Homepages, auf denen die Anwendung gestartet wird. Es gibt nicht viel hier, außer eine Ionenkarten-Komponente. Wir gehen über die Grundlagen dieser Komponente, um ein Bild und einige Textinformationen über die Anwendung anzuzeigen . Die Dienstplanseite zeigt die Teilnehmer, die für die Klasse registriert sind, und enthält die Mehrheit der ionischen Gegner, die verwendet werden. Die Schüler werden zusammen mit einer Ionen-Liste angezeigt, mit jedem Listenelement, bestehend aus Ionen-Elemente i n Tasten, Ich bin Symbole und mehr. Wir werden die meiste Zeit in dem Kapitel über diese Seite verbringen, während wir die Funktionalität mit Aktionsblättern, Warnungen und Toastbenachrichtigungen ausarbeiten Funktionalität mit Aktionsblättern, . Schließlich ist die Schüler-Detailseite, wo wir verschiedene Details über einen einzelnen Schüler sehen und bearbeiten können , wird schließlich diese Seite verwenden, um ionische Formen zu diskutieren. In diesem Kapitel, Alles, was wir tun werden, ist Layout der Komponenten und Kauf einige Daten, um sie. Bei jedem Schritt des Weges werde ich die ausgewählten Komponenten erklären und dann den Code bereitstellen, der sie implementiert . Ich hoffe, du bist so eifrig wie ich, also lasst uns anfangen. 10. Die neue App erstellen: Okay, jetzt, wo du gesehen hast, was wir bauen werden, lasst uns direkt eintauchen und das Projekt in Betrieb nehmen, bevor ich ein neues Ionic Projekt beginne . Ich stelle gerne sicher, dass ich auf der neuesten Dynamik bin, Eli. Also lasst uns das zuerst machen. im Terminal Ihrer Wahl Geben Sieim Terminal Ihrer Wahlden Befehl und PM Install Dash G for Global at ionic Slash eli Spätestens ein. Wenn Sie bereits auf der neuesten Version sind, wird nichts installiert. Führen Sie dann den Ionic Start Command aus, wenn Sie dazu aufgefordert werden Wählen Sie das Framework, das als nächstes verwendet werden soll. Geben Sie den Namen des Projekts an. Ich nenne es „10 Tanz“. Es ist ein Wortspiel, das ich kenne, und es ist schrecklich. Wählen Sie die leere Vorlage für diese wird ein Seitenmenü implementieren, aber ich möchte lieber, dass wir es von Grund auf neu erstellen. Außerdem wird auf diese Weise viel weniger Boilerplate-Code gelöscht. Ich werde nicht mit diesem Flow arbeiten, also zählen alle Inter-Knoten, die es mit Maionica verbinden. Sobald das Projekt erstellt wurde, können wir es in der I D öffnen, um einen Blick zu werfen. Es gibt nicht viel hier, weil wir die leere Vorlage verwendet haben. Es gibt wirklich nur eine Homepage, die in Ordnung ist, weil wir sie ziemlich schnell aufbauen werden. Wir können auch zurück in das Terminal gehen und einen schnellen Ionic serve Befehl starten und einen Blick darauf werfen, wie es rendert. Hier habe ich Chrome zeigt mir, wie es aussehen könnte, auf einem iPhone wieder zu laufen. Es gibt nicht viel Inhalt zu sprechen, also gehen wir voran und kümmern uns sofort darum. 11. Die Homepage ändern: Das erste, was ich tun möchte, ist die Homepage, da es die Apsis Landing Page ist. Es wird nicht viel Inhalt geben, nur einige Texte und ein Bild in einer Ionenkarte. Und ich auf Karte ist eine Komponente, die entwickelt wurde, um grundlegende Informationen standardmäßig zu wickeln. Eine Karte hat einen grauen Rand, abgerundete Kanten und einen subtilen Schlagschatten. Wie bei allen ionischen Komponenten ändert sich der visuelle Stil leicht, wenn er auf einem Android im Vergleich zu einem iOS-Gerät gerendert wird. Karten können so einfach oder so komplex sein, wie Sie es wollen. Die Karte, die ich mir für die Homepage vorstelle, sieht gut ähnlich wie diese aus, bestehend aus einem Bild gefolgt von einem Kartenkopf, der sowohl Untertitel als auch einen Titel enthält. Und schließlich ein kurzer Intra-Absatz. Lassen Sie uns diese Seite jetzt neben dieser Lektion erstellen, ist ein Bild, das ich auf der Homepage verwenden werde . Laden Sie das Bild jetzt herunter und legen Sie es in einen neuen Ordner ab. Bilder für öffentliche Assets. Nennen Sie es Klassenzimmer dot J pic open home dot tsx und löschen Sie alles im Auge auf Content-tag. Ändern Sie den Wert innerhalb des Titel-Tags des Ionentyps von der leeren Zehe Als nächstes löschen Sie den Explore-Container-Komponenten-Import oben in der Datei, während wir dabei sind. Lassen Sie uns die Komponente selbst löschen, die im Ordner der Quellkomponenten gefunden werden kann. Löschen Sie sowohl TSX- als auch CSS-Dateien im nun leeren Ioneninhalt an einer Ionenkartenkomponente. Wenn Sie V s Code verwenden, sollte es anbieten, die Komponenten automatisch für Sie zu importieren. Wenn nicht, müssen Sie sicherstellen, dass Sie dies selbst tun, indem Sie jede Komponente importieren, die Sie verwenden, aus dem ionischen Schrägstrich reagieren innerhalb der Ionenkarte mit einem Standard-HTML-Bild-Tag mit der Quelle die Sie gerade heruntergeladen haben, die Assets Bilder sein sollten, Classroom Dodge, APEC. Um ein guter Bürger zu sein, sollten Sie auch einen Altarattribute zur Verfügung stellen. Ich benutze das Wort Klassenzimmer. Anscheinend hat es keine Ionenkarte importiert, also werde ich das tun. Jetzt lasst uns hier anhalten und sehen, wie es aussieht. Dann nutzen wir das Live-Neuladen, wenn wir die Seite fertig stellen. Ich möchte Ihnen eine wirklich coole Funktion des S-Codes zeigen, vorausgesetzt, Sie verwenden es. Wenn nicht, geben Sie die Befehle für das, was Sie terminal bevorzugen. V s Code verfügt über ein integriertes Terminal, auf das Sie zugreifen können, indem Sie die Kontrolle Back tick drücken. Das sollte der Schlüssel neben dem einen sein, ich werde dieses Terminal für die meiste Zeit offen halten, damit wir nicht so viel im Terminal herumspringen müssen. Geben Sie den Befehl NPM ein. Starten Sie. Also, jetzt haben wir Ionics dienen verwendet, aber ich möchte, dass Sie anfangen, sich an die Verwendung von NPM zu gewöhnen, ist Ihr Skript-Läufer. Es spielt momentan keine Rolle, aber wir werden uns schließlich in PM verlassen, um komplexere Aufgaben zu erledigen. Viertens, Einfachheit halber, werde ich auch versuchen, den Browser offen zu halten und alles im Vollbildmodus zusammen zu haben , zurück in den Code und eine Ionenkarten-Header-Komponente von selbst. Dies wird nicht viel tun so sofort innerhalb, dass an einem Ionenkartenuntertitel mit dem Text Classroom Anwesenheitsmanager und unmittelbar danach und ich auf Kartentitel mit dem Text bei 10 Tanz. Du musst es nicht so buchstabieren, wie ich es getan habe. Wenn Sie die Datei nicht speichern möchten und sicherstellen, dass sie gerendert wird, wenn sie nicht sichergestellt hat, dass der Ionenkarten-Header den Untertitel mit dem Titel Elemente umschließt und nach unclos html tax suchen. In meinem Fall lasse ich den NPM sterben, also muss ich ihn erneut starten, nachdem die Ionenkarten-Header Tag an einem Ionenkarteninhalt-Tag schließen . Und in diesem, ein normales HTML Absatz-Tag. Sie können alles einfügen, was Sie wollen, speichern Sie die Datei und überprüfen Sie die Ergebnisse. Es sollte meistens dem ähneln, was ich hier habe. Machen wir noch eine Sache, bevor wir die Homepage verlassen. Lassen Sie uns einen Link auf die Dienstplanseite setzen, die kurz nach dem Absatz-Tag bei einem Ionen-Router-Link-Angriff mit zwei Attributen und H Ref-Attributen auf Schrägstrich Roster und eine Rounder Richtungsattributeerstellt wird Attributen und H Ref-Attributen auf Schrägstrich Roster und eine Rounder Richtungsattribute die nach vorne innerhalb von diesem Tag. Stellen Sie sicher, dass Sie etwas Text einfügen. Andernfalls wird kein Link angezeigt. Dadurch wird ein Hyperlink innerhalb der Karte erstellt, der uns, wenn darauf geklickt wird, wenn darauf geklickt wird,zur Dienstplanseite führt. Und es ist Animation wird eine Vorwärtsanimation sein, die von der Plattform selbst definiert wird, entweder Android oder IOS. die Seite speichern, können Sie den Link gerendert sehen. jedoch darauf klicken, Wenn Siejedoch darauf klicken,gelangen Sie zu einer leeren Seite. Wir haben die Dienstplanseite noch nicht erstellt, also machen wir das als Nächstes 12. Hinzufügen der Roster: Inzwischen sollten Sie bequem Ionic Tags zu einer Seite hinzufügen, aber wir haben keine neue Seite erstellt. Wir werden das jetzt angehen, aber erstellen, was wohl die komplizierteste Seite in der Anwendung zurück im Code-Editor oder am Terminal sein wird . Deine Wahl. Erstellen Sie eine neue Datei im Ordner „Seiten“ namens „roster dot tsx“. Innerhalb dieser Datei wird mit der Erstellung der einfachsten Seite beginnen, die wir möglicherweise in jeder Seite vorstellen können , die wir erstellen. Zuerst müssen wir den React-Namensraum aus der React-Bibliothek importieren. Als nächstes benötigen wir eine neue funktionale Komponente. Reagieren Sie FC für kurz genannt Roster, um die Seite darzustellen. Eine funktionale Komponente muss eine Markierung zurückgeben, also für den Moment, wir werden nur einen Absatz zurückgeben. dann Umdannreagieren zu können, um die Seite rendern zu können, muss sie exportiert werden, was wir mit der Exportstandardliste tun. Jetzt kann jedes andere Modul die Dienstplankomponente importieren. Wenn Sie denken, dass dies die Dienstplanseite zu rendern ermöglicht, wenn Sie auf den Link auf der Homepage klicken , müssen wir es nicht in die App importieren und eine Route öffnen apt out TSX. Das haben wir in unserer Führung im letzten Kapitel gesehen. Das Routing in dieser App ist viel einfacher als wir zuvor gesehen haben. Und für mich ist einfacher besser. Fügen wir eine neue Route hinzu, indem wir nach der Schrägstrich-Startrunde ein weiteres Routen-Tag hinzufügen. Der Pfad sollte Schrägstrich sein. Die Komponente sollte Dienstplan sein. Stellen Sie sicher, dass die Dienstplankomponente am oberen Rand des Dateieinsatzes importiert wird. Exakt zu wahr. Jetzt, Jedes Mal, wenn wir die Dienstplanroute anfordern, wird die Dienstplanseite gerendert. Speichern Sie die Datei und versuchen Sie es. Der Link funktioniert jetzt. Es ist nicht viel von einer Seite, aber wir werden das in ein wenig beheben. 13. Benutzerdefinierter Student: Bevor wir die Dienstplanseite ausfüllen, müssen wir einige Schüler dazu bringen, später anzuzeigen, werden die Liste in einen Tag binden wollen , um irgendeiner Art zu speichern, aber wir müssen das nicht tun, nur um einige Daten auf der Seite angezeigt zu bekommen. Dafür werde ich einen benutzerdefinierten Reaktionshook verwenden, wie wir in der Führung gesehen haben. React Take ist eine einfache JavaScript-Funktion, die zwei Werte innerhalb eines Arrays anstatt in die Arbeit von Hook zu drängen. Wir können einfach ein normales mit einem Array von Daten umschließen und es unserer Dienstplanseite zugänglich machen. Es wird mehr Sinn machen, ist, dass wir es erstellen, eine neue Datei in der Quelle namens Student dash hook dot ts erstellen. Innerhalb dieser Datei erstellt jeder Newme, eine Schnittstellenkonstante und eine Funktion. Diese e newme ist eine Bequemlichkeit, die verwendet wird, um zu markieren, dass ein Schüler abwesend oder anwesend ist. Als Nächstes erstellen wir ein Studentenobjekt als Schnittstelle. Denken Sie daran, dass Schnittstellen in JavaScript nicht vorhanden sind und beim Erstellen vollständig verschwinden. Ihr einziger Zweck besteht darin, dass wir die Codevervollständigung der Parametertypüberprüfung und einen Sinn innerhalb des Codes ermöglichen . Geben Sie diese Fragezeichen in den meisten Feldern ein, um anzugeben, dass diese Absätze optional sind. Um also ein gültiges Studentenobjekt zu erstellen, muss ich mindestens ein I. D. einen Vornamen und einen Nachnamen angeben. An dieser Stelle weiß ich nicht alles, was ein Studentenobjekt enthalten sollte, aber diese Felder sollten für unsere Zwecke ausreichen. Lassen Sie uns nun ein Array von Schülern erstellen, die wir anstelle einer Datenbank verwenden können. Moment nenne ich es Mark Students. Jetzt für den benutzerdefinierten Haken. Die Funktion, die ich exportiere, wird Use Students genannt. Nach Konvention beginnen alle Hooks mit dem Wort use innerhalb der Funktion. Ich rufe einfach reagiert Sie Statusfunktion an, übergibt das Mock Studenten Array als Standardwert und gibt indirekt zurück, was Sie Zustand uns zur Verfügung stellt. Es ist täuschend einfach, aber das ist nur, weil es nicht viel macht. Jetzt gehen wir zurück in die Dienstplanseite und nutzen sie 14. Student: zurück auf der Dienstplanseite. Wir müssen einen Verweis auf den Haken bekommen. Wir haben gerade nur innerhalb ihrer Dienstplanfunktion in einer Zeile erstellt, um es zu nennen Denken Sie daran Studenten ist im Wesentlichen ein Durchgang zu reagieren. Verwenden Sie die Statusfunktion, aber es umschließt und verbirgt dieses Mock-Array. Unsere Dienstplanseite kümmert sich nicht, woher diese Schüler kommen, also werden wir es nicht sagen. Jetzt, da wir ein paar Schüler haben, listen wir sie auf dem Bildschirm auf. Entfernen Sie dieses Absatz-Tag und mit einem Auge auf Seiten-Tag. Denken Sie daran, dass alle Ionic React-Seiten ein Auge auf die Seite Tag als Stammkomponente benötigen. Wie immer wir diese nächsten Komponentententags auf der Seite eingeben, müssen Sie sicherstellen, dass sie aus Ionic React importiert werden. Als nächstes erstellen wir den Seitenkopf in bestimmten Ionen-Header-Tag. War ein Ionen-Werkzeugkasten-Tag innerhalb dieses in einem Ionentitel-Tag. Innerhalb dieses setzen Sie den Ionentitel-Text auf Dienstplan. Ich hoffe, dass Sie feststellen, dass der Ion-Header vertraut ist, wie wir ihn auf der Homepage und auch während der Führung unmittelbar nach dem Ionen-Header gesehen haben . Wir brauchen einen Ionengehalt innerhalb des Eisengehalts. Lassen Sie uns eine neue Komponente einführen. Die Ionenliste und I Am List ist eine weitere Containerkomponente, die entwickelt wurde, um mehrere Arten von Elementen visuell konsistent zu umschließen . Ich auf Listen enthalten Dinge, die Auge auf Elemente genannt werden, die wiederum Rabbi auf Etiketten hoch auf Schaltflächen, Ionensymbole, Formulareingabefelder und so weiter. Wir werden all diese und mawr während dieses Kurses verwenden. Ich auf Listen kann auch verwendet werden, um Elemente gleiten zu implementieren, die Sie wahrscheinlich vorher gesehen haben. Dies sind Optionen, die nur angezeigt werden, wenn Sie auf einem Element nach links oder rechts streichen und eine weniger häufig verwendete oder potenziell gefährliche Option aufzeigen , z. B. das Löschen im Code. Unmittelbar innerhalb der Ionenliste, schwächen iteriert über das Schüler-Array mit der Array-Map-Funktion. Wir müssen eine schmale Funktion zur Karte zur Verfügung stellen, die beschreibt, was wir mit jedem Schüler im Array tun wollen . Denken Sie also so dran. Wir zeigen eine Liste der unbekannten Länge, aber jedes Element des Arrays wird mit der gleichen Vorlage innerhalb der Karten angezeigt werden. Aero-Funktion gibt einige Markierung zurück. Wir beginnen mit dem Ionen-Element Schiebekomponente Ionen-Element gleiten wird uns mit einem neuen Element, Streichen oder Dia-Option. Innerhalb davon wird ein Ionen-Element-Tag sein. Diese Komponente wird das gesamte Listenelement kapseln, die wir mit einem Auge auf Elementkomponente innerhalb des Ionenelements an einem Ionen-Symbol und einem Ionen-Etikett als Geschwister implementieren , sagte das Icon-Slot. Attribut zu starten und das Symbolattribut zu Person umreißen und wieder, vergessen Sie nicht, Ihre Symbole zu importieren, sonst funktionieren sie nicht innerhalb der Ionenbeschriftung. Binden Sie einen Text an die Schüler zuletzt in Vornamen getrennt durch ein Komma neben ihnen. Lassen Sie uns zwei weitere Ionen-I-Kontakte erstellen, die wir basierend auf dem Status des Schülers „abwesend“ oder „Gegenwart“ bedingt rendern werden. Die erste ist für den Präsidenten, und wir setzen sie auf das I-Symbol. Die zweite soll angezeigt werden, wenn der Schüler abwesend ist. Also für diesen, lassen Sie uns das Auge aus Umriss verwenden, das ein Umriss eines Auges mit einer Linie durch sie ist. Die Art, wie wir die Symbole bedingt rendern, besteht darin, das gesamte Ion-Symbol Tag und ein Java-Skript zu umschließen . Logischer Ausdruck. Vergleichen Sie den Status der Schüler mit dem Wert der Gegenwart oder Abwesend, gefolgt von der logischen und Operator selbst, gefolgt von dem Ionensymbol. Die Kurzschlussregeln von JavaScript verhindern, dass die zweite Hälfte des Ausdrucks ausgewertet wird, wenn die erste Hälfte zu falscher beachten, dass es durchaus möglich ist der Studentenstatus weder Wert ist, weil das Statusfeld optional. In diesem Fall, weder ich komme, wird gerendert werden, was wir wollen. Speichern Sie die Datei jetzt und sehen Sie, wie sie aussieht. Wenn alles gut gelaufen ist, werden alle unsere Schüler angezeigt wird erwartet. Lassen Sie uns diese Lektion abschließen, indem Sie das gleitende Element unmittelbar vor dem Ionen-Element schieben schließenden Tag beenden. Lassen Sie uns ein Ionen-Element-Optionen-Tag mit den Seitenattributen auf Ende hinzufügen. Dies bedeutet, dass wir möchten, dass die Option am Ende des Elements angezeigt wird, was bedeutet, wenn wir es zum Anfang des Artikels schieben, wenig innerhalb dieses Tags bei einem einzelnen Ionen-Element Option Tech erscheinen. Stellen Sie sicher, dass Sie sich auf den Singular Plural hier ausdenken. Das Plural-Tag ist das äußere technologische Set, dieses eine Farbe zur Gefahr, die standardmäßig eine beängstigend aussehende orange rote Farbe ist. Wir werden später mit dem Click-Handler beschäftigen, so dass für jetzt einfach gesagt, die Tags Wert auf das Wort löschen, speichern Sie die Datei und aktualisieren Sie die Seite. An diesem Punkt die einzige Interaktivität ein Schieberegler selbst. Klicken Sie also auf ein Element und ziehen Sie es in Richtung Anfang des Elements. Sie sollten den Lösch-Button sehen. Sie können darauf klicken. Es verhält sich visuell, wie Sie es erwarten würden, aber es wird noch nichts tun. In der nächsten Lektion werden wir einige neue Befehle an diese Seite verdrahten, damit wir unsere Schülerliste verwalten können. 15. Funktionen in der Teilnehmer:in: Wenn Sie ein Lehrer wären und dies eine echte Klasse von Schülern wäre, gibt es eine Reihe von Dingen, die Sie mit Ihrer App tun möchten. Einige dieser Dinge sind Zeichen abwesend oder vorhanden. Navigieren Sie zu einer Detailseite, um Informationen anzuzeigen oder zu bearbeiten, die nicht in der Liste enthalten sind. Navigieren Sie zu einer Detailseite, um Informationen anzuzeigen oder zu bearbeiten, die in der Liste nicht sichtbar sind. Entfernen Sie einen Schüler mit den entsprechenden Warnungen aus der Klasse. Natürlich in dieser Lektion wir in dieser Lektiondas U Y der Dienstplanseite verbessern, um all diese Dinge zu erledigen. Das erste, was ich tun möchte, ist ein Menü zu jedem Schüler im Auge auf Liste hinzufügen. Wir können entweder das Menü zuerst erstellen oder die Schaltfläche, um das Menü zu starten. Sie LassenSieuns zuerst das Menü erstellen. Dafür werden wir ein Ionen-Aktionsblatt verwenden. In Action Sheet ist ein Menü, das eine Art wie ein Dialog anzeigt. Es enthält oft mindestens zwei, aber normalerweise mawr Aktionsschaltflächen, die in irgendeiner Weise kontextuell verwandt sind . In unserem Fall ist der Kontext, dass der derzeit ausgewählte Schüler und ich auf Aktionsblatt ist Ionics spezifische Implementierung Rendering Untätigkeit Blatt, das automatisch zu Hause auf einem iPhone oder einem Android schaut . Schaltflächen und Untätigkeitsblatt können eine Rolle enthalten, die entweder destruktiv oder abgebrochen sein kann. Destruktive wird verwendet, um anzuzeigen, dass etwas Permanentes passieren wird und oft für Löschvorgang auf IOS-Geräten verwendet wird. Knöpfe mit der zerstörerischen Rolle anders gerendert als der Rest, normalerweise in rot. Eine Schaltfläche, deren Rolle „Abbrechen“ ist, wird immer zuletzt am unteren Rand des Blattes gerendert. Diese Schaltfläche sollte keinen anderen Zweck haben, als das Blatt zu schließen. Ohne Maßnahmen. Die Schaltflächen und Untätigkeit kann sie Text und Symbole haben, aber die Art und Weise, wie Sie sie definieren, ist anders als eine normale I unbutton Komponente, unser Aktionsblatt enthält Schaltflächen, um zu markieren, dass ein Schüler vorhanden ist oder abwesend ist, löschen Sie einen Schüler oder stornieren Sie die Aktion und nichts tun. Um das zu tun, müssen wir ein wenig einrichten First in roster dot tsx. Wir brauchen einen neuen Haken und ein Objekt, um eine leere Schülerin zu repräsentieren, um zu steuern, wie Aktion sie oben in der funktionalen Komponente erscheinen wird. Erstellen Sie ein neues Studentenobjekt namens Empty Student, sagte aber, es ist drei Pflichtfelder, um Zeichenfolge zu leeren. Als nächstes rufen Sie die Reaktion an. Verwenden Sie die Statusfunktion. Übergeben des leeren Studentenobjekts als Standardname. Die Return Values Selected Student und setzt gewählten Student Dies ist ein Haken, mit dem wir verfolgen, welche Schüler ausgewählt ist und uns helfen, das Aktionsblatt benötigt hat, anzuzeigen und zu verstecken . Als Nächstes. Erstellen Sie zwei Funktionen, um das Klick-Ereignis zu behandeln Geben Sie die verlassen Ein Student aus einer Liste. Die erste 1 ist Delete Student und die zweite 1 Lassen Sie uns Click Student Delete Student wird den ausgewählten Schüler aus dem aktuellen Array von Studenten filtern und dann übergeben, dass Studenten gesetzt . Die Funktion. Klicken Sie auf Student wird Sets gewählt Student übergeben diesen ausgewählten Schüler aufrufen. Jetzt ist es endlich Zeit für uns, das Aktionsblatt Markup hinzuzufügen. Platzieren Sie ein Ionen-Aktionsblatt-Tag direkt unter dem Auge auf Listen schließenden Tag. Dies wird es zu einem Geschwister der Ionenliste machen. Dieses Tag wird viele Schauspielerin haben, aber keine Kinderkomponenten. Das erste Attribut zu setzen ist die Open nach sagte sein Wert auf den Bindungsausdruck von bang bang bang bang ausgewählt student dot i d. Die doppelten Ausrufezeichen zwingt den String-Wert in einen echten Anlagebarren. Wenn das I D einen Wert hat, wird es wahr sein. Wenn nicht, wird es falsch sein, da der Standardschüler im Zustandshook das leere Schülerobjekt ist . Wir können zwei Dinge sicher sein, dass sein Wert niemals nein sein wird, und das I D wird entweder ein echter Wert oder eine leere Zeichenfolge sein. Als Nächstes erstellen Sie eine Kopfzeile nach, deren Wert auf die King Canton ation der ausgewählten Schüler . Vor- und Nachnamen. Vergiss nicht die geschweiften Klammern Mann. Wir möchten die Aktion angeben, die ausgeführt werden soll, wenn das Aktionsblatt abgewiesen wird. Dafür verwenden wir die auf hat nach Ihnen entlassen. Dies ist ein Ereignis auf dem Aktionsblatt selbst. Setzen Sie dieses Attribut auf eine schmale Funktion, die einfach die eingestellte ausgewählte Schülerfunktion aufruft , die leere Schüler übergeben. Dies führt dazu, dass sich das Aktionsblatt selbst verbirgt, da der Wert von offen ist falsch wird . Schließlich müssen wir das Schaltflächen-Array erstellen. Dies ist ein Array von Schaltflächenobjekten. Jede Schaltfläche benötigen wir ein Textfeld in einem Symbolfeld, eine Handler-Funktion, die aufgerufen wird, wenn der Benutzer darauf klickt, und optional einen Rollenwert für dieses Aktionsblatt. Ich möchte vier Buttons löschen mit einer Rolle zerstörerisch das Papierkorb-Symbol. Und wenn Sie möchten, ah, Handler-Funktion, die Delete Student aufruft, werde ich mich jetzt nicht stören, weil ich es anders verdrahten werde. In der nächsten Lektion. Mark Present wird das I-Symbol und eine Handler-Funktion haben, die den Status der ausgewählten Schüler auf präsentieren setzt. Mark, abwesend mit dem Auge aus Umrisssymbol und seiner Handler-Funktion, setzt den Status der ausgewählten Schüler auf abwesend und schließlich eine Abbrechen Schaltfläche mit dem Kleidungssymbol und der Rolle von Abbrechen. Ich sagte, wir brauchen vier Handler, aber dieser braucht wirklich keinen. Und das ist die Gesamtheit der Aktion. Lassen Sie uns nun eine Schaltfläche erstellen, um die Aktion und ein Ionen-Schaltflächen-Tag unmittelbar nach den beiden vorhandenen Symbol und direkt vor dem Ionen-Element Schließung Steuer zu starten , geben Sie die Ionen-Schaltflächen Tag einen Steckplatz nach und sagte sein Ende, was bedeutet, dass es am Ende des Elements angezeigt. Als nächstes fügen Sie Ion-Button Tags als Kinder der Tasten Tag wieder beobachten diese Singular und Plural innerhalb jeder Taste in einem Auge auf meine Ruhe mit dem Schlitz, Attribute sagte Toe Icon auf Lee, Geben Sie das Symbol der zuerst als horizontale Ellipse umrissen und die 2. 1 auf Chevron Vorwärtskontur bei einem Klick-Handler auf die Schaltfläche mit der Ellipse setzen. Wenn Sie darauf klicken, möchten wir die Click-Studenten-Funktion aufrufen den aktuellen Schüler aus dem Array übergeben. Moment lassen wir den Knopf mit dem Chevron in Ruhe. Das werden wir später beenden. Speichern Sie die Datei und schauen Sie sich die Ergebnisse an. Klicken Sie auf die Schaltflächen und sehen Sie, dass sie aussehen und sich verhalten, wie wir erwarten würden, dass vorwärts Chevron nichts tun wird. Wenn Sie verdrahtet haben, löschen Sie den Schüler sollte sofort gelöscht werden. Ich habe es nicht getan, damit es nichts tun wird. Wir speichern den Rest der Funktionalität für Ah, zukünftige Lektion. Für jetzt, wenn Sie wollen, fühlen Sie sich frei, um 16. Benutzerbestätigung und Benachrichtigung: die Art und Weise, wie der Code gerade geschrieben wird. Löschen eines Schülers aus dem Dienstplan kann versehentlich erfolgen. Wenn der Benutzer auf die falsche Schaltfläche klickt oder tippt, wird keine Warnung oder Bestätigung angefordert. Wir müssen den Benutzer bitten, den Löschvorgang zu bestätigen, bevor es geschieht. Ebenso gibt es keinen Hinweis darauf, die Aktion stattgefunden hat, nachdem ein Schüler ihn verlassen dassdie Aktion stattgefunden hat, nachdem ein Schüler ihn verlassenhat. Abgesehen von dem Namen, der aus der Liste verschwindet, wird diese beiden Mängel bald beheben Es hat es nicht für ein Nickerchen gedacht, eine destruktive Aktion zu ergreifen, ohne zumindest den Benutzer zu warnen . . Es ist besser, den Benutzer um Bestätigung zu bitten, und das ist, was wir hier tun werden. In der vorherigen Lektion ruft der Handler für die Schaltfläche Löschen einfach die Funktion Student löschen auf. Es wäre besser, zuerst eine Bestätigung zu bekommen. Wir können das mit einem Auge auf Alarm tun, und ich auf Alarm ist eine motile Sie I-Komponente, die eine einfache Warnung an den Benutzer bietet, dass etwas Wichtiges passieren wird, und optional bietet ein Mittel, um es abzubrechen. Hier ist, was ich im Sinn habe, um die Bestätigung zu implementieren. Wie bei allen Ionic Komponenten, rendert es mit dem entsprechenden Look and Feel auf Android und iPhone oben auf der Kistenseite , erstellen Sie einen neuen Haken, um die Sichtbarkeit der Warnung innerhalb des Aktionsblatts zu steuern. Wenn Sie angerufen haben, hat der Lead Student diesen Anruf durch einen Aufruf an die Hooks gesetzt zeigen Alert-Funktion löschen ersetzt . true übergeben, wenn Sie es wie ich übersprungen haben, fügen Sie einfach den Handler hinzu, den Sie aufrufen möchten. Set zeigte Elite-Warnung, die true übergibt. So oder so, die Definition von Löschschaltflächen sollte jetzt so aussehen. nun Wenn der Benutzernunden Lösch-Button auswählt, anstatt dass der Schüler sofort gelöscht wird, wird die Warnung „Auge auf“ angezeigt. Wenn Sie sich erinnern, gibt es eine weitere Schaltfläche zum Löschen auf der Seite mit einer innerhalb der Ionen-Elementoption, die Sie platzieren möchten . Derselbe Aufruf von set zeigte hier eine Elite-Warnung, da es auf Klick-Handler ist, um die Warnung selbst unmittelbar nach der Ionen-Aktion im Auge zu implementieren , sie ihr schließendes Tag, um die Warnung anzuzeigen, die sie benötigen, und ist offene Attribute, die zum -Wert der Show. Alert-Variable löschen. Dafür war der Haken als Nächstes. An einem auf hat Attribute zurückgewiesen, die Zehe gesetzt sind. Eine schmale Funktion zum Aufrufen des Satzes zeigte diesmal eine Lead-Warnung, die false übergibt Dies führt dazu, dass die Warnung verschwindet. Es gibt drei Attribute, die den Text im Inneren steuern und ich eine Warnung. Die Header-Attribute als String. Sie wird oben in der Warnung angezeigt. Sie so etwas wie löschen Sie diesen Schüler. Das Nachrichtenattribut ist der Hauptteil der Warnung. Verwenden Sie eine Zeichenfolge wie diesen Vorgang und kann nicht rückgängig gemacht werden. Das Sub-Header-Attribut erscheint nur innerhalb des Alert-Bodys. Setzen Sie dieses Attribut auf eine Verunreinigung des Vor- und Nachnamens der Schüler, damit der Benutzer genau weiß, welcher Schüler gerade gelöscht werden soll. Schließlich benötigt die Warnung eine Reihe von Schaltflächen. Sie definieren diese Schaltflächen genau so, wie Sie es für das Aktionsblatt getan haben. Die erste Schaltfläche ist die Schaltfläche „Löschen“. Es benötigt einen Handler, der einen Schüler löscht, also stellen Sie eine schmale Funktion bereit, die einfach die Funktion „Student löschen“ aufruft. Von vorher können wir dies tun, denn jetzt haben wir bestätigt, dass der Benutzer das tun möchte. Die zweite Schaltfläche sollte eine Abbrechenschaltfläche mit der Rolle Abbrechen sein, und es braucht keinen Handler. Und jetzt vergessen Sie nicht, Ihr Auge auf Alert-Tag zu schließen, sonst haben Sie einige Kompilierungsprobleme. Speichern und überprüfen Sie Ihre Arbeit. Wenn alles gut gelaufen ist, habe ich meine Maus verloren. Wenn alles gut gelaufen ist, sollte der Versuch, einen Schüler zu löschen, dies nicht mehr automatisch tun. Stattdessen erhalten Sie die Warnung, die Sie auffordert, zu löschen oder, in meinem Fall, nichts dagegen zu klicken. Das sollte die Warnung ablehnen, ohne dass Maßnahmen ergriffen werden. Nur wenige löschen und dann nochmals sagen, gut zu löschen, der Student tatsächlich gelöscht werden. Als Nächstes erstellen wir eine kleine Bestätigung, damit der Benutzer weiß, dass der Schüler wirklich gelöscht wurde . Viele Male muss eine Anwendung dem Benutzer eine Benachrichtigung bereitstellen, dass etwas passiert ist. Aber es ist nicht so kritisch, dass Sie den Fluss der Anwendung vollständig unterbrechen möchten . Toast-Benachrichtigungen erfüllen diese Rolle perfekt. Ein Toast ist ein kleines, unaufdringliches Pop-up-Informationsbanner. Nach Konvention sollte es eine kurze Nachricht vermitteln, die für eine kurze Zeit erscheint, bevor sie automatisch verschwindet. Einige Toastbenachrichtigungen enthalten auch eine Möglichkeit für den Benutzer, sie frühzeitig zu schließen, indem er entscheidet, ob er einen Toast verwenden soll oder nicht. Die Benachrichtigung ist einfach. Erfordert die Nachricht, dass der Benutzer Maßnahmen ergreifen muss, ist nicht wichtig, wenn der Benutzer es vermisst Wenn die Antwort auf beide Fragen nein ist, dann ist die Toastbenachrichtigung perfekt. Die ionische Implementierung einer Toastbenachrichtigung ist das Auge auf Toastkomponente. Es ist wahrscheinlich die grundlegendste aller Ionics. Sie ich Komponenten. Sie können einen mit sehr wenig Aufwand bauen. Seine grundlegendste Form besteht aus einer Nachricht und einer Dauer, und ich auf Toast könnte vertikal am oberen, mittleren oder unteren Rand des Bildschirms positioniert werden. Es ist immer horizontal zentriert. Sie können sie mit dem Farbattribut einfärben, wodurch eine der ionischen Farbkonfidenzen oder eine eigene benutzerdefinierte Farbe bereitgestellt wird. Sie können Schaltflächen und Symbole hinzufügen. Wir werden nichts davon tun, wenn Sie Ihr Auge auf Toast anpassen möchten, nachdem Sie die Lektion beendet haben , fühlen Sie sich frei oben auf der Dienstplan Seite. Erstellen Sie einen weiteren Haken, mit dem Sie die Sichtbarkeit des Toastes steuern können, genauso wie wir die Unsichtbarkeit des Aktionsblatts und der Warnung gesteuert haben. Als nächstes ändern Sie die Funktion Student löschen, um die Hook-Set-Funktion sofort aufzurufen, nachdem der Lead unmittelbar nach dem I Alert-Tag auf einem Auge auf Toast-Tag passiert. Genau wie mit dem Auge auf Warnung, braucht es eine offene Attribute, die zum Wert der Show Toast, Hook-Variable löschen und in on Attribute abweisen, die die Hook-Set-Funktion aufrufen sollen. Die Nachrichtenattribute sollten eine kurze Nachricht enthalten, die angibt, dass der Schüler gelöscht wurde . Seien Sie einfacher, so detailliert wie Sie wollen, aber denken Sie daran, Shorter ist in der Regel besser für einen Toast. Das Attribut Dauer steuert, wie lange das Auge auf Toast wartet, bevor es sich automatisch entlässt. Die Dauer ist eine ganze Zahl und in Millisekunden. Achten Sie also darauf, keine Dauer anzugeben, die zu kurz ist und definitiv keine Stärke übergibt , wenn Sie die Dauer vergessen und weglassen. Attribut. Der Toast verbleibt auf unbestimmte Zeit auf dem Bildschirm, was Benutzereingriff erfordert, um ihn zu verwerfen. Eine Standardposition des Toastes ist vertikal zentriert. Ich beschloss, es nach oben zu verschieben, aber wir überlassen Ihnen die endgültige Entscheidung. Sie können ein Schaltflächen-Array zu einem Ich bin Toast bereitstellen, genau wie Sie es mit dem I N Aktionsblatt getan haben und ich eine Warnung. Wenn Sie sich so geneigt fühlen, voranzugehen und eine hinzuzufügen, wähle ich, die Datei nicht zu speichern und den Browser zu verlassen. Aktualisieren. Nun, wenn Sie einen Schüler zusätzlich zu dem Namen des Schülers löschen, der aus dem Dienstplan verschwindet. Nachdem Sie die Bestätigung abgeschlossen haben, erhalten Sie auch den Benachrichtigungs-Toast. Wenn Sie einige Ideen, wie Sie diese Erfahrung verbessern wollen, Ich stelle einige Herausforderungen später, direkt nach dem letzten Video. 17. Grundlegende Navigation: Bevor wir dieses Kapitel einschließen, möchte ich ein Menü hinzufügen, um es einfacher zu machen, zwischen der Homepage auf der Dienstplanseite zu navigieren , das Menü wird meist aussehen und handeln wie das von der Führung und Kapitel eins, aber es wird ein Etwas einfacher. In Ionic erstellen Sie ein Menü mit der Ionen-Menükomponente. Das Ionen-Menü ist eine ionische Komponente, die neben Menü implementiert. Wie bei den meisten anderen Ionic Container-Komponenten kann es eine Kopfzeile mit einer Symbolleiste im Titel enthalten, zusammen mit einigen Ionen-Inhalten. Das typische Seitenmenü besteht aus einer Liste von Seiten, die aus einer Liste von Ionen-Elementen erstellt wurden. Das Menü kann mit einer Vielzahl von Verhaltensweisen angepasst werden. Wenn Sie möchten, dass das Menü den Inhalt der Hauptseite verdeckt, stimmen Sie zu. Es ist Typattribute-Overlay. Andere Optionen sind Push, was dazu führte, dass der Seiteninhalt mit dem Menü gleitet oder Sie können zeigen wählen, um einen ähnlichen, aber plötzlich anderen Effekt mit offenbaren das Menü zu erzielen . Der Inhalt selbst ist stationär, während beim Push der Menüinhalt mit dem Seiteninhalt verschoben wird. Sie können festlegen, auf welcher Seite sich das Menü befindet, indem Sie die Seite nach Ansicht entweder auf Anfang oder Ende setzen. Wenn Sie Ende wählen, stellen Sie sicher, dass sich Ihr Menü-Symbol auf der gleichen Seite der Hauptinhaltssymbolleiste befindet, oder es wird seltsam aussehen. Sie können das Streichen des Menüs deaktivieren, indem Sie die Wischgeste auf false setzen. Wenn Sie möchten, dass ein Element in Ihrem Menü das Menü schließt, wenn Sie es auswählen, kürzer sein. Wickeln Sie es mit einem Auge auf Menü Toggle Komponente. Andernfalls bleibt das Menü geöffnet. Der Ionen-Menüschalter kann auch verwendet werden, um ein Menü zu öffnen. Daher der Name umschalten. Standardmäßig wird es sich automatisch verstecken, wenn es erkennt, dass sein Menü deaktiviert ist oder in einem geteilten Schmerz angezeigt wird , wie wir es hier tun. , dass Wenn Sie möchten, dasses ständig sichtbar ist, stellen Sie sicher, dass Sie die automatische Ausblendung tatsächlich auf false setzen. Frag mich nicht, wie lange es gedauert hat, das zu debuggen, als ich es zum ersten Mal vergessen habe. Es gibt mehr zu einem Menü, aber das sind die Grundlagen, also lasst uns eins bauen. Erstellen Sie nun eine neue Datei im Komponentenordner. Nennen Sie es Menü Punkt tsx. Dies ist, wo wird das Menü definieren, replizieren, was wir während der Tour gesehen haben, erstellen Sie eine APP-Seite Schnittstelle in der Nähe der Spitze, die definieren, wie eine Seite aussieht. Gib ihm einen Titel, dein l und ein Symbol. Nächstes Erstellen Sie alsNächstesein Array dieser Objekte innerhalb des Arrays. Geben Sie dem Objekt Liberalen eine für die Homepage mit dem entsprechenden You Earl und Icon und dann eine für die Dienstplanseite mit ihrem L-Schrägstrich. Und lassen Sie uns das Symbol „Menschen“ verwenden. Wenn der Editor die Symbole nicht erkennt, können Sie sie aus Ion-Symbolen importieren. Als nächstes kommt das Menü selbst, genau wie die Dienstplanseite. Es ist eine Reakt-Funktionskomponente. Rufen Sie es Menü und sagte es zu einer schmalen Funktion, die einige ionische Inhalte zurückgeben wird, um den Menüinhalt zu erstellen . Erstellen Sie ein Ionen-Menüelement mit seinem Inhalt i d gesetzt auf Maine. Dieser Wert muss mit dem HTML-Element i D. des Ionen-Router-Steckdose übereinstimmen D. , der main war. Vertrauen Sie mir auf diesem, aber wir werden überprüfen, ob ich das Menü zum Markup für den Typ hinzufüge. Ich bin teilweise zu überlagern, aber fühle mich frei zu versuchen, zu schieben oder zu offenbaren innen an einem Ionen-Header mit einem Auge auf Toolbar und ein Auge auf Titel innerhalb des Titels bieten einen Titel wie Menü direkt nach dem Ionen-Header an einem Ionen-Inhalt-Tag. Und nur drinnen und ich auf der Liste. Dies ist, wo das Menü konstruiert wird, wird dies tun, indem es über das at pages Array iteriert wird. Die Strategie ähnelt dem, was wir gerade bei den Schülern gesehen haben. Um dies zu tun, öffnen Sie eine geschweifte Klammer, um Code auszuführen, rufen Sie die at Seiten eine Raise Map-Funktion auf. Diese Funktion erhält eine schmale Funktion für jedes Element des Arrays ausgeführt werden. Diese Funktion erhält zwei Parameter. Das Seitenobjekt und der Array-Index dieses Objekts. 0123 so weiter. Die Pfeilfunktion muss das Markup für jedes Objekt zurückgeben. Das erste Element ist ein Ionen-Menü-Toggle, dessen Schlüssel auf die Indexvariable gesetzt ist. Wenn wir diesen Index nicht bereitstellen, wird sich reagieren beschweren, dass jedes Kind in einer Liste einen Schlüssel haben sollte. Es wird immer noch rendern, aber es liebt eine hässliche Warnung. Und wir brauchen das nicht, wie ich bereits erwähnt habe, wie ich bereits erwähnt habe, setzen Sie die Auto hide Eigenschaft auf false, es sei denn, Sie genießen es, zu sehen, wie Dinge ohne ersichtlichen Grund verschwinden . Innerhalb des Umschaltgeräts platzieren Sie ein Ionen-Element mit einem Rundungslink, der auf den Punkt bei Seite eingestellt ist, Ihren L. Dadurch wird das Element automatisch in einen Hyperlink umgewandelt , der ziemlich cool ist. Stellen Sie sicher, dass Sie die Bindungssyntax richtig bekommen, wie ich hier zeige. Andernfalls könnten Sie Ihre Benutzer zu einer Route senden, die buchstäblich auf Seite dot euro genannt wird. Setzen Sie die Routerrichtung auf keine oder root Ihrer Wahl. Dies wirkt sich auf die Animation aus. Es ist subtil, also lasse ich Sie damit spielen und entscheiden, was Sie bevorzugen, wenn Sie eine sichtbare Linien trennen möchten , die Ihre Menüelemente, die die Zeilen für einen Mithi nach ihm vollständig voll zuordnen . Ich bin kein Fan von der Art, wie es aussieht, also wähle ich keines innerhalb des Elements an einem Ionensymbol mit seinem Slot, der eingestellt ist, um zu starten, und es ist Symbol wieder auf das AP-Seitenpunktsymbol gesetzt. Achten Sie auf diese Bindungssyntax. Stellen Sie sicher, dass Sie alle Ihre Tags richtig schließen, und dann alle Ihre geschweiften Klammern, Luft geschlossen und abgestimmt und aufgereiht. Es ist nur noch eine Zeile übrig. Wir müssen die Menüfunktion exportieren, sonst können wir sie nicht in die App importieren, um sie und Sie sichtbar zu machen. Öffnen Sie die App dot ts X Seite sofort innerhalb des Ion React Routers als erstes Kind an einer Ion Split Schmerz Komponente mit seinem Inhalt I d auf Maine stellen Sie sicher, dass der Split Schmerz vollständig umschließt Ion Router Steckdose. Ich mache das hier mit dem Makro. Eine Verknüpfungsoption Abwärtspfeil unter Windows und Lennox. Es sollte nach unten Pfeil geändert werden. Fügen Sie das Menü-Tag des ersten Kindes des Ionenspaltschmerzes unmittelbar vor dem Ionenrouter Outlet hinzu. Wir haben die Route bereits zur Dienstplanseite hinzugefügt, aber falls Sie es nicht getan haben, brauchten Sie hier in der Ionenrouter-Steckdose. Schließlich für diese Datei müssen Sie für diese Dateidie Ionen-Router-Steckdosen I d auf Maine setzen. Ich dachte, das wäre schon geschehen, aber anscheinend nicht. Als Nächstes. Wir müssen ein Menü-Symbol auf beiden Seiten hinzufügen. Nein, es ist nicht automatisch. Öffnen Sie die Startseite bei home dot tsx. Innerhalb der Ionensymbolleiste kurz vor dem Ionentitel, müssen Sie eine Ionen-Schaltflächenkomponente mit Slot gleich Anfang und ich auf Menüschaltflächenkomponente hinzufügen . Innerhalb davon müssen Sie keine Textursymbole hinzufügen. Diese werden automatisch für Sie verwaltet, dann müssen Sie genau den gleichen Code innerhalb der Dienstplanseite tun. Kopieren Sie einfach den gleichen Block und fügen Sie ihn ein. Speichern Sie die Datei. Probieren Sie es aus. Sie sollten nun in der Lage sein, zwischen der Startseite und den Dienstplanseiten mit diesen zu navigieren , und das tut es so ziemlich für dieses Kapitel. Also lasst uns zusammenfassen, was wir gerade getan haben. Wenn Sie eine Seite hinzufügen möchten, müssen Sie dies tun. Erstellen Sie die Seite. Component selbst mit dem Markup und Code, den Sie auf einer Route mit der U. R L wollen , so dass die Benutzer auf die Seite gelangen können. Wenn Sie möchten, dass die Seite in Ihrem Anwendungsseitenmenü dem APP-Seiten-Array mit dem URL-Titel und einem Nikon hinzugefügt wird und wiederholen Sie bei Bedarf. Wir fügen weitere Seiten hinzu, während wir gehen. Aber für jetzt haben Sie die Grundlagen gesehen. Wenn Sie eine zusätzliche Herausforderung wünschen, werfen Sie einen Blick auf die Kapitel-Herausforderungen, die ich neben diesen Lektionsvideos bereitgestellt habe. Wenn Sie Probleme haben, achten Sie darauf, einige Kommentare zu hinterlassen 18. Anwenden von allem, was du gelernt hast: Nachdem Sie dieses Video abgeschlossen haben, nehmen Sie sich ein paar Augenblicke Zeit, um das Gelernte auf die Demo-Anwendung anzuwenden. Sie haben gerade die Toast-Benachrichtigung erstellt, die Sie hinzugefügt haben, um anzuzeigen, dass ein Schüler aus der Liste gelöscht wurde , positioniert sich selbst oben auf dem Bildschirm, bleibt für 3000 Millisekunden oder drei Sekunden sichtbar und verschwindet dann. Es kann nicht manuell vom Benutzer abgewiesen werden, und manchmal kann es ein wenig schwer sein, in seiner Standardfarbe in Position zu sehen. Ihre Herausforderung hier besteht darin, zu beheben, dass die Dauer des Toast von fünf Sekunden bei einem geschlossenen Knopf geändert wird, damit der Benutzer den Toast früher schließen kann. Toast-Schaltflächen sind auf die gleiche Weise konfiguriert, wie Schaltflächen für Aktionsblätter. Hinweis. Benutzerrolle anstelle eines Handlers. Verschieben Sie den Toast des unteren oder mittleren Bildschirms mit seinen Positionsattributen und wählen Sie das gewünschte aus. Schließlich können Sie seine Farbe ändern. meine Symbole nicht, gehe über zu Ionen-Icons dot com und finde etwas, das dir besser gefällt. Hier sind einige Ideen, mit denen Sie das abwesende und gegenwärtige Symbol in etwas anderes ändern können. Das Symbol, das wir das Dienstprogramm verwenden, ist ziemlich generisch. Sie können der Studentenschnittstelle ein Geschlecht hinzufügen und dann das Symbol basierend auf diesem Wert zur Laufzeit anpassen . Sie können auch die Farbe eines Symbols in der Anwendung ändern. Hier ist ein Vorschuss. Anstelle einer Schließen-Schaltfläche in der Toast-Benachrichtigung, warum fügen Sie nicht eine schnelle Rückgängig-Schaltfläche zusammen mit etwas Code, der das ungebührliche Aktion Typoskript ausführt? Haben Sie eine Sortierfunktion? Geben Sie eine Schaltfläche in der Dienstplansymbolleiste an, um die Schüler nach Nachnamen anstatt nach dem aktuellen Standardwert zu sortieren ? Ich hoffe, diese geben Ihnen eine Vorstellung davon, was Sie tun können, um Ihre Erfahrungen mit Ionic bis zum nächsten Mal ein wenig reicher zu machen. Danke fürs Zuschauen. 19. Erstellen eines an mit Capacitor: Hallo, hier ist Mike Callahan in dieser Rubrik. Wir werden die Demo-App vorbereitet und im Apple App Store bereitgestellt. Es gibt viel zu tun, also kommen wir dazu. Es gibt einige Voraussetzungen, die Sie haben müssen, bevor Sie beginnen. Du brauchst einen Mac, was ich nehme an, wenn du das siehst. Wenn nicht, Sie gerne mitverfolgen, aber Sie können nichts bereitstellen. Du musst ein registrierter Apple-Entwickler sein. Ich werde nicht alles durchgehen, was erforderlich ist, um als Apple-Entwickler eingerichtet zu werden, aber Sie können sich bei developer dot apple dot com anmelden und schließlich brauchen Sie X Code, Sie aus dem Mac App Store herunterladen können. Das erste, was wir tun müssen, ist ein Projekt zu erstellen, das wir in X-Code aus unseren Assets öffnen können , die aus dem Ionic Projekt erstellt wurden, und dies wird die Grundlage der Anwendung werden, die wir schließlich Apple bereitgestellt haben. Der beste Weg, entweder in IOS- oder Android-Projekt für eine Ionic App oder für jede Web-App zu erstellen , ist,indem Sie Ihrem Projekt Kondensator hinzufügen. , ist, Klar, du könntest Cordova gebrauchen, aber das ist so letztes Jahrzehnt. Wenn Sie die beste Erfahrung mit der geringsten Reibung wollen, vertrauen Sie mir. Sie sollten Kondensator verwenden, um meine Anwendung in den Apple App Store zu bekommen. Es muss ein Ex-Code-Projekt sein. Meine ionische App ist kein nächstes könnte Projekt. In der Vergangenheit gab es wirklich nur einen Weg, dies zu tun, und das war die Verwendung von Cordova. Aber heute werde ich Kondensator verwenden. Ein Kondensator ist ein neues Framework oder in der Technologie von Ionic, die interessanterweise nicht Ionic erfordert. In der Tat, mit einer Ausnahme, die ich im Begriff bin zu zeigen, ist alles, was ich danach tue, überhaupt nicht ionisch spezifisch. Also, um Kondensator zu verwenden, müssen Sie einige bereits gebaut haben. Also werde ich das mit Ionic Build machen, und ich werde einen Produktions-Build erstellen. Technisch gesehen die Option dash dash prod hier nicht erforderlich. Es ist nicht wirklich notwendig für eine React-App. Was ich jedoch finde, ist, dass die Verwendung von Ionic Bill dash prod nichts schadet, und es hält mich davon ab, mich an verschiedene Befehle zu erinnern. In der Tat, in ein wenig, werde ich das in ein NPM-Skript machen und dann in der Lage sein, es für immer zu vergessen. An diesem Punkt habe ich eine erstellte Website, eine vollständige Webanwendung innerhalb des Build-Ordners. Ich glaube, ich habe Kondensator, aber ich bin nicht positiv. Die meisten ionischen APs sind jetzt standardmäßig enthalten. Aber wenn du es nicht hörst, dann tust du es. Wenn ich keinen Kondensator hätte, dies der Befehl, den ich ausführen müsste. Aber wie Sie sehen können, ist es bereits von diesem Punkt an aktiviert, es spielt keine Rolle, ob ich eine ionische App, die nicht ionische App, verwende . Es spielt keine Rolle, ob ich es gewohnt bin zu reagieren. Winkelansicht Jake Weary Mobile. Von diesem Punkt an würde alles, was ich tue, genau das Gleiche für all jene gelten. Das nächste, was wir jetzt Kondensator haben, ist die Iowa-Plattform zu installieren, die automatisch ein nächstes Code-Projekt für uns erstellt. Und das machen wir mit MPX Cap. Fügen Sie uns hinzu. Und denken Sie daran, MPX ist Knoten Möglichkeit, einen Befehl auszuführen, der sich nicht in Ihrem Systemverzeichnis befindet, sondern irgendwo in Ihren Knotenmodellen installiert ist. Und weil Kondensator es lokal installiert ist. Es ist nicht auf meinem normalen Befehlspfad. Es gibt einen Fehler hier, aber ich glaube nicht, dass es relevant ist für das, was ich gerade mache, also werde ich es später untersuchen. Aber jetzt gehen wir voran und öffnen es. So ist es MPX Kappe offen IOS. Dadurch wird der X-Code mit dem Projekt gestartet. Ich werde es mit Kommando bauen. Sei. Ich bin neugierig zu sehen, ob der X-Code-Auswahlfehler, den wir sehen, seine Befehlszeile ist etwas , das ich um sie kümmern muss. Wenn es nur eine Klappe ist, mit der ich später fertig werden könnte, gelang es dem Built. Jetzt sehen wir mal, ob wir es ausführen können. Und wenn wir das tun, wählen wir aus. Sie können entweder ein echtes Gerät oder ein ähnliches Gerät auswählen, das ich gehe. Ich bin gut mit dem iPhone S C. Also lassen Sie uns gehen und sehen, ob wir die Anwendung dort ausführen können, und es scheint gut zu funktionieren. Wenn Sie hier auf X Code schauen, könnten Sie unseren Konsul sehen, so dass alle Council Dot Log-Nachrichten, die auftreten, oder irgendwelche Fehler , die Fehler ausführen, die wir während des Laufens auftreten, hier angezeigt werden, also sollte ich in der Lage sein, das genau wie wir es normalerweise getan haben. Die Anwendung scheint wie erwartet zu funktionieren. Das ist so weit, wie wir in Kondensator graben müssen, werde ich in diesen Ausschlusswähler schauen. Aber es scheint nicht zu beeinflussen, was wir zu diesem Zeitpunkt brauchen. 20. Die Demo App auf einem echten iOS-Gerät ausführen: Jetzt, da wir ein IOS-Projekt für die Demo-App haben, ist es ein paar Dinge, die ich tun möchte. Ein wirklich schneller von ihnen ist, die Paketpunkt-Jason-Datei zu öffnen und an einem Skript, das einige der zivilen einfacher macht. Und noch einmal möchte ich darauf hinweisen, dass alles, was ich hier tue, für alle verschiedenen Arten von Anwendungen gilt . Dieser hier, an dem ich gerade arbeite, ist eine ionische Reaktion. Aber alles, was ich tue, wird die gleiche für und ionische Winkel-App oder sogar eine nicht-Diana Kappe , die Sie nur eine Web-App, die Sie auf ein iPhone setzen wollen. Also, was ich hier tun werde, ist, dass ich ein Skript erstellen werde, das mir beim Bau hilft. Wenn ich überhaupt Änderungen an der Ionic App vornehme, muss ich die APP neu erstellen. Und dann muss ich die Änderungen mit dem Kondensatorprojekt synchronisieren. Also, um das zu tun, werde ich etwas nutzen, das NPM bietet. Und das nennt man Post. Immer wenn Sie ein Skript haben, das mit dem Wort post beginnt, gefolgt von einem anderen Wort, wird NPM dieses Skript direkt nach dem ersten Skript ausführen und lassen Sie mich Ihnen zeigen, was ich meine. Es ist einfacher, wenn ich es dir zeige. Also werde ich ein Skript namens Post Built On erstellen, das mit dem Kondensator-IOS-Projekt synchronisiert wird . Also habe ich gerade diesen Script-Post-Build genannt und es wird direkt nach dem Build-Skript ausgeführt. Also rufe ich einfach den Kondensatorenbefehl auf und das wird automatisch die erstellten Artefakte mit den Kondensatorprojekten synchronisieren , die ich habe. Was auch immer Plattformen, die installiert sind, lassen Sie uns geben, dass ein Versuch wirklich schnell. Wenn ich jetzt nur NPM Run Build ausführe, werden Sie sehen, dass es die Anwendung erstellen wird. Dann wird es sofort mit Kondensator synchronisiert, und Sie konnten sehen, dass die Synchronisation passiert ist. Es hat sogar einige native IOS-Abhängigkeiten aktualisiert. Nun, was ich in diesem Video tun möchte, ist, dass die Anwendung auf einem tatsächlichen Gerät ausgeführt wird. Im letzten Video haben wir es auf dem Simulator laufen lassen. Ich denke an ein iPhone SC, aber das ist nicht, wo wir sein müssen, um dieses Ding in den APP Store zu bekommen. Also werde ich jetzt das X-Code-Projekt öffnen, indem ich dem Kondensator mitteile, das Iowa-Projekt zu öffnen Was Sie hier sehen können, ist X Code nicht wirklich glücklich mit mir, denn bevor wir in das kamen, habe ich mein Entwicklerkonto von X Code entfernt. Ich habe auch gesagt, dass es nicht automatisch die Signierung verwalten soll, aber wir wollen das tun. Also ein paar Dinge sehr schnell. Also möchte ich voran gehen und sagen, dass es automatisch verwalten Signieren. Aber das wird es nicht mögen, richtig, weil ich kein Konto habe. Ich möchte auch die Paketkennung ändern, da sie diese in der Vergangenheit verwendet haben und sie in Ihrem Konto eindeutig sein muss. Eigentlich muss es global einzigartig sein, also glaube ich, dass man einzigartig ist. Aber wenn ich versuche, es jetzt zu bauen, geht es immer noch nicht an die Arbeit. Build ist also fehlgeschlagen. - Warum? Weil ich das Entwicklungsteam brauche. Also werde ich ein Konto hinzufügen, und ich werde das für dich bearbeiten, aber ich werde sie mit meinem von Apple entwickelten Schreiben finden. Und wenn ich einmal drin bin, reicht das? Lasst uns sehen. Sagt, dass wir hier ein Ex-Code verwaltetes Profil haben. Was passiert also, wenn ich versuche, es auf meinem iPhone zu installieren? Lassen Sie mich mein iPhone entsperren, während dies geschieht. Ich werde auch den schnellen Zeit-Spieler starten, weil es eine wirklich coole Funktion gibt. Aber Sie können dio Sie eine Filmaufnahme aktivieren und das ermöglicht es Ihnen, Ihr iPhone zu spiegeln . Also habe ich dir zeigen lassen, wie er das gemacht hat. Ich ging, um neue Filmaufnahmen zu speichern und dann kann ich mein iPhone auswählen. Ich habe keine Kontrolle über das iPhone von meinem Computer, aber ich kann ich einfach scrollen, wie ein normales würde. Okay, X-Code sagt, dass das gebaut, aber ich habe es noch nicht ausgeführt. Lassen Sie mich also voran gehen und einige Änderungen an meinen Desktop-Layouts vornehmen. Schwächung. Tun Sie das alles zusammen, damit Sie sehen können, was ich tue, während ich es tue. Ich werde wieder hier reinkommen. Ich habe Michaels iPhone aus der Dropdown-Liste ausgewählt, und ich habe eine über USB verbunden und ich werde nur auf Play drücken. Gebaut, gelungen, immer ein gutes Zeichen und sagt jetzt, dass es läuft. So sollten wir sehen, ist der Standard-Kondensator-Splash-Bildschirm ein Symbol. Es ist das Symbol unten und Sie können sehen, dass das Konsul Log hier passiert. Jetzt läuft dies direkt auf meinem iPhone, und es ist, wie Sie sehen können, genau die gleiche Anwendung, die wir zuvor gesehen haben. Wie cool ist das? Das nächste, was ich tun werde, ist zu versuchen, dies in den APP-Store hochgeladen zu bekommen, damit Sie folgen können . 21. Erstelle die AppStore App: Der nächste große Schritt ist, die erstellte Anwendung in den APP-Store zu bringen, aber zuerst brauchen wir einen Platz, um es zu setzen. Ich muss zum APP Store Connect gehen, um die Anwendung zu erstellen, bevor ich sie hochladen kann. Also werde ich mich in APP Store anmelden Connect dot apple dot com. Und wenn ich einmal eingeloggt bin , sagt es, dass ich eine Vereinbarung überprüfen muss, was bedeutet, dass ich das tun muss, bevor ich etwas anderes richtig mache? Sobald ich bei APP Store Connect angemeldet bin, werden mir sofort alle Anwendungen angezeigt, die ich derzeit im APP Store habe. Sie sehen ein paar von ihnen mit kleinen roten Abzeichen und das Wort abgelehnt neben ihnen. Dafür gibt es viele Gründe. Ich werde hier nicht darauf hineingehen. Seien Sie sich bewusst, dass Apple bekannt ist, dass Anwendungen manchmal aus bizarren Gründen, eine neue Anwendung zu erstellen, ablehnen . Klicken Sie einfach auf das Plus und die neue App. Und das erste, was sie wissen will, ist, was diese vier sind? Ist es für IOS? MacAllister TVO s? Es gehört Iowa. Ich werde es bei 10 Tanz nennen. Mal sehen, ob es mir erlaubt, das at-Zeichen zu benutzen, scheint mir egal zu sein. Ich bin uns Engländer. Mein Bundle i d existiert nicht. Also muss ich ein neues Bundle erstellen, das ich hier tun werde, sagt, dass ich das Äußere hier nicht verwenden kann , aber ein 10 Tanz und die Bundle-ID, wie Sie sich vielleicht erinnern, ist com dot walking river dot a 10 dance jetzt nach unten unten. Es will mir sagen, was IOS-Funktionen, die ich suche. In diesem Fall bin ich nicht auf der Suche nach denen, also werde ich einfach lassen sie alle Decke weiter. Und jetzt sollte die Registrierung der Bundle I-ID in der Lage sein, hier wie eine neue App wieder zu kommen. Da ist meine Bündel-ID. Es ist eine IOS-App und es wird bei 10 Tanz sein. Es ist uns Englisch in der Schrägstellung ist intern. Es kann wirklich alles sein, was du willst. Ich werde weitermachen und es immer noch bei 10 Tanzbenutzer-Zugang anrufen. Ich werde nicht in meinen Usern leben. Das ist darüber hinaus. Also jeder, der verurteilen will, lässt es anscheinend ist es nicht wie diese Warteschlange. Also gehen wir einfach zu einem 10 Tanz zurück. Und an diesem Punkt können wir aufhören. Es gibt noch viel mehr zu tun, aber der Zweck, dies zu tun, war einfach, es zu bekommen, so dass wir die Anwendung hochladen können. 22. Hochladen in den App Store: in diesem Video. Mein Ziel ist es, die Anwendung auf Apple hochzuladen. Wir machen noch nichts damit, aber ich will dir nur zeigen, wie du dorthin kommst. Einer der ersten Fehler, die ich gemacht habe, und ich werde Sie jetzt durch, ist, wenn Sie nicht vorsichtig sind . Nehmen wir an, wir haben immer noch das iPhone S e verwendet, um es auszuführen und was Sie finden werden. Es ist auf den ersten Blick nicht offensichtlich, wie man das macht. Der erste Fehler, den ich gemacht habe, ist nicht zu wissen, dass Archiv der Befehl war, den ich verwenden sollte. Der zweite Fehler war nicht in der Lage, herauszufinden, warum es fast immer deaktiviert war. Der Grund ist das Gerät, das Sie hier angegeben haben, das aktive Schema, wie es so früher genannt wird, als ich dies zum ersten Mal mit einem nächsten Code zeigte, ich habe den iPhone s E-Simulator verwendet, und im Moment habe ich mein iPhone nicht , die mit meinem Mac verbunden sind. Sie können entweder ein echtes Gerät anschließen oder es einfach zu generisch einstellen. Und dieser Akt allein wird das Archivieren ermöglichen. Gehen wir weiter und machen das jetzt. Also nahm ich die Kondensatoranwendung, baute sie und lief sie auf meinem iPhone. Ich habe mich in meinem Apple-Konto eingeloggt und alles wird automatisch alle Signierungen verwaltet . Also in der Theorie sollte das einfach funktionieren. Das kann einige Zeit in Anspruch nehmen, um alles zu bauen. Ich habe es hier oben zu deiner Bequemlichkeit beschleunigt, also musst du nicht alles durchsetzen, aber du musst es durchsetzen, wenn es dein eigenes Projekt ist. Okay, der Build ist gelungen. Und jetzt will Ex Gott wissen, was ich mit meinem Archiv machen will. Beachten Sie, dass der Anwendungsname immer noch App ist, Wahrscheinlich nicht, wo wir es verlassen möchten. Auch wollen wir Version 1.0, und ich glaube, das ist Build eins. Ich werde das nie verteilen, aber ich werde versuchen, den Prozess genau so zu zeigen, wie Sie es tun würden, wenn Sie es verteilen würden. Der nächste Schritt besteht also darin, die Anwendung zu verteilen. Hier gibt es vier Möglichkeiten. Ich werde den Standard übernehmen, weil ehrlich gesagt niemals ad hoc verwenden würde, ich ehrlich gesagt niemals ad hoc verwenden würde,um auf beliebigen Geräten zu installieren oder hier bestimmte Geräte sagt. Ich habe weder ein Unternehmen, in dem ich die Anwendung verteilen kann, noch habe ich ein Entwicklungsteam. Ich gehe direkt in den App-Store. Sie können Ihre App entweder signieren und das Bundle erstellen, ohne es in den APP-Store hochzuladen. Oder Sie können einfach direkt in den APP-Store gehen. Dies kann uns einige Probleme verursachen. Ich hoffe, das wird es nicht. Es sieht so aus, als hätte es meine Angst überstanden. Meine Sorge war, dass ich keine gültigen Signaturzertifikate wieder hatte. Ich werde die Standardwerte übernehmen. All diese Optionen machen Sinn für etwas, das Sie verteilen werden. Könnte sehen. Auf der linken Seite dieses Fensters befinden sich alle Anwendungen, die ich zuvor in den APP Store hochgeladen habe und es sieht aus wie eine von ihnen. Zwei von ihnen werden APP genannt. Interessanterweise jedoch erscheinen sie jedochnicht wieder so im App Store. Ich lasse Apple das nächste die ganze harte Arbeit erledigen. Ich sehe den Sinn nicht, diese Dinge manuell zu verwalten. Vielleicht fürchten Sie einen Teil einer großen Organisation. Möglicherweise verfügen Sie über einen bestimmten Satz von Zertifikaten, die Sie verwenden müssen, und Geräteprofile. Dieser Prozess ist hart genug, wie er ist. Ich möchte, dass es so einfach wie möglich ist. Okay, alles ist erledigt. Alles ist gebaut worden. Es sieht so aus, als wäre es unterschrieben worden. Also jetzt ist das einzige, was noch übrig ist, in den APP Store connect hochzuladen und es war erfolgreich im Video. Ich zeige Ihnen, was wir tun müssen, um den nächsten Schritt zu machen. 23. AppStore Connect Details: Okay, was müssen wir tun, um das Ding im App Store zu bekommen? Also werde ich mich im App Store anmelden connect dot apple.com. So, wie Sie sehen können, hat es noch nicht einmal ein Symbol. Gehen wir also weiter und klicken Sie darauf und schauen Sie sich an, was wir zu tun haben. Es sieht so aus, als hätten wir viele Bilder zur Verfügung stellen. Auf mich. Die Bilder sind einige der schwierigsten Dinge zu tun, weil es so ein manueller Prozess ist. Es gibt Möglichkeiten, um es zu beschleunigen, um die Screenshots Ihrer Anwendung Untätigkeit kann die Bilder für jetzt überspringen und nur für den Rest davon schauen, müssen Sie bis zu 170 Zeichen von Werbetext zur Verfügung stellen. Dies ist der erste Blurb von Texten, die Ihr potenzieller Downloader, wie wir im App Store sehen werden, Sie können auch bis zu 100 Zeichen von Schlüsselwörtern zur Verfügung stellen. Es gibt eine ganze Kunst, um Keywords auszuwählen, und es gibt Websites, die dem Thema gewidmet sind. Apple wird Support-URL benötigen, wohin können Leute gehen, wenn sie Fragen zur Unterstützung der Anwendung haben? Sie können auch eine Marketing-URL angeben, die etwas anders ist. Dies ist eine URL, die im App Store verfügbar ist auf die Benutzer klicken können, um weitere Informationen zu erhalten. Sie müssen mindestens eine Support-URL angeben. Sie müssen nicht die Marketing-URL-Beschreibungen angeben, wo Sie viel Spaß haben können. Hier möchten Sie die Geschichte Ihrer Anwendung erzählen. Sie haben bis zu 4.000 Zeichen, um dies zu tun. Meine Empfehlung hier ist, dass Sie viel Zeit damit verbringen, diese Beschreibung zu erstellen. Ich betrachte es als Zielseite für Ihre Anwendung. Du musst es verkaufen. Warum möchten die Leute Ihre Anwendung verwenden? Diese Anwendung, die wir jetzt bauen, beschäftigt sich nicht mit der iMessage App oder der Apple Watch, also werde ich diese überspringen. Ich sage nicht, dass es nicht wichtig ist, aber es ist hier nicht relevant. Wenn Sie nach unten scrollen und zum Build-Abschnitt gelangen. Also, was wir hier haben, ist, dass wir gehen und wählen Sie einen Build unserer Anwendung. Und anscheinend fehlt ihm etwas. Und ich werde mir das ansehen und sehen, ob er es uns erlaubt, es auszuwählen. Es will wissen, ob ich in uns Verschlüsselungsexportgesetze einbreche. Und soweit ich weiß, die Teilnahme nicht. Also gehe ich voran und klicke auf Nein, wir machen keine HTTPS-Anrufe, also gehe ich voran und klicke auf das Anwendungssymbol, wie Sie sehen können, ist der Standardkondensator. Um das zu beheben, muss man zurück in Xcode gehen und die richtigen Symbole hinzufügen, die wir dort wollen, und dann ein neues Built hochladen. Werde das später tun. Ich möchte nur alles im App Store connect durchgehen. Erstens, die Version, die ich glaube, es hat direkt aus dem Anwendungspaket genommen. Hier müssen Sie erklären, wer das Urheberrecht besitzt, wer die Rechte an der Anwendung besitzt, und es sollte Sie machen, wir müssen eine Altersbewertung zur Verfügung stellen. Und das tun Sie, indem Sie in die Bearbeitung gehen und eine riesige Liste von Fragen beantworten. Also denke ich, das wird ziemlich einfach für mich wo es keine gewalttätige App ist. Es gibt keinen Humor, ist nicht ausgereift Thema, es ist nicht Horror. Es gibt keine Medizin, keinen Alkohol, kein Glücksspiel, sicher keine Nacktheit. Greift überhaupt nicht auf das Web, zumindest nicht derzeit, noch bietet es dem Benutzer uneingeschränkten Zugriff auf das Web. Und es gibt keine Wettbewerbe oder Glücksspiel. Es ist nicht für Kinder gemacht, also werde ich das Kästchen nicht ankreuzen. Sobald Sie diese Fragen beantwortet haben, wendet Apple dann eine Bewertung an. Es ist kein Spiel, also werde ich es nicht in Game Center aufnehmen. Dieser nächste Abschnitt ist, ob der Rezensent, der Mensch, der Ihre Bewerbung überprüfen wird, sobald er eingereicht wurde, sich anmelden muss, um die App zu verwenden? Und eine wichtige Sache, auf die Sie achten sollten, weil es möglich ist, dass Sie Passwortgeschützte Konten in Ihrer App haben. - Tun wir nicht. Also überspringe ich das einfach. Kontaktinformationen sind ziemlich unkompliziert. Wenn Ihre Anwendung kompliziert genug ist, können Sie Dokumentation, Videos oder andere Hilfearten anhängen um es der Person, die sie überprüft, leichter zu verstehen, wie Sie Ihre Anwendung verwenden. Und die letzten beiden, wann wollen Sie, dass sie die Anwendung für die Öffentlichkeit freigeben? Sie können es manuell tun. Sie können dies automatisch tun, was die Standardeinstellung ist. Oder Sie können ein Datum angeben, das nicht vor diesem bestimmten Datum und der Uhrzeit freigegeben wird. Und dann endlich Werbung. Verwendet Ihre Anwendung Anzeigen, wenn sie Anzeigen ausblendet? Und ich habe vor langer Zeit den harten Weg herausgefunden, dass, wenn Sie Google AdSense verwenden, das als Ja gilt. Und wenn Sie es Nein sagen und Ihre Bewerbung wirklich tut, wird sie abgelehnt. Ich meine, die Teilnahme nicht. Aber ich wollte nur auf Ja klicken, nur um zu zeigen, was die anderen Optionen und Anforderungen sind. Nehmen wir also an, wir werden Anzeigen schalten, aber wir werden keine Apps miteinander verknüpfen, damit die Werbung verwandt werden kann. Ich glaube, das mit der zweiten ist ich nie etwas anderes getan habe, als es einfach zu dienen, also habe ich nie überprüft, dass dies die beiden Boxen sind und Sie müssen dieses anklicken oder Sie können nicht fortfahren. Und dann noch einmal, stellen Sie sicher, dass Sie sich den roten Text ansehen. Wenn Sie die Fragen korrekt beantworten und sie davon erfahren, werden sie Ihre App ablehnen, sie aus dem App Store entfernen, eine Warnung ausgeben und wenn Sie es erneut tun, können sie Ihr Konto vollständig sperren. Also lassen Sie mich wieder nach oben scrollen. Ich werde dich nicht dazu bringen, zu sehen, wie ich all diese Dinge ausfülle. Aber im nächsten Video werde ich es komplett ausfüllen. Und dann machen wir uns Sorgen um die Screenshots. Und im Vorfeld. 24. App Icon und Splash: Lassen Sie uns voran und lassen Sie sich das Anwendungssymbol und den Begrüßungsbildschirm kümmern, es ist nicht wirklich schwer zu tun. Und ich werde Ihnen einen ziemlich einfachen Weg zeigen, damit umzugehen. Zurück in den Pre-Kondensator-Tagen, als alle Cordova benutzten. Cordova hatte eine Befehlszeilenoption, um Symbol- und Begrüßungsbildschirme aus einem Quellbild zu generieren. Ich versuche, mich von irgendwelchen Cordova-Tools fernzuhalten. Interessanterweise heißt das Werkzeug, das ich verwenden werde Cordova-Strahlen, die Sie hier sehen können. Und ich habe das Gefühl, dass sie es bald umbenennen werden. Es ist ein Tool aus dem Ionic Team, das irgendwie zieht in die Funktionalität, die die Cordova-Befehlszeile Ostern bieten. Und es tut alles lokal, anstatt die Datei ins Web zu senden. Okay, lassen Sie uns diese Bilder bauen. Was ich auf der linken Seite habe, ist der Ordner einer Ressource, der sich gerade in meinem Projektstamm befindet. Dies ist, wo die Quellbilder leben werden. Auf der rechten Seite sehen Sie, dass der iPhone SE Simulator läuft und das Standard-Kondensatorsymbol sichtbar ist. Und wenn ich die Anwendung starte, können Sie schnell den Begrüßungsbildschirm sehen. Und es ist wirklich nur ein weißes Bild mit dem Kondensator-Logo in der Mitte. Das scheint für viele iOS-App der Fall zu sein. Also werde ich daran festhalten. Was ich getan habe, ist, dass ich eine PNG-Datei von einer Website namens pixabay.com heruntergeladen habe. Es ist einfach eine Zwischenablage mit einer Checkliste und Bleistift. Apple empfiehlt dringend, keine Transparenz in Ihren Symbolen zu verwenden. Und wenn Sie sich die Symbole ansehen, die im Simulator sichtbar sind, können Sie sehen, was passiert. Also das Dateisymbol, das Anwesenheitssymbol im Safari-Symbol haben alle weiße Hintergründe, aber die meisten Symbole in iOS scheinen das nicht zu tun. Aber größtenteils möchten Sie, dass Ihr Symbol die Farbe hat, die Sie erwarten. Was also passieren wird, ist, weil ich eine PNG-Datei mit Transparenz verwende. Diese transparenten Bereiche werden weiß und ich bin damit einverstanden. Lassen Sie mich das schließen und der Begrüßungsbildschirm ist ähnlich. Es ist das gleiche exakte Bild, das in einem viel größeren Bild zentriert ist. Die Bildgröße beträgt 2732 mal 2732, was die empfohlene oder erforderliche Größe tatsächlich ist. Ok. Ich bleibe vorerst in der Kommandozeile. Jetzt, da ich das getan habe, werde ich das Paket als Entwicklungsabhängigkeit für dieses Projekt installieren . Als nächstes werde ich Cordova erhöhen sagen, um die Bilder zu bauen, die ich suche. Wir können es mit einem einfachen und Px quadriert über Raise iOS ausführen , um es zu sagen, welche Plattform zu zielen. Überspringen Sie die Konfiguration, weil ich keine Konfigurationsdatei habe, die Teil einer Cordova-Anwendung ist, und um die generierten Dateien in meinen iOS-Ordner zu kopieren, mein iOS-Xcode-Projekt. Also lasst uns weitermachen und das tun. Wir werden ein paar Warnungen sehen. Aber ansonsten wird es ziemlich schnell passieren. Es ist erledigt. Ich habe nichts davon gesprochen. Also, wenn wir in den iOS-Ordner gehen und sehen, was es gebaut wurde. Es hat das Symbol für uns und mehrere Größen und eine Reihe von verschiedenen Begrüßungsbildschirmen erstellt. Und du kannst sehen, wenn du genau hinsiehst, dass ich es nicht ganz zentriert habe, aber ich glaube nicht, dass es irgendjemand interessiert. Eine wichtige Sache zu beachten ist, dass das Cordova-Raise-Dienstprogramm angenommen hat, dass ich es aus dem Stammordner meines Projekts ausgeführt habe. Es ging weiter davon aus, dass das Symbol und Begrüßungsbildschirm, oder in einem Ordner namens Ressourcen auf dieser Root-Ebene, dass das Symbol im Begrüßungsbildschirm aufgerufen wird, Splashing und beide PNG-Dateien sind. Die Warnung, die Sie hier sehen, ist, weil es einen Alphakanal gab, was bedeutet, dass es Transparenz gab. Aber die ganze Transparenz, wie erwähnt, wird ihn mit Weiß gefüllt werden. bin ich cool. Lassen Sie uns jetzt sehen, wie es aussieht und die Änderungen, die vorgenommen wurden. Wir müssen einfach das Xcode-Projekt öffnen, was wir wieder mit NP x cap tun können, iOS öffnen, und das wird Xcode für uns an dieser Stelle starten, alles, was wir tun müssen, ist die Anwendung auszuführen und sie auf den Simulator bereitstellen zu lassen. Xcode hätte bereits alle Vermögenswerte für uns abholen sollen. Achten Sie also genau auf den Simulatorbildschirm, während ich auf Play drücke, Sie sollten sehen, dass sich das Symbol ändert und dann sollte der letzte Bildschirm erscheinen. Und wirklich das ist alles, was da ist. Ich muss diese Version des Codes immer noch in den App Store hochladen, aber das ist genau der gleiche Prozess, den wir vor ein paar Videos gesehen haben. Also werde ich das nicht noch mal durchmachen. 25. Zusätzliche Materialien: Aber bevor wir gehen, erlauben Sie mir bitte jedes Mal noch ein paar Minuten. Ich weiß, dass deine Zeit kostbar ist, und ich werde versuchen, es wert zu machen. Ich unterhalte einen Blog bei walking river.com. Hier poste ich viele der Probleme und Lösungen, denen ich als professioneller Softwareentwickler begegne Du kannst mich immer erreichen, mir folgen und dein Feedback auf Twitter teilen. Mein Griff ist am Flusspaziergang. Wenn Sie sehen möchten, an welchen Büchern ich arbeite, besuchen Sie bitte meine Autorenseite unter Amazon.de-Schrägstrich M Callahan. Sie können auch mein eBook und Kurskatalog auf gum road finden. Sollten Sie ein anderes Dateiformat bevorzugen als das von Amazon bereitgestellte Dateiformat? Und schließlich sind die meisten meiner Kurse auch auf Udemy verfügbar. Schauen Sie sich oft zurück, um die neuesten Kursangebote zu finden. Wieder mal, das ist mein Callahan. Danke fürs Zuschauen.