Page d'accueil>Lié à la programmation>Autre code source
Télécharger

Site Web de commerce électronique Amazona

amazone

Tutoriel React & Node - Commerce électronique complet en 9 heures [2021]

Bienvenue dans mon tutoriel React et Node pour créer un site Web de commerce électronique entièrement fonctionnel exactement comme Amazon. Ouvrez votre éditeur de code et suivez-moi pendant les prochaines heures pour créer un site e-commerce en utilisant la stack MERN (MongoDB, ExpressJS, React et Node.JS).

Site Web de démonstration

  • Heroku : https://react-amazona.herokuapp.com

  • Miroir Heroku : https://react-amazona-mirror.herokuapp.com

Vous apprendrez

  • HTML5 et CSS3 : éléments sémantiques, grille CSS, Flexbox

  • React : composants, accessoires, événements, crochets, routeur, Axios

  • Redux : magasin, réducteurs, actions

  • Node & Express : API Web, analyseur de corps, téléchargement de fichiers, JWT

  • MongoDB : Mangouste, Agrégation

  • Développement : ESLint, Babel, Git, Github,

  • Déploiement : Heroku

  • Regarder le didacticiel React & Node

Exécuter localement

1. Cloner le dépôt 

$ git clone [email protected]:basir/amazona.git
$ cd amazona

2. Configurer MongoDB

  • MongoDB locale

    • Installez-le à partir d'ici

    • Créer un fichier .env dans le dossier racine

    • Définir MONGODB_URL=mongodb://localhost/amazona

  • Atlas Cloud MongoDB

    • Créez une base de données sur https://cloud.mongodb.com

    • Créer un fichier .env dans le dossier racine

    • Définir MONGODB_URL=mongodb+srv://your-db-connection

3. Exécutez le back-end 

$ npm install
$ npm start

4. Exécutez le front-end 

# open new terminal
$ cd frontend
$ npm install
$ npm start

5. Utilisateurs et produits des semences

  • Exécutez ceci sur Chrome : http://localhost:5000/api/users/seed

  • Il renvoie l'e-mail et le mot de passe de l'administrateur

  • Exécutez ceci sur Chrome : http://localhost:5000/api/products/seed

  • Il crée 6 exemples de produits

6. Connexion administrateur

  • Exécutez http://localhost:3000/signin

  • Entrez l'e-mail et le mot de passe de l'administrateur et cliquez sur Connexion

Soutien

  • Questions/Réponses : https://webacademy.pro/amazona

  • Contacter l'instructeur : Basir

