Développez un site eCommerce avec React, GraphQL, Apollo, Google Sign & Paypal
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
9h18
de formation
81
leçons vidéo
11
chapitres
Intermédiaire
niveau requis
Sandy Ludosky
Sandy Ludosky
Formatrice certifiée

Développez un site eCommerce avec React, GraphQL, Apollo, Google Sign & Paypal

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
9h18
de formation
81
leçons vidéo
11
chapitres

Le commerce en ligne est aujourd'hui un mode d'achat privilégié par des millions d'utilisateurs, avec des millions de transactions effectuées chaque jour.
Le contexte de distanciation sociale a boosté les ventes en ligne. Entreprises et commerces adaptent leurs moyens logistiques et offrent un nouveau mode de distribution: le Click & Collect.
La solution devient désormais 100% numérique.

Découvrez comment développer votre propre solution avec cette formation accélérée sur les technologies MERN FullStack avec : MongoDB, Express, React & Node.
Découvrez également les bibliothèques Redux et Apollo Client pour le state management.
Apprenez en plus à intégrer les méthodes d'authentification avec Google Login, et de paiement avec l'API Paypal.
 

Au programme de cette formation Développez un site Ecommerce avec paiement Paypal

  • Développement FullStack avec la stack : MERN,
  • Apprendre le stockage de données avec les services hébergé dans le cloud MongoDB et le fournisseur AWS,
  • Développer une API pour votre application client React,
  • Créer un cluster, une base de données NoSQL, des collections sur le cloud AWS,
  • Découvrir GraphQL, son fonctionnement et son utilisation avec plusieurs exemples pour faire évoluer votre API,
  • Gérer l’état de son application client avec Redux et le context API,
  • Accepter les paiements en ligne avec le Paypal API,
  • Et, Bootstrap pour développer rapidement les interfaces visuelles, responsives et élégantes, d’une application boutique de vêtement en ligne : Click & Collect !

Partie #1 - Backend : Node, Express, MongoDB & Introduction GraphQL

  • Créer un serveur et une interface de programmation applicative (API) avec Node et Express
  • Créer un cluster, une base de données et des collections avec les services hébergé dans le cloud MongoDB sur AWS
  • Définir les formats de documents avec mongoose schema types
  • Se connecter et faire des opérations avec le mongo shell
  • Télécharger des sources de données avec l’application Compass
  • Comprendre les avantages de graphQL vs REST

Partie #2 - Front :  React, Redux state management & Introduction à la bibliothèque Apollo Client

  • Focus sur le langage de requêtes GraphQL
  • Recevoir les ressources dont vous avez besoin pour votre application client avec les demandes GraphQL
  • Envoyer et recevoir des demandes
  • Gestion état local, global et mise en caches de ressources téléchargées avec le client Apollo
  • Ajouter des options de filtres et catégories de produits avec le Context API
  • Gérer l’état des achats en ligne et du profil utilisateur avec Redux

Partie #3 - Front : Authentification avec Google Signin & paiement avec Paypal

  • Google Cloud Platform :  Créer un nouveau projet, des clés API et le clientID
  • Authentifier et déconnecter les utilisateurs à votre boutique avec React Google Login (Google SignIn) : Login, Logout
  • Accepter les paiements en ligne avec Paypal API
  • Envoyez des requêtes  GraphQL mutations à l’API

Tous les fichiers de travail sont fournis !

  • Template HTML & CSS Ecommerce responsive Bootstrap : SEO optimisé et conforme aux standards d'accessibilité,
  • Les guides PDF.

 

A qui s'adresse ce cours ?

  • Développeurs Front
  • Tous développeurs avec un niveau intermédiaire en Javascript, Node & ReactJS
  • Toutes personnes souhaitant développer une solution de commerce en ligne

Attention, ce cours est un niveau intermédiaire à avancé. Pour le suivre vous devez connaître les fondamentaux de Javascript, React et Redux, ainsi que le Comande Line Interface (CLI) - on utilisera iTerm et le terminal intégré de VSCode. Il est préférable mais pas obligatoire de connaître les ressources et classes prédéfinies de Bootstrap.

Tous les fichiers de travail sont fournis !
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction/Présentation
Chapitre 2
[BACK] - Serveur NodeJS & Express
Chapitre 3
[BACK] - Stocker dans le cloud avec les services hébergés de MongoDB Atlas
Chapitre 4
[BACK] - Model et mongoose schema types
Chapitre 5
[BACK] - GraphQL - Type, Schema, Requête, resolvers
Chapitre 6
[FRONT] - React & Apollo Client
Chapitre 7
[FRONT] - Gestion état avec Redux & Context API

Table des matières

Chapitre 1 : Introduction/Présentation

54s
 
Leçon 1Introduction

