Vue avec Firebase : guide pratique

Vue avec Firebase : guide pratique

Pourquoi Vue avec Firebase : guide pratique ?

Le développement moderne nécessite souvent une combinaison de technologies pour répondre aux besoins croissants des utilisateurs et des entreprises. Vue.js, une bibliothèque JavaScript progressive pour la création d'interfaces utilisateur réactives, s'est rapidement établie comme un choix populaire parmi les développeurs web. Firebase, d'autre part, offre un ensemble de services backend complets pour construire des applications mobiles et Web.

Combinez Vue.js avec Firebase, et vous obtenez une solution complète pour développer des applications frontales réactives en temps réel, tout en profitant des fonctionnalités robustes du backend Firebase. Ce guide pratique vous montrera comment intégrer Vue.js avec Firebase pour créer un gestionnaire de tâches simple et fonctionnel.

Un cas d'usage concret serait de développer une application pour gérer les tâches personnelles, où chaque utilisateur peut créer, mettre à jour et supprimer des tâches. Cette application mettrait en œuvre la récupération et l'enregistrement des données dans un backend Firebase, tout en utilisant Vue.js pour afficher ces données de manière réactive.

Prerequis

• Connaissance de base de JavaScript
• Familiarité avec HTML et CSS
• Installation de Node.js (v14 ou plus)
• Installation de Vue CLI (v4 ou plus)

Vous pouvez installer Vue CLI en utilisant la commande suivante :

npm install -g @vue/cli

Concepts fondamentaux

1. Firebase Authentication

Firebase Authentication permet d'authentifier et d'autoriser les utilisateurs à accéder à vos applications.

Schéma mental :

+-------------------+
|  Authentification |
|                   |
|  +------------+   |
|  | Login      |   |
|  +------------+   |
|  +------------+   |
|  | Register   |   |
|  +------------+   |
|  +------------+   |
|  | Logout     |   |
|  +------------+   |
+-------------------+

Code fonctionnel :

<template>
  <div>
    <button @click="login">Login</button>
    <button @click="register">Register</button>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/auth';

export default {
  methods: {
    login() {
      firebase.auth().signInWithEmailAndPassword('user@example.com', 'password')
        .then((userCredential) => {
          console.log(userCredential);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    register() {
      firebase.auth().createUserWithEmailAndPassword('user@example.com', 'password')
        .then((userCredential) => {
          console.log(userCredential);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    logout() {
      firebase.auth().signOut()
        .then(() => {
          console.log('User signed out');
        })
        .catch((error) => {
          console.error(error);
        });
    }
  }
};
</script>

2. Firebase Firestore

Firebase Firestore est une base de données NoSQL hébergée par Google Cloud, qui offre des capacités de stockage et d'accès aux données en temps réel.

Schéma mental :

+-------------------+
|    Firestore      |
|                   |
|  +------------+   |
|  | Collection |   |
|  +------------+   |
|  +------------+   |
|  | Document   |   |
|  +------------+   |
+-------------------+

Code fonctionnel :

<template>
  <div>
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        task.text
      </li>
    </ul>
  </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/firestore';

export default {
  data() {
    return {
      tasks: []
    };
  },
  methods: {
    addTask() {
      const db = firebase.firestore();
      db.collection('tasks').add({
        text: 'New Task'
      })
      .then((docRef) => {
        console.log('Document written with ID: ', docRef.id);
      })
      .catch((error) => {
        console.error('Error adding document: ', error);
      });
    }
  },
  created() {
    const db = firebase.firestore();
    db.collection('tasks').onSnapshot((snapshot) => {
      this.tasks = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    });
  }
};
</script>

3. Firebase Storage

Firebase Storage est un service pour stocker et accéder aux fichiers.

Schéma mental :

+-------------------+
|   Firebase Storage|
|                   |
|  +------------+   |
|  | Upload     |   |
|  +------------+   |
|  +------------+   |
|  | Download   |   |
|  +------------+   |
+-------------------+

Code fonctionnel :

<template>
  <div>
    <input type="file" @change="uploadFile" />
  </div>
</template>

<script>
import firebase from 'firebase/app';
import 'firebase/storage';

export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const storageRef = firebase.storage().ref(file.name);
      storageRef.put(file).then((snapshot) => {
        snapshot.ref.getDownloadURL().then((url) => {
          console.log(url);
        });
      }).catch((error) => {
        console.error(error);
      });
    }
  }
};
</script>

Mise en pratique : projet fil rouge

Nous allons construire un gestionnaire de tâches simple avec Vue.js et Firebase.

1. Initialisation du projet Vue

   vue create task-manager
   cd task-manager
   

2. Installation des dépendances Firebase

   npm install firebase
   

3. Configuration de Firebase dans le projet

   Créez un fichier firebase.js à la racine du projet et ajoutez les configurations suivantes :

   import firebase from 'firebase/app';
   import 'firebase/auth';
   import 'firebase/firestore';
   
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID"
   };
   
   if (!firebase.apps.length) {
     firebase.initializeApp(firebaseConfig);
   }
   
   export default firebase;
   

4. Création du composant TaskManager.vue

   <template>
     <div>
       <button @click="login">Login</button>
       <button @click="register">Register</button>
       <button @click="logout" v-if="user">Logout</button>
       <ul>
         <li v-for="task in tasks" :key="task.id">
           task.text
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   import firebase from '../firebase';
   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
       const user = ref(null);
       const tasks = ref([]);
   
       const login = () => {
         firebase.auth().signInWithEmailAndPassword('user@example.com', 'password')
           .then((userCredential) => {
             user.value = userCredential.user;
           })
           .catch((error) => {
             console.error(error);
           });
       };
   
       const register = () => {
         firebase.auth().createUserWithEmailAndPassword('user@example.com', 'password')
           .then((userCredential) => {
             user.value = userCredential.user;
           })
           .catch((error) => {
             console.error(error);
           });
       };
   
       const logout = () => {
         firebase.auth().signOut()
           .then(() => {
             user.value = null;
           })
           .catch((error) => {
             console.error(error);
           });
       };
   
       onMounted(() => {
         firebase.auth().onAuthStateChanged((authUser) => {
           user.value = authUser;
         });
   
         const db = firebase.firestore();
         db.collection('tasks').onSnapshot((snapshot) => {
           tasks.value = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
         });
       });
   
       return {
         user,
         tasks,
         login,
         register,
         logout
       };
     }
   };
   </script>
   

5. Ajout du composant au fichier App.vue

   <template>
     <div id="app">
       <TaskManager />
     </div>
   </template>
   
   <script>
   import TaskManager from './components/TaskManager.vue';
   
   export default {
     name: 'App',
     components: {
       TaskManager
     }
   };
   </script>
   

Erreurs frequentes et debugging

1. Error: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp() before using any of the Firebase services.

Code incorrect :

firebase.firestore().collection('tasks').get()

Code correct :

import firebase from '../firebase';

const db = firebase.firestore();
db.collection('tasks').get()

2. FirebaseError: The current user has no access to this project.

Code incorrect :

firebase.auth().signInWithEmailAndPassword('user@example.com', 'password')

Code correct :

Assurez-vous que l'utilisateur existe dans Firebase Auth et qu'il a les droits appropriés.

3. Error: Network Error

Code incorrect :

firebase.firestore().collection('tasks').get()

Code correct :

Vérifiez la connexion à Internet et assurez-vous que Firebase est accessible depuis votre emplacement.

Pour aller plus loin

1. Authentification sociale avec Firebase Enrichissez l'authentification de base en ajoutant des options d'authentification sociales comme Google, Facebook ou Twitter.

2. Real-time updates with Firestore Triggers Utilisez les déclencheurs Firestore pour mettre à jour automatiquement la base de données et les interfaces utilisateur en temps réel.

3. Cloud Functions with Firebase Créez des fonctions backend personnalisées avec Firebase Cloud Functions pour ajouter des fonctionnalités complexes à votre application.

Défi pratique : Ajoutez une fonctionnalité permettant aux utilisateurs de marquer les tâches comme terminées et stockez ces informations dans la base de données Firebase.