Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Situs Web E-commerce Amazona

amazona.dll

Tutorial React & Node - ECommerce Lengkap dalam 9 Jam [2021]

Selamat datang di tutorial React dan Node saya untuk membangun situs web e-commerce yang berfungsi penuh persis seperti amazon. Buka editor kode Anda dan ikuti saya selama beberapa jam berikutnya untuk membangun situs web e-niaga menggunakan tumpukan MERN (MongoDB, ExpressJS, React, dan Node.JS).

Situs Demo

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

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

Anda Akan Belajar

  • HTML5 dan CSS3: Elemen Semantik, CSS Grid, Flexbox

  • Bereaksi: Komponen, Props, Event, Hooks, Router, Axios

  • Redux: Penyimpanan, Pereduksi, Tindakan

  • Node & Ekspres: API Web, Body Parser, Unggah File, JWT

  • MongoDB: Luwak, Agregasi

  • Pengembangan: ESLint, Babel, Git, Github,

  • Penerapan: Heroku

  • Tonton Tutorial React & Node

Jalankan Secara Lokal

1. Kloning repo 

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

2. Siapkan MongoDB

  • MongoDB lokal

    • Instal dari sini

    • Buat file .env di folder root

    • Setel MONGODB_URL=mongodb://localhost/amazona

  • Atlas Cloud MongoDB

    • Buat database di https://cloud.mongodb.com

    • Buat file .env di folder root

    • Setel MONGODB_URL=mongodb+srv://koneksi-db-Anda

3. Jalankan Backend 

$ npm install
$ npm start

4. Jalankan Bagian Depan 

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

5. Pengguna dan Produk Benih

  • Jalankan ini di chrome: http://localhost:5000/api/users/seed

  • Ini mengembalikan email admin dan kata sandi

  • Jalankan ini di chrome: http://localhost:5000/api/products/seed

  • Ini menciptakan 6 produk sampel

6. Masuk Admin

  • Jalankan http://localhost:3000/signin

  • Masukkan email admin dan kata sandi dan klik masuk

Mendukung

  • T/J: https://webacademy.pro/amazona

  • Hubungi Instruktur: Basir

