Développement Moderne avec ApiPlatform (Symfony) et React
- Acheter maintenant
- En savoir plus
Introduction

Qu'est-ce qu'une API ?!
Rappels utiles sur HTTP
Qu'est ce que l'architecture REST ?
Pourquoi utiliser API Platform ?
Ce que vous allez découvrir dans cette formation
Les outils nécessaires pour suivre ce cours
Mettre en place VSCode pour travailler !
Voir ou revoir les bases de React avant de commencer
Symfony 4 #01 - Mise en place de l'application

Introduction
Création d'une application Symfony 4 et mise en place de la base de données
Mise en place des Clients : l'entité Customer
Mise en place des Factures : l'entité Invoice
Fixtures : Créer un jeu de fausses données
Ajout d'un champ `chrono` sur l'entité Invoice
Mise en place du système d'authentification : l'entité User
Fixtures : de faux utilisateurs dans notre base de données
Fixtures : Gérer les chronos et la sécurité des mots de passe
Conclusion et versionning du code avec GIT
ApiPlatform #01 : Mise en place et découverte

Introduction de la section
Installer le composant API Platform sur l'application Symfony grâce à Composer
Création de notre première Ressource grâce à l'annotation @ApiResource
Présentation du logiciel PostMan pour tester notre API REST
Le modèle de maturité de Richardson
Découverte du format JSON-LD : JSON Linked Data
Le concept d'IRI (adresses uniques) dans le format JSON-LD
Le fichier de configuration d'API Platform
Gestion de la pagination par défaut sur nos collections
Surcharger la configuration pour une ressource en particulier
Configurer le nombre d'éléments avec l'option itemsPerPage
Surcharger la configuration dans une Requête HTTP
Résumé : les 3 niveaux de configuration (globale, par ressource et par requête)
Donner un ordre par défaut à nos résultats
SearchFilter : permettre une recherche sur nos résultats
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
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
Appliquer un groupe de sérialisation à l'entité Customer
Appliquer un groupe de sérialisation à l'entité Invoice
Gérer la sérialisation des ressources liées
Le problème des boucles infinies lors de la sérialisation
Extraction des données liées au Customer
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
Activer / Désactiver des opérations sur une ressource
Configurer une opération
Le concept de sous-ressource (SubResource)
Configurer une sous-ressource
Sous-ressource et groupes de sérialisation
Créer ses propres opérations
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
Validation simple lors de la création / modification d'une Invoice
Validation de l'Invoice : le problème des types et le flag "disable_type_enforcement"
Création d'un normalizer personnalisé pour les dates
Validation lors de la création / modification d'un User
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
Sécurisation des ressources pour notre API
Utiliser les ACL pour cibler précisément nos ressources
Conclusion et versionning du code avec GIT
ApiPlatform #06 - Intervenir aux moments clés grâce aux événements du Kernel

Introduction de la section
Mise à jour Symfony 5
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
Intervenir sur la création d'un Customer pour le lier à l'utilisateur courant
Intervenir sur la création d'une Invoice pour lui donner un chrono
Intervenir sur la création du JWT pour enrichir ses données
Extensions de Doctrine : modifier les requêtes DQL d'ApiPlatform
Extension de Doctrine : ajout du cas d'utilisateurs non connectés
Conclusion et versionning du code avec GIT
React #01 - Mise en place

Introduction de la section
Installation de Webpack Encore
Découverte de la configuration de WebPack
Découverte des différents scripts de compilation WebPack
Création de la page d'accueil de notre site qui portera l'application React
Inclure les liens vers les fichiers compilés
Installation de React et des dépendances
Branchement de l'application React à notre page d'accueil
React #02 - Listings et routage

Introduction de la section
Création de la page d'accueil et de la barre de navigation
Mise en place du routage avec React Router Dom
Création de la page de liste des Customers
Appel HTTP vers notre API pour récupérer les Customers
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
Refactorisation dans un composant de Pagination
Paginer les données grâce à ApiPlatform
Permettre de rechercher un Customer
Refactorisation de la page des Customers
Création de la page de liste des Invoices
Conclusion et versionning du code avec GIT
React #03 - Authentification JWT

Création du formulaire de connexion
Connexion et récupération du JWT auprès de l'API
Refactorisation du formulaire de connexion
Permettre à l'utilisateur de se déconnecter
Mise en place des véritables liens dans la barre de navigation
Charger le JWT dès le démarrage de l'application React
Donner de la réactivité lors de la connexion et de la déconnexion
Prendre en compte l'état de l'authentification au démarrage de l'application
Naviguer automatiquement après une connexion ou une déconnexion
Créer des routes protégées et inaccessibles aux utilisateurs anonymes
Refactoriser notre application en utilisant les Contexts de React
Refactoriser le fichier app.js et créer un composant <PrivateRoute />
Conclusion et versionning du code avec GIT
React #04 - Formulaires

Création d'un composant <Field /> pour faciliter le développement de forms
Customer : mise en place du formulaire
Customer : validation et erreurs
Customer : gérer la modification d'un customer
Naviguer après la sauvegarde d'un nouveau Customer
Customer : refactrisation du code
Invoice : mise en place du formulaire
Invoice : création d'un composant <Select /> pour les listes déroulantes
Invoice : validation et erreurs
Invoice : gérer la modification d'une facture
Invoice : refactorisation du code
Register : création du formulaire d'inscription
Conclusion et versionning du code avec GIT
React #05 - Ergonomie et réactivité

Afficher des notifications ultra cool avec React Toastify
Créer des écrans de chargement avec React Content Loader
Ajouter les derniers liens manquants dans l'application
Conclusion et versionning du code avec GIT
React #06 - Dernières retouches avant mise en production

BONUS : On expérimente un cache pour accélérer l'application
Centraliser la configuration dans un seul fichier
Conclusion et versionning du code avec GIT
Déploiement

Introduction de la section
Injecter des variables d'environnement avec WebPack
Découverte de Heroku
Heroku : associer notre dépôt GitHub
Heroku : Ajouter un addon pour MySQL
Heroku : Gérer la configuration
Heroku : Récupérer les logs de l'application
Heroku : premier déploiement, premier bug !
Heroku : correction du bug et redéploiement
OVH : Mise en place
OVH : Installer composer sur notre mutualisé
OVH : Génération de l'application React en local
OVH : Repositionner ses variables d'environnement en local

Introduction de la section