Workshop zur Entwicklung mobiler Apps mit Ionic und Angular

1. CoursePromo: Möchten Sie mobile Apps erstellen? Möchtest du Androiden oder iPhones ins Visier nehmen? Wenn Sie Ihre eigene mobile App erstellen möchten, aber nicht die Zeit nehmen möchten, mehrere Technologien zu erlernen Dann ist dieser Kurs genau das Richtige für Sie. Bei aktuellen Technologien wie Ionic müssen Sie Standard-Webtechnologien wie HTML, Javascript und Typoskript nicht ignorieren Javascript und Typoskript Ich werde dir nicht nur zeigen, wie einfach es ist, deine eigene App zu erstellen, sondern auch, wie viel Spaß es machen kann Darüber hinaus werden Sie in der Lage sein, eine einzige Anwendung zu schreiben , die sowohl auf Android-Geräten als auch auf iPhones funktioniert Schauen Sie sich diese Apps an. Alle von ihnen wurden mit Ionic entwickelt. Und das sind nur einige , die ich selbst gebaut habe. Es gibt Tausende mehr. Tatsächlich sind fast 20% jeder Anwendung eine ionische App. Wie toll ist das? den wichtigsten Themen, die im Kurs behandelt werden, gehören das Erstellen der Benutzeroberfläche mit dem Ionic-Framework, das Hervorheben der Arbeit, die ionic für Sie erledigt, und das Erstellen einer Demo-App, die perfekt aussieht, wenn sie auf iPhones, Androiden oder sogar gehören das Erstellen der Benutzeroberfläche mit dem Ionic-Framework, das Hervorheben der Arbeit, die ionic für Sie erledigt, und das Erstellen einer Demo-App, die perfekt aussieht Desktop-Browsern läuft Androiden oder Ich zeige Ihnen, wie Sie mit ionischen Komponenten wie Menüs, Karten, Aktionsblättern, Benachrichtigungen und Toast-Benachrichtigungen ein nativ aussehendes Erlebnis schaffen mit ionischen Komponenten wie Menüs, Karten, Aktionsblättern, Benachrichtigungen und Toast-Benachrichtigungen ein nativ aussehendes Erlebnis ionischen Komponenten wie Menüs, Karten, Aktionsblättern, Benachrichtigungen und Toast-Benachrichtigungen ein nativ aussehendes Wir verwenden ein Layout mit geteiltem Fenster, das auf einem großen Desktop oder Tablet genauso gut funktioniert wie auf einem kleinen Telefon Am Ende dieses Kurses werden Sie sehen, wie einfach es sein kann, mit ionic eine real funktionierende mobile Anwendung zu erstellen mit ionic eine real funktionierende mobile Anwendung Bevor Sie mit diesem Kurs beginnen, wird er Ihnen helfen, sich mit den Grundlagen der Webentwicklung mit HTML vertraut den Grundlagen der Webentwicklung mit HTML Ich erwarte nicht, dass Sie ein Experte sind, und ich werde die komplizierteren Themen im Laufe der Zeit behandeln. Wenn Sie wissen, wie man eine HTML-Schaltfläche erstellt oder einen Click-Handler hinzufügt, sollte es Ihnen gut gehen. Bereiten Sie also Ihre App-Ideen vor und begleiten Sie mich auf dieser rasanten Reise, um zu erfahren, wie Sie mit dem Ionic-Framework ein Experte für die Entwicklung mobiler Apps werden können mit dem Ionic-Framework ein Experte für die Entwicklung mobiler Apps 2. Session1: Ordnung. Also willkommen alle zu dem, wie ich hoffe, ersten von vielen ionischen Angular Mobile Development Workshops Wie ich bereits erwähnt habe, bin ich Mike Callahan und freue mich darauf, das durchzugehen und mit allen etwas aufzubauen Im Chat habe ich dir diese URLs gegeben. Der erste ist der Hub-Link zu dem Projekt, das wir im Laufe des Workshops aufbauen werden. Es funktioniert also alles vollständig, sodass Sie es als Referenz verwenden können. Die zweite URL ist eine Übersicht mit einigen praktischen Dateien, sodass Sie nicht alles abtippen müssen , wenn Sie nicht möchten Die nächsten beiden sind meine Kontaktinformationen. Du solltest diesen Michael schon bei Walking River haben, und mein Twitter-Handle ist bei Walking River. Okay. Ich nehme an, Sie haben allgemeine Programmierung, HTML und ein bisschen Javascript. Ich werde Visual Studio-Code verwenden. Das musst du nicht , aber dort werden meine Screenshots sein. Ich bin auch ein großer Fan von Angular Essentials von John Papa. Es ist eine Sammlung von Erweiterungen , die die Entwicklung von Angular erleichtern Es gibt auch ein paar Erweiterungen für ionische Snippets. Ich fand sie nicht ganz so nützlich, wie ich es mir erhofft hätte Aber ich halte diesen für absolut unverzichtbar. Okay. Müssen Sie Angular kennen? Es ist nicht unbedingt so, dass wir nicht viel Zeit mit Angular verbringen werden. Die Konzepte, wenn du etwas brauchst, wenn es keinen Sinn ergibt oder hey, Mike, was ist das? Stopp mich und wir werden es durchgehen. In der Regel werden wir die folgenden Angularismen verwenden. Also werden wir G Four und G-Direktiven verwenden. Wir werden die eckige Trennung von Bedenken verwenden. Ich weiß, dass in letzter Zeit viel davon geredet , alles in einer einzigen Datei zusammenzufassen Und es gibt die neue experimentelle Unterstützung von Angular 14 für modulfreie Komponenten Ich bleibe hier bei der alten Schule. Es ist eckig. Also werde ich eine JS-Datei, eine andere CSS-Datei, eine andere HTML-Datei haben. Wenn Sie dazu neigen, können Sie sie auch selbst miteinander kombinieren. Dies sind die verbindlichen Ausdrücke , die wir wahrscheinlich verwenden werden, und ich glaube nicht, dass wir noch komplizierter werden. Der erste ist ein Textausdruck. Wenn Sie also in Ihrer Komponente eine Variable namens EXPR haben und Sie möchten, dass ihr Wert in Ihrem HTML-Code steht, umgeben Sie sie einfach mit zwei geschweiften Klammern Wenn es kein Text ist oder Sie einfach den zweiten Stil bevorzugen. Sie können den Variablennamen ohne die Carla-Klammern in Anführungszeichen setzen , aber Sie setzen den Namen der Sache, die Sie an das Attribut des HTML-Elements binden , in eckige Dies ist nur wichtig wenn die Variable, an die Sie binden, kein String ist . Wenn Sie beispielsweise an das deaktivierte Attribut binden würden und Sie disabled auf False setzen möchten und Sie den ersten Ausdruck mit den geschweiften Klammern verwenden möchten, würden Sie tatsächlich an die Zeichenfolge false binden, was und Sie disabled auf False setzen möchten und Sie den ersten Ausdruck mit den geschweiften Klammern verwenden möchten, zur Laufzeit möglicherweise als falsch ausgewertet wird oder auch nicht , weil Die Zeichenfolge „Falsch“ steht für eine Wahrheitsbewertung oder kann es sein. Endlich das Klick-Event da. Ich möchte also jederzeit eine Funktion auf unserer Komponente an ein HTML-Ereignis binden . Sie setzen den Namen des Ereignisses in Klammern und die Funktion, die Sie aufrufen möchten , in die Ich glaube, das ist ungefähr so eckig, wie wir brauchen. Okay, also wir werden das alles durchgehen. Das ist mein Intro Angular. Okay. Jeder hat die ionische CLI installiert, oder? Das bedeutet, dass Sie auch die Node-CLI bereits installiert haben die Node-CLI bereits installiert Es ist wahrscheinlich nicht entscheidend , außer dass ich glaube, dass die Ionic-CLI Git benötigt oder zumindest davon ausgeht, dass Sie es haben Nehmen wir an, Sie haben bereits kein G auf dem jeder installiert ist Ja. Wenn nicht, installieren Sie G unter NPM auf der CLI Diejenigen von Ihnen, die früh oder früher erschienen sind, haben gesehen ich es vor kurzem gemacht habe, weil ich eine ältere Version verwendet habe Ordnung. Also werden wir eine sehr einfache Benutzeroberfläche erstellen und so weiter. Es wird aus einer Homepage, einer Teilnehmerliste, einer Seite mit Studenteninformationen und einem Seitenmenü bestehen Teilnehmerliste, einer Seite Studenteninformationen und einem Seitenmenü So wird es im Wesentlichen aussehen. Entschuldigen Sie mich. Das ist also die Startseite. Hier wird die Anwendung gestartet. Wenn die Dienstplanseite fertig ist, wird sie so aussehen. Es wird eine Liste der Schüler in unserer Klasse sein. Die Hahn-Seite besteht aus einer On-Liste, die eine ionische Komponente ist, und sie hat keine Symbole, keine Buttons und alle möglichen coolen ionischen Funktionen, die wir im Laufe der Zeit implementieren werden der Informationsseite für Studierende kannst du einzelne Schüler auswählen Das werden ionische Formen sein, etwas mehr Ionenspeicher Wie Sie sehen können, werden wir es irgendwann schaffen, Integration über einen Kondensator für den Zugriff auf die Gerätekamera Ordnung. Lassen Sie uns also direkt mit der Erstellung der Anwendung beginnen. Wo auch immer wir das brauchen , das ist eine Abkürzung. Ich habe den List-Link in den Chat eingefügt. Es wird auch hier auf jeder Folie sein, wo wir es brauchen werden oder wo es sich als nützlich erweisen könnte. Das erste, was wir tun möchten, um eine On-App zu erstellen , ist, den Befehl beim Start einzugeben. Lass uns weitermachen. Lass uns das einfach machen. Ich werde den Assistenten zur App-Erstellung nicht verwenden. Es ist cool, aber es ist nicht wirklich notwendig. Wenn Sie damit herumspielen möchten, können Sie dies gerne tun. Ich werde Angular verwenden. Mein Name wird sein. Ich rufe die Anwesenheitszeit an. Ich werde irgendwann ein Nebenmenü haben. Aber die Vorlage für das Seitenmenü bietet Ihnen eine Menge Standardwerke , die mir egal Ich bevorzuge es also, mit einer leeren ionischen App zu beginnen. Es sieht so aus, als ob wir standardmäßig einen Kondensator bekommen. Das ist in Ordnung. Und es wird all das Zeug für mich installieren. Schieb das da aus dem Weg. Das musst du nicht sehen. Folgen uns alle, okay? Ja. Ja. Danke. Nun, da hast du's. Nun, um das zu sehen, müssen Sie einfach Ionic Serve eingeben Ich muss zuerst in dieser Anwendung sein , ich muss in dem Ordner sein CD da rein? Dann kann ich ionisch servieren Und wie Sie hier sehen können, delegiert Ionic Serve wirklich nur einen Großteil seiner Funktionalität an die Also habe ich ionic serve eingegeben und der ionic serve hat diesen Befehl mich generiert G run, und es startet automatisch meinen Standardbrowser, in meinem Fall Safari ist und mir genau das gibt, wonach ich Eine leere Anwendung mit viel Inhalt. Okay. Also, folgen alle mit und sind Sie an diesem Punkt angelangt? Ja. Ja. In Ordnung. Fast da. Fast da. Ordnung. Ich gehe zur nächsten Folie über. Was ich ganz schnell besprechen wollte, sind die Entwicklertools oder die Browser-Entwicklertools. Wenn Sie Windows verwenden, müssen Sie einfach F 12 eingeben. Wenn Sie auf einem Mac sind, ist es Command Option Und offensichtlich sieht es nicht so aus. Ja. Ja, ich bin da. In Ordnung. Mit geöffneten Entwicklertools? Das solltest du können. Ich kann mich nie erinnern, wie man das in Safari macht. Da haben wir's. Rufen Sie den Responsive Design-Modus auf. Jetzt kann ich verschiedene Apple-Geräte emulieren. Wenn du nicht in Safari bist, nein, auch wenn du in Savi bist, wenn du auf einem beliebigen Gerät bist Ich empfehle die Verwendung von Chrome oder Edge für die Nutzung der Entwicklertools. Das wirklich coole Ding und du wirst es hier nicht sehen. Du wirst es gleich sehen. Aber lassen Sie mich das in Edge ansprechen. Lassen Sie mich das eigentlich hier ansprechen. Ich habe es schon hier, also kann ich dir zeigen , was ich dir zeigen möchte. In Edge, wenn ich es sage, will ich ein Gerät wie ein iPhone 12 Pro. Es gibt mir, wonach ich suche. Es gibt mir die richtige Auflösung. Ich kann mir also ein iPhone aussuchen. Ich kann ein Android wählen. merke, dass sich nicht viel ändert, aber hier wird es richtig cool. Lass mich reingehen. Lass mich die Seite aktualisieren. Sobald die Entwicklertools geöffnet sind und Sie Ihr Gerät eingerichtet haben und die Seite aktualisiert haben, erkennt Ionic das und sagt: Oh, Sie laufen auf einem Android-Gerät Ich werde das Aussehen ändern. Also werden deine Icons androidifiziert sein. Deine Buttons werden Android sein, deine Dropdowns werden Also sollte alles wie Android aussehen. Beachten Sie also, wie diese aussehen. Und wenn ich dann auf die Starttaste klicke, ist das ein Android-Modell. Lassen Sie mich also zurück zu einem iPhone wechseln. Es wird sich noch nicht ändern, bis ich die Seite aktualisiere. Sieh den Unterschied. So wird ein Apfel aussehen. Ich kann zum Setup zurückkehren, die Taste ist etwas abgerundeter. Das Dropdown sieht anders aus. Die Symbole sind etwas anders, Seitenmenüs sind etwas anders. Alles ist nur ein bisschen anders. Sie werden auf einem Apple-Gerät sehen, Ihre Titel mittig ausgerichtet sind, wo irgendwelche Androiden übrig geblieben sind Ionic werden Sie also all diese Funktionen, diese visuelle Veränderung sofort einsatzbereit Und das ist einer der Hauptgründe, warum ich es benutze. Okay. Also das werden wir bauen. Also habe ich hier. Wie gesagt, F 12, um Ihre Entwicklungstools und Windows- oder Befehlsoptionen auf einem Mac zu öffnen . Ich habe dir gerade das andere Design gezeigt. Das ist die Schaltfläche, um den responsiven Designmodus auf Safari aufzurufen. Okay. Komm schon neun hoch. Okay. Und ich habe dir schon davon erzählt. Wenn Sie von einer zur anderen wechseln, müssen Sie die Seiten neu laden, um zu sehen, wie sich die Benutzeroberfläche ändert Okay. Lassen Sie uns jetzt unsere erste ionische Seite erstellen Oder in diesem Fall werden wir eine Schnittstelle erstellen. Ich werde gehen, ich werde kündigen. Okay. Also werde ich den Befehl on generate verwenden. Ich kann auch mit der G-Schnittstelle arbeiten. Also werde ich die ionische CLI bitten, eine Typoskript-Schnittstellendatei zu generieren ich die Definition eines Studenten speichern kann Und so schnell ging es. Ich werde auch Sd für mein Projekt öffnen, richtig? Okay. Gibt es eine Möglichkeit deine Vorderseite etwas größer zu machen , wenn du das hast? Das kann ich absolut. Wie ist das? Das ist großartig. Danke. Ich werde hier dasselbe tun. Übrigens Command Plus. Richtig. Die Oberfläche befindet sich in meinem Quellordner App Student. ist nicht viel drin. musst du für dich aus dem Weg räumen. Okay. Okay. Also das ist einer der Orte, an denen sich das Wesentliche als nützlich erweisen wird Und das ist Student TS genau hier. Ich werde mir die Rohdatei holen. Nochmals, du musst das nicht sehen, aber ich bin faul und möchte das alles nicht noch einmal eingeben. Das ist also die Definition eines Studenten. Weiß jemand, warum ich meinen Schüler zu einer Schnittstelle mache und nicht zu einer Klasse? Gibt es irgendwelche Typoskript-Assistenten , die du einbeziehen möchtest? Weiß jemand, zu was eine Typskript-Schnittstelle kompiliert wird, wenn sie zu Javascript kompiliert wird Nein. Okay. Lass mich sehen , ob ich es dir zeigen kann. Hast du schon mal Script geschrieben oder ich habe einen Spielplatz für Pipe-Skripte. Und auf der einen Seite ist das Typoskript, auf der anderen Seite ist das Wenn Sie die Avian-Schnittstelle aufrufen, wird genau das erstellt. Absolut nichts. Schnittstellen existieren nicht. Sie dienen also ausschließlich der Bequemlichkeit für Entwickler. Wenn ich andererseits eine Klasse erstellt habe, ist es keine gültige Klasse. Warum ist das keine gültige Klasse? Okay. Oh, ich verstehe. Ich brauche solche Sachen. Also nicht viel mehr Code, aber es ist mehr Code-Code. Und ehrlich gesagt brauche ich keinen Kurs. Ich nicht, mein Studentenobjekt muss keine Methoden enthalten Wenn es also nur ein Datenübertragungsobjekt ist, werde ich mich immer für eine Schnittstelle entscheiden. Okay. Okay. Lassen Sie uns also einen kurzen Blick auf diese Oberfläche werfen. Jeder Student hat eine ID, einen Vor- und Nachnamen. Weiß jemand, was das Fragezeichen für die restlichen Felder bedeutet? Wahl. Sie sind optional. Also das Geburtsdatum, Elternname, Elternteil, E-Mail, Telefon usw. Diese sind alle optional. Ich werde das nicht hier lassen. Das bedeutet, dass ich das erstellen kann, aber es wird nicht gültig sein. Damit ich einen Brunnen erstellen kann, erledigt Hub-Copilot die Arbeit für Ich kann also einen Objektliteralinitialisierer verwenden. Hoppla. Stimmt. Ordnung. Jetzt wird Pile etwas übereifrig. Okay. Wenn der Student eine Klasse wäre, könnte ich das nicht machen. Ich könnte einen solchen Objektinitialisierer nicht verwenden. Okay. Es wäre nicht gültig. Ich müsste New Student verwenden und dann entweder die Werte an den Konstruktor übergeben entweder die Werte an den Konstruktor oder die Felder einzeln bearbeiten Aber da ich eine Schnittstelle habe, Type Script und Java-Skript ein brandneues Objekt dieses Typs initialisieren, indem ich einfach ein Objektliteral verwende Da es sich um eine Schnittstelle handelt, erhalte ich außerdem Fehler, wenn ich nicht alle erforderlichen Felder angebe Und schließlich, wer kann mir sagen, was Status bedeutet? Warum habe ich dort nicht den Status auf Zeile zehn gesetzt? Dies ist eher eine Skriptfrage eines anderen Typs, keine eckige Onic-Frage. Obwohl eckig einer der Gründe ist, warum ich es getan habe. Ich bin mir nicht sicher, ob es sich nur um einen benutzerdefinierten Typ handelt. Es beschränkt den Wert darauf, entweder vorhanden oder nicht vorhanden zu sein? Korrekt. In diesem Fall als optional definiert. Korrekt. Die meisten Leute besonders wenn Sie aus der.net-Welt kommen, sind Sie es wahrscheinlich gewohnt, dies mit einem Namen zu tun Sie hätten also eine Aufzählung, bei der präsent gleich Null und abwesend gleich Und dann würde der Compiler sicherstellen, dass es Das Problem dabei in Angular ist, dass Ihre Vorlagen diese Enumes nicht sehen können Es sei denn, Sie erstellen dann eine lokale Variable, die die Zahl enthält, und es wird seltsam Aber wenn ich es auf diese Weise mache, sage ich Typoskript im Grunde , dass der Wert von Status eine Zeichenfolge ist, aber es kann nur eine Zeichenfolge mit einem von zwei Werten sein, wie Sie gesagt haben, und ich werde Intellisence bekommen Es sagt mir also automatisch, was meine Werte sind. Ziemlich rutschig, hm. Okay. Michael, du könntest dieser Liste eine Ganzzahl hinzufügen, oder? Du meinst. So wie das. Ja. Mir gefällt, was Co Pilot vorgeschlagen hat. Hat jemand Copilot benutzt? Ich wollte es ausschalten. Ich fand es nützlich. Ich fand, dass Co Pilot ziemlich gut darin ist, zu wissen, was ich damit machen möchte. Und es ist wirklich gut darin , Unit-Tests für mich zu erstellen. Okay. Haben Sie Fragen zur Benutzeroberfläche? In Ordnung. Ich hatte eine Frage. Mein Praktikant beschwert sich. Ich denke, das liegt an der TS-Konfliktdatei für Ionic? Das ist nicht Es verwendet TS und nicht ES in. Hast du es bemerkt? Hab ich nicht. Macht es das? Sind wir immer noch im Verzug? Immer noch Standardeinstellung ist S n. Min ist zwei, also. Ich weiß nicht, warum er Ja. Ich sehe kein TSN in der Schlange Nein. Okay. Irgendetwas beschwert sich darüber, aber ich nicht Microsoft Dad beschwert sich darüber. Können Sie uns also das Plug-In für einen Copiloten zeigen , das Sie Scheint zwei von ihnen zu sein. Das ist eine gute Frage. Okay. Ich bezahle derzeit nicht dafür. Also habe ich diesen. 3131. Ich weiß nicht, was das ist. Oh, jede Nacht. Ja. Ja, ich habe weitergemacht und ich benutze es nicht. Ich verwende den offiziellen von G Hub. Und wie gesagt, ich bezahle noch nicht dafür. Ich glaube, ich habe es noch ein paar Wochen kostenlos. Oder vielleicht fange ich an, ein Open-Source-Repo zu verwalten. In Ordnung. Als Nächstes müssen wir tun. Ich versuche, das langweilige Zeug zu erledigen und all das früh aus dem Weg zu räumen, ist, dass wir einen Studentenservice einrichten müssen. Das ist das Ding, das die gesamte Dateninteraktion für den Umgang mit Studenten regeln wird , und das war die wirklich große Datei , die ich für Sie im Wesentlichen habe. Das will ich hier machen. Bring meine A-Befehlszeile hierher zurück. Und da haben wir's. Geh es aus dem Weg. Okay. Also hier verwende ich nicht die CLI. Und der Grund, warum ich die On-CL nicht verwende , ist, Ihnen zu zeigen, dass sie tatsächlich dasselbe sind. Die ionische CLI delegiert also einfach an die eckige CL. Der Grund, warum ich ihm PX voranstelle, ist, dass ich die global installierte Angular CLI nicht verwenden möchte Ich möchte die verwenden, die in mein ionisches Projekt eingebaut ist. Kennt sich jeder mit PX aus, was das macht? Ja. Ich meine, es macht eine Menge Dinge. Aber das Wichtigste ist, dass es die Version von NG verwenden wird , die sich in meinem Node-Module-Ordner befindet , im Gegensatz zu meiner globalen. Okay. Also werde ich einen Dienst namens Studenten einrichten. Eine Sache, die ich sehr gerne mache. Ich verwende den Befehl Dry Run gerne , nur um zu sehen, was er tun wird , bevor er es tut. Es wird zwei Dateien für mich generieren. Es generiert eine Testdatei und meine Service-Typoskriptdatei und legt sie direkt in den App-Ordner. Das ist okay. In einem größeren Projekt würde ich das nicht tun wollen. Ich möchte viele Dinge ein bisschen besser organisieren. Also würde ich ihm sagen, es soll woanders verschuldet werden, ich könnte es zum Beispiel bei Studenten des Militärdienstes anlegen. Jetzt können Sie sehen, dass es in einem Ordner namens Services abgelegt wird . Nun, machen Sie weiter und lassen Sie es dabei. Ich nehme die Flagge des Probelaufs ab und lasse sie bauen. Das Studentenwerk wird uns Studenten geben , die wir ausstellen können. Ohne eine Liste von Studierenden können wir nicht viel tun. Nochmals, wir können zu meiner Liste zurückkehren, die hier war. Gehen Sie runter zum Studentenservice. Schnapp dir die Version. Wählen Sie eine Kopie aus. Suchen Sie meinen Studentenservice und fügen Sie ihn einfach ein. Und das gefällt ihm nicht. Warum gefällt es ihm nicht? Okay. Das ist fair. Sieht hier jemand die unmittelbaren Probleme? Dieser ist offensichtlich. Das liegt daran, dass ich die Dienste in einem Ordner abgelegt habe. Lassen Sie mich Ihnen zeigen, wenn Sie das im BS-Code nicht gewohnt sind, werde ich diese Zeile einfach entfernen. Und dann werde ich sehen, dass der Fehler hier ist. Klicken Sie darauf und klicken Sie auf die blaue Glühbirne und es wird sie für mich finden und die Importanweisung für mich neu erstellen Okay. Dieser ist etwas schwieriger zu überwinden. Was also passiert, ist dieser Dienst Kondensatorspeicher von Ionic verwendet Aber ich weiß es nicht. Okay. Wir benutzen es. Ich benutze es. Also müssen wir einen Kondensatorspeicher installieren. Also öffne ich die im Terminal eingebauten S-Codes, das heißt Control-Back-Tick. Und dann kann ich einfach einen Kondensatorspeicher installieren. Okay. Und dann sollte das Problem verschwinden. So wie das. Fragen, Kommentare, Bedenken. Haben noch alle mitbekommen? Ja. Das habe ich eingeholt. Da sind noch eine Menge anderer Sachen im Gange. Wenn du das Gefühl hast, dass du langsam zu weit hinterherhinkst, lass es mich wissen. Okay. Okay. Also solltest du jetzt einen Studentenservice haben. Also, was ich tun möchte. Das Studentenwerk hat eine Initialisierungsmethode eingebaut Nochmals, nur um es einfach zu machen, zur Benutzeroberfläche zu gelangen. Also, was ich in der App-Komponente T tun muss. Ich drücke Command P oder Windows Control P, um dieses Schnellmenü zu öffnen, und gebe App-Komponente ein. Ich lasse meine Hände gerne auf der Tastatur. Gib mir hier eine Sekunde. Ich habe also den Konstruktor Und das ist eigentlich ein Tippfehler, weil dies die Initialisierungs-App nicht aufruft Brauchen wir die App-Komponente darauf zu implementieren Und jetzt lasse ich Pilot eine andere Arbeit für mich erledigen. Keine schlechte Vermutung. Aber wir müssen das Studentenwerk übergeben. Okay. Und beachten Sie, dass es weitergegangen ist und all diese Informationen für uns gefunden hat. Es hat herausgefunden, wo der Studentenservice importiert werden kann. Also jetzt. Nochmals, nicht schlecht, aber es ist nicht das, wonach ich suche. Wir müssen einen Sync vermarkten , weil wir warten wollen. Ja. Sollte es in der Klasse oder draußen sein? Es sollte drinnen sein. Danke. Okay. Also, wie ist es nicht? Entschuldigung. Los geht's. Ich habe es nicht importiert. Ich weiß nicht, wie es Ihnen geht , aber eine meiner Schwächen, wenn Sie so wollen, bei Angular. Ich vergesse, Dinge zu importieren. Deshalb finde ich es sehr gut, dass VS-Code das für mich erledigt. Und welche ES-Einstellung ich auch habe , es Quelldatei gibt keine Quelldatei, die am Ende keine Leerzeile hat, also wird sie sich darüber oft beschweren. Irgendwelche Fragen hier? Wir wollen sehen, was das macht , oder verstehen wir, was das macht? Wenn die App-Komponente startet, wird sie unseren Studentenservice anrufen und ihm sagen, dass er initialisieren soll Die Initialisierung des Studentenwerks macht ein paar Dinge Es geht in den Ionenspeicher, um zu versuchen, alle Schüler aus dem Speicher zu holen Aber wenn Sie es zum ersten Mal durchgehen, wird es keine geben Also wird die Länge des Studenten-Arrays Null sein. An diesem Punkt rufe ich Daten auf und sehe mir Daten an, nimmt einfach diese Gruppe von Scheinstudenten und speichert sie für mich. Es gibt uns also etwas zum Ausstellen. Macht das Sinn? Das sind übrigens alles echte Menschen, die sich bereit erklärt haben , dass ich ihre Namen benutzen darf Ordnung. Wir sind gut. Wir machen weiter. Okay. Ich habe die Importe erwähnt. Der VS-Code wird mich ehrlich halten. Aber wenn nicht, können Sie sich gerne einmischen und mich ehrlich halten Die meisten Codebeispiele, die ich auf meinen Folien zeige , enthalten keine Importe Es war einfacher, Platz zu sparen. Okay. Jetzt werden wir die Dienstplanseite generieren. Okay. Hier weichen die Dinge ein wenig vom standardmäßigen eckigen CLI-Gerüst Wenn Sie ein ionisches Projekt mit Ionic Starter erstellen und die ionische CLI installieren, bietet Ihnen Ionic ein eckiges Gerüst, das Angular eckiges Angular hat nicht das Konzept einer Seite. Ich weiß nicht, ob Sie jemals darüber nachgedacht haben, aber wenn Sie eine Seite und Angular erstellen möchten , erstellen Sie eine Komponente. Aber Ionic hat das Konzept einer ionischen Seite. Also geben sie dir dieses Gerüst. Ich kann also einen dieser beiden Befehle eingeben dieser beiden Befehle weil sie funktionell identisch sind Also kann ich eine ionisch generierte Seite erstellen und sie Roster nennen. Alles, was es tut, ist G Generate Page aufzurufen. Hahn Aber weil Ionic das Gerüst für die Seite geschaffen hat, existiert das Gerüst tatsächlich, sodass wir mit Ionic eine Seite generieren können, die wir mit Ionic Also nochmal, ich werde es testen. Und Sie sehen es buchstäblich einfach ziemlich gut, nicht genau, sondern den Befehl NG Generate. Der größte Unterschied zwischen dem Erstellen einer eckigen Komponente für uns als Seite und dem eigentlichen Aufbau einer ionischen Seite besteht darin, dass ionische Seiten mit einem eigenen Modul erstellt werden standardmäßig mit einem eigenen Modul erstellt werden und Eine ionische Seite wird also erst zur Laufzeit geladen, Das hilft ionischen Apps, schnell hochzufahren und zu starten Macht das alles Sinn? Ja. In Ordnung. Ich mache meinen Probelauf rückgängig und lasse ihn einfach los. Okay. Ich muss es machen. Nein, ich muss die Änderung nicht vornehmen. InCars hat diese Änderung bereits für mich vorgenommen. Wenn wir uns also das App-Routing-Modul ansehen, die ionische CLI oder das Angular-CI diese Formierung hinzugefügt und das ist der Lazy-Load des Roster-Moduls zum Laden Das heißt, wenn wir zu unserer Anwendung gehen und Ende unserer URL als Pfad verwenden, wird das Modul für die Dienstplanseite instanziiert, was dann dazu führt, dass die Dienstplan-Routing-Seite was dann dazu führt die Dienstplanseite lädt Also bekommen wir das alles umsonst. Sie können es mit der Angular CLI machen, aber ich kann mich nie erinnern, dass Sie keine Komponente, sondern ein Modul erstellen. Ich glaube, so funktioniert es. Aber mir wäre es viel lieber selbst wenn ich kein ionisches Projekt verwenden würde, könnte ich trotzdem versucht sein, die ionische CLI zum Erstellen meiner Seiten zu verwenden , weil Sie das faule Laden von Haus aus bekommen würden das faule Laden von Haus aus bekommen Also habe ich das gerade gezeigt. Lassen Sie uns nun unsere letzte Seite generieren, die unsere Informationsseite für Schüler ist. Verwenden Sie den der beiden Befehle, mit dem Sie vertraut sind Auch hier wird fast das gleiche Gerüst gebaut fast das gleiche Gerüst Ich werde es sein lassen. Zurück in meiner App kannst du sehen, dass ich meine Dienstplanseite und meine Studenteninformationsseite Jetzt muss ich eine Änderung vornehmen. Wenn Sie jemals eine Master-Detailansicht erstellt haben, wissen Sie, dass Sie, wenn Sie zur Detailansicht gelangen, normalerweise die ID des Objekts angeben müssen , das Sie sehen möchten. Das ist also nicht anders. Es hat für mich immer noch eine Änderung am Apparalti-Modul vorgenommen, aber ich muss das nicht anfassen Aber in der Route zur Studenteninformationsseite muss ich diese Doppelpunkt-ID zum Pfad hinzufügen Öffnen Sie also das Routing mit den Studenteninformationen, suchen Sie den Pfad und fügen Sie die Doppelpunkt-ID hinzu. Das bedeutet, dass wir in unserer Anwendung eine Route haben werden , die so aussieht. Okay. Also werden wir einfach eine Ausweissteuer am Ende der Route erheben. Und das wird als ID-Routenparameter übergeben. Ich habe eine Frage. Gibt es einen Unterschied zwischen dieser Methode und der Eingabe des Routenparameters auf dem zuletzt geladenen Routing Du meinst, es in ein Routing-Modul zu stecken. Du meinst, es hier einbauen? Ja. Gibt es einen Unterschied wenn man die Studenteninformation cool ausgibt? könntest du tun, aber dann könntest du nicht in das Routing mit den Studenteninformationen gehen und hier irgendwelche Änderungen vornehmen. Vielleicht ist das okay. Vielleicht ist das okay. Vielleicht hast du einen Pfad namens Edit. Macht das Sinn? Okay. Ja. Ich verstehe. Also, wenn du es hier rausstellst, würdest du sagen, okay, die Studenteninformation mit einem Schrägstrich auf den Studentenausweis Und jetzt, in Ihrem Studenteninformationsmodul, haben Sie vielleicht eine Änderung vorgenommen Aber dann hast du vielleicht auch ein Löschen. Und das sind und was Sie am Ende haben, sind verschiedene Komponenten. Vielleicht haben Sie eine Seite mit Studenteninformationen und eine Seite zum Löschen von Schülern. Aber diese beiden Seiten würden dasselbe Modul verwenden. Daran hatte ich nicht gedacht. Das ist eigentlich ziemlich schlau. Also ja, das könntest du tun. Aber was du jetzt nicht tun kannst , wie würdest du einen neuen Schüler hinzufügen? Weil du keinen Ausweis hättest. Also ich möchte sie behalten Ich möchte sie auf diesem Niveau sauber halten. Okay. Und dann füge alles hier rein denn jetzt könntest du Dinge tun wie Wenn du wolltest, jetzt könntest du es tun. Du könntest den Schrägstrich E für die Studenteninformationen haben. Okay. Ja. Und dann kann ich dieselbe Komponente wiederverwenden. Richtig. Und ich glaube, so mache ich es später. Danke. Ist das bis jetzt für alle klar? Wenn nicht, denke ich, dass dieser sinnvoller sein wird , wenn wir anfangen, die Seiten auszuarbeiten. Ich schaue dauernd auf Andrew herab und er sagt, okay. Normalerweise, zu diesem Zeitpunkt, meine ich, sitze ich schon seit anderthalb Stunden hier. Wenn ich diesen Workshop persönlich mache. Zu diesem Zeitpunkt sind so gut wie alle bereit , eine Pause einzulegen. Willst du fünf nehmen oder willst du weitermachen? Wir wollen bis zehn Uhr gehen, noch eine Stunde. Pause machen oder weitermachen. Mir geht es so oder so gut. Ja. Mir geht es gut, wenn wir weitermachen, das ist okay. Okay. Lass uns weitermachen. Ordnung. Seitenmenü. Also werden wir uns jetzt mit einigen Benutzeroberflächen befassen. Das Seitenmenü verwendet in diesem Fall die Option On Split Pan. Und die geteilte Pfanne ist ein bisschen kompliziert. Sie haben es wahrscheinlich alle gesehen. Wenn der Bildschirm schmal ist, er zu einem Hamburger-Menü zusammengeklappt Aber wenn es breit ist, wie wir hier sehen, ist es immer sichtbar. Es ist also ein sehr responsives UI-Element. Das Wichtigste, was Sie wissen müssen, wenn Sie es mit einem Split-Pin zu tun haben. R, die Inhalts-ID. Das Inhalts-ID-Attribut des geteilten Fensters steht also des geteilten Fensters steht die ID des Elements auf Ihrer Seite, das Ihren Hauptinhalt enthalten wird. Das wird gleich klar sein. Dies ist normalerweise Ihr eigener Router-Ausgang. Router-Ausgang ist also eine der wichtigsten Komponenten auf Ihrer gesamten Seite. Das deaktivierte Attribut macht das, was Sie denken. Wenn es deaktiviert ist, der Split-Pin, wird das Menü nicht angezeigt. Ich kann Ihnen nicht sagen, wie frustrierend es ist, ein deaktiviertes Menü zu haben, bei dem Sie aus seltsamen Gründen nicht herausfinden können, warum es nicht angezeigt Und wann teilt das geteilte Fenster unter welchen Umständen es sichtbar sein soll Es kann ein Bolan sein. Sie könnten es also programmgesteuert auf wahr oder falsch setzen, oder es könnte sich um eine vollständige CSS-Medienabfrage Es könnte sich also um eine Medienabfrage handeln, die maximale Bildschirmbreite von 500 angibt, beispielsweise eine Mindestbreite von Ich neige dazu, die Standardeinstellungen für solche Dinge zu verwenden. Ich neige also nicht dazu, mit ihnen herumzualbern. Wir haben auch die Menü-ID. Wenn Sie also einen Split Pan verwenden, wird an Split Pan normalerweise ein Menü angehängt. Es benötigt also auch die HTML-ID des Menüs , an das es angehängt ist. Wir müssen ihm auch sagen, welche Seite des Bildschirms wir haben wollen. Frühere Versionen von Ionic verwendeten links und rechts, aber Ionic unterstützt jetzt Kulturen und Layouts von rechts nach links Es ist also Anfang und Ende. In den meisten westlichen Kulturen wäre der Anfang links und das Ende rechts. Und dann musst du ihm endlich sagen, es aussehen soll. Dies ist der Menütyp. Und ich habe hier eine Animation. Ich hoffe, es kommt rüber. Ich musste diese Animation erstellen, um mir selbst zu beweisen , dass diese drei Menütypen unterschiedlich sind. Schau sie dir für ein paar Sekunden an. Sag mir, ob du herausfinden kannst, was der Unterschied zwischen Push und Reveal ist. Overlay ist ziemlich einfach. Aber was ist der Unterschied zwischen Push und Reveal? Irgendjemand? Die Hintergründe bewegen sich auf Push. Bei der Enthüllung geht es nicht weiter. Welcher Hintergrund? Das Menü, das hintere Menü Aufschrift Home in Roster? Korrekt. Ja. Ich habe lange gebraucht , um das herauszufinden. Tatsächlich habe ich diese Animation auf Twitter veröffentlicht und ich hatte immer noch eine Menge Leute, die fragten, was ist der Unterschied zwischen Push und Reveal? Du hast also recht. Das Menü bewegt sich nicht in der Enthüllung. Okay. Warum haben sie bei diesem Ionischen gegen sie gekämpft Ich bin mir nicht wirklich sicher. Das wäre mir nie in den Sinn gekommen. Scheint, als ob es eher ein Zug ist und ich denke, die Materialspezifikationen sind das was es mit der Z-Achse zu tun hat. Es gibt also Schichten über den Dingen. Wird beim Materialdesign typischerweise Enthüllung verwendet? Das ist eine der Spezifikationen. Die Materialbibliothek soll auf ähnliche Weise wie diese Spezifikationen aufgebaut sein . Aber ja, das Materialdesign sagt, dass es eine Z-Achse geben sollte. Hab dich. Und schieb sie zusammen und sie drängen nur einen von ihnen aus dem Weg, richtig? Ja. Ich schätze, das wäre ihre Argumentation Sehr cool. Ich habe Overlay immer nur persönlich benutzt Okay. Also geteilter Bereich, wir werden ein Menü haben, und das Menü sollte zwei Seiten haben, die Startseite und die Kaderseite Und die Art und Weise, wie wir das implementieren, besteht aus einer Reihe von Anwendungsseiten in der App-Komponente Wenn ich mich nicht irre. Der ist auch hier drin. Ja. Die App-Komponenten sind bereits fertig, also können wir einfach das Wesentliche herausgreifen Öffnen Sie die App-Komponente. Und ich glaube, einfach einfügen. Nein, das hat mir nicht gefallen. Oh, ich verstehe. Weil ich das Studentenwerk verlegt habe. Also nochmal, ich möchte es löschen. Komm zurück und lass VS Code es für mich finden. Da haben wir's. Und dann will es meine leere Leitung. Jetzt habe ich also eine Reihe von Seiten, Home und Roster. Also, was wir hier machen, wir werden eine Bezeichnung für den Menütitel haben , Home und Roster. Was ist die URL Also, wo wird das Ding hingehen? Welche Route? Wolltest du die Heimatroute oder die Dienstplanroute benutzen? Und welches Symbol soll dann verwendet werden? Soweit klar. Als Nächstes werden wir über dieses Array iterieren und das Menü erstellen Sollte sich unsere App also im Browser überhaupt geändert haben , dann ist es immer noch der Distributionsplan Wenn Sie Ionic Serve laufen lassen, werden Sie keine Änderungen sehen , da wir noch keine Änderungen an der Homepage vorgenommen Okay. Okay. Also haben wir eine Reihe anderer Dateien erstellt und Änderungen an der App vorgenommen, und sie sollte ständig neu erstellt und gerendert werden Da wir jedoch noch keine Änderungen an der Homepage vorgenommen haben, werden Sie sie nicht sehen Okay. Und der Grund, warum ich es in dieser Reihenfolge mache, ist im Wesentlichen, dass die endgültige Enthüllung etwas beeindruckender sein wird. Wir haben alles richtig gemacht. Ich bin nur neugierig. In Ordnung. Also als Nächstes werden wir Folgendes tun, um Well zu machen, um unseren Split-Pin zu starten. Das geht in den HTML-Code der App-Komponente. Im Moment sollte das Einzige, was im HTML-Code der App-Komponente enthalten ist, die On-App und die On-Router-Outlet sein. Also das absolute Minimum , um etwas in einer ionischen App anzuzeigen Okay. Und hier habe ich dir nicht die Möglichkeit gegeben, sie zu kopieren und einzufügen. Also werde ich das aus dem Weg räumen. Und es sieht so aus, als ob ich auf meinem anderen Monitor hängen geblieben bin. Okay. Ich mache eine kleine Pause während ihr das alle in eure eigene App eintippt. Sie können hier unten sehen, dass ich den Router-Ausgang habe. Der gesamte geteilte Bereich umschließt also den Ausgang am Router und der gesamte Code befindet sich im App-Tag Macht das Sinn? Ja. Ich werde es auch eingeben. Okay. Nun, willst du zusehen, wie ich es tippe, oder willst du , dass ich es außerhalb des Bildschirms tippe, damit du es kopieren kannst Du kannst es außerhalb des Bildschirms machen, das macht es einfacher. Okay. Interessanterweise hat der Copilot einen ziemlich guten Job gemacht. Innerhalb des Split-Pans haben wir also das On-Menü, und das wird in der linken Menükomponente sein linken Wir beginnen also mit der Kopfzeile , der kleinen grauen Fläche oben, und die Kopfzeile besteht aus einer Werkzeugleiste, und die besteht aus dem Titel mit dem Wort Menü darin. Das ist ein Muster, das sich in ionischer Form immer wieder wiederholt Eine Kopf- oder Fußzeile enthält eine Werkzeugleiste, die eine Sammlung von Titelschaltflächen enthält, die Schaltflächen enthält Es ist sehr hierarchisch, aber sehr konsistent. Also hier drin werden wir nur eine Werkzeugleiste mit dem Wort Menü in der Kopfzeile haben drin werden wir nur eine Werkzeugleiste mit dem Wort Menü in der Kopfzeile Unter der Kopfzeile haben wir keinen Inhalt. Fast alles, was Sie in Ionic rendern möchten , muss einen Ionen-Inhalt Und ich glaube, auf der nächsten Folie werden wir den Menüinhalt dort einfügen Sie müssen also kein Menü eingeben. Wir werden hierher gehen. Was ist Content ID in diesem Beispiel. Ist das eine gezielte oder eine andere reguläre Sache. Entschuldigung. Okay. Also sprichst du mit dieser Inhalts-ID oben? Ja. Das sagt uns, dass der geteilte Bereich und das Menü Dinge steuern, die sich in einem anderen HTML-Element befinden , dessen ID der Hauptinhalt ist Sie werden das also hier unten sehen, Ihren eigenen Router-Ausgang Wir müssen den Hauptinhalt der ID hinzufügen. Okay. Macht das Sinn? Ja. Wie wird das durch ein View-Kind erreicht oder wie macht das normalerweise jemand, wenn du dein eigenes machst? Wir müssen jetzt nicht darauf eingehen. Ernsthaft. Ich bin mir nicht sicher, ob ich der Frage gefolgt bin. Wenn Sie Ihre eigene Komponente erstellen wollten , 3. Session2: Okay. Okay. Jeder. Willkommen zu Sitzung zwei. An diesem Punkt sollten wir alle eine Klassenliste haben , die ungefähr so aussieht, und heute Abend werden wir versuchen, sie mit einigen Funktionen und einigen weiteren UI-Komponenten zu einigen Funktionen und einigen weiteren UI-Komponenten Und genau wie zuvor, wenn sich herausstellt , dass ich zu schnell fahre oder wenn ich ein wichtiges Konzept überspringe , das nicht jedem klar ist, halt mich auf und wir werden ein bisschen langsamer fahren Wie beim letzten Mal, als wir fertig sind, kann ich noch ein bisschen hier bleiben und alles besuchen, wenn wir dich brauchen Klingt gut? Ja. In Ordnung. Also, ich glaube, wir haben das Bild der Person und den Namen, richtig? Wir haben nichts von dem anderen Zeug hier oben und wir haben auch nicht den tollen Button hier unten. Korrekt. Und aus irgendeinem Grund mag es wirklich nicht, voranzukommen. Okay. Über Icons haben wir bereits gesprochen. Ich glaube also nicht, dass wir uns das noch einmal ansehen müssen. Aber nur als Zusammenfassung: Wenn es Symbole gibt, nach denen Sie suchen möchten, müssen Sie wissen, wo Sie sie finden können. Sie finden sie einfach unter Okay. Also lass uns gleich loslegen. Und das werden wir der Kaderseite hinzufügen. Und wenn ich mir diesen Code ganz schnell ansehe. Dadurch werden die beiden Schaltflächen auf der rechten Seite jedes Schülernamens erstellt . Wir werden also innerhalb jedes Ion-Elements einen Container mit Schaltflächen erstellen , und jeder On-Button-Container enthält zwei Schaltflächen, und diese Schaltflächen bestehen nur aus einem Symbol, der Ellipse, um uns ein detailliertes Menü zu bieten , und dann dem Vorwärts-Pfeil , der uns zur Rofter-Seite führt. Macht Sinn? Ja. Ordnung. Lass uns sehen. Ob ich das zusammen mit dir machen kann, es aber trotzdem habe. Es wird schwierig sein, das gleichzeitig zu erledigen, nicht wahr? Lass es uns so machen. Wenn ich auf meine Hahn-Seite gehe, meine Dienstplan-HTML-Seite Und wir haben die On-Liste und das On-Om mit dem Personen-Umrisssymbol und dann die Bezeichnung für den Namen der Person Also gleich danach wollen wir ein paar On-Buttons und darin auf Buttons platzieren, die gleich dem Ende in einer Minute hier auf Button-Handler entsprechen. Diese Funktion gibt es noch nicht, aber wir werden eine Funktion namens Present Action Sheet schreiben , und wir werden den aktuellen Schüler übergeben , sodass jede Zeile aufgrund der NG-Vier ihren eigenen Schüler hat. Okay. Und dann innerhalb des Knopfes. Ja, wir werden nur ein Einschaltsymbol mit Slot-Symbol verwenden, also wird es keinen Text auf dieser Schaltfläche geben. Und ich möchte den horizontalen Umriss mit den Ellipsen. Wenn ich nichts anderes mache, lass mich meine eigene Kurve in Schwung bringen Kurve Absoluter Text. Oh. Okay. Du bist stummgeschaltet. Du bist stummgeschaltet. Okay. Okay. Wie lange bin ich schon stumm geschaltet? Seit du weggegangen bist. Ordnung. Muss ich rückwärts gehen Ich glaube nicht, dass wir es gehört haben, als du das Rutschen gemacht hast. Ja. Also sind wir hier, richtig? Jeder ist damit einverstanden? Ich meine, zumindest sieht meine Ergebnisliste so aus wie die, die Sie präsentieren. Jeder hat so etwas? Okay. Jep. Okay. Ich entschuldige mich. Haben also alle eine leere Funktion für die Präsentation eines Aktionsblatts erstellt eine leere Funktion für die Präsentation eines Aktionsblatts Es macht nichts. Es verhindert nur, dass wir einen Fehler in der Konsole haben? Ja. In Ordnung. Also entscheiden wir uns für den. Okay. Also lass uns jetzt wieder hierher gehen. Okay. Jetzt werden wir die Benutzeroberfläche mit dem Slider etwas konkreter gestalten. Ich glaube, wir haben diese Benutzeroberfläche alle schon einmal gesehen. Was wir hier tun , ist, dass wir eine Komponente mit Ion-Item-Optionen hinzufügen müssen. Und damit können wir auf beiden Seiten des Elements eine Schaltfläche hinzufügen . Es bleibt also verborgen, bis der Benutzer nach links oder rechts wischt In diesem Fall möchte ich auf der rechten Seite eine Schaltfläche zum Löschen erstellen rechten Seite eine Schaltfläche zum Löschen Wenn der Benutzer also nach links rutscht, wird ihm die Schaltfläche Löschen angezeigt. Das ist das Markup, das wir brauchen, um das zu erreichen, und es kommt direkt nach dem Tag Ion Items Closed Mach das hier. Ich finde das Ion-Item-Tag geschlossen und füge das Seitenende mit den On-Optionen hinzu, was bedeutet, dass es für die meisten von uns auf der rechten Seite sein wird. Hier verwende ich die Gefahrenfarbe, die standardmäßig rot und ionisch ist, und lösche den Button Also ein paar Dinge. Ich glaube, ich habe das beim letzten Mal erwähnt. Wann immer Sie einen Container haben, einen Ioniker, der mehrere Dinge wie die Schaltfläche oder in diesem Fall die Option eines Elements verarbeiten kann Schaltfläche oder in diesem Fall die Option eines Elements Normalerweise fügen Sie das in einer Pluralversion desselben Tag-Namens Die Umrandung der Schaltflächen enthält also keine Schaltflächenobjekte. In diesem Fall enthält eine Option eine Option. Macht das Sinn? Okay. Und dann für hier werden wir Klick-Events veranstalten, die ich einberufen werde. Bestätigen Sie, dass der Student den aktuellen Schüler bestanden hat. Wir sind immer noch in den NG Four, also haben wir immer noch Schüler. Okay. Okay. Und nochmal, es existiert noch nicht. Nun, eine wirklich coole Sache daran. Lass mich dir das ganz schnell zeigen. Gehe zur gerenderten Seite. Jetzt sollte ich also in der Lage sein, es zu verschieben und die Löschtaste zu drücken. Und weil es keine Funktion gibt, wird es nichts tun, wir geben mir eine Fehlermeldung in der Konsole. Aber zum Schmunzeln, du bist nicht begrenzt, weil du nicht auf eins beschränkt bist und das sollte eine Selbstverständlichkeit sein weil es einen Mehrkomponenten-Container hat Also für ein Grinsen, wenn ich zwei gebe, sind es zwei. Also fragte ich mich eines Tages, ich frage mich, wie viele damit umgehen können Und interessanterweise bewältigt es so ziemlich so viele, wie man darauf werfen kann Und es macht das Richtige. Ich meine, das Markup sieht albern aus, aber das Markup funktioniert. Also ich fand das irgendwie cool, aber sie unterstützen das. Wie viele musste ich entfernen? Okay. Ziemlich viele. Okay. Und ich gehe davon aus, dass Sie es auch als Symbol anstelle von Kevins Worten verwenden können. Interessanterweise nein. Weil Sie feststellen, dass dies kein Einschaltknopf ist Es handelt sich um eine Ion-Item-Option. Aber Sie sprechen ein gutes Argument an. Lass mich weitermachen, das habe ich noch nie gemacht. Lassen Sie uns sehen, ob wir das, was ich sage, dort tun müssen. Also das war die Option. Kannst du ein Symbol hineinlegen? Es sieht nicht so aus, als ob es ein Symbol unterstützt. Es befindet sich im Schiebeteil des Artikels in der Dokumentation. Ordnung. Also hier ist , was wir jetzt machen? Nein, bitteschön. Ja. Okay. Ich bin froh, dass ich mich hier irre. Das ergibt sehr viel Sinn. In diesem Fall könnten wir also anstelle der Option Ion Item wählen. Nun, lass es uns versuchen. Wir hätten es tun ich denke, das ist gültig. Und wo macht dann der Klick darauf? Und was ist mit Offman's Bill? Macht das? Nein. Ich brauche einen Steckplatz. Ordnung. Ich wollte nie davor zurückschrecken live zu programmieren und spontan zu experimentieren Das ist der Tod für Demo-Gott, oder? Stimmt. Jetzt ist die Frage, wo ist meine App? Hier ist meine App. Schau dir das an. Das ist nicht ganz richtig. Es ist so, dass ich noch einen zusätzlichen hatte. Okay. Also ich schätze, wir hätten hier dasselbe tun können. Roller ist gleich Gefahr. Nein. Also das wäre auf die Option gesetzt. Da hast du's. Wie ist das? Ehrlich gesagt, ich glaube, das gefällt mir besser. Also werde ich diesen loswerden. Ich habe nur eine Option mit dem Symbol. Und es rendert. Okay. Nicht schlecht. Guter Anruf. Es ist mir ehrlich gesagt nie in den Sinn gekommen, dort eine Ikone zu platzieren. Ich habe es noch nie gemacht gesehen. Es ist immer eine Textschaltfläche. In Ordnung. Sind hier alle gefangen? Ja. Lass mich den Code ganz schnell holen. Oh, klar. Oder willst du den Icon-Code? Oh, der Icon-Code. Ja. Den Icon-Code habe ich hier. Kannst du das lesen? Ja. Ja. Okay. Ordnung. Sag mir Bescheid , wenn du es hast. Und Sie können wahrscheinlich erraten, was als Nächstes kommt. Als Nächstes müssen wir nur die fehlende Funktion ausarbeiten. Ordnung, verstanden. Und dann machen wir das. Okay. Nein, zumindest vorerst. Okay. Das nächste , was ich tun möchte. Halte das wieder aus dem Weg. Das hier unten ist ein schwebender Action-Button. Es ist toll und ich glaube, es wird hauptsächlich im Materialdesign verwendet. Ich glaube nicht, dass ich es in iOSasthh oft gesehen habe . Die Google-Anwendungen verwenden es in Gmail und Google verwenden es in Gmail und Okay. Also, um das zu benutzen, und ich habe es hier, ist es nur ein schnelles Popup-Menü fast für Debugging-Zwecke Das ist also eine Schaltfläche zum Hinzufügen von Schülern, und das ist ein Zurücksetzen der Anwendung auf ihren ursprünglichen Zustand, und ich glaube, diese würde alles löschen und dann die Datenbank anzeigen Um das zu tun. Nur ein paar Dinge , die Sie über einen Fab wissen sollten. Wenn es geöffnet ist, ist es aktiviert. Sie können das Kantenattribut auf „Wahr“ oder „Falsch“ setzen. Wenn es wahr ist, versuche ich, ob ich das richtig verstanden Der Fab wird am Rand der Kopfzeile angezeigt , wenn er vertikal ist. Also horizontal und vertikal, um zu bestimmen, wo sich der Fab auf dem Bildschirm befindet. Okay. Ich habe ihn immer nur in der Ecke gesehen, aber du kannst sie auch in die Mitte stellen. Ich glaube, wenn Edge wahr ist, wird es den Header tatsächlich ein wenig überlappen. Und wenn es falsch ist, wird es im Inhalt unter der Kopfzeile platziert. Und ich habe noch eine weitere Notiz hier. Wenn „Vertikal“ auf „Unten“ eingestellt ist, sollte der Schlitz fixiert werden . Das ist eine Notiz, die ich für mich habe, und ich kann mich ehrlich gesagt nicht erinnern, was das bedeutet. Okay. Also. Das ist das Markup, um das tolle Menü funktionsfähig Wir erstellen also einen Blick auf den Container am unteren rechten horizontalen Ende, also unten rechts Und hier verwende ich Slot Fixed. Und es wird aus einem tollen Button bestehen. Dort sehen Sie, wann das Menü nicht erweitert ist. Es wird nur ein Symbol mit einer vertikalen Ellipse sein. Wenn es erweitert wird, werden wir die On-Fab-Liste haben Und sie wird nach links bis zum Anfang der Seite erweitert . Und es wird einige Knöpfe haben. Und denken Sie daran, wie ich gesagt habe, dass das Ionische wirklich konsistent ist , wenn es darum geht, Dinge zu benennen Dies scheint eine Ausnahme zu sein , da die Liste die Schaltflächen enthält Es ist keine tolle Button-Sammlung. Es ist eine Sammlung, die auf der Wunschliste steht. Lass uns das ganz schnell erledigen. Mal sehen, ob ich das schaffe. Das ist eine Menge Text auf dem Bildschirm. Lass es mich in Stücken machen. Dies wird das linke Element innerhalb des On-Inhalts sein. Also weiter Fab. Also ich habe keine Ahnung, woher es weiß , dass ich das machen wollte. Ordnung, ich glaube, du besorgst dir einen Polizisten. Es wird ein bisschen gruselig. Okay. Benutzt ihr Copilot und könnt ihr mir den Link dafür geben? Ja. Darüber haben wir letztes Mal gesprochen. Ich habe die Erweiterung hier geladen. Nein, egal, tut mir leid. Ich dachte, du benutzt die Schnipsel. Ja. Ja, ich habe ein paar Schnipsel. Ordnung. Ich werde einfach tippen. Ich kann es jetzt nicht sehen. Ich habe einige, die ionisch sind. Ich habe welche auf Schnipseln. Es ist dieser, der gerade auf Snippets aufgerufen wurde. Ich will wieder hier her. Ich könnte wahrscheinlich einfach den Copiloten ausschalten. Ordnung. Also hier drin, wir haben einen tollen Button. Die vertikalen Ellipsen. Und dann nach dem Knopf. Okay. Oh, ziemlich gut. Ich nehme nur noch ein paar. Okay. Das Symbol ist ein Ei, aber für mich sah es so nah an einem Samen aus, dass ich beschloss, es für die Datenbank zu verwenden. Aber im Moment werden wir dem noch nicht einmal irgendwelche Funktionen hinzufügen können. Wenn es funktioniert, funktionieren wir im Menü. Ist es das, was jeder hat? Okay. Wenn du willst, kannst du mit dem Spieler auf der Fehlerseite herumspielen . Wenn du es vorziehst, größer zu werden, dann sollten wir es in der Lage sein, es auf die gleiche Seite zu ändern. Dann werde erwachsen. Okay. Das ist klasse. Das ist ein cooles kleines Feature. Ich benutze es oft zum Debuggen. Ich werde einen kleinen Debugging-Fab erstellen, der nur aktiviert ist, wenn der Produktionsmodus falsch oder der Entwicklungsmodus wahr ist oder was auch immer Angular verwendet Ich füge Dinge wie Datenbank ein, lösche die Datenbank, lösche die Protokolle, zeige mir Geräteinformationen und solche Dinge Oder wenn ich ein Spiel schreibe, werde ich eines haben, das das gesamte Spiel bis zum letzten Zug durchspielt zum letzten Zug durchspielt , sodass ich das Szenario am Ende des Spiels testen kann. Okay. Okay. Sie können auch programmatisch damit herumspielen. Sie haben alle eine API, aber ich versuche, so viel wie möglich mit Markup zu machen Alle sind bereit weiterzumachen. Hat jeder einen Fab? Ja. Ja. In Ordnung. Jetzt ist es an der Zeit, einige Funktionen hinter diese Benutzeroberflächen zu stellen . Denken Sie also daran, dass ich erwähnt habe, dass es einige wichtige Controller gibt , die wir benötigen werden. Also lass uns das jetzt machen. Kennt jeder das Maßnahmenblatt? Das ist das kleine Menü, das von unten auftaucht? Ich denke, sowohl IOS als auch Android haben eine Version davon. Und wie Sie erwarten würden, wird Monic Ihnen das geben, das für Ihr Gerät negativ aussieht Sie erstellen diese jedoch programmgesteuert. Sie erstellen sie nicht in HTML. Sie erstellen sie in Typoskript. Okay. Aber diese Funktion steht leer da. Wir müssen sie als Sync markieren, weil alle ionischen Controller asynchron sind, also werden wir die Funktionen abwarten wollen , die wir aufrufen Also das Erste, was ich tun möchte, sind einige Buttons zu erstellen Normalerweise würde ich das alles in einer riesigen Funktion machen, aber das ist wirklich schwer zu präsentieren. Also werde ich die Schaltflächen erstellen zuerst die Schaltflächen erstellen und sie dann alle kombinieren und anzeigen . Macht das Sinn? Also mit meinem Code hier. Nein. Da haben wir's. B im Typoskript der Dienstpläne Bevor wir das Maßnahmenblatt präsentieren, nein, tut mir leid . Innerhalb des Aktionsblatts. Also werden wir einen Button erstellen. Es ist eine Art Aktionsblattschaltfläche. Das gibt dieser netten Intelligenz. Okay. Okay. Und was soll diese Funktion tun oder was soll die Schaltfläche tun , wenn der Benutzer darauf klickt Das erste ist also die Textbeschriftung für den Menüpunkt, das Symbol, das wir präsentieren möchten, was nur der Name des Symbols von on icons ist. Und dann könnte die Funktion, die wir ausführen wollen , eine Namensfunktion sein, aber in diesem Fall verwende ich einfach eine Pfeilfunktion. Und die Funktion gibt es bereits im Studentenservice. Also dieses Studentenwerk Mark anwesend. Ich brauche ein Komma. Und dann ein Semikolon Und dann, wie ich es oft tue, habe ich vergessen, den Action Sheet-Button aus Ionic Angular zu importieren den Action Sheet-Button aus Ist das alles geklärt? Okay. Hat jeder den? Ja. Also sind es wirklich so die hinteren Häkchen oder sind es einfache Anführungszeichen? Es kann beides sein. Okay. Ich glaube, an einem Ort war ich tatsächlich, ich erinnere mich, warum ich das getan habe. Wenn Sie einfache Anführungszeichen in PowerPoint eingeben, werden sie automatisch in Curly umgewandelt , was bedeutet, dass Sie sie nicht kopieren und einfügen können Also habe ich angefangen, Backticks-Folien zu verwenden. C. Okay. Gute Frage. Okay. Also, wenn Mark abwesend ist, wird es fast genauso sein. Ich bin so faul. Ich werde es hervorheben. Und dann die Optionen mit dem Pfeil nach unten verschieben. Erstellen Sie eine Kopie des Blocks. Manche von denen stehen im Weg. Okay. Fehlenden Knopf markieren. Als abwesend markieren. Und das ist die Gliederung. Und das hier, ich rufe den Studentenservice für Mark Absent an. Sag mir, wann ich weitermachen kann. Und bei mir war es alles, als ich die da reingetan habe, alles war rot. Also muss ich sie an der falschen Stelle haben. Willst du deinen Bildschirm ganz schnell teilen? Ich kann nicht, weil es nicht so ist , dass ich dabei auf meinem Tablet bin. Okay. Stellen Sie sicher, dass sich die Konstanten darin befinden , die eine Aktionsblattfunktion darstellen Das wäre der Grund, warum ich dasselbe getan habe. Als ich war, fing ich einfach an, draußen darauf zu tippen. Und dann fiel mir ein, dass man keine Konstante in der Klasse haben kann. Okay. Okay. Das hat es geschafft. Ich hab's geschafft. Okay. Also müssen wir nur noch ein paar Buttons erstellen, aber sie werden alle sehr ähnlich erstellt werden. Auch hier werde ich einfach einen neuen Block erstellen. Und das ist „Löschen“ der Schaltfläche „ Textbeschriftungen löschen“. Verwenden Sie das Trach-Symbol. Und hier, beachten Sie, dass ich eine weitere Eigenschaft hinzufüge. Ich füge eine Rolle hinzu, und diese Rolle ist destruktiv. Okay. Destructive macht nur auf IOS einen Unterschied. Android, es wird überhaupt keinen Unterschied machen. Aber auf IOS wird dieser bestimmte Menüpunkt rot angezeigt. Und dann, was den Handler angeht, nenne ich diesen bestätigten Löschversuch Student. Hat das jeder? 1 Sekunde. Sicher. Michael, haben wir zwei Buttons auf dem bestätigten „Schüler löschen“ -Button? Haben wir zwei Schaltflächen bei Bestätigt, Schüler löschen? Nun, kannst du dort einfach für eine Sekunde den Grader-Code zeigen Die Mine? Ja. Ja, das ist in Ordnung. Okay. Also all das sind gegenwärtige Aktionen. Okay. Das ist mein Problem. Korrekt. Einfach reparieren. Richtig. Und bestätige, wir werden am Ende, du weißt schon, einen Bestätigungsdialog öffnen und sagen: Bist du sicher, dass du diese Person löschen willst? Deshalb rufe ich im Studierendenservice noch nie Delete an. Hab dich. Macht Sinn. Okay. Lass mich das vorerst wieder hier hinstellen. Okay. Und das ist, glaube ich, unser letzter Button, und das ist der Abbrechen-Button. Das Aktionsblatt wird also angezeigt. Du willst nichts tun. Du willst es nur stornieren. Das ist eine Schaltfläche zum Stornieren. Beachten Sie, dass dieser keinen Handler hat. Also weil es keinen braucht. Also werde ich einfach nehmen. Das Gleiche, duplizieren, den Handler loswerden. Nennen wir es „Abbrechen“, Texas storniert die Klamotten und die Rolle ist gestrichen. Es gibt also einige eingebaute Rollen, in die das Aktionsblatt integriert ist und die Schaltfläche „ Stornieren“ als eine von ihnen, und das heißt einfach, nichts tun. Und wie Sie gesehen haben, sind sie auch destruktiv. Okay. Also sollten wir jetzt vier Knöpfe haben, die nichts tun, oder? Sie existieren noch nicht. werden eigentlich durch nichts referenziert. Als Nächstes müssen Sie das Aktionsblatt aus diesen Schaltflächen erstellen . Lassen Sie mich das nach unten verschieben. Hier, geh dir aus dem Weg. Jetzt wollen wir also das Aktionsblatt erstellen. Um das zu tun. Entschuldigung, mach genauso weiter. Entschuldigung, das steht in demselben aktuellen Aktionsblatt. Wir sind immer noch im aktuellen Aktionsblatt. Funktion. Aber diese erste Zeile wird nicht funktionieren, weil Mike nie daran denkt, Dinge in seinen Konstruktor zu injizieren Bevor wir das tun, gehen Sie zu Ihrem Konstruktor und fügen Sie einen Actionsheet-Controller oder Pipe-Action-Controller hinzu einen Actionsheet-Controller oder Pipe-Action-Controller Warum gefällt ihm das nicht? Weil ich es nicht importiert habe. Also werde ich den Action Sheet Controller aus Ionic Angular importieren aus Ionic Angular Sobald Sie das getan haben, können wir jetzt zum aktuellen Aktionsblatt zurückkehren und den Rest eingeben Also werden wir ein Aktionsblatt erstellen und warten auf diesen Aktionsblatt-Controller. Ich habe es schon einmal erwähnt. Alle diese Funktionen sind asynchron und versprechen etwas Um das Aktionsblatt zu erstellen, geben wir ihm ein einzelnes Optionsobjekt Hier sagen wir ihm, was wir darin haben wollen. Wir wollen hier einen Header haben, die Backticks sind tatsächlich nützlich. Wir wollen den Vor- und Nachnamen des Schülers. Und dann werden wir kreieren. Das ist auch ziemlich gut. Und wir werden die Schaltfläche erstellen, indem wir eine Reihe dieser konstanten Schaltflächen erstellen , die wir bereits erstellt haben. Das macht Sinn? Haben wir hier irgendein Typskript oder einen Angular Guru? Ich habe diese Frage immer gestellt und nie eine einheitliche Antwort bekommen. Okay. Macht es Sinn, auf die letzte Anweisung einer asynchronen Funktion zu warten Okay. Wenn Sie sich jetzt eine Aktionsblattschaltfläche ansehen, denkt Typescript, dass sie ein Versprechen als ungültig zurückgibt , weil wir eine Synchronisierung markiert haben und nichts zurückgeben Ich könnte aber auch präsentieren, was ein Versprechen zurückgibt Und dann denkt Typescript, dass es ein ungültiges Versprechen zurückgibt. Was ist der Unterschied zwischen der Rückgabe des Versprechens, das uns durch die Gegenwart gegeben wurde, oder dem bloßen Warten Es gibt einen Unterschied, und er ist sehr subtil. Und ich kann mich ehrlich gesagt nicht erinnern, was es ist. Ich glaube, es hat etwas mit der Aufrufliste und mit Fehlern zu tun . Ich denke, wenn Sie die Aktion nicht erwidern ist das Ergebnis des Versprechens unbestimmt Aber wenn Sie die Aktion precent zurückgeben, dann geben Sie Wert des Versprechens zurück, dass das Geschenk Was auch bedeutet, dass das Versprechen ungültig ist. Ja. Also der Unterschied, so wie ich es sehe, ist, dass wir uns dafür entscheiden, undefiniert zurückzukehren Diese Methode wird also quasi zum Feuer und Vergiss, richtig? Ich denke schon. Siehst du irgendeinen Wert darin, das Versprechen zurückzugeben? Ich weiß nicht einmal, warum sie das Versprechen zurückgeben , denn wenn ihre Rückgabe ungültig ist und Sie vielleicht sehen möchten, ob sie fehlschlägt, ich weiß es nicht. Ehrlich gesagt habe ich in all den ionischen Apps, die ich geschrieben habe , nie einen Grund dafür gefunden . Du kannst das sogar tun Du musst nicht einmal darauf warten. Und ich glaube, dass es immer noch denkt. Das Versprechen ist nichtig. Ich habe aber andere Leute gesehen, die solche Dinge getan haben. Sie werden nach der Gegenwart etwas tun. Aber wenn Sie das tun wollen, haben Sie schon das asynchrone Await-Muster verwendet, Sie könnten es einfach so machen So etwas in der Art. Fülle das aus. Okay. Okay. Okay. Also, wenn du das jetzt hast, wenn es gerendert wird, sollten wir, wenn es gerendert wird, ein Maßnahmenblatt besorgen Also, was machen wir mit Casey McBry? Wir werden als anwesend markieren, als abwesend markieren usw. Wir werden löschen, löschen bringt nichts und wir könnten stornieren Sie können ein Aktionsblatt auch schließen indem Sie einfach auf eine beliebige Stelle klicken Und die Escape-Taste auf Ihrer Tastatur. Ja. Hat jeder ein funktionierendes Maßnahmenblatt? Ja. Ja. Ordnung. Also werden wir wieder viele ähnliche Dinge machen. Durch die Implementierung der Warnung zum Löschen. Dazu benötigen wir den Alert-Controller. Die API ist fast identisch mit dem Action Sheet Controller. Also nochmal, was ich der Einfachheit halber oder der Bildschirmfläche machen möchte , ist, ein paar Buttons zu erstellen, und das muss synchronisiert werden. Diese Schaltfläche zum Löschen. Delete wählt Handler aus. Ja, sicher. Schüler löschen. Es. Okay. Also Tippfehler auf der Folie. Ich glaube, Student löschen sucht nach der ID des Studenten Also geben wir einfach den Studentenausweis weiter und nicht den gesamten Studenten. Und dann die Schaltfläche Abbrechen. Okay. Okay. Und genau wie zuvor funktioniert die Rolle des Abbrechens automatisch so, wie Sie es erwarten würden. Die Warnung wird automatisch abgewiesen. Ich vermisse nur hier. Haben wir eine Methode zum Löschen von Schülern entwickelt? Sollte im Studentenservice eine Methode zum Löschen von Studenten verfügbar sein. Ja, ich sehe einen. Und dann genau wie zuvor. Was war die Rolle? Entschuldigung, wurde es abgesagt? Rolle stornieren. Ja. Okay. Also wird kein Handler benötigt. können Sie all diesen Dingen immer noch Handler hinzufügen Role Cancel können Sie all diesen Dingen immer noch Handler hinzufügen. Und ich kann mir vorstellen, dass Sie sich vielleicht anmelden möchten. Weißt du, hey, sie haben gerade einen Studenten gelöscht , solche Sachen. Genau wie zuvor, auf dem Alert-Controller. Hat jeder seine zwei Knöpfe? Und der Alert-Controller? Nein. Also, ich glaube, ich bin da, wo du bist. Mein Alert-Controller ist veraltet und wurde nie benutzt. Richtig. Weil wir es noch nicht benutzt haben. Okay. Also, um das jetzt zu tun. Okay. Mir geht es gut. Und wieder ist es dem Action Sheet Controller sehr ähnlich. In diesem Fall werden wir auch einen Unterheader und eine Nachricht haben . Wir haben die beiden Knöpfe. Jetzt müssen wir, genau wie der andere Controller , eine Erstellungsfunktion haben , die ein Optionsobjekt akzeptiert. Okay. Und das ist in der bestätigten Löschung? Wir befinden uns immer noch im bestätigten Löschvorgang, ja. Okay. Okay. Also, was ich hier tun möchte, ist hey, willst du den Schüler löschen, den Vor- und Nachnamen des Schülers anzeigen , damit der Benutzer weiß, was er löscht. Weißt du, nichts ist schlimmer, als auf die falsche Person zu klicken. Und dann Nachricht. Es ist wirklich machbar. Aber ein anderes Mal. Und dann fügen wir die beiden Knöpfe hinzu. Und dann endlich, wenn du alles richtig nimmst. Okay. Ein paar Dinge. Erstens sollte das funktionieren. Und das sollte funktionieren. Und die Löschtaste ruft einfach den Dienst auf. Wenn ich seride lösche ist es. Ich kann Greg loswerden. Ich werde Neil los und so weiter Weil sie lokal gespeichert sind, auch wenn ich sie oft aktualisiere. Ordnung. Ich glaube, wir gehen. Führt ihr alle Schüler mit verlassenen? Nein. Ich Nein. Ich erhalte die Warnung nicht. Okay. Also lass uns das ein bisschen auflockern. Ihr bestätigter Löschvorgang sollte so aussehen . Bestätigter Student. Schaltfläche löschen, Handler löschen, Schüler löschen, ja. Schaltfläche „Abbrechen“, „Abbrechen“, „ Schließen“, ganz zu schweigen von Kleidung. Und dann ständige Alarmbereitschaft. Oh, okay. Da ist mein Problem. Und das ist okay. Ja. Okay, funktioniert. Mir fehlte die Linie 70. Okay. Ordnung. Also jetzt. Gib mir hier eine Sekunde. Okay. Ordnung. Wir werden eine kleine Änderung vornehmen. Und es würde dir helfen, die Folien zu sehen. Okay. Ich möchte der Komponente die Funktion „Schüler löschen“ hinzufügen . Und ich zeige dir warum. Gehen wir in den Code und fügen eine weitere Funktion hinzu. Denken Sie daran, dass ich das hatte. Das möchte ich sehen. Das heißt, hier bei der bestätigten Löschung nennen wir das stattdessen „ Student löschen“. An diesem Punkt sollte sich überhaupt nichts ändern. Anrufen Ich habe den Handler für die Löschtaste vom Anruf beim Studierendenservice auf den Aufruf dieses Löschstudenten umgestellt die Löschtaste vom Anruf beim . Okay. Es ist eine etwas konsistentere API, weißt du, wir haben dem Studenten die Komponente erzählt. Und das verbirgt dann die Tatsache, dass das Studentenwerk das nur per Ausweis machen will Also den vollen Studenten an diesen weiterreichen. Also, während und während des Anrufs. Okay. Habe. Okay. Also, was ich hier machen möchte, ist den letzten Ionen-Controller zu verwenden , den wir hier verwenden werden, und das ist der Toast-Controller Also oft willst du dem Benutzer eine Nachricht geben , dass etwas Aber es ist nicht kritisch genug , um den Benutzer aufzuhalten. Und wenn der Benutzer die Nachricht verpasst, ist das vielleicht keine große Sache, oder? Das ist also der perfekte Anwendungsfall für einen Toast. Okay. Also, und du kannst das Bild von dem Toast hier oben sehen. Also, was ich jetzt tun möchte, ist den Rest der Funktion „Schüler löschen“ zu implementieren Okay. Sie werden also sehen, dass die API für den Toast-Controller fast genau dieselbe ist wie für den Alert-Controller Aber in diesem Fall habe ich keine Tasten, also ist es eine viel einfachere Funktion Lass mich dir das aus dem Weg räumen. Gehen Sie in meine Funktion „Schüler löschen“ und richten Sie das ein. Delete Student gibt ein Versprechen zurück, damit wir es abwarten können. Dann werden wir einen Toast kreieren. Und Sie sehen wahrscheinlich schon den Fehler, den ich habe? Und das ist so, dass ich noch keinen Toast-Controller habe. Sie also zurück zum Konstruktor, Post-Controller, und importieren Sie ihn dann aus Ionic Dann kann ich runterkommen und fertig werden. Mein Toast hat eine Botschaft. Und eine gute. Es wurde gelöscht. Okay. Und jetzt, die Botschaft ist ziemlich einfach. Was möchtest du dem Benutzer sagen Der Rest sind die anderen Optionen, wie lange möchten Sie diese Informationen anzeigen? Und wo möchten Sie diese Informationen anzeigen? Und in meinem Fall möchte ich weitermachen und 3 Sekunden zeigen. Das ist also in Millisekunden. Und ich werde es oben auf dem Bildschirm platzieren. Es gibt noch andere Dinge, die wir tun können. Wir können Color Danger so machen , dass es rot angezeigt wird. Okay. Ich denke, das Coole ist, wenn du den Weltraum kontrollierst , dann kannst du dir sagen, was die anderen Optionen hier sind. Sie können also Schaltflächen zu einem Toast hinzufügen, genauso wie wir die Anordnung der Schaltflächen zu den anderen hinzugefügt haben Und es ist buchstäblich dieselbe API. Sie könnten also eine Schaltfläche erstellen, auf die der Benutzer klicken kann, um sie zu schließen, bevor die 3 Sekunden abgelaufen sind. Das ist abgelaufen. Du könntest ihm ein Symbol für die linke Seite geben, ein Symbol auf fast einer Kopfzeile neben der Nachricht Also können wir das machen, wir können Icon Tract machen und dann den Toast präsentieren Jetzt, wenn ich zum Löschen gehe. Der Benutzer. Ich kriege die Bestätigung und dann sollte ich oben einen Toast bekommen Und du kannst das kleine Papierkorbsymbol sehen und es wurde gelöscht. Okay. Und ich kann es auch in die Mitte legen. Ich muss es glauben, Bobby. Da hast du's. Oder ganz unten. Fragen. Hat jeder den zum Laufen gebracht? Okay. Normalerweise wären wir zu diesem Zeitpunkt pünktlich pro Pause Wir haben noch ungefähr eine halbe Stunde. Und das nächste, worauf wir zugreifen werden, ist die Informationsseite für Studierende. Ich glaube also, dass ich das normalerweise nach dem Mittagessen machen möchte . Es gibt also etwas , das wir auf der Informationsseite für Studierende übersehen haben. Weiß jemand was es ist? Bemerkt es jemand? Gehen wir zurück zur App. Tatsächlich gibt es ein paar Dinge, die wir verpasst haben. Wir können das in den nächsten 20 Minuten konkretisieren. Es steckt kein Code dahinter, außer hinter neuen. Keines davon macht irgendwas. Und nichts passiert, wenn wir als anwesend markieren. Also werde ich um einen Gruppenkonsens bitten. Woran möchtest du als Nächstes arbeiten? Möchten Sie sie als abwesend und anwesend markieren oder möchten Sie sie löschen, indem Sie der Datenbank Platz nehmen und alle in der Datenbank löschen Nun, entscheiden wir uns für Gegenwart und Abwesende. Ordnung. Okay. Also präsent und abwesend, bringst du den S-Code zurück? Okay. Die Benutzeroberfläche, die ich mir für Gegenwart und Abwesenheit vorgestellt hatte, wäre also ein anderes Symbol irgendwo auf der Liste, oder vielleicht würde ich das Symbol durch ein vorhandenes oder ein abwesendes Symbol ersetzen. Haben Sie eine Präferenz? Klingt einer von denen für irgendjemanden besser oder schlechter? Wenn man sich das vorstellt, könnte das eine sehr kleine Benutzeroberfläche sein. Ich denke, lass uns das versuchen. Direkt nach dem Personenumrisssymbol. Fügen wir ein weiteres On-Symbol hinzu. Ich glaube, wir wollen immer noch, dass Slot gleich Start ist. Und das sind ein paar Möglichkeiten, wie wir das angehen könnten. Ich werde es ausführlich machen Dieser wird gleichberechtigt sein Wir werden dieselben Symbole verwenden , die wir für „Als anwesend markieren“ und „Löschen“ verwenden Also das Gegenwärtige und das Nebensächliche für abwesend. Wenn wir das tun, haben wir ein Symbol für Gegenwart, und dann fehlt eines, was bedeutet, dass wir entscheiden müssen, welches wir zeigen wollen. Wir können das auf zwei Arten tun. Wir können das machen. Wir stellen fest, dass dieses Symbol nur gerendert wird, wenn Studentenstatus dem Status „Gegenwart“ entspricht. Okay. Und dann können wir das machen, was der Studentenstatus ist. Abwesend. Also, bevor ich das speichere und rendern lasse, was wird es uns jetzt zeigen? Was wird es bewirken? Es wird eine der beiden Schaltflächen angezeigt. Bist du dir sicher? Tut mir leid. Einer der beiden. I Was ist, wenn es so ist? Weil Sie sich erinnern, dass es ein optionales Feld ist, also kann es Null sein. Also wenn ich mir das ansehe. Ich bin mit dieser Benutzeroberfläche nicht besonders zufrieden. Was denkst du? Okay. Und ich glaube, es funktioniert. Füge ein drittes Symbol hinzu. Ein Nichts-Symbol? Was passiert, wenn du. Das könntest du sicherlich. Also können wir etwas hinzufügen, damit wir noch eins haben können. Und ich denke, Sie können das tatsächlich tun, wenn Sie ihm einen Namen geben, den es nicht gibt. Also nenne ich es Mike. Und du kannst einfach NG sagen, kein Studentenstatus. Also, wenn es überhaupt keinen Wert hat, dann denke ich, was passieren wird. Ja. War es das, was du im Sinn hattest? Ich habe jetzt nichts, Rendern. Fantastisch. Was hast du geändert? Ich habe eine hinzugefügt. Ich habe eine Tilda anstelle eines Okay gesetzt. Mir geht es gut Okay. Also das ist nicht schlecht. Aber dann begann ich mich zu fragen, was ist der Zweck des Personensymbols? Aber vielleicht ist es am besten, das Personensymbol zu platzieren, wenn nicht sogar den Studentenstatus, und dieses dann komplett zu entfernen. Wie funktioniert das? Ich habe dich vor ein paar Tagen gewarnt. Ich bin kein Designer. Deshalb verwende ich Ionic, weil ich ihre Muster normalerweise ziemlich gut kopieren kann ihre Muster normalerweise ziemlich gut kopieren Kannst du dir den Code noch einmal ansehen? Klar. Es scheint , als bräuchten wir zwei neue Varianten des Personensymbols. Nun, mit einem Plus daneben und etwas mit einem durchgezogenen Schrägstrich Ordnung. Dann schauen wir uns die Icons an. Und schauen wir uns unsere gesamte Person an. Da hast du's. Plus und Mus. Wir verwenden das, um eine Person hinzuzufügen. Ja. Okay. Aber wir haben gefüllt und unbefüllt Sie haben also umrissen und gefüllt. Okay. Anstelle des Augapfels Und dann hast du Sharp, aber ich glaube nicht, dass uns das hier wirklich hilft Ich meine, nochmal, es ist irgendwie. Aber es gab noch einen, nicht wahr? Was ist das? Ich hätte nicht gedacht, dass das Barrierefreiheit ist, aber okay Also könnten wir diesen verwenden für ich weiß nicht, oder wir könnten diesen benutzen, um Dieser Körper. Und dann könntest du Okay benutzen. Person und Personenzusammenfassung? Kannst du ihre Farbe ändern? Ja, das könnte sie. Was denkst du? Ich weiß es nicht. Durchgehend schwarzer Umriss schwarz oder grau oder unbekannt. Nun, ich meine, es ist ein Designproblem bei dir, dass ich kein Designer bin, also ist es mir egal. Aber wie Sie sehen können, müssten Sie hier nur diesen Teil ändern. Aber du hattest ein gutes Argument, also könntest du diesen haben, sie haben ein Grau. Welche Farbe hat das? Okay. Lassen Sie mich noch einmal auf ihre Farben auf den Knöpfen eingehen. Sie haben eine Liste mit Farben. Flugfarbe entspricht Licht. Wir arbeiten. Und dann könntest du es tun, wenn sie abwesend sind, okay. Gliederung der Person. Und wenn sie da sind, können Person und Sie sogar Farbe gleich erfolgreich machen. Nein, nicht der. Okay. Wie ist das? Klar. Nun, der ist fast unsichtbar, nicht wahr? Also ich schätze, ich würde das auf „Farbe ist gleich“ ändern. War es mittelgroß? Mittel. Ja. Ja, das hilft mir auch nicht. Ist ein Medium gefüllt? könnten wir machen. Das wäre also nur eine Person. Ja. Damit könnte ich leben. Also Umrisse, sie sind abwesend, grün, sie sind präsent und das Medium, das wir noch nicht kennen. Und das war der Sinn der Reset-Taste , sie alle so zurückzusetzen , dass 4. Session3: Okay. Habe ich die Live-Transkription schon einmal aktiviert? Ist es gerade passiert? Nun, bitteschön. Okay. Also ist die Transkription aktiviert Wenn du es sehen willst, kannst du es, glaube ich, unter dem Menü „Mehr“ finden Sie können es sich ansehen, die Größe ändern usw. Alles klar. Ohne weitere Umschweife. Zu diesem Zeitpunkt sollten wir also eine ziemlich voll funktionsfähige Kaderseite haben Und ich weiß nicht, ob es jeder gesehen hat, aber ich habe sowohl in E-Mails als auch in Slack eine Aufforderung hinterlassen, um zu sehen, wie wir die drei auf den Symbolen loswerden könnten Hat jemand irgendwelche Ideen oder Gedanken darüber, wie das geht? Wenn ja, komm einfach, ja. Ich habe es zum Laufen gebracht. Was hast du getan? Also könnte ich teilen, wenn du willst. Klar. Lassen Sie mich dafür sorgen , dass ich den Bildschirm teile, aber ich glaube, ich muss das Teilen beenden. Okay. Mal sehen, wie ich den Bildschirm teile? Ich weiß nicht, ob ihr das sehen könnt. Ich sage, ich habe es gesagt. Also habe ich all das Zeug auskommentiert. Nein, es ist genau hier. Also Zeile 28. Ja. Also der Name ist an den Namen des Icons gebunden, ihn an den Schüler weitergegeben, und ich habe auch Farbe gemacht. Perfekt. Farbe basiert auf Moment, was hast du getan? Ich habe gerade bestanden, also gebe ich nur den Studentenausweis ab. Farbe entspricht dem Schüler in den Eltern. Was übersehe ich Was wusstest du, womit ich da rumgespielt habe. Tut mir leid. Tut mir leid. Ja. Ich meinte, ich habe diese Syntax schon einmal gesehen. Nein. Und dann sind die Funktionen hier nur zwei H-Anweisungen, von dort aus. Okay. Hast du den Fehler dabei bemerkt, weil du recht hast Das ist ein einfacher Weg, und viele Leute machen es auf diese Weise Aber es gibt einen Fehler, es auf diese Weise und eckig zu machen. Ich möchte wissen, ob du es bemerkt hast? Ich glaube nicht. Okay. Ich habe Sachen auf die Konsole geschrieben und ich weiß es nicht. Es ist ein bisschen schwer zu folgen. Okay. Also sag es mir. Fügen Sie also in jede Funktion eine Konsolenlog-Anweisung mit dem Namen der Funktion ein. Und wenn ich falsch liege, bin ich sehr froh, mich zu irren. Okay. Perfekt. Und dann noch einer für Farbe. Weiß jemand, was passieren wird? Okay. Also öffne deine Todeswerkzeuge. Da hast du's. Das ist es, was passieren wird. Ja. Also die werden ständig angerufen. Ja. Jedes Mal, Angular überprüfen muss, ob sich etwas geändert hat, also muss es für die Datenbindung diese Funktionen aufrufen, weil es keine Möglichkeit hat , zu wissen, dass es nicht neu zeichnen muss In einer Anwendung wie dieser ist das keine große Sache, Sie werden es nie sehen Aber wenn Sie sich etwas mit Hunderten von datengebundenen Komponenten vorstellen könnten, wäre das wirklich unangenehm. Vor allem, wenn diese Funktionen mehr tun würden als nur das, was sie dort tun, oder? Diese Funktionen machen nicht viel. Es ist also keine so große Sache. Ich war bei einem Projekt, bei dem sie mit der Maus darüber gefahren sind und einen Restaufruf getätigt haben Okay. Wie Sie sich vorstellen können, war das nicht schön. Also ich denke, du bist auf dem richtigen Weg. Aber ich habe gesehen, wie das getan wurde, um dies zu verhindern, indem der Name und die Farbe des Symbols in ein eckiges Rohr umgewandelt wurden. Okay. Und mit einem eckigen Rohr hat es buchstäblich die gleichen Funktionen. Aber weil sich der Eingang zur Pipe nicht geändert hat. Angular weiß, dass es die Funktion nicht aufrufen muss. Ist das leicht zu bewerkstelligen? Oh ja. Sicher. Willst du, dass ich es dir durchspreche, oder willst du, dass ich Sure. Okay. Also lass uns sehen , wo wir verhindern, dass die App läuft. Und mach weiter und frag Angular. Wenn du willst, können wir es einfach mit einem machen , dem Namen oder der Farbe. Es spielt keine Rolle, welche Herkunft der Name hat. Okay. Lassen Sie also Angular CLI eine Pipe generieren und PXG eine Pipe generieren Und dann der Name der Pipe, also vielleicht der Name des Symbols Kapital oder ich, das war egal. Vielleicht bist du okay. Das ist in Ordnung. Öffnen Sie jetzt die Icon-Namens-Pipe. Das wird sein: Sie können mit Befehl oder bei gedrückter Maustaste darauf klicken. Im Terminal. Wo steht „Name des Quell-App-Symbols erstellen“? Klickt Control in der Ausgabe auf den Dateinamen? Dieser Typ, richtig? Nein. Der neben dem. Ich hab dich. Das ist die Testdatei. Ja. Lass uns auf den anderen klicken. Die Datei, die nicht getestet wurde. Das ist das App-Modul. In Ordnung, wir nehmen den mittleren. Da hast du's. Okay. Okay. Wenn Sie also eine Pipe verwenden, wird alles, was Sie für den datengebundenen Wert übergeben , an den Wert übergeben. Was Sie hier also im Wesentlichen wollen, ist der Name des Schülers. Die Schüler. Anwesenheitsstatus, richtig? Ja. Sie würden wahrscheinlich nicht den gesamten Studentenwert darauf übertragen wollen, weil Ihnen nur dieser eine Wert wichtig ist. Okay. Also mach weiter. Also wird der Wert eine Zeichenfolge sein. Ich glaube nicht, dass Sie den Rest dieser Parameter benötigen. Es ist aber keine Zeichenfolge. Du hast recht. Es ist keine Schnur. Es ist Studentenstatus? Korrekt. Also ich meine, sobald Sie diesen Punkt umgestaltet haben, ist es wahrscheinlich sinnvoll, ihn zu einem eigenen Typ zu machen Okay. Aber vorerst schaffst du es. Es sollte okay sein, eine Zeichenfolge zu sein. Was ist, wenn es mir gut geht. Okay. Du könntest es genauso machen. Du könntest es abwesend oder präsent machen. Lass uns sofort mit dem Studenten gehen und ich mache es. Sie können das Refactoring später durchführen. Also ja, jetzt geht es nur noch darum, denselben Code zu kopieren und einzufügen Okay. Und das ist ein Wert. Okay. Okay. Also das sieht ziemlich gut aus. Also jetzt zurück in deinem HTML-Code, wo du weitergibst, Icon Name Student anzurufen, gib einfach Student in Student weiter. Einfach Student und dann an den Namen der Pipe weiterleiten. Name des Symbols. Und dann werde den Stift los, okay. Und ich glaube, es gibt wahrscheinlich noch etwas anderes , das du in Ruhe lassen kannst, wenn du willst , weil du es in der Konsole sehen solltest. Sie werden sehen, dass einer von ihnen nicht immer wieder angerufen wird. Woran ich mich nicht erinnern war, ob es etwas gibt, das du nicht mehr benutzen kannst. Ja, werd das los. Okay. Und ich würde ein ähnliches Konsolenprotokoll in die Pipe schreiben. Auf diese Weise können Sie allen beweisen , dass es nur dann aufgerufen wird , wenn es nötig ist. Und es gibt noch etwas, das du hier noch erledigen musst. Ich habe gerade vergessen, was es ist, also müssen wir es gemeinsam herausfinden Mach weiter und starte es. Die Tatsache, dass es im Modul aktiviert ist, das ist vielleicht alles, was Sie tun mussten , weil es automatisch hinzugefügt wurde. Nein, es gibt einen Rat. Okay. In Ordnung. Genau davor hatte ich Angst. Das kann gefunden werden. Das ist schlimmer als Life Coating. Das ist der Versuch, jemand anderem zu sagen , wie man Leben trägt. Das weiß ich. Ordnung. Also die Pfeife ist da. Muss ich sein? Muss ich im Dienstplanmodul sein? Gehe zurück zum A-Modul. Ich denke, wir müssen es vielleicht deklarieren. Nein, Sir. Nein, ich wollte das, weißt du, heute Nachmittag machen, um sicherzugehen, dass ich bereit bin. Oh, meine Güte. Nein, ich fühle mich schlecht. Ist es das? Was war es? Wie lautet der Name der Pfeife? In der Pipe Dot TS-Datei. Da hast du's. Vielleicht nicht. Nein. Öffnen Sie Ihre Pipe-TS-Datei erneut. Es ist der dritte Tab in Ihrem Editor. Nein, es ist hier. Okay. Ja. Also , wie sollte es heißen. Ja, meinem Gehirn fällt es schwer sich daran zu erinnern, und ich benutze sie ständig. Es ist eines dieser Dinge , wenn man es einmal geschrieben hat, man nie wieder darüber nachdenken muss. Es möchte sicherstellen , dass es im Modul Roster-Seite deklariert oder importiert Oh, vielleicht gehört es nicht ins A-Modul. Vielleicht hast du recht. Vielleicht gehört es ins Modul der Dienstplanseite Okay. Also erkläre es hier. Unter Import oder Es hat kein eigenes Modul. Also deklariere es einfach. Wenn Sie den Namen des Symbols eingeben, sollte es ihn für Sie finden. Da hast du's. Und möglicherweise müssen Sie es aus dem App-Modul entfernen. Hier, das stimmt. Okay. Da hast du's. In Ordnung. Also wie oft wird es immer noch angerufen? Einmal für jede Person, oder? Ja. Und sieh dir an, wie oft das Symbol Farbe 9 noch eingibt. Wenn Sie jetzt herumklicken, klicken Sie einfach auf eine beliebige Stelle. Okay. Ja. Ordnung. Nun, es ist ein bisschen besser geworden, also ruft es nicht weiter, meine Knöpfe sind weg. Ich bin mir nicht sicher, was ich dort gemacht habe. Ja. Da hast du's. Ja, neun Mal. Interessanterweise hat das Icon Name Pipe gekriegt, was hast du gemacht Hast du etwas zurückgesetzt? Ich glaube nicht. Ich glaube, das hast du getan. Ich glaube, du hast auf deinem tollen Button auf Reset gedrückt. Ich heile nämlich das ganze Wasser. Ja, wahrscheinlich. Alle deine Anwesenheitsstatus sind weg? Ja. Okay. Okay. Also der ganze Sinn dieser Übung. Ich sollte keine 15 Minuten deiner Zeit verschwenden. wollte Sie davon überzeugen , dass das Aufrufen von Funktionen aus Ihren Angular-Templates nie wirklich eine gute Idee ist. War das die Botschaft, die du daraus gezogen hast? Ja. Absolut. Ich hatte keine Ahnung. Ich meine, ich habe dieses Verhalten schon einmal gesehen. Du wusstest nie warum? Ich wusste nie, dass ich es nie verstanden habe. Ich meine, ich weiß nicht viel über Angular. Werden alle hier Angular fallen lassen und nächste Woche reagieren? Nein. Eines der Dinge , die ich habe, ist Teil dieses Kurses in einem Buch und einem Videoformat für React. Ich neige einfach dazu, Angular viel häufiger zu verwenden, also fühle ich mich dort wohl. Ordnung. Also lass uns das nochmal teilen. Und wir werden zur Detailseite für Schüler gelangen. Andrew, müssen Sie diese Schaltflächen wieder herstellen , damit Sie zu den Schülerdetails gelangen können? Ich gehe zur Arbeit. Ich werde daran arbeiten. Ich werde es herausfinden. In Ordnung. Okay. Okay. Also die Informationsseite für Schüler, das ist die Detailseite, und das wird hauptsächlich aus der Formularerstellung bei der Validierung bestehen. Und wie Sie sich vorstellen können, hat Ionic viele Komponenten und viele Funktionen, um dies so einfach wie möglich zu gestalten Aber ironischerweise ist es auch sehr kompliziert. Auf unserer Informationsseite für Studierende werden wir also eine Zurück-Schaltfläche implementieren wollen , damit Sie zur Rosa zurückkehren können Wir werden es auf Etiketten wiederverwenden. Sie haben sie gesehen, aber wir werden sie im Kontext eines Formulars verwenden. Wir werden eine On-Eingabe verwenden, und On-Input entspricht im Wesentlichen der HTML-Eingabe. Es ist alles, was Sie möchten, um Daten vom Benutzer zu erhalten. Eine dieser Eingaben ist die neue in Version sechs, die neue Eingabe für Datum und Uhrzeit handelt. Okay. Lassen Sie uns also eine Studentenliste öffnen und einen Backlog implementieren Also sollten wir gleich wieder etwas davon für Sie verschieben Werde das los. Wir werden die Informationsseite für Studierende öffnen. Holen Sie sich die Informationsseite für andere Schüler, das ist also der HTML-Code. Okay. Wir haben also bereits eine Kopfzeile mit einer Werkzeugleiste und wir haben einen Titel. Es tut uns leid. Sollten wir eine Informationsseite für Studierende erstellen? Sie sollten bereits eine Informationsseite für Studierende haben. B vom ersten Tag an. Wir haben all diese Seiten und das Routing zu ihnen erstellt. Okay. Ich glaube nicht, dass ich einen habe. Du nicht. Dann können wir, wenn Sie es erneut teilen möchten, wir können zurückgehen und das ganz schnell für Sie erledigen. Ist das ionisch? Ionic generiert eine Seite mit Studenteninformationen. Und wenn Sie die Studenteninformationen in Ihrem Befehl auf diese Weise eingeben? Ja. Okay. Es wird Groß- und Kleinschreibung vornehmen und die Dateinamen korrekt angeben. Okay. Das habe ich. Okay. Also hast du die Informationsseite für Studierende? Ja. Okay. Ihre Informationsseite für Schüler sollte also eine Titelleiste oder Kopfzeile mit einer Werkzeugleiste haben , die so aussieht? Ja. Also möchte ich es nur ein bisschen ändern. Damit der Vor- und Nachname des Schülers angezeigt wird. Und das machen wir mit einer eckigen regulären String-Datenbindung. Student meint zuerst ein Leerzeichen dazwischen. Es beschwert sich, weil ich noch keinen Studenten habe. Um dort eine Zurück-Schaltfläche einzufügen , haben wir bereits die Werkzeugleiste, und jetzt benötigen wir einen Container für unsere Schaltfläche, dem es sich um eine Einschalttaste und dann um eine spezielle Zurück-Schaltfläche handeln wird und dann um eine spezielle Zurück-Schaltfläche handeln Und was wir hier drin haben werden, ist das Standard-HRF. Und das bedeutet für den Fall, dass wir direkt zur Kaderseite kommen und nichts in der Historie steht den Fall, dass wir direkt zur Kaderseite kommen und nichts in der Historie Und sie haben trotzdem die Zurück-Taste gedrückt. Wir müssen ihnen einen Ort geben, an den sie gehen können. Selbst wenn es keinen Ort gibt, an dem die Zurück-Schaltfläche angezeigt wird, definieren wir das als die Kaderseite Sie neigen dazu, dieses Problem in einer mobilen App nicht allzu häufig zu sehen in einer mobilen App nicht allzu da Sie als Entwickler kontrollieren können , wie der Benutzer von Ort zu Ort gelangt Aber in einem Webbrowser könnten sie einfach eine beliebige URL eingeben und direkt dorthin gehen . Das macht Sinn? Und dann werden wir auch eine Menütaste wollen. Obwohl wir argumentieren könnten, dass eine Menüschaltfläche auf der Detailseite keinen Sinn ergibt. Es wird wirklich eine Entscheidung sein, die Ihnen überlassen bleibt. Lassen Sie mich meinen Sir wieder zum Laufen bringen. Okay. Es kompiliert. Hatte jemand Fragen zu diesem speziellen Code? Die Syntax? Alles außer der Zurück-Taste sollte Ihnen an dieser Stelle bekannt vorkommen. Okay. Also lass mich wieder rüber kommen. Und hier ist meins. Und wenn ich gehe, lass mich öffnen. Weißt du was? Ich werde es nicht so machen. Wir werden Kanten verwenden. Okay. Also mein Dienstplan, das könnte tatsächlich ein Fehler sein, weil ich keinen Vor- oder Nachnamen für Schüler Also, wenn du mitmachst, solltest du das auch sehen, du hast noch keinen Studenten Okay. Was die Frage aufwerfen sollte, wie bekommen wir einen Studenten auf die Seite? Wenn du dir die URL ansiehst, nun ja, ich schätze, du kannst dir die URL nicht ansehen, weil sie fehlgeschlagen ist. Die URL für eine Studenteninformation. Wenn Sie sich erinnern, dass das Umherziehende die Studenteninformationen war, die ID des Schülers schrägstrich die Studenteninformationen war, die ID des Schülers schrägstrich , funktioniert das momentan aufgrund des Syntaxfehlers oder des Bindungsfehlers überhaupt nicht Syntaxfehlers oder des Bindungsfehlers Also kann ich das schnell beheben, indem ich herkomme und einfach sage: Okay Ich kann es einfach mit einem leeren Schüler auf meiner Komponente angeben und dann sollte es zumindest nicht scheitern, oder? Aber der Titel, hier steht nichts. Aber genauso, wenn ich herkommen und sagen würde. Vorname John, Nachname Do Let it rebuild. Und jetzt sehen wir John Doe. Und wir haben immer noch unsere Menütaste und unser Backbon. Aber das hilft uns nicht, den Schüler auf die Seite zu bekommen. Ja. Meins geht überhaupt nicht auf die Studentenseite. Was machst du? Einfach nichts. Okay. Möchtest du es teilen und diagnostizieren? Ich meine, für mich ist das, wo das eigentliche Lernen stattfindet, wenn wir uns hinsetzen und die Probleme lösen? Ja. Lass mich wieder mitmachen. Okay. Nochmals zoomen. Okay. Ich werde das Teilen hier beenden. Ich möchte auf jeden Fall sichergehen, dass wir diesen Teil richtig hinbekommen , weil das Erstellen des Formulars eigentlich nicht so schwer ist. Also ich denke, wir haben heute Abend zusätzliche Zeit auf dem Programm. Der erste Teil des Formulars wird nervig sein. Der Rest ist unkompliziert. Eine Menge Duplizierung von HTML. Okay. Was schauen wir uns an? Also ich denke, es ist diese Zeile hier, oder? Es heißt Studenteninformation? Ja. Sie haben also Ihren Router-Link und geben das Array, die Studenteninformationen und den Studentenausweis weiter. Und was passiert, wenn Sie auf diesen Link klicken? Ja. Ich glaube, ich weiß, was das Problem ist, aber ich möchte es zuerst überprüfen. Also hier bin ich einfach okay. Sie haben Fehler in Ihrer Konsole. Klicken Sie dort oben auf die Nummer fünf mit dem Fehlersymbol. Okay. Das gleiche Problem hatte ich schon einmal, oder? Weil ich Vorname und Nachname habe. Okay. Also war es bei mir, es wurde nicht einmal auf die Seite gerendert. Okay. Okay. Es tut mir leid. Ja, das habe ich für mich auch nicht getan. Also, wenn du es vorerst reparieren willst, nur um sicherzugehen, dass du es schaffst, mach weiter und füge einfach das Dummy-Studentenobjekt deiner TS-Datei mit den Studenteninformationen Ja, das sollte funktionieren. Mach weiter und füge einen Vor - und Nachnamen hinzu. Es sollte ein Doppelpunkt sein. Vor- und Nachname sollten einen Doppelpunkt anstelle eines Gleichheitszeichens haben . Weil Sie ein Typskript-Objektliteral erstellen. Ja, da hast du's. Ja. Das ist das Java in mir. Ich kann dir nicht sagen, wie oft ich das schon gemacht habe. Ich danke dir. Okay. Also ist es so rendern. Rendern Sie immer noch nicht? Nein. Unerwarteter zufälliger Student in Spalte 19. Öffnen Sie Ihre HTML-Datei. Sieht aus, als hättest du da einen Tippfehler. So sehe ich, was das Problem ist. Der Student auf Seite. Was habe ich getan? Die Informationsseite für Studierende mit Punkt HTML ist die, die Sie öffnen möchten. Und Sie können sogar sehen, dass der VS-Code Ihnen mitteilt , dass zwei Fehler enthalten sind. Sehen Sie sich die Tatsache auf der linken Seite an. Die Datei ist rot aufgeführt. Okay. Klicken Sie also links auf die rote oder orangefarbene Datei. Ja. Du hast zwei Fehler. Sie haben hier also die Möglichkeit die geschweiften Klammern jeweils einzeln anzulegen Es ist also der Vorname des Studenten in enger Klammer. Space Pen, du gehst. Jetzt sollte es in Ordnung sein. Okay. Da hast du's. Ich denke schon. Ich mache das nur ein bisschen zu schnell. Nein. Hab ich getan. Nein, habe ich. Okay. Hab dich. In Ordnung. Ich höre auf zu teilen. Schon. Nein, ich werde weiter teilen. Okay. Also müssen wir einen Studenten auf eine Seite bringen. Und okay. Ich glaube, ich habe das neulich angesprochen. Ich bin ein großer Fan unseres X JS, und ich benutze X JS vielleicht öfter, als gesund ist, aber ich finde, wenn man sich damit richtig vertraut gemacht hat, schreibt man besseren Code. Also dieser Code hier. Lassen Sie mich zunächst fragen, ob schon jemand mit unserem XJS wohl fühlt oder wissen wir, ob Sie wissen, was unser HKS ist Ich habe davon gehört. Okay. Dann könnte das ein bisschen dauern, es ist sicherlich gewöhnungsbedürftig. Also, was wir hier tun und ich werde versuchen, langsam vorzugehen, ist ich auf meiner Studenteninformationsseite ein Observable habe , das ich Studenten-Dollarzeichen nenne Und was passiert ist , dass ich die Route der Seite habe, die eine Parametertabelle enthält Das ist die Par-Map. Und Angular stellt das als Observable zur Verfügung, sodass Sie Code schreiben können , wenn sich die Route ändert Also, wenn die Informationsseite für Schüler die erste ist und Sie zum ersten Mal auf dieser Seite Ihre Komponente wird gerendert, der Konstruktor wird aufgerufen, G aktiviert und es läuft, und all das passiert im Lebenszyklus der eckigen Seite, so wie es sein sollte Wenn sich die Route dann ändert, die Seite das aber nicht muss Also von Studenteninformation eins zu Studenteninformation zwei. Angular weiß, dass es nicht die gesamte Seite von Grund auf neu erstellen muss , da sich nur ein Teil der Parametermap geändert hat. Sie können also aufpassen. Sie können diese Änderungen abonnieren. Die Komponente wird nicht gerendert, die Seite wird nicht gerendert. Sie können jedoch darauf reagieren, indem Sie aufmerksam indem Sie die Parameterübersicht abonnieren Ich richte hier also ein neues Observable ein , das auf den Änderungen am p basiert und diese Änderungen ein neues Observable ein , das auf den Änderungen am p basiert und diese Änderungen an einer anderen RX JS-Funktion namens switch Map hochspielt an einer anderen RX JS-Funktion namens anderen RX JS-Funktion Switch Map sagt: Dieses Observable hat gerade den neuen Wert ausgelöst Nimm diesen Wert und wechsle ihn zu einem anderen Observablen, das wir durch den Aufruf dieser Funktion erhalten werden Also nehmen wir den Parameter, den ID-Parameter von params get Und wir werden diesen Wert an den Studentenservice „Get Student“ weitergeben den Studentenservice „Get Student Also werden wir das Studentenwerk bitten, uns Student eins, Student zwei, Student drei zu geben. Wir nehmen diesen Wert und führen einen R XJS-Operator namens TAP aus, was bedeutet, dass wir uns nur den Wert ansehen werden Wir werden nichts Besonderes damit machen. Wir werden es uns nur ansehen. gibt uns der Student einen Schüler zurück, oder er gibt uns nichts, wenn wir keinen finden können. Wenn es also keinen Schüler mit dieser ID gibt, werden wir dem eckigen Router sagen , zur Teilnehmerplan-Seite zurückkehren soll Ist das soweit klar? Es ist cool, wenn es nicht so ist. Tatsächlich gibt es einen sekundären Weg, wie wir das implementieren können, und der ist vielleicht einfacher zu verstehen. Aber ich wollte zuerst den harten Weg gehen. Okay. Der Student wird quasi zu einer Beobachtungsperson der Schüler sich der Parameter, wenn sich die Route ändert, erhält die beobachtbare Schülerin den neuen Das ist das Wichtigste, an das man sich bei diesen Zeilen erinnern Das Studenten-VM-Observable baut auf dem Student-Observable und leitet diesen Wert einfach über einen Mapper weiter, der diesen Schüler klont , um uns eine exakte Kopie davon zu geben. Und Clone Student macht einfach eine Reihe von JS-Teilen. Es ist ein Forman-Klon, den Sie vielleicht schon einmal gesehen haben. Das heißt also, wenn wir ein Studentenobjekt vom Studentenservice bekommen, bekommen wir eine Kopie davon, wenn sich die Route ändert Wo geht dieser Code hin? Das werde ich dir als Nächstes zeigen. Okay. Okay. Und ich werde versuchen, so etwas live zu machen. ich das letzte Mal an diesem Workshop teilgenommen habe, Mike Cartington von Ionic vorbei , gerade als ich diesen Code durchging Und eines der Dinge, die er mir erzählt hat war mit einer Ionic-App, das musst du nicht tun Also, was wir dieses Mal tun werden. Also lass uns sehen. Die Informationsseite für Studierende. Ich will immer noch einen Studenten. Aber dieses Mal werde ich es vordefinieren als „Lass mich kurz darüber nachdenken Weil ich das so machen will, wie Mike es mir gesagt hat. Nun, lass mich dich fragen. Willst du, dass ich es so mache und es dann vereinfache, oder willst du es zuerst auf die einfache Art machen? Gehen wir beide Wege, um zu sehen, was sich ändert. Okay. Fair genug. Also ich will die Schüler und okay. Okay. Lassen wir es also für eine Sekunde dabei, weil ich den Router noch nicht habe. Denken Sie daran, was ich neulich gesagt habe, dass ich meine Importe nicht mache oder meine Importe nicht auf den Folien zeige. Also brauchen wir die Route, das ist ein Versuch, das hier aus dem Gedächtnis zu machen . Das ist es auch nicht . Es ist das Richtige. Hattest du jemals einen dieser Tage, an denen du dich nicht an deinen Namen erinnern kannst? Ist es nicht der eckige Router? Nein. Nein, nein, nein. Aber das brauchen wir auch. Das ist also der Router. Das brauchen wir. Und so navigieren wir per Route. Es ist das laute Schreien. Gib mir eine Sekunde. Eines dieser Dinge, an meinen Namen kann ich mich nicht erinnern. Ich habe es aktiviert. Also denk dran. aktivierte Route enthält Informationen über die Route, die zum Rendern Ihrer Seite verwendet wurde. Okay. Also haben wir das und Param Map ist auf der aktivierten Route Wie Sie sehen können, handelt es sich um einen beobachtbaren Typ. Jedes Mal, wenn sich das ändert, werden wir seinen Wert weiterleiten. Dieser Studentenservice, was bedeutet, dass wir den Studentenservice brauchen. Irgendwas, das du dich fragst Mike wirklich so codiert? Ja, tut er. Studierende des Studentenwerks. Okay. Okay. Wenn nicht Studenten. Ich bin auch nah dran, aber wir gehen zurück zu Roster. Und natürlich müssen wir jetzt all die schönen PS herausfinden , die durcheinander sind Das zu mögen. Das sollte es mir nicht gefallen. Also Router oder Map. Oh. Wir brauchen mehr Immobilien. Diese Karte mit verlegten Schaltern Service in Anspruch nehmen. Das ist kein Problem. Okay. In Ordnung. Also gibt es keine Studenten. Ich glaube, was hier passiert , fehlen einige Importe. Import Switch Maps Rechtschreibung Import Perfo. Da hast du's. S Okay. Da haben wir's. Also wechsle Map und Taper von X JS-Operatoren Okay. Sobald sich der Ausweis ändert, ändert sich die Route, wir bedauern den Ausweis und rufen an, um den Schüler zu holen. Wenn wir keinen Schüler finden, gehen wir zurück zur Teilnehmerliste. Das ist richtig Kannst du das für 1 Sekunde so lassen, wie es ist? Die Folie oder der Code. Die sind gleich. Welches kannst du besser lesen? Das Ding im roten Bereich. Okay. Holen. Ich wechsle, Mann. Okay. Die Switch-Map nimmt im Wesentlichen den Wert eines Observablen und erstellt ein brandneues Observable und wechselt dann zu diesem neuen Wenn wir am Ende einen Schüler haben, ist er letztlich ein beobachtbarer Student Und wann immer Sie mit RXJS wie diesem arbeiten, füllen Sie sie langsam auf und komponieren Versuchen Sie nicht, aus allem ein einziges Observable zu machen. Selbst das könnte zu viel sein. Aber jetzt werde ich ein Modell aus der Studentenansicht erstellen, um das Ganze zu verbessern. MP stammt ebenfalls von unseren JS-Operatoren, und Clone Student gibt es noch nicht. Mal sehen, ob der Copilot weiß, was hier zu tun ist? Nicht ganz. Jetzt tut es das. Und dann weinten Studenten. Okay. Okay. Okay. Das war genug, um den Schüler von der Route auf der Seite in die Komponente zu bekommen. unserer Vorlage werden wir also nur mit dieser arbeiten. Mike, tut mir leid, ist dieser ganze Code, worin steckt das? Ist es bei einem dabei? Ist es im Konstruktor? Es ist nicht im Konstruktor. Es ist so, es ist nur ein Teil der Komponente. Das sind eigentlich Komponenten. Meins ist ziemlich durcheinander. Ich bin mir nicht sicher, was los ist Okay. Du willst , dass ich das in den Slack-Channel stelle , damit du es kopieren und einfügen kannst Das ist nützlich, aber es ist nicht notwendig, den ionischen Teil zu verstehen. Nein. Nein, ich habe überall rote Schnörkel. Ja. Hab ich auch gemacht. Vor allem , weil du nicht all das Zeug hast. Ja. Ja, ich melde mich danach bei dir. Okay. Ja. Ich werde langsam nervös mit meinem Konstruktor Es heißt, dass der Mitgliedskonstruktor vor allen Definitionen von Methoden der öffentlichen Instanz deklariert werden sollte vor Korrekt. Ja, ich schaffe das, du hast das. Ja. Und das liegt daran, dass ich den Schüler nicht darunter gesetzt habe. Das sollte ihn glücklich machen. Je nachdem, was Sie für die Kreditvergabe verwenden, sollen Angular-Apps hier so aufgebaut sein, dass Sie Ihre Instanzvariablen, Ihre Felder ganz oben in der Klasse haben Instanzvariablen, Ihre Felder , dann Ihren Konstruktor, dann Ihre Lebenszyklusereignisse und dann Ihre Funktionen Okay. In Ordnung. So bekommen wir den Schüler auf die Seite. Okay. Im Grunde ist die gesamte Studenteninformationsseite, der gesamte HTML-Code, mit einem G-Container-Tag versehen, der eine NG-Direktive verwendet , sodass es nur gerendert wird, wenn es einen Schüler gibt Ich werde das noch einmal sagen. Wir werden den gesamten HTML-Code der Seite mit einem Container umwickeln. Und der G-Container wird nur gerendert, wenn wir einen gültigen Schüler haben. Dies verhindert im Wesentlichen undefinierte Nullreferenzfehler. Okay. Ein paar Dinge, falls du schon über NGF wissen solltest, damit es nicht gerendert wird, es sei denn, der NGF ist Aber was noch wichtiger ist, NG-Container ist ein spezielles Angular-Tag , das keinerlei Ausgabe rendert Es hat keinen Einfluss auf das Markup. Das heißt also im Grunde, dass alles, was sich im G-Container befindet, nicht existieren wird , wenn wir keinen gültigen Schüler haben Der Rest dieser Linie ist ein eckiges Rohr, und wir nennen das Rohr. Die Async-Pipe wird sich also für uns um das An- und Abmelden kümmern das An- und Abmelden kümmern , wir müssen uns nicht darum Jedes Mal, wenn eine Studenten-VM eine Eigenschaft auslöst, ist das ein neuer Wert. Alles, was sich in diesem Energiecontainer befindet, wird aufgefordert, es neu zu lackieren Das Letzte, was wir tun, ist An-Pipe mitzuteilen, dass der Wert, den wir von diesem Observable erhalten , intern in meine Vorlage übernommen Ich werde es als den unveränderlichen Namen Student bezeichnen. Deshalb kann ich den Vornamen des Studenten und den Nachnamen sagen. Das habe ich in die Praxis umgesetzt. Wenn ich jetzt hier reinkomme und all meine Inhalte zusammenfalle. Ich kann einfach Container GF machen , nicht VM Dollar. Als Student. Und dann den Energiebehälter zumachen. Ich weiß nicht, wo der herkam. Und es beschwert sich, weil ich immer noch einen Studenten habe? Ich habe keinen Film bekommen. Ich habe den Schüler losgeworden, nicht wahr? Warum beschwert es sich? Weil ich nicht schließe Danke. Format. Okay. Okay. Jetzt gehen wir zurück zu Edge. Ich bin immer noch dabei, mein Data Mining zu machen. Das Data Mining funktioniert. Okay. Also möchte ich sichergehen, dass jeder zumindest bis zu diesem Punkt kommt. Und dann zeige ich dir den einfacheren Weg, den Mike uns gegeben hat. Es ist nicht viel einfacher. Ein einfacherer. Siehst du die Macht hier? Bin ich nicht, ich abonniere keine Observables. Ich warte nicht darauf, dass Versprechen gelöst werden. Ich nicht, ich mache keinen HTTP-Aufruf direkt von meiner Komponente aus. Ich beschäftige mich nicht mit der Fehlerbehandlung. All das kann innerhalb meines Dienstes erledigt werden, und die Komponente kann so geschrieben werden , dass sie nur gerendert wird, wenn sie gültige Daten hat So können Sie sich wirklich darauf konzentrieren , was die Komponente tun muss Macht das Sinn? Das sollte es sein, das ist der gesamte Code, den Sie für die Komponente benötigen. Hat jeder die? Es funktioniert auf meiner Seite. Fantastisch. Sonst noch jemand. Jeder hat es nicht zum Laufen, der will. Ich bin da. Okay. Okay. Geht es euch allen gut, heute Abend ein bisschen zu lang rüber zu gehen? Mir geht es gut, wenn du es bist. Hängt davon ab, wie lange wir das hinkriegen. Okay. Und das Feedback zum Workshop, ich gehe davon aus, dass ihr hingeht. Okay. Verbringen Sie keine Stunde mit unserem J ich werde schon eine kurze Pause in der Natur einlegen. Ordnung. Auf wen warten wir noch? Mir fehlen also wohl die Importe für Switch Map, Tap und Map. Lass uns sehen. Ja. PS ist ziemlich gut darin, zu raten, aber erst, wenn du eins davon hast Okay. Bereit weiterzumachen? Wir sind an dem Punkt angelangt , an dem wir das schaffen können. Okay. Von hier aus wollen wir also ein Formular erstellen. Wahrscheinlich habe ich das schon einmal in HTML gemacht. Wir benötigen also ein Formular für alle Werte, die für einen Schüler bearbeitet werden können Wir können ein On-Label mit einer On-Eingabe zusammen verwenden , mal sehen Dinge, die Sie über Etiketten wissen sollten. Die wichtigen Farben sind wahrscheinlich nicht so gut wie alles kann geändert werden. Aber die Position des Labels relativ zu seinem Eingabeelement. Es sieht also so aus. Wenn Sie also eine Standardeinstellung haben, erhalten Sie die Bezeichnung neben dem Platzhalter X sieht genauso aus. Ich neige dazu, Stack oder Floating zu verwenden. Was machen die? Okay. Okay. Das Laden ist ziemlich cool, weil es wie ein festes Etikett aussieht. Und wenn du es dann anklickst, wird es zu einem Stack-Label. Es wird also nach oben animiert und ist nicht im Weg, sodass Sie tippen können. Welches Sie wirklich verwenden, liegt ganz bei Ihnen. Was auch immer Ihre Designentscheidungen sind. Input ist also ein großes Thema. Denken Sie an alles, was Sie mit einem HTML-Eingabe-Tag und Supercharge Am haben sie viel Arbeit geleistet, um es wirklich, wirklich leistungsfähig zu machen , sodass es ein wenig überwältigend erscheinen mag Es muss nicht wirklich alles andere sein mit eckig und ionisch Wenn Sie mit den Grundlagen beginnen und dann von dort aus weitermachen, ist das nicht so schlimm Hier sind einige andere wichtige Dinge für den Input. Stellen Sie sich also vor , Sie haben eine Texteingabe. Auch hier können Sie die Farbe erstellen. Sie können ihr einen Debounce-Wert geben Jede N-Eingabe löst ein Änderungsereignis aus, wenn der Benutzer sie ändert Wenn Sie jedoch einen Debounce-Wert angeben, der größer als Null ist, wird dieses Änderungsereignis erst ausgelöst so viele Millisekunden vergangen sind vergangen Sie geben also beispielsweise einen Debounce-Wert von 500 ein und der Benutzer tippt. Sie erhalten die Änderungsnachricht erst, eine halbe Sekunde vergangen ist, ohne dass der Benutzer irgendwelche Änderungen vorgenommen hat ohne dass der Benutzer irgendwelche Änderungen vorgenommen Wenn Sie auf einem Mobilgerät gesehen haben, dass Sie statt der Return- oder Enter-Taste eine Suchzeichenfolge auf der Bildschirmtastatur statt der Return- oder Enter-Taste eine Suchzeichenfolge eingeben können, heißt es, suchen oder Das ist der Hinweis auf die Eingabetaste. Sie können dem Mobilgerät auch einen Hinweis geben, welche Art von Tastatur je nach Eingabemodus angezeigt werden soll. Und schließlich ist Typ genau wie ein HTML-Eingabetyp. Nach welcher Art von Daten suchen Sie? Es wird standardmäßig Text verwendet. Sie können also all diese verschiedenen Attribute verwenden , um das Erlebnis für Ihren Benutzer zu personalisieren und anzupassen Wir können unsere Eingaben auch validieren. Dies sind die integrierten Validierungen , die Ihnen zur Verfügung stehen Minimale maximale Länge der Zeichenfolge, minimale maximale Anzahl an numerischen Werten, Reg X-Muster und Angabe, ob ein Feld erforderlich ist oder nicht Den nächsten werde ich dir zeigen. Versuche nicht, alles in dich aufzunehmen. Dies sind alle Hinweise zur automatischen Vervollständigung , die bei Eingaben zulässig sind. Wenn Sie also schon einmal auf eine Webseite gegangen sind und Ihr Browser gesagt hat: Hallo, lassen Sie mich das für Sie eingeben. Es liegt an solchen Dingen. Also dein Vorname, deine Adresse, dein Stadtstaat. Und wenn Ihr Browser diese Informationen kennt , gibt er sie für Sie ein. Macht das Sinn? Okay. Lass uns gehen. In Ordnung. Ich wollte nur kurz darauf eingehen. Was wir also tun müssen, um die Eingaben des Benutzers für den Schüler zu erhalten die Eingaben des Benutzers für den , ist ein Formular zu erstellen, einfach ein normales HTML-Formular. Bei einem eckigen Formular möchten wir einen Event-Handler für N G submit bereitstellen. Diese Funktion wird aufgerufen, wenn der Benutzer das Formular absendet Die Studentenform in Pfund entspricht der Form N G. Das ist ein weiterer Angularismus. Das heißt , wenn wir ein eckiges Formular haben, wird uns ein G-Formular angezeigt, das die gesamte gerenderte Form darstellt Und wir werden dieses Formular der lokalen Vorlagenvariablen Studentenformular zuweisen . Und wenn wir das tun, können wir innerhalb unseres HTML-Codes auf dieses Formular verweisen, Angular fragen, ob es gültig ist, es nach Fehlern fragen und so weiter. Was ich hier machen möchte, ist, auf den Inhalt zurückzukommen, der momentan leer ist. Ich möchte ein Formular erstellen. Leeres Absenden entspricht Absenden. Wir werden das Studentenobjekt einreichen, wenn das Formular abgesendet ist , und wir werden ein lokales Variablen-Studentenformular haben , und das ist das NG-Formular, das für uns erstellt wird On Submit existiert noch nicht. Damit es bei Laune bleibt, komm einfach her und erstelle eins. Ja. Auch wenn es nichts tut. Jetzt ist es wenigstens glücklich. Als Nächstes. Lassen Sie uns ein einzelnes Eingabefeld erstellen da alle Eingabefelder so aussehen werden. Und ich glaube, ich möchte eine Liste auf der Liste haben. Wir wollen einen Artikel auf Lager haben. Nein, ich möchte nicht, dass der Copilot die Arbeit für mich erledigt. Bei dem Artikel auf der möchte ich ein Etikett auf dem Etikett haben. Und ich werde die Farbe festlegen. Vorname gültig. Ich erkläre das gleich. Mir geht es wi 5. Session4: Ordnung, Leute. Willkommen zum vierten und letzten Workshop. Ich möchte heute Abend damit beginnen, über den Anwendungsspeicher zu sprechen und darüber, wie das alles funktioniert. Bei ionic gibt es eine Reihe verschiedener Speicheroptionen. Und weil ich normalerweise meistens mit Geräten arbeite. Ich speichere viel auf dem Gerät. Ich werde also nicht auf die verschiedenen Arten von Cloud-Speichern eingehen , und Ionic hat ein Unternehmensangebot , das sicheren Cloud-Speicher So können Sie buchstäblich einfache Daten auf das Gerät übertragen Und genau das mache ich hier. Also, was ich als Kondensatorspeicher verwende. Sie erinnern sich vielleicht an die erste Sitzung, als wir rausgehen und einen Kondensatorspeicher installieren mussten , um die Lagerservicetür oder die Servicetür für Studenten zu bekommen oder die Servicetür für Studenten Und wie Sie hier sehen können, handelt es sich um eine ziemlich vereinfachte API Sie haben Methoden festgelegt, eine Methode zum Entfernen, Löschen der Datenbankmethode und eine Methode zum Abrufen des Arrays aller Schlüssel in Ihrer Datenbank Und ich sage Datenbank. Ich verwende den Begriff locker, weil er eigentlich nur ein Schlüsselwertspeicher ist eigentlich nur ein Schlüsselwertspeicher der an Ihre Anwendung angehängt ist Und was ich damit meine, ist, dass es an Ihr You-HTTP-Schema angehängt Ihr You-HTTP-Schema Wenn Sie also NPM Start verwenden würden, wodurch NG Serve mit der Standardeinstellung Port vier als 200 gestartet mit der Standardeinstellung Port vier als 200 Spielen Sie mit der Anwendung, richten Sie Ihren Shop ein, erstellen Sie neue Schüler und bearbeiten Sie sie. Und dann schließe die App und starte sie erneut mit Ionic Serve, was meiner Meinung nach Port 8.100 Es hätte nicht dieselbe Datenbank . Wenn es also HTTP oder HTTPS wäre, denke ich, dass sie sogar unterschiedliche Datenbanken bekommen. Es hängt wirklich nur damit zusammen, dass Ihre Anwendungen Vorfälle ausführen. einem Desktop-Browser verwendet es lokalen Speicher, was bedeutet, dass es flüchtig ist. Es könnte jederzeit zerstört werden. Auf einem echten Gerät hat es DB indexiert oder was ist das andere SQL Light? Nein. Sie können sagen , dass Sie SQL Light verwenden sollen. Dafür gibt es also eine Option, und damit ist sie ziemlich gut. Sie können also SQL Light verwenden. Aber das ist nicht der Index TV und der andere. Es entgeht mir jetzt, aber das ist egal. Es wird das richtige für das richtige Gerät verwenden. Und das ist eines der Dinge, die Sie Verwendung von Kondensatorspeichern erhalten. Sie müssen sich darüber keine Sorgen machen. Also, ob du eine PWA bist, ob du Android oder IOS bist, es ist egal Um den Studentenservice mit nur diesen fünf API-Aufrufen einzurichten , habe ich im Wesentlichen eine Reihe von öffentlichen Methoden erstellt Der Kondensatorspeicher-Service basiert ausschließlich auf Versprechen. Sie werden also sehen, dass alles, was ich hier mache, auch auf Versprechen basiert. Abgesehen davon, dass er wie der zweite aussieht. Alle Schüler sind das Observable, auf das sich unsere Komponente „ Komponenten-Liste“ stützt Das funktioniert also so wenn einem Schüler irgendwas passiert, egal ob Sie ihn als abwesend markieren, ihn präsentieren, löschen, speichern, ihn abrufen , einen neuen finden, was auch immer Der Speicherdienst nimmt die Informationen auf, die Sie ihm gerade gegeben haben. Also hier ist ein brandneuer Student. Hier ist ein vollständig hydratisiertes, brandneues Studentenobjekt. Es speichert es im lokalen Speicher oder Speicher und teilt dann sofort mit, dass alle Schüler beobachtbar sind, dass ein brandneues, komplett regeneriertes Array für Sie erstellt wurde, und das veranlasst die Komponente, sich selbst zu aktualisieren Wie Sie sich wahrscheinlich vorstellen können. Wenn Sie ein Dutzend Schüler haben, ist das kein Problem. Wenn Sie 1.000 oder 10.000 Studenten haben , könnte dies ein Problem sein. Die Art und Weise, wie der Studentenservice geschrieben ist Sie ihn erweitern könnten, indem Sie Paging, Sortierung und alles Mögliche Und dann müssten Sie nur noch auf dieses Observable achten Das überlasse ich dem Zuschauer als Übung. Auch innerhalb des Studentendienstes gibt es einige private Beiträge, die in Kürze behandelt werden, und zwar das Studierendensystem selbst, das als RHS Verhaltenssubjekt implementiert ist Und das sorgt dafür, dass innerhalb des Studentenwerks eine lokale Kasse vorhanden ist , die jeder Änderung aktualisiert wird Und das ist es, was dann an die Komponente an die Abonnenten gesendet wird . Und das geschieht über die Funktion Push A. Push A sagt einfach: Hey, wir haben ein neues Verhaltenssubjekt. Wir haben ein neues Array. Verarbeiten Sie es. Die anderen drei Funktionen hier sind einfach interne Instrumente , die wir in Kürze sehen werden, und sie sind im Grunde nur Hilfsfunktionen Also habe ich im Studentenservice ein generisches Objekt namens Neue Schnittstelle für Studierende erstellt , und wie Sie sehen können, werden dadurch einfach alle Felder ausgeblendet, sodass sie dadurch Also haben wir es noch nicht versucht. Aber wenn du zu Wenn du auf die Seite mit den Studenteninformationen gehst. Im Studentenservice gibt es einen Code , der diesen Studenten zurückgibt, den leeren Schüler statt den Studenten mit Ausweis , nach dem Sie gefragt haben. Hier ist das Thema Verhalten. Auch hier nimmt es intern eine Reihe von Studierenden auf. Und wenn die Anwendung gestartet wird, fragt die Komponente mit der Teilnehmerliste einfach nach Funktion aller Schüler , und das macht dieses Verhalten unbeobachtbar Als allgemeine Regel gilt: Wenn Sie es mit einem Verhaltensobjekt mit mehreren Abonnenten zu tun haben, sollten Sie das eigentliche Thema nicht Ihren Abonnenten offenlegen das eigentliche Thema , da sie dann alle unkontrolliert neue Werte eingeben könnten , da sie dann alle unkontrolliert neue Werte eingeben Das allgemeine Muster besteht also darin, Ihren Abonnenten das Verhalten des Subjekts als nicht beobachtbar zurückzugeben , und genau das tun diese Sie können mich jederzeit unterbrechen, wenn ich zu schnell vorgehe oder wenn Sie etwas Ich glaube, Sie haben das zu Beginn des Studentendienstes gesehen . Wir haben eine initialisierte Funktion, und alles, was sie tut, ist, Push beim ersten Mal aufzurufen Also sagt Push A, hol mir alle meine Schüler und sag dann dem Verhaltenssubjekt, dass es einen anderen Wert ausgeben soll , wenn diese Schüler darin enthalten sind Also nochmal, es ist einfach kein Datenbank-Seed, es ist ein Anwendungs-Seed. Also hier ist der Anfangswert. Lassen Sie alle Schüler das Speichersystem, das Kondensatorspeichersystem, bitten , mir alle meine Schlüssel aus der Datenbank zu geben. Als Nächstes filtere ich das Array nur nach den Schlüsseln , die mit der Schlüsselkonstante des Schülers beginnen, was meiner Meinung nach nur das Wort Studentenunterstrich ist Sie haben nicht viel Einfluss darauf, wie es gespeichert wird, wie Daten hier gespeichert werden. Sie können also alles speichern. Also, wenn ich Schüler speichern möchte oder Dinge speichern möchte , die nicht Schüler sind , was ich vielleicht irgendwann tun würde, dann möchte ich vielleicht irgendwann Lehrer oder Klassen speichern. Ich muss sie unterscheiden, da es einen einzigen Schlüsselwertspeicher gibt. Also habe ich einen Studentenschlüssel erstellt, der nur das Wort Student ist. Also habe ich alle Schlüssel aus der Datenbank anhand dieses Schülerschlüssels gefiltert . Und dann die nächste Zeile hier, ich muss auf ein Versprechen warten und jeden Schüler nach seinem Schlüssel suchen. Macht das Sinn? Also, wenn das Versprechen gelöst ist, habe ich eine ganze Reihe von Studenten Und die Scharfsinnigen unter Ihnen werden feststellen, dass ich keine Fehlerbehandlung habe hier keine Fehlerbehandlung habe, und das sollte ich wahrscheinlich Okay. Und hier ist das Finden eines einzelnen Studenten und hier ist der Sonderfall für neue. Wenn Sie also den Studentenausweis „Neu“ weitergeben, werde ich das Versprechen einfach mit dem leeren Studenten lösen . Andernfalls gehe ich in die Datenbank und suche nach dem Studenten anhand dieses Schlüssels und seiner ID Also die Schüler geben eins ein, Schüler geben zwei ein und so weiter Und den Schüler nach dem Schlüssel auswählen. Sie werden feststellen, dass es ein bisschen komisch aussieht. Also muss ich die Speicherfunktion aufrufen , es ist die Get-Methode. Und ich muss ein Objekt übergeben. Ich bin mir nicht sicher, warum Sie den Schlüssel nicht weitergeben, aber Sie müssen ihn als Objekt übergeben. Deshalb gibt es die geschweiften Klammern innerhalb des Parameters Ich übergebe also tatsächlich ein Objekt, bei dem der Schlüssel des Schlüssels und der Wert dieses Schlüsselparameters für Schüler übergeben werden. Es ist irgendwie bizarr. Der Kondensatorspeicher speichert nur Zeichenketten. Es führt keine JSON-Analyse oder -Serialisierung für Sie durch, weshalb ich das Ergebnis angeben muss Und nicht nur das Ergebnis, sondern auch der Wert des Ergebnisses. Nochmals, welcher Speicher DG mir als Versprechen eines Objekts zurückgibt. Und in diesem Objekt steckt ein Wert. Macht das Sinn? Es ist irgendwie komisch. Und ich denke, es gibt einfachere Speicherbibliotheken da draußen, aber ich wollte dabei bei den ionischen Sachen bleiben. Ähnlich wie bei Ähnlich wie Delete Student, wieder, du nennst Storage Remove und musst den Schlüssel übergeben Um einen Schüler zu retten, habe ich eine UUID-Bibliothek Wenn du also einen brandneuen Schüler erstellst, gibst du mir einen Schüler zum Speichern eines Studenten ohne Ausweis Anstatt einfach zu versuchen, eins, zwei, drei, vier zu finden, erstelle ich eine UUID und speichere diese Asset-ID Es ist so einzigartig, dass ich nicht glaube, dass Sie jemals vor Ort auf eine Kollision stoßen würden eine Kollision stoßen Wahrscheinlich auch nicht global, aber man weiß ja nie. Was bedeutet das doppelte Fragezeichen? Das heißt, das entspricht der Aussage, dass Studentenausweis gleich Studentenausweis Sofern es nicht Null ist, weisen Sie UUID vier zu. Das ist relativ neu im Typoskript. Ich finde es clever. Es spart ungefähr zehn Tastenanschläge, aber ich weiß nicht, ob es klarer ist Würdest du zustimmen? Ja. Ja, es ist das erste Mal, dass ich es gesehen Deshalb habe ich mich gefragt. Ja, manchmal denke ich, manchmal bin ich zu schlau für mich selbst, denn als ich das neulich zum ersten Mal gesehen habe, musste ich mich daran erinnern, was es macht. Also ja, ich denke, dass man wahrscheinlich einfach Student Dot ID gleich Student Dot ID sein sollte Student Dot ID gleich Student Dot ID Und dann Fragezeichen, Fragezeichen, was bedeutet, du weißt schon, nicht drin Also das könnte ein bisschen einfacher sein. Lass uns sehen. Also nach einem Löschvorgang oder einem Schüler rufen wir Push All auf und das sendet das Array wieder an alle Abonnenten. Do Save Student ist die interne Implementierung von Save Student. Es wird also davon ausgegangen, dass Sie bereits eine Studenten-ID oder einen Schlüssel haben, und es ruft einfach die Speichersatzfunktion auf und übergibt den Schlüssel im Wert. Beachten Sie noch einmal, dass ich das Ergebnis stringifizieren muss, weil es das für mich nicht tun wird Mark Present ist sehr einfach. Ich habe den Studentenstatus auf Präsentieren gesetzt. Das Gleiche gilt für Abwesend und dann rufe ich do Save Student an. Do save student aktualisiert den Speicher und ruft Push All erneut auf. Beim Zurücksetzen der Anwesenheit alle Schüler überprüft und dann der Status zurückgesetzt Und wieder bin ich schlau, weil Sie sehen können , dass die Kartenerklärung eine Abkürzung hat Also nehme ich die Statuseigenschaft aus dem Studentenobjekt und übergebe dann den Rest des Studentenobjekts mit dem Rest-Operator. Das wäre gleichbedeutend damit, den Studentenstatus durchzugehen und ihn einfach als unset aufzurufen Aber auch hier musste ich schlau sein, also. Wenn du meinst, du würdest mich wegen meiner Klugheit bei einer Pull-Request-Bewertung anrufen, wirst du keine Argumente von mir bekommen Ist das klar oder ist das nur bizarr? Nun, ich habe auch den Wahnsinn gemacht, du weißt schon, die Java-Streams Also, ich meine, es macht Sinn. Weißt du, noch einmal, weißt du, diese Worte sind nur für Menschen da, um sie zu verstehen. Weißt du, es wird alles in das übersetzt was auch immer die Computer benutzen werden. Richtig. Wissen Sie, es geht nur darum was wir brauchen, um zu verstehen, was wir tun. Ja. Und ehrlich gesagt, was wir in der letzten Sitzung getan haben , als wir alle Observablen entfernt haben, um den Schüler auf die Studenteninformationsseite zu bringen , ist jetzt viel lesbarer Ich denke, HGS hat seinen Platz und dieser besondere Ort war nicht Okay. Also das sind ein paar andere Dinge, die wir hatten. Ich glaube, das haben wir gesehen. Wir haben Themendaten, tut mir leid, Startdaten. Und das war erst ganz am Anfang, wenn wir nichts in der Datenbank haben, können wir es uns ansehen und ein paar von, ich glaube, wir haben zehn falsche Studenten, und dann sind klare Daten das Gegenteil Und das ist einfach. Wir nennen Speicher einfach Clear. Okay. Und das ist alles für die Aufbewahrung. Haben Sie Fragen, bevor wir zur Kamera gehen. Oh, ich meine, das ist buchstäblich alles, was Sie tun müssen, um den lokalen Speicher zu nutzen. Wow. Ja. Und die Codes sind alle da. Es ist alles im Studentenservice. Ja. Okay. Also, was werde ich jetzt tun? Gib mir hier eine Sekunde. Nun, ich schätze, ich kann es später bearbeiten. Ich gehe zurück. Das war vorher alles ergänzendes Material Okay. In Ordnung. Also lass uns über die Kamera sprechen. Okay. Also haben wir uns Pixabay schon einmal angesehen. Und was ich hier gemacht habe , ist, dass ich ein Bild von einer Kamera gefunden Was ich wollte, war ein Platzhalterbild. Wenn es also kein Bild von dem Schüler gab, wollte ich, dass an seiner Stelle etwas angezeigt Wenn du also mitmachen willst, geh zu Pixabay und suche dir ein schönes Bild von einer Kamera Es ist nicht einmal wichtig, welcher . Dieser ist cool. Okay. Also das habe ich eigentlich nicht hier gemacht, also muss ich es hier machen. Ja, ich habe es nicht hier. Also lass uns weitermachen. Welches magst du? Ich habe eine Menge von ihnen. Erstens möchte ich das Poloid nehmen Also möchte ich die SVG-Version herunterladen. Und dann mache ich mit. Warum hat es nicht damit geklappt? Versuch das nochmal. Okay. Da ist es. Ich werde es benennen? Kamera. Und ich werde es auf meine Bilder ziehen . Ich muss es dort nicht sehen. Okay. Also ist es in Bildern. Okay. Okay. Hier sage ich in Camera Dot PNG speichern, aber du willst es speichern, wo auch immer du es herunterlädst. Wenn Sie ein PNG herunterladen, verwenden Sie natürlich die richtige Erweiterung. Okay. Jetzt brauchen wir diese beiden NPM-Pakete. Wir müssen dem Kondensator sagen , dass wir die Kamera benutzen Und weil ich glaube, dass wir uns gerade alle in einem Browser befinden, brauchen wir die ionischen PWA-Elemente damit es in einem Browser funktioniert Also werde ich das tun. Okay. Okay. Und ich installiere. Beides. In Ordnung. Und das ist erledigt. Folgt mir jemand und du musst warten, bis der NPM fertig Ja. Tut mir leid. Ich wollte das Bild festhalten, also lass mich das ganz schnell machen. Okay. Dann wirst du das wollen? In Ordnung, D. In Ordnung. Jeder hat eine Kamera und der NPM-Stand ist fertig. Okay. Als Nächstes öffnest du. Das meiste davon sollte schon da sein. Aber ich erinnere mich, dass ich am ersten Tag jemanden bitten musste , einige dieser Dinge zu kommentieren , wie diesen Import hier. Und das definierte benutzerdefinierte Elemente. Sie haben es entweder gelöscht oder auskommentiert. Ich weiß nicht mehr welche. Also öffne T. Ja. Ich habe das überhaupt nicht. Es gibt ein paar Dinge, die wir hier erledigen müssen. Geh das aus dem Weg. Ich schließe das. Okay. Also brauchen wir eine Plattform, wir müssen die Plattform booten. Was auch immer es da ist Okay. Also das haben wir schon im Fang. Also müssen wir das Okay nennen. Das hat nicht funktioniert. Also müssen wir benutzerdefinierte Elemente definieren oder importieren und das bei korrekter Eingabe tun. Da haben wir's. Lader für B-Elemente. Ordnung. Sind sich alle einig , dass das gleich aussieht? Ups. In Ordnung. Hat das jeder? Noch nicht. In Ordnung. Hoppla Ich kann mir nicht vorstellen, wie oft mir der Pfeil nach links folgt Wie viele davon muss ich herausschneiden? Auf der Armlehne meines Stuhls sitzt immer meine Tastatur. In Ordnung. Okay. Auf der Informationsseite für Schüler müssen wir diese Dinge oben in der Datei importieren. Also Kamera-Ergebnistyp und Kameraquelle von der Kondensator-Kamera. Lass mich sehen, ob ich das kann. Da haben wir's. Also zurück auf der Studenteninformationsseite. Gut. Und dann machen wir so ein Foto. Sie werden feststellen, dass das Objekt oder die Klasse von Ionenkondensatoren ebenfalls sehr vielversprechend ist. Also werden wir eine A-Sync-Funktion namens Bild aufnehmen erstellen , die die Funktion „Foto abrufen“ der Kamera aufruft Funktion „Foto abrufen“ der Kamera und ein einzelnes Konfigurationsobjekt benötigt Es gibt viele verschiedene Dinge, die Sie hier weitergeben können. Dadurch sollten wir ein JPEG-Bild von angemessener Qualität erhalten , das wir dann dem eigentlichen Datenbild al zuordnen können . Die Bilddaten U , weil wir es in der allerletzten Zeile dem Schülerbild zuweisen , wird es eine Zeichenfolge sein Es wird eine Base-64-kodierte Zeichenfolge des Bildes sein. an das Schülerobjekt angehängt, sodass es, wenn wir es speichern , auch im lokalen Speicher gespeichert Alles automatisch. Lass mich meinen VS-Code reinbringen und schauen, ob ich das hier irgendwie aus dem Weg räumen kann. Das gehört also zur Komponente mit den Studenteninformationen. Das ist verdammt gut. Aber so werde ich es nicht machen. Jemand muss mich daran erinnern, den Copiloten auszuschalten. Alles klar. Das ist nicht schlecht. Wir wollen nicht Base 64 als Ergebnistyp. Wir wollen eine Daten-URL. Wenn wir dort überhaupt Geheimdienste hätten. Qualität 90 ist wahrscheinlich okay. Fühlen Sie sich frei, damit zu spielen. Bearbeitung zulassen ist wahr, das heißt, geben Sie dem Benutzer die Möglichkeit oder spielen Sie ein bisschen damit, bevor Sie es akzeptieren. Das ist auch optional. Und die Quelle Es wird die Kamera sein. Ich denke, Sie können das auch tun, wenn Sie kein Gerät mit einer Kamera haben, Sie können einfach zu den Quellfotos gehen. Ich denke, das könnte für einen Mac oder Windows funktionieren , wenn Sie keine Kamera haben. Ich habe eine Webcam, also werde ich sie als Kamera belassen. Das wird uns also ein Bild machen. Ich brauche ein Stoffetikett. Und dann bin ich mir nicht sicher, warum ich dort zwei Zeilen habe. Warum hast du es nicht einfach gesagt? Oh, ich verstehe. Aber ich möchte die Daten-URL aus dem Bild abrufen. Und dann möchte ich das einstellen. Und das ist ein Tippfehler, das muss es sein, egal. Das tut mir leid. Wir geben den Studenten weiter, richtig. Es wird also so sein, dass Studentenbild gleich Bild-URL ist. Ist das klar? Ja. Aber ich werde ein bisschen nervös, da steht, dass das Bild kein Eigentum eines Studenten ist Eigentum eines Studenten Ich weiß nicht, warum das so ist, aber der Grund, ich es nicht bin, ist, dass ich es nicht gegeben habe , ich habe ihm nicht gesagt, was Student ist Also, du hast recht. Also, wenn wir ihm sagen, dass es ein Student ist, habe ich das gleiche Problem, oder? Ja. Also werde ich den Befehl „Auf Student klicken“ drücken. Und ich werde hinzufügen, dass es sich um ein Lehrskript handelt. Wenn du darüber nachdenkst Weil ich in der Leitung 39 der Veranstaltung nicht gesagt hatte , dass ich einen Studenten nehme. Also ist es standardmäßig auf any voreingestellt. Das Studentenbild ist also in Ordnung. Sie haben die Schnörkel bekommen, weil Sie den Fehler bekommen haben , weil Sie ihm gesagt haben, dass es sich um einen Schüler handelt Was wäre also passiert, wenn ich mein Studentenobjekt so gelassen hätte , wie ich es hatte Und hatte kein Bild. Kannst du es erraten? Nun, entweder wird es funktionieren oder nicht. Es wird gut funktionieren, weil die Typinformationen wirklich nur zur Kompilierzeit existieren. Sobald Ihre gesamte Typsicherheit , die Sie aus Typoskript herausholen, weg ist Sobald Sie auf Javascript umgestellt sind und es ausführen Es ist nur Javascript. Es wird sagen: Oh, du hast ein Feld gesetzt, wenn du mir eine Zeichenfolge gegeben hast und gesagt hast, du sollst es als Studentenbild verwenden. Cool. Ich werde das für dich tun. Weil es in Javascript funktionieren würde, wird es gut funktionieren. Okay. Aber wir spielen hier gerne nett, also. Also werden wir es so machen. Also haben Sie Ihren Schüler mit einer optionalen Zeichenfolge namens image aktualisiert ? Ja. Ordnung. Also müssen wir jetzt etwas mit der Aufnahmefunktion verbinden. Und das machen wir im HTML. Also, was ich hier mit Studenteninfo-HTML machen möchte . Lass mich dir das alles wieder aus dem Weg räumen. Also wir haben unser Studentenformular und wir haben die Liste. Also, was ich hier tun möchte, ist einfach ein weiteres On-Item mit einem Click-Handler hinzuzufügen . Und ich werde den Schüler darauf hinweisen. Da drin verkaufe ich Student falsch. Hier habe ich zwei Bilder. Das erste Bild wird nur angezeigt, wenn das Schülerbild existiert, und ich werde es als Klasse festlegen, wir werden das CSS in einer Minute aktualisieren. Foto eines Studenten. Okay. Ist Studentenalter. Wenn wir ein Bild des Schülers auf dem Schülerobjekt haben , erstellen wir ein Bild-Tag mit diesem Schülerbild als Quelle. Und mein Image-Tag beschwert sich, weil ich kein Altex habe Wir können also Alt-Text so einrichten, wie wir es auf diese Weise machen. Das ganze erste Mal. Ein Name von Lqufast. Letzter Student. Das gilt auch für alle Texte mit dem Namen des Schülers. Wenn wir andererseits kein Studentenbild haben. Keine Macht entspricht Vermögenswerten, Bildern, M war ein SVG A entspricht k einem Bild. Wie sieht das aus Ich werde meinen NG-Server starten oder NPM starten Und bevor wir uns das ansehen, wollen wir das CSS korrigieren In diesem Workshop haben wir nicht viel über CSS gesprochen. Ich betrachte mich nicht als CSS-Experte, aber dafür ist es nicht allzu schwer, es von ihnen zu machen. Da haben wir's. Also der Fotokurs für Studenten , den ich auf dem Bild eingerichtet habe? Ich gebe ihm eine maximale Höhe von 25% des vertikalen Raums. Also nicht mehr als das. Und ich werde das Objekt so einstellen, dass es abgedeckt ist. Es wird also das Bild zuschneiden, nimmt aber trotzdem das gesamte Rechteck ein. Das machen wir. Dann kommen wir wieder rein und aktualisieren die Seite hier. Ich sehe keinen Fehler, also lass uns hier darauf eingehen. Da ist mein Polid der Text, also sehe ich nicht, dass er etwas bewirkt. Aber wenn ich darauf klicke, kannst du meine Kamera sehen . Das ist cool. Ich benutze die andere Kamera. Wenn ich ein Foto machen will. Nun, ich habe nicht sehr gut gearbeitet. Lass uns das nochmal versuchen. Da haben wir's. Und dann kann ich es speichern. Und da ist mein Bild. Und wenn ich Jonathan Bennett rette. Komm wieder rein. Das Bild ist immer noch da. Wie cool ist das? Okay. Kein Applaus, nichts. Ordnung. Wie geht's allen anderen? Entschuldigung, ich war stumm geschaltet, aber nein, das ist cool. Funktioniert es bei dir? Ja. Ja, ich hatte das Bild. Es hieß dann, dass keine Kamera gefunden wurde. Okay. Gibt mir die Möglichkeit, ein Bild auszuwählen. Also lass mich das versuchen und sehen. Also, wenn ich es sage, kannst du zurückgehen. W. Sehr cool. Ja. Ja, das ist cool. Das gefällt mir. Das ist also ein Kondensator, im Wesentlichen auf den Punkt gebracht Capacitor bietet Ihnen eine konsistente API. Auf allen Geräten und Webseiten. Jetzt wird nicht jeder Kondensator angeschlossen, wir arbeiten mit dem Desktop-Browser. Viele werden es tun. Wenn du zu den offiziellen Plug-ins gehst und sie dann auch Community-Plug-ins haben, werden sie dir sagen, womit sie funktionieren. Es gibt Dinge wie Face ID , die offensichtlich nur mit einem Apple-Produkt funktionieren, und ich denke, sie funktionieren mit iPhones oder IOS Aber Sie können über alles auf das GPS zugreifen. Ich verwende die Browser-API. Ich benutze, wenn du an einem Schreibtisch bist, es geht tiefer und es nutzt dein WLAN und wenn du ein iPhone hast, benutzen sie das GPS. Auf Android wird es das GPS verwenden. Aber es gibt Ihnen eine konsistente API, mit der Sie sich weiterentwickeln können, sodass Sie sich nicht genau erinnern müssen, Android, ich muss das tun oder IOS, ich muss das tun. Macht das Sinn? Also jetzt, jetzt müssen wir es tun. Nun, bevor ich weitermache, gibt es jemanden , der die Kamera zum Laufen bringen möchte , es aber noch nicht getan hat? Nimm das als Nein. Nun kommen wir zum wahrscheinlich gefährlichsten Teil des Workshops. Weil ich keine Folien zu diesem Zeug habe. Bei diesem lebe ich einfach ganz spontan. Wie Sie sich vorstellen können, ist es ziemlich aufregend. Zu diesem Zeitpunkt haben wir also eine funktionierende Anwendung. Und ich denke, es ist gut genug , um in den App Store oder den Play Store gestellt zu werden. Lassen Sie mich also sicherstellen, dass die ionische Erweiterung läuft, geladen ist und läuft Nein. Stell sicher, dass alles gut ist. Das ist in Ordnung. Okay. Wo ist? Da ist der ionische. Da ist er. Okay. Habt ihr alle schon die ionische Erweiterung gesehen? Wir haben es wirklich nicht benutzt, weil ich mich nicht unbedingt darauf verlassen möchte Aber es gibt einige coole Dinge, die es tun kann . Was will es, dass wir tun? Es möchte migrieren Es möchte, dass wir diese Funktionen hinzufügen. Dies sind Empfehlungen, die uns der Ionenstecker geben wird Das erste, was ich jetzt tun möchte, ist, dass ich ein IOS-Projekt hinzufügen möchte. Es sollte eine Frage sein, einfach genau dort zu klicken Ja, ich möchte meinem Kondensatorprojekt IOS-Unterstützung hinzufügen . Und es zeigt mir im Terminal hier Befehle, die es ausführt. Okay. Okay. Also konnte ich nicht. Konnte nicht sinken, es fehlte WWW. Und ja, das vergesse ich selbst immer. Um eine Synchronisation mit dem Kondensator durchzuführen, müssen Sie mindestens einmal eine Produktionsversion Ihrer Anwendung erstellen . Also habe ich gerade NPM Run Build ausgeführt. Also, was sind Coco Pods? Worauf sind Sie es gewohnt, zu entwickeln? An welche native Desktop-Anwendung sind Sie gewöhnt? Ich Mac, ich dachte, du wärst vielleicht ein Dot-Entwickler. Oh, nun ja, nein, ich bin ein Java-Entwickler, also dann denke ich, dass es Maven entspricht Es ist ein Paketmanager. Okay. Oder zumindest ist das eines der Dinge, die Maven tun kann, oder? Ich weiß, dass es viel bewirken kann. Ja. Okay. Es ist ein CocoaPods, ich glaube, es ist nur ein Abhängigkeitsmanager Das Coole daran ist, dass Sie sich nicht wirklich darum kümmern müssen , es sei denn, Sie bauen Ihre eigenen Kondensator-Stecker nicht wirklich darum kümmern müssen , es sei denn, Sie Aber jetzt, da wir die App erstellt haben, sollten wir in der Lage sein, sie mit dem Kondensator zu synchronisieren. Okay. Und lass mich aufmachen. Paket, Jason. Oh, sie haben es nicht hier. Okay. Ich hatte ein Drehbuch erwartet. Also NPM-Skripte Okay. Also schien es vorbei zu sein. Komm wieder her. Schauen wir uns an, was es getan hat. Also hat der NPM-Run-Build meine ionische Angular-App erstellt und alle Assets ins WWW gestellt Das ist also die gesamte erstellte Anwendung. Capacitor Sync hat die gesamte Angular Ionic App in dieses IOS-Projekt kopiert in dieses IOS-Projekt Das ist also ein X-Code-Projekt. Technisch gesehen müssen wir uns nicht sonderlich darum kümmern , weil Ionic einen Großteil der Arbeit für uns erledigt hat Und ich werde der Erste sein, der zugibt, dass ich kein X-Code-Typ oder ein Objektiv-C-Typ oder ein schneller Typ bin Es ist einfach nicht etwas, das mich jemals besonders angesprochen hat. Aber jetzt, wo ich es erstellt und synchronisiert habe, kann ich dieses Projekt in Xcode öffnen Und davor hatte ich Angst. Okay. Mein Betriebssystem wurde also aktualisiert, seit ich XCode das letzte Mal ausgeführt habe, was bedeutet, dass ich EXCO oder zumindest einen Teil von Xcode aktualisieren oder zumindest einen Teil von Lassen Sie uns nun sehen, was es macht. Folgt Ihnen einer von Ihnen auf Ihrem Mac? Ja. In Ordnung. Ich möchte noch einmal darauf klicken. Das sieht besser aus. Okay. Also, es gibt X-Code. Bist du ein Apple-Entwickler? Nein. Nein. Ich bin als Apple-Entwickler registriert, zahle aber die Abonnementgebühr nicht, sodass ich nichts in den App Store pushen kann. Aber ich sollte zumindest dazu in der Lage sein , wenn ich es finde. Okay. Also habe ich eine Bundle-ID. Das Signieren erfolgt automatisch, aber ich habe kein Team, also muss ich zu meinem persönlichen Team gehen. Und das sollte nicht registriert werden können, weil Sie das nicht können. Die Bundle-ID muss global eindeutig sein. Nun, meins, weil ich Laufen als meine Domain verwende. Und meine Uhr möchte, dass ich meinem Computer vertraue. Ja, das darfst du. Komm spazieren. Nennen wir es Juli 2022. Versuche es erneut. Okay. Also hat es ein Signage-Zertifikat und ein Bereitstellungsprofil für mich erstellt und ein Bereitstellungsprofil für Zu diesem Zeitpunkt sollte ich also in der Lage sein, einen Simulator auszuwählen oder, wenn ich möchte, mein aktuelles iPhone anzuschließen wenn ich ein Lightning-Kabel hätte Irgendwo hier in der Nähe. Wenn wir Zeit haben, mache ich das. Nehmen wir mit einem iPhone acht eines der kleineren älteren. Ich sollte auf Play klicken können. Es wird gebaut. Ich habe dir doch gesagt, dass das Macbook schnell ist, oder? Okay. Ja. Ich habe den offenen X-Code unter meinem Kondensator im Ionischen nicht gesehen unter meinem Kondensator im Ionischen Hast du nicht? Ja. Das hatte ich nicht. Hattest du den Bau an der Spüle gemacht? Ja. Ja, und du hast das Ad-IOS-Projekt gemacht? Ja. Ja. Weil ich deswegen die Kokapapseln gegessen habe Okay. Richtig. Nun, lassen Sie mich versuchen, es noch einmal zu bauen, um es zu sehen. Ordnung. Der Simulator wird gerade gestartet Also auf dem iPhone 8 mit IOS 1155. Das kannst du ganz oben sehen. Wenn du es sehen kannst, ist das klein, heißt es, Apple läuft auf dem iPhone 8. Da hast du's. Mit allen drei Knöpfen. Jetzt kann ich dir sagen, dass das scheitern wird. Es ist nicht so, dass die Anwendung funktionieren wird, oder? Ich kann hier reinkommen. Ich kann ein Geschenk markieren. Ich kann als abwesend markieren. Ich kann gehen, ich kann Jennifers Namen in Jen ändern. Okay. Und es benimmt sich wie ein iPhone Und wir werden sagen, dass Jen am zehnten März 95 geboren wurde am zehnten März 95 Und wir werden Jen retten. Jetzt heißt es also Jen und hat immer noch denselben Geburtstag. Ich kann Troy löschen. Und alles, was wir in den letzten 3.5 Sessions entwickelt haben , läuft komplett als wäre es eine native iPhone-App Ein paar Dinge müssen wir noch tun, um es besser zu machen, aber es funktioniert. Also, wenn ich hier zu Casey reinkomme, weiß jemand, was passiert, wenn ich auf das Bild von der Kamera klicke Es gibt keinen Kamerasimulator, also wird es nicht funktionieren, dafür wird es scheitern Ich werde dich wahrscheinlich bitten, ein Bild auszuwählen oder einfach zu sterben. Nein, es stirbt einfach. Nein. Aber ich glaube, der Grund, warum es gestorben ist, ist nicht, dass es keine Kamera gibt. Es ist genau hier. Hier fängt es also an zu werden. Wir sind nicht mehr wirklich im Bereich der Ionik. Und wenn Sie zur Dokumentation des Kondensator-Kamerasteckers gehen , werden Sie davor gewarnt Die Kamera funktioniert nur, wenn Sie X Code mitteilen , dass Sie um Erlaubnis zur Verwendung der Kamera bitten möchten und. Ihr habt es alle gesehen, oder? Anwendung X möchte Ihre Kamera verwenden und dann stehen ein oder zwei kleine Sätze darunter , die Ihnen sagen, was sie mit dem Bild machen oder wie sie diese Daten verwenden werden . Richtig. Das ist hier drin. Das ist im X-Code. Mit Ionic ist das nicht möglich und für Android ist es anders als für IOS Es ist dasselbe. Sie müssen immer noch um Erlaubnis bitten, aber die Art und Weise, wie Sie um Erlaubnis gebeten ist bei Android anders. Also, soweit ich mich erinnere, lass mich die App beenden. Okay. Soweit ich mich erinnere, ist es irgendwo hier drin. Ich bin in der Information. Und was sagen sie mir, wonach ich suche. Ihnen fehlt die Beschreibung der Nutzung der Anna Photo Library-Anzeige. Erforderliche Gerätefunktionen. Den vergesse ich immer. Also werde ich das nehmen. Ich werde zurück zu den Interwebs gehen. Okay. Und Apple sagt, eine Nachricht, die dem Nutzer mitteilt, warum die App diese Anzeige anfordert, wohin geht sie? Da haben wir's. So fügen Sie das im X-Code hinzu. Wir sind also bei Informationen, benutzerdefinierten IOS-Zielen. Das sehe ich nicht. Siehst du das? Nein. Natürlich haben sie das Zeug bei fast jedem geändert, hier ist der Brauch, den ich immer angefangen habe. Das ist hier auf der linken Seite. Klicken Sie mit der rechten Maustaste auf eine beliebige Schlüsselzeile und klicken Sie auf Zeile hinzufügen. Hinzufügen. Das fühlt sich an. Das sehe ich falsch, nicht wahr? Ich glaube nicht, dass das dazugehört. Okay. Wie wäre es mit den R-Werten? Nein, ich mag das E. Okay, was ist das auf der Liste? Ly. Das ist der, den ich will. Da haben wir's. Das will ich haben. Das nicht. Jetzt, wo ich das da habe, glaube ich, genau deswegen wollen wir es verwenden. Schreiben Sie den Wert, der beschreibt, warum Ihre Anwendung ihn benötigt. Hier können wir ein Foto von Ihnen machen. Okay. Macht das Sinn? Lass es nochmal laufen. Der Simulator läuft immer noch. Und jetzt gehe ich zum Dienstplan. Klickt hier, hoffentlich. Mir hat es immer noch nicht gefallen. Deshalb verwenden wir Ionic und Nott fehlt. Lassen Sie uns das hier noch einmal überprüfen. Es ist weg, nicht wahr? Nein. unten. Hier bitteschön. Sollte das im Rahmen der erforderlichen Gerätefunktionen liegen? Nein. Sie haben es auf dem Bundle ex dem Bundle gemacht. Sie haben es hier irgendwo gemacht. Ja. Also, was war ihr Wert, den sie hatten? Vielleicht ist das der Unterschied. Der Wert des Schlüssels wird als Beschreibung des Popups angezeigt , das dem Benutzer angezeigt wird. Schreiben Sie also den Wert, der beschreibt, warum Ihre Anwendung Zugriff auf die Fotobibliothek benötigt? Das sieht gut aus. Lass es uns versuchen. Geh zurück zur App. Musst du es erneut bauen? Das habe ich mir auch gedacht. Lass uns einfach den Build-Ordner reinigen. Und dann baue es und führe es erneut aus. Oh. Beeindruckend. Ja. Darüber freut es sich immer noch , oder? Es ist möglich. Oh, es ist auch hier, nicht wahr? Es ist so, dass es in der Info-P-Liste steht. Es ist sogar genau dort. Ich bin mir ziemlich sicher, dass es nicht in der Kapsel ist. Ich glaube, es ist einfach hier. Es macht immer Spaß, mit IOS umzugehen. Gehen wir also zum Kondensator. Lass uns sehen, was sie sagen. Mera einstecken. Es erfordert mehr als nur diesen Also haben wir diesen gemacht, richtig? Nein. Wir haben diese Mauer gemacht. In Ordnung. Also haben wir den. Die sind alle gleich, oder? Okay. Okay. Ich möchte sie ein bisschen anders machen , damit ich weiß , welcher welcher ist. Okay. Lass uns das versuchen. Asador sagt, wir brauchen drei, also haben wir jetzt drei. Es fühlte sich nicht so an, als wäre es gebaut worden, oder? Du hast gesagt, dass es so war? Nein. Lass es uns versuchen. Da hast du's. Aber das war es, was wir brauchten. Wir brauchten alle drei. Ordnung. Also schauen wir mal, ob ich hier ein Kabel habe . Was bedeutet, dass ich den Stecker ziehen muss. Das ist das Problem mit dem MacBook-Fehler. Es hat nur zwei Anschlüsse. Also werde ich meinen Strom abziehen , da das Ding einer Batterie sechs oder 7 Stunden lang läuft Ich bin in meinem iPhone 11. Okay. Jetzt, wo wir das funktionstüchtig haben. Ich habe hier mein iPhone 11 zum Entsperren, um das Zubehör zu verwenden. Jetzt Michaels iPhone. Ich teile den Bildschirm immer noch, oder? Ja. Ja. Okay. Okay. Also habe ich mein iPhone ausgewählt. Und jetzt werde ich es wieder starten. Und ich denke, Bill war erfolgreich. Michael, das ist in Ordnung. Ich werde für einen Moment aufhören zu