PHẦN MỞ ĐẦU 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI Trong thời đại hiện nay, cuộc cách mạng công nghiệp 4.0 đang phát triển mạnh mẽ, và công nghệ thông tin ngày càng phục vụ nhu cầu của con người trong mọi lĩnh vực của đời sống và xã hội. Các công việc trước đây phải làm trên giấy tờ dần dần được thay thế bởi các phần mềm và các website, giúp việc sử dụng dễ dàng hơn cho người dùng và quản lý thuận tiện hơn. Với sự phát triển của Internet, người dùng có thể truy cập vào website để thực hiện các công việc khác nhau mọi lúc, mọi nơi mà không cần phải đến tận nơi để đăng ký, giao dịch, hoặc mua hàng.
Việc tạo ra một website để phục vụ và đáp ứng nhu cầu của con người trở nên vô cùng cần thiết, giúp nhanh chóng, thuận tiện và dễ dàng hơn, đồng thời tiết kiệm thời gian và công sức trong thời đại công nghệ số. Ngoài ra, sự kiện bùng nổ trí tuệ nhân tạo (AI) và ứng dụng rộng rãi của nó trong cuộc sống hàng ngày đã làm cho Công nghệ 4.0 phát triển một cách vượt bậc. AI đã giúp chúng ta tiếp cận thông tin thông qua Internet nhanh chóng và hiệu quả hơn nhiều so với cách tiếp cận truyền thống. Ngày nay, chỉ cần ngồi ở nhà, chúng ta cũng có thể tiếp cận được những thông tin mới mà mình quan tâm mà không cần phải đến tận nơi.
Hiện nay, mọi nhu cầu về dịch vụ và thương mại mà trước đây chỉ có thể giao dịch bằng tay, yêu cầu người dùng phải đến tận nơi để giao dịch hoặc mua sắm, đã được đơn giản hóa. Ví dụ, việc mua sắm đồ công nghệ, người dùng không cần phải đến cửa hàng để lựa chọn sản phẩm, đối mặt với việc sản phẩm hết hàng. Thay vào đó, tất cả những gì cần làm chỉ là vài thao tác kích chuột. Sự bùng nổ của Công nghệ 4.0 và những lý do nêu trên đã thôi thúc nhóm chúng em chọn đề tài: “Xây dựng website bán thiết bị di động” nhằm đáp ứng nhu cầu và mang lại sự thuận tiện cho mọi người.
Website này sẽ giúp mọi người dễ dàng mua sắm thiết bị di động, tiết kiệm thời gian và công sức, đồng thời trải nghiệm sự tiện lợi của công nghệ hiện đại 2. ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài “Website xây dựng trang web bán thiết bị điện thoại sử dụng công nghệ Node.js và React.js”, đối tượng nghiên cứu dựa trên những nhu cầu tìm kiếm của người 18 dùng về thiết bị di động trực tuyến. Nghiên cứu này sẽ tập trung vào việc cung cấp cho khách hàng một trải nghiệm mua sắm thuận tiện, tương tác mượt mà và an toàn trên nền tảng trực tuyến. Đồng thời kèm theo đó là các công nghệ áp dụng để tạo ra sản phẩm.
Cụ thể như sau: - Áp dụng cơ sở dữ liệu MongoDB để lưu trữ dữ liệu, thông tin người dùng. - Nghiên cứu APIs xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng. - Redux: Sử dụng Redux trong React.js để quản lý trạng thái ứng dụng một cách hiệu quả và dễ dàng trong việc truyền dữ liệu giữa các thành phần. - Về giao diện, nghiên cứu và sử dụng React JS và một số thư viện hỗ trợ cho React JS để xây dựng và xử lý giao diện người dùng và hệ thống quản trị.
- Về bảo mật hệ thống, sử dụng Json Web Token để xác thực tài khoản đăng nhập. PHẠM VI NGHIÊN CỨU Đề tài "Xây dựng Website bán thiết bị di động sử dụng công nghệ Node.js và React.js" tập trung vào việc tạo ra một nền tảng thương mại điện tử phục vụ ngành công nghiệp đồ công nghệ di động hiện đại để người dùng có thể tương tác mượt mà và có được trải nghiệm tuyệt vời. Cùng với đó, dự án tập trung vào các khía cạnh sau: − Trải nghiệm người dùng: Tạo ra giao diện thân thiện, dễ sử dụng để người dùng có thể tìm kiếm, duyệt và mua các sản phẩm dễ dàng. − Hiệu suất và tích hợp công nghệ: Nghiên cứu về việc tích hợp Node.js và React.js để tối ưu hóa hiệu suất trang web, đảm bảo trải nghiệm mượt mà và nhanh chóng.
− Quản lý sản phẩm và đơn hàng: Tạo các tính năng quản lý sản phẩm, lịch sử đơn hàng, giúp người quản trị có thể dễ dàng cập nhật và quản lý thông tin. − Bảo mật và thanh toán: Đảm bảo an toàn thông tin cá nhân, thực hiện tính năng thanh toán an toàn và tiện lợi cho người dùng. Website được chia thành 2 phần là phần Quản trị và phần Người dùng. Chức năng chính như sau: Trong phần Quản trị bao gồm các nghiệp vụ chính như: - Quản lý sản phẩm và loại sản phẩm - Quản lý đơn hàng - Quản lý mã giảm giá 19 - Quản lý người dùng và tài khoản - Thống kê và báo cáo doanh thu - Phản hồi khách hàng Trong phần Người dùng bao gồm các nghiệp vụ chính như: - Đăng ký/ Đăng nhập/ Quên mật khẩu - Tìm kiếm sản phẩm - Xem danh sách sản phẩm và đặt hàng - Xem giỏ hàng - Thanh toán và theo dõi đơn hàng - Chỉnh sửa thông tin cá nhân - Chat với người bán - Đánh giá sản phẩm 4.
MỤC TIÊU CỦA ĐỀ TÀI Về phía người dùng xây dựng được một website đặt thiết bị di động nhanh và tiện lợi với các tính năng cơ bản về đặt hàng, thanh toán và các hỗ trợ khác cho người dùng, chat với người bán, đánh giá sản phẩm. Về phía quản trị xây dựng được nơi quản lý, theo dõi các tài nguyên, dữ liệu của hệ thống: như thống kê, quản lý tài khoản, quản lý sản phẩm, quản lý loại sản phẩm, quản lý tài khoản người dùng, chat với người mua. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Mục đích đề tài nhằm tạo ra một môi trường trải nghiệm tốt nhất cho khách hàng tập trung vào việc tạo ra một trang web bán hàng có thể đáp ứng nhu cầu và mang lại trải nghiệm mua sắm trực tuyến vượt trội và hiệu quả cho người dùng. Là nơi để người dùng đặt hàng và chọn lọc sản phẩm theo nhu cầu cá nhân.
Từ đó cải thiện và nâng cao tính linh hoạt cũng như hiệu suất của hệ thống. 20 PHẦN NỘI DUNG CHƯƠNG 1. Kiến trúc thành phần ứng dụng Hình 1. 1 Kiến trúc thành phần ứng dụng Ứng dụng gồm hai thành phần chính: − Front-end: sử dụng công nghệ ReactJS với ngôn ngữ Javascript, sử dụng khái niệm Virtual DOM, nơi các thành phần (component) tồn tại giúp cải thiện hiệu suất ứng dụng.
Sử dụng cú pháp JSX cho phép viết HTML ngay trên file javascript, giúp viết code dễ hiểu và dễ dàng hơn. React giúp tách các thành phần phức tạp của một trang web thành nhiều thành phần nhỏ hơn, chia nhỏ cấu trúc UX/UI phức tạp thành từng component đơn giản hơn. Ngoài ra, ReactJS hiệu năng cao với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng bảo trì, nâng cấp và sữa lỗi. − Back-end: sử dụng công nghệ NodeJS kết hợp với ExpressJS framework, với sự hỗ trợ các phương thức HTTP và các middleware tạo ra các Rest API nhanh chóng, mạnh mẽ, dễ sử dụng và có khả năng tái sử dụng.Ở phía cơ sở dữ liệu, đồ án sử dụng MongoDB bởi cấu trúc linh hoạt, tốc độ ghi và cập nhật nhanh, tiện lợi cũng như dữ liệu dễ nhìn và trực quan hơn.
Ngoài ra, để phục vụ cho chức năng upload ảnh, đồ án sử dụng Cloudinary giúp việc lưu ảnh nhanh chóng, có thể đồng bộ trực tiếp với website và kết hợp với Google API/OAuth2Client để gửi thực hiện các tác vụ liên quan đến việc gửi email cho người dùng (quên mật khẩu,…) 21 1. Định nghĩa React JS Nói về React JS thì React JS là một thư viện JavaScript có mã nguồn mở được phát triển bởi Facebook, ra mắt vào năm 2013, nó cho phép xây dựng giao diện người dùng (UI) từ những đoạn code nhỏ và độc lập gọi là “components”. Đây là một thư viện rất phổ biến hiện nay giúp cho các lập trình viên xây dựng UI một cách hiệu quả và linh hoạt. [1] Ưu điểm của React JS: - Các Component được tạo ra độc lập và có thể sử dụng lại trong project đó.
Trong React JS việc xây dựng giao diện người dùng dựa vào việc kết hợp các Components lại với nhau giúp việc lập trình nhanh chóng. - React JS đã giúp cải thiện hiệu suất rất nhiều bằng cách sử dụng Virtual DOM. Reactjs cũng tính toán những thay đổi nào cần cập nhật lên DOM và chỉ thực hiện chúng bằng việc sử dụng một thuật toán thông minh để tạo lại các thành phần khác biệt giữa cây mới và cây cũ. Bởi vì cả hai cây HTML cũ và mới đều được lưu trong bộ nhớ.
Điều này giúp React JS tránh những thao tác không cần thiết trên DOM. - React JS giúp dễ dàng trong việc chia phân công chia các task, chia màn hình ứng dụng thuận tiện. Mỗi người sẽ được đảm nhiệm làm một Component riêng biệt và sẽ không làm ảnh hưởng đến mã nguồn của các lập trình viên khác. - Khi các thành phần này được hoàn thiện và được kết nối hoàn chỉnh nếu có xảy ra những thiếu sót hoặc hoặc cần nâng cấp, bảo trì thì nó sẽ dễ dàng biết cách tách nhỏ từng Component để sửa chữa và phát triển.
Một số khái niệm liên quan đến React JS ❖ Components Components giúp phân chia các UI (giao diện người dùng) thành các phần nhỏ để dễ dàng quản lý và tái sử dụng. Các Components thực hiện công việc giống như các Functions trong JavaScript nhưng chúng độc lập và nhiệm vụ là trả về HTML thông qua hàm Render. Components được sử dụng để nói cho React biết ta muốn hiển thị gì trên màn hình. Trong quá trình thay đổi dữ liệu, React sẽ cập nhật và Render lại cho các Component 22 một cách nhanh chóng và chính xác.
Components trong React thường được viết theo 2 loại chính đó là Function Component và Class Component. 2 Component trong React JS Với Function Component: − Function Component là một Pure Function để được dùng để khai báo một Component. Ban đầu thì Function Component chỉ được sử dụng để viết các Component với mục đích Render các đoạn HTML. Nhưng với các Component theo hướng này thì sẽ không can thiệp vào Lifecycle của Component.
Do đó nó thường được biết đến với tên gọi là Stateless Component [1]. Với Class Component: ❖ Props Props là từ viết tắt của Properties là một Object được truyền vào trong một Components, mỗi Components sẽ nhận vào Props và trả về React element.