NgSysV.Création d'un système d'information simple et svelte avec Google's Firestore

Cette série d'articles est indexée sur NgateSystems.com. Vous y trouverez également une fonction de recherche par mot-clé très utile.

Dernière révision : 24 novembre

1. Présentation

La plupart des applications Web existent uniquement pour créer et accéder à des informations partagées. Considérez le site Web https://www.amazon.co.uk/ d'Amazon. L'objectif essentiel de ce système est de vous permettre de parcourir une collection centrale de détails sur les produits, de passer des commandes et de suivre l'avancement de la livraison. Pour que cela fonctionne, Amazon doit :

• Conservez ces informations dans un endroit accessible sur le Web
• Structurez-le et gérez-le pour garantir un accès quasi instantané et une intégrité totale.

Cet article porte sur la technologie des « bases de données » utilisée pour atteindre ces objectifs.

Avertissement - il s'agit d'un long message car les lectures et écritures de base de données dans Svelte vous incitent sans pitié à utiliser l'architecture client-serveur de SvelteKit. Auparavant, votre code s'exécutait exclusivement « côté client » dans votre navigateur Web. Vous allez désormais également exécuter du code sur le serveur local lancé par npm run dev. Cela a des conséquences...

J'ai cherché des moyens de diviser le message mais ils ne fonctionnent pas. Pour aggraver les choses, le Javascript que vous utiliserez contient de nombreuses nouvelles fonctionnalités. Alors, je suis désolé, vous allez juste devoir vous laisser aller.

Mais regardez le bon côté des choses. Une fois que vous aurez traversé cette étape, les choses commenceront à devenir plus faciles. Allez-y lentement. Utilisez chatGPT lorsque vous sentez que je n'ai pas expliqué quelque chose clairement. Le bot vous sera particulièrement utile lorsque vous aurez besoin de conseils sur la syntaxe JavaScript. Se détendre. Ça va être amusant !

2. Configurer votre projet pour utiliser le Firestore de Google

Il existe d'innombrables façons de stocker des données partagées sur le Web. Cette série d'articles utilise le système Firestore de Google car il convient aux débutants. Il nécessite une configuration minimale et s'intègre confortablement dans la structure d'une application Web Svelte.

Vous devrez effectuer quatre étapes initiales :

1. Obtenir un compte Google
2. Créez un projet Firebase sous ce compte
3. Enregistrez votre "webapp"
4. Initialisez une base de données Firestore pour votre projet Firebase

Firebase est le terme générique de Google désignant de nombreux services différents que vous pouvez utiliser pour monter un projet simple sur le Web. Les services d'un compte donné sont gérés via la « console Firebase » de Google à l'adresse https://console.firebase.google.com/. Ils incluent à la fois un service « Stockage » qui vous permet de télécharger des fichiers dans Google Cloud et un service « Firestore Database ». Une base de données diffère d'un fichier en ce sens qu'elle possède une structure configurable. Il vous permet d'accéder et de mettre à jour des éléments discrets de l'ensemble de données configuré.

2.1 Obtention d'un compte Google

Si vous avez une adresse Gmail, vous êtes déjà couvert car elle compte automatiquement comme un compte Google. Si ce n'est pas le cas, suivez les instructions sur Créer un compte Google pour en obtenir un.

2.2 Création d'un projet Firebase pour votre code

Lancez la console Google Firebase et connectez-vous avec votre compte Google (en notant que si vous êtes connecté à Gmail avec celui-ci, vous êtes déjà connecté à la console Firebase également). Cliquez maintenant sur la case "Créer un projet" pour lancer le processus.

