Udemy

Platform

Français

Language

Web Development

Category

ReactJS Fullstack : Firebase Firestore et Authentification

Développez une application de recherche de films avec OMDd API et une infrastructure Firebase serverless

4.00 (10 reviews)

Students

7 hours

Content

Feb 2020

Last Update
Regular Price

PLURALSIGHT
PluralSight
Entire course library + Leaning Path
10-day free trial

What you will learn

Développer un backend scalable et performant avec les services cloud de Firebase

Création d'un serveur sans aucune infrastructure

Implémenter les fonctions de création de compte, connexion, réinitialisation de mot de passe avec les solutions Firebase

Créer des requêtes 'read' and 'write' avec Cloud Firestore pour persister une liste de films en favori

Interroger une interface de programmation applicative (API) RESTful pour afficher une liste de movies

Gérer l'état local des composants avec les Hooks


Description

Objectif du cours:

Développez une application monopage (SPA) fullstack en ReactJS avec les services cloud-based  de Google Firebase

Avec un format orienté projet, le cours est progressif. Au programme

  • Développer une page de recherche de films en interrogeant l’API OMDb (The Open Movie Database).

  • Installer un backend serverless géré sur la plateforme Google : base de données Firestore et Authentification.

Les étapes de développement :

  1. Créer et maintenir des composants fonctions réutilisables avec les hooks et les props

  2. Programmer avec la syntaxe JavaScript ES2015 et l'extension JSX

  3. Développer une application monopage (SPA) avec Bootstrap 4 et Font Awesome pour une réaliser rapidement une interface responsive et professionnelle

  4. Faire des appels API RESTful : OMDb, The Movie Database

  5. Découvrir Firebase et ses services managés dans le cloud :

    1. Serveur et base de données, sans infrastructure avec Cloud Firestore

    2. Les comptes utilisateurs avec les solutions 'cloud-based' d'authentification avec Firebase

  6. Créer des formulaires de saisie pour la création et vérification de compte, authentification les utilisateurs, réinitialisation des mots de passe …

  7. En bonus,  beaucoup de resources, guides et code snippets pour accélérer la réalisation du projet

Vous aurez en résultat final une application complète de recherche de films développée en ReactJS, avec :

  • Liste de movies avec fonction de recherche

  • Formulaire de saisie du profil utilisateur

  • Modal de présentation

  • Des fonctions ES6 pour afficher les résultats de recherche depuis une API, interroger et écrire des données via les services dans le cloud de Firebase

Pour profiter du cours au maximum :

  • Des notions d’intégration avec HTML5 et CSS3 sont recommandés

  • Des bases de programmation en JavaScript et ES6

  • Une première expérience projet en ReactJS ou une autre librairie JavaScript



Screenshots

ReactJS Fullstack : Firebase Firestore et Authentification
ReactJS Fullstack : Firebase Firestore et Authentification
ReactJS Fullstack : Firebase Firestore et Authentification
ReactJS Fullstack : Firebase Firestore et Authentification

Content

Introduction

Introduction

Présentation Projet Final

Outils, Dépendences & Librairies utilisés

Outils & environnement de travail

SPA : développement de l'application monopage

Présentation Démarrage

Formulaire de recherche

Fonction recherche

React Developer Tool (Extension Chrome)

L'option favori

Navigation : Search & Favorites

Rappel théorique sur les Hooks (Documentation)

Projet final

Omdb Search API

RESTful API : The Open Movie Database

OMDb API : The Open Movie Database

Ajouter la clé API

Utiliser la méthode fetch pour faire des requêtes HTTP

récupérer la réponse au format JSON

Formatter les objets de réponse JSON (liste de Movie)

Recherche (query) & requêtes API

Ajouter aux favoris

Afficher la liste de favoris

Projet final zip

Démarrer avec Firebase: Firebase Cloud Firestore

Créer un projet Firebase

Créer une base de données avec Cloud Firestore

Configuration du projet Firebase

write - écrire vers base de données

{code source } - fonction write

read - interroger la base de données

{code source } - fonction read

write, read & re-render les favoris - REFACTO

delete - supprimer des données

{code source } - fonction remove

write, read, delete & re-render les favoris

{code source } - write, read, delete & re-render les favoris

Conclusion

Formulaires de Login et SignUp

présentation

À lire si vous téléchargez le projet de démarrage 1/2

À lire si vous téléchargez le projet de démarrage 2/2

Modal de présentation

Formulaire : login

Formulaire : signup

Modal de présentation : smooth scroll

Formulaire : reset password

Formulaire : conclusion

Validation formulaire : signup

Validation formulaire : login

Validation formulaire : reset

Projet Final zip

Firebase Authentification

Firebase Authentication

À lire si vous téléchargez le projet de démarrage 1/2

À lire si vous téléchargez le projet de démarrage 2/2

Nouveau compte utilisateurs : createUserWithEmailAndPassword

{code source } - signUp

Promesse et gestion des erreurs

reset clean up

Email de vérification et activation de compte

Authentifier l'utilisateur connecté

Affichage conditionnel : logout button

Déconnexion

{ code source } - signOut

Login : signInWithEmailAndPassword

{code source } - signin

Autorisation & accès sécurisé

Réinitialisation mot de passe : sendPasswordResetEmail

{code source } - resetPassword

Projet final zip

Finitions & Bonus

Filtrer les résultats et changement des structures de données 1/2

Filtrer les résultats et changement des structures de données 1/2

Programmation fonctionnelle : enchaîner les méthodes : map & filter


2800444

Udemy ID

2/6/2020

Course created date

2/19/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram