Développement Moderne avec ApiPlatform (Symfony) et React by Lior Chamla

Développement Moderne avec ApiPlatform (Symfony) et React

Suivez moi et créons ensemble une application React qui communique avec un backend Symfony 4 grâce à ApiPlatform !

✨ Best seller sur Udemy

Cette formation a été suivie par plus de 200 participants sur Udemy et a été notée 5 étoiles (⭐⭐⭐⭐⭐) !

Objectifs d'apprentissage et prérequis

Nos objectifs

  • Comprendre les avantages de l'architecture REST
  • Comprendre les différents niveaux de maturité d'une API REST
  • Installer et configurer ApiPlatform sur une application Symfony 4
  • Utiliser les dernières bonnes pratiques de React (Hooks, Contexts etc)
  • Utiliser la librairie Axios pour faire des requêtes HTTP depuis Javascript
  • Exposer des ressources avec une API mature et moderne

Et aussi

  • Créer une application React avec navigation intégrée
  • Récupérer les données d'une API REST depuis l'application React
  • Envoyer des données à une API REST depuis l'application React
  • Gérer la sécurité et l'authentification grâce à JWT
  • Déployer une application Symfony / React sur Heroku
  • Déployer une application Symfony / React sur OVH

Les prérequis

  • Avoir des bases de Symfony 4
  • Avoir des bases de React et React Hooks
  • Comprendre le concept d'AJAX
  • Avoir des bases de Javascript ES6 (promesses, modules, etc).

Créez une API REST de A à Z avec ApiPlatform

Dans ce cours, nous allons étudier ApiPlatform ! C'est une librairie ultra puissante qui permet de créer une API REST en quelques minutes et qui se greffe sur n'importe quelle application Symfony.

Elle est construite sur et grâce à Symfony et s'intègre donc parfaitement avec ce framework (une ligne de commande suffit). On y étudiera toutes les configurations possibles et ses possibilités de customisation.

On construira aussi toute la partie frontend avec React et les dernières bonnes pratiques (utilisation des Hooks, de l'API Context, Axios, ES6 etc).

Enfin, on mettra en production l'application sur deux environnements bien différents : un mutualisé d'OVH et une instance Heroku !

Alors, vous êtes chauds ? On y va !

Plus de 14 heures de cours et des dizaines de ressources :

Video Icon 146 vidéos Text Icon 2 fichiers texte

Contenu de la formation

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