1.

Curso Supabase Backend

Poderoso Backend Relacional SQL
Curso Supabase
1. O poder do Supabase

1.1 Principais Funcionalidades

1.2 Fundamentos SQL + Prática

2. APIs no Supabase

3. Planejamento Backend Supabase

3.1 Modelagem Banco de Dados

3.2 Setup Completo

4. Integração Supabase com Frontend

Módulos da Trilha Supabase Siga os módulos na
ordem correta :)

1 2 3 4

Criação de Aplicativo
Fundamentos Planejamento de com Frontend
APIs no Módulos
Essenciais + SQL Projeto Backend
Supabase avançados..
na Prática no Supabase FlutterFlow, Bubble,
Weweb e Outros
O que vamos aprender
Backend Supabase

Subapase como Backend As a Service

Entenda o poder dessa ferramenta BaaS

Supabase na prática
Explore a plataforma por dentro

Principais Funcionalidades
Tabelas, Queries, Views e muito mais

SQL no Supabase
Fundamentos para Queries poderosas
Projeto Plataforma EAD Cursos Online

Obs:
Mesmo que você não queira
construir um projeto EAD, faça
tudo junto comigo.

Esse conhecimento vai ter dar

base para dar o start em
qualquer outro tipo de projeto
utilizando o Supabase
Depois dessa trilha você
poderá construir apps:

Aplicativos conectados ao Backend Supabase

Estruturação completa do banco de dados e integração com as principais ferramentas nocode

Escalar seu projeto com um Backend Relacional SQL

Crie projetos escaláveis com a facilidade do uso de um Banco Relacional
Requisitos para o Curso de Supabase
É interessante que
você faça o curso de
Modelagem de Dados
SQL previamente.
1.1 Conceitos Importantes
Relembrando: Backend, CRUD, APIs e Bancos Relacionais
Relembrando - Bancos de Dados Relacionais

Bancos de Dados relacionais são bancos que armazenam e manipulam dados relacionados entre si.

Tabela Vendas Tabela Cursos

id_venda id_curso data_compra valor_compra id_curso curso carga_horaria
C001 P002 02/05/2023 R$ 297,00 P001 FlutterFlow 20h
C002 P002 29/03/2023 R$ 397,00 P002 Bubble 25h
C003 P001 16/06/2023 R$ 297,00 P003 AppGyver 12h

Primary Foreign Primary

Key Key Key
Relembrando - Bancos de Dados Relacionais

Diagrama de Entidade Relacionamento (DER)

SGBD do mercado (modelo SQL)

Backend as a Service (BaaS)

PostgreSQL
O que é um Backend
Frontend Backend
Banco de Dados
Gestão dos dados do App.

Autenticação
Login, Cadastro e controle seguro dos
usuários do App.

Armazenamento
Storage para upload e gestão das mídias do
aplicativo.

Ações de Servidor
Ações que serão executadas diretamente no
servidor. Pode-se, por exemplo, agendar
ações sem depender de ações do usuário.

Webhook
Um gatilho que dispara uma determinada
ação entre as aplicações.
Exemplo: Pagamentos online.
Ferramentas NoCode - Frontend/Backend
Frontend Backend

SGBD Tradicionais

Backends Low Code Backends NoCode

Relembrando - Operações CRUD

Interações com o banco de dados

CREATE - Criar novos dados

READ - Visualizar dados

UPDATE - Atualizar dados

DELETE - Deletar dados

Relembrando - Metodologia Modelagem de Dados

1 2 3 4

ANÁLISE DE MODELO MODELO MODELO

REQUISITOS CONCEITUAL LÓGICO FÍSICO

Levantamento e Entendimento geral Detalhamento das Implementação do

análise de requisitos de dos dados do negócio entidades, atributos e banco de dados em
negócio do software (visão alto nível) relacionamentos. SGBD por meio de SQL

CREATE TABLE alunos(

aluno_id integer NOT NULL,
nome_aluno varchar(200) NOT NULL,
email_aluno varchar(50) NOT NULL,
Primary Key (aluno_id)
);
1.2 O poder do Supabase
O Melhor Backend Relacional
18
O poder do Supabase
Backend SQL Poderoso

Banco de Dados Flexível

Banco de dados PostgreSQL

Construtor facilitado de APIs

Faça APIs de forma ágil com SQL

Alta Performance
Backend rápido e escalável.

Crie projetos escaláveis

Backend no-code pronto para escala do negócio

Segurança
De acordo com principais Leis de Dados e Compliance.
Supabase - Funcionalidades

Banco de Dados SQL Autenticação

Banco Relacional PostgreSQL Serviço completo de Auth

Storage Edge Functions

Serviço de Armazenamento Funções completas

Banco Realtime APIs

Dados em tempo real Comunicação via API

20
22
Banco de Dados Relacional