Chapitre 2 : [BACK] - Serveur NodeJS & Express

23m07
 
Leçon 1Créer un serveur avec ExpressJS
Leçon 2Créer un serveur : "Hello Express"
Leçon 3Les modules utilitaires (middleware) : nodemon & cors
Leçon 4Ajouter un fichier .gitignore

Chapitre 3 : [BACK] - Stocker dans le cloud avec les services hébergés de MongoDB Atlas

34m39
 
Leçon 1Créer un nouveau cluster
Leçon 2Créer une base de données et une nouvelle collection
Leçon 3Utilisateur BD + whitelist IP
Leçon 4Ajouter des données au moyen de compass
Leçon 5Se connecter avec le mongo shell 1/2
Leçon 6Se connecter avec le mongo shell 2/2
Leçon 7Conclusion

Chapitre 4 : [BACK] - Model et mongoose schema types

37m04
 
Leçon 1Présentation mongoose
Leçon 2Mongoose.connect()
Leçon 3Mongoose.model()
Leçon 4Mongoose.model() & options
Leçon 5RESTful vs. graphQL

Chapitre 5 : [BACK] - GraphQL - Type, Schema, Requête, resolvers

25m40
 
Leçon 1Présentation GraphQL
Leçon 2Module GraphQL et GraphQL Express
Leçon 3Hello GraphQL !
Leçon 4GraphQL Schema
Leçon 5GraphQL & variables
Leçon 6Conclusion

Chapitre 6 : [FRONT] - React & Apollo Client

1h14
 
Leçon 1Présentation boutique en ligne Click & Collect
Leçon 2Projet de démarrage : react-router-dom, redux, react-redux & appolo-client
Leçon 3Apollo Client - Introduction
Leçon 4Apollo Client Hook : useQuery
Leçon 5UI - Gallerie & Produits
Leçon 6Context Api - Définir les categories de produits
Leçon 7S'abonner aux mises à jour du contexte
Leçon 8Apollo Client : query avec variable
Leçon 9Context API - Les options de filtres 1/2
Leçon 10Context API - Les options de filtres 2/2

Chapitre 7 : [FRONT] - Gestion état avec Redux & Context API

1h58
 
Leçon 1Présentation Redux
Leçon 2Redux : concepts clés
Leçon 3Projet de Démarrage
Leçon 4Actions, Reducer & Store
Leçon 5Dispatch Action : Add to Cart 1/2
Leçon 6Dispatch Action : Add to Cart 2/2
Leçon 7Redux DevTools
Leçon 8Action : Add to cart - flux de données
Leçon 9Vue : le Cart
Leçon 10Action : Update Cart
Leçon 11Action : Remove from Cart
Leçon 12Selector : état dérivé
Leçon 13Badge & Dropdown
Leçon 14Warnings et errors
Leçon 15Conclusion

Chapitre 8 : [FRONT] - Authentification des utilisateurs avec Google Signin

30m21
 
Leçon 1Présentation
Leçon 2Google Login Button
Leçon 3React-google-login
Leçon 4Google Cloud Platform - Client ID
Leçon 5Login - success callback et handler
Leçon 6Logout - success callback et handler

Chapitre 9 : [FRONT] - Profile utilisateur

1h07
 
Leçon 1Redux - combineReducer
Leçon 2Redux - Dispatch des actions
Leçon 3Formulaire Checkout
Leçon 4Profile utilisateur
Leçon 5Validation Formulaire 1/2
Leçon 6Validation Formulaire 2/2
Leçon 7History push

Chapitre 10 : [FRONT] - Payer en ligne avec le Paypal API

1h02
 
Leçon 1Projet de démarrage
Leçon 2React-paypal-express-checkout
Leçon 3Paypal Developer : API credentials
Leçon 4Transaction test avec Postman
Leçon 5Comptes sandbox pour simuler les transactions avec Paypal
Leçon 6Les callback functions : success et fail
Leçon 7Statut Commande & validation formulaire
Leçon 8Confirmer la transaction Paypal & commande clien
Leçon 9Bootstrap 5 : bannière d'alerte

Chapitre 11 : [FULLSTACK] - GraphQL Mutation

1h23
 
Leçon 1Schema - ORDER model
Leçon 2GraphQL Mutation
Leçon 3Database - collection 'orders'
Leçon 4GraphQLObjectInputType : ProductInput
Leçon 5Apollo Client - Mutation
Leçon 6Apollo Client - Mutation - write to DB
Leçon 7Model GraphQL (correction)
Leçon 8Action globale RESET (redux)
Leçon 9Afficher liste de commandes 1/2
Leçon 10Afficher liste de commandes 2/2
Leçon 11Mutation oliste commande

Aperçus

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
58,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
9h18 de vidéo • 11 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 754 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1421 tutos gratuits

Notre politique de protection des données