스크립트
00:00:00PocketBase es una alternativa de código abierto a Supabase o Firebase y posiblemente el backend más sencillo
00:00:04que puedas ejecutar; un solo archivo que te proporciona base de datos en tiempo real, autenticación y
00:00:11almacenamiento de archivos. Esto contrasta totalmente con lo increíblemente complejo que se ha vuelto el desarrollo web moderno,
00:00:16así que en el video de hoy probaremos PocketBase y veremos si su arquitectura simple
00:00:21realmente funciona al crear algo más allá de una aplicación sencilla.
00:00:29PocketBase es un binario de Go con SQLite integrado, pero programar en Go es en realidad
00:00:35opcional, porque el backend se puede ampliar con JavaScript y TypeScript, y también obtendrás
00:00:40acceso a una interfaz de administración básica donde puedes configurar todas tus colecciones, exactamente como funciona Supabase.
00:00:46Ahora, entrando en la arquitectura y en cómo se usaría realmente una vez que PocketBase esté activo, puedes
00:00:51conectarte desde el frontend mediante el SDK de JavaScript. Esto, de nuevo, es muy similar a cómo Firebase
00:00:57y Supabase están diseñados, ya que puedes acceder a tu base de datos directamente desde el frontend y no
00:01:02preocuparte, porque PocketBase tiene reglas de API y autenticación para mantener todo seguro. Pero pasemos directamente
00:01:08a una demostración para mostrar una aplicación real con autenticación, base de datos y almacenamiento de archivos. Y si te gusta este
00:01:13video, suscríbete a Better Stack, ya que cubrimos una gran cantidad de contenido para desarrolladores en este canal.
00:01:18Entonces, tenemos nuestra aplicación aquí; tenemos PocketBase en el backend y solo un frontend web
00:01:22escrito en React. El archivo más importante dentro del frontend web es este archivo "pb.ts" aquí, porque
00:01:30aquí estamos importando desde PocketBase, así que tenemos la clase PocketBase, creamos una nueva instancia de
00:01:36ella, luego podemos conectarnos a nuestro servicio de backend y ya podemos usar "pb" en el resto de la
00:01:42aplicación. La aplicación en sí es solo un rastreador de errores sencillo; podemos arrastrar elementos entre columnas, podemos
00:01:48crear problemas nuevos. Si miramos dentro del hook que controla al usuario conectado, puedes ver que
00:01:53inicialmente establecemos el estado con "pb.authStore.record", así que esto simplemente obtendría al usuario autenticado actual
00:01:59de PocketBase, y luego configuramos un oyente también, así que decimos que si el almacén de autenticación cambia con el
00:02:05evento "onChange", entonces simplemente estableceremos el nuevo usuario en el estado. Es realmente así de simple.
00:02:11Podemos acceder al estado, podemos suscribirnos al estado, y lo mismo ocurre con nuestros problemas.
00:02:16Así que, dentro de nuestro hook "useIssues", nuevamente inicializamos un estado, pero en este caso lo dejaremos vacío.
00:02:21Luego tenemos un "useEffect" y decimos que obtendremos todos los problemas, obtendremos la lista completa y luego
00:02:27estableceremos los problemas con esa lista; eso pre-poblaría inicialmente los datos y luego podemos
00:02:32también suscribirnos a los problemas; así que si arrastras problemas entre columnas o creas o eliminas un problema,
00:02:38podemos decir "pb.collection("issues").subscribe" y, cada vez que llega un nuevo registro, podemos
00:02:44añadirlo a nuestro estado. Eso significa que, cuando estamos interactuando directamente con la base de datos de PocketBase,
00:02:49como cuando arrastramos una tarjeta aquí, el estado se actualizaría automáticamente. En el caso de crear un
00:02:54problema nuevo, también podemos adjuntar una captura de pantalla. Tomemos una captura de pantalla de la aplicación
00:02:59misma, luego hacemos clic en "file issue" y el nuevo problema aparece aquí. En el código del frontend, esto se
00:03:05maneja mediante una función de envío, añadimos todos los datos del formulario y finalmente llamamos a "pb
00:03:11collection("issues").create", pasando los datos. Lo que tenemos en el backend son reglas de API de colección
00:03:17para evitar el uso indebido de estas API, así que PocketBase te dará esta interfaz de administración por defecto
00:03:24y aquí puedes ver que tenemos la colección de usuarios y también la colección de problemas,
00:03:27donde viven todos nuestros problemas. Si miramos dentro de la colección de usuarios y luego presionamos "settings" aquí arriba,
00:03:32tenemos esta pestaña de "API rules", y estas son todas las reglas que restringen el acceso a esta colección
00:03:37en particular. Así, decimos que en el caso de los usuarios, el "request.auth.id" no puede ser una cadena vacía, y luego, al
00:03:43actualizar o eliminar usuarios, el ID debe coincidir con el ID del usuario autenticado, y podemos acceder a eso
00:03:50con esta cadena especial aquí: el carácter "@" y luego "request.auth.id". Si has usado Supabase
00:03:56en el pasado, este tipo de patrón te resultará súper familiar. Ahora, ¿qué sucede si el backend no
00:04:02hace todo lo que necesitas? Bueno, afortunadamente puedes ampliarlo mediante hooks con, por supuesto, Go, pero también con JavaScript
00:04:08y TypeScript. Así que podemos conectarnos a eventos como "onBootstrap" cuando la aplicación inicia, o "onRecordCreate"
00:04:15cuando se crea un registro en la base de datos. Había 82 hooks únicos al momento de la filmación, así que prácticamente
00:04:21todo lo que necesitas estaría cubierto. Ahora, extendamos nuestro servicio de PocketBase para ver cómo funciona todo.
00:04:27Si miramos dentro de la carpeta "pb", puedes ver que tenemos nuestro binario de PocketBase, y este archivo es literalmente
00:04:32todo lo que necesitas para ejecutar la versión por defecto de PocketBase. En mi caso, sin embargo, he escrito todos los hooks
00:04:38en TypeScript, así que tengo algo de configuración para compilar esos hooks en la carpeta "pb_hooks" como JavaScript, porque
00:04:44PocketBase solo admite JavaScript de forma nativa, así que si estás usando TypeScript, necesitas compilarlo.
00:04:50Si miramos dentro del archivo de hook principal, podemos ver que tenemos un hook aquí que dice "onRecordCreate"
00:04:55y esto se dirige específicamente a cuando creamos problemas. Y lo que estamos haciendo aquí es decir:
00:05:00cada vez que se crea un registro, vamos a enviar un correo electrónico al usuario, y podemos hacerlo llamando a
00:05:05"e.app.newMailClient().send" y luego pasando el objeto de mensaje que hemos construido aquí.
00:05:10Por supuesto, puedes conectarte a una tonelada de funciones diferentes dentro de PocketBase, así que cualquier funcionalidad personalizada
00:05:15que puedas necesitar siempre será compatible con los más de 82 hooks ya disponibles en PocketBase.
00:05:21Como esto ejecuta SQLite, significa que necesitamos almacenamiento persistente, así que plataformas pasadas como Heroku, Render
00:05:28o Railway serían en realidad una mala opción debido a sus sistemas de archivos efímeros; básicamente, perderías tus datos
00:05:33cada vez que vuelves a desplegar tu aplicación. Para evitar esto, puedes adjuntar un sistema de archivos permanente, pero la opción mejor y
00:05:39más barata sería simplemente alojar en un VPS, y esos datos viven dentro de la carpeta "pb_data". Así que si
00:05:45echamos un vistazo dentro, puedes ver que tenemos una carpeta de almacenamiento, y esta contendría todas las
00:05:50imágenes que hemos subido contra nuestros problemas; simplemente se almacenan en la carpeta de almacenamiento, así que
00:05:55dentro de este ID aleatorio aquí, por ejemplo, puedes ver la imagen que subí contra el problema
00:05:59anteriormente. Los archivos de la base de datos en sí también se persistirían dentro de esta carpeta, así que "data.db" aquí
00:06:05contendría todo nuestro código SQLite. Así que, si eliminara este archivo, perdería todos los datos en la
00:06:11aplicación, por lo que obviamente necesitas una buena estrategia de copia de seguridad en lugar de simplemente dejarla como un único
00:06:16archivo en el disco. En comparación con herramientas como Supabase, que pueden comenzar en 25 dólares por el nivel básico, PocketBase es
00:06:22básicamente gratis; solo tienes que pagar los costos de tu VPS, que pueden ser tan bajos como cuatro dólares, y te permite
00:06:28ejecutar tantos proyectos como quieras, pero por supuesto, querrías escalar esto con el uso.
00:06:33PocketBase también viene con todo lo que necesitas para aplicaciones de producción, como migraciones, programación de tareas y
00:06:38registro. También puedes servir archivos estáticos directamente con PocketBase dejándolos caer en la carpeta "pb_public"
00:06:44y esto sería útil para algo como un frontend de React. Alternativamente, también puedes alojar
00:06:49rutas dinámicas con renderizado de plantillas, y esto sería perfecto para cosas como plantillas de correo electrónico. Así que si
00:06:54quieres una configuración de un solo cuadro, entonces así es como se hace. Ahora, la gran pregunta: ¿esto está listo para producción?
00:06:59Bueno, incluye todas las funciones que necesitarías para construir una aplicación SaaS moderna, particularmente las
00:07:04funciones de nivel de producción como migraciones y registro. También es totalmente extensible, así que no estás simplemente
00:07:09atrapado con los valores por defecto, pero el gran problema es que esto es pre-v1, por lo que dicen explícitamente que solo uses
00:07:15esto si estás bien leyendo registros de cambios y ejecutando migraciones manuales de vez en cuando. Pero si ese eres
00:07:20tú, entonces adelante, puedes simplemente construir el primer unicornio de un solo archivo. Puedes aprender más sobre Pocket
00:07:25Base consultando los enlaces relevantes en la descripción, y si te encantan las alternativas de código abierto,
00:07:29entonces mira nuestro video sobre OpenCode, la alternativa de código abierto a Claude Code. He sido Warren de
00:07:35Better Stack, gracias por mirar y, por supuesto, nos vemos la próxima vez.