Développement Moderne avec ApiPlatform (Symfony) et React

Lior Chamla : Développez vous bien !/Développement Moderne avec ApiPlatform (Symfony) et React

Acheter maintenant

59 € ou 3 paiements mensuels de 20 €

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 !

Acheter maintenant

✨ 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 !

Contenu de la formation

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