Créer une Single Page Application avec Vue.js et Firestore
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
3h09
de formation
23
leçons vidéo
5
chapitres
Débutant
niveau requis
Codeconcept
Codeconcept
Formateur

Créer une Single Page Application avec Vue.js et Firestore

4.8/5 Trustpilot (1391 avis) Satisfait ou remboursé
3h09
de formation
23
leçons vidéo
5
chapitres

Vous souhaitez apprendre à développer rapidement une application ou un POC (Proof Of Concept) afin de passer de l'idée à sa réalisation ? Le couple Vue.js et Firestore est idéal pour cela.

Nous allons créer ensemble un gestionnaire de contacts qui vous permettra de vous familiariser par la pratique à la création d'une SPA (Single Page Application).
A l'aide de Vue.js côté Front, vous apprendrez à :

  • créer des components de type Single File
  • composer ces components
  • faire communiquer un component parent avec ses enfants via des props
  • faire communiquer des components enfants avec leur parent via des custom events
  • créer et gérer des formulaires
  • intégrer Bootstrap
  • implémenter le routage

Côté Backend, vous apprendrez à :

  • créer une base de données à l'aide de Firestore
  • à créer collection et documents

Afin de faire communiquer votre Front Vue.js avec votre Backend Firestore, vous verrez en détail comment créer une DAL (Data Access Layer) qui vous permettra de coupler faiblement votre Front avec votre Backend.

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 
Bonne formation ! 

Beaucoup d'astuces de pro seront dévoilées, qui vous permettront de développer rapidement vos applications Vue.js, notamment grâce à Vue CLI 3 et aux snippets de "Vue VSCode Snippets" que nous utiliserons tout au long de cette formation.

Cerise sur le gâteau, vous découvrirez comment implémenter une fonctionnalité d' "edit in place" qui permettra à vos utilisateurs d'éditer de façon conviviale du contenu.

Le code source de cette formation est disponible sur Github.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Initialisation du projet
Chapitre 2
Création et gestion d'un formulaire
Chapitre 3
Firestore
Chapitre 4
Aller plus loin
Chapitre 5
Le routage

Table des matières

Chapitre 1 : Initialisation du projet

12m06
 
Leçon 1Introduction
Leçon 2Génération de notre projet

Chapitre 2 : Création et gestion d'un formulaire

26m50
 
Leçon 1Création d'un Single File Component
Leçon 2Lier les champs d'un formulaire aux données d'un component
Leçon 3Gestion de la soumission d'un formulaire

Chapitre 3 : Firestore

1h07
 
Leçon 1Création d'une base de données Firestore
Leçon 2Création d'une Data Access Layer (DAL)
Leçon 3Création d'un nouveau contact
Leçon 4Ajout d'une méthode qui remet à zéro un formulaire
Leçon 5Lecture de documents depuis Firestore
Leçon 6Refactorisation : passer des props à un component enfant.
Leçon 7Emission d'un custom event
Leçon 8Suppression d'un contact

Chapitre 4 : Aller plus loin

54m02
 
Leçon 1Résolution des erreurs signalées par ESLint
Leçon 2Ajout de Boostrap 4
Leçon 3Modification d'un contact
Leçon 4Implémenter un système d'"edit in place"
Leçon 5"Save edit" et "cancel edit"
Leçon 6Suppression d'un contact via un custom event

Chapitre 5 : Le routage

28m34
 
Leçon 1Implémentation du routage
Leçon 2Utilisation de router-link pour naviguer
Leçon 3Styliser le lien actif
Leçon 4Utilisation de paramètres de routage

Aperçus

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Tout le code source de l'application afin de vous faciliter la tâche.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
28,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
3h09 de vidéo • 5 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 769 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1424 tutos gratuits

Notre politique de protection des données