Crie um sistema de atendimento de funcionários usando Flutter e Supabase

1. Introdução ao curso: Você está interessado em criar um aplicativo do mundo real com tártaro ou quer impressionar potenciais empregadores com suas habilidades de desenvolvimento móvel e conseguir o emprego dos seus sonhos, então este curso é só para você. Ele ensinará você a criar um sistema de gerenciamento de atendimento de funcionários totalmente funcional com desordem e supervisionar provedor como ferramenta de gerenciamento estadual. Supervisor é uma alternativa de código aberto ao Firebase e está ganhando muita popularidade entre a comunidade tecnológica. Começaremos criando um sistema de autenticação robusto, permitindo que os funcionários se registrem e façam login com seu e-mail e senha. Em seguida, criaremos uma interface amigável, permitindo que os funcionários deslizem facilmente para fazer o check-in e o check-out do dia. A localização atual do funcionário também será salva para que seja confirmado que ele está no escuro. O aplicativo também implementará recursos que permitirão que os funcionários visualizem seu histórico de atendimento qualquer mês do ano, atualizem seus dados pessoais, bem como o departamento da empresa, ao mesmo tempo em que mantêm gestão estadual eficiente usando o provedor. Ao final do curso, você terá um sistema completo de gerenciamento de frequência que poderá usar em sua própria organização ou mostrar seu portfólio sem perder mais tempo. Vamos começar. 2. Crie um projeto do Flutter: Olá, bem-vindo ao primeiro vídeo do curso, onde criaremos um sistema de gerenciamento de atendimento de funcionários com flutter e Superbus. Suponho que você já tenha conhecimento da desordem. E quando se trata de supervisionar, esses sistemas silenciosos são muito simples e simples, como o Firebase. Portanto, se você conhece o Firebase, não achará isso difícil. Além disso, usarei o pacote do provedor como ferramenta de gerenciamento de estado em nosso projeto. Você também deve ter conhecimento da dívida. Então, sem perder mais tempo, vamos começar criando um novo Projeto na Flórida. Vá para o diretório desejado e abra seu terminal. Em seguida, o comando, Flutter. Crie um centro de atendimento de funcionários. Obviamente, você pode usar qualquer nome de projeto. Depende de você. Em seguida, abra seu terminal. Desculpe, abra seu editor de código. Eu vou usar o VS Code. Então. Ben, seu projeto. Nosso projeto foi criado. Agora é hora de criarmos uma conta supervisionada. Abra seu navegador e digite supervise.com. Então esta é a página oficial aqui. Clique em fazer login. E, obviamente, estou assinando diretamente porque já fiz login anteriormente usando minha conta do GitHub Você definitivamente terá a opção de fazer login com sua conta do GitHub. Basta inserir suas credenciais e, em seguida, você será enviado para esta página. Aqui. Basta clicar em Criar projeto. Lembre-se também de que, para criar um novo projeto, você precisa ter uma organização. Então, eu tenho, nomeadamente, viagens. Você terá a opção de simplesmente nomeá-lo. Agora, aqui o nome do projeto será a participação dos funcionários. Vou apenas gerar uma senha aleatória. No entanto, escolha o motivo mais próximo. E o plano de preços será gratuito. Depois desse tempo, ele está configurando o projeto. Basta publicar seu VS Code. E aqui no novo terminal, vou simplesmente escrever esses dados combinados. Bob, adicione super maneiras, cada vez mais alto, ponto ENV. Esses são os pacotes necessários. Você também pode acessar bob dot dev e conferir esses pacotes. Estourar é usar vibração para interagir e supervisionar. E esse ponto ENV é usado para que nossas senhas não sejam comprometidas. Não escreveremos a senha diretamente no arquivo principal ou no Screens, sem problemas, desse jeito. Vamos apenas verificar o ponto de especificação do Pub YAML e ver. Nós temos esses dois. Temos isso para instalar. Agora. No diretório raiz do nosso aplicativo. Basta criar um arquivo e chamá-lo de dot ENV. Certifique-se de que você não está criando isso dentro daquilo. Você precisa criar no diretório raiz. E aqui armazenaremos as credenciais do Superbus, como avaliar o URL da superbase é igual a isso e super maneiras k é igual a. Então. Acesse o painel aqui, clique em Configuração de projetos e depois em API. E aqui você pode ver que o URL é copiá-lo e colá-lo aqui. E então copie isso. E na chave pública e cole-a nessa chave. É isso. Veja se você copiou e colou diretamente os detalhes aqui. Depois disso. Nesse arquivo YAML de pontos de especificação pub, temos que mencionar esse arquivo ENV de pontos na seção de ativos. Então vá abaixo aqui. Basta descomentar isso. Lembre-se de que este arquivo YAML de pontos de especificação Pub muito maiúsculas de minúsculas, portanto, qualquer espaço ou guia extra fornecerá em C Você deve ter muito cuidado com isso, assim como o ponto ENV e salvá-lo. Ok, então isso é tudo para este vídeo. No próximo vídeo, inicializarei nosso Superbus e executarei o aplicativo. Obrigada. 3. Inicialize o cliente do Supabase: Oi, vamos continuar. Então, como instalamos dependências, também precisamos configurar o Android. Então vá para o Android e depois para o aplicativo. E aqui dentro você tem o arquivo Gradle de compilação. Aqui. Primeiro. Você tem essa versão do Bile SDK. Faça 33, assim. Então você tem a versão mínima mínima do SDK. Sim, sim, aqui. Faça com que seja 19. E também possibilite várias décadas. Com essa linha. Se você já configurou o Firebase , sabe que eles são sempre necessários. Além disso, vou acessar a fonte do Android, manifesto principal do Android, e alterar o rótulo do Android para banir. Então esse será o nome do aplicativo, ou você pode dizer que esse é o sistema de gerenciamento de funcionários de uma empresa chamada Fang. Tudo bem. Em seguida, temos que inicializar esse cliente de supervisão dentro de nossa função principal. Então vá para o principal aqui. Sim, apenas faça disso uma pia. Então, como os rígidos, eles são vinculativos e aparecem inicializados. Em seguida, primeiro carregue os arquivos ENV. Eu vou imediatamente. E primeiro importarei o dot ENV, assim como importarei o Superbus flutter assim. E aqui vou simplesmente escrever esse comando dot ENV dot load. Então, ele carregará aquele arquivo DOT ENV de horas. E então eu inicializarei a supervisão. Primeiro, vou apenas obter URL down na chave em uma variável separada aqui está eu apenas escreverei ponto ENV, ponto ENV. Aqui. Temos que escrever o nome da chave. Se você sabe disso. Essa é a chave para os dados. Então, vou escrever isso e pode ser nulo. Então, vou me certificar de que é nulo dar a ele o valor de uma string vazia. Então temos que o supervisor é fundamental. Aqui. Era sobre uísque. Depois disso, inicializarei com a supervisão do código, não inicializarei. Então, aqui temos que fornecer o URL, que é soberbamente cURL. Uma chave Anon será muito arriscada. É isso. É assim que inicializamos o Superbus. Isso é muito simples. Agora, depois disso, vamos estruturar nosso projeto. Vou apenas fechar isso e o Android. E dentro da lib, estruturaremos nosso projeto em pastas em vez de escrever tudo em uma pilha. Então, crie uma nova pasta chamada screens inside lib. Em seguida, crie outra pasta chamada Constance. Outra pasta, você cultiva, portanto modelos. E, finalmente, temos serviços. Portanto, essa é a melhor maneira de escrever código. E insights. Greens, crie um arquivo. Tela de login ponto, ponto. vamos importar material e Por enquanto, vamos importar material e criar um widget moderno. Tela de login. Sim, vou devolver um andaime. Nesse corpo. Era simplesmente escrever. Está funcionando. E no domínio dot dot. Simplesmente. Primeiro, removerei esses comentários e removerei tudo daqui. Isso é da página inicial da aula. Remova tudo e dê à tela de login um valor para a página inicial. Salvar. Tudo. Depois disso, iniciarei meu emulador Android pixel five. Você também pode conectar seu dispositivo físico . Depende de você. E vou tentar executar esse aplicativo. Agora vamos ver se executamos ou se há algum editor. Essa é a primeira vez, então pode levar algum tempo. Então, até lá, se você quiser, pode simplesmente ir ao Superbus Flirted Darks. Aqui. E aqui. Você pode, você pode ver muitos elogios ou entender se não tem ideia sobre o Superbus. Vamos ver. Por que não temos outros cães? Sim. Aqui você tem todas as consultas, como buscar dados, inserir, como fazer login, como criar armazenamento e, além disso, esse URL será útil para você. Isso será útil. Certifique-se de que, se você tiver tempo livre, leia tudo aqui. Eu tenho alguma licença e tudo o que precisa ser aceito. É por isso que está demorando algum tempo. Isso é bom. Nós podemos esperar. Veja dapp. E agora a tela, que está funcionando, está lá. Isso significa que nosso aplicativo está funcionando perfeitamente. Vou apenas mudar aqui esse título para presença de funcionários e depurar o banner para falso. É isso. É isso para este vídeo. No próximo vídeo, trabalharemos na interface de usuário da tela de login. Obrigada. 4. Crie uma tela de login: Oi, bem vindo de volta. Então, neste vídeo, começaremos a trabalhar na interface do usuário da tela de login. Então, essa é a tela em os funcionários podem fazer login em sua empresa, que eu chamei de Pang, f e g. Então, vamos começar. Então, em primeiro lugar , isso criará variáveis para obter a largura e a altura do dispositivo. Então, simplesmente, dobre. A largura da tela é igual à consulta de mídia que os contatos devem ser, eles não são de contatos. Tamanho do ponto, largura do ponto. E da mesma forma, copiado, colado. Sempre terá a altura verde. E isso será alto. Agora, vamos começar. Vamos começar com vitória. Nesse corpo, usarei uma coluna que é o primeiro recipiente para estragos das crianças. altura do contêiner será baseada na altura verde dividida por três. O peso do contêiner será a largura da tela. Vamos fazer uma declaração. Consiste em caixa, decoração, cor, cores, vermelho, sotaque. Em seguida, fronteira. O raio será o raio da borda, circular. Deveria ser, deveria ser só. Então aqui dentro, certo? Canto inferior direito. Será um raio circular 70. Ok? E dentro desse contêiner temos aquela propriedade infantil. Ele, novamente via coluna, fornecerá um ícone aleatório e primeiro permanecerá alinhamento principal do excelente centro de Mendota para que a criança seja enviada para fora deste contêiner. E então temos que crianças e crianças terão lagos para avaliar se eu posso iniciar o scanner de código QR. Você pode codificar QR ou dar o que eu quiser. Les dot white, tamanho por dia. Em seguida, forneça o tamanho das rochas de altura, dia e, em seguida, forneça o texto do nome da empresa. Eu vou fazer isso. Estilo Fang. Têxtil. O tamanho dos títulos será 25. As cores são brancas. Espessura da fonte, peso da fonte, negrito. Salve tudo. Vamos conferir. Veja, parece uma descida. Temos esse raio inferior aqui. Esse é o contêiner das galerias com X vermelho e você pode mudar a cor de acordo com sua necessidade. Então, temos nessa criança em uma coluna que eu posso terminar com um texto que está no centro, já que fornecemos o alinhamento do eixo principal ao centro dos pontos. Agora, depois disso, temos que criar dois textos, qualquer controlador para esses campos de texto. Para eles, propósito de login. Então, vamos entrar nessa classe aqui e escrever o controlador final de edição de texto. Controle de e-mail capaz de controlar edição de texto. Da mesma forma, também temos o controlador de edição de texto para senha. O controlador de senha é que eles farão qualquer controle. Em seguida, dentro do widget da coluna. Aqui, crie outro widget de coluna com um pouco de preenchimento. Então, abaixo, vamos ver. Temos esse widget de coluna, que termina aqui. Em seguida, forneça um tamanho de espaçamento, altura da caixa 50 do que profundidade. Ao adicionar widget. Eu vou dar que o estofamento é 20. E eu adoro que o preenchimento será uma coluna. Agora temos essas crianças. Nesse caso, as crianças terão esse campo de texto. Declaração, declaração de entrada constante. O rótulo será texto. Empregado, e-mail, identidade. Corrigir. Eu posso, eu posso começar uma pessoa. Você pode escrever para uma pessoa, você pode escrever um e-mail, o que quiser. Borda, contorno da borda de entrada. Então, temos a opção de controlador fora da declaração e forneceremos a ela o controlador de e-mail. E depois desse campo de texto, forneça algum espaçamento. Tamanho, altura da caixa 20. Vamos salvar tudo. Você pode ver o código e agora ver que temos o ID de e-mail do funcionário como este. Então é isso para este vídeo. No próximo vídeo, concluiremos essa tela de login, bem como criaremos a tela de registro. Obrigada. 5. Crie uma tela de registro: Vamos continuar trabalhando na tela de login. Abaixo desse tamanho de caixa. Crie outro texto. Você pode simplesmente copiar esse texto e colá-lo. Aqui. Será uma senha. Eu posso Solvay, posso começar a sorte. O controlador será o controlador de senha e o texto obscurecido será verdadeiro. Ou seja, tudo o que digitamos não deve ser mostrado para mais ninguém. Ele virá como estrelas. Abaixo deste texto, forneceremos algum espaçamento. Caixa de tamanho, altura 30. E então vamos usar o botão. Dê a ele uma caixa de tamanho. Sua altura será de 60, o que será um infinito de pontos duplos. A criança terá um botão elevado. Esse texto escrito no botão será o login. E também daremos um estilo tecnológico a ele. Tamanho da fonte 20. Faça com que seja consistente. Em seguida, dê um pouco de estilo ao botão elevado. Então, aqui, como o estilo elevado de dez pontos , é assim que você dá estilo ao botão elevado. A cor de fundo será aquela cor com um toque vermelho. E a forma será arredondada. Borda retangular, raio da borda, raio da borda. Circular hoje. Isso é só, deveria estar no final da discussão. É isso. Vamos dar uma olhada. Veja, o botão também parece bom. Agora está na hora. Criamos outra tela para registro. Portanto, na tela interna, basta avaliar o ponto de ponto registrado na tela. Então, obviamente, esta é a página em os novos funcionários podem registrar, copiar e colar esse código da tela do funcionário aqui. Em seguida, primeiro mudaremos o nome para a tela. Ok? Agora, aqui no andaime, teremos um MBA para que também possamos mostrar o botão Voltar. Vamos simplesmente escrever a barra AB, as cores da cor de fundo, o acento vermelho, a elevação zero. E vou apenas mudar a altura para ajustar com a barra do aplicativo. E por fim, no botão, escreverei aqui cadastre-se. É isso. Somente essas três mudanças. Salvar. Agora também temos a tela de registro. Agora vamos navegar até a tela de registro a partir da tela de login. Então vá para o arquivo de pontos da tela de login. Aqui. Abaixo desse tamanho de caixa. Vou dar um pouco de espaçamento com esse tamanho de caixa D. E vamos criar um botão de texto que navegará até a tela de registro. Então, vou apenas adicionar texto. Você é um novo funcionário registrado aqui? E na avaliação local, navegue pelo Bush. Espero que você já conheça esses comandos. Essas são todas as noções básicas de como navegar. Agora tudo o que temos para escrever um texto aqui e enviaremos para a tela de registro como esta. E isso é uma constante. C. Salve tudo. Agora temos o login e, se eu clicar em registrar aqui, vejo que também temos a tela de registro. E aqui na barra do aplicativo, temos o botão Voltar, que podemos acessar novamente a tela de login. Então, para este vídeo, criamos com sucesso a interface de usuário para login e registro. Nos vemos na próxima sessão. 6. Crie classs de serviços de autenticação: Oi, bem vindo de volta. Então, agora é hora de começarmos a trabalhar com dados, ou você pode dizer estado. E para esse propósito, usaremos o provedor como ferramenta de gerenciamento de estado. Então, agora vamos instalar o pacote do provedor nesse terminal. Basta escrever uma carta para o provedor de anúncios. É isso. Você também pode acessar o site bob.gov e divulgá-lo a partir daí. Basta verificar. Sim, temos o provedor. Agora, vamos primeiro criar uma classe de utilitários. Então, dentro da pasta utils, crie um novo arquivo. Ponto ponto. Criaremos uma função estática para mostrar a lanchonete. Uma vez que isso será usado muitas vezes. É por isso que estou criando um método separado para isso. Basta importar material além do vidro. Você cultiva essa espessa, larga. Então, lanchonete. Aceitaremos a mensagem, o contexto da campainha e um valor opcional de cor, que pode ser nulo. Uma vez que isso é opcional. Em seguida, escreveremos escafóide, mensageiro de contextos, lanchonete dot show. Então esse, esse código é da Flatter. Lembre-se, lanchonete. Agora, contente, vou enviar um texto e enviar uma mensagem aqui. E dentro dessa lanchonete, dentro dessa cobra, mas temos essa cor de fundo. Isso será cor. É isso. Portanto, se for nulo, ele obterá sua cor padrão. Agora, temos essa função utilitária aqui. Agora vamos criar nossa classe de serviço de arte. Agora as coisas vão ficar interessantes. Percepções. Serviços, certo? Pesquisas, escuras, escuras. Aqui, escreveremos todos os métodos relacionados à autenticação. Então, primeiro, vamos empacotar o material, depois importar e supervisionar o pacote. Em seguida, crie as pesquisas de arte da classe, que ampliarão, alterarão, notificarão ou, já que usaremos o provedor. Então, primeiro vou criar uma instância do cliente Superbus. Portanto, a supervisão da glândula é igual ao cliente de pontos da instância de ponto superbase. Isso é apenas criar uma instância. Então eu vou criar sua variável de carregamento. Está carregando. Eu criei uma variável privada para cada carregamento e , em seguida, criei getter e setter para que usuários fora dessa classe não possam acessar esse valor diretamente. Eles precisam passar por isso, então não podem mudar isso diretamente. Um serviço estranho faz isso, eles não podem fazer isso. Eles precisam usar esse conjunto de métodos. Método. O conjunto está carregando. Enviaremos um valor bool. Será que o carregamento é igual ao valor. E notifique os ouvintes para que qualquer pessoa que esteja ouvindo esse estranho serviço se atualize. Então é isso. Para este vídeo. No próximo vídeo, trabalharemos em diferentes métodos. Obrigada. 7. Método para registrar um funcionário: Oi, bem vindo de volta. Então, agora vamos criar um método para permitir que um funcionário registre uma conta. Nas artes ou na classe de risco. Uma função futura. Registre o funcionário. Assim. Exigiremos o e-mail, caracteres, a senha e os contextos da campainha para mostrar aquela lanchonete. Em seguida, envolveremos o código dentro do bloco try catch. primeira tentativa que farei está definida, está carregando como verdadeira. É. Vou usar esse método de configuração. Em seguida, verificarei se o e-mail é igual a vazio. Nossa senha é igual a Md. Em seguida, lance um erro. As baleias são obrigatórias. E se não, escreverei a consulta para assiná-los. Ou seja, esse tipo de dados, que é o retorno, é chamado de resposta artística. Em seguida, adicionarei a instância await Superbus é aquela variável ponto, ponto se inscreva assim. E aqui temos que enviar esse e-mail e a senha. E depois disso, mostraremos a lanchonete utils dot show. A mensagem será um sucesso. Agora você pode fazer login e a cor será verde escuro. Então eu vou simplesmente escrever, navegar até o terceiro ponto, estourar. E set está carregando como false. Então esse é o código. E se houver algum somador? Primeiramente, o que vou fazer, um conjunto está sendo carregado como falso. Então eu vou mostrar aquela lanchonete até que ponto mostre a lanchonete. A mensagem será e dot toString. Os contextos serão contextos, mas a cor será vermelha. Ok? Então esse era o método de registro. E eu vou apenas acessar a documentação aqui. E eu vou te mostrar esta linha que está assinando um usuário C, você obtém Dakota, aqui está a resposta, a supervisão ou o login com senha. Este é o signo em estudo. Temos isso para criar um novo usuário e se inscrever em C dot. Então, isso é muito simples. Assim, você também obtém o usuário a partir da resposta. Então é isso para este vídeo. No próximo vídeo, escreveremos o método para fazer login, sair e Q. 8. Método para fazer login e sair: Olá, vamos continuar com nossos métodos. E abaixo dessa função de registro, vamos criar outra função, ou minha terceira, você pode dizer, para login, empregue esse futuro. Agora, novamente, empregue aqui também. Perguntaremos pelo chavão do e-mail, contextos de fatura. E esse código é muito parecido. O que você pode fazer é copiar esse código, colá-lo aqui e, em seguida, aqui está o carregamento para a verdadeira resposta artística. Essa será a senha seno em peso. E eu não preciso mostrar nossa navegação aqui. Basta definir o carregamento como falso. E suponha que tenhamos algum erro. Vai pegar aqui. Eu vou ceder. Abaixo dessa grade de funções. Outra função exige o encerramento da sessão. Isso é muito simples, como um peso. Então, forneça arte, saia. E notificaremos os ouvintes. Também criaremos um getter para que o usuário receba o usuário atual do Superbus. Simplesmente, a luz supervisiona essa arte, pontilhe o usuário atual. Assim. É isso. Isso saberá se o usuário está assinando ou não. Agora, temos o provedor aqui, certo? Temos que declarar nosso provedor nesse ponto principal, pontos, para que o nariz fique mais plano que fornecemos em nosso aplicativo. Então, simplesmente aqui com um rígido chamado multiprovedor. O provedor, já que teremos vários fornecedores posteriormente. Aqui. Aqui, basta escrever, notificar seu provedor. Em seguida, crie. E temos o contexto da parada de ônibus aqui. E escreva um serviço estranho. Simplesmente assim. É isso. É assim que você declara provedores em um aplicativo flutter. Então é isso para este vídeo. No próximo vídeo, atribuiremos esses métodos à interface do usuário. Obrigada. 9. Métodos Assign para UI: Oi. Então, agora é hora de atribuirmos a função registrada e a função de login à nossa interface de usuário. Então vá para a tela de registro. Nesse botão de registro. Vou embrulhar esse consumidor elevado, mas depois interno , para que possamos acessar propriedades e métodos do serviço AAD. E vou usar essa maneira para que não aquele widget completo, ou seja, a função de fatura, não seja reconstruído repetidamente , apenas esta seção que reconstruiremos. Então, vamos escrever como consumidor, consumidor. Aqui temos que mencionar qual provedor estamos usando. Então temos o construtor. Isso terá sido um decks ou uma instância do provedor de serviços. Essa prisão não serve para nada. Aqui. Temos que devolver esse tamanho de caixa. Acabei de receber pasta. Dê ponto e vírgula. Aqui. Isso é quatro. Ok, temos que remover apenas isso, é isso. Então, agimos. Além disso, mostraremos um indicador de carregamento e carregamento condicionalmente. Aqui. Nessa criança, escreverei estranho provedor de serviços dot is loading. Se for verdade, mostre no centro a criança e seu indicador de progresso mais legal, como este. Ou seja, se o carregamento for verdadeiro, Mostrar indicador de progresso circular. E se não, então, no local, escreveremos um provedor de serviços estranho, funcionário registrado. Aqui temos o texto de ponto correto do controlador de e-mail nessa senha. Texto de pontos do controlador de senha. E aqui eu também vou dar um sonho. E se houver algum espaço extra? Moldura? K? Então, esse consumidor é o conceito de fornecedor. Então você deveria pelo menos conhecer esse conceito. Então. Da mesma forma, vá para a tela de login. Aqui. Nós temos esse 1 s, eu acho. Sim. Sim. Ok. Sim. Aqui. Esse tamanho é fornecido com aquele provedor de serviços diretos ao consumidor. Então temos o construtor. Foi uma instância de texto da classe de serviço de arte, ou seja , levemente, você pode chamá-la de qualquer coisa. E temos o chai e, em seguida, basta retornar esse botão de login. Essa criança. Da mesma forma , aqui nessa criança, nós a daremos condicionalmente. O sabor. O serviço estranho fornecido está sendo carregado. Em seguida, const center, indicador de progresso circular. Assim. E na imprensa, escreveremos provedor de serviços estranho, funcionário de login de pontos. Eu tentei controlador de e-mail, texto de pontos, controlador de senha dot txt. E também aqui, novamente, você pode fazer o acabamento. Isso é um sucesso. Salve tudo. Agora. Vá até eles. Painel de controle excelente. Aqui. Autenticação econômica. Nesses provedores, como você pode ver, o e-mail é ativado por padrão. Vou apenas desativar esse e-mail de confirmação porque precisamos verificar cada e-mail antes da inscrição. Posteriormente, se quiser, você pode ativá-lo. Agora, clique em Salvar. Então, agora o e-mail está lá, como se agora não tivéssemos usuários. Vamos finalmente verificar se está funcionando ou não. Agora, se eu der algo e escrever 12345 e clicar em Login, vejo que temos uma exceção estranha, credenciais de login inválidas. Ou seja, esse e-mail e senha não estão registrados como agora. Eu vou registrá-lo. Use qualquer e-mail que você quiser. Em seguida, senha, clique em Registrar. K, sucesso. Agora você pode fazer login. Veja. Agora, se eu escrever essa senha, deveria ter sido. Obviamente que agora eu não estou fazendo nada. Nós não seremos enviados para nenhuma tela no momento, obviamente, porque não estamos ouvindo as mudanças. Mas se eu for lá e recarregar, veja, temos o e-mail registrado com sucesso. Então é isso para este vídeo. Espero que você tenha aprendido e entendido até agora. Nos vemos na próxima sessão. Obrigada. 10. Crie modelos de usuários e tabelas Db: Oi, bem vindo de volta. Então, agora vamos criar um modelo para os dados do usuário. Então, dentro da pasta models, crie um novo arquivo chamado User model dot dot. Agora, todos esses dados serão armazenados no banco de dados após o registro do usuário. Então, agora, quando estamos apenas, podemos ver esses dados dentro da seção de autenticação. Mas e se quisermos que o nome do funcionário ou o departamento dele empregue os dados que temos que armazenar no banco de dados. Então, digamos Glass. Modelo de usuário. Os dados, que parecerão futuros, serão binários, ID da string, depois string fina, e-mail, nome final da string, vinil. Faça-o grande. Departamento de TI final. Como criaremos outra tabela para o departamento e a ferramenta na lista, a ID que é essa será uma chave estrangeira para a chave primária Se você conhecer o conceito de SQL e, em seguida, string binária, ID do funcionário é a ID que criamos. Ou seja, essa será uma ideia única. Vamos criar um construtor. Em seguida, o ID necessário, obrigatório. Eles não enviam e-mails. Adquiriu esse nome e departamento. Como está em um liberal, não estamos escrevendo o necessário. Não há identificação de funcionário. Agora crie um método de fábrica para converter os dados JSON que vêm da superbase para esse modelo. Portanto, monte o modelo de usuário de fábrica para o modelo do usuário dot Rahm, Jason, mapeie, execute dados dinâmicos e retorne um modelo de usuário. E aqui você tem que escrever dados. Id é departamento de TI baseado em bits GAAP que resta. Isso será um e-mail. Isso será nomeado. Esses nomes ou nomes de colunas, que criaremos no ID de funcionário do departamento da Superbus. Ok, salve todas essas coisas. Isso não é obrigatório. Agora, vamos criar uma tabela adicional para o departamento. Vamos para um navegador. Vá para o seu navegador. Em seguida, vá para o Editor de tabelas. Em seguida, crie uma nova tabela. Nome. Departamentos. Então, não habilite o IRLS por enquanto. E também não precisamos desses dados em tempo real. Basta criar uma coluna de título. Faça com que seja um texto. É isso. Salve isso. Em seguida, insira alguns dados aqui. Então, aqui, primeiro serão as vendas, depois o departamento de identificação, depois o marketing e o RH, depois as finanças lá. Esses são apenas os departamentos de uma empresa que está em operação. Então, eu inseri dados. Suponha que, se você quiser, possa criar outro aplicativo para o administrador da empresa. Ele pode inserir esses dados em seu portal de administração. Depende de você. Agora temos os departamentos. Eles criarão outra tabela chamada funcionários. Empregados. Mais uma vez, remova o RLS por enquanto. E depois. Esse id será uma chave estrangeira para o ID do usuário artístico. Isso, então esse id será o mesmo que a ideia autenticada do usuário. Apenas salve-o. Em seguida, dê um nome a ele. Faça com que seja um texto. Então temos esse e-mail. uma mensagem de texto. Em seguida, forneça uma linha por coluna por departamento. Será uma chave estrangeira para o ID do departamento como esta. E, em seguida, temos o ID do funcionário. Id. Isso também acontecerá com o texto. Portanto, temos duas chaves estrangeiras, departamento e id. Isso também é principalmente. Salve isso. Espero que você entenda que essas tabelas são iguais a esta. Esses IDs de dados podem limpar a ID do funcionário do departamento. Agora, finalmente, em suas constantes, eles criarão o nome do arquivo constants dot dot. Escreveremos que eles nomearão as variáveis estéticas aqui, por isso é fácil usá-las posteriormente em qualquer lugar do aplicativo sem nenhum erro de digitação. Como vidro, constantes. Essa tomada sumiu. A tabela de funcionários é igual à dos funcionários. E esse **** departamento perdido é igual a dois departamentos. É isso. Fizemos muita coisa neste vídeo. Nos vemos na próxima sessão. 11. Criando class de serviços de banco de dados: Oi, bem vindo de volta. Neste vídeo, trabalharemos na criação de uma classe de serviço de banco de dados. Então, anteriormente, temos as pesquisas de arte. É hora de criarmos outro arquivo dentro dos serviços e chamá-lo de DV, surveys dot dot. Portanto, crie um serviço de banco de dados de classe que se estenderá ao modificador de alterações, já que, nós o usaremos, o usaremos como um provedor. Em seguida, crie uma instância do cliente da pelve. O supervisor é igual a supervisionar o cliente de pontos da instância do ponto. Ok? Agora, a primeira função que criaremos é inserir novos dados do usuário. Eles limitarão a inserção de uma nova tabela de banco de dados de usuários que criamos para funcionários. Temos que armazenar essas informações lá. Do usuário. Solicitaremos ou enviaremos um ID de e-mail, que é o ID artístico. Já que aqui mencionamos que a ideia será uma doação estrangeira. Essa é a única razão pela qual eles estão inserindo no banco de dados. O comando é purveys instance dot de qual tabela? O nome da tabela está nessa tabela de início constante de funcionários. Em seguida, pontilhe diretamente a consulta que será inserida. Aqui temos que enviar um valor do mapa. É isso. Essa é a única consulta necessária para criar nossa inserção de novos dados. Aqui. Id será id. O nome ficará vazio, pois é um novo usuário. O e-mail será e-mail. Então isso é novo, isso é ID de funcionário. Isso nós temos que criar uma função para gerar. Nós o criaremos e, em seguida o departamento será nulo por enquanto. Espero que tenhamos o departamento, sim, temos o departamento lá. O usuário pode atualizar seu departamento posteriormente na seção de perfil. Agora, temos que criar uma função para obter um ID aleatório. Então, vamos criar uma sequência de caracteres, gerar um ID de funcionário aleatório. Agora, usaremos a função aleatória aqui. Isso vem da biblioteca de matemática. Agora, o que eu quero, quais personagens eu quero é apenas o nome da empresa aqui. Suponha f, a e g, depois F maiúsculas, a e G, e então todos os números assim. Isso significa que a função criará o ID somente a partir desses números, ou seja, somente desse caractere. Ou seja, isso é apenas minha preferência. Você pode usar todos os caracteres, ou seja, de a a Z. Estou apenas usando isso. Então. Eu realmente poderia escrever uma função que eu mesmo obtive da Internet. Lista, geração de pontos, terra, Taiwan, oito caracteres. Então aqui, todos os personagens. Ponto aleatório, próximo, int, caracteres, comprimento de ponto e, finalmente, no final, junção de pontos, junte assim. Então, esse Chen Eu mesmo pegou um deus da Internet. Você também pode usar qualquer outra função de geração, se quiser. Essa cadeia faz o quê? Ele cria um ID aleatório de oito dígitos a partir desses caracteres. Agora, chame essa função aqui. Temos a função de inserção de novo usuário pronta. Agora, chamaremos essa função de inserção de novo ao registrar um novo usuário. Então vá para o serviço AAD. Enquanto estamos aqui, quando estamos nos registrando. Agora vamos ver. Temos a resposta final da arte aqui. Vou simplesmente escrever se a resposta não for igual a null, depois isso e colar tudo aqui. Primeiro de tudo, vou fazer é esperar. Eu tenho que criar uma instância desse serviço de dv no topo. Por serviço de banco de dados nulo. O recente. Crie uma instância para que possamos usar as funções. Então, aqui, vou escrever abaixo disso, acima desses utilitários, divi surveys dot insert new user. Você pode dizer que o e-mail e o ID de Lee responderão à ID do usuário. Isso. Temos que enviar o e-mail e eles são pequenos. Em seguida, mostraremos uma lanchonete que mostra aqui nas proximidades. Vou apenas escrever cadastrado com sucesso e não quero que o usuário o novamente e depois suas credenciais de login. Então, o que eu posso fazer é chamar a função de login aqui, assim. Empregado de login. Eu tenho a senha e o contexto do e-mail. E como o carregamento de colonos também é falso aqui. Então, vou remover isso da função de que há coisas em Chen. Não quero que eles definam o carregamento como falso porque é chamado diretamente do funcionário de login. Aqui. Espero que você tenha entendido que chamei essa função aqui para que o usuário não precise inserir esse e-mail novamente após o registro. Imagine que aqui está registrado e agora novamente tem que ir para a página de login e digitar novamente os mesmos dados de login. Essa é a única razão. Agora, como temos esse novo provedor, vou declará-lo no provedor múltiplo. Então, basta ir aqui, copiar esta linha, colá-la e escrever o serviço dv. É isso. Então é isso para este vídeo. Vamos continuar na próxima sessão. Obrigada. 12. Lidar com o estado de autenticação do usuário: Oi. Então, temos tudo pronto. Essa é a parte de registro e login. Agora, na tela Insights, crie uma tela inicial para que o usuário possa navegar até ela depois de se registrar com sucesso. Então, basta importar o material e criar um estado rígido, chamá-lo de tela inicial. Então, aqui, basta devolver uma criança centrada no corpo do andaime. E eu vou escrever na tela inicial. Portanto, esses são apenas dados fictícios por enquanto. Apenas o widget de texto simples no meio da tela. Agora, temos que verificar, é quando o usuário ou os pinos que temos que verificar se ele está logado ou não. Ou seja, se um novo usuário já fez login antes. Portanto, temos que mostrar a ele a tela que é página de login ou a tela inicial condicionalmente. Para essa tela de visão, crie uma nova tela chamada tela inicial. Ponto ponto. Mais uma vez, importe material. Em seguida, crie um rígido sem estado, chame isso de tela inicial. Então aqui no cinto. Em primeiro lugar, vou ligar para o provedor estranho. Ou seja, pesquisas ímpares são iguais a fornecedores de contexto. E depois o serviço. Em seguida, retornarei o arquivo adequadamente, seja, se o usuário atual escuro do serviço AAD for igual a nulo, então para a tela de login, para a tela inicial. É isso. Eu sei que antes, depois de me registrar, eu também adorei os detalhes. Então, por enquanto, vou chamar as pesquisas de arte sair para que a sessão termine. E vá até o ponto principal e faça a tela inicial como a tela raiz. Assim. É isso. Vamos ver, incapaz de passar. Qual é o problema aqui? Ok. Basta ir até o main.out e a tela inicial e comentar isso por enquanto. Ok, para notificar a lista repetidamente. Ou seja, isso não é. Então, obviamente, não chamaremos essa função aqui novamente mais tarde. Mas agora, como temos essa seção de banco de dados aqui, precisamos acessar a autenticação e excluir esse usuário porque antes não salvávamos os detalhes do usuário no banco de dados. Exclua esse usuário, nós nos registraremos novamente. Agora, vamos lançar nosso aplicativo. Clique novamente no e-mail. 345. Cadastre-se. Agora vamos ver se fizemos login diretamente ou se não nos registramos com sucesso. E somos enviados diretamente para a tela inicial. Então eu estava falando sobre isso. O usuário não precisa fazer login novamente porque é uma boa experiência, eu acredito. Então. Agora, se eu reiniciar, vamos ver em qual página eu vejo isso? Eu vejo o login ou diretamente na tela inicial. E veja se estamos na tela inicial. Não há tela de login e tudo mais, pois também estamos lidando com o status desse usuário. Então, obrigada. No próximo vídeo, trabalharemos na parte da interface do usuário da tela inicial. 13. Trabalhe na tela inicial: Oi, bem vindo de volta. Agora vamos começar a trabalhar com a criação de uma barra de navegação inferior. Na tela inicial, você verá que o ensino doméstico está vazio no momento. Então, vamos trabalhar nisso. Vá para a tela inicial. Aqui. Abaixo do corpo. Vamos criar uma navegação inferior, uma barra de navegação. Será um contêiner. É o valor. Então, a altura do contêiner é 70. Em seguida, dê alguma margem. Const, as bordas inserem pontos apenas à esquerda, 12, direita, 12, parte inferior 24. Depois decoração. Dê uma decoração de caixa consistente. Então, aqui, dê cor. As cores são brancas. Em seguida, raio da fronteira. Raio da borda, raio do ponto, ponto circular para t. Em seguida, dê também o efeito de sombra da caixa. Ele aceita uma matriz e o único valor que forneceremos é box-shadow, depois mais opaco. Cores, escuro, preto, 26, raio de desfoque. Em seguida, compense. O valor do offset será 22. Então, vamos ver como fica. Veja, temos essa barra de navegação agora, é apenas um determinado contêiner. Vamos adicionar os valores aqui. Eles serão ícones aqui. E para isso, vou usar uma biblioteca conhecida como ícones Font Awesome. Então, basta abrir o terminal, extremidade direita do terminal, mais plana. Adicionar fonte. Carta incrível. Então esse é o nome que eu posso, esse é o nome do pacote. Pressione Enter. Você também pode ir até o desenvolvedor e pesquisar esse pacote, se quiser. Este pacote nos ajuda a usar muitos ícones. Neste aplicativo. Não usaremos tantos ícones. Ou seja, se quiser, você também pode removê-lo posteriormente. Para fazê-lo funcionar, você precisa interromper o aplicativo, pois é um pacote novo , e executá-lo novamente. Vou apenas fechar este arquivo. E isso é que eu não preciso desses arquivos agora. Somente a tela inicial. Ok? O que acontece? Agora, novamente, trabalhando. Agora, vamos criar os ícones dentro desse contêiner. Aqui naquela criança. Basta dar uma linha. Fileira. Você tem filhos. E nessa fila, certo? A principal existe e cruza o eixo para o centro, assim. E então precisamos que **** possa dizer que vamos fazer isso. Eu posso ver uma lista de ícones, dados, navegação e ícones. Na pior das hipóteses, vou deixar os ícones do Font Awesome, aqueles dias sólidos do calendário e, em seguida, o ícone Font Awesome, verificarem. E, finalmente, Font Awesome icon dot solid user. Então, esses são os três ícones que usaremos. Aqui, as crianças, simplesmente com a razão, dão um loop em forma. Pois int I é igual a zero. Eu tenho menos do que o comprimento do ponto dos ícones de navegação I mais mais. Em seguida, use esse operador de propagação. E então usaremos a criança expandida como centro. E então o ícone F fornece índice aos ícones de navegação de que, um por um, todos os ícones serão produzidos em uma região expandida. Então, agora vamos verificar como fica. Se eu for ver, temos aqueles três que eu posso ver aqui parecendo decentes, eu acho. Agora, obviamente, nada acontece se eu clicar nele. Temos que trabalhar nisso. Agora, aqui abaixo dos ícones, vamos simplesmente como se int current index fosse igual a um. E nessas crianças, temos isso expandido. Então esse centro está dentro do GestureDetector. Na aba. Simplesmente escreveremos o estado definido. O índice atual é igual a I, altere o índice. E então aqui vamos mudar essa cor de acordo com o índice. Então, avaliaremos a cor. Se, se I for igual ao índice atual, então as cores com destaque em vermelho são escuras, pretas, 54. Tamanho semelhante. Se I for igual ao índice atual, então torne-o 30 ou então 26. Vamos ver se está funcionando ou não. Se eu clicar aqui, vejo o tamanho e a cor do ícone, ambos estão mudando. Agora, você pode ver que temos três telas. Então, vamos criar essas três telas. Dentro das telas, crie calendário, tela, ponto, ponto e, em seguida, presença, ponto verde. E, finalmente, temos o arquivo de ponto verde. Dentro de tudo de forma simples, vamos criar uma tela básica. É importante que o material crie então o credor. Ecrã. O retorno é um andaime. Corpo, centro, criança. O próximo calendário. Copie tudo. Vá para a tela de presença com base na mudança de nome para depois dançar. Luz verde hoje. Comparecimento. E da mesma forma, vá para a tela do perfil, cole tudo. Mudaram seu nome para tela de perfil e perfil de ideia. Esta é apenas uma tela fictícia no momento. Por fim, adicione essas telas no corpo da tela inicial para que possamos navegar até elas com a ajuda da barra de navegação inferior. Então vá para a tela inicial aqui. Acabe com o corpo aqui, certo? Indexado. Aquela estaca aí. Então, no no índice estará o índice atual. E as crianças serão todas as páginas. Isso será constante. Vamos escrever os credores em verde como primeiro, depois verde e depois na tela do perfil. É isso. Salve tudo. Confira. Veja a participação de hoje. Se eu clicar em calendário. E se eu tiver, se eu clicar no arquivo de upload e, desde que indexa quando é 01, leia a primeira página exibida. Essa frequência é de hoje? Então, tudo está funcionando até agora. No próximo vídeo, trabalharemos nisso hoje e depois na tela. Obrigado. 14. Trabalhe na UI de participação: Oi, bem vindo de volta. Então, agora vamos começar a trabalhar nessa data e, em seguida, exibir a interface do usuário. Então, aqui no corpo, vamos começar com o ScrollView de filho único. Nessa criança terá uma coluna rígida. E então, quando as crianças e aquela criança solteira passarem, eu darei algumas armas de acolchoamento e insisto que todas as 20. Agora, nessas crianças, vamos ter um widget de texto sobreposto dentro do contêiner. Forneça alinhamento de TI com o alinhamento. Pontos centrados, à esquerda. Em seguida, margine, const, adicione conjuntos, não apenas 32. Então criança. Const. Texto de boas-vindas. Estilo. Têxtil. No tecido, dê um pouco de cor. Cores, não preto 54. E o tamanho da fonte é 30. Ok, guarde isso. E então abaixo desse contêiner, como outro contêiner que está aqui, temos as boas-vindas e aqui teremos o nome do funcionário. É alinhamento. Alinhamento, centro esquerdo. Então a criança olhou, mandou uma mensagem. Sou o nome de Louis. Este é apenas um funcionário chamado Dummy Light. Agora, mostraremos mais tarde estilo do texto e forneceremos a ele um tamanho de fonte de 25. Agora salve-o. Vamos conferir. Veja, temos o nome de boas-vindas e o nome do funcionário aqui. Então vamos continuar. Abaixo deste contêiner. Eu vou ter outro contêiner. Copie este, cole. Aqui. Haverá margem. Como const. A adição define apenas 32. E aqui os textos serão de dois dias. Isso funciona. E o tamanho da fonte funcionará bem. E depois abaixo desse contêiner. E esse recipiente, dê uma margem. Const. A adição define apenas 12. Mas eu tenho 32 anos. Eu escrevo 150. Declaração. Decoração de caixa consistente. As cores do LED são: branco, caixa, sombra. Temos a sombra da caixa aqui. Bem, haverá cores que 26. Então, o raio de desfoque é, então, um valor de deslocamento para dois. E abaixo disso, isso está abaixo da sombra da caixa. Temos esse raio de fronteira. Raio da borda, os pontos do raio são mais frios. Agora diga, bem, vamos ver como está e ver o status atual do estado e isso parece decente. Agora. No próximo vídeo, trabalharemos na interface de usuário excluída. Obrigada. 15. Implemente Slide para fazer check-in: Oi, vamos continuar trabalhando. Então aqui nós tínhamos esse contêiner. Dentro dessa grade de contêiner, esse widget de linha secundária. Haverá crianças. As crianças aqui escreverão o alinhamento do eixo principal, o centro, o alinhamento e os pontos. E então, dentro disso, crianças morreram e se expandiram de forma rígida. Espero que você conheça todos esses widgets porque estou apenas criando a interface do usuário, nada mais. Ligado ao X. Então aqui estará a visão em coluna. Então, novamente nessa coluna, temos o alinhamento e a cruz do eixo principal. Basta copiar e colar. E então temos essas crianças. Agora aqui. Isso mesmo. É preciso um widget. Esse texto será verificado. Dê um pouco de estilo. Estilo de texto. O tamanho da fonte será 20, cor será preta, 54. Em seguida, abaixo desse tamanho de texto, a caixa. Espere um dia. Divisória infantil, só para dar um pouco de espaçamento. E depois outro texto. Agora, no momento , é apenas 930 codificado. Então obsoleto. Estilo do deck, fonte, tamanho 25. Você pode ver isso. É rho dentro da fila. Temos esse widget expandido. Agora. Copie esse rígido expandido. E dentro dessa linha, cole novamente assim. E aqui isso será finalizado. E a textura ficará em branco assim. E salve-o. Vamos dar uma olhada. Veja, parece decente, eu acho. Status atual. E assim. E abaixo disso, o estado de hoje está. Você pode dar um pouco mais apenas para dar um pouco de espaçamento aqui. É isso. De novo entre d. Ok. Agora, para o check-in, vou usar um pacote. Então, escreva mais tarde. Bob, adicione um slide para atuar. Usaremos este pacote slide to act para implementar a funcionalidade, fazer o check-in, fazer o check-out e empregar. Isso ficará bem em vez de apenas um botão. O botão elevado é pressionado para fazer o check-in. Isso vai ficar bem. Acho que sim. Talvez tenhamos que parar e correr novamente. Vamos ver o que acontece. Mas se eu for até o pub spec dot YAML só para verificar, veja, temos o widget aqui, desculpe aquela embalagem. Agora vamos trabalhar nisso. Vá até então e depois para a tela. Vou fechar todas as páginas. Aqui. No topo. Temos que criar uma chave para o slide. Chave global rígida e sólida. O estado de ação do slide q0 é igual à chave global. Estado de ação leve. Esse caso é necessário apenas para que o widget funcione. Agora, abaixo, dentro dessa coluna, temos que escrever. Ou seja, temos esse widget de coluna aqui, vá para baixo. Aqui. Temos que alinhar outro contêiner. Alinhamento central esquerdo da criança. Os próximos 15. Abril de 2023. Têxtil. Estou apenas codificando essas informações agora. Da mesma forma, copie e cole novamente. Aqui, o x será a hora. Então, vou escrever para Duan De zero-zero, zero-um PM. E divirta-se, o tamanho será D. A cor será a cor preta pontilhada. Quinto padrão. Apenas salve. E veja. Isso mostra apenas a data mais recente. É isso. E essa será a hora, a hora atual. Agora é hora de criarmos o botão deslizante. Dentro dessa coluna. Basta criar outro contêiner. Margem. Const, adicione conjuntos que sejam apenas 25. Então a criança será uma construtora rígida. Assim. Aqui estará o contexto. E, em seguida, basta retornar a ação do slide desta forma. E agora o texto será eliminado. Para finalizar a compra. Então o têxtil será têxtil. Cor. Camadas, escuras, pretas, 54. O tamanho dos títulos será 18. Então, abaixo desse estilo. O círculo externo, a cor externa, serão cores. Essa cor branca será de cores pontilhadas com o sotaque vermelho. A chave será a chave. Finalmente, no envio. Assim. Aqui, na medida certa. O Garden State foi reiniciado. Então isso ilumina, chega à sua posição original. Então veja, nós temos esse controle deslizante. Ele chega à sua posição original porque estamos redefinindo-o. Mas está muito bonito. E, consequentemente, você pode simplesmente dar o tamanho da margem de preenchimento se achar que há espaço deixado de fora aqui. Então você pode fazer essas coisas mais tarde porque talvez queira mostrar algumas outras informações, algum tipo de anúncio aqui. Depende de você. Para mim, essa funcionalidade deve funcionar. É isso. É isso. Para este vídeo. Continuaremos trabalhando e obteremos dados reais caso isso falhe nos vídeos posteriores. Obrigada. 16. Função para obter dados de usuários: Oi, bem vindo de volta. Agora é hora de criarmos uma função que buscará os dados do usuário na tabela de funcionários mostrada, para que possamos mostrar aqueles que estão aqui na tela. Vá para o arquivo de pontos pontos do DB surveys. No topo. Primeiro, crie uma variável para o modelo do usuário, que pode ser nula. Modelo de usuário. Em seguida, crie uma função. Se for uma função futura que retornará um modelo de usuário, corrigiremos isso. Não o converte. Em seguida, recebo os dados do usuário. A consulta é que os dados do usuário são iguais a await. O rum escuro do Super Way. Ou seja, qual mesa? A tabela é uma tabela constante e não emprega. E selecione o ponto de consulta. Ou seja, ele selecionará tudo, mas obviamente temos que selecionar apenas esse funcionário. Portanto, usaremos a mesma coluna que temos para verificar a coluna ID e qual valor devemos verificar. Temos que verificar as autoestradas dessa arte. O ID do usuário atual. Ou seja, como sabemos que não pode ser nulo, eu dei esta exclamação. Essa consulta irá para a tabela de funcionários e obterá os dados que são iguais a esse ID. E isso significa que ele verificará esse ID, esse ID de coluna. Isso é muito simples. Então. E eu sei que os dados serão únicos e Lisa escreverá solteira porque não pode haver mais de um empregador com a mesma identidade. Em seguida, escreverei que o modelo do usuário é igual ao modelo do usuário de Jason. E vou enviar esses dados do usuário aqui. E também retornarei o modelo do usuário. E isso não é nulo. Então, espero que você tenha entendido essa linha de código. Então, estamos recebendo os dados. Estamos alterando os dados para um modelo de usuário e os armazenando nesse modelo de usuário, uma variável que declaramos na parte superior. Agora, mostraremos esse nome de usuário ou o ID em vez do espaço reservado dentro dele e depois da tela. Então, aqui temos esse nome de funcionário do contêiner que criarei um widget de consumidor. Ou seja, isso vem do provedor. Lembre-se de que ele ouvirá qual provedor, banco de dados, serviço e construtor. Temos o contexto, a instância da classe de serviço e o filho. Em seguida, devolva seu construtor de cadeiras. E agora, qual é o futuro? O futuro são pesquisas de DV, obtêm dados do usuário. Então, ele enviará os dados do usuário aqui. No Builder, obtemos o contexto e, portanto, o instantâneo. Agora, sabemos como usar um construtor futuro. Ou seja, se o snapshot tiver dados, faça outra coisa. Retorno, consistência, tamanho, caixa, peso, 60, criança, indicador de progresso linear. E tudo o que o usuário tem dados. Em seguida, retornaremos esse contêiner que é o contêiner com o nome do funcionário. Talvez ele devolva o contêiner com o nome do funcionário. Nesse texto. Vamos escrever aqui uma foto instantânea. Ou seja, se tiver o modelo do usuário, usuário é igual a capturar um instantâneo desse conjunto de dados porque sabemos que os dados que chegam são do tipo de modelo do usuário. E aqui agora nesse texto, escreverei se o nome do ponto do usuário não for igual a vazio, então escreverei o nome do ponto do usuário. Espere, vamos ver. Espero que nada esteja errado. Como o id, assim, ID do funcionário do usuário. Mas agora vamos ver. Ok, isso não pode ser constante. É isso. E que seja consistente. Agora salve tudo. Espero que você tenha entendido isso usando o consumidor e acessando o serviço, depois chamando a função futura. E aqui estão simplesmente verificando se o usuário atualizou seu nome ou não. Caso contrário, mostre o ID do funcionário com sua hashtag. Vamos ver. Esta é minha identificação de funcionário. E como no momento meu nome não está lá, então nos será mostrada a carteira de identidade do funcionário. Isso é feito agora para formatar os dados e tudo mais. Vou usar um pacote. Então, simplesmente ideia. Bob, adicione IN D. Pacote Intel. Vou usar este pacote para formatação de data. Vou até o ponto de especificação do pub YAML e verificarei. Sim, temos o pacote. Agora. Quero mostrar a última data aqui. Então, faça o check-in, o check-out. Ok. Aqui. Nesse texto, temos que escrever o código. Formato de data, ok? Então sim, certo, o formato, que eu quero é um pequeno VD maiúsculo M e depois um pequeno y 0 vezes mais vezes. Isso automatiza o tempo que agora é assim. E, da mesma forma, copie essa linha e cole aqui. E aqui. O formato será em horas, minutos, segundos, assim, ok? Mas, obviamente, os segundos continuarão mudando. É por isso que vamos embrulhar isso em um construtor de streams. E aqui, o stream será Stream dot periodic, const, duration, seconds, um a cada segundo, basta atualizá-lo. Portanto, os segundos que são o valor continuam sendo atualizados. Faça com que seja consistente, ok. Faça com que seja constante. Vamos dar uma olhada. E vamos ver. Eu não sei. Ponto de transmissão, instantâneo periódico. Vamos dizer qualquer coisa de novo e assinar. Como eu também usei outro pacote. Vamos verificar o código, uma dica não autorizada. Isso importava. Não deveria ser, eu não deveria receber esse erro. Jwt expirou, não autorizado i. Vamos ver. Obviamente, está funcionando antes, que estava lá agora, que está aqui. Estou achando isso engraçado. Vá até esta tela inicial e saia. Agora. Vamos ver o que está datado. Ok. O token expirado expirou. Vamos ver. Acho que não. Eu cometi algum erro. Vamos fazer o check-in. Verifique e veja. Ok, e agora está tudo bem. Não sei o que era o editor anterior, mas acabo de sair e entrar. E como você pode ver, quanto custa o check-out? check-out? Check-in. Nós temos tudo. É isso. É isso para este vídeo. Acho que fizemos muita coisa aqui. Durante a próxima sessão. 17. Mesa de atendimento e classes de serviço: Oi, bem vindo de volta. Então, como você pode ver, temos as datas e os dados do usuário funcionando, mas agora temos que trabalhar no mercado e em uma funcionalidade densa. Então, para isso, primeiro, vamos criar uma nova tabela. Supervisione internamente e dê um nome a ele. Você pode chamá-la de frequência. Por enquanto, participe, desative a segurança em nível de fila e habilite em tempo real, pois mostraremos esse histórico mais tarde. Agora. A primeira coluna será ID do funcionário, chave estrangeira, uma chave dois, funcionários. E a ideia aqui é que o RTD não é o ID de funcionário desse cliente, porque essa não é uma chave primária. Essa é a chave primária. As chaves estrangeiras podem não ser rotuladas. Atribuído a uma chave primária. Em seguida, forneça uma data do tipo de texto. Em seguida, faça o check-in. Ele lerá o tipo de texto. Então confira. Será dx, dy. Olá. Kay. Então, salve tudo, estou apenas verificando isso. Sim, identidades de funcionários, a data deles está lá. Sim. Salvar. Está adicionando. Ok, isso está feito. Agora aqui. Vá para modelos e vamos criar um modelo por enquanto, depois o arquivo e depois o modelo ponto, ponto, digamos classe. E então mais inteligente por nulo. ID da sequência de caracteres. Comprando, estando namorando. Até agora. Foi o baralho na sequência final. Agora isso pode estar nivelado. Fique bem até que eles morram. Criado em, ok. Vamos criar o construtor que aceitará que esse valor seja adquirido. Este ponto é obrigatório, essa data de ponto é obrigatória. Não há check-in. Mas, no caso do checkout, não usaremos obrigatório esse checkout e, em seguida, obrigatório, esse ponto o criou. Agora vamos pegar os três. E então, mais e mais inteligente, Dot Rahm. Jason enviará um mapa dos dados dinâmicos de Jane. E está feito. E então, de forma mais inteligente. Agora aqui, finalize a compra também. ID de funcionário de dados. Então. Da mesma forma, o nome da coluna é Jack in. Copie e cole. Confira. E isso será criado em e será marcado com data e hora. Portanto, temos que analisar as barras de data e hora porque os supervisores não estão nos fornecendo em um formato de data e hora. Então, vamos apenas mudar o formato aqui. Agora. Para trabalhar com essas coisas, vamos criar um novo serviço para isso. Vá para Serviços criados, crie um limite de arquivos. Em seguida, serviço dot dot. Vamos criar esse arquivo. Comparecimento, pesquisas, extensão, nota de alteração do comprador. Então, como você disse, crie uma classe base de spa e supervisione o cliente de pontos da instância de pontos base Isabel dos. Em seguida, e depois modele, torne-o sem rótulo por enquanto. Então eu vou receber isso hoje. Eles rasgam a data de vencimento na parte inferior e neste momento. Agora não. Em seguida, temos o booleano. O booleano existe em que o serviço é copiar e colar. E eu lembro que não estamos usando esse valor booleano aqui. Então, se você quiser, você pode simplesmente removê-lo mais tarde. Agora, temos esse novo provedor que vai para o arquivo principal de pontos. Agora, vários provedores mencionaram esse nome, que é arquivo de serviço de atendimento. E também no arquivo de pontos de constantes, crie uma nova constante estática. Então eles o farão, eles farão isso de forma densa. Então, sim, é isso. É isso para este vídeo. No próximo vídeo, trabalharemos nas funções para obter isso e, em seguida, no status e no mercado. E então, obrigado. 18. Função para marcar a presença: Oi, bem vindo de volta. Nesta sessão, completaremos a tela de presença e criaremos todas essas funcionalidades. Então, vamos criar uma função para obter o status. As pesquisas de participação preferidas aqui. E agora. Vamos criar o futuro da função e chegar ao público. Primeiro, verificaremos se o funcionário marcou parcialmente hoje ou não. Se sim, armazenaremos esses dados em nosso atendimento de forma mais inteligente. Ou seja, o que não é liberal. Vamos esclarecer outra lista. O resultado é que funcionará. Então, o ponto de Bobby, do qual eles eram constantes , ponto estável, ponto, seleção, ponto igual. Então, temos que verificar a identificação do funcionário. O ID do funcionário é igual ao valor. Supervisione ponto, ponto, ID de usuário atual. Assim. Ok? Em seguida, verificaremos se o resultado não está vazio, ou seja, pelo menos temos alguns dados de atendimento. Então, o modelo de frequência é igual ao modelo de frequência de Jason. Resultado, ponto primeiro. E, no final, notificaremos ouvintes com base nos dados dessa data específica. E também, eu esqueci. Aqui, também temos que verificar esses dados porque os atualizamos e terminamos. A data será igual a hoje. Obviamente, isso é importante porque haverá muita participação nessa coluna, mas essa data específica e esse funcionário em particular serão apenas um. É por isso que usei o resultado no início. Esse é o pontapé e, para conseguir a participação de hoje, ou seja, vou mostrar a vocês também, o qual eles estão falando. Este é o status de hoje. Ok. Então, agora, a função mais importante, socar para marcar presença. Então, vamos criar isso também. Vamos escrever uma marca futura. Dissipador de atendimento. Exigimos os contextos da campainha. Agora, primeiro, verificaremos se o funcionário fez o check-in naquele dia ou não. Caso contrário, inseriremos novos dados para esse dia. E se sim, atualizaremos esses dados com esse horário de checkout somente porque o usuário já fez o check-in. Então, vamos escrever se a verificação do modelo de frequência for igual a nula, assim, adicionaremos um peso. Então, o ponto de Bobby a partir de constantes, inserção de pontos na tabela de frequência de pontos. Ok? Agora, obviamente, estamos inserindo os dados. Aqui. A identificação do funcionário será uma ótima maneira. Ou não o ID de usuário atual. Em seguida, eles estarão na data de vencimento. Em seguida, verifique se o check-in será em formato de data, horas e minutos. Ponto parlamento, data e hora, ponto agora. Ok? Portanto, isso é executado se o usuário não tiver feito o check-in, e suponha que o usuário tenha feito o check-in, então faremos o check-in imediatamente. Supervisione as constantes dessa tabela de frequência. Atualização de pontos, ok? Atualizaremos o valor, mas quando isso for igual a um ponto, ID do funcionário é igual para supervisionar essa arte. E aqui, obviamente, não queremos Alice, só que temos que ler mais. Caso contrário, o checkout do modelo de atendimento for igual a nulo, seja, o checkout existe, mas o checkout não é arte. Identifique o ID de usuário atual. E, novamente, verificaremos pontos iguais apenas para essa data específica. Portanto, você precisa se certificar de que estamos atualizando apenas essa data. Ok, isso é muito importante. Agora vá para a seção de atualização que está aqui. Aqui, atualizaremos apenas esse checkout. Confira assim. E, da mesma forma, copie essa linha e cole aqui. Ok? E agora temos o if, else-if e, finalmente, S, que é check-in, também não é nulo. O checkout também não é nulo. Em seguida, mostraremos uma lanchonete utils dot show. E a mensagem será você já fez o check-out hoje. Ok. Então, no final, ligaremos para o comparecimento do Get Today. Isso é para que ele obtenha os dados mais recentes e atualize a interface do usuário porque temos os ouvintes de notificação aqui. Portanto, ele atualizará os dados mais recentes. Com esse modelo de atendimento, C, como você pode ver, estamos atualizando isso e, em seguida, alguns modelos aqui. Ok? Eu sei que há muito código, mas é muito simples. Se você tem algum tipo de aplicativo , sabe que estamos apenas criando, atualizando e excluindo o conjunto de dados. Agora temos a função pronta. Agora é hora de fazer alterações na interface do usuário. Então vá para a tela de atendimento ponto ponto. Agora, a primeira coisa que faremos é no estado init chamado get to it e, em seguida, colocar um contexto mais amplo. Temos que escrever o serviço de atendimento, ponto, ficar atualizado e denso aqui. Ouvir será falso. Já que eu só quero fazer isso daí inicialmente. Então o que eu quero está aqui, eu me relaciono por nulo. Em seguida, o provedor de serviços seleciona os contextos, mesma coisa que acontece com os contextos. E agora temos isso e , em seguida, o provedor de serviços aqui. Não estou chamando essa função aqui porque será chamada várias vezes para isso, sem motivo, essa frequência também será chamada. É por isso que eu só o chamei no estado init pela primeira vez. Então vamos ao check-in para crianças. Ok. Agora, aqui, esse texto de check-in, temos que mudar e fazer com que essas coisas sejam consistentes, porque essas coisas serão constantes. E Li, esses textos mudarão. Então, serão pesquisas de presença, modelo de atendimento, verificação. Se for nulo, escreva a hora do MD ou então escreva a hora do check-in. Então, isso simplesmente coloca a saída, isso. Se for nulo, então imprima isso. Ok. Da mesma forma, copie esse código. Vá para o texto de finalização da compra aqui, será Checkout, nesse momento aqui. Se for nulo, basta usar o espaço reservado e torná-lo constante. Há coisas que também serão constantes. Eu sei que há muitas coisas consistentes. Ok? Então, agora, estou apenas verificando se tudo está concluído e não deixou nada. Ok? Agora temos que executar o mercado , então denso. É quando eles usam esse slide para fazer o check-in e o check-out. Então aqui retorna o slide, Sim, este. Em primeiro lugar, temos que produzir condicionalmente esses textos. Então, veremos novamente, pesquisas de participação. Modelo de atendimento. Se o check-in for igual a nulo, certo? Deslize para fazer o check-in. Aqui, deslize com a direita para fazer o check-in ou finalizar um pouco a compra. É isso. Em seguida, enviamos o têxtil, transformamos uma pia e ligamos diretamente para pesquisas de comparecimento para o mercado de pontos do que para o contexto denso. Depois que isso for concluído, definiremos essa chave para que o usuário possa usar o controle deslizante novamente. Fizemos todas as coisas. Está na hora de salvarmos e testarmos nosso aplicativo. Vamos ver se há algum erro ou não. Ah, tudo bem. Eu vou aqui na presença e vamos nos refrescar. E vamos ver. Não há dados aqui. Agora. Se eu fizer o check-in, veja o horário do check-in. Há 18, 39. Obviamente, dessa vez está no emulador. É por isso que você pode estar pensando, ok, aqui a hora é diferente, aqui a hora é diferente, mas pelo menos a hora do check-in do dispositivo móvel. Então, vamos verificar. Veja. Criamos no check-in da dívida de identificação do funcionário , o check-out é nulo. Isso significa que o check-in está funcionando perfeitamente e vamos esperar por . Ou seja, para que eu faça o check-out e avise se está funcionando ou não. Ok para saborear lá. Vamos conferir. A finalização da compra também está lá. Está funcionando. Agora, se eu for e ver, temos o valor do checkout atualizado apenas nesta tabela. Agora. Suponha que o usuário tente fazer o check-out novamente. Então aqui será mostrado, você já fez o check-out hoje. Isso significa que você tem que voltar amanhã. Finalmente, a tela de presença está funcionando perfeitamente. Toda a funcionalidade está funcionando perfeitamente e não há erro no código. No próximo vídeo, trabalharemos no histórico de atendimento para que o usuário possa ver seu comparecimento ao ônibus e horário de check-in e check-out. Obrigada. 19. Função para obter histórico de presenças: Oi. Bem vindo de volta. Agora está na hora. Trabalhamos no histórico de atendimento. Essa é a tela do nosso calendário. Para isso. Em primeiro lugar, precisamos adicionar um novo pacote. Então, abro um terminal e eu adiciono meu ouvido para que o meu ouvido para que o usuário possa alterar ou selecionar o ano e o mês para os quais deseja receber a frequência. É isso. Se eu for ao arquivo YAML do Pub spec dot, você pode ver aqui que eu tenho o mês simples aqui, maior. Ok? Agora, a seguir, escreveremos a função def para obter o histórico de presença. Então vá até ele e, em seguida, atenda ponto ponto aqui. No topo. Vou criar uma variável que conterá uma montanha de dados pesquisados. Então, aqui, eu só estou pensando em onde escrever. Vamos escrever isso aqui. Tensão. A participação é de três. O mês é igual ao formato de data apical m, M, m, depois ao pequeno formato de pontos y, y, y, y. A hora. Agora, k. Então eu vou chegar lá. Vou deixar que chegue lá, receba comparecimento, Mês da História. E vou enviar um valor para isso. E então eu vou definir seu histórico de frequência. Mês. Em seguida, valorizaremos aqui. Gostaríamos que o mês de atendimento fosse igual ao valor e notificaremos os ouvintes. Então, simplesmente, estamos apenas Este é o mês que verifica fortemente o histórico de atendimento. Então, logo no início, o mês estará morto apenas. E então, se você quiser, você pode alterá-lo. É por isso que estou usando isso que, quando for para a tela de frequência, pelo menos naquele mês, ele já receba os dados. Agora, criaremos uma função para retornar um futuro com a coluna de verificação dessa data para a pesquisa Montagnier. Então, vamos. Certo. Lista futura de presenças de forma inteligente. Obtenha participação, história. Uma pia. E Diane, tudo bem. Primeiro, digamos que a consulta pelos dados do analista seja igual a aguardar Superbus, constantes marrom-escuras. Em seguida, estável. Selecione um ponto igual à coluna, ID do funcionário, igual para supervisionar essa arte, ID do usuário atual. E então faremos algo como pesquisa de texto com pontos, porque temos a data em sequência de caracteres. Então, aqui também estamos salvando os dados em sequências de caracteres, então vamos apenas comparar. Ou seja, a consulta está entre aspas duplas e depois dentro de seus códigos simples e no Mês da História de Participação. Assim. E a configuração será em inglês. Inglês, assim. Ordem criada em ascendente para falsa. Então, como você pode ver, temos finalistas. Os dados são iguais à média do Superbus que desde o início constante em um ponto instável, seleciona aquela ID de funcionário igual, que deve ser igual à ID de usuário da supervisão artística. Em seguida, pesquise texto com pontos. Verificaremos a coluna de data e obteremos todas as linhas, o que é igual a esse mês. Então, estamos enviando este Mês da História de Participação. E então a ordem deve estar na ordem decrescente. Depois disso, retornaremos o mapa de pontos de dados. Vamos mapear os dados. Conseguiremos presença. Será o modelo de atendimento Dot Jason. Enviaremos cada presença. E, finalmente, converteremos esses dados em uma string, em uma lista. Então, isso se tornará um modelo de lista de atendimento. Então essa é a função. É isso. Para este vídeo. Trabalharemos na parte da interface do usuário nos próximos vídeos. Obrigada. 20. Trabalhe na interface do usuário: Oi, bem vindo de volta. Então, agora vamos começar a trabalhar na tela do calendário. Aqui mostraremos o histórico de atendimento do funcionário em um determinado mês e ano. Portanto, a primeira coisa que faremos é conseguir a presença do provedor. Pesquisas são iguais a conhecer o ponto de contexto da Vida. E eu escrevi, eu deveria recortá-lo e colá-lo dentro da fatura e do serviço de atendimento. Ok. Nós temos o provedor. Sim. Eles retornarão à coluna Harlem do que crianças. Contêiner. O contêiner fornece o alinhamento ao alinhamento. Centro esquerdo. Em seguida, margine, const, adicione conjuntos que apenas a esquerda de dop 60. Parte inferior. Então, a criança será um texto constante. Minha presença. Estilo, têxtil, dê tamanho de fonte Duff 25. Ok. Então, abaixo desse contêiner, linha, domínio X está o alinhamento. O alinhamento dos pontos distribui o espaço uniformemente. Aqui. Mostraremos esse mês atual, bem como um botão para selecionar um mês. Então, vamos escrever que crianças e textos serão. Depois, pesquisas. frequência, a história e estilo do mês serão constantes. Decks, morreu. Bem, no tamanho 25. Em seguida, teremos um botão de esboço. A próxima será semana, mês. Faça com que seja consistente. Ok. Isso se tornou um mês. No local, transforme-o em uma pia. Em seguida, escreva Pi outro. Selecione. O ID é igual a um mês simples aqui, porque este é o pacote dot show Monday. Porque o diálogo aqui, temos isso e temos que escrever que desativar o futuro é igual a verdadeiro. Isso significa que isso desativará os anos futuros. Obviamente, o usuário não pode entrar nos próximos anos e obter seu histórico de frequência. Em seguida, escreveremos string big month. Ou seja, temos que formatar essa data em nosso próprio formato, que está sendo usado em todos os lugares. Então, diremos apenas M maiúsculo quatro vezes pequeno vi quatro vezes. Isso nos ajudará a comparar os dados existentes. Temos mensagens de texto ou canal. É por isso que estamos formulando a data selecionada. Vamos ver. Faça com que aguarde esta montanha simples. E, em seguida, basta alterar essas pesquisas com inquilinos. Atendimento, mês de serviço é escolhido mês. Agora, se você for, isso é pesquisa de comparecimento, Mês da História. Isso é um setter. Viu? Então, quando definirmos o valor, isso mudará o valor disso. Em seguida, notifique o ouvinte que reconstruirá a tela novamente. É por isso que publicaremos o último mês no texto. Então, se eu atualizá-lo, se eu atualizá-lo e dizer que temos vários, por que esse zero aqui é zero? Sra. pensando? Eu não sei o que tem no seu telefone. Espero que não haja somador. Fiz tudo corretamente. E então a história da dança, m, m, m. E eu acho que nós demos essa linha extra. É por isso que essa é a única razão. É um erro muito tolo termos que ter certeza de que essas coisas estão conectadas. Agora, se eu reiniciar, e espero que seja um personagem, se eu for ver um braille, 2023, se eu os escolher e até março, será março. Ok. Isso significa que está funcionando até aqui. Agora vamos criar o futuro construtor para obter os dados chamando a função get dependence History. Vamos abaixo disso. Escreveremos no início que essa linha obviamente perturba esta linha. É dentro da coluna que temos que escrever a ligação x. Então você construtor de gráficos. O futuro serão, então, pesquisas que obtenham o histórico de frequência. Aqui, ele cobrará contextos, contexto como visualização de instantâneos, instantâneos. Agora vamos adicionar um instantâneo que contém eles não fizeram nada. Como retorno, const. Indicador de progresso linear. Plano de fundo, cor, cores, ponto branco. E roda de cores, cores, cinza, assim. E aqui, se o instantâneo tiver dados, aqui novamente verificaremos tamanho do ponto de dados maior que zero. Ou seja, se há alguma história ou não. Caso contrário, retornaremos o texto secundário const center. E aqui nos textos não escreveremos nenhum dado disponível. Crie o estilo do estilo do texto, tamanho da fonte 25. É isso. Agora, o que faremos é se o comprimento do ponto de dados do instantâneo for maior que zero, geraremos algum tipo de widget, que faremos no próximo vídeo. Obrigada. 21. Mostre os dados do histórico: Olá, vamos continuar trabalhando na tela do calendário. Agora, aqui, se capturar um instantâneo de que o comprimento do ponto de dados é maior que zero , retornaremos um widget do Construtor de pontos para exibição de lista. Aqui. A contagem de itens será um instantâneo de dados de pontos, comprimento do ponto. Item. Abaixo estará. Aqui. Ele terá contextos e um índice. Então, teremos a ideia e ficaremos mais inteligentes, pois sabemos que o papai morre ao entrar em um tipo de modelo de atendimento. Então, então, então, os dados são um bom instantâneo. Dados. Index k. Agora retorne o contêiner. Margin, sumiu. Inserções de borda. Não só dê 12, à esquerda, dê 20, à direita, dê 20. Parte inferior. Dê dez. Em seguida, altura. 150. Em seguida, declaração. Consiste, decoração de caixa, cor, cores ponto branco, cores ponto branco. Então, a sombra da caixa terá as cores da cor da sombra da caixa, preto. Quando essas seis ideias se confundem, então, desloca duas para k. Obviamente, certo? Agora. Apenas espere. Temos a sombra da caixa. Depois disso, essa decoração fora da caixa, não saudita, depois da caixa. Mas isso, certo. Raio da borda, raio do ponto do raio da borda, aquela circular 20. Agora, coloque a criança no recipiente. E o contêiner, faça uma fileira. As principais matrizes de alinhamento existentes, a classe de centro de pontos de alinhamento também será centralizada. Então teremos esses filhos. Então, como vocês podem ver aqui, crianças. Então agora vamos trabalhar com essas crianças. Os primeiros filhos serão expandidos. Margem do contêiner, constante, adição de conjuntos. No final. Vamos ver o valor que daremos. Verificará o regulador na decoração constante da caixa. Cor, cores, acento vermelho, raio da borda, ponto do raio da borda, raio, pontos circulares 20. Ok. Em seguida, dê a este recipiente um centro quiral. Agora, vamos encontrar essa data, formato de data aqui, certo? Letra maiúscula E. Em seguida, mude essa linha para esta. Teremos os dados, o domingo, a segunda-feira e a data. Formato. ponto de data de frequência criou isso porque será a mesma, assim como a data. Portanto, será muito mais fácil alterá-lo. Então, dê um pouco de estilo. Const. Têxtil. O tamanho será de uma cor fina. Ponto branco. Espessura da fonte, peso da fonte, negrito. Ok. Temos isso e depois dessa expansão, certo, outra região expandida. Temos uma matriz de colunas é o alinhamento extracelular principal do meu data center, alinhamento do eixo cruzado cruz x é o elemento desse centro do que as crianças. Nesse caso, as crianças consistem no check-in de texto. Agora mostraremos esse horário de check-in e check-out. O estilo deu a ele algum estilo de texto. Fonte, tamanho, Duan De, cor, preto. Depois, basta dar, dar um tamanho de caixa, peso. A criança divide isso. Isso é o mesmo que o texto da tela Eu não entendi. Em seguida, indique ponto, ponto, check-in. Stein, const, textile, tamanho da fonte, dê 25. Ok. Temos a coluna aqui. Nós expandimos isso. E então, da mesma forma, copie essa Jacqueline expandindo e cole. E temos eixos principais, eixo transversal. Em seguida, o texto será finalizado. Isso está bem. Então, temos a divisória aqui, certo? Confira dot ToString. E se for nulo, escreva esse espaço reservado assim. E depois que isso for expandido, basta dar a ele uma caixa de tamanho que esteja dentro dessa linha. Lembre-se, fora desta caixa expandida, me dê o tamanho da caixa. Agora, execute o aplicativo. E a correção ainda ocorre se estiver aparecendo na autorização do meu sistema e tudo mais. É porque estou usando um emulador porque testei todo o aplicativo em um dispositivo real e ele estava funcionando perfeitamente. Portanto, acho que se você experimentá-lo em seu dispositivo, não obterá esse tipo de autorização não autorizada e expirada. E agora vamos para a tela inicial. Desconecte o usuário. Agora k i. Agora, esses erros, você não reduzirá esse cenário de erro porque, no momento, este é um dispositivo virtual e acredito que o tempo também seja diferente de R. Então, novamente, vou fazer o login. Eu tenho aquele check-in e check-out. E se eu for até a tela, ver que eu tenho os dados e se eu for escolher um mês e dar março, então não há dados disponíveis. Se eu for escolher um Braille, teremos a data de check-in e check-out. E se você for ao calendário, acho que não. Você precisa que houvesse um conjunto vazio. Este você não precisa porque acho que o espaçamento e tudo estão bem. Isso é que, no final, fizemos a caixa de tamanho. Então é isso, é por isso que temos esse espaço aqui. Porque tudo está ocupando o mesmo espaço por causa da versão expandida. Mas eu acredito que isso parece decente. Então é isso. Nossa tela de histórico de atendimento também está funcionando perfeitamente. Então, vamos continuar com esses vídeos futuros. Obrigada. 22. Função para obter localização de funcionários: Oi, bem vindo de volta. Neste vídeo, implementaremos um recurso obter a localização atual do usuário. Portanto, enquanto fazemos o check-in em nosso checkout, também armazenaremos a localização do usuário para que seja mais fácil para o empregador verificar se o funcionário está no escritório ou não. Então, vamos apenas fazer a localização. Não vou verificar a distância e tudo mais. Mas, obviamente, com esses dados, você pode verificar a distância do escritório e do usuário com muita facilidade. Agora, para implementar esse recurso, usarei esse pacote conhecido como localização. Aqui. Esse é o pacote. Então, basta copiá-lo e colá-lo no arquivo YAML pub spec dot. Com essa localização, obteremos a latitude e a longitude. Então, basta parar e reiniciar o aplicativo novamente. Porque instalamos um novo pacote. Basta ir e começar a depurar. E, como eu estava dizendo, armazenaremos a latitude e a longitude do usuário. E mais tarde, se quiser, você pode usar o nome do pacote geocodificação para obter esse nome de rua, cidade, país e outros detalhes dessa coordenada de localização fornecida por este pacote. Então, depende de você. O nome do pacote é Joe. Espere, eu vou te mostrar também. Dessa vez, está acontecendo com a codificação. Eu acredito que foi algo relacionado à codificação. Mas você vê que esse é o nome geocodificação. Sim. Você pode usar isso sozinho, se quiser. Agora, nesse local, vou usar esse código e vou ver esse código que vou usar. Então, agora, vamos criar uma nova classe de serviço. Serviços de insights. Arquivo criativo. Localização, serviço, ponto, serviço de localização simplesmente certo. Esse não é o provedor. E divida tudo. Vou importar material. Em seguida, vou importar a localização. É isso. Agora, crie uma instância do local. Então, certo? Localização, dados. Dados de registro. Em seguida, crie uma função que retornará um mapa de string double, ou seja, latitude e longitude. E às vezes pode ser nulo. Inicialize e obtenha a localização. Vamos fazer o trabalho de bordo aqui. Site, contextos, contextos para mostrar a lanchonete. Agora, o código será como booleanos. As pesquisas permitem permissão e status. Permissão. Concedido. O primeiro verifique se a localização está ativada ou não. Nesse dispositivo, o serviço é igual a aguardar localização. Serviços habilitados. Se o serviço não estiver ativado, relacionamos que a ativação do serviço é igual a 08. Serviço de solicitação de pontos de localização. Então, se o serviço foi ativado, novamente a frase, então éramos como a lanchonete utils dot show. Por favor. Habilite a localização, um serviço como este. E retornaremos nulo aqui. O outro código não será executado. Então isso será, isso será se o serviço não estiver habilitado para eles. Ok? Então vamos verificar. Se o serviço estiver ativado. Em seguida, peça permissão para a localização do usuário. Isso significa que o usuário receberá um pop-up que permitirá que esse aplicativo acesse a localização. Então, agora temos permissão concedida é igual a aguardar o local que tem permissão. Da mesma forma, escrevemos se permissão concedida é igual ao ponto negado do status da permissão. Em seguida, adicione novamente uma permissão que seja igual a aguardar localização e solicitar permissão. E, novamente, se a permissão concedida não for igual às permissões, elas também serão concedidas. Então, até que o ponto mostre a lanchonete. Por favor, permita a localização, o excesso retorno nulo a partir daqui. E se não for esse o caso, está tudo bem. Depois que a permissão for concedida, retorne as coordenadas. Simplesmente escrever dados de registro é igual à localização de espera que getLocation. E devolva-o daqui. Um mapa de dados. Deixe o cara ser igual ao elemento de latitude do ponto de dados do log ponto de dados latitude . Aqui. Esse duplo também pode ser nulo. Da mesma forma, a longitude é igual aos dados de log dot edu. Então você pode estar pensando: o que é esse código? Portanto, se você acessar a documentação oficial, obterá o código exato aqui. Então você pode simplesmente ler ou copiar ou o que quiser. Depende de você. Não estamos ouvindo as mudanças de fundo e é por isso que não estamos fazendo nenhum tipo de configuração. Isso é permissão e todo o acesso em primeiro plano em segundo plano. Esse tipo de coisa. 23. Local da loja durante o check-in: Ok, agora, como vamos armazenar esses dados nele e depois estáveis, temos que fazer algumas alterações. Então vá para o funcionário de atendimento. E nessa frequência, edite a tabela e adicione a coluna. Local de check-in, que estará no formato de mapa, ou seja, Jason. E da mesma forma, como o local de check-out. Isso também estará no formato JSON. Apenas salve-o. Agora, temos que fazer mudanças no mercado e depois em sua função. Portanto, aqui na Dinamarca, função de comparecimento permite o comparecimento somente se essa permissão de localização for concedida. Então, aqui, primeiramente, map, anullable, get location é igual a await location, service, initialize e getLocation. Ok? Em seguida, escreverei se getLocation não for igual a nulo, apenas executarei. Esses são códigos daqui, copie e cole aqui. Ok? E aqui, obviamente, temos que salvar esse local. Portanto, no encarte, verificaremos a localização com um grande getLocation. E da mesma forma, ao finalizar compra, ele lerá: o local de pagamento será getLocation. Outras coisas serão as mesmas. Estamos, lembre-se de que estamos simplesmente salvando esse local. Nada mais. Não usaremos esse local, mas pelo menos você sabe como obtê-lo. A última coisa que precisamos fazer é fazer mudanças em seu modelo de atendimento. Certo? Final, mapa. Local de check-in. Até agora. Localização de verificação do mapa. Aqui. Será esse local de check-in com pontos, esse local de check-out com pontos, então não seria necessário. Lembre-se aqui também. Escreveremos que o local do check-in será o dado. Local de check-in. Os dados do local de finalização da compra serão o local do check-out. Então é isso. Vou remover esses dados, dados de frequência, porque quero que o local de check-in também seja armazenado. Vamos testar o aplicativo. Veja o check-in, o check-out não está lá. Então, se eu deslizar, ele perguntará a localização do dispositivo, eu aceitarei. Vamos ver. Espero que não haja um somador porque sei que, se for um dispositivo físico, não há erro, mas não tenho certeza sobre esse emulador. Vamos ver. Não há erro de quando. Então, aqui no atendimento, tela, o mercado e a lente. Mas e se a localização estiver correta? As ofertas não mostram lanchonete. Não é possível obter a localização do pátio. Qual cor será colorida de vermelho? Porque, obviamente, Deus existe e faça isso para que o estado seja atualizado. Mas vamos ver o que aconteceu. Se verificarmos. Ok, como você pode ver aqui , não está funcionando. O que vou fazer é te mostrar isso do que rodar em um dispositivo real. Agora conectei meu dispositivo real e vamos verificar se esse local está funcionando ou não. Então, se é pequeno fazer o check-in, sim. Vou perguntar minha localização e eu dei. E veja. Acredito que temos esse check-in e esse local foi bem-sucedido. Então. Aqui temos o local de check-in. Então, como você pode ver, ele está funcionando perfeitamente em um dispositivo real. Anteriormente, o único problema era que era um emulador de Android. Essa é a única razão, ou então está funcionando bem. Se eu clicar em Finalizar compra, novamente, teremos o local e a hora do checkout atualizados. Então, isso é tudo para a localização e essa história. Essas duas páginas estão funcionando perfeitamente. No próximo vídeo, trabalharemos nessa tela de perfil. Obrigada. 24. Função para obter todos os departamentos: Oi, bem vindo de volta. Então, agora vamos começar a trabalhar na tela de perfil que está recebendo todos os departamentos e atualizando o nome de usuário. Então, para isso, vamos primeiro criar um novo modelo para o departamento. Certo? Ponto, ponto, modelo de departamento, ponto, ponto, ponto. Esta é uma nova classe de modelo. A peça significava modelo. Int final. Teremos o ID, ou seja, o ID do departamento e a sequência binária. Já inserimos alguns departamentos em seu banco de dados. É necessário um modelo de departamento, esse ID de ponto exige esse título de ponto e, em seguida, crie uma fábrica. Part quando um modelo de Jason estava enviando dados dinâmicos de sequências de mapas. Em seguida, eles se transformam. Modelo de departamento. Id serão dados, id e título serão dados e chave será título, já que está em formato de mapa. Ok, temos o modelo pronto. Agora. Vamos aos serviços de DV. Portanto, permitiremos que o usuário atualize seu nome e departamento na tela do perfil. Então, vamos criar o Panchen para incluir todos os departamentos nesses serviços de DV. Então, aqui, isso mesmo. Você aplaudiu. Ampla. Obtenha departamentos. Assíncrono. Agora, primeiro criaremos algumas variáveis de estado. Primeiro, listaremos o departamento. Modelo. Departamentos é a lista vazia por enquanto. E teremos um departamento inteiro de funcionários, que é o atual departamento de funcionários. Isso também será alterado se o usuário selecionar outra coisa. Então você entenderá de certa forma. Agora, para obter dados do usuário, o que podemos fazer é adicionar se o departamento de funcionários é igual a nulo e, em seguida, fornecer ao funcionário. Se for nulo, certo, departamento de funcionários é igual ao ponto do modelo do usuário. O departamento de modelo do usuário não está fazendo nada. Então, o que eu fiz foi, você tem que entender isso. Ou seja, já que esse divertido Chen pode ser chamado várias vezes, seja, sempre que ligamos para ele, notifique os ouvintes presentes, tela de presença. Esta função a chamará, pois tem uma vontade futura. Então, ele redefinirá o valor do Departamento, a parte quando o valor. É por isso que estamos usando uma condição é atribuído um valor somente se um departamento estiver vazio. Isso é pela primeira vez. Espero que você tenha entendido isso. Para atribuir a Lee e a hora. É isso. Agora, no intestino, todos os departamentos. Vamos escrever uma lista de funções. O resultado é um peso. Superbus, baile, tabela de departamentos de início constante, desta vez , selecione pontos, selecionaremos todos os departamentos. Em seguida, adicionaremos que todos os departamentos são iguais ao resultado. Mapa de pontos. Aqui teremos um departamento. Então, certo? Departamento. Aqui temos que escrever um modelo de departamento a partir do JSON e enviaremos o departamento. Por fim, faça com que tudo seja listado e notifique os ouvintes para atualizar o valor. É isso. Porque aqui estamos usando o ouvinte que entrará na interface do usuário. Conectaremos a interface do usuário a essa variável. É que vamos ouvir esses dados variáveis. É por isso que. Então é isso. Criamos uma função para incluir todos os departamentos nos próximos vídeos. Também criaremos uma função para atualizar o perfil. Em junho. 25. Função para atualizar dados de perfil: Oi, bem vindo de volta. Neste vídeo, escreveremos a função def para atualizar os dados do perfil no serviço DB, certo? Futuro. Atualize o perfil. Exigiremos o nome Bill context. E nós simplesmente aguardaremos. Isso deve estar a uma pia de distância. É uma ótima maneira de Rahm, início constante, tabela de funcionários atualizar o nome. Atualizaremos com o nome deles. E departamento. Atualizaremos com o valor do departamento de funcionários, que é a próxima variável de estado. Está aqui. Desde o início. Nós o inicializaremos com o valor anterior. E aqui temos que usar o ponto igual porque temos que mudar ao vivo onde o ID é igual para supervisionar esse ID de usuário atual. Depois de feito isso, utilizaremos a lanchonete dodge. Perfil relacionado, atualizado com sucesso. E daremos cor às cores verde escuro. E notificaremos os ouvintes. Portanto, esse nome na tabela de presença, que é ID de boas-vindas ou nome de boas-vindas, será atualizado automaticamente se usarmos a opção notificar ouvintes aqui. Vamos para a tela do perfil. Aqui. Temos que começar a trabalhar nisso. Primeiro, vamos criar algumas variáveis. Repleto de controlador de edição de texto. O controlador de nomes é igual ao controlador de edição de texto. E então o valor inteiro selecionado é igual a zero. Vamos ver o que faremos. Isso será necessário ou não? Vamos verificar isso mais tarde. Nos contextos que não são, o projeto de lei criará primeiro o provedor de serviços de banco de dados, o contexto do provedor de serviços. Contexto. E então exigimos o serviço de banco de dados. Depois disso, chamaremos pesquisas de DV. Todo o departamento. Se estiver vazio e não tiver sido inicializado, ligue para as pesquisas do DV, todos os departamentos não estão fazendo nada. Esse código significa ligar para o departamento de coleta de tudo apenas uma vez. Da mesma forma, nomearemos o controlador de texto. Se estiver vazio, use o controlador nomeado , o valor do texto como serviço dv, modelo do usuário, nome do ponto. E se isso também estiver vazio, esvazie-o. Isso é uma string vazia. O que significa que, se essa página for carregada pela primeira vez, insira os textos do controlador de nomes dentro do controlador de nomes para que sejam iguais ao nome do ponto do modelo do usuário. E suponha que o usuário di não tenha atualizado seu nome, basta usar a string vazia. Assim. Estamos usando essas condições usando as condições abaixo. Porque o cinto pode ser chamado várias vezes ao usar os ouvintes de notificação. Essa é a única razão. Agora, vamos trabalhar no corpo. No corpo. Verificaremos se o modelo do usuário do serviço é igual a nulo. Em seguida, mostre um indicador de progresso. Porque, obviamente, se você usa um modelo, não existe, então como podemos mostrar os dados. Agora comece com o estofamento rígido const e, em vez disso, inicie nosso Duan De. Então, child será uma coluna ScrollView de filho único. Então existe o elemento principal, que é a célula de saída principal em Mendota, centro. Alinhamento do eixo cruzado, alinhamento do eixo cruzado. Isso é centrado. E então temos esses filhos 0, k. Então vamos continuar a partir daqui. No próximo vídeo. No próximo vídeo, teremos o TextField e uma opção para selecionar o departamento, além de um botão para atualizar os detalhes do usuário. Obrigada. 26. Menu suspenso para selecionar departamento: Olá, vamos continuar trabalhando nessa tela de perfil. Então, aqui nessa coluna , temos essas crianças. E dentro dessas crianças, vamos começar criando um contêiner. Recipiente, dê a ele uma margem de consistência e inserções em Lee. Na altura de cem e cem. Decoração, declaração de caixa. Raio de fronteira, raio de fronteira. Os pontos são mais frios. 20 cores coloridas pontilham o sotaque vermelho. Assim. Naquela criança. Basta escrever subsídios. E, terceiro filho, nós lhe daremos um ícone. Então, isso é apenas para o Use um look que essa pessoa adicionou. Essa é a aparência da página. Se quiser, você pode implementar o upload de imagens e assim por diante. Aqui. Esta é a caixa de tamanho e abaixo desta caixa de tamanho de contêiner, caixa de altura 15. Em seguida, o ID do funcionário por mensagem de texto é igual a, ligaremos para o serviço DB. As pesquisas que usam o UserModel, não o Employee ID. Mostraremos a ele o ID do funcionário que criamos. Então, abaixo disso, está o tamanho de uma caixa de IA de hoje. E então faça com que TextField x will controller, name controller. A colisão consiste, declaração de entrada, rótulo, texto, nome completo, nome completo. Forneça borda, contorne a borda de entrada. Agora salve tudo. Vamos ver como fica. Veja se temos a identificação do funcionário. Parece uma descida. Temos o TextField aqui para o nome completo. Agora, criaremos aqui um menu suspenso para permitir que o funcionário selecione seu departamento. Agora, abaixo desse campo de texto, forneça uma caixa de tamanho 15 e escreva pesquisas DV. Nem todos os departamentos estão vazios. Em seguida, escreva const, indicador de progresso linear ou então caixa de tamanho Harris. Como sei que não ficará vazio porque já inseri os dados no banco de dados. É por isso que vou mostrar um indicador de progresso linear. Agora na caixa de tamanho. Dê a ele uma altura infinita de dois pontos que seja o tamanho mais antigo disponível. Em seguida, a criança será deixada no chão. Campo do formulário. Ok? Aqui, primeiro, adicionaremos declaração, Const, declaração de entrada, borda, borda de entrada de contorno. Então, o valor será dv service, funcionário, departamento. Se for nulo, use o serviço de banco de dados. Departamentos. Primeiro valor de ID de ponto , ou seja, se o usuário selecionar vendas , qual é o ID? Suponha que zero, esse é o valor que queremos, não os textos, ou seja, uma operação de vendas. Não quero o texto, quero o ID dessa linha. Então temos que escrever itens. Os itens serão pesquisas de DV, mapa de pontos de todos os departamentos. Dentro do mapa, teremos o item modelo do departamento. Agora, dentro desta função, retornará um item de menu suspenso como este. K. Agora esse código está ficando, eu sei que é muito difícil. Mas aqui você precisa fazer com que ele seja listado para que o erro ocorra. E dentro do valor e a criança é descartada, pronto. O item tem valor. Será item.name, ID. Mas o que devemos mostrar? Usaremos um campo de texto para mostrar item, ponto, título. E o estilo será consistente. Estilo de texto. Tamanho da fonte 20, 0, k. Aqui está uma declaração de retorno. Agora, a última coisa que é necessária é que tenhamos o k dentro deles. O campo do botão de ponto ponto está alterado. Portanto, onchange nos dá o valor selecionado. Aqui. Se eles o usarem, alterarem o valor e, em seguida, escreveremos pesquisas de DV. Departamento de funcionários, altere-o para o valor selecionado. É isso. Agora. Veja, temos vendas, marketing, tudo. Se você quiser, pode dar um pouco de acolchoamento e tudo depende de você. Abaixo desse tamanho de caixa. Finalmente, teremos algum espaçamento da altura da caixa para D. E, novamente, obteremos esse tamanho de caixa. Aqui, criaremos o botão. O tamanho funciona com 250. Criança. Botão elevado. A imprensa está lá. E a criança será const. Próximo. Atualização, estilo de perfil. Têxtil. Diz-se que quando D N estiver no local, simplesmente escreveremos que contextos do perfil de atualização de serviços estão lá. E aqui chamado controller dot text trim. É isso. Então, agora tudo está feito. Lembre-se de que não estamos enviando o ID do departamento porque, se o usuário o alterar , automaticamente aqui, o departamento de funcionários será alterado. Além disso, não exigimos essa variável de valor selecionada. Agora, se eu for até a tabela de funcionários, podemos ver que o departamento e o nome estão vazios. Vamos conferir. O departamento vai se desculpar, o nome vai demorar um bom tempo. E departamento Vamos pegar a identificação, atualização, perfil dos mortos com sucesso. O departamento C, para citar, está lá. E se eu for ao comparecimento , teremos recebido um Agawam inteiro. Anteriormente, era o ID do funcionário, mas como estamos usando os ouvintes de notificação, ele é atualizado. Isso significa que nosso perfil de atualização e atualização também está funcionando perfeitamente em todas as seções. Agora trabalhando. No próximo vídeo, trabalharemos na funcionalidade de desconectar um usuário. Obrigada. 27. Trabalhe na assinatura: Oi, bem vindo de volta. Neste vídeo, criaremos um botão de sair aqui, que permitirá que o funcionário saia desse aplicativo. Portanto, será muito simples e direto. Vá para a tela do perfil. Então, aqui nessa coluna, vamos ver. Aqui temos a coluna. Temos crianças que mergulharam muito rápido. Ou seja, antes dessa imagem do ícone. Crie a margem do contêiner, dê a ela uma constância. Inserções de borda que só paravam quando o alinhamento D, o alinhamento e o ponto de ponto brilhavam. Em seguida, a criança será o ícone do botão Avançar. Eu posso, seja constante, eu posso sair. Sair. E o rótulo será const, text. Saia. Aqui. Vamos mudar isso. Top 200, 100, direi quando D, porque não precisamos de muita margem. Agora, salve-o. Então, se eu for ver, temos esse botão de sair aqui, que parece bom. Eu posso ver. Agora, simplesmente, se você for às pesquisas de arte, já temos o botão de sair aqui. Então, vamos para a tela do perfil aqui no local. Basta escrever o provedor de contexto aqui. E o provedor será estranho. Pesquisas. Não queremos que ele ouça as mudanças. Só queríamos chamar essa placa de Wanchun. Ok, salve isso. Ok, agora vamos verificar se clicamos no botão Inscrever-se, se saímos ou não. Veja, assim que eu clico no botão Inscrever-se, ele notifica o ouvinte que acessa a tela inicial aqui. Veja, este foi reconstruído e fomos enviados para a tela de login a partir daqui. É por isso que não precisamos navegar, certo, pelo código de navegação, porque isso é feito automaticamente aqui. E também agora, eu não tenho isso, eu não quero esse código aqui. Enviamos um e-mail para sair do aplicativo diretamente. Se eu reiniciar, a página de login também será mostrada ao funcionário. Então é isso para este vídeo. Nosso aplicativo está concluído, todas as funcionalidades estão funcionando. A única coisa que resta é trabalhar. Se você for até a mesa. Temos que trabalhar na segurança em nível de linha. Portanto, nos próximos vídeos, habilitaremos a segurança em nível de e escreveremos políticas para a tabela. 28. Políticas para tabela de comparecimento: Oi, bem vindo de volta. Então, agora a última coisa que resta é habilitar a segurança em nível de linha em nosso banco de dados. Portanto, a segurança em nível de linha é um recurso de segurança que nos permite controlar o acesso às linhas em uma tabela de banco de dados com base na identidade ou função do usuário. Em supervisionado, você pode usar o RLS para restringir quais linhas de dados um usuário pode ver ou modificar com base em regras predefinidas. Até agora, qualquer pessoa com a chave pública da API tinha acesso ao nosso banco de dados. Esse comportamento padrão após habilitar o RLS em uma tabela é que ele nega todo o acesso, independentemente de o usuário estar autenticado ou não, até mencionarmos nossas políticas. Se você for até lá, verá que, depois de ativar a segurança em nível de linha, todas as operações crud serão negadas. Então, para isso, temos que escrever algo conhecido como políticas. Você pode pensar que eles adicionam uma cláusula where a cada consulta. Uma tabela diferente pode ter uma política de RLS diferente. Talvez você queira que alguma mesa seja produzida, talvez não seja. Então, vamos começar. Habilite o RLS, vá para autenticação e, em seguida, políticas. Aqui, como você pode ver, RLS está desativado em todas as tabelas. Começaremos habilitando o RLS na tabela de presença. Além disso, como não preciso que o aplicativo seja executado, vou simplesmente pará-lo. E vamos nos concentrar em Lee sob o RLS. Então, clique aqui e ele adicionará menos de, tem certeza de que deseja ativar nossa segurança em nível de linha para esta tabela? Taxa de comparecimento, confirme. Então, como você pode ver, RLS está habilitado, mas nenhuma política foi criada ainda. Então, vamos criar uma nova política. E aqui você tem duas opções. Comece rapidamente e crie uma política do zero. Portanto, para simplificar, você gostaria de usar o Get Started rapidamente e, depois de criar algumas consultas posteriormente , se quiser, você pode optar por mais e mais personalizações. Agora, clique em começar rapidamente. Então, aqui você pode ver que existem modelos predefinidos que não conseguem ler o acesso de todos. Em seguida, habilite o acesso de inserção somente para usuários autenticados. Em seguida, eles atualizarão o acesso dos usuários com base em seu ID. Então, como você pode ver, esse modelo é para habilitar um eixo de bits. Mas ao usar esse modelo, você pode até mesmo alterar o acesso necessário. Ou seja, podemos usar esse modelo, mas, em vez disso, podemos escrever essa atualização. Suponha que selecione e, em seguida, habilite selecione Acesso para usuários com base em seus e-mails. Portanto, não é necessariamente que uma única coisa possa ser feita com base no e-mail deles. E, finalmente, é concedido acesso impossibilitado de exclusão para usuários com base em seus IDs. Então você acabou de ler. Permita o acesso dos usuários com base em seu ID, seja ele atrasado, lido atualizado, depende de nós. Então, vamos começar. Usaremos o acesso de inserção impossibilitado somente para usuários autenticados. Nesta tabela, isso é uma presença. Permitiremos inserir qualquer pessoa que tenha criado uma conta. Portanto, use esse modelo. Então aqui. Como você pode ver, o nome da política é e ela será inserida para autenticar usuários, operação permitida é inserir. As funções de destino são autenticadas apenas, o que deve ser verdade. Portanto, não faremos nenhuma alteração. Basta clicar em Revisar. Você pode ver a consulta aqui. E lembre-se de que essa consulta é o que podemos fazer em nossa própria seção interna de personalização. Se você sabe como escrevê-las, consulta de sequência do postgres é desconhecida, então é boa. Agora clique em Salvar política. Então, como você pode ver, fizemos com sucesso nossa primeira política, que é inserir dados na tabela de frequência. Agora, novamente, para um segundo policíclico sobre uma nova política. Em seguida, comece rapidamente. Agora escolha o modelo. Exclua o acesso dos usuários com base em sua ID de usuário. Primeiro, os glificons usam esse modelo, mas usaremos o modelo Excluir para permitir o excesso de atualizações. Ou seja, os funcionários podem atualizar seus próprios dados no Lee. Basta primeiro alterá-los. Um nome de política para permitir a atualização para usuários com base na ID do usuário. Então, em vez de excluir, clique em Atualizar, então você tem esse campo extra. Então, qual expressão é necessária? A condição será se ID de ponto for igual ao ID do funcionário, que é o nome da coluna. Aqui. Usuário que usa ID sublinhado. Essa coluna não existe em nossa tabela. Isso é, eu acho que sim. Tabela de funcionários. Sim. Foram funcionários. Eu mesmo esqueci. Era uma mesa de atendimento aqui. Certo. ID do funcionário. Isso é estranho. Quem está solicitando esse excesso, ou seja, seu RG, deve estar igual ao campo ID do funcionário. Agora, basta copiar e colar a mesma coisa nessa expressão de reverificação. Esses dois serão salvos. Agora, depois disso, clique em Revisar e clique em Salvar política. Também foi então que retornamos com sucesso a política de acesso à atualização da tabela de presença. Em seguida, novamente, outra política para o comparecimento. Clique em obter. Agora, novamente, escolha o acesso de exclusão para usuários com base em seu modelo de ID. Clique em usar este modelo. Então, aqui vamos permitir uma seleção de nibble que está permitindo a leitura, a leitura desses dados. Isso porque já sabemos que temos uma página que as pessoas excederão, que as pessoas verão seu próprio histórico de frequência. Portanto, só permitiremos que os usuários acessem seus próprios dados históricos. Então clique em Selecionar. Então. Aqui será o ID do funcionário. É isso. Portanto, temos uma seleção inversa para usuários com base na ID do usuário. Em seguida, selecione o ID do funcionário aqui também, se quiser, você pode adicionar o ID do funcionário. Depende de você no nome. Este é apenas um nome de política. Esse é o mais importante, ou seja, o nome de uma coluna. Clique em Revisar e depois em Salvar. Então, como você pode ver, escrevemos com sucesso políticas para o estábulo de atendimento. Como o acesso de exclusão não é concedido ao funcionário no aplicativo, não escreveremos a política para isso, mas espero que você tenha entendido. Suponha que você tenha essa funcionalidade de exclusão. Da mesma forma, você também pode escrever a política de exclusão. Não é nada diferente de todas essas políticas. Então, isso é tudo para a mesa de atendimento. No próximo vídeo, escreveremos políticas para os departamentos. Obrigada. 29. Tabela de políticas para departamentos: Olá, vamos continuar trabalhando em nossas políticas. Neste vídeo, trabalharemos na tabela do departamento aqui. Antes de tudo, habilite o RLS. Então sim, estamos confirmados. Em seguida, clique aqui e confirme. Essa é uma habilitação religiosa. Em seguida, clique em nova política e comece rapidamente. Agora, sabemos que a tabela de departamentos não tem dados confidenciais. Portanto, usaremos esse modelo que é um acesso de leitura inválido para todos aqui. Depende de você. Se você quiser, você pode usar esses acessos de leitura somente para usuários autenticados, mas vou usar este modelo. Clique em, use este modelo. Aqui. Não faremos nenhuma alteração. Clique em Exibir e clique em Salvar política. Portanto, temos a tabela de política de seleção para departamentos. Além disso, precisamos apenas do acesso de leitura para esta tabela pois estamos inserindo dados do departamento diretamente do painel do supervisor neste aplicativo. Então, se você for ao editor de tabelas, se for aos departamentos, inserimos esses dados diretamente dessa linha, ou seja, inserir linha, e é por isso que não precisamos de políticas. Mas suponha que você tenha um aplicativo diferente ou esteja permitindo que o proprietário da empresa insira os departamentos, então você terá que escrever a nova política. Em seguida, insira para autenticar os usuários, apenas os departamentos de leitura para liberar. O administrador é o proprietário da empresa. Como todas essas coisas que você pode fazer, depende de você. Mas, como temos esse aplicativo simples, não precisamos de nenhuma outra política. Isso é tudo para a mesa do departamento. No próximo vídeo, finalmente trabalharemos na mesa de funcionários, na fila. 30. Tabela de políticas para funcionários: Oi, bem vindo de volta. Neste vídeo, trabalharemos nessas políticas para a tabela de funcionários. Então, basta primeiro habilitar o RLS. Em seguida, confirme. Em seguida, clique em nova política. Clique em começar. Usaremos esse modelo. Você inserirá o acesso somente para usuários autenticados. Pois depois de criar uma conta que está se registrando, inseriremos novos dados de usuário nesta tabela. Portanto, só queremos essa inserção para usuários autenticados. Clique em, use-os. Não faremos nenhuma alteração aqui. Clique em Revisar e, em seguida, está tudo bem. Clique em Salvar política. Então, a inserção está pronta. Então, novamente, clique em Nova política. Comece rapidamente. Agora temos que criar uma política para o excesso de atualizações. Escolha o terceiro modelo: habilite o acesso à atualização para usuários com base em seu modelo de e-mail. Então eu espero que você tenha entendido isso aqui. Isso verificará, suponha que um usuário esteja enviando essa solicitação. Em vez de verificar o ID do usuário, não verificaremos o e-mail artístico que você pode dizer. Em seguida, clique em Usar modelo. E agora, se você se lembra, já temos uma coluna chamada e-mail em nossa tabela, como esta tabela de funcionários. Portanto, não precisamos fazer nenhuma alteração aqui. Mas se você tem algo como usura molar a moral dos funcionários, então você tem que escrever o nome da coluna aqui. seja, o e-mail sublinhado do funcionário ou qualquer nome da coluna. Clique em Revisar e, em seguida, clique em Salvar política. E, finalmente, essa terceira política será para esse excesso cíclico aqui. E também usaremos o mesmo modelo, ou seja, habilitar o acesso dos usuários com base em seus e-mails. E também, se você quiser, pode usar com base no ideal deles. Então, vou simplesmente com base no e-mail deles. E clique em Usar é o nome da política para uma leitura inválida. Usuários com base no e-mail, as operações permitidas seriam selecionadas. Esta está bem, essa é a avaliação por e-mail da Emily. Em seguida, clique em Salvar política. Portanto, o RLS é habilitado com sucesso em todas as tabelas. E também escrevemos isso como obrigatório. Essas políticas. Ou seja, é necessário se a inserção é adquirida pela exclusão. Depende de aplicativo para aplicativo. Obviamente, o usuário não pode excluir nada, pois a política tardia não é a única que um administrador supertendencioso pode acessar diretamente uma tabela e excluir o material. Isso também é bom, ou seja, qualquer solicitação de exclusão será cancelada. Então, isso é tudo para a parte de segurança em nível de linha. Espero que você tenha entendido isso. Você pode achar isso muito complicado, pois esse conceito não existe em outros serviços de nuvem. Todo mundo tem suas próprias coisas, algumas regras de segurança, outras têm coisas diferentes. Portanto, isso depende do provedor de serviços de nuvem. Mas na medida em que é muito simples. No próximo vídeo, finalmente testaremos para concluir o funcionamento nosso aplicativo com a segurança em nível de linha ativada. Obrigada. 31. Teste a aplicação completa: Olá, bem-vindo ao vídeo final do nosso curso. Neste vídeo, testaremos esse aplicativo completo. E eu estou usando meu dispositivo físico aqui desta vez. Além disso, habilitamos a segurança em nível de linha nos últimos vídeos. Então, vamos ver se tudo está funcionando perfeitamente ou não. Então, vamos fazer o login com nossas credenciais. 345. Clique em Login. Ok. Tudo está bem até aqui. Veja, eu entrei na minha conta. Se eu for, eu tenho esse, então diga sem rodeios. Isso significa que o acesso de leitura está funcionando perfeitamente aqui. Leia também os excessos lá. Ou seja, a tabela de funcionários. O nome do funcionário está aqui. Agora, se eu tentar fazer o Slate para fazer o check-in, ok, se eles usarem um botão físico, ele está solicitando a localização enquanto usam o aplicativo. E veja, isso significa que está funcionando. Podemos inserir os dados. O Rls também está funcionando perfeitamente bem. Ok? Então, o perfil está lá. Temos o nome completo, temos a identidade. E se eu fizer o check-out novamente, esse checkout também deve funcionar. Sim. Também funcionou. Portanto, o checkout também está lá. Se eu clicar no histórico de presença, terei a presença de hoje. E se eu mudar o nome para apenas Raul, atualizá-lo para marketing e clicar em atualizar. Toque, atualize, atualize com sucesso. Demorou algum tempo, mas acho que não. Isso acontecerá de novo e de novo. Se eu clicar em reiniciar , vejo que agora temos um marketing completo. Temos o departamento de marketing. Portanto, nosso aplicativo está funcionando perfeitamente. Todas as funcionalidades estão funcionando. Eu simplesmente clicarei em Sair. Sim. Acho que não. Esse pequeno atraso está acontecendo em seu aplicativo porque eu testei esse aplicativo novamente, em, novamente corretamente em meus dispositivos. Isso está acontecendo aqui, mas não é um problema. Então é isso para este curso. Espero que você tenha gostado e aprendido muito. Confira meus outros cursos também. É isso. Espero ver você em meus outros cursos. Continue praticando.