Au 14 - Mobile - React Native - Adicionando um produto - Mestres BEGIN

Nesta aula, implementamos a funcionalidade completa de adição de produtos, desde a abertura do formulário até a comunicação com o backend e atualização da lista.

Fluxo de Adição de Produtos

O processo completo envolve:

1. Clique no botão "+" no cabeçalho
2. Abertura do modal com formulário
3. Preenchimento dos campos
4. Envio dos dados para o backend
5. Atualização da lista local

Componentes Principais

Estrutura criada:

Comunicação com Backend

Implementação da requisição POST:

1const handleSubmit = async () => {
2 try {
3 const response = await api.post("/products", formData);
4 console.log("Produto criado:", response.data);
5 // Fechar modal e atualizar lista
6 } catch (error) {
7 console.error("Erro ao criar produto:", error);
8 } };

Gerenciamento de Estado

Estados utilizados:

• isAdding: Controla visibilidade do modal
• formData: Armazena valores do formulário
• products: Lista de produtos atualizada

Próximos Passos

Melhorias planejadas:

• Validação dos campos do formulário
• Feedback visual para o usuário
• Atualização automática da lista após criação
• Tratamento de erros mais robusto

Considerações Finais

Pontos importantes desta implementação:

• Comunicação entre componentes via callbacks
• Uso de async/await para operações assíncronas
• Tratamento básico de erros com try/catch
• Organização do fluxo de dados

Dicas para evolução:

• Implementar loading durante requisições
• Adicionar confirmação antes de fechar o modal
• Validar conexão com internet antes de enviar
• Considerar otimizações de desempenho

Esta funcionalidade completa nosso ciclo básico de criação no CRUD, preparando o terreno para as operações de edição e exclusão que veremos nas próximas aulas.