스크립트
00:00:00PocketBase est une alternative open source à Supabase ou Firebase et probablement le backend
00:00:04le plus simple que vous puissiez utiliser, tenant dans un seul fichier et offrant base de données en temps réel, authentification et
00:00:11stockage de fichiers ; c'est un contraste total avec la complexité folle qu'a atteint le développement web moderne.
00:00:16Dans la vidéo d'aujourd'hui, nous allons tester PocketBase pour voir si son architecture simple
00:00:21est vraiment à la hauteur pour construire autre chose qu'une simple application.
00:00:29PocketBase est un binaire Go unique avec SQLite intégré, mais coder en Go lui-même est en fait
00:00:35optionnel, car le backend peut être étendu avec JavaScript et TypeScript. Vous aurez aussi
00:00:40accès à une interface d'administration basique pour configurer vos collections, exactement comme avec Supabase.
00:00:46Passons à l'architecture et à la façon dont vous l'utiliserez concrètement. Une fois PocketBase lancé, vous pouvez
00:00:51vous y connecter depuis le frontend via le SDK JavaScript. C'est encore une fois très similaire à la conception de Firebase
00:00:57et Supabase, car vous pouvez accéder à votre base de données directement depuis le frontend sans
00:01:02vous inquiéter : PocketBase utilise des règles d'API et l'authentification pour sécuriser tout cela. Mais entrons directement dans
00:01:08une démo pour montrer une application réelle avec authentification, base de données et stockage de fichiers. Si vous appréciez cette
00:01:13vidéo, abonnez-vous à Better Stack, car nous couvrons énormément de contenu pour développeurs sur cette chaîne.
00:01:18Nous avons donc notre application ici : PocketBase en backend, et un frontend web
00:01:22écrit en React. Le fichier le plus important du frontend est ce fichier "pb.ts" ici, car
00:01:30nous y importons PocketBase ; nous avons la classe PocketBase, nous en créons une nouvelle instance
00:01:36puis nous pouvons nous connecter à notre service backend et utiliser "pb" dans tout le reste de l'
00:01:42application. L'application elle-même est un simple gestionnaire de bugs : on peut glisser des éléments entre les colonnes, on peut
00:01:48créer de nouveaux tickets. Si nous regardons dans le hook qui contrôle l'utilisateur connecté, vous pouvez voir
00:01:53qu'initialement, nous définissons l'état avec "pb.authStore.model". Cela récupère simplement l'utilisateur actuellement authentifié
00:01:59depuis PocketBase, puis nous configurons un écouteur : si le magasin d'authentification change avec
00:02:05l'événement "onChange", nous mettons simplement à jour le nouvel utilisateur dans l'état. C'est vraiment aussi simple que ça.
00:02:11Nous pouvons accéder à l'état, nous abonner à l'état, et il en va de même pour nos tickets.
00:02:16Donc, dans notre hook "useIssues", nous initialisons à nouveau un état, mais cette fois nous le laissons vide,
00:02:21puis nous utilisons un "useEffect" pour récupérer tous les tickets, obtenir la liste complète, et ensuite
00:02:27nous mettons à jour les tickets avec cette liste. Cela pré-remplit les données initialement, et ensuite nous pouvons
00:02:32aussi nous abonner aux tickets : si vous glissez des tickets entre les colonnes, ou si vous en créez ou supprimez un,
00:02:38nous pouvons dire "pb.collection('issues').subscribe" et dès qu'un nouvel enregistrement arrive, nous pouvons
00:02:44l'ajouter à notre état. Cela signifie que lorsque nous interagissons directement avec la base de données PocketBase,
00:02:49comme lorsque nous glissons une carte ici, l'état est automatiquement mis à jour. Dans le cas de la création d'un
00:02:54nouveau ticket, nous pouvons aussi y joindre une capture d'écran. Prenons donc une capture de l'application
00:02:59elle-même, cliquons sur "File Issue", et le nouveau ticket apparaît. Dans le code frontend, cela est
00:03:05géré par une fonction de soumission, nous ajoutons toutes les données du formulaire, et enfin nous appelons "pb
00:03:11collection('issues').create" en passant les données. Ce que nous avons en backend, ce sont des règles d'API de collection
00:03:17pour prévenir toute utilisation abusive. PocketBase vous offre cette interface d'administration par défaut,
00:03:24et vous pouvez y voir la collection "users" ainsi que la collection "issues"
00:03:27où vivent tous nos tickets. Si nous regardons dans la collection "users" et cliquons sur les paramètres ici,
00:03:32nous avons l'onglet "API Rules" ; ce sont toutes les règles qui restreignent l'accès à cette collection
00:03:37particulière. Pour les utilisateurs, nous disons que l'ID d'authentification de la requête ne peut pas être vide, et lors de la
00:03:43mise à jour ou de la suppression, l'ID doit correspondre à celui de l'utilisateur authentifié. Nous pouvons y accéder
00:03:50avec cette chaîne spéciale : le caractère "@" suivi de "request.auth.id". Si vous avez utilisé Supabase
00:03:56par le passé, ce modèle vous sera très familier. Maintenant, que se passe-t-il si le backend ne fait pas
00:04:02tout ce dont vous avez besoin ? Heureusement, vous pouvez l'étendre via des hooks, avec Go bien sûr, mais aussi JavaScript
00:04:08et TypeScript. Nous pouvons donc nous connecter à des événements comme "onBootstrap" au démarrage, ou "onRecord
00:04:15Create" lors de la création d'un enregistrement. Il y avait 82 hooks uniques au moment du tournage, donc à peu près
00:04:21tout ce dont vous pourriez avoir besoin est couvert. Étendons maintenant notre service PocketBase pour voir comment cela fonctionne.
00:04:27Si nous regardons dans le dossier "pb", vous voyez notre binaire PocketBase, et ce fichier est littéralement
00:04:32tout ce dont vous avez besoin pour faire tourner la version par défaut. Pour ma part, j'ai écrit tous les hooks
00:04:38en TypeScript, donc j'ai une configuration pour les compiler en JavaScript dans le dossier "pb_hooks", car
00:04:44PocketBase ne supporte nativement que le JavaScript ; si vous utilisez TypeScript, vous devez le compiler.
00:04:50Dans le fichier hook principal, nous voyons ce hook "onRecordCreate"
00:04:55qui cible spécifiquement la création de tickets. Ce que nous faisons ici, c'est que
00:05:00chaque fois qu'un enregistrement est créé, nous envoyons un email à l'utilisateur, en appelant
00:05:05"e.app.newMailClient().send()" en passant l'objet message que nous avons construit ici.
00:05:10Vous pouvez bien sûr vous brancher sur une tonne de fonctionnalités différentes dans PocketBase ; toute fonctionnalité personnalisée
00:05:15dont vous pourriez avoir besoin sera toujours supportée grâce aux plus de 82 hooks disponibles dans Pocket
00:05:21Base. Comme il utilise SQLite, nous avons besoin d'un stockage persistant ; les plateformes comme Heroku, Render
00:05:28ou Railway seraient un mauvais choix à cause de leurs systèmes de fichiers éphémères : vous perdriez vos données
00:05:33à chaque redéploiement. Pour éviter cela, vous pouvez attacher un système de fichiers permanent, mais la meilleure option
00:05:39et la moins chère serait d'héberger sur un VPS. Les données résident dans le dossier "pb_data" ; si
00:05:45nous regardons ici, vous pouvez voir un dossier "storage" qui contiendrait toutes les
00:05:50images téléchargées pour nos tickets. Elles sont simplement stockées dans le dossier de stockage, donc
00:05:55dans cet identifiant aléatoire, par exemple, vous pouvez voir l'image que j'ai téléchargée pour le ticket
00:05:59plus tôt. Les fichiers de base de données sont aussi persistés dans ce dossier ; "data.db" ici
00:06:05contient tout notre code SQLite. Si je supprimais ce fichier, je perdrais toutes les données de l'
00:06:11application. Il vous faut donc évidemment une bonne stratégie de sauvegarde, plutôt que de laisser ça comme un simple
00:06:16fichier sur le disque. Comparé à des outils comme Supabase, qui peut commencer à 25 $ pour le palier de base, PocketBase est
00:06:22quasiment gratuit. Vous ne payez que les coûts du VPS, qui peuvent être aussi bas que quatre dollars, et vous permettent
00:06:28d'exécuter autant de projets que vous le souhaitez, même si vous voudriez monter en charge avec l'usage.
00:06:33PocketBase vient aussi avec tout ce dont vous avez besoin pour des applications de production comme les migrations, la planification de tâches et
00:06:38la journalisation. Vous pouvez aussi servir des fichiers statiques directement avec PocketBase en les déposant dans le dossier "pb_public"
00:06:44et cela serait utile pour un frontend React. Alternativement, vous pouvez aussi héberger
00:06:49des routes dynamiques avec rendu de template, ce qui serait parfait pour des choses comme les modèles d'e-mail. Donc si vous
00:06:54voulez une configuration tout-en-un, voilà comment faire. Maintenant, la grande question : est-ce prêt pour la production ?
00:06:59Eh bien, cela inclut toutes les fonctionnalités nécessaires pour construire une application SaaS moderne, notamment des
00:07:04fonctionnalités de qualité production comme les migrations et la journalisation. C'est aussi entièrement extensible, donc vous n'êtes pas
00:07:09bloqué par les défauts. Mais le gros piège est que c'est du pré-v1, donc ils disent explicitement de ne l'utiliser
00:07:15que si vous êtes à l'aise avec la lecture des changelogs et l'exécution de migrations manuelles de temps en temps. Mais si c'est
00:07:20votre cas, allez-y, vous pouvez construire votre première licorne en un seul fichier. Vous pouvez en apprendre plus sur Pocket
00:07:25Base en consultant les liens pertinents dans la description, et si vous aimez les alternatives open source
00:07:29alors regardez notre vidéo sur OpenCode, l'alternative open source à Claude Code. Je suis Warren de
00:07:35Better Stack, merci d'avoir regardé et bien sûr, je vous dis à la prochaine.