Contruire un clone de twitter avec «Pocket Base», «Rust» et «Yew.rs»

Objectifs

  • Apprendre le cadriciel Rust «Yew», WebAssembly et le flux de travail pour le «Frontend» web
  • Explorer l'outils PocketBase
  • Pratiquer le travail avec les APIs HTTP, REST

Rust_programming_language_black_logo.svg

Normalement, j'écris mes propres APIs pour les projets. Mes projets nécessitaient souvent des fonctionnalités plus complexes qu'une simple application CRUD (create read update delete). Alors, l'idée de sauver du temps sur la partie CRUD de l'application et de me concentrer sur le reste semblait intéressante.

Planifications

Je vais donc produire une application «full-stack» en utilisant PocketBase et Yew.rs. Elle devra être capable de:

  • D'afficher une liste de posts aux utilisateurs.
  • Laisser les utilisateurs créer des nouveau posts.
  • Pouvoir «aimer» un post et garder ce nombre en mémoire.

Configuration de PocketBase

PocketBase est une application de «backend» automatique. En utilisant une interface conviviale, on peut créer le «backend» d'une application CRUD en très peu de temps. PocketBase nous génère alors les schémas SQLite, un API REST et un service d'authentification. De plus, PocketBase possède beaucoup de librairies client pour l'interfacer.

J'avais un peu d'expérience à travailler avec Directus, qui est le même genre d'application que PocketBase. La différence est que Directus génère aussi une API GraphQL en plus d'un API REST.

Vous pouvez en apprendre plus sur Pocket: Pocketbase.io

Vous pouvez en apprendre plus sur Directus: https://directus.io/

Donc, la première étape était d'aller sur le site web de PocketBase pour pouvoir le télécharger.

Lorsque le fichier .zip est extrait, on peut démarrer PocketBase grâce à la commande suivante.

./pocketbase serve

Une fois que PocketBase est en fonction, je vais essayer de construire une page «Hello, World» de base. Pour se faire, PocketBase nous demande de créer un dossier nommé pb_public. Ce fichier sera utilisé comme racine des fichiers html.

mkdir pb_public
cd pb_public
echo "<h1>Hello, world</h1>" > index.html

Maintenant, si tout a bien été fait, on devrait voir ceci dans la console:

pb_running

Effectivement, nous pouvons confirmer que tout fonctionne dans notre naviguateur web.

helloworld

Nous pouvons alors ouvrir la page d'administration PocketBase avec '/_/ route'

pb_dashboard

Nous devons ensuite créer notre première collection. La collection que je vais créer sera la collection des posts Chaque post est composé d'un ID unique, du texte et un nombre de mention «j'aime».

config_fields

Je créer ensuite un utilisateur en utilisant le menu à cet effet.

Programmer le visuel

Pour le «frontend», j'utiliserai le cadriciel Yew.rs. De ce que je comprend, Yew.rs se compile en WebAssembly. Ceci permet à du code rust de manipuler le DOM comme si c'était du JavaScript.

Après un peu de recherches, j'ai compris que je devais installer le coffre à outils de WebAssembly pour rust ainsi qu'un outil nommé trunk.

rustup target add wasm32-unknown-unknown
cargo install trunk
cargo install wasm-pack

Je ne vais pas décrire toutes les étapes qui sont requise, mais si vous voulez, vous pouvez consulter la documentation de Yew.rs ici: yew documentation

La documentation de l'outil trunk a aussi été utile pour comprendre comment procéder : trunk

Je peux maintenant faire un composant visuel. Voici ce que je vois:

PostSketch

Après quelques heures pour figurer l'utilisation de Yew.rs, j'ai été capable d'afficher un interface qui émule le sketch. J'ai utilisé Bulma.css pour le CSS.

YewHelloworld

Il était impréssionnant de voir que PocketBase pouvait désservir du WebAssembly compilé sans aucune configuration.

De plus, je trouve que le code rust de Yew.rs ressemble énormément à React.JS que j'ai déjà utilisé dans le passé.

J'ai initiallement eu beaucoup de problèmes avec le module «reqwest» de rust. Apparement, il y a quelques problèmes avec les fonctionnalités asynchrones et WebAssembly. J'ai donc tout fais de manière non-asynchrone.

Après tout cela, je pouvais faire ma requète pour obtenir mes posts et en créer des nouveaux !

S'arrêter ici

Je pourrais facilement continuer et ajouter le visuel nécessaire pour que de nouveaux utilisateurs s'inscrivent, PocketBase s'en occuperai gentillement.

Ce que j'ai appris

  • Les outils de backend automatiques sauvent énormément de temps.
  • Les outils de backend automatiques s'occupent de l'authentification et de la création d'utilisateurs.
  • Les outils autours de rust pour du «frontend» sont un peu difficile à utiliser. Il m'a pris beaucoup de temps comprendre comment déservir un helloworld et comment compiler mon projet.