Angular e Supabase: otimize a sua aplicação com SSR

Integração com o Supabase - Apresentação

Que tal aprender como otimizar o desempenho e o SEO da nossa aplicação Angular?

Meu nome é Nayanne Batista e quero convidar você a participar deste curso sobre Server-Side Rendering (SSR) no Angular.

Audiodescrição: Nayanne se identifica como uma mulher de pele morena. Tem olhos e cabelos castanhos escuros. Os cabelos são longos e estão soltos à frente dos ombros. No corpo, usa uma camiseta cor de laranja. Ao fundo, um ambiente composto de estantes brancas com livros coloridos e um violão no canto esquerdo são iluminados em tons de azul e roxo.

Conhecendo o projeto

Neste curso, utilizaremos o projeto Deleite, um e-commerce de milkshakes, sorvetes, smoothies e cafés gelados. A aplicação começará utilizando a abordagem Client-Side Rendering (CSR).

Temos a página inicial de Home e também uma página de detalhes do produto. Implementaremos algumas técnicas de SSR baseadas na documentação do Angular.

O que aprenderemos?

Para buscar esses dados, utilizaremos o Supabase, um Backend as a Service que nos fornecerá um banco de dados e diversos outros recursos e funcionalidades. Vamos integrá-lo à nossa aplicação Angular.

Além disso, veremos como começar com o SSR e como utilizar alguns hooks específicos do Angular para tornar os componentes da aplicação compatíveis com essa abordagem. Também aprenderemos a adicionar metatags fixas e dinâmicas para melhorar a indexação da aplicação. Veremos ainda como fazer a pré-renderização de rotas utilizando o SSG ou a técnica de pre-rendering.

Pré-requisitos

Para aproveitar melhor este curso, é interessante já ter conhecimento intermediário sobre as versões mais recentes do Angular. Utilizaremos a versão 18. Também é importante conhecer a biblioteca RXJS, pois precisaremos utilizar alguns operadores dessa biblioteca.

Vamos mergulhar no Angular!

Integração com o Supabase - Conhecendo o Supabase

Se você ainda não acessou a atividade "Preparando o Ambiente", é importante voltar e acessar, pois lá está disponível o link da aplicação base do nosso e-commerce Deleite. Devemos seguir o passo a passo, instalar as dependências, e teremos acesso ao projeto.

Com o projeto aberto no VS Code, vamos executá-lo no terminal com o comando abaixo:

ng serve

Após pressionar "Enter", a aplicação será iniciada, e poderemos acessá-la no link retornado pelo terminal, que acessa o localhost na porta 4200 pelo navegador.

Explorando a estrutura do e-commerce Deleite

Na página principal do Deleite, temos apenas o cabeçalho com a logo da marca, um banner e um rodapé. Se acessarmos o Figma do projeto, podemos ver que essa página também contém todos os produtos do Deleite, divididas nas seções "Milkshakes", "Sorvetes", "Smoothies" e "Cafés gelados".

Há também uma página de detalhes, com a imagem do produto, ingredientes, preço e outras opções. A terceira tela, que exibe os itens do carrinho, será desenvolvida mais adiante em outro curso.

A estrutura dos cards dos produtos já existe. Voltando ao VS Code, acessaremos a aba lateral esquerda com o explorador de arquivos. Dentro do caminho de pastas "src > app > components", temos pastas com os componentes do card do produto, do detalhe e das listas do produto. Já no caminho de pastas "src > app > pages", temos pastas com as páginas home e de detalhes.

O que falta é a conexão com o back-end para buscar esses dados. Poderíamos ter deixado esses dados "mockados" no próprio projeto ou utilizado uma ferramenta como o JSON Server para criar uma API falsa. No entanto, durante este curso e o próximo curso de server-side rendering, mostraremos como adicionar várias funcionalidades quando temos um projeto renderizado do lado do servidor, até a etapa de deploy.

Por isso, precisamos de uma ferramenta mais robusta para armazenar e gerenciar esses dados em ambientes de produção. É aí que entra o Supabase, a ferramenta que utilizaremos.

Iniciando a configuração com o Supabase

Vamos acessar a documentação do Supabase em uma nova guia do navegador. O Supabase é uma alternativa open source ao Firebase. É uma plataforma Back-end as a Service (um back-end como serviço) que nos oferece um back-end completo, com banco de dados, autenticação, APIs em tempo real e várias outras funcionalidades. Contudo, não exploraremos todas neste curso.

Para utilizar essa plataforma, precisamos criar uma conta. Não se preocupe, faremos todo o passo a passo juntos. Na página principal da documentação, clicaremos no botão "Start your project". Haverá um direcionamento para a tela de login.

