Introdução
Vídeo de introdução.
Vídeo Público Aberto
Desenvolvimento de várias telas do T2Ti ERP 3.0 com o Flutter. Dessa maneira, o aluno 'pega o jeito' com o Flutter e o Gerador de Códigos, ficando pronto para o que vem pela frente com o Pegasus PDV.
Vídeo de introdução.
Vídeo Público Aberto
Nos vídeos abaixo mostramos os tipos de telas e controles que devemos conhecer para planejarmos o cliente da aplicação. Analisamos ainda alguns exemplos feitos em Flutter para tomar como base para a criação de nossas telas.
Conhecendo os tipos de telas que serão construídas para o ERP.
Conhecendo os tipos de controles visuais que serão utilizados nas telas do ERP.
Analisando telas e controles no Invoice Ninja.
Analisando telas e controles no Flutter Catalog.
Analisando telas e controles no Flutter Gallery.
Analisando telas e controles no Flutter UI Kit.
Nos vídeos abaixo abordamos o tema Gerenciamento de Estado. Mostramos como esse tema é tratado pelo Flutter em sua documentação. Listamos algumas arquiteturas para o gerencimento de estado e selecionamos uma delas para a construção do ERP. OBS: A arquitetura selecionada neste momento será alterada posteriormente para uma de mais fácil utilização e recomendada pelo Time Flutter. O propósito aqui é observar que tomar um caminho aparentemente fácil por conta de uma terminologia conhecida (MVC) pode não ser uma boa ideia.
Explicamos a estrutura padrão de um projeto feito no Flutter (pastas e arquivos).
Introdução ao tema. Paradigma declarativo.
O que é estado. Estado efêmero versus estado de aplicação ou compartilhado.
Introdução às abordagens para gerencimento de estado de uma aplicação Flutter.
Análise de algumas arquiteturas ou abordagens para o gerenciamento de estado.
Breve introdução à arquitetura selecionada para a construção do T2Ti ERP Fenix. Apresentação da documentação e exemplos. Essa arquitetura será modificada posteriormente.
Nos vídeos abaixo iniciamos a construção do cliente do T2Ti ERP 3.0.
Criamos o projeto com as devidas pastas e iniciamos a implementação do módulo Cadastros Base por uma tela simples: Cadastro de Bancos.
Você verá ainda a construção das telas Agência (com foco na criação de um lookup) e Pessoa (com foco na criação de uma janela mestre/detalhe).
OBS: não se preocupe muito em praticar neste momento, visto que estamos usando uma biblioteca que será substituída. Dê atenção às aulas
e compreenda o que está sendo feito. Se tiver tempo, pratique com o MVC Framework, mas saiba que migraremos esse código posteriormente
para o Provider. Mostraremos isso mais a frente.
Criando o projeto T2Ti ERP Fenix no Flutter e configurando as pastas do projeto.
Criando o projeto T2Ti ERP Fenix no Flutter e configurando as pastas do projeto.
Criando e organizando os arquivos para o desenvolvimento da tela Banco.
Desenvolvendo a classe Model do Banco passo a passo.
Desenvolvendo a classe Service do Banco passo a passo.
Desenvolvendo a classe Action do Banco passo a passo.
Desenvolvendo a classe Controller do Banco passo a passo.
Desenvolvendo a classe View - Banco Lista passo a passo.
Desenvolvendo a classe View - Banco Detalhe passo a passo.
Desenvolvendo a classe View - Banco Persiste passo a passo.
Fazendo testes na aplicação na máquina da T2Ti onde o sistema foi feito.
Fazendo testes na aplicação do aluno mostrando como atualizar o repositório e o próprio ramo (branch).
Mostrando a alteração no nome dos arquivos e pastas para estar de acordo com as regras de estilo do Dart.
Mostrando a evolução do código para a "janela/page" Banco.
Mostrando a evolução do código no BancoController. Testes.
Nos vídeos abaixo veremos como construir a tela Agências Bancárias. Concentre-se nos aspectos de construção visual da tela e na solução inicial de criar um Lookup. Posteriormente construiremos um Lookup mais rebuscado que será utilizado pela aplicação.
Organizando as tarefas no Trello. Verificando o funcionamento da tela Banco Agência.
Desenvolvendo a classe Action da Agência.
Desenvolvendo a classe Controller da Agência.
Desenvolvendo a classe Model da Agência.
Desenvolvendo a classe Service da Agência.
Desenvolvendo a classe View - Agência Lista.
Desenvolvendo a classe View - Agência Detalhe.
Desenvolvendo a classe View - Agência Persiste.
Fazendo testes na aplicação ainda sem o lookup.
Analisando o uso do Lookup (search) em outras aplicações.
Analisando a utilização do ShowSearch e delegates.
Inserindo o botão de Lookup na tela de persistência da agência para buscar pelo banco.
Implementando a tela de lookup usando o ShowSearch com delegates e pegando dados genéricos JSON de uma chamada web.
Nos vídeos abaixo veremos como construir a tela Pessoa. Concentre-se nos aspectos de construção visual da tela Mestre/Detalhe. Posteriormente migraremos o código do MVC Framework para o Provider e você verá como é mais fácil trabalhar com a solução indicada pelo Time Flutter.
Organizando as tarefas no Trello.
Conhecendo a tela Pessoa.
Analisando como utilizar Abas no Flutter.
Construção do Model da Pessoa.
Construção do arquivo Pessoa Fields.
Construção do service da Pessoa.
Construção do controller da Pessoa.
Construção da página que lista as pessoas.
Construção da página que detalha os dados de uma pessoa selecionada.
Construção da página de persistência da pessoa.
Testando a tela pessoa recém construída.
Adaptando a tela com abas que vem com o Flutter Gallery para utilizarmos na tela Pessoa.
Passando a página "Pessoa Persiste" para dentro da aba.
Construindo o arquivo Contato Fields.
Construindo o service do Contato.
Construindo o controller do Contato.
Construindo as páginas para o Contato.
Inserindo as páginas do Contato dentro das abas como detalhe de Pessoa (parte visual).
Construindo o arquivo Fields para a Pessoa Jurídica.
Construindo a página de persistência da Pessoa Jurídica.
Apresentando os BUGs na aplicação construída.
Apresentando os exercícios que serão colocados no quadro Trello.
Nos vídeos abaixo mostramos como construir a tela Banco completa utilizando o Provider. Nesse ponto já estamos consumindo
o servidor REST.
A ideia aqui é comparar o Provider (sugerido pela equipe do Flutter para gerenciamento de estado) com
o MVC Framework que utilizamos no começo do treinamento e realizar a migração do código para o Provider.
OBS: antes de prosseguir, assista aos vídeos de construção do servidor na(s) linguagem(ns) que você escolheu. Siga os links a seguir.
Após termos construído as telas Banco, Agência e Pessoa utilizando o MVC Framework, voltamos nossa atenção novamente para o tema Gerenciamento de Estado para verificar se estamos no caminho certo. Analisamos o Provider, que é sugerido pela equipe do Flutter como melhor opção para gerenciar o estado de aplicações de todos os portes.
Apresentação de artigo que explica os conceitos relacionados ao Provider numa linguagem de mais fácil compreensão.
Desenvolvimento do exemplo Contador passo a passo utilizando o Provider.
Criação de um novo projeto para o Fenix. Denifição e explicação das pastas do projeto.
Desenvolvendo a classe de modelo de dados do Banco passo a passo.
Desenvolvendo a classe de serviço do Banco passo a passo. Classe utilizada para consumir os servidores REST.
Desenvolvendo a classe ViewModel do Banco passo a passo. Essa classe substitui a classe Controller utilizada com o MVC Framework.
Definindo as rotas da aplicação.
Utilizando o GetIt como localizador de classes. Com ele é possível instanciar Singletons ou Factories sem muita dificuldade.
Arrumando o arquivo principal da aplicação.
Desenvolvendo a classe View - Banco Lista passo a passo. Utilizando o Datatable para carregar os dados. Parte 01.
Desenvolvendo a classe View - Banco Lista passo a passo. Utilizando o Datatable para carregar os dados. Parte 02.
Desenvolvendo a classe View - Banco Detalhe passo a passo.
Desenvolvendo a classe View - Banco Persiste passo a passo.
Definindo as validações que serão utilizadas nos formulários da aplicação.
Construindo a página de filtro passo a passo. Chamando a página de filtro a partir da página que lista os bancos. Parte 01.
Construindo a página de filtro passo a passo. Chamando a página de filtro a partir da página que lista os bancos. Parte 02.
Testes na aplicação e considerações sobre os próximos passos.
No vídeo abaixo mostramos como concluir a funcionalidade do filtro na aplicação cliente feita em Flutter.
Nos vídeos a seguir veremos o tratamento de erros no lado do cliente. Faremos ainda testes usando os cinco servidores e por fim veremos uma evolução no Filtro.
Introdução aos conceitos para tratamento de erros. Testes no Postman.
Implementação do tratamento de erros na aplicação cliente feita em Flutter.
Debugando e testando a aplicação para compreender o fluxo de tratamento de erros.
No vídeo abaixo mostramos os testes realizados com a tela banco consumindo os 5 servidores e utilizamos o ngrok para expor nossos servidores locais através de uma URL que pode ser acessada de forma remota.
Vídeo Público Aberto
Primeiro passo na evolução do filtro no lado do cliente. Na vídeo aula a seguir você verá a alteração no formato da URL para não mais montar uma rota com os dados do filtro, mas ao invés disso enviar um parâmetro de consulta (query parameter).
Nos vídeos abaixo mostramos como executar a aplicação feita no flutter num navegador web. Você verá como adicionar o suporte web para o projeto fenix já existente e como criar um novo projeto com suporte web. Veremos como executar a aplicação no navegador a partir da linha de comando e usando as IDEs VS Code e Android Studio.
Analisando a página web do flutter que trata sobre o assunto flutter web. Ainda neste vídeo mudamos o channel do flutter para beta e criamos uma nova aplicação que roda no navegador Chrome.
Adicionamos o suporte para web no projeto Fenix existente.
Criamos um novo projeto já com suporte web e o "transformamos" no Fenix.
Mostramos como instalar e utilizar os recursos do DevTools.
Utilizando o VS Code para rodar o Fenix no navegador Chrome.
Utilizando o Android Studio para rodar o Fenix no navegador Chrome.
Mostramos como resolver a maioria dos exercícios que ficaram pendentes para as telas Banco, Banco Agência e Pessoa. Alguns exercícios ficam pendentes para serem resolvidos já com a utilização dos servidores REST e do Provider.
Nos vídeos a seguir você verá os passos necessários para a implementação da janela Banco Agência usando o Provider.
Apresentação do exercício no Trello que ficou pendente para fazer a consulta dos Bancos na fonte de dados e importar o banco diretamente da fonte de dados. Neste caso, estamos trazendo da API REST.
Apresentação de algumas alterações no projeto:
Apresentação das classes: Model, ViewModel, Service e das páginas Lista, Detalhe e Persiste.
Desenvolvimento passo a passo da janela de lookup - parte 01.
Desenvolvimento passo a passo da janela de lookup - parte 02.
Desenvolvimento passo a passo da janela de lookup - parte 03.
Nos vídeos a seguir você verá os passos necessários para a implementação da janela Pessoa usando o Provider. Essa janela é a base e matriz para a criação de todas as demais janelas mestre-detalhe no ERP.
Apresentação dos exercícios pendentes no Trello.
Alterações nas classes de Infra: Main, Locator e Rotas.
Análise do código nas classes de modelo relacionadas a Pessoa. Algumas novidades são vistas aqui, tais como o tratamento de listas (mestre-detalhe) e o tratamentos dos dados de campos de Domain, que armazenam apenas um caractere no banco de dados mas precisam ser exibidos com uma descrição completa para o usuário.
Apresentação da classe de serviço da Pessoa.
Apresentação da classe ViewModel da Pessoa.
Análise do arquivo view_util_lib.dart que contém a classe ViewUtilLib e outras classes utilitárias.
Análise da página PessoaPage que faz o controle visual das Abas. Comparação do código atual com o código desenvolvido na primeira versão da aplicação.
Análise da página PessoaListaPage.
Análise da página PessoaDetalhePage.
Análise da página PessoaPersistePage. Utilização do DropDownButton.
Análise das páginas de persistência: PessoaFisica e PessoaJuridica. Utilização de máscara no CPF e no CNPJ. Validação de CPF e de CNPJ.
Análise das três páginas relacionadas a PessoaContato: ListaPage, DetalhePage e PersistePage. Nessas páginas vemos a estratégia de como lidar com os dados de detalhe de uma relação mestre/detalhe. As páginas, embora tenham os mesmos nomes e a mesma lógica de navegação das páginas de uma tela simples, são desenvolvidas de uma forma mais enxuta e não tem acesso direto ao servidor. PessoaTelefone e PessoaEndereco seguem a mesma lógica.
Considerações finais para este conjunto de vídeos com orientações para o estudo. Informações sobre um possível problema que pode ocorrer com o Flutter Web.
Solução de exercícios e bugs.
Nos vídeos abaixo mostramos como desenvolver o Menu da aplicação. O menu é dividido em três partes:
Apresentação do projeto de exemplo que é utilizado como base para a construção no menu.
Explorando o Menu Externo na aplicação base. Este menu exibirá os módulos do ERP.
Explorando o Menu Interno e Lateral na aplicação base. O menu interno apresenta as opções do menu externo selecionado previamente. O menu lateral (Drawer) apresenta outras opções que não estão disponíveis nos menus externo e interno.
Apresentação do projeto base alterado para funcionar no T2Ti ERP.
Comparação entre o menu externo alterado e o menu externo do projeto base.
Comparação entre o menu interno alterado e o menu interno do projeto base.
Comparação entre o drawer alterado e o drawer do projeto base.
Apresentação do projeto T2Ti ERP Fenix funcionando com o novo menu.
Explicações sobre a migração dos arquivos do projeto "teste_menu_t2ti" para o T2Ti ERP Fenix e as alterações necessárias para que o menu funcione com as páginas Banco, Agência e Pessoa e demais páginas que serão inseridas.
Nos vídeos a seguir você verá como arrumar o código gerado pelo Gerador de Códigos. Verá ainda como reportar erros para o Quadro Trello.
Mostramos como organizar os arquivos gerados pelo Gerador de Código e os testes realizados no cliente. Não se preocupe com as demais telas do cadastro do ERP. Seu foco deve ser as telas de cadastro do Pegasus PDV.
A seguir você aprenderá:
Vídeo Público Aberto
Mostra como tratar o erro quando o servidor está fora do ar. Testes em dispositivo móvel e no navegador.
Nossa primeira tarefa para o Pegasus é a seguinte: UX para telas maiores.
Nós já temos responsividade, mas quando a aplicação é apresentada numa tela grande ela fica 'feia', não é uma boa experiência para o usuário.
Nos vídeos abaixo você verá como usar o Flutter Bootstrap para conseguir realizar essa tarefa.
Vídeo introdutório:
Neste vídeo você verá como utilizar o Flutter Bootstrap na nossa página de detalhe. Para esse primeiro exemplo nós usamos a página de detalhe da Agência.
Neste vídeo você verá como utilizar o Flutter Bootstrap na nossa página de persistência. Para esse primeiro exemplo nós usamos a página de detalhe da Agência.
Neste vídeo você verá como adicionar um espaço entre colunas que passam a ocupar duas linhas dependendo do tamanho da tela.
Nos vídeos abaixo você verá como usar o Gerador de Códigos para construir as telas da Tributação.
Vídeo introdutório mostrando a ideia das telas que devem ser construídas para o módulo tributação:
Copiando os arquivos gerados pelo Gerador de Código.
Organizando os arquivos gerados pelo Gerador de Código.
Construindo o menu do módulo Tributação.
Organizando as rotas e testando a aplicação.