Google vous demandera de fournir un nom pour votre projet (je vous suggère d'utiliser le nom du projet que vous utilisez dans VSCode) et proposera une extension qui en fera un "identifiant de projet" unique dans le monde Firebase. Ainsi, par exemple, ma version du projet "Svelte-dev" utilisé dans cette série d'articles est connue de Google sous le nom de "Svelte-dev-afbaf".

En passant, puisque l'identifiant du projet fera finalement partie de l'URL dynamique par défaut de votre application Web, et que Google vous permet de modifier sa proposition initiale d'"extension d'unicité", vous pourriez être tenté d'essayer de modifier cela. à quelque chose de significatif. Cependant, je vous suggère d'oublier cette idée. Premièrement, vous aurez du mal à choisir un identifiant qui convienne aux deux parties. Deuxièmement, d'après mon expérience, ces « URL par défaut » ne sont jamais indexées par Google. Une « URL personnalisée » achetée à un coût minime et liée à votre URL par défaut lors de votre mise en ligne est de loin le meilleur moyen d'obtenir une URL mémorable.

Cliquez maintenant sur "Continuer" pour afficher une page d'inscription "Google Analytics". Vous pouvez ignorer cela en toute sécurité ici, car cela ne concerne que les problèmes de performances sur les applications en direct. Utilisez la barre de défilement pour le refuser et cliquez sur le bouton « Créer un projet » pour continuer.

Les lumières s'éteignent désormais un peu à mesure que Google enregistre votre projet. Enfin, une fois que vous avez cliqué sur un autre bouton « Continuer », vous vous retrouverez dans la fenêtre de la console Firebase de votre projet. Voici une capture d'écran de l'onglet Firestore pour un projet "svelte-dev" :

Cela vaut la peine de s'accorder un moment pour vous familiariser avec cette page car elle est un peu compliquée. La structure de base se compose d'un « menu outils » sur la gauche qui détermine ce qui est affiché dans le panneau principal de droite. Le problème est que le menu est « adaptatif » et conserve une section « Raccourcis du projet » qui mémorise où vous êtes allé. Par conséquent, le menu semble différent à chaque fois que vous ouvrez la console ! Cependant, une fois que vous avez compris cette fonctionnalité, les choses fonctionnent bien. Notez que l'ensemble complet des outils est masqué dans les sous-menus « Construire », « Exécuter » et « Analyses » de leur élément de menu parent « Catégories de produits ». L'ensemble "Build" contient tout ce dont vous avez besoin à l'heure actuelle.

Avant de continuer, notez ce qui suit :

• Les informations en haut de l'écran confirment que le projet svelte-test est actuellement inscrit sur le plan "Spark". Cela signifie que tout ce que vous faites actuellement est gratuit. Finalement, dans cette série d'articles, vous arriverez à un point où vous devrez commencer à payer Google et devrez mettre à niveau votre projet vers le tarif "Blaze". Mais ne vous inquiétez pas : c'est encore loin, vous ne paierez pas beaucoup et vous pouvez créer un budget mensuel pour limiter le montant que Google pourrait tenter de vous facturer.
• les détails du projet sont révélés en cliquant sur le bouton « Aperçu du projet » en haut de la barre d'outils. Les détails disponibles ici incluent un rappel de l'identifiant du projet et un bouton pour supprimer le projet. Si tout va mal, vous pouvez toujours l'utiliser pour effacer le désordre et recommencer. Cela ne vous coûtera rien

2.3 Enregistrement de votre application Web

Firebase a besoin de savoir comment s'appellera votre application Web :

• Cliquez sur icône sous le message « Commencer » et fournissez un surnom lorsque cela vous est demandé. Je vous suggère d'utiliser à nouveau le nom de votre projet ici (par exemple "svelte-dev").
• Ignorez l'offre « Configurer l'hébergement Firebase pour cette application » car, lorsque nous arriverons enfin au déploiement, tous vos besoins d'hébergement seront pris en charge par App Engine.
• Enfin, cliquez sur « S'inscrire » et « Continuer vers la console » pour revenir à l'écran initial de la console.

2.4 - Initialiser une base de données Firestore

Sélectionnez "Firestore Database" dans la pile "Build" dans le menu Outils pour obtenir la vue de la console Firebase illustrée ci-dessous :

Une fois que vous aurez cliqué sur le bouton "Créer une base de données", la console vous demandera de :

1. Définissez votre base de données "Nom et emplacement". "Nom" est l'identifiant de la base de données et ne sera pertinent que si vous envisagez de créer plusieurs bases de données différentes dans votre projet. Laissez ce champ vide, pour l'instant, afin que Google utilise son paramètre "par défaut". "Emplacement" précise où votre base de données sera physiquement située. La liste déroulante des options disponibles ici est peut-être votre première idée de l'ampleur du service Google Cloud. Ses fermes de serveurs sont disponibles partout dans le monde. Vous souhaiterez probablement sélectionner un serveur proche de votre emplacement. Par exemple, j'utilise généralement « europe-west2 : Heathrow » puisque je suis basé au Royaume-Uni. Des pages ailleurs dans la console Google Cloud vous permettent de spécifier les caractéristiques de performances et de disponibilité, mais vous n'avez pas besoin de les consulter pour l'instant.

2. Sécurisez votre base de données avec les "Règles". L'écran ici vous offre le choix entre la définition des "règles" initiales de "production" et de "test". Cela n’a de sens, bien sûr, que si vous savez ce que sont les « règles » – et ce n’est pas le bon moment pour moi de les expliquer. À moins que vous ne le sachiez mieux, j'aimerais que vous cochiez l'option "mode test" ici. Rassurez-vous, j'y reviendrai plus tard lorsque je parlerai d'« autorisation » (et, oh mon Dieu, y a-t-il beaucoup de choses à dire !).

Une fois ces deux étapes franchies, la page Cloud Firestore s'ouvre dans la console Firebase. Et maintenant ?

3. Travailler avec une base de données Firestore

Cette rubrique a pour objectif de répondre aux questions suivantes :

1. Qu'est-ce qu'une base de données ?
2. À quoi ressemble une base de données Firestore ?
3. Comment initialiser une base de données dans la console Firestore ?
4. Comment puis-je accéder à une base de données Firestore en Javascript ?
5. Comment puis-je obtenir un fichier Svelte page.svelte pour charger des données à partir d'une base de données Firestore ?
6. Comment puis-je obtenir un fichier page.svelte Svelte pour ajouter des données à une base de données Firestore ?

3.1 Qu'est-ce qu'une base de données ?

Pour nos besoins immédiats, une base de données est un ensemble de tables contenant des lignes de valeurs pour des « champs » de données nommés. Ainsi, par exemple, une base de données « Commande client » peut contenir

• un tableau « Clients » contenant les valeurs des champs « ID client » et « Détails de l'adresse du client »
• un tableau "Produits" rempli de champs "Numéro de produit" et "Détail du produit"
• un tableau "Commandes clients" avec le détail des commandes pour un "Numéro de produit" passées par un "Identifiant client"

L'important est qu'un tel arrangement soit structuré avec des normes cohérentes pour la dénomination et le formatage du contenu des données

3.2 À quoi ressemble une base de données Firestore ?

Dans Firestore, les tableaux sont appelés « collections » et les lignes qu'ils contiennent sont appelées « documents ». Les documents stockés dans une collection ne doivent pas tous avoir les mêmes champs, mais les noms et le contenu des champs doivent suivre des modèles cohérents dans toute la collection.

Une caractéristique importante d'un document Firestore est qu'il doit avoir un identifiant unique ou « clé ». Parfois, il y aura un champ tel que « Adresse e-mail » dans chaque document que vous pourrez utiliser pour fournir une clé unique « naturelle ». Sinon, Firestore peut être invité à créer automatiquement une clé artificielle.

La conception de bases de données est probablement la partie la plus difficile du développement d'un système et, encore une fois, j'éviterai cela car les problèmes impliqués ne deviendront clairs que lorsque vous aurez acquis une certaine expérience pratique. Cependant, lorsque vous aurez un moment, il vous sera utile de consulter la page du modèle de données Cloud Firestore.

3.3 Comment puis-je initialiser une base de données dans la console Firestore ?

Dans cet article, je prévois de vous montrer comment créer une seule collection de produits dans votre base de données Firestore par défaut. Celui-ci contiendra des documents simples contenant un champ de numéro de produit avec une clé générée automatiquement par Firestore.

Sur la page Firestore de la console Firebase, cliquez sur le bouton "Démarrer la collection" et saisissez le nom "produits" dans le champ "ID de la collection" de la popup qui apparaît maintenant.

Utilisez maintenant la page de saisie de données pour créer un document de produits de test contenant un champ « productNumber » avec une valeur numérique de « 1 » et un champ « productDetails » avec une valeur texte de « Product 1 ».

• Tapez « productNumber » dans la zone de saisie « Field » pour définir le nom du champ, définissez la zone « Type » sur « number » et entrez « 1 » (sans les guillemets) dans la zone « Value ».
• Cliquez sur "Ajouter un champ" et tapez "productDetails" dans la zone de saisie "Field" pour définir le nom du champ, laissez la zone "Type" définie sur son paramètre "string" par défaut et entrez "Product 1" (sans les guillemets). ) dans la case "Valeur".

