Chia Sẻ Khóa Học Xây Dựng Website Thương Mại Điện Tử Tốt Nhất Với React Js Và Next Js [Khóa 6700 A]
Xây dựng website thương mại điện tử tốt nhất với React Js, Next Js, Redux Toolkit và Next Auth.
Bạn sẽ học được gì:
- ✓ Xây dựng dự án thương mại điện tử thú vị nhất với React js, Next js, MongoDB, Redux Toolkit và Next Auth.
- ✓ Tìm hiểu và nắm vững Next js và loại bỏ mọi nhầm lẫn.
- ✓ Làm chủ Next Auth cho full authentication system, tìm hiểu về callbacks và crfTOkens.
- ✓ User Redux Toolkit với Redux persist cho một sự kết hợp tuyệt vời để quản lý state.
- ✓ Làm chủ Next js cũng như tất cả bí mật và thủ thuật của nó, đồng thời cảm thấy thoải mái khi sử dụng nó cho frontend và backend của bạn.
- ✓ Tìm hiểu cách làm việc với MongoDB cũng như cách add ,update, remove và query như một Pro.
- ✓ Tìm hiểu cách sử dụng Cloudinary để lưu trữ hình ảnh của bạn theo cách tuyệt vời mới cũng như cách tải lên, tìm kiếm, lọc và mở ra một góc nhìn mới khi làm việc với Cloudinary.
- ✓ Xây dựng một hệ thống gửi mail từ đầu để gửi email tới người dùng để lấy liên kết xác minh email và reset code password.
- ✓ Form validation nâng cao mạnh mẽ bằng Formik và Yup, đồng thời tìm hiểu về các kỹ thuật form validation tốt nhất được sử dụng.
- ✓ Tìm hiểu cách sử dụng React Redux Toolkit để có một global store được chia sẻ trên tất cả ứng dụng của chúng ta.
- ✓ Tìm hiểu cách tạo các protected route bằng cách sử dụng Next Auth và bảo mật ứng dụng cũng như các page của bạn.
- ✓ Tìm hiểu cách làm việc với useState, useReducer, useEffect, useRef, useCallback, event Listeners.
Xin chào các developer đồng nghiệp của tôi và chào mừng bạn đến với một khóa học thú vị mới mà có thể là khóa học hay nhất mà bạn từng thấy, tôi đang nói về việc xây dựng một trang web thương mại điện tử hoàn toàn nâng cao bằng cách sử dụng React js, Next js Mongodb, Redux Toolkit và Next Auth cũng như nhiều công cụ thú vị khác, đó là một giấc mơ kết hợp nếu bạn biết mình đang làm gì và sẽ cho phép bạn xây dựng một số trang web tốt nhất mà bạn có thể tưởng tượng.
Video này phải xem đến cuối để bạn không bỏ lỡ bất kỳ tính năng thú vị nào và bây giờ hãy để tôi cho bạn thấy lý do tại sao bản dựng này thực sự tuyệt vời, tôi đã thực hiện một cách tiếp cận rất khác so với hầu hết các trang web thương mại điện tử mà bạn thấy trong các khóa học khác, các sản phẩm của chúng tôi sẽ được liệt kê trong các swiper như bạn có thể thấy và điều đó sẽ cho phép bạn xem sản phẩm ở full form và tất cả các style khác nhau vì sản phẩm của chúng tôi bao gồm nhiều loại (ví dụ: bạn có áo khoác nhưng áo khoác có thể có màu đen, xanh, đỏ và mỗi màu sẽ có kích thước khác nhau và mỗi kích thước đều có số lượng khác nhau và mức giá khác nhau), vì vậy hãy cho tôi biết bạn đã thấy điều này ở bất kỳ khóa học nào khác chưa và đây là cách tiếp cận đầu tiên thực tế hơn mà bạn thấy trên các trang web như amazon ebay, v.v..!
Và mỗi sản phẩm sẽ có trang riêng trông tuyệt vời vì bạn có thể thấy rõ, chúng tôi đã thêm một công cụ zoom để phóng to sản phẩm để nhìn rõ hơn, chúng tôi cũng có một số thống kê về review với khả năng thêm một review chi tiết và thậm chí cả bạn có thể sử dụng hình ảnh và chúng tôi có một bảng để hiển thị tất cả các review với tính năng lọc và phân trang, v.v...!
Phần quan trọng nhất của trải nghiệm thương mại điện tử bắt đầu với giỏ hàng mà chúng tôi đã thực hiện rất tốt, các sản phẩm được thêm vào sẽ được hiển thị và thậm chí logic đằng sau nó cũng rất ấn tượng và giỏ hàng cũng được cập nhật mọi lúc để đảm bảo sản phẩm vẫn còn có sẵn và giá được cập nhật, bạn cũng có thể thay đổi số lượng và xóa một sản phẩm và bạn sẽ phải chọn những sản phẩm bạn muốn thanh toán và tổng số sẽ được tính toán đồng thời thêm Phí vận chuyển vào số lượng.
Chuyển đến trang thanh toán nơi bạn có thể xem bản tóm tắt giỏ hàng của mình các địa chỉ bạn có nơi bạn có thể chọn địa chỉ bạn muốn tiếp tục và thậm chí thêm địa chỉ của riêng bạn và chỉ cần một ghi chú bên lề là mọi form chúng tôi có trong build này đều được xác thực bởi Formik và Yup để đảm bảo mọi dữ liệu bạn nhập đều được xác thực nghiêm ngặt. Bạn có thể chọn phương thức thanh toán và chúng tôi cũng cung cấp cho bạn tùy chọn sử dụng coupon để được giảm giá cho đơn hàng của bạn.
Và sau khi đặt hàng, đơn hàng sẽ được tạo và bây giờ bạn có thể thanh toán bằng ba cách, vâng, ba, chúng tôi thực hiện thanh toán bằng Paypal, cho phép bạn thanh toán bằng số dư Paypal và thậm chí cả thẻ tín dụng và chúng tôi cũng đã thêm một Strpe gateway để bạn có thể thanh toán với credit card directly và chúng tôi cũng có tùy chọn thanh toán bằng tiền mặt khi giao hàng.
Bây giờ vẫn còn rất nhiều tính năng thú vị tôi phải trải qua và tôi muốn bắt đầu với browse page vì nó hoàn toàn tuyệt vời và hoàn hảo, bạn có thể hiển thị sản phẩm của mình và bạn có thể tìm kiếm sản phẩm và bạn có thể lọc qua chúng bằng cách sử dụng tất cả các loại bộ lọc cùng nhau bạn có thể chọn danh mục thương hiệu, kích thước, màu sắc, kiểu dáng và kết hợp tất cả lại với nhau, đồng thời thêm bộ lọc xếp hạng, bộ lọc xếp hạng và trên hết, bạn có thể sắp xếp theo tất cả các cách khác nhau và đó không phải là kết thúc, chúng tôi thêm phân trang vào danh sách kết hợp để đảm bảo điều đó đạt đến sự hoàn hảo, tôi không nghĩ bạn có thể làm tốt hơn thế này.
Và sau tất cả những điều này, tôi chỉ muốn ngẫu nhiên cho bạn biết về location detector để chúng tôi có thể phát hiện người dùng đang truy cập trang web của chúng tôi từ quốc gia nào và nhận được tất cả thông tin cần thiết và bạn có thể sử dụng những thông tin đó để làm lợi thế cho mình để hiển thị một số thông tin nhất định và cả ẩn một số sản phẩm nhất định khỏi người dùng từ một khu vực nhất định như các trang web lớn vẫn làm. Ngẫu nhiên tôi cũng có thể cho bạn biết rằng chúng tôi đã thêm một newsletter system được kết nối với Mailchimp API nơi chúng tôi có thể thu thập tất cả các email đã đăng ký trong news letter và bạn có thể gửi email quảng cáo tới tất cả mọi người cùng một lúc.
Được rồi trước khi tiếp tục, tôi cũng muốn nói về hệ thống xác thực của chúng tôi bằng cách sử dụng Next auth. Hệ thống này có thể rất khó tùy chỉnh tùy theo nhu cầu của bạn nhưng tôi sẽ nói với bạn rằng trang xác thực của chúng tôi có các biểu mẫu được xác thực nghiêm ngặt và chúng tôi cho phép bạn đăng ký và thậm chí chúng tôi còn gửi email cho bạn sau khi xác minh và kích hoạt tài khoản của bạn và chúng tôi sẽ tạo email tùy chỉnh để kích hoạt khi quên mật khẩu, v.v. Và tôi sẽ chỉ cho bạn cách tạo những email tùy chỉnh chất lượng cao này.
Bây giờ chúng ta đến với quy trình đăng nhập nên chúng tôi sẽ sử dụng next auth provider để đăng nhập cho bạn bằng thông tin đăng nhập và cả social login như google, twitter, github và thậm chí aith0 và tất cả session sẽ được xử lý với next auth và chúng tôi cũng sẽ sử dụng server side middlwares để bảo vệ mọi route sử dụng chính next auth cũng không quên khả năng đặt lại mật khẩu của bạn.
Sẽ không quên trang chủ của chúng ta với thiết kế đẹp mắt và các swiper xung quanh và thậm chí cả các component tùy chỉnh có một countdown cho flash deals và tôi đã thêm nó vì tôi đã thấy nó rất nhiều nên tôi phải làm điều đó.
Và trước khi chuyển sang admin dashboard, tôi muốn nói về trang profile nơi bạn có thể tùy chỉnh hồ sơ của mình, xem qua các đơn đặt hàng với tất cả trạng thái khác nhau và bạn cũng có thể quản lý địa chỉ của mình, thêm và xóa và thậm chí chọn phương thức thanh toán mặc định và thậm chí khả năng thay đổi mật khẩu của bạn.
Và bây giờ chúng ta đến với admin dashboard, bản thân nó phải là một khóa học riêng biệt nhưng tôi muốn cung cấp cho bạn tất cả những gì bạn cần trong một khóa học.
Vì vậy hãy nói về nó, một dashboard được thiết kế tốt với màu sắc đẹp mắt và chức năng ấn tượng.
Trang chính có dữ liệu ngắn gọn về số liệu thống kê, đơn đặt hàng gần đây và người dùng không ấn tượng lắm nhưng trước tiên hãy nói về trang tạo một sản phẩm để bạn có thể tạo một sản phẩm với tất cả những điều cơ bản bạn cần và hơn thế nữa, từ những bức ảnh sẽ được tải lên cloudinary nên cloudinary là cloud service của chúng tôi, sau đó bạn có thể trích xuất màu từ những hình ảnh đó để chọn màu chính của sản phẩm đó cùng với kiểu dáng và bạn cũng có thể chọn một danh mục và tất cả các danh mục phụ mà sản phẩm thuộc về, bạn cũng có thể quyết định xem một sản phẩm có kích thước thì bạn có thể thêm số lượng và giá của kích thước đó, bạn cũng có thể thêm thông tin tùy chỉnh về sản phẩm để làm cho mọi chi tiết và mô tả sản phẩm trở nên rất độc đáo. Đây cũng là một cách tiếp cận mới tương tự đối với các câu hỏi, nếu sản phẩm thuộc về một sản phẩm hiện có, bạn có thể chọn nó và nó sẽ điền tất cả thông tin ngoại trừ những thông tin duy nhất chỉ liên quan đến sản phẩm đó và sau đó chúng tôi chỉ cần cập nhật sản phẩm hiện có và thêm sản phẩm phụ vào đó, chúng tôi cũng có thể quản lý các danh mục và danh mục con (subcategory) với khả năng để liệt kê và cập nhật một danh mục hoặc danh mục con với tùy chọn xóa, tương tự như vậy đối với các coupon, nơi chúng tôi có thể thêm một coupon có ngày bắt đầu và ngày kết thúc, điều đó có nghĩa là chúng tôi sẽ làm việc vào những ngày luôn phù hợp để bạn cảm thấy thoải mái.
Bây giờ chúng ta đến với các đơn đặt hàng được hiển thị theo cách thông minh, nơi bạn có thể xem thông tin chính, sau đó mở rộng để xem thông tin người dùng và thông tin giao hàng trước tiên, sau đó chúng tôi có thể xem chi tiết đơn hàng để bạn biết chính xác sản phẩm nào chúng ta phải vận chuyển và số lượng và kiểu dáng thực tế v.v...!
Chúng ta cũng có một trang dành cho người dùng nơi chúng ta có thể xem tất cả người dùng và quản lý họ. Ngoài ra, chúng ta có một trang dành cho tất cả các sản phẩm nơi chúng ta có thể xem tất cả các sản phẩm được nhóm, hiển thị tất cả các kiểu và sản phẩm phụ (subproduct) khác nhau cho sản phẩm đó và bạn chỉnh sửa hoặc xóa hoặc tạo một sản phẩm trong flash deals hoặc làm bất cứ điều gì bạn thích vì trong khóa học này, bạn sẽ có thể tạo ra một dự án tuyệt vời nhưng đồng thời, kỹ năng của bạn sẽ ngày càng tốt hơn và bạn sẽ cảm thấy thoải mái với các dự án lớn rất phức tạp và bạn sẽ tìm hiểu kiến trúc của một dự án cũng như cách bạn tổ chức nó cũng như cách học clean code một cách chuyên nghiệp.
Gần 50 giờ nội dung của nó có thể được mở rộng với hơn 220 video với lượng nội dung bạn có thể truy cập. Đây là một khóa học dễ dàng, vì vậy hãy tham gia cùng chúng tôi và trở thành một developer giỏi hơn.
Mục lục:
- ✓ 01. Giới thiệu.
- ✓ 02. Hãy setup project của chúng ta.
- ✓ 03. Header Component.
- ✓ 04. Footer Component.
- ✓ 05. Location Detection.
- ✓ 06. Authentification.
- ✓ 07. Forgot, Reset password.
- ✓ 08. Home page.
- ✓ 09. Product card.
- ✓ 10. Product page.
- ✓ 11. Cart.
- ✓ 12. Checkout (Coupon, Address, cũng như Auth Middlware ...).
- ✓ 13. Order page.
- ✓ 14. Protected routes & access (Middlware, Next js, Next auth).
- ✓ 15. Upload hình ảnh lên Cloudinary (full setup frontend & backend).
- ✓ 16. Admin Dashboard - Setup.
- ✓ 17. Admin Dashboard - Categories.
- ✓ 18. Admin Dashboard - SubCategories.
- ✓ 19. Admin Dashboard - Coupons.
- ✓ 20. Admin Dashboard - All Products.
- ✓ 21. Admin dashboard - Create Product.
- ✓ 22. Admin Dashboard - Users.
- ✓ 23. Admin dashboard - Orders.
- ✓ 24. Admin dashboard - Dashboard.
- ✓ 25. Product page 2 (add review, whishlist, related...).
- ✓ 26. Profile.
- ✓ 27. Browse page filters, search và pagination.
- ✓ 28. Newsletter sử dụng MailChimp API.
Khóa học này dành cho ai:
- ✓ React js beginner.
- ✓ Next js beginner.
- ✓ Web developer beginner.
- ✓ Junior web developer.
- ✓ React js developer.
- ✓ Node js developer.
- ✓ Web developer.
- ✓ Next js developer.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU
Chia sẽ bài viết lên:
Nhà Sách Tin Học
Chào mừng các bạn đến với Blog Nhà Sách Tin Học. Thông qua Blog này mình muốn chia sẻ đến các bạn những kiến thức về tin học, các tài liệu hay giáo trình mà mình có hoặc siêu tầm được... Mình rất mong được sự ủng hộ nhiệt tình của các bạn bằng cách comment bài viết, chia sẻ bài viết hoặc liên hệ với mình qua blog này! Mình xin cảm ơn!
No Comment to " Chia Sẻ Khóa Học Xây Dựng Website Thương Mại Điện Tử Tốt Nhất Với React Js Và Next Js [Khóa 6700 A] "