Leçons

  1. Introduction à ce cours

    1. ce que tu vas construire

    2. ce que tu apprendras

    3. qui sont les publics

  2. Installer les outils

    1. Éditeur de code

    2. Navigateur Web

    3. Extension de code VS

  3. Modèle de site Web

    1. Créer un dossier Amazon

    2. créer un dossier de modèles

    3. créer index.html

    4. ajouter le code HTML par défaut

    5. lien vers style.css

    6. créer un en-tête, un principal et un pied de page

    7. éléments de style

  4. Produits d'affichage

    1. créer des produits div

    2. ajouter des attributs de produit

    3. ajouter un lien, une image, un nom et un prix

  5. Créer une application React

    1. interface npx create-react-app

    2. npm démarrer

    3. Supprimer les fichiers inutilisés

    4. copier le contenu index.html dans App.js

    5. copier le contenu style.css dans index.css

    6. remplacer la classe par className

  6. Partager le code sur Github

    1. Initialiser le dépôt git

    2. Valider les modifications

    3. Créer un compte GitHub

    4. Créer un dépôt sur github

    5. connecter le dépôt local au dépôt github

    6. pousser les modifications vers github

  7. Créer une évaluation et un composant de produit

    1. créer des composants/Rating.js

    2. créer un div.rating

    3. style div.rating, travée et dernière travée

    4. Créer un composant Produit

    5. Utiliser le composant Notation

  8. Créer un écran de produit

    1. Installer React-Router-Dom

    2. Utiliser BrowserRouter et Route pour l'écran d'accueil

    3. Créer HomeScreen.js

    4. Ajoutez-y le code de la liste de produits

    5. Créer ProductScreen.js

    6. Ajouter une nouvelle route depuis les détails du produit vers App.js

    7. Créez 3 colonnes pour l'image du produit, les informations et l'action

  9. Créer un serveur Node.JS

    1. exécutez npm init dans le dossier racine

    2. Mettre à jour le type d'ensemble package.json : module

    3. Ajouter .js aux importations

    4. npm installer express

    5. créer serveur.js

    6. ajouter la commande start en tant que nœud backend/server.js

    7. exiger express

    8. créer une route pour / retourner le backend est prêt.

    9. déplacer products.js du frontend vers le backend

    10. créer une route pour /api/products

    11. retourner les produits

    12. exécuter npm start

  10. Charger des produits depuis le backend

    1. modifier HomeScreen.js

    2. définir les produits, le chargement et l'erreur.

    3. créer un effet d'utilisation

    4. définir async fetchData et l'appeler

    5. installer axios

    6. obtenir des données de /api/products

    7. montre-les dans la liste

    8. créer un composant de chargement

    9. créer un composant de boîte de message

    10. utilisez-les dans HomeScreen

  11. Installer ESlint pour le linting de code

    1. installer l'extension VSCode eslint

    2. npm install -D eslint

    3. exécutez ./node_modules/.bin/eslint --init

    4. Créer ./frontend/.env

    5. Ajoutez SKIP_PREFLIGHT_CHECK=true

  12. Ajouter Redux à l'écran d'accueil

    1. npm installer redux réagir-redux

    2. Créer un magasin.js

    3. initState= {produits :[]}

    4. réducteur = (état, action) => switch LOAD_PRODUCTS : {products : action.payload}

    5. exporter le createStore par défaut (réducteur, initState)

    6. Modifier HomeScreen.js

    7. shopName = useSelector(state=>state.products)

    8. const dispatch = useDispatch()

    9. useEffect(()=>dispatch({type : LOAD_PRODUCTS, charge utile : data})

    10. Ajouter un magasin à index.js

  13. Ajouter Redux à l'écran du produit

    1. créer des constantes, des actions et des réducteurs de détails sur le produit

    2. ajouter un réducteur à store.js

    3. utiliser l'action dans ProductScreen.js

    4. ajouter /api/product/:id à l'API backend

  14. Bouton Ajouter au panier

    1. Gérer l'ajout au panier dans ProductScreen.js

    2. créer CartScreen.js

  15. Implémenter l’action Ajouter au panier

    1. créer des constantes, des actions et des réducteurs addToCart

    2. ajouter un réducteur à store.js

    3. utiliser l'action dans CartScreen.js

    4. rendre cartItems.length

  16. Écran de création de panier

    1. créer 2 colonnes pour les articles du panier et l'action du panier

    2. cartItems.length === 0 ? le panier est vide

    3. afficher l'image de l'article, le nom, la quantité et le prix

    4. Bouton Passer à la caisse

    5. Implémenter l'action de suppression du panier

  17. Implémenter l’action Supprimer du panier

    1. créer des constantes, des actions et des réducteurs RemoveFromCart

    2. ajouter un réducteur à store.js

    3. utiliser l'action dans CartScreen.js

  18. Créer des exemples d'utilisateurs dans MongoDB

    1. npm installer la mangouste

    2. se connecter à mongodb

    3. créer config.js

    4. npm installer dotenv

    5. exporter MONGODB_URL

    6. créer des modèles/userModel.js

    7. créer userSchema et userModel

    8. créer un itinéraire utilisateur

    9. Données d'échantillon de semences

  19. Créer des exemples de produits dans MongoDB

    1. créer des modèles/productModel.js

    2. créer productSchema et productModel

    3. créer un produitRoute

    4. Données d'échantillon de semences

  20. Créer un backend de connexion

    1. créer/API de connexion

    2. vérifier l'e-mail et le mot de passe

    3. générer un jeton

    4. installer le jeton Web Json

    5. installer dotenv

    6. renvoyer le jeton et les données

    7. testez-le avec Postman

  21. Écran de connexion de conception

    1. créer un écran de connexion

    2. afficher les champs d'e-mail et de mot de passe

    3. créer des constantes de connexion, des actions et des réducteurs

    4. Mettre à jour l'en-tête en fonction de la connexion de l'utilisateur

  22. Implémenter l'action de connexion

    1. créer des constantes de connexion, des actions et des réducteurs

    2. ajouter un réducteur à store.js

    3. utiliser l'action dans SigninScreen.js

  23. Écran Créer un registre

    1. créer une API pour /api/users/register

    2. insérer un nouvel utilisateur dans la base de données

    3. renvoyer les informations utilisateur et le jeton

    4. créer un écran de registre

    5. Ajouter des champs

    6. Champs de style

    7. Ajouter un écran à App.js

    8. créer une action de registre et un réducteur

    9. vérifier la validation et créer un utilisateur

  24. Créer un écran d'expédition

    1. créer le composant CheckoutSteps.js

    2. créer des champs d'expédition

    3. mettre en œuvre des constantes d'expédition, des actions et des réducteurs

  25. Créer un écran de paiement

    1. créer des champs de paiement

    2. mettre en œuvre des constantes d'expédition, des actions et des réducteurs

  26. Écran de commande de conception

    1. champs récapitulatifs de l'ordre de conception

    2. action de commande de conception

  27. Créer une API de commande

    1. API createOrder

    2. créer un modèle de commande

    3. créer une commandeRouter

    4. créer un itinéraire de commande

  28. Implémenter l’action PlaceOrder

    1. gérer passer la commande cliquez sur le bouton

    2. créer des constantes de commande, une action et un réducteur

  29. Écran Créer une commande

    1. construire une API de commande pour /api/orders/:id

    2. créer OrderScreen.js

    3. action sur les détails de la commande d'expédition dans useEffect

    4. charger des données avec useSelector

    5. afficher des données comme l'écran de commande

    6. créer les détails de la commande constante, action et réducteur

  30. Ajouter un bouton PayPal

    1. obtenir l'identifiant client de Paypal

    2. définissez-le dans le fichier .env

    3. créer un formulaire d'itinéraire /api/paypal/clientId

    4. créer getPaypalClientID dans api.js

    5. ajouter un script de paiement Paypal dans OrderScreen.js

    6. afficher le bouton Paypal

  31. Mettre en œuvre le paiement de la commande

    1. mettre à jour la commande après le paiement

    2. créer payOrder dans api.js

    3. créer un itinéraire pour /:id/pay dans orderRouter.js

    4. restituer après l'ordre de paiement

  32. Afficher l'historique des commandes

    1. créer une API de commandes clients

    2. créer une API pour getMyOrders

    3. afficher les commandes dans l'écran de profil

    4. commandes de style

  33. Afficher le profil utilisateur

    1. créer une API de détails sur l'utilisateur

    2. afficher les informations utilisateur

  34. Mettre à jour le profil utilisateur

    1. créer une API de mise à jour utilisateur

    2. mettre à jour les informations utilisateur

  35. Créer une vue administrateur

    1. Créer un menu d'administration

    2. Créer un middleware d'administration dans le backend

    3. Créer une route d'administration dans le frontend

  36. Liste des produits

    1. Écran Créer une liste de produits

    2. Ajouter un réducteur au magasin

    3. afficher les produits à l'écran

  37. Créer un produit

    1. construire créer une API de produit

    2. construire le bouton Créer un produit

    3. définir le produit créer une constante, une action et un réducteur

    4. utiliser l'action dans l'écran Liste de produits

  38. Écran de modification du produit

    1. créer un écran d'édition

    2. définir l'état

    3. créer des champs

    4. charger les détails du produit

    5. ajouter aux itinéraires

  39. Mettre à jour le produit

    1. définir l'API de mise à jour

    2. définir la constante, l'action et le réducteur de mise à jour du produit

    3. utiliser l'action dans l'écran de modification du produit

  40. Télécharger l'image du produit

    1. npm installer multer

    2. définir le routeur de téléchargement

    3. créer un dossier de téléchargements

    4. Gérer l'interface

  41. Supprimer le produit

    1. créer une API de suppression dans le backend

    2. créer des constantes de suppression, une action et un réducteur

    3. utilisez-le dans l'écran de la liste des produits

  42. Liste des commandes

    1. créer une API de liste de commandes

    2. Créer un écran de liste de commandes

    3. Ajouter un réducteur au magasin

    4. afficher les produits à l'écran

  43. Supprimer la commande 2. créer une action de suppression de commande et un réducteur 3. ajouter une action de suppression de commande à la liste de commandes

  44. Livrer la commande

    1. créer des actions et des réducteurs constants pour livrer l'ordre

    2. ajouter une action de livraison de commande à l'écran des détails de la commande

  45. Publier sur Heroku

    1. Créer un dépôt git

    2. Créer un compte Heroku

    3. installer la CLI Heroku

    4. connexion Heroku

    5. applications Heroku : créer Amazon

    6. Modifier package.json pour le script de construction

    7. Créer un fichier professionnel

    8. Créer une base de données Atlas MongoDB

    9. Définir la connexion à la base de données dans les variables d'environnement Heroku

    10. S'engager et pousser

  46. Liste des utilisateurs

    1. créer une API pour les utilisateurs de la liste

    2. Écran Créer une liste d'utilisateurs

    3. créer les détails de la commande constante, action et réducteur

  47. Supprimer des utilisateurs

    1. créer une API pour supprimer des utilisateurs

    2. créer les détails de la commande constante, action et réducteur

    3. Utiliser l'action dans UserListScreen

  48. Modifier l'utilisateur

    1. créer une API pour les utilisateurs de mise à jour

    2. créer une interface utilisateur d'écran d'édition

  49. Implémenter la vue vendeur

    1. ajouter un menu vendeur

    2. créer un itinéraire vendeur

    3. lister les produits pour le vendeur

    4. lister les commandes du vendeur

    5. ajouter le vendeur à la liste de produits et à l'écran de détails

  50. Créer une page vendeur

    1. créer une page vendeur

    2. mettre à jour le composant du produit et l'écran du produit

    3. mettre à jour les itinéraires de produits

  51. Ajouter un carrousel des meilleures ventes

    1. installer le carrousel de réaction

    2. mettre en place des actions et des réducteurs pour les meilleurs vendeurs

    3. utilisez le carrousel de réaction avec les données dans l'écran d'accueil

  52. Forcer la commande d'articles auprès d'un seul vendeur

    1. mettre à jour l'action addToCart pour acheter auprès d'un vendeur lors d'une commande

  53. Créer un champ de recherche et un écran de recherche

    1. créer une barre de recherche dans Header.js

    2. ajouter du style

    3. gérer le formulaire de soumission

    4. modifier l'URL d'analyse pour obtenir la chaîne de requête

    5. mettre à jour l'API de la liste de produits pour la recherche par nom

  54. Ajouter un filtre de recherche avancé 1. filtrer par catégorie 2. filtrer par gamme de prix 3. filtrer par note moyenne

  55. Recherche avancée complète 1. filtrer par prix 2. filtrer par note 3. trier par prix, note, ...

  56. Évaluer et évaluer les produits 1. évaluer les produits 2. créer des actions et des réducteurs

  57. Choisissez l'adresse sur Google Map 1. créez les informations d'identification de Google Map 2. mettez à jour le fichier .env avec la clé Google Api 3. créez une API pour envoyer l'API Google au frontend 4. créez un écran de carte 5. récupérez l'API Google 6. getUserLocation 7. installez @react- google-maps/api 8. utilisez-le dans l'écran d'expédition 9. appliquez la carte à l'écran de paiement

  58. Correction d'un bug : exécution locale sans problème

    1. ajouter des informations sur le vendeur à data.js

    2. données sur les produits de semences avec informations d'administration en tant que vendeur

    3. correction de isSeller et isAdmin lors de la mise à jour de l'utilisateur

    4. supprimer l'authentification des détails de l'utilisateur

  59. Implémenter la pagination

    1. ajouter la pagination au routeur de produit dans le backend

    2. appliquer le numéro de page aux actions et aux réducteurs dans le frontend

    3. afficher les numéros de page dans l'écran de recherche

  60. Envoyer un reçu de commande par mailgun 1. créer un compte mailgun 2. ajouter et vérifier votre domaine sur mailgun 3. installer mailgun-js 4. définir la clé API dans le fichier env 5. modifier l'ordre de paiement dans orderRouter 6. envoyer un e-mail au

  61. Créer un écran de tableau de bord

    1. Créer des données graphiques dans le backend

    2. Écran Créer un graphique

  62. Mettre en œuvre le chat en direct avec les clients

    1. utiliser socket io pour créer un backend

    2. créer un composant de boîte de discussion

    3. créer un écran de support

  63. Mise à niveau vers React 17, Router 6, Mongoose 6

    1. Back-end

    2. Désinstallez et installez tous les packages

    3. supprimer les options dans Mongoose Connect

    4. envelopper mailgun dans try catch dans orderRouter

    5. L'extrémité avant

    6. Désinstallez et installez tous les packages

    7. supprimer dans la zone de recherche

    8. envelopper tout dedans

    9. remplacer par <Route element={}>

    10. remplacer par <Route element={ }/>

    11. remplacer et aussi

    12. Mettre à jour PrivateRoute, AdminRoute et SellerRoute

    13. remplacez push() par naviguer() de useNavigate

    14. remplacez props.match.params.id par const params = useParams();

    15. remplacez props.location.search par const { search } = useLocation(); et URLSearchParams

    16. remplacez props.match.path par const {pathname} = useLocation();

    17. mettre userInfo dans useEffect dans ChatBox, SupportScreen

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout