CATALOGUE Code & Data Formation JavaScript Apprendre Vue JS 3 Connexion entre Firebase et Vue.js

Connexion entre Firebase et Vue.js

Connexion Firebase-Vue

Vidéo non disponible ! Réessayez plus tard

11h 47min

91 leçons

Transcription

Cette leçon fait partie de la formation

Apprendre Vue JS 3

69,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

11h 47min

91 leçons

Cette leçon fait partie de la formation

Apprendre Vue JS 3

69,00€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

PRO : J'en fait profiter mon équipe

Étapes de configuration

Objectifs

Les objectifs de cette vidéo sont :

Apprendre à configurer Firebase dans une application Vue.js
Savoir importer et utiliser les modules Firestore
Comprendre comment récupérer des données de Firestore de manière asynchrone
Apprendre à configurer les règles de sécurité pour les bases de données Firestore

Résumé

Découvrez comment connecter Firebase avec une application Vue.js pour accéder aux données Firestore.

Description

Dans cette leçon, nous vous guiderons à travers le processus de connexion entre Firebase et Vue.js pour accéder et gérer les données dans une base de données Firestore. Nous commencerons par configurer l'environnement de développement en suivant la documentation officielle de Firebase. Ensuite, nous importerons et initialiserons les modules nécessaires pour interagir avec Firestore depuis une application Vue.js. Nous utiliserons l'instruction getFirestore pour initialiser Cloud Firestore et créer un objet DB facilement accessible aux composants de l'application.

Nous verrons également comment utiliser le hook onMounted pour récupérer des données de façon asynchrone lors de l'ouverture de l'application. Finalement, vous apprendrez à configurer les règles de sécurité pour autoriser l'accès en lecture et en écriture dans Firestore, ainsi que les bonnes pratiques pour structurer votre code et maintenir un environnement de développement propre et efficient.

Cette vidéo est parfaite pour toute personne souhaitant approfondir ses connaissances sur l'intégration de Firebase avec Vue.js, et comprendre comment manipuler efficacement les données dans une application web.

Questions - réponses

Qu'est-ce que Firestore dans Firebase ?

Firestore est une base de données NoSQL en temps réel proposée par Firebase, permettant de synchroniser et stocker des données pour des applications web et mobiles.

Pourquoi utiliser onMounted dans Vue.js ?

Le hook onMounted permet d'exécuter du code après que le composant Vue.js a été monté sur le DOM, idéal pour les appels asynchrones comme la récupération de données depuis Firestore.

Quelle est la commande pour initialiser Firestore ?

Pour initialiser Firestore, il faut utiliser l'instruction getFirestore importée depuis le package Firebase.

Programme détaillé

Accueil de la formation

Module 1 - Premiers pas en Vue3

Principes clés de Vue.js 03:39

Préparation de l'environnement de développement 09:53

Le modèle MVVM de Vue.js 02:47

Un premier projet Vue.js 14:11

Un deuxième exemple (projet3) 07:08

Propriétés calculées 09:53

Data binding 05:55

innerHTML et nœud texte 13:44

Binding bidirectionnel 09:58

Utilisation conjointe des directives v-model et v-bind 13:18

Gestion évènementielle 09:24

L'objet $event dans la gestion évènementielle 05:52

Les fonctions stopPropagation() et preventDefault() de l'objet $event 09:56

Suffixes stop et prevent de Vue 08:41

La directive v-for 13:07

Arguments dynamiques 06:45

Directive v-for pour parcourir des objets JSON 03:41

Gestion des évènements clavier 05:24

La directive v-cloak 01:58

La directive v-once 03:37

Classes conditionnelles 13:21

Gestion des styles inline 07:54

Afficher du code HTML conditionnellement 07:48

Super challenge - Partie 1 10:14

Super Challenge - Partie 2 11:28

Super challenge - Partie 3 08:51

Module 2 - Les composants Vue JS

Intruductio 04:02

Un premier composant local 04:13

Ajouter des données dans un composant 08:47

Ajouter des méthodes dans un composant 03:21

Passer des données aux composants enfants avec des props 07:49

Accès à une prop dans le modèle du composant 05:37

Passer des données de l'application aux composants enfants 04:05

Custom-events - Envoi de messages au parent par un composant avec $emit 10:39

Lifecycle Hooks 10:22

Organiser une application en hiérarchie de composants 11:32

Passer des données à un composant avec des slots 05:34

Slots nommés 03:44

Slots avec portée (scoped slots) 07:09

Filtres 11:58

Observateurs (watchers) 08:46

Requêtes asynchrones dans un observateur 06:11

Animations et transitions en JavaScript 06:28

Transitions d'entrée et de sortie avec VueJS 07:34

Transitions d'entrée et de sortie non simultanées 07:39

Transitions entre éléments 07:37

Transitions de listes 09:23

Transitions d'entrée et de sortie avec animate.css 07:27

Animations en JavaScript 12:08

Module 3 - Les applications SPA (Single Page Applications)

Création d'une application SPA avec vue-router 11:40

Indicateurs de navigation - Vue Router Navigation Guards 10:32

Routage – Transition entre les pages 06:57

Module 4 - L'interface en ligne de commande Vue-Cli

Introduction 05:18

Architecture de l'application 06:18

Création et modification d'une application avec Vue-Cli 11:15

Une deuxième application avec Vue-Cli 18:26

Fonctions de rendu (Render Functions) 06:51

Templates vs render functions & JSX 07:25

Composants fonctionnels 03:28

Utilisation des paramètres props et context 04:36

Module 5 - Le gestionnaire d'état Vuex

Introduction 07:17

Accès aux méthodes du store dans les composants 09:40

Accès à l'état du store dans les composants 03:40

L'option plugins de Vuex 06:53

Alternative à Vuex 07:40

Vuex et les formulaires 08:58

Validation d'un formulaire dans VueJS 16:22

Module 6 - Le gestionnaire d'état Pinia

Introduction à Pinia et génération de l'application 03:39

Ménage dans les fichiers et première version de l'interface 03:25

Création du store Pinia 05:58

Interfaçage du store dans le composant App.vue 06:55

Accès au store Pinia dans un composant enfant 03:58

Module 7 - Persistance des données avec Firebase

Introduction à Firebase 04:36

Création d'un projet Firebase 03:07

Création de la base de données Cloud Firestore 03:54

Connexion Firebase-Vue 08:09

Affichage des données dans le DOM 05:54

Saisie et suppression des notes dans l'application 16:46

Module 8 - Plus loin avec Vue.js 3

Mixins 05:10

Mixin global 02:25

Plugins 11:19

Directives personnalisées 14:29

Rendre son code robuste grâce aux props typées 06:54

Développement d'applications mobiles - Découverte de NativeScript-Vue 05:53

Développement d'applications mobiles - Mise en pratique 06:16

Le composant Teleport 07:36

L'API de composition 13:19

Deuxième approche – Utilisation de la fonction reactive() 03:04

Troisième approche – Utilisation de la fonction computed() 02:36

Quatrième approche – Externalisation du calcul réactif 03:25

Vue 3 et TypeScript 13:42