• €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 !

✨ 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 ?!
  • 3 mins
  • 35,5 Mo
Aperçu
Rappels utiles sur HTTP
  • 5 mins
  • 71,1 Mo
Aperçu
Qu'est ce que l'architecture REST ?
  • 2 mins
  • 37,9 Mo
Aperçu
Pourquoi utiliser API Platform ?
  • 3 mins
  • 75,9 Mo
Aperçu
Ce que vous allez découvrir dans cette formation
  • 5 mins
  • 82,1 Mo
Aperçu
Les outils nécessaires pour suivre ce cours
  • 2 mins
  • 17,1 Mo
Aperçu
Mettre en place VSCode pour travailler !
    Aperçu
    Voir ou revoir les bases de React avant de commencer

      Symfony 4 #01 - Mise en place de l'application

      Introduction
      • 1 min
      • 13,2 Mo
      Aperçu
      Création d'une application Symfony 4 et mise en place de la base de données
      • 6 mins
      • 110 Mo
      Aperçu
      Mise en place des Clients : l'entité Customer
      • 5 mins
      • 179 Mo
      Mise en place des Factures : l'entité Invoice
      • 5 mins
      • 212 Mo
      Fixtures : Créer un jeu de fausses données
      • 9 mins
      • 300 Mo
      Ajout d'un champ `chrono` sur l'entité Invoice
      • 4 mins
      • 147 Mo
      Mise en place du système d'authentification : l'entité User
      • 7 mins
      • 246 Mo
      Fixtures : de faux utilisateurs dans notre base de données
      • 4 mins
      • 188 Mo
      Fixtures : Gérer les chronos et la sécurité des mots de passe
      • 6 mins
      • 276 Mo
      Conclusion et versionning du code avec GIT
      • 2 mins
      • 56,1 Mo

      ApiPlatform #01 : Mise en place et découverte

      Introduction de la section
      • 2 mins
      • 18 Mo
      Aperçu
      Installer le composant API Platform sur l'application Symfony grâce à Composer
      • 1 min
      • 26,3 Mo
      Aperçu
      Création de notre première Ressource grâce à l'annotation @ApiResource
      • 6 mins
      • 171 Mo
      Aperçu
      Présentation du logiciel PostMan pour tester notre API REST
      • 4 mins
      • 103 Mo
      Le modèle de maturité de Richardson
      • 6 mins
      • 88,9 Mo
      Découverte du format JSON-LD : JSON Linked Data
      • 8 mins
      • 280 Mo
      Le concept d'IRI (adresses uniques) dans le format JSON-LD
      • 3 mins
      • 84,7 Mo
      Le fichier de configuration d'API Platform
      • 5 mins
      • 211 Mo
      Gestion de la pagination par défaut sur nos collections
      • 5 mins
      • 134 Mo
      Surcharger la configuration pour une ressource en particulier
      • 3 mins
      • 88,9 Mo
      Configurer le nombre d'éléments avec l'option itemsPerPage
      • 3 mins
      • 64 Mo
      Surcharger la configuration dans une Requête HTTP
      • 6 mins
      • 219 Mo
      Résumé : les 3 niveaux de configuration (globale, par ressource et par requête)
      • 2 mins
      • 57 Mo
      Donner un ordre par défaut à nos résultats
      • 3 mins
      • 88,6 Mo
      SearchFilter : permettre une recherche sur nos résultats
      • 8 mins
      • 308 Mo
      OrderFilter : permettre d'ordonner (trier) nos résultats
      • 4 mins
      • 105 Mo
      Cumuler les Filtres sur une ressource
      • 2 mins
      • 51,6 Mo
      Appliquer un filtre sur une propriété d'une ressource liée
      • 1 min
      • 26,1 Mo
      Conclusion de la section
      • 1 min
      • 34,6 Mo

      Exercices et mise en pratique

      EXERCICE #01 - Bootstraper une API
      • 3 mins
      • 43,5 Mo
      Aperçu
      EXERCICE #01 - Correction
      • 7 mins
      • 256 Mo
      EXERCICE #02 - Pagination et ordre
      • 2 mins
      • 59,4 Mo
      Aperçu
      EXERCICE #02 - Correction
      • 10 mins
      • 368 Mo
      EXERCICE #03 - Filtrage de recherche
      • 2 mins
      • 72,9 Mo
      Aperçu
      EXERCICE #03 - Correction
      • 5 mins
      • 188 Mo

      ApiPlatform #02 : comprendre la sérialisation et la désérialisation

      Introduction de la section
      • 2 mins
      • 13,8 Mo
      Aperçu
      Comprendre les concepts de Sérialisation et Désérialisation
      • 7 mins
      • 110 Mo
      Appliquer un groupe de sérialisation à l'entité Customer
      • 7 mins
      • 263 Mo
      Appliquer un groupe de sérialisation à l'entité Invoice
      • 3 mins
      • 90,7 Mo
      Gérer la sérialisation des ressources liées
      • 3 mins
      • 97,1 Mo
      Le problème des boucles infinies lors de la sérialisation
      • 4 mins
      • 158 Mo
      Extraction des données liées au Customer
      • 5 mins
      • 141 Mo
      Le concept de champs calculés
      • 10 mins
      • 348 Mo
      ApiPlatform #02 : Un petit Quiz ? 💪😉

        ApiPlatform #03 - Les opérations possibles sur notre API REST

        Introduction de la section
        • 2 mins
        • 16,3 Mo
        Aperçu
        Les 5 opérations de base sur les collections ou sur les items
        • 3 mins
        • 107 Mo
        Activer / Désactiver des opérations sur une ressource
        • 5 mins
        • 162 Mo
        Configurer une opération
        • 3 mins
        • 90,9 Mo
        Le concept de sous-ressource (SubResource)
        • 3 mins
        • 95,5 Mo
        Configurer une sous-ressource
        • 3 mins
        • 122 Mo
        Sous-ressource et groupes de sérialisation
        • 7 mins
        • 268 Mo
        Créer ses propres opérations
        • 14 mins
        • 508 Mo
        ApiPlatform #03 : Un petit Quiz ? 💪😉

          ApiPlatform #04 - Validation des données

          Introduction de la section
          • 2 mins
          • 16,5 Mo
          Aperçu
          Validation lors de la création / modification d'un Customer
          • 13 mins
          • 459 Mo
          Validation simple lors de la création / modification d'une Invoice
          • 8 mins
          • 283 Mo
          Validation de l'Invoice : le problème des types et le flag "disable_type_enforcement"
          • 7 mins
          • 277 Mo
          Création d'un normalizer personnalisé pour les dates
          • 8 mins
          • 468 Mo
          Validation lors de la création / modification d'un User
          • 7 mins
          • 259 Mo
          Conclusion et versionning du code avec GIT
          • 2 mins
          • 67,5 Mo

          ApiPlatform #05 - Authentification avec JSON Web Token (JWT)

          Introduction de la section
          • 1 min
          • 11,9 Mo
          Aperçu
          Installation du bundle LexikJwtAuthentication pour gérer les JWT
          • 14 mins
          • 531 Mo
          Sécurisation des ressources pour notre API
          • 8 mins
          • 277 Mo
          Utiliser les ACL pour cibler précisément nos ressources
          • 5 mins
          • 188 Mo
          Conclusion et versionning du code avec GIT
          • 2 mins
          • 63 Mo

          ApiPlatform #06 - Intervenir aux moments clés grâce aux événements du Kernel

          Introduction de la section
          • 2 mins
          • 17,5 Mo
          Aperçu
          Mise à jour Symfony 5
            Comprendre le cycle de vie d'une Requête HTTP et les événements du Kernel
            • 3 mins
            • 46,3 Mo
            Aperçu
            Intervenir sur la création d'un User pour hasher le mot de passe
            • 17 mins
            • 659 Mo
            Intervenir sur la création d'un Customer pour le lier à l'utilisateur courant
            • 10 mins
            • 353 Mo
            Intervenir sur la création d'une Invoice pour lui donner un chrono
            • 14 mins
            • 521 Mo
            Intervenir sur la création du JWT pour enrichir ses données
            • 10 mins
            • 350 Mo
            Extensions de Doctrine : modifier les requêtes DQL d'ApiPlatform
            • 21 mins
            • 919 Mo
            Extension de Doctrine : ajout du cas d'utilisateurs non connectés
            • 3 mins
            • 139 Mo
            Conclusion et versionning du code avec GIT
            • 3 mins
            • 108 Mo

            React #01 - Mise en place

            Introduction de la section
            • 2 mins
            • 15,1 Mo
            Aperçu
            Installation de Webpack Encore
            • 4 mins
            • 141 Mo
            Aperçu
            Découverte de la configuration de WebPack
            • 5 mins
            • 210 Mo
            Découverte des différents scripts de compilation WebPack
            • 9 mins
            • 318 Mo
            Création de la page d'accueil de notre site qui portera l'application React
            • 3 mins
            • 55,9 Mo
            Inclure les liens vers les fichiers compilés
            • 9 mins
            • 309 Mo
            Installation de React et des dépendances
            • 6 mins
            • 159 Mo
            Branchement de l'application React à notre page d'accueil
            • 3 mins
            • 72,5 Mo
            Aperçu

            React #02 - Listings et routage

            Introduction de la section
            • 2 mins
            • 18,4 Mo
            Aperçu
            Création de la page d'accueil et de la barre de navigation
            • 11 mins
            • 371 Mo
            Mise en place du routage avec React Router Dom
            • 6 mins
            • 231 Mo
            Création de la page de liste des Customers
            • 5 mins
            • 96,2 Mo
            Appel HTTP vers notre API pour récupérer les Customers
            • 11 mins
            • 418 Mo
            Aperçu
            Permettre la suppression d'un Customer
            • 4 mins
            • 197 Mo
            Suppression : l'approche optimiste et l'approche pessimiste
            • 7 mins
            • 302 Mo
            Mise en place d'une pagination sur la liste des Customers
            • 16 mins
            • 687 Mo
            Refactorisation dans un composant de Pagination
            • 8 mins
            • 303 Mo
            Aperçu
            Paginer les données grâce à ApiPlatform
            • 12 mins
            • 552 Mo
            Permettre de rechercher un Customer
            • 10 mins
            • 372 Mo
            Refactorisation de la page des Customers
            • 14 mins
            • 563 Mo
            Création de la page de liste des Invoices
            • 31 mins
            • 1,34 Go
            Conclusion et versionning du code avec GIT
            • 2 mins
            • 59,8 Mo

            React #03 - Authentification JWT

            Création du formulaire de connexion
            • 10 mins
            • 349 Mo
            Connexion et récupération du JWT auprès de l'API
            • 13 mins
            • 522 Mo
            Refactorisation du formulaire de connexion
            • 7 mins
            • 233 Mo
            Permettre à l'utilisateur de se déconnecter
            • 5 mins
            • 166 Mo
            Mise en place des véritables liens dans la barre de navigation
            • 4 mins
            • 133 Mo
            Charger le JWT dès le démarrage de l'application React
            • 10 mins
            • 360 Mo
            Donner de la réactivité lors de la connexion et de la déconnexion
            • 8 mins
            • 281 Mo
            Prendre en compte l'état de l'authentification au démarrage de l'application
            • 4 mins
            • 143 Mo
            Naviguer automatiquement après une connexion ou une déconnexion
            • 6 mins
            • 239 Mo
            Créer des routes protégées et inaccessibles aux utilisateurs anonymes
            • 7 mins
            • 256 Mo
            Refactoriser notre application en utilisant les Contexts de React
            • 12 mins
            • 436 Mo
            Refactoriser le fichier app.js et créer un composant <PrivateRoute />
            • 3 mins
            • 110 Mo
            Conclusion et versionning du code avec GIT
            • 4 mins
            • 172 Mo

            React #04 - Formulaires

            Création d'un composant <Field /> pour faciliter le développement de forms
            • 8 mins
            • 286 Mo
            Aperçu
            Customer : mise en place du formulaire
            • 14 mins
            • 548 Mo
            Customer : validation et erreurs
            • 6 mins
            • 209 Mo
            Customer : gérer la modification d'un customer
            • 12 mins
            • 454 Mo
            Naviguer après la sauvegarde d'un nouveau Customer
            • 3 mins
            • 108 Mo
            Customer : refactrisation du code
            • 10 mins
            • 399 Mo
            Invoice : mise en place du formulaire
            • 13 mins
            • 441 Mo
            Invoice : création d'un composant <Select /> pour les listes déroulantes
            • 4 mins
            • 142 Mo
            Invoice : validation et erreurs
            • 10 mins
            • 357 Mo
            Invoice : gérer la modification d'une facture
            • 9 mins
            • 352 Mo
            Invoice : refactorisation du code
            • 7 mins
            • 263 Mo
            Register : création du formulaire d'inscription
            • 18 mins
            • 644 Mo
            Conclusion et versionning du code avec GIT
            • 2 mins
            • 62,9 Mo

            React #05 - Ergonomie et réactivité

            Afficher des notifications ultra cool avec React Toastify
            • 14 mins
            • 697 Mo
            Créer des écrans de chargement avec React Content Loader
            • 14 mins
            • 633 Mo
            Ajouter les derniers liens manquants dans l'application
            • 2 mins
            • 88,9 Mo
            Conclusion et versionning du code avec GIT
            • 1 min
            • 41,1 Mo

            React #06 - Dernières retouches avant mise en production

            BONUS : On expérimente un cache pour accélérer l'application
            • 23 mins
            • 843 Mo
            Centraliser la configuration dans un seul fichier
            • 7 mins
            • 271 Mo
            Conclusion et versionning du code avec GIT
            • 1 min
            • 33,4 Mo

            Déploiement

            Introduction de la section
            • 2 mins
            • 15,1 Mo
            Aperçu
            Injecter des variables d'environnement avec WebPack
            • 10 mins
            • 424 Mo
            Découverte de Heroku
            • 4 mins
            • 146 Mo
            Aperçu
            Heroku : associer notre dépôt GitHub
            • 6 mins
            • 245 Mo
            Heroku : Ajouter un addon pour MySQL
            • 3 mins
            • 118 Mo
            Heroku : Gérer la configuration
            • 12 mins
            • 578 Mo
            Heroku : Récupérer les logs de l'application
            • 3 mins
            • 154 Mo
            Heroku : premier déploiement, premier bug !
            • 10 mins
            • 374 Mo
            Heroku : correction du bug et redéploiement
            • 9 mins
            • 413 Mo
            OVH : Mise en place
            • 10 mins
            • 368 Mo
            OVH : Installer composer sur notre mutualisé
            • 6 mins
            • 266 Mo
            OVH : Génération de l'application React en local
            • 4 mins
            • 134 Mo
            OVH : Repositionner ses variables d'environnement en local
            • 1 min
            • 42 Mo