59,00

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

59,00

  • Une formation vidéo de 9h13m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Développez un site eCommerce avec React, GraphQL, Apollo, Google Sign & Paypal

ajouter ce cours aux favoris retirer ce cours des favoris

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.

Table des matières de cette formation JavaScript, React, GraphQL (durée : 9h13m)

  • Introduction/Présentation
    • Introduction gratuit 00:00:54
  • [BACK] - Serveur NodeJS & Express
    • Créer un serveur avec ExpressJS 00:03:47
    • Créer un serveur : "Hello Express" 00:08:47
    • Les modules utilitaires (middleware) : nodemon & cors 00:06:04
    • Ajouter un fichier .gitignore 00:04:29
  • [BACK] - Stocker dans le cloud avec les services hébergés de MongoDB Atlas
    • Créer un nouveau cluster 00:05:04
    • Créer une base de données et une nouvelle collection 00:02:56
    • Utilisateur BD + whitelist IP 00:05:26
    • Ajouter des données au moyen de compass 00:06:03
    • Se connecter avec le mongo shell 1/2 00:04:34
    • Se connecter avec le mongo shell 2/2 00:09:05
    • Conclusion 00:01:31
  • [BACK] - Model et mongoose schema types
    • Présentation mongoose 00:04:34
    • Mongoose.connect() 00:09:14
    • Mongoose.model() 00:14:20
    • Mongoose.model() & options 00:05:18
    • RESTful vs. graphQL 00:03:38
  • [BACK] - GraphQL - Type, Schema, Requête, resolvers
    • Présentation GraphQL 00:03:32
    • Module GraphQL et GraphQL Express 00:04:01
    • Hello GraphQL ! 00:04:19
    • GraphQL Schema 00:08:53
    • GraphQL & variables 00:03:50
    • Conclusion 00:01:05
  • [FRONT] - React & Apollo Client
    • Présentation boutique en ligne Click & Collect 00:07:35
    • Projet de démarrage : react-router-dom, redux, react-redux & appolo-client 00:05:56
    • Apollo Client - Introduction 00:04:37
    • Apollo Client Hook : useQuery 00:10:52
    • UI - Gallerie & Produits 00:03:41
    • Context Api - Définir les categories de produits 00:12:43
    • S'abonner aux mises à jour du contexte 00:07:28
    • Apollo Client : query avec variable 00:02:47
    • Context API - Les options de filtres 1/2 00:10:19
    • Context API - Les options de filtres 2/2 00:08:31
  • [FRONT] - Gestion état avec Redux & Context API
    • Présentation Redux 00:04:42
    • Redux : concepts clés 00:05:58
    • Projet de Démarrage 00:02:10
    • Actions, Reducer & Store 00:08:57
    • Dispatch Action : Add to Cart 1/2 00:07:21
    • Dispatch Action : Add to Cart 2/2 00:11:01
    • Redux DevTools 00:03:54
    • Action : Add to cart - flux de données 00:03:56
    • Vue : le Cart 00:11:52
    • Action : Update Cart 00:09:53
    • Action : Remove from Cart 00:05:33
    • Selector : état dérivé 00:10:49
    • Badge & Dropdown 00:15:18
    • Warnings et errors 00:14:48
    • Conclusion 00:02:24
  • [FRONT] - Authentification des utilisateurs avec Google Signin
    • Présentation 00:02:49
    • Google Login Button 00:06:31
    • React-google-login 00:06:52
    • Google Cloud Platform - Client ID 00:05:56
    • Login - success callback et handler 00:02:35
    • Logout - success callback et handler 00:05:38
  • [FRONT] - Profile utilisateur
    • Redux - combineReducer 00:12:13
    • Redux - Dispatch des actions 00:13:13
    • Formulaire Checkout 00:12:49
    • Profile utilisateur 00:06:26
    • Validation Formulaire 1/2 00:11:10
    • Validation Formulaire 2/2 00:09:36
    • History push 00:01:54
  • [FRONT] - Payer en ligne avec le Paypal API
    • Projet de démarrage 00:04:27
    • React-paypal-express-checkout gratuit 00:08:17
    • Paypal Developer : API credentials 00:04:36
    • Transaction test avec Postman 00:05:19
    • Comptes sandbox pour simuler les transactions avec Paypal 00:06:22
    • Les callback functions : success et fail 00:04:41
    • Statut Commande & validation formulaire 00:10:57
    • Confirmer la transaction Paypal & commande clien 00:08:50
    • Bootstrap 5 : bannière d'alerte 00:09:07
  • [FULLSTACK] - GraphQL Mutation
    • Schema - ORDER model 00:03:28
    • GraphQL Mutation 00:07:37
    • Database - collection 'orders' 00:04:59
    • GraphQLObjectInputType : ProductInput 00:05:37
    • Apollo Client - Mutation 00:17:00
    • Apollo Client - Mutation - write to DB 00:05:53
    • Model GraphQL (correction) 00:04:01
    • Action globale RESET (redux) 00:08:26
    • Afficher liste de commandes 1/2 00:05:20
    • Afficher liste de commandes 2/2 00:16:07



Formateur : Sandy Ludosky

Sandy Ludosky a publié 28 tutoriels et obtenu une note moyenne de 4,3/5 sur 3 380 tutoriels vendus. Sandy Ludosky est un formateur certifié tuto.com. Voir les autres formations de Sandy Ludosky

  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
Parcours Developpeur Front End
accédez à plus de 1323 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données