Pelajaran

  1. Pengantar kursus ini

    1. apa yang akan kamu bangun

    2. apa yang akan kamu pelajari

    3. siapa penontonnya

  2. Instal Alat

    1. Editor Kode

    2. Peramban Web

    3. Ekstensi Kode VS

  3. Templat Situs Web

    1. Buat folder amazona

    2. membuat folder templat

    3. buat indeks.html

    4. tambahkan kode HTML default

    5. tautan ke style.css

    6. membuat header, main dan footer

    7. elemen gaya

  4. Tampilkan Produk

    1. membuat div produk

    2. menambahkan atribut produk

    3. tambahkan tautan, gambar, nama dan harga

  5. Buat Aplikasi Bereaksi

    1. npx buat-reaksi-aplikasi frontend

    2. npm mulai

    3. Hapus file yang tidak digunakan

    4. salin konten index.html ke App.js

    5. salin konten style.css ke index.css

    6. ganti kelas dengan className

  6. Bagikan Kode Di Github

    1. Inisialisasi repositori git

    2. Lakukan perubahan

    3. Buat akun github

    4. Buat repo di github

    5. sambungkan repo lokal ke repo github

    6. Dorong perubahan ke github

  7. Buat Rating dan Komponen Produk

    1. membuat komponen/Rating.js

    2. buat div.rating

    3. div.rating gaya, rentang dan rentang terakhir

    4. Buat komponen Produk

    5. Gunakan komponen Peringkat

  8. Bangun Layar Produk

    1. Instal reaksi-router-dom

    2. Gunakan BrowserRouter dan Rute untuk Layar Beranda

    3. Buat HomeScreen.js

    4. Tambahkan kode daftar produk di sana

    5. Buat ProductScreen.js

    6. Tambahkan Rute baru dari detail produk ke App.js

    7. Buat 3 kolom untuk gambar produk, info dan tindakan

  9. Buat Server Node.JS

    1. jalankan npm init di folder root

    2. Perbarui tipe set package.json: modul

    3. Tambahkan .js ke impor

    4. npm instal ekspres

    5. buat server.js

    6. tambahkan perintah start sebagai node backend/server.js

    7. memerlukan ekspres

    8. buat rute untuk/kembalikan backend sudah siap.

    9. pindahkan product.js dari frontend ke backend

    10. buat rute untuk /api/products

    11. mengembalikan produk

    12. jalankan npm mulai

  10. Muat Produk Dari Backend

    1. edit BerandaScreen.js

    2. mendefinisikan produk, memuat dan kesalahan.

    3. buat useEffect

    4. tentukan async FetchData dan beri nama

    5. instal aksio

    6. dapatkan data dari /api/products

    7. tunjukkan mereka dalam daftar

    8. membuat Komponen Pemuatan

    9. membuat Komponen Kotak Pesan

    10. menggunakannya di HomeScreen

  11. Instal ESlint Untuk Kode Linting

    1. instal ekstensi eslint VSCode

    2. npm instal -D eslint

    3. jalankan ./node_modules/.bin/eslint --init

    4. Buat ./frontend/.env

    5. Tambahkan SKIP_PREFLIGHT_CHECK=benar

  12. Tambahkan Redux ke Layar Utama

    1. npm instal redux reaksi-redux

    2. Buat store.js

    3. initState= {produk:[]}

    4. peredam = (status, tindakan) => ganti LOAD_products: {produk: action.payload}

    5. ekspor createStore default (peredam, initState)

    6. Sunting BerandaScreen.js

    7. Namatoko = useSelector(negara bagian=>negara bagian.produk)

    8. const pengiriman = gunakanDispatch()

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

    10. Tambahkan toko ke index.js

  13. Tambahkan Redux ke Layar Produk

    1. membuat konstanta, tindakan, dan reduksi detail produk

    2. tambahkan peredam ke store.js

    3. gunakan tindakan di ProductScreen.js

    4. tambahkan /api/product/:id ke api backend

  14. Tangani Tombol Tambahkan Ke Keranjang

    1. Tangani Tambahkan Ke Keranjang di ProductScreen.js

    2. buat CartScreen.js

  15. Terapkan Tindakan Tambahkan ke Keranjang

    1. buat konstanta, tindakan, dan reduksi addToCart

    2. tambahkan peredam ke store.js

    3. gunakan tindakan di CartScreen.js

    4. render cartItems.length

  16. Bangun Layar Keranjang

    1. buat 2 kolom untuk item keranjang dan tindakan keranjang

    2. cartItems.panjang === 0 ? keranjang kosong

    3. tampilkan gambar barang, nama, jumlah dan harga

    4. Lanjutkan ke tombol Checkout

    5. Terapkan tindakan hapus dari keranjang

  17. Menerapkan Tindakan Hapus Dari Keranjang

    1. buat konstanta, tindakan, dan reduksi hapusFromCart

    2. tambahkan peredam ke store.js

    3. gunakan tindakan di CartScreen.js

  18. Buat Pengguna Sampel Di MongoDB

    1. npm instal luwak

    2. terhubung ke mongodb

    3. buat config.js

    4. npm instal dotenv

    5. ekspor MONGODB_URL

    6. membuat model/userModel.js

    7. buat skema pengguna dan model pengguna

    8. buat rute pengguna

    9. Data sampel benih

  19. Buat Contoh Produk Di MongoDB

    1. membuat model/productModel.js

    2. membuat productSchema dan productModel

    3. buat rute produk

    4. Data sampel benih

  20. Buat Backend Masuk

    1. buat /masuk api

    2. periksa email dan kata sandi

    3. menghasilkan token

    4. instal token web json

    5. instal dotenv

    6. mengembalikan token dan data

    7. mengujinya menggunakan tukang pos

  21. Desain Layar Masuk

    1. buat Layar Masuk

    2. render bidang email dan kata sandi

    3. buat konstanta masuk, tindakan, dan reduksi

    4. Perbarui Header berdasarkan login pengguna

  22. Terapkan Tindakan Masuk

    1. buat konstanta masuk, tindakan, dan reduksi

    2. tambahkan peredam ke store.js

    3. gunakan tindakan di SigninScreen.js

  23. Buat Layar Daftar

    1. buat API untuk /api/users/register

    2. masukkan pengguna baru ke database

    3. mengembalikan info pengguna dan token

    4. membuat Daftar Layar

    5. Tambahkan bidang

    6. Bidang gaya

    7. Tambahkan layar ke App.js

    8. membuat tindakan register dan peredam

    9. periksa validasi dan buat pengguna

  24. Buat Layar Pengiriman

    1. buat komponen CheckoutSteps.js

    2. membuat bidang pengiriman

    3. menerapkan konstanta pengiriman, tindakan, dan reduksi

  25. Buat Layar Pembayaran

    1. membuat bidang pembayaran

    2. menerapkan konstanta pengiriman, tindakan, dan reduksi

  26. Layar Pemesanan Tempat Desain

    1. bidang ringkasan pesanan desain

    2. tindakan pesanan desain

  27. Buat API Pemesanan Tempat

    1. buatOrder api

    2. membuat model pesanan

    3. buat orderRouter

    4. membuat rute pasca pesanan

  28. Menerapkan Tindakan PlaceOrder

    1. menangani klik tombol pemesanan tempat

    2. membuat konstanta urutan tempat, tindakan, dan peredam

  29. Buat Layar Pesanan

    1. membangun api pesanan untuk /api/orders/:id

    2. buat OrderScreen.js

    3. mengirimkan tindakan detail pesanan di useEffect

    4. memuat data dengan useSelector

    5. tampilkan data seperti layar pemesanan tempat

    6. buat detail pesanan konstan, tindakan, dan peredam

  30. Tambahkan Tombol PayPal

    1. dapatkan id klien dari paypal

    2. atur dalam file .env

    3. buat formulir rute /api/paypal/clientId

    4. buat getPaypalClientID di api.js

    5. tambahkan skrip checkout paypal di OrderScreen.js

    6. tampilkan tombol paypal

  31. Menerapkan Pembayaran Pesanan

    1. perbarui pesanan setelah pembayaran

    2. buat payOrder di api.js

    3. buat rute untuk /:id/pay di orderRouter.js

    4. render ulang setelah perintah pembayaran

  32. Tampilkan Riwayat Pesanan

    1. buat api pesanan pelanggan

    2. buat api untuk getMyOrders

    3. tampilkan pesanan di layar profil

    4. pesanan gaya

  33. Tampilkan Profil Pengguna

    1. buat api detail pengguna

    2. menampilkan informasi pengguna

  34. Perbarui Profil Pengguna

    1. buat api pembaruan pengguna

    2. memperbarui informasi pengguna

  35. Buat Tampilan Admin

    1. Buat Menu Admin

    2. Buat Admin Middleware di Backend

    3. Buat Rute Admin di Frontend

  36. Daftar Produk

    1. Buat Layar Daftar Produk

    2. Tambahkan peredam untuk disimpan

    3. menampilkan produk di layar

  37. Buat Produk

    1. membangun membuat api produk

    2. buat tombol Buat Produk

    3. mendefinisikan produk menciptakan konstanta, tindakan dan peredam

    4. gunakan tindakan di Layar Daftar Produk

  38. Buat Layar Edit Produk

    1. buat layar edit

    2. mendefinisikan negara

    3. membuat bidang

    4. memuat detail produk

    5. tambahkan ke rute

  39. Perbarui Produk

    1. tentukan api pembaruan

    2. tentukan konstanta pembaruan produk, tindakan, dan peredam

    3. gunakan tindakan di Layar Edit Produk

  40. Unggah Gambar Produk

    1. npm instal multer

    2. tentukan router pengunggah

    3. buat folder unggahan

    4. Tangani bagian depan

  41. Hapus Produk

    1. buat hapus api di backend

    2. buat hapus konstanta, tindakan, dan peredam

    3. gunakan di layar daftar produk

  42. Daftar Pesanan

    1. buat api daftar pesanan

    2. membuat Layar Daftar Pesanan

    3. Tambahkan peredam untuk disimpan

    4. menampilkan produk di layar

  43. Hapus Pesanan 2. buat tindakan hapus pesanan dan peredam 3. tambahkan tindakan hapus pesanan ke daftar pesanan

  44. Mengirimkan Pesanan

    1. buat konstanta, tindakan, dan reduksi untuk mengirimkan pesanan

    2. tambahkan tindakan pengiriman pesanan ke layar detail pesanan

  45. Publikasikan Ke Heroku

    1. Buat repositori git

    2. Buat akun heroku

    3. instal Heroku CLI

    4. login pahlawanku

    5. aplikasi heroku: buat amazona

    6. Edit package.json untuk skrip build

    7. Buat Profil

    8. Buat database atlas mongodb

    9. Atur koneksi database dalam variabel heroku env

    10. Berkomitmen dan dorong

  46. Daftar Pengguna

    1. membangun api untuk pengguna daftar

    2. Buat Layar Daftar Pengguna

    3. buat detail pesanan konstan, tindakan, dan peredam

  47. Hapus Pengguna

    1. membangun api untuk menghapus pengguna

    2. buat detail pesanan konstan, tindakan, dan peredam

    3. Gunakan tindakan di UserListScreen

  48. Sunting Pengguna

    1. membangun api untuk pengguna pembaruan

    2. buat UI layar edit

  49. Menerapkan Tampilan Penjual

    1. tambahkan menu penjual

    2. membuat rute penjual

    3. daftar produk untuk penjual

    4. daftar pesanan untuk penjual

    5. tambahkan Penjual ke Daftar Produk dan Layar Detail

  50. Buat Halaman Penjual

    1. buat halaman penjual

    2. perbarui komponen produk dan layar produk

    3. memperbarui rute produk

  51. Tambahkan Korsel Penjual Teratas

    1. instal reaksi korsel

    2. menerapkan tindakan dan reduksi untuk penjual teratas

    3. gunakan reaksi carousel dengan data di Layar Utama

  52. Paksa Barang Pesanan Dari Satu Penjual

    1. perbarui tindakan addToCart untuk membeli dari satu penjual dalam satu pesanan

  53. Buat Kotak Pencarian dan Layar Pencarian

    1. buat bilah pencarian di Header.js

    2. menambahkan gaya

    3. menangani formulir pengiriman

    4. edit parse url untuk mendapatkan string kueri

    5. perbarui api daftar produk untuk pencarian berdasarkan nama

  54. Tambahkan Filter Pencarian Lanjutan 1. filter berdasarkan kategori 2. filter berdasarkan kisaran harga 3. filter berdasarkan peringkat rata-rata

  55. Selesaikan Pencarian Lanjutan 1. filter berdasarkan harga 2. filter berdasarkan peringkat 3. urutkan berdasarkan harga, peringkat, ...

  56. Nilai dan Tinjau Produk 1. menilai produk 2. membuat tindakan dan reduksi

  57. Pilih Alamat Di Google Map 1. buat kredensial google map 2. perbarui file .env dengan Google Api Key 3. buat api untuk mengirim google api ke frontend 4. buat layar peta 5. ambil google api 6. getUserLocation 7. instal @react- google-maps/api 8. gunakan di layar pengiriman 9. terapkan peta ke layar checkout

  58. Perbaikan Bug: Berjalan Secara Lokal Tanpa Masalah

    1. tambahkan info penjual ke data.js

    2. data produk unggulan dengan info admin sebagai penjual

    3. memperbaiki isSeller dan isAdmin pada pengguna pembaruan

    4. hapus autentikasi dari detail pengguna

  59. Menerapkan Paginasi

    1. tambahkan pagination ke router produk di backend

    2. terapkan nomor halaman ke tindakan dan reduksi di frontend

    3. tampilkan nomor halaman di layar pencarian

  60. Tanda terima pesanan email melalui mailgun 1. buat akun mailgun 2. tambahkan dan verifikasi domain Anda ke mailgun 3. instal mailgun-js 4. atur kunci api di file env 5. ubah perintah pembayaran di orderRouter 6. kirim email ke

  61. Buat Layar Dasbor

    1. Buat data bagan di backend

    2. Layar Bangun Bagan

  62. Terapkan Obrolan Langsung Dengan Pelanggan

    1. gunakan soket io untuk membuat backend

    2. membuat komponen kotak obrolan

    3. buat layar dukungan

  63. Tingkatkan Ke React 17, Router 6, Mongoose 6

    1. Bagian belakang

    2. Copot dan instal semua paket

    3. hapus opsi di koneksi luwak

    4. bungkus mailgun di coba tangkap di orderRouter

    5. Bagian depan

    6. Copot dan instal semua paket

    7. hapus di kotak pencarian

    8. bungkus semuanya

    9. ganti dengan <Route element={}>

    10. ganti dengan <Elemen rute={ }/>

    11. ganti dan juga

    12. Perbarui PrivateRoute, AdminRoute, dan SellerRoute

    13. ganti Push() dengan navigasi() dari useNavigate

    14. ganti props.match.params.id dengan const params = useParams();

    15. ganti props.location.search dengan const { search } = useLocation(); dan URLSearchParams

    16. ganti props.match.path dengan const {pathname} = useLocation();

    17. letakkan userInfo di useEffect di ChatBox, SupportScreen

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua