So erstellen du eine YouTube-API-Video-Player-App

1. Lektion 01: Erkunden der YouTube-Daten-API: Mein Name ist Chris und ich werde dir zeigen, wie man diese IOS-App erstellt , die Videos von YouTube anzeigt. Nun, so sieht die App aus. Sie können die App so konfigurieren, dass entweder einzelne Videos oder alle Videos aus einer Playlist angezeigt werden. Jetzt werden die Daten über die YouTube-Daten-API abgerufen über die YouTube-Daten-API Wenn Sie also die Playlist ändern , indem Sie Videos hinzufügen oder entfernen, wird dies automatisch in der App widergespiegelt , ohne dass Sie den Code überarbeiten Oh, und du kannst auf die Videos tippen, um sie dir ebenfalls anzusehen oder die Videobeschreibung zu lesen Ordnung, jetzt schauen wir uns an welche Fähigkeiten Sie nach Abschluss dieser App erwerben werden Nach Abschluss dieser App wirst du Erfahrung mit der YouTube-Daten-API Sie werden auch lernen, wie Sie Netzwerkanfragen über die App senden und empfangen. Dabei werden Sie ein wenig über IOS-Parallelität lernen , insbesondere mit A Sync Wait Und Sie werden lernen, wie Sie den Netzwerkverkehr mit Pxy Man, einem kostenlosen Tool von Drittanbietern , debuggen Netzwerkverkehr mit Pxy Man, einem kostenlosen Tool von Drittanbietern , einem kostenlosen Tool von Drittanbietern , Auf diese Weise können Sie alles beheben, was bei Ihren Netzwerkanrufen schief geht Ihren Netzwerkanrufen schief Und wenn wir dann die Daten von der uTube-API zurückbekommen, müssen wir sie in etwas umwandeln, das in unserer App verwendet Dort erfahren Sie also mehr über das JSON-Parsing. Wir müssen unseren API-Schlüssel sicher in unserem X-Code-Projekt speichern , damit er nicht versehentlich durchsickert Du wirst lernen, wie das geht. Und was die App-Seite betrifft, so werden Sie lernen, wie Sie uTube-Videos in Ihrer IOS-App abspielen uTube-Videos in Ihrer IOS-App Wir werden eine Drittanbieter-Bibliothek namens uTube Player Kit verwenden namens uTube Player Kit und diese Bibliothek mithilfe von Swift Package Manager in XCode integrieren mithilfe von Swift Package Manager in XCode Dann werden Sie einige schnelle DUI-Dinge lernen wie die Verwendung von Listen, einem Geometrieleser, einem Synchronisierungsbild, Fortschrittsansicht, Scroll-Ansichten, um nur einige zu nennen, und vieles mehr, nur in Bezug auf die Erstellung von Benutzeroberflächen und die Erfassung von Benutzerinteraktionen Lassen Sie uns einen kurzen Überblick darüber geben, wie das alles funktioniert, falls Sie noch nicht mit APIs arbeiten Wenn Sie die APIs schon einmal verwendet haben, ist dies nur ein kleiner Überblick für Sie. Jetzt ist eine API eine Schnittstelle, mit der Sie Verbindung herstellen können, um Daten zu senden und zu empfangen. Einfacher ausgedrückt können Sie sich eine API als eine Sammlung von URLs vorstellen, können Sie sich eine API als eine Sammlung von URLs vorstellen auf die Ihre App zugreifen kann , um Daten abzurufen oder Daten zu senden. Mittlerweile gibt es viele APIs. Einige sind kostenlos und andere kostenpflichtig. Aber die meisten großen Plattformen wie Facebook, X, Spotify, Google, verfügen alle über APIs , mit denen Sie mit dieser Plattform arbeiten oder Daten von ihr abrufen können. Es gibt einige APIs, die sich nur auf Daten konzentrieren, wie zum Beispiel das Abrufen von Rezepten Aktienkursen oder Wetterdaten, solche Dinge Möglichkeit, APIs in Ihrer App verwenden zu können , ist sehr, sehr leistungsfähig Was passiert eigentlich und wie benutzt du eine API aus deiner App? Nun, von Ihrer IOS-App aus senden Sie eine Netzwerkanfrage an einen API-Endpunkt, bei dem es sich nur um eine URL handelt. In Ihrer Netzwerkanfrage geben Sie an, welche Daten Sie zurückerhalten möchten. Bei einigen APIs müssen Sie sich auch in der Anfrage identifizieren. Dieser Identifikationsteil wird als Authentifizierung bezeichnet. Die API empfängt Ihre Anfrage und authentifiziert Sie und stellt außerdem sicher, dass Ihre Anfrage gültig ist Beachten Sie, dass nicht alle APIs eine Authentifizierung erfordern, die meisten jedoch Wenn Ihre Authentifizierung nun abgeschlossen ist und Ihre Anfrage gültig ist, sammelt die API die Daten und sendet eine Antwort an Ihre App. Die Antwort enthält die von Ihnen angeforderten Daten und liegt normalerweise in einem Format namens JSN Wenn Ihre App die Antwort empfängt, kann sie die im JSN-Format formatierten Daten lesen und sie dann in Daten konvertieren , die auf dem Bildschirm angezeigt werden können, damit der Benutzer sie sehen Dieser Vorgang der Konvertierung der JSN-Daten in nutzbare Daten in Ihrer App wird als JSN-Parsing bezeichnet. In Ordnung. In diesem Prozess wirst du lernen, wie man mit der YouTube-API umgeht. Schauen wir uns nun die YouTube-API an. Hier sind wir die YouTube-Daten-API. Sie können diese Seite unter developers.google.com Slash YouTube besuchen developers.google.com Ich möchte, dass du zu diesem Abschnitt gehst, in dem es heißt YouTube-Daten hinzufügen Und hier siehst du alle Endpunkte, die in dieser API verfügbar sind, an die unsere App eine Anfrage senden Denken Sie daran, dass diese Endpunkte nur URLs sind. Nehmen wir zum Beispiel die Suche. Schauen wir uns zuerst den Überblick an. Darin wird beschrieben, was dieser Endpunkt tut, wie Sie mit ihm interagieren, und es werden verschiedene Methoden und Möglichkeiten aufgeführt, wie Sie diesen Endpunkt verwenden können. Schauen wir uns also die Liste an. Wenn Sie darauf klicken, sehen Sie die Änderung an diesem Abschnitt hier und die häufigsten Anwendungsfälle. Das ist im Wesentlichen das Durchsuchen von YouTube nach etwas. Sie können hier einige Anwendungsfälle nach Schlüsselwörtern suchen, was wahrscheinlich das typische Beispiel ist. Lokalisieren Sie zum Beispiel Live-Events oder Ihre Videos. Wenn du etwas tiefer scrollst, ist das der wichtige Teil hier. Hier erfahren Sie die genaue URL, auf die Sie klicken müssen. Dies ist der Endpunkt, und dies ist der Anfragetyp. Wenn Sie eine Netzwerkanfrage senden, kann es sich um einen von mehreren verschiedenen Typen handeln, und get ist derjenige , der normalerweise verwendet wird , wenn Sie Daten von der API abrufen möchten. Sie müssen nicht nur eine Anfrage an diese URL senden, sondern auch die Parameter Ihrer Anfrage angeben. Denken Sie daran. Wenn du auf YouTube nach etwas suchst, wonach suchst du dann? Du kannst nicht einfach „Suchen“ sagen. Hier beschreiben diese Parameter, was Sie zusammen mit Ihrer Anfrage angeben können , um der API mitzuteilen was Sie abrufen möchten oder wonach Sie in diesem Fall suchen. Schauen wir uns das mal an. Eine Sache, die ich hier erwähnen sollte , ist, dass es im Parameterbereich nicht immer Parameter gibt, aber es kann sein, dass es erforderliche Parameter gibt. Denken Sie daran, dass ich in dieser Übersicht gesagt habe, dass die API Ihre Anfrage überprüft , um festzustellen, ob sie gültig ist. Nun, wenn es sich um einen erforderlichen Parameter handelt, müssen Sie diese Informationen angeben. Optionale können Sie weglassen, aber die erforderlichen müssen Sie als Teil Ihrer Anfrage angeben. Was ist dieser erforderliche Parameter? Dieser Teil wird Teil genannt. Dieser Parameter gibt eine durch Kommas getrennte Liste mit einer oder mehreren Suchressourceneigenschaften , die die API-Antwort enthalten wird. Legen Sie den Parameterwert so fest, dass er ausgeschnitten Es ist also etwas schwierig zu bestimmen, was diese Dinge bedeuten Aber was ich normalerweise sagen werde, ist, es auszuprobieren. Der nächste Schritt besteht darin, diese API zu verfolgen Lassen Sie uns diesen Parameter so einstellen, dass er so ausgeschnitten wird, wie er steht, und dann schauen wir uns an, was zurückgegeben wird Und wenn es nicht das ist, wonach wir suchen, können wir uns wahrscheinlich ansehen, was wir sonst noch für diesen Parameter angeben können Was ich nun suche ist, wenn wir nach etwas Bestimmtem suchen wollen, wie einem Schlüsselwort, wo würden wir das tun oder was würden wir tun? Das ist eine Suche nach Standort. Dies ist eine Suche nach Ereignis. Dies ist die Suche nach Kanaltypen. einen bestimmten Kanal können Sie nach wie vielen Ergebnissen suchen . Das ist der eine. Der Parameter Qe gibt den Suchbegriff an, nach dem gesucht werden soll. Wenn Sie nach Videos suchen möchten, die sich beispielsweise mit Gartenarbeit befassen, geben Sie das Schlüsselwort Gartenarbeit in diesen Parameter ein. Ich werde Ihnen etwas später zeigen, wie Sie diese Daten diesen Parametern zuordnen, aber wir werden nicht so tief eintauchen. Ich wollte dir nur einen Überblick über die YouTube-API und alle verfügbaren Endpunkte Und auch, wie diese Endpunkte funktionieren. Sie haben von der URL erfahren Dies ist die URL, an die Sie die Anfrage senden werden Dies ist Ihr Anfragetyp, und es gibt erforderliche Parameter die Sie angeben müssen, und es gibt optionale Parameter, Ihrer Anfrage mehr Kontext geben würden. Nun, der Endpunkt, den wir in dieser Videoserie verwenden werden , ähm, denken Sie daran , diese App, sie kann jedes YouTube-Video anzeigen und es in der App abspielen. Für meinen Anwendungsfall möchte ich also eine Liste von Videos aus einer bestimmten Playlist anzeigen aus einer bestimmten Playlist , weil ich einen YouTube-Kanal habe und ich einige Playlisten habe für die ich die Videos anzeigen möchte. Der Endpunkt, den ich hier verwenden werde , sind Playlisten, und ich werde tatsächlich verwenden, ich glaube, es war, ich kann mich nicht erinnern, ob es sich zu diesem Zeitpunkt um glaube, es war, ich kann mich nicht Playlisten oder Videos handelte. Okay. Schauen wir uns also diesen Endpunkt an. Also hier ist der Endpunkt der Playlist, get. Und wenn wir uns den Anwendungsfall ansehen, schauen wir mal. Es ruft alle Playlisten oder ja, alle Playlisten für einen Kanal ab. Das ist nicht das, was ich will Das ist es, mal sehen. Die Anfrage, die ich verwende, ruft eine bestimmte Playlist ab, und ich glaube, es war dieser Endpunkt, denn dort gibt es, mal sehen, die ID gibt an, dass wir abgerufen werden Ja. Ja, das habe ich benutzt. Anstatt also alle Playlisten vom Kanal abzurufen, wollte ich eine bestimmte Also musste ich hier diesen Parameter angeben, ID genannt wurde , und das ist die ID der spezifischen Playlist, die ich haben möchte Und dann habe ich in dieser Playlist auch die Videos bekommen. Nachdem Sie diese Videoserie abgeschlossen haben und mitgemacht haben und gelernt haben, wie Sie diese YouTube-Daten-API verwenden, die Funktionsweise der App gerne ändern. Sie können die Suche in Ihrer App implementieren, wenn Sie möchten. Fügen Sie einfach ein Textfeld Wenn der Benutzer etwas eingibt, rufen Sie diesen Endpunkt auf. Geben Sie das Schlüsselwort ein, nach dem der Benutzer sucht und geben Sie eine Liste mit Videoergebnissen zurück, und der Benutzer kann es direkt in der App abspielen. Was ich Ihnen in der Videoserie zeigen werde ist, diesen Endpunkt zu verwenden eine bestimmte Liste von Videos anzuzeigen. Oder Sie können Ihre eigene Playlist oder vielleicht bestimmte Videos kuratieren, die Sie zeigen möchten, und Sie können einen anderen Endpunkt verwenden Sie können die App also gerne anpassen. Aber ich würde empfehlen, vor allem, wenn Sie neu Arbeit mit APIs und Netzwerken sind, in der Arbeit mit APIs und Netzwerken sind, dieser Videoserie zu folgen, bis zum Ende zu warten, sich bequem zu machen, nachdem Sie das Ergebnis erzielt haben, und es dann anzupassen. Schauen wir uns nun die Authentifizierung an, denn diese YouTube-Daten-API muss identifizieren, wer Sie sind, bevor sie ihre Daten preisgibt. Bevor ich Ihnen nun den Teil der YouTube-Authentifizierung zeige, möchte ich hier auf diese Zeile hinweisen. Diese Endpunkte haben alle Auswirkungen auf das Kontingent und sagen dir, wie viel es kostet, eine Anfrage zu senden und eine Antwort von diesem Endpunkt zu erhalten, und das hat alles mit der Authentifizierung zu tun . Lassen Sie uns nun zu diesem Thema übergehen. Jetzt klicken wir auf Guides. Normalerweise steht bei der API-Dokumentation der gesamte Authentifizierungskram der gesamte Authentifizierungskram ganz am Anfang. Hier erfahren Sie, wie das geht. Gehen wir in die Übersicht. Lassen Sie uns hier die Anmeldeinformationen abrufen. Sie werden feststellen, dass es zwei verschiedene Typen gibt, zwei verschiedene Techniken, mit denen Sie dies tun können. Einer ist OOF und einer ist API-Schlüssel. Jetzt verwenden die meisten APIs die eine oder die andere und manchmal auch beide. Aber wenn ich eine Zahl rauswerfen würde, würde ich sagen, dass Sie bei 90% der APIs API-Schlüssel verwenden können. Lassen Sie mich kurz den Unterschied zwischen den beiden erklären. API-Schlüsselauthentifizierung registrieren Sie sich für ein Konto, und sie geben Ihnen eine lange Reihe von Buchstaben und Zahlen, das ist Ihr Schlüssel. Wenn Sie Netzwerkanfragen an die API stellen, geben Sie diesen Schlüssel zusammen mit Ihrer Anfrage an, sodass sie diese Anfrage Ihrem Konto zuordnen können. Dann können sie dir auch eine Ratenbegrenzung geben. Sie können sehen, wie oft Sie die API verwenden , ob Sie sie missbräuchlich verwenden, wenn ja, meistens Ratenbegrenzung, indem sie Ihnen Quoten geben und solche Dinge Weil du dir vorstellen kannst, wenn sie unbegrenzt und so schnell wie möglich ist und jeder auf seine API zugreift, könnte es sie herunterfahren oder die Serverlast könnte zu hoch sein Dadurch können sie den Zugriff auf ihre API kontrollieren. Wenn sie feststellen, dass Sie missbräuchlich sind, könnten sie Ihren Schlüssel sperren und Sie können keine Anfragen mehr stellen So funktioniert die API-Schlüsselauthentifizierung. Jetzt ist OOP ein bisschen anders. Hier sehen Sie normalerweise ein Feld für den Benutzernamen und das Passwort in Ihrer App, und der Nutzer muss sich in seinem Google-Konto anmelden . Auf diese Weise erhält er ein Token von der API. Dann hängen Sie dieses Token an die Anfragen an, die Sie senden. Es gibt also einen Unterschied , denn jetzt verknüpfen sie diese Anfragen mit dem Google-Konto des Nutzers Sie sind also nicht mehr ratenbegrenzt. Es wird nicht auf Ihre Quote angerechnet, auf ihre Quote. Was Sie tun können, ist auch anders , denn jetzt Google sein Google-Konto identifizieren kann , kann dieser Nutzer beispielsweise ein Video liken oder ein Video abonnieren Sie können diese Arten von Endpunkten aufrufen Oder vielleicht einem Nutzer folgen. Beim API-Schlüsselzugriff verwenden alle Ihre Benutzer denselben API-Schlüssel, für den Sie sich angemeldet haben Ihrem Konto verknüpft ist. Aus diesem Grund kannst du mit API-Schlüsseln nicht wirklich Dinge wie ein Video liken oder einen Kanal abonnieren, weil die API keine Ahnung hat, wer der Benutzer Sie können nur sehen , dass sie diesen API-Schlüssel Ihrem Konto zuordnen können , das Sie OOF ist etwas aufwändiger, also werden wir das in dieser Videoserie nicht verwenden. Wir werden die API-Schlüsselroute durchgehen, und wenn wir lernen, wie das geht, werden wir die überwiegende Mehrheit der APIs abdecken die überwiegende Mehrheit der , auf die Sie stoßen werden. In Ordnung. Lassen Sie uns nun mit dem nächsten Schritt fortfahren, der darin besteht, ein Konto zu erstellen und unseren API-Schlüssel zu erhalten. Sie müssen also nur diesem Link zur Seite mit den Anmeldeinformationen folgen, und ich werde ihn in einem neuen Tab öffnen. Sie werden aufgefordert, sich in Ihrem Google-Konto anzumelden. Da ich bereits angemeldet bin, wurde ich auf die Seite mit den Anmeldeinformationen meines Projekts weitergeleitet. Sie werden wahrscheinlich auch kein Projekt haben. Lassen Sie mich versuchen, wieder auf das Armaturenbrett zu gehen. Möglicherweise müssen Sie einige Onboarding-Fragen oder ähnliches beantworten Aber irgendwann werden Sie auf eine Seite gelangen, die ungefähr so aussieht, ungefähr so weil hier steht, dass ich ein Projekt habe, aber Sie werden kein Projekt haben Möglicherweise werden Sie aufgefordert, ein neues Projekt zu erstellen. Sie können weitermachen und das tun, oder Sie können hier oben auf dieses Drop-down-Menü klicken, und dann können wir ein neues Projekt auswählen und gemeinsam ein Projekt erstellen. Sieht so aus, als ob ich kein neues Projekt erstellen kann. Aber das würdest du tun. Sie würden einen Projektnamen eingeben. Du würdest, ich glaube nicht, dass dieser zu wichtig ist. Sie können also wählen, was auch immer Sie möchten und einfach auf Erstellen klicken. Sobald Sie ein Projekt erstellt haben, fahren Sie fort und navigieren Sie zu diesem Projekt. Also für mich würde es dieses hier geben. Und Sie werden auf Anmeldeinformationen klicken, tut mir leid, API und Dienste, und dann gehen Sie zu den Anmeldeinformationen. Sobald Sie hier sind, können Sie hier den API-Schlüssel erstellen. Sie werden also sagen, Anmeldeinformationen erstellen. API-Schlüssel erstellen. Es wird einen für Sie generieren. Und dann musst du es auf die YouTube-Daten-API beschränken. Das wäre gut. Lass mich den Bildschirm aktualisieren. Hat es das für mich getan? Da ist es. Dies ist der neue API-Schlüssel, der gerade erstellt wurde. Ich werde ihn anklicken. Und dann werde ich das Limit genau hier festlegen. Ich werde es auf eine bestimmte API beschränken. Der Grund, warum das eine gute Idee ist, ist einfach , dass , wenn der API-Schlüssel in die falschen Hände gerät, das, was sie tun können, darauf beschränkt wird, nur die YouTube-Daten-API zu verwenden. Ich denke, es ist eine gute Praxis , nicht einfach allem freien Lauf zu lassen. Dinge einzuschränken und Optionen zu entfernen ist immer gut, vor allem, wenn Sie diese Optionen nicht benötigen , weil dadurch unerwartetes Verhalten eingeschränkt Das Gleiche gilt für das Programmieren, richtig. Und ich würde dem keine Einschränkungen auferlegen. Ich meine, du könntest das tun, aber es wird werden Es könnte deine Tests stören, besonders wenn es dein erstes Mal ist. Also lass uns einfach keins wählen. Beschränken Sie den Schlüssel auf die YouTube-Daten-API. Da ist dein API-Schlüssel genau dort. Du solltest das niemandem zeigen. Ich werde diesen Schlüssel nicht verwenden, also versuche nicht, ihn zu kopieren und diesen Schlüssel zu verwenden. Ich werde das wahrscheinlich danach löschen. Aber mach weiter und speichere es. Und da hast du es. Sie haben einen gültigen Schlüssel, den Sie verwenden können, und Sie werden diesen Schlüssel in Ihrem IOS-Projekt verwenden . Ordnung. Jetzt sind wir bereit. In Ordnung, jetzt sind wir bereit, die YouTube-Daten-API zu verwenden. In der nächsten Lektion werden wir ein Testprojekt erstellen, um eine Verbindung zur API herzustellen und Daten daraus abzurufen. Wir sehen uns dort. 2. Lektion 02: Daten aus der YouTube-API abrufen: In der letzten Lektion haben wir erklärt, wie man eine Verbindung zu APIs herstellt, und wir haben die YouTube-Daten-API überprüft. Wir haben auch unseren API-Schlüssel erstellt. Jetzt können wir mit dem Abrufen von Daten von der API beginnen. Lassen Sie uns gleich eintauchen. In Ordnung, also lassen Sie uns testen, wie wir Daten von dieser API abrufen. Bevor wir uns nun mit X-Code befassen, um das auszuprobieren, gibt es eine noch einfachere Möglichkeit, diese API direkt in der Dokumentation zu testen . Sie haben dieses Ding namens API-Explorer, und Sie können die Endpunkte direkt von diesem Panel aus testen . Jetzt müssen Sie nur noch sicherstellen, dass Sie in Ihrem Google-Konto in der oberen rechten Ecke angemeldet sind . Dies ist dasselbe Konto , mit dem Sie Ihren API-Schlüssel in der ersten Lektion erstellt haben. Denken Sie daran , dass wir uns in unser Google-Konto einloggen und hierher kommen mussten , um ein Projekt zu erstellen und dann einen API-Schlüssel zu erstellen. Solange Sie mit demselben Google-Konto angemeldet sind, passiert Folgendes: Wenn Sie diesen API-Explorer verwenden, wird dieser API-Schlüssel von dort abgerufen und verwendet. Lassen Sie uns also den Endpunkt testen. Jetzt werden wir tatsächlich diesen Endpunkt verwenden, Endpunkt Playlist-Elemente. Weil ich in der vorherigen Lektion über die Verwendung des Endpunkts Playlist gesprochen habe, aber dieser gibt Ihnen eigentlich nur Informationen über die Playlist selbst. Elemente der Playlist, das ist der, den wir verwenden möchten. Wie Sie sehen können, ist dies die URL, an die wir die Anfrage senden müssen, dies ist der Anfragetyp, und dies ist der einzige erforderliche Parameter, und Sie können verschiedene Detailebenen angeben , die Sie abrufen möchten. Der Grund dafür ist , für Ihre Zwecke Sie für Ihre Zwecke möglicherweise nicht alle Informationen benötigen In diesem Fall können Sie vielleicht einen niedrigeren Detaillierungsgrad angeben, Bandbreite sparen würde. Warum sollten Sie mehr Informationen abrufen, als Sie benötigen? Es wird länger dauern, es wird mehr Bandbreite in Anspruch nehmen und so weiter und so fort. Ich habe herausgefunden , dass ich für diese App das Vorschaubild benötige, die Video-ID, um das Video anzuzeigen, natürlich das Vorschaubild, um das Bild anzuzeigen Ich brauche den Titel in der Beschreibung. Und das war es auch schon. Und Snippet ist der Detaillierungsgrad, den ich benötige Es enthält alles, was ich gerade erwähnt habe. Der andere Parameter , den ich angeben muss, ist die Playlist-ID , weil ich alle Videos aus einer bestimmten Playlist abrufen möchte . Als ich diesen Endpunkt zum ersten Mal verwendet habe, habe ich den Fehler gemacht, die Playlist-ID in diesen Parameter einzugeben , aber es wurde nichts zurückgegeben, und mir wurde klar, dass, oh, ich sie in diesen Parameter eingeben sollte. Also werden sie den gleichen Fehler machen. Lassen Sie mich Ihnen nun zeigen, wie Sie die gewünschte ID der Playlist abrufen können. Ich habe hier also eine Playlist, die ich verwenden möchte, und denken Sie daran, dass Sie jede beliebige Playlist verwenden können. Also alles nach diesem Gleichheitszeichen hier und vor jedem Und-Zeichen, das ist die Playlist-ID URL könnte etwas Ähnliches haben, sagen wir, n t entspricht eins, zwei Zwischen dem Gleichheitszeichen und dem Endzeichen. Wenn die Liste gleich ist, ist das deine Playlist-ID. Mach dir keine Sorgen Sie werden sehr schnell herausfinden ob es sich um die Playlist-ID handelt oder nicht, denn wenn Sie von diesem API-Aufruf keine Daten zurückerhalten , wissen Sie, dass das eigentlich nicht die Playlist-ID war. Das ist meine Playlist-ID. Das werde ich kopieren. dann in meinem API-Explorer Lassen Sie mich das dann in meinem API-Explorer im Vollbildmodus anzeigen. Vielleicht mache ich den Text einfach etwas größer, damit er besser zu sehen ist. Ich werde das unter Playlist-ID einfügen. Ich muss hier einen Teil angeben. Denken Sie daran, dass dies Inhaltsdetails, ID, Status oder Snippet sein können ID, Status oder Snippet Snippet ist das, was ich brauche. Ich sitze da. Sie können auch sehen, wie sich die URL ändert , an die Sie eine Netzwerkanfrage senden müssen . Wenn Sie einen Blick darauf werfen, könnte das für Sie interessant sein. Dies ist der Endpunkt, den wir senden, um die API zu erreichen und eine Anfrage an sie zu senden. Dann sind die Daten, die ich hier in den Parametern angegeben habe , alles hier. Schau, P entspricht dem Snippet, Playlist-ID entspricht dieser ID und dann entspricht der Schlüssel deinem API-Schlüssel Jetzt gibt es hier kein Textfeld, in das ich meinen API-Schlüssel eingeben kann. Das bezieht sich also auf Ihren Schlüssel, den Sie hier erstellt haben. Deshalb musst du sicherstellen, dass du mit demselben Konto angemeldet bist und weil es es von dort abrufen wird. Ich werde Google O Auth deaktivieren. Ich werde auf Ausführen klicken. Wenn alles gut geht, sollten Sie eine Antwort von 200 erhalten, was bedeutet, dass es erfolgreich war, und dann erhalten Sie all diese Daten zurück. Nun, das sind die JSO-formatierten Daten, von denen ich dir erzählt habe und die aus der Antwort der YouTube-API stammen Und es liegt an uns, diese Daten umzuwandeln. Denken Sie daran, dass dieser Prozess als JSM-Parsing bezeichnet wird, um diese JSON-Daten in nutzbare Daten in unserer App umzuwandeln Sie werden sicherlich in einigen Lektionen der Serie sehen, wie das Aber vorerst möchte ich mir nur sehr schnell die Daten ansehen, die zurückgegeben werden, und sichergehen , dass ich die Informationen habe, die ich benötige. Hier kann ich sehen, dass ich den Titel der Lektion habe, die Beschreibung der Lektion, die Vorschaubilder, die Bild-URLs, ich habe die Video-ID perfekt da Dann ist das für Lektion zwei und so weiter und so fort. Ich habe alles. Nun, wenn Sie diese Antwort nicht erhalten haben, haben Sie vielleicht einen Fehler oder etwas Ähnliches. Ich würde noch einmal überprüfen, ob der Teil einem richtig geschriebenen Ausschnitt entspricht Ich würde sicherstellen, dass Ihre Playlist-ID korrekt ist. Vielleicht hast du dort das falsche Segment der URL gefunden Dann würde ich auch sicherstellen, dass ich mit dem richtigen Google-Konto angemeldet bin dem richtigen Google-Konto angemeldet , das Zugriff auf den APIKy hat Und dann versuche es noch einmal, schlag süß zu. Und wenn das aus irgendeinem Grund nicht funktioniert, können Sie es nicht zum Laufen bringen. Keine Sorge, denk dran, das war nur ein schneller Test. Der eigentliche Test besteht darin, dies innerhalb von X-Code, in einer IS-App, tun zu können . Das werden wir als Nächstes tun. Machen Sie sich keine Sorgen, wenn Sie diesen Teil nicht bekommen haben, war ein schneller Test der API. Wir werden jetzt unser X-Code-Projekt starten. Wir werden ein Testprojekt starten. Das wird nicht unsere echte App sein. Wenn ich neue Dinge ausprobiere, öffne ich gerne einfach ein neues Xcode-Projekt, probiere etwas aus und stelle sicher, es funktioniert, bevor ich es in mein Hauptprojekt integriere Das werden wir hier tun. Wir werden ein Test-X-Code-Projekt erstellen und das ausprobieren. Lass es uns machen. Lassen Sie uns unser X-Code-Projekt erstellen. Ich werde das tun und ein neues X-Code-Projekt starten. Wählen wir unter IOS die App aus. Lass uns als Nächstes gehen. Ich nenne es Test YT API. Dies ist nicht unsere offizielle App. Es wird nur ein Test sein. Die Oberfläche ist Swift GI, Sprache ist Swift, der Speicher ist keiner. All das ist ungeprüft. Lass uns auf Weiter klicken Ich muss kein Git-Repository erstellen. Ich werde das einfach auf meinem Desktop erstellen , weil es ein Wegwerfprojekt sein wird Okay. Lass uns das jetzt machen. Machen Sie es etwas größer, damit wir es sehen können, und dann werden wir den API-Aufruf sofort senden, wenn er von hier aus gestartet wird . Ich möchte hier eine Aufgabe hinzufügen , Aufgabe erledigen und ein Paar geschweifte Klammern öffnen Hier werden wir den Netzwerkanruf tätigen und die Ergebnisse ausdrucken Denk dran, ich werde die Dinge nicht auf die beste Art machen. Ich möchte nur sicherstellen, dass ich über X-Code eine Verbindung zur API herstellen kann . Sie erhalten die richtigen Daten zurück, oder? Wir testen an der API. Und hier würden wir in unserem echten Projekt nicht unbedingt auch Dinge tun. Auch dies ist ein Test. Ich werde dir etwas später erklären, was die Aufgabe ist. Ich werde alle Punkte für dich verbinden. Aber vorerst werden wir das in diesem kleinen Aufgabenblock erledigen. Also möchte ich, dass du das abtippst. Lassen Sie mich dann einige Codeanweisungen eingeben und Sie nicht durch Codeanweisungen, sondern durch einige Kommentare führen und Sie durch die Schritte führen, die wir ergreifen werden. Also werden wir zuerst die Endpunkt-URL mit Parametern definieren. Das ist die URL, an die wir die Anfrage senden werden. Wir werden eine URL-Instanz erstellen. Wir werden eine URL-Anfrage erstellen. Instanz. Das ist das , was wir tatsächlich senden werden, und dann werden wir die Anfrage mit R-Sitzung senden. Das ist ein Mechanismus, mit dem wir uns vernetzen können. Dann werden wir die Antwort ausdrucken. Wir werden uns auch mit Fehlern befassen müssen. Okay. Lass uns das jetzt ausprobieren. Definieren wir zunächst den Endpunkt UL mit Parametern. Wenn Sie hier einen Blick auf den API-Explorer werfen, werden Sie feststellen, dass dieser hier alles enthält, was wir benötigen, außer dass wir unseren API-Schlüssel genau dort einfügen müssen. Das ist im Grunde die URL, die wir erreichen müssen. Es ist bereits für uns geschrieben. Das werde ich nehmen. Nun, auf eine Sache möchte ich hinweisen , von der ich nicht genau weiß, warum, wenn Sie sich diese Endpunktdomain ansehen, da steht Tube dot google api.com Aber wenn du dir das ansiehst, ist es Google api.com Slash YouTube Ich habe beide benutzt. Sie arbeiten beide. Dies wäre wahrscheinlich etwas sicherer zu verwenden, da dies in der offiziellen Dokumentation steht, wohingegen dies in diesem APA-Explorer ist, vielleicht ist es einfach nicht aktualisiert. Ah, lass uns das einfach benutzen und dann können wir es zusammen bauen. Wir können diese URL erstellen, damit Sie auch wissen, dass Sie eine Vorstellung davon haben, wie sie aufgebaut wird. Ich werde eine Konstante deklarieren. Ich nenne es URL-Zeichenfolge. Denken Sie daran, dass wir das in unserem echten Projekt nicht so machen werden. Ich werde hier einfach die gesamte Zeichenfolge ausschreiben, einschließlich des API-Schlüssels und aller Parameter. Um Parameter einzubeziehen, setzen Sie ein Fragezeichen und ab diesem Zeitpunkt sind es Parameter. Und dann lautet das Format zur Angabe von Parametern Parametername gleich Parameterwert Welches ist das erste, das wir spezifizieren sollten? Wie wäre es mit einem Teil? Da ein Teil sowieso benötigt wird Wir geben also Teil gleich ein, und denken Sie daran, dass Sie eines oder mehrere davon angeben können Es sagt Ihnen, dass Sie mehr angeben sollen , Sie würden ein Komma dazwischen setzen, aber wir benötigen nur Ich kann ein Snippet einfügen. Um nun einen zweiten Parameter anzugeben, geben Sie das Und-Zeichen ein und dann entspricht derselbe Parametername dem Parameterwertformat Was ist der zweite Parameter , den wir angeben möchten? Das ist die Playlist-ID? Du musst es auch anhand der Hauptstädte verfolgen. P-Wiedergabeliste in Kleinbuchstaben, gefolgt von einer großen I-ID. Ist jetzt gleich, was ist die Playlist-ID? Und wenn Sie den Bildschirm wieder hochziehen hole ich mir von hier aus meine ID Jetzt macht das tatsächlich Sinn. Wenn Sie die URL sehen können, können Sie die Playlist sehen, und dann gibt es ein Fragezeichen, was ab jetzt Parameter bedeutet. Liste ist der Parametername gleich und dann der Parameterwert Dann ist das Ende des Parameterwerts ein Und-Zeichen und dann der zweite Parameter und so weiter und so Deshalb sage ich, nimm alles nach dem Gleichheitszeichen, aber vor dem Und-Zeichen, weil das nur der Konnektor für den nächsten Parameter ist für Das ist meine Playlist-ID. Also lass es uns genau da hinstellen. Ich brauche auch noch einen Parameter. Setzen wir das Und-Zeichen ein, und dieser Schlüssel entspricht meinem Ich sage das immer wieder, weil ich nicht möchte, dass sich das jemand ansieht und sagt: Hey, du solltest nicht einfach deinen API-Schlüssel dort ablegen. Ich weiß. Nochmals, das ist ein Test, also werden wir es jetzt so machen. Wenn wir an dem eigentlichen Projekt arbeiten, werden wir uns den Schlüssel sichern. Gehen wir hier also zurück zu unserem Schlüssel. Ich zeige einfach meinen Schlüssel, und das ist unser Testschlüssel. Wir werden es genau da hinstellen. Das ist die URL, an die wir unsere Anfrage senden werden. Und diese URL enthält alle Anforderungsparameter und die API hat alles, was wir brauchen Lassen Sie uns hier die URL-Instanz erstellen. Lass URL gleich URL sein, und dann werden wir diese hier verwenden , wo du einfach die URL-Zeichenfolge übergeben kannst Denken Sie jedoch daran, dass diese UR-Instanz möglicherweise nicht erfolgreich erstellt werden kann, sodass wir dies überprüfen müssen Wenn Sie mit Swift vertraut sind, wenn Sie schon einige Kurse besucht haben, wissen Sie, was Optionen sind. Wenn Sie diese Option erstellen, wird eine optionale URL-Instanz zurückgegeben, was bedeutet, dass sie möglicherweise nicht erfolgreich Das müssen wir zuerst überprüfen. Eine Möglichkeit , das zu tun, besteht darin, zu sagen, ob URL gleich URL ist, richtig Was das macht, ist es zu überprüfen. Wenn das nicht NL ist, was bedeutet, dass es erfolgreich erstellt werden konnte , dann weisen Sie es dieser Konstante zu, und dann verschieben wir das Zeug da rein und dann können wir es verwenden. Aber wenn es NIL ist, wird es einfach überspringen und hier runter kommen und es wird nichts von diesem Code ausgeführt. Wenn es NL ist, bedeutet das, dass es die URL-Zeichenfolge nicht erfolgreich erstellen konnte , und wir können sowieso nicht weitermachen Lassen Sie uns nun die Anfrage erstellen. Lass die Anfrage der URL-Anfrage entsprechen, und wir werden diese URL-Instanz übergeben , dass wir diese erstellt haben Das haben wir erstellt. Dadurch wird geprüft, ob es nicht NL ist, und wenn es nicht NL ist, wenn es nicht leer ist, wird es diesem zugewiesen, und dann geben wir das an die Erstellung unserer Anfrage Jetzt, da wir unsere Anfrage in dieser Konstante haben, werden wir die Anfrage mit einer URL-Sitzung senden Diese URL-Sitzung verwenden wir für Netzwerke. URL-Sitzung geteilt. Es gibt ein gemeinsam genutztes Sitzungsobjekt, das wir verwenden können. Wir müssen kein eigenes erstellen. Und es gibt eine Methode namens Data Four. Dadurch werden die Daten für eine bestimmte Anfrage abgerufen. Schau, alles verbindet sich. Wir können diese Anfrage jetzt an diese Methode übergeben . Aber schau mal. Es gibt zwei Schlüsselwörter. Es gibt eine Synchronisation und es gibt Throws. Das sind zwei verschiedene Dinge, mit denen wir uns auseinandersetzen müssen und die wir beobachten müssen Lassen Sie uns zuerst über T-Würfe sprechen. Dieses Schlüsselwort weist darauf hin , dass das Ausführen dieser Methode oder der Ausführung dieser Aufgabe möglicherweise zu einem Fehler Es wird ein Fehler ausgelöst. Daher kommt das Wort. Und Sie müssen mit dem Fehler umgehen , weil Sie darauf reagieren möchten. Wenn etwas Schlimmes passiert, sollten Sie zur Kenntnis nehmen, was passiert ist, und wenn es sich dann um etwas handelt, von dem Sie sich erholen können , dann erholen Sie sich davon. Wenn es sich um etwas handelt, von dem Sie sich nicht erholen können, zeigen Sie dem Benutzer vielleicht eine Nachricht an und sagen: Entschuldigung, etwas Schlimmes ist passiert oder so etwas ist passiert, wir können nicht weitermachen. Bitte versuchen Sie es noch einmal. Oder Sie können sich dafür entscheiden, den Fehler nicht zu behandeln und ihn einfach zu ignorieren. Das ist für einige Fehler durchaus vernünftig. Das ist es, was Würfe bedeuten. Und ich zeige dir gleich, wie wir damit umgehen können. Nun, Async ist ein weiteres Schlüsselwort, das darauf hinweist, dass diese Methode asynchron ist Jetzt müssen wir uns einen Moment Zeit nehmen. Wenn Sie noch nie mit Netzwerken gearbeitet haben, lassen Sie mich es Ihnen anhand dieses Szenarios kurz beschreiben . Asynchron ist so etwas. Nehmen wir an, Sie warten zu Hause auf ein Paket. Es ist ein sehr, sehr wichtiges Paket. Sie werden es nicht an deiner Tür lassen. Nehmen wir an, es ist ein neues Mac-Buch. Sie haben ein neues Mac-Book gekauft und warten darauf, dass es kommt. Also wartest du zu Hause, es wird heute irgendwann sein, aber du weißt nicht genau wann es geliefert wird Aber du musst wirklich etwas Milch kaufen gehen . Richtig? Oder vielleicht zum Mittagessen? Nehmen wir an, du musst zum Mittagessen gehen und hast kein Essen zu Hause, du bist am Verhungern. Also, was machst du? Du kannst gehen und selbst Mittagessen kaufen. Es besteht jedoch die Möglichkeit, dass das Mac-Buch geliefert wird und Sie nicht zu Hause sind. Du wirst es verpassen, und das wäre schlimm. Nun, was machst du? Nun, es stellt sich heraus, Sie jemanden zu Hause haben, könnten Mutter sein, könnten Vater sein, könnten ein Bruder sein, könnten eine Schwester sein, könnten Ihr Ehepartner sein. Du hast sie gefragt: Hey, kannst du das Mittagessen abholen gehen? Weil ich zu Hause bleiben und auf dieses Buch warten muss. Du schickst diese Person, um das Mittagessen mitzubringen , und diese Person geht und holt Mittagessen, während du zu Hause bleiben und auf das Paket warten kannst. Das ist genau das, was hier passiert. Asynchron bedeutet, dass du jemanden schickst, der das Mittagessen abholt Sie senden eine Hintergrundaufgabe oder einen Hintergrundhelfer in Computersprache, sie nennen das einen Hintergrundthread? Sie senden das, um diesen Netzwerkvorgang auszuführen. Geh und hol dir diese Daten von der YouTube-API. Während ich hier bleibe , um auf Benutzerinteraktionen zu reagieren und einfach das Licht am Laufen zu halten, weißt du, alles betriebsbereit zu halten Und wenn du die Antwort von der uTube API erhältst, kommen sie zu mir zurück und teilen mir mit, was diese Daten sind, und ich werde mich darum kümmern Nun, warum ist das wichtig? Zum Beispiel, dass du zu Hause bleiben und auf das Macbook warten musstest. Wenn wir den Haupt-Thread dazu bringen , die Daten abzurufen und die Anfrage abzusenden und darauf zu warten, dass die Daten zurückkommen, dann wird niemand da sein, der die Lichter am Laufen hält und die Dinge betriebsbereit Wenn Ihre App nicht in der Lage sein wird, auf Benutzerinteraktionen zu reagieren oder etwas Ähnliches zu tun Aus diesem Grund möchten Sie bei dieser Art von Netzwerkaufgaben oder einigen Datenaufgaben oder einigen Datenaufgaben einen Hintergrund-Thread senden, genau wie Sie einen Helfer geschickt haben, der das Mittagessen abholt. Das ist es, was asynchron bedeutet. Okay. Nun, da Sie wissen, was diese beiden Schlüsselwörter bedeuten, wollen wir uns zunächst mit dem einen da es eine spezielle Syntax gibt, die Sie schreiben müssen, um den Fehler oder potenziellen Fehler, der auftreten kann, zu erfassen den Fehler oder potenziellen Fehler, der auftreten kann, Lassen Sie uns das abtippen, und dann werden wir uns nacheinander mit diesen beiden Schlüsselwörtern befassen nacheinander mit diesen beiden Schlüsselwörtern Daten vier, und wir werden die Anfrage weiterleiten. Okay. Wenn also etwas möglicherweise einen Fehler wie diesen auslöst, müssen wir es in einen Do-Catch-Block einfügen. Also machst du etwas, oder? Sie tun genau hier das, was den Fehler zwischen diesen Klammern auslösen kann . Das ist es also, was Sie tun werden, und dann werden Sie alle potenziellen Fehler direkt darunter erkennen. Und dann können Sie jeden Fehler ausdrucken, der auftreten könnte. Es wird es einfach da reinlegen. Nun, noch eine Sache, die Sie tun müssen, nur um anzuzeigen , dass etwas, von dem Sie wissen, dass etwas einen Fehler auslösen kann, ist, dass Sie ein tri-Schlüsselwort davor setzen , oder? Also wirst du das tun. Sie werden das versuchen, und dann werden Sie jeden möglichen Fehler finden und ihn ausdrucken. Das behandelt also das Throws-Schlüsselwort für die Ausführung dieser Methode Lassen Sie uns nun über das asynchrone Schlüsselwort sprechen , über das wir gesprochen haben Wir möchten diese Aufgabe im Hintergrund starten, um die Daten abzurufen Und komm zurück, wenn es soweit ist. Was wir tun müssen, ist das Schlüsselwort Gewicht einzugeben. Das bedeutet im Grunde, dass es, bevor wir irgendeinen Code unter dieser Codezeile ausführen , darauf wartet, dass er zurückkehrt. Warum wollen wir das tun? Weil, sagen wir hier unten, wir werden die Antwort ausdrucken. Eigentlich werden wir hier den Handle-Fehler genau hier platzieren und die Antwort ausdrucken, wir werden sie hier platzieren . Richtig, wir würden die Antwort nicht ausdrucken wollen , bevor sie mit den Daten zurückkommt, oder? Denn dann gäbe es nichts zum Ausdrucken. Sie das Schlüsselwort await vor eine asynchrone Methode stellen , wartet sie darauf, dass dies im Hintergrund passiert Machen Sie das Ding fertig, kommen Sie zurück und dann drucken wir die Antwort aus . Was werden wir ausdrucken? Wir müssen die Daten, die zurückgegeben werden, zuerst etwas zuordnen , genau wie wir es hier gemacht haben, URL dem entsprechen lassen, Anfrage dem entsprechen lassen Wir werden sagen, lass Daten, Antwort, gleichbedeutend damit sein. Nun, warum habe ich das getan? Was ist das? Dies wird als Tupel bezeichnet und ist im Grunde eine Sammlung von Variablen Der Grund, warum ich das getan habe , ist , dass zwei Dinge zurückgegeben Eines sind die tatsächlichen Daten, die JSN-Daten, und das andere ist die Antwort Es gibt zwei verschiedene Dinge, und sie werden entsprechend den Daten und der Antwort zugewiesen entsprechend den Daten und der Antwort zugewiesen Wenn ich es jetzt ausdrucke, kann ich die Daten ausdrucken, und ich kann die Antwort ausdrucken. Es wird diesen Code nicht ausführen, bis er wieder da ist , weil es hier eine Gewichtserklärung gibt. Jetzt kann ich Ihnen erklären, was dieses Task-Schlüsselwort ist. Das Schlüsselwort task dient zum Ausführen asynchronen Methoden oder asynchronem Code, was das ist Es ist nur ein spezielles Konstrukt , um Code im Hintergrund ausführen zu können Du stellst dir das so vor. So, jetzt sind wir alles vorbereitet. Nachdem wir den ganzen Code geschrieben haben, werden wir dieses Projekt ausführen. Es wird diesen Code ausführen , sobald der Simulator gestartet wird. Und dann werden wir eine Ausgabe sehen, unabhängig davon, ob ein Fehler aufgetreten ist oder ob wir die Daten tatsächlich in der Antwort sehen. Schauen wir uns also an, was hier passiert ist. Wenn ich diesen Konsolenbereich öffne und Sie diesen Konsolenbereich nicht haben, ist er möglicherweise minimiert Du drückst den Knopf genau dort. Und du hast diese Tabs vielleicht nicht. Sie klicken also einfach auf diese Schaltflächen in der unteren rechten Ecke und öffnen diese Tabs. Hier sind zwei Dinge zu beachten. Das sind die Daten, und wir können die Daten nicht sehen. Es sagt uns nur die Größe der Datendaten. Das passiert, wenn Sie versuchen, Daten auszudrucken. Aber wir müssen diese JSON-Datei analysieren oder sie unserer App in nutzbare Daten umwandeln Das werden wir ein paar Lektionen später machen. Aber schauen wir uns die Antwort an , denn auch das kann uns viel sagen. Okay. Also, wenn Sie nach einem Statuscode ( Statuscode 200) suchen, ist das gut. Denken Sie daran, hier im API-Explorer geblieben zu sein. Ich denke, hier ist es, okay. CO 200. Das bedeutet, dass dies ein Servercode für Successful ist. Servercode 200. Du kannst es googeln, Servercodes 200. Bedeutet. Es gibt mehr Codes. Schauen wir uns an, was wir hier bekommen. Jetzt können Sie die JSON-Daten nicht wirklich sehen, aber Sie können einige Details zur Antwort sehen. Aber Status C 200, das ist ein gutes Zeichen. Das bedeutet, dass die API unseren API-Schlüssel akzeptiert hat. Ich habe unsere Anfrage als gültig akzeptiert und sie hat eine Antwort zurückgegeben. Schauen wir uns an, was passiert, wenn wir nur einige der Daten ändern. Nehmen wir an, ich habe meinen API-Schlüssel durcheinander gebracht. Wo ist der Schlüssel? Genau hier? Ich werde nur ein paar Buchstaben daraus löschen und es erneut ausführen und sehen, wie der Statuscode diesmal lautet. Ist 400. Das sind 400, das ist nicht gut. Es wurde wahrscheinlich festgestellt, dass der APIKey nicht gültig ist. Schlechte Anfrage. Perfekt. Das ist großartig. Das ist genau das, was wir erwartet haben. Lass mich rückgängig machen. Der API-Schlüssel sollte gültig sein. Lass mich meine Idee mit der Playlist ein bisschen durcheinander bringen. Mal sehen, wie das die Dinge verändert. Es ist vier gegen vier. Was ist ein Vier-oh-Vier, wurde nicht gefunden. Es konnte meine Playlist nicht finden , weil ich die Playlist-ID durcheinander gebracht habe Also das ist wirklich gut. Das bedeutet, dass alles so funktioniert, wie wir es erwartet haben. Aber wäre es nicht toll, wenn Sie die Antwort tatsächlich sehen könnten? Genau hier schauen wir uns nur den Statuscode der Antwort an. Nun, manchmal, wenn Sie programmieren und mit Netzwerkanrufen arbeiten , wie wir es jetzt tun, wäre es sehr hilfreich, einen Blick auf den tatsächlichen Inhalt der Antwort und der Anfragen zu werfen. Und hier verwenden Sie ein Netzwerk-Debugging-Tool eines Drittanbieters Also werde ich Ihnen zeigen, wie Sie Proxy Man verwenden , den Sie kostenlos bei der Entwicklung Ihrer IOS-App verwenden können, und dann können wir einen Blick auf die tatsächliche Reaktion werfen und wir können die Daten sehen Lassen Sie uns also Proxy Man herunterladen und installieren. Gehen Sie weiter und besuchen Sie Proxy Maan Punkt O, und Sie können die MAC-App herunterladen Denken Sie daran, dass Sie dies kostenlos nutzen können und es kostenpflichtige Funktionen gibt, sodass Sie sich das ansehen können. Ich empfehle jedoch, vorerst kostenlos zu beginnen Okay, also werde ich meinen Proxy Man starten. Okay, deine sieht vielleicht nicht so aus , weil sie wahrscheinlich für dich einsteigen werden Wahrscheinlich müssen Sie zuerst ein paar Schritte durchgehen. Aber eine wichtige Sache , die Sie tun müssen , ist , ein Zertifikat zu erstellen, und Sie müssen ein paar Dinge installieren. Installieren Sie also zuerst das Zertifikat auf diesem MAC und dann das Zertifikat auf IOS und Sie werden Simulatoren auswählen Aber es hilft, wenn Sie den Simulator tatsächlich betriebsbereit haben Führen Sie also in Ihrem Co-Projekt einfach Ihr Projekt aus, sodass Sie den Simulator öffnen und sich notieren, was es ist, iPhone 15 Pro, weil es auf diesem Simulator installiert wird. Also, ja, das ist es, was du tust. Okay hier. Wähle Simulatoren. Und dann wird es zuallererst darum gehen, es auf deinem Mac zu installieren Wenn Sie das nicht getan haben, müssen Sie auf seine Schaltfläche klicken. Und dann sollte es heißen, den Simulator gefunden zu haben, weil Sie ihn gestartet haben, also sucht er danach. Ich sollte sagen, es wurde gefunden. Und dann werden Sie wählen, einfach Simulatoren vorzubereiten. Und dann werden Sie aufgefordert, es neu zu starten. Sie klicken auf diese Schaltfläche und der Simulator wird mit dem neuen Zertifikat neu gestartet Auf diese Weise kann Proxy Man zwischen den Anfragen stehen , die Ihr Simulator stellt und empfängt, und so können Sie die Daten sehen, oder? Was Sie also tun werden, manchmal müssen Sie X-Code neu starten. Es ist ein bisschen knifflig. Wenn Sie nicht sehen, was ich Ihnen zeige, versuchen Sie, den X-Code und die Simulatoren neu zu starten Aber wenn alles korrekt eingerichtet ist, sollten Sie in der Lage sein , die App jetzt auszuführen und diese Registerkarte „Apps“ zu öffnen Sie sollten sie hier sehen. Da ist es. Das ist mein Projekt, richtig. Schauen wir uns das mal an. Das ist dieser. Okay. Was ich tun kann, ist mit der rechten Maustaste klicken und es anheften und es wird hier angezeigt, und Sie können sehen, dass es eine Anfrage an diese Domain gesendet hat. Es war okay, aber ich muss die Anfrage erneut senden, um den Inhalt zu sehen Lassen Sie mich dieses Projekt erneut ausführen, und Sie werden sehen, dass eine zweite Anfrage gestellt wird, und dieses Mal können Sie alles sehen . Schau dir das an. Diese Seite auf der linken Seite ist die Anfrage, diese Seite auf der rechten Seite ist die Antwort. Für die Anfrage können Sie unter Für die Abfrage sehen Sie alle von Ihnen angegebenen Parameter , also gibt es einen Schlüssel, eine Playlist-ID und einen Teil, und das alles stammt von der URL. Aber die Antwort ist der interessante Teil. Sie können den Antwortcode sehen, er ist genau hier, 200. Aber wenn du dir die Leiche genau hier ansiehst. Dies sind die Daten, die in der Antwort zurückgegeben wurden. Denken Sie daran, als wir es im X-Code-Projekt ausgeführt haben, diese Daten genau hier, wir haben die Daten gedruckt und es wurde nur die Datengröße angezeigt. Nun, mit Proxmn können wir tatsächlich einen Blick darauf werfen, was die Daten hier sind Hier sind alle Daten. Dies ist ein sehr hilfreiches Tool , wenn Sie mit Netzwerkanrufen arbeiten. Wenn Sie nun Probleme haben, das zu sehen, was ich sehe, würde ich Ihnen empfehlen, die Schritte zur Fehlerbehebung durchzuführen. Schauen wir uns das mal an. Als wir uns dafür entschieden haben, gab es einige Schritte zur Fehlerbehebung, die Sie ausprobieren konnten , und es wurde eine Dokumentation Sie die Dinge ausprobieren können. So sieht es aus. Ja. Gehen Sie das einfach durch und probieren Sie diese Schritte zur Fehlerbehebung aus. Okay. Nicht das Ende der Welt, wenn Sie das nicht zum Laufen bekommen , denn wie Sie sehen können, auch ohne Proxy Man in der Lage, sind wir auch ohne Proxy Man in der Lage, die Antwort zu senden oder Entschuldigung, die Anfrage zu senden und die Antwort und den Statuscode 200 und all das zu erhalten . Ordnung. Nochmals, das war ein Testprojekt. So werden wir solche Dinge nicht machen. Wir wollen auf jeden Fall den Schlüssel sichern und die Dinge etwas eleganter machen, nicht nur alles in dieser Inhaltsansicht Also werden wir eine separate Komponente erstellen sich um den Netzwerkkram kümmert, und das alles machen wir. In Ordnung. Aber es war ein großer Erfolg , diesen Teil zu überstehen, und ich hoffe, Sie haben ein paar Dinge gelernt. Okay, jetzt, da wir wissen, dass wir uns mit der API verbinden und Daten daraus abrufen können , sind wir bereit, unser eigentliches X-Code-Projekt für die App zu starten X-Code-Projekt für die App In der nächsten Lektion werden wir ein neues X-Code-Projekt starten Wir werden den API-Schlüssel sicher speichern. Wir werden damit beginnen, einige der Bildschirme sowie einige der Komponenten, die wir für die App benötigen, zu überarbeiten sowie einige der Komponenten, die wir für die App benötigen, In Ordnung, wir sehen uns dort. 3. Lektion 03: Erstellen des Xcode-Projekts, von Ansichten und Modellen: In der letzten Lektion können wir eine Verbindung zur YouTube-Daten-API herstellen und Daten daraus abrufen In dieser Lektion werden wir unser X-Code-Projekt und alle Ansichten und Modelle einrichten . In Ordnung, lassen Sie uns das eintauchen. Lassen Sie uns zunächst mit einem kleinen Überblick darüber beginnen , wie unsere Ansichten dargelegt werden Ich möchte auch erklären, wie unser Datenmodell aussehen wird, insbesondere da wir mit der YouTube-Daten-API interagieren werden. Zunächst beginnen wir mit der Startansicht, und diese wird eine Tab-Ansicht mit zusätzlichen Ansichten enthalten . Ich weiß, dass wir in dieser Demo nur einen Tab haben, aber dieser ist so eingerichtet , dass Sie weitere Tabs hinzufügen können. Okay. In der Startansicht befindet sich also die Tab-Ansicht selbst. Und dann enthält die Tab-Ansicht Instanzen, eine Instanz der Feed-Ansicht. Und das ist die scrollbare Liste von Miniaturansichten, die Lassen Sie uns nun darüber sprechen, wie die Feed-Ansicht die Daten abrufen wird Wir werden eine separate Komponente erstellen, nennen wir sie den Datendienst, für den gesamten Code verantwortlich sein wird, der mit der YouTube-Daten-API interagiert Und der Grund dafür ist , dass wir alles an einem Ort speichern können und es einfacher zu warten und auch Fehler zu beheben und zu debuggen Wenn also die Feed-Ansicht geladen wird, fragt sie den Datendienst nach der Liste der anzuzeigenden Videos Und dann wird der Datendienst selbst diese Netzwerkanfrage an die YouTube-Daten-API senden. also in der vorherigen Lektion angesehen haben, Als wir uns also in der vorherigen Lektion angesehen haben, was wir zurückbekommen haben, waren es eigentlich zwei Dinge. Es gab eine allgemeine Playlist-Struktur und innerhalb dieser gab es dann einzelne Videoobjekte, richtig? Wie Wörterbücher, die die Videodaten enthielten. Wir werden diese JSON-Datei also in eine einzige Playlist-Instanz zerlegen eine einzige Playlist-Instanz mehrere Videoinstanzen enthält, jede die Videodaten darstellt Wenn Sie sich nicht erinnern oder ein bisschen verwirrt sind, machen Sie sich keine Sorgen. Wenn wir zu dem Teil kommen, die Netzwerkanfrage zu senden, die Daten zurückzuholen und sie in JSO zu analysieren, werde ich genauer darauf eingehen, wie jedes Stück oder Teil der JSN in wie jedes Stück oder Teil der verschiedene Eigenschaften der Video- und Playlist-Instanz übersetzt wird. Sobald die Daten wieder da sind, wird in der Feed-Ansicht eine Liste mit Daten Als Nächstes müssen wir die Video-Thumbnail-Bilddaten abrufen die Video-Thumbnail-Bilddaten , da diese Bilddaten nicht von der API zurückgegeben werden Stattdessen erhalten wir nur URLs zum Video-Thumbnail. Also werden wir asynchrone Bilder verwenden, um asynchron zu arbeiten. Das heißt, laden Sie die Bilddaten im Hintergrund zur Anzeige herunter Und wir werden eine separate Videozeilenansicht als wiederverwendbare Ansicht erstellen . Und die Feed-Ansicht, die eine Listenkomponente enthält, erstellt einfach so viele Instanzen der Videozeilenansicht, wie sie für so viele Videos benötigt, wie es gibt. Und jede Videozeilenansicht hat ein Synchronisationsbild, das das Vorschaubild herunterlädt Ordnung, jetzt haben wir eine Feed-Ansicht, die ziemlich gut aussieht, aber wir müssen den Benutzer auf ein Video tippen lassen , um das Video selbst anzusehen, oder? Aus diesem Grund werden wir eine Videodetailansicht erstellen , die als Blatt aus der Feed-Ansicht nach oben verschoben wird , wenn der Benutzer auf eine dieser Videozeilenansichten tippt In der Videodetailansicht zeigen wir oben den Videoplayer an Und dann zeigen wir darunter die Beschreibung für das Video. Und diese Daten werden es schon sein. Auf hoher Ebene wird die App also so aussehen. Hier gibt es viel zu lernen. Lass uns eintauchen. In Ordnung, lassen Sie uns unser X-Code-Projekt erstellen Also werde ich App unter IOS wählen, und ich werde diese YT-API-App benennen und sicherstellen, dass die Swift-I-Schnittstelle Swift ist Wir benötigen keine Speicheroptionen. Wir brauchen momentan keine Tests. Und ich werde das einfach auf meinem Desktop erstellen und die Quellcodeverwaltung habe ich nicht überprüft. Ich werde das auf den Simulator ändern, sodass wir es im Simulator starten können und nicht auf meinem Gerät. Jetzt können wir anfangen. Als Erstes möchte ich das Diagramm erneut aufrufen. Wir haben ein paar verschiedene Dinge. Ich teile die Dinge hier gerne in Ordner auf. Wir haben unsere Ansichten, nämlich Startansicht, Feed-Ansicht, Videodetailansicht und Videoansicht, und dann haben wir den Datendienst, der , wenn Sie so wollen, ein separater Helfer ist , und dann haben wir diese, die unsere Daten repräsentieren. Das wäre unser Datenmodell oder Modell. Okay, lassen Sie uns weitermachen und diese Ordner in unserem Xcode-Projekt erstellen diese Ordner in unserem Xcode-Projekt Also werde ich einfach, eine Sache, die ich gerne mache, ist, das umzubenennen Also, wissen Sie, wenn wir das Projekt YT API-App nennen, bedeutet das diese Bundle-ID, Y T API-App Aber am Einstiegspunkt fügen sie die App immer am Ende hinzu. Eine einfache Möglichkeit, dies tun, besteht darin, mit der rechten Maustaste zu klicken und das Refactoring vorzunehmen, und Sie können alles an derselben Stelle ändern Vielleicht möchten Sie so etwas tun. Vielleicht nennen wir es einfach YouTube API-App. Das hat es an verschiedenen Stellen umbenannt. Sie können Befehl B drücken , um sicherzustellen , dass es immer noch erstellt wird. Lassen Sie uns den Ordner jetzt erstellen. Ich werde mit der rechten Maustaste klicken. Ich werde neue Gruppe sagen und das nennen wir Dienste. Dann werden wir eine weitere Gruppe namens Ves und dann eine weitere Gruppe namens Models erstellen. Lass uns das einfach machen. Ordnung, also ich werde einfach alle Dateien , die wir benötigen, herausnehmen und das Auspacken bedeutet nur, sie zu erstellen vielleicht etwas ersten Code hinzuzufügen, aber das werden wir nicht einmal tun Lassen Sie uns einfach die Dateien erstellen und dann konzentrieren wir uns darauf, und dann konzentrieren wir uns das gesamte Gerüst zu erstellen Nennen wir das also den Datendienst, richtig? Also werden wir das dort erstellen. Und lassen Sie uns einfach diese ursprüngliche Struktur erstellen. Dann sagen wir für die Ansichten neue Datei, ich wähle Swift DI-Ansicht. Zuallererst gibt es die Home-Ansicht. Aber die Home-Ansicht ist im Grunde so, als hätten wir hier eine Ansicht. Warum verwenden wir diese Ansicht nicht als Home-Ansicht? Ich ziehe das in den Views-Ordner und benenne es einfach wieder um. Refaktorieren, umbenennen und wir nennen das die Home-Ansicht Ich habe diese nicht umbenannt. Dann haben wir auch die Feed-Ansicht. Denken Sie daran, dass diese die Tab-Ansicht enthält. Wir können also eine neue Datei erstellen. Schnell sehe ich, Feed-Ansicht. Dann werden wir auch eine Videoansicht haben. Wir werden auch eine Videodetailansicht haben. Und dann die Home-Ansicht. Wir werden dies in eine Tab-Ansicht ändern. Die Tab-Ansicht wird eine Instanz der Feed-Ansicht enthalten. Das ist die Grundstruktur unseres Projekts. Lassen Sie uns jetzt einfach die beiden Modelle erstellen. Diese Dateien werden schnell gespeichert, da es sich nicht um Ansichten handelt. Eines ist also Video. Ich werde das St. kreieren . Und dann werden wir noch einen für die Playlist erstellen. Lassen Sie uns das Diagramm für eine Sekunde aufrufen und überprüfen , ob wir alles haben. Wir haben die Startansicht, die die Tab-Ansicht enthält und eine Instanz der Feed-Ansicht enthält. Die Detailansicht wird als Blatt in der Feed-Ansicht angezeigt. Wir haben die Videozeilenansicht, die sich innerhalb einer Listenkomponente oder einer Listenansicht befinden wird, in der Feed-Ansicht erstellt die sich innerhalb einer Listenkomponente oder einer Listenansicht befinden wird . Wir haben den Datendienst, den wir erstellt haben, und dann das Video in den Playlist-Modellen. Wir sind bereit, in der nächsten Lektion mit der Implementierung einiger dieser Dinge zu beginnen . Ich würde empfehlen, dass Sie, wenn Sie wirklich versuchen, einige dieser Dinge zu lernen, am besten folgen und sie auf Ihrem eigenen Computer oder Laptop ausprobieren . Öffnen Sie einfach X-Code, starten Sie das Projekt und folgen Sie den Anweisungen, so gut Sie können. Sie können das Projekt jederzeit herunterladen, wenn Sie nicht weiterkommen. Ich lasse den Link in der Beschreibung unten stehen, um das Projekt herunterzuladen. In Ordnung. Nun, da wir unser Xcode-Projekt und alle Ansichten und Modelle detailliert beschrieben haben , können wir mit unserem Datenservice beginnen, und das werden wir im nächsten Video tun Wir sehen uns dort. 4. Lektion 04: Senden der API-Anfrage: Lektion: Wir werden eine Verbindung zum YouTube-Daten-EPI herstellen , um Daten abzurufen Und rate mal was? Da wir das bereits in einem Demo-Projekt gemacht haben, sollte das ziemlich einfach sein. Der einzige Unterschied besteht darin, dass wir die APIK dieses Mal sicher speichern Lass uns gleich eintauchen. Lassen Sie uns zunächst den Endpunkt überprüfen, wir mit unserer App erreichen werden. Also auf der YouTube-Daten-API, und ich werde unten auf dieses Dokument verlinken falls Sie den Verweis darauf verloren haben. Ich werde auf diese Endpunkt-Playlist-Elemente stoßen. Im Wesentlichen möchten wir alle Videos für eine bestimmte Playlist auflisten. Nun, das ist die URL, und es wird eine Anfrage vom Typ „Abrufen den erforderlichen Parametern sein, also müssen wir das angeben. Wird einer von diesen sein. Welchen Detaillierungsgrad wünschen Sie sich für die Videoelemente, die in der Antwort zurückgegeben werden? Und durch meine Tests bei der Erstellung dieser Demo bin ich zu dem Schluss gekommen, bin ich zu dem Schluss gekommen dass Snippet genau das ist, was Sie brauchen Nun, es sagt Ihnen nicht genau , was in jedem von ihnen enthalten ist Vielleicht gibt es zusätzliche Dokumentation Sie irgendwo suchen können. Was Sie tun können, ist in der vorherigen Lektion, als wir getestet haben, wie die API funktioniert. Sie können einfach all diese Parameter ausprobieren und sehen was Sie zurückbekommen und was Sie benötigen. Nun sollten Sie darauf abzielen, so wenig Daten wie möglich zurückzugewinnen und gleichzeitig Ihre Anforderungen zu erfüllen , da Sie nie mehr Daten zurückgeben möchten , weil das mehr Bandbreite und Zeit in Anspruch nimmt und warum sollten Sie das einfach tun? Snippet ist das, was wir brauchen. Es wird die Titelbeschreibung und die URLs der Videobilder enthalten, und das ist so ziemlich alles, was wir brauchen, um ehrlich zu sein Laut dieser Dokumentation ist dies nun der einzige erforderliche Parameter. Wir müssen jedoch immer noch die Playlist-ID angeben. Welche Videos werden wir sonst zurückbekommen. Wir müssen YouTube sagen, dass dies die Playlist ist für die ich die Videos zurückhaben möchte. Das hat mich am Anfang abgeschreckt. Ich dachte, ich würde die Playlist-ID da reinschreiben, aber nein, du gibst da rein. Das ist der Endpunkt, den wir erreichen werden. Nun, was den APIKey angeht , den wir weitergeben müssen, Sie hätten sich bereits in Lektion eins dafür anmelden Falls nicht, gehen Sie einfach zurück zu Lektion eins und gehen Sie diesen Prozess durch und Sie können sich für Ihre eigene API K registrieren . Jetzt werden wir uns mit X-Code befassen und sehen, wie wir diese API K sicher speichern können Zunächst möchte ich darüber sprechen, was das sichere Speichern Ihrer API K überhaupt bedeutet, weil es so viele verschiedene Möglichkeiten gibt , dies zu tun, und es gibt unterschiedliche Wirkungsgrade. Lassen Sie uns zunächst darüber sprechen, die APIK nicht zu sichern, was wir getan haben, als wir die API vorgeführt haben. Genau in der vorherigen Lektion. Also haben wir die APIK direkt im X-Code-Projekt hartcodiert, und das ist schlecht, weil Sie Ihr Projekt versehentlich mit jemandem teilen oder es der Quellcodeverwaltung unterstellen könnten Ihr Projekt versehentlich mit jemandem teilen oder es der Quellcodeverwaltung unterstellen Wenn Sie also nicht mit Quellcodeverwaltung wie GitHub vertraut sind, ist dies eine Möglichkeit für ein Team, zusammenzuarbeiten, mehrere Personen an derselben Codebasis arbeiten Also, wenn es in die Quellcodeverwaltung fällt, vor allem, wenn es sich um ein Open-Source-Projekt oder wer weiß, wer Zugriff darauf hat? Ihr Schlüssel ist genau da, und jeder kann ihn nehmen und missbrauchen. Das ist es also, was du nicht willst. Eine Stufe der Raffinesse oder des Schutzes besteht nun darin , diesen API-Schlüssel in eine externe Datei Sie fügen ihn nicht direkt in das Xcode-Projekt ein, sondern er befindet sich in einer anderen Datei, und dann lassen Sie Ihr Xcode-Projekt den Schlüssel aus dieser Datei lesen Auf diese Weise passt der Schlüssel nicht dazu, wenn Sie Ihr Projekt auf GitHub platzieren , wie Sie in diesem Diagramm sehen können Schlüssel nicht dazu Der Schlüssel verbleibt in dieser Datei auf Ihrem Computer, und dann müssen Sie diese externe Datei manuell mit dem Schlüssel für jeden teilen , der Zugriff benötigt, oder diese Person erhält ihren eigenen API-Schlüssel und fügt ihn in die Konfigurationsdatei ein und kombiniert ihn mit dem X-Code-Projekt. Das Problem mit diesen beiden Methoden ist nun, dass Ihr X-Code-Projekt letztendlich immer noch den API-Schlüssel benötigt. Und der Grund dafür ist , dass wir die Netzwerkaufrufe an die API direkt von unserem Projekt oder unserer App aus tätigen. Unser Projekt benötigt den Schlüssel, um auf zuzugreifen und sich gegen sie zu authentifizieren API zuzugreifen und sich gegen sie zu authentifizieren. Daran führt kein Weg vorbei Ihr EXCO-Projekt muss über den Schlüssel Bescheid wissen. Wenn Sie an den App Store denken, wenn Ihre App heruntergeladen wird, dann hat das heruntergeladene Paket alles, das heruntergeladene Paket was es braucht, um zu funktionieren, einschließlich des API-Schlüssels, denn letztendlich wird Ihre App den API-Schlüssel verwenden, um eine Verbindung zu allen APIs herzustellen, die Ihr Telefon oder Ihre App verwendet Es ist also immer noch so, wenn jemand genug Mühe sich jemand genug Mühe gibt und weiß, was er tut, kann er wahrscheinlich den Schlüssel aus diesem Paket extrahieren. Letztlich wäre der sicherste Weg, dies zu tun , nicht einmal die API-Aufrufe von Ihrer App aus zu tätigen. Sie würden Ihre eigene API einrichten und Ihre App würde Anfragen an Ihre API stellen, und es ist Ihre API, die über die API verfügt, die dann auf die API eines Drittanbieters zugreift In diesem Beispiel wäre das die YouTube-API. Dann würde es die Daten von der YouTube-API zurückholen und diese Daten dann an die App zurückgeben. Es ist fast wie ein Mittelsmann , der Zugriff auf den Schlüssel hat Auf diese Weise wird der Client , also Ihre App, den Schlüssel niemals sehen Dann können Sie für diese App ein eigenes Benutzerkontensystem einrichten für das sich der Benutzer registrieren und authentifizieren muss , um überhaupt auf Ihre API zuzugreifen Sie können sehen, wie weit Sie damit gehen können. Ich denke, es hängt für mich wirklich davon ab, wie viele Leute Ihre App verwenden Und wie wichtig es ist , dass dieser API-Schlüssel niemals in die falschen Hände gerät. Zumindest sollten wir den API-Schlüssel in eine externe Datei legen und nicht in einer fest programmierten Datei im Projekt. Dies ist nur eine gute Praxis , wenn Sie Ihre App erstellen. Nun, was das Einrichten Ihrer eigenen Software und die Tatsache angeht Ihre App niemals den API-Schlüssel für mich verwendet, das ist eine spätere Sache. Nehmen wir an, Ihre App nimmt Fahrt auf und es gibt viele Nutzer, die sie verwenden, und sie kommen in die Schlagzeilen. Sie glauben, es besteht Risiko, dass jemand Ihre App ins Visier nehmen könnte, vielleicht Konkurrenz oder was auch immer es sein mag, um Ihre App ins Visier zu nehmen, um zu versuchen, sie herunterzufahren, weil Ihr Geschäft in Schwung gekommen ist. Ich denke, das ist ein gutes Problem, und dann würden Sie darüber nachdenken, wie ich meine App sicherer machen und dann diesen Prozess der Einrichtung Ihrer eigenen API durchführen kann . Ich wollte all das durchgehen, damit Sie verstehen , was es bedeutet, Ihren API-Schlüssel zu sichern. In dieser Lektion werde ich Ihnen zeigen, wie Sie Ihren API-Schlüssel in eine externe Datei einfügen. Hier sind die Schritte, die wir durchführen werden. Wir werden eine Konfigurationsdatei in unserem X-Code-Projekt erstellen und den Schlüssel dazu hinzufügen. Wir werden das Projekt so einrichten, dass es diese Konfigurationsdatei verwendet, und wir werden eine spezielle Variable in unserer P-Liste definieren , die auf diesen API-Schlüssel verweist. Und wir werden die Schritte vier und fünf nicht weil wir uns in diesem Projekt nicht mit der Quellcodeverwaltung befassen . Aber die Schritte vier und fünf sind die Schritte, die Sie ausführen möchten, wenn Sie dieses Projekt in die Quellcodeverwaltung da die G-Ignorierdatei alle Dateien auflistet , die nicht der Quellcodeverwaltung unterliegen sollten. Es sollte im Grunde nicht auf Git Hub hochgeladen werden. Schritte vier und fünf, das sind Dinge, die Sie auf jeden Fall tun möchten, wenn Sie dieses Projekt der Quellcodeverwaltung oder GitHub unterwerfen und im Team arbeiten. Wenn Sie neugierig sind, wie diese gemacht werden, würde ich einfach googeln, wie man eine G-Ignorierdatei benutzt, und es listet buchstäblich nur Ihre Konfigurationsdatei auf, wie den Dateinamen in dieser G-Ignorierdatei, die im Grunde nur die Textdatei ist. Und Sie fügen diese G-Ignorierdatei Ihrem X-Code-Projekt hinzu. Und wenn du dann dein Projekt in die Quellcodeverwaltung überträgst, liest es die Ignorierdatei von Git und notiert sich alle Dateien, die es ausschließen soll, und es wird diese Dateien nicht der Quellcodeverwaltung unterstellen. Lassen Sie uns nun in unser Xcode-Projekt eintauchen und die Schritte eins, zwei und drei ausführen Hier ist unser X-Code-Projekt. Beginnen wir mit dem Hinzufügen dieser externen Datei. Dies wird eine Konfigurationsdatei sein. Klicken wir hier mit der rechten Maustaste auf diesen Hauptordner, neue Datei. In der oberen rechten Ecke sehen Sie in der Konfiguration einen Filterbox-Typ . Konfigurieren Sie ihn einfach. Dies ist die Datei, die wir in der Konfigurationseinstellungsdatei haben möchten . Hier ist es wichtig zu beachten, dass Sie sie hier nicht als Teil des Ziels aufnehmen möchten. Sie stellen sicher, dass das Häkchen deaktiviert ist, und erstellen es dann , weil Sie es nicht einbeziehen möchten Stimmt das? Jetzt geben Sie API ein, unterstreichen den Schlüssel in Großbuchstaben und stellen fest, dass dies keine Variable oder Konstante ist Wir setzen keine schnellen Keywords davor. Das ist eher wie eine Textdatei. Jetzt ist gleich, und wir werden unseren API-Schlüssel aufrufen. Da ist er. Ich werde es kopieren und ich werde es dort einfügen und die Datei speichern. Als Nächstes konfigurieren wir unser X-Code-Projekt so, dass es diese Konfigurationsdatei verwendet , indem wir hier auf den Stammknoten tippen, auf Projekt tippen und unter Konfigurationen hier können Sie sehen, dass es keinen Konfigurationssatz gibt Es gibt zwei verschiedene Arten von Builds, die wir erstellen können, wenn wir entwickeln und im Simulator oder auf unseren Geräten testen . Das ist ein sogenannter Debug-Build Ein Release-Build liegt vor, wenn Sie einen Build erstellen , der speziell bereitgestellt oder an den App Store gesendet Und das enthält nicht all die zusätzlichen Dinge, die nur in der Entwicklungsphase der App verwendet werden, wie z. B. die Bug-Symbole und ähnliches. Wie dem auch sei, für beide, D Bug und Release Build, werden wir es so einstellen, dass es eine solche Konfiguration verwendet Okay. Nun, der dritte und letzte Schritt, bevor wir das testen können, besteht darin, die Ziele hier zu unterschreiten. Wir werden auf Informationen eingehen. Dies ist unsere P-Liste, und wir werden einen Schlüssel erstellen , mit dem wir auf diesen Wert in der Konfigurationsdatei verweisen können . Drücken Sie also unten auf Plus, und dann geben Sie AP und alle Großbuchstaben AP ein, unterstreichen Sie den Großbuchstaben K E Y. Drücken Sie die Eingabetaste, und der Typ wird Zeichenfolge sein Ich weiß nicht, warum es ein kleingeschriebenes P war , weil ich glaube, dass es eine Art Autokorrektur gab Lassen Sie uns das korrigieren und das in Großbuchstaben P ändern Und was dann den Wert angeht, das wird eine dynamische Variable oder Referenz sein, und es wird sich auf den API-Schlüssel in der Kfig-Datei beziehen Was wir also in unserem Swift-Code genau hier tun werden, ist , in diese P-Liste zu gehen und den Wert für diesen Schlüssel Und der Wert für diesen Schlüssel zeigt tatsächlich auf diese Kfig-Datei, die wir nicht als Teil des Projekts aufnehmen werden , wenn sie in die Quellcodeverwaltung übernommen wird und all das Zeug Das ist unsere externe Datei, die wir bereits gesprochen haben. Lass uns das testen. Wir werden in die Home-Ansicht gehen und wir werden auf einem Peer sagen. Wir werden einfach den API-Schlüssel ausdrucken, um zu sehen, ob wir darauf verweisen können. Wir verweisen auf diese Info-P-Liste, indem sagen: Bundle Main Info Dictionary, das ist unsere Info-P-Liste. Dies ist optional, da es NL zurückgeben kann. Wenn es es finden kann, werden wir nach dem Schlüssel suchen. Und wir werden versuchen, den Wert abzurufen , weil es keine Ahnung hat , was der Wert ist. Wir wissen, dass es eine Zeichenfolge ist, es ist eine Art von Zeichenfolge, also werden wir versuchen, daraus eine Zeichenfolge zu machen. Und das ist einfach ein Versuch. Wenn nicht, dann ist es wahrscheinlich leer oder Null. Wir könnten einen Standardwert angeben. Also ja, wenn es nichts finden kann, lass uns drucken, es nicht finden. Okay, für unser eigenes Debugging. Okay, lass uns das ausprobieren. Wir werden das im Simulator ausführen, also läuft es jetzt. Und wir sollten unseren API-Schlüssel dort ausgedruckt sehen , wenn alles nach Plan läuft. Ordnung. Perfekt. Es funktioniert. Dies verweist auf die Informationsliste, sucht nach diesem Schlüssel, und der Wert für diesen Schlüssel verweist hier auf den API-Schlüssel der Konfigurationsdatei Perfekt. Lassen Sie uns nun mit der Implementierung des Datendienstes fortfahren, bei dem wir den API-Aufruf an die YouTube-API senden und die Daten abrufen werden. also in der Datendienstdatei oben Lassen Sie uns also in der Datendienstdatei oben unseren Schlüssel als private Konstante deklarieren. Und wir werden das den API-Schlüssel nennen. Und wir werden das genauso handhaben , wie ich es Ihnen zuvor gezeigt habe, Hauptpunktinformationswörterbuch bündeln und versuchen, nach dem API-Underscore-Schlüssel als Zeichenfolge zu suchen API-Underscore-Schlüssel als Zeichenfolge Jetzt werde ich ihm keinen Wert wie diesen geben , wenn es ihn nicht abrufen kann , weil ich möchte, dass es NL ist, damit wir erkennen können, ob die API K vorhanden ist oder nicht Als Nächstes werden wir eine neue Funktion namens G-Videos erstellen , eine Reihe von Videos zurückgeben wird. Im Grunde wollte ich alle Videos für eine bestimmte Playlist zurückgeben . Wir werden daraus eine asynchrone Funktion machen, und ich werde erklären, was das bedeutet, wenn wir sie aufrufen, und ich werde erklären, was die Schlüsselwörter Async und await Warum kehren wir vorerst nicht einfach zurück und leeren das Video-Array? Hier werden wir diesen API-Aufruf implementieren. Prüfen Sie zunächst, ob der API-Schlüssel vorhanden ist, und dann erstellen wir die URL, erstellen die Anfrage, senden die Anfrage und analysieren sie schließlich Es hilft wirklich, dass wir das in Lektion zwei in einer Demo gemacht haben , oder? Also haben wir getestet, ob das funktioniert, wir wissen, dass es funktioniert. Also werden wir sagen, API-Schlüssel nicht gleich NL schützen , sonst zurückgeben. Wir können eine leere Videoliste zurückgeben , weil sie nichts bekommen kann. Idealfall möchten Sie wahrscheinlich eine Fehlermeldung oder etwas Ähnliches anzeigen, damit Sie etwas als solches zurückgeben und es dann aufnehmen und auf der Benutzeroberfläche anzeigen können etwas als solches zurückgeben und es dann aufnehmen und auf der Benutzeroberfläche anzeigen Aber wenn du das tust, was wir hier tun, gibst du keine Videos zurück Der Benutzer weiß also nicht, ob tatsächlich keine Videos in dieser Playlist tatsächlich keine Videos enthalten sind oder ob etwas schief gelaufen ist. Aber offensichtlich ist etwas schief gelaufen , weil wir die APIK nicht bekommen können, oder? Okay. Wenn wir hier runter kommen, werden wir die URL erstellen. Und bevor wir die URL tatsächlich erstellen, werden wir sie aus einer Zeichenfolge erstellen, richtig? Und diese URL-Zeichenfolge wird ungefähr so aussehen. Lassen Sie uns zunächst zur Dokumentation zurückkehren. Das ist also genau hier. Und wie ich in der vorherigen Lektion erwähnt habe, verwenden wir diesen Endpunkt genau hier. Wir werden alle Elemente der Playlist anhand einer Playlist abrufen . Ich werde das einfach da hinstellen. Ich werde die URL hier fest codieren und wir werden die Parameter hinzufügen. Einer der erforderlichen Parameter ist dieser eine Teil, den ich bereits in Lektion drei erwähnt habe. Warum haben wir das Snippet ausgewählt, weil es das enthält, was wir brauchen. Dann möchten wir noch angeben welche Playlist wir alle Videos abrufen möchten alle Videos abrufen möchten Okay. Also so wie du das findest, werde ich mir meine eigene Playlist aussuchen. Sie können wählen, welche Playlist Sie möchten. Aber wenn du auf den Kanal einer anderen Person gehst und zur Playlist gehst, siehst du hier alle Playlisten. Ich werde auf diesen klicken, deine vollständige Playlist. Und es ist nur diese ID genau hier. Wenn Sie darauf doppelklicken, markieren Sie das Ganze. Ich werde das kopieren und ich werde es dort einfügen . Und das Letzte, was Sie hinzufügen müssen, ist der Schlüssel. Also sagen wir, dass Schlüssel gleich ist, und wir werden ihn einfach hier einfügen , API-Schlüssel. Und wir haben bereits überprüft , ob es kein Nagel ist, also werden wir es hier mit Gewalt einwickeln. Jetzt können wir die URL-Instanz aus dieser Zeichenfolge erstellen, jetzt können wir die Anfrage erstellen. Lassen Sie uns diese URL-Anfrage machen, und wir werden sie von dieser hier aus machen. Wir werden die URL weitergeben. Eigentlich gibt dieser ein optionales zurück. Das könnte NL sein. Wir werden sagen, ob URL gleich URL ist, nur um zu überprüfen, ob es nicht NL ist Wir werden den ganzen Code hier einfügen, der nur ausgeführt wird, wenn wir erfolgreich eine URL-Instanz erstellen können , dann werden wir das dort tun Dann ist das Absenden der Anfrage eine Frage der Verwendung von Session Wenn wir sagen, lassen Sie uns hier eine weitere Konstante erstellen hier eine weitere Konstante , nur um die Dinge klarer zu machen. URL-Sitzung geteilt. Das ist nur eine Aufschlüsselung der Dinge, damit du sie leichter verstehen kannst. Und wenn Sie sich diese ansehen, die wir verwenden werden, ruft Data die Daten für eine bestimmte URL-Anfrage ab, die wir hier erstellt haben, und das ist sowohl eine asynchrone Methode auch potenziell fehleranfällig . Also müssen wir uns mit diesen beiden Dingen befassen. Das dritte, was Sie bei dieser Methode bemerken sollen , ist, was sie Ihnen zurückgibt. Sie gibt ein Tupel zurück. Es hat also zwei Daten. Es enthält Daten, also die tatsächlichen Daten, die von der API zurückgegeben werden, und ein Antwortobjekt, das Sie auf Fehler oder den Statuscode und ähnliches überprüfen können . Das ist also die eigentliche Antwort, und das sind die Daten, die in ihre eigenen Parameter aufgeteilt sind. Wir werden uns auch darum kümmern. Aber lassen Sie uns zuerst die Dinge eins nach dem anderen erledigen. Lassen Sie uns den T-Wurf-Teil behandeln, und dann machen wir Async und dann wir uns mit den Daten befassen, die zurückgegeben werden. Wirft. Lassen Sie uns die Anfrage weiterleiten Wenn das Aufrufen einer Methode zu einem Fehler führen kann, müssen wir ihn abfangen, und der Mechanismus in Swift , das zu tun , sieht dafür so aus. Sie tun etwas, das möglicherweise zu Fehlern führen kann , nämlich diese Codezeile. Sie müssen ein tri-Schlüsselwort davor setzen, also werden wir versuchen, das zu tun. Dann musst du auch einen Catch-Block haben. Dieser wird angezeigt, oder Sie können alle Fehler behandeln , die ausgelöst werden, wenn er ausgelöst wird. Wir werden es einfach ausdrucken. Damit verweisen wir auf den Fehler, der ausgeworfen wird. Als Nächstes wollen wir uns mit der Tatsache befassen , dass es sich um eine asynchrone Methode handelt Um die asynchrone Methode aufzurufen, was bedeutet, dass sie in einem Hintergrundthread oder einem Hintergrund-Worker aufgerufen wird einem Hintergrundthread oder einem Hintergrund-Worker Stellen Sie sich vor, Sie beauftragen jemand anderen mit der Arbeit, als ob Sie jemand anderem eine Aufgabe geben und diese Person die Aufgabe erledigen lassen und zu Ihnen zurückkommen lassen, wenn sie erledigt ist Sie müssen das Schlüsselwort await eingeben, was bedeutet, dass Sie warten, bis diese Person, dieser Hintergrundmitarbeiter, mit der abgeschlossenen Aufgabe zurückkommt , bevor Sie fortfahren und die restlichen Codezeilen darunter ausführen Das ist es also, was hier passieren wird. Nun möchte ich erklären, dass es, obwohl es darauf wartet, dass der Hintergrund-Worker diese Aufgabe erledigt , und zurückkommt bevor wir die nächsten Codezeilen ausführen, es ist trotzdem gut, denn während wir darauf warten , dass diese Hintergrundaufgabe zurückkommt, können wir jede Art von Benutzerinteraktion handhaben, und wir können auch einige andere Dinge tun bevor wir die nächsten Codezeilen ausführen Es ist nur so, dass das Schlüsselwort await dem System mitteilt, Zeilen drei und darunter nicht auszuführen , bis der Hintergrundarbeiter zurückkommt. Und für solche Dinge möchten Sie es als Hintergrundaufgabe abschicken, denn wenn Sie den Haupt-Thread haben, der den Haupt-Thread ist , der diesen Code ausführt, gehen und diese Arbeit erledigen, dann wird es keinen Worker geben, dann wird es keinen Worker der sich um die gesamte Benutzerinteraktion und so kümmert. Und so wird es aussehen, als wäre es eingefroren. Also das ist quasi der Kern der Sache. Bei jeder Art von Aufgaben wie Netzwerkanfragen oder Datenbankabfragen, und Sie werden sehen, wann wir die Miniaturbilder für die Bilder herunterladen Wir werden das auch als Hintergrundarbeiter schicken, damit wir das erledigen können Das bedeutet also, die Schlüsselwörter Async und Await zu verwenden. Die Tatsache, dass es sich um eine asynchrone Methode handelt, wird auch ins Spiel kommen, wenn wir den Feed View-Aufruf get video ausführen. Sie werden sehen, wie wir das Schlüsselwort A weight verwenden Okay. Hoffentlich macht das Sinn, wenn nicht, würde ich empfehlen, dass Sie etwas tiefer in Async und ein Gewicht eintauchen etwas tiefer in Async und ein Gewicht Suchen Sie nach zusätzlichen Tutorials zu Async und einer Gewichtung in Swift, damit Sie es etwas detaillierter verstehen können etwas detaillierter , als wir gerade Zeit haben , darauf einzugehen Wir haben uns also mit der Tatsache befasst , dass es einen Fehler auslöst. Wir haben die Tatsache berücksichtigt, dass es sich um eine asynchrone Methode handelt, was bedeutet, dass ein Hintergrund-Worker sie ausführen wird Jetzt müssen wir uns um die Daten kümmern, die zurückkommen, und es ist ein Tupel, oder? Also werden wir unser eigenes Tupel deklarieren, um diese Daten zu verfolgen Wir werden eine Tupelkonstante deklarieren. Wir werden Daten und Antwort sagen. Sie werden feststellen, dass dieses Format so aussieht , wie wir es bei dieser Methode gesehen haben. Wir werden sagen, entspricht dem. Wenn also keine Fehler ausgegeben werden der Hintergrund-Worker zurückkommt, weist er die Daten diesem Objekt zu und er weist ihm die Antwort zu Und dann können wir von hier aus die Daten analysieren. Bevor wir die Daten analysieren, versuchen wir nun, diese Anfrage abzusenden und sie innerhalb von Proximan zu überprüfen um sicherzustellen, dass sie Was wir also zuerst tun werden, ist, dass wir diese Anfrage tatsächlich auslösen müssen Also, warum sagen wir in der Feed-Ansicht nicht nein, nicht hier, sondern wir werden Task verwenden. Lassen Sie mich erklären, was das ist. Die Aufgabe ist ein Modifikator , mit dem Sie einen Block mit asynchronem Code ausführen können Lassen Sie mich das in Laiensprache ausdrücken. Wenn die Feed-Ansicht erscheint, wird sie diesen Code innerhalb dieses Aufgabenblocks als Hintergrund-Worker ausführen dieses Aufgabenblocks als Hintergrund-Worker Wir werden sagen, dass wir hier oben eine Immobilie einrichten werden, um die Videos zu speichern, und das wird ein staatliches Eigentum sein. Lassen Sie mich auch erklären , was das bedeutet. Am Anfang wird es ein leeres Array sein. Falls Sie meine achttägige Anfängerserie nicht gesehen haben , in der ich erklärt habe , was staatliche Immobilien sind. Wenn sich dieser Wert ändert, möchten wir im Wesentlichen, dass die Benutzeroberfläche aktualisiert wird. Das fängt mit einem leeren Array an, es gibt keine Videos. Aber wenn wir die Aufgabe vom Datendienst zum Abrufen der Videos abschicken Datendienst zum , kommt sie zurück, und dann werden die Videoinstanzen in dieses Array eingefügt. Wir möchten, dass die Benutzeroberfläche aktualisiert und diese Videos anzeigt. Deshalb ist dies ein staatliches Eigentum. Lassen Sie uns mit dieser Aufgabe beginnen. Wir werden eine neue Datendienstinstanz erstellen eine neue Datendienstinstanz und ich werde sie einfach so verketten. Ich rufe Get Video an. Das sollte ein S sein. Das werden wir ändern. Das sollte heißen: Holen Sie sich Videos und beachten Sie, dass es sich um eine asynchrone Methode Und es gibt eine Liste von Videos zurück. Asynchron bedeutet also, dass wir es als Hintergrundaufgabe versenden müssen es als Hintergrundaufgabe versenden Wir müssen warten, bis das wieder da ist, bevor wir den Code darunter ausführen Wir werden sagen, Videos lassen ist das, die Rückkehr zur Videoliste Nennen wir das. Nennen wir es zurückgesendete Videos. Dann werden wir die Rückgabevideos hier unserem Staatseigentum zuweisen . Selbstgedachte Videos entsprechen zurückgegebenen Videos. Wir können das definitiv kürzen, aber ich wollte das in zwei Zeilen aufteilen , um Ihnen die Tatsache zu erklären , dass diese Codezeile erst ausgeführt wird, wenn sie weg ist und aufgrund dieses await-Schlüsselworts mit den Daten zurückkommt await-Schlüsselworts mit den Daten Während der Haupt-Worker darauf wartet, dass der Hintergrund-Worker die Daten abruft, kann er trotzdem Benutzerinteraktionen und andere Dinge erledigen , die er erledigen muss. Das ist es, was das Tolle an ACN auf Sie warten kann. Wir können das verkürzen, indem wir es einfach so formulieren und das Ganze überflüssig machen. Ordnung, aber ich dachte, es so zu schreiben, würde das Schlüsselwort await ein bisschen besser erklären. So wie wir es jetzt eingerichtet haben, sollte es, wenn wir das im Simulator ausführen, wenn wir das im Simulator ausführen, es ausführen und dann die Netzwerkanfrage abschicken. Und wenn unsere API korrekt ist und unsere Anfrage richtig strukturiert ist, sollten wir eine Antwort erhalten. Lassen Sie uns also weitermachen und Proximan öffnen. Lassen Sie uns weitermachen und uns das in Aktion ansehen. Ich werde das zuerst im Simulator ausführen , damit es auf unserer Liste erscheint. Da ist es. Ich werde das oben anheften und muss es erneut senden Hello World, schick es. In Ordnung. Der Statuscode ist grün, er sollte 200, 200 sein, und wir bekommen die Daten hierher zurück. Sie können sehen, dass das Stammelement eine Reihe von Elementen enthält. Dieses Stammelement stellen wir mit unserem Playlist-Modell dar. Wir werden es davon ableiten. Was dann die Artikel angeht, das sind die einzelnen Videos, die wir mit Videosequenzen darstellen. Natürlich haben wir es noch nicht ausgefüllt, aber genau das werden wir tun. Wenn Sie eines dieser Videos öffnen, werden Sie feststellen, dass es das Snippet enthält, nach dem wir in der API-Anfrage gefragt haben, und es enthält die Miniaturansichten, den Titel, die Beschreibung und die Video-ID , die wir ebenfalls benötigen Also in der Ressourcen-ID ist hier die Video-ID. Also das sind alle Details, die wir brauchen. Und in den Miniaturansichten. Sie können sehen, dass die Miniaturansichten unterschiedlich groß sind. Jede Größe hat eine andere URL. In Ordnung, ich glaube, wir haben die Hälfte geschafft. Nun, da die Anfrage gesendet und die Daten zurückgegeben wurden, müssen wir nur noch diese JSON-Daten in Videoinstanzen parsen , damit wir sie anzeigen können Und das werden wir in der nächsten Lektion tun. Wir sehen uns dort. 5. Lektion 05: Parsen der JSON-Daten in Videos: In dieser Lektion werden wir die API zurückgegebenen JSON-Daten in Videoinstanzen umwandeln , damit wir sie in unserer Feed-Ansicht anzeigen können . Lassen Sie uns eintauchen. Der erste Schritt besteht darin, die Eigenschaften unserer Datenmodelle entsprechend der Antwort auszufüllen die Eigenschaften unserer Datenmodelle entsprechend der , die wir von der Tube-Daten-API erhalten Schauen wir uns noch einmal Pxy Man an, und dieses Tool ist wirklich hilfreich, vor allem, weil Sie einfach die Anfrage senden und sich die Antwort ansehen und diese Baumansicht erhalten können einfach die Anfrage senden und sich die Antwort ansehen und diese Baumansicht erhalten und dann können Sie sie so durchgehen Manchmal enthält die Dokumentation die Antwort, also ist dies die YouTube-Daten-API Ich kenne die API Epler, wenn du sie verwendest und die Anfrage ausprobierst, wirst du die Antwort sehen können Hier, das gibt dir eine Idee. Ja. Also, wenn du Proxy Man nicht benutzen willst, um es dir anzusehen, kannst du dir das auch ansehen. Dies wäre das Playlist-Objekt oder die Playlist-Instanz, und das wären die Elemente. Jeder Artikel ist ein Video. Wenn Sie darauf klicken, können Sie sehen, dass dies die Eigenschaften des Videos sind. Lassen Sie uns das eigentlich verwenden , weil der Text größer ist als hier in Proxy Man. Wir werden mit dem Video selbst beginnen. Also werden wir das dekodierbare Protokoll hinzufügen, das es uns ermöglicht, die JSON-Daten mithilfe des JSON-Decoders in Videoinstanzen umzuwandeln mithilfe des JSON-Decoders in Videoinstanzen Lassen Sie uns also die API-Dokumentation aufrufen. Was ich mir gerade ansehe, ist ein einzelnes Video. Wir können also sehen, dass es eine ID hat, die eine Zeichenfolge ist, und das wird für uns hilfreich sein da wir diese Videoinstanzen in eine Swift-DUI-Liste aufnehmen wollen und sie in der Lage sein muss , zwischen verschiedenen Videos zu Wir werden also im Wesentlichen die Eigenschaften auswählen , die wir analysieren möchten Es wird also eine String-ID geben. Dann wird es einen Ausschnitt geben und darin wird ein Titel sein Es wird eine Beschreibung sein. Beides brauchen wir, und das sind Schnüre. Und dann wird es auch Vorschaubilder geben. Konzentrieren wir uns zunächst auf Titel und Beschreibung. Auch dies ist eine Snippet-Eigenschaft, und das Snippet selbst, Sie können diese geschweiften Klammern sehen, die für eine andere Instanz, die für eine andere Instanz, Struktur oder Objekt stehen, wie auch immer Sie All das steht für dasselbe. Wir werden sagen, dass Snippet sein wird , geben wir mir eine Art von Ich werde das optional machen, falls es nicht existiert. Ja, Snippet und keine Snippets. Ich kann sicherstellen, dass die Eigenschaft dieselbe ist, und ich werde hier eine weitere Struktur namens Snippet erstellen , und auch sie In das Snippet würde ich Titel und O. Ich meine, alle Videos sollten einen Titel und eine Beschreibung haben, aber für den Fall, dass sie das nicht tun, kannst du sie optional machen Vorerst werde ich das nicht tun. Mal sehen, was passiert. Dann haben wir im Snippet Vorschaubilder. Was brauchen wir hier noch? Wir benötigen die Video-ID. Lassen Sie uns das vor den Thumbnails behandeln , weil es hier einiges mit Vorschaubildern Lassen Sie uns die Ressourcen-ID machen. Ich werde es mit Kleinbuchstaben wie folgt buchstabieren. Lass uns das machen. Dann werde ich hier eine weitere Struktur namens Resource ID erstellen , die dekodierbar ist Die Ressourcen-ID, nun ja, die einzige, an der ich wirklich interessiert bin , ist die Video-ID, und es ist eine Zeichenfolge Ich weiß, dass alle Videos eine Video-ID haben müssen. Beschäftigen wir uns mit Vorschaubildern. Waren es Vorschaubilder mit einem S? Das war in dem Ausschnitt. T-Vorschaubilder mit einem S ja, dann ist das selbst eine eigene Sache. Das müssen wir definieren Nennen wir das Thumbnails. Lassen Sie uns eine weitere Struktur namens Thumbnails erstellen, und diese wird ebenfalls dekodierbar sein Was brauche ich hier? Lass uns den Schlüssel eingeben. Lassen Sie uns hier einen Blick auf Proximan werfen, um eine echte Antwort Wir haben das Snippet hier und dann haben wir Thumbnails. Lass uns das öffnen Und dann gibt es mehrere verschiedene, Standard, Mittel , Standard, Hoch, Max. Sie können diese verschiedenen also ausprobieren. Das sind alles unterschiedliche Dateigrößen. Sie würden dieses Bild wahrscheinlich nicht so haben wollen , als ob es das größte ist, es sei denn Sie zeigen es vielleicht auf einem iPad, oder Sie möchten, dass es übersichtlich ist. Als ich meine Demo erstellte, war ich mit Medium ziemlich zufrieden. Das ist es also, womit ich mich befassen werde. Eigentlich ist Medium fast das kleinste. Die Standardeinstellung ist ziemlich klein. Das ist also fast doppelt so groß. Aber ich erinnere mich, warum ich mittelgroß bin, weil das Seitenverhältnis unterschiedlich ist. Sie können also sehen, dass es sich bei diesen um ungefähr handelt. Ja, das Seitenverhältnis war etwas anders. Einige davon sehen quadratischer aus, und andere sehen eher aus wie ein Widescreen-Ding. Nachdem ich sie ausprobiert hatte, fand ich heraus, dass das Medium das war, das gut dargestellt wurde, also habe ich mich für dieses Medium entschieden. Ja. Also ich sage Far Medium. Und was ist der Typ? Der Typ selbst ist ein anderes Objekt. Also werde ich etwas dafür erstellen müssen , nur um zu wissen, wie diese drei Eigenschaften sind. Dieser ist eine Zeichenfolge. Dieser ist ein Int, und dieser ist auch ein Int. Lassen Sie uns also eine Strut-Thumbnail-Größe erstellen. Das ist dekodierbar , was ist das für eine URL. Wie dieser Deal mit der Größe. Dann hat dieser nur die Größe eines Vorschaubilds. Habe ich alles was ich brauche? Ich habe das Vorschaubild, URL, ich habe die Video-ID Das ist für den Videoplayer. Dann habe ich den Titel und die Beschreibung. Ich glaube, das ist es. Perfekt. Dann geh wieder raus. Dies ist ein einzelnes Video, das einen Schritt zurückgeht. Das ist die Playlist. Die Playlist enthält Elemente , also eine Reihe dieser Videoinstanzen. Wenn ich zur Playlist gehe, stellen wir sicher, dass diese auch dekodierbar ist und wir wollen Elemente. So wie das Außerdem müssen wir Identifiable hinzufügen, was es uns ermöglicht, ein Array davon in der Swift DUI-Liste zu verwenden , und wir haben die Idee für das identifizierbare Protokoll parat, denn das ist es, was dafür erforderlich ist Und ich denke, jetzt geht es uns gut. Lassen Sie uns versuchen, es zu analysieren Gehen wir in den Datendienst und fahren wir mit dem Analysieren der Daten fort Wir werden einen JS-Decoder erstellen. C. Und dann sagen wir dekodieren, dekodieren Sie einen bestimmten Typ Wir werden die Daten von hier aus dekodieren, und wir werden sie in eine Instanz einer Playlist dekodieren in eine Instanz einer Wir geben die Playlist als Typ weiter und müssen daher Punkt Self hinzufügen So spezifizieren Sie einen Typ. Oh, ich habe vergessen darauf hinzuweisen , dass diese Dekodierungsmethode Fehler auslösen kann Es bittet dich, es zu versuchen. A Wir können es gleich hier versuchen , da es sich bereits in einem D-Block befindet. Das ist perfekt. Wir müssen keinen weiteren Fehler machen, es sei denn, Sie möchten diesen Fehler im Vergleich zu diesem Fehler speziell behandeln. Ich bin mir jedoch sicher, dass Sie hier unterscheiden können , wenn Sie ihn bemerken. Lassen Sie uns das Ergebnis dieser Dekodierung festhalten. Lass die Playlist dem entsprechen. Wie Sie wissen, enthält unsere Playlist-Instanz dann Elemente, nämlich die Videos Das werden wir versuchen zurückzugeben. Denken Sie daran, dass diese Methode hier Szenario-Videos zurückgibt . In Ordnung. Mal sehen, wie das funktioniert. Lassen Sie uns zu unseren Ansichten zurückkehren und überprüfen, was wir hier tun. Ich werde genau hier einen Breakpoint setzen , indem ich hier tippe Dadurch wird die Ausführung unterbrochen Lassen Sie uns noch ein bisschen mehr hinzufügen, bevor wir das ausführen. Auf diese Weise können wir visuell etwas im Simulator sehen. Lassen Sie uns eine Swift-DUI-Liste verwenden und wir werden die Videos weitergeben. Weil die Videostrebe identifizierbar ist, dann ist das alles in die Videos weitergeben. Weil die Videostrebe identifizierbar ist, dann ist das alles Das heißt, wir können es in dieser Liste verwenden, und dann gehen wir für jedes Video zu i Lass uns einfach den Snippet-Titel machen. Wenn das NL ist, sag einfach Titel. Lass mich das einfach machen. Lass uns sehen, ob wir sehen können, dass etwas auftaucht. Oh, es ging so schnell. Aber wir konnten sehen, dass der Mitarbeiter die Anfrage zum Absenden entschuldigt, die Antwort kam mit fünf Artikeln zurück, und tatsächlich sehen wir hier fünf Artikel Ich hatte erwartet, mehr zu sehen, weil unsere Playlist tatsächlich acht Videos oder neun Videos enthält , also zehn Videos Lass mich einen Blick darauf werfen. Ich denke, standardmäßig ist der Standardwert für Max-Ergebnisse fünf. Das ist also etwas, das Sie ebenfalls einstellen sollten. Lassen Sie uns das in unserem Datenservice ändern. Was war das für Max Results Capital R. Ich füge das gleich hier hinzu. Sagen wir mal, maximale Ergebnisse sind gleich 20. Das sagt uns, dass wir die Antwort nie überprüft haben, also können wir das einfach ignorieren, indem wir einen Unterstrich hinzufügen Das müssen wir nicht benennen. A. Lass es uns noch einmal ausführen. dort so schnell passiert. Wir haben alles. Was wir heute hier getan haben, indem das JSO analysiert haben, indem wir die Antwort angesehen und dann diese Schlüsselwertpaare diese Schlüsselwertpaare und diese Eigenschaften in unserem Datenmodell erstellt Das ist etwas, das sehr häufig gemacht wird. Machen Sie sich daher am besten mit diesem Prozess vertraut , wenn Sie in Zukunft mit verschiedenen APIs arbeiten möchten . Ordnung. Jetzt, wo die Videoinstanzen in der Feed-Ansicht angezeigt werden, ist der schwierige Teil erledigt, ob Sie es glauben oder nicht. Jetzt müssen wir nur die Miniaturbilder in der Feed-Ansicht anzeigen, und das werden wir in der nächsten Lektion tun Wir sehen uns dort. 6. Lektion 06: Abrufen von Video-Thumbnails und Styling: In der letzten Lektion analysieren wir die von der YouTube-API zurückgegebenen JSON-Daten in Videoinstanzen, die wir in unserer Feed-Ansicht anzeigen Das Problem ist nun, dass wir keine Video-Thumbnails zum Anzeigen haben , und das werden wir in dieser Lektion beheben Lass es uns machen. haben wir bisher mit unserer Feed-Ansicht. Lass uns das ein bisschen aufräumen. Wir gehen in die Feed-Ansicht und als Erstes ändere ich den Stil der Listenliste in Ebene. Und dann werden wir auch die Scroll-Anzeige entfernen. Kommen wir also zu den Scroll-Indikatoren. Das werden wir verstecken. Und es sollte schon ein bisschen besser aussehen. Perfekt. Dann werden wir diese Trennzeichen zwischen den einzelnen Elementen entfernen , da es sich um Bilder und Miniaturansichten handelt sich um Bilder und Miniaturansichten Im Text hier werde ich sagen, dass die Sichtbarkeit von Zeilentrennern ausgeblendet ist Die andere Sache ist, denken Sie daran , dass wir in der Startansicht eine Tab-Ansicht haben. Fügen wir das Tab-Symbol genau dort hinzu. In der Startansicht können wir dies auf einem Peer entfernen, unseren API-Schlüssel anzeigen und ein Tab-Element hinzufügen. Hier werden wir ein Bild einfügen, und das wird ein Symbol sein, SF-Symbole, und wir werden Stack verwenden. Dieser hier, spiele Square Stack. Mal sehen, ob ich es da hinstellen kann. Ich habe das Ganze einfach für mich gemacht. Dann wird der Text eingespeist. Das wird schon viel besser aussehen. Schauen wir uns nun die Anzeige dieser Bilder in unserer Videozeilenansicht an. Anstatt einen Text mit dem Titel anzuzeigen, möchten wir Instanzen der Videozeilenansicht erstellen . Aber wir müssen das Video in die Videozeilenansicht übergeben. Andernfalls hat diese Ansicht nichts , womit sie arbeiten könnte. Warum erstellen wir hier nicht eine Eigenschaft , die weitergegeben werden muss Und zu diesem Zweck machen wir das vielleicht einfach. Von, ich will das alles nicht erschaffen. Ich werde nur auf die Vorschau selbst eingehen. Okay. Und gehen wir zurück zur Feed-Ansicht, und wir werden es hier weitergeben. Siehst du, jetzt erfordert es das. Ich gebe einfach das Video weiter, das es anzuzeigen versucht. nun in der Videozeilenansicht Lassen Sie uns nun in der Videozeilenansicht das Bild anzeigen. Denken Sie jetzt daran, dass wir die URL zum Vorschaubild haben. Es befindet sich im Video, Punkt, Ausschnitt, Miniaturansichten, Punkt , Medium, URL. Das ist eine Zeichenfolge Wir müssen im Wesentlichen auf diese URL klicken, um die Bilddaten herunterzuladen und diese Bilddaten dann in einem SwiftUI-Bild anzuzeigen Zum Glück macht SwiftUI das mit einem Synchronisationsimage, bei dem Sie einfach eine URL eingeben, und das wird asynchron geschehen und das wird Es wird einen Hintergrundarbeiter schicken, der zu dieser URL geht, die Bilddaten abruft, zurückkommt und sie dann in einem Bild anzeigt Wir werden diesen verwenden, weil er uns einen Verweis auf die Swift-UI-Bildansicht gibt , was es uns ermöglicht, einige zusätzliche Modifikatoren hinzuzufügen es uns ermöglicht, einige zusätzliche Modifikatoren hinzuzufügen wenn wir die Ecken anpassen wollen, wir wollen das Seitenverhältnis anpassen, das können wir tun Mit dem Platzhalter können Sie angeben , was angezeigt werden soll, während der Hintergrundarbeiter die Bilddaten abruft. Wir werden einen Spinner zeigen. Offensichtlich ist die URL, wohin es gehen sollte, um das abzurufen. Da all diese Optionen optional sind, haben wir möglicherweise keine Bild-URL, also müssen wir zuerst nach dieser suchen. Also werden wir sagen, ob let URL gleich ist, und wir werden versuchen, aus dieser Zeichenfolge eine URL-Instanz zu erstellen aus dieser Zeichenfolge eine URL-Instanz Wenn es in der Lage ist, dies zu erstellen, werden wir dies als Parameter an den Async-Image-Aufruf oder die Sorry View-Ansicht übergeben als Parameter an den Async-Image-Aufruf oder die Sorry View-Ansicht Dort werden wir das weitergeben. Was ist nochmal die Saite? Nun, es sind Videoschnipsel-Thumbnails, mittlere URL. Wenn es nicht existiert, dann existiert es nicht Dann können wir kein Bild zeigen. Was müssen wir hier also tun, um den optionalen Standard bereitzustellen, wenn der optionale Wert Nil enthält. Sei es muss eine Zeichenfolge sein. Also ja, wenn einer dieser Teile keine URL ist. Wenn es diese Zeichenfolge nicht erstellen kann, geben wir einfach eine leere Zeichenfolge ein und versuchen, eine URL zu erstellen, und es wird fehlschlagen, und es wird nichts von dem hier enthaltenen tun. Lassen Sie uns nun unser Async-Image einrichten. Wir werden dieses hier verwenden, wie gesagt, und wir werden die URL übergeben, die erstellt wurde, und dann werden wir hier doppelklicken. Das ist der. Dies ist der Verweis auf das Bild, das angezeigt wird, sobald die Daten zurückkommen. Dies ist das Bild , das angezeigt wird. Dieser Platzhalter, wir haben eine weitere praktische, schnelle Ansicht der Benutzeroberfläche, die wir verwenden können, ist die Fortschrittsansicht, die nur ein Drehfeld sein wird Was das Bild hier betrifft, wollen wir ihm auf jeden Fall ein paar Modifikatoren hinzufügen, zum Beispiel eine veränderbare Größe, sodass es vergrößert oder verkleinert werden kann, und wir wollen Welches ich also gerne verwende, hängt von den Umständen ab Warum versuchen wir es vorerst nicht einfach mit Fill? Und wir werden sehen, was passiert. Geben wir ihm auch ein bisschen eine abgerundete Ecke. Wir werden Clip Shape machen. Wir sagen, der Radius der abgerundeten rechteckigen Ecken ist zehn. Lassen Sie uns nun sehen, ob das funktioniert. Wir gehen zurück zum Feed, überprüfen Sie es einfach noch einmal. Es wird Instanzen zur Videoüberprüfung erstellen und das Video weiterleiten, und dann sollten die Bilder heruntergeladen werden. Wir zeigen die Titel hier eigentlich nicht. Alles klar? Nun, das war ziemlich einfach. Das musst du einfach so zugeben, wir haben das. Wenn du die Titel anzeigen möchtest, könntest du sie entweder anzeigen, die Titel hängen nicht vom Bild ab, oder? Sie könnten das alles also in einen V-Stapel legen und dann zum Beispiel den Titel darunter platzieren. Also könnten wir versuchen, das hier zu tun. Und das wäre der Titel. Videotitel, und dann können wir ihn sogar fett machen. Ist es kein Titel? Oh, tut mir leid, den Titel ausschneiden Wenn es nicht existiert, zeigen wir eine leere Zeichenfolge Wir können eine Linie erstellen, wir können zum Beispiel etwas Polsterung hinzufügen. Vorne, und dann könntest du einfach etwas Polsterung insgesamt oder vielleicht auch nur zur Vertikalen hinzufügen einfach etwas Polsterung insgesamt oder vielleicht auch nur zur Vertikalen Okay. Die Ecken sind für meinen Geschmack etwas zu abgerundet Also machen wir einfach fünf. Ordnung. Und so einfach ist es, das zu tun. In Ordnung, unsere Feed-Ansicht sieht ziemlich gut aus. Wir müssen dem Benutzer lediglich erlauben, auf das Vorschaubild zu tippen, um das Video anzusehen Das werden wir in der nächsten Lektion tun. Wir sehen uns dort. 7. Lektion 07: Videoplayer und Videodetailansicht: In der letzten Lektion haben wir die Feed-Ansicht fertiggestellt. In dieser Lektion ermöglichen wir dem Benutzer, auf das Vorschaubild zu tippen , um die Detailansicht aufzurufen und das Video anzusehen Lassen Sie uns gleich eintauchen. Also haben wir die Videodetailansicht bereits ausgeblendet Lassen Sie uns damit beginnen, dies auszulösen und es als Blatt anzuzeigen , wenn der Benutzer auf ein Video tippt. Wie werden wir das machen? Es gibt also ein Blatt, das Sie an eine Immobilie binden können. Hier oben kannst du definieren, was wir als ausgewähltes Video definieren werden. Wenn der Benutzer auf eine Videozeile tippt, nehmen wir diese Geste auf und legen die ausgewählte Videoeigenschaft fest, wodurch dieses Blatt ausgelöst wird, und dann ist es der Inhalt, den Sie auf diesem Blatt anzeigen möchten Wählen wir das aus. Lassen Sie uns diese Zustandseigenschaft hier oben erstellen und sie ausgewähltes Video nennen. Das wird zuerst Null sein. Wir werden uns an das ausgewählte Video binden. Und was den Inhalt angeht, den Inhalt. Dieser Parameter speichert den Wert des ausgewählten Videos. Hier zeigen wir die Videodetailansicht. Okay. Lassen Sie uns die Tippgeste hier festhalten. Bei der Tippgeste stellen wir also das ausgewählte Video auf V ein. Und mal sehen, ob das funktioniert Perfekt. Lassen Sie uns nun im nächsten Schritt die Videodetails in das Blatt übernehmen. Wir werden das in der Videodetailansicht hier tun. Nehmen wir ein Video an. Nochmals, ich werde die Vorschau umhauen. Dann werden wir in der Feed-Ansicht nun V eingeben, was das ausgewählte Video ist. Lassen Sie uns das jetzt ein wenig konfigurieren . Wir werden ein Blatt haben, auf dem der obere der Videoplayer und der untere Teil der Titel in der Beschreibung ist . Wir benötigen hier also ein V-Stack-Setup und setzen die Ausrichtung auf „ Leading“, weil das für den Text Sinn macht. Wir werden unseren Videoplayer hier haben, zu dem wir gehen werden, und wir werden den Titel und die Beschreibung hier haben. Ich möchte, dass das scrollbar ist, falls der Inhalt umfangreich ist. Innerhalb des Scroll-V werde ich einen weiteren V-Stapel erstellen. Dieser sollte ebenfalls links ausgerichtet sein. Ich weiß nicht, ob ich dann den ersten brauche. Hier möchte ich den Titel in die Beschreibung aufnehmen. Das wird einen Text und es wird ein Videoausschnitt-Titel sein Wenn das nicht existiert, gebe ich eine leere Zeichenfolge ein, und ich werde diese eine Überschrift schreiben wollen, und ich werde sie auch fett formatieren Ich füge unten etwas Polsterung hinzu , nur um etwas Platz zu schaffen Stattdessen kann ich hier tatsächlich den Abstand hinzufügen, da hier nur zwei Elemente enthalten sind Ich werde genau dort den Abstand von 30 hinzufügen. Ich muss die Polsterung nicht dort platzieren, und dann füge ich die Beschreibung ein Dies wird stattdessen eine Beschreibung des Videoausschnitts sein. Mal sehen, wie das aussieht. Ich habe den Titel. Ich habe die Beschreibung, aber ich muss etwas Polsterung hinzufügen Ich werde die Polsterung zur Scroll-Ansicht hinzufügen. Sollte ich nur horizontal arbeiten? Nein, wahrscheinlich werde ich es in alle Richtungen hinzufügen. Ordnung. Das sieht ein bisschen besser aus. Oh, Scroll-Anzeige. Lass uns das auch loswerden. Die Scroll-Anzeige ist ausgeblendet. Okay. In Ordnung. Keine Scroll-Indikatoren. Das sieht gut aus. Jetzt möchte ich einen Moment damit verbringen und darüber sprechen , welche Optionen wir haben, wenn es darum geht, YouTube-Videos in unserer App anzuzeigen. Jetzt könnten wir eine Webansicht verwenden und ein eingebettetes YouTube-Video anzeigen . Sie haben aber auch eine Client-Bibliothek, mit der wir YouTube-Videos mit der YouTube Helper-Bibliothek in IOS-Anwendungen einbetten können. Im Grunde machen sie dasselbe, aber sie machen es, weil sie einen I-Frame-Player verwenden. Sie machen es Ihnen etwas einfacher, aber hier wird Ziel C verwendet. Das ist also auch eine Option, die etwas einfacher ist, als Ihre eigene Webansicht anzuzeigen und zu versuchen, den Player wie den eigentlichen Web-Einbettungscode dort einzufügen. Die dritte Option , die ich untersucht habe , war die Verwendung des Tube Player Kit. Und diese Bibliothek funktionierte sehr gut mit Swift. Juan war sehr einfach zu bedienen und hat ehrlich gesagt viel Zeit gespart. Also habe ich die anderen Optionen nicht einmal in Betracht gezogen, und genau das werden wir mit dieser Demo verwenden. Diese Bibliothek von Sven scheint also ziemlich aktiv zu sein, wie Sie hier sehen können letzte Ausgabe wurde vor zwei Tagen geschlossen und die letzte Umfrageanfrage wurde vor etwa einem Monat zusammengeführt. Wie bei allen Bibliotheken von Drittanbietern, wenn Sie sie verwenden, stellen Sie eine Abhängigkeit von Ihrem Projekt her. Um auf Code von Drittanbietern angewiesen zu sein. Und das Risiko besteht darin , dass der Code eines Drittanbieters veraltet, nicht gepflegt wird und fehlerhaft wird, dann auf Ihre App auswirkt Hier gibt es also eine Risiko-Rendite-Überlegung. Auf der einen Seite könnten Sie Ihren eigenen Code entwickeln und sogar abhängig von dieser Bibliothek selbst ist Code von Drittanbietern. Ich meine, es wäre das Beste, einen eigenen zu entwickeln, aber das würde den größten Aufwand und die meiste Zeit in Anspruch nehmen. Vergleich zur Verwendung einer Bibliothek eines Drittanbieters sparen Sie Zeit und müssen abwägen, ob sich das Risiko lohnt oder nicht. In diesem Fall war das wirklich einfach zu bedienen und funktionierte wunderbar in der Swift-Benutzeroberfläche. Scheint aktiv zu sein, ich denke, das Risiko ist gering, deshalb habe ich mich dafür entschieden. Lassen Sie uns eintauchen und dieses Tube-Player-Kit in unser Projekt integrieren . Drücken wir auf diese blaue Schaltfläche mit der Aufschrift „Verwenden Sie dieses Paket“, und wir können den Swift Package Manager verwenden , um es direkt in unser Projekt zu importieren. Wie ihr wisst, haben wir in Lektion zwei ein Demo-Projekt erstellt, um das Senden von Netzwerkanfragen und das Empfangen von Antworten von der YouTube-Daten-API zu testen Senden von Netzwerkanfragen und . Das wäre eine perfekte Gelegenheit, dasselbe zu tun. Wann immer ich etwas Neues ausprobiere, starte ein neues ExCo-Projekt, teste es, wenn es funktioniert, nimm es in dein Hauptprojekt Ich habe das gemacht Also werde ich das nicht noch einmal mit dir durchgehen und dann eine zusätzliche Lektion damit verbringen Ich werde es einfach direkt in mein Hauptprojekt integrieren. Aber wenn du in Zukunft an deinen eigenen Sachen arbeitest, möchte ich dich nur wissen lassen, dass du vielleicht darüber nachdenken solltest, das nicht zu tun, vor allem, weil wir hier keine Quellcodeverwaltung verwenden. Wenn Sie mit Ihrem Code herumspielen, Dinge importieren und etwas durcheinander bringen, ist es schwierig, ein Rollback vorzunehmen, oder? Testen Sie die Dinge also auf jeden Fall zuerst in einem anderen Projekt. Das heißt, lassen Sie uns das direkt in unser Ding importieren. Gehen Sie also zur Datei Ad Package Dependencies und ich habe diese URL kopiert. Wir geben es einfach genau dort und da ist es, das uTube Player Kit Sie können weitermachen und auf Werbepaket klicken. Und während das so weitergeht, kommen wir wieder hierher und scrollen nach unten und schauen uns an, wie wir dieses Ding verwenden. Wenn Sie sich also diesen Codeausschnitt ansehen, importieren Sie zuerst das UT Player Kit und erstellen dann die Tube-Player-Ansicht Und es sieht so aus, als ob Sie die URL einfach so Also als ersten Test, warum machen wir nicht einfach genau das? Das werden wir kopieren. Wir werden wieder hierher gehen. Lass uns ein Paket hinzufügen. Da ist es. In der Videodetailansicht importieren wir das Kit für zwei Spieler und fügen es dann unter Videoplayer einfach genau dort Und wir werden das jetzt ausführen und sehen, was passiert. Es ist gut, es zeigt ein Video, aber beachten Sie, dass der Frame größer ist als der Platz, den wir haben. Es spielt. Das ist großartig. Die Kontrollen sind da. Das Video selbst sieht nicht breiter aus als der Raum, den wir haben. Es sieht so aus, als ob es der Breite entspricht. Es sieht jedoch so aus, als ob oben und unten viel schwarzer Raum vorhanden ist oben und unten viel schwarzer Raum vorhanden , denn wenn man das hochlädt, nimmt es so viel Höhe ein. Möglicherweise müssen wir die Breite festlegen einfach den Rahmen dafür so einstellen , dass er in den Raum passt, den wir haben. Außerdem möchten wir dieses Video nicht anzeigen. Warum versuchen wir nicht, hier dynamisch unsere eigene ID einzufügen hier dynamisch unsere eigene ID einzufügen Das wäre Snip it. Aber wie Sie sehen, stimmt hier etwas nicht, denn während ich das versuche, funktioniert es nicht Die automatische Vervollständigung wird nicht angezeigt. Also können wir es auf diese Weise eigentlich nicht machen. Wir können nicht einfach einen Platzhalter in einen solchen Parameter einfügen . Warum schauen wir uns nicht einige andere Methoden an , mit denen wir das verwenden können und die vielleicht für uns funktionieren würden? Okay. Also das habe ich letztendlich genau hier benutzt. Sie können den YouTube-Player also zuerst so konfigurieren, wo Sie tatsächlich eine dynamische Video-ID übergeben können, und dann können Sie diese Videoplayer-Ansicht verwenden. Also lass uns das kopieren. Ist aus, lass es uns hier konfigurieren. Dann werden wir dort unsere ID hinzufügen. Dies wäre die Video-ID der Video-ID des Videosatzes. Wenn das zufällig Null ist, übergeben wir eine leere Zeichenfolge. Ich möchte nicht, dass es automatisch abgespielt wird, also setze ich das auf False dann mit dieser Konfiguration zu dieser Seite zurückkehren, Wenn Sie dann mit dieser Konfiguration zu dieser Seite zurückkehren, können Sie sehen, dass Sie diese Konfiguration einfach in die YouTube-Player-Ansicht übergeben können in die YouTube-Player-Ansicht Ja, es sieht also ungefähr so aus. Ja, das haben wir getan. Wir haben etwas konfiguriert und können es dann so in die YouTube-Player-Ansicht übergeben. Ich habe genau den Codeausschnitt vergessen als ich das durchgesehen habe Aber wenn du dir die Zeit nimmst, das durchzulesen, gibt es noch viel mehr coole Sachen, die ich tun kann Aber ich zeige dir hier einfach, wie es geht. Wenn du die Konfiguration so erstellst, das ist Tube Player, du kannst es sogar so nennen, okay. Anstatt die URL direkt hier anzugeben, können wir den Tube-Player übergeben, das, was wir hier erstellt haben. Ich werde es ausführen. Und das ermöglicht uns, diese dynamische ID anzugeben. Da ist mein Video. Da funktioniert der Rahmen nicht richtig, oder? Aber es zeigt das richtige Video an und es funktioniert. Perfekt. Jetzt müssen wir herausfinden, wie wir diesen Frame für diesen Videoplayer so einstellen können, dass er in den Raum passt. Sie würden einfach Frame wählen und Breite und Höhe festlegen. Das Problem ist, dass wir wissen müssen, was das ist. Mit dem Geometrieleser können wir uns ansehen, wie viel Breite wir haben. Und wir werden im Wesentlichen den Geometrieleser hier oben erstellen. Und wir werden den gesamten V-Stack ausschneiden und ihn in den Geometrieleser einfügen. Da sich dieser Vtac hier im Geometrieleser befindet, haben wir Zugriff auf den Proxy Die Breite entspricht der Proxy-Punktgröße, die uns die Breite des Bildschirms gibt Da es sich um einen Geometrieleser handelt, besteht der Zweck darin, die Größeninformationen zu lesen. Dieser Parameter gibt uns also einen Verweis auf die Größen. Jetzt, wo wir die Breite haben, können wir sicherstellen, dass es die richtige Breite ist, aber wir müssen auch eine richtige Höhe festlegen. Nur die Breite einzustellen wird nicht funktionieren. Die Frage ist, worauf sollten wir die Höhe einstellen? Wie finden wir das heraus? Nun, wir können die Höhe als Verhältnis zur Breite ausdrücken. Wir müssen herausfinden, welche YouTube-Videos angezeigt werden. Was ist das Seitenverhältnis? Ein Hinweis, den wir haben, ist, wenn wir zu Proxy Maan zurückkehren, kann ich Proxy Maan wieder öffnen Aber im Grunde möchte ich herausfinden, lassen Sie uns das einfach für eine Sekunde kommentieren Was ist das Verhältnis zwischen Breite und Höhe? Es gibt verschiedene Möglichkeiten, dies zu erreichen. Aber schauen wir uns das an. Ich werde mir den Hinweis anhand der Größe der Vorschaubilder holen. Wenn wir uns die Artikel ansehen und uns die Vorschaubilder ansehen, haben wir das mittlere Bild gemacht, 320 mal Wenn die Breite 320 ist, was ist dann die Höhe 320/180. Das Verhältnis ist, dass die Breite 1,78 ist, 78-mal größer als Wir würden das umkehren, um die Höhe zu erhalten , weil wir die Breite haben Wir würden 320 durch diese Zahl teilen, um 180 zu erhalten. Mal sehen, ob die Mathematik aufgeht. T 20/1 0,7 s78 gibt uns 180. So werden wir die Höhe ermitteln. Kommen wir zurück, wenn Proxy-Geometrieleser uns die Breite gibt, dann könnten wir die Höhe berechnen, indem wir die Breite der Proxygröße dividiert durch was nehmen ? Ja, acht. Lass uns einen Blick darauf werfen. Das sollte also funktionieren. Und tatsächlich haben wir die passende Breite und Höhe. Das Coole war, dass das auch so funktionieren würde. Vor allem, wenn wir den sicheren Bereich ignorieren. Deshalb siehst du diesen Teil hier. Wenn wir zur Home-Ansicht zurückkehren, können wir sagen, den sicheren Bereich ignorieren. Das könnte es zum Laufen bringen. Da ist diese Polsterung, also möchte ich diese Polsterung nicht hinzufügen Ich möchte, dass die Tab-Ansicht voll ist. Perfekt. Aber jetzt müssen wir der Feed-Ansicht eine Polsterung hinzufügen Wir werden es wahrscheinlich hier reinstellen. Äh, legen wir die Polsterung an. Oh, wahrscheinlich nur horizontale Polsterung . Okay. Okay, unsere YouTube-Player-App sieht gut aus und fühlt sich gut Ich hoffe, du hast viel gelernt und ich hoffe, du konntest mitmachen Bitte schauen Sie sich unsere anderen Kurse auf der Plattform an. Ordnung. Danke fürs Zuschauen Wir sehen uns im nächsten Kurs