Comment créer une application de lecteur vidéo de l'API YouTube

1. Leçon 01 : Explorer l'API de données YouTube: m'appelle Chris et je vais vous montrer comment créer cette application IOS qui affiche des vidéos de YouTube. Maintenant, voici à quoi ressemble l'application. Vous pouvez configurer l' application pour afficher des vidéos individuelles ou toutes les vidéos d'une playlist. À présent, les données sont récupérées via l'API de données YouTube Ainsi, si vous modifiez la liste de lecture en ajoutant ou en supprimant des vidéos, elle sera automatiquement reflétée dans l'application sans que vous ayez à réviser le code. Oh, et vous pouvez accéder aux vidéos pour les regarder également ou lire la description de la vidéo. Bien, voyons maintenant quelles compétences vous allez acquérir après avoir terminé cette application Après avoir terminé cette application, vous allez acquérir de l'expérience avec l'API de données YouTube. Vous allez également apprendre à envoyer et à recevoir des requêtes réseau depuis l'application. Ce faisant, vous allez en apprendre un peu plus sur la simultanéité iOS, en particulier en utilisant A Sync Wait. Et vous allez apprendre à déboguer trafic réseau à l'aide de Pxy Man , un outil tiers gratuit Et cela vous permettra de résoudre tout problème lorsque vous passez vos appels réseau Ensuite, lorsque nous récupérons les données de l'API UTube, nous devons les transformer en quelque chose d'utilisable dans notre application C'est donc là que vous allez en apprendre davantage sur l'analyse JSON. Nous allons devoir stocker notre clé d'API en toute sécurité dans notre projet de code X afin qu' elle ne soit pas accidentellement divulguée. Tu vas apprendre à le faire. Et pour ce qui est de l'application, vous allez apprendre à lire des vidéos UTube dans votre application IOS Nous allons utiliser une bibliothèque tierce appelée uTube Player Kit, et nous allons intégrer cette bibliothèque dans XCode à l'aide de Swift Package Manager Ensuite, vous allez apprendre quelques techniques rapides en état d'ivresse telles que l'utilisation de listes, lecteur de géométrie, d'une image synchronisée, vue de progression, de vues défilées une vue de progression, de vues défilées, pour n'en nommer que quelques-unes, et bien d'autres encore, uniquement en termes de création d'interfaces utilisateur et de capture des interactions utilisateur Faisons un bref aperçu de la façon dont tout cela fonctionne au cas où vous débuteriez avec les API. Si vous avez déjà utilisé les API, ce ne sera qu'une petite critique pour vous. Désormais, une API est une interface à laquelle vous pouvez vous connecter pour envoyer et recevoir des données. En termes plus simples, vous pouvez considérer une API comme un ensemble d' URL auxquelles votre application peut accéder pour récupérer des données ou pour envoyer des données Il existe maintenant de nombreuses API. Certains sont gratuits et d'autres sont payants. Mais la plupart des grandes plateformes comme Facebook, X, Spotify, Google, disposent toutes d'API vous permettant de travailler avec cette plateforme ou d'en extraire des données. Certaines API sont uniquement axées sur les données, telles que la récupération de recettes cours d'actions ou de données météorologiques, etc. Pouvoir utiliser des API dans votre application est très, très puissant. Que se passe-t-il réellement et comment utilisez-vous une API depuis votre application ? Eh bien, depuis votre application IOS, vous envoyez une requête réseau à un point de terminaison d'API, qui, rappelons-le, n'est qu'une URL. Dans votre demande réseau, vous spécifiez les données que vous souhaitez récupérer. Dans certaines API, vous devez également vous identifier dans la demande. Cette partie d'identification est appelée authentification. L'API reçoit votre demande et elle vous authentifie et s' assure également que votre demande est valide Notez que toutes les API ne nécessitent pas d'authentification, mais la plupart en ont besoin. Désormais, si votre authentification est valide et que votre demande est valide, l'API collectera les données et enverra une réponse à votre application. La réponse contient les données que vous avez demandées, et elle est généralement au format JSN Lorsque votre application reçoit la réponse, elle peut lire les données au format JSN, puis les convertir en données qui peuvent être affichées à l'écran pour que l'utilisateur puisse les voir Ce processus de conversion des données JSN en données utilisables dans votre application s'appelle l'analyse JSN . C'est bon. C'est le processus que vous allez apprendre à effectuer avec l'API YouTube. Jetons maintenant un coup d' œil à l'API YouTube. Nous sommes ici l'API YouTube Data. Vous pouvez consulter cette page à l'adresse developers.google.com Je veux que vous consultiez cette section intitulée Ajouter des données YouTube et cliquer sur des références. Vous pouvez voir ici tous les points de terminaison disponibles dans cette API auxquels notre application peut envoyer une demande Maintenant, n'oubliez pas que ces points de terminaison ne sont que des URL. Prenons donc, par exemple, la recherche. Regardons d'abord la vue d'ensemble. Cela vous décrit ce que fait ce point de terminaison, comment vous interagissez avec lui, et il répertorie les différentes méthodes, les différentes manières dont vous pouvez utiliser ce point de terminaison. Jetons donc un coup d'œil à la liste. Lorsque vous cliquez dessus, vous voyez cette modification apportée à cette section ici et aux cas d'utilisation courants. Il s'agit essentiellement de rechercher quelque chose sur YouTube. Vous pouvez rechercher ici quelques cas d'utilisation par mot clé, ce qui est probablement l'exemple type. Localisez des événements en direct ou vos vidéos, par exemple. Si vous faites défiler l'écran un peu plus bas, c'est la partie importante ici. Cela vous indique l' URL exacte à laquelle vous devez accéder. Il s'agit du point de terminaison et du type de demande. Lorsque vous envoyez une demande réseau, elle peut être de plusieurs types différents, et get est généralement utilisé lorsque vous souhaitez récupérer des données à partir de l'API. Non seulement vous devez envoyer une demande à cette URL, mais vous devez également spécifier les paramètres de votre demande. N'oubliez pas. Si vous recherchez quelque chose sur YouTube, que recherchez-vous ? Vous ne pouvez pas simplement dire « recherche ». Ici, ces paramètres décrivent ce que vous pouvez spécifier avec votre demande afin d'indiquer à l'API ce que vous souhaitez récupérer ou ce que vous recherchez dans ce cas. Jetons un coup d'œil ici. Une chose que je dois mentionner ici est que dans la section des paramètres, il n'y en a pas toujours, mais il peut y avoir des paramètres obligatoires. N'oubliez pas que dans cet aperçu, j'ai indiqué que l'API vérifie votre demande pour voir si elle est valide. Eh bien, s'il s'agit d'un paramètre obligatoire, vous devez spécifier ces informations. Vous pouvez omettre les options facultatives, mais vous devez inclure celles qui sont obligatoires dans le cadre de votre demande. Quel est ce paramètre obligatoire ? Cette partie, elle s'appelle pièce. Ce paramètre spécifie une liste séparée par des virgules d' une ou de plusieurs propriétés de ressources de recherche que la réponse de l'API inclura Définissez la valeur du paramètre pour l'extraire Il est donc un peu difficile de déterminer ce que ces choses signifient. Mais ce que je dis généralement, c'est de l'essayer. L'étape suivante consiste à suivre cette API, définissons ce paramètre pour l'extraire comme indiqué, puis voyons ce qui sera renvoyé Et si ce n'est pas ce que nous recherchons, nous pouvons probablement voir ce que nous pouvons spécifier d'autre pour ce paramètre. Maintenant, ce que je recherche, c'est si nous voulons rechercher quelque chose de spécifique, comme un mot clé, où ferions-nous cela ou que ferions-nous ? Il s'agit d'une recherche par emplacement. Il s'agit d'une recherche par événement. Il s'agit de rechercher des types de chaînes. Chaîne spécifique, vous pouvez rechercher le nombre de résultats que vous souhaitez. C'est celui-là. Le paramètre Qe spécifie le terme de requête à rechercher. Si vous souhaitez rechercher des vidéos concernant, exemple, le jardinage, vous devez mettre le mot-clé jardinage dans ce paramètre. Je vous montrerai un peu plus tard comment attribuer ces données à ces paramètres, mais nous n'allons pas approfondir la question. Je voulais juste vous donner un aperçu de l'API YouTube et de tous les points de terminaison disponibles Et aussi le fonctionnement de ces points de terminaison. Vous avez découvert l'URL, il s' agit de l'URL à laquelle vous allez envoyer la demande. s'agit de votre type de demande, Il s'agit de votre type de demande, et vous devez spécifier certains paramètres obligatoires , tandis que d'autres sont facultatifs pour donner plus de contexte à votre demande. Maintenant, le point de terminaison que nous allons utiliser dans cette série de vidéos, euh, souvenez-vous que cette application peut afficher n'importe quelle vidéo YouTube, et elle peut la lire dans l'application. Donc, pour mon cas d'utilisation, je souhaite afficher une liste de vidéos d'une playlist spécifique , car j'ai une chaîne YouTube et j'ai des listes de lecture dont je souhaite afficher les vidéos. Donc, le point de terminaison que je vais utiliser, ce sont les listes de lecture ici, et je vais utiliser En fait, je crois que c'était le cas, je ne me souviens pas s'il s'agissait d'une playlist ou de vidéos à ce stade. OK. Jetons donc un coup d' œil à ce point de terminaison. Voici donc le point de terminaison de la liste de lecture, get. Et si nous examinons le cas d'utilisation, voyons voir. Il récupère toutes les listes de lecture ou, oui, toutes les listes de lecture d'une chaîne. Ce n'est pas ce que je veux. Celui-ci l'est, voyons voir. La requête que j'utilise récupère une liste de lecture spécifique, et je crois que c'était ce point de terminaison, car il y a, voyons voir, l'identifiant qui indique que nous sommes en train d'être récupérés Ouais. C'est ce que j'ai utilisé. Donc, au lieu de récupérer toutes les playlists de la chaîne, j'en voulais une en particulier J'ai donc dû inclure ce paramètre ici, qui s'appelait ID, et c'est l'ID de la playlist spécifique que je voulais. Et puis, dans cette playlist, j'ai également trouvé les vidéos. Après avoir terminé cette série de vidéos, suivi et appris à utiliser cette API de données YouTube, n'hésitez pas à modifier le mode de fonctionnement de l'application. Vous pouvez implémenter la recherche dans votre application si vous le souhaitez. Il suffit de mettre un champ de texte, lorsque l'utilisateur saisit quelque chose, appelez cela ce point de terminaison. Entrez le mot clé recherché par l'utilisateur et renvoyez une liste de résultats vidéo, et l'utilisateur pourra la lire directement dans l'application. Ce que je vais vous montrer dans la série de vidéos c'est utiliser ce point final, montrant une liste spécifique de vidéos. Vous pouvez également créer votre propre playlist ou sélectionner des vidéos spécifiques que vous souhaitez diffuser, et vous pouvez utiliser un autre N'hésitez donc pas à personnaliser l'application. Mais je vous recommande, surtout si vous débutez avec les API et les réseaux, suivre cette série de vidéos, d'attendre la fin, familiariser une fois que vous aurez obtenu le résultat, puis de la personnaliser. Passons maintenant à l'authentification, car cette API de données YouTube doit identifier qui vous êtes avant de communiquer ses données. Maintenant, avant de vous montrer la partie authentification YouTube, je tiens à souligner cette ligne ici. Ces points de terminaison ont tous un impact sur les quotas et vous indiquent coût d'envoi d'une demande et obtention d'une réponse de la part de ce point de terminaison, et cela a tout à voir avec l'authentification. Passons maintenant à cela. Nous allons maintenant cliquer sur Guides. Généralement, dans le cas de la documentation de l'API , tout le processus d'authentification se fait dès le début. Ici, il vous explique comment procéder. Passons à la vue d'ensemble. En fait, examinons les informations d'identification ici, vous verrez qu'il existe deux types différents, deux techniques différentes que vous pouvez utiliser pour cela. L'un est OOF et l'autre les clés API. Désormais, la plupart des API utilisent l'une ou l'autre, et parfois les deux. Mais si je devais citer un chiffre, je dirais que 90 % des API peuvent être utilisées avec des clés d'API. Permettez-moi de vous expliquer brièvement la différence entre les deux. authentification par clé API consiste à créer un compte. Elle vous donne une longue chaîne de lettres et de chiffres, qui constitue votre clé. Lorsque vous envoyez des requêtes réseau à l'API, vous devez spécifier cette clé avec votre demande qu'ils puissent associer cette demande à votre compte. Ensuite, ils peuvent également vous limiter de taux. Ils peuvent voir dans quelle mesure vous utilisez l' API, si vous êtes abusif, si vous l'êtes Oui, principalement en limitant le débit, vous donnant un quota, etc. Parce que vous pouvez imaginer que si c'est illimité et aussi rapide que possible et tout le monde utilise son API, cela pourrait la désactiver ou la charge du serveur pourrait être trop élevée. Cela leur permet de contrôler l'accès à leur API. S'ils trouvent que vous êtes abusif, ils pourraient bannir votre clé et vous ne pourrez plus faire de demandes. C'est ainsi que fonctionne l' authentification par clé d'API. Maintenant, OOP est un peu différent. C'est là que vous voyez généralement une zone de nom d'utilisateur et de mot de passe dans votre application, et l'utilisateur doit se connecter à son compte Google obtenir un jeton auprès de l'API. Vous attachez ensuite ce jeton aux demandes que vous envoyez. Il y a donc une distinction, car ils associent désormais ces demandes au compte Google de l'utilisateur. Vous n'êtes donc plus soumis à une limitation tarifaire. Cela ne compte pas pour votre quota, mais pour leur quota. De plus, ce que vous pouvez faire est différent car maintenant que Google peut identifier son compte Google, que l'utilisateur peut effectuer des tâches telles que liker une vidéo ou s'abonner à une vidéo, vous pouvez appeler ce type de point de terminaison Ou peut-être suivre un utilisateur. Alors que l'accès à la clé d'API, tous vos utilisateurs utilisent la même clé d'API, celle pour laquelle vous vous êtes inscrit, qui est associée à votre compte. C'est pourquoi avec les clés d'API, vous ne pouvez pas vraiment faire des choses comme aimer une vidéo ou vous abonner à une chaîne, car l'API ne sait pas qui est l'utilisateur Tout ce qu'ils peuvent voir, c'est qu'ils peuvent associer cette clé d'API au compte que vous avez créé. L'OOF est un peu plus impliqué, nous n'allons donc pas l'utiliser dans cette série de vidéos. Nous allons suivre la voie des clés d'API, et apprendre à le faire couvrira la grande majorité des API que vous rencontrerez. C'est bon. Passons maintenant à l'étape suivante qui consiste à créer un compte et à obtenir notre clé API. vous suffit donc suivre le lien de cette page d'informations d'identification, et je vais l'ouvrir dans un nouvel onglet, il vous demandera de vous connecter à votre compte Google. Comme je suis déjà connecté, j' ai accédé à cette page d'informations d'identification de mon projet. Vous n' aurez probablement pas de projet non plus. Laisse-moi donc essayer de revenir sur le tableau de bord. Vous devrez peut-être répondre à des questions d'intégration ou à quelque chose comme ça Mais vous finirez par arriver à une page qui ressemble à ceci car ici, il est dit que j'ai un projet, mais vous n'en aurez pas. Il se peut que vous soyez invité à créer un nouveau projet. Vous pouvez continuer et le faire, ou vous pouvez cliquer sur ce menu déroulant ici, puis nous pouvons choisir un nouveau projet, et nous pouvons créer un projet ensemble. Il semblerait que je ne parvienne pas à créer un nouveau projet. Mais c'est ce que tu ferais. Vous saisiriez le nom du projet. Vous le feriez, je ne pense pas que celui-ci soit trop important. Vous pouvez donc choisir n'importe quoi et appuyer simplement sur Créer. Ensuite, une fois que vous avez créé un projet, allez-y et naviguez jusqu' à ce projet. Donc pour moi, il y en aurait un juste ici. Et vous allez cliquer sur les informations d'identification, désolé, API et services, puis vous allez passer aux informations d'identification. Ensuite, une fois que vous arrivez ici, vous pouvez créer la clé d'API. Vous allez donc dire créer des informations d'identification. Créez une clé d'API. Il va en générer un pour vous. Ensuite, vous devrez le limiter à l'API de données YouTube. Ce serait bien. Permettez-moi rafraîchir l'écran. Est-ce que ça l'a fait pour moi ? Ça y est. Il s'agit de la nouvelle clé d'API qui vient d'être créée. Je vais cliquer dessus. Ensuite, je vais définir la restriction ici. Je vais le limiter à une API spécifique. La raison pour laquelle c'est une bonne idée est simplement que si la clé d'API tombe entre de mauvaises mains, cela limite ce qu'ils peuvent faire au simple fait d'utiliser l'API de données YouTube. Je pense que c'est une bonne pratique de ne pas se contenter de tout laisser libre cours à tout. Restreindre des éléments et supprimer des options est toujours une bonne chose, surtout si vous n'avez pas besoin de ces options, car cela limite les comportements inattendus. Il en va de même pour la programmation, non ? Et je ne fixerais aucune restriction à ce sujet. Je veux dire, tu pourrais le faire, mais ça va interférer avec tes tests, surtout si c' est la première fois. N'en choisissons donc aucun. Limitez la clé à l'API de données YouTube. Votre clé d'API est là. Tu ne devrais le montrer à personne. Je n'utiliserai pas cette clé, alors n'essayez pas de la copier et de l'utiliser. Je le supprimerai probablement après. Mais vas-y, sauvegarde-le. Et voilà. Vous avez une clé valide que vous pouvez utiliser, et vous allez utiliser cette clé dans votre projet IOS. C'est bon. Maintenant, nous sommes prêts. Bien, nous sommes maintenant prêts à commencer à utiliser l'API de données YouTube. Dans la leçon suivante, nous allons créer un projet de test pour nous connecter à l'API et en extraire des données. Je t'y verrai. 2. Leçon 02 : Obtenir des données à partir de l'API YouTube: Dans la dernière leçon, nous avons expliqué comment se connecter aux API et nous avons examiné l'API de données YouTube. Nous avons également créé notre clé API. Nous sommes maintenant prêts à commencer à récupérer les données de l'API. Plongeons-nous directement dans le vif du sujet. Très bien, testons donc l'obtention de données à partir de cette API. Maintenant, avant d'entrer dans le code X pour l'essayer, il existe un moyen encore plus simple de tester cette API directement depuis la documentation. Ils ont ce qu'on appelle un explorateur d'API, et vous pouvez tester les points de terminaison directement depuis ce panneau. Il ne vous reste plus qu'à vous assurer que vous êtes connecté à votre compte Google dans le coin supérieur droit. Il s'agit du même compte que celui avec lequel vous avez créé votre clé d'API dans la première leçon. Rappelez-vous comment nous avons dû nous connecter à notre compte Google et venir ici, créer un projet, puis créer une clé d'API. Ce qui va se passer tant que vous êtes connecté au même compte Google, c'est que lorsque vous utilisez cet explorateur d'API, il va récupérer cette clé d'API à partir de là et l'utiliser. Nous allons donc tester le point de terminaison. Maintenant, nous allons utiliser celui-ci, le point de terminaison des éléments de la liste de lecture. Parce que dans la leçon précédente, j'ai parlé de l'utilisation du point de terminaison de la liste de lecture, mais celui-ci ne vous donne en fait que des informations sur la playlist elle-même. Les éléments de la liste de lecture, c'est celui que nous voulons utiliser. Comme vous pouvez le voir, celui-ci est l'URL à laquelle nous devons envoyer la demande, c'est le type de demande, et c'est le seul paramètre obligatoire, et vous pouvez spécifier les différents niveaux de détail que vous souhaitez récupérer. Maintenant, la raison pour laquelle ils le font est que, pour vos besoins, vous n'aurez peut-être pas besoin de toutes les informations, et dans ce cas, vous pouvez peut-être spécifier un niveau de détail inférieur, ce qui permettrait d'économiser de la bande passante. Pourquoi récupérer plus d' informations que ce dont vous avez besoin ? Cela va prendre plus de temps, cela va prendre plus de bande passante, et ainsi de suite. J'ai découvert que pour cette application, j'ai besoin de la miniature, de l'identifiant vidéo pour afficher la vidéo, évidemment, de la miniature pour J'ai besoin du titre dans la description. Et c'est à peu près tout. Et Snippet est le niveau de détail dont j'ai besoin Il contient tout ce que je viens de mentionner. Maintenant, l'autre paramètre que je dois spécifier est l'ID de la liste de lecture car je souhaite récupérer toutes les vidéos d'une playlist spécifique. Lorsque j'ai utilisé ce point de terminaison pour la première fois, j'ai commis l'erreur de saisir l'identifiant de la liste de lecture dans ce paramètre, mais il n'a rien renvoyé, et je me suis rendu compte que, oh, je devais le mettre dans celui-ci. Ils commettront donc la même erreur. Maintenant, laissez-moi vous montrer comment obtenir l'identifiant de la liste de lecture que vous souhaitez. J'ai donc ici une liste de lecture que je souhaite utiliser, et gardez à l'esprit que vous pouvez utiliser n'importe quelle playlist de votre choix. Donc, tout ce qui se trouve après le signe égal ici, et avant toute esperluette, c'est l'identifiant de la playlist L'URL peut avoir quelque chose comme ceci, disons que n t est égal à un, deux, etc. Entre le signe égal et le signe final. Une fois que la liste est égale, il s'agit de votre identifiant de liste de lecture. Ne t'inquiète pas. Vous découvrirez très rapidement s'il s'agit de l'identifiant de la liste de lecture ou non, car si vous ne recevez aucune donnée à cet appel d'API, vous saurez que ce n'était pas réellement l'identifiant de la liste de lecture. C'est l'identifiant de ma liste de lecture. Je vais le copier. Ensuite, dans mon explorateur d'API, laissez-moi afficher ceci en plein écran. Je vais peut-être agrandir un peu le texte pour qu' il soit plus lisible. Sous ID de liste de lecture, je vais le coller. Je dois préciser une partie ici. N'oubliez pas qu'il peut s' agir de détails du contenu, d'un identifiant, d'un statut ou d'un extrait Un extrait est ce dont j'ai besoin. Je suis assise là. Vous pouvez également voir comment cela modifie l'URL à laquelle vous allez devoir envoyer une demande réseau. Si vous y jetez un œil, cela pourrait vous intéresser. C'est le point final que nous envoyons pour accéder à l'API, auquel envoyer une demande. Ensuite, les données que j'ai spécifiées ici dans les paramètres sont toutes là. Écoutez, P est égal à un extrait de code, ID de la liste de lecture est égal à cet identifiant, puis key est égal à votre clé API Maintenant, il n'y a plus de zone de texte à mettre dans ma clé API ici. Cela provient donc de votre clé que vous avez créée ici. C'est pourquoi vous devez vous assurer que vous êtes connecté au même compte et parce que c'est à partir de là que vous allez le récupérer. Je vais décocher Google O Auth. Je vais appuyer sur Exécuter. Si tout se passe bien, vous devriez obtenir une réponse de 200, ce qui signifie que c'est un succès, puis vous récupérerez toutes ces données. Maintenant, ce sont les données au format JSO dont je vous parlais qui proviennent de la réponse de l'API YouTube Et c'est à nous de transformer ces données. N'oubliez pas que ce processus s' appelle l'analyse JSM, pour transformer ces données JSON en données utilisables dans notre application Vous allez voir comment faire cela dans quelques leçons de la série, c'est sûr. Mais pour l'instant, je veux juste examiner très rapidement les données renvoyées et m'assurer que je dispose des informations dont j'ai besoin. Ici, je peux voir que j'ai le titre de la leçon, la description de la leçon, les miniatures, les URL des images, j'ai l' identifiant vidéo parfait Alors c'est pour la leçon 2 et ainsi de suite. J'ai tout Maintenant, si vous n'avez pas obtenu cette réponse, vous avez peut-être reçu une erreur ou quelque chose comme ça. Je vérifierais que cette partie correspond à un extrait correctement orthographié Je m'assurerais que l'identifiant de votre liste de lecture est correct. Peut-être que vous y avez saisi le mauvais segment de l'URL. Ensuite, je dois également m' assurer que je suis connecté au bon compte Google ayant accès à l'APiKY Et puis réessayez, appuyez sur Mignon. Maintenant, si cela ne fonctionne pas, pour une raison quelconque, vous ne pouvez pas le faire fonctionner. Ne vous inquiétez pas, souvenez-vous que ce n' était qu'un test rapide. Le vrai test est de pouvoir le faire dans du code X, dans une application SI. C'est ce que nous allons faire ensuite. Ne vous inquiétez pas si vous n'avez pas reçu cette partie, il s'agissait d'un test rapide de l'API. Nous allons maintenant démarrer notre projet de code X. Nous allons démarrer un projet de test. Ce ne sera pas notre vraie application. Lorsque j' essaie de nouvelles choses , j'aime simplement ouvrir un nouveau projet Xcode, essayer quelque chose, m'assurer que je peux le faire fonctionner avant l' intégrer dans mon projet principal C'est ce que nous allons faire ici. Nous allons créer un projet de code X test, et nous allons l'essayer. Faisons-le. Créons notre projet de code X. Je vais le faire et lancer un nouveau projet de code X. Sous IOS, choisissons l'application. Passons à la prochaine étape. Je vais l'appeler test YT API. Ce n'est pas notre application officielle. Ce ne sera qu'un test. L'interface est Swift GI, le langage est Swift, le stockage n'en est pas un. Tout cela n'est pas contrôlé. Cliquons sur Suivant. Je n'ai pas besoin de créer un dépôt Git. Je vais juste le créer sur mon bureau car ce sera un projet jetable OK. Faisons-le maintenant. Agrandissez-le un peu pour que nous puissions le voir, puis nous allons envoyer cet appel d'API dès son lancement à partir d'ici. Je veux ajouter une tâche ici, faire une tâche et ouvrir une paire de crochets Ici, nous allons passer l'appel réseau et imprimer les résultats. N'oubliez pas que je ne vais pas faire les choses de la meilleure façon. Je veux juste m' assurer que je peux me connecter à l'API à partir du code X. Recevez les bonnes données en retour, n'est-ce pas ? Nous effectuons des tests sur l'API. Et ce n'est pas nécessairement là que nous ferions les choses aussi bien dans notre vrai projet. Encore une fois, il s'agit d'un test. Je vous expliquerai en quoi consiste cette tâche un peu plus tard. Je vais relier tous les points pour toi. Mais pour l'instant, nous allons le faire dans ce petit bloc de tâches. Je veux donc que tu le dactylographies. Ensuite, laissez-moi taper quelques instructions de code et vous expliquer non pas des instructions de code, mais quelques commentaires et vous expliquer les étapes que nous allons suivre. Nous allons donc d'abord définir l' URL du point de terminaison avec des paramètres. Il s'agit de l'URL à laquelle nous allons envoyer la demande. Nous allons créer une instance d'URL. Nous allons créer une demande d'URL. Instance. C'est ce que nous allons réellement envoyer, puis nous allons envoyer la demande avec une session r. C'est un mécanisme avec lequel nous pouvons faire du réseautage. Ensuite, nous allons imprimer la réponse. Nous allons également devoir gérer les erreurs de gestion. OK. Essayons-le maintenant. Définissons d'abord le point final UL avec des paramètres. Si vous jetez un coup d'œil à l'explorateur d'API, vous verrez qu'il contient tout ce dont nous avons besoin, sauf que nous devons y insérer notre clé d'API. C'est essentiellement l' UL que nous devons atteindre. C'est déjà écrit pour nous. C'est ce que je vais prendre. Maintenant, je tiens à souligner une chose, dont je ne sais pas exactement pourquoi, si vous regardez ce domaine de point de terminaison, il est écrit Tube point google api.com Mais si vous regardez ça, c'est Google api.com slash YouTube J'ai utilisé les deux. Ils travaillent tous les deux. Ce serait probablement un peu plus sûr à utiliser car cela se trouve dans la documentation officielle, alors que cela se trouve dans cet explorateur APA, peut-être qu'il n'est tout simplement pas mis à jour. Ah, utilisons-le et ensuite nous pourrons le construire ensemble. Nous pouvons créer cette URL pour que vous sachiez également que vous avez une idée de la façon dont elle est créée. Je vais déclarer une constante. Je l'appelle chaîne d'URL. Maintenant, gardez à l'esprit que ce n'est pas ainsi que nous allons procéder dans notre vrai projet. Je vais juste écrire la chaîne complète ici, y compris la clé API et tous les paramètres. Donc, pour inclure des paramètres, vous mettez un point d'interrogation, puis à partir de là, ce sont des paramètres. Et puis le format pour spécifier les paramètres sera le nom du paramètre égal à la valeur du paramètre. Quel est le premier que nous devons spécifier ? Que diriez-vous d'une pièce ? Puisqu' une partie est requise de toute façon Nous allons donc taper part equals, et n'oubliez pas que vous pouvez spécifier une ou plusieurs d'entre elles. Il vous indique d'en spécifier plus, vous mettriez une virgule entre eux, mais nous n'avons besoin que d'un extrait Je peux mettre un extrait. Maintenant, pour spécifier un deuxième paramètre, vous devez saisir une esperluette, puis le même nom de paramètre est égal au format de valeur du paramètre Quel est le deuxième paramètre que nous voulons spécifier ? C'est l'identifiant de la liste de lecture ? Vous devez également le suivre en vous basant sur les capitales. Liste de lecture P en minuscules, suivie d'un grand identifiant I. Maintenant égal à : quel est l'identifiant de la liste de lecture ? Et remontez l'écran vers le haut et je vais récupérer mon identifiant à partir d'ici. Maintenant, cela a vraiment du sens. Si vous pouvez voir l'URL, vous pouvez voir la liste de lecture, puis il y a un point d'interrogation, qui signifie désormais paramètres . liste est égale au nom du paramètre, puis à la valeur du paramètre. Ensuite, la fin de la valeur du paramètre est esperluette, puis le deuxième paramètre et ainsi de suite C'est pourquoi je conseille de saisir tout ce qui se trouve après le signe égal, mais avant l'esperluette car il ne s'agit que du connecteur pour le paramètre suivant C'est l'identifiant de ma liste de lecture. Alors, mettons-le juste là. J'ai également besoin d'un autre paramètre. Mettons le signe esperluette, et cette clé est égale à ma clé d'API Maintenant, je n'arrête pas de le dire parce que je ne veux pas que quelqu'un regarde ça et dise : « Hé, tu ne devrais pas simplement y mettre ta clé d'API. Je sais Encore une fois, il s'agit d'un test, donc c'est ainsi que nous allons procéder dès maintenant. Lorsque nous travaillerons sur le vrai projet, nous obtiendrons la clé. Revenons donc à notre clé. Je vais juste montrer ma clé, et voici notre clé de test. Nous allons le mettre juste là. Il s'agit l'URL à laquelle nous allons envoyer notre demande. Et cette URL contient tous les paramètres de requête et l' APIK contient tout ce dont nous avons besoin Ici, nous allons créer l'instance d'URL. Supposons que l'URL soit égale à l'URL, puis nous allons utiliser celle-ci ici où vous pouvez simplement transmettre la chaîne URL. Mais gardez à l'esprit que lors de la création de cette instance d'UR, il se peut qu'elle ne puisse pas être créée avec succès, nous devons donc vérifier. Si vous connaissez Swift, si vous avez déjà suivi des cours, vous savez ce que sont les options, et leur création renvoie une instance d'URL facultative, ce qui signifie qu'elle risque d'échouer Nous devons d'abord vérifier cela. Une façon de le faire est de dire si égale à l'URL, n'est-ce pas Cela permet de vérifier. Si ce n'est pas NL, ce qui signifie qu'il a réussi à le créer, affectez-le à cette constante, puis nous y déplacerons ce contenu, puis nous pourrons l'utiliser. Mais s'il est nul, il va simplement sauter et descendre ici et il n' exécutera aucun de ces codes. Si c'est NL, cela signifie qu'il n'a pas réussi à créer la chaîne URL, et nous ne pouvons pas continuer de toute façon Créons maintenant la demande. Laissons la requête égale la demande d'URL, et nous allons transmettre cette instance d'URL que nous avons créée celle-ci. C'est ce que nous avons créé. Cela vérifie que ce n'est pas NL, puis si ce n'est pas NL, s'il n'est pas vide, il l'affecte à ceci, puis nous le transmettons la création de notre demande Maintenant que notre requête est dans cette constante, nous allons envoyer la demande avec une session URL. C'est une session URL que nous utilisons pour le réseautage. Session URL partagée. Il existe un objet de session partagée que nous pouvons utiliser. Nous n'avons pas à créer les nôtres. Et il existe une méthode appelée Data Four. Cela va récupérer les données pour une demande donnée. Regardez, tout est connecté. Nous pouvons maintenant transmettre cette demande à cette méthode. Mais jetez un œil. Il y a deux mots clés. Il y a une synchronisation et il y a des lancers. Ce sont deux choses différentes auxquelles nous devons faire face et que nous devons observer. Parlons d'abord des lancers en T. Ce mot clé indique que l'exécution cette méthode ou cette tâche est susceptible de créer une erreur. Cela va générer une erreur. C'est de là que vient ce mot. Et vous devez gérer l'erreur parce que vous voulez y répondre. Si quelque chose de grave se produit, vous devez prendre note de ce qui s'est passé, puis si c'est quelque chose dont vous pouvez vous remettre, vous en remettre. Si vous ne parvenez pas à vous en remettre, vous affichez peut-être un message à l'utilisateur pour lui vous affichez peut-être un message dire « désolé, quelque chose de grave s'est produit ou s' est produit, nous ne pouvons pas continuer ». Veuillez réessayer. Vous pouvez également choisir de ne pas gérer l'erreur et simplement de l'ignorer. C'est parfaitement raisonnable pour certaines erreurs. C'est ce que signifient les lancers. Et je vais vous montrer dans une seconde comment nous pouvons gérer cela. Maintenant, Async est un autre mot-clé qui indique que cette méthode est asynchrone Maintenant, nous devons prendre un petit moment. Si vous n'avez jamais fait de réseau auparavant, permettez-moi de vous le décrire rapidement avec ce scénario. Asynchronous, c'est quelque chose comme ça. Disons que vous attendez un colis chez vous. C'est un package très, très important. Ils ne vont pas le laisser à ta porte. Disons que c'est un nouveau Mac Book. Vous avez acheté un nouveau Mac Book, vous attendez qu'il arrive. Donc, vous attendez chez vous, ce sera dans le courant de la journée, mais vous ne savez pas exactement quand il sera livré. Mais tu dois vraiment aller acheter du lait. Hein ? Ou peut-être au déjeuner ? Disons que vous devez aller déjeuner et que vous n'avez rien à manger à la maison, vous êtes affamé. Alors, que faites-vous ? Tu peux partir et aller acheter ton déjeuner toi-même. Mais il est possible que ce Mac Book soit livré et que vous ne soyez pas chez vous. Ça va te manquer, et ce serait dommage. Eh bien, que faites-vous ? Eh bien, il s'avère que vous avez quelqu'un à la maison, vous pourriez être maman, pourriez être un père, vous pourriez être un frère, une sœur, vous pourriez être votre conjoint. Tu leur as demandé : « Hé, tu peux aller chercher le déjeuner ? Parce que je dois rester chez moi et attendre ce livre. Vous envoyez cette personne apporter le déjeuner et cette personne va déjeuner pendant que vous pouvez rester à la maison et attendre le colis. C'est exactement ce qui se passe ici. Asynchrone signifie que, tout comme vous envoyiez quelqu'un chercher Vous envoyez une tâche en arrière-plan ou un assistant en arrière-plan en termes informatiques, ils appellent cela un fil d' arrière-plan ? Vous l'envoyez pour effectuer cette opération réseau. Allez récupérer ces données depuis l'API YouTube. Pendant que je reste ici réponds à l'interaction des utilisateurs et je fais simplement en sorte que les lumières restent allumées, vous savez, en veillant à ce que tout fonctionne . Et lorsque vous recevez la réponse de l'API UTube, ils me recontactent pour me dire quelles sont ces données, et je m' en occuperai Maintenant, pourquoi est-ce important ? Comme la façon dont tu as dû rester à la maison et attendre ce Macbook. Si nous demandons au fil principal d'aller chercher les données envoyer la demande et d' attendre que les données reviennent, il n'y aura personne pour maintenir lumières allumées et les choses opérationnelles Si votre application ne sera pas en mesure de répondre à l' interaction de l'utilisateur ou de faire quoi que ce soit de ce genre. C'est pourquoi, avec ces tâches réseau de tri ou certaines tâches liées aux données, vous souhaitez envoyer un fil de discussion en arrière-plan, comme vous avez envoyé un assistant pour aller chercher le déjeuner C'est ce que signifie asynchrone. OK. Maintenant que vous savez ce que signifient ces deux mots clés, traitons d' abord celui des Throws car il existe une syntaxe spéciale que vous devez écrire afin de capturer l'erreur ou l' erreur potentielle qui peut se produire. Finissons de taper ceci, puis nous allons traiter ces deux mots clés un par un. Quatre données, et nous allons transmettre la demande. OK. Ainsi, lorsque quelque chose peut potentiellement générer une erreur comme celle-ci, nous devons la placer dans un bloc do catch. Alors tu fais quelque chose, non ? Vous faites ce qui peut placer l'erreur entre ces crochets ici. C'est donc ce que vous allez faire, puis vous allez détecter toutes les erreurs potentielles juste en dessous. Ensuite, vous pouvez imprimer toute erreur qui pourrait se produire. Il va juste le mettre dedans. Maintenant, une dernière chose que vous devez faire pour indiquer que vous comprenez que quelque chose peut générer une erreur est de mettre un mot clé tri devant celui-ci, n'est-ce pas ? Donc tu vas le faire. Vous allez essayer ceci, puis vous allez détecter toute erreur potentielle et vous allez l'imprimer. Cela gère donc le mot clé Throws pour exécuter cette méthode. Parlons maintenant du mot-clé async dont nous avons parlé Nous voulons envoyer cette tâche en arrière-plan pour récupérer les données. Et revenez quand ce sera le cas. Ce que nous devons faire, c'est mettre le mot clé weight. Cela signifie essentiellement qu' avant d' exécuter le code situé en dessous de cette ligne de code, il va attendre qu'il revienne. Pourquoi voulons-nous le faire ? Parce que disons qu'ici, nous allons imprimer la réponse. En fait, ici, nous allons mettre l'erreur de gestion ici et imprimer la réponse, nous allons la mettre ici. Bien sûr, nous ne voudrions pas imprimer la réponse avant qu'elle ne revienne avec les données, n'est-ce pas ? Parce qu'il n'y aurait alors rien à imprimer. En plaçant le mot clé await devant une méthode asynchrone, elle attendra que cela se produise en arrière-plan Terminez le travail, revenez, puis nous imprimerons la réponse. Qu' allons-nous imprimer ? Nous devons d'abord attribuer les données renvoyées à quelque chose, comme nous l'avons fait ici, laissant l'URL égale à cela, laissant la requête égale à cela. Nous allons dire, laissons les données, les réponses être égales à cela. Maintenant, pourquoi l'ai-je fait ? Qu'est-ce que c'est ? C' est ce qu'on appelle un tuple, et il s'agit essentiellement d'un ensemble de variables Si j'ai fait cela, c'est parce que ce qui est retourné est deux choses. L'une concerne les données réelles, les données JSN, et l' autre, la réponse Il y a deux choses différentes, et elles seront attribuées en fonction des données et de la réponse. Maintenant, quand je l'imprime, je peux imprimer les données et je peux imprimer la réponse. Il n'exécutera pas ce code tant que cela ne reviendra cause de cela, une déclaration de poids ici. Je peux maintenant vous expliquer ce qu'est ce mot clé de tâche. Le mot clé task sert à exécuter des méthodes asynchrones ou code asynchrone, ce qui est Il s'agit simplement d'une construction spéciale permettant d'exécuter du code en arrière-plan. Tu y penses comme ça. Alors maintenant, tout est prêt. Après avoir écrit tout ce code, nous allons exécuter ce projet. Il va exécuter ce code dès le lancement du simulateur. Ensuite, nous allons voir un résultat, qu'il y ait une erreur ou que nous voyions réellement les données contenues dans la réponse. Jetons donc un coup d'œil à ce qui s'est passé ici. Si j'ouvre cette zone de console, et si vous n'avez pas cette zone de console, elle pourrait en fait être minimisée Tu appuies sur ce bouton juste là. Et vous n' avez peut-être pas ces onglets. Il vous suffit donc de cliquer sur ces boutons dans le coin inférieur droit et d'ouvrir ces onglets. Il y a deux choses à noter ici. Voici les données, et nous ne pouvons pas les voir. Il s'agit simplement de nous indiquer la taille des données. C'est ce qui arrive lorsque vous essayez d'imprimer des données. Mais nous allons devoir analyser ce JSON ou convertir en données utilisables dans notre application Nous allons le faire quelques leçons plus tard. Mais jetons un coup d'œil à la réponse, car elle peut également nous en dire beaucoup. OK. Donc, si vous recherchez un code d'état 200, c'est bien. Souvenez-vous d'ici dans l'explorateur d'API. Je pense que c' est ici, d'accord. CO 200. Cela signifie qu'il s'agit d'un code serveur pour réussir. Code serveur 200. Vous pouvez le rechercher sur Google, codes de serveur 200. Moyens. Il y a d'autres codes. Jetons un coup d'œil à ce que nous obtenons ici. À présent, vous ne pouvez pas réellement voir les données JSON, mais vous pouvez voir certains détails de la réponse. Mais le statut C 200, c'est bon signe. Cela signifie que l'API a accepté notre clé d'API. J'ai accepté notre demande comme étant valide et elle a renvoyé une réponse. Voyons ce qui se passe si nous modifions simplement certaines données. Disons que je gâche ma clé API. Où est la clé ? Juste ici ? Je vais juste en supprimer quelques lettres, le réexécuter et voir quel est le code d' état cette fois. C'est 400. 400, ce n'est pas bien. Il a probablement détecté que l' ApiKey n'est pas valide. Mauvaise demande. Parfait. C'est génial. C'est exactement ce à quoi nous nous attendions. Laisse-moi annuler. La clé d'API doit être valide. Laisse-moi gâcher un peu mon idée de playlist. Découvrez comment cela change les choses. C'est un quatre contre quatre. Qu'est-ce qu'un quatre sur quatre, introuvable. Il n'a pas pu trouver ma liste de lecture parce que j'ai foiré l'identifiant de la liste de lecture Donc c'est vraiment bien. Cela signifie que tout fonctionne comme prévu. Mais ne serait-ce pas formidable si vous pouviez réellement voir la réponse. Ici, nous examinons simplement code d' état de la réponse. Eh bien, parfois, lorsque vous programmez et que vous travaillez sur des appels réseau comme nous le faisons actuellement, il serait très utile de jeter un coup d'œil au contenu réel de la réponse et des demandes Et c'est là que vous utilisez un outil de débogage réseau tiers Je vais donc vous montrer comment utiliser Proxy Man, que vous pouvez utiliser gratuitement pour le développement de votre application IOS, puis nous pourrons jeter un coup d'œil à la réponse réelle et voir les données Allons-y, téléchargeons et installons Proxy Man. Allez-y, visitez le proxy maan point O, et vous pourrez télécharger l'application MAC Gardez à l'esprit que vous pouvez l'utiliser gratuitement et qu'il existe des fonctionnalités payantes, vous pouvez donc vous y intéresser, mais je vous recommande de commencer gratuitement pour le moment. OK, je vais donc lancer mon Proxy Man. Maintenant, les vôtres ne ressembleront peut-être pas cela, car ils seront probablement intégrés pour vous Vous devez probablement d'abord suivre quelques étapes. Mais une chose importante à faire est passer à un certificat et vous devrez installer certaines choses. Installez donc d'abord le certificat sur ce MAC , puis installez le certificat sur IOS et vous allez choisir des simulateurs Mais cela aide si le simulateur est réellement opérationnel. Donc, dans votre co-projet, lancez simplement votre projet, afin d'ouvrir le simulateur et de prendre note de quoi il s'agit, iPhone 15 Pro car il va être installé sur ce simulateur. Donc, oui, c'est ce que tu fais. C'est bon, ici. Choisissez des simulateurs. Et puis tout d'abord, il s'agissait de l' installer sur votre Mac. Si vous ne l'avez pas encore fait, vous devez cliquer sur son bouton. Ensuite, il devrait indiquer «  J'ai trouvé le simulateur parce que vous l'avez lancé, donc il le cherche ». Je dois dire qu'on l'a trouvée. Ensuite, vous allez choisir de simplement préparer les simulateurs. Ensuite, il vous demandera de le redémarrer. Vous cliquez sur ce bouton et le simulateur redémarre avec le nouveau certificat Cela permettra à Proxy Man de se placer entre les demandes que votre simulateur fait et reçoit, et c'est ainsi que vous pourrez voir les données, n'est-ce pas ? Donc, pour ce que vous allez faire, vous devez parfois redémarrer le code X. C'est un peu capricieux. Si vous ne voyez pas ce que je vous montre, essayez de redémarrer le code X ainsi que les simulateurs Mais si tout est correctement configuré, alors ce que vous devriez pouvoir faire c'est que si vous lancez l'application maintenant et que vous ouvrez cet onglet Applications, vous devriez le voir apparaître ici. Ça y est. C'est mon projet, non ? Voyons voir ici. C'est celui-ci. OK. Ce que je peux faire, c'est cliquer avec le bouton droit de la souris et épingler pour que cela apparaisse ici, et vous pouvez voir qu'il a envoyé une demande à ce domaine. C'était bon, mais je dois renvoyer la demande pour voir le contenu Laissez-moi exécuter ce projet à nouveau, et vous verrez une deuxième demande être faite, et cette fois, vous pourrez tout voir . Jetez-y un œil. Ce côté de gauche est la demande, ce côté de droite est la réponse. Pour la requête, vous pouvez voir Pour la requête, vous pouvez voir tous les paramètres vous avez spécifiés, donc il y a la clé, l' ID de la liste de lecture, et il y en a une partie, et tout cela provient de l'URL. Mais c'est la réponse qui est intéressante. Vous pouvez voir le code de réponse, il est juste là, 200. Mais si vous regardez le corps ici. Il s'agit des données qui ont été renvoyées dans la réponse. Rappelez-vous que lorsque nous l'avons exécuté dans le projet de code X, ces données se trouvent ici, nous les avons imprimées et elles indiquaient simplement la taille des données. Eh bien, avec Proxmn, nous pouvons réellement jeter un coup d'œil aux données présentes Voici toutes les données. Il s'agit d'un outil très utile à utiliser lorsque vous travaillez avec des appels réseau. Maintenant, si vous ne parvenez pas à voir ce que je vois, je vous recommande suivre les étapes de dépannage. Voyons voir ici. Lorsque nous avons choisi cette option, vous pouviez essayer certaines étapes de dépannage et lançons une documentation pour que vous puissiez essayer des choses. Voilà à quoi ça ressemble. Ouais. Il vous suffit de suivre cette procédure et d'essayer ces étapes de dépannage. OK. Ce n'est pas la fin du monde si vous n'arrivez pas fonctionner, car comme vous pouvez le constater, même sans Proxy Man, nous sommes en mesure d'envoyer la réponse ou, désolé, d'envoyer la demande et d'obtenir la réponse et le code de statut 200 et tout ça. C'est bon. Encore une fois, il s'agissait d'un projet de test. Ce n'est pas ainsi que nous allons faire des choses comme ça. Nous voulons absolument sécuriser la clé et faire les choses de manière un peu plus élégante, pas seulement tout dans cette vue de contenu Nous allons donc créer un composant distinct pour gérer le réseau, et nous allons faire tout cela. C'est bon. Mais cette partie a été un énorme succès , et j'espère que vous avez appris certaines choses. Bien, maintenant que nous savons que nous pouvons nous connecter à l'API et en extraire des données, nous sommes prêts à démarrer notre véritable projet de code X pour l'application Dans la leçon suivante, nous allons démarrer un nouveau projet de code X. Nous allons stocker la clé API en toute sécurité. Nous allons commencer à définir certains écrans, ainsi que certains des composants dont nous aurons besoin pour l'application Très bien, je t'y verrai. 3. Leçon 03 : Créer le projet Xcode, des vues et des modèles: Lors de la dernière leçon, nous sommes en mesure de nous connecter à l'API de données YouTube et d'en extraire des données. Dans cette leçon, nous allons configurer notre projet de code X ainsi que toutes les vues et tous les modèles. Très bien, allons-y. Commençons par un petit aperçu de la façon dont nos points de vue seront présentés. Je souhaite également expliquer à quoi ressemblera notre modèle de données, en particulier lorsque nous allons interagir avec l'API de données YouTube. Tout d'abord, nous allons commencer par la vue d'accueil, qui contiendra une vue par onglets avec des vues supplémentaires. Maintenant, je sais que dans cette démo, nous n'avons qu'un seul onglet, mais celui-ci est configuré dans le but que vous puissiez ajouter des onglets supplémentaires. OK. La vue d'accueil hébergera donc la vue par onglets elle-même. Ensuite, la vue par onglets contiendra des instances, une instance de la vue du fil. Et voici cette liste déroulante de vignettes Voyons maintenant comment la vue du flux va obtenir les données. Nous allons créer un composant distinct, appelons-le le service de données qui sera responsable de tout le code interagissant avec l'API de données YouTube La raison en est que nous pouvons tout conserver au même endroit, et qu' il soit plus facile à entretenir, à dépanner et à déboguer Ainsi, lorsque le flux se charge, il demande au service de données la liste des vidéos à afficher. Ensuite, le service de données lui-même enverra cette demande réseau à l'API de données YouTube. Donc, dans la leçon précédente, lorsque nous avons examiné ce qui a été rentable, il s'agissait en fait de deux choses. Il y avait une structure globale de liste de lecture, puis à l'intérieur de celle-ci, il y avait des objets vidéo individuels, n'est-ce pas ? Comme les dictionnaires qui contenaient les données vidéo. Nous allons donc analyser ce JSON en une seule instance de liste de lecture contenant plusieurs instances vidéo, chacune représentant les données vidéo Si vous ne vous en souvenez pas ou si vous êtes un peu perplexe, ne vous inquiétez pas . Lorsque nous passerons à la partie de l' envoi de la demande réseau, la récupération des données et de leur analyse dans JSO, j'aborderai plus en détail comment chaque élément ou partie du JSN se traduit en différentes propriétés de la vidéo et de l'instance de Ainsi, une fois que les données seront de retour, nous verrons une liste de données dans la vue du fil d'actualité. Ensuite, nous devons récupérer les données de l'image miniature de la vidéo, car ces données d' image ne sont pas renvoyées par Au lieu de cela, nous obtenons simplement les URL de la miniature de la vidéo. Nous allons donc utiliser une image asynchrone de manière asynchrone. Cela signifie qu'en arrière-plan, téléchargez ces données d'image pour les afficher. Et nous allons créer une vue vidéo séparée en ligne sous forme de vue réutilisable. Et la vue du fil, qui comporte un composant de liste, va simplement créer autant d'instances de la vue en ligne vidéo que nécessaire pour autant de vidéos qu'il en existe. Et chaque vue de ligne vidéo comportera une image synchronisée, qui téléchargera la miniature Bien, maintenant, nous allons avoir une vue du fil d'actualité qui semble plutôt bonne, mais nous devons laisser l'utilisateur appuyer sur une vidéo pour voir la vidéo elle-même, n'est-ce pas ? C'est pourquoi nous allons créer une vue détaillée de la vidéo qui glissera sous forme de feuille vers le haut à partir de la vue du fil lorsque l'utilisateur appuie sur l'une de ces vues de ligne vidéo Dans la vue détaillée de la vidéo, nous allons montrer en haut le lecteur vidéo. Ensuite, en dessous, nous allons afficher la description de la vidéo. Et ces données l'auront déjà fait. Donc, à un niveau élevé, c' est à cela que ressemblera l'application. Il y a beaucoup à apprendre ici. Plongeons-nous dans le vif du sujet. Très bien, créons notre projet de code X. Je vais donc choisir App sous IOS, et je vais nommer cette application API YT et m'assurer que la langue des interfaces Swift I est Swift. Nous n'avons besoin d'aucune option de stockage. Nous n'avons pas besoin de tests pour le moment. Et je vais simplement le créer sur mon bureau, et je n'ai pas vérifié le contrôle des sources. Je vais le remplacer par le simulateur, afin que nous puissions le lancer dans le simulateur et non sur mon appareil. Maintenant, nous pouvons commencer. La première chose que je veux faire, c'est de réafficher le schéma. Nous avons deux choses distinctes. J'aime séparer les choses dans des dossiers ici. Nous avons nos points de vue, à savoir la vue d'accueil, vue du fil d' actualité, la vue détaillée de la vidéo et la vue vidéo, puis nous avons le service de données, qui est une aide distincte, si vous voulez, puis nous avons ces points de vue qui représentent nos données Il s'agirait de notre modèle ou modèle de données. OK, alors allons-y et créons ces dossiers dans notre projet Xcode Donc je vais juste, une chose que j'aime faire, c'est le renommer Donc, vous savez, lorsque nous nommons le projet, YT API app, cela se traduit par cet identifiant de bundle, Y T API app. Mais le point d'entrée, c'est qu'ils ajoutent toujours une application à la fin, donc un moyen simple faire est de cliquer avec le bouton droit de la souris et de refactoriser, et vous pouvez tout modifier au même endroit Tu devrais peut-être faire quelque chose comme ça. Peut-être que nous l' appellerons simplement application API YouTube. Cela l'a renommé à différents endroits. Vous pouvez appuyer sur la commande B pour vous assurer qu'il est toujours en cours de construction. Créons le dossier maintenant. Je vais cliquer avec le bouton droit de la souris. Je vais dire nouveau groupe, et appelons-le Services. Ensuite, nous allons créer un autre groupe appelé Ves, puis un autre groupe appelé models. Faisons-le simplement. Très bien, donc je vais juste supprimer tous les fichiers dont nous avons besoin et les supprimer signifie simplement les créer peut-être en ajoutant du code initial, mais nous n' allons même pas le faire Créons simplement les fichiers, puis nous nous concentrerons sur la création de l'ensemble de l'échafaudage Alors disons que c'est le service de données, non ? Nous allons donc le créer ici. Et créons simplement cette structure initiale. Ensuite, pour les vues, nous allons dire nouveau fichier, je vais choisir la vue Swift DI. Tout d'abord, il y a la vue de la maison. Mais la vue de la maison est essentiellement comme si nous avions une vue ici. Pourquoi ne pas utiliser celle-ci comme vue d'accueil ? Je vais le faire glisser dans le dossier des vues, et je vais juste le renommer à nouveau. Refactorisez, renommez, et nous allons appeler cela la vue d'accueil Je n'ai pas renommé celui-ci. Ensuite, nous avons également la vue du fil d'actualité. N'oubliez pas que celui-ci contient la vue par onglets. Nous pouvons donc créer un nouveau fichier. Affichage rapide, affichage du flux. Ensuite, nous allons également visionner la vidéo. Nous allons également avoir une vue détaillée de la vidéo. Et puis la vue de la maison. Nous allons le remplacer par un affichage par onglets. La vue par onglets contiendra une instance de la vue du fil. C'est la structure de base de notre projet. Créons simplement les deux modèles maintenant. Ce seront des fichiers rapides car ne sont pas des vues. L'une d'entre elles est la vidéo. Je vais créer le st. Ensuite, nous allons en créer une autre pour la playlist. Regardons le schéma pendant une seconde et vérifions que nous avons tout. Nous avons la vue d'accueil, qui contient la vue par onglets, contient une instance de la vue du fil d'actualité. La vue détaillée apparaîtra sous forme de feuille dans la vue du fil d'actualité. Nous avons créé la vue des lignes vidéo, qui doit se trouver à l'intérieur d' un composant de liste ou d'une vue de liste, dans la vue du fil d'actualité. Nous avons le service de données que nous avons créé, puis la vidéo dans les modèles de playlist. Nous sommes prêts à commencer à mettre en œuvre certaines de ces choses dans la prochaine leçon. Une chose que je recommande, c'est si vous essayez vraiment d' apprendre certaines de ces choses, il est préférable de suivre et de les essayer sur votre propre ordinateur ou ordinateur portable. Ouvrez simplement le code X, lancez le projet et suivez le projet du mieux que vous pouvez. Vous pouvez toujours télécharger le projet si vous êtes bloqué. Je vais laisser le lien dans la description ci-dessous pour télécharger le projet. C'est bon. Maintenant que nous avons notre projet Xcode et que toutes les vues et tous les modèles ont été définis, nous pouvons commencer à utiliser notre service de données, et c'est ce que nous allons faire dans la prochaine vidéo Je t'y verrai. 4. Leçon 04 : Envoyer la demande d'API: Leçon, nous allons nous connecter à l'EPI de données YouTube pour récupérer des données Et devinez quoi ? Comme nous l'avons déjà fait dans un projet de démonstration, cela devrait être assez simple. La seule différence est que cette fois, nous allons stocker l'APIK en toute sécurité Plongeons-nous directement dans le vif du sujet. Passons d'abord revue le point final que nous allons atteindre avec notre application. Donc, sur l'API de données YouTube, et je vais créer un lien vers ce document ci-dessous au cas où vous en perdriez la référence. Je vais accéder aux éléments de la liste de lecture de ce terminal. Essentiellement, nous voulons répertorier toutes les vidéos d' une liste de lecture donnée. Maintenant, il s'agit de l'URL, et ce sera une requête de type get, les paramètres requis, donc c'est ce que nous devons spécifier. Ce sera l'un d'entre eux. Quel niveau de détail souhaitez-vous pour les éléments vidéo renvoyés dans la réponse ? Et grâce à mes tests pour créer cette démo, je suis parvenu à la conclusion que l' extrait de code est ce dont vous avez besoin Maintenant, il ne vous dit pas exactement ce qui est inclus dans chacun d'entre eux. Il existe peut-être de la documentation supplémentaire que vous pouvez rechercher quelque part. Ce que vous pouvez faire est indiqué dans la leçon précédente lorsque nous avons testé l'utilisation de l'API. Vous pouvez simplement essayer tous ces paramètres, voir ce que vous obtenez en retour et voir ce dont vous avez besoin. Maintenant, votre objectif est de récupérer le moins de données possible tout en satisfaisant à ce que vous devez faire car vous ne voulez jamais renvoyer plus de données, car cela demande plus de bande passante, plus de temps. Pourquoi le feriez-vous ? Snippet est ce dont nous avons besoin. contiendra la description du titre, les URL des images vidéo, et c'est à peu près tout ce dont nous avons besoin pour être honnêtes Maintenant, selon cette documentation, il s'agit du seul paramètre requis. Cependant, nous devons tout de même spécifier l'identifiant de la liste de lecture. Sinon, quelles vidéos allons-nous récupérer ? Nous devons dire à YouTube que c'est la playlist pour laquelle je veux récupérer les vidéos. C'est ce qui m'a dérangé au début. J'ai pensé y mettre l'identifiant de la playlist, mais non, c'est toi qui l'as mis. C'est le point final que nous allons atteindre. Maintenant, pour ce qui est de la clé API que nous devons transmettre, vous auriez dû vous y inscrire dès la première leçon Si ce n'est pas le cas, retournez à la première leçon, suivez le processus et vous pourrez vous inscrire à votre propre API K. Maintenant, nous allons passer au code X et voir comment stocker cette API en toute sécurité abord, je voudrais parler de ce que signifie le stockage sécurisé de votre API K, car il existe nombreuses façons de le faire et différents degrés d'efficacité. Tout d'abord, parlons de la non-sécurisation de l'API , comme nous l'avons fait lors de la démonstration de l'API Juste dans la leçon précédente. Nous avons donc codé en dur l'APIK directement dans le projet de code X, et c'est une mauvaise chose car vous risquez de partager accidentellement votre projet avec quelqu'un ou de le mettre sous contrôle de source Donc, si vous n'êtes pas familier avec le contrôle de source tel que GitHub, c'est un moyen pour une équipe de collaborer, pour plusieurs personnes de travailler sur la même base de code Donc, s'il s'agit du contrôle de source, surtout s'il s'agit d'un projet open source ou qui sait qui y a accès ? Votre clé est là, et n'importe qui peut la prendre et en abuser. C'est donc ce que tu ne veux pas. Désormais, un niveau de sophistication ou protection consiste à placer cette clé d'API dans un fichier externe. Vous ne l'incluez pas directement dans le projet Xcode, mais il se trouve dans un autre fichier, puis vous avez votre projet Xcode, qui lit la clé de ce Ainsi, lorsque vous placez votre projet sur GitHub, comme vous pouvez le voir sur ce schéma, la clé ne va pas de pair La clé reste dans ce fichier sur votre ordinateur, puis vous devez partager manuellement ce fichier externe avec la clé avec la personne qui a besoin d'y accéder, ou cette personne obtient sa propre clé d'API, la place dans le fichier de configuration et la combine avec le projet de code X. Maintenant, le problème avec ces deux méthodes est qu' fin de compte, votre projet de code X a toujours besoin de la clé API. Et cela s'explique par le fait que nous effectuons les appels réseau vers l'API directement depuis notre projet ou notre application. Notre projet a besoin de la clé pour accéder à cette API et s'authentifier auprès de cette API. Il n'y a aucun moyen de contourner cela. Votre projet EXCO doit connaître la clé. Si vous pensez à l'App Store, lorsque votre application est téléchargée, le package téléchargé contient tout ce dont il a besoin pour fonctionner, y compris la clé API, car en fin de compte, votre application utilisera la clé API pour se connecter à toutes les API utilisées par votre téléphone ou votre application. Donc, si quelqu'un fait assez d'efforts et qu'il quelqu'un fait assez d'efforts sait ce qu'il fait, il pourra probablement extraire la clé de ce package. En fin de compte, le moyen le plus sûr de le faire serait de ne même pas effectuer les appels d'API depuis votre application. Vous configureriez votre propre API, et votre application enverrait des requêtes à votre API, et c'est votre API qui possède l'APIK, qui accède ensuite à l'API tierce Dans cet exemple, il s'agit de l'API YouTube. Ensuite, il récupérerait les données de l'API YouTube, puis les renverrait à l'application. C'est presque comme un intermédiaire qui a accès à la clé Ainsi, le client, qui est votre application, ne verra jamais la clé. Ensuite, vous pouvez faire en sorte que cette application dispose de son propre système de compte utilisateur auquel l'utilisateur doit s' inscrire et s'authentifier pour même accéder à votre API Vous pouvez voir jusqu'où vous pouvez aller, cela dépend vraiment, je pense, pour moi, du nombre de personnes qui utilisent votre application. Et combien il est essentiel que cette clé d'API ne tombe jamais entre de mauvaises mains. À tout le moins, nous devrions placer la clé d'API dans un fichier externe et non dans un fichier codé en dur dans le projet. Il s'agit simplement d'une bonne pratique lorsque vous créez votre application. Maintenant, pour ce qui est de configurer votre propre logiciel et faire en sorte que votre application n' utilise jamais la clé API pour moi, c'est une étape ultérieure. Supposons que votre application gagne du terrain et que de nombreux utilisateurs l'utilisent pour suivre l'actualité Vous pensez qu'il y a un risque que quelqu' un cible votre application, peut-être des concurrents ou quoi que ce soit d'autre, pour cibler votre application dans le but de la faire tomber parce que votre entreprise a pris son envol. Je pense que c'est un bon problème, puis vous vous demanderez comment puis-je rendre mon application plus sécurisée, puis suivre ce processus de configuration de votre propre API. Je voulais passer en revue tout cela afin que vous puissiez comprendre ce que signifie sécuriser votre clé d'API. Dans cette leçon, je vais vous montrer comment mettre votre clé d'API dans un fichier externe. Voici les étapes que nous allons suivre. Nous allons créer un fichier de configuration dans notre projet de code X et y ajouter la clé. Nous allons configurer le projet pour qu'il utilise ce fichier de configuration, et nous allons définir une variable spéciale dans notre liste P pour référencer cette clé d'API. Et nous n'allons pas effectuer les étapes quatre et cinq parce que nous ne traitons pas contrôle de source dans ce projet. Mais les étapes 4 et 5 sont les étapes que vous devez suivre si vous placez ce projet dans le contrôle de source car le fichier G ignore répertorie tous les fichiers qui ne doivent pas être placés dans le contrôle de source. Il ne doit essentiellement pas être téléchargé sur Git Hub. Étapes 4 et 5, ce sont des choses que vous devez absolument faire si vous placez ce projet dans le contrôle de source ou sur GitHub, et que vous travaillez en équipe Si vous êtes curieux de savoir comment cela est fait, je voudrais simplement rechercher sur Google comment utiliser un fichier G ignore, et il s'agit littéralement de répertorier votre fichier de configuration, comme le nom du fichier dans ce fichier G ignore, qui n'est essentiellement que le fichier texte. Et vous incluez ce fichier G ignore dans votre projet de code X. Ensuite, lorsque vous placez votre projet sur le contrôle de source, il lit que Git ignore le fichier et prend note de tous les fichiers qu'il doit exclure, et il ne place pas ces fichiers dans le contrôle de source. Passons maintenant à notre projet Xcode et effectuons les étapes 1, 2 et 3 Voici notre projet de code X. Commençons par ajouter ce fichier externe. Il s'agira d'un fichier de configuration. Faisons un clic droit sur ce dossier principal ici, nouveau fichier. Dans le coin supérieur droit, vous verrez un type de boîte de filtre dans la configuration, il suffit de configurer. Il s'agit du fichier que nous voulons voir figurer dans le fichier des paramètres de configuration. Maintenant, il est important de noter que vous ne voulez pas l'inclure dans la cible ici. Vous vous assurez que cette option n'est pas cochée, puis vous créez parce que vous ne souhaitez pas l'inclure Hein ? Maintenant, vous tapez l'API, touche de soulignement en majuscules et vous remarquez qu'il ne s'agit pas d'une variable ou d'une constante Nous ne mettons aucun mot clé rapide devant. Cela ressemble plus à un fichier texte. Maintenant, c'est égal, et nous allons afficher notre clé d'API. Ça y est. Je vais le copier, coller dedans et enregistrer le fichier. Ensuite, nous allons configurer notre projet X code pour utiliser ce fichier de configuration en appuyant sur le nœud racine ici, appuyant sur le projet, et sous configurations ici, vous pouvez voir qu' aucune configuration n'est définie. Il existe deux types de versions que nous pouvons créer lorsque nous développons et que nous testons dans le simulateur ou sur nos appareils C'est ce que l'on appelle une version de débogage Une version de version correspond à la création d'une version spécifiquement destinée à être déployée ou envoyée à l'App Store. Et cela ne contient pas tous les éléments supplémentaires qui ne sont utilisés que dans la phase de développement de l'application, tels que les symboles de bogues et d'autres choses de ce genre. Quoi qu'il en soit, pour les deux, D Bug et Release Bug, nous allons le configurer pour qu'il utilise une configuration comme celle-ci D'accord. Maintenant, la troisième et dernière étape avant de pouvoir tester cela est de passer en dessous des cibles ici. Nous allons entrer dans les informations. Voici notre liste P, et nous allons créer une clé que nous pouvons utiliser pour référencer cette valeur dans le fichier de configuration. Donc, en bas, appuyez sur plus, puis vous allez taper toutes les majuscules AP, souligner K E en majuscules. Appuyez sur Entrée, et le type sera une chaîne Je ne sais pas pourquoi c' était un P minuscule parce que je trouve qu'il y avait une certaine fonctionnalité de correction automatique. Corrigons cela et changeons cela en majuscule P. Et puis, pour ce qui est de la valeur, il s'agira d'une variable dynamique ou d'une référence, et elle fera référence à la clé d'API dans le fichier Kfig Donc, ce que nous allons faire dans notre code Swift ici, c'est entrer dans cette liste P et récupérer la valeur de cette clé. Et la valeur de cette clé pointe en fait vers ce fichier Kfig, que nous n'allons pas inclure le projet lorsqu'il sera placé dans le contrôle de source et tout ça Il s'agit de notre fichier externe, comme nous en avons déjà parlé. Nous allons tester cela. Nous allons passer à la vue d'accueil, et nous allons parler d'un pair. Nous allons simplement imprimer la clé API, voir si nous pouvons la référencer. Nous faisons référence à cette liste de points d'information P en disant « dictionnaire d'informations principal du bundle », c'est notre liste d'informations P. Cette option est facultative car elle peut renvoyer NL. S'il peut le trouver, nous allons chercher la clé. Et nous allons essayer de récupérer la valeur car il n'a aucune idée de ce qu'elle est. Nous savons que c'est une chaîne, c'est un type de chaîne, nous allons donc essayer de la transformer en chaîne. Et ce n'est qu'un essai. Si ce n'est pas le cas, il sera probablement vide ou nul. Nous pourrions fournir une valeur par défaut. Donc oui, s'il ne trouve rien, Let's print ne le trouve pas. OK, pour notre propre débogage. OK, essayons ça. Nous allons l'exécuter dans le simulateur, et il fonctionne donc en ce moment. Et nous devrions voir l'impression de notre clé API si tout se passe comme prévu. C'est bon. Parfait Cela fonctionne. Cela fait référence à la liste d'informations, recherche cette clé, et la valeur de cette clé fait référence à la clé API du fichier de configuration ici Parfait Passons maintenant à la mise en œuvre du service de données, où nous allons envoyer l'appel d'API à l'API YouTube et récupérer les données. Donc, dans le fichier de service de données en haut, déclarons notre clé en tant que constante privée. Et nous allons appeler cela la clé API. Et nous allons gérer cela comme je vous l'ai déjà montré, le dictionnaire d'informations sur les points principaux, et nous allons essayer de rechercher clé API Underscore sous forme de chaîne Maintenant, je ne vais pas lui donner une valeur comme celle-ci s'il ne peut pas récupérer car je veux que ce soit NL afin que nous puissions détecter si l'API K est présente ou non. Ensuite, nous allons créer une nouvelle fonction appelée G videos, qui va renvoyer un ensemble de vidéos. Essentiellement, je voulais rendre toutes les vidéos d'une playlist donnée. Nous allons en faire une fonction asynchrone, et j'expliquerai ce que cela signifie moment de l'appeler, et j'expliquerai ce que signifient les mots clés Async et await Pour l'instant, pourquoi ne pas simplement renvoyer un tableau vidéo vide ? Ici, nous allons implémenter cet appel d'API. abord, vérifiez si la clé API est là puis nous allons créer l'URL, créer la demande, envoyer la demande et enfin l'analyser Cela aide vraiment que nous l'ayons fait cadre d'une démo lors de la deuxième leçon, n'est-ce pas ? Nous avons donc testé que cela fonctionne, nous savons que cela fonctionne. Nous allons donc dire que la clé d' API de garde n'est pas égale à NL else return. Nous pouvons renvoyer une liste de vidéos vide car elle ne contient rien. Idéalement, vous devriez probablement afficher un message d'erreur ou autre afin de pouvoir renvoyer quelque chose tel quel probablement afficher un message d'erreur ou autre afin de pouvoir renvoyer quelque chose , puis le capturer et l' afficher dans l'interface utilisateur Mais en faisant ce que nous faisons ici, vous ne renvoyez aucune vidéo. L'utilisateur ne sait donc pas s' il n'y a réellement aucune vidéo dans cette liste de lecture ou si quelque chose s'est mal passé. Mais il est clair que quelque chose s'est mal passé parce que nous ne pouvons pas obtenir l'APIK, n'est-ce D'accord. En descendant ici, nous allons créer l'URL. Et avant de créer l'URL, nous allons la créer à partir d'une chaîne, n'est-ce pas ? Et cette chaîne d'URL va ressembler à ceci. Revenons d'abord à la documentation. C'est donc juste ici. Et comme je l'ai mentionné dans la leçon précédente, nous utilisons ce point final ici. Nous allons récupérer tous les éléments de la liste de lecture à d'une liste de lecture. Je vais juste le mettre là. Je vais coder en dur cette URL ici, et nous allons ajouter les paramètres. L'un des paramètres requis est cette partie que j'ai mentionnée précédemment dans la troisième leçon. Pourquoi choisir un extrait parce qu' il contient ce dont nous avons besoin. Ensuite, l'autre chose que nous voulons spécifier est la liste de lecture que nous voulons cibler pour récupérer toutes les vidéos. D'accord. Donc, pour vous, je vais choisir ma propre playlist. Vous pouvez choisir la playlist de votre choix. Mais si vous accédez à la chaîne de quelqu'un et que vous accédez à la playlist, vous verrez toutes les playlists ici. Je vais cliquer sur celui-ci, votre playlist complète. Et il y a juste cette carte d'identité ici. Si vous double-cliquez dessus, vous surlignez le tout. Je vais le copier, et je vais le coller dedans. Et la dernière chose à ajouter, c'est la clé. Nous allons donc dire que la clé est égale à, et nous allons simplement l'insérer ici, la clé API. Et nous avons déjà vérifié qu'il ne s'agit pas d'un clou, nous allons donc simplement le forcer et l'enrouler ici. Nous pouvons maintenant créer l' instance d'URL à partir de cette chaîne, maintenant nous pouvons créer la demande. Faisons cette demande d'URL, et nous allons le faire à partir de celle-ci ici. Nous allons transmettre l'URL. En fait, celui-ci renvoie un optionnel. Cela pourrait être NL. Nous allons dire, si l'URL est égale à l'URL, juste pour vérifier que ce n'est pas NL. Nous allons mettre ici tout ce code qui ne s'exécute que si nous parvenons à créer une instance d'URL, puis nous allons le faire là-dedans Ensuite, l'envoi de la demande consiste à utiliser la session. Si nous disons, créons une autre constante ici juste pour clarifier les choses. Session URL partagée. Il s'agit simplement de décomposer les choses pour que ce soit plus facile à comprendre pour vous. Et si vous regardez celle-ci, que nous allons utiliser, les données récupèrent les données pour une demande d'URL donnée, que nous avons créée ici, et il s' agit à la fois d'une méthode asynchrone et elle peut également Nous devons donc aborder ces deux points. La troisième chose que je veux que vous remarquiez avec cette méthode, c'est ce qu'elle vous rapporte. Elle renvoie un tuple. Il contient donc deux éléments de données. Il contient des données, qui sont les données réelles renvoyées par l'API, et un objet de réponse, que vous pouvez consulter pour détecter toute erreur ou le code d'état, etc. Il s'agit donc de la réponse réelle, et ce sont les données séparées dans leurs propres paramètres. Nous allons également nous occuper de cela. Mais d'abord, faisons les choses une par une. allons gérer la partie des lancements en T, puis nous allons faire Async, puis nous allons gérer les données renvoyées Lances. Transmettons la demande. Si l'appel d'une méthode peut générer une erreur, nous devons la détecter, et le mécanisme de Swift pour le faire ressemble à ceci. Vous faites quelque chose qui peut potentiellement générer des erreurs, à savoir cette ligne de code. Vous devez mettre un mot clé tri devant, nous allons donc essayer de le faire. Ensuite, vous devez également avoir un bloc de capture. Cela s'affiche, ou vous pouvez gérer les erreurs qui se produisent si elles sont renvoyées. Nous allons juste l'imprimer. Nous allons faire référence à l' erreur qui est renvoyée. Ensuite, prenons en compte le fait qu'il s'agit d'une méthode asynchrone. Pour appeler la méthode asynchrone, cela signifie qu' elle est appelée dans un thread d'arrière-plan ou dans un environnement de travail en arrière-plan Imaginez-vous donc en train de charger quelqu'un d'autre de faire le travail, comme si vous donniez une tâche à quelqu'un d'autre et que cette personne fasse la tâche et vous recontacte une fois celle-ci terminée Vous devez saisir le mot clé await, ce qui signifie que vous allez attendre que cette personne, ce travailleur en arrière-plan, revienne avec la tâche terminée avant de continuer et d'exécuter le reste des lignes de code situées en dessous. C'est donc ce qui va se passer ici. Maintenant, je tiens à expliquer que même s'il attend que le travailleur en arrière-plan effectue cette tâche et revienne avant d'exécuter les prochaines lignes de code, c'est quand même une bonne chose, car en attendant le retour de cette tâche en arrière-plan, nous pouvons gérer n'importe quel type d'interaction utilisateur, et nous pouvons également faire d'autres choses avant d'exécuter les lignes de code suivantes C'est juste que le mot clé await indique au système ne pas exécuter les lignes 3 et moins avant que le travailleur en arrière-plan ne revienne. Et pour ce genre de choses, vous devez l'envoyer en tâche de fond, car si vous avez le thread principal, qui est le thread principal qui exécute ce code, et que vous faites ce travail, et que vous faites ce travail, il n'y aura aucun travailleur pour gérer toutes les interactions avec l'utilisateur et tout le reste. On dirait que c'est gelé. C'est donc en quelque sorte l'essentiel. toutes sortes de tâches, telles que requêtes réseau ou les requêtes de base de données, vous verrez quand nous téléchargerons les miniatures des images Nous allons également l'envoyer en tant que travailleur de fond pour le faire. Cela utilise donc les mots clés Async et await. Le fait qu'il s'agisse d' une méthode asynchrone entrera également en jeu lorsque nous aurons l'appel Feed Vew get video Vous allez voir comment nous utilisons le mot clé A weight D'accord. J'espère donc que cela a du sens. Sinon, je vous recommande de vous plonger un peu plus dans Async et un poids Recherchez des didacticiels supplémentaires sur Async et sur le poids dans Swift, afin de pouvoir les comprendre un peu plus en détail que ce un peu plus en détail que nous avons le temps d'aborder pour le moment Nous avons donc géré le fait que cela génère une erreur. Nous avons géré le fait qu' il s'agit d'une méthode asynchrone, ce qui signifie que le travailleur en arrière-plan va l'exécuter Maintenant, nous devons gérer les données qui reviennent, et c'est un tuple, non ? Nous allons donc déclarer notre propre tuple pour suivre ces données Nous allons déclarer une constante de tuple. Nous allons parler de données et de réponses. Vous remarquerez que ce format ressemble à ce que nous avons vu renvoyer par cette méthode. Nous allons dire que c'est égal à cela. Donc, si aucune erreur n'est générée, lorsque le travailleur en arrière-plan revient, il va attribuer les données à cela et il va attribuer la réponse à cela. Ensuite, à partir de là, nous pouvons analyser les données. Maintenant, avant d' analyser les données, essayons d'envoyer cette requête et de l'examiner dans Proximan pour nous essayons d'envoyer cette requête et de l' assurer que c' est Donc, ce que nous allons faire en premier, c'est de lancer cette demande. Donc, dans la vue du fil d'actualité, ici, pourquoi ne pas dire non sur un ici, mais nous allons utiliser la tâche. Laissez-moi vous expliquer ce que c'est. La tâche est un modificateur qui permet d'exécuter un bloc de code asynchrone. Permettez-moi d'exprimer cela en termes simples. Lorsque la vue du fil apparaît, elle exécute ce code dans ce bloc de tâches en tant que travailleur de fond. Nous allons dire que nous allons créer une propriété ici pour stocker les vidéos, et ce sera une propriété de l'État. Permettez-moi également de vous expliquer ce que cela signifie. Ce sera un tableau vide au début. Au cas où vous n'auriez pas regardé ma série de huit jours pour débutants où j'ai expliqué ce que sont les propriétés de l'État. C'est essentiellement lorsque cette valeur change que nous voulons que l'interface utilisateur soit actualisée. Cela commence par un tableau vide, il n'y a pas de vidéos. Mais lorsque nous envoyons la tâche depuis le service de données pour récupérer les vidéos et qu'elle revient, il place les instances vidéo dans ce tableau. Nous voulons que l'interface utilisateur soit actualisée et affiche ces vidéos. C'est pourquoi c'est une propriété de l'État. Laissons cette tâche démarrer. Nous allons créer une nouvelle instance de service de données et je vais simplement l' enchaîner comme ceci. Je vais appeler pour obtenir une vidéo. Cela devrait être un S. Nous allons changer cela. Cela devrait être get videos et notez qu'il s'agit d'une méthode asynchrone. Et il renvoie une liste de vidéos. Asynchronous signifie donc que nous allons devoir l' envoyer en tant que tâche d'arrière-plan va falloir attendre que cela revienne avant d'exécuter le code ci-dessous. Nous allons dire que laisser les vidéos équivaut à cela, le retour à la liste des vidéos. Appelons ça. Disons que c'est des vidéos renvoyées. Ensuite, nous allons attribuer les vidéos de retour à notre propriété d'État ici. Les vidéos d'auto-réflexion sont équivalentes aux vidéos renvoyées. Nous pouvons certainement le raccourcir, mais je voulais le diviser en deux lignes pour vous expliquer que cette ligne de code ne s'exécutera pas tant qu' elle n' aura pas été supprimée et ne reviendra pas avec les données à cause de ce mot clé await. Pendant que le travailleur principal attend que le travailleur d'arrière-plan récupère les données, il peut toujours gérer l'interaction avec l'utilisateur et les autres tâches qu'il doit effectuer. C'est ce qu'il y a de si génial avec ACN can await. Nous pouvons raccourcir cela en le mettant simplement comme ceci et en supprimant même le besoin de cela. accord, mais je pensais que l' écrire comme ça expliquerait un peu mieux le mot clé await. Donc, avec la façon dont nous l'avons configuré maintenant, si nous l'exécutons dans le simulateur, il devrait l'exécuter puis envoyer la demande réseau. Et si notre API est correcte et notre demande est correctement structurée, nous devrions obtenir une réponse. Allons-y et ouvrons Proximan. Allons-y, jetons un coup d'œil, voyons cela en action. Je vais d'abord l'exécuter dans le simulateur pour qu' il apparaisse sur notre liste. Ça y est. Je vais épingler celui-ci en haut et je vais devoir le renvoyer Bonjour tout le monde, envoyez-le. C'est bon. Le code d'état est vert, il devrait être 200, 200, et nous récupérons les données ici. Vous pouvez voir que l'élément racine contient un tableau d'éléments. Cet élément racine, nous le représentons avec notre modèle de playlist. Nous allons le modéliser à partir de cela. Ensuite, en ce qui concerne les éléments, il s'agit des vidéos individuelles, que nous représentons avec des instances de vidéo. Évidemment, nous ne l'avons pas encore rempli, mais c'est ce que nous allons faire. Si vous ouvrez l'une de ces vidéos, vous verrez qu' elle contient l'extrait, comme nous l'avons demandé dans la demande d'API, et qu'elle contient les vignettes, le titre, la description, et l'identifiant de la vidéo est également quelque chose dont et qu'elle contient les vignettes, le titre, la description, et l' identifiant de la vidéo est également quelque chose Donc, dans l'identifiant de la ressource, voici l'identifiant de la vidéo. Voilà donc tous les détails dont nous avons besoin. Et des vignettes intérieures. Vous pouvez voir qu'il y a différentes tailles de vignettes. Chaque taille possède une URL différente. Très bien, je pense que nous sommes à mi-chemin. Maintenant que la demande est envoyée et que les données sont renvoyées, il ne nous reste plus qu'à analyser ces données JSON en instances vidéo afin de pouvoir les afficher Et c'est ce que nous allons faire dans la prochaine leçon. Je t'y verrai. 5. Leçon 05 : Analyser les données JSON en vidéos: Dans cette leçon, nous allons transformer les données JSON renvoyées par l'API en instances vidéo afin de les afficher dans notre vue de flux. Allons-y. La première étape consiste à renseigner les propriétés de nos modèles de données fonction de la réponse que nous obtenons de l'API de données Tube. Regardons Pxy Man, et cet outil est vraiment utile, notamment parce que vous pouvez simplement envoyer la demande, regarder la réponse et obtenir cette vue arborescente , puis vous pouvez la parcourir comme ceci Parfois, la documentation contient la réponse Il s'agit donc de l'API de données YouTube. Je connais l'API Epler si vous l'utilisez et que vous essayez la demande, vous pourrez voir la réponse Voilà, ça vous donne une idée. Ouais. Donc, si vous ne voulez pas utiliser Proxy Man pour l'examiner, vous pouvez également le consulter. Il s'agirait de l' objet ou de l'instance de la playlist, et des éléments. Chaque article est une vidéo. Si vous cliquez dessus, vous pouvez voir que ce sont les propriétés de la vidéo. En fait, utilisons-le parce que le texte est plus grand que celui que nous avons ici dans Proxy Man. Nous allons commencer par la vidéo elle-même. Nous allons donc ajouter le protocole décodable, nous permet de transformer les données JSON en instances vidéo à l' aide du décodeur JSON Passons donc à la documentation de l' API. Ce que je regarde en ce moment n'est qu'une seule vidéo. Nous pouvons donc voir qu'elle possède un identifiant, qui est une chaîne, et cela nous sera utile car nous voulons placer ces instances vidéo dans une liste Swift DUI et elle doit être capable d'identifier les différentes vidéos Nous allons donc choisir les propriétés que nous voulons analyser, essentiellement Il va donc y avoir un identifiant de chaîne. Ensuite, il y aura un extrait et à l'intérieur il y aura un titre Ce sera une description. Nous avons besoin des deux, et ce sont des ficelles. Et puis il y aura aussi des miniatures. Concentrons-nous d'abord sur le titre et la description. Encore une fois, il s'agit d'une propriété d' extrait, et l'extrait lui-même, vous pouvez voir ces crochets, qui représente une instance, une structure ou un objet différent, quel que soit le nom que vous voulez lui donner Tout cela représente la même chose. Nous allons dire que l'extrait sera Donnez-moi un type d' Je vais le rendre facultatif au cas où cela n'existerait pas. Oui, des extraits et non des extraits. Je peux m'assurer que la propriété est la même, et je vais créer une autre structure ici appelée snippet, qui sera également décodable À l'intérieur de l'extrait se trouve endroit où je mettrais le titre et O. Je veux dire, toutes les vidéos doivent avoir un titre et une description, mais au cas où ce n'est pas le cas, vous pouvez les rendre facultatives. Pour l'instant, je ne le ferai pas, voyons juste ce qui se passe. Ensuite, à l'intérieur de l'extrait, nous avons des vignettes. De quoi d'autre avons-nous besoin ici ? Nous avons besoin de l'identifiant vidéo. Passons à cela avant les miniatures car il y en a pas mal ici avec les Faisons l'ID de la ressource. Je vais l'épeler en minuscules comme ceci. C'est ce que nous allons faire. Ensuite, je vais créer une autre structure appelée identifiant de ressource qui est décodable L'identifiant de la ressource, eh bien, le seul qui m' intéresse vraiment est l'identifiant vidéo, et c'est une chaîne. Je sais que toutes les vidéos doivent avoir un identifiant vidéo. Passons aux vignettes. S'agissait-il de vignettes avec un S ? C'était dans le snippet. Des vignettes en T avec un S, oui, alors c' est en soi un truc à part entière. Nous devons définir cela. Appelons cela des miniatures. Créons une autre chaîne appelée thumbnails, qui sera également décodable De quoi ai-je besoin ici ? Passons à la clé. Jetons un coup d'œil à Proximan ici pour voir une réponse réelle Nous avons l'extrait ici, puis nous avons vignettes ici. Ouvrons ça. Et puis il y en a plusieurs différents, le standard moyen par défaut et le maximum élevé est. Vous pouvez donc essayer ces différents modèles. Ces fichiers sont tous de tailles différentes. Vous ne voudriez probablement pas l'obtenir comme si c'était le plus gros, sauf si vous le montrez sur un iPad ou si vous le vouliez très clair. Lorsque j'ai créé ma démo, j'étais plutôt content de Medium. C'est donc ce que je vais choisir. En fait, la taille moyenne est presque la plus petite. La valeur par défaut est assez petite. C'est donc presque le double de cette taille. Mais je me souviens pourquoi je suis moyen, c'est parce que le rapport hauteur/largeur est différent. Vous pouvez donc voir qu'il s'agit de Oui, le rapport hauteur/largeur était un peu différent. Certains d'entre eux ont l'air plus carrés, tandis que d'autres ressemblent davantage à un écran large. Après les avoir essayés, je me suis rendu compte que ce support était celui qui s'affichait le mieux, alors c'est ce que j'ai choisi. Ouais. Je vais donc dire très moyen. Et quel est le type ? Le type lui-même est un autre objet. Je vais donc devoir créer quelque chose pour cela, en fonction de ces trois propriétés. Celui-ci est une chaîne. Celui-ci est un int, et celui-ci est également un int. Créons donc une taille miniature pour les entretoises. Cette URL est décodable . Comme cette offre de hauteur. Alors celui-ci sera juste de la taille d'une miniature. Est-ce que j'ai tout ce dont j'ai besoin ? J'ai l'image miniature, l' URL, j'ai l'identifiant de la vidéo C'est pour le lecteur vidéo. Ensuite, j'ai le titre et la description. Je pense que c'est ça. Parfait. Ensuite, je vais repartir. Il s'agit d'une seule vidéo qui remonte un pas en arrière. Voici la liste de lecture. La liste de lecture contient des éléments et, qui sont un tableau de ces instances vidéo. Si je passe à la playlist, assurons-nous qu'elle est également décodable et que nous voulons des éléments. Comme ça. Nous devons également ajouter identifiable, ce qui nous permet d'utiliser un tableau de ce type dans la liste Swift DUI, et nous avons l'idée du protocole identifiable, car c'est ce que cela nécessite Et je pense que tout va bien maintenant. Essayons de l'analyser Passons au service de données et continuons à analyser les données Nous allons créer un décodeur JS. C. Ensuite, nous allons dire décoder décoder un certain type Nous allons décoder les données à partir d'ici, et nous allons les décoder dans une instance de liste de lecture Nous transmettons la liste de lecture en tant que type, et nous devons donc ajouter point self. C'est ainsi que vous spécifiez un type. Oh, j'ai oublié de souligner que cette méthode de décodage peut générer des erreurs Il vous demande d'essayer. R Nous pouvons essayer ici car c'est déjà dans un bloc D. C'est parfait. Nous n'avons pas besoin d'en faire une autre, sauf si vous souhaitez spécifiquement gérer cette erreur par rapport à celle-ci. Je suis sûr que vous pouvez faire la différence ici quand vous l'apercevrez. Capturons le résultat de ce décodage. Supposons que la liste de lecture soit égale à cela. Ensuite, comme vous le savez, notre instance de liste de lecture contient des éléments , à savoir les vidéos. C'est ce que nous allons essayer de restituer. Parce que n'oubliez pas que cette méthode renvoie ici des vidéos de scénarios. C'est bon. Voyons comment cela fonctionne. Revenons à notre point de vue et vérifions ce que nous faisons ici. Je vais définir un point d'arrêt ici en appuyant ici, ce qui va suspendre l'exécution. Ajoutons-en un peu plus avant de lancer cette opération. De cette façon, nous pouvons voir visuellement quelque chose dans le simulateur. Utilisons une liste Swift DUI et nous allons transmettre les vidéos. Parce que la vidéo est identifiable, alors tout va bien Cela signifie que nous pouvons l'utiliser dans cette liste, puis nous allons passer à i pour chaque vidéo. Faisons simplement le titre de l'extrait. Si c'est NL, dites simplement le titre. Laisse-moi juste le faire. Voyons si nous pouvons voir quelque chose se produire. Oh, c'était tellement rapide. Mais nous avons pu voir le représentant regretter la demande de sortie, la réponse revient avec cinq éléments, et bien sûr, nous en voyons cinq ici Maintenant, je m'attendais à en voir plus parce que notre playlist contient huit ou neuf vidéos ici, dix vidéos, en fait. Laissez-moi jeter un œil ici. Je pense que par défaut, oui, la valeur par défaut pour les résultats Max est cinq. C'est donc quelque chose que vous voudrez également définir. Changeons cela dans notre service de données. Quels étaient les résultats de Max Capital R. Je vais l' ajouter ici. Disons que le nombre maximum de résultats est égal à 20. Cela nous indique que nous n'avons jamais vérifié la réponse, nous pouvons donc simplement l'ignorer en ajoutant un trait de soulignement Nous n'avons pas besoin de le nommer. R. Réexécutons-le. C'est arrivé si vite là-bas. Nous avons tout Ce que nous avons fait ici aujourd'hui en analysant le JSO en examinant la réponse, puis en mappant ces paires clé-valeur et en créant ces propriétés dans notre modèle de données C' est quelque chose de très courant. Il est donc préférable de vous familiariser avec ce processus si vous souhaitez travailler avec différentes API à l'avenir. C'est bon. Maintenant que les instances vidéo apparaissent dans la vue du fil d'actualité, le plus dur est fait, croyez-le ou non. Il ne nous reste plus qu'à afficher les images miniatures dans la vue du fil, et nous allons le faire dans la prochaine leçon Je t'y verrai. 6. Leçon 06 : Récupérer des miniatures vidéo et mettre en forme: La dernière leçon a consisté à analyser les données JSON renvoyées par l'API YouTube pour en faire des instances vidéo que nous affichons dans notre flux Maintenant, le problème est que nous n'avons aucune miniature vidéo à afficher, et nous allons résoudre ce problème dans cette leçon Faisons-le. Voici ce que nous avons obtenu jusqu'à présent avec notre vue du fil d'actualité. Nettoyons ça un peu. Nous allons passer en mode flux, et la première chose que je vais faire est de changer le style du style de liste en style de liste en plan. Ensuite, nous allons également supprimer l'indicateur de défilement. Passons donc aux indicateurs de défilement. Nous allons le cacher. Et ça devrait déjà paraître un peu mieux. Parfait. Ensuite, nous allons supprimer ces séparateurs entre chaque élément car il s'agira d'images, de vignettes Dans le texte ici, je vais dire que la visibilité du séparateur de lignes est masquée. L'autre point est de se rappeler comment nous avons une vue par onglets dans la vue d'accueil. Ajoutons cette icône d'onglet juste là. Dans la vue d'accueil, nous pouvons le supprimer sur un pair, afficher notre clé API et ajouter un élément d'onglet. Ici, nous allons mettre une image, et ce sera une icône, symboles SF, et nous allons utiliser une pile. Celui-ci, joue à Square Stack. Voyons si je peux le mettre juste là. J'ai juste tout fait pour moi. Ensuite, le texte va être transmis. Cela va déjà beaucoup mieux paraître. Voyons maintenant comment afficher ces images à l'aide de notre mode ligne vidéo. Au lieu d'afficher un texte avec le titre, nous allons vouloir créer des instances de visualisation des lignes vidéo. Mais nous devons passer la vidéo dans la vue en ligne vidéo. Dans le cas contraire, cette vue ne fonctionnera pas avec quoi que ce soit. Pourquoi ne pas créer ici une propriété qui devra être transmise. Et dans ce but, peut-être que nous allons simplement le faire. À partir de, je ne veux pas créer tout ça. Je vais juste supprimer l'aperçu lui-même. OK. Revenons à la vue Feed, et nous allons le transmettre ici. Tu vois, maintenant ça l'exige. Je vais simplement transmettre la vidéo qu'il essaie d'afficher. Maintenant, dans la vue de la ligne vidéo, affichons l'image. Maintenant, n'oubliez pas que nous avons l'URL de l'image miniature. Il se trouve à l'intérieur de l' extrait de code vidéo, des vignettes, des points moyens, de l'URL. Il s'agit d'une chaîne. Nous devons essentiellement cliquer sur cette URL pour télécharger les données d'image, puis afficher ces données d'image dans une image SwiftUI Heureusement, pour nous, SwiftUI facilite vraiment les choses en utilisant une image de synchronisation, dans laquelle il suffit de transmettre une URL, et cela se fera de manière asynchrone Il va envoyer un travailleur en arrière-plan pour accéder à cette URL, récupérer les données de l'image, revenir puis les afficher dans une image Nous allons utiliser celui-ci parce qu'il nous donne une référence à la vue de l'image de l'interface utilisateur Swift, ce qui nous permet d'y ajouter des modificateurs supplémentaires si nous voulons modifier les coins, nous voulons modifier le rapport hauteur/largeur, nous pouvons le espace réservé vous permet de spécifier les éléments à afficher pendant que le travailleur en arrière-plan saisit les données de l'image Nous allons montrer un spinner. De toute évidence, l'URL est l'endroit où elle doit aller pour le récupérer. Maintenant, comme tous ces éléments sont facultatifs, il se peut que nous n'ayons pas d'URL d'image Nous devons donc d'abord vérifier cela. Nous allons donc dire, si let URL est égal, et nous allons essayer de créer une instance d'URL à partir de cette chaîne. S'il est capable de le créer, nous allons le transmettre à l'appel d'image asynchrone ou à la vue désolé en tant que paramètre C'est là que nous allons adopter cela. Encore une fois, c'est quoi le fil ? Eh bien, il s'agit de vignettes d'extraits vidéo, URL moyenne. S'il n'existe pas, c'est qu' il n'existe pas. Dans ce cas, nous ne pouvons pas afficher d'image. Alors, que devons-nous faire ici pour fournir une valeur par défaut facultative lorsque l' option contient Nil. Mais ce doit être une chaîne. Donc oui, si l'une de ces parties n'est pas une URL. S'il ne peut pas créer cette chaîne, alors nous allons simplement mettre une chaîne vide et essayer de créer une URL, et cela échouera, et il ne fera rien de ce qu'il contient. Définissons maintenant notre image asynchrone. Nous allons utiliser celui-ci ici, comme je l'ai dit, et nous allons transmettre l'URL qui a été créée, puis nous allons double-cliquer ici. C'est le. Il s'agit de la référence à l'image qui sera affichée une fois les données récupérées. Il s'agit de l'image qui s'affiche. Cet espace réservé, nous avons une autre vue rapide et pratique de l'interface utilisateur que nous pouvons utiliser, c'est la vue de progression, qui va juste être un spinner En ce qui concerne cette image, nous voulons absolument y ajouter quelques modificateurs, par exemple, redimensionnable, afin qu'elle puisse être agrandie ou réduite, et nous voulons conserver le rapport hauteur/largeur Donc, celui que j'aime utiliser dépend des circonstances. Pourquoi ne pas simplement essayer le remplissage pour le moment ? Et nous verrons ce qui va se passer. Donnons-lui également un petit coin arrondi. Nous allons faire de la forme d'un clip. Nous allons dire que le rayon des coins d'un rectangle arrondi est de dix. Voyons maintenant si cela fonctionne. Nous allons revenir au fil d'actualité, il suffit de vérifier. Cela va créer des instances de révision vidéo et transmettre la vidéo, puis cela devrait télécharger les images. Nous ne montrons pas les titres ici en fait. accord ? Eh bien, c' était assez facile. Vous devez admettre que c'est ce que nous avons. Si vous vouliez afficher les titres, vous pouvez soit les afficher, les titres ne dépendent pas de l'image, n'est-ce pas ? Vous pourriez donc mettre tout cela dans une pile en V, puis mettre le titre en dessous, par exemple. Nous pourrions donc essayer de le faire ici. Et ce serait le titre. Titre de la vidéo, et ensuite nous pouvons même le mettre en gras. N'est-ce pas un titre ? Oh, désolé, découpez le titre S'il n'existe pas, nous allons afficher une chaîne vide. Nous pouvons aligner, ajouter du rembourrage, par exemple. tête, puis vous pouvez ajouter juste un peu de rembourrage en général ou simplement à la verticale OK. Les coins sont un peu trop arrondis à mon goût. Nous n'en ferons donc que cinq. C'est bon. Et c'est à quel point c'est facile de le faire. D'accord, notre vue du fil d'actualité semble plutôt bonne. Tout ce que nous avons à faire est d' autoriser l'utilisateur à appuyer sur la miniature pour regarder la vidéo C'est ce que nous allons faire dans la prochaine leçon. Je t'y verrai. 7. Leçon 07 : Affichage du lecteur vidéo et des détails vidéo: Lors de la dernière leçon, nous avons terminé la visualisation du fil d'actualité. Dans cette leçon, nous allons autoriser l'utilisateur à appuyer sur la miniature pour afficher la vue détaillée et pour regarder la vidéo Plongeons-nous directement dans le vif du sujet. Nous avons donc déjà supprimé la vue détaillée de la vidéo Commençons par le déclencher et l'afficher sous forme de feuille lorsque l'utilisateur tape sur une vidéo. Comment allons-nous procéder ? Il existe donc une feuille que vous pouvez lier à une propriété. Ici, vous pouvez définir ce que nous allons définir comme vidéo sélectionnée. Lorsque l'utilisateur appuie sur une ligne vidéo, nous allons capturer ce geste et définir propriété vidéo sélectionnée, qui déclenchera ensuite cette feuille, puis le contenu sera celui que vous souhaitez afficher sur cette feuille Choisissons-le. Créons cette propriété d'état ici et appelons-la vidéo sélectionnée. Ce sera nul au début. Nous allons créer un lien avec la vidéo sélectionnée. Et pour ce qui est du contenu, du contenu. Ce paramètre enregistre la valeur de cette vidéo, qui est la vidéo sélectionnée. Ici, nous allons montrer la vue détaillée de la vidéo. OK. Capturons le geste du toucher à ce sujet. Donc, en tapotant, nous allons définir la vidéo sélectionnée comme étant égale à V. Et voyons si cela fonctionne. Parfait. Passons maintenant à l'étape suivante : transmettons les détails de la vidéo dans la feuille. Nous allons le faire dans la vue détaillée de la vidéo ici. Acceptons une vidéo. Encore une fois, je vais époustoufler l'aperçu. Ensuite, dans la vue du fil d'actualité, nous allons maintenant passer en V, qui est la vidéo sélectionnée. Configurons maintenant un peu cela. Nous allons avoir une feuille où le haut est le lecteur vidéo et le bas est le titre de la description. Nous allons donc avoir besoin d' une configuration en V Stack ici et définissons l'alignement sur le début, car cela a du sens pour le texte. Nous allons avoir notre lecteur vidéo ici, auquel nous allons accéder, et nous allons avoir le titre et la description ici. Je veux que ce soit défilant au cas où le contenu serait trop important. À l'intérieur du scroll V, je vais créer une autre pile de V. Celui-ci devrait également être aligné à gauche. Je ne sais pas si j'ai besoin du premier alors. Ici, je veux mettre le titre dans la description. Il y aura un bout de texte, et ce sera le titre d'un extrait de vidéo Si cela n'existe pas, je mettrai une chaîne vide, et je vais vouloir créer cette police de titre, et je vais également la mettre en gras Je vais ajouter un peu de rembourrage en bas pour lui donner un peu d'espace Au lieu de cela, je peux ajouter l'espacement ici car il n'y a que deux éléments ici Je vais ajouter l' espacement de 30 ici. Je n'ai pas besoin d'y mettre le rembourrage, puis je vais mettre la description Il s'agira plutôt d'une description d'un extrait vidéo. Voyons à quoi cela ressemble. J'ai le titre. J'ai la description, mais je dois ajouter un peu de rembourrage Je vais ajouter le rembourrage à la vue déroulante. Dois-je le faire uniquement à l'horizontale ? Non, je vais probablement l'ajouter dans toutes les directions. C'est bon. Ça a l'air un peu mieux. Oh, indicateur de défilement. Débarrassons-nous de ça aussi. Indicateur de défilement masqué. OK. C'est bon. Aucun indicateur de défilement. Ça a l'air bien. Maintenant, je voudrais passer un moment à parler des options dont nous disposons pour afficher des vidéos YouTube dans notre application. Maintenant, nous pouvons utiliser une vue Web et afficher une vidéo YouTube intégrée. Mais ils ont également une bibliothèque cliente que nous pouvons utiliser pour intégrer des vidéos YouTube dans des applications IOS avec la bibliothèque YouTube Helper. Essentiellement, ils font la même chose, mais ils le font parce qu' ils utilisent un lecteur i frame. Ils vous facilitent un peu la tâche, mais cela utilise l'objectif C. Il s'agit donc également d'une option, qui est un peu plus facile que d' afficher votre propre vue Web et d'essayer d'y placer le lecteur tel que le code d'intégration Web lui-même La troisième option que j'ai explorée était d'utiliser Tube Player Kit. Et cette bibliothèque fonctionnait très bien avec Swift Juan, était vraiment facile à utiliser et permettait honnêtement de gagner beaucoup de temps. Je n'ai donc même pas envisagé les autres options, et c'est ce que nous allons utiliser avec cette démo. Cette bibliothèque de Sven semble donc assez active, comme vous pouvez le voir ici, dernier numéro a été fermé il y a deux jours et la dernière demande de sondage a été fusionnée il y a environ un mois Comme pour toutes les bibliothèques tierces, lorsque vous les utilisez, vous créez une dépendance à partir de votre projet. Cela dépend du code d'un tiers. Et le risque est que ce code tiers devienne obsolète, qu'il ne soit pas maintenu, qu'il soit bogué, ce qui affecte votre application Il faut donc tenir compte du rapport risque-récompense ici. D'une part, vous pouvez créer le vôtre et même en fonction de cette bibliothèque elle-même, il s'agit d'un code tiers. Je veux dire que créer le vôtre serait la meilleure chose à faire, mais c'est ce qui demanderait le plus d'efforts et le plus de temps. Par rapport à l'utilisation d'une bibliothèque tierce, vous fait gagner du temps et vous devez évaluer si le risque en vaut la peine. Dans ce cas, c'était vraiment facile à utiliser et fonctionnait parfaitement dans Swift UI. Cela semble actif, je pense que le risque est faible, c'est pourquoi j'ai décidé de l'utiliser. Plongeons-nous dans le vif du sujet et intégrons ce kit de lecteur Tube dans notre projet. Appuyons sur ce bouton bleu pour dire « utilisez ce package », et nous pourrons utiliser Swift Package Manager pour l'importer directement dans notre projet. Vous savez maintenant comment, dans la deuxième leçon, nous avons créé un projet de démonstration pour tester l'envoi de requêtes réseau et réception de réponses depuis l'API de données YouTube. Ce serait l' occasion idéale de faire de même. Chaque fois que j'essaie quelque chose de nouveau, lancez un nouveau projet ExCo, testez-le, s'il fonctionne, intégrez-le à votre projet principal C'est ce que j'ai fait, donc je ne vais pas revivre ça avec toi pour ensuite passer une leçon supplémentaire à le faire. Ce que je vais faire, c'est simplement intégrer directement dans mon projet principal. Mais à l'avenir, lorsque vous travaillerez sur vos propres projets, je vous fais juste savoir que vous devriez envisager de ne pas le faire, notamment parce que nous n' utilisons pas de contrôle de source ici. Si vous jouez avec votre code, que vous importez des choses et que vous gâchez quelque chose, il est difficile de revenir en arrière, n'est-ce pas ? Donc, testez d'abord les choses dans un autre projet. Cela dit, importons cela directement dans notre truc. Accédez donc au fichier Dépendances du package publicitaire, et j'ai copié cette URL. Nous allons simplement le saisir juste là, et voilà, le kit de lecteur uTub Vous pouvez continuer et appuyer sur le package publicitaire. Et pendant ce temps, revenons ici faisons défiler la page vers le bas et voyons comment nous utilisons ce truc. Donc, en regardant cet extrait de code, vous importez d'abord le kit de lecteur UT, puis vous créez la vue du lecteur Tube Et il semble que vous transmettez simplement l'URL comme ça. Donc, comme premier test, pourquoi ne pas faire exactement cela ? Nous allons le copier. Nous allons y retourner. Ajoutons un package. Ça y est. Dans la vue détaillée de la vidéo, nous allons vous importer le kit pour deux joueurs, puis dans la section Lecteur vidéo, nous allons simplement l'insérer directement. Et nous allons l'exécuter maintenant et voir ce qui se passe. C'est bien, ça montre une vidéo, mais remarquez que le cadre est plus grand que l' espace dont nous disposons. Ça joue. C'est génial. Les commandes sont là. La vidéo elle-même n' a pas l'air plus large que l'espace dont nous disposons. On dirait que ça correspond à la largeur. Cependant, il semble qu'il y ait beaucoup d' espace noir en haut et en bas parce que lorsque vous le chargez, cela prend tellement de hauteur. Il se peut que nous devions définir la largeur suffit de définir le cadre pour qu'il s'adapte à l' espace dont nous disposons. De plus, nous ne voulons pas afficher cette vidéo. Pourquoi ne pas essayer d'insérer notre propre identifiant ici de manière dynamique Ce serait snip it. Mais comme vous pouvez le constater, il y a quelque chose qui ne va pas ici parce que j'essaie de le faire, cela ne fonctionne pas. La saisie semi-automatique ne s'affiche pas. Nous ne pouvons donc pas réellement le faire de cette façon. Nous ne pouvons pas simplement insérer un joker dans un paramètre comme celui-ci. Pourquoi ne pas examiner d' autres méthodes que nous pouvons utiliser et qui pourraient peut-être fonctionner pour nous ? OK. C'est donc finalement ce que j'ai fini par utiliser ici. Vous pouvez donc d'abord configurer le lecteur YouTube de cette manière, où vous pouvez transmettre un identifiant vidéo dynamique, puis utiliser cette vue du lecteur vidéo. Copions donc ceci. Si c'est le cas, configurons-le ici. Ensuite, nous allons y ajouter notre identifiant. Il s'agirait de l'identifiant de la ressource du set vidéo. S'il s'avère que c'est Nil, nous passerons une chaîne vide. Je ne veux pas qu'il se joue automatiquement, donc je vais le régler sur false Ensuite, avec cette configuration, si vous revenez sur cette page, vous pouvez voir que vous pouvez simplement passer cette configuration dans la vue du lecteur YouTube. Oui, donc ça ressemble à ça. C'est ce que nous avons fait. Nous avons configuré quelque chose, puis nous pouvons le passer dans la vue du lecteur YouTube de cette manière. J'ai oublié exactement l'extrait de code en le feuilletant Mais si vous prenez le temps de le lire, il y a encore beaucoup de choses intéressantes que je peux faire. Mais je vais juste vous montrer comment procéder ici. Lorsque vous créez la configuration comme ça, c'est Tube Player, vous pouvez même l'appeler « OK ». Au lieu de spécifier l'URL ici, nous pouvons en fait transmettre le lecteur Tube, ce que nous avons créé ici. Je vais le gérer. Cela nous permet de spécifier cet identifiant dynamique. Voici ma vidéo. Le cadre ne fonctionne pas correctement, n'est-ce pas ? Mais il affiche la bonne vidéo et il fonctionne. Parfait. Nous devons maintenant déterminer comment définir ce cadre pour ce lecteur vidéo afin qu'il s'adapte à l'espace. Il vous suffit d'encadrer et définir la largeur et la hauteur. Le problème, c'est que nous devons savoir ce que c'est. À l'aide du lecteur de géométrie, nous pouvons examiner la largeur dont nous disposons. Et nous allons essentiellement créer le lecteur de géométrie ici. Et nous allons découper toute la pile en V, et nous allons la coller dans le lecteur de géométrie. Maintenant que ce Vtac se trouve dans le lecteur de géométrie, nous avons accès au proxy La largeur sera la largeur du point proxy, ce qui nous donne la largeur de l'écran. En tant que lecteur de géométrie, le but de celui-ci est de lire les informations de taille. Ce paramètre nous donne donc une référence aux tailles. Maintenant que nous avons la largeur, nous pouvons nous assurer que c'est la bonne largeur, mais nous devons également définir une hauteur appropriée. Seul le réglage de la largeur ne fonctionnera pas. La question est de savoir à quoi devons-nous régler la hauteur ? Comment s'en sortir ? Eh bien, nous pouvons exprimer la hauteur sous la forme d'un rapport à la largeur. Nous devons déterminer les vidéos YouTube qui s'affichent. Quel est le rapport hauteur/largeur ? Un indice que nous avons est que si nous revenons à, je pourrais ouvrir à nouveau le proxy maan. Mais essentiellement, je veux comprendre , commentons cela une seconde. Quel est ce rapport entre la largeur et la hauteur ? Il existe différentes manières de l'obtenir. Mais jetons un coup d'œil à ça. Je vais me baser sur la taille des vignettes. Si nous examinons les éléments et les vignettes, nous avons choisi la taille moyenne, 320 x Si la largeur est de 320, quelle est la hauteur ? 320/180. Le rapport est que la largeur est de 1,78, 78 fois plus grande que la hauteur Nous inverserions cela pour obtenir la hauteur, car nous avons la largeur. Nous diviserions 320 par cela pour obtenir 180. Voyons si le calcul fonctionne. T 20/1 0,7 s78 nous donne 180. C'est ainsi que nous allons obtenir la hauteur. en revenir, si lecteur de géométrie proxy doit nous donner la largeur, alors nous pourrions calculer la hauteur en divisant la largeur de la taille du proxy par quoi ? Oui, huit. Jetons un coup d' œil. Cela devrait donc fonctionner. Et bien sûr, nous avons la largeur et la hauteur appropriées. Ce qui est cool, c'est que cela fonctionnerait également comme ça. Surtout si nous ignorons les zones de sécurité. C'est pourquoi vous voyez cette partie ici. Si nous revenons à la vue d'accueil, nous pouvons dire d'ignorer la zone de sécurité. Cela pourrait le faire disparaître. Il y a ce rembourrage là, donc je ne veux pas y ajouter ce rembourrage Je souhaite que la vue par onglets soit complète. Parfait. Mais maintenant, nous devons ajouter un rembourrage à la vue du fil d'actualité Nous allons probablement le mettre ici. Euh, mettons le rembourrage. Oh, probablement juste un rembourrage horizontal. OK. Très bien, notre application YouTube Player est belle et agréable à utiliser J'espère que vous avez beaucoup appris, et j' espère que vous avez pu suivre. Consultez nos autres cours sur la plateforme. D'accord. Merci de votre attention, je vous verrai au prochain cours.