Maintenant, signez le document en cliquant d'abord sur le bouton « Auto Id », puis sur « Enregistrer ». Voici à quoi devrait ressembler la console maintenant :

Si vous souhaitez ajouter d'autres documents, vous cliquerez sur "Ajouter un document" à ce stade, mais ce n'est pas nécessaire dans ce cas - vous n'avez besoin que d'un seul document pour démontrer la capacité de votre application Web à le lire.

Vous avez terminé ici pour l'instant, mais notez que la « vue panneau » de la console vous permet de modifier ou de supprimer le document que vous venez de créer. Si vous êtes complètement dans le pétrin, vous pouvez même supprimer toute la collection et recommencer.

3.4 Comment puis-je accéder à une base de données Firestore en Javascript ?

C'est ici que les choses commencent à devenir

vraiment intéressantes !

Google fournit une bibliothèque de fonctions Javascript pour vous permettre de lire et d'écrire des documents Firestore. De telles bibliothèques sont appelées « API » (Application Program Interfaces). Jetez un œil au code suivant qui montre comment la bibliothèque Firebase/Firestore serait utilisée pour lire tous les documents de la collection de produits de svelte-dev :

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

Concentrez-vous sur la section qui commence const productsCollRef = collection(db, "products");. Cela utilise les appels d'API Firestore pour charger une copie triée de tous les documents de la collection de produits dans la variable State currentProducts.

