Refactorisation du formulaire de connexion
Aperçu indisponible
Vous devez vous connecter ou vous inscrire pour voir cette leçon.
Se connecter
S'inscrire
Développement Moderne avec ApiPlatform (Symfony) et React
Acheter maintenant
En savoir plus
Introduction
Qu'est-ce qu'une API ?!
5
Rappels utiles sur HTTP
1
Qu'est ce que l'architecture REST ?
Pourquoi utiliser API Platform ?
1
Ce que vous allez découvrir dans cette formation
Les outils nécessaires pour suivre ce cours
3
Mettre en place VSCode pour travailler !
4
Voir ou revoir les bases de React avant de commencer
Symfony 4 #01 - Mise en place de l'application
Introduction
1
Création d'une application Symfony 4 et mise en place de la base de données
13
Mise en place des Clients : l'entité Customer
8
Mise en place des Factures : l'entité Invoice
8
Fixtures : Créer un jeu de fausses données
19
Ajout d'un champ `chrono` sur l'entité Invoice
Mise en place du système d'authentification : l'entité User
7
Fixtures : de faux utilisateurs dans notre base de données
6
Fixtures : Gérer les chronos et la sécurité des mots de passe
9
Conclusion et versionning du code avec GIT
2
ApiPlatform #01 : Mise en place et découverte
Introduction de la section
Installer le composant API Platform sur l'application Symfony grâce à Composer
8
Création de notre première Ressource grâce à l'annotation @ApiResource
16
Présentation du logiciel PostMan pour tester notre API REST
12
Le modèle de maturité de Richardson
1
Découverte du format JSON-LD : JSON Linked Data
3
Le concept d'IRI (adresses uniques) dans le format JSON-LD
1
Le fichier de configuration d'API Platform
5
Gestion de la pagination par défaut sur nos collections
3
Surcharger la configuration pour une ressource en particulier
1
Configurer le nombre d'éléments avec l'option itemsPerPage
2
Surcharger la configuration dans une Requête HTTP
8
Résumé : les 3 niveaux de configuration (globale, par ressource et par requête)
Donner un ordre par défaut à nos résultats
4
SearchFilter : permettre une recherche sur nos résultats
14
OrderFilter : permettre d'ordonner (trier) nos résultats
Cumuler les Filtres sur une ressource
Appliquer un filtre sur une propriété d'une ressource liée
Conclusion de la section
Exercices et mise en pratique
EXERCICE #01 - Bootstraper une API
EXERCICE #01 - Correction
EXERCICE #02 - Pagination et ordre
EXERCICE #02 - Correction
2
EXERCICE #03 - Filtrage de recherche
EXERCICE #03 - Correction
ApiPlatform #02 : comprendre la sérialisation et la désérialisation
Introduction de la section
Comprendre les concepts de Sérialisation et Désérialisation
1
Appliquer un groupe de sérialisation à l'entité Customer
4
Appliquer un groupe de sérialisation à l'entité Invoice
1
Gérer la sérialisation des ressources liées
Le problème des boucles infinies lors de la sérialisation
3
Extraction des données liées au Customer
10
Le concept de champs calculés
ApiPlatform #02 : Un petit Quiz ? 💪😉
ApiPlatform #03 - Les opérations possibles sur notre API REST
Introduction de la section
Les 5 opérations de base sur les collections ou sur les items
1
Activer / Désactiver des opérations sur une ressource
6
Configurer une opération
2
Le concept de sous-ressource (SubResource)
5
Configurer une sous-ressource
Sous-ressource et groupes de sérialisation
10
Créer ses propres opérations
57
ApiPlatform #03 : Un petit Quiz ? 💪😉
ApiPlatform #04 - Validation des données
Introduction de la section
Validation lors de la création / modification d'un Customer
13
Validation simple lors de la création / modification d'une Invoice
8
Validation de l'Invoice : le problème des types et le flag "disable_type_enforcement"
12
Création d'un normalizer personnalisé pour les dates
24
Validation lors de la création / modification d'un User
14
Conclusion et versionning du code avec GIT
ApiPlatform #05 - Authentification avec JSON Web Token (JWT)
Introduction de la section
Installation du bundle LexikJwtAuthentication pour gérer les JWT
68
Sécurisation des ressources pour notre API
23
Utiliser les ACL pour cibler précisément nos ressources
17
Conclusion et versionning du code avec GIT
1
ApiPlatform #06 - Intervenir aux moments clés grâce aux événements du Kernel
Introduction de la section
Mise à jour Symfony 5
4
Comprendre le cycle de vie d'une Requête HTTP et les événements du Kernel
Intervenir sur la création d'un User pour hasher le mot de passe
58
Intervenir sur la création d'un Customer pour le lier à l'utilisateur courant
30
Intervenir sur la création d'une Invoice pour lui donner un chrono
30
Intervenir sur la création du JWT pour enrichir ses données
2
Extensions de Doctrine : modifier les requêtes DQL d'ApiPlatform
50
Extension de Doctrine : ajout du cas d'utilisateurs non connectés
Conclusion et versionning du code avec GIT
4
React #01 - Mise en place
Introduction de la section
Installation de Webpack Encore
2
Découverte de la configuration de WebPack
Découverte des différents scripts de compilation WebPack
12
Création de la page d'accueil de notre site qui portera l'application React
Inclure les liens vers les fichiers compilés
29
Installation de React et des dépendances
1
Branchement de l'application React à notre page d'accueil
14
React #02 - Listings et routage
Introduction de la section
Création de la page d'accueil et de la barre de navigation
11
Mise en place du routage avec React Router Dom
18
Création de la page de liste des Customers
1
Appel HTTP vers notre API pour récupérer les Customers
34
Permettre la suppression d'un Customer
Suppression : l'approche optimiste et l'approche pessimiste
Mise en place d'une pagination sur la liste des Customers
5
Refactorisation dans un composant de Pagination
1
Paginer les données grâce à ApiPlatform
5
Permettre de rechercher un Customer
9
Refactorisation de la page des Customers
10
Création de la page de liste des Invoices
11
Conclusion et versionning du code avec GIT
2
React #03 - Authentification JWT
Création du formulaire de connexion
9
Connexion et récupération du JWT auprès de l'API
28
Refactorisation du formulaire de connexion
5
Permettre à l'utilisateur de se déconnecter
5
Mise en place des véritables liens dans la barre de navigation
Charger le JWT dès le démarrage de l'application React
3
Donner de la réactivité lors de la connexion et de la déconnexion
6
Prendre en compte l'état de l'authentification au démarrage de l'application
1
Naviguer automatiquement après une connexion ou une déconnexion
Créer des routes protégées et inaccessibles aux utilisateurs anonymes
5
Refactoriser notre application en utilisant les Contexts de React
5
Refactoriser le fichier app.js et créer un composant <PrivateRoute />
2
Conclusion et versionning du code avec GIT
6
React #04 - Formulaires
Création d'un composant <Field /> pour faciliter le développement de forms
2
Customer : mise en place du formulaire
13
Customer : validation et erreurs
10
Customer : gérer la modification d'un customer
9
Naviguer après la sauvegarde d'un nouveau Customer
Customer : refactrisation du code
4
Invoice : mise en place du formulaire
Invoice : création d'un composant <Select /> pour les listes déroulantes
7
Invoice : validation et erreurs
21
Invoice : gérer la modification d'une facture
19
Invoice : refactorisation du code
2
Register : création du formulaire d'inscription
18
Conclusion et versionning du code avec GIT
4
React #05 - Ergonomie et réactivité
Afficher des notifications ultra cool avec React Toastify
7
Créer des écrans de chargement avec React Content Loader
4
Ajouter les derniers liens manquants dans l'application
5
Conclusion et versionning du code avec GIT
1
React #06 - Dernières retouches avant mise en production
BONUS : On expérimente un cache pour accélérer l'application
6
Centraliser la configuration dans un seul fichier
3
Conclusion et versionning du code avec GIT
5
Déploiement
Introduction de la section
Injecter des variables d'environnement avec WebPack
14
Découverte de Heroku
1
Heroku : associer notre dépôt GitHub
2
Heroku : Ajouter un addon pour MySQL
1
Heroku : Gérer la configuration
6
Heroku : Récupérer les logs de l'application
8
Heroku : premier déploiement, premier bug !
16
Heroku : correction du bug et redéploiement
12
OVH : Mise en place
12
OVH : Installer composer sur notre mutualisé
6
OVH : Génération de l'application React en local
7
OVH : Repositionner ses variables d'environnement en local
47