Développement Web Fullstack

Mémento de procédure en programmation

Réaliser une application web avec Firebase, Firestore

par · Publié · Mis à jour

Firebase d’avoir une base de données NoSQL principalement dans le cloud. Mais ça ne se limite pas à ça, il y a aussi du stockage d fichier, de code, de l’analytics, mais le principal usage à ma connaissance est la base temps réel NoSQL, son avantage est de permettre de mettre sur pied rapidement une application, pour peu qu’on soit familier avec lui.

Création d’un compte Firebase

Pour créer un compte Firebase, vous devez disposer d’un compte Google, et ensuite activer votre compte Firebase.

Contexte du tutoriel

Le contexte de l’application est une application dans une page html, donc pas besoin d’avoir NodeJs, nous verrons qu’il est possible de créer un projet de cette façon et de faire appel aux librairies, mais pour des raisons de simplicité, nous allons au plus simple.

Ensuite vous devez créer un projet et remplir des informations sur votre projet. Vous disposez d’niformation de configuration pour votre application.

Inclusion des scripts

Il y a plusieurs scripts à inclure en fonction de ce que vous voulez faire (analytics ou non) mais le principal fichier à inclure est le firebase-app.js

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>

    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-firestore.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.15.0/firebase-analytics.js"></script>
#exemple de configuration Firebase
        // Your web app's Firebase configuration
        var firebaseConfig = {
            apiKey: "DCZ28p7gilP15WoymVHn-A",
            authDomain: "myapp-bull3503.firebaseapp.com",
            databaseURL: "https://myapp-bull3503.firebaseio.com",
            projectId: "myapp-bull3503",
            storageBucket: "myapp-bull3503.appspot.com",
            messagingSenderId: "2017024",
            appId: "1:2017024:web:e282485405d09",
            measurementId: "G-J4XXXQPHT9"
        };

// initialisation de l'app
firebase.initializeApp(firebaseConfig);

Créer une base de données orientée documents Cloud Firestore

Cette base est en accès public pour une durée de 30 jours, vous pourrez vous y connecter sans mot de passe, passé ce délai, vous recevrez une alerte comme quoi la base ne sera plus accessible en public. Dans la cnsole, vous verrez Realtime Database et Cloud Firestore, quelle est la différence? C’est expliqué sur cet article.

#paramétrage de la base de données
à l'origine le paramétrage est permissif pour vous permettre de tester la base

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.time  < timestampe.date(2020,7,6);
    }
  }
}

Mais au bout de 30 jours vous recevez un mail pour modifier l'accès à la base avec des règles plus strictes.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Mais au bout de 30 jours vous recevez un mail pour modifier l'accès à la base avec des règles plus strictes.

Créer un utilisateur

Pour créer un utilisateur, chargez d’abord la librairie auth, qui vous permet de créer un utilisateur et de gérer les connexion.

#création d'un utilisateur via un formulaire
        firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            console.log(errorCode, ':', errorMessage)
        });

Si la création d’un utilisateur s’est faite avec succès, vous êtes automatiquement loggé. Si vous n’arrivez pas à créer un utilisateur de cette façon (probablement parce que vous avez oublié d charger la librairie auth) et que vous désirez rapidement en créer un, vous pouvez aller directement sur la console, dans la sidebar de gauche Authentification puis Ajouterun utilisateur

Connexion d’un utilisateur

        firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            console.log(errorCode, ':', errorMessage)
        });

Pour maintenir la connexion de l’utilisateur entre différentes pages, il vous faudra utiliser le localStorage.

Lire une table

Je suppose que vous incluiez à chaque page les librairie correspondantes.

        var firebaseConfig = {
            ...
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
        firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
          ...
        });
#instanciation de la connexion à Firestore
var db = firebase.firestore();

Découvrez comment administrer la base de données depuis le site de Firebase.

Vous aimerez aussi...