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.
Table des matières de cette formation Vue-JS (durée : 3h09m)
-
Initialisation du projet
- Introduction gratuit 00:01:48
- Génération de notre projet gratuit 00:10:18
-
Création et gestion d'un formulaire
- Création d'un Single File Component 00:10:43
- Lier les champs d'un formulaire aux données d'un component 00:09:11
- Gestion de la soumission d'un formulaire 00:06:56
-
Firestore
- Création d'une base de données Firestore 00:08:34
- Création d'une Data Access Layer (DAL) 00:11:56
- Création d'un nouveau contact 00:07:45
- Ajout d'une méthode qui remet à zéro un formulaire 00:02:57
- Lecture de documents depuis Firestore 00:13:51
- Refactorisation : passer des props à un component enfant. 00:08:54
- Emission d'un custom event 00:06:03
- Suppression d'un contact 00:07:57
-
Aller plus loin
- Résolution des erreurs signalées par ESLint 00:02:28
- Ajout de Boostrap 4 00:10:50
- Modification d'un contact 00:11:04
- Implémenter un système d'"edit in place" 00:12:22
- "Save edit" et "cancel edit" 00:13:01
- Suppression d'un contact via un custom event 00:04:17
-
Le routage
- Implémentation du routage 00:12:02
- Utilisation de router-link pour naviguer 00:04:36
- Styliser le lien actif 00:02:31
- Utilisation de paramètres de routage 00:09:25
- Fichiers sourcestélécharger
- Certificat
Formateur : Codeconcept
-
Avec quelle version de logiciel ce tuto est-il compatible ?Vue-JS
-
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.
