Comment construire un backend Astro.js ?

Astro.js est un générateur de site statique (SSG) et un framework frontal pour la construction d’applications web rapides et modernes.

Il vous permet de créer des sites web rapides et légers en effectuant un pré-rendu des fichiers HTML, CSS et JavaScript statiques au moment de la création.

Contrairement aux SSG traditionnels, Astro.js vous permet également d’hydrater vos pages statiques avec du JavaScript au moment de l’exécution, ce qui vous donne la possibilité de créer des sites web dynamiques et interactifs.

Cet article fournit un tutoriel complet sur la façon de construire une application Astro.js en utilisant Back4app comme Backend as a Service (BaaS).

Il fournira une vue d’ensemble d’Astro.js, de ses avantages et de ses limites, ainsi qu’un guide étape par étape sur la façon de construire et d’héberger une application Astro.js.

Avantages d’Astro.js

Astro.js est doté de plusieurs fonctionnalités clés qui en font un excellent choix pour la création de sites web modernes, notamment

Architecture insulaire

L’architecture en îlots est un modèle d’architecture web qui consiste à décomposer une page web en îlots de fonctionnalité encapsulés et indépendants.

Chaque île peut être représentée par un seul composant, un groupe de composants ou même une page entière.

Astro.js extrait votre interface utilisateur (UI) en composants plus petits et isolés appelés “Astro Islands”. Vous pouvez utiliser ces îlots sur n’importe quelle page, remplaçant ainsi le JavaScript inutilisé par du HTML léger.

L’architecture en îlot présente plusieurs avantages, notamment l’amélioration des performances, une plus grande flexibilité et un développement simplifié.

JavaScript minimal

Astro adopte une approche “moins de JavaScript”. Il n’envoie du JavaScript au client que lorsqu’il est nécessaire à l’interactivité. Cela permet de réduire la taille du paquet JavaScript et d’améliorer les temps de chargement.

L’utilisation minimale de JavaScript dans Astro.js offre plusieurs avantages tangibles, notamment l’amélioration des performances du site web, un meilleur référencement, une consommation de ressources réduite, une sécurité renforcée et une expérience utilisateur plus réactive.

Cette approche permet de fournir des applications web efficaces et performantes, ce qui fait d’Astro.js un choix convaincant pour le développement web moderne.

Intégration avec les frameworks les plus courants

Vous pouvez utiliser Astro.js avec divers frameworks JavaScript populaires, notamment React, Svelte, Vue et Lit.

Cela vous permet de choisir vos outils préférés, de réutiliser les composants et les connaissances existants, de puiser dans les écosystèmes établis et de maintenir un processus de développement harmonieux.

Cette flexibilité et cette compatibilité font d’Astro.js un choix intéressant pour divers projets.

Chargement optimisé

L’optimisation du chargement est l’un des principaux avantages d’Astro.js. Il transforme fondamentalement la manière dont les pages web sont conçues et diffusées, en se concentrant sur l’amélioration de l’expérience utilisateur et des performances du site web.

Astro optimise le chargement et le rendu pour différents appareils, y compris les appareils de faible puissance comme les smartphones. L’objectif est d’offrir une expérience fluide quel que soit l’appareil de l’utilisateur ou les conditions du réseau.

Limites d’Astro.js

Astro.js possède quelques limitations dont vous devez être conscient. En voici quelques-unes :

Compatibilité avec l’écosystème

Astro.js a été conçu pour fonctionner avec des frameworks frontaux populaires comme React, Svelte et Vue.js. Cependant, son écosystème est moins mature que des frameworks comme React ou Vue, et vous trouverez donc moins de bibliothèques et de composants tiers explicitement conçus pour Astro.

Exigences en matière de familiarité avec le cadre

Astro.js permet l’utilisation de différents frameworks frontaux, ce qui nécessite une certaine familiarité avec chacun d’entre eux.

Cette étendue de connaissances peut être écrasante pour les développeurs qui se spécialisent dans un seul cadre ou qui sont novices en matière de développement web.

Travailler sur un projet qui nécessite plusieurs cadres implique de maintenir la cohérence entre les différents cadres.

Cela peut s’avérer très difficile, car les différents cadres ont leurs propres conventions et meilleures pratiques, et leur harmonisation au sein d’un même projet peut potentiellement conduire à une structure de code fragmentée.

Optimisation de l’apprentissage

