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

Apprenez à créer une Single Page Application avec Vue et Firestore

4.40 (50 reviews)
Udemy
platform
Français
language
Web Development
category
254
students
3 hours
content
May 2019
last update
$19.99
regular price

What you will learn

Utiliser Vue en Front et Firestore en Back

Description

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.

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.

Content

Initialisation du projet

Introduction
Génération de notre projet

Création et gestion d'un formulaire

Création d'un Single File Component
Lier les champs d'un formulaire aux données d'un component
Gestion de la soumission d'un formulaire

Firestore

Création d'une base de données Firestore
Création d'une Data Access Layer (DAL)
Création d'un nouveau contact
Ajout d'une méthode qui remet à zéro un formulaire
Lecture de documents depuis Firestore
Refactorisation : passer des props à un component enfant.
Emission d'un custom event
Suppression d'un contact

Aller plus loin

Résolution des erreurs signalées par ESLint
Ajout de Boostrap 4
Modification d'un contact
Implémenter un système d'"edit in place"
"Save edit" et "cancel edit"
Suppression d'un contact via un custom event

Le routage

Implémentation du routage
Utilisation de router-link pour naviguer
Styliser le lien actif
Utilisation de paramètres de routage

Bonus

Coupons vers des formations complémentaires

Screenshots

Créer une Single Page Application avec Vue.js et Firestore - Screenshot_01Créer une Single Page Application avec Vue.js et Firestore - Screenshot_02Créer une Single Page Application avec Vue.js et Firestore - Screenshot_03Créer une Single Page Application avec Vue.js et Firestore - Screenshot_04

Reviews

Louis-Manuel
February 26, 2022
Super cours pour commencer avec Vue, Il manque Vue 3, Il manque le fait de pouvoir faire des requetes à la base de données... J'espère que le formateur créera un autre cours sur ces choses là.
Xavier
December 13, 2019
Je partais sur des bases que j'ai rapidement appris en diagonale, ta formation m'a permis de mieux comprendre ce que je fais et au final de lancer mon projet perso facilement. Merci à toi.
Marc
July 9, 2019
Super, clair, plein d'astuces et surtout c'est très concret. Samir nous explique ce que l'on doit faire dans le cas d'une vraie application, au risque de rendre les choses plus complexe. On le voit aussi se tromper, tâtonner, défaire, refaire, et ca aussi ca nous montre plein d'astuces et de bonnes pratiques. Excellent.
Pascal
May 12, 2019
Le cours est de bonne qualité et le formateur connait bien son sujet. Cependant, c'est dommage que le cours soit fait un peu à "l'arrache" par moment. Bonne introduction a Vue et Firestore quand même.
Petelot
January 17, 2019
I advise this course for everybody who is looking for an initiation in Vue.js. Even if you don't speak french. It's easy to follow and the teacher speaks slowly enough to unserstand all the details. I recommend this course particularly for those who are working with the PHP Framework Laravel who want to begin with Vue.js.
Samuel
December 29, 2018
Bien dans l'ensemble. Il aurait été intéressant d'aborder la partie login/register dans firestore. Très bien pour se faire la main quand on est débutant. J'attends un cours plus avancé avec de l'appel API etc

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

2059063
udemy ID
11/30/2018
course created date
11/22/2019
course indexed date
Bot
course submited by