Já criamos uma conta para o curso, mas se você ainda não tiver uma, clique em "Sign Up Now". Haverá o direcionamento para a tela "Get started" onde digitará seu e-mail, criará uma senha e clicará em "Sign Up". Após criar a conta, você receberá um e-mail para confirmação, e então poderá acessar.

Após criar essa conta, clicaremos em "Sign In Now", preencheremos os dados de e-mail e senha, e clicaremos em "Sign In" para acessar o Supabase. Haverá um direcionamento para uma tela que solicita a criação de uma organização e de um projeto. Entretanto, pularemos essa etapa para acessar a documentação, clicando no ícone da logo do Supabase, no canto superior esquerdo da página.

Na página da documentação, temos uma aba lateral esquerda com vários tópicos, que exploraremos posteriormente. Para criar um projeto, primeiro precisamos criar uma organização, onde poderemos agrupar todos os projetos que quisermos.

Criando uma organização

Para isso, acessaremos a parte superior no centro da página e clicaremos em "New organization". Na tela exibida, precisamos preencher o nome dessa organização, o tipo e o plano. O nome já é sugerido no campo "Name" com base no e-mail — no caso do vídeo, a organização será intitulada "nayannebatista's Org". Você deve criar outro nome.

No campo do tipo da organização ("Type of organization"), manteremos a opção "Personal" (pessoal). No campo do plano ("Plan"), manteremos a opção de plano gratuito ("Free"). Por fim, clicaremos no botão "Create organization" (Criar Organização).

Esse processo pode demorar um pouco.

Criando um projeto

Após a organização ser criada, podemos criar projetos dentro dela. Haverá um direcionamento para a tela "Create a new project" (Criar um novo projeto). No campo "Organization", manteremos a organização que acabamos de criar, mas se houver outras, podemos visualizá-las e escolhê-las clicando nesse campo.

No campo "Name", precisamos dar um nome ao projeto. Podemos chamá-lo de "deleite", com inicial minúscula. Também precisamos definir uma senha no campo "Database Password". Para isso, clicaremos em "Generate a Password" abaixo desse campo para gerar uma senha forte, que depois copiaremos e guardaremos. Se não quiser gerar uma senha, você pode cadastrar uma senha de sua preferência.

Na seção "Region" (Região), escolheremos "South America" (América do Sul). Por fim, clicaremos em "Create new project" (Criar Novo Projeto).

Se houver dúvidas sobre o nome do projeto, não há problema, pois podemos renomeá-lo depois.

Enquanto o processo de criação do projeto é finalizado, haverá um direcionamento para outra tela com informações importantes sobre esse projeto, como as chaves da nossa API. Na seção "Project API Keys", temos a chave API pública.

Também há outras informações na seção "Project Configuration", como a URL. Tanto a URL como a API Key serão necessárias ao criar um serviço Angular para fazer requisições e acessar o banco de dados.

O processo de finalização continuará, mas logo será concluído. Após o projeto "deleite" ser finalizado e criado, haverá o direcionamento para uma página com as informações sobre URL, API Key, e também algumas informações sobre como fazer a conexão com o banco de dados, que veremos nos próximos vídeos.

Próximos passos

Na seção "Get started", temos um convite para começar a criar nosso banco de dados e nossa tabela, o que faremos em conjunto no próximo vídeo.

Integração com o Supabase - Criando a tabela de produtos

Com a conta do Supabase criada e o nosso projeto pronto, podemos agora começar a criar o nosso banco de dados.

Criando o banco de dados no Supabase

Voltando à página do Supabase, acessaremos a aba lateral esquerda e clicaremos no tópico "Table Editor" (Edição de tabela) para criar uma nova tabela. No centro da tela, clicaremos no botão "Create a new table" (Criar uma nova tabela).

Na aba exibida, daremos um nome à tabela no campo "Name". Nossa tabela terá os produtos da home, portanto, será chamada de "products".

products

Logo abaixo, há um campo de descrição opcional (que não vamos preencher) e uma caixa de seleção da política de segurança, o RLS, marcada como padrão. Manteremos essa configuração para que o RLS tenha acesso restrito às linhas da tabela, impedindo que qualquer pessoa possa modificá-las.

Adicionando colunas na tabela

Descendo a aba, veremos a seção "Columns", na qual precisamos adicionar algumas colunas a essa tabela e definir o tipo de dado que cada uma delas conterá. Para isso, vamos consultar o VS Code.

No explorador lateral, acessaremos o caminho de pastas "src > app > interfaces", e o arquivo product.ts, que contém a interface dos produtos. Nesta interface, estão todas as propriedades do produto: ID, título, preço, imagem, ingredientes, categoria e imagem de detalhes.

export interface Product {
    id: number;
    title: string;
    price: number;
    image: string;
    ingredients: string;
    category: string;
    imageDetails: string;
}

Essas propriedades serão as colunas que adicionaremos no Supabase.