L’apprentissage de l’optimisation fait référence à la compréhension et à la mise en œuvre de stratégies spécifiques visant à maximiser les performances des applications web construites avec un framework.

Bien qu’Astro.js soit conçu pour l’efficacité et la rapidité, pour tirer pleinement parti de ses capacités, vous devez comprendre en profondeur ses techniques d’optimisation et les mettre en œuvre dans le processus de développement. Cela peut s’avérer complexe et nécessiter des connaissances avancées.

Création de l’application Journal

En suivant ce tutoriel, vous construirez une application de journal de base en utilisant le framework Astro.js avec React.js.

L’application du journal fournira une fonctionnalité CRUD (créer, lire, mettre à jour, supprimer) et utilisera Back4app pour le stockage et la récupération des données.

Vous pouvez créer un projet Astro.js en lançant cette commande dans votre terminal :

npm create astro@latest

La commande ci-dessus génère un projet Astro.js de base et vous guide dans la configuration de l’application, notamment en ce qui concerne l’utilisation de TypeScript et son niveau de rigueur.

Pour ajouter React.js à votre projet Astro.js, exécutez cette commande dans votre terminal :

npx astro add react

Votre projet est maintenant prêt. Vous pouvez commencer à développer l’application avec votre IDE préféré. Tout d’abord, vous définissez vos styles globaux et la disposition de l’application.

Pour définir vos styles globaux, créez un dossier styles dans le répertoire src. Dans le dossier styles, créez un fichier nommé global.css et définissez-y vos styles globaux.

Comme cela :

Les styles globaux étant en place, il est temps de définir votre mise en page. Vous trouverez un fichier Layout.astro dans le dossier layouts du répertoire src.

Remplacer le code existant dans le fichier Layout.astro par le bloc de code suivant :

Le bloc de code ci-dessus représente le composant de mise en page. Il importe les styles globaux, met en place les métadonnées et fournit un emplacement pour le contenu dynamique à l’aide de l’élément slot.

Le contenu principal du composant est un titre h1 avec un style spécifique défini dans la balise style.

Pour appliquer la mise en page et les styles globaux à vos pages, importez le composant de mise en page dans le fichier de page et insérez la section HTML dans le composant de mise en page.

Pour appliquer la mise en page à votre page d’accueil, suivez les mêmes étapes dans le fichier index.astro situé dans le répertoire src/pages.

Comme cela :

Ce bloc de code définit la page d’accueil de votre application. Il définit un menu de navigation avec un lien vers la page “/journal” et applique des styles spécifiques pour centrer et espacer l’élément de navigation.

Pour créer la page du journal, créez un fichier nommé journal.astro dans le répertoire src/pages et incluez le bloc de code suivant dans le fichier.

Le bloc de code ci-dessus représente la page du journal de votre application. Il importe le composant de mise en page et enveloppe la section HTML pour fournir une structure de page cohérente.

Le code définit également un formulaire de saisie des entrées du journal, doté de champs de saisie pour le titre et le corps, ainsi que d’un bouton “Journal”. Les styles CSS définis dans la balise style contrôlent l’apparence du formulaire et de ses éléments.

Pour lancer votre application dans votre navigateur web, démarrez le serveur de développement de l’application. Naviguez vers le répertoire du projet dans votre terminal et exécutez la commande suivante pour lancer le serveur de développement.

npm run dev

La commande ci-dessus vous fournira le lien http://localhost:4321/. Naviguez vers ce lien sur votre navigateur web pour voir votre application.

La page d’accueil devrait ressembler à ceci :

Pour consulter la page du journal, cliquez sur le lien de navigation “Enregistrer votre expérience”.

Intégrer Back4app à votre application

Back4App est une plateforme de services backend basée sur le cloud, conçue pour rationaliser le développement et la gestion des applications, et utilisera Back4app comme backend Astro.js.

S’appuyant sur le framework open-source Parse Server, il fournit une suite d’outils robustes qui permettent aux développeurs de se concentrer sur le développement frontal tout en simplifiant les complexités du back-end.

A la base, Back4App offre des fonctionnalités cruciales pour le développement d’applications modernes, telles que le stockage de données, l’authentification des utilisateurs et une base de données en temps réel.

Elle est donc très utile pour créer des expériences interactives et dynamiques pour les utilisateurs. La plateforme prend en charge différents langages de programmation et frameworks, ce qui permet de répondre à divers besoins de développement.

Créer un compte Back4app

Pour intégrer les fonctionnalités offertes par Back4app dans vos applications, vous devez avoir un compte Back4app. Vous pouvez en créer un en suivant ces étapes simples :

1. Visitez le site web de Back4app.
2. Cliquez sur le bouton “S’inscrire”.
3. Remplissez le formulaire d’inscription et envoyez-le.

Présentation du plugin Back4app ChatGPT

Back4app a récemment introduit son plugin ChatGPT pour aider les développeurs et les amateurs non techniques à créer et à interagir avec les applications Back4app.

En utilisant le plugin Back4app ChatGPT, vous pouvez convertir vos conversations en applications réelles. Cela signifie que vous n’avez pas besoin d’expérience avec la plateforme Back4app avant d’interagir.

Pour accéder aux plugins ChatGPT, vous devez vous abonner à ChatGPT Plus. Une fois abonné, cliquez sur le bouton “GPT-4” pour faire apparaître un menu déroulant. Sélectionnez l’option “Plugins” pour continuer.

Une liste des plugins disponibles s’affiche à l’écran. Localisez et sélectionnez le plugin Back4app (tapez “Back4app” dans la barre de recherche).

Créer une application Back4app avec le plugin

Créer une application Back4app en utilisant le plugin Back4app sur ChatGPT est une tâche simple. Informez ChatGPT du type d’application que vous souhaitez créer, et il s’occupera du reste.

Par exemple :

Comme le montre l’image ci-dessus, le plugin Back4app ChatGPT crée une application Back4app nommée “Journal application”.

Pour vérifier que le plugin Back4app ChatGPT a bien créé l’application, rendez-vous sur le site web de Back4app, connectez-vous à votre compte et vérifiez vos applications. Vous devriez trouver une application nommée “application journal” listée parmi vos applications.

À l’aide du plugin, créez une classe de journal dans l’application journal.

Comme le montre l’image ci-dessus, le plugin Back4app ChatGPT crée la classe journal et ajoute un titre, un contenu et un champ de date.

Ajouter des données à l’application Back4app

En utilisant le plugin Back4app ChatGPT, vous pouvez également ajouter des données personnalisées à l’application. Par exemple, vous pouvez ajouter un texte personnalisé aux champs de titre et de contenu.

Après avoir ajouté les textes, accédez au tableau de bord de l’application, cliquez sur la classe du journal et confirmez que le texte a été ajouté.

Se connecter à Back4app

Pour connecter votre application journal à l’application Back4app, vous devez installer le Parse JavaScript SDK dans votre application.

Pour ce faire, exécutez la commande suivante dans votre terminal :

npm install parse 

Après avoir installé le SDK JavaScript de Parse, vous avez besoin de l’identifiant de l'application et des informations d’identification de la clé Javascript.

Vous pouvez trouver ces informations d’identification dans la section Sécurité et clés du tableau de bord de votre application Back4app. Conservez l’identifiant de l'application et la clé Javascript en toute sécurité dans votre application.

Ajouter des données à Back4app depuis l’application

Plus tôt dans l’article, vous avez appris comment ajouter des données à Back4app en utilisant le plugin Back4app ChatGPT. Pour faire cela avec l’application de votre journal, vous allez utiliser le SDK Javascript Parse.

Dans le fichier journal.astro, ajoutez le bloc de code ci-dessous :

Ce bloc de code représente un script JavaScript qui s’intègre à Parse pour créer et enregistrer des entrées de journal. Il importe la version minifiée de Parse à partir de parse/dist/parse.min.js et appelle la méthode initialize.

Cette méthode prend les identifiants Application_ID et Javascript_KEY comme arguments. Après avoir appelé la méthode d’initialisation de Parse, définissez la propriété serverURL de Parse à https://parseapi.back4app.com/.

Le code sélectionne les éléments input, textarea et button dans le DOM et les affecte aux variables title, body et button.

Le champ de saisie contient le titre de l’article de journal et le champ de texte contient le corps de l’article de journal.

La fonction addJournal contient la logique nécessaire pour ajouter des données à votre base de données Back4app. Elle crée une nouvelle instance d’un objet Journal, définit ses propriétés title et content avec les valeurs des éléments input et textarea, et l’enregistre dans Back4app.

