Transcripciones
1. Lección 01: exploración de la API de datos de YouTube: Mi nombre es Chris, y te
voy a mostrar cómo construir esta aplicación IOS que muestra
videos de YouTube. Ahora bien, así es como se ve
la aplicación. Puede configurar la
aplicación ya sea para mostrar videos
individuales o todos
los videos de una lista de reproducción. Ahora, los datos se están recuperando
a través de la API de datos de YouTube Entonces, si modificas la lista de reproducción agregando
o eliminando videos, automáticamente
se reflejará en la aplicación sin tener
que revisar ningún código. Ah, y puedes acceder a
los videos para verlos también o leer la descripción del
video. Bien, ahora echemos un
vistazo a qué habilidades obtendrás
después de completar esta aplicación Después de completar esta aplicación, vas a obtener
experiencia trabajando con la API de datos de YouTube. También vas a
aprender a enviar y recibir
solicitudes de red desde la app. Al hacerlo,
vas a aprender un poco sobre la concurrencia de
IOS, especialmente usando A Sync Wait Y vas a
aprender a depurar tráfico de
red usando Pxy Man, que es una herramienta gratuita de
terceros Y eso te va a permitir solucionar cualquier cosa que salga mal cuando estés haciendo
tus llamadas de red Y luego, cuando
recuperemos los datos de la API de uTube, necesitamos convertirlos en
algo utilizable en nuestra aplicación Entonces ahí es donde vas
a aprender sobre el análisis JSON. Vamos a necesitar almacenar
nuestra clave API de forma segura en nuestro proyecto de código X para que no se filtre
accidentalmente Vas a
aprender a hacer eso. Y en cuanto al lado de la aplicación, vas a
aprender a reproducir videos de
uTube en tu aplicación IOS Vamos a usar una biblioteca de
terceros llamada uTube Player Kit, y vamos a
integrar esa biblioteca en XCode usando Swift
Package Manager Entonces vas a aprender
algunas cosas rápidas de DUI como usar listas, lector de
geometría, una imagen de sincronización, vista de
progreso, vistas de desplazamiento, solo por nombrar algunas,
y mucho más, solo en términos de construir interfaces de usuario y
capturar la interacción del usuario Hagamos una breve
descripción general de cómo
funciona todo esto en caso de que seas nuevo en
trabajar con API. Si has usado
las API antes, entonces esto solo será una
pequeña reseña para ti. Ahora una API es una
interfaz a la que
puedes conectarte para enviar
y recibir datos. Para ponerlo en términos más simples, puedes pensar en una
API como una colección de URL a las que tu app puede acceder para recuperar
datos o para enviar datos Ahora hay muchas
APIs por ahí. Algunos son gratuitos y otros son de pago. Pero la mayoría de las grandes plataformas como Facebook, X Spotify Google, todas
tienen APIs
para que trabajes con esa plataforma o para
recuperar datos de ella. Hay algunas APIs que solo
están enfocadas en datos, como recuperar recetas o precios de acciones o
datos meteorológicos, cosas así Poder usar APIs en tu app es muy, muy potente. ¿Qué sucede realmente y cómo usas una API desde tu app? Bueno, desde tu app IOS, envías una solicitud de red
a un punto final de API, que recuerda es solo una URL. En su solicitud de red, especifica
qué datos desea recuperar. En algunas APIs, también tienes que identificarte
en la solicitud. Esta parte de identificación
se llama autenticación. La API recibe tu
solicitud y te
autenticará y además asegurará de que tu
solicitud sea válida Tenga en cuenta que no todas las API requieren autenticación,
pero la mayoría sí. Ahora, si tu autenticación se
verifica y tu
solicitud es válida, entonces la API seguirá
adelante y recopilará los datos y enviará una
respuesta a tu app. La respuesta contiene los
datos que solicitó, y normalmente está en
un formato llamado JSN Cuando tu app recibe
la respuesta, puede leer los
datos con formato JSN y luego
convertirlos en datos que
se pueden mostrar en la pantalla
para que el usuario los vea Este proceso de convertir los datos JSN en
datos utilizables en su aplicación, esto se llama análisis JSN
. Todo bien. Este es el proceso que
vas a aprender a hacer con la API de YouTube. Ahora echemos un
vistazo a la API de YouTube. Aquí estamos la API de datos de
YouTube. Puedes visitar esta página en
developers.google.com Quiero que vayas por debajo de
esta sección que dice Agregar datos de YouTube
y hacer clic en referencias. Y aquí puedes ver todos
los endpoints que están disponibles en esta API para que nuestra app
envíe una solicitud a Ahora, recuerden, estos
puntos finales, son solo URL. Entonces tomemos por
ejemplo, la búsqueda. Veamos primero la descripción general. Esto le describe
lo que hace este punto final, cómo interactúa con él y enumera diferentes métodos,
diferentes formas en las que puede
usar este punto final. Entonces echemos un vistazo a la lista. Cuando haces clic en eso, ves ese cambio
a esta sección aquí y los casos de uso comunes. Esto es esencialmente buscar algo en
YouTube. Puedes buscar aquí algunos casos de
uso por palabra clave, que probablemente sea
el ejemplo típico. Ubicación eventos en vivo o
tus videos, por ejemplo. Si te desplazas un poco más abajo, esta es la parte importante aquí. Esto te está diciendo la
URL exacta que necesitas golpear. Este es el punto final, y
este es el tipo de solicitud. Cuando envías una solicitud de red, puede ser
una de un par de algunos tipos diferentes, y get es el
que normalmente se usa para cuando quieres
recuperar datos de la API. No solo necesitas
enviar una solicitud a esta URL, sino que debes especificar los
parámetros de tu solicitud. Recuerda. Si estás buscando algo en YouTube,
¿qué estás buscando? No se puede simplemente decir búsqueda. Aquí, estos parámetros,
describen lo que
puedes especificar junto con tu solicitud
para decirle a la API lo que quieres recuperar o lo que estás
buscando en este caso. Echemos un vistazo aquí. Una cosa que debo mencionar aquí está en la sección de
parámetros, no siempre
hay, pero
puede que haya parámetros requeridos. Recuerda, en esa visión general, dije que la API comprueba tu solicitud
para ver si es válida. Bueno, si es un parámetro
requerido, entonces hay que especificar
esta información. Optativas,
puedes dejar fuera, pero las requeridas, tienes
que incluir como parte
de tu solicitud. ¿Cuál es este parámetro requerido? Esta parte, se llama parte. Este parámetro especifica
una lista separada por comas de una o más propiedades de
recursos de búsqueda que
incluirá la respuesta API, establece el
valor del parámetro para recortarlo. Entonces es un poco difícil determinar qué significan
estas cosas. Pero lo que normalmente voy a
decir es probarlo. El siguiente paso es
hacer un seguimiento de esta API, vamos
a establecer este parámetro para recortarlo como dice, y luego veamos
qué se devuelve Y si no es lo que
estamos buscando, probablemente
podamos ver qué más podemos especificar
para este parámetro. Ahora lo que estoy buscando es, si queremos
buscar algo específico, como una palabra clave, ¿dónde haríamos eso o
qué haríamos? Esto es buscar por ubicación. Esto es buscar por evento. Esto es buscar
tipos de canal. Canal específico puedes
buscar cuántos resultados deseas. Este es el indicado.
El parámetro Qe especifica el
término de consulta que se va a buscar Si quisieras
buscar videos sobre,
digamos, jardinería,
pondrías la palabra clave gardening
en este parámetro. Te mostraré un poco más adelante cómo asignas esos datos
a estos parámetros, pero no vamos
a bucear tan profundo. Solo quería
darte una visión general de la API de YouTube y todos los endpoints
que están disponibles Y también cómo funcionan estos
puntos finales. Te enteraste de la URL, esta es la URL a la que
vas a enviar la solicitud. Este es tu tipo de solicitud, y hay parámetros
requeridos que tienes que especificar, y hay opcionales que darían más contexto
para tu solicitud. Ahora, el punto final que
vamos a usar en esta serie de videos, Um, recuerda, esta app, puede mostrar
cualquier video de YouTube, y puede reproducirlo en la app. Entonces, para mi caso de uso, quiero mostrar
una lista de videos
de una lista de reproducción específica porque tengo un canal de
YouTube, y tengo algunas listas de reproducción para las que quiero mostrar
los videos. Entonces el punto final que voy
a usar son las listas de reproducción aquí, y voy a usar En realidad, creo que fue que no puedo recordar si era playlist
o videos en este momento. Bien. Entonces echemos un
vistazo a este punto final. Así que aquí está el punto final
de la lista de reproducción, obtener. Y si echamos un vistazo
al caso de uso, veamos. Recupera todas las
listas de reproducción o sí, todas las listas de reproducción para un canal.
Eso no es lo que quiero. Esta es, veamos. La solicitud que uso
recupera una lista de reproducción específica, y creo que fue este
punto final, porque hay, veamos, el ID especifica
que estamos siendo recuperados Sí. Esto es lo que usé. Entonces, en lugar de recuperar todas las listas de
reproducción del canal, quería una específica Entonces tuve que incluir aquí
este parámetro, que se llamaba ID, y este es el ID de la lista de
reproducción específica que quiero. Y luego dentro de esa lista de reproducción, también obtuve los videos. Después de completar esta serie de
videos y seguir
adelante y aprender a
usar esta API de datos de YouTube, siéntase libre de cambiar la
forma en que funciona la aplicación. Puedes implementar la búsqueda
en tu app si lo deseas. Simplemente ponga un campo de texto, cuando el usuario escriba
algo, llame a esta llamada a este punto final. Pase la palabra clave que busca
el usuario y devuelva una lista
de resultados de video, y el usuario puede
reproducirla directamente en la aplicación. Lo que
te voy a mostrar en la serie de videos es usar este punto final, mostrando una
lista específica de videos. O puedes seleccionar
tu propia lista de reproducción o tal vez seleccionar
videos específicos que quieras mostrar, y podrías usar
otro Así que siéntete libre de
personalizar la aplicación. Pero te recomendaría, especialmente si eres nuevo en
trabajar con APIs
y redes, que sigas adelante en esta
serie de videos, esperar hasta el final, ponerte cómodo después
de haber logrado el resultado y luego personalizarlo. Ahora echemos un vistazo a la
autenticación porque esta API de datos de YouTube necesita
identificar quién eres, antes de que vaya a
renunciar a sus datos. Ahora, antes de mostrarles la parte de autenticación de
YouTube, quiero señalar
esta línea aquí mismo. Estos puntos finales, todos tienen un impacto de cuota y te
dice cuánto cuesta enviar una solicitud y
obtener una respuesta
desde este punto final, y eso tiene todo que ver con las cosas de autenticación. Ahora pasemos a ahí. Ahora vamos a dar
click en Guías. Normalmente con la
documentación de la API, todo el material de autenticación es todo el camino al principio. Aquí, te dice
cómo hacer eso. Vamos a entrar en resumen. En realidad, vamos a entrar en
obtener las credenciales aquí, verás que
hay dos tipos diferentes, dos técnicas diferentes
que puedes ir sobre esto. Uno es OOf y otro es claves API. Ahora, la mayoría de las APIs
usarán una u otra,
y a veces ambas. Pero si tuviera que tirar un número
por ahí, diría que el 90% de las APIs, puedes usar Claves API. Permítanme explicarles brevemente la
diferencia entre ambos. La autenticación de clave API es donde te registras
para obtener una cuenta, y te dan una larga cadena de letras y números,
esa es tu clave. Cuando estés haciendo
solicitudes de red a la API, vas a especificar esa clave con tu solicitud y de esa manera, ellos pueden asociar esa
solicitud con tu cuenta. Entonces también te pueden limitar la
tarifa. Pueden ver
cuánto estás usando la API, si eres abusivo,
si eres Sí, si eres Sí, su mayoría limitantes de tarifas, dándote cuota y
cosas así. Porque te puedes imaginar
si es ilimitado
y lo más rápido posible y todos están golpeando su API, podría bajarla o la carga del servidor
podría ser demasiado alta. Esto les permite controlar el
acceso a su API. Si te encuentran abusivo, podrían prohibir tu llave, y ya no
podrás
hacer solicitudes. Así es como funciona la
autenticación de claves API. Ahora, OOP es un
poco diferente. Aquí es donde normalmente
ves un cuadro de nombre de usuario y
contraseña en tu aplicación, y el usuario tiene que iniciar sesión en su cuenta de Google,
y al hacerlo, está obteniendo un
token de la API. Después, adjuntas ese token a
las solicitudes que envíes. Entonces hay una distinción
porque ahora están asociando esas solicitudes con la cuenta de Google del usuario Así que ya no estás
siendo limitado de tarifa. No está contando
para tu cuota, es contar
para su cuota. También lo que puedes
hacer es diferente porque ahora que Google puede identificar su cuenta de
Google, ese usuario puede realizar cosas como darle me gusta a un video o
suscribirse a un video, puedes llamar a esos
tipos de endpoints O tal vez siguiendo a un usuario. Mientras que el acceso a API Key,
todos tus usuarios, están usando la misma clave API, la que
te registraste, que está asociada
a tu cuenta. Es por eso que con las claves API, realmente no
puedes hacer cosas como que guste un video o suscribirte a un canal porque la API no
tiene idea de quién es el usuario Todo lo que pueden ver es
que pueden asociar esta clave API a tu
cuenta que creaste. Oof está un
poco más involucrado, así que no vamos a usar
eso en esta serie de videos Vamos a pasar por
la ruta de API Key, y aprender a
hacerlo cubrirá la gran mayoría de las API que
encontrarás. Todo bien. Así que ahora pasemos al
siguiente paso que en realidad es crear una cuenta y
obtener nuestra clave API. Entonces todo lo que tienes que hacer es seguir el enlace de esta página de
credenciales, y voy a
abrirla en una nueva pestaña, te va a pedir que inicies sesión
en tu cuenta de Google. Debido a que ya estoy registrado, me ha traído a esta página de
credenciales de mi proyecto. Probablemente tampoco
tendrás un proyecto. Así que déjame intentar volver a
salir al tablero. Es posible que tengas que
pasar por algunas
preguntas de incorporación o
algo así Pero eventualmente
llegarás a una página que se ve así porque aquí mismo está
diciendo que tengo un proyecto, pero no vas a tener un proyecto. Podría incitarte a
crear un nuevo proyecto. Puedes seguir adelante y hacer eso, o puedes hacer clic en este
menú desplegable aquí arriba, y luego podemos
elegir nuevo proyecto, y podemos crear un
proyecto juntos. Parece que no puedo
crear un nuevo proyecto. Pero esto es lo que harías. Escribirías el nombre de un proyecto. A ti no me parece que
este importe demasiado. Para que puedas elegir lo que sea
y simplemente presionar Crear. Entonces, una vez que hayas
creado un proyecto, sigue
adelante y navega
hasta ese proyecto. Entonces, para mí,
habría éste de aquí mismo. Y vas a
hacer clic en credenciales, lo siento API
y servicios, y luego vas a
bajar a credenciales. Entonces una vez que llegas aquí, aquí es donde puedes
crear la clave API. Entonces vas a decir
crear credenciales. Crear clave API. Va a
generar uno para ti. Y entonces vas a tener que
restringirlo a la API de datos de
YouTube. Eso estaría bien. refrescar la pantalla.
¿Lo hizo por mí? Ahí está. Esta es la nueva clave API que
se acaba de crear. Voy a hacer click en él. Y entonces voy a poner
el restringe aquí mismo. Voy a
restringirlo a una API específica. La razón por la que esto es una
buena idea es solo para que si la Clave API se
mete en las manos equivocadas, quiero decir, limita lo que pueden hacer con solo usar la API de datos de
YouTube. Creo que es una buena práctica no sólo dar
rienda suelta a todo. Restringir cosas y eliminar
opciones siempre es bueno, sobre todo si
no necesitas esas opciones porque limita
lo que limita cualquier comportamiento
inesperado Lo mismo va para la
programación, ¿verdad? Y no le pondría
restricciones a eso. Quiero decir, podrías hacer esto, pero va a conseguir Podría interferir
con tus pruebas, sobre todo si esta
es tu primera vez. Así que vamos a elegir ninguno. Restringir la clave a
la API de datos de YouTube. Ahí está tu
clave API. No deberías
mostrarle esto a nadie. No voy a estar usando esta clave, así que no intentes
copiarla y usar esta clave. Probablemente borraré esto después. Pero adelante y guárdala. Y ahí tienes. Tienes una clave
válida que puedes usar, y vas a estar usando esta clave dentro de
tu proyecto IOS. Todo bien. Ahora ya estamos
establecidos. Bien, ahora estamos listos para comenzar a
usar la API de datos de YouTube. En la siguiente lección,
vamos a construir un proyecto de prueba
para conectarnos a la API y recuperar datos
de ella. Te veré ahí.
2. Lección 02: obtención de datos de la API de YouTube: En la última lección,
pasamos por cómo conectarnos a las API y revisamos
la API de datos de YouTube. También creamos nuestra clave API. Ahora estamos listos para comenzar a
recuperar datos de la API. Vamos a sumergirnos directamente. Bien, así que vamos a probar la obtención de
datos de esta API. Ahora, antes de entrar en el código
X para probar esto, hay una
manera aún más fácil de probar esta API desde
dentro de la documentación. Tienen esta cosa
llamada API Explorer, y puedes
probar los puntos finales directamente desde este panel. Ahora, todo lo que tienes que
hacer es asegurarte de haber iniciado sesión en tu cuenta de Google
en la esquina superior derecha. Esta es la misma cuenta con la
que creaste tu API Key
en la Lección. Recuerda cómo tuvimos que iniciar sesión en nuestra
cuenta de Google y venir aquí, crear un proyecto y
luego crear una Clave API. Lo que va a suceder
mientras estés conectado la misma cuenta de Google es cuando uses este Explorador de API, va a tomar esa
clave API de ahí y usarla. Entonces, probemos el punto final. Ahora, en realidad
vamos a usar este, punto final de elementos de la lista de
reproducción. Porque en la lección anterior, hablé de usar
el punto final de la lista de reproducción, pero este en realidad
solo te da información sobre
la lista de reproducción en sí. Play list items, este es
el que queremos usar. Como puedes ver,
esta es la URL
a la que tenemos que enviar la solicitud, este es el tipo de solicitud, y este es el único parámetro
requerido, y puedes especificar diferentes niveles de detalle
que deseas recuperar. Ahora bien, la razón por la que hacen esto es porque para tus propósitos, no
necesites
toda la información, y en ese caso, puedes especificar quizás un nivel de detalle
más bajo, y eso ahorraría ancho de banda. ¿Por qué recuperar más
información de la que necesita? Va a tomar más tiempo, va a tomar
más ancho de banda, y así sucesivamente y así sucesivamente. Me he dado cuenta
que para esta app, necesito la miniatura, el ID del
video para mostrar el video,
obviamente, miniatura
para mostrar la Necesito el título en
la descripción. Y eso es todo. Y Snippet es el nivel de
detalle que necesito Contiene todo
lo que acabo de mencionar. Ahora bien, el otro parámetro
que tengo que especificar es el ID de la lista de reproducción
porque quiero
recuperar todos los videos
de una lista de reproducción específica. Ahora, cuando
usé por primera vez este punto final, cometí el error de poner el ID de la lista de reproducción
en este parámetro, pero no devolvió nada, y me di cuenta de que, oh, se suponía que debía
ponerlo en este. Entonces cometerán
el mismo error. Ahora, déjame
mostrarte cómo puedes obtener el ID de la
lista de reproducción que deseas. Así que tengo una lista de reproducción justo
aquí que quiero usar, y ten en cuenta que puedes usar
cualquier playlist que quieras. Entonces todo después de este signo
igual aquí mismo, y antes de cualquier ampersand, ese es el ID de la lista de reproducción URL podría tener
algo como esto, digamos n t es igual a
uno, dos, y lo que sea. Entre el signo igual
y el signo final. Después de que la lista sea igual, esa es tu ID
de lista de reproducción. No te preocupes. Descubrirás muy rápidamente si es el ID de la
lista de reproducción o no, porque si
no
recuperas ningún dato de esta llamada a la API, entonces sabrás
que ese no
era el ID de la lista de reproducción. Esa es mi ID de lista de reproducción.
Voy a copiar eso. Entonces en mi explorador de API, déjame a pantalla completa esto. A lo mejor sólo voy a hacer el texto un poco más grande para
que sea más fácil de ver. Bajo ID de lista de reproducción,
voy a pegar eso. Tengo que especificar una parte aquí. Recuerda, esto podría
ser detalles del contenido, ID, estado o fragmento Snippet es lo que necesito. Yo ahí. También puedes ver cómo cambia la URL a la que
vas
a tener que enviar una solicitud de red. Si echas un vistazo, esto
podría ser interesante para ti. Este es el punto final que
estamos enviando para golpear la API, enviar una solicitud a. Entonces los datos que especificé aquí en los parámetros,
está todo aquí. Mira, P es igual a fragmento, ID de lista de
reproducción es igual a ese ID y luego clave es igual a
tu clave API Ahora no hay ningún cuadro de texto para
poner en mi clave API aquí. Entonces esto es jalar de tu
llave que creaste aquí. Por eso tienes que
asegurarte de haber iniciado sesión en la misma cuenta y porque va a
ir agarrándola de ahí. Voy a desmarcar
Google O Auth. Voy a golpear ejecutar. Si todo va bien,
deberías obtener una respuesta de 200, lo
que significa que fue exitosa, y luego recuperas
todos estos datos. Ahora bien, estos son los datos
formateados de JSO de los que te
estaba
contando que regresan de la respuesta de
la API de YouTube Y nos toca a nosotros
convertir estos datos. Recuerda que proceso
se llama análisis JSM, para convertir estos datos JSON en datos
utilizables dentro de nuestra app Vas a
ver cómo hacerlo en algunas lecciones de
la serie, seguro. Pero por ahora, solo quiero
echar un vistazo muy rápido a los datos que se
devuelven y asegurarme que tengo la
información que necesito. Aquí puedo ver que tengo
el título de la lección, la descripción de
la lección, las miniaturas, las URL de imagen, tengo el
ID del video ahí perfecto Entonces esto es para la Lección dos
y así sucesivamente y así sucesivamente. Lo tengo todo. Ahora bien,
si no obtuviste esta respuesta, tal vez conseguiste un error
o algo así. Yo verificaría que esa parte es igual a un fragmento
deletreado Me aseguraría de que tu ID de lista de
reproducción sea correcta. mejor tal vez agarraste el segmento equivocado
de la URL ahí Entonces también me
aseguraría haber iniciado sesión en la cuenta de Google
correcta que tiene acceso a la APIky Y luego inténtalo de nuevo, pegó lindo. Ahora bien, si esto no funciona, por alguna razón, no
se puede conseguir que funcione. No te preocupes, recuerda, esto
fue solo una prueba rápida. La verdadera prueba es poder
hacer esto dentro del código X, dentro de una app IS. Eso es lo que
vamos a hacer a continuación. No te preocupes si
no obtuviste esta parte, esta fue una
prueba rápida de la API. Ahora vamos a iniciar
nuestro proyecto de código X. Vamos a iniciar
un proyecto de prueba. Esta no va
a ser nuestra verdadera app. Me gusta hacer cuando estoy
probando cosas nuevas es simplemente abrir un
nuevo proyecto Xcode,
probar algo, asegurarme pueda hacerlo funcionar antes integrarlo en
mi proyecto principal Eso es lo que
vamos a hacer aquí. Vamos a crear
un proyecto de código X de prueba, y vamos a probar esto. Vamos a hacerlo. Vamos a crear
nuestro proyecto de código X. Voy a hacer esto y
lanzar un nuevo proyecto de código X. En IOS, vamos a elegir la aplicación. Vamos a continuación. Voy
a llamarlo test YT API. Esta no es nuestra app oficial. Sólo va a ser una prueba. La interfaz es Swift GI, lenguaje es Swift, el
almacenamiento no es ninguno. Todo esto está descontrolado.
Vamos a hacer clic en siguiente. No necesito crear
un repositorio Git. Solo voy a crear esto en mi escritorio porque va a
ser un proyecto de usar y tirar. Bien. Hagamos esto ahora. Hazlo un poco
más grande para que podamos ver, y luego lo que
vamos a hacer es enviar esa llamada a la API justo cuando
esta se lance desde aquí. Quiero agregar una tarea aquí hacer tarea y abrir
un par de llaves. Aquí dentro, vamos a hacer la llamada a la red e
imprimir los resultados. Recuerda, no voy a
hacer las cosas de la mejor manera. Solo quiero
asegurarme de poder conectarme a la API desde el código X. Recibir los
datos correctos de vuelta, ¿verdad? Estamos probando en la API. Y aquí no es
necesariamente donde
haríamos las cosas también en
nuestro proyecto real. Nuevamente, esta es una prueba. Te explicaré cuál es
la tarea un poco más tarde. Voy a conectar todos
los puntos por ti. Pero por ahora, lo vamos a hacer en este pequeño bloque de tareas. Entonces quiero que escribas eso. Y luego déjame escribir algunas declaraciones de código y
guiarte no por declaraciones de código, sino algunos comentarios y
guiarte a través de los pasos
que vamos a dar. Entonces primero, vamos a definir la
URL del punto final con parámetros. Esa es la URL a la que
vamos a enviar la solicitud. Vamos a crear
una instancia de URL. Vamos a crear
una solicitud de URL. Instancia. Eso es lo que en realidad
vamos a enviar, y luego vamos a enviar
la solicitud con r sesión. Ese es un mecanismo con el
que podemos hacer networking. Entonces vamos a
imprimir la respuesta. También vamos a tener que
manejar errores. Bien. Probemos esto ahora. Primero, definamos el
punto final UL con parámetros. Si echas un vistazo
al explorador de API, aquí verás que este de
aquí contiene
todo lo que necesitamos, excepto que tenemos que insertar
nuestra clave API ahí mismo. Esta es esencialmente la
UL que tenemos que golpear. Ya está escrito para nosotros. Eso es lo que me voy a llevar. Ahora bien, una cosa
quiero señalar, que no estoy exactamente seguro de por qué, si le echas un vistazo a
este dominio de endpoint, dice Tube dot google api.com Pero si le echas un vistazo a esto, es Google api.com
recorta YouTube. He usado ambos. Ambos funcionan. Esto probablemente sería un
poco más seguro de usar porque esto está en la
documentación oficial, mientras que esto está en
este explorador APA, tal vez simplemente no esté actualizado. Ah, vamos a usar esto y luego podemos
construirlo juntos. Podemos construir esa
URL solo para que
también sepas que tienes una idea
de cómo se construye. Voy a declarar una constante. Yo lo llamo cadena URL. Ahora, ten en cuenta, no es así como
lo vamos a hacer en nuestro proyecto real. Solo voy a escribir
toda la cadena aquí, incluyendo la clave API
y todos los parámetros. Entonces, para incluir parámetros,
pones un signo de interrogación, y luego a partir de ese momento
, son parámetros. Y entonces el formato para
especificar los parámetros va a ser el nombre del parámetro
es igual al valor del parámetro. ¿Cuál es el primero
que debemos especificar? ¿Qué tal parte? Ya que se requiere
parte de todos modos Entonces vamos a
escribir part equals, y recuerda que puedes especificar
uno o más de estos. Te dice que especifiques más pondrías una
coma entre ellos, pero solo necesitamos un fragmento Puedo poner fragmento. Ahora, para especificar un
segundo parámetro, pones ampersand y luego el mismo nombre de parámetro es igual al formato de valor de
parámetro ¿Cuál es el segundo parámetro
que queremos especificar? ¿Esa es la identificación de la lista de reproducción? También hay que seguirlo
con base en las capitales. Lista de reproducción P en minúscula, seguida de grande I ID. Ahora es igual, ¿cuál es
el ID de la lista de reproducción? Y tire de nuevo la pantalla y voy a agarrar
mi identificación de aquí. Ahora bien, esto realmente tiene sentido. Si puedes ver la URL, puedes ver la lista de reproducción, y luego hay
un signo de interrogación, lo que significa parámetros
a partir de ahora. Lista es el
nombre del parámetro es igual, y luego el valor del parámetro. Entonces el final del valor del
parámetro es ampersand y luego segundo parámetro y así sucesivamente y así
sucesivamente Por eso digo agarra todo
después del signo igual, pero antes del Ampersand porque ese es
solo el conector
para el siguiente parámetro Esa es mi ID de lista de reproducción. Entonces pongámoslo
ahí mismo. También necesito un parámetro más. Pongamos el signo ampersand,
y esta es la clave es
igual a mi clave API Ahora, sigo diciendo esto porque no quiero que alguien
vea esto y diga:
Oye, no deberías simplemente poner ahí
tu clave API. Lo sé. Nuevamente, esto es una prueba, así es como
vamos a hacerlo ahora mismo. Cuando trabajemos en
el proyecto real, aseguraremos la clave. Así que volvamos
a nuestra llave aquí. Voy a mostrar mi llave, y esta es nuestra clave de prueba. Vamos a ponerlo ahí
mismo. Esa es la URL a la que vamos
a enviar nuestra solicitud. Y esta URL contiene todos los
parámetros de solicitud y la APIK tiene todo lo que necesitamos Aquí, vamos a crear
la instancia de URL. Deje que URL sea igual a URL, y luego vamos
a usar este aquí donde solo puede
pasar la cadena URL. Pero hay que tener en cuenta que esta
creación de esta instancia UR, puede que no
pueda crearla con éxito,
así que tenemos que comprobarlo. Si estás familiarizado
con Swift, si has tomado algunos
cursos antes,
sabrás qué son los opcionales, y al crear esto, se devuelve
una instancia de URL opcional, lo
que significa que puede que
no tenga éxito Tenemos que comprobarlo primero. Una forma en
que podemos hacerlo es podemos decir si URL es igual a URL, derecho. Lo que esto hace es verificar. Si eso no es NL, es
decir, que fue
capaz de crearlo con éxito, entonces asignarlo a esta constante, y luego moveremos
esas cosas ahí, y luego podremos usarlo. Pero si es NIL, sólo
va a
saltar y venir aquí y no va
a ejecutar ninguno de este código Si es NL, eso
significa que no pudo crear con éxito
la cadena URL, y no podemos continuar de todos modos Ahora vamos a crear la solicitud. Let request es igual a solicitud de URL, y vamos a pasar en esta instancia de URL que
creamos esta. Esto es lo que creamos. Esto comprueba que no es NL, y luego si no es
NL, si no está vacío, se lo asigna a esto,
y luego estamos pasando eso a la creación
de nuestra petición Ahora que tenemos nuestra
petición en esta constante, vamos a enviar la
solicitud con sesión URL. Esta es la sesión de URL es lo que
utilizamos para la creación de redes. Sesión URL compartida. Hay un
objeto de sesión compartida que podemos usar. No tenemos que crear los nuestros propios. Y hay un método
llamado Data four. Esto va a buscar los
datos para una solicitud dada. Mira, todo conecta. Podemos pasar en esta solicitud ahora a este método.
Pero échale un vistazo. Hay dos palabras clave. Hay una sincronización y
hay tiros. Esas son dos
cosas distintas con las
que tenemos que lidiar y
tenemos que observar. Hablemos primero de T lanza. Esta palabra clave indica
que ejecutar este método o ejecutar esta tarea puede
crear potencialmente un error. Va a arrojar un error. De ahí viene esa
palabra. Y hay que manejar el error porque quiere
responder al mismo. Si pasa algo malo, quieres tomar nota
de lo que pasó, y luego si es
algo de lo que te puedes recuperar, recuperarte de ello. Si es algo de lo que
no puedes recuperarte, entonces tal vez le muestres un mensaje al usuario y digas, perdón, algo malo pasó o
así sucedió,
no podemos continuar. Por favor, inténtalo de nuevo tipo de cosa. O puedes optar por no manejar el error y simplemente ignorarlo. Eso es perfectamente razonable
para algunos errores. Eso es lo que significan los tiros. Y te voy a mostrar en un segundo
y cómo podemos manejar eso. Ahora, Asíncrono es
otra palabra clave que
indica que este
método es asíncrono Ahora, tenemos que tomarnos
un momento. Si no has hecho
ningún networking antes, déjame
describirte rápidamente con este escenario. Asíncrono es
algo así. Digamos que Estás
esperando un paquete en casa. Es un paquete muy, muy
importante. No lo van a
dejar en tu puerta. Digamos que es un nuevo libro mac. Compraste un nuevo mac book,
estás esperando que llegue. Y entonces estás esperando en casa, va a ser en algún momento de hoy, pero no sabes exactamente cuándo va
a ser entregado Pero realmente necesitas ir a comprar algo de leche. ¿Verdad?
¿O tal vez para almorzar? Digamos que tienes que ir
a comer, y no tienes comida en casa, te mueres de hambre.
Entonces, ¿qué haces? Puedes irte e ir a
comprar el almuerzo tú mismo. Pero existe la posibilidad de que ese libro mac pueda ser
entregado, y no estés en casa. Te lo vas a perder,
y eso estaría mal. Bueno, ¿qué haces?
Pues resulta, tienes a alguien en
casa, podría ser mamá, podría ser papá,
podría ser un hermano, podría ser una hermana,
podría ser tu cónyuge. Les preguntaste, oye, ¿ puedes ir a recoger el almuerzo? Porque necesito quedarme en casa
y esperar este libro. Envías a esa persona
para que vaya a traer el almuerzo y esa persona va a almorzar mientras tú puedes quedarte en casa
y esperar el paquete. Eso es exactamente lo que está
pasando aquí. Asincrónico significa que ¿
Al igual que estás enviando
a alguien a ir a recoger Estás enviando una tarea en
segundo o ayudante de fondo
en términos informáticos, lo
llaman hilo de
fondo? Estás enviando eso para ir a
realizar esta operación de red. Ve a buscar esos datos
de la API de YouTube. Mientras me quedo aquí respondiendo a la interacción del usuario y al igual que mantener
las luces funcionando, ya
sabes, manteniendo
todo operativo. Y cuando obtienes la
respuesta de la API de uTube, ellos vuelven a mí y me dejan saber cuáles son esos datos,
y yo me ocuparé Ahora bien, ¿por qué es esto importante? Como como tuviste que quedarte en casa
y esperar ese Macbook. Si conseguimos que el hilo principal vaya
a buscar los datos y enviar la solicitud y
esperar a que los datos vuelvan, entonces no
habrá nadie que mantenga
las luces funcionando y
las cosas operativas Es que tu app no podrá
responder a la interacción del usuario
ni hacer nada por el estilo. Entonces es por eso que con estas tareas de red de
ordenación o algunas tareas de datos, quieres enviar un hilo de
fondo, igual que como enviaste un
ayudante para ir a recoger el almuerzo. Eso es lo que significa asincrónico. Bien. Ahora que ya sabes lo que significan
estas dos palabras clave, manejemos primero la de
Lanza porque hay una sintaxis
especial que
tienes que escribir
para capturar el error o
error potencial que pueda ocurrir. Terminemos de escribir esto, y luego
vamos a tratar con estas dos palabras clave
una a la vez. Datos cuatro, y
vamos a pasar en petición. Bien. Entonces, cuando algo puede lanzar potencialmente
un error como este, lo que hacemos es lo que tenemos que
ponerlo dentro de un bloque do catch. Entonces haces algo, ¿verdad? Haces lo que puede arrojar el error entre estos
paréntesis aquí mismo. Entonces eso es lo que
vas a hacer, y luego vas a atrapar cualquier error potencial
justo debajo de él. Y luego puedes imprimir
cualquier error que pueda ocurrir. Lo va a
poner ahí. Ahora, una cosa más que
tienes que hacer solo para indicar que algo que
entiendes que algo puede arrojar un error es poner una palabra clave tri
delante de ella, ¿verdad? Entonces vas a hacer esto. Vas a probar esto, y luego vas a coger cualquier error potencial y
vas a imprimirlo. Así que eso maneja la
palabra clave Throts para ejecutar este método. Ahora, hablemos de la palabra clave
asíncrona de la que
hablamos Queremos enviar esta tarea en
segundo plano
para tomar los datos. Y vuelve cuando lo haga. Lo que tenemos que hacer es
poner la palabra clave weight. Lo que esto hace
es que básicamente dice, antes de ejecutar cualquiera de los códigos debajo de
esta línea de código, va a
esperar a que esto regrese. ¿Por qué queremos hacer eso? Porque digamos aquí abajo, vamos a imprimir
imprimir la respuesta. En realidad aquí, vamos
a poner error de manejo
aquí mismo e imprimir respuesta, vamos a poner
eso aquí mismo. Correcto No
quisiéramos imprimir la respuesta antes de que esto
vuelva con los datos, ¿verdad? Porque entonces
no habría nada que imprimir. Al poner la palabra clave wait frente a un método
asíncrono, va a esperar a que esto
suceda en segundo plano Termina de hacer
lo suyo, vuelve, y luego
vamos a imprimir la respuesta. ¿Qué
vamos a imprimir? Tenemos que asignar
los datos que se
devuelven a algo primero, al igual que como lo hicimos aquí, dejar que URL sea igual a eso,
dejar que la solicitud sea igual a eso. Vamos a decir, que los datos, la
respuesta, es igual a eso.
Ahora bien, ¿por qué hice esto? ¿Qué es esto? Esto
se llama tupla, y es básicamente una
colección de variables La razón por la que hice esto es porque lo que se
devuelve son dos cosas. Uno son los datos reales, los datos JSN y el
otro es la respuesta Hay dos cosas diferentes, y se les asignará consecuencia a los datos
y a la respuesta. Ahora cuando lo imprimo,
puedo imprimir los datos, y puedo
imprimir la respuesta. No va a ejecutar este código hasta que esto regrese debido a esto una
declaración de peso aquí mismo. Ahora te puedo explicar
qué es esta palabra clave de tarea. La palabra clave task es para ejecutar métodos
asíncronos o código
asíncrono,
que es lo que es esto Es solo una construcción especial para poder ejecutar código
en segundo plano. Lo piensas así.
Entonces ahora estamos todos arreglados. Después de escribir todo ese código, lo que vamos a hacer
es ejecutar este proyecto. Se va a ejecutar este código en cuanto se lance
el simulador. Y luego vamos
a ver alguna salida, ya sea que captó un error o
realmente vemos los datos
en la respuesta. Entonces echemos un vistazo a
lo que ha pasado aquí. Si abro esta área de consola, y si no tienes
esta área de consola, en realidad
es que
podría minimizarse. Le diste ese botón ahí mismo. Y es posible que no
tengas estas pestañas. Así que solo tienes que hacer clic en
estos botones en la esquina inferior derecha
y abrir estas pestañas. Aquí hay dos cosas
para notar. Este es el dato, y no podemos ver los datos. Es solo decirnos
el tamaño de los datos. Eso es lo que sucede
cuando intentas imprimir datos. Pero vamos
a tener que analizar ese JSON o convertirlo en datos
utilizables en nuestra app. Vamos a hacer eso
unas lecciones más tarde. Pero echemos un vistazo a la respuesta porque esto también nos
puede decir mucho. Bien. Entonces, si buscas un código de estado código de estado
200, eso es bueno. Recuerda aquí
en el Explorador de API. Yo creo, aquí
está, bien. CO 200. Eso significa que este es un código de
servidor para el éxito. Código del servidor 200. Puedes buscarlo en Google, códigos de
servidor 200. Medios. Hay más códigos. Echemos un vistazo a
lo que tenemos aquí. Ahora, en realidad no puedes
ver los datos JSON, pero puedes ver algunos
detalles sobre la respuesta. Pero el estado C 200, esa es una buena señal. Eso significa que la API
aceptó nuestra clave API. Acepté nuestra solicitud como válida y devolvió respuesta. Echemos un vistazo a
lo que sucede si solo
cambiamos algunos de los datos.
Digamos que estropeo mi clave API. ¿Dónde está la llave? ¿Justo aquí? Sólo voy a borrar un
par de letras de él y ejecutarlo de nuevo y ver cuál es el código de
estado esta vez. Es 400. Eso es 400 no es bueno. Probablemente detectó que la
ApiKey no es válida. Mala solicitud. Perfecto. Eso es increíble. Eso es
exactamente lo que esperábamos. Déjame deshacer. La
clave API debe ser válida. Déjame estropearme un poco mi idea de
lista de reproducción. Mira cómo eso cambia las cosas.
Es un cuatro oh cuatro. Qué es un cuatro oh
cuatro, no encontrado. No pudo encontrar mi lista de reproducción porque estropeé la identificación de
la lista de reproducción Entonces esto es realmente bueno. Eso significa que todo está
funcionando como esperábamos. Pero, ¿no sería genial si realmente
pudieras ver la respuesta Aquí mismo,
solo estamos viendo el código de
estado de la respuesta. Bueno, a veces cuando estás programando y estás trabajando con llamadas de networking
como
lo estamos haciendo ahora, sería muy útil
echar un vistazo a cuál es el contenido real de la
respuesta y las solicitudes Y ahí es donde usas a un tercero una herramienta de
depuración de red Entonces te voy a mostrar
cómo usar Proxy Man, que puedes usar gratis
con tu desarrollo de aplicaciones IOS, y luego podemos echar un vistazo a la respuesta real y
podemos ver los datos Entonces, sigamos adelante y descarguemos
e instalemos Proxy Man. Sigue adelante y visita
proxy maan dot O, y puedes descargar
la aplicación MAC Ten en cuenta, puedes
usar esto gratis, y hay funciones de pago, así que puedes investigarlo, pero
te recomiendo empezar gratis
por ahora. Bien, entonces voy a
lanzar mi Proxy Man. Ahora bien, el tuyo podría no verse
así porque probablemente
estarán incorporando para ti Probablemente primero tengas que
caminar por unos pasos. Pero una cosa
importante que debes hacer es
bajar a un
certificado y
vas a tener que
instalar algunas cosas. Entonces instala primero
el certificado en este MAC y luego instala el certificado en IOS y vas
a elegir simuladores Pero ayuda si
realmente tienes el
simulador en funcionamiento. Entonces en tu coproyecto,
solo ejecuta tu proyecto, así tienes el simulador abierto y toma nota de lo que es, iPhone 15 Pro
porque va a ser instalado
en este simulador. Entonces, sí, esto es lo
que haces. Bien aquí. Elija simuladores. Y luego
va a primero que nada, esto
lo estaba instalando en tu mac. Si no lo has hecho,
tienes que hacer clic en su botón. Y entonces debería decir encontró el simulador porque lo
tienes lanzado, así que lo está buscando. Debo decir que se encuentra. Y entonces vas a
elegir solo preparar simuladores. Y luego te va a
pedir que lo reinicies. Se da clic en este botón y se reinicia el simulador
con el nuevo certificado Esto permitirá que proxy
Man se interponga entre las solicitudes que tu
simulador haga
y reciba, y así es como
vas a poder ver los datos, ¿verdad? Entonces lo que vas a hacer, a veces tienes que
reiniciar el código X. Es un poco
quisculento. Si no ves lo que te estoy mostrando, entonces intenta reiniciar el código X así
como los Pero si todo está
configurado correctamente, entonces lo que deberías
poder hacer es si ejecutas la app ahora, y abres esta pestaña Apps, deberías verla aparecer aquí. Ahí está. Ese es mi proyecto, ¿verdad? Veamos aquí. Ese es éste. Bien.
Lo que puedo hacer es hacer clic derecho y pin y
aparecerá aquí, y puedes ver que envió
una solicitud a este dominio. Estuvo bien, pero necesito reenviar la
solicitud para ver el contenido Déjame ejecutar de nuevo este proyecto, y verás que se está haciendo una segunda
solicitud, y esta vez, podrás ver todo. Échale un vistazo a eso. Este lado de la
izquierda es petición, este lado de la
derecha es respuesta. Para la solicitud,
puedes ver Para la consulta, puedes ver todos
los parámetros que especificaste, así que hay clave, hay ID de lista de reproducción,
y hay parte, y eso fue todo desde la URL. Pero la respuesta es
la parte interesante. Se puede ver el código de respuesta, está aquí mismo, 200. Pero si le echas un
vistazo al cuerpo aquí mismo. Estos son los datos que se
devolvieron en la respuesta. Recuerda cuando lo ejecutamos
en el proyecto de código X, estos datos aquí mismo, imprimimos los datos, y solo mostraban
el tamaño de los datos. Bueno, con Proxmn,
en realidad podemos echar un vistazo a
cuáles son los datos aquí Aquí están todos los datos. Esta es una herramienta muy útil para usar cuando se trabaja
con llamadas de red. Ahora bien, si tiene problemas para
ver lo que estoy viendo, le recomendaría que siga los pasos de
solución de problemas. Veamos aquí. Cuando elegimos esto, hubo algunos
pasos de solución de problemas que podrías probar y lanza
alguna documentación para que pruebes cosas. Así es como se
ve. Sí. Simplemente siga esto y pruebe estos pasos de
solución de problemas. Bien. No es el fin del mundo si no
puedes conseguir que esto funcione porque como puedes ver, incluso sin Proxy Man, somos capaces de enviar la
respuesta o lo siento enviar la solicitud y obtener
la respuesta y el código de estado
200 y todo eso. Todo bien. Nuevamente, este
fue un proyecto de prueba. Esta no es la forma en que
vamos a hacer cosas así. Definitivamente queremos asegurar la clave y hacer las cosas un
poco más elegantemente, no solo todo
en esta vista de contenido Así que vamos a crear
un componente separado para manejar las cosas de la red, y haremos todo
eso. Todo bien. Pero este fue un gran éxito
pasando por esta parte, y espero que hayas
aprendido algunas cosas. Bien, ahora que sabemos que podemos conectarnos a la API y
recuperar datos de ella, estamos listos para comenzar nuestro proyecto de código
X real para la aplicación En la siguiente lección,
vamos a iniciar un
nuevo proyecto de código X. Vamos a almacenar
la clave API de forma segura. Vamos a empezar a
desbastar algunas de las pantallas, así
como algunos de los componentes que
necesitaremos para la app Bien, te veré ahí.
3. Lección 03: creación del proyecto, vistas y modelos de Xcode: La última lección,
podemos conectarnos a la API de datos de YouTube y
recuperar datos de ella. En esta lección,
vamos a configurar nuestro proyecto de código X y todas
las vistas y los modelos. Bien, vamos a bucearlo. Primero, comencemos
con un poco de una visión general de cómo se expondrán nuestras
opiniones. También quiero explicar
cómo
va a quedar nuestro modelo de datos, sobre todo porque vamos a interactuar con la API de datos de
YouTube. Entonces, antes que nada, vamos a
comenzar con la vista de inicio, y esta va a contener una vista de pestaña con vistas
adicionales. Ahora, sé que en esta demo, solo
tenemos una pestaña, pero esta se configura con la intención de que
puedas agregar pestañas adicionales. Bien. Por lo que la vista de
casa albergará la vista de pestaña en sí. Y luego la vista de tabulación
contendrá instancias, una instancia de la vista de noticias en tiempo real. Y esta es esa lista desplazable de miniaturas que ves Ahora hablemos de cómo va a
obtener
los datos la vista de feed. Vamos a crear
un componente separado, llamemos a eso el servicio de
datos que va a ser
responsable de todo el código que interactúa
con la API de datos de YouTube Y la razón de esto es para que
podamos
mantenerlo todo en un solo lugar, y será más fácil de mantener y también de
solucionar problemas y depurar Entonces, cuando se cargue la vista de feed, va a pedirle
al servicio
de datos la lista de
videos para mostrar. Y entonces el
propio servicio de datos va a estar enviando esa solicitud de red
a la API de datos de YouTube. Entonces, en la lección anterior, cuando miramos
lo que obtuvo retorno, eran dos cosas, de verdad. Había una estructura general de listas de
reproducción, y luego dentro de eso, había objetos de video
individuales, ¿verdad? Al igual que los diccionarios que
contenían los datos del video. Así que vamos a
analizar ese JSON en una sola instancia de lista de reproducción que contiene múltiples instancias de
video, cada una representando
los datos de video Si no te
acuerdas, o estás un poco confundido, no te
preocupes, cuando lleguemos a esa parte de
enviar la solicitud de red, recuperar los datos
y analizarlos en JSO, voy a
sumergirme en más detalles sobre cómo cada pieza o parte de
la JSN se traduce a
diferentes propiedades de la instancia de
video y lista de Entonces, una vez que los datos regresen, vamos a ver una lista
de datos en la vista de feed. Entonces, a continuación, tenemos que recuperar los datos de la imagen en miniatura del video porque esos datos de imagen no
obtienen retorno de la API En cambio, solo obtenemos URL
a la miniatura del video. Así que vamos a usar la
imagen asíncrona para asincrónica. Eso significa que en el fondo, descargar esos
datos de imagen para su visualización. Y vamos a crear
una vista de fila de video separada como una vista reutilizable. Y la vista de feed, que tiene un componente de lista, solo
va a crear
tantas instancias de la vista de fila de video como
necesite para tantos
videos como haya. Y cada vista de fila de video
tendrá una imagen de sincronización, que descargará
la miniatura Bien, entonces ahora
vamos a tener una vista de feed que
se ve bastante bien, pero tenemos que dejar que
el usuario toque
un video para ver el
video en sí, ¿verdad? Entonces es por eso que
vamos a crear una vista de detalle de video
que se deslizará hacia arriba como una hoja desde la vista de feed cuando el usuario toque una de
esas vistas de fila de video. Dentro de la vista de detalle del video, vamos a mostrar en
la parte superior el reproductor de video. Y luego debajo de él,
vamos a mostrar la descripción
del video. Y esos datos ya lo habrán hecho. Entonces, a un nivel alto,
así
va a quedar la app. Aquí hay mucho que aprender. Vamos a sumergirnos. Bien, vamos a
crear nuestro proyecto de código X. Así que voy a
elegir App bajo IOS, y voy a
nombrar esta aplicación YT API y asegurarme de interfaces
Swift I language es Swift. No necesitamos ninguna opción
de almacenamiento. No necesitamos ninguna
prueba en este momento. Y solo voy a
crear esto en mi escritorio, y el control de origen no lo
revisé. Voy a cambiar
esto al simulador, que
podamos lanzarlo en el simulador y
no en mi dispositivo. Ahora ya podemos empezar. Lo primero que quiero hacer, volvamos a sacar el
diagrama. Tenemos un par de cosas
distintas. A mí me gusta separar las cosas
en carpetas aquí. Tenemos nuestras opiniones,
que es vista de casa, vista feed,
vista de detalles de video y vista de video, y luego tenemos
el servicio de datos, que es un ayudante separado, si se quiere, y luego
tenemos estos
que representan nuestros datos. Este sería nuestro modelo o modelo de
datos. Bien, así que sigamos
adelante y creamos esas carpetas en
nuestro proyecto Xcode Así que sólo voy a, una cosa que me gusta hacer
es cambiar el nombre de esto. Entonces, ya sabes, cuando nombramos
al proyecto, YT API app, eso se traduce a este identificador de
paquete, Y T API app. Pero el punto de entrada,
siempre agregan app al final, así que una manera fácil que puedes hacer es hacer
clic derecho y refactorizar, y puedes cambiarlo
todo en el mismo lugar Tal vez quieras hacer
algo así. A lo mejor solo
lo llamaremos aplicación API de YouTube. Eso lo renombró en un montón
de lugares diferentes. Puede presionar el comando B para asegurarse de
que todavía se construye. Vamos a crear la carpeta ahora.
Voy a hacer click derecho. Voy a decir nuevo grupo, y llamemos a esto Servicios. Entonces vamos a crear
otro grupo llamado Ves, y luego vamos a crear
otro grupo llamado models. Vamos a hacer eso. Bien, así que solo voy a sacar
todos los
archivos que necesitamos
y tachar solo
significa crearlos quizás agregando
algún código inicial, pero ni siquiera
vamos a hacer eso Vamos a crear los archivos, y luego nos centraremos en crear todos
los andamios Entonces llamemos a esto es
el servicio de datos, ¿verdad? Entonces vamos a crear eso ahí. Y vamos a crear
esa estructura inicial. Entonces para las vistas,
vamos a decir nuevo archivo, voy a elegir
Swift DI view. En primer lugar, está
la vista del hogar. Pero la vista de casa es esencialmente como si
tuviéramos una vista aquí. ¿Por qué no usamos esta
como vista de casa? Voy a arrastrar esto a la
carpeta views, y solo voy a
cambiar el nombre de esto otra vez. Refactorizar, renombrar, y
vamos a llamar a esto la vista de casa No le cambié el nombre a
éste. Entonces también tenemos la vista de feed. Recuerda, esta
contiene la vista de tabulación. Para que podamos nuevo archivo. Swift I view, feed view. Entonces también vamos
a tener vista de video. También vamos a
tener vista de detalle de video. Y luego la vista de casa. Vamos a cambiar
esto a una vista de tabulación. La vista de tabulación va a contener una instancia
de la vista de alimentación. Esa es la
estructura básica de nuestro proyecto. Vamos a crear
los dos modelos ahora. Estos van a ser archivo
swift
porque no son vistas.
Entonces uno es el video. Voy a crear el st. Y luego vamos a crear
otra para la lista de reproducción. Traamos el diagrama por un segundo y comprobemos
que tenemos todo. Tenemos la vista de inicio, que
contiene la vista de pestaña, contiene una instancia
de la vista de alimentación. La vista de detalle
va a aparecer como una hoja
en la vista de alimentación. Hemos creado la vista de fila de
video, que va a estar dentro de
un componente de lista o una vista de lista, en la
vista de noticias en tiempo real. Tenemos el servicio de datos que creamos y luego el video
en los modelos de lista de reproducción. Estamos listos para comenzar a implementar algunas de estas
cosas en la siguiente lección. Una cosa que recomendaría es que
si realmente estás tratando de
aprender algunas de estas cosas, es mejor
seguirlo y
probarlo en tu propia
computadora o computadora portátil. Simplemente abre el código X, inicia el proyecto y
sigue lo mejor que puedas. Siempre puedes descargar el
proyecto si te quedas atascado. Dejaré el enlace en
la descripción a continuación para descargar el proyecto. Todo bien. Ahora que tenemos
nuestro proyecto Xcode y todas las vistas
y modelos desbastados,
podemos comenzar en nuestro servicio de datos, y lo vamos a hacer en
el siguiente video Te veré ahí.
4. Lección 04: envío de la solicitud de API: Lección, vamos
a conectarnos
al EPI de datos de YouTube
para recuperar datos Y adivina qué?
Debido a que ya hemos hecho
esto en un proyecto demo, esto debería ser bastante
sencillo. La única diferencia
es que esta vez, vamos a almacenar
la APIK de forma segura Vamos a sumergirnos directamente
en. Primero, repasemos el punto final que vamos a golpear con nuestra aplicación. Entonces en la API de datos de YouTube, y voy a enlazar a este
documento a continuación en caso de que haya perdido la
referencia al mismo. Va a estar golpeando estos elementos de la lista de reproducción de
punto final. Esencialmente, queremos
enumerar todos
los videos para una
determinada lista de reproducción. Ahora bien, esta es la URL, y va a ser un tipo de solicitud
get, y los parámetros requeridos, así que esto es lo que debemos especificar. Va a ser uno de estos. ¿Qué nivel de detalle
desea para los elementos de video que se
devuelven en la respuesta? Y a través de mis pruebas
en la construcción de esta demo, he llegado a la conclusión que snippet es lo que necesitas Ahora bien, no
te dice exactamente qué se incluye
en cada uno de estos. A lo mejor hay
documentación adicional que puedes buscar en alguna parte. Lo que puedes hacer es en la lección anterior cuando
probamos golpear la API. Simplemente puedes probar todos
estos parámetros y ver qué recuperas y
ver qué necesitas. Ahora bien, lo que deberías
apuntar es
recuperar la menor cantidad de datos
posible
sin dejar de satisfacer
lo que necesitas hacer porque nunca quieres devolver más datos porque eso
requiere más ancho de banda, lleva más tiempo y ¿por qué simplemente
harías eso? Snippet es lo que necesitamos
. a contener la descripción del
título, las URL de la imagen de video, y eso es prácticamente
todo lo que necesitamos para ser honestos Ahora bien, según
esta documentación, este es el único parámetro
requerido. Sin embargo, todavía necesitamos
especificar el ID de la lista de reproducción. De lo contrario,
qué videos vamos a recuperar. Tenemos que decirle a YouTube, esta es la lista de reproducción para la que quiero recuperar los
videos. Esto es lo que me
desanimó al principio. Pensé que pondría ahí el ID de la lista de
reproducción, pero no, tú pones ahí. Ese es el punto final que
vamos a golpear. Ahora bien, en cuanto a la ApiKey
que necesitamos pasar, deberías
haberte apuntado a esto
de vuelta en la lección uno Si no lo has hecho, solo regresa a Lección uno y
recorre ese proceso y puedes registrarte para tu propia API K. Ahora vamos a saltar al código
X y ver cómo podemos almacenar de
forma segura esta API K. Primero, quiero hablar
sobre lo que
significa almacenar tu API K de forma segura incluso porque hay tantas formas diferentes de hacerlo y hay diversos
grados de efectividad. Primero, hablemos de
no asegurar la APIK, que es lo que hicimos cuando
estábamos demostrando la Justo en la lección anterior. Así que codificamos la APIK
directamente en el proyecto de código X, y eso es malo porque accidentalmente
puedes compartir tu proyecto con alguien o ponerlo en control de fuente Entonces, si no estás familiarizado con el control de fuentes como GitHub, es una forma para que un
equipo colabore, varias personas trabajen
en la misma base de código. Entonces, ¿si se pone en control de código fuente, especialmente si es un proyecto de código
abierto o quién sabe quién
tiene acceso a él? Tu llave está ahí, y cualquiera puede
tomarla y abusar de ella. Entonces eso es lo que no quieres. Ahora, un nivel de
sofisticación o protección es poner esa clave API en
un archivo externo No lo incluyes directamente
en el proyecto Xcode, sino que se asienta en un archivo diferente, y luego tienes
tu proyecto Xcode, lee la clave de ese De esta manera, cuando pones
tu proyecto en GitHub, como puedes ver en este diagrama, la clave no
va de la mano con él. La clave permanece en ese
archivo en tu computadora, y luego tienes
que compartir manualmente ese archivo externo con la
clave a quien necesite acceso, o esa persona obtiene su
propia clave API y la pone en el archivo de configuración y la combina
con el proyecto de código X. Ahora bien, el problema con
estos dos métodos es que en última instancia tu proyecto de código X
aún necesita la clave API. Y la razón de ello es porque estamos
haciendo las
llamadas de red a la API directamente
desde nuestro proyecto o nuestra app. Nuestro proyecto necesita
la clave para acceder y autenticarse contra esa API.
No hay forma de evitar esto. Tu proyecto EXCO necesita
conocer la clave. Si piensas en
la App Store, cuando tu app se
descarga, bien, ese paquete que se descarga tiene todo lo que necesita para funcionar, incluida la clave API, porque en última instancia tu app
va a estar usando la clave API para conectarte a cualquier API que
tu teléfono o tu app use. Entonces sigue siendo si alguien se esfuerza lo suficiente y sabe lo
que está haciendo, probablemente pueda extraer la
clave de ese paquete. En definitiva, la
forma más segura de hacerlo sería ni siquiera
hacer las
llamadas API desde tu app. Configurarías tu propia API, y tu app haría
solicitudes a tu API,
y es tu API la
que tiene la APIK, la que luego hace acceso
a la API de terceros En este ejemplo, esa
sería la API de YouTube. Entonces recuperaría
los datos de
la API de YouTube y luego devolvería esos datos
a la aplicación. Es casi como un intermediario, que tiene acceso a la llave Entonces de esa manera, el cliente, que es tu app, nunca
verá la clave. Entonces lo que puedes
hacer es que puedes que esa app tenga su propio
sistema de cuenta usuario en el
que el usuario necesita
registrarse y
autenticarse a sí mismo para que incluso llegue a tu API Puedes ver hasta dónde
puedes llevar esto, realmente depende, creo, para mí, depende de cuántas
personas estén usando tu app. Y qué crítico es que esta API Key nunca
caiga en manos equivocadas. Por lo menos,
deberíamos poner la Clave API en un archivo externo y no dentro de código duro
en el proyecto. Esto es solo una buena práctica
ya que estás construyendo tu aplicación. Ahora bien, en términos de
configurar tu propio software y que tu app nunca
use la API Key para mí, eso es algo de etapa posterior. Digamos que tu app
cobra tracción, y hay muchos usuarios que la
usan se ponen en las noticias, y ellos Crees que puede haber un riesgo de que alguien
pueda apuntar a tu app, tal vez competencia o
lo que sea para apuntar a tu app para intentar derribarla porque tu
negocio ha despegado. Creo que es un buen
problema tener, y entonces
entonces pensarías en, cómo puedo hacer que mi app sea
más segura y luego
pasar por este proceso de
configurar tu propia API. Quería pasar por todo
eso para que puedas entender lo que
significa asegurar tu clave API. En esta lección, te
voy a mostrar cómo
poner tu Clave API en
un archivo externo. Estos son los pasos por los que
vamos a pasar. Vamos a crear
un archivo de configuración en nuestro proyecto de código X y
vamos a agregarle la clave. Vamos a configurar el proyecto
para que use este archivo de configuración, y vamos a definir
una variable especial en nuestra lista P para hacer referencia a
esa clave API. Y no vamos a
hacer los pasos cuatro y cinco porque no estamos tratando con control de
fuentes en este proyecto. Pero los pasos cuatro y cinco, son los pasos
que quieres hacer si
estás poniendo este proyecto
en control de código fuente porque el
archivo G ignore enumera todos los archivos que no se deben poner
en control de código fuente. No debería ser subido
a Git Hub, esencialmente. Pasos cuatro y cinco, esas son cosas que definitivamente
quieres hacer si estás poniendo este proyecto en control de
código fuente o GitHub, y estás trabajando en equipo. Si tienes curiosidad sobre
cómo se hacen esos, yo solo buscaría en Google cómo
usar un archivo G ignore, y es literalmente solo
enumerar tu archivo de configuración como el nombre del archivo dentro de
ese archivo G ignore, que es esencialmente
solo el archivo de texto. Y incluyes ese
archivo G ignore con su proyecto de código X. Y luego, cuando introduzcas tu
proyecto en el control de código fuente, va a leer
que Git ignora el archivo y toma nota de todos los archivos
que debería excluir, y no pondrá esos
archivos en el control de código fuente. Ahora vamos a sumergirnos en
nuestro proyecto Xcode y hacer los pasos uno,
dos y tres Aquí está nuestro proyecto de código X. Empecemos por agregar
ese archivo externo. Este va a ser un archivo
de configuración. Vamos a hacer clic derecho sobre esta carpeta
principal aquí, nuevo archivo. En la esquina superior derecha, verá un tipo de caja de filtro en la configuración,
solo configúrelo. Este es el archivo que queremos en el archivo de ajustes de
configuración. Ahora bien, lo importante a
tener en cuenta aquí es que no
quieres incluirlo como
parte del objetivo aquí. Te aseguras de que esté
desmarcado y luego creas porque no
quieres incluirlo. ¿Correcto? Ahora, escribes API, subrayas la clave en todas las mayúsculas y notas que esto no es
una variable o constante No ponemos ninguna
palabra clave rápida delante de ella. Esto es más
como un archivo de texto. Ahora es igual, y vamos a sacar
a colación nuestra clave API. Ahí está.
Voy a copiarlo, y voy a pegarlo
ahí y guardar el archivo. A continuación, vamos a configurar
nuestro proyecto de código X para usar este archivo de configuración
tocando el nodo raíz aquí, tocando en proyecto, y
en configuraciones aquí, puede ver que
no hay ningún conjunto de configuración. Hay dos tipos diferentes de builds que podemos
crear cuando estamos desarrollando y estamos probando en
el simulador o en nuestros dispositivos, es
lo que se llama
una compilación de depuración. Una compilación de lanzamiento es cuando
creas una compilación específicamente para implementarla o
enviarla a la tienda de aplicaciones. Y eso no contiene todas
las cosas extra que solo se usan en la
fase de desarrollo de la aplicación, como los símbolos Bug
y cosas así. De todos modos, para ambos, D Bug y release build, vamos a configurarlo
para que use config así Bien. Ahora, el tercer y
último paso antes de que podamos probar esto es ir por debajo de
objetivos aquí. Vamos a entrar en info. Esta es nuestra lista P, y
vamos a crear una clave que podamos usar para hacer referencia a ese valor en el archivo de configuración. Entonces en la parte inferior, pulsa más, y luego vas a
escribir y todas las mayúsculas AP, subrayado mayúscula K E y. presiona Enter, y el tipo
va a ser cadena No sé por qué
era una
P minúscula porque creo que hubo
alguna funkiness auto correcta Corregamos eso y
cambiemos eso a P. mayúscula Y luego en cuanto al valor, esta va a ser una
variable dinámica o referencia, y va a hacer referencia a
la clave API en el archivo Kfig Entonces, lo que vamos a hacer dentro nuestro código Swift aquí es que vamos a entrar en esta lista P y tomar el valor de esta clave. Y el valor para esta clave
en realidad está apuntando
a este archivo Kfig, que no vamos
a incluir como parte
del proyecto cuando se ponga en control de código fuente
y todas esas cosas Este es nuestro archivo externo, como ya hablamos antes.
Vamos a probar esto. Vamos a
entrar en la vista de casa, y vamos
a decir en un par. Sólo vamos a imprimir la clave API, a ver si
podemos hacer referencia a ella. La forma en que hacemos referencia a esa
lista de puntos P de información es diciendo bundle main
info dictionary, esa es nuestra lista info P. Esto es opcional
porque puede devolver NL. Si lo puede encontrar, entonces vamos a
buscar la clave. Y vamos a intentar recuperar el valor
porque
no tiene idea de cuál es el valor. Sabemos que es una cadena,
es un tipo de cadena, así que vamos a intentar
convertirla en una cadena. Y esto es sólo tratar. Si no puede, entonces
probablemente estará vacío o nulo. Podríamos proporcionar
un valor predeterminado. Entonces sí, si no
encuentra nada, vamos a imprimir no lo encuentro. Bien, para nuestra propia depuración. Bien probemos esto. Vamos a ejecutar
esto en el simulador, y así ya está funcionando. Y deberíamos ver
nuestra clave API impresa por ahí si todo
está de acuerdo al plan. Todo bien. Perfecto. Funciona. Esto es hacer referencia a la
lista de información, buscar esta clave, y el valor de esta clave es
hacer referencia a la clave API del
archivo de configuración aquí mismo Perfecto. Ahora pasemos a implementar
el servicio de datos, donde vamos a
enviar la llamada API a la API de YouTube y
recuperar los datos. Entonces, en el
archivo de servicio de datos en la parte superior, declaremos nuestra clave
como una constante privada. Y vamos a
llamar a esto la clave API. Y vamos a manejar esto tal como te
mostré antes, bundle dot main dot
info dictionary, y vamos a
tratar de buscar API Underscore key como cadena Ahora no le voy a dar un valor como este si no puede recuperarlo porque sí quiero
que sea NL de esa manera
podemos detectar si la API
K está presente o no. A continuación, vamos a crear una nueva función llamada G videos, y va a devolver
una matriz de videos. Esencialmente, quería
devolver todos los videos
para una lista de reproducción determinada. Vamos a hacer de esto
una función asíncrona, y voy a explicar
lo que eso significa cuando llegue el momento de
que llamemos a esto, y explicaré qué significan las palabras clave
Aync y wait Por ahora, ¿por qué no solo
regresamos y vaciamos la matriz de video? Aquí vamos a
implementar esa llamada a la API. Primero, verificar si la clave
API está ahí, y luego vamos
a crear la URL, crear la solicitud,
y vamos a enviar la solicitud y
luego finalmente analizarla. Esto realmente ayuda que hicimos esto dentro de una demo de vuelta
en la lección dos, ¿verdad? Entonces hemos probado que esto
funciona, sabemos que funciona. Entonces vamos a decir guardia API Key no es igual
NL else return. Podemos devolver una lista de videos
vacía porque no puede obtener nada. Idalmente, lo que querrías hacer es probablemente mostrar un mensaje de error
o algo así puedes devolver algo como tal y
luego capturarlo y mostrarlo a la interfaz Pero al hacer lo
que estamos haciendo aquí, estás regresando sin videos. Entonces el usuario no sabe si realidad no
hay videos en esa lista de reproducción o si
algo salió mal. Pero claramente algo salió mal porque no podemos conseguir
el APIK, ¿verdad Bien. Al bajar aquí, vamos a crear la URL. Y antes de crear
la url en realidad, vamos a crear a partir
de una cadena, ¿verdad? Y esa cadena url va
a verse algo así. Primero, volvamos
a la documentación. Entonces eso es justo aquí. Y como mencioné en la lección
anterior, estamos usando este
punto final aquí mismo. Vamos a recuperar
todos los elementos de la lista de reproducción dados una lista de reproducción. Sólo voy a poner
eso ahí mismo. Voy a codificar duro
esa URL aquí mismo, y vamos a
agregar los parámetros. Uno de los parámetros requeridos es esta parte que mencioné
antes en la lección tres. Por qué escogió fragmento porque contiene
lo que necesitamos. Entonces la otra cosa que
queremos especificar es a qué lista de reproducción queremos
apuntar para recuperar todos
los videos. Bien. Entonces la forma en
que encuentras esto es, voy a elegir
mi propia lista de reproducción. Puedes elegir la
lista de reproducción que quieras. Pero si vas al
canal de alguien y vas a playlist, verás todas las listas de
reproducción aquí. Voy a dar click en esta
, tu lista de reproducción completa. Y es solo esta
identificación de aquí mismo. Si haces doble clic en él,
resaltarás todo el asunto. Voy a copiar eso, y voy a pegar
eso ahí dentro. Y lo último que hay
que añadir es la clave. Así que vamos a
decir key es igual a, y simplemente vamos a insertar
eso aquí mismo, clave API. Y ya comprobamos
que no es clavo, así que vamos a
forzarlo y envolverlo aquí. Ahora podemos crear la
instancia URL a partir de esa cadena, ahora podemos crear la solicitud. Hagamos esa solicitud de URL, y vamos a hacerlo
fuera de esta de aquí mismo. Vamos a pasar en la URL. En realidad, este devuelve un
opcional. Esto podría ser NL. Vamos a decir,
si URL es igual a URL, solo para comprobar que no es NL. Vamos a poner
todo este código aquí que solo se ejecuta si somos capaces de
crear con éxito una instancia de URL, entonces vamos a
hacer eso ahí dentro Entonces el envío de la solicitud
es cuestión de usar sesión. Si decimos, vamos a crear otra constante aquí mismo solo para dejar las cosas más claras. Sesión URL compartida. Esto es simplemente romper
las cosas así que es más fácil para
ti entender. Y si si nos fijamos en este, que es lo que
vamos a usar, data recupera los datos
para una solicitud de URL dada, que hemos creado aquí arriba, y es a la vez un método
asíncrono y también potencialmente
arroja Entonces tenemos que abordar
ambas cosas. Lo tercero que quiero
que notes con este método es
lo que te devuelve. Devuelve una tupla. Por lo que tiene dos piezas de datos. Tiene datos, que son los datos reales que
devuelve la API, y un objeto de respuesta, que puedes echar un
vistazo por cualquier error o el código de estado
y cosas así. Entonces esa es la respuesta real, y esos son los datos separados
en su propio parámetro. Nosotros también vamos a encargarnos de eso. Pero primero, hagamos
las cosas una a la vez. Vamos a manejar la parte T lanza, y luego vamos
a hacer Asíncrono y luego vamos a manejar los
datos que se devuelven Lanza. Pasemos
en la solicitud. Si llamar a un método puede arrojar un error,
tenemos que atraparlo, y el mecanismo en Swift para hacer eso es que se vea así. Haces algo que
potencialmente puede arrojar errores, que es esta línea de código. Tienes que poner una
palabra clave tri delante de ella, así que vamos a
tratar de hacer esto. Entonces hay que
tener también un bloque de captura. Esto se muestra, o puede manejar cualquier error que se
arroje si se lanza. Sólo vamos
a imprimirlo. Esto haremos referencia al
error que se desecha. A continuación, manejemos el hecho de que este es un método
asíncrono. Para llamar al método
asíncrono, lo que significa que
se llama en un hilo de fondo o
un trabajador en segundo plano Así que imagínate encargarte a otra
persona para que haga el trabajo, como si estuvieras dando una tarea a
otra persona y que esa persona vaya a hacer la tarea y vuelva a
ti cuando esté hecha Tienes que poner
la palabra clave wait, lo que significa que vas
a esperar a que esa persona, ese trabajador de fondo,
regrese con la tarea completada
antes de continuar y ejecutar el resto de las
líneas de código debajo de ella. Entonces eso es lo que
va a pasar aquí. Ahora, sí quiero explicar,
aunque espera a que
el trabajador en segundo plano haga esa tarea y regrese antes de ejecutar las
siguientes líneas de código, sigue siendo bueno
porque mientras estamos esperando que esa
tarea de fondo regrese, podemos manejar cualquier tipo de interacción
del usuario, y también podemos hacer
algunas otras cosas antes de ejecutar las
siguientes líneas de código Es solo que la
palabra clave de espera le dice al sistema, no ejecute las líneas tres y abajo hasta que ese trabajador de
fondo regrese. Y para cosas como esta,
sí quieres enviarlo como una tarea en segundo plano porque si
tienes el hilo principal, que es el hilo principal
que está ejecutando este código, ve y haz ese trabajo, no
habrá ningún trabajador para manejar toda la
interacción del usuario y esas cosas. Y así
parecerá que está congelado. Entonces esa es una especie
de lo metido. Con cualquier tipo de tareas como solicitudes de
red o consultas de
base de datos, y verás cuando hagamos la descarga de miniaturas
para las imágenes También vamos a mandar eso como trabajador
de fondo
para que vaya y haga eso. Entonces eso es usar las palabras clave Aync
y esperar. El hecho de que esto esté en método
asíncrono
también entrará en juego cuando tengamos la llamada Feed Vew get video, vas a ver cómo
usamos la palabra clave A weight Bien. Entonces ojalá, eso tiene
sentido, si no, recomendaría que te sumerjas un poco más profundo en
Async y un peso Busca algunos tutoriales
adicionales sobre Aync y un peso en Swift, para que puedas entenderlo un poco más de detalle
más de lo que tenemos tiempo de
cubrir ahora mismo Entonces hemos manejado el hecho de
que arroja un error. Hemos manejado el hecho de que
es un método asíncrono, lo que significa que el trabajador de fondo
va a ir a ejecutarlo Ahora tenemos que manejar los
datos que regresan, y es una tupla, ¿verdad? Entonces vamos a declarar nuestra propia tupla para
rastrear esos datos Vamos a declarar
una constante de tuplas. Vamos a decir
datos y respuesta. Notarás que
este formato se
parece a lo que vimos que devuelve
este método. Vamos a decir es igual a esto. Entonces, si no se arrojan errores, cuando regrese el
trabajador en segundo plano, va a asignar los datos a esto y va a
asignar la respuesta a esto. Y luego a partir de aquí,
podemos analizar los datos. Ahora, antes de que realmente
analizemos los datos, intentemos enviar esta
solicitud y echarle un vistazo dentro de Proximan para asegurarnos de
que está sucediendo Entonces, lo que vamos a hacer primero, en realidad
tenemos que
despedir esta solicitud. Entonces dentro de la
vista de feed, aquí mismo, ¿por qué no decimos
en no en un aquí, pero vamos a usar tarea Déjame explicarte qué es eso. La tarea es un modificador que permite ejecutar un
bloque de código asíncrono. Déjeme poner eso en términos de
Layman. Cuando aparezca la vista de noticias en tiempo real, va a ejecutar
este código dentro este bloque de tareas como un trabajador en
segundo plano. Vamos a decir que
vamos a crear una propiedad aquí arriba
para almacenar los videos, y esta va a
ser una propiedad estatal. Déjame explicarte lo
que eso significa también. Va a ser una
matriz vacía al principio. Por si no has visto mi
serie para principiantes de ocho días donde te expliqué qué son
las propiedades estatales. Es esencialmente cuando
este valor cambia, queremos que la interfaz de usuario se refresque. Esto comienza como una
matriz vacía, no hay videos. Pero cuando enviamos
la tarea desde el servicio de datos para recuperar los videos
y vuelve, y luego pone las
instancias de video en esta matriz. Queremos que la interfaz
de usuario actualice y
muestre esos videos. Por eso se trata de
una propiedad estatal. Desencademos esta tarea. Vamos a crear una nueva instancia de servicio de datos y solo voy a
encadenarla así. Voy a llamar a obtener video. Eso debería ser una S.
Vamos a cambiar eso. Esto debería ser obtener videos y Observe que es un método
asíncrono. Y devuelve una lista de videos. Entonces Asincrónico significa que
vamos
a tener que enviarlo como
una tarea de fondo Vamos a tener que
esperar a que eso
regrese antes de ejecutar
el código debajo de él. Vamos a decir que los
videos sean iguales a eso, el regreso a la lista de videos. Llamemos a esto. Vamos
a llamarlo devolvió videos. Entonces vamos a asignar aquí
los videos de devolución a nuestra propiedad
estatal. Videos autopensantes
equivalen a videos devueltos. Podemos acortar esto definitivamente, pero quería
dividirlo en dos líneas para explicarles el hecho de
que esta línea de código no
se ejecutará hasta que esto se
haya ido y vuelva con los datos debido a
esta palabra clave wait Mientras que el trabajador principal está esperando que el
trabajador en segundo plano recupere los datos, aún puede manejar la interacción
del usuario y otras
cosas que necesita hacer. Eso es lo que es tan bueno
de ACN puede esperar. Podemos acortar esto con
sólo poner
esto así y quitando la
necesidad de esto incluso Bien, pero pensé que
escribirlo así
explicaría un poco mejor la palabra clave de esperar. Entonces con la forma en que lo
hemos configurado ahora, si ejecutamos esto en el simulador, debería ejecutar esto y luego enviar
la solicitud de red. Y si nuestra API es correcta y nuestra solicitud está
estructurada correctamente, deberíamos obtener una respuesta. Entonces sigamos adelante y
abramos Proximan. Sigamos adelante y echemos un
vistazo, a ver esto en acción. Primero voy a ejecutar esto en el simulador para
que aparezca en nuestra lista. Ahí está. Voy
a pinchar este a la cima y voy
a tener que reenviarlo. Hola Mundo, envíalo. Todo bien. El código de estado es verde, debería ser un
200, 200, y obtenemos los
datos aquí. Se puede ver que el elemento raíz
contiene una matriz de elementos. Este elemento raíz, lo
representamos con nuestro modelo playlist. Vamos a
modelarlo a partir de eso. Entonces en cuanto a los ítems, estos son los videos individuales, que estamos representando
con instancias de video. Obviamente, aún no lo hemos
llenado, pero eso es lo que
vamos a hacer. Si abres uno de estos videos, vas a ver que
tiene el fragmento, es lo
que pedimos en la solicitud
de API, y contiene
las miniaturas, el título, la descripción
y
el ID del video también
es algo que necesitamos Entonces, dentro del ID de recurso,
aquí está el ID del video. Entonces esos son todos los
detalles que necesitamos. Y miniaturas interiores. Se puede ver que tiene diferentes
tamaños de miniaturas. Cada tamaño tiene una URL diferente. Bien, creo que
estamos a mitad de camino. Ahora con la solicitud que se envía y se devuelven los
datos, todo lo que tenemos que hacer es
analizar esos datos JSON en instancias de video para
que podamos mostrarlos. Y
eso lo vamos a hacer en la siguiente lección. Te veré ahí.
5. Lección 05: análisis de los datos JSON en videos: En esta lección,
vamos a convertir datos
JSON devueltos
por la API en instancias de
video
para que podamos
mostrarlos en nuestra vista de feed.
Vamos a entrar. El primer paso es llenar las propiedades de
nuestros modelos de datos acuerdo a la
respuesta que
obtenemos de la API de datos de Tube. Volvamos a echar un vistazo
a Pxy Man, y esta herramienta es realmente útil, sobre todo porque
solo puedes enviar la
solicitud y mirar la respuesta y
obtener esta vista de árbol y luego puedes
atravesarla así En ocasiones la documentación
tendrá la respuesta, por lo que esta es la API de datos de YouTube. Conozco la API Epler si usas esto y
pruebas la solicitud, vas
a poder ver la respuesta Aquí, esto te da una idea. Sí. Entonces, si no quieres usar Proxy
Man para mirarlo, puedes mirar esto también. Este sería el
objeto o instancia de lista de reproducción, y estos serían los elementos. Cada artículo es un video. Si haces clic en
eso, puedes ver, estas son las propiedades
del video. En realidad, usemos
esto porque el texto es más grande de lo que tenemos
aquí en Proxy Man. Vamos a comenzar
con el video en sí. Entonces vamos a agregar
el protocolo decodificable, y esto nos permite
convertir los datos JSON en instancias de video
usando decodificador JSON Así que vamos a sacar a colación la documentación de la
API. Lo que estoy viendo
ahora mismo es un solo video. Entonces podemos ver que tiene
un ID, que es una cadena, y esto nos va a ser útil porque queremos poner
estas instancias de video dentro de una
lista de DUI Swift y necesita poder identificarse
entre diferentes videos Entonces vamos a
escoger y elegir las propiedades que queremos
analizar, esencialmente. Entonces va
a haber un ID de cadena. Entonces va a haber un fragmento y por dentro
va a haber un título Va a ser una descripción. Ambos necesitamos,
y esos son cadenas. Y luego también
van a haber miniaturas. Primero centrémonos en el
título y la descripción. Nuevamente, esta es una propiedad de
fragmento, y el fragmento en sí mismo, se pueden
ver estos
corchetes, que representan una instancia
o struct u objeto
diferente , como
quieras llamarlo Todo ello representa
lo mismo. Vamos a decir que el fragmento va a ser vamos a
darme un tipo de Voy a hacer esto opcional
en caso de que no exista. Sí, Snippet y no fragmentos. Puedo asegurarme de que la
propiedad sea la misma, y voy a
crear otra estructura aquí llamada snippet, y también va
a Dentro del fragmento es donde pondría
título y descripción O sea, todos los videos deben
tener un título y una descripción, pero por si acaso no, puedes hacerlos opcionales. Por ahora, no lo haré, vamos
a ver qué pasa. Después dentro del fragmento,
tenemos miniaturas. ¿Qué más necesitamos aquí? Necesitamos el ID del video. Vamos a lidiar con eso
antes de las miniaturas porque hay bastante aquí con miniaturas Hagamos ID de recurso. Voy a deletrearlo con
minúsculas así. Hagámoslo. Entonces aquí, voy a crear
otra estructura llamada ID de
recurso que es decodificable El ID de recurso, bueno, el único que
realmente me
interesa es el ID de video,
y es una cadena. Sé que todos los videos
deben tener un ID de video. Tratemos con miniaturas. ¿Fueron miniaturas con una S? Esto estaba dentro del fragmento. T miniaturas con una S
sí entonces esto en sí es lo suyo.
Tenemos que definirlo. Llamemos a esto miniaturas. Vamos a crear otra
stru llamada miniaturas, y esto va a
ser descodificable ¿Qué necesito
aquí? Vamos a la llave. Echemos un vistazo a proximan aquí para ver una respuesta real Tenemos el fragmento aquí, y luego tenemos las miniaturas aquí mismo.
Vamos a abrir esto. Y luego hay
varios diferentes, estándar medio
predeterminado alto máximo es. Para que puedas probar
estos diferentes. Estos son todos
diferentes tamaños de archivo. Probablemente no
querrías conseguir este como este es
el más grande a menos que lo
estés mostrando
en un iPad tal vez, o lo quieres súper claro. Cuando estaba construyendo mi demo, estaba bastante contento con el medio. Entonces eso es con lo que
voy a ir. En realidad, el medio es
casi el más pequeño. El valor predeterminado es bastante pequeño. Entonces esto es casi el
doble de ese tamaño. Pero recuerdo por qué me e medio es porque la relación de
aspecto es diferente. Entonces puedes ver que
estos son sobre Sí, la relación de aspecto era
un poco diferente. Algunos de estos se ven más cuadrados, y algunos de ellos se
parecen más a un
tipo de cosa de pantalla ancha. Entonces me di cuenta después de
probarlos, ese medio era el
que se mostraba muy bien, así que eso es lo que elegí. Sí. Entonces voy
a decir lejos medio. ¿Y cuál es el tipo? El tipo
en sí es otro objeto. Entonces voy a tener que
crear algo para eso justo a como es
estas tres propiedades. Esta es una cuerda. Este es un int, y este es un int también. Así que vamos a crear un tamaño de miniatura de
puntal. Esto es decodificable
a lo que es URL. Como ese trato de altura. Entonces este será
solo tamaño miniatura. ¿Tengo todo lo que necesito? Tengo la imagen en miniatura,
URL, tengo el ID del video Esto es para el reproductor de video. Entonces tengo el título y la descripción.
Creo que esto es todo. Perfecto. Después volviendo a salir. Este es un solo video
que se remonta un paso atrás. Esta es la lista de reproducción. La lista de reproducción tiene y elementos, que es una matriz de
esas instancias de video. Si voy a lista de reproducción, asegurémonos de que
esto también sea decodificable y queremos artículos. Así. Vamos también, necesitamos
agregar identificables, lo que nos permite usar una matriz de esto dentro de
la lista de DUI Swift,
y tenemos la idea lista para
el protocolo identificable, porque eso es lo que
eso requiere Y creo que ya estamos bien.
Vamos a tratar de analizarlo. Vamos al servicio de datos, y continuemos analizando los datos Vamos a
crear un decodificador JS. C. Y entonces vamos a decir decodificar decodificar un
cierto tipo de Vamos a decodificar
los datos de aquí, y los vamos a decodificar en una instancia de lista de reproducción Estamos pasando en la lista de
reproducción como un tipo, y así tenemos que agregar punto self. Así es como se especifica un tipo. Ah, se me olvidó señalar que este método de decodificación
puede arrojar errores Es pedirte que lo intentes. A Podemos poner el try
aquí mismo ya que ya está en
un bloque D. Eso es perfecto. No tenemos que hacer otro, menos que quieras
manejar específicamente ese error
versus este error. Estoy seguro de que puedes
diferenciarte aquí
cuando lo atrapes. Capturemos el resultado
de esta decodificación. Let play list es igual a eso. Entonces como sabes, nuestra
instancia de play list tiene ítems, que son los videos. Esto es lo que
vamos a intentar regresar. Porque recuerda este
método aquí mismo devuelve videos de
escenarios. Todo bien. Veamos cómo funciona esto. Volvamos a nuestros puntos de vista y verifiquemos
lo que estamos haciendo aquí. Voy a establecer un punto de quiebre aquí mismo tocando aquí, que va a
pausar la ejecución. Agreguemos un poco
más antes de ejecutar esto. De esa manera podemos ver
algo visualmente en el simulador. Usemos una lista Swift DUI
y vamos a pasar en videos Porque
el
puntal de video es identificable, entonces eso está todo bien Eso significa que podemos
usarlo en esta lista, y luego vamos
a i por cada video. Vamos a di el título del fragmento. Si eso es NL, solo diga título. Déjeme hacer eso. A ver si podemos
ver que surge algo. Oh, fue tan rápido. Pero pudimos ver al representante
lo siento la solicitud de salir, la respuesta
regresa con cinco ítems, y efectivamente, vemos
cinco ítems aquí mismo. Ahora, esperaba ver más
porque nuestra lista de reproducción en realidad tiene como ocho videos o nueve videos aquí,
diez videos, en realidad. Déjame echarle un vistazo aquí. Creo que por defecto, Sí, el valor predeterminado para los resultados
Max es cinco. Entonces esto es algo
que también querrás establecer. Cambiemos eso en
nuestro servicio de datos. Qué fue lo que Max resulta Capital R. Voy a
agregar eso aquí mismo. El máximo de resultados es igual a
20, digamos. Esto nos está diciendo que
nunca verificamos la respuesta, lo que podemos simplemente ignorar eso
agregando un guión bajo No tenemos que ponerle nombre a eso.
A. Volvamos a ejecutarlo. Sucedió tan rápido ahí.
Tenemos de todo. Lo que hicimos hoy aquí
analizando la JSO
analizando la respuesta y luego mapeando estos pares de valores clave y creando estas propiedades
en nuestro modelo de datos Esto es algo que
es muy común de hacer. Por lo tanto, es mejor
familiarizarse con este proceso si desea
trabajar con diferentes
API en el futuro. Todo bien. Ahora que
tenemos las instancias de video que aparecen en la vista de feed, la parte difícil está hecha, lo
creas o no. Ahora, todo lo que tenemos que hacer es mostrar las imágenes
en miniatura en la vista de feed, y lo vamos a hacer
en la siguiente lección Te veré ahí.
6. Lección 06: recuperación de miniaturas de videos y estilo: La última lección, analizamos
los datos JSON devueltos por la API de YouTube en instancias de
video que estamos
mostrando en nuestra vista de feed. Ahora bien, el problema
es que
no tenemos miniaturas de video para mostrar, y vamos a
arreglarlo en esta lección Vamos a hacerlo. Esto es lo que tenemos hasta ahora con
nuestra vista de feed. Vamos a limpiar esto un poco. Vamos a
entrar en la vista de feed, y lo primero
que voy a hacer es cambiar el estilo
del estilo de lista lista a plano. Y luego también vamos a
quitar el indicador de desplazamiento. Entonces vamos a esos indicadores de
desplazamiento. Eso vamos a esconder. Y ya debería
verse un poco mejor. Perfecto. Entonces vamos a eliminar estos separadores entre cada elemento porque
estas van
a ser imágenes, miniaturas En el texto aquí,
voy a decir que la visibilidad del separador de
filas está oculta. La otra cosa es, recuerda cómo tenemos una vista de pestaña
en la vista de inicio. Vamos a agregar ese
icono de pestaña ahí mismo. En la vista de inicio, podemos
eliminar esto en un par, mostrar nuestra clave API
y agregar un elemento de pestaña. Aquí dentro, vamos
a poner una imagen, y esto va a ser un icono, símbolos
SF, y
vamos a usar stack. Éste, play square stack. A ver si puedo
ponerlo ahí mismo. Acabo de hacer
todo por mí. Entonces el texto
va a ser alimentado. Eso ya va
a verse mucho mejor. Ahora echemos un
vistazo a mostrar esas imágenes usando
nuestra vista de filas de video. En lugar de mostrar
un texto con el título, vamos a querer crear instancias de vista de fila de video. Pero tenemos que pasar el video
a la vista de fila de video. De lo contrario, esta vista no
tendrá nada con qué trabajar. ¿Por qué no creamos
aquí una propiedad que tendrá que pasar Y para ello, tal vez solo hagamos eso. De, no quiero
crear todo eso. Yo sólo voy a hacha
la vista previa en sí. Bien. Y
volvamos a Feed view, y vamos a
pasarlo aquí. Ver, ahora se requiere de eso. Voy a simplemente pasar en el video que está
tratando de mostrar. Ahora, en la vista de fila de video, vamos a mostrar la imagen. Ahora, recuerden, sí tenemos
la URL para miniaturas de la imagen. Está dentro de video punto
snippet miniaturas punto medio do URL. Esto es una cadena. Básicamente, necesitamos
presionar esta URL para descargar los datos de la imagen y luego
mostrar esos datos de imagen
dentro de una imagen SwiftUI Por suerte, para nosotros, SwiftUI lo hace realmente fácil
usando una imagen de sincronización, donde solo pasas una URL, y lo va a hacer Va a enviar un
trabajador de fondo para ir a esa URL, buscar los
datos de la imagen, regresar y luego mostrarlos dentro de una imagen Vamos a usar esta
porque nos da una referencia a la vista de imagen
Swift UI, lo que nos permite agregarle algunos modificadores adicionales
si queremos retocar las esquinas, queremos retocar la
relación de aspecto, podemos hacer El marcador de posición le
permite especificar qué
mostrar mientras ese trabajador de
fondo está capturando los datos de la imagen Vamos a mostrar un spinner. Obviamente, URL es donde
debe ir recuperar eso. Ahora bien, debido a que todos
estos son opcionales, es posible que no tengamos una URL de imagen, así que primero tenemos que verificar
eso. Así que vamos a decir,
si dejar que URL es igual, y vamos a tratar de crear una instancia de URL fuera
de esa cadena. Si es capaz de crear esto, entonces vamos
a pasar esto a la llamada de imagen Async o
sorry view como parámetro Ahí es donde
vamos a pasar eso. ¿Cuál es la cuerda otra vez? Bueno, se trata de
miniaturas de fragmentos de video, URL media. Si no existe, entonces no existe. Entonces no podemos mostrar una imagen. Entonces, ¿qué tenemos que hacer
aquí para proporcionar
Default opcional cuando el
opcional contiene Nil Sea debe ser una cuerda. Entonces sí, si alguna de esta
parte no es una URL. Si no puede crear esta cadena, entonces solo vamos a poner una cadena vacía e
intentar crear una URL, y va a fallar, y no
va a hacer ninguna
de las cosas aquí dentro. Ahora vamos a configurar nuestra imagen asíncrona. Vamos a usar este
de aquí mismo, como dije, y vamos a pasar en
la URL que se creó, y luego vamos
a hacer doble clic aquí. Este es el. Esta
es la referencia a la imagen que se mostrará una vez que los
datos regresen. Esta es la imagen
que se muestra. Este marcador de posición, tenemos otra vista de interfaz de usuario rápida práctica que
podemos usar es la vista de progreso, que solo va
a ser un spinner En cuanto a esta imagen aquí mismo, definitivamente
queremos agregarle un
par de modificadores, por ejemplo, redimensionables,
para
que pueda escalar hacia arriba o hacia abajo, y queremos mantener
la relación de aspecto Entonces el que me gusta usar, depende de las circunstancias. ¿Por qué no
intentamos llenar por ahora? Y ya veremos qué pasa. También vamos a darle un
poco de esquina redondeada. Vamos a hacer forma de clip. Vamos a decir que el radio de la
esquina rectangular
redondeada es diez. Ahora veamos si esto funciona. Vamos a volver a
alimentar, solo comprobamos dos veces. Se va a crear instancias de revisión de video y
pasar en el video, y luego esto debería
descargar las imágenes. No estamos mostrando los
títulos aquí en realidad. ¿Todo bien? Bueno, eso
fue bastante fácil. Hay que admitir
así, tenemos esto. Si quisieras
mostrar los títulos, podrías
o bien mostrarlo, los títulos no
dependen de la imagen, ¿verdad? Entonces podrías poner
todo esto dentro de una pila V y luego poner el
título debajo, por ejemplo. Entonces podríamos tratar de hacer eso aquí. Y este sería el título. Título del video, y luego incluso
podemos hacerlo audaz. ¿No es título? Oh,
lo siento, córtalo título Si no existe, mostraremos una cadena vacía. Podemos alinear, podemos agregar
algo de relleno, por ejemplo. Liderando, y luego podrías agregar solo un poco de relleno en general o simplemente tal vez solo
a la vertical. Bien. Las esquinas son un poco demasiado redondeadas
para mi gusto. Entonces solo haremos cinco. Todo bien. Y así de
fácil es hacerlo. Bien, nuestra vista de feed
se ve bastante bien. Todo lo que necesitamos hacer es
permitir que el usuario toque la miniatura
para ver el video Eso es lo que vamos a
hacer en la siguiente lección. Te veré ahí.
7. Lección 07: vista de reproductor de video y detalles de video: La última lección,
terminamos la vista de feed. En esta lección, vamos
a permitir que el usuario toque
la miniatura para mostrar
la vista de detalle y
ver el video Vamos a sumergirnos directamente en. Entonces ya tachamos la vista de detalle
del video Empecemos por activar
esto y mostrarlo como una hoja cuando el usuario toca un video. ¿Cómo
vamos a hacer esto? Entonces hay una hoja que
puedes atar a una propiedad. Aquí arriba que puedes definir, que vamos a
definir como video seleccionado. Cuando el usuario toca
una fila de video, vamos a capturar
ese gesto y establecer esa propiedad de video seleccionada, que luego va a
activar esta hoja, y luego el contenido es lo que
quieres mostrar en esa hoja. Vamos a elegir eso. Vamos a crear esta propiedad estatal aquí arriba
y llamarlo video seleccionado. Esto va a
ser Nil al principio. Vamos a ligar
al video seleccionado. Y en cuanto al contenido, contenido. Este parámetro almacena
el valor de eso, que es el video seleccionado. Aquí vamos a mostrar la vista
de detalle del video. Bien. Capturemos el gesto de
toque en esto. Entonces en el gesto de tap, vamos a configurar el video
seleccionado es igual a V. Y veamos si esto funciona. Perfecto. Ahora el siguiente paso, pasemos los
detalles del video a la hoja. Vamos a hacer eso por en
la vista de detalle del video aquí. Aceptemos un video. De nuevo, voy a
volar la vista previa. Entonces en la vista de feed, ahora
vamos a pasar en V, que es el video seleccionado. Ahora vamos a configurar
esto un poco. Vamos a tener una
hoja donde la parte superior es
el reproductor de video y
la parte inferior es el título en la descripción. Así que vamos a necesitar
una configuración de pila V aquí y vamos a establecer la alineación para liderar porque eso tiene
sentido para el texto. Vamos a tener
nuestro reproductor de video aquí, que vamos a llegar, y aquí vamos a tener el
título y la descripción. Quiero este desplazable en
caso de que el contenido sea mucho. Dentro del scroll V, voy
a crear otra pila V. Esta debe ser
alineación a la izquierda también. No sé si necesito
el primero entonces. Aquí, quiero poner el
título en la descripción. Esto va a tener
un trozo de texto, y va a ser el título del fragmento de
video Si eso no existe, pondré cadena vacía, y voy a querer
hacer esta fuente de titular, y la negrita también. Voy a añadir un poco de relleno
al fondo sólo para
darle un poco de espacio. En lugar de esto, en realidad
puedo agregar el espaciado aquí porque aquí
solo hay dos elementos. Voy a agregar el
espaciado de 30 ahí mismo. No tengo que poner ahí
el relleno, y después voy a
poner la descripción. Esto va a ser la descripción del
fragmento de video en su lugar. Veamos cómo se ve esto.
Tengo el título. Tengo la descripción, pero necesito agregar un poco de relleno. Voy a agregar el
relleno a la vista de desplazamiento. ¿Debo hacer solo horizontal? No, probablemente lo voy a agregar
en todas las direcciones. Todo bien. Eso se ve
un poco mejor. Oh, indicador de desplazamiento. Vamos a deshacernos de eso también. Indicador de desplazamiento oculto. Bien. Todo bien. Sin indicadores de desplazamiento. Esto se ve bien. Ahora, sí quiero pasar
un momento y hablar sobre qué opciones
tenemos a la hora mostrar
videos de YouTube en nuestra app. Ahora, podríamos usar una vista
web y mostrar un video incrustado de YouTube. Pero también tienen una biblioteca
cliente para que
usemos cómo incrustar videos de YouTube en aplicaciones IOS con
la biblioteca YouTube Helper. Esencialmente, están
haciendo lo mismo, pero lo están haciendo porque están usando un reproductor de fotogramas i. Te lo están haciendo un
poco más fácil, pero esto usa el objetivo C. Así que
esta es una opción también, que es un poco más fácil que
mostrar tu propia vista web e intentar poner
ahí al reproductor como el
código de incrustación web real. La tercera opción
que exploré fue usar Tube Player Kit. Y esta biblioteca funcionó
muy bien con Swift Juan fue muy fácil de
usar y honestamente
ahorró mucho tiempo. Así que ni siquiera consideré
las otras opciones, y esto es lo que vamos
a usar con esta demo. Entonces esta biblioteca de Sven parece bastante activa,
como puedes ver aquí, último número se
cerró hace dos días, y la última solicitud de sondeo se
fusionó hace aproximadamente un mes igual que con cualquier
biblioteca de terceros cuando las usas, estás creando una dependencia
a partir de tu proyecto. Depender del código de terceros. Y el riesgo es que ese código de terceros
quede desactualizado, no
se mantenga,
y se convierta en buggy, y luego eso afecte a tu app. Por lo que aquí hay una
consideración de recompensa de riesgo. Por un lado, podrías
rodar el tuyo propio e incluso dependiendo de esta biblioteca en
sí es código de terceros. Quiero decir rodar el tuyo
sería lo mejor, pero eso
tomaría más esfuerzo y
tomaría más tiempo. Versus usar una biblioteca de
terceros, le
ahorra
tiempo y tiene que
medir si vale la
pena o no el riesgo. En este caso, esto fue realmente fácil de usar y funcionó
muy bien en Swift UI. Parece activo, creo que
el riesgo es bajo, así que por eso
decidí usar esto. Vamos a sumergirnos e integrar este kit de reproductor Tube
en nuestro proyecto. Vamos a presionar este botón azul
diciendo, usa este paquete, y podemos usar Swift
Package Manager para
importarlo directamente a nuestro proyecto. Ahora, ya sabes cómo en la Lección dos, creamos un
proyecto de demostración para probar envío de solicitudes de red y recibir respuestas de
la API de datos de YouTube. Esta sería una
oportunidad perfecta para hacer lo mismo. Siempre que estoy probando
algo nuevo, inicia un nuevo
proyecto ExCo, pruébalo, si funciona, póngalo
en tu proyecto principal Yo lo he hecho Así que no
voy a pasar por eso otra vez contigo y luego pasar
una lección extra haciendo eso. Lo que voy a hacer es simplemente ponerlo
directamente en
mi proyecto principal. Pero en el futuro,
cuando estés trabajando en tus propias cosas,
solo te lo estoy haciendo saber, quizás
quieras considerar que no, sobre todo porque aquí no estamos
usando el control de fuentes. Si estás
jugando con tu código, estás importando cosas
y estropeas algo, es
difícil retroceder, ¿verdad? Así que definitivamente primero prueba las cosas en un proyecto diferente. Dicho esto, vamos a importar esto
directamente a lo nuestro. Así que ve al archivo Dependencias
del paquete de anuncios, y copié esa URL Vamos a
entrar justo ahí mismo,
y ahí está, Kit de jugador
UTuB Puedes seguir adelante
y golpear Paquete de anuncios. Y mientras eso está
pasando, volvamos aquí y desplazémonos hacia abajo y echemos un
vistazo a cómo usamos esta cosa. Entonces, al mirar este fragmento de código, primero
importa el kit de reproductor UT y luego crea
la vista del reproductor Tube Y parece que acabas pasar la URL así como así. Entonces, como prueba inicial, ¿por qué no
hacemos exactamente esto? Vamos a copiar eso. Vamos a volver aquí. Vamos a agregar paquete. Ahí está. En la vista de detalle del video, vamos a
importarte el kit de dos jugadores, y luego debajo del reproductor de video, solo
vamos
a colocarlo ahí mismo Y vamos a ejecutar esto
ahora y ver qué pasa. Es bueno, está mostrando un video,
pero fíjate que el fotograma es más grande que el
espacio que tenemos. Toca. Eso es genial. Los controles están ahí. El video en sí no se ve más amplio que
el espacio que tenemos. Parece que se está
ajustando al ancho. No obstante, sí
parece que hay mucho espacio
negro en la parte superior y la parte inferior porque
cuando cargas esto hacia arriba, ocupa mucha altura. Podríamos tener que establecer el ancho solo establecer el marco para esto para que encaje en el
espacio que tenemos. Además, no queremos estar
mostrando este video. ¿Por qué no intentamos insertar nuestro propio ID en
aquí dinámicamente? Esto sería cortarlo. Pero como pueden ver, aquí
hay algo mal porque como
estoy tratando de hacer esto, no
está funcionando. El autocompletar
no aparece. Así que en realidad no podemos
hacerlo de esta manera. No podemos simplemente insertar un comodín en un
parámetro como este. ¿Por qué no echamos un vistazo a algunos otros métodos
que podemos usar esto y quizás eso
funcionaría para nosotros? Bien. Entonces esto es en última instancia lo que
terminé usando aquí mismo. Entonces puedes configurar el reproductor de
YouTube así primero, donde realmente puedes pasar
un ID de video dinámico, y luego luego podrías
usar esa vista del reproductor de video. Entonces copiemos esto. Es de, vamos a configurarlo aquí. Entonces vamos a
agregar nuestro ID ahí. Esto sería ID de
recurso de conjunto de video ID de video. Si eso pasa a ser Nil, pasaremos una cadena vacía No quiero que se reproduzca de forma automática, así que voy a
poner eso en falso Entonces con esta configuración, si vuelves a esta página, podrás ver que simplemente puedes
pasar en esta configuración a la vista del
reproductor de YouTube. Sí, entonces se ve
algo así. Esto es lo que hicimos. Configuramos
algo, y luego
podemos pasarlo así a la vista
del reproductor de YouTube. Olvidé exactamente
el fragmento de código cuando estaba mirando a través Pero, si te tomas el tiempo
para leer eso, hay muchas más
cosas geniales que puedo hacer. Pero yo sólo te voy a mostrar
cómo hacerlo aquí. Cuando creas la
configuración así, este es el reproductor de Tube,
incluso puedes llamarlo como, Bien. En lugar de especificar
la URL aquí mismo, realidad
podemos pasar
en el reproductor de Tube, lo que
creamos aquí arriba. Voy a ejecutarlo.
Y esto nos permite especificar ese
ID dinámico. Ahí está mi video. St el marco no
funciona correctamente, ¿verdad? Pero está mostrando el
video correcto y está funcionando. Perfecto. Ahora tenemos que
averiguar cómo podemos establecer este marco para este reproductor de video que encaje en el espacio. Simplemente irías marco y
establecerías ancho y alto. El problema es que
necesitamos saber qué es eso. Usando el lector de geometría,
podemos echar un vistazo a la
cantidad de ancho que tenemos. Y esencialmente
vamos a crear el lector de
geometría aquí arriba. Y vamos a
cortar toda la pila V, y la vamos a pegar
dentro del lector de geometría. Ahora como este Vtac está dentro
del lector de geometría aquí, tenemos acceso al proxy El ancho va a ser
proxy dot size width, eso nos da el
ancho de la pantalla. Debido a que
el lector de geometría, el propósito de esto es leer la información de
tamaño. Entonces este parámetro nos da
una referencia a los tamaños. Ahora que tenemos el ancho, podemos asegurarnos de que
es el ancho adecuado, pero también tenemos que establecer una altura
adecuada. Sólo establecer el ancho no
va a funcionar. La pregunta es, ¿a qué
debemos establecer la altura? ¿Cómo lo averiguamos? Bueno, podemos expresar la altura
como una relación del ancho. Tenemos que averiguarlo para estos videos de YouTube
que se muestran. ¿Cuál es la relación de aspecto? Una pista que tenemos
es que si volvemos a, puedo abrir proxy maan de nuevo Pero esencialmente,
quiero
averiguarlo vamos a comentar
esto por un segundo. ¿Cuál es esa relación entre
la anchura y la altura? Hay varias
formas de conseguir esto. Pero echemos un vistazo a esto. Voy a obtener la pista de los tamaños
de miniaturas. Si echamos un vistazo a
los artículos y echamos
un vistazo a las miniaturas, hicimos la mediana
, 320 por 180 Si el ancho es 320, entonces ¿cuál es la altura? 320/180. La relación es el ancho es 1.78, 78 veces mayor que la altura Nosotros revertiríamos eso para obtener la altura
porque tenemos el ancho. Dividiríamos 320 por
eso para conseguir 180. A ver si las matemáticas funcionan. T 20/1 0.7 s78 nos da 180. Así es como vamos
a conseguir la altura. Volviendo aquí, si lector de geometría
proxy nos
va a dar el ancho, entonces podríamos calcular la
altura tomando proxy size width dividido por qué? Sí, ocho. Echemos un
vistazo. Entonces esto debería funcionar. Y seguro,
tenemos la
anchura y altura adecuadas. Lo genial fue que esto también
funcionaría así. Sobre todo si
ignoramos el área segura. Por eso ve aquí
esta parte. Si volvemos a la vista del hogar, podemos decir, ignorar el área segura. Esto podría hacer que se vaya.
Ahí está ese relleno, así que no quiero agregar
ese relleno ahí. Quiero que la
vista de tabulación esté llena. Perfecto. Pero ahora
necesitamos agregar un relleno a la vista de alimentación. Probablemente lo pondremos aquí. Uh, pongamos el relleno. Oh, probablemente solo relleno
horizontal. Bien. Bien, nuestra aplicación de reproductor de YouTube se ve y se siente genial Espero que hayas aprendido mucho, y
espero que hayas
podido seguirlo. Por favor, consulta nuestros otros
cursos en la plataforma. Bien. Gracias por mirar, y te veré en
el próximo curso.
Chris Ching, Co-Founder of CodeWithChris.com