SQL NoSQL
Banco de dados relacional Banco de dados não relacional

Schema definidos (Rígido); Schema Dinâmico (Flexível);

Focado em relações; Permite relações, mas não é o foco;
Bom para queries complexas e Joins; Ruim para queries complexas e Joins;

23
Valores
Supabase
Comparativo

Features Banco de Dados Integrado

Autenticação Usuários

Funções e Webhook

Storage (Armazenamento)

Banco Real Time

APIs geradas automaticamente

Open Source

Machine Learning
Diferencial Supabase

- Maior facilidade por ter estrutura de Banco Relacional / SQL;

- Bom custo Benefício e Precificação mais previsível;

- De acordo com SOC 2 e HIPAA;

- Gestão por APIs facilitada;

- Escalabilidade com PostgreSQL;

- Open Source;

- (Cons) Exige maior estudos por ser Backend Low Code.

27
Bora praticar?
1.3 Fundamentos SQL
SQL para Supabase
A importância de saber SQL no Supabase
Tipos de Dados no SQL
Tipos Numéricos Dados do Tipo Data

Tipos de Texto Outros

Criação de Tabelas

Criar Tabelas com FK Deletar Tabelas

Adicionar/Mudar Tipo dos Campos

Atualização de Tabelas
Inserir novo Campo Deletar Campo

Atualizar Campo
Funções
no SQL
Funções
no SQL

fonte exemplo:: Programiz

Order By
Group by

fonte exemplo:: Programiz

Busca de Texto com "Like"
SELECT column1, column2, ...
FROM table_name
WHERE columnN LIKE pattern;
1.4 SQL Intermediário
SQL intermediário para Supabase
Join no SQL - União de Tabelas

fonte exemplo:: Programiz

Join no SQL - União de Tabelas
Exemplo - Join
Case When
Operações com Datas
Operações com Datas
 O que aprendemos?

O Que é Supabase Funcionalidades

Backend No-Code para Exploração das capacidades e
desenvolvimento de aplicativos. aplicações de Supabase

Primeiros passos SQL do zero

Criamos nossas primeiras tabelas Vimos toda teoria sobre as
e APIs no Supabase. consultas mais importantes

SQL na Prática Fundamentos Gerais

Aplicamos SQL direto no Supabase Parabéns! Você concluiu o
com queries principais fundamentos.
Extra: Use IA como seu super funcionário
Aprenda como usar IA da forma correta para te ajudar a criar seus projetos no Supabase
2. APIs no Supabase
Utilizando APIs no Supabase com Postman
O que vamos aprender

APIs Supabase

Fundamentos APIs
Entenda conceitos importantes sobre APIs

APIs no Supabase
Criando chamadas APIs do zero

Postman
Ferramenta para Gestão dos APIs
2.1 Conceitos Importantes
Relembrando: APIs, Json Path e outros conceitos
Relembrando - APIs

Cliente Garçom Cozinha

Frontend API
Server + Database
App/Website Business Logic
Relembrando - APIs
Modelo Json
Forma padrão de comunicação
entre sistemas

• Formato leve e rápido no uso de

dados

• Leitura simplificada para

máquinas e humanos

• Possível criar relações complexas

2.3 O poder das APIs do Supa
Como as APIs do Supabase te darão super poderes
O poder da API do Supabase
Frontend Backend

Comunicação via API

Qualquer outro
frontend!
O poder da API do Supabase
Backend
Processo de Autenticação
Frontend Backend

Chamada API com

dados de Login

Auth Token

Qualquer outro
frontend!
2.2 Conteúdos Importantes
APIs - Json e Ferramenta Postman
Postman - Gestão APIs
Bora testar o Postman
na prática!

Postman

Testes de APIs
Interface amigável para testes

Documentação APIs
Detalhe sua API da forma correta

Testes automatizados
Crie APIs de testes automatizados
 O que aprendemos?

Poder das APIs Json Path

O uso de APIs em seu backend Como tratar dados json em seu
integrado software

Postman APis CRUD

Como gerenciar e testar suas API As principais APIs para gerenciar
com a Ferramenta Postman seu banco de dados.

APIs Auth
APIs para realizar autenticação de
usuários (Cadastro e Login)
3. Planejamento Backend Supabase
Supabase na prática - Planejamento do Projeto EAD
Projeto- Plataforma EAD Cursos Online
Objetivo do Módulo: Planejamento Backend
Backend
App EAD
Objetivo do Módulo

O que faremos

Conceito Geral do App EAD

Funções, telas e usuários.

Modelagem Completa do Banco de Dados

Detalhamento e relações das tabelas

Planejamento Projeto Backend

Backend pronto para conectar com qualquer tipo de Front

Setup Tabelas + Views

Criação das tabelas e views dentro do Supabase

