Do projeto à primeira aplicação.

Uma aplicação pequena de notas e arquivos, com login e dados separados por usuário. Começa vazia e usa apenas o conteúdo que você cadastrar. Use um projeto de desenvolvimento antes de adaptar seu aplicativo real.

1. Prepare o projeto

No Grátis para MVP, o acesso pelo GitHub cria seu workspace e primeiro projeto automaticamente quando houver vagas. Aguarde o provisionamento e abra esse projeto. O volume de 500 MB inclui metadados e WAL do PostgreSQL; seus arquivos têm cota separada de 1 GiB. Para ações que pedem senha do painel, defina-a por “Esqueci a senha” no login, usando o e-mail principal verificado do GitHub.

Crie um projeto no painel e aguarde banco e pooler disponíveis. Em Autenticação, ative o App Auth e aguarde a conclusão. Sua conta do painel administra o projeto; as contas deste tutorial são usuários do aplicativo.

2. Crie a estrutura

Baixe o SQL da tabela, revise e execute no Editor SQL. Ele cria viki_notes, proteção por linha e uma política de proprietário. Não cria usuários nem insere linhas. Se a tabela já existir, confira o schema; não a exclua para repetir o tutorial.

O campo user_id corresponde ao ID do usuário autenticado. A chave anon sozinha não libera linhas; o JWT determina de quem são os dados. Credenciais administrativas devem ficar no servidor.

3. Configure a chave e os arquivos

Em Autenticação → Chaves, crie uma chave anon com auth:write, data:read, data:write, storage:read e storage:write. Guarde o segredo exibido uma vez. Em Arquivos, selecione a política de prefixo do proprietário (owner_prefix). Essa mudança afeta o storage do projeto inteiro: use o projeto de desenvolvimento dedicado.

4. Abra ou baixe a aplicação

Para usar um domínio próprio ou executar localmente, abra Conectar aplicação → Domínios do seu aplicativo e adicione a origem exata. Para o comando abaixo, autorize http://127.0.0.1:8080. A aplicação hospedada no próprio site da VIKI já usa a origem da plataforma.

Abrir aplicação de referência →

Informe a base pública exibida em Conectar aplicação, o ID do projeto e a chave anon. Não informe senha PostgreSQL, chave service ou token administrativo.

Baixar código completo. Para executar no computador, extraia o arquivo e rode na pasta:

python3 -m http.server 8080 --bind 127.0.0.1

Abra http://127.0.0.1:8080. Não abra o HTML como file://: os módulos JavaScript precisam de HTTP. O exemplo não exige instalação de pacotes.

5. Faça login e use seus dados

Crie uma conta com um e-mail que você controla. Se o projeto exigir confirmação, copie o código recebido para Confirmar e-mail e entre. Adicione uma nota, marque como concluída, atualize a lista e exclua apenas uma nota descartável que você criou para validar o fluxo.

Escolha um arquivo de 1 byte até 32 MiB e envie. Ele recebe um caminho exclusivo dentro do ID do usuário. Prepare um download e confira o conteúdo. O link assinado permite leitura temporária: não o compartilhe. As credenciais de sessão ficam somente na memória da aba; recarregar exige entrar novamente. Use Renovar sessão antes de expirar ou entre outra vez.

6. Verifique com duas contas

1. Na primeira conta, crie uma nota e envie seu arquivo.
2. Abra outra aba, conecte o mesmo projeto e entre com um segundo e-mail controlado por você.
3. Confira que a segunda conta não vê as notas nem os arquivos da primeira. Crie seus próprios itens.
4. Volte à primeira conta e atualize: os itens da segunda não devem aparecer.
5. Saia e confirme que o aplicativo exige login para as ações pessoais.

Não use a chave service para “resolver” listas vazias. Confira tabela, usuário, escopos, políticas e o modo de acesso dos arquivos.

7. Adapte ao seu aplicativo

O código usa a biblioteca JavaScript distribuída pela VIKI. A mesma interface funciona em aplicações React e no cliente do Next.js; mantenha estado de sessão separado por usuário. Conexões PostgreSQL e ações privilegiadas pertencem ao servidor.

import { createClient } from "@nexus/js";
const viki = createClient({ url: PUBLIC_API_BASE, projectId: PROJECT_ID, anonKey: ANON_KEY });
const session = await viki.auth.signIn({ email, password });
await viki.from("viki_notes").insert({ title, user_id: session.user.id });
const { rows } = await viki.from("viki_notes").select("*");

Instalar SDK e CLI · Planejar uma migração · Pedir ajuda

Se uma operação falhar

Confira a mensagem, o status da plataforma e os Logs do projeto. Após uma escrita sem resposta, consulte os dados antes de repetir: a gravação pode ter terminado. O exemplo não repete gravações automaticamente. Renovação de sessão não substitui autorização por linha; confirme as políticas antes de publicar.