Aprenda a lidar com API de descanso no Flutter - Android e IOS

1. INTRODUÇÃO DO CURSO: Lidar com solicitações de rede e integrar APIs é um dos problemas enfrentados pelos iniciantes. Neste curso, vamos criar um aplicativo de compras normal que exibe uma lista de produtos que são buscados pela Internet em nosso aplicativo mais plano integrando fixo ou APA. Para esse fim, é uma API de descanso on-line gratuita que podemos usar sempre precisarmos acomodar isso para nosso aplicativo de comércio eletrônico sem ter nosso próprio servidor de back-end. Além disso, ao lidar com APIs, podemos obter um grande número de dados que podem ter vários campos. E, portanto, é melhor converter cada Jason em objetos Dart. Esse conceito é chamado de análise json, que também discutiremos posteriormente. Então, sem perder mais tempo, vamos começar. 2. O que é o pedido de Http: Olá, bem-vindo de volta ao novo vídeo. Neste módulo, falaremos sobre como implementar chamadas de API REST na Flórida. Se você planeja desenvolver aplicativos que buscam dados da Internet, precisará saber como fazer solicitações de rede e como lidar com as respostas adequadamente. Então, definitivamente, quando você está criando um aplicativo do mundo real, haverá muitos cenários em que você precisará buscar dados do servidor ou precisará obter ajuda de algumas APIs em seu aplicação. Quer tenha sido usada API ou API do Google ou qualquer outra coisa. Nesses cenários, você precisa saber como lidar com APIs de maneira eficaz. Então, agora a pergunta é: o que é uma solicitação de rede? Em termos simples, quando você abre um aplicativo como WhatsApp, Instagram ou Twitter em seu smartphone. App, tenta buscar os dados mais recentes de um local remoto, geralmente chama esse servidor. O servidor é um local centralizado que armazena a maioria dos dados do usuário. O aplicativo que você está usando é chamado de cliente. Portanto, existem dois termos chamados servidor e cliente. Cliente é o aplicativo, e isso é qualquer que seja o aplicativo ou aplicativo Android ou iOS que você está usando. E o servidor é o banco de dados que é armazenado em um local distante. Então esse é um conceito muito básico. Agora, o que é uma API RESTful? O resto significa Representational State Transfer. É uma interface de programa aplicativo que é API, ou seja, essa solicitação HTTP para obter ou enviar dados entre computadores. Portanto, lembre-se de que a comunicação entre um cliente e um servidor ocorre principalmente por meio de APIs RESTful. É isso aí. A forma mais básica de forma realista é uma URL que o cliente usa para fazer uma solicitação ao servidor. Então, se você vir alguma API ou comer, você receberá uma URL, que você teve que enviar a solicitação. Ou seja, você precisa acessar esse URL específico. E ao receber uma solicitação bem-sucedida, o servidor verifica o ponto final da URL, faz algum processamento e envia os dados solicitados de volta ao cliente. Portanto, essa é uma maneira muito simples de explicar, definitivamente nessa questão técnica central, pode ser um pouco complexa também, mas você só precisa lembrar que enviaremos uma solicitação ao servidor o servidor nos dará alguns dados. É isso aí. Agora, existem diferentes métodos que você usa em uma API REST. Portanto, existem muitos deles, mas os mais usados são 4. O primeiro é a solicitação GET. Significa simplesmente que você deseja obter alguns dados de uma solicitação de banco de dados remoto usando get only retrieve data, o que significa que eles não têm outro efeito sobre esses dados específicos. Isso significa que você vai ler os dados. Você não pode alterar nada usando a solicitação GET. Não postar solicitação. As solicitações de postagem enviam dados para esse recurso específico. Você usa o método para enviar dados para o servidor, como informações do cliente ou uploads de arquivos. Portanto, indiretamente, lembre-se de que, se você precisar enviar algo do cliente para o servidor e salvá-lo no servidor. Nesse cenário, você usa a solicitação post. O terceiro está atrasado. Então, ele faz o que diz que exclui o recurso específico do servidor. E o quarto é colocado, ou seja, substitui, ou você pode dizer, atualiza todas as representações atuais dos recursos-alvo. Isso significa que você já enviou alguns dados para o servidor, mas, posteriormente, deseja atualizar essa auditoria de campo específica, particularmente de dados como idade ou número de telefone. Então, nesse caso, você usa a solicitação PUT. Então, definitivamente, eles são uma solicitação de patch e mais alguns. Se você quiser saber sobre todas as solicitações, basta pesquisar no Google. Mas, na maioria das vezes quando você está criando um aplicativo, você está trabalhando com isso por solicitação. Agora, em vibração, definitivamente, se você quiser fazer alguma coisa, temos que obter essa dependência. Então, para solicitação HTTP, também, há uma dependência chamada pacote HTTP é simplesmente anexar seu navegador, ir para dev e apenas digitar http. E então lembre-se de selecionar este. Isso é da própria equipe do Dart. Sim, role para baixo e copie essa dependência. E no seu aplicativo você pode colá-lo. Lembre-se, se você quiser criar um novo projeto, também poderá fazê-lo agora Estou usando nosso projeto anterior, mas removerei esses códigos anteriores. Então, se você quiser, você pode simplesmente pausar o vídeo e escrever na Flórida, criar um projeto novo e começar do início. Depende de você. Nossa carta pub get está funcionando. Isso vai pegar a dependência e sim, está feito. Agora nossa dependência HTTP está instalada. A próxima coisa que farei é remover os arquivos anteriores. E agora, na pasta mid lib, criarei novas pastas como a primeira é verde e a segunda é a pasta de serviços. E dentro da tela, criarei serviços de pontos e insights iniciais. Lembro-me de que vou criar um serviço de APIs ponto ponto. Então, simplesmente o que eu fiz foi organizar nossos códigos de uma maneira limpa. É como se todas as telas estivessem na pasta telas. Todos os serviços de API que são códigos mais antigos do lado do servidor ou o que quer que esteja interagindo com a API estarão no ponto ponto do serviço da API. Dessa forma, você tem uma separação de código e terá esse modelo MVC, que também é o padrão Model View Controller. É uma boa prática. Você não quer, você não quer escrever todos os seus códigos aleatoriamente e em apenas um arquivo. Será muito difícil para você organizar ou depurar a longo prazo. É isso aí. Nós entendemos o que é STDP, quais são seus métodos diferentes e como instalar o pacote HTTP em nosso projeto. Na próxima sessão, usaremos algumas APIs reais e chamaremos essas APIs usando essa solicitação GET. Obrigada. Vejo você no próximo vídeo. 3. Implementar solicitação GET a um servidor: Oi. Nesta sessão, usaremos uma API rest real com o nome de fixo ou APA. Na Internet, você obterá muitas APIs, mas usaremos uma API fictícia para que ela seja gratuita para uso. E podemos fazer o que quisermos. Com essa API. Podemos obter alguns dados falsos de comércio eletrônico. O que significa simplesmente que se você quiser obter produtos, categorias, usuários ou qualquer outra coisa, você pode obtê-los neste APM. Traga seu editor de texto à medida que você traz seu navegador e simplesmente digite fixo ou APA. E o primeiro que aparecer, você tem que clicar nele. O URL é Api.com de loja falsa. Então, sim, é isso. Você não precisa criar nenhuma conta ou qualquer coisa para usá-la. Esses são os recursos que ela nos fornece produtos. Isso nos dá o Exército capturado, nos dá usuários e tokens de login. E essas outras rotas. Ou seja, eu estava falando sobre a Nike. Existem URLs e pod. Você pode dizer pontos finais. Você tem que enviar uma solicitação. Então, esses são os pontos finais. Então, simplesmente se eu clicar nele, ver no topo você pode ver loja falsa, produtos de barra Api.com. Esse é o URL e, quando você acessa esse URL, essa é a resposta que você receberá. Portanto, está nesse formato JSON. Tem título de identificação, descrição, imagem, preço. Então, esses são os dados que ele nos fornecerá e nós os usaremos, esses dados em nossa interface do usuário. Então, lembre-se, depois de concluir essa API de loja falsa, você pode ter a API de notícias, você pode ter a API do blog. Existem muitas outras APIs. Se você quiser, você pode experimentar por conta própria. Mas vamos começar com a APA desta semana. A primeira coisa que precisamos fazer é criar uma função que lidará com essa solicitação GET. Isso significa simplesmente que essa função interagirá com a API. Portanto, a partir de agora, escreveremos os serviços da API, ou seja, todos os serviços relacionados às APIs. Neste arquivo separado. Não queremos escrever tudo na interface do usuário. Simplesmente vamos importar o pacote HTTP primeiro. Essa é a maneira de fazer isso. Então, simplesmente criarei a classe de serviço de APIs. Podemos usar essa classe em qualquer lugar em nosso aplicativo criando um objeto e , em seguida, chamando diretamente essas funções. Agora, a primeira função que criaremos é GET ou post. Então, será uma sincronização. Agora, temos que escrever o URL primeiro. O URL é esse. Você pode simplesmente obter o URL na parte superior. Você acabou de copiar e colar aqui. Agora, para enviar uma solicitação get usando esse pacote HTTP, você não pode enviar a string diretamente. Você precisa convertê-lo em barras URI. E dentro dela. Você tem que mencionar jarda e ponta. Esse é o método ou essa é a maneira de fazer isso. Você só se lembra disso. Definitivamente. Você vai se acostumar com isso. Agora. Agora temos o URL a ser acessado para enviar a solicitação. Agora chegou a hora. Obtemos o resultado que está usando o pacote HTTP. É o ponto p. E então você pode ver que há muitos pedidos para obter pós-patch. Mas queremos essa solicitação GET. E dentro dele você simplesmente escreve o URL do produto. Ok? Você tem que devolver. Agora. Você pode imprimir o código de status do ponto de resultado. Se for 200, então obtivemos essa resposta com sucesso. Se for 404, então essa página não existe. E também, se você quiser, você pode apenas nomear. É. Responde como você pode apenas pelo nome, você pode entender que essa variável tem a resposta da solicitação GET. E, finalmente, você precisa retornar esse corpo de resposta nesse formato JSON. Então você vai, certo Jason, você tem que importar essa conversão de dados e nós simplesmente escreveremos json dot, decode e response.body aqui. Portanto, nossa função ou método está completo. É assim que enviamos uma solicitação get. Então, simplesmente você pode ver, primeira coisa foi escrever um URL. O segundo foi obter a resposta usando essa resposta http.get. E depois desse STDP get, podemos retornar o corpo da resposta para a interface do usuário que chama essa função. Ok? Portanto, a próxima parte é exibir esses dados em nossa página inicial. Simplesmente em home dot, dot create. Página inicial básica da IU. Então o retorno é falso. Dan, aplicativo. Na barra de aplicativos. Eu morri. Então eu farei centrado. Título é igual a verdadeiro, elevação é igual a 0. E eu darei a cor de fundo como as cores de fundo pontilham o sotaque vermelho. No corpo. Usaremos o Future Builder já que essa função é um futuro. E no futuro, vou simplesmente escrever ponto de resposta da API, obter todas as postagens. Veja aqui que criamos esse objeto dessa classe e simplesmente chamamos essa função futura. Portanto, esta é a primeira vez que você usará uma função futura real. Nos vídeos anteriores, estávamos apenas assustando essa função. Mas agora é uma função de servidor real que levará algum tempo para ser executada. No construtor, teremos um texto e um instantâneo. Então, como de costume, no início, verificaremos se o instantâneo que tem dados ou então o indicador de progresso circular do centro de retorno. E se ele tiver dados por enquanto, estamos apenas enviando um texto de sucesso. Porque eu quero ver a saída primeiro, essa saída no console de depuração primeiro. Então, vamos reiniciar. Derrube nosso aplicativo. Veja, temos esse sucesso aqui, mas no console de depuração você pode ver o código response.status é 200 e o corpo da resposta é assim. Ou seja, é uma lista de mapas. Então, nos primeiros dados. Esse é o primeiro dado. Então você tem título de identificação, descrição. Isso está no formato JSON. Para gerar esses dados na interface do usuário aqui, simplesmente usaremos um widget do construtor de pontos de exibição de lista. Widget Construtor de pontos de exibição de lista, o mesmo que o widget ListView. Aqui. Esses dados podem ser ilimitados. Ou seja, não sabemos o número de elementos nessa lista. Então, vamos simplesmente escrever o tamanho dessa lista aqui. construtor de pontos de exibição de lista tem dois parâmetros. O primeiro é a contagem de itens e o segundo é o construtor de itens. Item Builder é uma função que tem contextos e esse índice, índice é a posição desse elemento na lista que começa em 0. Portanto, o índice começa de 0123 para o número de elementos nessa lista menos um. Porque se houver cinco elementos na lista, o índice será de 0 a quatro. Então, simplesmente, a contagem de itens será dados de ponto de instantâneo, comprimento de ponto, porque instantâneo esses dados são esses. E usaremos seu comprimento. Então, lembre-se, se estivermos devolvendo algo no futuro, esse futuro o fará. Esses dados são armazenados nessa variável de instantâneo. Ok, agora temos um construtor de pontos de exibição de lista. E no construtor de itens, temos que devolver o que deveria ser o rígido nessa interface do usuário? Ou seja, o que devemos retornar à tela da interface do usuário? E eu retornarei o bloco da lista. Agora, simplesmente nesse título, vou escrever dados de pontos instantâneos. Então o índice é porque é uma lista, temos que usar esse índice que começará em 0. Isso imagina que a poluição 0 é essa. Ok? Então, aqui estamos nós aqui agora nesses dados do que isso. Então, este será um daqui. Este será um, eu acho que ainda está aqui. Sim. Sim, ainda aqui, é o segundo que é o único índice. Então, aqui vou simplesmente exibir o título aqui. Isso é checkout. Se eu fizer isso, teremos algum erro ou obteremos os dados? Tivemos esse erro, ok, ok, desculpe, desculpe. Só temos que cortar e colar aqui. E se não tiver dados, simplesmente retornaremos o indicador de progresso. Foi um erro muito tolo. Mas essas coisas acontecem. OK. Agora vamos verificar novamente. Veja que está carregando e depois temos esses dados. E como são dados de exibição de lista, eu posso rolar. Temos essa mochila, camisa slim, jaqueta de algodão, muita coisa. Então, temos todos os dados. E espero que você tenha entendido como eu usei essa coisa do Jason. Simplesmente instantâneo de dados de pontos é essa lista, esse índice de lista aprofundado. Eu fui para a posição 0 do crepúsculo, que é isso. E da posição 0, eu produzi essa chave de título porque sei que ela está no mapa que está no formato JSON, então eu só tenho que usar esse valor de chave. Agora, do título na liderança, estarei usando a propriedade image. Rede de pontos de imagem. Então simplesmente aqui Escreva o índice de dados de pontos do instantâneo do que a imagem. E eu simplesmente escreverei a altura como 5030. Agora, vamos salvar e ver. Verifique novamente se está funcionando corretamente. Sim. Veja que temos as imagens do servidor. Portanto, é a primeira vez que seus dados são reais, que vêm do servidor e seu aplicativo está com uma boa aparência. A próxima coisa que eu faria é usar essa legenda. E nesse texto, usarei o índice de dados de pontos instantâneos, e depois usarei essa coisa de preço. E como é um número inteiro, vou convertê-lo em uma string, C 1091. Mas eu quero adicionar cifrão também. E para escrever dólares. E você não pode simplesmente escrever esse símbolo porque a Flórida tem um significado diferente para ele. Então você tem que usar o dólar de barra invertida assim. E eu simplesmente aumentarei o preço é igual à barra invertida do dólar e depois mais. E quando você verifica a saída, ela parece muito boa. Está parecendo muito bom. Espero que você tenha entendido. Até agora. Estávamos usando essa solicitação get. Esse é o primeiro em que obtemos todos os produtos. Esse segundo método HTTP ou a rota são produtos, depois um produto específico, o que significa simplesmente como você pode obter esses detalhes únicos do produto. Então isso também é muito importante. Se você clicar nele, poderá ver a saída. Esse é apenas o detalhe de um que é apenas um produto. Portanto, se você usou qualquer aplicativo de comércio eletrônico ao clicar nesse produto, outra página aparece onde você tem detalhes detalhados do produto, imagem do produto, categoria do produto e em seguida, o botão Adicionar ao carrinho também. Então, para usar isso, novamente, você precisa criar uma nova função. Então, o que será simplesmente um único detalhe do produto. Para obter os detalhes de um único produto como isso é feito. Vamos tentar fazer isso. Primeiro. Depois deste post de guitarra, vou simplesmente copiar isso, colar, e vou nomeá-lo, obter um único produto. E o nome da variável será um único produto, URL. E também essa API de URL é ID aqui. E definitivamente é único porque não sabemos em qual usuário clicará. Então, temos que enviar o Id enquanto estamos chamando essa função como argumento. Então, simplesmente, este é o Maktab. Para obter esse detalhe de um produto específico. Tudo será o mesmo. Somente o URL é diferente agora, e estamos enviando o ID também. Agora, dentro da pasta da tela, crie outro nome de arquivo, tela Detalhes do produto. Portanto, quando o usuário clica nesse produto específico, ele deve ser enviado para a tela Detalhes do produto usando o ID do produto. Então, simplesmente insira o material. Em seguida, tenha um widget com estado chamado detalhes do produto. E agora lembre-se de que ele está aceitando e identificando. E nós o enviaremos para o construtor. Agora, nessa função de fatura, basta escrever scaffold. Então, novamente, a mesma coisa, AB bar. Em seguida, dentro de uma cor de fundo colore o sotaque vermelho. E no corpo deles. Temos que usar novamente esse futuro construtor para chamar nossa função de pesquisas de APIs. Dot obtém um único produto e esse ID, e esse ID está vindo do construtor. No contexto. Instantâneo. Em seguida, verifique o instantâneo que tem dados, caso contrário, retorne um indicador de progresso circular. É isso aí. Novamente, vou simplesmente voltar aqui o próximo sucesso, apenas para mostrar como isso é feito. Está funcionando ou não? Na tela inicial? Na exibição de lista, você precisa usar essa propriedade on tap. Você enviará isso enviando o usuário para a tela Detalhes do produto. Adl cole esse código. Você só precisa se lembrar de como enviar código e todos os detalhes básicos do produto. E no ID, você simplesmente precisa ser esse índice e, em seguida, simplesmente escrever o ID. Agora, se eu salvá-lo e clicar no primeiro item, C, está sendo exibido. E então, no console de depuração, você pode ver a saída. Esse é o título de identificação, novamente, a mesma coisa. Então você simplesmente precisa mostrar. Use esse detalhe para mostrá-los na interface do usuário, como fizemos na página inicial. Então, na tela do produto, basta remover esse texto e devolver um contêiner. E o contêiner apenas dá margem logo no início. Então filho será coluna porque há muitos dados. Agora, simplesmente no início, terei essa rede de pontos de imagem do que parece dados de pontos. E agora o índice não estará lá porque é estaticamente um mapa, não uma lista. Certo? Imagem do que altura de 200 e peso de ponto duplo infinito, que é todo o peso da tela. E então usa VJ centralizado e uma criança apareceu no preço. Então, novamente, vou usar dólares a mesma coisa que os dados de pontos instantâneos e tentar encadear e dar algum estilo também. Agora, o estilo terá o tamanho da fonte 25 e o peso da fonte. Peso da fonte, negrito. Vamos salvá-lo. Barraco. Veja. Está parecendo tão bom. Agora, o que vou fazer é dar um pouco de espaçamento na parte superior usando essa caixa de tamanho e fornecer o Tipo D. Então a imagem será letal para baixo e entre a imagem e o preço também darei alguma altura de dez para que tenhamos esse espaçamento aqui. E na coluna eu estarei usando o alinhamento principal existente que começa. Você saberá por que eu fiz isso nos próximos widgets que usaremos. Mas, por enquanto, temos uma interface de usuário muito bonita, que tem todos os produtos na primeira tela. E quando clico neste produto, isso significa jaqueta de algodão. Veja com a imagem, essa é a imagem do produto e esse preço está aparecendo. Então é isso. Espero que você tenha gostado de criar este vídeo. Aqui. Usamos essa solicitação HTTP GET. Portanto, lembre-se, esse é o único código necessário. Primeiro, esse URL depois é http.get. E, finalmente, você tem que retornar a resposta e decodificá-la no formato adjacente. É isso aí. No próximo vídeo, concluiremos esta página inteira mostrando todos os detalhes, como descrição, categoria e botão Adicionar ao carrinho. Até lá, tente entender o código corretamente. Se você não entendeu, basta assistir ao vídeo novamente. Mas, por favor, não pule nenhum conceito. Obrigada. 4. Como configurar dados do Json da API: Na última sessão, conseguimos buscar os detalhes de um produto específico. E conseguimos renderizá-lo na interface do usuário. Até agora, apenas a imagem no preço está sendo exibida. Mas hoje, nesta sessão, continuaremos mostrando todos os detalhes como descrição, categoria. E se eu tiver um botão Adicionar ao carrinho também. Vamos começar a página de detalhes do produto. Nós temos essa imagem. Depois, no centro. Nós temos esse preço. Então vamos ter uma caixa de tamanho para dar algum espaçamento e ter uma altura de dez. Em seguida, tenha um widget onde mostraremos esse título. Vários mostraram esse título e vamos dar um estilo a ele. Só queremos que o tamanho da fonte seja 25. Vamos ver. Ok, nós temos isso. Agora. A região do texto. Vamos ter um widget de chip. Se você não for barato, você só vai, se você ver isso, você vai saber que é uma espécie de tags. Se você viu alguma tag que seja eletrônica ou a categoria de tags ou hashtags. Esse tipo de rígido está sendo usado. Então, aqui vamos mostrar que obter diploma. E vamos ter decks. Vamos ter o dia seguinte. Fonte, tamanho 15 e cores mais frias pontilham branco. E nessa forma. Vamos ter uma cor de fundo. Cores, azul, cinza. Vamos dar uma olhada. Veja, eu estava falando sobre esse widget. Além disso. Se você quiser, você pode ter o alinhamento do eixo cruzado tão escuro para que tudo venha aqui. Deste lado, assim. Depende de você, o que você quiser. Isso, essas são coisas de estilo muito básicas. Não é grande coisa. Novamente, tenha uma caixa de tamanho. E então, finalmente, mostraremos essa descrição. Todas as chaves estão aqui. Por dentro da resposta. Você pode ver a imagem da descrição. E agora vou salvar e ver que esta é a descrição. Então, se você quiser, você pode fazer algum estilo ou algum tamanho de fonte. Só estou deixando assim. Agora. Vamos aqui ter um botão Adicionar ao carrinho. Vou dar como Botão Flutuante, botão ação flutuante. Então, digamos que um botão de ação flutuante. Então criança. Na criança. Vamos pegar o ícone. Adicione carrinho de compras, cartão de compras delineado no peito. Não estamos fazendo nada. Veja, nós temos isso aqui. Vou apenas dar a cor do fundo, colorida de verde. E também vou mudar a localização do botão de ação flutuante. Vou dar a ele a localização do botão de ação flutuante, o flutuador central. Então veja, está parecendo decente. Nossa página de detalhes do produto também está pronta. Se você for a qualquer outro produto, veja todos os detalhes aqui. O título da categoria, o preço, tudo está perfeito. Agora, quando vamos para a API da loja falsa, podemos ver que fizemos esse endpoint que é obter produtos mais antigos, obter um produto específico. Agora é hora de pegarmos as categorias. Veja se clicamos nele, existem 12344 categorias. Então, exibiremos essas categorias em nossa interface do usuário. Em primeiro lugar, criaremos uma função que interagirá. Vou apenas copiar e colar e certo, pegar o corajoso. Não está aceitando nada. Isso receberá um URL. Aqui. Esse é o ponto final. Então agora essa função vai para o servidor e busca na categoria presente Indus EPI. Definitivamente não. Para isso, novamente, temos que criar uma nova tela. Vou chamar tudo de categoria ponto, ponto. Espero que você esteja entendendo isso, tudo isso agora é muito fácil implementar a solicitação GET. Tudo é basicamente o mesmo. Estamos apenas concluindo nossa interface do usuário para que fique muito bonita. Na categoria antiga ponto ponto onde material simplesmente importante. Em seguida, crie um widget sem estado chamado get a goodie. Agora tenha uma barra de andaime. Morreu de. Próximo. Pegue as guloseimas com cores de fundo vermelhas e enviadas através do corpo. Teremos esse futuro. Será que isso de novo? Uma vez que ele estará interagindo com nossa função. Agora, use o objeto da nossa classe para chamar a função get all category. No construtor. Teremos contexto e um instantâneo do coletor. Simplesmente temos que verificar se o ponto do instantâneo tem dados. Caso contrário, retornaremos um conjunto de indicadores de progresso mais frios. Se instantâneo que tem o diabo, isso por tempo sendo devolvido, retorne um sucesso. Agora, o que você pode fazer é navegar até a tela. E para isso, na página inicial, vou criar alguns botões. Vai ser, eu posso, mas terá um ícone. Posso começar a ver a lista. Agora vamos navegar até a tela de categorias. Meu layout de página TDL. Teremos um contexto. E isso. Então, vamos ver como isso, qual é a saída no console de depuração. Você pode. Veja aqui este é o botão de ícone que temos, que são todas as categorias que, se eu clicar nele, teremos esse sucesso e veja, essa é a resposta de saída do servidor. Então, agora, simplesmente na página da categoria antiga, retornarei um Construtor de exibição de lista. Já que é uma lista. Contagem de itens, dados de pontos instantâneos, comprimento de pontos. E no Construtor de itens, eu simplesmente terei contextos e índices. Agora, temos esse índice e agora retornaremos um widget de cartão. Esse é outro widget. Eu acho que é um widget realmente básico que tem um alívio, apenas dará alguma margem e seguida, dará a ele uma forma de borda retangular arredondada, raio da borda, raio da borda, circular 15. E então, nessa criança, você terá um recipiente. Isso é apenas uma coisa básica em que exibirei esses eletrônicos. Joy continua sendo coleção de tudo. Agora, aqui nesse texto, mostrarei os dados dos pontos do instantâneo e, em seguida, indexarei diretamente. E eu vou colocar em maiúsculas. Só para ver um bom dia. Vou dar um tamanho de fonte de 25. Agora vamos ver. Vamos conferir a saída. Agora, quando eu clico nele. Veja eletrônicos, joias, roupas masculinas, mulheres. Então, está parecendo muito bom. Está parecendo decente. Você pode dizer pelo menos essa margem e preenchimento onde eu costumava dar o espaçamento dentro e fora desses cartões. E, definitivamente, quando clicarmos neste cartão, devemos ir para uma tela onde todos os produtos relacionados a essa categoria serão exibidos. Para isso no cartão, vamos apenas envolvê-lo com um widget de tinteiro e não temos a função de toque nele, que usaremos mais tarde para buscar produtos por categorias. Então é isso para este vídeo. No próximo vídeo, buscaremos os produtos por suas categorias. ONG. 5. Aplicativo básico de compras: Oi, bem-vindo de volta. Nesta sessão, concluiremos essa solicitação GET. E até agora, conseguimos buscar as categorias e exibir em nosso aplicativo. Mas agora é hora de buscar produtos com base nessas categorias. Isso significa que se eu clicar em eletrônicos, uma nova tela deve aparecer contendo todos os produtos eletrônicos. E para esse ponto final é esse, que é a categoria de produtos. E então temos que enviar esse nome de categoria. Então, como sempre, vamos começar com a API primeiro. Então, para isso, vou apenas copiar e colar aqui. Vou dar um nome, pegar o produto. Ao conseguir. Agora ele aceitará um string cat chamado esse nome de categoria. E o nome da variável. Vou mudar isso para buscar o produto. Obtenha o corajoso que você é. Você pode nomear o que quiser. E aqui o ponto final é como essa categoria e depois o nome do gato. Então veja, é assim que é feito e se clicarmos nele, ele nos dará uma resposta. Com produtos Alda. Agora temos a função pronta, mas também devemos criar uma nova tela, que chamaremos de função. Vou nomear categoria de idade, produto ponto ponto. E agora vou importar meu TDL. Do que um estado menos rígido de uma tela. Ele aceitará um nome de categoria no construtor. Temos que atribuir isso a essa variável. Agora, vamos cadafalso. Em seguida, AB bar. Nesse título. Vou dar esse nome de categoria em maiúsculas. Essas devem ser as cores do título e do plano de fundo. Kettler começa a ler. E então a etiqueta central foi tratada. Agora, o que queremos é que, quando clicarmos nisso, essa apresentação deve abrir. Então, vamos para a categoria de petróleo. E no tinteiro, temos que usar navigator, dot bush. Em seguida, meu Layout de página TDL, View Reveal e, em seguida, o nome produtos granulado. E então temos que enviar esse nome específico. Obteremos o nome dos dados do instantâneo e, em seguida, indexaremos. Vamos experimentar. Vamos ver o que acontece. Agora, quando vou para Categorias e clico em joias. Veja que essa alegria está lá no bar AB. Se eu clicar em eletrônica, a eletrônica está lá. Então, agora vamos simplesmente usar um futuro construtor dentro da página do produto da categoria. E eu logo após o nome corretamente. Ok, então no corpo, vamos ter um futuro construtor. Nan. Então, o futuro será o Serviço de Aplicativo, obterá o produto por categoria e, em seguida, enviará essa variável get the gritty name. E no construtor, teremos um contexto. Como sempre, acho que você vai aprender. Agora. A mesma coisa que estamos fazendo de novo e de novo. Talvez nunca contextos. E depois um único instantâneo. Vamos verificar. Se instantâneo que tem dados e retorna circular indicador de progresso circular. Fizemos isso mais do que, até esqueci quantas vezes fizemos essas coisas. Agora, se ele tiver os dados, usaremos um construtor de exibição de lista. Agora, essa interface do usuário desejará o mesmo que a interface do usuário inicial. Este construtor ListView. Essa categoria. Vamos transformar esse construtor ListView. E primeiro, vou verificar se tudo está correto aqui. Dados de ponto instantâneo, ponto, del, preço do índice do que esta tela do produto que vou importar. Ok, vamos dar uma olhada. Se houver algum erro. Quando clico em eletrônica, nada aconteceu. Vamos ver, ele tem algum erro ou erro? Produto por categoria? Bom, produto por categoria. Então temos essa função. Vamos reiniciar agora e depois verificar se ainda há algum erro persistente. Acho que não salvei o arquivo. Tudo bem. Mas veja isso mostrando agora, se eu for e joalheria apenas as coisas de joalheiro realmente estiverem lá e se eu clicar nele, esta página de detalhes do produto aparecerá. Então, está funcionando muito bem. E acho que nossa parte está pronta. Agora, quando pensamos em algum, você pode dizer que o aplicativo de comércio eletrônico definitivamente existe um carrinho de compras que não usamos aqui. Então, vamos ver esse documento de recursos. E aqui você pode ver que também podemos obter um carrinho, o que nos dará alguns produtos se enviarmos um ID de usuário. Então, por favor, reserve um tempo para ler esses documentos. Você aprenderá muito. Há muitos pontos finais. Mesmo. Estou usando alguns deles apenas para mostrar como isso é feito. Agora vamos implementar a página do carrinho. Em primeiro lugar, implementaremos uma função que receberá esse cartão. Então vou dar um nome, pegar o cartão. Ele aceitará um ID de usuário. E vou chamá-lo de buscar produtos de cartão. E então o ponto final é. Este cartão e, em seguida, o ID do usuário. Esse é o ponto final da API do carrinho. Portanto, como é uma API fictícia, precisamos usar detalhes do usuário já existentes em seus produtos automotivos. Não podemos inserir nossos próprios dados de verdade. Vamos pegar um ID de usuário de um para buscar que ele está simplesmente lembrando, o que quer que estejamos fazendo é apenas um dado falso. Eu gostaria, eu só quero que você entenda o conceito de HTTP e como buscar e exibir os dados na interface do usuário. É isso aí, nada mais do que isso. Agora, vamos criar uma página de tela de proteção. Ponto verde de Deus. Depois importe o material. Vamos ter um estado menos rígido da tela de cartas. Então, como você deve, nós teremos seu cadafalso. Então, nesse título. Certo? Você é. Deus, vai parecer profissional. Então alguns Ted são iguais a antes termos feito isso tantas vezes, acho que agora você tinha um especialista nessas coisas. Agora, no corpo, teremos alguns presididos a um construtor que aceitará se futuro receber cartão. E vou enviar um ID de usuário um, que eu já sei que está lá no fixo ou na API. Basta usar a documentação dessa API. Mais uma vez, se você não entendeu instantâneo que tem data center, esse é um indicador circular de progresso. Aqui. Por enquanto, estou lendo um texto de sucesso para que possamos obter esse resultado no console de depuração. Agora, obviamente, temos que navegar até a tela também. Então, na página inicial, vá para a barra de aplicativos e eu copiarei esse botão de ícone e cole-o. E agora isso será carrinho de compras. E essa página será a tela de guardas. Vamos dar uma olhada. Veja, nós temos esse cartão. Eu posso ouvir. Agora, se eu clicar no ícone do carrinho, essa resposta é essa. Isso nos dá uma resposta de 200. Ou seja, foi um sucesso. Temos o ID ID de usuário um. Então. Nossa principal preocupação é a chave de produtos mais fácil. Portanto, a chave do produto tem o valor de uma matriz, que consiste na ID do produto e na quantidade. Então, aqui estamos obtendo apenas o ID do produto. Portanto, temos que usar os futuros construtores para buscar os detalhes do cartão primeiro e depois buscar o produto. Definitivamente, queremos o nome do produto e a imagem do produto deste ID do produto. Então, vamos começar com isso. Simplesmente, escreveremos se instantâneo que tem dados, então teremos uma lista de produtos, que é, qual é essa chave, que é a chave do produto. Agora, usaremos o construtor List View. Exiba todos esses produtos. E na contagem de itens, vou usar produtos dot land. E no construtor de itens, usarei contexto e índice. Agora, a diversão começa porque, novamente, temos que usar um futuro. Porque agora temos que obter os detalhes do produto da ID do produto, o que já fizemos antes. Então, simplesmente temos que escrever APIs, pesquisas, ponto obtém um único produto. E então simplesmente vou usar esses produtos, depois indexar e depois esse ID do produto. Assim. Agora, novamente, terei contextos de Rick e, em seguida, vendo um instantâneo certo. Desta vez, vou nomear é um instantâneo de arco. E, novamente, temos que verificar se um único ponto de instantâneo tem dados. Desta vez, retornarei um indicador de progresso linear pela primeira vez. E agora vou ter um estilo de lista contendo todos os detalhes. Simplesmente no estilo da lista. Eu terei esse título primeiro e mostrarei que está funcionando. Cante dados de ponto instantâneo e, em seguida, título. Vamos verificar se está funcionando ou não. Traga seu aplicativo. E então, simplesmente se eu clicar nesse carrinho, C, C, temos os três itens que estão no carrinho. Essa lógica é um pouco complicada, mas você precisa pausar o vídeo e entendê-lo corretamente. No primeiro construtor futuro, estamos recebendo o carrinho. No segundo futuro construtor, estamos obtendo o nome da imagem do produto e um preço desse ID do produto. Na liderança, usarei a rede de pontos de imagem e, em seguida, simplesmente afundarei os dados de pontos da imagem. E depois imagem. Vou apenas dar uma altura de 40. Do que no subtítulo, vou escrever esse preço ou não o preço. Quero dizer, essa quantidade. Quanto eu pedi. Esse não sou eu, aquele dado falso da API. E é uma quantidade, então temos que mudar para string. E então, nesse final, terei um botão de ícone e o ícone será removido. Isso é produto atrasado. Estou construindo tudo isso para torná-lo mais, carregar muito mais aplicativos do mundo real e não apenas um aplicativo fictício. Vamos torcer para que tudo esteja funcionando bem. Traga seu emulador do que o código para o carrinho. E veja, está parecendo perfeito. Temos esse título, temos a imagem e também a quantidade. Então, isso agora está parecendo uma página de carrinho do mundo real. Só precisamos de um botão básico de pedido agora aqui. Podemos fornecer isso na propriedade de navegação inferior do andaime. Scaffold, em vez de usar o botão de ação flutuante, estarei usando, mas a barra de navegação. E aqui vou ter um contêiner. E então eu vou dar uma altura de 60. Peso do infinito de dois pontos, que é toda a largura. Cores verdes. E nessa criança terá uma região central do texto, que será, que temos na ordem certa agora. E então basta dar um estilo de texto. Cor, cores, branco, tamanho da fonte. Tamanho da fonte. Eu vou dar 30. Salve isso. E veja que esta página está parecendo melhor do que qualquer outro aplicativo que está aqui, esse aplicativo básico eu direi, porque temos nossas categorias, quando clicamos nela, temos os produtos. Veja, nós temos esses produtos. Se clicarmos em qualquer produto, o produto Dale está lá e esse erro é só porque a página não era rolável. Para resolver esse somador, podemos simplesmente acessar a tela Detalhes do produto. E aqui no recipiente, vou embrulhá-lo com eles. Visualização de rolagem de criança única. É isso aí. Veja, o erro desapareceu. Essas são as coisas básicas que você deve ter em mente ao criar um aplicativo que podemos esquecer. E haverá poucos dólares nisso, mas isso pode ser resolvido com muita facilidade. Com isso, essa parte das solicitações GET é finalmente concluída. Aprendemos muito. Na próxima sessão. Falaremos sobre como lidar com a solicitação de postagem. Então continue praticando. 6. Gerenciar o pedido do POST: Olá, bem-vindo a esta nova sessão. Até agora, estávamos discutindo sobre essa solicitação GET. Mas é hora de estudarmos os outros pedidos também. Porque, obviamente , agora temos os dados. Mas muito tempo estaremos impulsionando os dados também. Ou seja, também enviaremos dados até o que precisarmos usar a solicitação de postagem. Então, agora, como lidar com a solicitação de postagem? Já sabemos que é reduzido enviar dados para um servidor. Nós o usamos em cenários como fazer upload de um arquivo, enviar dados de um formulário. Em uma solicitação postal. Parâmetros adicionais, como cabeçalhos e corpos, também são enviados junto com a solicitação que contém nossos dados. Agora, em nossa API, temos esse usuário de login, que é o login e o ponto do usuário também, que é uma solicitação de postagem. E temos que enviar nome de usuário e senha. E como é uma API fictícia, precisamos enviar apenas esse nome de usuário e senha. Só então será bem sucedido e enviará uma ficha de doença. O que significa simplesmente, sim, as credenciais do usuário são reais, são válidas. Agora vamos às pesquisas da APA e aqui criaremos uma solicitação de postagem. Será simplesmente um futuro login de usuário. E então ele aceitará um nome de usuário e uma senha de string. Portanto, essa é uma forma muito profissional ou de escrever que você também usará em aplicativos do mundo real. Se eu quisesse, eu poderia ter escrito ou codificado diretamente a senha do nome de usuário aqui. Mas eu quero que seja muito mais dinâmico. Teremos um URL de login, barras de URI. E isso definitivamente estará lá no ponto de extremidade da URL. E depois disso, teremos arte e depois faremos o login. Ok? Agora é hora da novidade, que é a resposta. A resposta será x para o post p dot pela primeira vez, e ele terá nosso URL de login. Agora. Temos que enviar um nome de usuário e senha para essa parte. Então eu vou apenas dizer aqui, nome de usuário, nome usuário e, em seguida, senha, senha. Então é assim que enviamos. É isso aí. Não foi um grande problema, eu acho, porque também é um pedido em que simplesmente não fazemos nada demais. Temos nossa resposta e aceitaremos um URL, qualquer corpo. Agora, aqui, eu simplesmente escreveria vestido, títulos , pontos, código de status, e tudo deveria estar lá. Ok, desculpe, eu esqueci de usar await. Foi um erro muito tolo. Então, lembre-se de que quando estamos fazendo esse tipo de solicitação, esperar é muito importante. Portanto, agora usaremos o ponto de extremidade de login do usuário de login do APA. Ele retornará um token se for executado com sucesso. Agora que temos a função, é hora de criarmos a tela, que é a tela de login. É tão bom que nossa aplicação esteja sendo, pareça cada vez mais profissional e cada vez mais completa. Agora vamos ter uma tela de login. Em seguida, digitalize o telefone, a barra de aplicativos. Então vamos chamá-lo de loja da Flórida. Você pode nomear o que quiser. Só estou usando um nome aleatório. E então a cor de fundo será colorida a partir do X. E agora no corpo, terei um recipiente. Ele terá algumas margens de Duan De, livre do ponto de consulta de mídia do tamanho do ponto de contexto, largura do ponto e altura como quando toda a altura deve ser tomada. Ok? Agora, nessa criança, teremos uma coluna nesta matriz insulina masculina centrada e cruzar x é um elemento, bem como enviá-la porque eu quero que esses campos estejam no centro da tela. Portanto, teremos dois campos de texto, ou seja, nome de usuário, senha. Mas antes de tudo, eu posso, eu vou fazer disso a página inicial. Será a página inicial do nosso aplicativo. Agora, se eu atualizar, podemos ver que este é o teste de flores afiado. E agora, tela de login. Teremos, eu sou o controlador de edição de texto também. Quando nomearíamos controlador com edição de texto e aprender. E segundo controlador, quando falamos controlador. Agora, como eu disse anteriormente, temos que usar o nome de usuário e a senha fornecidos aqui. Então, vou apenas copiá-lo. E aqui nesse texto eu vou colar. E, novamente, copiarei essa senha aqui. E aqui fui eu colar a senha também, porque ela deve ser predefinida. Agora, nas crianças, vamos usar os campos de texto. Já sabemos como usar esse TextField, como decorá-lo. Isso não foi feito recentemente. Fizemos isso nas sessões anteriores. Terá uma decoração de entrada, rotulada, uso e nome. E então eu vou ter alguma fronteira também. Depois disso, terei uma caixa de tamanho. Digito D. E, novamente, terei esse campo de texto, que será uma senha. Agora, após o campo de texto, teremos um botão simplesmente no contêiner. Vou dar uma altura de 50. E livre da altura do ponto de consulta de mídia, que é toda a largura da tela. Discord no lugar daquela criança, eu vou ter um botão elevado. E nessa criança, vou simplesmente escrever login. E eu vou dar um pouco de estilo a isso. Um diz 25, peso da fonte com a bola. OK. Veja, temos nossa tela de login e está muito bonita. Se você quiser, você pode ter alguma imagem do logotipo aqui, depende de você. Então, simplesmente no botão elevado, vou escrever, vou chamar isso de nossa função de login aqui. Aguarde login do usuário do serviço de APIs. O nome de usuário escreverei o texto do ponto do controlador e a senha vou escrever texto do ponto do controlador de senha. Digamos nulla. Vamos verificar se está funcionando corretamente ou não. Se eu clicar no botão Login, vamos ver esse console, ver que é 200 e temos nosso token conosco. Portanto, como temos nosso token funcionando, o que queremos é que, se o usuário fizer login com sucesso, ele deverá ser enviado para a tela inicial, assim como qualquer outro aplicativo do mundo real. Então, esse token, vamos salvá-lo aqui nesta variável. E então verificaremos se token, ou seja, get token. E o valor do token não é igual a null. Porque se for chamado de nenhum, ou seja, estamos enviando alguns dados. Então, simplesmente escreveremos, se não for igual a nulo, ou seja, está correto. Você usará uma lanchonete para mostrar um feedback ao usuário que ele inseriu. Credenciais corretas. Simplesmente escrevemos o texto. Sucesso. E o ID do token do pátio é. E simplesmente imprimirei, imprimirei o token para o usuário assim. E vou dar alguns antecedentes que levaram a isso. Observe o verde, que é para salpicar lanche, mas estou dando essa cor de fundo. Agora, depois disso, o que eu quero é a lanchonete seja mostrada por dois segundos, e então navegaremos por isso. Por essa duração de dois segundos, eu tenho que usar esse futuro, a função delete para que ela leia o segundo, e depois nos navegue. Em seguida, navegue até a tela inicial. Layout da página Darian. E depois a tela inicial. E a página inicial. Assim. Vamos para a página inicial. E se esse token não estiver lá, ou seja, há algum erro. Então, novamente, mostraremos a lanchonete. Mas aqui, em primeiro lugar, você escreverá nome de usuário ou senha, incorreto. Nome de usuário, senha correta. E a cor deve ser vermelha. Nesse caso. Vamos verificar se está funcionando corretamente ou não. Primeiro arquivo, escreverei um nome de usuário errado hoje, removerei isso e clique em Login. Veja nome de usuário ou senha incorretos. Em nosso console de depuração também, temos uma mensagem como esta. Mas e se eu fizer isso correto? Em seguida, clique em Login. Temos essa mensagem de sucesso 2. Em segundo lugar, somos enviados para a tela inicial. Uau, está parecendo**** legal. E finalmente entendemos como usar essa solicitação de postagem também. Então, como estávamos enviando um dado no corpo da solicitação, era uma solicitação post. Portanto, você precisa se lembrar de quando usar solicitações GET, quando usar a solicitação post. Mas pelo menos temos esse aplicativo funcionando. Quando nos atualizarmos. Obviamente, ele chegará à tela inicial, mas agora você tem um aplicativo básico para mostrar aos seus amigos que você construiu algo do zero. Agora você não é iniciante, é intermediário na programação da Flórida. Espero que você tenha gostado até agora. Na próxima sessão, falaremos sobre as duas solicitações finais, que são solicitação PUT e uma solicitação de exclusão. Então, definitivamente, vamos gostar de trabalhar nesses recursos também. Em seguida, tente entender o código profundamente. Se você tiver mais dúvidas e tudo, por favor. Você também pode pesquisar no Google. Nosso pergunte-nos de forma gratuita e tudo. Mas, definitivamente, é um conceito muito importante. E enquanto você está cobrando APIs com o NodeJS MongoDB, então você precisa usar esses HttpRequest muitas vezes. Obrigada. 7. PUTAR e DELETE: Oi, bem-vindo de volta. Nos vídeos anteriores, aprendemos a usar solicitações GET e post. Neste vídeo, aprenderemos sobre a solicitação PUT. A solicitação é basicamente usada para obter os dados e o servidor. Portanto, nesta API de loja falsa, atualizaremos nosso cartão quando clicarmos no botão Adicionar ao carrinho. Ou seja, quando clicamos nesse botão, algum código deve ser executado. Mas lembre-se, é uma API falsa, então nada será atualizado para você. Podemos apenas ver a resposta que o console está em conformidade. Basta acessar a API da loja de aberrações, depois detalhes sobre cães. Aqui você pode obter todas as APIs compatíveis. Eu vou entrar e clicar nisso, atualizar o cartão. E agora aqui você pode ver o método colocado e temos que enviar saudações, ID do usuário, data e os produtos. E os produtos são se isso é coleção, ou seja, lista de mapa contendo o ID do produto. É isso aí. Então, sim, você pode usar ou corrigir o que quiser. Eu vou usar para que isso seja executado. Vamos simplesmente acessar nosso arquivo ponto ponto ponto de serviços de API. E aqui estarei criando uma solicitação PUT. Então vamos criar um cartão de data para o almoço. Será uma função sinc. E agora ele aceita um ID de usuário e um ID de produto. Ok? Depois disso, teremos esse URL. Como sempre. Vou chamá-lo simplesmente atualizar o URL. E o URL será cartões de barra e um ID de usuário. Então, assim como o ID do usuário. Ok, vou fazer isso d pequeno d. Depois disso, eu tenho que criar as funções que são uma resposta e depois esperar. E agora vamos usar o ponto de venda STDP. O URL será URL de atualização. E então o corpo será um mapa. E agora eu tenho, temos que enviar as chaves, esses ID de usuário. Será uma corda. Lembre-se aqui, cada chave terá um valor de string. O que quero dizer com isso é que vou te mostrar e depois namorar. Vamos apenas escrever data, hora, ponto, data e hora, ponto, ponto para string. Então, temos que converter essas coisas em string. E depois produtos. E será uma lista, ok? Lista do mapa. E aqui vou simplesmente escrever aqui ID do produto, ID do produto e a quantidade d t. Vou apenas codificar como um. E então faça essa string de lista para funcionar. Agora, como sempre, basta imprimir o código de status da resposta. E então imprima sim amarra o corpo. E depois disso, retornarei JSON decode response.body, mas não faremos nada. Estou apenas criando a função para que você entenda como fazer isso quando tiver uma API em tempo real. Agora temos a função ativada. Vamos aos detalhes do produto. Aqui. No botão de ação flutuante. Aqui vou simplesmente fazer uma pia com um peso. Eu serei uma coisa. Serviço Apa, cartão de atualização de ponto e ID de usuário. Eu saberei que enviarei um, já que está codificado. E então esse ID do produto é esse ID. Estou enviando esse ID também. Depois disso, podemos apenas ter um susto, cair, cair, o mensageiro dos contextos, show de pontos, lanchonete. E depois lanchonete. Você pode simplesmente escrever o produto adicionado ao carrinho. Então, esses são apenas comentários falsos. Mas o código da solicitação HTTP é real. Vamos trazê-lo para fora. Agora, quando você for para esta tela de jaqueta, quando clico no botão Adicionar ao carrinho, veja o produto adicionado ao carrinho. Na saída, você pode ver ID, ID do usuário, data e um produto que é ID, ID do produto é três. Enviamos três. É por isso que isso significa que nossa solicitação PUT está funcionando perfeitamente. Imagine que seria um dado real e estamos apenas atualizando esses dados no servidor. Dados. As solicitações finais que discutiremos são a solicitação de exclusão. Portanto, a solicitação de exclusão é usada para excluir esses dados no servidor. Então, aqui vamos deletar nosso cartão. Vamos fingir que excluímos nosso carrinho quando clicarmos no botão Remover na tela do carrinho, que é esse botão. Esse botão. Quando clicamos nisso, devemos apenas receber o feedback. E, como sempre, é uma API falsa. Nós apenas veremos a resposta no console. Portanto, crie uma solicitação como uma solicitação atrasada e atrasada do que simplesmente uma função de cartão atrasado. Em seguida, string ID do usuário. Então, vamos apenas obter o ID do usuário e excluir o cartão dele. Só estou tentando fazer você entender. Sei que não faz sentido trabalhar apenas com APIs falsas. Mas confie em mim, isso vai te ajudar muito. Agora. Só precisamos obter esse mesmo URL. A única diferença serão as solicitações HTTP para aqui, apenas escreveremos a resposta é igual a aguardar http ponto atrasado, URL do cartão atrasado. Então é isso que devemos fazer. E depois disso, simplesmente escrevemos resposta, código de status. Imprima a resposta do corpo e retorne json dot d code response.body. Agora, na API de pedido fixo, você pode ver que esta é uma página de carrinho atrasado. E aqui o URL é como este carrinho e o ID do usuário, e só temos que enviar a eles meu terço de atraso. E, em seguida, na saída, obteremos os produtos de data de identificação do usuário. É isso aí. Vamos experimentar. Vamos para a página da tela do cartão. E então, nessa trilha, temos isso em louvor. E aqui vamos simplesmente escrever um serviço de APIs de peso Dot, Delete Cut. E então enviaremos apenas um ID de usuário de um. Como seria um aplicativo real, você pode estar obtendo o ID de usuário do Firebase ou onde quiser. E depois disso, teremos apenas um mensageiro de andaime e simplesmente mostraremos uma lanchonete. Basta mostrar uma lanchonete. Ter o conteúdo como item excluído com sucesso. É isso aí. Vamos experimentar. Isso funciona ou não? Agora vá para a tela do cartão. E agora vou limpar o console. E agora, quando clico nesse botão excluir, veja o item excluído com sucesso. E temos esse ID do item, ID do usuário, data e esses outros produtos, consulte 61. Então, adicionamos o cartão certo à frente. Eu só queria implementar uma função de exclusão e fazer você entender como ela está funcionando. Eu sei aqui que todo o carrinho está sendo excluído, mas devemos remover um produto nesse caso. Espero que você tenha entendido. Você precisa atualizar esse cartão. Ou seja, se eu remover isso no servidor, basta remover esse produto desse item da lista. Depende de você. Mas pelo menos você deve conhecer o conceito e como escrevê-lo corretamente. Tão alto, espero que tenham gostado desse vídeo. Falamos sobre toda essa solicitação, seja GET, post, PUT, delete. Então, no próximo vídeo, finalmente discutiremos sobre a solicitação autenticada. E esse será o vídeo final do nosso módulo HTTP. E Q. 8. Faça solicitações autenticadas: Oi, bem vindo de volta. Nesta sessão, falaremos sobre como fazer solicitações autenticadas. Então, até agora, estávamos usando uma API que podíamos acessar diretamente e não requer nenhuma chave de autenticação. Mas esse não é o caso na maioria das vezes quando estamos criando aplicativos. Para buscar dados de muitos serviços da Web, você precisa fornecer uma chave de autorização ou autenticação. Há muitas maneiras de fazer isso, que discutiremos agora. Agora, a primeira maneira é esse método básico de arte, autenticação básica significa que o aplicativo cliente envia o nome de usuário e a senha para o servidor nas solicitações HTTP. Então, simplesmente quando tivermos um nome de usuário e senha, usaremos uma arte básica. E o disco também pode ser feito de duas maneiras. Ou temos que enviar esses detalhes no parâmetro body ou a outra maneira é codificar essas credenciais com UTF-8 e depois passá-las no parâmetro headers. Vamos fazer a primeira coisa que é, quando enviamos esses detalhes no parâmetro body, basta exibir seu arquivo de serviços da API. E vamos criar uma função chamada autenticação de usuário. E agora aqui temos um nome de usuário e uma senha de string. Agora não temos nenhum URL no momento. Estou agora mostrando a você o código do curso de pato que é como fazer isso. Porque definitivamente você pode ter uma API, como outro servidor da AWS ou um servidor NodeJS ou qualquer outra coisa. Só estou usando uma coisa falsa. Isso é api dot em algum lugar, I0, seja o que for. Não faz nenhum sentido. Agora, a questão é o importante está aqui, é a resposta. Agora, quando escrevemos, a resposta é igual a await http dot. Quando estamos enviando esses dados no corpo, não podemos ter uma solicitação get. Sempre temos que usar a solicitação postal. Então só nós podemos enviar o parâmetro do partido. Agora no corpo, vou simplesmente usar esse nome de usuário, nome usuário e senha, como essa senha. E depois disso, como sempre, você pode imprimir a resposta. Só estou dizendo de novo que aqui não estamos usando nenhuma API. Eu só quero mostrar o código como autenticar o STDP também, porque tudo será o mesmo que fizemos antes. A única diferença é que usamos esse parâmetro de festa. Então, imagine que este é o seu servidor NodeJS e estamos enviando a senha do nome de usuário para autenticação. Essa é uma das artes básicas. O segundo é enviar os detalhes usando o cabeçalho de autorização que podemos fazer. Simplesmente assim. Ok, eu apenas criaria outra função para que você se lembre do usuário ou terceiro IgG e eu apenas escreverei a sessão. Agora, vou remover essa coisa do corpo. E como não estamos usando body, também podemos fazer uma solicitação GET porque estamos enviando esse detalhe por meio de cabeçalhos. Agora temos a primeira codificação, esses detalhes como esta arte básica. Então, a primeira coisa será essa palavra-chave básica. Depois disso, teremos a codificação base 64. E por dentro vou escrever oito pontos da UDF código de oito pontos da UDF. E aqui você escreverá seu nome de usuário e senha. Simplesmente. Nome de usuário e senha. Esse código, você deve se lembrar que esse básico é o prefixo que usaremos. Há outro prefixo que usaremos em apenas alguns segundos. Mas é assim que temos a chave de autorização que codifica. E então, nessa solicitação GET, basta escrever cabeçalhos. Em seguida, use o mapa. E a primeira chave que você usa é o tipo de conteúdo. Será o aplicativo Jason. E a segunda é a autorização. É disso que estamos falando. E ele terá essas credenciais básicas. É isso aí. É assim que é feito. Portanto, essa é a maneira de enviar nome de usuário e senha e também não apenas nome de usuário e senha. Pode haver alguns sites ou APS que solicitaram o envio do código da API aqui. Ou seja, nem sempre é necessário usar esse tipo de nome de usuário e senha. Também depende da API com a qual você está trabalhando. Agora. Primeiro foi a arte básica. Agora, o segundo é a cerveja. A autenticação da cerveja significa simplesmente que precisamos autenticar usando um token em vez de um nome de usuário e senha. Agora, se você tiver um token, essa API especifica que você precisa usar esse prefixo beer. É assim que é feito. Nada demais. No Lee. Na autorização. Você tem essa cerveja para palavra-chave e esse valor simbólico. É isso aí. Isso é acesso para conservar pose. E imagine que aqui temos esse token de acesso. Algum valor para transmitir. Você pode dizer algum valor simbólico, é isso. Então é assim que você usa essa arte melhor. Só estou dizendo isso de novo. Se você tiver uma API que tenha sua própria chave de API, altere a chave de autorização para essa chave específica. Às vezes, algumas APIs dizem que no cabeçalho a chave deve ser assim e, em seguida, o valor do token. Portanto, você precisa ler a documentação dessa API com muito cuidado para não cometer nenhum erro. Mas lembre-se do código aqui. Isso é feito na maioria das vezes quando estamos fazendo qualquer tipo de autenticação. Eu sei que você pode estar perguntando, ok, mas não havia uma API real. Então, estou apenas mostrando alguns exemplos. Primeiro, você pode ir e experimentar esta API de notícias ponto ORG. Ele lhe dará todas as notícias mais recentes e tudo mais. Você pode obter a chave de API aqui e ler a documentação sobre como usar essa API para se autenticar. A segunda chave de API que você pode obter é essa OMB DAPI. Basta clicar nessa chave de API e escrever seu e-mail aqui e enviar. Dessa forma, você obterá sua chave de API e poderá começar a acessar diretamente todo o banco de dados de filmes a partir daqui. As outras APIs ou se um par aqui também pode obter o EPI por si mesmo. E essas são as APIs que fornecem uma API de clima atual do Cali PA. Veja assim. Portanto, só temos que ler a documentação corretamente e experimentá-la por conta própria. Nesta pandemia, se você quiser, você também pode obter a API de rastreamento COVID , onde você obterá todos os dados relacionados ao COVID-19 em todo o mundo. Com isso também, você pode criar seu próprio aplicativo. Então, espero que você tenha gostado desta sessão. Se quiser, basta tocar aqui e experimentar por conta própria. Tente cometer tantos erros para que, no final, você se torne um desenvolvedor melhor. Obrigada. 9. Por que precisamos de modelos: Oi, bem-vindo de volta. Neste módulo, falaremos sobre quais são nossos modelos e por que precisamos exatamente disso. Model é apenas a classe usada para representar determinados dados. Qualquer aplicativo funcionará com vários tipos de dados, obviamente, usando modelos, é mais fácil chamar os dados e passá-los pelo aplicativo. Então, se você se lembra dos exemplos anteriores, o que fizemos foi passar dados de uma tela para outra diretamente. Esse é o mapa em si ou a perna de valor do mapa que estávamos passando. Mas na aplicação real, os dados provenientes do servidor terão uma estrutura complexa. E não conseguiríamos lembrar a chave de todos os dados. É por isso que usamos modelos. Ao ouvir esse exemplo, você pode ver como criamos nossos modelos. Suponha que tenhamos os dados de um usuário. Então criamos um usuário de classe e Dan dove, os valores que ele existe, ou seja, todos os dados que estão dentro do usual. Você deve ser escrito assim na forma de variáveis de instância, como int final, id, nome final da string. Então, um construtor deve estar lá para que possamos passar o valor e ele será atribuído a ele. E essa função de fábrica nada mais é que uma maneira de transformar esses dados, mapear dados vindos de fora. E então retornando um objeto dessa classe. Em palavras simples, do Firebase ou da API, obtemos dados mapeados que podem mapear dados. Enviaremos aqui, que é usuário do Jason. E então ele retornará um objeto. É isso aí. Então, esses são os termos que usamos geralmente ao trabalhar com modelos. Isso é serialização e desserialização. Serialização é converter em objeto inteligente em Jason. E a desserialização é para converter objetos de dados JSON. desaceleração é o que faremos na maioria das vezes. Ou seja, os dados que chegam nesse formato JSON ou mapa serão convertidos em um objeto escuro. Eu sei que pode ser, você pode estar se sentindo sobrecarregado com esse conceito, mas é muito fácil de fazer quando você pega o jeito. Então, aqui precisamos criar uma classe para lidar com a desaceleração. E é chamada de classe modal. Então você pode estar pensando, ok, mas sem modelos também, fomos capazes de realizar nossa tarefa. Ou seja, esse aplicativo estava funcionando perfeitamente. Então, por que precisamos de modelos exatamente para nossa aplicação? Então veja este exemplo. Aqui temos esses dados no nome do formato do mapa, ID do usuário, e-mail. As representações acima representam dados de usuário muito básicos. Podemos ver que percebemos que a string JSON usando essa biblioteca de conversão de dardo como estávamos fazendo anteriormente. E isso o torna um valor de string e retorna o valor do mapa. O valor então pode ser acessado da seguinte maneira. Ou seja, depois de decodificar a string JSON, depois disso, podemos simplesmente imprimir hi e, em seguida, usuário e nome de usuário, ou seja, o nome é a chave disso. Mapa do que e-mail é outra chave e IDs de usuário e outra chave. Então isso é o que estávamos fazendo antes. Agora, vamos estudar qual é o problema dessa abordagem. Infelizmente, a decodificação JSON retorna um mapa, significa que você não conhece esse tipo de valores de dados até o tempo de execução. Então, aqui, e-mail ou esse ID de usuário é um número inteiro que não sabemos até e a menos que o imprimemos aqui. E se estiver mostrando algum erro ou algo assim. Com essa abordagem, você perde maioria dos recursos de linguagem digitada estaticamente. Isso é segurança de tipo, preenchimento automático e, o mais importante, exceções em tempo de compilação. Então, tempo de execução, tudo bem, entendemos. Mas compilar o tempo enquanto escrevemos o código. Então também não vai aparecer nos dá nenhum erro. Mas quando estamos usando modelos, isso nos diz que é um número inteiro. Não use string ou qualquer que seja a exceção, é. Essa não é uma boa prática. Por exemplo, sempre que você acessar os campos de nome ou e-mail, também poderá introduzir rapidamente um erro de digitação. Já que suponha que aqui seu nome odeie e-mail. Pode ser E, dash mail ou qualquer outra coisa. Aqui está o ID do usuário, é capital. Podemos escrever pequeno. Esse tipo de erro é muito comum quando estamos programando. Então, para combater esses problemas, os modelos entram em jogo e definimos estritamente o tipo de valores como este. Aqui nós o definimos estritamente. É um número inteiro, é uma string. Portanto, é assim que estamos em um lado mais seguro ao criar um aplicativo. E isso eventualmente torna o código menos propenso a erros, pois a maioria das áreas é tratada durante o tempo de compilação. Espero que você tenha entendido por que precisamos de modelos e talvez não tenha entendido como criá-los, mas não é um problema. Na próxima sessão, criaremos nosso primeiro modelo. Obrigada. 10. Criando nosso primeiro curso de modelo: Oi. Nesta sessão, criaremos nossa primeira classe de modelo. Então, antes disso, traga seu Código VS. E eu emulei. Se eu pressionar em qualquer produto que não seja no console de depuração, você poderá ver que todas as propriedades são dados que ele possui. E com relação a isso, temos que criar nossa classe de modelo na pasta leaf. Vamos criar uma nova pasta chamada modelos. E dentro dele, vamos criar um arquivo ponto ponto do produto. Para criar um modelo de vidro. Primeiro, crie uma classe chamada product. E agora insira Alda, todos esses dados como variáveis de instância. Ou seja, direi tinta final, ID, depois string final, título e depois subir. É um pouco complicado aqui, então é o dobro. E também não estou usando nenhum tipo de dados. Depois disso, podemos ter a descrição final da string, depois a tela final, a string, sorry, a categoria e, em seguida, a imagem final da string. Então, sim, esses são os dados que um produto terá. Agora, depois disso, crie um construtor. Para o mesmo. Agora eu tenho que escrever obrigatório. Em seguida, esse ponto é necessário ter um título de ponto obrigatório. Esses raios, essa descrição, esse ponto obtém grau, essa imagem. Então, agora temos nossa classe de modelo de produto. Ele tem todos os dados. Agora temos que criar uma função que aceitará Jason como entrada e, em seguida, retornará esse objeto de produto. Agora, para criá-lo, basta escrever um produto do Jason. Em seguida, ele aceitará valores dinâmicos de string chamados Jason. Vou apenas escrever JSON. Em seguida, ele simplesmente devolverá um produto. Agora no produto, em breve teremos o ID do produto. Então eles dizem que Jason BJ descrição de Jason BJ, isso não é corrupção. Então obtenha um diploma, grau Jason. E então, finalmente, temos imagem. Então veja, essas são todas as chaves que já foram mencionadas ainda nesta imagem de descrição da categoria de preço. Agora, quando chamarmos essa função, enviaremos esses dados aqui e isso nos dará um objeto de produto. É isso aí. Criamos com sucesso nosso primeiro modelo. Agora. Para usá-lo. Temos que acessar nosso arquivo ponto de serviços de API. E é hora de fazermos as mudanças necessárias na função. Saiba que existem muitas funções e vamos começar com isso, obtenha todas as funções de postagem aqui. Em primeiro lugar, vou apenas dar um tipo de retorno. Da lista de produtos. É isso aí. Então esse é o tipo de retorno. Agora, simplesmente, criarei uma lista vazia no início dos produtos, nomeiarei todos os produtos e ela ficará vazia. Agora, vou fazer com que esse corpo decodifique Jason Dodd em uma variável aqui. E vou dar uma olhada nessa coisa do Jason que é todos os produtos. Vou dar uma olhada e obter um produto específico aqui. E simplesmente, em todos os produtos, adicionarei o produto do Jason e enviarei aqui o JSON. É isso aí. E no final, vou devolver todos esses produtos, ou seja, lista de produtos. Então, o que eu fiz aqui foi antes de tudo, eu criei um array vazio, que passaremos no final. E conterá o objeto do produto, será a lista do objeto do produto. Agora, esses Jason response.body estarão no formato JSON, na lista do formato JSON. Então, vamos simplesmente percorrer e adicionar todo o produto depois de convertê-lo por meio disso. Esse é o produto que da JSON está dentro desta lista de produtos e retornou todos esses produtos. Depois disso, temos que fazer as alterações na tela inicial de onde ela está sendo exibida. Aqui, onde estamos obtendo os produtos. Portanto, esse instantâneo assíncrono nos dará agora um objeto, não um objeto, será uma lista de produtos. Então, primeiro de tudo, o que vou fazer é simplesmente criar uma variável que conterá os dados do índice. Esse é um único produto aqui. Já que está percorrendo todo o instantâneo, ele nos dará um único produto aqui. E depois, simplesmente temos que escrever o título do ponto do produto assim. Então, é tão simples. Produto, imagem, produto, o ponto de preço toString. E então, no final , vou escrever o produto, ID do produto. Assim. Vamos verificar se está funcionando ou não. Eu reiniciei o aplicativo, mas antes disso, você pode ver como é fácil agora gerar o valor. Não precisamos escrever a chave de novo e de novo, podemos usar diretamente esse operador de ponto e obteremos os dados. Consiste. Agora, quando eu clicar neste botão de login, aqui, você encontrará todos os dados que já estavam lá anteriormente, mas agora estamos usando modelos aqui. Portanto, esta é uma explicação mínima dos modelos e por que a usamos. E confie em mim, quando você tem muitos dados, os modelos serão muito úteis para você. No próximo vídeo, usaremos modelos para detalhes do produto e outras páginas também. Obrigada. 11. Mudanças necessárias no frontend: Oi. No último vídeo, fazemos essas alterações na tela inicial para que possamos obter esses dados da API e alterá-los adjacentes à nossa classe de modelo, ou seja, os modelos do produto menos. Portanto, agora nesta sessão, faremos as alterações necessárias na também faremos as alterações necessárias na função de um único produto. Para devolver o modelo. Traga seu editor VSCode e vá para pesquisas APA ponto nove. Isso obtém a função de um único produto. Simplesmente, não retornaremos um JSON. Em vez disso, vou manter esses dados em todas as lojas, esses dados em uma variável chamada potty. E então eu vou simplesmente virar ponto do produto de Jason e passar o corpo nele. Então, ele retornará um único objeto de produto. E é disso que precisamos. Ok? Agora, definitivamente, se tivermos feito a alteração em um único produto, teremos que ir para a tela Detalhes do produto também. Faça as alterações para usar um modelo. Em vez dessa coisa do Jason. Temos nosso futuro construtor aqui. Estamos adquirindo o modelo que é o modelo do produto. Neste instantâneo. Aqui, simplesmente escreverei esses tipos de dados produto e os armazenarei nos dados de pontos do Snapshot. Ok? Agora temos esse produto aqui e simplesmente removerei tudo aqui. E eu trouxe a imagem do ponto, depois o preço do produto do que a categoria do produto ponto do produto. E, por último, a descrição do ponto do produto. Assim, você pode ver por si mesmo que é muito mais fácil e organizado quando estamos usando modelos. Porque, definitivamente, ao escrever o mapa, que é Jason, podemos cometer algum erro nessa chave que esses erros de ortografia ou o que quer que seja. Então é melhor se usarmos modelos. Vamos testar isso. Está funcionando corretamente ou não? Quando clico em Login, vamos para a tela inicial. E se eu clicar neste produto C, não há erro. Eu fiz isso mudar, mas está funcionando perfeitamente. Então você pode estar pensando, ok, nosso trabalho aqui está feito. Mas se eu clicar neste botão do cartão, você verá esse erro porque também esquecemos a tela do cartão de índice. Temos que fazer essas mudanças, pois também está usando essa função. Isso obtém um único produto aqui. Então, da mesma forma, temos que fazer a mesma coisa aqui. Vou usar esse tipo de dados do produto. E então sincronize os dados de pontos do instantâneo. Ok? E então simplesmente escreva aqui, ponto do produto, imagem do ponto do produto. Então aqui essa quantidade, está tudo bem porque estamos recebendo essa quantidade daqui. Portanto, não precisamos mudar isso. Mas tudo bem, eu tenho check node, não há outra coisa a ser alterada. Vamos ver nosso aplicativo novamente. Se estiver funcionando bem ou não. Eu clico no login. OK. Estamos na tela inicial. Agora, quando clico no cartão, vejo que não há erro. Agora, porque aqui novamente, estamos usando modelos em vez de mapas ou dados brutos do Jason. É isso aí. É assim que devemos usar e implementar modelos. No próximo vídeo, falaremos sobre algumas outras ferramentas que nos ajudarão a criar modelos facilmente. Obrigada. 12. Ferramenta para gerar modelos facilmente: Oi. Então, até agora v, estamos criando nossos modelos por conta própria. Então aqui, suponha que neste produto, foi fácil porque havia apenas quatro variáveis ou dados. É por isso que fizemos tudo isso sozinhos. Mas muitas vezes, quando estamos usando APIs, haverá dados que são muito complexos. Então, nesse cenário, podemos precisar de algumas ferramentas que nos ajudarão a construir nossos modelos facilmente. No mercado, existem poucas ferramentas disponíveis apenas para tornar essa tarefa muito mais fácil. Existem duas abordagens. Uma é usar uma ferramenta on-line e a outra abordagem é usar dependências. Então, aqui você pode ver que temos uma dependência chamada JSON serializable. Isso você pode usar se quiser. Definitivamente, muitas pessoas usam isso. Vou apenas mostrar a você Jason serializable. Ok, e então eu vou ouvir que eu empacotar. Veja, este é o pacote do qual estou falando. Isso é chamado Jason serializable. Se você quiser, você pode usá-lo definitivamente, você encontrará muitos recursos sobre como usá-lo. Mas nesta sessão, usarei essa ferramenta online chamada app quick type.io. Isso também é perfeito. Ambos são muito usados. Então veja se eu simplesmente escrevo tremulou nosso dardo Jason para modelar. Então aqui você vai conseguir os dois. Ok, eu acho. Sim, isso é instantaneamente analisar json em qualquer idioma. Está bem? Temos isso aqui. E para fazer isso praticamente, vou usar um APA diferente. Anteriormente, estávamos usando essa API de loja falsa. Mas agora eu não quero usar essa API porque já sabemos que os dados estão fornecendo. Então, eu vou usar este frutado vice.com. É um serviço da web que fornece dados para todos os tipos de frutas. É uma API gratuita. É por isso que estou usando. E aqui você pode ver todos os pontos finais. Isso permite. Assim, podemos obter esses dados de uma fruta específica como essa. E também podemos obter todos os frutos desse ponto final, ou seja, APS slash fruits slash on. Esse ponto final nos dá uma lista desses dados do mapa contendo todas as frutas. Portanto, sem perder mais tempo, gostaria de mostrar como usar este aplicativo quick.io para criar modelos. Então, aqui vou simplesmente escrever apple e digitar enter. Isso nos dará a estrutura de dados assim. Aqui você pode dizer que não é muito complexo, mas essa string KEY, o valor é string, string, isso é um inteiro, mas essas nutrições são novamente um valor de mapa que contém chaves de string e duplo como valores. Então, vou simplesmente copiar essa estrutura e ir para o tipo rápido de ponto do aplicativo e colá-lo aqui. Mas antes de colar e lembrar do seu idioma, você precisa usar o Dart. E então vou simplesmente remover tudo aqui, colar no nome. Você tem que escrever esse nome de fruta. Você e não precisa, você pode adicionar o que eu quiser. Mas como são dados de uma fruta em particular, estou lendo. Está bem? Agora, na saída, você vê que temos esse modelo aqui. Isso, muita coisa foi feita automaticamente ou então, tivemos que escrever tudo por conta própria e isso não é viável o tempo todo. Simplesmente, o que farei agora é copiar tudo, copiar todos esses dados e acessar nosso Código VS. E dentro da pasta de modelos, vou simplesmente criar um modelo chamado Fruit dot dot e colar tudo aqui. Então você pode estar dizendo que nesta era, isso é só porque os dados aqui não são nulos, assim. E como é obrigatório, temos que simplesmente escrever a palavra-chave necessária para que esse erro desapareça. É isso aí. Então a nutrição também, temos que colar e a Alda adicionada agora está corrigida. Então, se você olhar na aula de hoje, a única coisa necessária é isso. Esses são os dados ou as variáveis. Então, por meio desse construtor, estamos aceitando isso de Jason. Já fizemos isso no produto. Por quê? Quando estávamos usando a API fixa ou a API, ela está sendo criada automaticamente. Essa coisa de Json está apenas criando um adjacente esses dados no formato JSON e é de Jason cria os dados neste formato de modelo. E agora você deve estar pensando por que existem duas classes diferentes, aula de nutrição também. Só porque o valor desses nutrientes é novamente um mapa. Então, tudo o que temos no mapa será novamente convertido em uma classe. Portanto, essa nutrição tem carboidratos, proteínas, gorduras, calorias, Hoover, esses valores nela. Então, novamente, esta é uma aula e confie em mim, isso vai nos ajudar muito porque agora todos esses dados têm seu tipo de dados intacto. Portanto, não cometeremos nenhum erro com a dose. E se você quiser ver qual resposta obteremos assim, você pode simplesmente ir e fraldas.com.br assim e simplesmente escrever, essa é a resposta com a qual estaremos lidando. Você pode estar sobrecarregado agora, mas confie em mim, isso é só, esses dados são apenas um dado. E depois disso, está sendo repetido com frutas diferentes e diferentes. É isso aí. Então, aprendemos como criar nosso modelo JSON. Sem coração, sem digitar tudo por conta própria. Eu costumo usar esse tipo de ferramenta on-line porque ele faz o trabalho muito rápido e não precisamos nos preocupar com os tipos de dados e, se é alguma coisa, se há algo errado nisso. Portanto, no próximo vídeo, criaremos nossas funções no arquivo saw dart dos serviços da API para buscar todos os dados de frutas e mostrá-los em nosso aplicativo. Obrigada. 13. Consumir um novo api de descanso: Bem-vindo de volta. Então, agora temos nosso modelo pronto. Está na hora. Criamos uma função em nosso arquivo ponto ponto ponto de serviços de API. Para que, como anteriormente, possamos buscar as frutas, todos os dados das frutas. Então, simplesmente desça e faça um comentário sobre como obter frutas. Então, simplesmente, teremos uma função futura chamada get on fruits e definitivamente ela ganhará como função sinc. Em seguida, teremos a variável de URL de frutas. E aqui analisaremos nosso URI, que é URL, que está aqui. Desculpe, sim. Que será essa API slash, frutas cortam este aqui. Basta ir e colar. Estou usando esse refrigerante API grátis. Não preciso criar as chaves de API da conta com esses dados nulos. Mas você, eu já te ensinei como fazer uma solicitação autenticada também. Então, se você quiser, você também pode tentar com outras APIs. Então, temos essa resposta aqui. Simplesmente que é o ponto p get. Em seguida, no URL da fruta. Assim. Então, o que vou fazer é simplesmente criar uma variável de festa. E Jen, aqui vou escrever código json dot d para que ele possa ser convertido uma string desse corpo de resposta em um mapa. É isso aí. Isso é apenas o trabalho dessa decodificação de pontos json. Ele converte uma string em um formato JSON. É isso aí. Agora aqui. Anteriormente, o que fizemos foi criar uma lista de variáveis de produto e depois atribuí-la a um array vazio. E então, simplesmente, usamos esse loop for e adicionamos todos os dados. são esses dados únicos nisso. Mas agora vou mostrar uma maneira diferente de fazer a mesma coisa. Ele só faz o trabalho em uma linha, aquela frente de estudo. Vou pegar essa lista de frutas. Vou nomear todas as frutas. Então vou simplesmente escrever um mapa de pontos da festa. Vou pegar uma fruta em particular aqui. E então, e eu vou enviá-lo através dos dois dias da função JSON. Ok? E simplesmente, finalmente, vou criar, vou fazer tudo para uma lista. O que está fazendo é mapear através do corpo, essa é essa resposta. E, em seguida, convertendo todas as formas que estão adjacentes ao objeto de frutas e depois devolvendo-o. Isso significa que ele está devolvendo. E, finalmente, tudo depois disso é feito, esse mapeamento está feito. Tudo será convertido em uma lista. É isso aí. E simplesmente devolverei todas as frutas aqui. E essa função, darei a ela essa lista genérica de frutas de tipos de dados para que saibamos o que está retornando. Ok? Então essa parte está pronta. Nossa função está pronta. Agora é hora de criar uma nova tela para que possamos mostrar esses valores para o miniaplicativo no aplicativo. Vou simplesmente nomear todas as frutas ponto, ponto. Agora, como sempre, importe material. Então, cada classe de lista estadual de eu vou chamá-la de tela de frutas. Agora ele retornará um andaime no aplicativo. Vamos dar uma elevação de 0. Cor de fundo das cores ponto organizar x. E desta vez, darei todas as frutas. E então o centro que eu desenhei naquele corpo. Vamos ter um futuro construtor. Espero que agora você esteja muito confortável com esse tipo de código, porque estamos fazendo isso há muito tempo. Estou usando serviços de API e, em seguida, recebo todas as frutas. Simples assim. Esse construtor terá um contexto e um instantâneo. Ele estará em um único instantâneo. Então eu vou verificar. Se o DOD do instantâneo tiver a pomba. Caso contrário, retornarei um indicador circular de progresso. E se tiver dados, retornarei no construtor de pontos de exibição de lista. Agora, a contagem de itens será ponto instantâneo, ponto, ponto, comprimento. E o construtor de itens terá desaparecido, textos e índice. Então, agora aqui vou criar uma variável, um tipo float e armazenar esse valor de instantâneo em um instantâneo de dados de ponto e, em seguida, no índice. Então, será esse produto singular. É isso aí. E então eu vou devolvê-lo, vou devolver um cartão. E dentro dela, terei uma propriedade filho e, em seguida, o orçamento de estilo de lista. Então, nesse título, terei um centro e depois a criança, que nos mostrará o nome da fruta, que é o nome do ponto de comida. Tão simples quanto isso. Só por causa dos objetos, agora somos capazes de gerar ou usar nossas variáveis com tanta facilidade. E então, no subtítulo, gostaria de mostrar todos os valores nutricionais, ou seja, proteínas, carboidratos e gorduras. Simplesmente, terei um widget de texto. Ele escreverá altas taxas de papelão. E agora vou concatenar esse valor da fruta. E depois um ponto, depois nutrições, depois pontilhe e veja. Agora eu posso simplesmente usar carbonetos daqui só porque ele está salvo em outro objeto. Ou então eu tive que usar esses carboidratos essenciais e definitivamente vou cometer o erro aqui. Vou simplesmente copiá-lo e colá-lo duas vezes. O segundo será a proteína. Será simplesmente proteína. E o terceiro será as gorduras. E será simplesmente gordo. É isso aí. Agora, na linha, darei um alinhamento do eixo principal do espaço de pontos de alinhamento principal uniformemente, apenas para torná-lo bonito. Agora, para testá-lo, temos que ir ao nosso arquivo ponto ponto principal. E em vez desse arquivo de login, temos que escrever essa tela de frutas. É isso aí. Vamos dar uma olhada. Eu reiniciei meu aplicativo. Ok, a tela está boa e veja todos esses dados aqui. Maçã, damasco, banana e essa gordura protéica de carboidratos. Se você quiser, você pode produzir esse pedido da família Janus, qualquer que seja esse número de calorias. Se você quiser, você também pode produzi-los. Não estou usando a propriedade principal e também a propriedade final do estilo da lista. Eu só quero te mostrar como isso é feito. Como podemos criar modelos com tanta facilidade usando ferramentas online. E também, com sucesso, ele consumiu uma nova API que é tão frutada. E se você quiser, você também pode criar uma tela diferente para mostrar um único detalhe de fruta, se quiser, depende de você. Mas espero que você tenha gostado dos nossos vídeos até aqui. Esse modelo foi muito importante porque, na aplicação do mundo real, você criará modelos para tudo o que é usuários, contextos ou quaisquer dados ou informações que você tenha em seu aplicativo, você criará modelos para isso. Então é isso para esta sessão. Vejo você no próximo módulo. Obrigada.