Cliente - Cadastros Base Provider
Banco
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.
Gerenciamento de Estado
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.
Provider - Conceitos
Apresentação de artigo que explica os conceitos relacionados ao Provider numa linguagem de mais fácil compreensão.
Contador
Desenvolvimento do exemplo Contador passo a passo utilizando o Provider.
Novo Projeto
Criação de um novo projeto para o Fenix. Denifição e explicação das pastas do projeto.
Model
Desenvolvendo a classe de modelo de dados do Banco passo a passo.
Service
Desenvolvendo a classe de serviço do Banco passo a passo. Classe utilizada para consumir os servidores REST.
ViewModel
Desenvolvendo a classe ViewModel do Banco passo a passo. Essa classe substitui a classe Controller utilizada com o MVC Framework.
Rotas
Definindo as rotas da aplicação.
Locator
Utilizando o GetIt como localizador de classes. Com ele é possível instanciar Singletons ou Factories sem muita dificuldade.
Main
Arrumando o arquivo principal da aplicação.
View - Banco Lista 01
Desenvolvendo a classe View - Banco Lista passo a passo. Utilizando o Datatable para carregar os dados. Parte 01.
View - Banco Lista 02
Desenvolvendo a classe View - Banco Lista passo a passo. Utilizando o Datatable para carregar os dados. Parte 02.
View - Banco Detalhe
Desenvolvendo a classe View - Banco Detalhe passo a passo.
View - Banco Persiste
Desenvolvendo a classe View - Banco Persiste passo a passo.
Validações
Definindo as validações que serão utilizadas nos formulários da aplicação.
Filtro 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 01.
Filtro 02
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 e Considerações
Testes na aplicação e considerações sobre os próximos passos.
Filtro
Conclusão do filtro no lado do cliente.
Filtro Conclusão
No vídeo abaixo mostramos como concluir a funcionalidade do filtro na aplicação cliente feita em Flutter.
Tratamento de Erros
Vídeos de tratamento de erros no lado do cliente.
Introdução
Introdução aos conceitos para tratamento de erros. Testes no Postman.
Implementação
Implementação do tratamento de erros na aplicação cliente feita em Flutter.
Testes e Debug
Debugando e testando a aplicação para compreender o fluxo de tratamento de erros.
Testes 5 Servidores
Testes nos 5 Servidores e utilização do ngrok.
Testes
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.
Filtro - Evolução
Primeiro passo na evolução do filtro no lado do cliente.
Formatando URL
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).
Agência
Nos vídeos a seguir você verá os passos necessários para a implementação da janela Banco Agência usando o Provider.
Resolução Exercício
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.
Alterações no Projeto
Apresentação de algumas alterações no projeto:
- Criação de novas pastas para melhor organização do projeto.
- Alteração do Service para enviar o ID na URL do método PUT.
- Criação da nova classe ViewUtilLib que mantém código repetitivo que pode ser aproveitado por várias janelas.
- Lista de campos e colunas migradas da ViewModel para a Model.
- Teste se a página de Persistência está inserindo ou alterando com base numa nova variável de operação e não com base no título da janela.
Classes BancoAgencia
Apresentação das classes: Model, ViewModel, Service e das páginas Lista, Detalhe e Persiste.
Lookup Page 01
Desenvolvimento passo a passo da janela de lookup - parte 01.
Lookup Page 02
Desenvolvimento passo a passo da janela de lookup - parte 02.
Lookup Page 03
Desenvolvimento passo a passo da janela de lookup - parte 03.
Pessoa
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.
Tarefas no Trello
Apresentação dos exercícios pendentes no Trello.
Infra
Alterações nas classes de Infra: Main, Locator e Rotas.
Model
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.
Service
Apresentação da classe de serviço da Pessoa.
ViewModel
Apresentação da classe ViewModel da Pessoa.
ViewUtilLib
Análise do arquivo view_util_lib.dart que contém a classe ViewUtilLib e outras classes utilitárias.
PessoaPage
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.
PessoaListaPage
Análise da página PessoaListaPage.
PessoaDetalhePage
Análise da página PessoaDetalhePage.
PessoaPersistePage
Análise da página PessoaPersistePage. Utilização do DropDownButton.
PF e PJ PersistePage
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.
Pessoa Contato
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.
Flutter Web e Considerações Finais
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.
Pessoa - Exercícios
No vídeo a seguir você verá a solução dos exercícios mencionados para a tela Pessoa e também a solução de alguns bugs.
Solução Exercícios e Bugs
Solução de exercícios e bugs.