Um CRUD com Angular e Supabase
Esse artigo é uma continuação da postagem Angular 11 e Supabase — Uma alternativa ao Firebase !?
Nesse texto vou apresentar um tutorial explorando as principais operações de um CRUD, utilizando uma aplicação escrita em Angular na versão 11 e o Supabase.
Com um projeto criado através do CLI(ng new), o próximo passo é a instalação da lib do supabase. No terminal e dentro do projeto, digite o comando conforme imagem ao lado.
Ainda no terminal, vamos criar uma classe de serviço para realização da conexão e os métodos.
Geramos uma classe Service chamada ApiService.
Para efeitos mais didáticos não estou seguindo nenhuma organização ou arquitetura de aplicação (não faça isso em um projeto real!)
No arquivo api.service.ts codificaremos assim:
Após o import da biblioteca (linha 3) declaramos as variáveis da url, chave e cliente (linhas 9 a 11).
Essas informações (supabaseUrl e supabaseKey) estão disponíveis na aba de autenticação no dashboard do supabase, conforme mencionado aqui.
Novamente, tome cuidado com a exposição de chaves. No painel há uma informação sobre a chave cliente que permite acesso anônimo e uma chave de serviço que nunca deve ser exposta no cliente.
A recomendação é a utilização no servidor ou em variáveis de ambiente.
Indico a leitura desse artigo sobre uma solução para guardar chaves em arquivos .env
No método construtor, linha 14 criamos a conexão através do método createClient.
Note que importamos uma classe Todo (linha 1). Como ela ainda não existe no VSCode ou outro editor isso acusará um erro.
Sem problemas, para resolver, vamos criar a classe que representa um modelo das informações da tabela todos.
Na pasta app, crie o arquivo todo.model.ts, e codifique como no exemplo a seguir:
Temos apenas três atributos: id, name e done que representarão um registro da tabela.
Codificando os métodos
Voltando ao arquivo api.service.ts, já é possível escrever os métodos de consulta, inclusão e exclusão na tabela.
Começaremos pelo método de inserção addTodo.
Algumas considerações sobre o método. Podemos tipar o retorno com <Todo> e passar no parâmetro de insert o objeto todo sem precisar qualquer transformação. Isso facilita a criação de classes mais genéricas.
Além disso conseguimos recuperar o retorno (data) ou um erro em caso de falhas.
Essa mesma lógica serve para os métodos de recuperação, exclusão e atualização (getTodos, deleteTodo e update).
O método select pode ser aninhado a diversos outros métodos (ver documentação). No exemplo eu fiz utilizando um limit com 10 registros.
Já os métodos update e delete, comparamos com um id (linhas 13 e 21).
Componentes
Vou focar a descrição na lógica do componente app.component.ts. Deixei o link do repositório deste projeto no final do tutorial.
Declaramos um array de TODOs, um objeto todo e um actionLabel que alternamos entre os status de adição ‘ADD’ ou atualização ‘UPDATE’. No método construtor fazemos a injeção da dependência para utilizar a api.
No método ngOnInit() note que nas linhas 20 e 21 invocamos o método getTodos() da api, carregando os TODOs existentes assim que abrimos a página, atribuindo o resultado para o array declarado inicialmente.
No método addTodo fazemos uma verificação inicial para checar se existe um id, e como consequência, desviamos o fluxo para uma atualização. Caso contrário, chamamos o método da api e na sua finalização adicionamos ao array o resultado.
Os próximos métodos, codificaremos para selecionar o registro da lista, atualizar e mudar o status de um todo.
No método update, linha 9, eu recupero o índice do array para atualizar a referência dela na linha linha 10.
Já no método check o objetivo é alterar o status de realizado (linha 18).
E finalmente o método delete, utilizamos um método auxiliar para remover o objeto do array usando o método filter (linha 9).
Conclusão
Gostei muito do serviço e da facilidade em criar a aplicação integrando os serviços do Supabase. Eles prometem mais funcionalidades em breve. O jeito é aguardar.
Que tal aprender a construir um sistema de estoque completo em Angular e Supabase?
Conheça meu curso em https://www.udemy.com/course/angular-e-supabase/?referralCode=B56FB6F7D1428EEA009D
Você pode encontrar o código completo do projeto no meu repositório.
Obrigado e até mais.
