Développez une application monopage (SPA) fullstack en ReactJS avec les services cloud-based de GoogleFirebase ! Avec un format orienté projet, cette formation en ligne et en vidéo est progressive.
Au programme de ce tuto
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 de notre projet pratique :
Créer et maintenir des composants fonctions réutilisables avec les hooks et les props
Programmer avec la syntaxe JavaScript ES2015 et l'extension JSX
Développer une application monopage (SPA) avec Bootstrap 4et Font Awesome pour une réaliser rapidement une interface responsive et professionnelle
Faire des appels API RESTful : OMDb, The Movie Database
Découvrir Firebase et ses services managés dans le cloud (Serveur et base de données, sans infrastructure avec Cloud Firestore, les comptes utilisateurs avec les solutions 'cloud-based' d'authentification avec Firebase)
Créer des formulaires de saisie pour la création et vérification de compte, authentification les utilisateurs, réinitialisation des mots de passe …
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 films 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
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
SPA : développement de l'application monopage
SPA : développement de l'application monopage
Chapitre 3
API RESTFul : Omdb Search
API RESTFul : Omdb Search
Chapitre 4
Firebase Cloud Firestore
Firebase Cloud Firestore
Chapitre 5
Comptes Utilisateurs
Comptes Utilisateurs
Chapitre 6
Firebase Authentification
Firebase Authentification
Plan détaillé du cours
Chapitre 1 : Introduction
09m06
Leçon 1Bienvenue !
Leçon 2Présentation Projet Final
Leçon 3Outils, Dépendences & Librairies utilisés
Chapitre 2 : SPA : développement de l'application monopage
55m18
Leçon 1Présentation Démarrage
Leçon 2Formulaire de recherche
Leçon 3Fonction recherche
Leçon 4L'option favori
Leçon 5Navigation : Search & Favorites
Chapitre 3 : API RESTFul : Omdb Search
1h14
Leçon 1RESTful API : The Open Movie Database
Leçon 2Utiliser la méthode fetch pour faire des requêtes HTTP
Leçon 3Récupérer la réponse au format JSON
Leçon 4Formatter les objets de réponse JSON (liste de Movie)
Leçon 5Recherche (query) & requêtes API
Leçon 6Ajouter aux favoris
Leçon 7Afficher la liste de favoris
Chapitre 4 : Firebase Cloud Firestore
1h02
Leçon 1Créer un projet Firebase
Leçon 2Créer une base de données avec Cloud Firestore
Leçon 3Write - écrire vers base de données
Leçon 4Read - interroger la base de données
Leçon 5Write, read & re-render les favoris - REFACTO
Leçon 6Delete - supprimer des données
Leçon 7Write, read, delete & re-render les favoris
Leçon 8Conclusion
Chapitre 5 : Comptes Utilisateurs
1h26
Leçon 1Présentation
Leçon 2Modal de présentation
Leçon 3Formulaire : login
Leçon 4Formulaire : signup
Leçon 5Modal de présentation : smooth scroll
Leçon 6Formulaire : reset password
Leçon 7Formulaire : conclusion
Leçon 8Validation formulaire : signup
Leçon 9Validation formulaire : login
Leçon 10Validation formulaire : reset
Chapitre 6 : Firebase Authentification
1h19
Leçon 1Firebase Authentication
Leçon 2Nouveau compte utilisateurs : createUserWithEmailAndPassword
Leçon 3Promesse et gestion des erreurs
Leçon 4Reset Form clean up
Leçon 5Email de vérification et activation de compte
Leçon 6Authentifier l'utilisateur connecté
Leçon 7Affichage conditionnel : logout button
Leçon 8Déconnexion
Leçon 9Login : signInWithEmailAndPassword
Leçon 10Autorisation & accès sécurisé
Aperçus
Vos questions sur le cours
Avec quelle version de logiciel ce tuto est-il compatible ?