스크립트
00:00:00O PocketBase é uma alternativa de código aberto ao Supabase ou Firebase e, possivelmente, o
00:00:04backend mais simples que você poderia rodar; um único arquivo oferecendo banco de dados em tempo real, autenticação e
00:00:11armazenamento de arquivos. Isso contrasta completamente com a complexidade insana que o desenvolvimento web moderno se tornou.
00:00:16Então, no vídeo de hoje, vamos testar o PocketBase e ver se sua arquitetura simples
00:00:21realmente se sustenta ao construir algo além de um aplicativo simples.
00:00:29O PocketBase é um binário único em Go com SQLite embutido, mas programar em Go
00:00:35é, na verdade, opcional, porque o backend pode ser expandido com JavaScript e TypeScript. Você também terá
00:00:40acesso a uma interface administrativa básica onde pode configurar todas as suas coleções, exatamente como funciona no Supabase.
00:00:46Agora, entrando na arquitetura e em como você realmente o usaria uma vez que o PocketBase esteja ativo, você pode
00:00:51conectar-se a ele pelo frontend via SDK de JavaScript. Isso, novamente, é muito semelhante a como o Firebase
00:00:57e o Supabase são projetados, pois você pode acessar seu banco de dados diretamente pelo frontend e não precisa
00:01:02se preocupar; o PocketBase possui regras de API e autenticação para manter tudo isso seguro. Mas vamos direto para
00:01:08uma demonstração de uma aplicação real com autenticação, banco de dados e armazenamento de arquivos. E se você estiver gostando deste
00:01:13vídeo, inscreva-se no Better Stack, pois cobrimos uma enorme quantidade de conteúdo para desenvolvedores neste canal.
00:01:18Então, temos nossa aplicação aqui; temos o PocketBase no backend e um frontend web
00:01:22escrito em React. O arquivo mais importante dentro do frontend web é este arquivo pb.ts aqui, porque
00:01:30importamos do PocketBase aqui dentro, então temos a classe PocketBase, criamos uma nova instância
00:01:36dela, então podemos nos conectar ao nosso serviço de backend e usar o “pb” durante o restante da
00:01:42aplicação. A aplicação em si é apenas um rastreador de bugs simples; podemos arrastar itens entre colunas, podemos
00:01:48criar novos problemas. Se olharmos dentro do hook que controla o usuário logado, você pode ver que
00:01:53inicialmente definimos o estado com “pb.authStore.record”, o que captura o usuário autenticado atualmente
00:01:59do PocketBase, e então configuramos um ouvinte, onde dizemos que, se o “authStore” mudar com o
00:02:05evento “onChange”, definiremos o novo usuário no estado. É realmente tão simples quanto isso.
00:02:11Podemos acessar o estado, podemos nos inscrever no estado, e o mesmo vale para nossos problemas também.
00:02:16Então, dentro do nosso hook “useIssues”, inicializamos algum estado, mas neste caso, deixaremos vazio.
00:02:21Depois temos um “useEffect” e dizemos que vamos buscar todos os problemas, obter a lista completa e então
00:02:27definiremos os problemas com essa lista, para pré-popular os dados inicialmente. E então, podemos
00:02:32também nos inscrever nos problemas; se você arrastar problemas entre colunas, criar ou excluir um problema,
00:02:38podemos dizer “pb.collection(“issues”).subscribe” e, sempre que um novo registro chegar, podemos
00:02:44adicioná-lo ao nosso estado. Isso significa que, ao interagir com o banco de dados do PocketBase diretamente,
00:02:49como ao arrastar um cartão aqui, o estado será atualizado automaticamente. No caso de criar um
00:02:54novo problema, também podemos anexar uma captura de tela; vamos tirar uma captura de tela da aplicação
00:02:59e clicar em “file issue”, então o novo problema aparece aqui. No código do frontend, isso é
00:03:05manipulado por uma função de envio; anexamos todos os dados do formulário e, finalmente, chamamos “pb.
00:03:11collection(“issues”).create” passando os dados. O que temos no backend são regras de API de coleção
00:03:17para evitar o uso indevido dessas APIs, então o PocketBase oferece essa interface administrativa por padrão.
00:03:24E aqui você pode ver que temos a coleção de usuários e a coleção de problemas,
00:03:27onde vivem todos os nossos problemas. Se olharmos dentro da coleção de usuários e pressionarmos “Settings” aqui em cima,
00:03:32temos a aba “API Rules”, e estas são todas as regras que restringem o acesso a esta coleção
00:03:37em particular. Dizemos que, no caso de usuários, o “request.auth.id” não pode ser uma string vazia; então, ao
00:03:43atualizar ou excluir usuários, o ID deve corresponder ao ID do usuário autenticado. Podemos acessar isso
00:03:50com esta string especial aqui, o caractere arroba e “request.auth.id”. Se você já usou o Supabase
00:03:56no passado, achará esse padrão super familiar. Agora, o que acontece se o backend não
00:04:02fizer tudo o que você precisa? Bem, felizmente, você pode estendê-lo via hooks com, claro, Go, mas também JavaScript
00:04:08e TypeScript. Podemos nos conectar a eventos como “onBootstrap” quando o app inicia ou “onRecord
00:04:15Create” quando um registro de banco de dados é criado. Existem 82 hooks únicos no momento da filmagem, então praticamente
00:04:21tudo o que você precisa seria coberto. Agora, vamos estender nosso serviço PocketBase para ver como tudo funciona.
00:04:27Se olharmos dentro da pasta “pb”, veremos nosso binário do PocketBase, e este arquivo é literalmente
00:04:32tudo o que você precisa para rodar a versão padrão do PocketBase. No meu caso, escrevi todos os hooks
00:04:38em TypeScript, então tenho uma configuração para compilar esses hooks na pasta “pb_hooks” como JavaScript, porque
00:04:44o PocketBase só suporta JavaScript nativamente; se você estiver usando TypeScript, precisa compilá-lo.
00:04:50se olharmos dentro do arquivo de hook principal podemos ver que temos um hook aqui dizendo ao criar registro
00:04:55e isso foca especificamente em quando criamos problemas; e o que estamos fazendo aqui é dizer que
00:05:00sempre que um registro for criado, enviaremos um e-mail para o usuário, e podemos fazer isso chamando
00:05:05“e.app.newMailClient().send()” e passando o objeto de mensagem que construímos aqui.
00:05:10Você pode, é claro, se conectar a uma tonelada de recursos diferentes dentro do PocketBase, então qualquer funcionalidade personalizada
00:05:15que você precise sempre será suportada com os mais de 82 hooks já disponíveis no Pocket
00:05:21Base. Como ele roda SQLite, precisamos de armazenamento persistente, então plataformas como Heroku, Render
00:05:28ou Railway seriam uma escolha ruim devido aos seus sistemas de arquivos efêmeros; basicamente, você perderia seus dados
00:05:33toda vez que reimplantasse seu app. Para evitar isso, você pode anexar um sistema de arquivos permanente, mas a melhor e
00:05:39mais barata opção seria hospedar em uma VPS, e esses dados vivem dentro da pasta “pb_data”. Então, se
00:05:45olharmos aqui dentro, veremos que temos uma pasta de armazenamento, e ela conteria todas as
00:05:50imagens que carregamos para nossos problemas; elas simplesmente são armazenadas na pasta de armazenamento, então,
00:05:55dentro deste ID aleatório aqui, por exemplo, você pode ver a imagem que carreguei no problema
00:05:59mais cedo. Os arquivos do banco de dados também seriam persistidos dentro desta pasta; “data.db” aqui
00:06:05conteria todo o nosso código SQLite. Então, se eu deletasse este arquivo, perderia todos os dados na
00:06:11aplicação, então, obviamente, você precisa de uma boa estratégia de backup em vez de apenas deixar como um arquivo
00:06:16único no disco. Comparado a ferramentas como o Supabase, que pode começar em 25 dólares no plano básico, o PocketBase é
00:06:22basicamente gratuito; você só precisa pagar pelos custos da VPS, que podem ser tão baixos quanto quatro dólares e permitem
00:06:28que você execute quantos projetos quiser, mas, é claro, você vai querer escalar isso com o uso.
00:06:33O PocketBase também vem com tudo o que você precisa para apps de produção, como migrações, agendamento de tarefas e
00:06:38logs. Você também pode servir arquivos estáticos diretamente com o PocketBase, colocando-os na pasta pg_public.
00:06:44e isso seria útil para algo como um frontend React. Alternativamente, você também pode hospedar
00:06:49rotas dinâmicas com renderização de modelos, o que seria perfeito para coisas como modelos de e-mail. Então, se você
00:06:54quer uma configuração de caixa única, é assim que se faz. Agora, a grande pergunta: isso está pronto para produção?
00:06:59Bem, ele inclui todos os recursos de que você precisaria para construir um app SaaS moderno, particularmente os
00:07:04recursos de nível de produção como migrações e logs. Também é totalmente extensível, então você não está
00:07:09preso aos padrões. Mas o grande “pulo do gato” é que isso é pré-v1, então eles explicitamente dizem para usar
00:07:15apenas se você estiver confortável em ler changelogs e executar migrações manuais de vez em quando. Mas se esse for
00:07:20o seu caso, vá em frente; você pode construir o primeiro unicórnio de arquivo único. Você pode aprender mais sobre o Pocket
00:07:25Base conferindo os links relevantes na descrição. E se você ama alternativas de código aberto,
00:07:29então confira nosso vídeo sobre OpenCode, a alternativa de código aberto ao Claude Code. Eu sou Warren, da
00:07:35Better Stack. Obrigado por assistir e, claro, vejo você na próxima.