Desenvolva um app sem código: O potencial do Flutterflow!

Bem vindos, e esse é o começo de nossa jornada no desenvolvimento de um aplicativo com Flutterflow e Firebase. Aqui eu apresento tudo o que vamos ver ao longo dos conteúdos, com excessão das aulas extras, que terão atualizações constantes ao longo do desenvolvimento do aplicativo.

Atenção | Warning | Atencción:

Layout não incluso na compra | Layout not included in this purchase | Diseño no incluido

Dentre diversas ferramentas de NoCode e LowCode, escolhi o Flutterflow para desenvolver esse sistema. Aqui eu explico porque eu optei pelo Flutterflow e porque ele é mais adequado ao que eu estava desenvolvendo.

Nessa aula vamos ver como configurar as partes de Login e Cadastro do usuário. Vamos ver como habilitar essa funcionalidade no Firebase e como adicionar as ações ao flutterflow para gerar o cadastro. Também vemos como iniciar a criação do nosso banco de dados de Users e a diferença entre os registros em Authenticated User, do firebase, e o documento Users.

Nessa aula vamos aprender como configurar a etapa de recuperação de senha, para quando o usuário a tiver esquecido.

Aqui começamos a usar um pouco as condicionais para criar um bloco de erro personalizado para identificar que as senhas digitadas pelo usuário no cadastro estão diferentes, impedindo o cadastro da conta.

Aqui eu apresento os tipos de dados existentes no firebase, descrevendo cada tipo de dado e em que momento devemos usá-los. É muito importante usar os dados corretos para poder estruturar o seu sistema de forma correta.

Aqui conhecemos o tipo de dado mais complexo da estrutura do Firebase, e que nos ajuda a salvar muitas leituras de documentos. Vamos usá-lo bastante em nosso sistema e aprender à manipulá-los nas ações do Flutterflow.

Agora vamos conhecer a nossa estrutura inicial de dados e suas conexões. Ao longo do app, realizamos algumas mudanças, dependendo das necessidades que surgem na construção do app, mas sempre explicando o porque de alterarmos e como ela afeta o sistema.

Após as configurações iniciais, começamos a trabalhar na configuração do perfil do usuário, exibindo os dados dele na tela e ativando a opção de editar perfil, para que ele possa adicionar as suas informações ao sistema.

Após as configurações iniciais, começamos a trabalhar na configuração do perfil da empresa do usuário, exibindo os dados dele na tela e ativando a opção de editar empresa, para que ele possa adicionar as suas informações ao sistema.

Vamos agora configurar a opção de 'editar URL', muito importante para nosso sistema, já que geramos um link único para cada empresa cadastrada. Aqui também usamos ações para evitar duplicidade de dados no sistema, já que não podemos ter duas empresas com a mesma URL cadastrada.

Vamos agora inserir a ação para que o usuário possa carregar uma imagem de perfil e seu logo aos seu cadastro.

Obrigatório em muitos sistemas, aqui explicamos a diferença entre deletar e desativar usuários, trazendo um pouco do que é exigido pela LGPD e como podemos processar essa ação sem perder registros importantes para o nosso sistema, ao passo que respeitamos o pedido de exclusão do usuário, quando solicitado.

Vamos agora testar como ficou nossa tela de Perfil. Aqui rodamos o primeiro teste no aplicativo para ver como está ficando o nosso sistema.

Aqui nós testamos o resultado de nossa página 'perfil da Empresa', e avaliamos como ficaram as configurações que realizamos na tela.

Vamos agora permitir que o usuário possa adicionar membros à sua equipe, no caso de empresas que possuam múltiplos funcionários.

Vamos iniciar a configuração de nosso menu de navegação, permitindo que nosso usuário possa navegar entre as telas disponíveis no sistema.

Vamos começar a criar a tela de adição de serviços. Aqui vamos entender a diferença dos tipos de números na prática, começar os trabalhos com Custom Function, usando a inteligência artificial para gerar o código para nós e trabalhar com a conversão de dados do text field para gerar um número em double, para salvar o preço do serviço.

Vamos começar as configurações da tela de serviços, permitindo o usuário cadastrar seus serviços com preço e tempo de duração de cada serviço.

Agora vamos configurar a lista de serviços para que seja exibida ao usuário, conforme ele os cadastra.

Com a lista de serviços pronta, vamos permitir que nosso usuário possa editar e excluir seus serviços

Vamos usar visibilidade condicional para configurar a tela de 'membros do time', exibindo ela apenas se a empresa do usuário tiver mais de um membro em sua equipe.

Vamos iniciar as configurações para gerar os dias de trabalho do profissional. Para isso, vamos usar Custom Function para podermos usar a data em qualquer idioma.

Vamos começar os testes para as configurações de dias da semana e ver os resultados dessa primeira etapa.

Tivemos um erro na aula anterior e decidi gravar a resolução para mostrar como é o meu processo de debug (identificar erros) do sistema. É uma aula interessante para acompanharmos a lógica e linha de raciocínio usados para identificar erros e solucionar problemas.

Depois de tanto raciocínio e hipóteses, aqui chegamos à solução do problema nos 'dias da semana'. Aqui explico como solucionamos.

Usando visibilidade condicional para ocultar os horários nos dias que o profissional não trabalhar.

Agora vamos usarAgora vamos fazer usos avançados de ListView e Componentes para salvar o horário que precisamos no registro de usuário. Vamos trabalhar com Indices, MAP e identificando qual item da lista precisamos usar para registrar os dados no banco de dados.

Agora vamos iniciar o processo de edição dos horários disponíveis. Aqui vamos trabalhar com alguns conceitos avançados para exibir os horários já registrados e alterar o que o usuário desejar.

Agora vamos iniciar o processo de criação da lista de clientes, para que o usuário seja capaz de visualizar seus clientes registrados.

Vamos configurar agora a página do cliente com os detalhes sobre ele. Aqui usei alguns dados que acreditei que seria interessante para o usuário, como última visita, último serviço, último valor gasto no estabelecimento e quantidade de visitas nos últimos 90 dias. Conhecido em CRM como RFV (Recencia, Frequência e Valor), costuma apresentar o quanto um cliente pode ser interessante para você como empresa.

Agora vamos configurar o componente de 'Membros do time', adicionando as informações do usuário e configurando o 'filtro por usuário' para a tela de clientes. Também é aplicado para a página de compromissos, para que o usuário possa ver a agenda de serviços pertencentes à ele.

Vamos configurar o componente para inserir um novo cliente, sendo essa mais uma opção para o usuário, caso ele queira registrar um cliente manualmente.

Vamos registrar um cliente e corrigir alguns erros do sistema que apareceram na nossa lógica.

Vamos começar a trabalhar com os nossos 'eventos', que são as solicitações de serviços que o usuário vai receber dos clientes, mas nesse momento, vamos trabalhar com a parte de registro de serviços manualmente, caso o usuário queira registrar um serviço para o seu cliente.

Agora vamos configurar a lógica para permitir que o usuário possa adicionar um cliente através da tela de adicionar serviços.

Vamos iniciar os testes para verificar o funcionamento do que construímos.

Vamos agora configurar o nosso componente para que seja possível salvar um evento para um cliente existente, usando os dados do cliente que buscamos no dropdown.

Vamos configurar nosso componente para criar um serviço para um cliente novo, criando um documento, usando um Action Output para poder capturar a saída de uma ação para uma ação subsequente e registrando tudo no banco de dados.

Vamos iniciar as configurações do calendário do usuário. O Flutterflow nos disponibiliza um calendário padrão, mas a ideia é criar uma navegação de eventos por scroll, como apresentado na capa do curso, e para isso, vamos ter que usar muito a nossa lógica.

Agora que temos nossa tela de calendário, vamos começar a exibir os serviços registrados no calendário do nosso usuário.

Aqui eu explico como será a lógica que vamos usar para a criação da nossa agenda de serviços com scroll.

Vamos seguir na configuração da nossa agenda de eventos, finalizando a criação da lógica dos blocos de evento.

Agora vamos finalizar a nossa configuração dos nossos blocos de eventos, ajustando a altura do bloco de acordo com sua duração, para que ele apareça no calendário com o tamanho proporcional.

Vamos iniciar o fluxo de navegação do cliente do nosso usuário, aquele que vai realizar os agendamentos para o profissional. Aqui eu explico sobre Route e mostro como podemos fazer para ter um link único para cada empresa. Excelente para aplicativos de delivery exclusivos para as empresas, por exemplo.

Vamos iniciar a configuração da nossa tela de serviços, personalizando e configurando as informações necessárias.

Vamos agora finalizar a nossa seleção de serviços, adicionando os parâmetros necessário para a navegação e exibindo essa informação para o cliente do nosso usuário quando ele navegar pela URL.

Avançando para a próxima etapa, vamos para a configuração da página de seleção de datas. Nesse primeiro vídeo, estamos apenas configurando as informações dinâmicas da página, antes de avançar para a configuração dos horários do profissional.

Agora vamos começar a gerar os nossos blocos de tempo, e para isso, vamos precisar bastante da Inteligência Artificial para nos ajudar com a criação de código (Custom Function), e de uma lógica aprimorada também para fazer com que esses blocos sejam de acordo com os horários adicionados pelo usuário lá na tela de expediente.

Vamos avançar na geração dos nossos blocos de tempo, fazendo alguns ajustes em nossa lógica e usando a Inteligência Artificial para nos ajudar com a criação de código (Custom Function).

Finalizamos a construção de nossos blocos de tempo e solucionamos os problemas que surgiram pelo caminho. Aqui apresento o resultado final da lógica usada para essa conclusão.

Aqui apresento a lógica que vamos usar para remover os blocos de tempo que não estão disponíveis no horário do profissional devido à uma agenda ocupada.

Avançamos para o próximo passo do nosso fluxo de registro de um evento, agora verificando se o cliente já é cadastrado nos nossos sistemas ou se ele é um cliente novo, e nesse caso, exigindo o cadastro do cliente para concluir o agendamento.

Finalizado o cadastro do cliente, vamos agora para a tela de confirmação de serviços, onde apresentamos ao cliente do nosso usuário que ele concluiu o agendamento com sucesso!