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

1. Erste Schritte: 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 eckig, gehen vom Nullcode bis zur APP und Play Stores. Während dieses Kurses werden wir die wichtigen Aspekte der Entwicklung mit Ionic und eckig abdecken. Diese Lektion behandelt die absoluten Grundlagen und richtet Ihre Entwicklungsumgebung so ein, dass sie so effektiv wie möglich ist. Wir werden mit einer einfachen Hello Ionic Anwendung enden. Wir springen direkt in die Anwendungsstruktur und erklären, wie eine ionische Anwendung ausgelegt ist. 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 hinweg funktioniert, und Geräte verwenden diesen, um persistente Anwendungsdaten zu erhalten, die Geräteneustarts überleben. Wenn Sie keine speziellen Hardwarefunktionen benötigen, die nicht die verfügbaren über den Web-Browser können Sie wählen, ob Ihre Anwendung eine progressive Web-App ist oder P w. A. Während das Web jeden Tag mehr und mehr fähig wird, benötigen einige Funktionen immer noch Zugriff auf die zugrunde liegende -Gerät, auf dem Ihre APP ausgeführt wird. 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 einige Annahmen über einige Dinge machen, mit denen Sie bereits 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 viel Javascript und Typoskript verwenden, und es wird helfen, wenn Sie mindestens Anfänger Kenntnisse haben. Sie werden auch einen Texteditor oder eine integrierte Entwicklungsumgebung wünschen, die ich verwende und Visual Studio-Code empfehle. B s Code ist eine kostenlose und Open-Source-und Cross-Plattform-Entwicklungsumgebung von Microsoft, Microsoft, entworfen von Grund auf die Arbeit mit allen Technologien wird verwendet werden, Natürlich, Sie sind frei zu verwenden, was auch immer Werkzeug Sie fühlen sich wohl mit. Eine weitere Sache, die ich klarstellen sollte, dass dies kein Kurs auf eckig ist. Während ich einige der Grundlagen von eckig abdecken werde, wie es Ionic betrifft, 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 zur Verfügung zu stellen Anweisungen von Mac OS zu dieser Zeit, Ich laufe 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 ionische App: 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 in der Lage sein, entlang auf jedem Betriebssystem, das wir bisher diskutiert haben, folgen . 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 halten Sie sich an die Befehlszeile. Aber Ionic verfügt über ein grafisches Tool Web-basiertes Tool zum Erstellen bionischer Projekte, die schnell als Ionic App Wizard bezeichnet werden. 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. Also wird es mich um einen Namen bitten. Lassen Sie es uns versuchen. Hallo, Ionic. Ich bin teilweise Purple. Also werde ich Purple aussuchen. Ich möchte eckig und das Seitenmenü auswählen. Also lasst uns weitermachen. Da ich also bereits ein Konto hatte, konnte ich mich schnell anmelden. Ich habe den Teil für dich beendet. 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, damit du es nicht durchsetzen musst. Liebst du nicht einfach die Magie der Bearbeitung an dieser Stelle? möchte 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 die eckige Seelye hinter den Kulissen zu delegieren . Wie Sie hier sehen können, läuft es N G run, app, serve, serve, 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 AF 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. Eine leichte Einführung in Angulares: wie ich bereits erwähnt habe. Dies ist jedoch kein Kurs auf eckig . Es gibt einige Muster und Syntaxidiome, die ich früh vorstellen möchte. Bevor wir in den Code kommen. Ich mag es, sie als eckige ISMs zu betrachten. Ja, Wort habe ich mir gerade ausgedacht. Es gibt ein paar Schlüsselkonzepte eigentümliche Zehenwinkel, aber ich möchte Ihnen zeigen, bevor wir sie verwenden müssen. Eines der Dinge über eckig ist, dass es eine strikte Trennung von Bedenken fördert. Ihr HTML-Styling, ein entschuldbarer Code werden getrennt voneinander gehalten. Diese Bedenken können miteinander kommunizieren, Daten und Ereignisse durch Bindungsausdrücke zu teilen und zu eckigen Direktiven, N g vier und MGF, die es Ihnen ermöglichen, mehrere Kopien eines Elements zu rendern oder zu entscheiden, ob Sie es unter alle. Um die Beispiele in diesem Abschnitt zu bearbeiten, möchten Sie möglicherweise einen Browser öffnen, um blitz dot com slash fork Schrägstrich eckig zu stapeln. Dies wird Ihnen eine sofortige Sandbox zur Verfügung stellen, denn Sie können folgen. Fangen wir an. Über eckig zu sprechen ist das Konzept der Trennung von Bedenken in eckigen Sie. Ich Funktionalität ist gekapselt und Komponenten, die eine Komponente alles aus einem Stück Text, einer Schaltfläche ah-Form oder sogar einer ganzen Seite darstellen kann Stück Text, . Komponenten können andere Komponenten enthalten und über sehr gut definierte Schnittstellen miteinander kommunizieren. Um anzugeben, dass eine Typoskriptklasse Komponente ist, verwenden Sie den Komponenten-Dekorator. Das ist das Wort Komponente. Mit diesem at sign stellen Dekorateure zusätzliche Informationen bereit, indem sie Klassen oder Klassenmitglieder kommentieren oder modifizieren . In diesem Fall gibt der Komponenten-Dekorator zusätzliche Metadaten an, wie sich die Klasse verhalten wird . Der Selektor weist angular an, diese Komponente mit dem HTML-Tag verfügbar zu machen. Meine APP-Vorlage u R l zeigt an, dass das HTML-Markup in der angegebenen Datei gefunden werden kann. Ebenso mit dem Stil Ihre Übel. Beachten Sie, dass dieser Wert ein Array ist, was bedeutet, dass Sie mehr als eine CSS-Datei bereitstellen können. Der ausführende pflanzliche Teil des Komponentencodes befindet sich innerhalb der Klassendefinition. Dieser enthält eine einzige Codezeile, was bedeutet, dass er nicht wirklich viel tut. Aber das ist es, was wir mit Trennung von Bedenken meinen. Der Code, das Markup in den Stilen sind alle voneinander getrennt. Werfen wir einen Blick auf das Markup. Dies ist in der Vorlagendatei zu finden. Diese Datei ist ein reiner HTML-Code, der den visuellen Inhalt enthält. Die erste Zeile ist ein Tag, das auf eine benutzerdefinierte Komponente mit dem Namen Hello verweist. Sie können in der Ausgabe sehen, dass es den Wert der Namensvariablen aus der APP-Komponente anzeigt, bei der APP-Komponente anzeigt, es sich um das Wort eckig handelt. Die Stärke der Verwendung von Komponenten besteht darin, dass Sie sie wiederverwenden können, indem Sie die gemeinsamen Elemente extrahieren und sie basierend auf den Änderungen variieren können. In diesem Fall ist der Name, der in diesen geschweiften Klammern übergeben wird, ein Beispiel für einen eckigen, bindenden Ausdruck zur Renderzeit. Der Wert innerhalb der geschweiften Klammern wird aus dem Variablennamen innerhalb des Komponentenglases abgerufen und über ihren Namen an die Hallo Komponente übergeben. Attribute. Die Verwendung des Wortes Name sowohl für die Variable als auch für die Attribute ist bedauerlich und kann zu einer kleinen unnötigen Verwirrung führen . Ich kann die Komponentenvariable in etwas anderes wie eine Person namens ändern, und das könnte es weniger verwirrend machen. Wenn ich es im Markup ändere, muss ich es in der Komponente ändern, zum Komponentencode zurückkehren und die Namensvariable in Personennamen ändern und dann seinen Wert von eckig in etwas anderes ändern und sich das Ergebnis ansehen. Winkelansicht überwacht auf Änderungen an diesen Variablen. Es wird die Komponente erneut rendern, wenn diese Änderungen auftreten. Um ein Beispiel der Komponente wieder verwenden Untätigkeit zu sehen, machen Sie einfach mehrere Kopien der helo Tech . Aber jetzt haben wir ein Problem. Wir haben nur eine Variable namens Person A. Wir können harte Code, die anderen Namen, die funktionieren, aber es ist nicht sehr nützlich. Was, wenn wir einen Haufen Namen hätten? Lassen Sie uns die Person namens Variable auf der Komponente ändern und machen es ein Array namens People wird ein paar Personen hinzufügen. Die coole Sache über die Vernunft, Komponenten auf diese Weise. Wir müssen diese niedrige Komponente überhaupt nicht ändern. Wir müssen einfach das Tag ändern, wo wir es verwenden, um N G vier aufzunehmen, eine eckige Direktive, die verwendet wird, um mehrere Instanzen der Hallo Komponente zu erstellen. Basierend auf der Anzahl der Elemente im Reference Array verwenden Sie ein N G vier, indem Sie es als Attribut für das Element angeben, das repliziert werden soll. Der Wert im Anführungszeichen ist der Schleifenausdruck. Es besteht aus dem Schlüsselwort , gefolgt von dem Variablennamen innerhalb des Elements und eines seiner Children verwendet werden . Das Schlüsselwort off und der Name des Arrays auf der Komponente Toe-Schleife über dem Sternchen, die erforderlich ist, ist ein Hinweis auf eckig, dass diese Direktive das dom manipuliert, wo die Seiten das Objektmodell in irgendeiner Weise dokumentieren. Es gibt eine alternative Bindungen in der Steuer, die mit HTML-Attributen funktioniert. Wenn Sie den Wert eines Attributs auf einen Wert für Ihre Komponente anstelle der aktuell geschweiften Klammern setzen möchten , können Sie den Attributnamen mit eckigen Klammern umschließen und den Variablennamen in Anführungszeichen angeben . Hier beziehen sich die ersten Vorfälle des Namens in eckigen Klammern auf die HTML-Attribute des benutzerdefinierten . Hallo Komponente. Die zweite, das Wort Person in Anführungszeichen ist der Name der Variablen in der Energie für den Ausdruck. Persönlich bevorzuge ich diese Methode. Ich finde es ein wenig einfacher, die nächste Art von mittlerweile zu lesen. Willst du seine Veranstaltung Bindung diskutieren? Jedes HTML-Ereignis kann ein Trigger werden, um eine Funktion auf der Komponente auszuführen. Die einfachste Möglichkeit, dies zu veranschaulichen, besteht darin, eine Schaltfläche zu erstellen und einen Klick-Handler bereitzustellen. Rufen Sie dann innerhalb der Anführungszeichen die Komponentenfunktion auf, innerhalb der Anführungszeichen die Komponentenfunktion auf,die Sie ausführen möchten. In diesem Fall rufen wir Toggle zurück innerhalb der Komponente. Wir müssen die Taco-Funktion implementieren. Adam ist umgeschaltet Variable oben in der APP-Komponente und setzen ihren Anfangswert auf false erstellen Sie die Toggle-Funktion, die einfach den Wert von dem, was umgeschaltet ist, annulliert. nun Wenn Sienunauf die Umschaltfläche klicken, wird der Wert der Variable wird umgeschaltet zwischen true und false. Ihre umschaltete Variable ist für uns nutzlos, bis wir etwas damit tun. Lassen Sie uns ein neues Absatz-Tag hinzufügen. Die Template-Datei wird in diesem Fall eine N G hinzufügen, wenn Direktive und sagte, es Wert zu Engy umgeschaltet ist . Wenn wird bedingt das HTML-Tag rendern. Wenn der Wert innerhalb der Anführungszeichen von Veilchen zu einem Wahrheitswert e Wert, so wie wir umschalten ein- und aus dem Absatz-Tag wird angezeigt und verschwinden. Sie uns schließlich LassenSie uns schließlichdie Hallo Komponente öffnen. Es ist ziemlich cool, dass wir das bis jetzt noch nicht tun mussten. Es ist eine großartige Illustration einer alternativen Methode zum Erstellen einer Komponente. Der Komponenten-Dekorator definiert immer noch einen Selektor, wiederum der Name der HTML-Technologie ist. Anstatt jedoch auf die Vorlage und Stile innerhalb externer Dateien zu verweisen, teilte diese Komponente sie direkt in diese Datei selbst mit den Vorlagen und Stilen Eigenschaften. Ich empfehle dieses Muster nicht, außer für die trivialsten Komponenten. Da dies jedoch bemerkt wird, jedoch bemerkt wird, dass selbst in diesem Beispiel gibt es noch eine allgemeine Trennung von Bedenken. Die Vorlage, Stile und ausgeführt alle Code sind alle in separaten Teilen der Datei. Nun, wenn das aus dem Weg ist, lasst uns weitermachen und unsere erste ionische App erstellen. 7. Geführte Tour 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 die Ionic könnte, dass die APP war oder einfach gab uns zurück in meinem Terminal. Es gibt ein paar Befehle, die ich jetzt eingeben werde, wo Sie vielleicht notieren möchten . 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. Es ist nicht viel hier drin. Wir haben den Namen der Anwendung und leeres Objekt von Integrationen und Integrationen ist wie Cordova oder Kondensator, und Sie können sehen, der Typ eckig ist. Werfen wir einen Blick auf die Indexpunkt-HTML-Datei. An der Spitze haben wir einen Haufen Met Angriffe. Die meisten dieser Männer Angriffe haben damit zu tun, wie die Anwendung auf mobilen Geräten erscheinen wird . Das Ionic Team hat jahrelang damit verbracht, diese richtig zu machen. Ich empfehle nicht, dass Sie sich mit ihm im HTML-Body-Tag anlegen, es gibt ein einzelnes benutzerdefiniertes HTML-Element af Route. So wurde die APP erstellt. Lassen Sie uns also einen Blick darauf werfen, wo Entwurzelung definiert ist. Es ist hier unter Quell-App in einer Datei namens App-Punkt-Komponente, die ts. Das erste, was zu bemerken ist, dass Komponenten-Dekorateur in der Nähe der Spitze. Es definierte einige Informationen über die Komponente und wie sie gerendert werden soll. Selector sagt eckig, was der Tag-Name sein soll, also kommt die Entwurzelung her. Es ist HTML-Markup ist in einer Datei namens App-Punkt-Komponente, die HTML, die wir in einem Moment sehen werden. Und es sind benutzerdefinierte Stile oder eine App-Punkt-Komponente, die CSS an der Spitze der Klasse Personenvariablen ist. Es gibt eine Reihe von Seiten. So, jetzt wissen Sie, woher diese kommen neben den Etiketten, die wir im Menü unter der Liste der Seiten sehen können . Es ist traditionell in einer Winkel-App, alle Variablen und Felder auf Klassenebene in der Nähe der Spitze zu definieren , gefolgt von dem Klassenkonstruktor, was wir hier in der Parameterliste für den Konstruktor sehen, ist, wo wir injizieren können verschiedene Dienste, die die Komponente benötigen. Plattform und Ionic Service bietet verschiedene Informationen über das Gerät oder Plattform. Die APP läuft auf dem neben dem Begrüßungsbildschirm und die Statusleiste sind Hold Overs von Ionic native und ist spezifisch für die Ausführung auf physischen Geräten, die wir zu diesem Zeitpunkt nicht abdecken werden. Initialisieren App ist ein bisschen Boilerplate, die ich für jetzt ignorieren werde. Nd on darin ist, was als Winkel-Lifecycle-Hook bekannt ist. Es gibt eine Reihe von ihnen, aber diese ist ziemlich oft eckig wird NGO auf einem es aufrufen, sobald die Komponente und alle ihre Kinder initialisiert wurden. Es überprüft die mündliche der aktuellen Seite, um festzustellen, welche Seite von den Seiten von Ray gerade gerendert wird. nächstes Lassen Sie uns alsnächstesüber diese Seiten sprechen und wie Sie zwischen ihnen navigieren können. Alle der wichtigsten Anwendung Router hier zu finden, denken Sie an eine Route ist ein Euro. Das Routing-Modul definiert ein Array von Routen und beschreibt das Muster Ihres L übereinzustimmen und beschreibt, welche Seitenmodule für jede Seite loswerden. Die erste Runde hat eine leere Zeichenfolge für einen Pfad mit einer Umleitung zum Feld. Dies bedeutet, dass, wenn in der Anwendung kein Pfad angegeben ist, standardmäßig der Ordner Schrägstrich Posteingang. Jedes Mal, wenn die Route mit dem Wortordner Slash beginnt, gefolgt von einem i D oder einem Seitennamen, importiert die Anwendung das Ordnermodul und befolgt die eigenen Routing-Regeln des Modells. Von dort aus verspreche ich, dass dies Sinn ergibt, wenn wir unsere eigene Hälfte bauen. Jetzt ist es öffnen Ordner Punkt Seite Punkt ts und schauen Sie sich etwas ein wenig interessanter. Die Ordnerseitenkomponente hat nicht viel Code darauf. Es hat einen Konstruktor, in dem der Routendienst injiziert und aktiviert wird. Dies ist ein Winkeldienst, mit dem Sie Informationen über die Route erhalten können, die dazu geführt hat, dass die Seite innerhalb des N G in einer IT-Funktion angezeigt wird. Die Seite verwendet diesen Dienst, um das I. D oder den Namen dieses Teils der Route abzurufen. Diese Idee wird dem Posteingang Postausgang usw. zuordnen . Nun öffnen wir gefalteten Efeu html. Dies ist die Markierung, und hier passiert die wahre Magie für diese Seite. Die meisten Ionic Seiten enthalten ein Ion Header-Tag. Dies definiert diese feste Kopfzeile am oberen Rand der Seite. Im Inneren befindet sich eine Ion-Symbolleiste, ein Container für Schaltflächen , Menüs , Titel usw., um Schaltflächen zu einer Symbolleiste hinzuzufügen. Wir können es benutzen. Ich auf Tasten Tag die Slot-Attribute zeigt an, wo in der Kopfzeile, die Tasten gehen traditionell auf der linken Seite gestartet und Ende ist auf der rechten Seite. Dies wird in den Betriebssystemen von rechts nach links umgekehrt. Die Ionen-Menü-Taste ist das Hamburger-Menü, das wir sahen, als wir die Anwendung gemacht haben. Standardmäßig schmaler, es zeigt und versteckt sich nach Bedarf. Neben den Schaltflächen befindet sich kein Ionentitel mit dem Wortordner, der von zwei geschweiften Klammern umgeben ist. Dies ist ein eckiger, bindender Ausdruck, und er weist angular an, diesen Ausdruck durch den tatsächlichen Wert der Ordnervariable zu ersetzen . Als nächstes ist der Ionengehalt. Hier werden die meisten Inhalte Ihrer Seiten gespeichert. Enthält eine weitere Kopfzeile und Symbolleiste, die nur Titel enthält. Schließlich können wir ein HTML Def-Tag mit einem anderen Bindungsausdruck und einen Absatz mit einem Hyperlink in sehen . Ob Sie es glauben oder nicht, das ist wirklich ein guter Teil der Funktionalität. Sicher, es gibt eine Reihe anderer Dateien, aber die, die ich Ihnen gezeigt habe, sind diejenigen, mit denen Sie in diesem Stadium wirklich vertraut sein müssen . Der Rest wird nach Bedarf beschrieben. Bevor wir diese kleine Tour verlassen,möchte ich ein paar lustige Dinge machen, aber ich überlasse das für die nächste Lektion. Bevor wir diese kleine Tour verlassen, möchte ich ein paar lustige Dinge machen, 8. Eine weitere Sache: 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 Sie sagten, ändern Sie die at pages Array, 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. Was ich tun werde, ist das Outbox-Objekt zu kopieren und einzufügen. Jetzt haben wir zwei von ihnen, die zweite Instanz des Wortes „Outbox“. Lassen Sie uns es ändern, um gesendete Elemente und ändern Sie die oder l zwei Ordner Leben gesendet. Lassen Sie uns das Symbol für einen Moment in Ruhe. Microsoft Outlook verwendet dieses Papierflugzeug für gesendete Elemente. Lassen Sie uns voran und speichern Sie die Seite, denn hier ist, wo es Spaß macht. Sobald Sie diese Änderungen speichern, wird die Anwendung automatisch neu erstellt und der Browser wird neu geladen, um diese Änderungen widerzuspiegeln . Also ändern wir jetzt das Out-Box-Icon und wir werden es auf Alben setzen. Lassen Sie es neu erstellen und sehen Sie, wie sich das Symbol ändert. Was glaubst du, wird jetzt passieren, wenn du auf das neue gesendete Menü klickst? Wir haben keine neue Seite oder eine Route erstellt, so erhalten wir eine 404 Nein, die Ordnerkomponente wird immer noch mit ihrem Namen, der auf die I. D oder Name-Teil der Route, die gesendet wird,gerendert D oder Name-Teil der Route, die gesendet wird, . Dies liegt daran, dass die Ordnerkomponente ein ziemlich generisches Objekt ist. Nicht jede Seite wird so sauber sein, 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. Sie sollten eine vollständig installierte ionische Entwicklungsumgebung wissen, wie Sie eine neue ionische App erstellen und sogar einige kleinere benutzerdefinierte Is ations tun. Also geh weiter, freue dich über deine neu entdeckte Macht, spiele ein bisschen zwischen jetzt und der nächsten Lektion herum. Ich hoffe, Sie bald dort zu sehen 9. @10Tanz – 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. Das neue Projekt 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. Sie sollten nicht nach Kondensator kommen. Aber wenn du das tust, geh weiter und antworte. Ja, 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 im I öffnen, um sich umzusehen. 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: 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. Quelle. Assets Bilder, Koma, Klassenzimmer dot jp G oder J Peg. Öffnen Sie die Homepage, bei der es sich um die HTML-Datei in der Quelle handelt. App. Nach Hause. Löschen Sie alles im Auge auf Inhalt-Tag. Ändern Sie den Wert innerhalb des Ionentitel-Tags von leerer Zehe Home im jetzt leeren Ioneninhalt an einer Ionenkartenkomponente innerhalb der Ionenkarte in einem Standard-HTML-Bild-Tag, wobei die Quelle auf die gerade heruntergeladene Datei gesetzt ist. Assets Bilder, Klassenzimmer Dodge, APEC. Um ein guter Bürger zu sein, sollten Sie auch einen Altarattribute zur Verfügung stellen. Ich benutze das Wort Klassenzimmer. Lassen Sie uns hier innehalten 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 auf dem Terminal ein, das Sie 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 halte das Terminal für die meiste Zeit offen, damit wir nicht so viel im Terminal herumspringen müssen. Geben Sie den Befehl NPM ein. Starten Sie bis jetzt, wir haben 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. Ich werde auch versuchen, den Browser offen zu halten und alles im Vollbildmodus wirbelnd zu haben . Zusammen können Sie die Homepage mit ihrem neuen Titel gerendert sehen, die Ion Card und das Bild Zurück im Code und eine Ion Card Header Komponente von selbst. Dies wird nicht viel so sofort in einer Ionenkarte tun. Untertitel 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 Suchen Sie nach unclos html tax Nach dem Ionenkarten-Header schließen Tag an einem Ionenkarteninhalt-Tag. Und innerhalb dieses 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. Lassen Sie uns noch eine Sache machen, bevor wir die Homepage verlassen, lassen Sie uns einen Link zur Dienstplanseite einfügen, die kurz nach dem Absatz-Tag an einem HTML-Anker-Tag mit zwei Attributen erstellt wird . Eine Routerverbindung, die auf Roster- und Rundungsrichtung eingestellt ist, die auf Vorwärts festgelegt ist. Innerhalb des Tags stellt ihm Texte wie Go to Roster zur Verfügung. Dies wird eine Schaltfläche mit der deklarierten Navigation erstellen, so dass wir auf die Dienstplanseite gehen können sobald sie existiert. Der Grund, warum wir Router Link anstelle der typischen ein Baum von Attributen verwenden, ist, so dass Ionic die Navigationsanimation verbessern wird. Für uns bedeutet die Router-Richtung, die Plattformen typische Vorwärtsanimationsrichtung zu verwenden. Wir hätten auch eine Route zurückgeben können, die uns eine etwas andere Animation gegeben hätte . Die Seite wird gespeichert. Sie können den Link gerendert sehen. Aber wenn Sie darauf klicken, wird nichts tun. Wir haben die Dienstplanseite noch nicht erstellt, also machen wir das als Nächstes 12. Hinzufügen der Roster: Inzwischen sollten Sie es bequem sein, Ionic Tags zu einer Seite hinzuzufügen, aber wir haben keine neue Seite erstellt. Wir werden das jetzt angehen, aber erstellen, was wohl die komplizierteste Seite in der Anwendung sein wird, um eine neue ionische Seite zu erstellen . Wir können die Ionics, Eli oder die Winkel-Seelye benutzen. Eines der Dinge, die ich am besten an der Verwendung von eckig mit Ionic mag, ist das reiche Template ing, das eckig auf den Tisch bringt. Wie wir bereits gesehen haben, delegiert Ionic einen Großteil seiner Befehlszeilenoperationen an die zugrunde liegende eckige CLI , die es gegebenenfalls erweitert, Erstellen von Seiten ist eine dieser geeigneten Zeiten im Terminal. Ich werde den NPM-Startbefehl stoppen und ich werde unter dem Befehl Ionic Generate Page Roster, die Death Stash Dash Run Option. Ich verwende gerne die Trockenlauf-Option, da ich die Chance habe zu sehen, was in Tweak Dinge passieren wird wenn ich nicht mag, was ich sehe. Das obere sie bekommen zeigt mir zwei Dinge hier, eines, dass es einen neuen Dienstplanordner, eine Seite, ein separates Modul für diese Seite, einige Komponententests und Stile erstellt. Außerdem fügt es automatisch die Seite in das Apse-Routing-System hinzu, so dass Sie einen Großteil der Grunz-Arbeit für Sie sehen können. Ich habe auch eine Nachricht, dass die Ionic CLI bereit ist, selbst aktualisiert zu werden, und ich werde das tun. Aber ich werde dich nicht aufpassen lassen. Ich werde diesen Befehl dieses Mal ohne die Trockenlauf-Option erneut ausführen, denn ich bin glücklich mit dem, was es mir bringen wird. Weil ich den Server gestoppt habe. Ich werde weitermachen und es wieder mit NPM starten. Jetzt, da es fertig ist, kann ich die Homepage wieder rendern. Sobald ich auf diesen Dienstplan-Link geklickt habe, wird die Standard-Dienstplanseite nur grand angezeigt. Da ist nicht viel, aber das können wir uns in Kürze darum kümmern. 13. Studentenservice: bevor wir die Dienstplanseite ausfindig machen. Wir müssen einige Schüler später anzeigen lassen wollen, um die Liste in einen Tag zu binden, um eine Art zu speichern , aber wir müssen das nicht tun, nur um den David auf der Seite angezeigt zu bekommen. Dafür werde ich einen einfachen Studentendienst verwenden, den wir in die Seiten injizieren können, die es benötigen. erneut die CLI verwenden, Lassen Sie unserneut die CLI verwenden,um den Dienst zu erstellen. In diesem Fall spielt es keine Rolle, ob wir die eckige CLI oder die Ionics Eli verwendet haben. Also, um die Dinge ein wenig zu schütteln, lassen Sie uns die eckige CLI verwenden. Geben Sie den Befehl N g G für Generate Service Studenten ein , der der Name des Dienstes ist, und verwenden Sie erneut den Trockenlauf Befehl. Dieser Befehl funktionierte nicht und hier ist der Grund. Als wir das Ionic CLI-Paket installiert haben, haben wir es global installiert. jedoch Commit, Die Ionic startenjedoch Commit,wenn ein Ionic Projekt erstellt wird installiert. Der NGC-Verbündete ist lokal die lokale Abhängigkeit des Projekts, also ist es nicht auf meinem Weg. Mein System weiß nicht, wo es zu finden ist. Es gibt zwei Möglichkeiten, wie wir umgehen können, dass wir entweder den NGC global installieren können oder wir können einen kleinen Dienstprogrammbefehl verwenden, der von Notiz und in PM namens MPX bereitgestellt wird. Wenn wir den gleichen Befehl mit N P X vorgeschrieben haben, weiß dieses Tool, in meinem Node Modules Ordner nach dem angegebenen Befehl zu suchen. Also lassen Sie uns das einfach wieder in P X ausführen, und jetzt werden Sie sehen, dass es funktioniert. Und wieder benutzen wir Trockenlauf, um zu sehen, was es zu dio geht. Standardmäßig wird der Dienst im APP-Ordner erstellt, aber nicht in einem eigenen Ordner, und er wird mit dem Komponententest erstellt. Jetzt gehen wir weiter und laufen es wieder ohne Fahrer und Flagge, wenn es fertig ist. Öffnen Sie Studenten Dot Service Punkt ts. Innerhalb dieser Datei wird eine Schnittstellenkonstante und eine Funktion zu erstellen. Es wird ein Studentenobjekt als Schnittstelle zu erstellen. Denken Sie daran, dass Schnittstellen im Java-Skript nicht vorhanden sind und beim Erstellen vollständig verschwinden. Ihr einziger Zweck ist für uns, Parametertyp zu aktivieren, Code-Vervollständigung zu überprüfen und Intel einen Sinn innerhalb des Codes eingeben. An dieser Stelle weiß ich nicht alles, was ein Studentenobjekt enthalten sollte, aber diese Felder sollten für unsere Zwecke ausreichen. Nun weisen diese Fragezeichen auf den meisten Feldern darauf hin, dass diese Fersen optional sind. Um also ein gültiges Studentenobjekt zu erstellen, muss ich mindestens ein I. D mit Vornamen und einem Nachnamen angeben. Nein, ich würde auf dieses Statusfeld hinweisen, weil es zunächst etwas seltsam aussehen könnte, aber diese Zeile besagt, dass Status eine optionale Zeichenfolge ist, aber es kann immer nur auf einen von zwei spezifischen Werten gesetzt werden, die entweder vorhanden oder fehlen. Dies ist eine Typoskriptkompilierte Zeit für die Einschränkung und hat keinen Einfluss auf das Auftragsskript , das generiert wird. Was es tun wird, ist, uns daran zu hindern, den Code zu kompilieren. Wenn wir jemals versuchen, einen anderen Wert für dieses Feld zu verwenden, wird es auch diese Codevervollständigung bereitstellen, wenn Werte mit dem Feld gesetzt oder verglichen werden, was eine nette Bequemlichkeit ist. Lassen Sie uns eine Reihe von Schülern erstellen, die wir anstelle einer Datenbank verwenden können. Moment nenne ich es Mark Studenten. Nun für die Funktion innerhalb des Klassenkörpers, lassen Sie uns eine Funktion namens get all students erstellen. Dies wird eine Kopie des Mock-Studenten-Arrays zurückgeben, und ich mache dies mit dem Spread-Operator, im Wesentlichen eine Kurzschrift für die Erstellung einer flachen Kopie des Irak später diesen Dienst mit mehr Funktionalität ausfüllen wird . Aber vorerst wird uns das dorthin bringen, wo wir sein müssen. Es ist täuschend einfach, aber das ist nur, weil es nicht viel macht. Jetzt gehen wir zurück auf die Dienstplanseite und nutzen sie. 14. Student: Jetzt müssen wir die Schüler, die wir gerade erstellt haben, in die Dienstplanseite einfügen. Offene Liste Zweifel Seite Punkt ts Kurz vor dem Konstruktor müssen wir eine variable Zehe erstellen, halten Sie das Array der Schüler, die er aus dem Studentendienst importiert werden muss. Als nächstes müssen wir einen Verweis auf den Studentendienst in die Seiten injizieren. Konstruktor. Wir tun dies, indem wir einen neuen privaten Parameter namens Students Service of Type Students Service einfügen. Ich weiß, dass es verwirrend ist. Stellen Sie sicher, dass Sie das Gehäuse richtig oder eckig bekommen, und Typoskript wird nicht mit Ihnen zufrieden sein. Sie den Parameter privat markieren, wird der Parameter automatisch als Mitglied der Komponentenklasse verfügbar gemacht. Es ist eine praktische Abkürzung. Typen bietet für uns innerhalb des Konstruktors, was eine get all Studenten Funktion aus dem Studentendienst und ein Zeichen genannt wird , dass die Ergebnisse der Komponenten Studenten Array öffnen nun die Dienstplanseite HTML-Datei, so dass wir einen Markt erstellen können, um die Studenten, die die Header bereits gesetzt haben und ihr Titel hat bereits die Liste festgelegt. Also gibt es nichts, was wir genau dort tun müssen. Ich hoffe, dass Ihnen der Ionenkopf bekannt ist, wie wir ihn auf der Homepage und auch während der Führung gesehen haben . Wir haben bereits einige Ioneninhalte, aber es ist leer. im Innern Lassen Sie unsim Innerneine 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 Rap Ionen-Etiketten hoch auf Tasten, Ionensymbole, Vorarbeiter setzen Felder 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 innerhalb des Auges in der Liste. Schwächung iteriert über das Studenten-Array mit einer N G vier Direktive auf das äußerste Element in der Liste. In diesem Fall wird es ein Ionen-Element Schiebekomponente auf der Zuweisungsseite des N G vier bieten lassen Sie uns Schüler von Studenten. Dies wird ein Auge auf Gegenstände Futter Gegner und alles in ihm für jeden Schüler in der Schüler-Array I auf Artikel Schieben erstellen wird uns mit einem neuen Gegenstand, Streichen oder Dia-Option. Innerhalb davon wird ein Ionen-Element-Tag sein. Diese Komponente wird das gesamte Listenelement einkapseln, das 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 setzen Sie die Namensattribute zwei Personen Gliederung der Ionenbeschriftung. Binden Sie Text an den Vor- und Nachnamen der Schüler, 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 den einen Linken benutzte das Auge aus Umriss, das ein Umriss eines Auges mit einer Linie durch ihn ist. Die Art und Weise, wie wir die Symbole bedingt rendern, besteht darin, jedem Symbol die NGF-Direktive hinzuzufügen. Man wird zur Wahrheit auswerten. Der Status der Studierenden ist vorhanden. Der andere wird gerendert, wenn der Studentenstatus abwesend ist. Beachten Sie, dass es durchaus möglich ist, dass der Schülerstatus keinen Wert hat, da das Statusfeld optional ist. In diesem Fall wird weder ich komme 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 Elements schieben, wenig innerhalb dieses Tags bei einer einzelnen Ionen-Elementoption erscheinen. - Tech. 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 und ziehen Sie ein Element in Richtung Anfang des Elements, das Sie die Schaltfläche Löschen sehen sollten , können Sie 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 die 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. Ein paar dieser Dinge sind Zeichen abwesend oder vorhanden. 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 jedem Schüler in der Ionen-Liste ein Menü hinzuzufügen. 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ätigkeit Blatt können eine Rolle enthalten, die entweder destruktiv oder storniert sein kann . Destruktive wird verwendet, um anzuzeigen, dass etwas Permanentes passieren wird und oft für Löschvorgang auf IOS-Geräten Tasten verwendet wird, wobei die zerstörerische Rolle anders als der Rest gerendert wird, 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, ein Student vorhanden ist oder abwesend der Lead ein Student ist oder abbrechen die Aktion und nichts zu tun. Um dies zu tun, müssen wir ein wenig einrichten zuerst in der Liste Punkt pe dot ts Datei. Wir müssen den Action-Schaf-Controller in den Komponenten Constructor injizieren. Dies ermöglicht es uns, ein Aktionsblatt als Reaktion auf einen Button Klick zu erstellen. Als nächstes müssen wir voran gehen und das eigentliche Blatt nutzen. Also werde ich hier eine Funktion setzen, die Present Action Sheet genannt wird. Ich werde warten, ein paar Anrufe es gibt ein Versprechen zurück. Die Funktion muss also eine Spüle sein. Es wird den Schüler akzeptieren, so dass wir das entsprechende Aktionsblatt für den Schüler anzeigen können angeklickt wurde. Als erstes möchte ich das Aktionsblatt selbst erstellen, was wir tun, indem wir die Aktionsblätter aufrufen. Controller erstellen Funktion, erstellen Renditen des Versprechens. Also wollen wir darauf warten. Create nimmt einen einzelnen Optionsparameter , den ich erklären werde, wie wir gehen. Die erste ist Header-Attribute, die der Titel des Aktionsblatts sein wird. Und ich werde das auf die Verkettung der Schüler Vor- und Nachnamen einstellen, dass wir hier ziemlich gute Intelligenz bekommen. Der Grund, warum sich V s Code beschwert, ist, weil er weiß, dass ich eine Schaltfläche hinzufügen muss und ich das noch nicht getan habe, Also das ist das bloße Minimum für ein Aktionsblatt. Aber wie Sie mir sicher zustimmen werden, wäre das nicht sehr nützlich. Der erste Knopf wird also die Markierung vorhanden sein. Aber wenn Sie sagten, es ist Text vorhanden zu markieren, gut gesagt, es ist Symbol zu I und dann wird eine Pfeilfunktion als Handler zur Verfügung stellen, um die ausgewählten Studenten Status zu präsentieren. Und wie ich es versprochen habe, hast du bemerkt, dass es Intel einen Sinn gab. Zeigen Sie mir den rechtlichen Wert der Zustände. Die nächste Schaltfläche wird der entgegengesetzte Markt sein, abwesend und wird das IOFF Icon verwenden. Oder besser gesagt, das Auge aus Umrisssymbol. Und seine Handler-Funktion wird auch eine enge Funktion sein, um den Studentenstatus auf abwesend zu setzen . Die nächste Schaltfläche ist die Schaltfläche Löschen, die Löschen verwendet wird, ist seine Textbeschriftung, das Papierkorbsymbol, und dies ist optional. Wenn Sie also den Handler so einstellen möchten, dass er die Funktion „Student löschen“ aufgerufen hat, werde ich mich jetzt nicht stören. In der nächsten Lektion. Ich werde das etwas anders regeln, also werde ich mich einfach nicht darum kümmern, irgendetwas anzurufen. Und denken Sie daran, diese Symbole und ihre Namen kommen von Ionen-Icons dot com und schließlich die Abbrechen Taste. Dieser wird einen Text von Abbrechen haben und ich bin irgendwie nah, und wir können die Rolle so einstellen, dass er abbricht und sich überhaupt nicht mit der Handlerfunktion beschäftigt, und das schließt die Erstellung des Aktionsblatts ab. Das Schauspielerblatt zu haben, wird aber gar nichts tun , bis wir anwesend sind. Also, wie gesagt, erstellen die tatsächlichen Sheet-Controller Funktion Rückkehr zu versprechen. So erwarten wir, dass Versprechen speichern, das Ergebnis des Versprechens in der ständigen Aktion Blatt. Und nur dann können wir anwesend nennen, was auch ein Versprechen zurückgeben wird. So warten wir auf Aktionsblatt Punkt vorhanden. Als Nächstes. Lassen Sie uns eine Funktion erstellen, um einen Schüler zu löschen. Auch wenn ich in dieser Lektion nicht anrufe, möchte ich es einrichten, falls du herumspielen und dich anrufen möchtest. Der Code filtert einfach das Schüler-Array, das wir vom Studentendienst als nächstes links auf eine Schaltfläche erhalten haben, um das Aktionsblatt zu starten. Und wir tun das in der Liste Seite Markup und ein Ion Buttons Tag unmittelbar nach den beiden vorhandenen Icon und direkt vor dem Ion Ion Item Abschlusssteuer. Geben Sie den Ion-Tasten Tag einen Steckplatz nach und sagte sein Ende, was bedeutet, dass es am Ende des Elements angezeigt wird. Als nächstes fügen Sie den Ion-Button-Tags erneut als untergeordnete Elemente des Schaltflächen-Tags hinzu. Beobachten Sie die Singular und Plural innerhalb jeder Taste in einem Auge auf meine Ruhe mit den Slot-Attributen , Zehen-Symbol auf Lee, geben Sie das Symbol der ersten als Ellipse horizontalen Umriss und setzen Sie die 2. 1 auf Chevron umrissen bei einem Klick-Handler auf die Schaltfläche mit den Auslassungspunkten, wenn Sie darauf klicken. Wir möchten die aktuelle Aktionsblattfunktion aufrufen und den aktuellen Schüler von ihrem Weg übergeben. Moment lassen wir den Knopf mit dem Chevron in Ruhe. Das werden wir später beenden. Speichern Sie die Datei und werfen Sie einen Blick auf die Ergebnisse. 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. Mir ist gerade etwas aufgefallen, das wir vergessen haben. Ich habe bereits erwähnt, dass in der Regel auf einem IOS-Gerät alles, was die Rolle des destruktiven wie Löschen hat, rot sein würde. Es gibt also ein paar Dinge, auf die ich hier hinweisen möchte. Der Standardanzeigemodus für Ionic ist nicht Iowa. In der Tat ist es Materialdesign so, wie Sie es zum Wechseln zwingen können. Öffnen Sie einfach die Entwickler-Tools und Chrome. Lassen Sie mich das einfach in Ordnung bringen. Setzen Sie die Entwickler-Tools auf den Boden, und was passiert, wenn wir den Geräte-Symbolleistenmodus auswählen? Dann können wir ihm sagen, wie wir uns benehmen wollten. Also lassen Sie mich das für Sie senken. Jetzt ist es einfach als Reaktion auf den Motor. Aber ich kann ausdrücklich sagen, dass es in das geht, was im Wesentlichen eine iPhone-Version ist, und wir bekommen sogar mit dem entsprechenden Modell, sogar den richtigen Geräterahmen. Aber was Sie hier sehen werden, ist, wenn ich darauf klicke, es ist immer noch im Materialdesign. Also der Weg, das zu beheben, ist, die Seite zu aktualisieren, was ich mit Command tun werde, sind jetzt. Sie können sehen, dass die Symbole blau werden. Der Text in der Titelleiste wurde zentriert und die Schriftart wurde geändert. Also, jetzt ist es ein IOS-Modus. Chrome berichtet nun an Ionic, dass es ein IOS-Gerät ist, das ist wirklich glatt, aber jetzt bemerken, was passiert, wenn ich das Aktionsblatt aufzurufen. Die Spur wird immer noch nicht gelesen, und Sie haben wahrscheinlich gesehen, warum ich daran erinnert habe, es damit zu tun. Die Schaltfläche „Löschen“. Hier können Sie sehen, die Farbe ist Gefahr. Also, wenn Sie zurück in die Liste Punkt ts der Seite Punkt ts gehen, wo das Aktionsblatt definiert ist, können Sie sehen, dass der Lead etwas fehlt. Es fehlt seine Rolle. Alles, was wir tun müssen, ist, ihm eine Rolle von destruktiven zu geben. Sobald wir ihm diese Rolle geben, speichern wir die Datei, die Seitenrückseiten. Und jetzt wird es so gelesen, wie wir es erwartet haben. Also bin ich froh, dass ich mich daran erinnere, das zu tun, bevor ich diese Lektion Wir speichern den Rest der Funktionalität für eine zukünftige Lektion. Für jetzt, wenn Sie wollen, fühlen Sie sich frei, um zu spielen. 16. Confirmation 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 den Benutzer zumindest zu warnen . . Es ist besser, den Benutzer um Bestätigung zu bitten, und das werden wir hier tun. In der vorherigen Lektion ruft der Handler für den Lösch-Button 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, dass etwas Wichtiges im Begriff ist zu passieren, 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 Innerhalb der Dienstprogrammseiten Komponentencode, den Sie Dialekte injizieren müssen. Alert-Controller in den Konstruktor. Stellen Sie sicher, dass es oben in der Datei importiert wird. Als nächstes erstellen Sie eine neue Funktion mit dem Namen vorhanden Löschen Warnung. Es muss ein Schülerobjekt wie die gegenwärtige Aktionsblattstrategie zwischen dem Erstellen des Aktionsblatts und der Löschwarnung akzeptieren . Fast identisch. Die Create-Funktion nimmt und Optionsobjekt genauso wie die Aktion shake Controller erstellen Funktion tut und es gibt ein Versprechen zurück, das an die Warnung resultiert. Es gibt drei Attribute, die den Text im Inneren gesteuert und ich eine Warnung. Das header -Attribut ist eine Zeichenfolge, die oben in der Arbeit angezeigt wird. Sie so etwas wie löschen Sie diesen Schüler. Die Sub-Header-Attribute erscheinen nur innerhalb des Alert-Body gesetzt dies nach sein Captain Nation der Schüler Vor- und Nachnamen zu wecken . So weiß der Benutzer genau, welcher Schüler gerade gelöscht werden soll. Das Nachrichtenattribut ist der Hauptteil der Warnung verwenden Sie die Zeichenfolge wie dieser Vorgang kann nicht rückgängig gemacht werden. Schließlich benötigt die Warnung eine Reihe von Schaltflächen. Sie definieren diese Schaltflächen genau wie für das eigentliche Blatt. Die erste Schaltfläche ist die Schaltfläche „Löschen“. Es benötigt einen Handler, der den Schüler löscht. Die zweite Schaltfläche sollte ein Abbrechen-Button mit der Rolle Abbrechen sein. Ich werde den Text benutzen. Nichts dagegen, es braucht keinen Handler. Jetzt. Abschleppdraht all das zusammen. Scrollen Sie zur aktuellen Aktionsblattfunktion. Suchen Sie die Schaltfläche Löschen, wenn Sie angerufen haben. Student löschen. Das wurde durch einen Aufruf zum Anzeigen der Löschwarnung ersetzt. Wenn Sie es wie ich übersprungen haben, fügen Sie einfach eine schmale Funktion hinzu, als die Handlerattribute, die die gegenwärtige Elite-Warnung aufrufen wird. Vergessen Sie nicht, den Schüler zu übergeben, wenn Sie sich erinnern, ist eine andere Löschtaste auf der Seite mit einer innerhalb der Ionen-Element-Option, aber das passiert nicht in der Komponentendatei, sondern in der Markup. Öffnen Sie also die HTML-Datei für die Dienstprogrammseite und finden Sie die Ionen-Element-Optionskomponente mit dem Namen delete bei einem Klick-Handler und platzieren Sie den gleichen Aufruf, den wir zuvor getan haben. Präsentieren Sie die Lead-Alert mit dem Schüler in diesem Fall, die Student Variable kommt aus dem n G vier Ausdruck von online neun. Speichern Sie die Datei und das hintere Ende des Browsers Wenn Sie sehr adleräugig sind, werden Sie feststellen, dass ich etwas vergessen habe. Wenn wir also Löschen aus dem Aktionsblatt auswählen, passiert nichts. Ebenso, wenn wir selektiv Drachen, passiert nichts. Wissen Sie, wo der falsche, den wir die Warnung erstellt haben? Aber wir haben es nicht wirklich benutzt. Das war der ganze Punkt und das Warten in erster Linie. So wie Sie das jetzt tun, wenn Sie den Alert-Punkt genau so aufrufen, wie wir es mit der aktuellen Aktionsblattfunktion gemacht haben , kehrt es auch zu versprechen zurück, also ist es keine schlechte Idee, es zu erwarten, obwohl in Realität ist es nicht super notwendig. Also lasst uns das schnell versuchen. Speichern Sie die Datei. Wir gingen auf die Seite und jetzt löschen wird uns fragen. Wir können sagen,, Macht nichts aus oder wir könnten weiter gehen und es verlassen und es ist viele Male eine Anwendung braucht um eine Benachrichtigung an den Benutzer, 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 Ihren Blick auf Toast anpassen möchten, nachdem Sie die Lektion beendet haben, fühlen Sie sich frei in der Komponentendatei für Dienstlisten Seiten. Wir müssen dem Konstruktor erneut Ionics Toast-Controller hinzufügen. Stellen Sie sicher, dass es oben importiert wird. Als nächstes ändern Sie Student löschen, um zu erstellen und sofort präsentiert Toast Benachrichtigung. Die Nachrichtenattribute sollten eine kurze Aussage enthalten, aus der hervorgeht, dass der Student gelöscht wurde . Seien Sie so detailliert, wie Sie wollen, aber denken Sie daran, je kürzer ist normalerweise besser. Die voreingestellte Toastposition ist vertikal auf dem Bildschirm zentriert. Ich beschloss, es nach oben zu verschieben, aber ehrlich gesagt, Sie können es überall hin setzen, wo Sie wollen. Sie können zwischen oben, Mitte oder unten wählen. Das Attribut Dauer steuert, wie lange das Auge auf Toast wartet, bevor es sich automatisch entlässt. Die Dauer ist eine Ganzzahl in Millisekunden. Achten Sie darauf, keine Dauer anzugeben, die zu kurz ist, und geben Sie definitiv keine Stärke, wenn Sie die Dauer weglassen. Attribut. Der Toast bleibt auf unbestimmte Zeit auf dem Bildschirm, Benutzereingriff erfordert, um es zu schließen, was eine Schaltfläche erfordern würde, wenn Sie bemerken, dass warten unterstrichen ist. Und das liegt daran, dass ich den Dorfschüler nicht als Spüle markiert habe, die es ermöglichen wird. Sie können ein Schaltflächen-Array zu einem Auge auf Toast bieten. Nur ist mit dem Aktionsblatt und dem Ich ein Alarm. Wenn Sie sich so geneigt fühlen, voran zu gehen und fügen Sie einen und schließlich vergessen wir nicht, anzurufen. Präsentieren Sie auf dem Toast, und das ist alles, was es gibt. Speichern Sie die Datei und verlassen Sie den Browser. Aktualisieren. nun Wenn Sienuneinen Schüler zusätzlich zum Namen des Schülers löschen, der aus dem Dienstplan verschwindet nachdem Sie die Bestätigung vorgenommen 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 Kistenseite 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 Typ nach Butto-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ßen, wenn Sie es auswählen, stellen Sie sicher, dass Sie es mit einem Auge auf die Menü-Umschaltkomponente umschließen. Andernfalls bleibt das Menü geöffnet. Der Ionen-Menüschalter kann auch verwendet werden, um ein Menü zu öffnen. Daher der Name umschalten. Finden Sie einen Fehler. Es wird sich automatisch verstecken, wenn es erkennt, dass sein Menü deaktiviert ist oder in einem geteilten Schmerz dargestellt wird , wie wir es hier tun. , dass Wenn Sie möchten, dasses die ganze Zeit sichtbar ist, stellen Sie sicher, dass Sie die automatische Ausblendung genau einstellen. So falsch. 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 lassen Sie uns eine jetzt offene App-Dot-Komponente bauen, die ts Dies ist, wo wird das Menü definieren. Innerhalb der Komponentenklasse erstellte Array von zu Objekt liberalen ein für die Homepage mit dem entsprechenden Ural und Icon eins für die Dienstplanseite mit seinem L-Schrägstrich und für das Symbol, Lassen Sie uns Leute verwenden. Als nächstes kommt das Menü selbst, innerhalb der App Dot Komponente dot html bei einem Ion Split Schmerz und sagte, dass sein Inhalt ich d, um alles andere auf der Seite zu bedeuten , sollte innerhalb des geteilten Schmerzes nur innerhalb des geteilten Schmerzes und vor dem Router-Steckdose sein auf einem Ionen-Menü mit seinem Inhalt i d. Nachdem auch zu mir gesagt und sagte Es ist Typ toe Overlay Pushor offenbaren. Persönlich bin ich teilweise überlagert, aber verwende den Wert, den du bevorzugst. Diese Inhalte, die ich entwertet sagen, die Komponenten, die Router an, was sie so steuern , bevor wir vergessen, es zu tun, sagte der Ionen-Router Steckdose Komponenten I. D. 10 Main. Dies wird sie alle sofort zusammenbinden, innerhalb des Augen-on-Menüs in einem Ionen-Header, der eine Ionen-Werkzeugleiste enthält, und innerhalb dessen und ich auf Titel, setzen Sie den Titelwert auf Menü direkt nach dem Ionen-Header bei einem Ionen-Inhalt in nur innerhalb davon und ich auf der Liste. Dies ist, wo das Menü erstellt wird und dies durch Iterieren über das at pages Array tun. Erstellen Sie ein Ionen-Menü-Toggle-Tag mit einer N G vier-Direktive. Geben Sie APP-Seiten, die Schleifenvariable an und die Seiten haben das Objekt, über das generiert werden soll. Wie ich bereits erwähnt, sagte die auto hide Eigenschaft falsch, es sei denn, Sie genießen die Dinge verschwinden ohne ersichtlichen Grund genießen. 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 am Ende zu einer Route senden, die buchstäblich auf Seite dot euro genannt wird. Ist, dass die Router-Richtung auf keine, Oder root Ihre 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 wollen. Trennen Ihrer Menüelemente besteht darin, dass die Zeilen voll oder ein Mithi danach vollständig zuschreiben . Ich bin kein Fan von der Art, wie es aussieht, also wähle ich keine innerhalb des Elements und ein Ionensymbol mit seiner Menge, die zu starten eingestellt ist, und es ist Symbol auf das AP-Seitenpunktsymbol gesetzt, achten Sie erneut auf diese Bindungssyntax. Als nächstes ist der Menütitel selbst, mit einem Auge auf Etikett mit dem Text, der an den Seitentitel gebunden ist, implementiert wird. Als nächstes müssen wir einen Menü-Button auf beiden Seiten hinzufügen. Und nein, es ist nicht automatisch. Also zuerst öffnen Homepage, dass Kim il in der Ionen-Werkzeugleiste kurz vor dem Ionentitel, Sie müssen eine Ionen-Schaltflächenkomponente mit Slot gleich Start hinzufügen, dann eine Ionen-Menüschaltflächenkomponente. 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 ausführen. 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 zu navigieren. 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, Komponente 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 in Schwierigkeiten geraten, achten Sie darauf, einige Kommentare zu hinterlassen. 18. Anwenden von Menschen, 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 laufen: 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: 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 in App Store anmelden Connect dot apple dot com. So wie Sie sehen können, es hat noch nicht einmal eine Nikon, Also lassen Sie uns weiter gehen und klicken Sie darauf und schauen, was wir zu tun haben. Es sieht so aus, als ob wir mir viele Bilder zur Verfügung stellen müssen, die Bilder oder einige der schwierigsten Dinge zu tun. Da es so ein manueller Prozess ist, gibt es Möglichkeiten, es zu beschleunigen und die Screenshots Ihrer Anwendung in Aktion zu bringen, Miss, überspringen Sie die Bilder für jetzt und suchen Sie einfach nach dem Rest davon, Sie müssen bis 170 Zeichen des Werbetextes. Dies ist der erste Texttext, den Ihre potenziellen Downloader im APP Store sehen werden . Sie können auch bis zu 100 Zeichen Schlüsselwörter angeben. Es gibt eine ganze Kunst, um Keywords und ihre Websites, die dem Thema gewidmet sind, auszuwählen. Apple wird Unterstützung benötigen. Sie sind, wo können die Leute hingehen? Wenn sie Fragen zur Unterstützung der Anwendung haben, können Sie auch ein Marketing Sie, Earl, das ist ein wenig anders. Dies wird ein Mädchen, das im APP Store verfügbar ist, dass die Leute klicken können, um weitere Informationen zu finden , die Sie zumindest zur Unterstützung zur Verfügung stellen müssen. Du bist krank. Sie müssen nicht das Marketing Sie Earl Beschreibungen liefern, wo Sie eine Menge Spaß haben können . Hier möchten Sie die Geschichte Ihrer Anwendung erzählen. Sie haben bis zu 4000 Zeichen, um dies zu tun. Meine Empfehlung hier ist, dass Sie viel Zeit damit verbringen, diese Beschreibung zu erstellen. Denk dran. Ist die Zielseite für Ihre Anwendung. Du musst es verkaufen. Warum möchten die Leute Ihre Anwendung verwenden? Diese Anwendung, die wir jetzt erstellen, befasst sich nicht mit EI Message App für die Apple Watch. Also werde ich die überspringen. Ich sage nicht, dass es nicht wichtig ist, aber es ist hier nicht relevant. Wenn Sie nach unten scrollen, gelangen Sie zum Build-Abschnitt. Also, was wir hier haben, ist, dass wir hineingehen müssen, wählen Sie einen Build unserer Anwendung, und anscheinend fehlt es etwas und ich werde mir das ansehen, Sehen Sie, ob es uns erlaubt, es auszuwählen. Es will wissen, ob ich irgendwelche US-Verschlüsselungsexportgesetze verletze und soweit ich weiß, die Teilnahme nicht. Also werde ich voran gehen und klicken. Nein, wir machen keine https-Anrufe, also gehe ich weiter und klicke auf fertig. Das Anwendungssymbol ist, wie Sie sehen können, das Standardsymbol von Kondensator. Um das zu beheben, müssen wir zurück in X Mantel und an den richtigen Icons, die wir dort wollen, gehen und dann ein neues gebaut hochladen. Das machen wir später. Ich möchte nur zuerst alles im APP Store Connect durchlaufen. Die Version. Ich glaube, es hat direkt aus dem Anwendungspaket genommen. Hier. Sie müssen erklären, wer das Urheberrecht besitzt, wer die Rechte an der Anwendung besitzt und Sie sein sollten. Wir müssen eine Altersfreigabe angeben, und Sie tun dies, indem Sie in die Bearbeitung gehen und eine riesige Liste von Fragen beantworten. Also denke ich, das wird ziemlich einfach für mich sein, wo es keine gewalttätige App ist. Es gibt keinen Humor ist nicht ausgereift Thema. Es ist kein Horror. Es gibt keine Medizin, keinen Alkohol, kein Glücksspiel. Sicherlich keine Nacktheit greift überhaupt nicht auf das Web zu, zumindest nicht derzeit. Ebenso wenig bietet es dem Benutzer uneingeschränkten Zugriff auf das Web, und es gibt keine Wettbewerbe oder Glücksspiele. 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. In diesem nächsten Abschnitt wird beschrieben, ob der Rezensent der Mensch, der Ihre Bewerbung überprüft, sobald er eingereicht hat, sich anmelden muss, um die APP zu verwenden, ist eine wichtige Sache, auf die Sie achten müssen, weil es möglich ist, dass Sie kennwortgeschützte Konten in Ihrer App. Wir überspringen das nicht einfach. Kontaktinformationen sind ziemlich unkompliziert. Wenn Ihre Anwendung kompliziert genug ist, können Sie Dokumentation, Videos oder andere Hilfestellungen anhängen, um es der Person, die sie überprüft, einfacher zu machen . Um zu verstehen, wie Sie Ihre Anwendung und die letzten beiden verwenden, wann möchten Sie, dass sie die Anwendung für die Öffentlichkeit freigeben? Sie können es manuell tun. Sie können automatisch Teig, was der Fehler ist, oder Sie können ein Datum angeben. Lassen Sie nicht vor diesem bestimmten Datum in der Zeit freigeben. Und dann schließlich, Werbung Wird Ihre Anwendung verwendet? Fügt hinzu, Wird es Anzeigen und beleidigen, dass der harte Weg vor langer Zeit, dass, wenn Sie Google AdSense verwenden , dass Gräfin, sagen Sie ja, und wenn Sie sagen, es nein und Ihre Anwendung wirklich tut, wird es abgelehnt. Gemeine Anwesenheit tut es nicht. Aber ich wollte nur auf die Gäste klicken, um zu zeigen, was die anderen Optionen und Anforderungen sind . Nehmen wir also an, wir werden Anzeigen schalten, aber wir werden APS nicht miteinander verknüpfen, damit die Anzeigen in Beziehung stehen können. Ich glaube, das ist das, was die 2. 1 ist. Ich habe nie etwas anderes getan, als einfach zu dienen, also habe ich nie überprüft entweder die Jukeboxen und Sie müssen auf diese klicken oder Sie können nicht fortfahren. Und dann wieder, stellen Sie sicher, dass Sie den Text lesen. Wenn Sie die Fragen falsch 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, Ihr Konto möglicherweise gesperrt vollständig. Lassen Sie mich Scroll wieder nach oben rollen. Ich werde dich nicht dazu bringen, 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 Vorschauen 24. 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. 25. 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. 26. Bonusmaterialien: 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.