Cadastro de usuário

[jemluz]

Estrutura visual da home

Sobrescrevendo estilos de um componente já estilizado.

Usando Image do Next

Como essa é uma imagem principal, importante para a experiência do usuário, forçamos a qualidade para 100% e a prioridade da imagem.

• quality = por padrão o next Image define a qualidade para 80%.
• priority = por padrão o next Image carrega as imagens por ultimo.
• height = no next o height é referente a altura máxima da imagem.

import previewImage from '../../assets/app-preview.png';

<Image
  src={previewImage}
  height={400}
  quality={100}
  priority
  alt='Calendário simbolizando aplicação em funcionamento'
/>

[jemluz]

Entendendo API Routes

Relembrando: API Routes é uma forma de termos rotas backend dentro do na nossa aplicação dentro do frontend.

O a principal motivação do next ao fornecer essa feature era centralizar no front operações que eram auxiliares e não necessariamente diz respeito ao backend. Como uma autenticação social (usando integração com o login do google) por exemplo. Inclusive esse tipo de autenticação costuma ser bem diferente entre as partes mobile e web de uma aplicação. Então se o seu sistema tem essa diversidade de clients, faz menos sentido ainda centralizar uma autenticação social no backend.

Teoricamente era pra ser só isso, mas na prática, as API Routes se tornaram algo maior.

Então quando faz sentido usar esse backend no frontend?

1. Quando as pessoas que vão trabalhar no código frontend e backend são as mesmas (são full stack)
2. Quando você quer criar um acoplamento do seu código backend a um framework como o next?
3. Quando o seu projeto tem início, meio e fim muito claros (um escopo bem fechado)

Limitações do modelo serveless

É importante ter claro que esse tipo de aplicação backend só funciona na medida em que houver requisições de um client.

Então se sua aplicação precisa que o backend esteja sempre rodando, pode esquecer, como por exemplo:

• web sockets
• long running proccess (filas)

Se sua aplicação precisa realizar escrita de arquivos locais, também não vai rolar.

Isso pq o backend nesse caso opera como se fossem clones, onde cada client realizando uma requisição tera sua sua "versão isolada" do backend. De forma que os dados não serão compartilhados entre si.

[jemluz]

Configurando o Prisma no next

O prisma é um ORM (Object-Relational Mapping, ou Mapeamento Objeto-Relacional)

Em especifico o prisma é muito bom em projetos typescript, pois ele tem um ótimo autocomplete para dedução das tabelas.

ORM

Um ORM é uma técnica de programação que permite que você interaja com um banco de dados relacional (como MySQL, PostgreSQL, SQLite, etc.) utilizando código orientado a objetos.

Em vez de escrever consultas SQL diretamente, você pode manipular os dados do banco de dados usando objetos e métodos na linguagem de programação que está utilizando, como JavaScript, Python, Ruby, entre outras.

O ORM atua como uma ponte entre os objetos na sua aplicação e as tabelas do banco de dados. Ele mapeia classes em sua linguagem de programação para tabelas no banco de dados, e os atributos dessas classes para colunas nas tabelas. A partir desse mapeamento, o ORM gera automaticamente as consultas SQL necessárias para interagir com o banco de dados.

Vantagens de Usar um ORM

Abstração do SQL: Você não precisa escrever SQL diretamente, o que pode simplificar o desenvolvimento. Portabilidade: A mesma aplicação pode ser adaptada para diferentes bancos de dados com pouca ou nenhuma modificação no código. Segurança: ORM pode ajudar a prevenir vulnerabilidades como SQL Injection, já que ele manipula a inserção de parâmetros de forma segura. Produtividade: Com menos SQL para escrever, você pode se concentrar mais na lógica da aplicação.

[jemluz]

Configurando o Prisma no next (parte 2)

Comando de instalação da interface de linha de comando do Prisma: npm i prisma -D

Comando de instalação da dependência que iremos utilizar na nossa aplicação: npm i @prisma/client

Comando para iniciar o Prisma: npx prisma init --datasource-provider SQLite

Comando pra rodar a migration: npx prisma migrate dev

Comando pra rodar o Prisma Studio: npx prisma studio