Dans l'article Introduction à Firebase, un aperçu de Firebase a été fourni. On vous a montré comment configurer un compte Firebase et créer un projet Firebase sans frais ! Dans cet article, vous vous basez sur ce que vous avez appris en configurant une base de données basée sur NoSQL Cloud, puis en créant une page Web très simple pour y ajouter des éléments. La base de données stockera simplement les jeux de mots avec une catégorie et un identifiant. La figure 1 montre la page Web qui sera utilisée pour ajouter les éléments.
Illustration 1 : Une page Web écrivant dans une base de données Firestore NoSQL.
Configuration de votre base de données Cloud Firestore dans Firebase
Pour commencer, revenez à Firebase et créez un nouveau projet. Vous pouvez accéder à Firebase en vous rendant sur https://console.firebase.google.com/. Cette page vous donnera la possibilité d'ajouter un nouveau projet, comme illustré à la figure 2. Vous pouvez trouver plus d'informations sur la création du projet dans l'article précédent.
Illustration 2 : Ajout d'un nouveau projet Firebase.
J'ai nommé mon projet "The Pun Project". Une fois que vous avez créé un nouveau projet, vous serez redirigé vers la console Firebase, comme illustré à la figure 3.
Illustration 3 : La console Firebase
Dans la console, vous pourrez créer la base de données que la page Web utilisera. La première étape consiste à cliquer sur l'option Base de données dans le menu de navigation de gauche. Cela affichera un écran comme illustré à la figure 4 qui vous permettra de créer un Cloud Firestore, qui sera votre base de données NoSQL.
Illustration 4 : L'écran de démarrage pour créer un Cloud Firestore
Cliquer sur le bouton Créer une base de données lancera le processus de marche à travers les étapes de création de la base de données. La première décision à prendre, comme le montre la figure 5, est de savoir si la base de données sera démarrée en mode production ou test. Afin de garder cet article simple et axé sur l'ajout de données, le mode test sera sélectionné. Lorsqu'une base de données prête pour la production est créée, vous souhaiterez y ajouter plus de sécurité que ce qui est fourni en mode test.
Illustration 5 : Sélection du mode pour votre base de données Firestore
Avec le mode sélectionné, l'étape suivante consiste à indiquer l'emplacement où vous souhaitez créer la base de données. Vous créez votre base de données dans le Cloud, vous avez donc le choix des emplacements quant aux serveurs que vous souhaitez utiliser. En cliquant sur la liste déroulante des emplacements Cloud Firestore illustrée à la figure 6, vous pourrez choisir un emplacement multirégional ou régional. Je suggère que si vous êtes en Amérique du Nord, vous sélectionnez l'emplacement nam5 (us-central). Si vous êtes ailleurs, choisissez la région la plus proche de votre emplacement.
Illustration 6 : Sélection d'une région pour votre base de données Firestore
Une fois votre région sélectionnée, cliquez sur le bouton Terminé et Firebase provisionnera votre base de données Cloud Firestore. Une fois le provisionnement terminé, vous serez prêt à accéder à la page de la console de base de données, comme illustré à la figure 7, où vous pourrez commencer à utiliser votre base de données en ligne.
Illustration 7 : La console de base de données dans Firebase
Collections et documents en NoSQL
Si vous avez suivi, à ce stade, vous avez créé une base de données basée sur le cloud NoSQL dans le Cloud Firestore de Firebase. Il n'entre pas dans le cadre de cet article d'entrer dans les détails de NoSQL, mais je vais vous donner l'essentiel de ce que vous devez savoir pour effectuer l'exemple d'ajout de données promis dans cet article.
Une base de données NoSQL est composée de collections contenant des documents . Un document contient essentiellement les champs que vous prévoyez de stocker. Par exemple, dans cet article, une collection de jeux de mots est en cours de création. La collection Puns contiendra des documents. Chaque document sera un jeu de mots différent.
Dans Firebase, vous pouvez cliquer sur le lien "+ Démarrer la collection" illustré à la figure 7 pour afficher une boîte de dialogue qui vous permettra de créer la collection Puns. Vous serez invité, comme illustré à la figure 8, à ajouter un ID de collection. Dans ce cas, nous appellerons la collection "Puns".
Illustration 8 : Créer une collection Cloud Firestore
Une fois la collection créée, vous pourrez créer des documents dans la collection, comme illustré à la figure 9. Encore une fois, un document est essentiellement un enregistrement dans votre base de données NoSQL. Comme il s'agit de NoSQL, aucune règle stricte ne vous oblige à vous assurer que chaque champ se trouve dans chaque document (enregistrement) ou que chaque document d'une collection correspond même. C'est à vous de le faire.
Illustration 9 : Ajouter un document à une collection
Chaque document que vous créez devra avoir un ID de document. Vous pouvez soit entrer cet ID, soit choisir de le laisser vide et un ID sera automatiquement généré. Pour que les choses restent plus lisibles dans l'exemple utilisant des jeux de mots, je vais donner au premier document un ID de Pun0001.
En utilisant la console pour ajouter des documents, pour chaque document, vous devez spécifier non seulement les valeurs de données, mais également le nom des champs et les types. Une liste déroulante vous permet de sélectionner le type de données que vous souhaitez ajouter.
Dans la figure 10, deux champs de chaîne ont été ajoutés qui seront utilisés pour l'exemple Pun. Il s'agit d'une Catégorie et le texte du jeu de mots (PunText ).
Illustration 10 : Mise en place d'un jeu de mots.
Lorsque vous cliquez sur le bouton Enregistrer dans la boîte de dialogue illustrée à la figure 10, le document (qui est essentiellement un enregistrement) sera créé comme illustré à la figure 11. À ce stade, une base de données Cloud Firestore a été créée sur le Cloud et un enregistrement ( document) a été ajouté ! Plus précisément, une collection appelée "Puns" a été créée avec un document appelé "Pun0001" qui contient des champs appelés Category et PunText.
Illustration 11 : La base de données Cloud Firestore avec un document ajouté !
Notez qu'à ce stade, si vous souhaitez ajouter des enregistrements supplémentaires à l'aide de la console, vous devez cliquer sur le lien "+ Ajouter un document" affiché au milieu de la figure 11. Vous pouvez ensuite ajouter des jeux de mots supplémentaires avec des identifiants, des catégories et un texte de jeu de mots. Vous voudriez faire attention à vous assurer que chaque fois que vous ajoutez un nouveau jeu de mots, vous utilisez les mêmes noms de champs.
Bien que vous puissiez penser qu'il est fastidieux d'avoir à ressaisir les noms de champs, c'est à cause de la flexibilité de NoSQL. Une façon de contourner ce problème est de créer une application Web qui fera cette partie du travail pour vous !
Remarque :Vous remarquerez dans la figure 11 qu'il existe quelques endroits où vous pouvez démarrer de nouvelles collections. Il n'entre pas dans le cadre de cet article d'approfondir la structure des collections et des documents NoSQL.
Création d'une application Web pour accéder à Cloud Firestore
Une fois votre Cloud Firestore configuré, vous pouvez désormais ajouter des données depuis l'extérieur du site Firebase. Pour ce faire, vous devrez d'abord récupérer des informations de Firebase qui vous permettront d'associer votre application Web au projet Firebase que vous avez créé.
Commencez par cliquer sur le lien Aperçu du projet dans la partie supérieure gauche du menu de navigation. Cela vous amènera à une page de présentation de votre projet, comme illustré à la Figure 12.
Illustration 12 : La page de présentation du projet Firebase
Sur cette page, vous verrez qu'il y a des icônes pour quatre types de projets qui peuvent être sélectionnés. Ceux-ci sont pour iOS, Android, Web et Unity. Cliquez sur l'icône pour indiquer qu'une application Web est en cours. Cela affichera la boîte de dialogue illustrée à la figure 13 qui demandera un nom pour l'application. Le nom en cours de création est utilisé pour coordonner l'application Web que vous créez avec le projet Firebase et les fonctionnalités du projet Firebase. Pour cette démo, j'utilise le nom "My Punny Web App" et je clique sur le bouton Enregistrer l'application.
Une fois cliqué, vous serez présenté avec un écran qui comprend le code HTML que vous ajouterez à votre application Web. Ce code HTML est ce qui lie Firebase à votre application.
Illustration 13 : Le code Firebase pour l'application Web.
Vous voudrez copier ce code pour le coller dans la page HTML que nous créerons plus tard dans les prochaines étapes de cet article. Si vous quittez la page illustrée à la figure 13, vous pouvez toujours revenir à ce code d'application à partir de la console Firebase. Cliquez simplement sur l'engrenage à côté du lien Aperçu du projet dans le coin supérieur droit et sélectionnez Paramètres du projet. La page résultante contiendra des informations sur votre projet
Créer la page Web/l'application pour accéder à Firestore
Avec tout mis en place côté Firebase, il est temps de créer la page web qui permettra d'ajouter des données. La liste 1 contient le code HTML de base pour afficher la page qui a été montrée dans la figure 1 plus tôt.
Liste 1 : HTML de base pour la page Punny.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<script src="./pun.js"></script>
</body>
</html>
La liste 1 est du HTML de base. Trois champs sont mis en place pour permettre à l'utilisateur d'entrer des données. Chacun se voit attribuer un identifiant qui sera nécessaire pour associer les données saisies à un document qui sera ajouté au Firestore. un bouton est également inclus avec un événement pour stocker les données. Actuellement, cette fonction n'a pas été écrite; c'est le but de cet article ! J'ai également inclus un lien vers un fichier JavaScript externe appelé pun.js. Initialement, ce fichier est vide, mais cela sera changé sous peu !
C'est dans la liste 1 que vous voudrez coller le code qui a été copié à partir de Firebase plus tôt. Le code illustré à la figure 13 doit être collé vers la fin de votre balise body, dans ce cas juste avant l'inclusion du script puns.js. J'ai collé le code de mon application de jeux de mots dans la liste 2.
Liste 2 : La page html avec le code Firestore ajouté.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o",
authDomain: "the-pun-project.firebaseapp.com",
databaseURL: "https://the-pun-project.firebaseio.com",
projectId: "the-pun-project",
storageBucket: "the-pun-project.appspot.com",
messagingSenderId: "354041199852",
appId: "1:354041199852:web:4f9a613485174688f0f9c9",
measurementId: "G-4672MVCRK2"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="./pun.js"></script>
</body>
</html>
Avec l'ajout du script à votre HTML, vous avez câblé votre application pour accéder à Firebase. Cependant, vous devez ajouter une ligne de code supplémentaire. Alors que le code généré fournira les connexions à Firebase, vous devez ajouter un lien supplémentaire pour obtenir le code qui accédera à la base de données Cloud Firestore dans Firebase. Vous voudrez ajouter la ligne source de script suivante aux listes :
Cela peut être ajouté juste après l'appel à :
L'étape suivante consiste à ajouter la logique qui associera les champs saisis par l'utilisateur aux champs à ajouter à la base de données Firestore. Cela sera fait dans le fichier puns.js pour garder le code propre.
Le processus consiste à créer d'abord une variable de base de données qui sera liée à la base de données Firebase Cloud Firestore. Ensuite, des variables devront être créées qui peuvent être remplies avec les valeurs que l'utilisateur a saisies sur notre page. Cela sera fait avec des appels standard document.getElementById(). Enfin, la variable qui brillait à partir de la page Web doit être ajoutée à la base de données Cloud Firestore en tant que champs dans un document de la collection Puns. Le Listing 3 montre le JavaScript qui peut accomplir tout cela.
Liste 3 : Le fichier JavaScript pun.js
var db = firebase.firestore();
function storeData() {
var inputPun = document.getElementById("PunID").value;
var inputCategory = document.getElementById("Category").value;
var inputText = document.getElementById("PunText").value;
db.collection("Puns").doc(inputPun).set({
Category: inputCategory,
PunText: inputText
})
.then(function() {
console.log("Doc successful");
})
.catch(function(error) {
console.error("Error writing doc", error);
});
}
Notez que dans le Listing 3, la base de données a été créée avec la variable appelée db. Cette variable est ensuite utilisée pour créer le nouveau document (enregistrement) en spécifiant le nom de la collection appelée Puns dans le processus illustré à la figure 8. Ceci est suivi du nom du document, qui dans ce cas est notre ID de jeu de mots recueilli à partir de l'utilisateur et mis dans la variable, inputPun. Dans le document, deux champs sont ajoutés, ce qui est fait dans l'ensemble. Pour ajouter les champs, le nom du champ est listé, puis deux-points et enfin la valeur de chaîne à ajouter. Dans ce cas, inputCategory est ajouté au champ Category et inputText est ajouté au champ PunText.
La liste comprend également des tests et une logique d'erreur pour consigner un message dans la console. Si vous ouvrez la console développeur de votre navigateur, vous verrez un message "Doc réussi" affiché lorsqu'un document est ajouté à votre Cloud Firestore, comme illustré à la figure 14.
Illustration 14 : Un document ajouté avec succès.
Il peut être confirmé que le document a été ajouté en revenant au projet dans la console Firebase et en consultant la base de données (en cliquant sur Base de données dans le menu de navigation de gauche). La figure 15 montre que l'ajout du nouveau jeu de mots a réussi.
Illustration 15 : La collection Puns avec le nouveau document pun002
Résumer
Beaucoup de choses ont été couvertes dans cet article sur l'ajout de documents à une base de données Firebase Cloud Firestore NoSQL. Vous avez appris à le faire depuis la console et depuis une simple application Web. Ce n'est qu'un début pour montrer à quel point l'ajout peut être facile. Cela dit, ajouter en une seule étape dans un système CRUD. Il y a encore plus à apprendre ! Oh, et si vous aimez les jeux de mots, consultez mon livre, Punny or Not Book of Puns, disponible sur Amazon !
# # #