Avec la méthode addEventListener, le code ajoute un écouteur d’événements au bouton, garantissant qu’un clic sur celui-ci déclenche la fonction addJournal.

Récupérer des données de Back4app

Pour récupérer les données de Back4app et les afficher dans votre application, vous utiliserez un composant React. Créez un fichier Journal.tsx dans le répertoire src/components. Dans ce fichier, importez et initialisez la bibliothèque Parse.

Comme cela :

Définissez ensuite les éléments JSX du composant :

Ensuite, créez un état de journal et définissez une fonction qui contient la logique de récupération des données de Back4app.

Comme cela :

Avec la méthode Parse.Query, la fonction fetchJournal utilise le SDK Parse pour construire une requête qui récupère les données de la classe Journal.

La méthode find de l’objet de requête renvoie un tableau contenant les résultats de la requête, et la fonction setJournal met à jour l’état du journal avec les données récupérées.

Ce code utilise le hook useEffect pour exécuter des effets secondaires dans le composant. Il appelle fetchJournal pour récupérer les données lorsque le composant est monté. Maintenant, dans le composant, affichez le contenu de l’état du journal.

Comme cela :

Le bloc de code ci-dessus présente la liste des entrées du journal sous la forme d’une collection d’éléments div, chacun ayant un contenu spécifique et un bouton “Supprimer” dédié.

Il affiche le titre et le contenu de chaque entrée du journal dans les balises h3 et p et dispose d’un bouton “Supprimer” pour permettre aux utilisateurs de supprimer facilement les entrées.

Pour styliser les éléments JSX définis dans votre composant journal, ajoutez les styles suivants à votre fichier global.css:

Affichez maintenant le composant journal sur votre page d’accueil. Pour ce faire, remplacez le code existant dans le fichier index.astro par le bloc de code ci-dessous :

Ce bloc de code importe le composant journal et le rend. La directive client:load garantit que le composant journal se charge immédiatement lors du chargement de la page, offrant ainsi à l’utilisateur une expérience fluide et réactive.

Suppression des données de Back4app

Pour vous assurer que le bouton de suppression de votre application à côté de chaque entrée fonctionne, vous devez définir une fonction qui supprime une entrée de votre choix. En utilisant l’événement click, vous liez cette fonction au bouton de suppression.

Comme cela :

La fonction deleteJournal crée une nouvelle instance d’un objet Journal à l’aide de la méthode Parse.Object.extend. Après avoir créé l’objet, elle définit la propriété id de l’objet avec le paramètre id passé à la fonction.

Ensuite, la fonction appelle la méthode de destruction asynchrone de l’objet “Journal” pour supprimer l’entrée du journal avec l’ID donné dans Back4app.

Avec la méthode filter, la fonction filtre l’entrée du journal avec l’identifiant spécifié dans l’état du journal, en créant un nouveau tableau qui exclut l’entrée supprimée.

Enfin, avec la méthode setJournal, la fonction met à jour l’état du journal avec ce nouveau tableau.

Liez maintenant la fonction deleteJournal au bouton "Delete" en utilisant le gestionnaire d’événement click. Les éléments JSX du fichier Journal.tsx ressembleront alors à ceci :

Test de l’application

Maintenant que vous avez terminé la construction de l’application, il est important de la tester. Pour ce faire, accédez à votre terminal, exécutez le serveur de développement et affichez l’application dans votre navigateur web.

L’application devrait ressembler à ceci :

Cliquez sur “Log your experience” pour visiter la page du journal de l’application et remplissez les champs de saisie.

Après avoir rempli les champs de saisie, cliquez sur log pour ajouter les données à votre base de données Back4app. Retournez à votre page d’accueil.

Maintenant, pour tester si vous pouvez supprimer une entrée, cliquez sur le bouton de suppression de l’entrée “Mon premier jour de journal”. Votre page d’accueil doit maintenant ressembler à l’image ci-dessous.

Conclusion

Dans cet article, vous avez découvert le framework Astro.js, ses avantages et ses inconvénients potentiels. Vous avez appris à construire une application Astro parfaitement intégrée à la bibliothèque React.

Astro.js est un excellent choix pour la création de sites web variés, des simples pages d’atterrissage aux applications web complexes. Il est particulièrement adapté aux sites web qui doivent être rapides, légers et évolutifs.

Pour en savoir plus, consultez le tutoriel Comment créer un backend pour Astro.js.