Voltando ao Supabase, por padrão, já são criadas duas colunas na seção "Columns":

• id, que é uma chave primária — ou seja, um identificador único do produto;
• created_at, que registra o momento em que o registro foi criado.

Abaixo delas, clicaremos no botão "Add column" (Adicionar coluna) para inserir uma linha de campos vazios abaixo dos anteriores e incluir as demais colunas do produto, uma por vez.

Começaremos pelo "title", adicionando esse nome ao campo "Name". Na caixa de seleção do campo "Type", escolheremos o tipo "text", pois é uma string. No campo "Default Value", podemos adicionar um valor padrão, mas se não o tivermos, podemos deixar vazio, sem problemas.

Clicando novamente no botão "Add column", adicionaremos a próxima coluna, que será a de "price". O nome será "price" e o tipo será numérico ("numeric").

A próxima coluna será "image", que adicionaremos com o tipo "text". Depois, a coluna "ingredients", que também terá o tipo "text". Seguiremos com a coluna "category", igualmente "text". Por último, a coluna "imageDetails", que corresponde à imagem que aparecerá na tela de detalhes, também do tipo "text".

Após verificar que temos todos os campos na interface, desceremos a aba do Supabase e clicaremos no botão "Save", e nossa tabela será criada com todas essas colunas. Poderemos adicionar dados a essa tabela.

Importando dados para a tabela

A tabela foi criada, e houve um redirecionamento para a tela de edição. Todas as colunas estarão ali.

Agora, podemos inserir dados. Ao clicar no botão "Insert", no topo da parte central da tela, e selecionar "Insert row" (inserir linha) na lista suspensa, será exibida uma aba a partir da direita da tela, na qual adicionaremos dados à tabela de produtos.

Em seu interior, notaremos que há todos os campos que criamos para a tabela com campos de texto para adicionar os dados um por vez. Entretanto, para evitar adicionar cada propriedade de cada produto manualmente, podemos optar por uma forma mais rápida: importar o arquivo produtos.csv, que está disponível na atividade "Preparando o ambiente" e possui todos os produtos e dados que precisamos adicionar à tabela.

Para isso, clicaremos fora da aba atual para voltar à tela anterior, na qual clicaremos no botão "Import data via CSV", localizado na parte central. Na aba exibida, podemos subir o arquivo clicando em "browse" ou arrastá-lo para o campo "Drag and drop".

Conhecendo a estrutura do arquivo CSV

A extensão CSV significa comma-separated values (valores separados por vírgula). Podemos abrir esse arquivo em qualquer editor de texto para ver sua estrutura.

id,title,price,image,ingredients,category,imageDetails
1,Milkshake de morango com baunilha,18,assets/images/milkshake-morango.png,"Leite, sorvete de baunilha, sorvete de morango, pedaços de morango fresco.",Milkshakes,assets/images/2x/milkshake-morango2x.png
2,Milkshake de frutas verdes e hortelã,18,assets/images/milkshake-frutas-verdes.png,"Leite, sorvete de frutas verdes, folhas de hortelã fresca.",Milkshakes,assets/images/2x/milkshake-frutas-verdes2x.png
3,Milkshake de amora com mirtilos,18,assets/images/milkshake-amora.png,"Leite, sorvete de amora, sorvete de mirtilo, frutas frescas.",Milkshakes,assets/images/2x/milkshake-amora2x.png

# Texto omitido

Na linha 1, estão todas as propriedades que se tornaram colunas na nossa tabela. Nesse tipo de arquivo, cada linha é um registro, e os valores são separados por vírgula. É um formato de arquivo utilizado para armazenar dados, como planilhas ou tabelas em bancos de dados, e é muito utilizado por ser leve e compatível com diversos programas, como editores de texto comuns ou outros softwares de planilhas.

Voltando à interface do Supabase, após adicionar o arquivo CSV, perceberemos que uma tabela será criada com os valores do arquivo em cada coluna. Todos os produtos estarão ali, e não precisaremos cadastrá-los um a um.

Abaixo dessa tabela, clicaremos no botão "Import data", no canto direito. Com isso, ele adicionará essas 16 linhas — ou seja, 16 produtos na tabela. Após o processo ser finalizado, fecharemos a mensagem exibida no canto superior direito da tela clicando no "x" em seu interior e teremos nossa tabela com os produtos.

Próximos passos

O próximo passo é conectar nossa aplicação Angular a esse banco de dados para consumir esses registros. Veremos como fazer isso no próximo vídeo.

Sobre o curso Angular e Supabase: otimize a sua aplicação com SSR

O curso Angular e Supabase: otimize a sua aplicação com SSR possui 139 minutos de vídeos, em um total de 49 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Integração com o Supabase
• Adicionando Server Side Rendering
• Criando diretivas personalizadas
• Otimização com metatags
• Static Site Generation (SSG)