Domine o Firebase com Flutter — Android e IOS

1. Introdução para FlutterFire: Se você já descarregou a esquerda e a outra para se tornar um desenvolvedor de aplicativos de pilha completa, então você deve saber como lidar com o banco de dados e outros serviços de back-end. Existem muitas opções disponíveis, e entre elas, Firebase é a melhor escolha quando se trata de construir e implantar aplicativos no mercado em um curto período de tempo, pelo que nos fornece tudo o que precisamos, como autenticação, , postagem e análise, aprendizado de máquina, notificação por push e muito mais. Flutter Fire é um conjunto de plug-ins que um impulso Flórida aplicativos para usar Firebase Services, Board Flutter e Firebase são de propriedade do Google e é por isso que eles trabalham juntos perfeitamente. Neste curso, abordaremos todos os tópicos importantes como autenticar usuário acordado, e-mail e senha. Implemente operações de cred de login do Google usando o banco de dados Firestore, manipulando exceções, carregando arquivos para armazenamento, compactação de imagens, etc. São estes conceitos são suficientes para lhe dar confiança como um desenvolvedor para que você possa se inscrever para o seu emprego de sonho. 2. Configurar o Firebase no projeto: Nesta sessão, vamos configurar nosso projeto Firebase. Então primeiro vamos criar uma nova inundação um projeto. Traga o seu diretório, em seguida, ness CMD linha de comando, basta digitar, Flutter, criar e, em seguida, o nome do seu projeto. Vou nomeá-lo. Terceiro, terceiro, cinco vitórias, depois pressione Enter. Então eu vou usar VS Code. Em seguida, basta acrescentar seu projeto neste código, assim. Agora k, v tem o nosso projeto. Agora. Ok. Agora basta ir para o seu navegador e digitar Firebase. E aqui você receberá a página oficial do firebase dot google.com. Aqui você pode ver produtos e soluções. Então quais são as extensões? Também? Quais são as grandes empresas e jogos que estão contando com Firebase. Então duolingo é famoso, e Lima por extremista e seus tanques são famosos. Lift também é um aplicativo muito famoso. Venmo está pronto famoso. Então aqui você pode ver Firebase, ele está sendo usado por um monte de aplicação? Agora, você só tem que fazer login com sua conta do Google aqui e, em seguida, clicar em ir para o console. Sim, veja você pode ver minha conta do Google e, em seguida, basta clicar em ir para o console. E aqui eu tenho diferentes, diferentes, vários projetos, mas eu estou supondo que você não terá nenhum. Você só tem que simplesmente clicar neste projeto e, em seguida, dar-lhe um nome. Vou chamá-lo de Firebase. E se você quiser, você pode habilitar e analisar. Não quero desembelezar agora. Então você pode simplesmente clicar em Criar projeto. Após o projeto, isso foi criado com sucesso. Aqui, só levará alguns segundos. Firebase nos informará que nosso novo projeto está pronto. E ele nos direcionará para o painel do projeto. Aqui, assim. Agora, temos o nosso painel e aqui você pode ver produtos Alda que está nos fornecendo que é autenticação, armazenamento de banco de dados. E assim nossa primeira tarefa será configurar nosso aplicativo flertado para usar este Firebase. E eu vou desbloquear configurado o Android, mas definitivamente se você quiser, você pode configurar iOS e web também. Cabe a você. Para configurá-lo. Basta clicar neste botão Android. E agora nesta tela, ele nos perguntará o nome do pacote Android. E este nome do pacote. Podemos obtê-lo do nosso diretor de projeto da EPA flutter, que é o Android. Em seguida, nesse aplicativo, você só tem que ir para construir crédito. Aqui. Este, este é o ID de aplicação do nosso flutter. Você simplesmente tem que ir e colá-lo aqui. Eu só vou nomear em inundação lá Firebase. E esta chave Sha-1 insolente ácido é muito importante, mas vamos usá-la nos vídeos posteriores. Depois, basta clicar em Registrar App. O próximo passo é baixar esse arquivamento de conflito. Isto é muito importante. Ele contém as chaves de API e informações críticas para o Firebase usar. Basta clicar neste download. Google services.js EM. E depois de ter sido baixado com sucesso, você simplesmente tem que ir e cortar esse arquivo da pasta de download e ir para o seu projeto mais lisonjeado. Em seguida, vá para o Android, vá para o aplicativo e simplesmente cole-o aqui. É isso. É assim que se faz. Depois disso, você clica nisso ao lado no Firebase. O terceiro passo é adicionar o Firebase SDK. Agora precisamos atualizar nossa configuração de crédito para incluir o plug-in de serviços do Google. As primeiras mudanças estarão lá naquele leito de nível do projeto. Net é que ainda temos este Android. Então o projeto de lei é este. Aqui. Nós simplesmente temos que copiar esta parte da classe e colá-la aqui. Ok? E então a dívida de construção de nível de aplicativo está aqui. Temos esta pasta de aplicativos. E neste acúmulo Gradle, primeiro temos que copiar esta implementação e colá-la aqui. E em seguida, você simplesmente tem que copiar isso, aplicar plugin com, Google GMS, serviços do Google e colado na parte inferior. É isso. Este código já está lá. Já foi predefinido nos projetos da Flórida. Agora, em seguida, o próximo passo é adicionar plugins Firebase em nosso projeto. Porque a afinidade haverá algumas dependências para o Firebase. E aqui você só tem que clicar em Avançar e, em seguida, continuar para o escuro e assim por diante. Ok. Para as dependências, nós simplesmente temos que ir para dev e disparado com é acessado através de um número de diferentes, diferentes passivos. Um para cada produto Firebase, isto é, seja banco de dados, autenticação, análise, armazenamento. Firebase fornece um conjunto de plugins diferentes. Só temos que escrever Firebase Core. O primeiro plugin que precisamos. Basta clicar em instalar e aqui, copiar isso, colá-lo em sua dependência. Ok. Então a próxima dependência que precisamos é da arte Firebase. Porque vamos aprender como autenticar usando Firebase profundidade não é copiado e colado em nosso arquivo de especificações Pub YAML. Ok. Agora nós adicionamos com sucesso as dependências. Em seguida, a próxima mudança que temos que fazer é no nível de aplicativo build-up Gradle aqui em que configuração padrão, nós só temos que escrever uma linha de código que é multi-década. Um mal, verdade. Então esta é uma linha de código que é necessária. Quando estamos lidando com Firebase. Essa coisa você tem que se lembrar. É uma parte de configuração. Agora, ok. Está tudo bem. Você pode ver em nosso slide também, nosso primeiro passo do projeto Firebase de configuração é feito. Em seguida, a nossa configuração da nossa aplicação é feita. O arquivo de configuração está sendo salvo nesse projeto. Em seguida, adicionamos os SDKs do Firebase e, em seguida, plug-ins surdos também. Agora, o passo final é escrever esta linha de código neles, Main.jack, que o nosso aplicativo em inicializa Firebase em primeiro lugar quando o nosso aplicativo é pai, quando o nosso aplicativo é iniciado. Então ele deve saber que ele tem que inicializar as configurações do Firebase para falar são para se comunicar com o servidor. Então, no arquivo principal, você simplesmente precisa ir a função principal e torná-lo uma pia. Então você tem que escrever widget, flertar suas ligações iniciar, garantir inicializar. Isso significa que o código que está agora abaixo será inicializado. E a próxima linha é acordada, Firebase, Firebase. E, em seguida, inicializar aplicativo que disse, este é o código que você tem que lembrar. Confie em mim, sempre que estiver usando o Firebase, essa é a primeira coisa que você tem que escrever. Em seguida, apenas o nosso aplicativo e integrar Firebase nele. Nenhum, é isso. A etapa final é executar o aplicativo. Você pode conectar seu emulador ou dispositivo Android físico para testar o aplicativo. E basta clicar neste Executar e, em seguida, começar a depurar. Seu aplicativo estará pronto para funcionar. E na próxima sessão, estaremos criando as UIs necessárias para o aplicativo de autenticação. Obrigado. 3. Criar e Login: Bem-vindo. Nesta sessão, criaremos nossa tela de login e registro. Porque, obviamente, quando precisaremos de algum tipo de interface do usuário para interagir com o banco de dados do Firebase, nosso aplicativo agora está sendo executado com sucesso. Saber que existe o que significa que o Firebase foi configurado corretamente. Vamos primeiro criar algumas pastas dentro do lib porque eu prefiro algum tipo de estruturas dobradas em vez de apenas colocar arquivos aleatoriamente. A primeira pasta que criarei modelos, depois telas e, em seguida, serviços onde Alda API são, os serviços de banco de dados, serão escritos na tela interna. Vamos criar um novo arquivo escuro chamado tela de registro. Vamos criar nossa primeira tela sem estado. Importe nosso pacote de material e, em seguida, crie uma região sem estado e nomeie a tela registra. Ele vai retornar um andaime como é uma tela. Então v, vamos dar barra AB e depois dar-lhe um título. Registro de texto. Vamos centralizar esse Titã e dar-lhe essa cor de fundo também. Dê-lhe cores que são excelentes. E no corpo, gostaria de lhe dar essa coluna. E essa coluna teremos crianças, mas antes disso, gostaria de ir ao nosso arquivo principal de pontos. E movemos esse código falso do PVS. E em casa, eu gostaria de escrever tela de registro. E nisso eu dou lá Firebase. Vamos reiniciar nosso aplicativo. Veja, esta é a nossa tela de registro. Agora, nosso índice e isso também está bonito. Agora é hora de criarmos campos de texto para coletar dados do usuário. Vamos criar nosso primeiro texto quando dada decoração. Dê-lhe uma declaração de entrada de rótulo, texto, e-mail e, em seguida, dando-lhes borda, linha, borda de entrada. E também para cada campo de texto temos que criar um controlador de edição de texto. Então, vamos primeiro criar os controladores de terminação de texto. Vamos criar primeiro controlador de e-mail. Em seguida, haverá então haverá um controlador de senha como quando controlador de palavras barramento, como este. Em seguida, o final será confirmado controlador de senha. Porque quando estamos nos registrando, gostaríamos que o usuário confirmasse sua senha. Caverna. Controlador de edição de texto é então nove este texto para em Vamos dar este controlador de e-mail. Ok. Depois disso, deu-nos caixa de tamanho apenas para dar algum espaçamento altura da Turquia. Em seguida, novamente criou TextField. Dê-lhe um controlador de controlador de senha, em seguida, dar-lhe decoração de entrada, rótulo, texto. Deve ser senha e, em seguida, dar-lhe uma borda de contorno, colocar borda e índice neste texto dará texto obscurecido é verdadeiro para que seja qual for o tipo de usuário está oculto. Então, novamente, dê-lhe uma caixa de tamanho. Diz que funciona. Então, finalmente, nossa senha de confirmação de TextField ocultou o excesso. Em seguida, controlador como confirmar controlador de senha. Em seguida, nessa declaração, dê-lhe uma decoração de entrada, senha de texto. E então delineando. Então caixa de bom tamanho. Novamente. Vamos guardá-lo e verificar. Veja todos os campos de texto estão lá. Agora é hora v dá algum preenchimento para ele, porque eles estão em dívidas para as extremidades da tela. E também um botão de envio. De modo que sempre que o usuário clica no botão Enviar, ele é tomado. Ele será levado para a tela inicial ou qualquer cor que queremos executar. Então aqui no corpo, vilão rápido, e dar-lhe um preenchimento de fazer D. Então, nessa coluna, dado principal existe alinhamento de mim próxima célula e centro Mendota. Então, tudo está centrado. Agora. Em primeiro lugar, vamos dar a um recipiente uma altura de 50. E na largura do tamanho da tela. A tela. Então vamos dar a forma de uma margem de manobra. Mas então, no local agora, não teremos nada. Naquela criança. Eu escreveria um texto, enviaria e daria algum estilo, como o tamanho da fonte de 25. E então espere, espere. Vamos economizar e verificar. Veja, está tão bonito agora. Após este botão enviar, eu gostaria de ter um novo botão, que irá apenas dizer login aqui para que o usuário possa fazer login se ele já tiver se registrado. Mais suave este recipiente, eu vou ter uma caixa de tamanho. Tamanho da caixa de altura dois. E leva, mas, em seguida, o próximo botão, que já terá um login de conta aqui. E agora guarde-o. Veja, nós temos este botão para que quando clicamos sobre isso, o usuário é enviado para a tela de login. Então é hora de criarmos tela de lobbying também. Então, na pasta de telas, crie um novo arquivo chamado de tela não-parente ponto-ponto. Mais uma vez, apenas em ambos os materiais. Criado estado menos rígido da tela de noggin. Em seguida, devolva um aplicativo andaime e o aplicativo, mas eu vou dar esse título. Login. E centralize o título. E eu vou dar cor de fundo de cores bigram ponto d. É uma cor esverdeada, cor de sombra. Agora, nesse corpo, farei novamente dois campos de texto. Mas antes de tudo, vou lhe dar a leitura porque sei que a roupa de cama será necessária. E inserções ponto D. Em seguida, nesse brilho, eu vou dar uma coluna. Em seguida, principal existe alinhamento, saídas principais centro lm.fit. Então, em que as crianças, vou simplesmente copiar da tela de registro esses dois campos de texto, que é o e-mail e senha, e colá-lo aqui. E também vou copiar os controladores de edição de texto. Ok. Agora, teremos depois deste tamanho, novamente, este botão que é este recipiente, que diz Enviar. Ok. Temos nossas telas de login configuradas. Agora é hora. Sempre que você usar alguém clica neste login aqui. Mas então ele deve ser navegado. Por isso. Nós só temos hoje Navigator Dot Push. Então, na rota, nós simplesmente temos que adicionar minha rota de página diária. Em seguida, deixe contextos e, em seguida, enviá-lo para a tela de login. Assim. Vamos salvá-lo. E agora verifique. Verifique a nossa aplicação. Temos esta tela de registro aqui. Agora, quando eu clicar neste login aqui, veja nossa tela de login aparece. Esse é o campo de e-mail e senha com o botão Enviar. E quando eu clico neste botão voltar, novamente, nossa tela de registro está lá. Então isso é tudo por este vídeo. Temos a interface do usuário. Em. Em seguida, na próxima sessão, vamos implementar a autenticação Firebase usando e-mail e senha. 4. Autenticidade usando senha de e-mail: Bem-vindo. Então, nesta sessão, vamos implementar Firebase, e-mail e autenticação de senha. Então, para isso implementar primeiro, temos que ir para o painel Firebase e clicar neste botão de autenticação. Em seguida, sob a assinatura que está aqui, se nós apenas temos que primeiro de tudo, clique em Começar e tarde. E, em seguida, esta assinatura, temos que adicionar um e-mail soldador e senha, basta clicar sobre este ágil e, em seguida, salvar. Mas veja aqui você pode ver provedores de adultos mais velhos que este telefone, Google, Facebook, Twitter, Microsoft. Isso nos dá muitas opções diferentes. Mas tudo bem, temos agora em primeiro lugar, quando este e-mail e senha, isso é o que é necessário. Depois disso, temos que implementar o serviço de autenticação. E para isso, temos que ir para nossa pasta de serviços e criar um novo arquivo chamado Art service dot dot. Ok? E aqui vamos implementar a lógica de autenticação Alda Firebase necessária. Agora, crie uma nova conta de usuário. No Firebase. Temos que chamar a função que é criar usuário com e-mail e senha. Pacote de arte Firebase nos dá um monte de opções diferentes que vamos discutir. Mas primeiro, vamos criar o serviço de arte de nome da classe. E a primeira coisa que temos que fazer é criar uma instância da arte Firebase. Então temos que adicionar arte Firebase. Depois a arte Firebase. E certo, eu era a instância R-dot. Então agora temos exemplo. Então aqui você pode ver que nos dá estudo. Ele nos dá as diferentes opções que veremos. Mas primeiro, vamos criar uma função para registrar o usuário. A função será um nome de função futura registrado. E esta função aceitará primeiro quando enviarmos um e-mail. E o segundo será a senha. Ok? Agora aqui você pode ver isso. A arte das fibras nos dá muitas opções diferentes. Isso é verificar números de telefone, assinar com números de telefone, entrar com e-mail e senha. Então é isso que exigimos e-mail e senha. E agora este e-mail é este. Esta senha é senha porque este login com e-mail e senha também tem dois parâmetros de e-mail e senha. E este resultado, vamos armazená-lo em uma variável chamada credenciais do usuário. E, em seguida, credencial do usuário. Porque se você passar o mouse sobre a assinatura com ele e senha, você pode ver que isso nos dá um futuro de credenciais de usuário não morreram. Agora eu vou simplesmente retornado credenciais de usuário ponto usuário. E este usuário é um tipo de dados deste usuário, que é uma função que pode ser retornada nulo também. Então eu vou apenas gostar de digitar estaticamente tipo ou tipos. Isso é altamente recomendado para que não haja confusão mais tarde. Então, criamos com sucesso nossa primeira função, o que nos ajudará a registrar nosso usuário. E você pode ver com os acordes muito fácil. Era apenas uma linha de código. É assim tão fácil. Agora, a partir da interface do usuário, que é esta tela de registro, nós temos que executar essa função também. Então agora vamos para este recipiente e pressione o botão. Em primeiro lugar, gostaria de dar algumas verificações IF. Ou seja, não quero que o e-mail e a senha estejam vazios. Então eu vou apenas escrever se controller.js texto é igual a Mt, nosso controlador de senha dot dx é igual a vazio. Se estiver vazio, então eu vou mostrar uma lanchonete usando mensageiro andaime que fora contextos ponto show snack-bar. E no conteúdo eu vou parecer dramaturgo, um texto de barbatanas é necessário e dar-lhe uma cor de fundo de cores mais escuras vermelho. A próxima verificação, se a verificação que eu gostaria de fazer é se texto do ponto do controlador de senha não é igual a confirmar a senha no controlador, ou seja, eu ganhei ambos os valores a serem vistos. Se não for o mesmo, então, novamente, mostrarei uma lanchonete com o retorno do valor. Senhas não correspondem. É isso. Na declaração final, liguei para a nossa aula de arte. Como este. Eu criei este objeto e este objeto. Vamos usar esta função de registro que aceita dois parâmetros. Primeiro é e-mail e segundo é senha. Então, para o e-mail, eu vou apenas escrever o Milken para lambda x. em para a senha, eu vou deixar o controlador de senha texto ponto. E agora isso nos retorna que um usuário não digitou. E vamos fazer isso aqui. E eu vou apenas verificar se o resultado não é igual a nulo. Ou seja, ele enviou dados com sucesso, então eu vou apenas escrever sucesso de impressão. E imprima o e-mail do ponto do resultado. Dito isso, ok, nosso código aqui está feito. Agora guarde-o e traga o nosso emulador. Então arquivo FASTA, Eu não vou digitar nada e basta clicar em Enviar. Veja, eu entendo este pescoço, mas Phil disse necessário. Então vou escrever um endereço, não falso. Está tudo bem. Eu não estou usando minha própria senha toda leitura. Dados 1, 2, 3, e, em seguida, aqui eu vou apenas escrever fugiu seus 12. Ou seja, se confirmar senha e senha não são os mesmos e clique em Enviar então site, mas não corresponde. E se eu clicar em um, se eu escrever a senha de confirmação corretamente e, em seguida, clique no botão Enviar. Acho que cometi um pequeno erro. Vamos verificar isso. No serviço AAD, acho que acabei de escrever login com e-mail e senha, que deve ser criar usuário com e-mail e senha. Então, foi um erro muito tolo meu. Mas agora você pode ver como você pode entrar também. Este código por si só define o que ele faz, é ele cria um novo usuário. Então, novamente, eu vou apenas escrever e-mail e senha. E agora, quando eu clico no botão enviar, veja no console de depuração que ele está mostrando sucesso. Agora vá para a tela de autenticação do Firebase e clique em Atualizar na tabela de usuários. Agora você pode ser capaz de ver este usuário o que quer que tenhamos registrado. Então, criamos e registramos com sucesso uma palavra, primeiro usuário. Então o provedor distinto, ele está mostrando que isso veio do e-mail e senha de assinatura neste e este, é, é UUID único. Agora, temos que criar uma função para este login também. Assim, da mesma forma na tela de arte, oh desculpe nossos serviços ponto ponto. Vamos ter uma função de login, que também é se o tempo futuro. Um usuário não digitou assim. E ele aceita string e string senha. E agora, assim como acima, temos este usuário DevOps pode polegadas. E vai esperar. Cinco é um ponto ímpar. Agora ele será entrar com e-mail e senha como este. Assim, o acima é criar usuário com e-mail e senha. E agora este é o login com e-mail e senha. E depois disso, vamos apenas retornar credenciais do usuário ponto valor do usuário. Ok? Então temos esta função de login ganancioso. Novamente. Da mesma forma como antes. Temos que ir para a nossa tela de login. E aqui devemos ter nossas declarações se else. Eu vou apenas para a tela de registro e copiar este código. E depois logins. Captura de tela escura, apenas colado dentro da imprensa. Então aqui nós não queremos este segundo else-if e apenas importar as bibliotecas necessárias. Ok, então a próxima mudança que você tem que fazer é em vez deste plugin. E é isso. Você simplesmente este tipo de aplicação. Verifique se está tudo bem. E agora testado. Agora, quando eu vou para este login e digite meu e-mail, que eu acabei de registrar. E agora, se eu clicar no botão enviar a partir da tela de login, vamos ver o que acontece. Veja está mostrando sucesso. Isso significa que agora estamos construídos para fazer login com sucesso também. Então é isso. Isto é muito fácil. Eu acho que você também pode estar pensando que usar o Firebase é bastante simples. O código é muito mínimo e ele faz esse trabalho em nenhum momento. Então isso é tudo por este vídeo. Vejo-te na próxima sessão. 5. Manejo para exceção: Nesta sessão, vamos falar sobre manipulação de erros. Então, até agora, não lidamos com os cenários em que o usuário pode acabar inserindo e-mail ou senha inválida enquanto qualquer um dos registros está tentando fazer login. Então, no último vídeo, você pode ter visto este tipo de ordem quando eu acidentalmente escrevi entrar e entrar com e-mail e senha em vez de criar conta ou criar com nome de usuário e senha lá, arte Firebase. Então, nesse momento também temos esse tipo de exceção. E isso foi mostrado assim porque nós não lidamos com isso sozinhos. Portanto, pode haver diferentes, diferentes tipos de exemplos à medida que entramos um formato de e-mail inválido ao registrar nossa senha incorreta durante o login, teremos uma exceção como abaixo. A ideia como esta. E ou assim e nossa aplicação vai ficar presa. Será uma experiência muito ruim para os usuários finais. E é por isso que temos que lidar com isso corretamente. Então, podemos fazê-lo simplesmente usando try catch block. Então tente pegar o bloco que eu uso para exercer como lidar com esse tipo de exceções. Então, primeiro de tudo, vamos fazer isso com nossa terceira função. Sim, exatamente certo. Tente. E então, uma vez que eles serão disparados com exceções, e eu gostaria apenas de mostrar a vocês no início que tipo de exceções. Então registre a tela. Vamos tentar usá-lo duas vezes. Só porque isso não é. Agora, vamos confirmar Fluxo 1, 2, 3. Agora, se eu clicar em Enviar, ver exceção ocorreu e isso é se firebase são a exceção, ele está dizendo que o e-mail já está em uso. Então esse tipo de cenários que eu estava falando. E no console de depuração aqui, novamente, você pode ver a exposição. E uma vez que era uma exceção estranha do Firebase. Então nós simplesmente temos que escrever isso em nosso bloco try-catch. Então aqui vou escrever “tente”. Então, na exceção de arte do Firebase, assim, vou pegar o erro. E no final, novamente, eu vou pegar se algo mais erros estão lá. - Não. Corte este código e cole-o no bloco try. Agora? Certo, temos esse bloco de teste. E se ocorrer alguma exceção, temos que mostrar um feedback ao usuário. E para mostrar uma lanchonete, precisamos de um contexto de projeto de lei. Então vamos pedir por contextos Bill também. E ele resiste ao contexto da pílula vermelha. E agora ele está mostrando esse erro na capa do registro porque nós temos que enviar contexto também. Agora, leia este projeto de lei contextos ilegalidade simplesmente mostram um mensageiro andaime. Ponto de contexto show snack-bar. No bar. Vamos ter conteúdo, texto, mensagem ponto dois string. E vamos ter uma cor de fundo de cores começar a ler. Ok, e aqui esta dispersão, nós apenas imprimi-lo por enquanto você, se você quiser, você pode mostrar o andaime novamente. E estou dizendo isso novamente que estamos usando ímpar porque sabemos que a exceção será do Firebase. E se algo novo aparecer, será tratado por este bloco de captura. Ok, vamos tentar a mesma coisa novamente e ver se o nosso aplicativo fica preso ou não. A senha. Ok. Agora, quando eu clicar em Enviar, ver o imediato, isso já está em uso por outro elétron. Então isso é tão bom então antes de nossa aplicação não está presa agora. Agora vamos fazer a mesma coisa para a nossa função de login é executado. Vamos tentar. Em seguida, no Firebase, exceção estranha. Vamos pegar. Então a última resposta teremos um bloco de captura. Mais simplesmente, tenho isto daqui. Eles afirmam. Aqui novamente, vamos mostrar um obstáculo, mas como antes. E para isso, em primeiro lugar, temos que aceitar esse contexto de projeto de lei. E neste eu vou dizer apenas imprimir. Agora vá para login skin ponto-ponto. E aqui onde estamos chamando a função de login, temos que enviar esse contexto. Ok? Nossa aqui, esta parte está feita. Vamos verificar com o nosso login, bem como dar algo que não está sendo registrado. Este e-mail não é cadastro. Então vamos ver se eu clico no Enviar. Apenas para envolver novo registro de usuário correspondente a este identificador, o usuário pode ser excluído. Então, pelo menos, eles sabem que o usuário não é válido. Eles devem registrá-los primeiro e, em seguida, tentar fazer login. Então, aprendemos como lidar adequadamente com as exceções como esta. Então isso é tudo por este vídeo. Espero que tenham gostado de hoje aprendendo algo novo. E Q 6. Indicador ao realizar a autenticação: Oi. Então, sem dúvida, você conseguiu lidar com exceções, mas não fez. Agora não estamos dando qualquer feedback para o usuário quando ele clica no botão Enviar ao tentar registrar nosso login. Esta não é uma boa prática, pois o usuário final nem sabe que a solicitação está sendo enviada do celular. E ele não deve clicar em nenhum outro botão, a base. Quando um usuário clica no botão enviar, ele não deve ser capaz de clicar no botão enviar novamente até que ele dá, ele recebe algum tipo de feedback do servidor. Ou então haverá alguns erros porque haverá várias solicitações com os mesmos dados. Então, a melhor maneira é mostrar algum indicador de carregamento para que eles usam também saber que ele tem que esperar. E para mostrar um indicador de carga. Primeiro passo importante é converter o nosso widget apátrida fazer propriedade completa rígida. Então, em seus registros limpos, É simplesmente ir. E agora converta isso para um estado cheio, estado rígido cheio porque assim, o estado da interface do usuário vai mudar uma vez que ele vai mostrar um indicador de carregamento. E isso é da próxima vez, ele mostrará o botão enviar. E para lidar com esse tipo de valores verdadeiros e falsos, devemos criar uma variável booleana chamada loading e dar-lhe um valor padrão de false. Quando um usuário chega a este espaço, ou seja, não há indicador de carregamento quando esta página está sendo renderizada. Agora, temos que usar declarações condicionais. Isto é, se for o caso. Para emitir um indicador de carregamento são um botão de envio. E uma vez que é apenas uma linha de código, vou usar um operador ternário. Então eu vou limpar aqui mesmo, carregando. Se for verdade, mostre um indicador de progresso circular. Se não, em seguida, mostrou este recipiente, que é o botão, botão Enviar. Vamos salvá-lo. Mas até agora, acabamos de ouvi-lo, então, este operador ternário. Mas devemos definir esta data quando este botão de envio está sendo pressionado. Então aqui temos dois conjuntos. O carregamento do estado é igual a true. Então este pedaço de linha será executado. E depois que ele foi executado com sucesso, temos que definir o palco novamente para falso para que, se alguns são sucessos, então, depois disso, nosso indicador de progresso de carregamento está sendo removido. Vamos experimentá-lo. Vamos derrubar a tela. Naquele e-mail. Vamos escrever pela base aérea. Ao ritmo. Gmail.com dá-lhe o valor de 123123. E agora clique em assim alguém, mas veja, este é o indicador de carga. E agora, depois de ter sucesso que o indicador de carregamento é removido mola. Você pode ir para o Firebase console e atualizar para que você possa verificar. Veja que este endereço de e-mail também está sendo registrado. Este terceiro no servidor. Vamos fazer a mesma coisa para a tela de login. Ou seja, devemos mostrar um indicador de carregamento aqui também. Primeiro, vamos converter isso em um widget stateful. Em seguida, criar um booleano de carregamento, deu-lhe um valor falso, valor padrão. Então aqui, operador ternário. Vamos escrever se é verdade, em seguida, mostrar um progresso circular no, Se não apenas o recipiente. E quando isso na imprensa é pressionado, então o indicador de carregamento será verdadeiro. E no final, o indicador de carregamento definiu como falso para que saibamos que a coisa do servidor é 10. Vamos salvá-lo. Vamos para a nossa tela de login. E isso é certo. Onde base e T min.com e senha. Está bem. Vamos clicar no botão enviar e ver o indicador de carregamento. E nós temos esse sucesso. Então isso é tudo o que temos mostrado com sucesso um indicador de carregamento enquanto há uma solicitação para o servidor. Porque estas são muito pequenas, pequenas mudanças, mas isso afetará o desempenho. Ou você pode dizer que a conveniência do usuário é para sua aplicação. Obrigado. 7. Verificação de autenticação: Olá, bem-vindo de volta. Nesta sessão, vamos verificar se o usuário já está conectado ou não. Tão bom, suponha que o usuário tenha logado com sucesso. Mas e se ele fechasse a nossa candidatura e começasse de novo? No caso, não queremos que o usuário insira suas credenciais novamente, novamente. Mas, em vez disso, devemos verificar se esse usuário já fez login antes. E isso pode ser implementado com muita facilidade usando o Firebase. Mas antes disso devemos criar isso. Devemos criar um novo arquivo de tela inicial dentro do diretório da tela. Vamos para as telas e, em seguida, criar uma nova tela inicial, ponto-ponto. Sim, vamos importar nosso material como sempre. Vamos criar uma tela inicial de região sem estado. Depois, este café. Então vamos dar o título. Texto. Em seguida, centrado diretamente através de cores de fundo, rosa. Desta vez. E ações, Eu gostaria de dar um botão de Logout. Então, apenas um ícone de ponto de botão de texto na imprensa será MD. Eu posso, eu vou dar, eu posso começar Love Out. E no rótulo, vou simplesmente dar-lhe texto de logout. Ok. E este sinal de saída. Estude este botão. Eu gostaria de dar algum estilo também para esse botão, não rotular o botão em si. E eu vou apenas dizer texto, mas então esse estilo de e em que primário. E começamos como se tivéssemos nossa tela inicial pronta. Mas também devemos ter certeza que, quando um novo usuário registrou nosso login com sucesso , ele deve ser navegado para esta tela inicial. Anteriormente, estávamos apenas recebendo uma resposta no console de depuração. Para isso, basta ir para a tela de registro e ouvir se o resultado não é igual a null. Vou simplesmente escrever ponto navegador, empurrar e remover. Até. E então nova rota. Vou dar o layout da minha página. E eu vou simplesmente escrever tela inicial. É isso. Fácil como isso. E a mesma coisa, eu vou apenas copiar e colá-lo, em seguida, tela de login aqui e importar a nossa tela inicial. Então VI usando ajudou a empurrar e remover até. Você pode estar pensando, por que não estou usando substituto? Porque o único problema aqui está nesta tela de login. Não é a escala final, é usar o Push que é outro topo fora de outra tela. É, é uma pilha e é um tipo de resistor. Então, a partir daqui, se eu pressionar um substituto, ele irá para a tela inicial, mas com o botão Voltar. Então a solução é que o pai adotivo tem que usar o ponto do navegador. E então eu posso usar o ponto do navegador. Empurre o posicionamento nesta tela de login. Mas eu simplesmente gosto dele e eu simplesmente uso isso. Remova tudo e basta empurrar a tela. É isso. Então vamos experimentá-lo. Se está funcionando ou não. Espere um pouco. Espero que seu sistema seja poderoso o suficiente, porque às vezes enquanto você está usando o Android Studio ou este emuladores, o gerenciamento de RAM não é bom na maioria das peças. Então vamos experimentá-lo. Vamos ver. Dê a senha correta. Ok. Clique no botão Enviar. Veja, ele está funcionando tão bem que nós adicionamos diretamente enviado para a nossa tela de login aqui. Mas e se eu reiniciar este aplicativo? Então, se eu reiniciar este aplicativo, a tela de registros está lá e v não são enviados diretamente para a tela inicial. Então isso pode ser implementado são isso deve ser alterado. Firebase arte e nos permite subscrever a OTT stream em todo o estado. Isso é chamado de fluxo fornece um evento imediato do estado de autenticação atual do usuário. E depois disso, ele posteriormente fornece eventos sempre que o estado de autenticação muda. Em palavras simples, o Firebase nos dá a opção de ouvir essas alterações na autenticação do Firebase. Vamos para o arquivo main.js. Aqui. Na escola em casa. Você simplesmente tem que escrever fluxo quando eles estão. Então. Assim, fluxo. Usaremos nossas alterações de estado de ponto firebase ponto de serviço. Então, aqui se você passar o mouse sobre o mar, ele nos dá um fluxo com os usos Value notifica sobre alterações no estado de login do usuário, como iodate assinar nossa saída. E uma vez que é uma string que eles tomam e os fluxos continuamente, construtor, temos como usar contexto e esse instantâneo aqui eu vou simplesmente escrever se dados de ponto instantâneo, então nós voltaríamos tela inicial. Mas se não, então retornaremos a tela de registro. Este pedaço de código significa que se o instantâneo não é nulo, então definitivamente obter tem que ser algum valor do usuário que desculpe, devemos retornar a tela inicial. E se for nulo, então devemos devolver o débito está testando. Agora que a nossa aplicação, você vai ver que vamos enviar diretamente para a tela inicial. Veja aqui, já que nosso aplicativo já sabe que o usuário já fez login antes. Este é um conceito muito importante porque a maior parte do aplicativo, você não quer que o usuário tenha uma má experiência de amado automaticamente. É isso. Por hoje. Na próxima sessão, vamos implementar como assinar quando cozinhamos bem, porque e-mail e senha é bom. Mas agora a maioria do aplicativo moderno permite que os usuários usem seus logins sociais também. Vejo você na próxima sessão. Obrigado. 8. Configurar o projeto para no Google Sign: Oi. Nesta sessão, vamos aprender como implementar o login do cobalto. Assim, nos últimos vídeos, aprenderemos como autenticar o usuário usando seu e-mail e senha. Mas hoje em dia, em cada aplicação moderna, o auxílio é uma opção para autenticar o usuário usando bons logins sociais. Ou seja, fiz o Google, Facebook, LinkedIn, o que for. Então, hoje vamos aprender como implementar o login do Google usando Flutter e Firebase. Então, o primeiro passo é gerar e chave SHA. E você pode estar perguntando para que é a chave do SHA? Ela chave é necessária para implementar o Google, nossa autenticação de login de telefone no Firebase, é uma chave única gerada para o seu PC que pode ser usada para assinatura. Então debug KeyStore é um exclusivo para cada sistema e é automaticamente mantido pelo Android SDK. Então você só tem que lembrar que a chave de depuração é necessária quando estamos testando. E há um azarado chamado uma chave de liberação é necessária quando estamos submetendo para colocar também. Então, agora surge a pergunta, como obtemos essa chave SHA-1? Então, primeiro, você precisa encontrar um local após depurar arquivo KeyStore, que está dentro da pasta Android SDK no meu PC Windows 10, esse local é Arquivos de Programas, Android, android Studio. Vamos lá ver isso. Vamos para o Explorador de Arquivos. Então. Então arquivos terrestres, android, Android Studio, GRE, então foi vamos verificar GRE então quando. Então, neste local, traga sua linha de comando. E simplesmente depois disso, você tem que digitar esse comando e pode pausar o vídeo e escrevê-lo assim. E então você simplesmente precisa pressionar Enter. É isso. Você vai obter esse tipo de valor de saída, vai encontrar MD5, SHA-1 e SHA-2 256. - Tudo bem. Então, uma vez que é uma informação muito confidencial, então você não deve compartilhar isso com outras pessoas. Agora, basta copiar a chave SHA-1. Traga seu painel do Firebase. Vá para a configuração do projeto. E então aqui, você simplesmente tem que adicioná-lo assim e, em seguida, salvar, baixar os mais recentes serviços do Google Jason. Em seguida, corte-o. Em seguida, aplicativo Android, remova o arquivo JSON anterior e basear este. Você me dá o nome? Lembre-se que você não deveria. Não deveria haver esse tipo de “1 “novamente, simples serviços do Google, Jason, é isso. Então é assim que se faz. Após sua morte, basta parar sua sessão de depuração e começar novamente. próximo passo é habilitar a autenticação de login do Google. Vá para a tela de autenticação, que é Dashboard. Em seguida, vá para o método de entrada. E espere, eu vou parar com isso porque nós temos que instalar dependências também. Aqui você simplesmente precisa ir ao Google e, em seguida, ativá-lo. Aqui, selecione um endereço de e-mail e simplesmente. Clique em Salvar. Ok, Agora você habilitou com sucesso o login do Google. O passo final é ir para o desenvolvimento e obter as dependências necessárias como a assinatura do centro do Google. E o primeiro que você recebe, você tem que instalar em seu YAML. E depois disso, outra dependência necessária é o login na Web do Google e instalá-lo também. Então, sim, você tem sucesso e login do Google. Em seguida, o próximo passo é criar um botão em nossa tela inicial para mortos. Mas, novamente, eu estou usando um pacote porque eu não quero criar um botão no meu próprio arquivo de coisas que o bug e o lead time que ele está sendo executado. Gostaria de ir ao dev e obter o botão de entrada. Sim, este aqui. Como você pode ver, você obtém diferentes tipos de botões de login social social. Por isso, é muito mais fácil para você obter essa imagem e o olhar desejado com este plugin. E apenas copie. E nosso aprendizado e depuração. Demora algum tempo. Autenticação é um processo. Pode obter documentação, são Via mídia, mais Stack Overflow. Sim, muitas opções. Apenas ignorou este tipo de erros. Dessa vez seu Gradle está correndo e não parou. Até lá, estamos prontos para ir. Ok, então eu acho que nosso aplicativo agora está com sucesso. E um bom estudo é pesado, mais suave. Então eu estou apenas assumindo que seu sistema é forte o suficiente para lidar com o gerenciamento de RAM. Então, já que fizemos isso, verifique na pintura, é por isso que estamos recebendo a tela inicial agora que não implementamos este sinal, não desta maneira. Irei diretamente para o principal. E aqui em vez de H4, longe dos vivos, vou retornar a tela de registro para que possamos trabalhar nele. Ok, agora vá para a tela de registros. E agora abaixo do convés, mas, em seguida, dar uma caixa de tamanho. Altura. Duan De. Então dê uma divisória. Rígida. Em seguida, novamente é tamanho caixa de fazer isso ou aquele espaçamento está lá. Agora vou usar o botão de entrada. Então eu vou dizer apenas assinando. Acho que não não instalei as nossas dependências. Vou apenas copiar. E agora espere mais alguns segundos. Ok, então eu vou promover fundos em ambas as assinaturas, mas pronto. Está bem. Agora aqui vou escrever sã. Mas então, em seguida, o primeiro morcego que eu estou feito, eu vou apenas dizer, mas, em seguida, começar o Google. Em seguida, o segundo parâmetro, vou dar texto e vou continuar com o Google. E na imprensa, por enquanto. Eu não vou fazer nada porque no próximo vídeo vamos implementar a funcionalidade agora, a menos que vamos trabalhar na parte da interface do usuário. Vamos verificar isso. Veja, aqui temos esse botão, continue com o Google. Então está parecendo decente. Direi, pelo menos, que nos dá a sensação de que também temos outras opções. Então, espero que você tenha entendido como configurar o login do Google. E esta chave SHA-1, você pode, se você está achando difícil, você pode ir e corno tem soluções se você não está obtendo em seu sistema. Mas isso é muito necessário se você estiver usando o login de telefone, login do Google, ou qualquer tipo de recursos diferentes que auto, Isso é tudo para este vídeo. Vejo-te na próxima sessão. 9. Implemente o Google de entrar e sair: Por enquanto, é estilo quando você aprende a implementar a funcionalidade de login do Google. Longe que simplesmente trazer para fora o seu código VS. Vá para o serviço de arte. E agora, na parte inferior, vamos anotar o código. Basta dar um comentário do Google. Entrar. Ok, agora vamos jogar seguro futuro, que retornará como um usuário, vou limitar o login com o Google. Agora, o primeiro passo é acionar uma caixa de diálogo de ditados 10. Ou seja, as opções são a caixa de diálogo para escolher sua conta do Google. Para essa simulação. conta de assinatura de fogões pode ser nula. Nomeie usuário do Google, e simplesmente aguarde o usuário de login de glicose. sessão no Google. Assine. Está bem. Então este código traz esse menu pop-up para escolher sua conta do Google. Então, pode ser nenhum esquerda é o usuário clica no botão, são ele não escolheu qualquer conta. Então temos que verificar se um usuário não é igual a null. E verifique se não é igual a nulo, então obteremos detalhes da solicitação. Ou seja, o código será final. Autenticação de assinatura é igual ao usuário dot atendeu a um tíquete 10. Está bem. Depois disso, criaremos uma nova credencial. Criar novo. Ótima. Então a canela. Shin é igual à nossa credencial DOT de dados. E, em seguida, token de acesso, vamos escrever token de acesso. E eu fiz embora pode ser token de ID do Google. Uma vez conectado. Usaremos dados da tempestade de fogo. Veio que o fogo começa 35 base. Agora é usuário, usuário credencial e em chinês vai fazer um peso. Agora vamos entrar via Firebase. Anteriormente, era apenas o código necessário para essa parte do Google. Agora vamos finalmente assinar com credencial, esta credencial e enviar o nosso cadencial, que é a credencial. Isto está sendo devolvido pelo Google. Então temos que enviar isso para nossa base para garantir que temos permissão legal para acessar. E simplesmente classifique. Finalmente, o usuário ponto de credencial do usuário. Também vamos fazer essa coisa está em um bloco tentar pegar. Porque nunca se sabe se algo corre mal assim. E simplesmente o tempo de disparo. Imprima o adicionado no console de depuração. Então a coisa é, esse código, não é como se você tivesse que aprender de cor. Você só tem que saber. E sempre que necessário, você receberá este código. Este é um código muito básico. Fica muito difícil de lembrar, aprendê-lo, vem pela prática. Então agora temos a função pronta. É hora de atribuir a função de login do Google a esse botão. Este botão, que está na tela de registro. Então aqui em vermelho é a área. Continue com o Google. Sim, aqui. Vou preferir coisas. Certo? Torná-lo, em seguida, uma função sinc. E direito disso. Os serviços fazem login com o Google. Mas eu também me pergunto carregando individualmente para mostrar. Então eu vou apenas escrever se o carregamento é verdadeiro, então mostra um progresso mais frio. Vou mostrar este botão como fizemos antes. E eu vou definir o estado como sendo verdadeiro. E então disse, faz o estado como carregamento é igual a falso. Certo, vamos tentar. Clique no botão Continuar com COVID. Veja, agora isso será mostrado. Escolha uma conta. Vou selecionar minha conta. E depois sim, Alden. Veja, neste momento não estamos navegados só por causa dessa razão. Fizemos essa mudança no ponto principal simplesmente novamente torná-lo tela inicial. Agora você pode ver via enviado diretamente para a tela inicial porque já estamos autenticados. Então, espero que você tenha entendido como usar o login no Google. Este pedaço de código é exatamente o que é necessário. E então você tem que ligar esse pedaço de metal com nossa interface assim. E esse carregamento é apenas para que o usuário tenha um feedback. Agora, finalmente, temos que ter certeza de que nosso botão de sair está funcionando. Porque sem ele não podemos ver, não podemos praticar ou não podemos testar nossa aplicação. E eu vou para a tela inicial. No entanto, o butanês nas ações, simplesmente torná-lo uma pia. E certo, o que devemos fazer, devemos criar uma função separada nesse serviço. Aqui. Nós simplesmente temos que escrever o futuro, nos inscrever assim. E simplesmente escrever aguardar assinatura do Google dot psi nada porque é necessário quando estamos usando o pacote do Google, temos que ter certeza de sair para que possamos escolher outra conta, se quisermos. E também temos que sair da nossa arte Firebase assim. Então temos a nossa função ir para o significa tela inicial. Aqui, basta escrever serviços OT, pontos, sair. Faça isso. Está bem. Agora, vamos testá-lo. Se está funcionando, espero que funcione. Agora o que deve acontecer é se clicarmos neste sinal, devemos ser automaticamente levados para a tela de registro de logins por causa deste código. Vamos ver. Veja. Nós não governamos e em código de navegação em nosso cadastro. Mas é, é, ele já nos levou a esta tela só porque temos nosso construtor de stream e ele está verificando as mudanças de estado de arte continuamente. Então, se algo acontecer, voltaremos para a tela inicial. Agora, finalmente, se eu clicar novamente em continuar com o Google, escolha minha conta. E agora vamos ver se ele é direcionado para a tela inicial. Veja, estamos diretamente navegados para a tela inicial. Portanto, nossa parte de autenticação está concluída e está funcionando perfeitamente. Espero que tenha aprendido muito hoje. No próximo módulo, vamos falar sobre esse banco de dados porque agora é hora de reintegrar dados reais. E também vamos criar um ou um aplicativo muito básico, bem na próxima sessão. Então é isso. Apenas continue praticando. 10. Começar com o Firestore: Olá, bem-vindo a esta nova seção. Vamos falar sobre o banco de dados Flutter Firestore. Então, nossa camada, temos implementado com sucesso a autenticação. Mas obviamente temos que ter algum tipo de armazenamento de banco de dados. Esse é o banco de dados onde armazenaremos todos os usuários ou os dados de emissões. Esses dados não podem ser armazenados apenas no dispositivo do usuário porque, nesse caso, eles podem ser sincronizados em outros dispositivos. Então Firebase nos dá opções de dois banco de dados. Ao acessar o painel do Firebase, você verá que há um banco de dados em tempo real e os dados são um Firestore em nuvem. Cloud Firestore são os dados mais recentes com e que usaremos. Mas pelo menos você deve saber que pequena diferença entre os dois. Comprei nuvem Firestore e banco de dados em tempo real. Dados NoSQL com que não há junções, colunas ou tabelas nele. A principal diferença entre os dois é que a nuvem Firestore contém coleções e dentro dessas coleções você tem documentos. E dessa forma contém sub-coleções são frescuras. Mas no banco de dados em tempo real, ele consiste de um grande Jason que irá conter todos esses dados. Então a dívida não é nada como o documento de cobrança. Não é, não está estruturado corretamente. Ele é lançado como um grande Jason em banco de dados em tempo real. Firestore é.. firebase, mais recente data que foi para o desenvolvimento de aplicativos móveis. Ele se baseia nos sucessos do banco de dados em tempo real com um novo modelo de dados mais intuitivo. Cloud Firestore também apresenta cáries mais ricas e mais rápidas e escalas do que o banco de dados em tempo real. Então, em palavras simples, escolheremos o Cloud Firestore entre o azul. Agora, nosso primeiro passo será configurar o Firestore em nosso aplicativo. Então, já configuramos com sucesso o Firebase em nosso Android, bem como baixar o arquivo Google JSON e inicializá-lo. Agora é hora de habilitarmos essa nuvem Firestore. Vá para o painel do Firebase aqui. Clique no banco de dados Firestore. Depois disso, você verá algo como este verde, que é o Cloud Firestore. Em seguida, crie o banco de dados. Você tem que simplesmente clicar em Criar banco de dados. Depois disso, você deve escolher o modo de teste inicial, porque configuraremos as regras de segurança mais tarde. E depois disso, você só precisa selecionar o local padrão e clicar em Concretar o banco de dados. E então você verá algo assim. Esta tela é onde todos os seus dados serão armazenados. Depois de habilitar com sucesso o Cloud Firestore, temos que instalar essa dependência também, é simplesmente bom ter. Em seguida, procure a nuvem. Firestore. Clique no primeiro e simplesmente copie essa dependência. E com base em Nova York aparece aqui. Então, tudo bem, nossa dependência foi instalada corretamente. Agora, o próximo passo é entender esse modelo de dados Firestore em nuvem. É assim que os dados são estruturados dentro desse arquivo armazenar o banco de dados. Antes de definirmos nosso código, meus testes. Ao contrário do banco de dados SQL, dados, tabelas são regras no Firebase. Então, se você está vindo do MySQL ou PostgreSQL, as outras tabelas regras conceito nele. Mas em vez disso aqui usar dados em US TO dados em documentos que são organizados em coleções. Então aqui você pode ver os usuários, esta é uma coleção. Em palavras simples, apenas tente entendê-lo como uma tabela. Ou seja, qual é o nome da coleção que os usuários postam. Em produtos. Este tipo de julgamento chamado coleções e coleta de insetos, dados individuais são chamados documentos. Então aqui você pode ver que há este usuários e um ID de documento deste ID aleatório. E este documento tem esses valores. É endereço, idade, nome imune. Endereço é novamente um mapa, e este é um inteiro e esta é uma string. Então é assim que um dado básico, como eles basicamente amarram armazenados na loja de bombeiros. Os documentos devem ser armazenados em coleções. Os documentos podem conter subcoleções. Veja, aqui está. Comece a coleção que está dentro dela. Novamente você tem é, você pode andar direito? Gosta do nosso post comentários aqui novamente, você pode escrever uma nova coleção. E todos esses documentos podem conter sentimentos primitivos como cordas. São objetos complexos, como lista, mapa. Isso pode ser tipo de valores que podemos armazenar em. Então é isso. Instalamos com sucesso o Firebase e entendemos o modelo de dados também. Na próxima sessão, discutiremos como fazer operações crud nele. Obrigado. 11. Entendendo operações CRUD: Oi. Nesta sessão, vamos entender como executar operações crud. Ou seja, como criar, ler, atualizar e excluir dados no Firebase. Apenas para este exemplo, não estaríamos criando quaisquer serviços separados classificados como estamos apenas discutindo os conceitos básicos e implementando-os de uma maneira simples. Então primeiro temos que criar uma nova instância Firestore. Então, como fizemos na autenticação, temos que criar arquivos Firebase instância ímpar. Da mesma forma. Aqui se tivermos que criar uma instância Firestore. Então vamos fazer isso. Traga seu editor de texto. Vá para a tela inicial. Aqui. No topo. Vou simplesmente criar uma instância Firebase, Firestore. Firestore é igual a cinco maneiras. Instância de ponto Firestone como esta. Nossa instância está feita. Em seguida é chamado de referência de conexão. Referência de coleção significa o que deve ser o nome da coleção que está aqui, usuários ou o que você quiser. Então, a referência da coleção também é uma coisa muito importante. Para deixar começar com a função de criação que esta criar dados nesse banco de dados. Para adicionar uma nova coleção de documentos, usamos o método add, referência de coleção Annette. Vamos fazer isso. Vamos tentar fazê-lo. Depois do bar AB. É um corpo, aquele corpo. Vamos pegar um contêiner. Contêineres, o que significará consulta de mídia, contextos de ponto, tamanho de ponto, largura de ponto. Então vamos ter um filho, dê-lhe a coluna. Média X é alinhamento. Quero dizer, existe alinhamento ponto centro, em seguida, cruzar eixo alinhamento, grama centro extracelular. Então vamos ter filhos. Que crianças, vamos criar um limitado mas vamos dar-lhe um filho de texto e dados para armazenar. E na pressão do braço, vamos disparar o timing. Mantenha-o vazio para que eu possa mostrar-lhe na interface do usuário, a interface do usuário. Veja aqui, nós temos que adicionar dados ao Firestore. O primeiro passo foi criar uma instância que já fizemos. Aqui. O segundo passo foi criar uma referência de coleção. Então, aqui, vamos criar uma referência de coleção. Usuários é igual a Firestore, que é a nossa instância, coleção de pontos e nomeá-lo usuários. Agora isso é apenas mais uma referência onde queremos inserir os dados. Então, para inserir, mas eles têm dados específicos. Aqui estamos usando o add meu 10. Então adicionar método cria dados com um ID exclusivo para executar anúncio se é um futuro. Então vamos usar assíncrono esperar conceito. E nós simplesmente escrevemos esperar usuários ponto adicionar C aqui. Agora, é assim que adicionamos dados ao Duff Firestore. Agora, adicionar aceita dados em um mapa que é chaves em profundidade. Então temos que enviar dados no par chave-valor 7, este nome, Vou usar a chave como nome e valor como. Como este. Este será o nosso primeiro usuário. Então vamos experimentá-lo. Se eu clicar neste Adicionar Dados, a tempestade de fogo. Eu acho que isso pode mostrar alguma coisa apenas pela razão de que nós não reiniciamos nosso aplicativo. Assim, sempre que você instalar qualquer nova dependência, certifique-se de reiniciar o aplicativo. Vamos reiniciar significa que você tem que parar e, em seguida, começar a depurar novamente. Vamos ver, vai funcionar agora? Eles nos emprestaram esperar. Para eles se apresentarem. No Firestore são muito simples. Veja aqui é só com a adição. Podemos adicionar dados com um ID de documento exclusivo. E quando eu disser documento de identificação, vou mostrar-lhe o que eu quis dizer com isso. Temos que esperar mais alguns segundos. A maior parte depende do seu sistema. Agora está compilando, dependência, esse tipo de dependências. Mas não estamos usando isso na autenticação, está feito. E nas regras aqui, como fizemos no modo de teste, é por isso que as regras são públicas. Mas quando estamos usando para produção, isso não deveria ser assim. Certo, temos nosso aplicativo funcionando. Agora, quando eu clicar sobre isso para Firebase e, em seguida, ir para os nossos dados, espero que seja para ver os usuários. Em seguida, documento e, em seguida, esse valor que é chamado Nahal. Por isso, introduzimos com sucesso os nossos primeiros dados. E isso é o que eu estava explicando que é um ID de documento exclusivo quando usamos a função add aqui assim. Então você pode estar pensando, ok, então qual é a segunda função? Então, além de AD, há um outro método chamado conjunto de pontos. Então, se você gosta de especificar seu próprio ID de documento, devemos usar o método set nessa referência de coleção. Como este. Vou elogiar o acima. E então eu vou simplesmente escrever usuários, que está acordado, usuários dot doc, em seguida, dar-lhe o ID do documento. Vou chamá-lo tremulado de 1, 2, 3. Então, defina assim. Então, novamente, dentro do set temos que enviar um mapa. Vou dar o nome do valor. E assim a chave é o nome como valor do Google. Está bem? Agora salve-o e confira. Então eu estou explicando novamente, quando estamos usando o método add, ele adiciona um novo ID gerado automaticamente, que é ID do documento. Mas quando usamos definir minha caneta, podemos especificar nosso próprio documento ID. Agora vamos clicar sobre o adicionar dados ao armazenamento de arquivos. Vá para os nossos dados e veja que temos este Flutter 1, 2, 3. Então, isto de que eu estava a falar, isto não é uma identificação única. Nós especificamos isso por conta própria. E então enviamos um valor que é o nome Google flutter. Então, criamos os dados com sucesso. Agora é hora de lermos dados dos arquivos do Firestone Cloud para dar a você a capacidade de ler o valor de uma coleção de um documento. E isso pode ser cem, cem e dez graus são fornecidos por atualizações em tempo real em palavras simples. E podemos ler uma coisa que é, vamos ao banco de dados, pedimos w, e então retornamos. Se algo mudar no banco de dados dessa vez, nossa interface não se importa que é porque ele foi à frente de uma vez. Vamos fazer isso. Vamos criar nossas funções de leitura também. Então abaixo deste elevado, mas então eu vou criar um novo botão, novo botão elevado. Nomeie em dados de leitura do Firestore. Então, no local, será uma função sinc. Agora, novamente, teremos uma coleção de amigos. Usuários é igual a coleção Firestore. E lembre-se, você pode fazer tudo isso em uma linha de código também. Você não precisa especificar a referência da coleção assim. E apenas fazendo isso para explicar o conceito. Então, agora temos, estamos criando uma variável. É resultados e, em seguida, aguardar usuários. Obter. Então ele vai ler uma coleção que ele vai obter os dados de cobrança de dívidas, todos os dados que é qualquer valor que eles têm. Então, uma vez que eles terão vários valores, vamos escrever nossos resultados docs ponto, ponto para cada um. Esse intervalo para cada documento. Assim, ele terá o resultado do instantâneo do documento. E então você vai simplesmente imprimir dados de ponto de resultado como este. Vamos ver o que eu fiz. Então vou explicar-te outra vez. Temos nossa UI que é este ler dados de arquivos. Então, quando eu clicar sobre ele, ver que você tem ambos os dados que estão no telefone mapa você pode ter retornado saída? Então, quando recebermos um pedido em uma coleção que está aqui, esta coleção, ele nos dará todos os documentos. Então é por isso que teve nossos resultados docs ponto porque é fluido e você pode ver, mas você vai entender que todos os documentos e em seguida, para cada V estão looping através dos documentos. Já que temos uma lista de todos os documentos. É tão simples quanto isso. Agora você pode estar pensando, ok, se eu não quiser ler toda a coleção, mas eu quero ler um documento em particular. Ou seja, eu só quero ler esta desvalorização Flutter, como obter esse valor particular. Então, para isso, novamente, vamos tentar. Vou comentar para baixo a consulta acima. E eu vou escrever documentos instantâneos, documentos distintos instantâneos. O instantâneo. Então documentos resultado instantâneo é igual a aguardar usuários dot doc e qual documento queremos, já sabemos o ID. Então, terceiro, 123. E depois o Bud fica assim. E depois disso, vou simplesmente imprimir os dados do resultado. Vamos ver se está funcionando ou não. Agora, quando eu clicar em ler dados, ele vai apenas mostrar-nos aquele dia em particular, em seguida, nem todos os documentos nessa coleção. Então é assim que você busca um documento em particular. Fizemos o ID do documento do usuário, desculpe, fizemos o ID do documento. Então eu disse que o Firestore nos dá duas opções para ler dados. Aprendi que é uma vez, vamos apenas ler dados e ouvir mudanças em tempo real. De Firestore nos dá uma opção para continuar ouvindo qualquer alteração de dados acontecendo com os dados e, em seguida refletir nossa atualização de nosso aplicativo em tempo real, que é sem atualizar nossa página. Isso pode ser feito usando esse conceito chamado streams. Assim, oito fornecem suporte para lidar com alterações em tempo real tanto para a coleta como para o documento específico. Então você apenas se lembre de você apenas lembrar daqui, bordo que referência de coleção e documentar seus amigos, fornecer uma função instantânea que retorna uma string. Você pode usar o StringBuilder Ali, ouvir minha tecnologia para assinar esse fluxo e ouvir as mudanças. Então vamos fazê-lo com este tempo aqui de novo. Então agora o que eu vou ter um comentário de login que tanto lata e, em seguida, eu vou simplesmente escrever usuários ponto-ponto-ponto. Estou ouvindo um documento em particular e quando há uma terceira inundação, 123 instantâneos. Então é assim que conseguimos um riacho. E mais cedo quando escrevermos ponto get, ele nos dará um futuro. Isso é uma coisa. E então eu vou me conectar, Ouça, isso é qualquer mudança que o fluxo está passando, vamos ouvir essas mudanças e simplesmente escrever o resultado de impressão ponto-ponto. Agora você vai entender que a diferença é uma vez e o que é tempo real muda. Agora, quando eu clico novamente, leia dados do Firestore, veja, você pode ver o nome do Google flutter. Mas e se eu mudar o valor que é diferente do Google? E atualize-o. Agora, se eu ir e ver o meu console de depuração, ver que você tem esta saída em legal. Ou seja, eu nem toquei no meu código VS, mas ele está mostrando todas as mudanças em tempo real. E agora se eu entrar novamente, certo, Google flutter e atualizar, então ele mostrará novamente o novo valor. Então esta é a diferença muito básica entre a string são se você verificar. Então, até agora você pode estar pensando nos termos que este instantâneo de documento de instantâneo de consulta água essas coisas. Ao executar o armazenamento de arquivos de qualidade retorna um instantâneo de consulta são os instantâneos de documentos. Então, o que é um instantâneo de consulta? O instantâneo é retornado de uma consulta de coleção e nos permite inspecionar a coleção, como quantos documentos existem, dando existem através dos documentos dentro da coleção. Veja quaisquer alterações desde a última consulta e mínimo. Para acessar os documentos em um instantâneo de consulta, chame essa propriedade dogs, que retorna uma lista contendo documentos instantâneos. Então você só tem que se lembrar de todos esses conceitos. Então, o que é um instantâneo de documento? Um instantâneo de documento é retornado de uma consulta são acessando o documento diretamente. Mesmo que nenhum documento exista no banco de dados, um instantâneo sempre variará. Vire para determinar se esse documento de instantâneo existe, use essa propriedade do mesmo. Se esse documento existe, que é uma camada no nosso caso, podemos ler os dados chamando o método de dados, que retorna um mapa. Então este é o conceito que estamos escrevendo, às vezes documento via escrita, às vezes consulta instantâneo. Então você tem que entender esses conceitos básicos de cor. Além disso, quando estamos lendo dados. Firestore, nossos primeiros recursos avançados para consultar coleções bastante anéis. Trabalho ruim com ambas as coisas lidas estão se inscrevendo para mudanças via stream. Então, primeiro, o que é importante nesta filtragem, para filtrar documentos dentro de uma coleção onde minha tecnologia podemos mudar, mudar para uma referência de coleção. A filtragem suporta verificações de igualdade e outras consultas úteis. Por exemplo, filtre usuários com idade superior a 20 anos. Então aqui você pode ver fogo com fogo, armazenar pontos instância ponto coleção, ponto onde a idade é maior que o tipo D, dois em D e, em seguida, ponto chegar a estes, ele vai apenas verificar e obter sem chumbo esses dados. E segundo é um outro exemplo onde você pode verificar se uma matriz conteúdo qualquer valor como este. O segundo para os outros recursos estão limitando. Isso é limitar o número de documentos retornados da consulta. Podemos usar o método limite em uma referência de coleta. Então, simplesmente temos que escrever Firestore Firebase, arquivos firebase armazenados ponto coleção ponto instância, usuários ponto limite para ponto-ponto ponto é desvinculado a documentos serão retornados. E que um amarrado está ordenando estes dois documentos para o valor específico viés usar a ordem BY é ou pode ser decrescente, ordem ascendente. Então, aqui você pode ver a instância de ponto do armazenamento de arquivos do Firebase, usuários de coleção de pontos. Mas estão lá por idade, deve ser ordem decrescente. Então, essas são as maneiras que somos. Podemos ler dados e filtrar através deles. Então, até agora, temos com sucesso adicionar dados via dados lidos com sucesso. É hora de atualizarmos os dados. Então vamos criar um novo botão. E, em seguida, texto. Atualizar dados. Em Firestone. Então, nas axilas, deve ser uma pia. Nós temos a nossa coleção, eles são amigos, mas desta vez eu vou simplesmente escrever diretamente esperar Firestore ponto coleção usuários dot doc. Isso é alcançado documento que eu fui atualizar, flutter 1, 2, 3, em seguida atualizar ponto. Então eu saí, era um anúncio definido, mas desta vez é uma atualização. E atualizar novamente aceita o valor da chave. Então eu quero mudar o nome e mudá-lo para flexionar seu Firebase. E aí dentro, eu não quero que ele esteja ouvindo. Eu só quero obter o valor deste documento. Vamos guardá-lo e verificar. Se eu clicar em ler dados. Veja que você nomeou o Google aqui, mas se eu clicar em dados de atualização, deve ser agora. Agora, novamente, se eu clicar em dados concretos, ver agora é arquivo Flutter nome com. Portanto, nosso valor foi atualizado com sucesso nesse banco de dados. Mas é assim que podemos atualizar o documento em vez de substituir todos os dados apenas usando esta função de atualização. Então, em que criar operações crud, já fizemos criar, atacar e atualizar. A última coisa é excluir o documento de uma nuvem. Firestore. Novamente, crie um novo, mas depois desse botão nesse filho, vamos mandar texto e escrever dados. Firestore. Então, no local, temos uma função assíncrona. E aqui novamente, nós simplesmente temos que esperar usuários da coleção de pontos Firestore. Então Doc que é o documento que temos excluir com o refletor 1, 2, 3, e, em seguida, basta escrever del ponto, del ponto atualizar. Não é apenas começar excluir. E este é todo o código necessário para excluir também. Vamos verificar a nossa candidatura. Quando eu clico em ler dados, que mostrará nome mais plana Firebase. Agora, se eu clicar em excluir dados, ele deve ser excluído agora. Agora, se eu clicar em ler dados, dizer que é nulo, eu tenho que adicionar dados. Se eu quiser, e, em seguida, clique em big data. Vai com isso. Então é assim que as operações de crédito funcionam no Firestore. E agora estamos prontos para trabalhar com o Firestore corretamente. Isto, eu construir esta interface no lifo, na folha ou mostrando como executar a operação. No próximo vídeo, criaremos um aplicativo do mundo real e usaremos nosso banco de dados Firestore nele. Obrigado. 12. Interface de aplicativo para os computadores: Então, agora vamos construir no aplicativo Node para demonstrar e usar coisas Firestore banco de dados. Naquele módulo anterior de autenticação, já construímos o registro de login e a tela inicial. Está amarrado ao seu 10. Para continuar de onde saímos, criaremos um aplicativo de anotações para entender suas operações atuais mais profundamente. E também, para começar, removeremos tudo da seção do corpo da tela inicial. Então eu saio, temos fluído este recipiente e agora apenas remover tudo. E depois do pai Emily, eu removi o corpo também. E você pode ver aqui e depois ir para o nosso ponto principal. A primeira coisa que vamos fazer é remover esse indicador de depuração em breve eles materialmente material laboratório, ele vai simplesmente ir e escrever depuração, deve verificar Banner e dar um valor padrão. Em seguida, que os dados da equipe, Eu vou simplesmente escrever brilho é igual ao brilho dot.org. Agora, se você vir nosso aplicativo, veja que temos essa Kim escura e eu realmente gosto. Na tela inicial. Após a barra AB, vamos criar um botão de ação flutuante. E vamos adicionar botão de ação flutuante. Cor de fundo das cores, ponto laranja. Excelente. Criança. Criança será um nome de ícone que eu posso adicionar. E temos a função OnPause. Vamos guardar e verificar. Veja isto. Mas, em seguida, temos uso para navegar para adicionar uma tela de nota. Definitivamente antes de adicionar nós, v deve ter uma fazenda com a ajuda de que podemos adicionar dados a esses dados via torcido. Então, basta criar um novo arquivo dentro de telas e nomeá-lo, adicionar nó, ponto, ponto. Em seguida, crie uma região com estado. Estou nomeando a tela adicionar nada. E acima dela. Embalagem de material importante. Então o retorno é andaime. Nele. Vamos ter uma barra AB. Bar AB. Vamos dar que Graham cor de cores transparente e elevação como 0. Depois, no corpo. Terei uma única visão de rolagem filho para que não tenhamos nenhum problema de rolagem. Em seguida, na criança terá uma região de preenchimento com borda inserções ponto. E então nessa criança, eu terei esse widget. Em seguida, basta dar-lhe cruzar excesso de alinhamento esta classe existe e admin dot start. E então teremos nossos filhos. Então, a primeira coisa que podemos fazer é ir para a nossa tela inicial. No botão de ação flutuante, podemos navegar o ponto do navegador fora do contexto que empurrar para fora construtor e tela. Ok, vamos verificar nossa tela Adicionar nó aqui. Veja, nós temos isso limpo. Agora vamos começar por widgets de coluna Linda que está dentro da coluna. Começarei com o texto e o título. Dê um pouco de estilo de têxtil. Tamanho da fonte. E o peso da fonte pode ser peso da fonte, negrito. Salve isso. Veja, temos este título. Depois de morto. Vamos apressar a caixa do tamanho. Em seguida, dê a ele um campo de texto. Texto, decoração, decoração. Dê borda, contorno de entrada delineando. Ok, vamos salvar e ver. Veja, nós temos nosso campo de texto. Agora, após o campo de texto, Vamos dar-lhe uma altura de caixa de tamanho de 13. Então, novamente, vamos mandar um texto. A mesma coisa que um título. E digamos que eu copiei em um dia de entrega como descrição. E terceira descrição aqui você pode ver, novamente, Eu vou ter um campo de texto. Agora, este texto terá linhas mínimas de cinco e comprimento máximo de 10. Nessa declaração. Como de costume, borda, contorno, borda de entrada. Vamos verificar, ver que este maxlength é igual a 30 max line que deve ser. Está bem. Agora, verifique novamente. Veja, temos nossa descrição no campo de texto não é tão estreita. X3, vamos ter a nossa caixa de tamanho. Caixa do tamanho de alta tecnologia D. e depois um contentor que lhe dá o botão. Vamos dar-lhe uma altura de 50. Em seguida, aguarde, consulta de mídia, esse contexto. Então nessa criança, vamos ter um botão elevado. E então vamos gostar desse texto. Anúncio. Nota. Vou apenas mudar um pouco com este modo de adição. Em primeiro lugar, vou dar estilo ao texto. Este estilo de texto. A primeira coisa será divertido tamanho de 25 e font-weight. Negrito. Então eu vou dar estilo ao elevado, então isso é um líquido. Mas, em seguida, estilo ponto de e, em seguida, simplesmente cores primárias tardias, laranja. Veja, está parecendo decente agora. Criando, adicionando anotações tela. Eu também vou criar uma nova tela chamada nota. O caderno de edição que temos para criar um arquivo. Depois disso, será semelhante a adicionar notas. Vou apenas copiar tudo no Adicionar nó e, em seguida, colá-lo na nota de edição. Primeiro de tudo, vou mudar o nome. Vou escrever a tela de edição. Em seguida, temos a nossa cor de fundo como alívio transparente. Então eu vou apenas dar-lhe em ações no botão do aplicativo, botão Excluir. Ou seja, deve ser o botão de ícone. E nos ícones vou simplesmente escrever. Posso, posso começar a apagar. O alerta é igual ao ponto de alertas. Agora temos visão de rolagem única filho. Acolchoamento. Em apenas diferença será no recipiente. Ou seja, ele irá atualizar nó, adicionar nó. E além disso, tudo será igual. Então temos nosso nó add, temos nossa nota de edição também. Está na hora. Nós desejamos. Katie, tela inicial da Flórida que está aqui. As notas de Alden serão obtidas a partir do banco de dados. Então temos que construir algo para isso. Vamos para a tela inicial. Depois do corpo do Barr. Vamos primeiro criar uma exibição de lista. Depois crianças. Então comece com o cartão. Primeiro, vamos começar com o widget do cartão. Vou dar as cores do cartão começar. Então aliviação. Vou dar a cinco. Em seguida, margem. Vou dar-lhe adicionando 10. Então, dentro dela, terei uma lista de compras. Ok? Agora vou dar-lhe conteúdo adicionando inserções de borda simétrica. Como não é menos do que o S. Então. Vamos apenas dar-lhe um dado fictício. Crie um novo aplicativo. Vamos dar um pouco de coloração do peso. Tamanho da fonte 18. Peso da fonte, peso da fonte, negrito. Então vamos ter uma legenda é quando isso Vamos ler o texto. Aprenda a aprender a clonar o aplicativo clubhouse de você. Deixe-me supor. Então. Então você só tem que dar a ele o estouro, não o texto inserido. Sim, texto inserido. Temos que escrever propriedade overflow e apenas escrever overflow. Nosso ponto de gripe elipse ponto e dar linha Max diz duas lentes também. Vamos verificar, guarde. E veja que temos a interface do usuário pronta. Essa é uma nota simples. É um manequim para cima, mas agora, mas na próxima sessão vamos buscar realmente morre quando agora o que eu quero, Quando alguém BAPS neste estilo lista, ele deve ser direcionado navegado para a tela de edição. Então eu vou apenas ler material de push ponto, construtor de layout de página. Vamos anotar a tela. Ok, guarde isso. Agora, quando eu clicar sobre isso, ver que eu tenho esta tela de modo de edição também. Assim, com esta interface do usuário é concluída. Temos o nosso nó add, temos o nosso novo TUI, e se clicarmos nele, podemos ler a atualização, bem como excluir deste UIS desvinculado. Em seguida, próxima sessão vamos criar as funcionalidades para que fogos para que é vamos criar este arquivo de serviços separados e, em seguida, anexar esse arquivo com a nossa esta interface do usuário. 13. Criando dados e modelo: Oi. Então, até agora, temos construído com sucesso a partir de nossa aplicação de nó. Então, nesta sessão, vamos criar a funcionalidade para adicionar esses dados ao Firebase. Firebase, Vamos criar um novo arquivo na pasta de serviços e nomeá-lo. Loja de incêndios, serviço escuro. Assim, da mesma forma, assim como um serviço OT, vamos criar uma classe chamada fire store service. E agora a primeira coisa que temos que fazer é criar uma instância de armazenamento de arquivos do Firebase é a instância de ponto Firebase Firestore. Ok? Então essa coisa que já sabemos que temos que criar uma instância. Depois disso. Vamos criar nossa função, futura função para inserir nó. Ok? Agora basta pensar quais dados são necessários ao inserir um nó. Essa é a primeira coisa que será exigida é esse título. A segunda coisa será a descrição. E a terceira coisa será o ID do usuário. De modo que quando estamos armazenando os dados no banco de dados, pelo menos sabemos qual nó pertence a qual usuário. E então só nós seremos capazes de buscar alguns nós particulares que são apenas de usuário Deck. Não queremos que o usuário acesse os dados de outra pessoa. Então, primeiro faça isso, tente pegar o bloco. Agora aqui temos um nó de coleção de pontos Firestore . Agora, e eu vou usar a função add. Vamos dar o JSON. título dos dados será intitulado. Esta será uma data de descrição. Eu também deveria mencionar essa data na guerra quando estava trazendo inserido. Então vou escrever ponto de data e hora agora. E a última coisa será ID de usuário. Esse é o ID do usuário 0, k. Então nossa função é feita. Então, o próximo passo é certificar-se de que passamos o nosso modelo de usuário enquanto navega para a tela inicial. Porque quando vamos para adicionar, quando vamos para a tela Adicionar nó, o ID do usuário é necessário. Então vamos para a tela inicial. Aqui. Vou me certificar de que o modelo de usuário é aceito no construtor. Ok? Está feito. Agora, na tela de registros. Ele está mostrando porque aqui estamos navegando para a tela inicial aqui nesta linha. Então definitivamente temos que passar o modelo de usuário, que é este. Só temos que passar assim. Da mesma forma, na tela de login, temos que fazer a mesma coisa. Temos que copiar e colar esse resultado, que é um tipo de dados do usuário, e então basta enviá-lo. Agora, quando formos para o nosso principal. Jack. Aqui também está mostrando edição. Porque aqui estamos retornando tela inicial. Então nós só temos que, uma vez que o construtor de stream nos dá dados de um determinado usuário, que é usuário, eles amarram este sendo enviado, veja, sim, você pode transmitir de usuário. Então aqui você só tem que escrever dados de ponto instantâneo, que disse. Então agora o nosso trabalho está feito até aqui. A próxima coisa é chamar essa função de nó de inserção que é, que é o arquivo de serviços. Temos que chamá-lo a partir de agora, adicionar anotações tela. Primeiro, o que temos que fazer é aceitar os dados do usuário. Naquela nota de anúncio, o objetivo principal masculino de passar para baixo o usuário a banheira nos para esta tela. Para que quando estamos adicionando um nó, também podemos enviar esse ID de usuário. Mais uma vez na tela inicial está mostrando edição porque aqui no selvagem ao abrogar, temos que enviar o usuário. Ok? Como este. Agora, novamente, vá para adicionar anotações tela. Agora, já que estamos usando o campo de texto aqui, temos que criar um controlador de edição de texto para que possamos recuperar o valor que está sendo escrito. Então eu vou apenas FirstName é nomeá-lo Título. Controlador é igual ao controlador de edição de texto. O segundo controlador será o controlador Descrição . E nós vamos apenas escrever mesa. É um texto editando-os para nos alertar quando. E como de costume, temos que mostrar um ícone de carregamento booleano para que sempre que alguns, algum pedido de rede está sendo enviado é circular, indicador de progresso deve ser mostrado. E vamos copiar esse controlador e atribuí-lo aqui, este é o nosso título e este é o campo de texto do título. Vou apenas digitar controlador e o controlador. Então esta é a nossa descrição abaixo. Este é o nosso campo de texto para a descrição que eu vou, eu vou apenas atribuí-lo um controlador de descrição. Ok? Dez, agora está indo código. Agora o que eu quero é quando os tipos de usuário e clique neste botão Adicionar nó, em seguida, a função deve ser chamado. Então vamos para o botão elevado, torná-lo uma pia. Então aqui, a primeira coisa que vou fazer é fazer um cheque. Isso é o controlador de título dot txt. Se não for nulo, nossa descrição controller.js, se também não for nulo, ou seja, se for nulo, então o que devemos fazer, ou simplesmente se for nulo, devemos mostrar um mensageiro de andaime que é uma lanchonete. Ok? E nesse conteúdo, vou simplesmente escrever. Os preenchimentos são necessários. Obrigatório. Ok. Se é falso, que é então mais tem. Primeiro de tudo, vou fazer o estado definido e torná-los indicador de carregamento para true. E como eu estou fazendo um indicador de carga verdadeiro, eu deveria mostrar o indicador de carga na eternidade operado. Se o carregamento for verdadeiro, então teremos um indicador de progresso circular da criança central. Se não, vamos mostrar um recipiente que é o botão. Agora, como fizemos o estado definido 2, então temos que esperar serviços Firestore. Faça o objeto. Em seguida, basta montar ponto inserir nó nove, o título que eu vou escrever o texto do ponto controlador ocioso e a descrição eu vou escrever descrição controlador dot txt. Agora, para o ID de usuário, eu tenho que escrever widget. Uma vez que é um estado, widget stateful, temos que escrever widget dot usuário para acessar essa variável de instância e dendrite ID de usuário ponto que é UID, como este. E quando isso for feito, vamos novamente definir o estado e fazer a alusão a falso. E depois disso, eu simplesmente vou navegar para fora, que é o navegador dot pop daquela tela. Depois que estiver feito. Então vamos salvá-lo. E agora tente se está funcionando ou não. Temos o nosso console de arquivos Firebase armazenado também. Agora, clique em Adicionar nó. No entanto, vou escrever que aqui uma descrição do Mestre de aplicação de fazenda de chumbo brilho . Eles vão comprar. Significava. Dito isto, eu simplesmente clicar em Adicionar nó C. Carregando está lá. Ok, saiu. Vamos ver nosso banco de dados Firestore. Se alguns dados estão sendo inseridos ou não. Digamos que você pode ver esses nós e, em seguida, cerca de 10 ID de usuário descrição e essa data. Então, até aqui temos criado e implementado com sucesso a inserção de dados. Então, obviamente, na próxima sessão, vamos recuperar esses dados, todos esses dados do Firebase. Mas antes disso, uma vez que esses dados estão no formato JSON, gostaríamos de convertê-los em objetos. Ou seja, para isso temos que criar nossos modelos, modelos para a nota também, vou apenas escrevê-lo, criar um novo nó de arquivo ponto ponto dentro dos modelos. Então aqui vou criar um modelo de nó de classe. E aqui simplesmente escreva os dados que são necessários. É ID de string, título da string, descrição da string, carimbo de data/hora da nuvem Firestore. Em seguida, string ID do usuário. Então eu vou criar o construtor e simplesmente olhar, Direito, necessário este ID ponto. E isso exigiu isso.title exigiu esta descrição. E adquiriu este pontilhado necessário this.UserID ID ID. E última coisa que temos que criar um método de fábrica para que ele tire o instantâneo do documento da loja de incêndio e convertido para este modelo. Basta ler fábrica de JSON. Ele aceitará um instantâneo de documentos, instantâneo e, em seguida, o modelo de retorno. Agora temos que escrever esses dados. Isso é o valor de dados IID será ID de ponto instantâneo. Em seguida, o título será instantâneo. Título. A descrição será a descrição do instantâneo, depois a data. Da mesma forma, data do instantâneo e ID do usuário. Então vou explicar uma coisa. Que esse ID de usuário é o ID exclusivo do usuário, mas esse ID é o ID do documento que é esse. Para que possamos identificar o documento e usá-lo para manipular que é, atualizar ou excluir no futuro. Então definitivamente precisamos sempre desse documento de identificação. É muito útil. Então é isso para esta sessão. Aqui. Hoje aprendemos como carregar essa tarefa e também criamos com sucesso uma classe de modelo. Dito 10 Q 14. Como recuperar e atualizar dados de nota: Então agora nós inserimos com sucesso nossos dados, e estes são os dados que agora vamos buscar e mostrar em nossa tela inicial. Traga seu VS Code e vá para a tela inicial. Nós estaremos usando fluxo porque vamos buscar todos os nós dos incêndios para usar um fluxo para que qualquer alteração será refletida em tempo real. E esta consulta fluxo eu vou estar escrevendo em casas limpar-se e não vai criar um separado 10 de maio em serviços. Vamos para a tela inicial. Aqui. Esta é a nossa festa. Vou copiar este cartão que cortou este carro daqui. Vamos precisar dele. Então, apenas certifique-se de tê-lo em seu sistema que é apenas copiar. Aqui em baixo. Vou usar um construtor de cordas. Você pode usar o acúmulo futuro, mas eu só quero que, dado um valor de qualquer alteração de dados ou qualquer coisa que façamos, não precisamos atualizar nosso estado definido. Ou seja, eu vou apenas dizer espaço de fogo, Firestore aquela instância. Modos de coleta. Em seguida, vamos usar a cláusula where para que possamos buscar se determinado ID de usuário. Filtrando. Dizemos aos usuários ID de usuário é igual a user.email UID, seja, usuário, esse usuário é este. E depois instantâneos. Certo, temos nossa co-edição. Agora, no construtor. E teremos contexto e visão instantânea, instantâneo. E então eu vou apenas escrever se instantâneo tem dados, se não, basta transformar um conjunto de indicador de progresso colorido. Se o snapshot tiver dados. Depois disso, agora, vou fazer outra verificação para ver se os dados do ponto do instantâneo, comprimento do ponto docs do ponto é maior do que 0. Ou seja, temos alguns documentos. Se não tivermos nenhum documento, eu vou simplesmente no outro eu vou voltar ao centro. E aqui eu vou parecer texto sem notas. Estou disponível. É isso. Mas se o comprimento do documento for maior que 0, eu retornarei uma lista views.py. Isso se mais é muito importante porque pode ter sido que o usuário não tenha carregado nada. Então aqui temos que verificar com isso. Agora, a contagem de itens será dados de ponto instantâneo, documentos de ponto, comprimento de ponto. E, em seguida, abaixo temos contexto. E esse índice 0 não permitiu. Tudo está indo muito bem. Então, esses dados, que vamos obter neste instantâneo, significarão que o formato JSON. Então, aqui vamos converter ter modelo de aparelhamento. Então, assim, eu vou apenas escrever módulo Node, dar-lhe um nó nome. Então vou deixar model.fit. Eu sou Jason. E está exercendo um instantâneo. Então, temos apenas ótimos instantâneos, dados de ponto, ponto, documentos e índice. Então aqui entre barras e converter o JSON para um objeto. Agora, na declaração de retorno, eu vou apenas colar, colar o cartão que já copiamos anteriormente. Então aqui no texto que está nesse título, eu vou escrever nada título ponto esta nota. E na descrição também, eu gostaria simplesmente de Node.js scription. Ok, Vamos salvar e começar e verificar na tela inicial o que é mostrado. Veja a Flórida aprendida. Então esses dados estão vindo do banco de dados sto final. Finalmente, a reabilitação obteve dados com sucesso também. Você pode estar perguntando por que eu uso StringBuilder. Então digamos que eu vá para esse título e como eu escrevo nenhum. Base de fogo. E, em seguida, as operações no Firebase bombeiro. Eu só disse aprender loja de arquivos Firebase. Ok, agora quando eu clico em Adicionar nó, veja que ele já está sendo buscado. Não tenho de reiniciar o nosso estado ou o que quer que seja. Como é um StringBuilder, ele está sendo mostrado diretamente na tela inicial. Ok? O próximo passo é ter essa funcionalidade de nota adicionada. Então, para que a primeira coisa que temos que fazer é para os dados do nó em tempo passado da tela inicial e aceito na tela de edição. Então vamos aqui. Eu vou parecer bem, eu sei nó. E aqui vou usar o construtor e simplesmente escrever este ponto nada. Agora na tela inicial está mostrando enter porque aqui temos dois chefe Daniel. E, em seguida, note já aqui, já atribuímos a uma variável. Mas isto está feito. Agora. Eu não sabia a tela ponto-ponto. Temos que criar dois decks e ser feito novamente, quando um controlador, controlador, em seguida, o nome do controlador, descrição, controlador, decks, controlador Qualquer controlador. Ok. E vamos fazer com que eles carregem variáveis booleanas. Então tudo será bem visto. Então agora o que eu quero é que quando o usuário clica nisso, seus dados devem ser mostrados aqui, isto é, quando estamos editando. Então, nesse caso, obviamente, a descrição de aperto deve ser mostrada nesse campo de texto. Longe, pai, tem que pré-atribuir e dado valor inicial, que x e pensar e aprender. E podemos fazê-lo nesse estado init. Aqui, eu vou apenas escrever del controlador dot txt é igual ao widget ponto naught dot. Da mesma forma, controlador de descrição dot dx é igual a rejeitar H naught dot descrição. E temos que ter certeza de atribuir esses token TI para levar ao campo de texto. Então aqui, assim. E aqui novamente, nós lemos descrições e aprender. Vamos salvá-lo e ver se está funcionando ou não. Agora, se eu clicar no flutter Aprender Firebase, sim, ele está funcionando. Podemos ver que eu digo na descrição. Então agora é hora de trabalharmos neste botão Atualizar. Como você deve, estamos em jejum, temos que criar sua função criativa. Então, abaixo em determinado recurso diário, atualização, ele vai pedir novamente três coisas. Corda. Primeira coisa que vamos ler ID do documento porque pelo menos nos importamos vamos saber qual documento para captar, em seguida, título String e, em seguida, string S para torná-lo afundar. Agora, vamos ter o nosso bloqueio de captura. Eu posso simplesmente imprimir, em seguida, qualquer um dos heróis, para que você possa imprimir dados. Naquele try-catch que não é um bloqueio de tentativa. Nós simplesmente temos que ler uma taxa. Coleção Firestore, notas, documento, doc, doc, doc id, atualização. Eu realmente adorei. Descrição, descrição da diversão chinesa feito. Vamos para a tela de edição da nota. E abaixo temos o nosso botão. Vamos fazer uma pia. Mais 10. Vamos verificar se ele não escreveu. É del controller.js não é igual a NP e descrição. E x também não está vazio. Então aqui vamos escrever se estiver vazio. Então vamos apenas mostrar um snack-bar é necessário. E se não nesse estado imprimir. Vamos fazer o estado definido. Carregamento é usar o operador unário e verificar se o carregamento é mostrar centrado e, em seguida, um indicador de progresso circular. Se não, então esse botão. Sim, eu vou usar Await e Firestore serviços ponto atualização, doc ID, que é documento E será simplesmente widget. Identificação. O título será texto do ponto do controlador L. Descrição será Descrição controller.js. Próximo. Depois disso, então vamos definir o estado novamente, carregando para false. E eu nunca vou sair. É o ponto do navegador. Vamos guardá-lo e testá-lo por conta própria. Traga o editor. Sódio você mais tarde. Se eu for para aprender Firebase inundado e um finito, basta aprender Firestore e atualizado. C. Está a trabalhar na Espanha. Podemos ver que as mudanças são aprendidas. Uma vez mais, é um construtor de cordas. É por isso que as mudanças refletem em tempo real. Então é isso para este vídeo. No próximo vídeo, vou trabalhar neste botão de exclusão. Obrigado. 15. Adição de regras de segurança: Bem-vinda de volta. Então, finalmente, a única função ou o destaque restante é excluir uma nota particular. Além disso, criamos e atualizamos com sucesso. Então vamos trabalhar na funcionalidade para excluí-lo também. Vá para o arquivo ponto ponto dos serviços Firestore. Abaixo do nó de atualização. Vou criar a função futura chamada delete node. Faça-o afundar. Então, para excluir um nó v ID de documento necessário. Então eu estou aceitando isso como um parâmetro. Agora, use esse bloqueio de tentativa de captura. No bloco try, é apenas uma linha de código que está aguardando, armazenar nós de coleção de pontos, em seguida, dot doc ID e simplesmente 10 pontos delete. Dito isto, essa é a única coisa necessária. Temos a nossa função pronta. Vamos trabalhar em que atrasado eu posso editar tela modo, que é este. E também mostrá-lo confirmar caixa de diálogo para se certificar de que o usuário não excluiu acidentalmente nó, apenas pressionando neste botão superior. Porque cenários podem acontecer que ele é menos rei sua tela e por engano, ele clica neste botão. Vá para o Modo de Edição. Nas ações da barra de aplicativos temos este quaternion. Então, no local, eu Kid, uma pia. E a primeira coisa que vamos mostrar é um show. Diálogo. Neste contexto é construtor de contexto. Temos que escrever uma função e está aceitando que irá contextualizar. Dito isso. Agora, basta retornar e alertar caixa de diálogo. Essa é a caixa de diálogo de alerta dentro dela. Nesse título. Vamos dar uma mensagem. Por favor, confirme isso nesse conteúdo. Basta dar-lhe um texto chamado, Você tem certeza? Você excluiu o nó? É isso. E depois disso, teremos alguns botões. Primeiro, sim. Mas, em seguida, texto. Mas então e nessa criança, simplesmente escreva e, é sim. E botão de dados será um botão de texto, mas será apenas para dizer não. E quando o usuário clicar neste novo mar suave deve simplesmente navegar para fora. Então eu vou escrever navegador dot pop em que nenhum botão. Mas no botão Sim, vou escrever em Prezi vou fazer em uma pia e emular, esperar Firebase. Estude todos os serviços de loja que excluem o nó e a ID é rígida. Mas ID do nó, é isso. E depois disso, a primeira coisa que vou fazer é fechar esse diálogo com o navegador ponto Bob. E depois disso, fecharei o verde. Também porque agora não devemos ser capazes de editá-lo. Eu fiz isso como já está sendo Daley fez. Está bem. Vamos experimentá-lo. Eu o salvei. Estar fora do nosso emulador. Se eu clicar em Aprender Firestore e agora clique no botão Excluir. Veja, eu tenho esta tela de confirmação. Se eu clicar em Não, ele voltará diretamente. Mas se eu clicar em sim, ver que traz para fora nos traz para a tela inicial e nossa nota de dívida foi excluída com sucesso. Então, finalmente, as funcionalidades estão funcionando e temos um trabalho devidamente concluído que é concluída aplicação modo. Então, a última coisa que temos que fazer, um tópico final é sobre adicionar regras de segurança ao Cloud Firestore. Então, quando estamos usando Firestore para produção, devemos mudar as raízes de segurança. Como em decimal, qualquer pessoa pode acessá-lo com seu URL. E, obviamente, por causa de quais dados estarão em risco e também podem nos dar um grande pino de uso se alguém usá-los indevidamente. Então, porque há finitamente, nós não queremos esse tipo de situações. Devemos alterar essa condição e qual condição eu vou usar é chamada de autenticação necessária. Uma das raiz de segurança mais comuns por termo, é controlar o acesso com base no estado de autenticação do usuário. Por exemplo, seu aplicativo pode querer permitir, a menos que os usuários façam login para gravar dados. Por isso. Traga o console Firebase. Vá para o banco de dados Firestore e clique nessas regras. Aqui. O C europeu, isto permite que todos acessem o banco de dados, mas não vamos, não queremos. Vamos removê-lo. Aqui é Densa. Se, se o ponto de solicitação não for igual a nulo, é isso. E clique em Publicar. De agora em diante. Em. O usuário foi autenticado, este usuário de login, e-mail, g-mail, qualquer coisa, então só ele teria permissão para acessar essa base de dados. Aqui. Esta parte específica significa que cada um, ele pode corresponder a qualquer documento em todo o banco de dados. Também podemos mudar esse tipo de regras, mas não acho que seja muito importante agora. Outro padrão comum é garantir que os usuários possam ler em Lee, ler e escrever seus próprios dados em Lee. Há mais alguns que você pode tentar por conta própria lendo os arquivos oficiais para a documentação. Mas o mais comumente usado é essa autenticação necessária. Então é isso. Para este módulo. Aprendemos muito. E isso é como criar uma conta Firebase, como fazer essas operações de crédito. E, finalmente, crie nosso aplicativo Node completo também. E no final aprenderemos como mudar as regras de segurança. Então, no próximo módulo, aprenderemos sobre o armazenamento do Firebase e como fazer upload de arquivos para ele. Até lá, continue praticando. 16. Configurar o armazenamento no Firebase base: Olá, bem-vindo a este novo módulo onde discutiremos o que é Firebase Cloud Storage e como implementá-lo usando flutter. Então, até agora, aprendemos como autenticar o usuário, como armazenar dados do usuário na história do fogo que era, mas agora é hora de aprender a fazer upload de arquivos no Firebase também. Então, agora a questão é, o que é Firebase Cloud Storage? Cloud Storage foi projetado para nos ajudar a armazenar e servir de forma rápida e fácil conteúdo gerado pelo usuário, como 42 vídeos e qualquer outro arquivo. Assim, em qualquer aplicativo do mundo real hoje em dia , muito fácil e necessidade de usar o armazenamento. Se você vê Instagram, é tudo sobre imagens. E definitivamente temos que usar um depósito. Além disso, se você vê o WhatsApp, quando estamos enviando apenas texto, então estamos apenas usando o banco de dados. Mas suponha que estamos mudando nossa foto de perfil através do envio de imagens ou vídeos para outro usuário. Nesses casos, temos que usar algum tipo de armazenamento. Então, obviamente, o primeiro passo foi configurar nosso projeto Firebase, o que já fizemos. O próximo passo é adicionar a dependência de armazenamento do Firebase. Vamos ao nosso navegador Chrome, certo? Spec pub, então, desculpe, Pub ponto-ponto. E aqui, basta escrever armazenamento Firebase. O primeiro é que você tem que copiá-lo e colá-lo no arquivo YAML. Aqui que diz Download, dependência e instalá-lo em nosso projeto. Agora, o próximo passo é habilitar o armazenamento no projeto Firebase. Esse é o console Firebase. Como Va criou um fogo com, fogo armazenar dados com, mesma forma, você só tem que selecionar o armazenamento a partir deste menu à esquerda. E assim que você clicar sobre ele, você verá essa parte do balde, que é esta. Esta é a nossa parte única do balde e jogou isso no Levy estará carregando multas. E van estávamos usando regras de banco de dados Firestore. Da mesma forma, no armazenamento também existem regras. Mas como estamos usando a autenticação Firebase, é por isso que não precisamos alterar nenhuma regra aqui. Mas se você precisar alterar a regra do armazenamento do Firebase para tornar público para testes. Isso também você pode fazer, mas definitivamente não nessa fase de produção. Então, temos nosso armazenamento pronto, temos nossa dependência pronta. E vamos verificar uma coisa aqui. Então, isso também podemos apenas copiá-lo uma vez que ele emite algum erro aqui. Eu vou apenas ir para pub spec e colado. Está bem. Agora está na hora. Também construímos uma nova tela. Então crie um novo arquivo dentro da pasta baços e nomeie-o, faça upload de imagem ponto, ponto. E agora crie um widget stateful. Mas antes disso eu vou importar o pacote e, em seguida, criar um estado completo rígido e nomeação. Tela de upload de imagem. Como de costume. Andaime. Esse título. Vou fazer upload de decks para encontrar maneiras. E eu vou apenas torná-lo no centro. Corpo. Primeiro de tudo, vou criar dois botões para selecionar uma imagem. Vamos apagar essa coluna. Então as crianças no corpo, vou dar algum tipo de flexão é quando você apenas dá para independente. Naquela criança. Quero uma queda mais rápida. Dois botões para isso. E ele irá criar a linha dentro da coluna. Dê-lhe significa x é um elemento, média existem vendendo quando pontos de espaço uniformemente. E que as crianças eu vou ter elevado, mas 10 item que é elevado botão ícone ponto. Vou simplesmente escrever uma câmera. E o trabalho deve ser câmera. Da mesma forma e elevá-los. Mas então nós podemos e vamos dar eu posso como eu posso adicionar o texto da reunião. Então, o que eu criei para isso mostrar, você tem que ir para o arquivo main.js e comentar a tela inicial aqui. E em vez disso, em vez disso, eu vou girar nossa tela de upload de imagem. Agora guarde-o. Vamos ver se está funcionando. Nossa tela de upload de imagem está muito bonita. Esta tela eu criei no início, apenas para demonstrar como fazer as operações no armazenamento. Depois de o fazermos com sucesso. Mais uma vez, implemente essa história em nosso aplicativo de nó também. Mas antes disso, o básico, devemos saber o básico. Agora. Você pode estar pensando, ok, eu estou vendo que vamos fazer upload de imagens, imagens e tudo mais. Mas como para acessar essa categoria de dispositivo, nossa câmera e imagem pk que fazemos, precisamos fazer alguns usos de pacotes de terceiros. São muitos no mercado, mas vamos estar usando seletor de imagem. Vamos saltar lá e seletor de imagens. Então esta dependência que vamos usar para acessar o dispositivo do usuário, que é Galeria são a câmera e, em seguida, buscar a imagem e apenas copiá-lo. Vá para o ponto de especificação YAML e cole-o aqui e apenas salve-o. Então nossas dependências estão todas definidas. Neste vídeo. Nós configuramos com sucesso o Firestore, bem como criamos a interface do usuário. No próximo vídeo, vamos aprender como usar o Cloud Storage e quais são suas terminologias. Obrigado. 17. Entender o armazenamento na nuvem: Nesta sessão, vamos apenas entender o que esta nuvem Firestore e algumas de suas terminologias. Porque antes de escrever código, pelo menos devemos conhecer algumas das funcionalidades ou funcionalidades que permite. Então diretamente para usar o Cloud Storage. Em primeiro lugar, temos a fazer o pacote stand-up, o que já fizemos. Em seguida, o próximo passo é criar uma instância de armazenamento que é chamada de getter instância no armazenamento Firebase como este, o armazenamento de resíduos é chamado de instância de ponto de armazenamento do Firebase. Isso temos feito em cinco melhor arte, bem como no fogo com loja de fogo. Depois, há outro termo chamado referências. Referências. Uma referência é um ponteiro para um arquivo dentro do bucket de armazenamento especificado. Este pode ser um arquivo que já existe ou um que não existe. Para criar uma referência, use o RDF, que é href meus dez na instância Firebase lá. E este é o exemplo. Em palavras simples, este é o local do armazenamento de arquivos. Ou seja, se tivéssemos mencionado diretamente aqui, barra e depois o nome final. Então, se formos para o nosso armazenamento que está aqui, esse arquivo será armazenado diretamente no diretório raiz. Mas seus amigos também podem ser aninhados arquivo ou diretório. Forneça a parte completa. Rus essa criança minha cabeça na diferença de retorno, ele vai criar pastas dentro do dielétrico. Isso significa que se você quiser criar uma pasta que seja imagens e, em seguida, dentro dela, nós carregamos a imagem, apenas por exemplo aqui. A primeira pasta pode ser a imagem de perfil do usuário. Segunda pasta pode ser enviado itens como este. Para isso, temos simplesmente de criar uma referência. Então eu mencionei o diretório dentro do método RDF, assim, imagens barra e então o arquivo de imagem são, podemos fazê-lo de uma maneira que é dot ref, então dot child, isto é, este é o nome da pasta e, em seguida, dot child que é diretamente o arquivo de imagem. Então este é o conceito de referência. Agora, o que está listando arquivos e diretórios? Firebase fornece a capacidade de listar os arquivos e diretórios dentro do diretório. Existem dois métodos disponíveis que fornecem essa capacidade, lista e lista a bordo função minha declaração de imposto, qualquer resultado que contém quaisquer arquivos, diretórios e token de paginação da solicitação. Então suponha que tenhamos carregado com sucesso a imagem. Agora, quando é hora de recuperar essas imagens do armazenamento. Nesse caso, usaremos este material. Então simplesmente o que temos que fazer é na instância B temos Convenção. A profundidade de referência é onde esse arquivo foi armazenado e, em seguida, listar. Ele nos dará sobre os arquivos armazenados em nosso armazenamento. E uma vez que virá em uma lista de itens. Então nós simplesmente temos que fazer um loop através dele. No exemplo, você pode ver que é assim que fazemos. Essa propriedade items representa o arquivo dentro desse bucket e a propriedade prefixo representa seus diretórios aninhados. No caso de termos um grande volume de arquivos e diretórios chamados LinkedList. Pode levar muito tempo para retornar nossos resultados. Nesse caso, a lista de chamadas e a limitação do resultado podem resultar em uma melhor experiência do usuário. Então, no exemplo que você pode ver aqui estamos pedindo os dados, mas apenas para os primeiros 10 dados, é isso. Então este é o conceito de listar arquivos e diretórios. Em seguida, ele vem carregando arquivos. Então este código fictício, esta é a sintaxe necessária para carregar um arquivo. Fasta arquivo devemos, devemos ter um arquivo. E, em seguida, nesse caso Get Data View principais amigos de dados da cadeia onde queremos que ele seja carregado e, em seguida, simplesmente ler o arquivo de saída ponto. E dentro desse arquivo put, enviamos nosso arquivo em que está. Isto é muito simples e este é apenas este código ou vôo. Estaremos implementando este código na próxima sessão. Eu só queria dar a você a visão geral e como o armazenamento funciona e quais são as diferentes funcionalidades que ele oferece. A última coisa que é realmente importante são os URLs baixados. Na maioria dos casos de uso, podemos desejar exibir imagens armazenadas em um bucket que esteja armazenado em nosso aplicativo. E para isso, solicitamos o download do URL desse armazenamento. Vai dar-nos uma ligação. E esse link que você tem que mostrar em nossa visão. Para baixar o aryl, basta mencionar a referência da imagem e, em seguida, usá-los meu URL de download de 10 pontos. Isso, também o usaremos em vídeos futuros. Agora, se você quiser saber mais sobre o Cloud Storage, você pode simplesmente ir para a documentação oficial que está aqui e você ler tudo, quais referências, baixar URLs, fazer upload de arquivos, como fazer upload de dados brutos, como adicionar metadados, veja o que a cor da nossa tarefa, diferentes tipos de tarefas. Um monte de coisas. Se você quiser, você pode percorrer tudo porque é uma boa prática ler a documentação desse plug-in. Então isso é em FAR WE FAZER. Na próxima sessão, enviaremos nossa primeira imagem. E Q. 18. Implementação de imagem: Oi. Então agora nós entendemos os conceitos e a teoria do armazenamento Firebase. É hora de criar nossa própria função. Essa é a minha grande imagem e depois enviar para o servidor. Nós já mencionamos que dependências, que é armazenamento Firebase e o seletor de imagem. Agora basta ir para a tela de Upload Image. E aqui, a primeira coisa que temos que fazer é criar uma instância. Simplesmente a nossa base de fogo. O armazenamento Firebase é igual a instância de armazenamento de resíduos. Então, definitivamente, o que quer que eu faça, vai demorar algum tempo e temos que mostrar algum indicador de carregamento na interface do usuário. É por isso que estou a mencionar uma variável. Depois disso, vamos criar nossa função chamada função, que estará retornando vazio e eu vou me deixar em paz. Imagem. Então, aqui você pode ver uma pessoa pode enviar imagem de uma câmera ou uma galeria. Então, quando estamos chamando esta função, temos que enviar a fonte de entrada. Ou seja, se o usuário escolheu câmera são a galeria. Agora é hora de usarmos nossa imagem também. Então eu vou obter uma variável chamada picker e, em seguida, atribuir é seletor de imagem. Agora eu simplesmente tenho que escrever esperar picker, escolher imagem. E aqui, a força será um operador ternário que verificará se a fonte de entrada é a câmera. Será a câmera de origem da imagem. Ou então ele emitirá fonte. Mas Kelvin. Ok? Então, quando temos a nossa imagem D falar, podemos ver que retorna um quinto futuro do tipo de dados do arquivo exe. Então eu vou apenas desenhá-lo aqui e nós vamos simplesmente escrever o arquivo exe final que é em segurança de saúde e nomeá-lo grande imagem. Então, agora o que eles foram imagens, os dados do usuário serão armazenados aqui. Agora a primeira coisa que eu tenho que verificar se um usuário tem grande soma qualquer imagem ou não. Vou apenas verificar se a imagem de pico é um dois. Agora, eu simplesmente retornarei nulo e pararei a execução. E se não, se a imagem não for nula, primeira coisa que vou fazer é obter um nome de arquivo neste nome de imagem grande. A segunda coisa que eu tenho que fazer é criar o arquivo porque esse formato é um arquivo EXE. Então eu realmente gosto de arquivo de imagem e, em seguida, simplesmente transformar o widget, que é a partir desse ponto IO. Veja, temos importante o ponto IO. E aqui temos que enviar parte que virá. Ponto da imagem. Então agora todos nós convertemos com sucesso para um arquivo. É hora de fazer o nosso bloqueio de captura e executar a função de armazenamento Firebase. Naquela gravata. A primeira coisa que vou fazer é obter o indicador de carregamento para verdadeiro. Então eu vou esperar ponto de armazenamento Firebase para referenciar seus amigos quando estamos arquivando. E arquivo de saída. E arquivo de entrada, vou escrever arquivo de imagem assim. E depois que eles fizeram com sucesso, vou voltar a definir como falso. E como sempre, gosto de mostrar um snack-bar. Andaimes OFF e, em seguida, mostre a lanchonete, e o conteúdo da guia como sexos carregados. Está bem. Eu só vou fazer em Firebase exceção, pegar e E. E se algo mais, então aqui, Quero dizer novamente imprimir. Oh, ok, então agora nosso divertido Chen está pronto. Nós simplesmente temos que primeiro material mencionado o indicador de carregamento aqui em nosso widget linha. Se o carregamento for verdadeiro, centralize o indicador de progresso circular. Se não, então eu tenho que mostrar essa linha. Nós despejamos botões. Vamos ver, vamos tentar. Este furar no amado 10. Mas tudo bem, primeiro, deixe-me ir ao meu armazém e pressioná-lo. Vamos verificar se há alguma imagem ou não da sua idade industrial. Você pode ver que não há arquivos aqui. Basta trazer o seu emulador. Vou clicar na Galiléia, mas antes disso, obviamente, eu tenho que mencionar nossa função de botões de dublagem. Então eu vou pressionar, Vou chamar essa imagem de upload com um valor de câmera. E neste caso, vou simplesmente escrever galeria. Ok? Uma vez que este é um amuleto que eu não estaria usando a câmera padrão que eu vou escolher. Em seguida, em que os downloads, você pode ver imagens já existentes. Vou escolher este Elon Musk e ver o nosso sindicato está lá e depois carregado com sucesso. Vamos verificar nosso armazenamento e ver nossas imagens aqui. Então este é o nome do arquivo na referência que eu estava falando. Então, aqui, este armazenamento baseado em arquivo ou nome de arquivo é este que é diretamente ele carregou no diretório raiz. Então é assim que carregamos a imagem para o armazenamento. Mas definitivamente. Então nós carregamos a imagem. É necessário que recuperemos também. Então, para recuperar as imagens, a primeira coisa que temos que fazer é criar um método para ela. Basta ir para a nossa tela só eu vou, eu gostaria de escrever a minha vez. Somente neste arquivo. Se desejar, você pode usar arquivos separados. Simplesmente escreverei o futuro. Ele nos dará uma lista de arquivos. Então eu vou fazer eu carregar imagens e, em seguida, torná-lo uma pia. Depois disso, vou simplesmente criar uma variável mapeada lista que irá armazenar todos os dados provenientes do armazenamento. Agora, a primeira coisa, como eu mencionei, que temos que ouvir para obter todos os arquivos. Então eu vou escrever resultado lista finita. O resultado é igual a aguardar a lista de referência de armazenamento baseada em arquivo. Depois disso, vou simplesmente acertar. Uma lista de arquivos vai resultar em itens. Como eu discuti em meus slides, como quando temos nossos arquivos de listagem. E através desse resultado, podemos obter os itens. E as propriedades do item representam arquivos dentro do bloco. Então agora nós temos o phi e eu vou simplesmente loop através dele com o ponto Futuro. Para cada um, para cada elemento serão os nossos arquivos. E isso nos dará uma referência. Um arquivo. Se estivermos looping através dele. Então por que fazer loop? Vou apenas obter o URL de download. Relaciono URL do arquivo de treinamento financeiro é igual a aguardar o ponto de arquivo obter URL de download. E já que se é uma espera, tenho que fazer uma pia. E a variável do arquivo acima. Vou adicionar valor em um mapa que é URL, será URL fina e será ponto de arquivo parte completa. E por último, eu gostaria de imprimir arquivos, bem como retornar arquivos. Isto é, esta lista de mapas. Um mapa conterá os dados da imagem. Url é usado para mostrar que ele, em seguida, esta parte será usado para excluí-lo mais tarde. Então isso é tudo por este vídeo. Fizemos muita coisa. No próximo vídeo, vamos mostrar implementar esta função na interface do usuário. Obrigado. 19. Como recuperar e excluir imagem: Oi. Assim, no último vídeo temos com sucesso as funções necessárias para recuperar imagens. É este carregando imagens. Agora é hora. Mostramos no estábulo imediato nesse armazenamento em nossa interface do usuário. Aqui. Vamos fazer isso. No nosso corpo. Temos coluna e dentro da coluna temos este sorteio. E abaixo desta linha, eu gostaria de mostrar as imagens. Primeiro de diversão, vou dar algum espaçamento. Nós poeira tamanho Fox, dada uma altura de 50. Então eu vou usar uma região expandida para que ele vai levar restos pedaço. Em seguida, aqui, cada usuário futuro construtor. No futuro, quando pássaro futuro, vamos carregar imagens e agora escrever nossa função, um instantâneo. Ok. Vamos verificar se estado da conexão do instantâneo é igual ao estado da conexão. Esperando. É, não foi concluída. Então eu vou virar indicador de progresso de cor. E se não, então eu retornarei uma lista. Agora dentro desse Biller, I DM conta será dados de ponto instantâneo, ponto terra. E eu vou verificar se é nulo e nós vamos fazer 0. E eu renderei. Terei um contexto e esse índice. Agora, já que os dados estão chegando em um mapa, vou armazená-los aqui. A imagem do mapa é um índice de dados de ponto instantâneo. E eu vou simplesmente voltar é rho. Rho que crianças. A primeira coisa que uso é uma região expandida. Dentro dele. Vou usar um cartão. E esse cartão, eu vou usar contêiner. Vou dar-lhe uma altura de 200. E criança para mostrar a nossa imagem, esta image.net. E através deste vídeo de imagem, eu simplesmente escreveria URL. E depois que a região do cartão, eu, que mostra um botão, que é o botão Ícone. E do qual eu posso ser Huygens ponto excluir cores e ver se ele está funcionando ou não. Temos uma imagem no nosso armazém. Este slide mostrando alguns do Azure. Não deveria ser. Ok. Não está mostrando uma taxa foi lenta. Mas veja, temos a nossa imagem. Você pode vê-lo no console de depuração. Como estávamos apresentando seus resultados também, temos nossa imagem aqui. Então é assim que recuperamos a imagem do depósito. E mostrá-lo em nossa interface do usuário. Isto expandido aqui eu uso para que ele leva menos espaço. E então os botões apareceram. E a altura é esta 200. E se não houver dados, então a contagem de itens será 0 e nada será mostrado. Então agora é hora de fazer a coisa final que é a imagem excluir de seus arquivos armazenados. Vamos criar uma função para isso. Será futuro. Espere. Então exclua e exclua. Qualquer coisa do armazém que precisarmos. Referência. Simplesmente aguarde. Armazenamento Firebase, referência, ref dot delete. E após o sucesso da exclusão, Vamos definir o estado para que este projeto de lei futuro que é chamado novamente. E vamos verificar o armazenamento e obter os dados. Temos a função excluir, pronto, é hora, atribuímos isso ao botão do ícone. Vamos fazer uma pia. E direito disso. Excluir função e devolvê-lo assim. E depois que for excluído, mostrarei uma lanchonete. Conteúdo. Próxima imagem. Vamos verificar isso. Coisas. O que eu faria é tentar selecionar outra nova imagem. Eu escolheria. Mark Zuckerberg é carregado com sucesso e veja. Estamos recebendo nossa segunda imagem. Agora, se eu quiser excluir esta primeira imagem, vou simplesmente clicar neste botão excluir e ver imediatamente que com sucesso. Então esta foi a imagem que apaguei. Agora, se eu atualizar o console Firebase, você verá apenas uma imagem e qual é a nossa marca Zuckerberg. Elon Musk era feio eles. Mas é assim que apagamos a imagem do pó tarde demais. Você pode verificar o código. Aqui. É, tudo está relacionado com a referência. Eu vou dizer que eu gostaria de mencionar que este aplicativo se destina a ser o mais simples possível. Soda ou cabo é mais curto e Tina, ele tem apenas uma tela e usa um widget stateful para gerenciamento de estado. Eu sei que ele não tem muitos recursos de produção, como imagem antes do upload. Mas primeiro outono, nossa intenção é entender corretamente como carregar e recuperar arquivos do armazenamento. Então é isso para este vídeo. Espero que tenha aprendido muito. Obrigado. 20. Compressão e cache: Então, até agora, temos entendido como carregar, recuperar e excluir nosso arquivo no armazenamento Firestore. Mas agora é hora de entender como comprimir a imagem durante o upload. Imagens tão grandes e grandes levam mais tempo para carregar e fizeram insultar a conveniência terrível do usuário. Usa sempre preferido tempos de carregamento insignificantes e não quer ver o indicador de carregamento para eles para reduzir tamanho da imagem também pode deduzir as contas mensais dos serviços de armazenamento e hospedagem de imagens que você está usando. O recurso de compactação de imagem é inevitável se o aplicativo tiver um recurso onde o usuário está carregando imagens. Então, em termos simples, devemos usar a conclusão da imagem. E longe do que se reuniu está um pacote chamado imagem nativa tremulada. Vamos verificar isso. Se eu ir e escrever imagem nativa. E então vamos ver o primeiro, que é sim, que é essa imagem tentativa de inundação. Assim, você pode ver que esses dois são necessários para redimensionar a imagem e reduzir sua qualidade por compressão. Então vamos para a instalação. Então, copie. Vá para o nosso arquivo YAML Spec dot, e cole-o. E, em seguida, salve o arquivo para que o nosso tremulado faça o trabalho de instalar a dependência. Vai levar algum tempo. Nenhum problema. Oh, caverna. Então, agora que é uma nova dependência, temos que parar o nosso aplicativo inundado, a depuração da área de trabalho. E então você reiniciou novamente para que nosso inundado saiba que um novo pacote foi instalado. Sei que é um processo muito tedioso. É demorado, mas é assim que se faz. Então, até esse momento meu aplicativo está sendo executado, eu gostaria de voltar para a nossa imagem de upload e tentar revisar o que fizemos até agora. Então temos a nossa função Upload Image para onde estamos enviando se é uma câmera. Artigo 3.o Depois disso, estamos apenas usando isso como um rascunho que encontraria código para enviar nosso arquivo para o armazenamento. E depois que é feito, empacotando ESNet. Mas então a próxima função que criamos foi carregar imagens. A primeira coisa que fiz foi criar uma matriz vazia. Em seguida, obter todos os arquivos de referência. Isso é verdade. Este comando ponto list-style. Ele nos dá uma lista de resultados. E através desses riscos, eu recebo todas as referências da imagem carregada e, em seguida, loop através dela, olhar através dela, e obter o URL de download. Então, e depois de obter uma visão dominante, e eu estou salvando aqueles nesta variável e, em seguida, apenas mostrá-lo na interface do usuário. Ui também é muito simples. Você pode ver que eu tinha usado este futuro quando não há nenhum. E se alguma coisa, alguns detalhes, Vincent, então eu vou verificar a lista. Você vai que se o comprimento delta não é, agora, se é nenhum que não é mesmo uma imagem está morta. Vou escrever 0 sozinho. Podemos ver que nosso compilador está feito. Então, finalmente, a nossa aplicação, estaremos feitos. Sei que o Android Studio às vezes pode levar muito tempo. Sim, está feito. Agora vamos criar. Necessário para comprimir uma imagem. Será uma função futura que retornará como um arquivo. Então cada limite comprime imagem. E temos que enviar um arquivo de dados ao chamar definição, porque pelo menos através deste arquivo saberemos qual imagem compactar. Agora eu tenho que escrever função de imagem nativa. Por isso. Basta ir para o arquivo YAML de ponto de especificação e copiá-lo. Cole no topo. Se ele ainda está mostrando adicionador. O que podemos fazer é ir para o nosso arquivo de especificações Pub YAML e, em seguida, apenas salvar assim para que ele faça, ele novamente tentou obter os pacotes necessários. E agora C se foi. Então, nesse arquivo compactado, Vamos escrever aguarde, precisa de imagem div.com. E aqui eu tenho que enviar a parte do arquivo. E então essa qualidade, essa é a porcentagem que eu quero reduzir essa dívida é de 50% que eu gostaria. E se você tiver imagem compactada, você pode ver que ele nos dá um arquivo futuro. Então eu vou simplesmente escrever phi. Arquivo compactado é igual a aguardar assim. E depois disso, vou imprimir o tamanho original do arquivo. Esse é o tamanho original. Este arquivo dot nan pia. E eu vou Sabrina ter o tamanho do peito assim. Compactar file.com, encontrar terra. E finalmente retornar nosso arquivo compactado. Portanto, este será um tipo de dados de arquivo futuro. Ok, este trabalho está feito. Agora temos que fazer algumas alterações em nossa imagem de upload. Aqui. Depois deste arquivo. Depois do arquivo, compactado. Arquivo compactado é igual a aguarde. E chamar função diferente daqui. Quero dizer, simplesmente, uma imagem comprimida e enviar esse ficheiro. E depois vamos fazer a nossa referência Firebase aqui, Eu vou colocar este arquivo, não o outro arquivo. Agora vamos salvá-lo. Agora vamos testar se está funcionando ou não. Se eu clicar na galeria e supor escolher este arquivo que é tipicamente quatro KB. Agora vamos ver se ele está sendo comprimido ou não. Aqui você pode ver os tamanhos de arquivo originais 34 e comprimir foi nós apenas 10. Portanto, há uma grande diferença. Se usarmos essa compressão. Se uma atualização nosso console de depuração, podemos verificar se ele é, se ele funcionou ou não. Veja, era 30, 40 KP, mas agora é apenas 10. E está bonito. Mas é assim que a compressão é feita. Agora a próxima coisa, o próximo tópico que vamos discutir é o que é imagem de rede de caixa que está armazenando em cache? Assim, todos sabem que as imagens são uma parte essencial dos aplicativos modernos. Uma vez que a largura de banda é dispendiosa, mercadoria, cache de imagens pode impedir o download de imagem do servidor cada vez que o usuário visualizá-lo na tela. Caching sem assim melhorar a experiência do usuário quando o nosso flanco, porque ele estará usando a cópia cache local sem tentar baixar novamente a partir da Internet. No entanto, neste tutorial, vamos usar o pacote de imagem de rede em cache para dinheiro e disciplinar imagens de entrada. A coisa está no primeiro lançamento, o aplicativo exibe um tamanho de suporte lugar o mais próximo possível da imagem final para atender e transição quando as imagens reais são carregadas. E depois, imediatamente ele está sendo pego naquele dispositivo localmente. Então, da próxima vez, quando a imagem for necessária, esse pacote irá buscá-la localmente em vez de baixar da internet. Então este é o pacote R. Esta é a dependência que eu vou usar. Vamos lá e instalá-lo. Você simplesmente tem que escrever imagem cache. Então eu acho que eu deveria descontar a imagem da rede, toda a equipe. E o primeiro é o que precisamos. Basta copiá-lo, colá-lo no espectro no Iêmen. Agora é hora de implementar o cache de imagens também. Uma vez que temos que mostrar um titular lugar enquanto estamos buscando imagens ao usar rede CAS, que plug-in. Esse suporte de lugar pode ser de qualquer widget, como texto, circular, indicador de progresso, etc. Mas eu prefiro a imagem AMI como espaço reservado. Então, simplesmente, eu vou para o navegador e, em seguida, as imagens e escrever imagem de espaço reservado. E depois disso, vou baixar uma das imagens. Suponha que eu goste deste. Este eu vou dizer porque eu não quero um fundo transparente. Então este, vou guardá-lo e dar um nome a isto, encontrar um lugar. Ok? Ele foi baixado agora, uma vez que é um ácido. Então temos que mencionar isso em nossa YAML. Antes disso. Basta ir para aquele diretório. E no diretório raiz, basta criar uma pasta chamada imagens. Vamos copiar e colar a imagem baixada. Este vai apenas ir para as imagens e baixar colado. E para ter certeza que está sendo. Atualizado em nosso aplicativo inundado, você tem que ir para Pub spec dot arquivo YAML. Abaixo temos esses ativos que está sendo comentado. Nós só temos que descomentar e certifique-se de que você só toque em Backspace duas vezes porque este arquivo está pronto, diferencia maiúsculas e minúsculas. E eu vou simplesmente escrever que nós na pasta raiz temos essas imagens. É isso. Agora este login de imagem em cache aceita amadores de viagem. Uma é a URL da imagem que esta URL da imagem que tem de ser armazenada em cache. O segundo é o titular do lugar. Este é este widget e o ativa o espaço antes que a imagem é carregada. E esse alvo é qualquer adder editor widget que fizemos será exibido se houver qualquer edição baixando essa imagem. Então vamos e implementado. Primeira coisa que eu vou apenas importar redes de dinheiro, que no topo. Vamos ver. Eles não devem mostrar nenhum editor. Ok. Agora, no futuro, aprenderemos dentro desta criança. Em vez de escrever uma imagem de rede amazed.net. A URL da imagem será esta. Mas as outras propriedades, como mencionei, há um lugar titular, que é uma função que tem contexto e URL. E eu relaciono imagem, imagens de conjunto de pontos. Coloque o suporte ponto JPEG. Vamos verificar se são as imagens de arquivo que o marcador de posição ponto JPEG. E no widget do editor, vou simplesmente mostrar. Vou simplesmente mostrar. Eu posso, eu posso começar Adder. É isso. Nada de muito por aqui. Então é assim que implementamos imagem de rede de cache. Agora eu gostaria de compartilhar, mostrar-lhe a saída o que e por que estamos usando isso. Então, agora que o tempo em que ele será carregado, basta esperar por alguns segundos e ver que ele está carregando. E, obviamente, estamos recebendo esse erro apenas por essa razão que não iniciamos nosso aplicativo. Vamos fazer isso. Basta clicar e começar a depurar novamente. Então temos nosso aplicativo em execução. Agora vamos ver se a imagem de rede de gash está funcionando ou não. Vamos dar uma olhada e ver, disso que eu estava falando. E, e a transição foi tão suave. Então este é apenas um lugar titular ou você pode dizer algum tipo de efeito que o usuário recebe feedback e ele vai esperar que os dados sejam tropeçados. Então este é um uso de imagem de rede de dinheiro. E agora, pela segunda vez, quando atualizarmos esses dados não serão obtidos da internet. Ele será usado a partir do cache, que já está lá. E é por isso que é tão rápido. No primeiro átomo. Parece um segundo a posteriori agora só levou 1 segundo. Então eu espero que você tenha aprendido muito nesta sessão porque compressão e cache são dois tópicos importantes ao usar qualquer tipo de upload de arquivo. Então é isso para este vídeo. Obrigado. 21. Vídeo 83 — faça o upload de várias imagens: Olá. Então, até agora, estávamos apenas enviando uma única imagem. Mas hoje vamos aprender a fazer upload de várias imagens também. Porque pode haver cenários em que o usuário deseja adicionar várias imagens e não perder tempo. Basta selecionar uma imagem e depois carregar e esperar. Este é um processo muito longo e demorado. Portanto, v deve sempre ser para várias imagens em tais cenários. Então, antes de tudo, vou excluir essas imagens anteriores. Em seguida, mostrarei novamente como selecioná-los juntos e depois carregá-lo. Agora, vamos criar um terceiro botão aqui, que dirá que são várias imagens, para que tenhamos três opções. Apenas para nossa referência, estamos fazendo assim. Vamos para nossa tela de upload de imagem. Então temos a coluna aqui. Então a primeira coisa é a linha. E abaixo da linha, terei uma caixa de tamanho. Deve ser tamanho de caixa e, em seguida, uma altura de 30. Então tenha um ícone de botão elevado aqui que eu posso, podemos escolher. Eu posso pontuar a imagem e rótulo seriam várias imagens como esta. Certo? Depois disso, vou fazer essa altura um pouco menor. E depois salve-o. Vamos verificar. Veja, também temos esse botão de várias imagens. Agora, vamos fazer isso muda ou vamos criar uma nova função que terá várias imagens. Pontuação abaixo desta imagem selecionada que está carregando a imagem, vou apenas criar uma nova função. Ele retornará um vazio e o nomeará. Carregue várias imagens. Digamos. Agora, novamente, crie um seletor de imagens seletor. Então, agora antes, tínhamos esse arquivo exe. Mas agora teremos uma lista de x phi. Porque obteremos várias imagens que estarão chegando em uma lista. Como imagens grandes são iguais a aguardar. Selecionador. Escolha várias imagens. Aqui você pode ver nosso seletor de imagens nos dá várias opções. Podemos escolher a imagem, podemos escolher várias imagens , bem como podemos escolher vídeos também. Mas agora, nosso foco é apenas escolher várias imagens. Depois disso, vamos verificar se não é nulo. Isso significa que o usuário não voltou. Se for nulo, só retornarei nulo. Caso contrário, definirei o estado para que o carregamento seja igual a verdadeiro. Então eu percorro todas as imagens escolhidas. Então, vou escrever o ponto Future para cada um. Então o futuro será assim. Ou seja, temos que passar por isso. E a partir disso, obteremos X-Files. E vou apenas nomear a imagem. Então vamos torná-lo uma função sinc. Aqui. Aqui temos que fazer, temos que fazer o upload desse arquivo de imagem. Da mesma forma, como fizemos no Upload de imagem como o nome do arquivo e o arquivo de imagem. Eu farei a mesma coisa aqui. Vou simplesmente escrever. O nome da string é igual ao nome do ponto da imagem. E então, cada nível de phi image phi é igual à imagem de arquivo. Mas neste momento não estou comprimindo a imagem porque já sabemos como fazê-lo. Neste momento, meu foco é garantir que o nosso e o queixo estejam funcionando. Vamos ter um bloco try catch. Quando eles dizem imprimir. E nessa tentativa, vou simplesmente fazer nossa referência de armazenamento do Firebase, nome, arquivo de ponto e agora nosso arquivo de imagem, assim. E depois disso todo para cada loop é feito. Só depois disso, definirei esse estado novamente, carregando para false. E então vou mostrar um cachecol que é um lanche parte da imagem. Esta imagem foi carregada. O sexo é só assim. Certo? Nossa função está pronta. Agora. Vamos e ao pressionar nosso botão, vamos executá-lo. Ou seja, nossa bunda está aqui. Vou executá-lo assim. Vamos salvar e experimentar. Se estiver funcionando. Impressionante, eu li está lá? Vou clicar nele. Está lá. Selecionarei essas duas imagens e, em seguida, clique em Abrir. Carregamento prateado. Está lá. Todas as imagens carregadas com sucesso? E temos nossa imagem. Definitivamente, ele também está funcionando no Firebase. Eles são carregados. Podemos ver a partir daqui apenas que é, ele está sendo recuperado com sucesso. Portanto, é assim que você implementa várias imagens no armazenamento do Firebase. É isso. Aprendemos tudo em relação ao upload de imagens e como armazenar dados em cache, como compactá-los, muita coisa. No próximo vídeo, apenas implementaremos esse mesmo recurso em nosso aplicativo Node também. Obrigado. 22. Vídeo 84 — upload de imagens em um aplicativo de nota: Bem-vindo de volta. Agora aprendemos a usar o armazenamento do Firebase. É hora de implementar esse mesmo recurso em nosso aplicativo de nó também. Este aplicativo com construção muito estranha até agora em autenticação, bem como em uma seção Firestore. Primeiro, vamos tornar a tela inicial na tela inicial em main.out. Então, dívidas, podemos ver nosso aplicativo. Agora vamos criar uma função para selecionar Imagem e, em seguida, visualizá-la antes de fazer o upload do arquivo. Com base nas seções anteriores, aprendemos que estávamos apenas carregando a imagem clicando em um botão. Mas agora vamos aprender a selecionar uma imagem. Em seguida, o usuário pode ver a visualização do que ele selecionou. E se clicarmos no botão enviar, somente essa imagem será carregada para o armazenamento. Vá para a tela Adicionar nó. Aqui. Vamos criar algumas variáveis. Primeiro será arquivado. Isso é um arquivo de imagem. No começo, será nulo. E o segundo será string, que será o nome do arquivo. E no começo também não será nenhum. Já sabemos que esses dois são necessários quando estamos carregando a imagem. Agora vamos criar a função. Função vazia. Nomeie isso. Faça upload de imagem. Será uma sincronização. Em seguida, primeiro temos que criar uma instância do plugin de seletor de imagens. Então temos nossa imagem grande x phi é igual a aguardar. Selecionador. Escolha a imagem. fonte será emitida o quadro de ponto de origem. Como quando estamos escolhendo imagens, obviamente, escolherá a galeria. Então teremos uma declaração if onde verificaremos se ela é nula ou não. Se não for apenas retornado daqui conhecido por executar esse outro código. Caso contrário, vamos apenas dizer que arquivo de estado nome do arquivo de estado por variável de nome é igual ao nome do ponto da imagem, e o phi da imagem é igual a Arquivo e imagem.All part. Então, aqui vamos atribuir esse valor a essa variável. E você pode estar pensando por que eu escrevi essa variável aqui e não dentro da função. Eu, porque quero usar essa variável em toda a tela. Ou seja, quero criar um botão Upload Image. Tomamos o operador ternário para que mostre uma imagem em vez do botão quando não for nula. E se for nulo, ou seja, se o usuário não tiver selecionado nenhuma imagem. Nesse cenário, mostre o botão Upload, não a imagem. Vamos e vamos ver o que estou falando. Aqui. Nessa criança, temos uma coluna nessas crianças no topo. Vamos ter um contêiner. altura do recipiente deve ser 150. Então, naquele tímido, terei duas coisas. A primeira coisa é que se o arquivo de imagem for igual a nulo, então mostrarei um centro. E dentro da célula haverá um ícone. Será, eu posso começar, imagem. O tamanho será 100. E se não for, no entanto, há algum valor. Vou apenas, mostrarei uma imagem que é Image.All. E agora vou mostrar o arquivo porque ele está armazenado nesse arquivo. Aqui vou apenas dizer arquivo de imagem como este. E isso está mostrando que isso pode ser nulo. Então, vou digitar essa verificação nula. Ou seja, as margens garantem que isso não seja nulo. E abaixo do contêiner, vamos ter uma caixa de tamanho. Caixa de altura do tamanho. Agora vamos experimentá-lo se estiver funcionando ou não. Para ver. Como é nulo, nosso ícone é exibido e está muito bonito. Agora, se eu clicar nele, desculpe se por clicar nele, eu tenho que fazer envolver este contêiner com um widget chamado inkwell. E aqui na função tab, escreverei a imagem de upload. Este é um passo muito importante, obviamente. Mais uma vez, vamos verificar quando clico nele. Agora veja, isso está lá. Agora, se eu clicar neste ícone, veja que ele está sendo visualizado. Então, no momento, ele não está sendo carregado para o Firestore, é apenas uma prévia. Agora, essa parte está pronta. Agora, vamos fazer as alterações para que possamos adicionar quando Adicionar nota é reproduzida, depois a primeira imagem é carregada e, em seguida, esses dados são informados no Firestore. Então, aqui no local, temos isso. Caso contrário, na primeira condição, apenas adicionarei o arquivo de imagem. Se for nulo, escreva somente alfa. É adequado. Mas porque eu quero que a imagem seja preenchida. Agora, no else. Vamos tentar fazer isso. Primeiro, vamos criar nossa instância de armazenamento do Firebase do que na referência. E a referência será o nome do arquivo. Em seguida, coloque o arquivo. E temos nosso arquivo de imagem. Aqui. Novamente, temos que fazer null porque ele mostrará um erro de que o arquivo pode ser nulo. Mas vamos apenas escrever essa exclamação para garantir que o arquivo não seja suficiente. E, obviamente, fizemos a verificação nula aqui também. Então, depois que esse arquivo for executado, o que eu quero é que eu apenas adicionarei esse ponto. Então. Aqui vou receber o resultado de volta. Dentro desse resultado, apenas retornarei o resultado dot, ref, dot download URL, porque precisamos desse URL para que ele seja armazenado em nosso banco de dados Firestore com todas essas informações. Quando estivermos devolvendo, vou pegá-lo aqui. Vou apenas escrever imagem. Já é uma string. URL da imagem está de acordo com isso. E depois disso, o que eu quero é quando estamos inserindo um nó, queremos que esse URL da imagem seja enviado também. Então aqui vou apenas, antes de tudo, imprimir o URL da imagem e salvá-lo porque vou verificar se está funcionando ou não. Até aqui. Vou aqui, vou selecionar, selecionarei Estas imagens aqui. Vou apenas escrevê-los ou tremer. Vou excluí-lo mais tarde. E descrição como esta, e basta adicionar notas. E veja na impressão podemos ver que algo está armazenado no armazenamento do Firebase. Isso significa que está funcionando bem. Então, agora o que eu quero é que quando estamos inserindo um nó, eu quero que esse valor seja enviado também. É um URL da imagem como este. E, obviamente, em nosso nó de inserção, ele não estava sendo mencionado nesse parâmetro. Então, vou mencioná-lo aqui, como a imagem de string. E então vou adicionar um novo valor de imagem, imagem como esta. Certo? Agora, já que estamos mudando nossos dados de nós, mas definitivamente temos que ir para nossa classe de modelo e alterá-los aqui também. Então, aqui também basta escrever uma imagem de string. Então aqui nós exigimos essa imagem de ponto. E então no modelo aqui, à direita, instantâneo Aqui, imagem. Porque isso é uma coisa muito importante a se fazer. Agora, vamos mostrar a imagem do nó, que é nó com todas as imagens aqui também. Primeiro, excluirei todos os dados que já estão lá porque mostrarão uma adição. Caso contrário. Vamos excluir tudo no armazenamento baseado em fogo. Sim. Exclua os dois. E também no armazenamento também. Gostaria de excluir tudo e gostaria de começar com tudo novo. Vamos e eu vou mostrar isso. Mas antes disso, vamos fazer essas alterações em nosso estilo de lista na tela inicial. Quando formos, temos esse estilo de lista aqui. Na liderança. Basta dizer imagem da rede de convidados. Na URL da imagem, basta escrever uma imagem de ponto do nó, assim. E isso adicionou rígido. Ou seja, temos nossa imagem de rede de caixa. Aqui. Eu tenho o URL da imagem assim. Em seguida, o espaço reservado será contexto. Você está dentro. E simplesmente puxe o conjunto de pontos de imagem e as imagens barra de espaço reservado ponto JPG. E nesse widget adicionado, novamente, vou simplesmente escrever o contexto em que você está. E então eu escreverei um ícone aqui em vez disso. E aqui outra pandemia lá será adicionada. Certo? E depois da seta, assim como a largura de 70 para esta imagem e o ajuste da tampa dos pés da caixa. Certo, temos todo esse código DD. Agora, teste nosso aplicativo. Vamos marcar. Inicialmente, não temos anotações. Vamos inserir nosso primeiro. E vamos escrever Steve Jobs biografia de Steve Jobs sobre sua incrível história de sucesso. Vamos ver, aqui. Temos a imagem também. É disso que eu estava falando. Se formos adicionar outro que seja o Firebase, e eu vou apenas escrever, aprender, Firebase, serviços de back-end dominados também. E, em seguida, salve-o. E veja aqui as imagens de risco de incêndio também. E é por isso que mencionei essa largura porque quero que tudo esteja alinhado corretamente. Isso é tudo para este módulo também. Obrigado por se juntar. Aprendemos muito sobre os produtos Firebase e vamos. Obrigado.