APIs Variadas
Estrutura APIs para conexão ao frontend
3.1 Planejamento do App
Planejamento completo do Projeto
Metodologia No-Code Start-Up

O PROBLEMA A SOLUÇÃO DESIGN DAS TELAS BANCO DE DADOS DESENVOLVIMENTO

Entender o problema Conceitualizar a Elaborar telas por meio Modelar o banco de Construir o App
existente no mercado e tecnologia que irá de um wireframe e dados do aplicativo e conectando o frontend
persona envolvida solucionar o problema. fluxo do usuário. relação entre tabelas. com backend
Requisitos - Modelagem de Dados
É interessante que
você faça o curso de
Modelagem de Dados
SQL previamente.
Conceito Geral do App
Mostrar direto no Miro
3.2 Modelagem do Banco de Dados
Modelagem do Banco de Dados Relacional
Metodologia Modelagem de Dados

1 2 3 4

ANÁLISE DE MODELO MODELO MODELO

REQUISITOS CONCEITUAL LÓGICO FÍSICO

Levantamento e Entendimento geral Detalhamento das Implementação do

análise de requisitos de dos dados do negócio entidades, atributos e banco de dados em
negócio do software (visão alto nível) relacionamentos. SGBD por meio de SQL

CREATE TABLE alunos(

aluno_id integer NOT NULL,
nome_aluno varchar(200) NOT NULL,
email_aluno varchar(50) NOT NULL,
Primary Key (aluno_id)
);
 Mostrar direto no Miro

3. Modelo Conceitual (ir fazendo junto)

4. Modelo Lógico
Mostrar direto no Miro
3.3 Criação das Views
Dados dinâmicos das tabelas
Objetivo das Views

Tabela Curso Completo

- Dados Professor
- Dados do Curso

Tabela Matrículas
- Dados Alunos
- Dados do Curso
Prototipagem - Área Meus Cursos

Boas Vindas

Contagem Meus Contagem Cursos

Cursos Finalizados

Cursos Matriculados

Menu Lista dos Cursos Popup com dados

Matriculados do Aluno completo do
Curso

Cursos Matriculados

Lista dos Cursos

disponíveis
View 1 - Dados do Curso Completo
View 2 - Dados Matrícula Completo
Bora praticar?
 O que aprendemos?

Planejar Backend Como Fazer Views

Planejamento completo do Como estruturar as Views no
Backend para conectar o Front Supabase.

Planejar APIs Estrutura Pronta

Como planejar todas APIs que Projeto pronto para conectarmos
poderão conectar com o front com o front agora.
4. Integração Supabase + FlutterFlow
Criando um App do Zero - App EAD 2.0
O que vamos aprender
Projeto EAD 2.0 | FlutterFlow e Supabase

Projeto Avançado com Supabase

Plataforma EAD a partir do Backend já planejado

Integração Completa FlutterFlow

Funcionalidades avançadas e usuários com diferentes papéis

Painel Administrativo
Professor poderá criar e gerenciar suas aulas

Outras Operações Importantes

Upload de Imagens e Função de Buscar no Supase
Metodologia No-Code Start-Up

O PROBLEMA A SOLUÇÃO DESIGN DAS TELAS BANCO DE DADOS DESENVOLVIMENTO

Entender o problema Conceitualizar a Elaborar telas por meio Modelar o banco de Construir o App
existente no mercado e tecnologia que irá de um wireframe e dados do aplicativo e conectando o frontend
persona envolvida solucionar o problema. fluxo do usuário. relação entre tabelas. com backend
4.1 Planejamento do App
Planejamento do projeto que construiremos
Conceito Geral do App
Mostrar direto no Miro
Prototipagem - Área Meus Cursos

Boas Vindas

Cursos Matriculados

Menu

Cursos Matriculados
Meus Cursos
Área Professor
Popups de conteúdo
Prototipagem - Celular
Título da página Logo da página
Título

Dashboard
Leads
Time
Config. Empresa

Conteúdo Conteúdo

Config. Perfil
Tela Fina Celular
Logo da página
Título

Dashboard
Leads
Time
Config. Empresa

Config. Perfil
4.2 Banco de Dados
Backend já pronto
Modelagem de Dados
Projeto FlutterFlow para Clonar

https://app.flutterflow.io/project/plataforma-e-a-d-cursos-d-e-s-i-g-n-qtwa67
Bora praticar?
O que aprendemos?

Integração FlutterFlow App do Zero

Conexão do Supabase com o Aplicativo do zero utilizando as
FlutterFlow do zero funções do Supabase

CRUD - Dados Funções Administrativas

Operações CRUD do FlutterFlow e Usuários tipo professor podendo
Supabase adicionar novas aulas

Mídias Filtros de busca

Upload de mídias e foto do usuário Filtro de dados no App do
dentro do Supabase. FlutterFlow com chamada API.