Tout d'abord, les fonctions de collection et de requête, tirées de la bibliothèque API du client Firestore, sont utilisées pour pointer Firebase vers la collection de produits et définir une requête à exécuter dessus. Ensuite la requête est lancée par un appel API getDocs.

Je n'essaierai pas de décrire les mécanismes de cette séquence d'appels API Firestore. Traitez-les comme un morceau de « code passe-partout » – du code – le genre de chose que vous écrivez une fois et que vous copiez simplement par la suite. Puisque vous constaterez que vous avez besoin de toute une bibliothèque de modèles pour couvrir la gamme complète des opérations de « lecture », « mise à jour » et « suppression » de Firestore, vous trouverez peut-être utile de consulter la publication 10.1 – Modèles de commandes Firestore CRUD. Si vous souhaitez consulter la propre description de l'API par Google, vous trouverez des liens vers celles-ci à la fin de l'article 10.1.

"CRUD" est ici l'abréviation de "créer", "lire", "mettre à jour" et "supprimer".

Le résultat getDocs est renvoyé sous la forme d'un tableau de documents classiquement appelé « instantané ». Notez cependant que l’appel à la fonction getDocs est précédé d’un mot clé wait.

Le mot-clé wait est nécessaire ici car, par défaut en Javascript, les instructions faisant référence à des sources de données externes dont l'exécution peut prendre un temps imprévisible sont traitées de manière asynchrone. Le mot-clé « wait » (bien qu’il s’agisse d’une simplification grossière) vous permet essentiellement de remplacer cet arrangement. Lorsque vous aurez plus de temps, vous trouverez peut-être utile de consulter Un guide simple de l'API Javascript fetch() et le mot-clé "attendre"

Mais pour le moment, en revenant à notre extrait de code ci-dessus, regardez la section commençant par l'instruction const firebaseConfig.

La déclaration firebaseConfig initialise un objet contenant les détails de configuration nécessaires pour connecter votre application Web à votre projet Firebase spécifique. Il comprend diverses clés et identifiants que Firebase utilise pour localiser et authentifier votre application. Vous trouverez les paramètres de votre application Web particulière dans « Présentation du projet/Paramètres du projet » sur la console Firebase. Les paramètres firebaseConfig dans les exemples de code ci-dessous ont été "obscurcis" car ils sont uniques à mon projet et ne doivent pas être transmis à la légère (nous en reparlerons sous peu). Lorsque vous essayez l'exemple de code ci-dessous, vous devrez copier les paramètres FirebaseConfig de votre propre projet.

Avec firebaseConfig initialisé, la webapp peut initialiser la variable db requise par la const productsCollRef = collection(db, "products"); déclaration :

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

Enfin, vous vous demandez peut-être d'où viennent ces fonctions API. La réponse est qu'ils sont importés depuis des emplacements de votre projet par les trois instructions en haut du bloc de code :

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

Ici, les "bibliothèques modulaires" sont accessibles pour fournir des fonctions pour votre code. Les fonctions nommées telles que la collection sont extraites d'un module parent pour remplir les références requises plus tard dans le code.

Mais cela nous amène à la question « Et comment les bibliothèques modulaires entrent-elles dans mon projet en premier lieu ? » La réponse, bien sûr, est que vous devez les mettre là, et l'outil que vous utilisez pour ce faire est le fidèle vieux npm.

Retournez dans une session de terminal de test svelte VSCode (terminez le serveur de développement si nécessaire avec quelques frappes ctrl-C) et exécutez l'instruction suivante'

import { collection, query, getDocs, orderBy } from "firebase/firestore";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
    apiKey: "AIzaSyCE933 ... klfhFdwQg1IF1pWaR1iE",
    authDomain: "svelte-dev-afbaf.firebaseapp.com",
    projectId: "svelte-dev-afbaf",
    storageBucket: "svelte-devt-afbaf.appspot.com",
    messagingSenderId: "1027 ... 85697",
    appId: "1:1027546585697:web:27002bf ..... b0f088e820",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);

const productsCollRef = collection(db, "products");
const productsQuery = query(productsCollRef, orderBy("productNumber", "asc"));
const productsSnapshot = await getDocs(productsQuery);

let currentProducts = [];

productsSnapshot.forEach((product) => {
    currentProducts.push({productNumber: product.data().productNumber});
});

return { products: currentProducts } // accessed in +page.svelte as data.products

Après une minute ou deux (l'installation implique un téléchargement important), vous serez prêt à exécuter du code qui télécharge une collection de bases de données Firestore. Mais vous ne savez toujours pas comment intégrer cela dans une application Web Svelte. Alors, passons à la question suivante...

3.5 Comment puis-je obtenir un fichier page.svelte Svelte pour charger des données à partir d'une base de données Firestore ?

Cela a été un long chemin mais, accrochez-vous, vous avez presque terminé.

Actuellement, dans le

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript