Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

Amazona E-Commerce-Website

Amazonas

React & Node Tutorial – Vollständiger E-Commerce in 9 Stunden [2021]

Willkommen zu meinem React- und Node-Tutorial zum Erstellen einer voll funktionsfähigen E-Commerce-Website genau wie Amazon. Öffnen Sie Ihren Code-Editor und folgen Sie mir in den nächsten Stunden, um eine E-Commerce-Website mit dem MERN-Stack (MongoDB, ExpressJS, React und Node.JS) zu erstellen.

Demo-Website

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

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

Du wirst lernen

  • HTML5 und CSS3: Semantische Elemente, CSS Grid, Flexbox

  • Reagieren: Komponenten, Requisiten, Ereignisse, Hooks, Router, Axios

  • Redux: Speichern, Reduzierer, Aktionen

  • Node & Express: Web-API, Body-Parser, Datei-Upload, JWT

  • MongoDB: Mongoose, Aggregation

  • Entwicklung: ESLint, Babel, Git, Github,

  • Einsatz: Heroku

  • Sehen Sie sich das React & Node-Tutorial an

Lokal ausführen

1. Repo klonen 

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

2. Richten Sie MongoDB ein

  • Lokale MongoDB

    • Installieren Sie es von hier aus

    • Erstellen Sie eine .env-Datei im Stammordner

    • Legen Sie MONGODB_URL=mongodb://localhost/amazona fest

  • Atlas Cloud MongoDB

    • Erstellen Sie eine Datenbank unter https://cloud.mongodb.com

    • Erstellen Sie eine .env-Datei im Stammordner

    • Legen Sie MONGODB_URL=mongodb+srv://your-db-connection fest

3. Backend ausführen 

$ npm install
$ npm start

4. Führen Sie das Frontend aus 

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

5. Seed-Benutzer und -Produkte

  • Führen Sie dies auf Chrome aus: http://localhost:5000/api/users/seed

  • Es gibt die E-Mail-Adresse und das Passwort des Administrators zurück

  • Führen Sie dies auf Chrome aus: http://localhost:5000/api/products/seed

  • Es entstehen 6 Musterprodukte

6. Admin-Login

  • Führen Sie http://localhost:3000/signin aus

  • Geben Sie die E-Mail-Adresse und das Passwort des Administrators ein und klicken Sie auf „Anmelden“.

Unterstützung

  • Fragen/Antworten: https://webacademy.pro/amazona

  • Kontakt zum Kursleiter: Basir

Unterricht

  1. Einführung in diesen Kurs

    1. was du bauen wirst

    2. was du lernen wirst

    3. Wer sind die Zuschauer?

  2. Tools installieren

    1. Code-Editor

    2. Webbrowser

    3. VS-Code-Erweiterung

  3. Website-Vorlage

    1. Amazon-Ordner erstellen

    2. Vorlagenordner erstellen

    3. Erstellen Sie index.html

    4. Fügen Sie Standard-HTML-Code hinzu

    5. Link zu style.css

    6. Kopf-, Haupt- und Fußzeile erstellen

    7. Stilelemente

  4. Produkte anzeigen

    1. Produkte erstellen div

    2. Produktattribute hinzufügen

    3. Fügen Sie Link, Bild, Namen und Preis hinzu

  5. Erstellen Sie eine Reaktions-App

    1. npx create-react-app-Frontend

    2. npm-Start

    3. Entfernen Sie nicht verwendete Dateien

    4. Kopieren Sie den Inhalt von index.html nach App.js

    5. Kopieren Sie den Inhalt von style.css nach index.css

    6. Ersetzen Sie die Klasse durch den Klassennamen

  6. Code auf Github teilen

    1. Git-Repository initialisieren

    2. Änderungen übernehmen

    3. Erstellen Sie ein Github-Konto

    4. Erstellen Sie ein Repo auf Github

    5. Verbinden Sie das lokale Repo mit dem Github-Repo

    6. Push-Änderungen auf Github

  7. Erstellen Sie eine Bewertung und eine Produktkomponente

    1. Erstellen Sie „components/Rating.js“.

    2. div.Bewertung erstellen

    3. Stil-Div.-Bewertung, Spanne und letzte Spanne

    4. Produktkomponente erstellen

    5. Verwenden Sie die Bewertungskomponente

  8. Produktbildschirm erstellen

    1. Installieren Sie React-Router-Dom

    2. Verwenden Sie BrowserRouter und Route für den Startbildschirm

    3. Erstellen Sie HomeScreen.js

    4. Fügen Sie dort den Produktlistencode hinzu

    5. Erstellen Sie ProductScreen.js

    6. Fügen Sie eine neue Route von Produktdetails zu App.js hinzu

    7. Erstellen Sie 3 Spalten für Produktbild, Informationen und Aktion

  9. Erstellen Sie einen Node.JS-Server

    1. Führen Sie npm init im Stammordner aus

    2. Aktualisieren Sie den Satztyp package.json: Modul

    3. Fügen Sie .js zu Importen hinzu

    4. npm install express

    5. Erstellen Sie server.js

    6. Fügen Sie den Startbefehl als Knoten backend/server.js hinzu

    7. erfordern Express

    8. Route erstellen für / Rückkehr Backend ist fertig.

    9. Verschieben Sie products.js vom Frontend ins Backend

    10. Route für /api/products erstellen

    11. Produkte zurückgeben

    12. Führen Sie npm start aus

  10. Laden Sie Produkte aus dem Backend

    1. Bearbeiten Sie HomeScreen.js

    2. Definieren Sie Produkte, Belastung und Fehler.

    3. useEffect erstellen

    4. Definieren Sie async fetchData und rufen Sie es auf

    5. Axios installieren

    6. Daten aus /api/products abrufen

    7. Zeigen Sie sie in der Liste an

    8. Ladekomponente erstellen

    9. Erstellen Sie eine Message-Box-Komponente

    10. Verwenden Sie sie im HomeScreen

  11. Installieren Sie ESlint für Code-Linting

    1. Installieren Sie die VSCode-Eslint-Erweiterung

    2. npm install -D eslint

    3. Führen Sie ./node_modules/.bin/eslint --init aus

    4. Erstellen Sie ./frontend/.env

    5. Fügen Sie SKIP_PREFLIGHT_CHECK=true hinzu

  12. Fügen Sie Redux zum Startbildschirm hinzu

    1. NPM Install Redux React-Redux

    2. Erstellen Sie store.js

    3. initState= {Produkte:[]}

    4. Reducer = (Zustand, Aktion) => switch LOAD_PRODUCTS: {products: action.payload}

    5. export default createStore(reducer, initState)

    6. Bearbeiten Sie HomeScreen.js

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

    8. const distribution = useDispatch()

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

    10. Store zu index.js hinzufügen

  13. Fügen Sie Redux zum Produktbildschirm hinzu

    1. Erstellen Sie Produktdetails-Konstanten, Aktionen und Reduzierer

    2. Reduzierer zu store.js hinzufügen

    3. Verwenden Sie die Aktion in ProductScreen.js

    4. Fügen Sie /api/product/:id zur Backend-API hinzu

  14. Behandeln Sie die Schaltfläche „Zum Warenkorb hinzufügen“.

    1. Behandeln Sie „In den Warenkorb hinzufügen“ in ProductScreen.js

    2. Erstellen Sie CartScreen.js

  15. Implementieren Sie die Aktion „Zum Warenkorb hinzufügen“.

    1. Erstellen Sie addToCart-Konstanten, Aktionen und Reduzierer

    2. Reduzierer zu store.js hinzufügen

    3. Verwenden Sie die Aktion in CartScreen.js

    4. rendern Sie „cartItems.length“.

  16. Bildschirm „Warenkorb erstellen“.

    1. Erstellen Sie zwei Spalten für Warenkorbartikel und Warenkorbaktion

    2. cartItems.length === 0 ? Warenkorb ist leer

    3. Artikelbild, Name, Menge und Preis anzeigen

    4. Klicken Sie auf die Schaltfläche „Zur Kasse gehen“.

    5. Implementieren Sie die Aktion „Aus dem Warenkorb entfernen“.

  17. Implementieren Sie die Aktion „Aus dem Warenkorb entfernen“.

    1. Erstellen Sie RemoveFromCart-Konstanten, Aktionen und Reduzierer

    2. Reduzierer zu store.js hinzufügen

    3. Verwenden Sie die Aktion in CartScreen.js

  18. Erstellen Sie Beispielbenutzer in MongoDB

    1. npm mongoose installieren

    2. Mit Mongodb verbinden

    3. Erstellen Sie config.js

    4. npm install dotenv

    5. MONGODB_URL exportieren

    6. Erstellen Sie models/userModel.js

    7. Erstellen Sie userSchema und userModel

    8. BenutzerRoute erstellen

    9. Daten zur Saatgutprobe

  19. Erstellen Sie Beispielprodukte in MongoDB

    1. Erstellen Sie models/productModel.js

    2. Erstellen Sie ein Produktschema und ein Produktmodell

    3. ProduktRoute erstellen

    4. Daten zur Saatgutprobe

  20. Erstellen Sie ein Anmelde-Backend

    1. /Signin-API erstellen

    2. Überprüfen Sie E-Mail und Passwort

    3. Token generieren

    4. JSON-Web-Token installieren

    5. installiere dotenv

    6. Token und Daten zurückgeben

    7. Testen Sie es mit Postman

  21. Entwerfen Sie den Anmeldebildschirm

    1. SigninScreen erstellen

    2. E-Mail- und Passwortfelder rendern

    3. Erstellen Sie Anmeldekonstanten, Aktionen und Reduzierer

    4. Aktualisieren Sie den Header basierend auf der Benutzeranmeldung

  22. Implementieren Sie die Anmeldeaktion

    1. Erstellen Sie Anmeldekonstanten, Aktionen und Reduzierer

    2. Reduzierer zu store.js hinzufügen

    3. Verwenden Sie die Aktion in SigninScreen.js

  23. Registrierungsbildschirm erstellen

    1. Erstellen Sie eine API für /api/users/register

    2. Fügen Sie einen neuen Benutzer in die Datenbank ein

    3. Benutzerinformationen und Token zurückgeben

    4. RegisterScreen erstellen

    5. Felder hinzufügen

    6. Stilfelder

    7. Bildschirm zu App.js hinzufügen

    8. Erstellen Sie eine Registeraktion und einen Reduzierer

    9. Überprüfen Sie die Validierung und erstellen Sie einen Benutzer

  24. Versandbildschirm erstellen

    1. Erstellen Sie die CheckoutSteps.js-Komponente

    2. Versandfelder erstellen

    3. Implementieren Sie Versandkonstanten, Aktionen und Reduzierungen

  25. Zahlungsbildschirm erstellen

    1. Zahlungsfelder erstellen

    2. Implementieren Sie Versandkonstanten, Aktionen und Reduzierungen

  26. Design-Bestellbildschirm

    1. Zusammenfassungsfelder für Entwurfsaufträge

    2. Design-Order-Aktion

  27. Erstellen Sie eine Place Order API

    1. createOrder-API

    2. orderModel erstellen

    3. orderRouter erstellen

    4. Post-Order-Route erstellen

  28. Implementieren Sie die PlaceOrder-Aktion

    1. Klicken Sie auf die Schaltfläche „Bestellung aufgeben“.

    2. Erstellen Sie Reihenfolgekonstanten, Aktionen und Reduzierer

  29. Bildschirm „Bestellung erstellen“.

    1. Auftrags-API für /api/orders/:id erstellen

    2. Erstellen Sie OrderScreen.js

    3. Aktion „Bestelldetails versenden“ in useEffect

    4. Daten mit useSelector laden

    5. Zeigen Sie Daten wie den Bestellbildschirm an

    6. Bestelldetails erstellen: Konstante, Aktion und Reduzierer

  30. Schaltfläche „PayPal hinzufügen“ hinzufügen

    1. Holen Sie sich die Kunden-ID von PayPal

    2. Legen Sie es in der .env-Datei fest

    3. Routenformular erstellen /api/paypal/clientId

    4. Erstellen Sie getPaypalClientID in api.js

    5. Fügen Sie das Paypal-Checkout-Skript in OrderScreen.js hinzu

    6. Paypal-Button anzeigen

  31. Implementieren Sie die Auftragszahlung

    1. Bestellung nach Zahlungseingang aktualisieren

    2. Erstellen Sie payOrder in api.js

    3. Erstellen Sie eine Route für /:id/pay in orderRouter.js

    4. Nach Zahlungsauftrag erneut rendern

  32. Bestellverlauf anzeigen

    1. Erstellen Sie eine API für Kundenaufträge

    2. Erstellen Sie eine API für getMyOrders

    3. Bestellungen im Profilbildschirm anzeigen

    4. Stilaufträge

  33. Benutzerprofil anzeigen

    1. Benutzerdetails-API erstellen

    2. Benutzerinformationen anzeigen

  34. Benutzerprofil aktualisieren

    1. Erstellen Sie eine Benutzeraktualisierungs-API

    2. Benutzerinformationen aktualisieren

  35. Admin-Ansicht erstellen

    1. Erstellen Sie ein Admin-Menü

    2. Erstellen Sie Admin-Middleware im Backend

    3. Erstellen Sie eine Admin-Route im Frontend

  36. Produkte auflisten

    1. Bildschirm „Produktliste erstellen“.

    2. Fügen Sie dem Lager ein Reduzierstück hinzu

    3. Produkte auf dem Bildschirm anzeigen

  37. Produkt erstellen

    1. Build Produkt-API erstellen

    2. Erstellen Sie die Schaltfläche „Produkt erstellen“.

    3. Produkt definieren, Konstante, Aktion und Reduzierer erstellen

    4. Verwenden Sie die Aktion im Produktlistenbildschirm

  38. Bildschirm „Produkt bearbeiten“ erstellen

    1. Bearbeitungsbildschirm erstellen

    2. Zustand definieren

    3. Felder erstellen

    4. Produktdetails laden

    5. zu Routen hinzufügen

  39. Produkt aktualisieren

    1. Definieren Sie die Update-API

    2. Definieren Sie Produktaktualisierungskonstante, Aktion und Reduzierer

    3. Verwenden Sie die Aktion im Produktbearbeitungsbildschirm

  40. Produktbild hochladen

    1. npm installiere Multer

    2. Upload-Router definieren

    3. Erstellen Sie einen Upload-Ordner

    4. Behandeln Sie das Frontend

  41. Produkt löschen

    1. Erstellen Sie eine Lösch-API im Backend

    2. Erstellen Sie Löschkonstanten, Aktionen und Reduzierer

    3. Verwenden Sie es im Produktlistenbildschirm

  42. Bestellungen auflisten

    1. Bestelllisten-API erstellen

    2. Bestelllistenbildschirm erstellen

    3. Fügen Sie dem Lager ein Reduzierstück hinzu

    4. Produkte auf dem Bildschirm anzeigen

  43. Auftrag löschen 2. Aktion zum Löschen von Aufträgen und Reduzierung erstellen 3. Aktion zum Löschen von Aufträgen zur Auftragsliste hinzufügen

  44. Bestellung ausliefern

    1. Erstellen Sie Konstanten, Aktionen und Reduzierungen für die Lieferreihenfolge

    2. Fügen Sie die Aktion „Bestellung liefern“ zum Bildschirm „Bestelldetails“ hinzu

  45. Auf Heroku veröffentlichen

    1. Erstellen Sie ein Git-Repository

    2. Erstellen Sie ein Heroku-Konto

    3. Installieren Sie die Heroku-CLI

    4. Heroku-Login

    5. Heroku-Apps: Amazon erstellen

    6. Bearbeiten Sie package.json für das Build-Skript

    7. Profildatei erstellen

    8. Erstellen Sie eine Mongodb-Atlas-Datenbank

    9. Legen Sie die Datenbankverbindung in Heroku-Env-Variablen fest

    10. Commit und Push

  46. Benutzer auflisten

    1. Erstellen Sie eine API für Listenbenutzer

    2. Bildschirm „Benutzerliste erstellen“.

    3. Bestelldetails erstellen: Konstante, Aktion und Reduzierer

  47. Benutzer löschen

    1. Erstellen Sie eine API zum Löschen von Benutzern

    2. Bestelldetails erstellen: Konstante, Aktion und Reduzierer

    3. Verwenden Sie die Aktion in UserListScreen

  48. Benutzer bearbeiten

    1. Build-API für Update-Benutzer

    2. Erstellen Sie eine Benutzeroberfläche für den Bearbeitungsbildschirm

  49. Implementieren Sie die Verkäuferansicht

    1. Verkäufermenü hinzufügen

    2. Verkäuferroute erstellen

    3. Produkte für den Verkäufer auflisten

    4. Bestellungen für den Verkäufer auflisten

    5. Verkäufer zur Produktliste und zum Detailbildschirm hinzufügen

  50. Verkäuferseite erstellen

    1. Verkäuferseite erstellen

    2. Produktkomponente und Produktbildschirm aktualisieren

    3. Produktrouten aktualisieren

  51. Top-Seller-Karussell hinzufügen

    1. Installieren Sie das Reaktionskarussell

    2. Umsetzung von Aktionen und Reduzierungen für Top-Seller

    3. Verwenden Sie das Reaktionskarussell mit Daten auf dem Startbildschirm

  52. Erzwingen Sie die Bestellung von Artikeln bei einem Verkäufer

    1. Aktualisieren Sie die addToCart-Aktion, um bei einer Bestellung bei einem Verkäufer zu kaufen

  53. Erstellen Sie ein Suchfeld und einen Suchbildschirm

    1. Erstellen Sie eine Suchleiste in Header.js

    2. Stil hinzufügen

    3. Behandeln Sie das Absendeformular

    4. Bearbeiten Sie die Parse-URL, um die Abfragezeichenfolge zu erhalten

    5. Aktualisieren Sie die Produktlisten-API für die Suche nach Namen

  54. Erweiterten Suchfilter hinzufügen 1. Nach Kategorie filtern 2. Nach Preisspanne filtern 3. Nach Durchschnittsbewertung filtern

  55. Vollständige erweiterte Suche 1. Nach Preis filtern 2. Nach Bewertung filtern 3. Nach Preis, Bewertung, ... sortieren

  56. Bewerten und bewerten Sie Produkte. 1. Bewerten Sie Produkte. 2. Erstellen Sie Aktionen und Reduzierungen

  57. Wählen Sie Adresse auf Google Map. 1. Erstellen Sie Google Map-Anmeldeinformationen. 2. Aktualisieren Sie die .env-Datei mit dem Google API-Schlüssel. 3. Erstellen Sie eine API, um die Google API an das Frontend zu senden. 4. Erstellen Sie einen Kartenbildschirm. 5. Rufen Sie die Google API ab. 6. GetUserLocation 7. Installieren Sie @react- google-maps/api 8. Verwenden Sie es im Versandbildschirm. 9. Wenden Sie die Karte auf den Checkout-Bildschirm an

  58. BugFix: Lokale Ausführung ohne Probleme

    1. Fügen Sie Verkäuferinformationen zu data.js hinzu

    2. Seed-Produktdaten mit Administratorinformationen als Verkäufer

    3. Korrigieren Sie isSeller und isAdmin beim Update-Benutzer

    4. Entfernen Sie die Authentifizierung aus den Benutzerdetails

  59. Implementieren Sie die Paginierung

    1. Paginierung zum Produktrouter im Backend hinzufügen

    2. Wenden Sie die Seitenzahl auf Aktionen und Reduzierungen im Frontend an

    3. Seitenzahlen im Suchbildschirm anzeigen

  60. E-Mail-Bestellbestätigung per Mailgun 1. Mailgun-Konto erstellen 2. Ihre Domain zu Mailgun hinzufügen und überprüfen 3. Mailgun-js installieren 4. API-Schlüssel in der ENV-Datei festlegen 5. Zahlungsauftrag in orderRouter ändern 6. E-Mail senden

  61. Dashboard-Bildschirm erstellen

    1. Erstellen Sie Diagrammdaten im Backend

    2. Bildschirm „Diagramm erstellen“.

  62. Implementieren Sie Live-Chat mit Kunden

    1. Verwenden Sie Socket Io, um ein Backend zu erstellen

    2. Erstellen Sie eine Chatbox-Komponente

    3. Support-Bildschirm erstellen

  63. Upgrade auf React 17, Router 6, Mongoose 6

    1. Backend

    2. Deinstallieren und installieren Sie alle Pakete

    3. Optionen in Mongoose Connect entfernen

    4. Wickeln Sie Mailgun in Try Catch in OrderRouter ein

    5. Frontend

    6. Deinstallieren und installieren Sie alle Pakete

    7. Im Suchfeld entfernen

    8. Alles einpacken

    9. durch <Route element={}> ersetzen

    10. Ersetzen Sie durch <Route element={ }/>

    11. ersetzen und auch

    12. Aktualisieren Sie PrivateRoute, AdminRoute und SellerRoute

    13. Ersetzen Sie push() durch navigation() von useNavigate

    14. Ersetzen Sie props.match.params.id durch const params = useParams();

    15. Ersetzen Sie props.location.search durch const { search } = useLocation(); und URLSearchParams

    16. Ersetzen Sie props.match.path durch const {pathname} = useLocation();

    17. Setzen Sie userInfo in useEffect in ChatBox, SupportScreen

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle