# Conectar a loja à nuvem

O catálogo e o chat usam Supabase. Visitantes podem criar uma conversa e acessar somente as mensagens vinculadas ao token privado salvo no próprio navegador. Apenas contas adicionadas à lista de administradores podem consultar conversas e responder pelo painel.

## 1. Criar o projeto

1. Crie uma conta em [supabase.com](https://supabase.com/) e crie um projeto.
2. No painel do projeto, abra **Project Settings → API** (ou **Connect**) e copie o **Project URL** e a chave pública **anon / publishable**.
3. Abra `supabase-config.js` e substitua os dois valores de exemplo. A chave `anon`/`publishable` pode estar no site; **nunca** use uma `service_role` ou secret key no navegador.
4. Em **Authentication → URL Configuration**, configure `https://up-notebook.pages.dev` como **Site URL** e permita o endereço de redirecionamento `https://up-notebook.pages.dev/admin?recovery=1`. Esse retorno é usado pelo link de recuperação de senha do painel. Não use `localhost` como Site URL de produção.

## 2. Criar a tabela segura

1. No Supabase, abra **SQL Editor → New query**.
2. Copie e execute todo o conteúdo de `CONFIGURAR-SUPABASE.sql`.
3. Em **Authentication → Settings / Providers → Email**, desative **Allow new users to sign up**. Em **Authentication → Users**, crie o usuário de acesso da loja com seu e-mail e uma senha forte.
4. Copie o **User UID** desse usuário.
5. No SQL Editor, execute esta instrução substituindo o texto pelo UID real:

   ```sql
   insert into public.store_admins (user_id)
   values ('COLE-AQUI-O-USER-UID');
   ```

As políticas RLS deixam o catálogo visível para leitura pública, mas restringem alterações às contas cujo UID consta em `store_admins`. Não compartilhe a senha do painel.

Se esquecer a senha, use **Esqueci minha senha** na tela de login do painel e siga o link enviado por e-mail. Depois do login, o botão **Alterar senha** permite escolher uma nova senha a qualquer momento.

O mesmo arquivo cria as tabelas e funções seguras do chat. Se já executou uma versão anterior do SQL, execute novamente o arquivo atualizado para instalar as tabelas e funções do chat e adicionar a coluna opcional de vídeo.

## 3. Publicar na Railway

- O projeto já inclui `package.json` e `server.js`. A Railway detecta o Node.js e inicia o site com `npm start`; não é necessário cadastrar variáveis de ambiente para servir as páginas.
- Envie o projeto para um repositório GitHub, sem incluir senhas ou chaves secretas. A chave `anon`/`publishable` do Supabase em `supabase-config.js` é pública por natureza; nunca coloque uma chave `service_role` ou secret nesse arquivo.
- Na Railway, escolha **New Project → Deploy from GitHub Repo** e selecione o repositório. Aguarde o deploy terminar e, nas configurações do serviço, gere um domínio público em **Networking → Public Networking → Generate Domain**.
- A loja ficará disponível no domínio gerado. O painel fica no mesmo domínio, em `/admin.html`.
- O servidor usa automaticamente a variável `PORT` fornecida pela Railway, atende em `0.0.0.0` e serve apenas arquivos web necessários; arquivos como `CONFIGURAR-SUPABASE.sql`, `package.json` e `server.js` não são disponibilizados como páginas.
- O catálogo e as conversas continuam no Supabase; a Railway hospeda as páginas e o servidor estático. Para dados reais, confirme que a URL e a chave pública configuradas correspondem ao projeto Supabase ativo e que o SQL acima foi executado.

## 4. Publicar na Cloudflare Pages

- O projeto inclui um build estático que publica apenas os arquivos necessários da loja e do painel. O SQL de configuração e o servidor Node não são enviados para o site público.
- No Cloudflare, abra **Workers & Pages → Create application → Pages → Connect to Git** e autorize o acesso ao repositório privado `clicknotebooksbr-tech/up-notebook`.
- Selecione a branch `main`. Configure **Build command** como `npm run build:pages` e **Build output directory** como `dist`; deixe o diretório raiz como `/`.
- Inicie o deploy. A Cloudflare gera um endereço HTTPS `*.pages.dev`; o painel fica no mesmo domínio em `/admin.html`.
- O repositório GitHub continua privado. Os arquivos publicados no domínio serão públicos, incluindo a chave `anon`/`publishable` do Supabase, que é uma chave pública e deve permanecer protegida pelas políticas RLS.
- O catálogo e as conversas continuam no Supabase; a Cloudflare Pages hospeda os arquivos estáticos. O `server.js` da Railway não é usado nesse provedor.

## 5. Usar e testar a loja

- Abra `admin.html`, entre com o e-mail e a senha criados e cadastre os produtos. As alterações são gravadas no Supabase e transmitidas ao catálogo dos clientes.
- No painel autenticado, use **Conversas com clientes** para ler e responder. A lista é atualizada automaticamente enquanto o painel estiver aberto.
- O cliente informa o nome na primeira mensagem. A conversa fica salva no mesmo navegador; se ele limpar os dados do navegador ou trocar de aparelho, não será possível recuperar essa conversa automaticamente.
- Mensagens ficam no Supabase. O cliente recebe novas respostas enquanto a página da loja estiver aberta ou quando abrir o chat novamente; não há notificações fora do site.
- `file://` serve somente para teste local. Para testar as chamadas online, abra o projeto através de um servidor local ou da hospedagem.
- Fotos precisam ser links diretos HTTPS acessíveis sem login. Não salve fotos de clientes sem ter autorização.

Sem credenciais do Supabase, a vitrine mostra 10 produtos de demonstração definidos em `catalog-data.js`, acompanhados de um aviso visível. Os nomes, especificações, preços e imagens são ilustrativos: revise-os antes de publicar. Quando o Supabase estiver configurado, a loja passa a ler exclusivamente a tabela `products`; os exemplos locais não são enviados automaticamente. Cadastre ou atualize os produtos reais pelo painel em `admin.html`.

Cada produto pode ter um vídeo opcional. Para tabelas já existentes, execute novamente `CONFIGURAR-SUPABASE.sql` para adicionar a coluna `video`. No painel, informe um link HTTPS do YouTube ou um arquivo MP4, WebM ou OGG. Produtos sem vídeo mostram um aviso na janela de detalhes.