Guia Completo de Instalação

Digital Group Affiliate · Supabase + Hostinger · Siga cada passo com calma

1
Criar conta
Supabase
2
Criar banco
de dados
3
Configurar
supabase.js
4
Upload na
Hostinger
5
Testar
o sistema
Passo 1 — Criar conta gratuita no Supabase
O Supabase é o banco de dados gratuito que o sistema vai usar. Siga exatamente:
Acessar o site do Supabase
Abra em uma nova aba
1
Abra o site: supabase.com

Abra uma nova aba no navegador e acesse https://supabase.com

2
Clique em "Start your project"

Botão verde no centro da página inicial

3
Faça login com GitHub (mais fácil) ou com email

Se não tiver GitHub, clique em "Sign up" e crie uma conta com seu email

Criar um novo projeto
Após fazer login no Supabase
1
Clique no botão "New Project"

Aparece no painel inicial após o login

2
Preencha o nome do projeto

Digite: digital-group-affiliate (ou qualquer nome que quiser)

3
Crie uma senha para o banco de dados

Digite uma senha forte. Guarde ela, mas não precisaremos dela agora.

4
Escolha a região: "South America (São Paulo)"

Isso garante que o banco fique no Brasil, com menos latência

5
Clique em "Create new project"

Aguarde 1 a 2 minutos enquanto o projeto é criado. Você verá uma barra de progresso.

Plano gratuito — o que está incluso:

500 MB de banco de dados · 50.000 requisições por mês · SSL gratuito · Sem cartão de crédito

Passo 1 de 5
Passo 2 — Criar as tabelas no banco de dados
Vamos executar o script SQL que cria todas as tabelas do sistema automaticamente.
Abrir o SQL Editor no Supabase
Dentro do painel do seu projeto
1
No menu lateral esquerdo, clique em "SQL Editor"

Ícone que parece um banco de dados com um raio ⚡

2
Clique em "New Query" (ou "+ New query")

Um campo de texto em branco vai aparecer

3
Copie TODO o conteúdo do arquivo supabase_setup.sql

Abra o arquivo supabase_setup.sql no Bloco de Notas (ou qualquer editor de texto), selecione tudo com Ctrl+A e copie com Ctrl+C

4
Cole no SQL Editor com Ctrl+V

O texto do SQL vai aparecer no campo

5
Clique no botão "Run" (▶ verde) ou pressione Ctrl+Enter

Aguarde alguns segundos. Vai aparecer a mensagem:

Mensagem de sucesso esperada:

"Success. No rows returned" — isso é correto! O SQL criou as tabelas sem retornar dados.

Verificar se as tabelas foram criadas
Opcional — para confirmar que funcionou
1
No menu lateral, clique em "Table Editor"

Ícone que parece uma tabela/planilha

2
Você deve ver 3 tabelas criadas:

affiliates · ftds · bancas

3
Clique em "affiliates" para verificar os dados

Você deve ver 3 afiliados de exemplo já inseridos: João Silva, Maria Santos e Carlos Oliveira

Passo 2 de 5
Passo 3 — Configurar o arquivo supabase.js
Este é o passo mais importante! Você vai conectar o sistema ao seu banco de dados.
Pegar as credenciais do Supabase
URL do projeto e chave de acesso
1
No painel do Supabase, clique no ícone de engrenagem ⚙️ (Settings)

Fica no canto inferior esquerdo do menu lateral

2
Clique em "API" no submenu que aparece

Vai abrir uma página com todas as chaves do seu projeto

3
Copie a "Project URL"

Parece com isso: https://abcdefghij.supabase.co
Clique no ícone de copiar ao lado dela

4
Copie a chave "anon public"

É um texto longo que começa com eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
⚠️ Copie somente a "anon public", NÃO a "service_role"!

Tela do Supabase: Settings → API

Project URL fica no topo · anon public fica logo abaixo
Editar o arquivo js/supabase.js
No seu computador, antes do upload
1
Encontre o arquivo js/supabase.js nos arquivos do projeto

Está dentro da pasta js/ que você baixou

2
Clique com botão direito → "Abrir com" → Bloco de Notas

Ou use VS Code, Notepad++ — qualquer editor de texto serve

3
Encontre as 4 primeiras linhas e substitua pelos seus dados:

Veja o exemplo abaixo com as linhas que você precisa editar:

// ⚠️ SUBSTITUA AS 4 LINHAS ABAIXO COM SEUS DADOS REAIS: const SUPABASE_URL = 'https://SEU_PROJETO.supabase.co'; ← Cole aqui a Project URL const SUPABASE_ANON = 'eyJ...SUA_CHAVE_ANON_PUBLICA'; ← Cole aqui a anon public key const ADMIN_EMAIL = 'admin@seudominio.com'; ← Seu email de administrador const ADMIN_PASSWORD = 'SuaSenhaForte@2025'; ← Senha do admin (mín. 8 chars) // NÃO MEXA em nada abaixo desta linha!

Exemplo preenchido (use os SEUS dados, não estes):

SUPABASE_URL = 'https://xyzabc123def.supabase.co'
SUPABASE_ANON = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc...'
ADMIN_EMAIL = 'meuemail@gmail.com'
ADMIN_PASSWORD = 'MinhaS3nhaF0rte!'

4
Salve o arquivo com Ctrl+S

Certifique-se de salvar antes de fechar

Passo 3 de 5
Passo 4 — Fazer upload dos arquivos na Hostinger
Agora vamos enviar todos os arquivos para o seu domínio na Hostinger.
Baixar os arquivos do projeto
Antes de fazer upload, você precisa ter os arquivos no computador
1
Volte para o Genspark e clique na aba "Publish"

Botão no topo desta tela. Isso vai publicar o projeto e gerar um link.

2
No link publicado, baixe cada arquivo individualmente

Clique com botão direito nos arquivos → "Salvar como". Mantenha a estrutura de pastas!

3
Depois de baixar, edite o js/supabase.js no seu computador

Coloque suas credenciais do Supabase conforme o Passo 3

Estrutura de pastas que você vai ter:

📁 public_html/ ├── index.html ← Página de login ├── admin.html ← Painel admin ├── affiliate.html ← Painel afiliado ├── setup.html ← Este guia (pode deletar depois) ├── supabase_setup.sql ← Já executou, pode deletar depois ├── .htaccess ← Segurança (arquivo oculto!) ├── 📁 js/ │ └── supabase.js ← ⚠️ EDITAR COM SUAS CREDENCIAIS! └── 📁 images/ └── sportingbet-logo.png
Upload via File Manager da Hostinger
A forma mais fácil e direta
1
Acesse hPanel da Hostinger

Entre em hpanel.hostinger.com com seu login e senha

2
Clique em "Gerenciador de Arquivos" (File Manager)

Fica na seção "Hospedagem" ou "Arquivos" do hPanel

3
Navegue até a pasta public_html/

Esta é a pasta raiz do seu site. Tudo que você colocar aqui ficará acessível pelo domínio.

4
Crie as subpastas js/ e images/

Clique em "Nova Pasta" e crie as duas pastas dentro de public_html/

5
Faça upload dos arquivos nas pastas corretas:

• index.html, admin.html, affiliate.html, .htaccess → direto em public_html/
• supabase.js (já editado!) → dentro da pasta public_html/js/
• sportingbet-logo.png → dentro da pasta public_html/images/

O arquivo .htaccess pode estar oculto!

Arquivos que começam com "." ficam ocultos no Windows. Para ver: Painel de Controle → Opções de Pasta → marque "Mostrar arquivos ocultos". No File Manager da Hostinger, ele aparece normalmente.

Passo 4 de 5
Passo 5 — Testar o sistema
Vamos verificar se tudo está funcionando corretamente.
Testar o login de administrador
Primeiro teste a conta principal
1
Abra o seu domínio no navegador

Ex: https://seusite.com — deve aparecer a tela de login do Digital Group Affiliate

2
Faça login com as credenciais de admin

Use o email e senha que você definiu no js/supabase.js (ADMIN_EMAIL e ADMIN_PASSWORD)

3
Deve redirecionar para o Painel Admin

Você verá o Dashboard com as métricas, gráficos e menu lateral completo

Credenciais de teste (afiliados de exemplo)

Email joao@email.com
Senha afiliado123

Outro afiliado de exemplo

Email maria@email.com
Senha afiliado123
Problemas comuns e soluções
Caso algo não funcione
Login não funciona / "Erro de conexão"

O arquivo js/supabase.js não foi editado corretamente. Verifique se a URL e a chave estão corretas e sem espaços extras.

"Email ou senha incorretos" no admin

Use exatamente o email e senha que você colocou no ADMIN_EMAIL e ADMIN_PASSWORD do supabase.js

Afiliado de exemplo não loga

Você precisa ter executado o supabase_setup.sql no Supabase SQL Editor. Volte ao Passo 2.

Logo Sportingbet não aparece

Certifique-se de que o arquivo sportingbet-logo.png foi enviado para a pasta images/ na Hostinger

Página em branco ou erro 404

Os arquivos podem estar na pasta errada. Certifique-se que index.html está direto em public_html/

Após tudo funcionar — configurações finais
Recomendações de segurança
Delete os arquivos desnecessários da Hostinger

Pode deletar: setup.html, supabase_setup.sql, download.html, diagnostico.php, install.sql

Altere as senhas dos afiliados de exemplo

No painel admin, vá em "Solicitações" → edite João e Maria para definir senhas personalizadas

Ative o SSL/HTTPS na Hostinger

hPanel → SSL → Ativar SSL gratuito (Let's Encrypt). O sistema funciona melhor com HTTPS.

🎉

Sistema pronto para uso!

Banco de dados no Supabase ✅ · Login e cadastro funcionando ✅ · Painel admin completo ✅ · Painel afiliado com Sportingbet ✅ · Sem PHP · Sem MySQL · 100% gratuito

Ir para o Login Painel Admin
Passo 5 de 5 Acessar o Sistema