APIs lernen: Baue eine Such-App mit JavaScript, TypeScript, React und Next. js im Hell- und Dunkel-Modus

1. Intro: Sie haben vielleicht von APIs gehört, aber wissen Sie, wie man sie benutzt Heute werden wir alles durchgehen, was Sie wissen müssen, um Ihre eigene Web-App mit kostenlosen APIs zu erstellen. Hi, mein Name ist Zoe. Ich bin ein Softwareingenieur und ehemaliger Professor, der es liebt, anderen beizubringen, wie man mit dem Programmieren anfängt Ich habe Unmengen von Websites und Web-Apps mit React CSS und HTML erstellt Web-Apps mit React CSS . Next S und mehr. Heute werden wir die kostenlose API von Rest Country um diese Web-App für die Ländersuche zu erstellen. Dieses Projekt wird es uns ermöglichen, zu lernen wie man Next S benutzt und reagiert, wie man mit APIs interagiert und sie in unsere Projekte integriert . Und wie man Javascript oder Typescript verwendet, um die angeforderten Daten auf der Grundlage der Anfrage eines Benutzers kurz und bündig zu filtern und zurückzugeben auf der Grundlage der Anfrage eines Wir beginnen mit einem grundlegenden Überblick darüber was APIs sind und warum wir Ja. Und dann tauchen wir direkt in unser Tutorial ein. Das Tutorial wird in drei verschiedene Teile unterteilt. Zuerst stylen wir die Web-App verbinden sie dann mit der API. Und schließlich werden wir die Abfragelogik verfeinern um sicherzustellen, dass die Benutzer genau das bekommen, wonach sie suchen. Dieser Kurs richtet sich an alle, die lernen möchten , wie man mit einer API in einer Web-App arbeitet. Am Ende dieses Kurses werden Sie in der Lage sein, dies alles selbst zu tun . Lass uns anfangen. 2. Kursprojekt: Klassenprojekt. Das Projekt für diesen Kurs besteht darin, einer kostenlosen API eine voll funktionsfähige Web-App für die Ländersuche mithilfe einer kostenlosen API eine voll funktionsfähige Web-App für die Ländersuche zu erstellen. Dazu benötigen Sie Zugriff auf einen Computer und einen Code-Editor wie Visual Studio Code. Sie sollten auch ein gewisses Verständnis von Javascript oder Typoskript sowie von HTML und CSS haben. Um unsere App zu starten, werden wir ein Framework namens Next S verwenden , das React verwendet. Wir werden Material I auch für einige grundlegende Styling-Komponenten verwenden . Ich hinterlasse Links zu allen Ressourcen und Ressourcen Sie benötigen, auf der Registerkarte Projekt und Ressourcen direkt unten. 3. APIs und Datenbanken: APIs und Datenbanken. Eine API oder eine Anwendungsprogrammierschnittstelle ist eine Reihe von Regeln, die es Frontend-Entwicklern ermöglichen, Daten im Backend zu erstellen , zu lesen, zu aktualisieren und zu löschen Diese APIs werden von Backend-Entwicklern mit Sprachen wie Python, Ruby, Java Script und anderen erstellt Backend-Entwicklern mit Sprachen wie Python, Ruby, Java Script und anderen Datenbanken hingegen sind der Ort, dem die Daten gespeichert sind und auf die über diese APIs zugegriffen Je nachdem, welche Art von API-Anfrage vom Frontend aus gesendet wird entweder erstellen, lesen, aktualisieren oder löschen), wird ein anderer Datensatz zurückgegeben. Zum Beispiel, wenn ein neuer Benutzer ein Konto einrichtet , indem er seine E-Mail-Adresse und sein Passwort eingibt. Sobald sie auf Senden klicken, werden diese Informationen an die Datenbank gesendet und ein neuer Benutzer wird erstellt. 4. Next.js: Next S. In den Jahren, die seit der Einführung von Reacts vergangen sind, wurden viele Frameworks darauf aufgebaut und entwickelt. Ein heute sehr beliebtes Framework ist Next S. Next S bietet viele sofort einsatzbereite Optimierungen wie Servi Side Rendering, Routing und verbesserte Suchmaschinenoptimierung Servi Side Rendering, Routing und verbesserte Suchmaschinenoptimierung Und als solches ist es ein Favorit bei Frontend-Entwicklern. Wir werden es in unserem Projekt verwenden, also lassen Sie uns eintauchen und loslegen. 5. Projekteinrichtung: Fangen wir an, an diesem Projekt zu arbeiten. Die App, die wir erstellen möchten , ist ungefähr so. Es ist eine App zur Ländersuche, mit der Sie, wenn Sie den Namen eines Landes eingeben, tatsächlich das Ergebnis dafür erhalten können. Sie sollten auch in der Lage sein, einfach nach Regionen zu filtern. Also irgendwo in Afrika oder Amerika oder in Europa usw. usw. Und ich sollte auch sagen, dass Sie es auch in den Dunkelmodus schalten können Sie können den Dunkelmodus oder den Hellmodus einschalten. Also, ja, wir werden diese App entwickeln, indem wir diese kostenlose Country's Rest API verwenden , die hier bereitgestellt wird. Wie Sie sehen können, haben wir eine Country-Rest-API, die es uns ermöglicht, diesen Endpunkt zu erreichen und dann eine Reihe verschiedener Details zu erhalten. Damit wir den Namen und die Flaggen bekommen können. Es gibt viele verschiedene Informationen. Deshalb werde ich unten im Tab Projekte und Ressourcen einen Link zu dieser Website hinterlassen , damit Sie ihn verfolgen und in Ihrem Projekt verwenden können . Und auch die Inspiration für dieses Projekt und das Design dafür stammen von dieser Website namens Front End Mentor. Dort hole ich mir tatsächlich viele meiner Projekte, an denen ich arbeiten und aus denen ich Projekte bauen kann, ob du es ausprobieren willst, Frontend, oder es ist ein völlig kostenloses Projekt, aber du kannst dir das Design hier holen und wir werden an diesem Bild hier arbeiten , um unser Projekt zu erstellen. Ja, lass uns weitermachen und anfangen. Ich werde anfangen, wie ich bereits erwähnt habe, wir werden die nächste JS-Material-Benutzeroberfläche und das Type-Skript verwenden . Ich habe tatsächlich eine Vorlage erstellt, die wir verwenden werden, um tatsächlich an unserem Projekt zu arbeiten. Hier werde ich weitermachen und ein Repository einrichten, das diese Vorlage verwendet. Fantastisch. Jetzt ist das Repository erstellt. können Sie tatsächlich, wir können es lokal verwenden , um unsere App für die Ländersuche zu entwickeln. Und ich hinterlasse auch einen Link zu der Vorlage und dem Repository, das ich dafür verwende, damit Sie ihn als Ausgangspunkt verwenden können. Und Sie können Ihre Arbeit auch im Laufe der Zeit überprüfen, wenn Sie sehen möchten, wie das endgültige Projekt letztendlich aussah. In Ordnung, also werde ich weitermachen und das klonen. Fantastisch. Und dann mache ich einfach weiter und öffne es. Perfekt. Also das nächste, was wir tun müssen, wenn wir ein Projekt klonen, ist, dass wir es installieren müssen. Lassen Sie uns also eine schnelle NPM-Installation durchführen. Ordnung, cool. Also ist es jetzt installiert. Wir sollten einfach MPM Run Dev ausführen können . Fantastisch. Und es beginnt beim lokalen Host 3.000 und großartig, wir haben unsere App zum Laufen gebracht, also können wir loslegen. Lass uns weitermachen und loslegen. 6. Die App stylen: In diesem Abschnitt werden wir uns hauptsächlich auf das Styling konzentrieren. Wenn Sie also mehr an der Logik interessiert sind, können Sie mit der nächsten Lektion fortfahren . Ordnung, als Erstes möchte ich wie gewohnt einen neuen Ordner für meine Komponenten erstellen. Dann möchte ich weitermachen und diese nächste GS-Seite löschen. Also werde ich hier einfach alles im Hauptteil löschen , das speichern. Ich werde auch die Stile auf der ID hier entfernen , bei dieser Ländersuche. Das sollte vorerst gut sein , wenn wir uns dieses Beispielprojekt ansehen. Richtig? Wir haben ein paar verschiedene Bereiche , mit denen wir arbeiten, oder? Es gibt diesen Header-Bereich, es gibt diesen Eingabebereich, hier gibt es einen Regionsfilter, eine Auswahl, ich betrachte das als ein paar verschiedene Abschnitte. Da ist der Header und dann ist da noch dieser größere Teil, das eigentliche Land selbst. Dann ist da noch die Anzeige all dieser verschiedenen Karten. Zerlegen wir es in Stücke. Was wir hier machen werden, zuerst werde ich einen Container für das Ganze erstellen. Ich werde ihn den Länder-Suchcontainer nennen. Das wird einfach alles beherbergen , woran wir gerade arbeiten. Das ist cool. Und wir benutzen Emmett und dann importieren wir das einfach hier. Alles klar? Perfekt. Wenn wir uns das von vorne ansehen, sehen wir, dass wir dort unseren Ländersuchcontainer haben. Perfekt. Das wird ein paar verschiedene Dinge beinhalten. Lassen Sie uns eine weitere Komponente namens Header erstellen. Lassen Sie uns eine weitere Komponente erstellen, die heißt , ähm, wir nennen sie Country Search. Okay, und wir werden beide in den Country Search-Container importieren . Ich werde das einfach in eine Box ändern , weil das quasi das Material ist, mit dem du es machst. Und das würde es uns einfach ermöglichen, verschiedene Requisiten mit X, X zu verwenden , falls Sie noch nie davon gehört der Requisite SX können Sie im Grunde auf dieselben Requisiten zugreifen , die Sie wie eine Style-Requisite zu einem regulären Element hinzufügen könnten wie eine Style-Requisite zu einem regulären Element Aber es ermöglicht Ihnen auch spezielle Dinge wie Medienanfragen und solche Dinge , die Sie in der Style-Requisite nicht tun können Ich bevorzuge es, wann immer möglich die Elemente der Muy-Komponenten zu verwenden , wenn sie uns allen zur Verfügung stehen Sie sehen, wir haben unseren Landesleiter für die Suche. In Ordnung, wenn Sie sich das Design hier ansehen, werden Sie feststellen, dass wir auf jeder Seite etwas Rand oder Polsterung haben , und dann ist es bei beiden Komponenten gleich, und dann haben wir hier das größere Teil In Ordnung, ich möchte das in mehreren Schritten angehen. Erstes möchte ich, wie ich bereits erwähnt habe, das eigentliche Projekt selbst gestalten. Lassen Sie uns also am Styling arbeiten und dann davon ausgehen , dass wir diese im Grunde so stylen wollen, dass beide links und rechts etwas gepolstert werden diese im Grunde so stylen wollen, dass beide können Lass uns zuerst in den Header springen. Der Kopf verwandelt sich ebenfalls in eine Kiste. Die Kopfzeile besteht aus zwei Hauptelementen. Es hat den Krieg in der Welt und dann auch die Dunkelmodus-Taste. Wir werden also mit einem Typografieelement beginnen, sagen wir, wir werden im Text sagen, dass wir in der Welt sind, wird von der Variante H eins sein, weil jede Seite ein H haben muss Und dann wird es wahrscheinlich nicht das richtige Format sein, aber wir können das mit x regeln, oder? Ja, es ist ein bisschen zu groß. Also lass uns SX nehmen und dann setzen wir es auf Schriftgröße ein Ram, vielleicht zwei Ram 1.5 Dann lass uns Font Wait like 700 machen. Ordnung, cool. Das ist Element eins. Und dann ist der zweite dieser Knopf. Und auf der Taste steht Dunkelmodus als. Ja, es gibt auch eine Taste. Es tut mir leid. Es gibt auch eine Ikone , die so etwas wie Halbmond, Halbmond oder Halbmond Lass uns nach Monden suchen. Und dieser sieht ziemlich ähnlich aus, also werden wir ihn tatsächlich in unserem Button verwenden, also werde ich ihn verwenden Cool. Und wir haben unseren kleinen Mond genau dort. In Ordnung. Fantastisch. Das nächste, was wir hier tun wollen, ist, dass wir das in eine Reihe stellen wollen. Also werde ich die SS-Requisiten verwenden und einfach das Display auf Flex umstellen und das speichern Ich werde den Abstand zwischen den Inhalten rechtfertigen Elemente in der Mitte ausrichten Fantastisch. Ja. Ja, für den Header weiß ich jetzt auch, dass ich ein paar Polsterungen brauche. Ich mache die Polsterung von oben und unten wird ein M sein und links und rechts werden zwei Ram sein Das sollte vorerst gut sein. Was müssen wir noch tun? Wir wollen sichergehen, dass, oh ja, die Farbe tatsächlich etwas anders ist, wenn Sie das bemerken. Ich möchte die allgemeine Hintergrundfarbe der App so einstellen , dass hellgrau ist, und dann wird das tatsächlich unser Weiß sein. Ich werde mir das schnappen, ich werde einfach diesen Farbwähler benutzen Ich werde mir einfach diese Farbe hier schnappen und super, das wird die Farbe des eigentlichen Hintergrunds der ganzen App Was ich hier machen will, ich denke, wir werden den Index nehmen. Wir werden hier tatsächlich die Hintergrundfarbe für diesen Overall auf diese Farbe einstellen . Also nehmen wir die Hintergrundfarbe und stellen sie so ein, dass sie fantastisch ist. Und Sie können sehen, dass es sich hier nur leicht verändert hat. Es ist ein bisschen schwierig zu erkennen, nur weil es nur ein kleiner Abschnitt ist, aber es wird ein bisschen offensichtlicher sein , wenn wir anfangen ein bisschen mehr an dem Apfel zu arbeiten. Die andere Sache, die ich hier tun möchte, ist die Größe dieses Elements festzulegen, weil es sich um eine Art einseitiges Objekt handelt. Ich möchte, dass die Mindesthöhe des Elements 100 neue Höhen beträgt. Das entspricht 100% der Höhe der Ansicht , die wir aufnehmen. Und dann möchte ich nur die normale Höhe oder die maximale Höhe, die wahrscheinlich dem Inhalt entspricht. Und das wird relevanter sein, sobald wir eine ganze Reihe verschiedener Ergebnisse erzielen. In Ordnung, ich werde diese zusätzlichen Stile hier entfernen. In Ordnung, cool. Also das nächste, was wir jetzt tun wollen, ist die Hintergrundfarbe der Kopfzeile zu ändern . Also die Kopfzeile, jetzt gehen wir zurück und stellen die Hintergrundfarbe so ein, dass sie einfach weiß ist, cool und man kann sie kaum sehen, aber hier gibt es einen kleinen Unterschied. Ich werde noch etwas tun, um es irgendwie zu unterscheiden. Siehst du, da ist dieser kleine Kastenschatten. Wir fügen einfach einen Kastenschatten auf den unteren Rand dieses Stücks, genau hier. Also werde ich das kopieren und es dann zu unserem Kopf hinzufügen. Und wir werden es ein bisschen modifizieren. Ordnung, wir werden es einfach versetzt haben, vielleicht zwei Pixel in jede Richtung. Wir werden es hellgrau machen. Spar dir das. Wie Sie sehen können, haben wir nur eine wirklich grundlegende Art der Unterscheidung zwischen den beiden. Das ist vorerst gut genug. Weißt du, ich denke, wir können auch Dinge wie die Farbe des Buttons ändern und solche Dinge. Nicht unbedingt das Wichtigste, was man tun kann. Ich denke, die nächste wichtige Sache wäre, den Verkauf für den Rest herunterzufahren. Ordnung, als Nächstes werden wir hier an unserem Ländersuchcontainer arbeiten. Also unsere Ländersuche, tut mir leid. Also bei der Ländersuche wird es eine ganze Reihe verschiedener Elemente geben , naja drei. Also werden wir zu einer Box wechseln. Zuerst werden wir eine Eingabe haben, wir werden die Auswahl haben. Und dann werden wir alle Karten anzeigen , ich glaube, Material. Ich habe eine Texteingabe-Textfeldkomponente. Und ich denke, wir werden dafür so etwas wie die Gliederung verwenden wollen . Also nehme ich einfach diese Codezeile hier und kopiere sie zurück in unser Projekt und füge sie als unser erstes Element hinzu. Wir werden also ein Textfeld haben , das wir aus Material I importieren. Und dann haben sie auch eine Select Select-Komponente. Und wir werden uns einfach das Ganze hier schnappen und es verwenden. Perfekt. Und wir müssen nur all diese fehlenden Importe hinzufügen, damit wir keine Fehler bekommen. Ich verwende das gerade nur als Vorlage. Wir werden weitermachen und es an unsere Zwecke anpassen . In Ordnung, cool. Also haben wir unsere Texteingabe und wir haben unser H oder unser Drop-down-Menü ausgewählt Ich werde noch etwas tun, und ich werde sie in eine Schachtel packen , weil unsere Karten tatsächlich auch auf dieser Seite angezeigt werden Also speichern wir das. Und dann werde ich das Display auf Flex umstellen. Spar dir das. Fantastisch. Geil. Jetzt sind sie in einer Zeile, aber der Abstand stimmt nicht. Wirklich richtig. Im Moment sagt das Formularsteuerelement volle Breite. Das wollen wir eigentlich nicht. Wir wollen, dass es vielleicht fünf Mal, zehn Ram hat, weil es Wörter sein werden, aber wir brauchen es nicht wirklich, dass es so breit Und dann wollen wir , dass zwischen ihnen auch Platz ist. Also werden wir dasselbe tun. Bereit zu gehen? Begründen Sie den Inhalt. Wir werden es auf einen Leerraum zwischen sechs Mal einstellen. Cool. Fantastisch. Wie Sie feststellen werden, fehlt uns dort immer noch die Polsterung an der Außenseite Also fügen wir der Außenverpackung einfach einen weiteren S x Pro hinzu und fügen dort etwas Polsterung hinzu Also machen wir einfach eine Polsterung und wir werden einfach zwei Ram rumtragen und das sagen, super, cool Es ist ein bisschen besser in der Reihe. Die letzte Sache, die ich mit der Texteingabe machen möchte , ist, sie ein bisschen länger zu machen, weil Sie sehen können, dass sie tatsächlich ein bisschen länger ist. Und ich werde es einfach schaffen, wir werden die Breite auf, was, 20 Ram einstellen? Nehmen wir an, es handelt sich um eine Breite von 20 Ansichten , deren Gewicht sich mit der tatsächlichen Größe der Bildschirmbreite ändert , im Gegensatz zu M. Das entspricht immer etwa 30% der Breite der Ansicht. Es reagiert ein bisschen besser. Ich werde das Gleiche mit der Auswahl hier machen. Möglicherweise muss das auf 2015 geändert werden. Oder 20. Vielleicht 15. Ja, es sieht ungefähr richtig aus. In Ordnung, cool. Und dann kann dieser tatsächlich etwas länger sein, vielleicht 40. Cool. Das sollte gut sein. Dann ist mir noch etwas aufgefallen, mir ist gerade aufgefallen, dass die Hintergrundfarbe auch beim Schwimmen weiß ist , ich habe sie auf Weiß eingestellt. Sag das. In Ordnung, großartig, cool Wir haben also eine wirklich einfache Texteingabe, wir haben unsere Auswahl Und dann werden wir unsere Drop-down-Karte erstellen nur um sie ein bisschen individueller zu gestalten Während wir hier sind, werden wir feststellen, dass der Anfangstext „Suche nach einem Punkt für das Land“ lautet . Also wollen wir das ändern. Anstatt das für Laien zu halten, sagen wir, suchen einem Land und sagen, dass dann hier Alter steht. Wir wollen wirklich, dass das nach Regionen gefiltert wird. Wir werden das ändern , um nach Regionen zu filtern . Das werden wir sagen. Lass uns ein bisschen mehr draus machen, lass uns diese 20 perfekt machen. Ähm, und ich schätze , der Hintergrund sollte auch weiß sein Sag das. Fantastisch. Als Nächstes möchten wir jetzt die tatsächlichen verschiedenen Optionen hier ändern, die Menüelemente. Was ich tun werde, ich werde das eigentlich einfach beenden und mit einem beginnen. Es ist Afrika, Amerika. Lass uns weitermachen und sie abtippen. Lass uns Afrika machen. Afrika, Afrika. Und dann werde ich das ein paar Mal kopieren und einfügen, Amerika. Ich werde sogar noch eins drüber machen und das wird unser aller sein. Ich werde noch einen hinzufügen. Du wirst später sehen, warum ich das hinzufüge, aber ich werde einfach eins machen. Das ist alles. In Ordnung, Amerika. Eine interessante Sache an dieser API ist, dass es eigentlich nicht Amerika ist. Es sucht, es ist Amerika, wie Nordamerika, Südamerika, Amerika. Sie möchten den Wert dieses Menüelements auf Amerika ändern , obwohl auf dem Display Amerika angezeigt wird. Eigentlich können wir zu Amerika wechseln, nur um semantisch korrekt zu sein Ordnung, wenn wir die Liste durchgehen, ändern wir das auf Asien und das auf Sie Und was ich hier mache, nur für den Fall, dass Sie mit dieser Art von Tastaturtrick nicht vertraut sind, ich drücke Befehl D, um das Wort auszuwählen, an dem ich gerade arbeite. Und dann die nächste Version dieses Wortes, das nächste Duplikat dieses Wortes. Ich möchte also nur den Befehl D drücken, bis ich die gesamte Anzahl von Versionen dieses Wortes ausgewählt habe die gesamte Anzahl von , die vor mir liegen. Also machen wir Europa und dann Oceana Ordnung. Fantastisch. Also haben wir unseren Filter nach Regionen. Cool. Als Nächstes werden wir unsere Karten für unser Land erstellen wollen. Das werden also Karten sein, die ein paar Eigenschaften haben , ein paar verschiedene Aspekte. Wir nehmen das Bild auf, wir nehmen den Namen, die Bevölkerung, die Region und die Hauptstadt Okay, cool. Also werde ich eine weitere Komponente für diese Call-it-Karte erstellen. Sag das jetzt, ich möchte nur sehen, wie es mit einigen Scheindaten aussieht. Also gehe ich zurück zu meiner Ländersuche und erstelle etwas namens oder einfach eine Reihe von Zeichenketten für Scheindaten. Also lass uns keine Daten machen. Lassen Sie uns eigentlich einfach eine Reihe von Objekten erstellen. Lassen Sie uns einfach eine Reihe von Ländern betrachten. Also lasst uns Deutschland machen. Lass uns United machen. Staaten von Amerika, und wir werden Brasilien genau wie im Beispiel machen. Ordnung, cool. Das speichern wir dann. Was ich nun tun möchte, wie Sie sehen können, unsere Box mit unserem Formularsteuerelement, unserer Eingabe und unserer Auswahlkomponente. Wir wollen aus dieser Box herauskommen und dann wollen wir das einfach durchziehen. Wir machen das hier, wir werden Daten simulieren. Dann möchte ich diese Scheindaten für jedes Land kartografieren. Ich möchte eine Karte zurückgeben . Kartenmaterial . Speichern Sie das. Oh ja. Jedes Mal, wenn du Map benutzt, brauchst du einen Schlüssel. Also werde ich den Schlüssel vorerst einfach so einstellen, dass er der Name des Landes ist. Das werden wir uns sparen. Ordnung, cool. Also, wenn ich zu unserer Karte gehe, sollten wir einfach, ja, wir haben drei Länder in unseren Scheindaten. Es ist im Grunde die Schleife für die Häufigkeit , mit der wir das Land haben. Wir haben also drei Karten. Fantastisch. Lass uns weitermachen und diese Karte ein wenig aufpeppen Eigentlich hat es eine Komponente namens „Verschiedene Karten“, aber wir wollen eine verwenden , die ein Bild hat Ähm, vielleicht die Medienkarte. Ich denke, das ist vielleicht das Beste für uns. Also werde ich weitermachen und diese Informationen hier kopieren. Und wir werden einfach die Karte erstellen, speichern und einfach all diese fehlenden Importe hinzufügen. Oh ja, ich habe sie Karte genannt. Ordnung, also lass uns importieren weil ich die eigentliche Komponente selbst Karte nenne. Es gibt einen Konflikt, weil wir Karten für Material Y importieren . Ich habe etwas namens Karten erstellt Also werde ich ihrer Karte einen Namen geben, nur damit sie anders ist und es keinen Konflikt gibt In Ordnung, ich werde ein paar dieser Teile entfernen. Wie bei Kartenaktionen brauchen wir das nicht. Wir wollen buchstäblich nur Informationen anzeigen. Und dann, ja, das sollte ziemlich anständig sein. Die Höhe des Bildes und die maximale Breite. Ich möchte, dass die maximale Breite vielleicht 20 Ansichtsbreite beträgt, vielleicht legen wir das einfach als endgültige Breite fest, weil wir in der Lage sein sollen, vier x 20 Breite unterzubringen. Und dann gehe ich tatsächlich wieder hierher und sollte es in eine Schachtel packen. Ja, lass es mich in eine Schachtel packen. Und dann werde ich daraus eine Flexbox machen. Ich werde das sagen, großartig, cool. Jetzt beginnen sie sich auszubreiten. Fügen wir ein weiteres Land hinzu. Lass uns Jamaica machen. Nur damit ich die Vier verstanden habe, kann ich ein Gefühl dafür bekommen, wie das aussieht. Und dann möchte ich den Inhalt rechtfertigen. Ich glaube, ich möchte einen gleichmäßigen Abstand haben. Kein Platz in der Nähe. Weltraum. Raum dazwischen. Ich will wieder Abstand dazwischen. In Ordnung, cool und großartig. Also ja, wir haben unsere vier Karten genau da. Im Moment sagen sie alle Echse, weil das in den Scheindaten steht. Aber daran werden wir arbeiten Ordnung, ich möchte nur dieses kleine Stück hier nachbessern. Es ist nicht genug Platz zwischen der Karte und der eigentlichen Eingabe, also füge ich dem oberen Feld etwas Rand hinzu, also gehe ich zum unteren Rand. Perfekt. Und dann werde ich die Karte einfach ein bisschen nachbessern. Also werde ich die Höhe der eigentlichen Karte auf, sagen wir, zehn Ansichtshöhen einstellen , die zu klein sind. Vielleicht 15, vielleicht zehn ist in Ordnung. Und dann werden wir am Ende einige Eigenschaften von, von der API selbst übergeben, sobald wir sie erhalten haben Ich denke also, wir sind ziemlich gut, was das gesamte Styling angeht. Aber es gibt noch eine Sache, die ich tun möchte, nur damit wir mit dem Dunkelmodus arbeiten können. 7. Dunkelmodus und Zustand: Das Letzte, was wir für das Styling tun wollen, ist an unserem Dunkelmodus zu arbeiten. Eigentlich habe ich diese wirklich tolle Funktion, mit der sie dir ein Standarddesign bietet, das sich im hellen Modus befindet Ich werde also versuchen , dieses Hellmodus-Thema ins Visier zu nehmen und es einfach zwischen Hellmodus und Dunkelmodus wechseln zu lassen, je nachdem, in welchem Modus wir uns befinden möchten Also werden wir Licht einsetzen, wir werden das für unsere App hier nutzen , um darauf zuzugreifen. Es lebt an verschiedenen Orten. Wenn wir uns unsere App Score-App ansehen, werden Sie feststellen, dass es hier etwas gibt , das das Thema bereitstellt, einen Themenanbieter und etwas, das als Light-Theme bezeichnet wird . Das Light-Theme, das Light-Theme wurde also mit der Funktion „ Theme erstellen“ hier erstellt. Und wir werden einfach überprüfen, ob es sich in den Styles im Theme-Ordner befindet, in einer Datei namens Light Theme-Optionen. Wenn wir es uns hier ansehen, können wir das als eine ziemlich einfache Datei und es sollte ziemlich einfach sein eine Dark-Mode-Version davon zu erstellen. Also werde ich das alles einfach kopieren und eine neue Datei erstellen, sie Dark Theme-Optionen nennen und diese einfügen. Aber statt dort, wo hell steht, werde ich es einfach auf dunkel ändern. Und ich bin mir ziemlich sicher , dass das funktionieren wird. Ich lasse uns einfach zwischen Dunkel und Hell wechseln . Fantastisch. Also haben wir das am Laufen. Das nächste, was ich jetzt tun möchte, ist, dass ich das im Grunde an der richtigen Stelle einfügen muss. Wenn ich also zur App gehe, möchte ich im Grunde das, was ich hier machen möchte, und es wird nicht nur hier in diesem Teil der App sein, es wird alles vorbei sein. Ich denke also, dass ich Zustand installieren möchte, um diesen einfachen Teil des globalen Staates zu verwalten. Wir könnten Joe quasi die ganze Zeit unterstützen, aber ich denke, das wird ein bisschen sauberer sein Wenn Sie also mit Zustan nicht vertraut sind, Zustand ist wie eine Redux-Alternative, aber viel einfacher Es gibt viel weniger Standardlösungen für den Einstieg. Also schauen wir nach Zustand, es ist im Grunde nur eine Möglichkeit, den Status zu verwalten Ja, das ist das Dokument, ich werde es nur sehr schnell installieren. Dann werde ich ein Geschäft eröffnen. Ich werde einen neuen Ordner namens Store erstellen. Ich werde dort eine Datei namens Index TS erstellen. Was ich tun möchte, ist buchstäblich einfach ein Geschäft in Zand zu eröffnen. Ich werde ihre Formatierung hier kopieren. Ähm, Oh, und es beschwert sich über den Typ. Das kriegen wir hin. Ja, ich möchte im Grunde diesen Hook namens Store erstellen , der ein Geschäft einrichten wird , in dem wir einfach unseren globalen Staat am Leben erhalten können. Also ich brauche wirklich nur zwei Requisiten im Dunkelmodus und es wird zunächst falsch sein Und dann möchte ich den Dunkelmodus umschalten. Was das bewirken wird, ist, das zu entfernen. Es ist der Dunkelmodus, er nimmt diesen Zustand und setzt ihn dann einfach auf das Gegenteil von dem, was er ist. Es wird, sagen wir, da hinten, der entgegengesetzte Zustand sein, der Dunkelmodus. Wenn ich auf Dunkelmodus umschalten klicke, was auch immer der Dunkelmodus ist, wird es das Gegenteil davon sein Eine letzte Sache, die wir hier tun werden, ist das Hinzufügen der Typen, die wir erstellen werden Das ist der Laden im dunklen Modus, es wird ein Edelmetall sein Dann schalten wir den Dunkelmodus um. Das wird nur eine einfache Funktion sein , die void zurückgibt Dann legen wir Store, Store, State fest. Wir werden es einfach Store nennen. Sag das und cool, jetzt haben wir unseren Typfehler behoben. Jetzt können wir von überall in unserem Projekt auf diesen Shop zugreifen . Wenn ich also zu Apps X zurückkehre und mich jetzt darauf einklinken kann und im Grunde auf den Wert von is Stark Boat zugreifen kann. Also wie wir das machen werden, ist, dass wir diese Funktionalität hierher kopieren wollen . Wir werden hier auf unsere Komponente eingehen und sie ein bisschen größer machen. Und ich werde in den Dunkelmodus wechseln, du gehst einkaufen. werden wir importieren. Oh, weißt du was, ich habe vergessen, es zu exportieren. Stellen Sie sicher, dass Sie den Shop exportieren , da Sie sonst den falschen Shop importieren. Also werden wir den Shop exportieren und ihn aus dem Store importieren. Und sie werden in den Dunkelmodus wechseln. Das ist alles, was Sie tun müssen, um den Staat einzurichten. Es ist super einfach, super einfach. Falls Sie mein anderes Video zur Erklärung noch nicht gesehen haben, machen wir genau das Gleiche. Das ist Teil des To-do-AT-Projekts. Es ist wirklich, wirklich unkompliziert, wirklich einfach zu benutzen. Aber dann würde ich wärmstens empfehlen, es zu verwenden, weil, ich meine, schauen Sie, wie schnell wir den Staat eingerichtet haben. Je nachdem, ob es sich um einen dunklen Modus handelt oder nicht, möchte ich das helle oder das dunkle Thema anzeigen. Also werde ich hier einen kurzen Check machen. Also, wenn es der Dunkelmodus ist, möchte ich das dunkle Thema verwenden. Und lassen Sie mich es einfach importieren und das dunkle Thema erstellen. Und importiere es, wir werden ein dunkles Thema wählen. Und wenn nicht, dann werden wir ein helles Theme machen wollen und das sagen, super. Ordnung, das nächste, was wir tun werden, ist, es tatsächlich einzuschalten. Denn im Moment macht es nichts. Richtig? Nichts löst diesen Umschalter aus. Wenn ich also zurück zur Kopfzeile gehe, möchte ich hier zur Schaltfläche gehen Und wir wollen dasselbe tun. Wir wollen, wir wollen auf den Schalter zugreifen, das war dieses Format genau hier. Und wir werden den Dunkelmodus umschalten. Und es wird dasselbe tun. Wir werden den Shop aus dem Store importieren und den Status auf Dunkelmodus umschalten Wir werden das speichern. Fantastisch. Es erkennt , dass das eine Funktion ist. Und wenn wir dann hier klicken, wollen wir buchstäblich nur den Dunkelmodus umschalten aufrufen Wenn wir das richtig anschließen, wenn ich auf die Schaltfläche für den Dunkelmodus drücke, sollten einige Dinge einfach dunkel werden und einige Dinge sollten bleiben, wenn wir darauf klicken, großartig Es ist also nicht perfekt, weil wir selbst viele Anpassungen vorgenommen haben , wie zum Beispiel bei den Hintergründen hier. Aber das ist ein wirklich guter erster Schritt, also wissen wir, dass er funktioniert Jetzt müssen wir nur noch die anderen Teile anschließen. Sie werden also sehen, dass sich dieser Hintergrund nicht ändert. Dieser Hintergrund ändert sich nicht , dieser Hintergrund ändert sich nicht und dieser Hintergrund ändert sich nicht. Wir müssen also ein paar Hintergründe klären. Also, wenn du zurück gehst, oder wir können hier anfangen, also wenn wir den Dunkelmodus aus demselben Laden holen , der Dunkelmodus ist, und ihn speichern. Wenn ich dann einfach nochmal in dieser Zeile nachschaue, genau hier. Also wenn ich in den Dunkelmodus gehe und wenn ja, will ich, dass es so ist. Gehen wir zurück zu unserem Design. Ich möchte, dass es diese Farbe hat. Also lass es mich ganz schnell holen. Das ist für den Header. Eigentlich ist diese Farbe die, die ich will. Ich werde mir das holen. Wenn es der Dunkelmodus ist, möchte ich, dass die Hintergrundfarbe diese ist. Wenn nicht, möchte ich, dass es das ist. Und speichern Sie das, wenn wir es umschalten. Fantastisch. Funktioniert wirklich gut. Cool. Als Nächstes möchte ich das für das Land ändern. Durchsuche die gesamte App. Das wird also hier in unserem Index stehen. Wir werden hier dasselbe tun. Wir können den Dunkelmodus hier buchstäblich einfach kopieren. Füge das da ein. Und dann importiere den Shop, speichere das. Dann werden wir es hier auf diese Farbe ändern. Schnapp dir das da, das. Und dann gehen wir in den Dunkelmodus und stellen die Frage. Und wir werden es tun. Wird es sein, wenn nicht, wird es so sein, dass wir das dann speichern werden. Fantastisch. Also, wenn wir das richtig gemacht haben, großartig. Das ändert sich. Alles klar, das Letzte, was wir ändern müssen , sind diese Schalter. Ich glaube, sie sind die gleichen wie die Farbe hier oben. Das wird in unserer Ländersuche sein. So können wir den gleichen Check in der Ländersuche durchführen. Speichern Sie das. Importiere das. Oh ja. Wo auch immer es FFF Nags sind, ändere die beiden so, dass sie diese Los geht's mit dem Dunkelmodus und hier ist es genauso, der Dunkelmodus Und es gibt definitiv einen prägnanteren Weg, dies zu tun. Das ist einfach irgendwie schnell erledigt, spare dir das. Ordnung, großartig. Also wenn ich jetzt den Dunkelmodus umschalte, funktioniert es super. Ordnung, wir haben den Dunkelmodus gewissermaßen erledigt und sortiert, sodass wir unsere Stile hinter uns lassen können , wie kleine Dinge, kleine Anpassungen, ein paar Nachbesserungen, die wir unterwegs machen müssen, besonders wenn wir unsere Bilder importieren und solche Dinge Aber das ist vorerst ein wirklich guter Anfang. 8. Eine API verwenden: Ordnung, also wenn wir uns hier unsere API-Informationen ansehen, unser Endpunkt, okay. können im Grunde alle Länder über diesen einen Link abrufen . Jetzt werden wir es wahrscheinlich filtern, aber das ist ein guter Anfang. Wir werden uns das schnappen wollen. Wir müssen hier über die Hierarchie nachdenken, oder? Wir haben unseren Input, wir haben unseren Filter und wir haben unser Auto. Im Moment ist alles in derselben Komponente. Und das wurde absichtlich gemacht, um es uns ein bisschen einfacher zu machen. Was wir hier tun werden, ist eigentlich innerhalb derselben Komponente, in der wir unseren Abruf durchführen In einer saubereren Konfiguration können wir anfangen, diese Teile zu trennen, aber als MVP können wir einfach damit beginnen, alles zusammenzufügen und eine Art grundlegende, funktionierende Version zu erhalten Wie wir das machen werden, ist, dass wir tatsächlich einen Nutzungseffekt einschalten werden wir tatsächlich einen Nutzungseffekt einschalten Wir werden einen Abruf von dieser API durchführen und das sollte in Anführungszeichen stehen. Was können wir mit Fetch tun? Wenn wir hier die Dokumentation nachschlagen, können wir mit Fetch im Wesentlichen eine Antwort erhalten Im Grunde senden wir eine Anfrage. Es ist eine Methode, mit der wir eine Ressource von einem beliebigen Endpunkt abrufen von einem beliebigen Endpunkt und diese Daten dann in etwas Nutzbares umwandeln können . Was wir hier tun werden, ist, sie abzurufen, und dann werden wir einen Punkt aneinanderreihen Also werden wir holen sagen. Dann holen wir uns die Antwort, weil wir sichergehen wollen, dass wir nicht immer wissen, ob unsere Antwort im Json-Format ist oder ob sie lesbar ist Wir werden es in Json ändern. Wir werden Antwort nehmen , um diese Antwort anzunehmen und daraus Jon machen . In Ordnung, jetzt haben wir also eine Jason-Antwort. Fantastisch. Letzte Sache, die wir tun wollen, und wir sollten tatsächlich etwas erstellen, in dem wir das speichern können. Wir werden ein Datenobjekt oder eine Datenvariable erstellen und wir werden die Daten festlegen. Wenn das erledigt ist, werden wir state verwenden. Daten werden einfach ein leeres Objekt sein. Jetzt müssen wir den Status importieren, damit es funktioniert. Ja, das haben wir gemacht. Ja, dann machen sie noch eins, ziehen sich an, nehmen Daten und dann werden wir Daten zu Daten machen. Wir werden es speichern Wir sollten startklar sein. Eine Sache, ich jetzt tun möchte, ist zu sehen , ob das tatsächlich funktioniert. Ich möchte trösten und sehen, ob wir unsere Ergebnisse erzielen. Die Konsole hier. Fantastisch. Sie werden sehen, dass wir hier 250 Ergebnisse haben, was der Anzahl der Länder entspricht. Und ich möchte nur, damit wir keine Infiloop-Datei erstellen. Lassen mich die Seite aktualisieren, auf der eine Füllung erstellt wird Ordnung, und wir werden hier einfach ein leeres Array übergeben, um die Endlosschleife zu beenden. In Ordnung, und wir werden hier einfach ein leeres Array übergeben, um die Endlosschleife zu beenden. Also wenn wir einfach aktualisieren. Fantastisch. Also haben wir unsere Daten perfekt gemacht. Wenn wir uns hier also einzelne Daten ansehen, wenn wir uns ein einzelnes Land ansehen, beschreibe ich das erste, sodass wir sehen werden, dass wir hier eine Menge Informationen haben. Also gut, das sind Türken und Kakos. Sie werden sehen, dass es eine Menge Informationen gibt. Jetzt wollen wir die Daten nicht zu oft abrufen, weil das Hin- und Hersuchen sehr teuer sein wird Hin- und Hersuchen sehr teuer Was wir also tun können, wie die API hier sagt, wir können einfach die Felder abrufen, die wir benötigen Wir können also alle Fragezeichenfelder erstellen und dann dem Feld entsprechen, das wir benötigen, Wir wissen also, dass wir wahrscheinlich die Flagge brauchen, wir brauchen die Bevölkerung, wir brauchen die Region, das Capitol Und wir brauchen den Namen, der dem Format dieser Datenstruktur hier folgt der dem Format dieser Datenstruktur hier Wir können hier tatsächlich unsere Abfrage ändern, unseren Abruf in Zeile 25. Also machen wir alles und dann machen wir Felder gleich, also stellen wir sicher, dass wir das Richtige tun Ja, Felder sind gleich, und dann trennen wir sie einfach durch Ordnung, cool. Also machen wir Felder gleich Namen Wir brauchen Flaggen, wir brauchen Kapital, wir brauchen Bevölkerung und wir brauchen Region. Und das werden wir speichern. Und ich denke, das ist alles, was wir brauchen. Wenn wir also aktualisieren, sollten wir immer noch 250 Ergebnisse erhalten. Holen Sie sich alle Länder, aber wenn Sie die Daten sehen, sind es schon viel weniger. Wir bekommen die Hauptstadt, wir bekommen die Flaggen und das PNG- und SVG-Format. Wir bekommen den Namen, wir bekommen die Bevölkerung und wir bekommen die Region. Fantastisch. Wir erhalten also bereits viel weniger Daten und das wird unsere Abfragen erheblich vereinfachen. Perfekt. Also das nächste, was wir jetzt tun wollen , wenn wir noch einmal hinschauen. Sie werden tatsächlich feststellen, dass die Daten in einer sehr interessanten Form vorliegen. Die Hauptstadt befindet sich tatsächlich innerhalb eines Arrays. Also wollen wir diese Daten im Grunde an unsere Karten weitergeben , oder? Wir wollen, dass das einfach direkt in unseren Karten durchgeht. Wir werden all diese Informationen aufnehmen wollen . Ja, lass es uns so machen. Ja, dann bestehen wir die Flagge. Und das wird Flagge, Ups, Land sein. Flagge. Und dann werden wir die Bevölkerung übergehen, und das wird nur die Landbevölkerung sein Und dann werden wir die Region passieren. Und das wird Länderregion sein, dann wird es Ländername.com sein. Alles klar, also was mache ich hier? Richtig, ich mache all diese Fehler. Also diese Daten, die eigentlich, wir werden in einer Sekunde unsere echten Daten verwenden, werden in jedem Land kartografiert. Also für jedes Land, das wir uns schnappen wollen, und ich werde ihn tatsächlich ändern, den Namen, den wir uns das Land schnappen wollen. Und dann wollen wir auf den Namen eingehen , der uns gegeben wurde. Und wir wollen uns den gebräuchlichen Namen schnappen , weil der gebräuchliche Name der Name ist, den wir verwenden werden. Sie könnten auch den offiziellen Namen verwenden, aber manchmal ist der offizielle Name nicht der Name, nach aber manchmal ist der offizielle Name nicht dem Ihr Benutzer suchen könnte. Ich habe also festgestellt, dass der allgemeine Name, der auf der API basiert , etwas besser geeignet ist. Dann wollen wir uns die Flagge schnappen, oder? Die Flagge ist das eigentliche Bild, der Speicherort des Bildes, das sie auf ein CDN hochgeladen haben Ich werde mich vorerst einfach für das PNG entscheiden. Wir könnten das SVG ändern, wenn wir wollten. ganz bei dir, aber wir werden Flagge zeigen und das wird unsere Flagge sein Wir wollen uns auch die Population schnappen und die Population ist eigentlich nicht verschachtelt Es ist quasi genau da als Zahl. Also können wir einfach Country Dot Population gehen und uns das holen. Wir werden uns die Region schnappen. Das Gleiche wie nur eine Schnur. Also werden wir uns diese Region schnappen. Und dann wird der Schlüssel einfach der Name des Schlüssels sein, der Name des Landes. Country.Name.com , weil jedes Land einen eindeutigen Namen haben sollte Awesome.com. Fantastisch. Was wir jetzt tun werden, ist, dass wir weitermachen und das auf unsere Karte übertragen und sie im Grunde so einrichten , dass sie all diese Daten aufnehmen kann. Also werden wir hier eine Schnittstelle erstellen. Das ist nur, damit wir unsere Requisite definieren können, wir haben den Namen, der eine Zeichenfolge sein wird Wir haben die Region, die auch eine Zeichenfolge sein wird Wir haben die Bevölkerung, die auch eine Kette sein wird . Wir haben die Flagge, die eine Schnur sein wird. Oh, weißt du was, eigentlich haben wir die Hauptstadt vergessen. Wir brauchen auch das Capitol Capitol. Und das ist interessant. Es wird also tatsächlich Country Capitol Bracket Zero sein Country Capitol Bracket Zero Es wird die erste Zeichenfolge in diesem Array sein. Das erste Objekt in diesem Array, das eine Zeichenfolge ist, wird das Capitol sein Das wird auch eine Zeichenfolge sein. Speichern Sie die Bevölkerungsflagge der Region. Ich glaube, ich habe alles. In Ordnung. Und dann gebe ich das hier weiter, also nenne Region, Bevölkerung, Flagge, Hauptstadt. Und ich werde Requisiten weitergeben. Ich gehe zum Typ Requisiten und speichere das. Ordnung, cool. Also haben wir das zum Laufen gebracht. Als Nächstes werde ich das wahrscheinlich einfach austauschen wollen, um Daten zu verwenden, weil ich dadurch viele Fehler bekomme. Daten. Oh, und weißt du was, es ist, oh, es gibt mir einen Fehler, weil es nicht vom Typ Array ist. Also muss es eigentlich ein Array von Objekten sein. Also, um ein Array von Objekten zu sein, hat es mir wahrscheinlich auch Fehler gegeben , weil ich diese gesetzt habe, ich habe im Grunde einen Typ davon initialisiert Ich könnte einfach einen gemeinsamen Typ erstellen, zum Beispiel einen Ländertyp. Ich muss es nicht zwischen den beiden weitergeben. Wenn ich einen anderen Ordner erstelle, erstelle ich Typen, ich gehe zum Dateiindexer. Dann wird jedes Land einen Namen haben, der eine Zeichenfolge ist Der Name wird sein, der Name ist eine gemeinsame Eigenschaft , die die Zeichenfolge sein wird. Und dann werden wir eine Flagge haben, die eine PNG-Eigenschaftszeichenfolge haben wird. Und dann werden wir eine Population haben , die eine Zahl sein wird. Und sie werden eine Region haben , die eine Zeichenfolge sein wird. Und wir werden eine Hauptstadt haben, die ein String-Array sein wird. Ordnung, wenn ich importieren kann, wenn ich die Art von Land exportiere, schauen wir mal, ob das funktioniert und ich importiere es. Zu importieren? Nein, nein, es will immer noch eine Art Basistyp. In Ordnung, also oh, vielleicht funktioniert es tatsächlich kostenlos. Okay, cool. Also werden wir das Objekt einfach hier erstellen und diese initialisieren Unser Name wird eine Zeichenfolge sein. Der Name wird einheitlich sein und eine gemeinsame Eigenschaft haben , die vom Typ Zeichenfolge sein wird. Im Grunde genommen ist das, wonach gesucht wird, ein Anfangswert, bevor die API sie abruft Was wir tun werden, ist es ihm zu geben. Es will wissen, okay Flags PNG hat noch nichts zurückgegeben. Was soll es sein, bis wir eine Antwort erhalten? Also werden wir Flags eingeben und wie wir aus unserer API wissen, können wir uns sogar einfach unsere erste Antwort ansehen. Eigentlich glaube ich nicht, dass ich es habe, aber wir wissen, dass Flags eine PNG-Eigenschaft hat und wir einfach so initialisieren, dass sie werden sie vorerst einfach so initialisieren, dass sie eine leere Zeichenfolge Und dann gehen wir einfach die Linie runter und machen das Gleiche Also werden wir in die Hauptstadt gehen. Kapital wird ein Array sein. Und es wird ein leeres Array sein. Oder ein Array mit einer Zeichenfolge kann vorerst Kapital lesen. Eigentlich könnte es ein Land sein. Lassen Sie mich diesen Typ entfernen. Okay, da haben wir's. Geht besser. Oh, weil ich es falsch buchstabiert habe. Capital, sag das. Und Bevölkerung, Bevölkerungszahl. Oh, ich muss es nur hinzufügen. Also fügen wir die Bevölkerung auf Null hinzu und wir geben Region als leeren String an. Ordnung, großartig. Also ich denke, wir sind all unsere Tippfehler losgeworden. Cool. Wir erhalten also so viele Ergebnisse wir sie nicht einmal alle anzeigen können. Wir brauchen den Flex Wrap oder so etwas , damit wir nicht so viele Ergebnisse bekommen. Ordnung, also können wir unsere Scheindaten hier loswerden , weil wir sie nicht mehr benötigen. Heb dir das auf. Welchen anderen Fehler können wir hier beheben? Die Populationstypnummer kann dem Typ Stream nicht zugewiesen werden. Oh, ist es ein String-Typ? Typ ist hier ein Streifen, also ist es eigentlich eine Spannzahl. Cool. Das ist eine tolle Sache mit Typoskript. Ich meine, es wird diese kleinen Fehler finden und sicherstellen, dass Sie sie nicht wie in Ihrem gesamten Projekt machen , aber in Ordnung, lassen Sie mich weitermachen und diese Box zusammenfassen. Fantastisch, da haben wir's. Wir haben also alle unsere Länder, es sollten 250 Boxen sein. Was ich jetzt tun werde, ist diese Daten in den eigentlichen Karten selbst zu verwenden . Wir hoffen, dass unsere Kartenkomponente auf der Unterseite nur etwas Spielraum lässt, damit sie ein bisschen besser aussieht Wo Echse steht, werden wir den Namen ändern. Schauen wir uns das an. Eigentlich scheint es wirklich klein zu sein. Wir werden die Schriftgröße so einstellen, dass sie etwa einem RAM entspricht. Und wir werden die Schriftstärke auf etwa 700 ändern , weil sie wirklich fett gedruckt erscheint Wir werden sagen, dass wir unsere Namen haben. Dann brauchen wir die Bevölkerung, die Region und das Capitol. In Ordnung. Wir benutzen unseren Körper zwei. Wir gehen, ich werde das Etikett verwenden, also es sind nur die normalen Bowl-Etiketten ich werde dir in Population sagen , dann werde ich das einfach kopieren und einfügen. Der nächste war, glaube ich, die Region. Region und Hauptstadt, einfach Hauptstadt eingeben, das ist großartig. Dann wollen wir endlich auf das Bild zugreifen, also geben wir hier einfach flag , weil das unsere PNG-Quelle sein wird . Fantastisch. Im Grunde genommen mit ein paar einfachen Requisiten, die wir aus unserem Land über die API weitergegeben haben Wir haben sie buchstäblich einfach an unsere Kartenkomponente übergeben und dann haben wir einfach auf sie zugegriffen, genau wie wir Requisiten oder irgendwo anders übergeben würden, und sie in unserer App angezeigt Unsere App ist zu 50% fertig, vielleicht sogar mehr. Wir haben unseren ersten Test mit der API und der dortigen Logik durchgeführt Test mit der API und der dortigen . Es läuft also ziemlich gut. Das nächste, was wir tun wollen, ist, dass wir es tun. Ordnung, wir haben unsere App komplett formatiert und gestaltet, aber als Nächstes wollen wir tatsächlich etwas Logik hinzufügen, Denn im Moment passiert absolut nichts, wenn wir etwas eingeben , was wir in Frankreich Also wollen wir diese Logik hinzufügen, und das werden wir im nächsten Abschnitt tun. 9. Suchlogik hinzufügen: Ordnung, das nächste, was wir jetzt tun müssen, ist diese Logik einzufügen In Ordnung, das nächste, was wir jetzt tun müssen, ist diese Logik einzufügen, um sicherzustellen , dass, wenn jemand ein Land in der Suchleiste hier oben eingibt, tatsächlich eine Antwort zurückgegeben wird . Im Moment tun wir absolut nichts. Bei keinem dieser Ergebnisse findet eine Filterung statt . Lassen Sie uns das jetzt umsetzen. Ordnung, also fangen wir damit an In Ordnung, also fangen wir damit an, dass wir im Wesentlichen alle Länder filtern wollen , die uns als Optionen zur Verfügung stehen, anhand unserer Daten, anhand unseres API-Aufrufs. Ich bin mir sicher, nun ja, eine Möglichkeit, das zu tun, sind API-Anfragen. Aber wir können das wirklich einfach auf der Client-Seite filtern, Beispiel nach den Daten, die wir bereits zurückerhalten haben, da es sich um einen sehr, ziemlich kostengünstigen Anruf handelt , verglichen mit, Sie wissen schon, einer größeren Anwendung, die Tonnen und Tonnen von Megabyte an Daten abruft Tonnen und Tonnen von Megabyte Was ich hier tun möchte, ist, dass ich zur Ländersuche gehen möchte und wir werden das innerhalb dieser Komponente tun Was ich hier tun möchte, ich möchte, ich möchte eine Variable erstellen, die die gefilterten Länder aufruft , und ich möchte diese festlegen. Ich möchte das als Daten initialisieren . Was auch immer Daten sind, es wird das sein, was gefilterte Länder sein werden Das wird es sein, was wir durchgehen werden. Wenn ich Daten so ändere, dass sie nach Ländern gefiltert werden , belassen wir das vorerst, okay? Ordnung, also ja, gefilterte Länder werden wir durchgehen, aber wir müssen es einrichten, also müssen wir es initialisieren Wenn wir hier tippen, wollen wir, dass etwas passiert, wir wollen, dass eine Art F stattfindet Wir können darauf zugreifen, indem wir die On-Change-Requisite im Textfeld Wir wollen im Grunde so etwas wie Länder filtern. Länder filtern, Länder filtern. Ich weiß, dass ich die Veranstaltung bestehen möchte , weil ich diesen Wert als Ziel angeben muss. Lassen Sie uns diese Filterländer erstellen, Synovus-Länder mit konstantem Filter Und wenn wir dieses Ereignis vergessen, werden wir sagen , dass wir gefilterte Länder auf B setzen wollen. Wir wollen Länder filtern und wir wollen sie filtern Wir wollen jedes Land nach Ländername und Land filtern nach Ländername und . Und wir werden es in Kleinbuchstaben tun , um sicherzustellen, dass wir tatsächlich den gleichen Wert erhalten. Wir werden beide transformieren. Wir wollen sehen, ob der gebräuchliche Name des Landes in Kleinbuchstaben, wenn er etwas vom Zielwert bis Kleinschreibung beinhaltet, es sich um dieselbe Schreibweise handelt. Da wird es keine Diskrepanz geben und das sollte funktionieren. Wir bekommen diesen Fehler, weil wir ihm den Typ „Kühle und gefilterte Länder“ geben müssen Typ „Kühle und gefilterte Länder In Ordnung, also ich rufe die Funktion tatsächlich auf, okay. In Ordnung, jetzt haben wir es eingestellt. Es filtert also nach gefilterten Ländern, um zu sehen, ob das der Wert ist Ordnung, und was wir jetzt tun wollen, wir wollen, wir wollen das zurückgeben, wir wollen das zeigen, wir wollen gefilterte Länder statt Daten zeigen und das sagen. Und ich denke, ja, wir bekommen hier einen Fehler. Wir bekommen im Grunde nur die Standardeinstellung , weil wir auf diese Daten warten müssen. Was wir tun wollen, setzt hier eigentlich gefilterte Länder ein. Wir wollen also Daten festlegen, dann sollten wir gefilterte Länder festlegen wollen. Also könnten wir vielleicht einfach in der Lage sein, Daten loszuwerden. Richtig. Okay. Und dann macht es das automatisch. Ordnung, perfekt. Also haben wir Länder gefiltert. Also, wenn ich jetzt Frankreich eintippe, großartig. Also sucht es nach Frankreich. Also lasst uns einfach überprüfen, was wir hier gemacht haben. Deshalb haben wir diese Funktion namens Länder filtern erstellt. Sie legt die gefilterten Länder so fest, wie sie sind, also initialisiert sie Daten und dann wollen wir jedes Land filtern und nach dem Land, dem Namen des Landes und dem allgemeinen Namen suchen Namen des Landes und dem allgemeinen Wir wandeln diesen gebräuchlichen Namen in Kleinbuchstaben um und prüfen, ob dieser Zeichenkettenwert das enthält was wir hier in unsere Suchleiste eingeben Wenn ich also eintippe, weißt du was, ich denke, wir brauchen es auch müssen ein paar Fehler korrigieren. Aber wenn ich aktualisiere, funktioniert es cool. Sie werden also feststellen, dass es bereits einige Fehler gibt , die Sie beheben müssen. Aber das ursprüngliche Konzept funktioniert, also bewegen wir uns in die richtige Richtung. Ordnung, ein Fehler, den wir gerade bemerkt haben, ist, dass, wenn nichts drin ist, es nicht zurückgesetzt wird. Also lasst uns sehen, ob wir einen FL machen können , um es auf den richtigen Wert einzustellen. Wir könnten also sagen, wenn der Zielwert gleich dem ist, wenn es sich bei „gleich“ nur um eine leere Zeichenfolge handelt, wollen wir gefilterte Länder als Daten-Hops festlegen, für andere Daten wollen wir, andere Daten wollen wir dass gefilterte Länder das sind, was wir gemacht In Ordnung, tippe das ein und dann , ja. Okay, cool. Also wenn ich jetzt die Leertaste zurücksetze, funktioniert es. Fantastisch. Das ist ein Fehler, den wir behoben haben. Als Nächstes möchten wir nach Ländern filtern, aber im Moment können wir nicht nach Regionen filtern. Deshalb möchten wir die Möglichkeit hinzufügen auch nach Regionen zu filtern. Wir können also tatsächlich damit beginnen, diese Art von integrierter Handle-Änderung zu nutzen , die in unserem Formularelement enthalten war. Wir können den Wert einfach auf Region ändern und wir ändern das in Region, also nutzen wir quasi die ursprünglich eingestellte Region. Ordnung, cool. Ja, wir können grundsätzlich nutzen dieses Handle-Change-Event grundsätzlich nutzen , um unsere Region festzulegen. Wenn wir jetzt eine andere Region wählen, sollte sie einfach automatisch festgelegt werden. Das Problem hier ist, dass wir jetzt sowohl nach Regionen als auch nach Ländern filtern müssen . Also müssen wir darüber nachdenken, wie wir das auf logische Weise machen werden. Alles klar? Ich denke, was ich hier machen möchte ist eine Kombination von Dingen. Ich möchte einen weiteren Handler erstellen. Also werde ich Handle-Typing erstellen und es wird ein Ereignis dauern. Ich werde eine weitere Variable erstellen , einen konstanten Suchwert. Das wird sein, was auch immer sie in diese Eingabe eingeben. Ich werde eine Variable erstellen, um das zu speichern. Ich gehe in den Status und beginne mit einer leeren Zeichenfolge. Geben Sie ein , dass der Suchwert auf den Zielwert gesetzt wird Suchwert auf den Zielwert gesetzt wird Und dann nenne ich das, sie tippen, wenn jemand die App eingibt Also wird es das tun. Fantastisch. Und wir werden es einfach weiterbringen. Paratypen. Fantastisch. Geil. Jetzt haben wir diesen Suchwert gespeichert sodass Sie an mehr als einem Ort darauf zugreifen können Dieser Filter könnte sich am Ende verändern. Das nächste, was ich tun möchte, ist in einem Use-Effector-Use-Memo Ich möchte sowohl nach der Region suchen, ich möchte nach der Region suchen und vielleicht auch nach dem Filter suchen Lassen Sie mich also mit einer Nutzungsnotiz beginnen. Und was ich tun werde, ist, ein leeres Array namens Länder zu erstellen Und ich werde dann überprüfen, ob Region nicht gleich Zeichenfolge ist, oder? Wir wissen also, dass die Region als leeres Strangventil beginnt . Wenn es keine Zeichenfolge ist, wollen wir etwas tun, oder? Wenn Region nicht gleich Zeichenfolge ist, möchten wir Länder als Daten festlegen. Oder sind es Filterdaten? Daten. Dann nach Land filtern. Wenn Land, Region gleich Region ist, cool Ja, wir wollen das überprüfen, wir wollen diese Reihe von Ländern grundsätzlich so einstellen , dass sie alle Daten sind, die wir haben Ja, Länder werden es sein. nehmen die Daten, all die Daten, die wir von der APA erhalten, filtern sie nach Ländern. Wenn dieses Land eine Region hat , die der Region entspricht, auf die wir sie eingestellt haben, wird sie in die Variable dieses Landes aufgenommen. Cool. Dann wollen wir die gefilterten Daten festlegen, aber wir wollen auch berücksichtigen was wir für die gefilterten Daten festgelegt haben, zum Beispiel, wie der Text, das Tippbit da rein kommt. Lassen Sie mich eine Sekunde darüber nachdenken. Ordnung, wir wollen also im Grunde eine ähnliche Logik anwenden. Also, wenn Region das tut, dann wollen wir nach dem Suchwert suchen. Der Suchwert entspricht nicht einer leeren Zeichenfolge, dann wollen wir diese Prüfung durchführen, wir wollen die gefilterten Länder so einstellen , dass sie im Grunde so sind, oder? Wir wollen das machen, aber hier unten, also nehmen wir Länder und sparen uns das. Dann wird es statt des Zielpunkts der Suchwert sein. Das werde ich mir sparen. Ich bin mir nicht sicher, ob das funktioniert, weil wir im Grunde genommen einfach den Zielpunktwert genommen und ihn als Suchwert gespeichert haben. Okay, cool. Also haben wir zwei, wenn wir wahrscheinlich brauchen , dass der Suchwert eines anderen gesetzt ist, Region ist nicht Null, oder? Wir wollen, dass die Länder danach filtern. Wenn der Suchwert nicht Null ist, wollen wir dann nach den Ländern filtern. Aber wenn der Suchwert Null ist, wollen wir nur die gefilterten Länder als Länder festlegen , richtig, ohne zusätzliche Filterung. Die Region ist gleichwertig. Nichts wie wenn es keine Region gibt, dann wollen wir hier eine ähnliche Prüfung durchführen, oder? Wir wollen das im Grunde noch einmal machen , es dann aber auf Daten setzen. Ich denke, ja, setzen wir es auf Daten, aber stattdessen wollen wir die gefilterten Länder festlegen und wir werden es mit Daten machen, ich glaube, das ist das datengefilterte Land. Wir machen es auf Archiven. Wenn der Suchwert nicht Null ist, nehmen wir die gefilterten Länder und filtern sie dann, andernfalls setzen wir die gefilterten Länder einfach auf Daten, die Region, wenn keine Region festgelegt ist, aber wenn der Suchwert nicht nichts ist, wollen wir trotzdem nach dem Suchland filtern. Das ist etwas, bei dem wir die Funktion des Filters für das Land verlieren könnten die Funktion des Filters für das Land , weil es nicht wirklich hilfreich ist. Wenn es sich bei der Region jedoch um einen leeren Suchwert handelt, möchten wir die Filterländer auf Daten setzen. Das sollte funktionieren. Wir müssen nur unsere Abhängigkeit hinzufügen. Es sollten also Datenregion und Datenregion und Suchwert sein. Speichern Sie das. Ich denke , das sollte funktionieren. Ich denke, das sollte funktionieren. Lass es uns versuchen. Lass uns nach Frankreich gehen. Aber gehen wir und versuchen dann , nach Reichweite zu filtern. Europa, okay? Amerika ist okay. Afrika. Ja. In Ordnung. Also funktioniert es super. Cool. Cool, cool, genial. Ordnung. Cool. Also das funktioniert super. Also das Nächste, ja. Also das nächste, was wir tun wollen, ich glaube, was ich jetzt tun möchte, ist, dass ich es einrichten will. Ich wollte, dass alles funktioniert. Ich möchte im Grunde, dass Sie die Region zurücksetzen können , denn im Moment können Sie sie ohne all das nur einstellen. Du kannst es nicht rückgängig machen, oder? Sie können es nicht zurücksetzen, wenn es auf Alle gesetzt ist, damit es auch die gesamte Region zurückgibt Wenn ich Region gleich Region ist gleich mache, funktioniert alles, nein, es funktioniert nicht Was ich hier machen werde, ist einfach den Wert von all in eine leere Zeichenfolge zu ändern , sodass, wenn ich nach Afrika, Amerika, Asien gehe und dann zu all zurückkehre, es einfach aus einer leeren Zeichenfolge zurückkehrt Wirklich einfach, sauber, repariert, cool. Mal sehen, was es sonst noch gibt. Kann ich hier noch etwas tun? Ich denke, das Einzige, was hier noch zu tun bleibt , ist, es wahrscheinlich ein bisschen aufzuräumen. Es heißt, sie will gefilterte Länder als Abhängigkeit haben, aber ich weiß nicht, ob es funktionieren wird, wenn ich das mache. Lass mich das sagen und es dann versuchen. Oh warte, tut mir leid. Bin ich nicht. Ja, nein, es geht kaputt, wenn ich das mache. Ja, also will ich das nicht tun. Ich werde das einfach weglassen. Ich werde nur die erschöpfenden Abhängigkeiten für diese Zeile deaktivieren die erschöpfenden Abhängigkeiten für diese Zeile Cool. Ich denke, verwenden wir tatsächlich Filterländer? Wenn ich das auskommentiere und es von hier entferne, werden die Apps dann ausgeführt? Oh, das ist ein Bug. Tut es nicht. In Ordnung, also ich glaube nicht, dass wir wirklich, ich glaube nicht, dass wir Filter Country brauchen. Also werde ich es loswerden und ich werde die Kolumne dazu hier loswerden. Es wird einfach durch die Eingabe von Handles ersetzt, die im Wesentlichen diesen Zielwert annimmt und ihm nur eine Variable gibt , die das Problem behebt. Äh, was sonst? Was können wir hier noch tun? Oh, wir können dieses Konsolengesetz abschaffen. Das brauchen wir nicht mehr. Also laut Daten, ja, das könnte die Lösung sein. Okay, das war die Lösung. Also bekam ich diesen Fehler, dass, wenn ich ein paar Buchstaben eintippte und in eine Region ging, wenn ich zu allen zurückkehrte, es nicht sortiert Das liegt also daran, dass ich irrtümlich einen Fehler gemacht habe. Ich hätte Daten in Zeile 60 sagen sollen oder ich hätte gefilterte Länder sagen sollen, denen wir in Zeile 60 filtern , damit es sich tatsächlich um Daten werden also nur Daten verwenden, wir werden keine gefilterten Länder verwenden. Wir werden gefilterte Länder verwenden , aber zu diesem Zeitpunkt nicht. Fantastisch. Ich denke, wir haben hier alles, was wir brauchen. Ich denke, wir sind so ziemlich bereit, cool zu werden. Ich denke, andere Dinge , die Sie mit diesem Projekt tun könnten , sind, es mobilfreundlich zu gestalten. Also, um es, weißt du, in eine Art Drop-down-Ansicht zu verwandeln , die sie hier als Option haben Du weißt schon, irgendeinen Filter nach Regionen und es ist nur ein Land nach dem anderen und mach eine mobile Version Das wäre ein weiteres cooles Projekt. Du könntest den Dunkelmodus nachbessern, weißt du ein besseres Symbol bekommen, das ein bisschen besser zum Design passt. Eine Menge Dinge, die du immer noch tun könntest , wenn du bei diesem Projekt machen wolltest. Es liegt ganz bei Ihnen, ob Sie damit weitermachen wollen. Und dann können Sie hier auch eine Art individuelle Seite für die einzelnen Länder hinzufügen hier auch eine Art individuelle Seite für , die dort wirklich nur ihre Informationen anzeigt. also noch viel zu tun mit diesem Projekt, aber ja, hoffentlich war das hilfreich für dich und du konntest wirklich lernen, wie man eine API mit der Ländersuche benutzt und du kannst in Zukunft mit APIs arbeiten und sie in deine zukünftigen Projekte integrieren. 10. Schlussbemerkung: In diesem Video haben wir viel über die Anfänge von React bis hin zur Entwicklung Ihrer eigenen, voll funktionsfähigen Web-App für die Ländersuche gesprochen React bis hin zur Entwicklung . Zukunft sollten Sie in der Lage sein, jedes API-Projekt in Angriff zu nehmen , das Ihnen in den Weg kommt. Denken Sie daran, etwas nachzuschlagen, wenn Sie sich nicht sicher sind , und den Stack-Overflow nach Bedarf zu durchsuchen Ich würde gerne sehen, wie Sie sich für die Implementierung Ihrer Web-App entschieden haben die Implementierung Ihrer Web-App Hinterlassen Sie also bitte einen Link zu Ihrem Code oder der gehosteten Site auf der Registerkarte Projekte und Ressourcen, damit ich all die harte Arbeit sehen kann , die Sie geleistet haben. Ich lese jeden Kommentar, jede Bewertung und sehe mir alle eingereichten Projekte an. Wenn Sie also Fragen haben, Sie gerne einen Kommentar im Bewertungsbereich unten hinterlassen oder mich direkt kontaktieren. Sie auf meiner Profilseite Weitere Informationen dazu finden Sie auf meiner Profilseite. Wenn du mehr über Programmieren erfahren möchtest, schau dir die anderen Videos an, die ich auf meiner Profilseite habe. Ich habe auch Videos zu HTML und CSS auf meiner YouTube-Kanal-Website verfügbar. Ich werde diese unten und in meinem Profil verlinken , wenn Sie auch daran interessiert sind , diese Sprachen zu lernen . Und das werde ich im nächsten sehen.