= Héberger un site Web dynamique sur Google Firebase en utilisant Node.js et Cloud Firestore DB =
Tushar Kapoor : (https://www.tusharck.com/)
URL Git de démonstration : httpsgithub.com/tusharck/firebase-demo
= Pourquoi l'hébergement Firebase ? =
Firebase est une plate-forme d'applications complète construite sur l'infrastructure de Google. Elle fournit donc un moyen sécurisé, rapide, gratuit (options payantes également disponibles pour des ressources supplémentaires) et simple d'héberger votre contenu sur le applications web ou mobiles
== Principales caractéristiques et avantages du niveau gratuit : ==
- Il donne un domaine personnalisé gratuit&
SSL(SSL fournit une couche de sécurité standard pour les connexions https
- Cloud Firestore : une base de données flexible et évolutive pour la synchronisation des données en temps réel entre les applications clientes
- Autres fonctionnalités : fonctions cloud, messagerie cloud (FCM), crashlytics, liens dynamiques, hébergement, kit ML, stockage, surveillance des performances, prévisions et laboratoire de test (les fonctionnalités et les ressources de ces produits peuvent être augmentées en achetant un forfait payant, mais les services de niveau gratuit sont très bons. Pour consulter les plans, consultez les tarifs de Firebase)
- Mise à l'échelle automatique des ressources
= Étapes pour héberger votre site Web dynamique sur Firebase =
== Exigences ==
**1. Compte Google ** Si vous n'avez pas de compte Google, vous devez en créer un. Vous pouvez le faire en vous rendant sur httpsaccounts.google.com/SignUp. **2. Node.js et npm** Mac/Windows Vous pouvez télécharger le programme d'installation depuis httpsnodejs.org/en/download/. Linux
Suivez les étapes ci-dessous pour installer Node.js :
1. Ouvrir un terminal
2. Exécutez les commandes suivantes :
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs ** J'ai utilisé Remarque : ** **
setup_13.xparce qu'au moment du tutoriel la dernière version était
**13**vous pouvez vérifier la dernière version en allant sur httpsnodejs.org/en/
Pour vérifier si Node.js et npm sont correctement installés, exécutez les commandes suivantes, qui afficheront la version installée :
nœud -v
npm-v
**3. Firebase-CLI (interface de ligne de commandeCe sont les outils de gestion, de visualisation et de déploiement des projets Firebase
npm install -g firebase-tools
= Étape 1 : Créer un projet Firebase =
- Allez sur httpsfirebase.google.com et
Connectez-vousdans le coin supérieur droit
- Cliquer sur
Allez dans la console, depuis le coin supérieur droit
- Cliquez ensuite sur
Créer un projet, comme indiqué ci-dessous
4. La prochaine chose est d'entrer le nom de votre projet, et appuyez sur continuer
5. Appuyez sur Continuer pour activer Google Analytics pour votre projet Firebase (si vous ne le voulez pas, cochez pour désactiver)
6. Sélectionnez l'emplacement le plus proche pour Google Analytics
7. Cliquez sur
**Créez un projet et attendez qu'il se charge. Ensuite, vous verrez quelque chose comme ci-dessous
= Étape 2 : Initialiser la connexion Firebase =
- Ouvrir une ligne de commande/terminal puis créer et aller dans un nouveau répertoire
mkdir mon-projet-firebasecd mon-projet-firebase
2. Pour héberger un site Web sur Firebase, connectez-vous à Firebase à l'aide de la commande suivante. Après avoir exécuté la commande, une fenêtre de navigateur s'ouvrira vous demandant de vous connecter à Firebase à l'aide de vos informations d'identification Google. Entrez les informations d'identification ici et Firebase se connectera à votre système
connexion à la base de feu
= Étape 3 : Initialisez le projet Firebase dans votre système =
- Nous devons maintenant initialiser le projet que nous avons créé sur la console Firebase dans le système. Pour ce faire, exécutez la commande ci-dessous
initialisation de la base de feu
2. Appuyez sur la touche bas puis sélectionnez
**deux choses **en appuyant sur la **touche de la barre d'espace
- Les fonctions
- Hébergement
Puis
**appuyez sur Entrée** pour continuer
3. Sélectionnez ensuite
puis appuyez sur entrée
**Utiliser un projet existant**
4. Appuyez sur Entrée sur
**my-firebase-project** **ou le nom du projet que vous avez utiliséou le nom du projet que vous avez utilisé
5. Sélectionnez
**Javascript** et appuyez sur Entrée
6. Vous pouvez dire
**Non** à Voulez-vous utiliser ESLint pour détecter les bogues probables et appliquer le style ?
7. Tapez
**Oui** pour installer les dépendances avec npm
8. Ici, nous devons effectuer deux tâches :
- Vous devez sélectionner le répertoire dans lequel votre site Web et vos actifs résideront. Par défaut c'est
pubic, vous pouvez appuyer sur Entrée pour continuer ou vous pouvez changer le nom de répertoire souhaité
- Les types
Ouipour la page mono-application afin que vos URL dynamiques puissent être redirigées vers leur bonne destination
9. Testez l'application Firebase sur votre système local en exécutant la commande suivante. Ensuite aller à
**httplocalhost:5000** pour voir votre site Web de base en cours d'exécution
firebase serve --uniquement hébergement,fonctions
Vous devriez voir quelque chose comme ceci ci-dessous après avoir ouvert le
**httplocalhost:5000** URL
10. Fermez le serveur depuis le terminal
= Étape 4 : Installation des packages et création du répertoire des vues pour le site Web dynamique =
- Ici, nous allons basculer dans le répertoire des fonctions pour ce faire, utilisez
fonctions cd
**2. Installez Express ** Il s'agit d'un cadre d'application Web Node.js minimal et flexible
npm j'exprime --save
**3. Install Handle Bars ** Il s'agit d'un moteur de template pour Node.js utilisé pour le front-end dynamique du site Web
npm i guidon --save
**4. Installer la consolidation**
npm je consolide --save
5. Créez un dossier nommé
**views** à l'intérieur du dossier **functions** dans lequel nous allons stocker tout le code frontal
mkdir
vues
6. Revenez au répertoire principal en exécutant la commande suivante :
cd .
= Étape 5 : Configurer Firestore (Cloud Database) =
== Configuration de la base de données ==
- Allez sur httpsconsole.firebase.google.com/
- Sélectionnez votre projet
- Sélectionner
Base de donnéesdu volet de gauche
4. Cliquez sur
**Créer une base de données**
5. Sélectionnez Démarrer en mode test car sinon vous ne pourrez pas accéder à la base de données depuis votre système. Nous modifierons ce paramètre une fois que nous aurons terminé le développement du site Web
Puis clique
**Suivant** après l'avoir fait
6. Sélectionnez l'emplacement de votre base de données Firestore
**Après avoir défini cet emplacement, vous ne pourrez plus le modifier ultérieurement. Note: **
== Créer des données ==
- Cliquez sur démarrer la collecte
2. Entrez le
** ID de collection que vous pouvez échantillonner pour l'instant
3. Entrez les données d'échantillon. Entrer
**sample_doc **comme **ID de document. **Entrez **Cap** dans le champ **. J'aime Cloud** dans la **Valeur Cliquez ensuite sur **Enregistrer**
= Étape 6 : Construire le contenu dynamique du site Web =
Nous diviserons la partie en deux parties, dans la première partie, nous verrons comment récupérer les données de Firestore et les utiliser sur le site Web. Dans la deuxième partie, nous verrons comment soumettre les données du formulaire
**Tout d'abord, nous allons télécharger les informations d'identification pour accéder à Firestore**
2. Cliquez sur
**paramètres** dans le volet de gauche et accédez à **Paramètres du projet**
3. Allez à
**Comptes de service** et cliquez sur **Générer une nouvelle clé privée
4. Cliquez sur
** Générer la clé Cela donnera une fenêtre contextuelle pour télécharger la clé. Stockez la clé dans votre dossier **fonctions** de votre site Web
== Récupération depuis Firestore ==
- Ouvrir
index.jsdans le dossier des fonctions
2. Nous devons définir certaines des bibliothèques que nous voulons utiliser dans notre application. Ce sont les mêmes bibliothèques que nous avons installées plus tôt
fonctions const = require('firebase-functionsconst express = require('expressconst moteurs = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Ici, nous définissons quelques éléments :
- Initialiser l'application en utilisant express
- Nous mettrons notre moteur en guidon
- Ensuite, nous dirons à l'express que notre code frontal sera dans le dossier des vues
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Autorisez votre application à accéder à votre base de données Firestore
*Note:*
1. Changer
**YOUR_SDK_NAMEjson avec le fichier que vous avez téléchargé pour **informations d'identification pour accéder à Firestore2. Remplacez l'URL de la base de données par l'URL de votre base de données. Pour voir l'URL, vous pouvez **Paramètres >Compte de service**
var serviceAccount = exiger
YOUR_SDK_NAME.jsonadmin.initializeApp({credential : admin.credential.cert(serviceAccount), databaseURL : "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Fonction pour récupérer les données de Firestore
- L'identifiant de collecte est
échantillon
- L'ID du document est
exemple_doc
Nous avons défini ce qui précède lors de la saisie des données de l'échantillon
fonction asynchrone getFirestoreconst firestore_con = attendre admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Aucun document de ce type}
sinon {retourner doc.data
.catch(err =>{ console.log('Erreur lors de la récupération du document', errreturn writeResult
}
**Nous utilisons Note : ** **async** car nous devons attendre que l'opération de promesse soit terminée entre la base de données et notre site Web
6. Créez la route et envoyez le résultat au frontal
app.getasync (request,response) var db_result = attendre getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Créer
**index.hbs** dans le dossier **views**. hbs est un fichier de guidon Remarque : **
8. Écrivez ce code HTML de base à l'intérieur
**index.hbs** pour voir le résultat récupéré
Tushar Chand Kapoor
