Como criar um aplicativo de player de vídeo da API do YouTube

1. Aula 01: como explorar a API de dados do YouTube: Meu nome é Chris e vou mostrar como criar esse aplicativo IOS que exibe vídeos do YouTube. Agora, aqui está a aparência do aplicativo. Você pode configurar o aplicativo para mostrar vídeos individuais ou todos os vídeos de uma playlist. Agora, os dados estão sendo buscados por meio da API de dados do YouTube Portanto, se você modificar a lista de reprodução adicionando ou removendo vídeos, ela será refletida automaticamente no aplicativo sem que você precise revisar nenhum código Ah, e você também pode tocar nos vídeos para assisti-los ou ler a descrição do vídeo. Tudo bem, agora vamos dar uma olhada nas habilidades que você adquirirá após concluir este aplicativo Depois de concluir este aplicativo, você ganhará experiência trabalhando com a API de dados do YouTube. Você também aprenderá a enviar e receber solicitações de rede do aplicativo. Ao fazer isso, você aprenderá um pouco sobre a simultaneidade do IOS, especialmente usando A Sync Wait E você aprenderá a depurar o tráfego de rede usando o Pxy Man, que é uma ferramenta gratuita de terceiros E isso permitirá que você solucione qualquer problema que dê errado ao fazer suas chamadas de rede E então, quando recuperamos os dados da API do UTube, precisamos transformá-los em algo utilizável em nosso aplicativo Então é aí que você aprenderá sobre a análise de JSON. Precisaremos armazenar nossa chave de API com segurança em nosso projeto de código X para que ela não vaze acidentalmente Você vai aprender como fazer isso. E quanto ao lado do aplicativo, você aprenderá a reproduzir vídeos do UTube em seu aplicativo IOS Vamos usar uma biblioteca de terceiros chamada UTube Player Kit e vamos integrar essa biblioteca ao XCode usando o Swift Package Manager Em seguida, você aprenderá algumas coisas rápidas de DUI como usar listas, leitor de geometria, imagem sincronizada, visualização de progresso, visualizações de rolagem, só para citar algumas e muito mais, apenas em termos de criação de interfaces de usuário e captura Vamos fazer uma breve visão geral de como tudo isso funciona, caso você seja novato no trabalho com APIs Se você já usou as APIs antes , essa será apenas uma pequena revisão para você Agora, uma API é uma interface à qual você pode se conectar para enviar e receber dados. Em termos mais simples, você pode pensar em uma API como uma coleção de URLs que seu aplicativo pode acessar para recuperar dados ou enviar dados Agora, existem muitas APIs disponíveis. Alguns são gratuitos e outros são pagos. Mas a maioria das grandes plataformas como Facebook, X, Spotify, Google, todas têm APIs para você trabalhar com essa plataforma ou recuperar dados dela Existem algumas APIs que se concentram apenas em dados, como recuperar receitas preços de ações ou dados meteorológicos, coisas assim Ser capaz de usar APIs em seu aplicativo é muito, muito poderoso O que realmente acontece e como você usa uma API do seu aplicativo? Bem, do seu aplicativo IOS, você envia uma solicitação de rede para um endpoint da API, que, lembre-se, é apenas uma URL Em sua solicitação de rede, você especifica quais dados deseja recuperar. Em algumas APIs, você também precisa se identificar na solicitação Essa parte de identificação é chamada de autenticação. A API recebe sua solicitação e autenticará você e também garantirá que sua solicitação seja válida Observe que nem todas as APIs exigem autenticação, mas a maioria Agora, se sua autenticação for concluída e sua solicitação for válida, a API coletará os dados e enviará uma resposta ao seu aplicativo. A resposta contém os dados que você solicitou e normalmente está em um formato chamado JSN Quando seu aplicativo recebe a resposta, ele pode ler os dados formatados em JSN e depois convertê-los em dados que podem ser exibidos na tela para o usuário ver Esse processo de conversão dos dados JSN em dados utilizáveis em seu aplicativo é chamado de análise de JSN. Tudo bem. Esse é o processo que você aprenderá a fazer com a API do YouTube. Agora vamos dar uma olhada na API do YouTube. Aqui estamos, a API de dados do YouTube. Você pode visitar esta página em developers.google.com Quero que você acesse esta seção que diz Adicionar dados do YouTube e clicar em referências. E aqui você pode ver todos os endpoints que estão disponíveis nessa API para que nosso aplicativo envie uma solicitação Agora, lembre-se, esses endpoints são apenas URLs. Então, vamos pegar, por exemplo, pesquisar. Vamos primeiro dar uma olhada na visão geral. Isso descreve para você o que esse endpoint faz, como você interage com ele e lista métodos diferentes, maneiras diferentes de usar esse endpoint Então, vamos dar uma olhada na lista. Ao clicar nela, você vê essa alteração nesta seção aqui e nos casos de uso comuns. Basicamente, isso é pesquisar algo no YouTube. Você pode pesquisar aqui alguns casos de uso por palavra-chave, o que provavelmente é o exemplo típico. Localize eventos ao vivo ou seus vídeos, por exemplo. Se você rolar um pouco para baixo, essa é a parte importante aqui. Isso indica o URL exato que você precisa acessar. Esse é o endpoint e esse é o tipo de solicitação. Quando você envia uma solicitação de rede, ela pode ser de alguns tipos diferentes, e get é o que normalmente é usado quando você deseja recuperar dados da API Você não precisa apenas enviar uma solicitação para esse URL, mas também especificar os parâmetros da sua solicitação. Lembre-se. Se você está pesquisando algo no YouTube, o que está procurando? Você não pode simplesmente dizer pesquisar. Aqui, esses parâmetros descrevem o que você pode especificar junto com sua solicitação para informar à API o que você deseja recuperar ou o que está procurando nesse caso Vamos dar uma olhada aqui. Uma coisa que devo mencionar aqui é na seção de parâmetros, nem sempre há, mas pode haver parâmetros obrigatórios. Lembre-se de que, nessa visão geral, eu disse que a API verifica sua solicitação para ver se ela é válida. Bem, se for um parâmetro obrigatório, você precisará especificar essas informações. Os opcionais, você pode omitir, mas os obrigatórios, você deve incluir como parte de sua solicitação. Qual é esse parâmetro obrigatório? Essa parte, é chamada de parte. Esse parâmetro especifica uma lista separada por vírgulas de uma ou mais propriedades do recurso de pesquisa que a resposta da API incluirá Defina o valor do parâmetro para recortá-la Portanto, é um pouco difícil determinar o que essas coisas significam. Mas o que eu normalmente digo é experimentá-lo. A próxima etapa é rastrear essa API, vamos definir esse parâmetro para recortá-lo conforme diz e, em seguida, vamos ver o que é retornado E se não for o que estamos procurando, provavelmente podemos ver o que mais podemos especificar para esse parâmetro. Agora, o que eu estou procurando é, se quisermos pesquisar por algo específico, como uma palavra-chave, onde faríamos isso ou o que faríamos? Isso é pesquisar por localização. Isso é pesquisar por evento. Isso está procurando por tipos de canal. Canal específico em que você pode procurar quantos resultados deseja. Esse é o único. O parâmetro Qe especifica o termo de consulta a ser pesquisado Se você quisesse pesquisar vídeos sobre, digamos, jardinagem, colocaria a palavra-chave jardinagem nesse parâmetro. Eu vou te mostrar um pouco mais tarde como você atribui esses dados a esses parâmetros, mas não vamos nos aprofundar tanto. Só queria dar uma visão geral da API do YouTube e de todos os endpoints disponíveis E também como esses endpoints funcionam. Você aprendeu sobre o URL, esse é o URL para o qual você enviará a solicitação. Esse é o seu tipo de solicitação, e há parâmetros obrigatórios que você precisa especificar e outros opcionais que forneceriam mais contexto para sua solicitação. Agora, o endpoint que vamos usar nesta série de vídeos, lembre-se, esse aplicativo pode exibir qualquer vídeo do YouTube e reproduzi-lo no aplicativo Portanto, para meu caso de uso, quero exibir uma lista de vídeos de uma playlist específica porque tenho um canal no YouTube e tenho algumas playlists para as quais quero exibir os vídeos. Então, o endpoint que vou usar são as playlists aqui, e vou usar Actually, acredito que não me lembro se era uma playlist ou vídeos neste momento OK. Então, vamos dar uma olhada nesse endpoint Então, aqui está o ponto final da lista de reprodução, get. E se dermos uma olhada no caso de uso, vamos ver. Ele recupera todas as playlists ou, sim, todas as playlists de um canal. Não é isso que eu quero. Esse é, vamos ver. A solicitação que eu uso recupera uma lista de reprodução específica, e acredito que tenha sido esse endpoint, porque há, vamos ver, o ID que especifica que estamos sendo Sim. Isso é o que eu usei. Então, em vez de recuperar todas as playlists do canal, eu queria uma específica Então eu tive que incluir esse parâmetro aqui, chamado ID, e esse é o ID da playlist específica que eu quero. E então, dentro dessa lista de reprodução, eu também recebi os vídeos. Depois de concluir esta série de vídeos, acompanhar e aprender a usar essa API de dados do YouTube, sinta-se à vontade para mudar a forma como o aplicativo funciona. Você pode implementar a pesquisa em seu aplicativo, se quiser. Basta colocar um campo de texto, quando o usuário digitar algo, chame essa chamada de endpoint Insira a palavra-chave que o usuário pesquisa e retorne uma lista dos resultados do vídeo, e o usuário poderá reproduzi-la diretamente no aplicativo. O que vou mostrar na série de vídeos é usar esse ponto final, mostrando uma lista específica de vídeos. Ou você pode organizar sua própria playlist ou talvez selecionar vídeos específicos que deseja mostrar e usar outro endpoint Portanto, fique à vontade para personalizar o aplicativo. Mas eu recomendaria, especialmente se você é novato no trabalho com APIs e redes, que acompanhe esta série de vídeos, espere até o final, fique confortável depois de alcançar o resultado e depois personalizá-lo Agora vamos dar uma olhada na autenticação porque essa API de dados do YouTube precisa identificar quem você é antes de fornecer seus dados. Agora, antes de mostrar a parte da autenticação do YouTube, quero destacar essa linha aqui. Todos esses endpoints têm um impacto na cota e informam quanto custa enviar uma solicitação e obter uma resposta desse endpoint, e isso tem tudo a ver com o material de autenticação Agora vamos para lá. Agora vamos clicar em Guias. Normalmente, com a documentação da API, todo o material de autenticação está no início. Aqui, ele mostra como fazer isso. Vamos dar uma visão geral. Na verdade, vamos obter as credenciais aqui Você verá que existem dois tipos diferentes, duas técnicas diferentes para fazer isso Um é o OOF e o outro são as chaves de API. Agora, a maioria das APIs usará uma ou outra e, às vezes, ambas Mas se eu fosse descartar um número, eu diria que 90% das APIs, você pode usar chaves de API Deixe-me explicar brevemente a diferença entre os dois. A autenticação por chave de API é quando você se inscreve em uma conta, e eles fornecem uma longa sequência de letras e números, que é a sua chave. Ao fazer solicitações de rede para a API, você especificará essa chave com sua solicitação e, dessa forma, eles poderão associar essa solicitação à sua conta. Então, eles também podem limitar sua taxa. Eles podem ver o quanto você está usando a API, se você é abusivo, se você está limitando principalmente a taxa, fornecendo cotas e coisas Porque você pode imaginar que se fosse ilimitado e o mais rápido possível e todos estivessem acessando sua API, ela poderia derrubá-la ou a carga do servidor poderia ficar muito alta. Isso permite que eles controlem o acesso à API. Se descobrirem que você é abusivo, poderão banir sua chave e você não poderá mais fazer solicitações. É assim que a autenticação por chave de API funciona. Agora, o OOP é um pouco diferente. É aqui que você normalmente vê uma caixa de nome de usuário e senha em seu aplicativo, e o usuário precisa fazer login na conta do Google e, ao fazer isso, está obtendo um token da API. Em seguida, você anexa esse token às solicitações enviadas. Portanto, há uma distinção porque agora eles estão associando essas solicitações à conta do Google do usuário Portanto, você não está mais com tarifas limitadas. Não está contando para sua cota, está contando para a cota deles Além disso, o que você pode fazer é diferente porque agora que o Google pode identificar sua conta do Google, esse usuário pode realizar coisas como curtir um vídeo ou se inscrever em um vídeo, você pode chamar esses tipos de Ou talvez seguindo um usuário. Considerando o acesso à chave de API, todos os seus usuários estão usando a mesma chave de API, aquela na qual você se inscreveu, associada à sua conta. É por isso que, com as chaves de API, você não pode realmente fazer coisas como curtir um vídeo ou se inscrever um canal, porque a API não tem ideia de quem é o usuário Tudo o que eles podem ver é que podem associar essa chave de API à sua conta que você criou. O OOF está um pouco mais envolvido, então não vamos usar isso nesta série de vídeos. Vamos seguir a rota da chave de API, e aprender como fazer isso abrangerá a grande maioria das APIs que você encontrará. Tudo bem. Então, agora vamos para a próxima etapa, que é criar uma conta e obter nossa chave de API. Então, tudo o que você precisa fazer é seguir o link desta página de credenciais e eu vou abri-la em uma nova guia, que solicitará que você faça login na sua conta do Google Como eu já estou conectado, isso me trouxe para esta página de credenciais do meu projeto Você provavelmente também não terá um projeto. Então, deixe-me tentar voltar para o painel. Talvez você precise responder a algumas perguntas de integração ou algo parecido Mas, eventualmente, você chegará a uma página parecida com esta porque aqui está dizendo que eu tenho um projeto, mas você não terá um projeto. Isso pode solicitar que você crie um novo projeto. Você pode ir em frente e fazer isso, ou você pode clicar neste menu suspenso aqui, e então podemos escolher um novo projeto, e podemos criar um projeto juntos. Parece que não consigo criar um novo projeto. Mas isso é o que você faria. Você digitaria o nome do projeto. Você diria, eu não acho que isso importe muito. Assim, você pode escolher o que quiser e clicar em Criar. Depois de criar um projeto, vá em frente e navegue até esse projeto. Então, para mim, haveria esse aqui. E você clicará em credenciais, desculpe, API e serviços, e depois descerá para credenciais Então, quando você chegar aqui, é aqui que você pode criar a chave de API. Então você vai dizer criar credenciais. Crie uma chave de API. Isso vai gerar um para você. E então você terá que restringi-lo à API de dados do YouTube. Isso seria bom. Deixe-me atualizar a tela. Fez isso por mim? Aí está. Essa é a nova chave de API que acabou de ser criada. Vou clicar nele. E então eu vou definir a restrição aqui. Vou restringi-lo a uma API específica. A razão pela qual essa é uma boa ideia é que , se a chave da API cair nas mãos erradas, isso limita o que eles podem fazer usando apenas a API de dados do YouTube. Acho que é uma boa prática não dar rédea solta a tudo Restringir coisas e remover opções é sempre bom, especialmente se você não precisar dessas opções, pois isso limita o que limita qualquer comportamento inesperado A mesma coisa vale para a programação, certo. E eu não estabeleceria restrições sobre isso. Quero dizer, você poderia fazer isso, mas vai funcionar Pode interferir com seus testes, especialmente se for sua primeira vez. Então, vamos escolher nenhum. Restrinja a chave da API de dados do YouTube. Aí está sua chave de API. Você não deveria mostrar isso para ninguém. Não vou usar essa chave, então não tente copiá-la e usar essa chave. Provavelmente vou deletar isso depois. Mas vá em frente e salve-o. E aí está. Você tem uma chave válida que pode ser usada e usará essa chave dentro do seu projeto IOS. Tudo bem. Agora estamos prontos. Tudo bem, agora estamos prontos para começar a usar a API de dados do YouTube. Na próxima lição, vamos criar um projeto de teste para se conectar à API e recuperar dados dela. Te vejo lá. 2. Aula 02: como obter dados da API do YouTube: Na última lição, analisamos como se conectar às APIs e analisamos a API de dados do YouTube Também criamos nossa chave de API. Agora estamos prontos para começar a recuperar dados da API. Vamos direto ao assunto. Tudo bem, então vamos testar a obtenção de dados dessa API. Agora, antes de entrarmos no código X para testar isso, há uma maneira ainda mais fácil de testar essa API diretamente da documentação. Eles têm essa coisa chamada API Explorer, e você pode testar os pontos finais diretamente desse painel. Agora, tudo o que você precisa fazer é verificar se está conectado à sua conta do Google no canto superior direito Essa é a mesma conta com a qual você criou sua chave de API na primeira lição. Lembre-se de como tivemos que fazer login em nossa conta do Google e vir aqui, criar um projeto e depois criar uma chave de API. O que acontecerá enquanto você estiver conectado à mesma conta do Google é que, ao usar esse API Explorer, ele pegará essa chave de API e a usará Então, vamos testar o endpoint. Agora, na verdade, vamos usar este, endpoint de itens da lista de reprodução Porque na lição anterior, falei sobre o uso do endpoint da lista de reprodução, mas este, na verdade, apenas fornece informações sobre a playlist em si Itens da lista de reprodução, esse é o que queremos usar. Como você pode ver, esse é o URL para o qual devemos enviar a solicitação, esse é o tipo de solicitação e esse é o único parâmetro necessário, e você pode especificar diferentes níveis de detalhes que deseja recuperar Agora, a razão pela qual eles fazem isso é porque, para seus propósitos, talvez você não precise de todas as informações e, nesse caso, você pode especificar talvez um nível mais baixo de detalhes, que economizaria largura de banda Por que recuperar mais informações do que você precisa? Vai levar mais tempo, vai levar mais largura de banda, e assim por diante Eu descobri que, para este aplicativo, preciso da miniatura, do ID do vídeo para exibir o vídeo, obviamente, da miniatura Eu preciso do título na descrição. E isso é tudo. E o Snippet é o nível de detalhe que eu preciso Ele contém tudo o que acabei de mencionar. Agora, o outro parâmetro que eu tenho que especificar é o ID da lista de reprodução porque eu quero recuperar todos os vídeos de uma playlist específica Agora, quando usei esse endpoint pela primeira vez, cometi o erro de colocar o ID da lista de reprodução nesse parâmetro, mas ele não retornou nada, e percebi que, oh, eu deveria colocá-lo neste Então, eles cometerão o mesmo erro. Agora, deixe-me mostrar como você pode obter o ID da lista de reprodução que você deseja. Então, eu tenho uma lista de reprodução aqui que eu quero usar, e tenha em mente que você pode usar qualquer playlist que quiser. Então, tudo depois desse sinal de igual aqui, e antes de qualquer sinal comercial, esse é o ID da lista de reprodução URL pode ter algo assim, digamos que n t seja igual a um, dois e Entre o sinal de igual e o sinal final. Depois que a lista for igual, esse é o ID da sua lista de reprodução. Não se preocupe Você descobrirá rapidamente se é o ID da lista de reprodução ou não, porque se você não receber nenhum dado dessa chamada de API, saberá que na verdade não era o ID da lista de reprodução. Esse é o ID da minha lista de músicas. Eu vou copiar isso. Então, no meu explorador de API, deixe-me em tela cheia. Talvez eu apenas torne o texto um pouco maior para que seja mais fácil de ver. Em ID da lista de reprodução, vou colar isso. Eu tenho que especificar uma parte aqui. Lembre-se de que podem ser detalhes do conteúdo, ID, status ou trecho O trecho é o que eu preciso. Eu me sento lá. Você também pode ver como isso altera a URL para a qual você precisará enviar uma solicitação de rede. Se você der uma olhada, isso pode ser interessante para você. Esse é o ponto final que estamos enviando para acessar a API enviar uma solicitação. Então, os dados que eu especifiquei aqui nos parâmetros estão todos aqui. Olha, P é igual ao trecho, o ID da lista de reprodução é igual a esse ID e, em seguida, a chave é igual em seguida Agora não há nenhuma caixa de texto para colocar na minha chave de API aqui. Então, isso é extrair da sua chave que você criou aqui. É por isso que você precisa se certificar de que está conectado à mesma conta e porque ela será recuperada a partir daí Vou desmarcar o Google O Auth. Vou clicar em Executar. Se tudo correr bem, você deve receber uma resposta de 200, o que significa que foi bem-sucedida, e então você receberá todos esses dados de volta. Agora, esses são os dados formatados em JSO que eu estava falando que retornam da resposta da API do YouTube E cabe a nós transformar esses dados. Lembre-se de que o processo é chamado de análise JSM, para transformar esses dados JSON em dados utilizáveis em Você vai ver como fazer isso em algumas lições da série, com certeza. Mas, por enquanto, eu só quero dar uma olhada rápida nos dados que são retornados e ter certeza que tenho as informações de que preciso. Aqui posso ver que tenho o título da aula, a descrição da aula, as miniaturas, os URLs das imagens, tenho o ID do vídeo perfeito Então, isso é para a Lição dois e assim por diante. Eu tenho tudo. Agora, se você não recebeu essa resposta, talvez tenha recebido um erro ou algo parecido. Eu verificaria se a parte é igual a um trecho escrito corretamente Eu me certificaria de que o ID da sua lista de reprodução esteja correto. Talvez você tenha pego o segmento errado do URL lá Então, eu também me certificaria de estar conectado à conta correta do Google que tem acesso ao APIky E depois tente novamente, bata em fofo. Agora, se isso não funcionar, por algum motivo, você não pode fazê-lo funcionar. Não se preocupe, lembre-se, isso foi apenas um teste rápido. O verdadeiro teste é ser capaz de fazer isso dentro do código X, dentro de um aplicativo IS. Isso é o que vamos fazer a seguir. Não se preocupe se você não entendeu essa parte, esse foi um teste rápido da API. Agora vamos começar nosso projeto de código X. Vamos começar um projeto de teste. Este não será nosso aplicativo real. Quando estou experimentando coisas novas, gosto simplesmente abrir um novo projeto do Xcode, experimentar algo, ter certeza de que consigo fazê-lo funcionar antes integrá-lo ao meu projeto principal Isso é o que vamos fazer aqui. Vamos criar um projeto de teste de código X e vamos testá-lo. Vamos fazer isso. Vamos criar nosso projeto de código X. Vou fazer isso e lançar um novo projeto de código X. Em IOS, vamos escolher o aplicativo. Vamos em seguida. Vou chamá-lo de teste da API do YT. Este não é nosso aplicativo oficial. Só vai ser um teste. A interface é Swift GI, linguagem é Swift, o armazenamento não é nenhum. Tudo isso não está verificado. Vamos clicar em Avançar. Não preciso criar um repositório Git. Vou apenas criar isso no meu desktop porque será um projeto descartável Ok. Vamos fazer isso agora. Torne-o um pouco maior para que possamos ver e, em seguida, o que vamos fazer é enviar essa chamada de API assim que ela for iniciada a partir daqui. Quero adicionar uma tarefa aqui, fazer a tarefa e abrir um par de colchetes Aqui, vamos fazer a chamada de rede e imprimir os resultados. Lembre-se, eu não vou fazer as coisas da melhor maneira. Só quero ter certeza de que posso me conectar à API a partir do código X. Receba os dados certos de volta, certo? Estamos testando na API. E não é necessariamente aqui que faríamos as coisas tão bem em nosso projeto real. Novamente, isso é um teste. Vou explicar para você qual é a tarefa um pouco mais tarde. Vou conectar todos os pontos para você. Mas, por enquanto, vamos fazer isso neste pequeno bloco de tarefas. Então eu quero que você digite isso. E então deixe-me digitar algumas instruções de código e orientá-lo não por instruções de código, mas por alguns comentários e orientá-lo pelas etapas que vamos seguir. Então, primeiro, vamos definir a URL do ponto final com parâmetros. Essa é a URL para a qual enviaremos a solicitação. Vamos criar uma instância de URL. Vamos criar uma solicitação de URL. Instância. Isso é o que realmente enviaremos e, em seguida, enviaremos a solicitação com r session. Esse é um mecanismo com o qual podemos fazer networking. Em seguida, vamos imprimir a resposta. Também teremos que lidar com erros. Ok. Vamos experimentar isso agora. Primeiro, vamos definir a UL do ponto final com parâmetros. Se você der uma olhada no explorador de API, aqui, verá que ele contém tudo o que precisamos, exceto que precisamos inserir nossa chave de API ali mesmo. Esse é essencialmente o UL que temos que atingir. Já está escrito para nós. Isso é o que eu vou tomar. Agora, uma coisa que eu quero ressaltar, e eu não sei exatamente por que, se você der uma olhada neste domínio de endpoint, ele diz Tube dot google api.com Mas se você der uma olhada nisso, é Google api.com slash Eu usei os dois. Ambos trabalham. Provavelmente seria um pouco mais seguro de usar porque está na documentação oficial, enquanto está neste explorador APA, talvez simplesmente não esteja atualizado. Ah, vamos usar isso e então podemos construí-lo juntos. Podemos criar esse URL apenas para que você também saiba que tem uma ideia de como ele é criado. Vou declarar uma constante. Eu chamo isso de string de URL. Agora, lembre-se de que não é assim que vamos fazer em nosso projeto real. Vou apenas escrever a string inteira aqui, incluindo a chave da API e todos os parâmetros. Então, para incluir parâmetros, você coloca um ponto de interrogação e, a partir desse ponto , são parâmetros. E então o formato para especificar os parâmetros será o nome do parâmetro igual ao valor do parâmetro. Qual é o primeiro que devemos especificar? Que tal uma parte? Uma vez que a peça é necessária de qualquer maneira Então, vamos digitar parte igual, e lembre-se de que você pode especificar uma ou mais delas Ele pede que você especifique mais. Você colocaria uma vírgula entre eles, mas precisamos apenas de um trecho Eu posso colocar um trecho. Agora, para especificar um segundo parâmetro, você coloca um e comercial e, em seguida mesmo nome do parâmetro é igual Qual é o segundo parâmetro que queremos especificar? Isso é ID da lista de reprodução? Você também deve segui-lo com base nas capitais. Lista de reprodução P em minúsculas, seguida por um ID I grande. Agora é igual a, qual é o ID da lista de reprodução? E puxe a tela para cima novamente e eu vou pegar minha identidade aqui. Agora, isso realmente faz sentido. Se você puder ver o URL, poderá ver a lista de reprodução e, em seguida, haverá um ponto de interrogação, o que significa parâmetros de agora em diante. Lista é o nome do parâmetro igual e, em seguida, o valor do parâmetro Em seguida, o final do valor do parâmetro é e comercial e, em seguida, o segundo parâmetro e assim por diante É por isso que eu digo pegue tudo depois do sinal de igual, mas antes do Ampersand porque esse é apenas o conector para o próximo parâmetro Esse é o ID da minha lista de músicas. Então, vamos colocar isso aí mesmo. Eu também preciso de mais um parâmetro. Vamos colocar o sinal e comercial, e essa chave é igual à minha chave Agora, continuo dizendo isso porque não quero que alguém assista e diga: Ei, você não deve simplesmente colocar sua chave de API lá. Eu sei. Novamente, isso é um teste, então é assim que vamos fazer isso agora. Quando trabalhamos no projeto real, protegeremos a chave. Então, vamos voltar à nossa chave aqui. Vou mostrar minha chave, e esta é nossa chave de teste. Vamos colocá-lo ali mesmo. Essa é a URL para a qual enviaremos nossa solicitação. E esse URL contém todos os parâmetros da solicitação e a APIK tem tudo o que precisamos Aqui, vamos criar a instância de URL. Deixe URL ser igual a URL e, em seguida, usaremos este aqui, onde você pode simplesmente passar a string do URL Mas lembre-se de que essa criação dessa instância de UR pode não ser capaz de criá-la com sucesso, então temos que verificar. Se você está familiarizado com o Swift, se já fez alguns cursos antes, saberá quais são os opcionais, e criar isso retorna uma instância de URL opcional, que significa que pode não ser bem-sucedida Temos que verificar isso primeiro. Uma maneira de fazer isso é dizer se URL é igual a URL, O que isso faz é verificar. Se isso não for NL, o que significa que ele foi capaz de criá-la com sucesso, atribua-a a essa constante e, em seguida, moveremos essas coisas para lá e poderemos usá-las. Mas se for NIL, ele simplesmente pulará e virá até aqui e não executará nenhum desses códigos Se for NL, isso significa que não conseguiu criar com sucesso a string de URL e, de qualquer forma, não podemos continuar Agora vamos criar a solicitação. Deixe a solicitação ser igual à solicitação de URL, e vamos transmitir essa instância de URL que criamos essa Isso é o que criamos. Isso verifica se não é NL e, se não for NL, se não estiver vazio, ele o atribui a isso e, em seguida, passaremos isso para a criação de nossa solicitação Agora que temos nossa solicitação nessa constante, enviaremos a solicitação com a sessão de URL. Esta é a sessão de URL que usamos para networking. Sessão de URL compartilhada. Há um objeto de sessão compartilhada que podemos usar. Não precisamos criar nossos próprios. E há um método chamado Data four. Isso buscará os dados de uma determinada solicitação. Olha, tudo se conecta. Podemos passar essa solicitação agora para esse método. Mas dê uma olhada. Há duas palavras-chave. Há uma sincronização e há Throws. Essas são duas coisas diferentes com as quais temos que lidar e observar. Vamos falar primeiro sobre os arremessos em T. Essa palavra-chave indica que executar esse método ou executar essa tarefa pode potencialmente criar um erro Isso vai gerar um erro. É daí que vem essa palavra. E você precisa lidar com o erro porque deseja responder a ele. Se algo ruim acontecer, você deve anotar o que aconteceu e, se for algo do qual você possa se recuperar, recupere-se. Se for algo do qual você não consegue se recuperar, talvez você exiba uma mensagem para o usuário e diga, desculpe, algo ruim aconteceu ou, como isso aconteceu, não podemos continuar. Por favor, tente novamente. Ou você pode optar por não lidar com o erro e simplesmente ignorá-lo. Isso é perfeitamente razoável para alguns erros. É isso que os arremessos significam. E eu vou te mostrar em um segundo como podemos lidar com isso. Agora, Async é outra palavra-chave que indica que esse método é Agora, temos que parar um pouco. Se você nunca fez nenhuma rede antes, deixe-me descrevê-la rapidamente com esse cenário. Assíncrono é algo assim. Digamos que você esteja esperando por um pacote em casa. É um pacote muito, muito importante. Eles não vão deixá-lo na sua porta. Digamos que seja um novo mac book. Você comprou um novo Mac Book, está esperando que ele chegue. E então você está esperando em casa, vai ser em algum momento hoje, mas você não sabe exatamente quando será entregue Mas você realmente precisa comprar pouco de leite. Certo? Ou talvez até o almoço? Digamos que você tenha que ir almoçar e não tenha comida em casa, esteja com fome. Então, o que você faz? Você pode sair e comprar o almoço sozinho. Mas há uma chance de que esse mac book seja entregue e você não esteja em casa. Você vai sentir falta, e isso seria ruim. Bem, o que você faz? Bem, acontece que você tem alguém em casa, pode ser uma mãe, pode ser um pai, pode ser um irmão, pode ser uma irmã, pode ser sua esposa. Você perguntou a eles, Ei, você pode ir buscar o almoço? Porque eu preciso ficar em casa e esperar por esse livro. Você manda essa pessoa trazer o almoço e essa pessoa vai almoçar enquanto você pode ficar em casa e esperar pelo pacote. Isso é exatamente o que está acontecendo aqui. Assíncrono significa que, assim como você está enviando alguém para pegar o almoço? Você está enviando uma tarefa em segundo plano ou um auxiliar em segundo plano em termos de computador, eles chamam isso de tópico em segundo plano Você está enviando isso para realizar esta operação de rede. Vá buscar esses dados na API do YouTube. Enquanto eu permaneço aqui respondendo à interação do usuário e, assim como mantendo as luzes acesas, você sabe, mantendo tudo operacional E quando você recebe a resposta da API do UTube, eles voltam para mim e me informam quais são esses dados, e eu vou lidar com Agora, por que isso é importante? Por exemplo, você tinha que ficar em casa e esperar por aquele Macbook. Se conseguirmos que o thread principal busque os dados envie a solicitação e espere que os dados voltem, não haverá ninguém para manter luzes funcionando e as coisas operacionais Se seu aplicativo não for capaz de responder à interação do usuário ou fazer algo parecido. É por isso que, com essas tarefas de rede ou algumas tarefas de dados, você deseja enviar um tópico em segundo plano, assim como enviou um ajudante para pegar o almoço Isso é o que significa assíncrono. Ok. Agora que você sabe o que essas duas palavras-chave significam, vamos lidar com a primeira porque há uma sintaxe especial que você precisa escrever para capturar o erro ou o possível erro que pode acontecer Vamos terminar de digitar isso e, em seguida, vamos lidar com essas duas palavras-chave, uma de cada vez Dados quatro, e vamos passar a solicitação. Ok. Então, quando algo pode gerar um erro como esse, o que fazemos é colocá-lo dentro de um bloco de captura. Então você faz alguma coisa, certo? Você faz o que pode colocar o erro entre esses colchetes aqui Então é isso que você vai fazer e, em seguida, você detectará quaisquer erros em potencial logo abaixo dele. E então você pode imprimir qualquer erro que possa acontecer. Ele vai simplesmente colocá-lo lá. Agora, mais uma coisa que você precisa fazer para indicar que algo que você entende que pode gerar um erro é colocar uma palavra-chave tri na frente dela, certo? Então você vai fazer isso. Você vai tentar isso e, em seguida, detectará qualquer erro em potencial e o imprimirá. Então, isso manipula a palavra-chave Throws para executar esse método Agora, vamos falar sobre a palavra-chave assíncrona sobre a qual falamos Queremos enviar essa tarefa em segundo plano para obter os dados. E volte quando isso acontecer. O que precisamos fazer é colocar a palavra-chave peso. O que isso faz é basicamente dizer que, antes de executarmos qualquer código abaixo dessa linha de código, ele vai esperar que isso retorne. Por que queremos fazer isso? Porque, digamos que aqui embaixo, vamos imprimir e imprimir a resposta. Na verdade, aqui, vamos colocar o erro de manipulação aqui e imprimir a resposta, vamos colocar isso aqui. Certo. Não gostaríamos de imprimir a resposta antes que ela voltasse com os dados, certo? Porque então não haveria nada para imprimir. Ao colocar a palavra-chave await na frente de um método assíncrono, ele vai esperar que isso aconteça Termine de fazer isso, volte e depois vamos imprimir a resposta. O que vamos imprimir? Temos que atribuir os dados que são retornados a algo primeiro, assim como fizemos aqui, deixe o URL ser igual a isso, deixe a solicitação ser igual a isso solicitação ser igual Vamos dizer que os dados, a resposta, sejam iguais a isso. Agora, por que eu fiz isso? O que é isso? Isso é chamado de tupla e é basicamente uma coleção de variáveis A razão pela qual fiz isso é porque o que é devolvido são duas coisas. Um são os dados reais, os dados do JSN, e o outro é a resposta Há duas coisas diferentes e elas serão atribuídas acordo com os dados e com a resposta. Agora, quando eu imprimo, posso imprimir os dados e posso imprimir a resposta. Ele não executará esse código até que ele volte por causa dessa declaração de peso aqui. Agora eu posso explicar para você o que é essa palavra-chave da tarefa. A palavra-chave da tarefa é para executar métodos assíncronos ou código assíncrono, É apenas uma construção especial para poder executar código em segundo plano. Você pensa assim. Então, agora estamos todos prontos. Depois de escrever todo esse código, o que vamos fazer é executar esse projeto. Ele executará esse código assim que o simulador for lançado E então veremos alguma saída, se ela detectou um erro ou se realmente vemos os dados na resposta. Então, vamos dar uma olhada no que aconteceu aqui. Se eu abrir essa área de console, e se você não tiver essa área de console, na verdade ela poderá ser minimizada Você aperta aquele botão ali mesmo. E você pode não ter essas guias. Então, basta clicar nesses botões no canto inferior direito e abrir essas guias. Há duas coisas a serem observadas aqui. Estes são os dados, e não podemos ver os dados. Está apenas nos dizendo o tamanho dos dados. Isso é o que acontece quando você tenta imprimir dados. Mas teremos que analisar esse JSON ou convertê-lo em dados utilizáveis em Vamos fazer isso algumas aulas depois. Mas vamos dar uma olhada na resposta, porque isso também pode nos dizer muito. Ok. Então, se você procurar um código de status, código de status 200, isso é bom. Lembre-se aqui no API Explorer. Acho que aqui está, ok. CO 200. Isso significa que esse é um código de servidor para sucesso. Código do servidor 200. Você pode pesquisar no Google, códigos de servidor 200. Meios. Existem mais códigos. Vamos dar uma olhada no que temos aqui. Agora, você não pode realmente ver os dados JSON, mas você pode ver alguns detalhes sobre a resposta Mas o status C 200, isso é um bom sinal. Isso significa que a API aceitou nossa chave de API. Aceitei nossa solicitação como válida e ela retornou uma resposta. Vamos dar uma olhada no que acontece se apenas alterarmos alguns dos dados. Digamos que eu estrague minha chave de API Onde está a chave? Aqui mesmo? Vou deletar algumas letras dele e executá-lo novamente para ver qual é o código de status desta vez. É 400. Isso é 400 não é bom. Provavelmente detectou que a APIKey não é válida. Pedido incorreto. Perfeito. Isso é incrível. Isso é exatamente o que esperávamos. Deixe-me desfazer. A chave de API deve ser válida. Deixe-me estragar um pouco minha ideia de lista de reprodução. Veja como isso muda as coisas. É um quatro em quatro. O que é um quatro em quatro, não encontrado. Não consegui encontrar minha lista de reprodução porque eu errei o ID da lista de músicas Então isso é muito bom. Isso significa que tudo está funcionando como esperávamos. Mas não seria ótimo se você pudesse realmente ver a resposta. Aqui, estamos apenas analisando código de status da resposta. Bem, às vezes, quando você está programando e trabalhando com chamadas de rede, como estamos fazendo agora, seria muito útil dar uma olhada no conteúdo real da resposta e das solicitações E é aí que você usa uma ferramenta de depuração de rede de terceiros Então, vou mostrar como usar o Proxy Man, que você pode usar gratuitamente no desenvolvimento de seu aplicativo IOS, e então podemos dar uma olhada na resposta real e ver os dados Então, vamos baixar e instalar o Proxy Man. Vá em frente e visite proxy maan dot O, e você pode baixar o aplicativo MAC Lembre-se de que você pode usar isso gratuitamente e que existem recursos pagos, então você pode analisar isso, mas eu recomendo começar de graça por enquanto. Ok, então eu vou lançar meu Proxy Man. Agora, o seu pode não ter essa aparência porque provavelmente estará integrado para você Você provavelmente precisará seguir algumas etapas primeiro. Mas uma coisa importante a fazer é acessar um certificado e você precisará instalar algumas coisas. Portanto, instale o certificado neste MAC primeiro e depois instale o certificado no IOS e você escolherá simuladores Mas ajuda se você realmente tiver o simulador instalado e funcionando Então, em seu projeto conjunto, basta executar seu projeto, para que você tenha o simulador aberto e anote o que é, iPhone 15 Pro, porque ele será instalado neste simulador Então, sim, isso é o que você faz. Ok, aqui. Escolha simuladores. E então, em primeiro lugar, isso foi instalá-lo no seu mac. Se você não fez isso, precisa clicar no botão dele. E então deve dizer que encontrei o simulador porque você o lançou, então está procurando por ele Devo dizer que foi encontrado. E então você vai escolher apenas preparar simuladores. E então ele vai pedir que você o reinicie. Você clica nesse botão e ele reinicia o simulador com o novo certificado Isso permitirá que o proxy Man fique entre as solicitações que seu simulador faz e recebe, e é assim que você poderá ver os dados, certo? Então, o que você vai fazer, às vezes você precisa reiniciar o código X. É um pouco exigente. Se você não vê o que estou mostrando, tente reiniciar o código X e os simuladores Mas se tudo estiver configurado corretamente, o que você deve poder fazer é executar o aplicativo agora e abrir a guia Aplicativos, vê-la aparecer aqui. Aí está. Esse é o meu projeto, certo. Vamos ver aqui. Essa é essa. Ok. O que posso fazer é clicar com o botão direito e fixar e ele aparecerá aqui, e você pode ver que ele enviou uma solicitação para esse domínio. Tudo bem, mas preciso reenviar a solicitação para ver o conteúdo Deixe-me executar este projeto novamente, e você verá uma segunda solicitação sendo feita e, desta vez, você poderá ver tudo. Dê uma olhada nisso. Este lado à esquerda é a solicitação, este lado à direita é a resposta. Para a solicitação, você pode ver. Para a consulta, você pode ver todos os parâmetros que você especificou, então há a chave, o ID da lista de reprodução e a parte, e tudo isso veio da URL. Mas a resposta é a parte interessante. Você pode ver o código de resposta , está aqui, 200. Mas se você der uma olhada no corpo aqui. Esses são os dados que foram retornados na resposta. Lembre-se de que quando o executamos no projeto de código X, esses dados aqui, imprimimos os dados e mostravam apenas o tamanho dos dados. Bem, com o Proxmn, podemos realmente dar uma olhada nos dados aqui Aqui estão todos os dados. Essa é uma ferramenta muito útil para usar quando você está trabalhando com chamadas de rede. Agora, se você estiver tendo problemas para ver o que estou vendo, recomendo que você siga as etapas de solução de problemas. Vamos ver aqui. Quando escolhemos isso, havia algumas etapas de solução de problemas que você poderia tentar e lançamos uma documentação para você experimentar. Isso é o que parece. Sim. Basta passar por isso e tentar estas etapas de solução de problemas. Ok. Não é o fim do mundo se você não conseguir fazer isso funcionar, porque, como você pode ver, mesmo sem o Proxy Man, podemos enviar a resposta ou desculpe, enviar a solicitação e obter a resposta e o código de status 200 e tudo mais. Tudo bem Novamente, esse foi um projeto de teste. Não é assim que vamos fazer coisas assim. Definitivamente, queremos proteger a chave e fazer as coisas com um pouco mais de elegância, não apenas tudo nessa visualização de conteúdo Então, vamos criar um componente separado para lidar com as coisas da rede e faremos tudo isso. Tudo bem Mas foi um grande sucesso nessa parte, e espero que você tenha aprendido algumas coisas. Tudo bem, agora que sabemos que podemos nos conectar à API e recuperar dados dela, estamos prontos para iniciar nosso projeto real de código X para o aplicativo Na próxima lição, iniciaremos um novo projeto de código X. Vamos armazenar a chave da API com segurança. Vamos começar a refinar algumas telas, bem como alguns dos componentes que precisaremos para o aplicativo Tudo bem, te vejo lá. 3. Aula 03: como criar o projeto Xcode, visualizações e modelos: Na última lição, podemos nos conectar à API de dados do YouTube e recuperar dados dela Nesta lição, vamos configurar nosso projeto de código X e todas as visualizações e modelos. Tudo bem, vamos mergulhar. Primeiro, vamos começar com uma pequena visão geral de como nossas visões serão apresentadas. Também quero explicar como será a aparência do nosso modelo de dados, especialmente quando interagirmos com a API de dados do YouTube. Então, primeiro, vamos começar com a visualização inicial, conterá uma visualização em guia com visualizações adicionais. Agora, eu sei que nesta demonstração, temos apenas uma guia, mas ela foi configurada com a intenção de que você possa adicionar guias adicionais OK. Portanto, a visualização inicial abrigará a própria visualização da guia. E então a visualização da guia conterá instâncias, uma instância da visualização do feed. E essa é a lista rolável de miniaturas Agora vamos falar sobre como a visualização do feed obterá os dados. Vamos criar um componente separado, vamos chamá-lo de serviço de dados que será responsável por todo o código que interage com a API de dados do YouTube E a razão para isso é que podemos manter tudo em um só lugar, e será mais fácil de manter além de solucionar problemas e depurar Então, quando a visualização do feed for carregada, ela solicitará ao serviço de dados a lista de vídeos a serem exibidos. E então o próprio serviço de dados enviará essa solicitação de rede para a API de dados do YouTube. Então, na lição anterior, quando analisamos o que recebeu retorno, foram duas coisas, na verdade. Havia uma estrutura geral da lista de reprodução e, dentro dela, havia objetos de vídeo individuais, certo? Como dicionários que continham os dados do vídeo. Então, vamos analisar esse JSON em uma única instância da lista de reprodução contendo várias instâncias de vídeo, cada uma representando os dados do vídeo Se você não se lembra ou está um pouco confuso, não se preocupe Quando chegarmos à parte de enviar a solicitação de rede, recuperar os dados e analisá-los no JSO, vou me aprofundar em mais detalhes sobre como cada parte ou parte da JSN se traduz em sobre como cada parte ou parte da propriedades diferentes da instância de vídeo e playlist Então, quando os dados voltarem, veremos uma lista de dados na visualização do feed. Então, em seguida, temos que buscar os da imagem em miniatura do vídeo porque esses dados da imagem não são retornados da API Em vez disso, apenas obtemos URLs para a miniatura do vídeo. Então, vamos usar a imagem assíncrona para ser assíncrona. Isso significa que, em segundo plano, baixe os dados da imagem para exibição. E vamos criar uma exibição de linha de vídeo separada como uma visualização reutilizável E a visualização do feed, que tem um componente de lista, criará quantas instâncias da visualização da linha de vídeo necessárias para quantos vídeos houver. E cada visualização da linha de vídeo terá uma imagem sincronizada, que fará o download da miniatura Tudo bem, agora vamos ter uma visualização de feed que parece muito boa, mas temos que deixar o usuário tocar em um vídeo para ver o vídeo em si, certo? É por isso que vamos criar uma visualização de detalhes do vídeo que deslizará para cima como uma planilha a partir da visualização do feed quando o usuário tocar em uma dessas visualizações de linha de vídeo Dentro da visualização de detalhes do vídeo, mostraremos na parte superior o player de vídeo. E abaixo, mostraremos a descrição do vídeo. E esses dados já existirão. Então, em um alto nível, é assim que o aplicativo vai ficar. Há muito o que aprender aqui. Vamos mergulhar. Tudo bem, vamos criar nosso projeto de código X. Então, vou escolher App em IOS, nomear esse aplicativo de API do YT e garantir que a linguagem Swift I das interfaces seja Swift. Não precisamos de nenhuma opção de armazenamento. Não precisamos de nenhum teste no momento. E vou simplesmente criar isso no meu desktop, e não verifiquei o controle de origem. Vou mudar isso para o simulador, que possamos iniciá-lo no simulador e não no meu dispositivo Agora podemos começar. A primeira coisa que quero fazer é abrir o diagrama novamente. Temos algumas coisas distintas. Eu gosto de separar as coisas em pastas aqui. Temos nossas visualizações, que são visualização inicial, visualização feed, visualização de detalhes do vídeo e visualização de vídeo, e então temos o serviço de dados, que é um auxiliar separado, se você quiser, e então temos essas que representam nossos dados Esse seria nosso modelo ou modelo de dados. Ok, então vamos continuar e criar essas pastas em nosso projeto Xcode Então, uma coisa que eu gosto de fazer é renomear isso Então, você sabe, quando chamamos o projeto de aplicativo YT API, isso se traduz nesse identificador de pacote, YT API. Mas o ponto de entrada é que eles sempre adicionam o aplicativo no final, então uma maneira fácil fazer isso é clicar com o botão direito do mouse e refatorar, e você pode alterar tudo no mesmo lugar Talvez você queira fazer algo assim. Talvez o chamemos apenas de aplicativo da API do YouTube. Isso o renomeou em vários lugares diferentes. Você pode pressionar o comando B para ter certeza de que ele ainda está sendo construído. Vamos criar a pasta agora. Vou clicar com o botão direito do mouse. Eu vou dizer novo grupo, e vamos chamar isso de Serviços. Em seguida, criaremos outro grupo chamado Ves e, em seguida, criaremos outro grupo chamado modelos. Vamos apenas fazer isso. Tudo bem, então vou eliminar todos os arquivos que precisamos e eliminar significa criá-los talvez adicionando algum código inicial, mas nem vamos fazer isso Vamos apenas criar os arquivos e, em seguida, nos concentraremos em criar todos os andaimes Então, vamos chamar isso de serviço de dados, certo? Então, vamos criar isso lá. E vamos criar essa estrutura inicial. Então, para as visualizações, vamos dizer novo arquivo, vou escolher a visualização Swift DI. Em primeiro lugar, há a visão inicial. Mas a visão inicial é essencialmente como se tivéssemos uma vista aqui. Por que não usamos este como vista inicial? Vou arrastar isso para a pasta de visualizações e vou renomear isso novamente. Refatore, renomeie e chamaremos isso de visualização inicial Eu não renomeei este. Depois, também temos a visualização do feed. Lembre-se de que este contém a visualização da guia. Assim, podemos criar um novo arquivo. Visualização rápida de I, visualização de feed. Então, também teremos a visualização do vídeo. Também teremos uma visualização detalhada do vídeo. E então a visão inicial. Vamos mudar isso para uma visualização de guia. A visualização da guia conterá uma instância da visualização do feed. Essa é a estrutura básica do nosso projeto. Vamos criar os dois modelos agora. Esses serão arquivos rápidos porque não são visualizações. Então, um é o vídeo. Eu vou criar o st. E então vamos criar outro para a playlist. Vamos abrir o diagrama por um segundo e verificar se temos tudo. Temos a visualização inicial, que contém a visualização em guia, contém uma instância da visualização do feed. A visualização de detalhes aparecerá como uma planilha na visualização do feed. Criamos a visualização da linha de vídeo, que estará dentro de um componente de lista ou exibição de lista, na visualização de feed. Temos o serviço de dados que criamos e, em seguida, o vídeo nos modelos da playlist. Estamos prontos para começar a implementar algumas dessas coisas na próxima lição. Uma coisa que eu recomendaria é se você está realmente tentando aprender algumas dessas coisas, é melhor acompanhar e experimentar em seu próprio computador ou laptop. Basta abrir o código X, iniciar o projeto e acompanhar o melhor que puder. Você sempre pode baixar o projeto se tiver dificuldades. Vou deixar o link na descrição abaixo para baixar o projeto. Tudo bem. Agora que temos nosso projeto Xcode e todas as visualizações e modelos analisados, podemos começar nosso serviço de dados, e faremos isso no próximo vídeo Te vejo lá. 4. Aula 04: como enviar a solicitação de API: Lição, vamos nos conectar ao EPI de dados do YouTube para recuperar E adivinha? Como já fizemos isso em um projeto de demonstração, isso deve ser bem simples A única diferença é que, desta vez, vamos armazenar a API de forma segura Vamos direto ao assunto. Primeiro, vamos analisar o ponto final que vamos atingir com nosso aplicativo. Então, na API de dados do YouTube, vou criar um link para este documento abaixo, caso você tenha perdido a referência a ele. Vou acessar esses itens da lista de reprodução do endpoint. Essencialmente, queremos listar todos os vídeos de uma determinada lista de reprodução. Agora, essa é a URL e será um tipo de solicitação get e os parâmetros necessários, então é isso que devemos especificar. Vai ser um desses. Que nível de detalhe você deseja para os itens de vídeo que são retornados na resposta? E por meio de meus testes na criação desta demonstração, chego à conclusão de que o snippet é o que você precisa Agora, ele não diz exatamente o que está incluído em cada um deles. Talvez haja documentação adicional que você possa pesquisar em algum lugar. O que você pode fazer está na lição anterior, quando testamos o uso da API Você pode simplesmente experimentar todos esses parâmetros, ver o que recebe de volta e ver o que precisa. Agora, o que você deve ter como objetivo é recuperar o mínimo de dados possível e, ao mesmo tempo , satisfazer o que você precisa fazer porque você nunca quer retornar mais dados porque isso exige mais largura de banda, leva mais tempo, e por que você faria isso? Snippet é o que precisamos . Ele conterá a descrição do título, os URLs das imagens do vídeo, e isso é praticamente tudo o que precisamos para ser honestos Agora, de acordo com essa documentação, esse é o único parâmetro necessário. No entanto, ainda precisamos especificar o ID da lista de reprodução. Caso contrário, quais vídeos vamos receber de volta. Precisamos dizer ao YouTube que essa é a lista de reprodução para a qual eu quero recuperar os vídeos. Foi isso que me confundiu no começo. Pensei em colocar o ID da playlist lá, mas não, você coloca lá. Esse é o ponto final que vamos atingir. Agora, em termos da ApiKey que precisamos passar, você deveria ter se inscrito nela na primeira lição Caso contrário, basta voltar para a Lição 1, analisar esse processo e se inscrever em sua própria API K. Agora, vamos entrar no código X e ver como podemos armazenar com segurança essa API K. Primeiro, quero falar sobre o que significa armazenar sua API K com segurança, porque existem muitas maneiras diferentes de fazer isso e Primeiro, vamos falar sobre não proteger a API, que o que fizemos quando estávamos demonstrando Logo na lição anterior. Então, codificamos a API diretamente no projeto de código X, e isso é ruim porque você pode acidentalmente compartilhar seu projeto com alguém ou colocá-lo no Então, se você não está familiarizado com o controle de código-fonte como o GitHub, é uma forma de uma equipe colaborar, várias pessoas trabalharem na mesma base de código Então, se ele assumir o controle do código-fonte, especialmente se for um projeto de código aberto ou quem sabe quem tem acesso a ele? Sua chave está aí, e qualquer um pode pegá-la e abusar dela. Então é isso que você não quer. Agora, um nível de sofisticação ou proteção é colocar essa chave de API em um arquivo externo Você não o inclui diretamente no projeto Xcode, mas ele fica em um arquivo diferente e, em seguida, você faz com que seu projeto Xcode leia a chave desse Dessa forma, quando você coloca seu projeto no GitHub, como você pode ver neste diagrama, a chave não combina com ele A chave permanece nesse arquivo no seu computador e, em seguida, você precisa compartilhar manualmente esse arquivo externo com a chave para quem precisa acessar, ou essa pessoa obtém sua própria chave de API e a coloca no arquivo de configuração e a combina com o projeto de código X. Agora, o problema com esses dois métodos é que em última análise, seu projeto de código X ainda precisa da chave de API. E a razão para isso é porque estamos fazendo as chamadas de rede para a API diretamente do nosso projeto ou aplicativo. Nosso projeto precisa da chave para acessar e se autenticar nessa API. Não há como contornar isso. Seu projeto EXCO precisa conhecer a chave. Se você pensar na App Store, quando seu aplicativo é baixado, certo, esse pacote baixado tem tudo de que precisa para funcionar, incluindo a chave de API, porque, em última análise, seu aplicativo usará a chave de API para se conectar a qualquer API que seu telefone ou aplicativo use Ainda assim, se alguém se esforçar o suficiente e souber o que está fazendo, provavelmente conseguirá extrair a chave desse pacote. Em última análise, a maneira mais segura de fazer isso seria nem mesmo fazer as chamadas de API do seu aplicativo. Você configuraria sua própria API e seu aplicativo faria solicitações à sua API, e é sua API que tem a APIK, que então acessa a API de terceiros Neste exemplo, isso seria a API do YouTube. Em seguida, ele recuperaria os dados da API do YouTube e, em seguida, retornaria esses dados ao aplicativo. É quase como um intermediário, que tem acesso à chave Dessa forma, o cliente, que é seu aplicativo, nunca verá a chave. Então, o que você pode fazer é fazer que o aplicativo tenha seu próprio sistema de conta usuário, no qual o usuário precisa se inscrever e se autenticar para acessar sua API Você pode ver até onde você pode levar isso, realmente depende, eu acho, para mim, depende de quantas pessoas estão usando seu aplicativo. E como é fundamental que essa chave de API nunca caia nas mãos erradas. No mínimo, devemos colocar a chave da API em um arquivo externo e não dentro do código rígido do projeto Essa é apenas uma boa prática ao criar seu aplicativo. Agora, em termos de configurar seu próprio software e fazer com que seu aplicativo nunca use a chave de API para mim, isso é uma fase posterior. Digamos que seu aplicativo ganhe força, e muitos usuários o usam, apareçam no noticiário, e eles acham que pode haver o risco de alguém atacar seu aplicativo, talvez a concorrência ou qualquer outra coisa, segmentar seu aplicativo para tentar derrubá-lo porque sua empresa decolou Acho que é um bom problema, e então você pensaria como posso tornar meu aplicativo mais seguro e depois passar por esse processo de configuração de sua própria API. Eu queria passar por tudo isso para que você pudesse entender o que significa proteger sua chave de API. Nesta lição, mostrarei como colocar sua chave de API em arquivos externos. Aqui estão as etapas pelas quais vamos seguir. Vamos criar um arquivo de configuração em nosso projeto de código X e adicionaremos a chave a ele Vamos configurar o projeto para usar esse arquivo de configuração e vamos definir uma variável especial em nossa lista P para referenciar essa chave de API E não vamos fazer as etapas quatro e cinco porque não estamos lidando com controle de código-fonte neste projeto. Mas as etapas quatro e cinco são as etapas que você deseja realizar se estiver colocando esse projeto no controle de código-fonte porque o arquivo G ignore lista todos os arquivos que não devem ser colocados no controle de origem. Essencialmente, ele não deve ser enviado para o Git Hub. Etapas quatro e cinco, essas são coisas que você definitivamente quer fazer se estiver colocando esse projeto no controle de código-fonte ou no GitHub e estiver trabalhando em equipe Se você está curioso sobre como isso é feito, eu gostaria de pesquisar no Google como usar um arquivo G ignore, e ele está literalmente listando seu arquivo de configuração como o nome do arquivo dentro desse arquivo G ignore, que é essencialmente apenas o arquivo de texto E você inclui esse arquivo G ignore no seu projeto de código X. E então, quando você coloca seu projeto no controle de código-fonte, ele lê o arquivo de ignoração do Git e anota todos os arquivos que ele deve excluir, e não colocará esses arquivos no controle de origem Agora vamos mergulhar em nosso projeto Xcode e seguir as etapas um, dois e três Aqui está nosso projeto de código X. Vamos começar adicionando esse arquivo externo. Isso será um arquivo de configuração. Vamos clicar com o botão direito do mouse nessa pasta principal aqui, novo arquivo. No canto superior direito, você verá um tipo de caixa de filtro na configuração, basta configurar. Esse é o arquivo que queremos no arquivo de configurações. Agora, o importante a observar aqui é que você não deseja incluí-lo como parte do alvo aqui. Certifique-se de que isso esteja desmarcado e, em seguida, crie porque não deseja incluí-lo Certo? Agora, você digita API, sublinha a chave em maiúsculas e percebe que isso não é uma variável ou constante Não colocamos nenhuma palavra-chave rápida na frente dela. Isso é mais parecido com um arquivo de texto. Agora é igual, e vamos abrir nossa chave de API. Aí está. Vou copiá-lo e colá-lo lá e salvar o arquivo. Em seguida, vamos configurar nosso projeto de código X para usar esse arquivo de configuração tocando no nó raiz aqui, tocando no projeto e, em Configurações aqui, você pode ver que não há Há dois tipos diferentes de compilações que podemos criar quando estamos desenvolvendo e testando no simulador ou em nossos dispositivos. É o que chamamos simulador ou em nossos dispositivos. É o de compilação de depuração Uma versão de lançamento é quando você cria uma específica para implantar ou enviar para a loja de aplicativos. E isso não contém todas as coisas extras que são usadas apenas na fase de desenvolvimento do aplicativo, como os símbolos do Bug e coisas assim. De qualquer forma, para ambos, D Bug e release build, vamos configurá-lo para usar uma configuração como Ok. Agora, a terceira e última etapa antes de podermos testar isso é atacar os alvos aqui. Vamos entrar em informações. Esta é a nossa lista P, e vamos criar uma chave que podemos usar para referenciar esse valor no arquivo de configuração Então, na parte inferior, pressione mais, e então você vai digitar AP com todas as letras maiúsculas, sublinhar K E y. Pressione Enter e o tipo será string Não sei por que era um P minúsculo , porque acho que havia alguma correção automática Vamos corrigir isso e mudar isso para P maiúsculo E então, quanto ao valor, isso será uma variável dinâmica ou referência, e fará referência à chave da API no arquivo Kfig. Então, o que vamos fazer dentro do nosso código Swift aqui é entrar nessa lista P e pegar o valor dessa chave. E o valor dessa chave está na verdade, apontando para esse arquivo Kfig, que não vamos incluir como parte do projeto quando ele for colocado no controle de origem e todas essas coisas Esse é nosso arquivo externo, como falamos antes. Vamos testar isso. Vamos entrar na visão inicial e vamos falar com um colega. Vamos apenas imprimir a chave da API, ver se podemos referenciá-la. A forma como referenciamos essa lista de pontos de informação P é dizendo bundle main info dictionary, que é nossa lista de informações P. Isso é opcional porque pode retornar NL. Se ele conseguir encontrá-la, então vamos procurar a chave. E vamos tentar recuperar o valor porque ele não tem ideia de qual é o valor Sabemos que é uma corda, é um tipo de corda, então vamos tentar transformá-la em uma corda. E isso é só tentar. Se não puder, provavelmente estará vazio ou nulo. Poderíamos fornecer um valor padrão. Então, sim, se ele não conseguir encontrar nada, vamos imprimir, não consigo encontrar. Ok, para nossa própria depuração. Ok, vamos experimentar isso. Vamos executar isso no simulador e, portanto, está funcionando agora E devemos ver nossa chave de API impressa se tudo estiver de acordo com o planejado. Tudo bem Perfeito. Funciona. Isso está referenciando a lista de informações, procurando essa chave, e o valor dessa chave está referenciando a chave da API do arquivo de configuração Perfeito. Agora, vamos prosseguir com a implementação do serviço de dados, onde enviaremos a chamada de API para a API do YouTube e recuperaremos os dados Então, no arquivo do serviço de dados na parte superior, vamos declarar nossa chave como uma constante privada E vamos chamar isso de chave de API. E vamos lidar com isso exatamente como eu mostrei antes, agrupar o dicionário de informações do ponto principal e tentar procurar a chave de sublinhado da API como string Agora, não vou dar a ele um valor como esse se ele não puder recuperá-lo, porque eu quero que seja NL para que possamos detectar se a API K está presente ou não Em seguida, criaremos uma nova função chamada G videos, que retornará uma série de vídeos. Essencialmente, eu queria devolver todos os vídeos de uma determinada playlist. Vamos fazer disso uma função assíncrona, e explicarei o que isso significa quando chegar a hora de chamá-la, e explicarei o que significam as palavras-chave Async e Por enquanto, por que não retornamos e esvaziamos a matriz de vídeos? Aqui vamos implementar essa chamada de API. Primeiro, verifique se a chave da API está lá e, em seguida, criaremos a URL, criaremos a solicitação, enviaremos a solicitação e , finalmente, analisaremos Isso realmente ajuda o fato de termos feito isso em uma demonstração na lição dois, certo? Então, testamos se isso funciona, sabemos que funciona. Então, vamos dizer que a chave de API de proteção não é igual a NL senão retornar. Podemos retornar uma lista de vídeos vazia porque ela não pode receber nada. Idealmente, o que você gostaria de fazer provavelmente é mostrar uma mensagem de erro ou algo assim para poder retornar algo como tal e, seguida, capturá-lo e exibi-lo na interface do usuário Mas ao fazer o que estamos fazendo aqui, você não está retornando nenhum vídeo. Portanto, o usuário não sabe se realmente não há vídeos nessa lista de reprodução ou se algo deu errado. Mas, claramente, algo deu errado porque não conseguimos obter o APIK, certo? Ok. Chegando até aqui, vamos criar a URL. E antes de criarmos a URL, na verdade, vamos criá-la a partir de uma string, certo? E essa string de URL será mais ou menos assim. Primeiro, vamos voltar à documentação. Então, isso está aqui. E, como mencionei na lição anterior, estamos usando esse ponto final aqui. Vamos recuperar todos os itens da lista de reprodução que receberam uma lista de reprodução Vou colocar isso aí mesmo. Vou codificar essa URL aqui mesmo e vamos adicionar os parâmetros. Um dos parâmetros necessários é essa parte que mencionei antes na lição três. Por que escolher o trecho porque ele contém o que precisamos. Então, a outra coisa que queremos especificar é qual lista de reprodução queremos segmentar para recuperar todos os vídeos Ok. Então, a maneira de descobrir isso é que vou escolher minha própria playlist. Você pode escolher a playlist que quiser. Mas se você acessar o canal de alguém e acessar a playlist, verá todas as playlists aqui Vou clicar nesta , sua playlist completa. E é só essa identificação aqui. Se você clicar duas vezes nele, você destacará tudo. Eu vou copiar isso e vou colar isso lá. E a última coisa que você precisa adicionar é a chave. Então, vamos dizer que a chave é igual a, e vamos inserir isso aqui, a chave da API. E já verificamos que não é prego, então vamos apenas forçar e enrolá-lo aqui. Agora podemos criar a instância de URL a partir dessa string, agora podemos criar a solicitação. Vamos fazer essa solicitação de URL, e vamos fazer isso a partir desta aqui. Vamos passar a URL. Na verdade, este retorna um opcional. Isso pode ser NL. Vamos dizer que, se URL for igual a URL, apenas para verificar se não é NL Vamos colocar todo esse código aqui que só é executado se conseguirmos criar com sucesso uma instância de URL, então faremos isso lá Então, enviar a solicitação é uma questão de usar a sessão. Se dissermos, vamos criar outra constante aqui só para deixar as coisas mais claras. Sessão de URL compartilhada. Isso é apenas dividir as coisas para que seja mais fácil para você entender. E se você olhar para este, que é o que vamos usar, os dados recuperam os dados de uma determinada solicitação de URL, que criamos aqui, e é um método assíncrono e também pode gerar erros Então, temos que abordar essas duas coisas. A terceira coisa que quero que você observe com esse método é o que ele retorna para você. Ele retorna uma tupla. Portanto, ele tem dois dados. Ele tem dados, que são os dados reais retornados pela API, e um objeto de resposta, que você pode examinar em busca de erros ou do código de status e coisas assim. Então essa é a resposta real, e esses são os dados separados em seu próprio parâmetro. Nós também vamos lidar com isso. Mas primeiro, vamos fazer as coisas uma de cada vez. Vamos lidar com a parte T throws, depois vamos fazer Async e depois vamos lidar com os dados que são retornados Lança. Vamos repassar a solicitação. Se chamar um método pode gerar um erro, temos que detectá-lo, e o mecanismo no Swift para fazer isso é parecido com este. Você faz algo que pode gerar erros, que é essa linha de código. Você precisa colocar uma palavra-chave tri na frente dela, então vamos tentar fazer isso Então você também precisa ter um bloco de captura. Isso é exibido, ou você pode lidar com quaisquer erros que sejam lançados se forem lançados. Vamos apenas imprimi-lo. Assim, referenciaremos o erro que é descartado. Em seguida, vamos lidar com o fato que esse é um método assíncrono Para chamar o método assíncrono, significa que ele é chamado em um thread em segundo plano ou em um trabalhador em segundo plano Então, imagine-se encarregando outra pessoa de fazer o trabalho, como se estivesse dando uma tarefa a outra pessoa e fazendo com que essa pessoa fizesse a tarefa e voltasse para você quando terminar Você precisa colocar a palavra-chave await, que significa que você vai esperar que essa pessoa, aquele trabalhador em segundo plano, volte com a tarefa concluída antes de continuar e executar o resto das linhas de código abaixo dela Então é isso que vai acontecer aqui. Agora, eu quero explicar, mesmo que ele espere que o trabalhador em segundo plano faça essa tarefa e volte antes de executarmos as próximas linhas de código, ainda é bom porque, enquanto esperamos que a tarefa em segundo plano volte, podemos lidar com qualquer tipo de interação do usuário e também podemos fazer outras coisas antes de executar as próximas linhas de código Só que a palavra-chave await diz ao sistema não execute as linhas três e abaixo até que o funcionário em segundo plano volte E para coisas assim, você deve enviá-la como uma tarefa em segundo plano, porque se você tiver o encadeamento principal, que é o encadeamento principal que está executando esse código, faça esse trabalho, não haverá um trabalhador para lidar com toda a interação do usuário e outras coisas E então vai parecer que está congelado. Então essa é a essência disso. Com qualquer tipo de tarefa, como solicitações de rede ou consultas de banco de dados, você verá quando fizermos o download das miniaturas Também vamos enviar isso como um profissional de segundo plano para fazer isso. Então, isso é usar as palavras-chave Async e await. O fato de ser um método assíncrono também entrará em jogo quando tivermos a chamada Feed View para obter o vídeo Você verá como usamos a palavra-chave A weight Ok. Então, espero que isso faça sentido. Caso contrário, eu recomendaria que você mergulhasse um pouco mais no Async e Pesquise alguns tutoriais adicionais sobre Async e um peso no Swift, para que você possa entendê-lo um pouco mais de detalhes do que temos tempo para Então, lidamos com o fato de que isso gera um erro. Lidamos com o fato de ser um método assíncrono, significa que um trabalhador em segundo plano o executará Agora temos que lidar com os dados que retornam, e é uma tupla, certo? Então, vamos declarar nossa própria tupla para rastrear esses dados Vamos declarar uma constante de tupla. Vamos dizer dados e resposta. Você notará que esse formato se parece com o que vimos esse método retornar. Vamos dizer que é igual a isso. Então, se nenhum erro for gerado, quando o trabalhador em segundo plano voltar, ele atribuirá os dados a isso e atribuirá a resposta a isso. E então, a partir daqui, podemos analisar os dados. Agora, antes de realmente analisarmos os dados, vamos tentar enviar essa solicitação e examiná-la dentro do Proximan para ter certeza de que está acontecendo examiná-la dentro do Proximan para ter certeza de que está Então, o que vamos fazer primeiro realmente disparar essa solicitação. Então, dentro da visualização do feed, aqui mesmo, por que não dizemos não aqui, mas vamos usar a tarefa. Deixe-me explicar o que é isso. A tarefa é um modificador que permite executar um bloco de código assíncrono Deixe-me colocar isso nos termos de Layman. Quando a visualização do feed aparecer, ela executará esse código dentro desse bloco de tarefas como um trabalhador em segundo plano. Vamos dizer que vamos criar uma propriedade aqui para armazenar os vídeos, e essa será uma propriedade do estado. Deixe-me explicar o que isso significa também. No início, será uma matriz vazia. Caso você não tenha assistido minha série de oito dias para iniciantes, onde expliquei quais são as propriedades do estado Essencialmente, quando esse valor muda, queremos que a interface do usuário seja atualizada. Isso começa como uma matriz vazia, não há vídeos. Mas quando enviamos a tarefa do serviço de dados para recuperar os vídeos, ela volta e, em seguida, coloca as instâncias de vídeo nessa matriz Queremos que a interface do usuário seja atualizada e mostre esses vídeos É por isso que isso é propriedade do estado. Vamos iniciar essa tarefa. Vamos criar uma nova instância de serviço de dados e eu vou encadeá-la assim. Vou ligar para pegar um vídeo. Isso deveria ser um S. Vamos mudar isso. Isso deve ser obter vídeos e observar que é um método assíncrono E ele retorna uma lista de vídeos. Então, assíncrono significa que teremos que enviá-lo como uma tarefa em Teremos que esperar que isso volte antes de executar o código abaixo Vamos dizer que deixar vídeos é igual a isso, o retorno à lista de Vamos chamar isso. Vamos chamar isso de vídeos devolvidos. Em seguida, vamos atribuir os vídeos de retorno à nossa propriedade estadual aqui. Vídeos autodidatas são iguais a vídeos retornados. Definitivamente, podemos encurtar isso, mas eu queria dividir isso em duas linhas para explicar o fato de que essa linha de código não será executada até desapareça e retorne com os dados por causa dessa palavra-chave await Enquanto o funcionário principal espera que o funcionário em segundo plano recupere os dados, ele ainda pode lidar com interação do usuário e outras coisas que ele precisa fazer É por isso que as maravilhas da ACN podem esperar. Podemos encurtar isso simplesmente colocando isso assim e eliminando até mesmo a necessidade disso Tudo bem, mas achei que escrever assim explicaria um pouco melhor a palavra-chave await Então, da forma como o configuramos agora, se executarmos isso no simulador, ele deve executar isso e, em seguida, enviar a solicitação de rede E se nossa API estiver correta e nossa solicitação estiver estruturada adequadamente, devemos obter uma resposta. Então, vamos abrir o Proximan. Vamos dar uma olhada, ver isso em ação. Vou primeiro executar isso no simulador para que apareça na nossa lista Aí está. Vou fixar este na parte superior e vou ter que reenviá-lo Olá, mundo, envie. Tudo bem O código de status é verde, deve ser 200, 200, e recuperamos os dados aqui. Você pode ver que o elemento raiz contém uma matriz de itens. Esse elemento raiz, nós o representamos com nosso modelo de playlist. Vamos modelá-lo a partir disso. Então, quanto aos itens, esses são os vídeos individuais, que estamos representando com instâncias de vídeo. Obviamente, ainda não o preenchemos, mas é isso que vamos fazer. Se você abrir um desses vídeos, verá que ele tem o trecho, que é o que pedimos na solicitação da API, e contém as miniaturas, o título, a descrição e o ID do vídeo também é algo Então, dentro do ID do recurso, aqui está o ID do vídeo. Então, esses são todos os detalhes de que precisamos. E dentro das miniaturas. Você pode ver que tem tamanhos diferentes de miniaturas. Cada tamanho tem um URL diferente. Tudo bem, acho que estamos na metade do caminho. Agora, com a solicitação sendo enviada e os dados retornados, tudo o que precisamos fazer é analisar esses dados JSON em instâncias de vídeo para que possamos exibi-los E vamos fazer isso na próxima lição. Te vejo lá. 5. Aula 05: analisando os dados JSON em vídeos: Nesta lição, vamos transformar esses dados JSON retornados pela API em instâncias de vídeo para que esses dados JSON retornados pela API em instâncias de vídeo para possamos exibi-los em nossa visualização de feed. Vamos nos distrair. A primeira etapa é preencher as propriedades de nossos modelos de dados acordo com a resposta que obtemos da API de dados do Tube. Vamos dar uma olhada novamente no Pxy Man, e essa ferramenta é muito útil, especialmente porque você pode simplesmente enviar a solicitação, ver a resposta e obter essa visualização em árvore e, em seguida, analisá-la assim Às vezes, a documentação terá a resposta, então essa é a API de dados do YouTube. Eu conheço a API Epler, se você usar isso e testar a solicitação, poderá ver a resposta Aqui, isso te dá uma ideia. Sim. Então, se você não quiser usar o Proxy Man para dar uma olhada, você também pode ver isso. Esse seria o objeto ou instância da playlist e esses seriam os itens. Cada item é um vídeo. Se você clicar nele, verá que essas são as propriedades do vídeo. Na verdade, vamos usar isso porque o texto é maior do que o que temos aqui no Proxy Man. Vamos começar com o vídeo em si. Então, vamos adicionar o protocolo decodificável, e isso nos permite transformar os dados JSON em instâncias de vídeo usando o decodificador JSon instâncias de vídeo usando Então, vamos abrir a documentação da API. O que estou vendo agora é um único vídeo. Assim, podemos ver que ele tem um ID, que é uma string, e isso será útil para nós porque queremos colocar essas instâncias de vídeo uma lista de DUI do Swift e ele precisa ser capaz de identificar entre vídeos diferentes Então, vamos escolher as propriedades que queremos analisar, essencialmente Então, haverá um ID de string. Em seguida, haverá um trecho e, dentro, um título Vai ser uma descrição. Precisamos de ambas, e essas são cordas. E então também haverá miniaturas. Primeiro, vamos nos concentrar no título e na descrição. Novamente, essa é uma propriedade de trecho, e o trecho em si, você pode ver esses colchetes, que representam uma instância, estrutura ou objeto diferente , como você quiser chamá-lo Tudo isso representa a mesma coisa. Vamos dizer que o trecho será, vamos me dar um tipo de Vou tornar isso opcional caso não exista. Sim, trechos e não trechos. Posso ter certeza de que a propriedade é a mesma e vou criar outra estrutura aqui chamada snippet, que também será decodificável Dentro do trecho é onde eu colocaria o título e O. Quero dizer, todos os vídeos devem ter um título e uma descrição, mas caso não tenham, você pode torná-los opcionais. Por enquanto, eu não vou, vamos ver o que acontece. Então, dentro do trecho, temos miniaturas. O que mais precisamos aqui? Precisamos da identificação do vídeo. Vamos lidar com isso antes das miniaturas porque há muitas aqui com Vamos fazer o ID do recurso. Vou soletrar com letras minúsculas assim. Vamos fazer isso. Então, aqui, vou criar outra estrutura chamada ID de recurso que é decodificável O ID do recurso, bem, o único em que estou realmente interessado é o ID do vídeo, e é uma string. Eu sei que todos os vídeos devem ter um ID de vídeo. Vamos lidar com as miniaturas. Eram miniaturas com um S? Isso estava dentro do trecho. T miniaturas com um S sim, então isso em si é coisa própria. Temos que definir isso. Vamos chamar isso de miniaturas. Vamos criar outro stru chamado miniaturas, e isso também será decodificável O que eu preciso aqui? Vamos digitar. Vamos dar uma olhada no proximan aqui para ver uma resposta real Temos o trecho aqui e, em seguida, temos miniaturas aqui. Vamos abrir isso. E existem vários diferentes, padrão médio padrão alto máximo é. Então você pode experimentar esses diferentes. Todos esses tamanhos de arquivo são diferentes. Você provavelmente não gostaria de comprar este como se fosse o maior, a menos que você o estivesse exibindo em um iPad, ou talvez queira que seja bem claro. Quando eu estava criando minha demonstração, fiquei muito feliz com o Medium. Então é isso que eu vou escolher. Na verdade, o médio é quase o menor. O padrão é bem pequeno. Então, isso é quase o dobro desse tamanho. Mas eu me lembro porque eu sou médio é porque a proporção é diferente. Então você pode ver que são cerca de Sim, a proporção era um pouco diferente. Alguns deles parecem mais quadrados e alguns parecem mais um tipo de tela ampla. Então, descobri que, depois de experimentá-los, esse meio era o que exibia bem, então foi isso que eu Sim. Então, eu vou dizer muito médio. E qual é o tipo? O tipo em si é outro objeto. Então, vou ter que criar algo para isso, exatamente como estão essas três propriedades. Essa é uma corda. Este é um int, e este também é um int. Então, vamos criar um tamanho de miniatura de suporte. Isso é decodificável para qual é o URL. Como aquele acordo de altura. Então, este terá apenas o tamanho de uma miniatura. Eu tenho tudo o que preciso? Eu tenho a imagem em miniatura, URL, eu tenho o ID do vídeo Isso é para o player de vídeo. Então eu tenho o título e a descrição. Eu acho que é isso. Perfeito. Em seguida, voltando para fora. Este é um único vídeo que remonta a uma etapa. Esta é a lista de músicas. A lista de reprodução tem e itens, que são uma variedade dessas instâncias de vídeo. Se eu for à playlist, vamos garantir que ela também seja decodificável e que queremos itens. Assim. Além disso, precisamos adicionar identificável, que nos permite usar uma matriz disso na lista de DUI do Swift, e temos a ideia pronta para o protocolo identificável, porque é isso que isso requer E acho que estamos bem agora. Vamos tentar analisá-lo. Vamos entrar no serviço de dados e continuar analisando os dados Vamos criar um decodificador JS. C. E então vamos dizer decodificar decodificar um certo tipo de Vamos decodificar os dados a partir daqui e vamos decodificá-los em uma instância da lista de reprodução Estamos passando a lista de reprodução como um tipo e, portanto, temos que adicionar dot self. É assim que você especifica um tipo. Ah, esqueci de ressaltar que esse método de decodificação pode gerar erros Está pedindo que você tente. R: Podemos colocar a tentativa aqui , pois ela já está em um bloco D. Isso é perfeito. Não precisamos fazer outro, menos que você queira lidar especificamente com esse erro versus esse erro. Mas tenho certeza de que você pode se diferenciar aqui quando o pega Vamos capturar o resultado dessa decodificação. Deixe a lista de reprodução ser igual a isso. Então, como você sabe, nossa instância de lista de reprodução tem itens, que são os vídeos. É isso que vamos tentar devolver. Porque lembre-se de que esse método aqui retorna vídeos de cenários. Tudo bem Vamos ver como isso funciona. Vamos voltar às nossas opiniões e verificar o que estamos fazendo aqui. Vou definir um ponto de interrupção aqui tocando aqui, que pausará a Vamos adicionar um pouco mais antes de executarmos isso. Dessa forma, podemos ver visualmente algo no simulador. Vamos usar uma lista de DUI do Swift e vamos passar os vídeos. Porque o suporte de vídeo é identificável, então está tudo Isso significa que podemos usá-lo nesta lista e, em seguida, usaremos i para cada vídeo. Vamos apenas fazer o título do trecho. Se for NL, basta dizer título. Deixe-me fazer isso. Vamos ver se conseguimos ver alguma coisa surgindo. Oh, foi tão rápido. Mas pudemos ver o representante desculpar a solicitação de saída, a resposta retorna com cinco itens e, com certeza, vemos cinco itens aqui Agora, eu esperava ver mais porque nossa playlist na verdade tem cerca de oito vídeos ou nove vídeos aqui, dez vídeos, na verdade. Deixe-me dar uma olhada aqui. Acho que, por padrão, sim, o valor padrão para resultados máximos é cinco. Então, isso é algo que você também vai querer definir. Vamos mudar isso em nosso serviço de dados. O que foi que Max resulta Capital R. Vou acrescentar isso aqui. O máximo de resultados é igual a 20, digamos. Isso está nos dizendo que nunca verificamos a resposta, então podemos simplesmente ignorar isso adicionando um sublinhado Não precisamos nomear isso. R. Vamos executá-lo novamente. Aconteceu tão rápido lá. Nós temos tudo. O que fizemos aqui hoje analisando a JSO analisando a resposta e, em seguida, mapeando resposta e, em seguida, mapeando esses pares de valores-chave e criando essas propriedades em nosso modelo de dados Isso é algo muito comum de se fazer. Portanto, é melhor se familiarizar com esse processo se você quiser trabalhar com diferentes APIs no futuro. Tudo bem Agora que temos as instâncias de vídeo aparecendo na visualização do feed, a parte difícil está feita, acredite ou não. Agora, tudo o que precisamos fazer é mostrar as imagens em miniatura na visualização do feed, e faremos isso na próxima lição Te vejo lá. 6. Aula 06: como obter miniaturas de vídeo e estilo: Na última lição, analisamos os dados JSON retornados pela API do YouTube em instâncias de vídeo que estamos exibindo em nossa visualização de feed Agora, o problema é que não temos miniaturas de vídeo para mostrar, e vamos corrigir isso nesta lição Vamos fazer isso. Veja o que temos até agora com nossa visualização de feed. Vamos limpar isso um pouco. Vamos entrar na visualização de feeds, e a primeira coisa que vou fazer é mudar o estilo da lista para plano. E então também vamos remover o indicador de rolagem. Então, vamos aos indicadores de rolagem. Nós vamos esconder isso. E já deve parecer um pouco melhor. Perfeito. Em seguida, removeremos esses separadores entre cada item, porque serão imagens, miniaturas No texto aqui, vou dizer que a visibilidade do separador de linhas está oculta A outra coisa é lembrar como temos uma visualização por guia na visualização inicial. Vamos adicionar esse ícone de guia ali mesmo. Na visualização inicial, podemos remover isso em um par, exibir nossa chave de API e adicionar um item de guia Aqui, vamos colocar uma imagem, e isso vai ser um ícone, símbolos SF, e vamos usar pilha Esse, jogue square stack. Vamos ver se consigo colocá-lo ali mesmo. Acabei de fazer tudo por mim. Em seguida, o texto será alimentado. Isso já vai parecer muito melhor. Agora, vamos dar uma olhada na exibição dessas imagens usando nossa visualização de linha de vídeo. Em vez de exibir um texto com o título, vamos querer criar instâncias de visualização de linha de vídeo. Mas precisamos passar o vídeo para a visualização da linha de vídeo. Caso contrário, essa visualização não terá nada com que trabalhar. Por que não criamos uma propriedade aqui que precisará ser passada E para esse propósito, talvez façamos isso. A partir de, eu não quero criar tudo isso. Vou apenas cortar a prévia em si. OK. E vamos voltar para a visualização do Feed, e vamos passá-la aqui. Veja, agora isso exige. Vou apenas passar o vídeo que ele está tentando exibir. Agora, na exibição da linha de vídeo, vamos exibir a imagem. Agora, lembre-se de que temos o URL para a imagem em miniatura. Está dentro do trecho de pontos do vídeo, miniaturas, ponto médio do URL. Isso é uma string. Basicamente, precisamos acessar esse URL para baixar os dados da imagem e, em seguida, exibir os dados da imagem dentro de uma imagem do SwiftUI Felizmente, para nós, o SwiftUI torna isso muito fácil usando uma imagem de sincronização, qual você simplesmente passa um URL e ele faz isso de forma assíncrona e ele faz isso Ele enviará um trabalhador em segundo plano para acessar essa URL, buscar os dados da imagem, voltar e exibi-los dentro de uma imagem Vamos usar este porque ele nos dá uma referência à visualização de imagem da interface do usuário do Swift, que nos permite adicionar alguns modificadores adicionais se quisermos ajustar os cantos, ajustar a proporção, podemos fazer espaço reservado permite que você especifique o que mostrar enquanto o trabalhador em segundo plano está pegando os dados da imagem Vamos mostrar um spinner. Obviamente, o URL é onde ele deve ir para recuperá-lo. Agora, como tudo isso é opcional, talvez não tenhamos um URL de imagem, então precisamos verificar isso primeiro. Então, vamos dizer, se let URL for igual, e vamos tentar criar uma instância de URL a partir dessa string Se for possível criar isso, passaremos isso para a visualização de chamada de imagem assíncrona ou desculpe como um parâmetro É aí que vamos passar isso. O que é a string de novo? Bem, são miniaturas de trechos de vídeo, URL médio. Se não existe, então não existe. Então não podemos mostrar uma imagem. Então, o que temos que fazer aqui para fornecer o padrão opcional quando o opcional contém Nil. Seja como for, deve ser uma corda. Então, sim, se alguma dessas partes não for uma URL. Se ele não conseguir criar essa string, vamos simplesmente colocar uma string vazia e tentar criar uma URL, e ela falhará não fará nada disso aqui. Agora vamos definir nossa imagem assíncrona. Vamos usar esse aqui, como eu disse, e vamos passar a URL que foi criada e, em seguida, vamos clicar duas vezes aqui. Este é o. Essa é a referência à imagem que será exibida quando os dados voltarem . Essa é a imagem exibida. Esse espaço reservado, que temos outra visualização rápida e útil da interface de usuário que podemos usar, é a visualização de progresso, que será apenas uma janela Com relação a essa imagem aqui, definitivamente queremos adicionar alguns modificadores a ela, por exemplo, redimensionável, para que ela possa ser ampliada ou reduzida, e queremos manter a proporção Então, o que eu gosto de usar depende das circunstâncias. Por que não tentamos preencher por enquanto? E veremos o que acontece. Vamos também dar um canto um pouco arredondado. Vamos fazer o formato de clipe. Vamos dizer que o raio do canto retangular arredondado é dez Agora vamos ver se isso funciona. Vamos voltar para a alimentação, basta verificar. Ele criará instâncias de revisão de vídeo e transmitirá o vídeo, e então isso deve baixar as imagens. Na verdade, não estamos mostrando os títulos aqui. Tudo bem? Bem, isso foi bem fácil. Você tem que admitir, desse jeito, nós temos isso. Se você quisesse exibir os títulos, você poderia exibi-los, os títulos não dependem da imagem, certo? Então você pode colocar tudo isso dentro de uma pilha V e depois colocar o título embaixo, Então, poderíamos tentar fazer isso aqui. E esse seria o título. Título do vídeo, e então podemos até mesmo torná-lo em negrito. Não é título? Oh, desculpe, recorte o título Se não existir, mostraremos uma string vazia. Podemos alinhar, podemos adicionar um pouco de preenchimento, por exemplo. À esquerda, e então você pode adicionar apenas um pouco de preenchimento geral ou talvez apenas na vertical OK. Os cantos são um pouco arredondados demais para o meu gosto Então, vamos fazer apenas cinco. Tudo bem. E é assim que é fácil fazer isso. Tudo bem, nossa visualização do feed está muito boa. Tudo o que precisamos fazer é permitir que o usuário toque na miniatura para assistir ao vídeo Isso é o que faremos na próxima lição. Te vejo lá. 7. Aula 07: visualização de detalhes do player de vídeo e do vídeo: Na última lição, terminamos a visualização do feed. Nesta lição, vamos permitir que o usuário toque na miniatura para mostrar a visualização detalhada e assistir ao vídeo Vamos direto ao assunto. Então, já detalhamos a visualização detalhada do vídeo Vamos começar acionando isso e mostrando isso como uma pasta quando o usuário toca em um vídeo. Como vamos fazer isso? Portanto, há uma planilha que você pode vincular a uma propriedade. Aqui em cima você pode definir, o que vamos definir como vídeo selecionado. Quando o usuário toca em uma linha de vídeo, capturamos esse gesto e definimos a propriedade de vídeo selecionada, que então acionará essa pasta e, em seguida, o conteúdo será o que você deseja mostrar nessa Vamos escolher isso. Vamos criar essa propriedade estadual aqui e chamá-la de vídeo selecionado. Isso vai ser Nil no começo. Vamos nos vincular ao vídeo selecionado. E quanto ao conteúdo, conteúdo. Esse parâmetro armazena o valor disso, que é o vídeo selecionado. Aqui, mostraremos a visualização detalhada do vídeo. Ok. Vamos capturar o gesto de toque nisso Então, com um gesto de toque, vamos definir o vídeo selecionado como V. E vamos ver se Perfeito. Agora, na próxima etapa, vamos passar os detalhes do vídeo para a planilha. Vamos fazer isso na visualização detalhada do vídeo aqui. Vamos aceitar um vídeo. Mais uma vez, vou estragar a prévia. Em seguida, na visualização do feed passaremos agora V, que é o vídeo selecionado. Agora vamos configurar isso um pouco. Teremos uma planilha em que a parte superior está o player de vídeo e a parte inferior é o título na descrição. Então, vamos precisar de uma configuração de pilha V aqui e vamos definir o alinhamento entrelinha, porque isso faz sentido para o texto Teremos nosso reprodutor de vídeo aqui, que vamos acessar, e teremos o título e a descrição aqui. Quero que seja rolável caso o conteúdo seja muito grande. Dentro do scroll V, vou criar outra pilha V. Este também deve estar alinhado à esquerda. Não sei se preciso do primeiro, então. Aqui, eu quero colocar o título na descrição. Isso terá um pedaço de texto e será o título do trecho de vídeo Se isso não existir, colocarei uma string vazia e vou querer criar essa fonte de título única, além de colocá-la em negrito Vou adicionar um pouco de acolchoamento na parte inferior apenas para dar um pouco de espaço Em vez disso, posso realmente adicionar o espaçamento aqui porque há apenas dois elementos aqui Vou adicionar o espaçamento de 30 ali mesmo. Não preciso colocar o preenchimento lá e depois vou colocar a descrição Em vez disso, essa será a descrição do trecho do vídeo. Vamos ver como isso parece. Eu tenho o título. Eu tenho a descrição, mas preciso adicionar um pouco de preenchimento. Vou adicionar o preenchimento à visualização de rolagem. Devo fazer apenas na horizontal? Não, provavelmente vou adicioná-lo em todas as direções. Tudo bem Isso parece um pouco melhor. Oh, indicador de rolagem. Vamos nos livrar disso também. Indicador de rolagem oculto. Ok. Tudo bem Sem indicadores de rolagem. Isso parece bom. Agora, quero passar um momento e falar sobre as opções que temos quando se trata de exibir vídeos do YouTube em nosso aplicativo. Agora, poderíamos usar uma visualização na web e exibir um vídeo incorporado do YouTube. Mas eles também têm uma biblioteca de clientes para usarmos como incorporar vídeos do YouTube em aplicativos IOS com a biblioteca do YouTube Helper Essencialmente, eles estão fazendo a mesma coisa, mas estão fazendo isso porque estão usando um reprodutor i frame. Eles estão facilitando um pouco para você, mas isso usa o objetivo C. Portanto, essa também é uma opção, que é um pouco mais fácil do que mostrar sua própria visualização na web e tentar colocar o player como o código real de incorporação da web A terceira opção que eu explorei foi usar o Tube Player Kit E essa biblioteca funcionou muito bem com Swift. Juan foi muito fácil usar e, honestamente, economizou muito tempo Então, eu nem considerei as outras opções, e é isso que vamos usar com esta demonstração. Portanto, essa biblioteca de Sven parece bastante ativa, como você pode ver aqui, última edição foi encerrada há dois dias e a última solicitação de enquete foi mesclada há cerca de um Como acontece com qualquer biblioteca de terceiros, quando você as usa, você está criando uma dependência do seu projeto Para depender do código de terceiros. E o risco é que esse código de terceiros fique desatualizado, não seja mantido e fique cheio de bugs, e isso afete seu aplicativo Portanto, há uma consideração de risco-recompensa aqui. Por um lado, você pode criar o seu próprio código e, mesmo dependendo dessa biblioteca em si, há um código de terceiros. Quero dizer, fazer o seu próprio seria a melhor coisa, mas isso exigiria mais esforço e mais tempo. vez de usar uma biblioteca de terceiros, você economiza tempo e precisa avaliar se vale a pena correr o risco Nesse caso, foi muito fácil de usar e funcionou perfeitamente na interface do usuário do Swift Parece ativo, acho que o risco é baixo, por isso decidi usar isso. Vamos mergulhar e integrar este kit do Tube player em nosso projeto. Vamos apertar esse botão azul dizendo, use este pacote, e podemos usar o Swift Package Manager para importá-lo diretamente para o nosso projeto. Agora, você sabe como, na Lição 2, criamos um projeto de demonstração para testar o envio de solicitações de rede e recebimento de respostas da API de dados do YouTube. Essa seria uma oportunidade perfeita para fazer o mesmo. Sempre que eu estiver tentando algo novo, inicie um novo projeto ExCo, teste-o, se funcionar, coloque-o em seu projeto principal Eu fiz isso, então não vou passar por isso novo com você e depois passar uma aula extra fazendo isso. O que vou fazer é colocá-lo diretamente no meu projeto principal. Mas, no futuro, quando você estiver trabalhando em suas próprias coisas, estou apenas avisando que talvez você não queira considerar, especialmente porque não estamos usando o controle de origem aqui. Se você está brincando com seu código, importando coisas e estragando alguma coisa, é difícil reverter, certo Então, definitivamente, teste primeiro as coisas em um projeto diferente. Dito isso, vamos importar isso diretamente para o nosso negócio. Então, vá para o arquivo Dependências do pacote de anúncios e eu copiei esse URL Vamos simplesmente inseri-lo ali mesmo, e aí está, o kit do reprodutor UTub Você pode ir em frente e clicar em Pacote de anúncios. E enquanto isso acontece , vamos voltar aqui e rolar para baixo e dar uma olhada em como usamos essa coisa. Então, olhando para este trecho de código, você importa primeiro o kit do UT player e depois cria a visualização do Tube player E parece que você acabou de passar a URL desse jeito. Então, como teste inicial, por que não fazemos exatamente isso? Vamos copiar isso. Nós vamos voltar aqui. Vamos adicionar o pacote. Aí está. Na visualização de detalhes do vídeo, vamos importar um kit de dois jogadores e, em seguida, em player de vídeo, vamos colocá-lo ali mesmo E vamos fazer isso agora e ver o que acontece. É bom, está mostrando um vídeo, mas observe que o quadro é maior do que o espaço que temos. Ela toca. Isso é ótimo. Os controles estão lá. O vídeo em si não parece maior do que o espaço que temos. Parece que está se encaixando na largura. No entanto, parece que há muito espaço preto na parte superior e inferior, porque quando você carrega isso, ele ocupa muita altura. Talvez tenhamos que definir a largura basta definir a moldura para que caiba no espaço que temos. Além disso, não queremos exibir esse vídeo. Por que não tentamos inserir nosso próprio ID aqui dinamicamente? Isso seria recortar. Mas, como você pode ver, há algo errado aqui porque, enquanto estou tentando fazer isso, não está funcionando. O preenchimento automático não está aparecendo. Então, na verdade, não podemos fazer isso dessa maneira. Não podemos simplesmente inserir um curinga em um parâmetro como esse. Por que não damos uma olhada em alguns outros métodos pelos quais podemos usar isso e talvez funcionem para nós? Ok. Então, em última análise, isso é o que acabei usando aqui. Assim, você pode configurar primeiro o player do YouTube dessa forma, onde você pode realmente passar um ID de vídeo dinâmico e, em seguida, usar essa visualização do player de vídeo. Então, vamos copiar isso. Está desligado, vamos configurá-lo aqui. Em seguida, adicionaremos nosso ID lá. Isso seria o ID do recurso do conjunto de vídeos, ID do vídeo. Se isso for Nil, passaremos uma string vazia Não quero que seja reproduzido automaticamente, então vou definir isso como falso Então, com essa configuração, se você voltar a esta página, verá que pode simplesmente passar essa configuração para a visualização do player do YouTube. Sim, então parece algo assim. Isso é o que fizemos. Configuramos algo e, em seguida, podemos passá-lo para a visualização do player do YouTube dessa forma. Esqueci exatamente o trecho de código quando estava examinando Mas, se você reservar um tempo para ler isso, há muito mais coisas legais que eu posso fazer. Mas vou te mostrar como fazer isso aqui. Quando você cria a configuração dessa forma, este é o Tube player, você pode até chamá-lo do tipo, Ok. Em vez de especificar a URL aqui, podemos realmente passar o player do Tube, o que criamos aqui Eu vou executá-lo. E isso nos permite especificar esse ID dinâmico. Aí está meu vídeo. St, o quadro não está funcionando corretamente, certo? Mas ele está exibindo o vídeo correto e está funcionando. Perfeito. Agora, precisamos descobrir como podemos definir esse quadro para esse reprodutor de vídeo para que ele caiba no espaço. Você simplesmente colocaria o quadro e definiria a largura e a altura. O problema é que precisamos saber o que é isso. Usando o leitor de geometria, podemos dar uma olhada na quantidade de largura que temos E vamos essencialmente criar o leitor de geometria aqui em cima E vamos cortar toda a pilha V e colá-la dentro do leitor de geometria Agora, como esse Vtac está dentro do leitor de geometria aqui, temos acesso ao proxy A largura será a largura do tamanho do ponto proxy, que nos dá a largura da tela. Como leitor de geometria, o objetivo disso é ler as informações de tamanho Portanto, esse parâmetro nos dá uma referência aos tamanhos. Agora que temos a largura, podemos ter certeza de que é a largura adequada, mas também precisamos definir uma altura adequada. Apenas definir a largura não funcionará. A questão é: em que devemos definir a altura? Como podemos descobrir isso? Bem, podemos expressar a altura como uma proporção da largura. Precisamos descobrir quais vídeos do YouTube são exibidos. Qual é a proporção? Uma pista que temos é que, se voltarmos, posso abrir o proxy maan Mas, essencialmente, eu quero descobrir , vamos comentar isso por um segundo. Qual é a relação entre a largura e a altura? Existem várias maneiras de conseguir isso. Mas vamos dar uma olhada nisso. Vou pegar a pista dos tamanhos das miniaturas. Se dermos uma olhada nos itens e nas miniaturas, fizemos a média , 320 por 180 Se a largura for 320, qual é a altura? 320/180. A proporção é a largura 1,78, 78 vezes maior que a altura Nós inverteríamos isso para obter a altura porque temos a largura. Dividiríamos 320 por isso para obter 180. Vamos ver se a matemática funciona. T 20/1 0,7 s78 nos dá 180. É assim que vamos obter a altura. Voltando aqui, se leitor de geometria proxy nos fornecer a largura, poderíamos calcular a altura dividindo a largura do tamanho do proxy por quê? Sim, oito. Vamos dar uma olhada. Então isso deve funcionar. E, com certeza, temos a largura e a altura adequadas. O legal é que isso também funcionaria assim. Especialmente se ignorarmos a área segura. É por isso que você vê essa parte aqui. Se voltarmos à visão inicial, podemos dizer: ignore a área segura. Isso pode fazer com que ele desapareça. Há esse preenchimento lá, então eu não quero adicionar esse preenchimento Eu quero que a visualização da guia esteja cheia. Perfeito. Mas agora precisamos adicionar um preenchimento à visualização do feed Provavelmente vamos colocá-lo aqui. Uh, vamos colocar o estofamento. Oh, provavelmente apenas preenchimento horizontal. Ok. Tudo bem, nosso aplicativo de reprodução do YouTube está ótimo Espero que você tenha aprendido muito e espero que tenha conseguido acompanhar. Confira nossos outros cursos na plataforma. Tudo bem. Obrigado por assistir, e nos vemos no próximo curso.