Phần mở đầu 2. MỤC TIÊU CỦA ĐỀ TÀI Xây dựng website cho phép người dùng có thể tìm kiếm, xem thông tin và đặt mua các loại thiết bị điện tử trực tuyến. Thêm vào đó có thể đánh giá và để lại bình luận cho các sản phẩm đã mua. Xây dựng hệ thống quản lý và thống kê doanh số của cửa hàng cho doanh nghiệp.
Website có giao diện thân thiện với người dùng và đảm bảo tính bảo mật cho các thông tin cá nhân của người dùng. Một số yêu cầu sau đây phải được đáp ứng bởi một trang web cơ bản: ● Xem sản phẩm và đơn hàng ● Tìm kiếm sản phẩm ● Đăng nhập, đăng ký ● Quản lý giỏ hàng ● Sử dụng hình thức thanh toán trực tuyến ● Giao diện dễ sử dụng, trực quan 3. ĐỐI TƯỢNG NGUYÊN CỨU Đề tài này nghiên cứu tập trung vào hai đối tượng chính, bao gồm: kiến thức thực tiễn để quản lý và vận hành một hệ thống kinh doanh sản phẩm thời trang và các công nghệ được áp dụng để hiện thực hóa sản phẩm đó. Cụ thể như sau: Đối với đối tượng đầu tiên là kiến thức thực tiễn để quản lý và vận hành một hệ thống kinh doanh sản phẩm thời trang thì sẽ tập trung nghiên cứu về quy trình quản lý người dùng, sản phẩm và các thống kê chi tiết khác.
Đồng thời cũng nghiên cứu về quy trình đặt hàng, thanh toán và xử lý đơn hàng. Đối với các công nghệ áp dụng thì sẽ nghiên cứu về ReactJS, NodeJS, MySQL và JWT để xây dựng hệ thống các APIs hỗ trợ truy xuất và thao tác với dữ liệu một cách chính xác, bảo mật và nhanh chóng nhất. Đồng thời cũng nghiên cứu 13 Phần mở đầu về ReactJS cùng với các thư viện hỗ trợ để xây dựng và xử lý giao diện cho người sử dụng cuối của hệ thống. PHẠM VI NGUYÊN CỨU Một số trang web trên mạng như Shopee, các trang thương mại điện tử về bán thiết bị điện tử.
Đề tài chủ yếu áp dụng các kiến thức đã nghiên cứu trước đó vào sản phẩm thực tế, vì thế phạm vi nghiên cứu của đề tài nằm ở mức xử lý các tác vụ cơ bản của một website và ứng dụng bán hàng như là: xem danh sách và chi tiết các sản phẩm, tìm kiếm và sắp xếp sản phẩm, thêm sản phẩm vào giỏ hàng, đặt hàng, thanh toán, đánh giá sản phẩm, gợi ý sản phẩm. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Sau khi hoàn thiện đề tài, nhóm nghiên cứu đã rút ra được nhiều kinh nghiệm cũng như bài học bổ ích, đặc biệt về các công nghệ hiện đang được áp dụng rất nhiều trong thực tế hiện nay. Đồng thời cũng đóng góp, giúp ích một phần nào đó trong việc đơn giản hóa nhu cầu mua sắm của mọi người. Khi đồ án được vận hành trong thực tế, việc mua sắm trực tuyến có thể trở nên dễ dàng hơn và tối ưu được khoảng thời gian lựa chọn sản phẩm cho mọi người.
14 Chương 01: Cơ sở lý thuyết PHẦN NỘI DUNG CHƯƠNG 1.1 ReactJS ReactJS là một thư viện mã nguồn mở viết bằng ngôn ngữ JavaScript và được tạo bởi Facebook để xây dựng thành phần giao diện phía người dùng (User Interface). Các thành phần này được gọi là Component và chúng có thể được tái sử dụng. Một trong những điểm mạnh của nó là việc render dữ liệu sẽ được kiểm tra rất kỹ xem đó là sự thay đổi dữ liệu của thành phần nào trong DOM nhằm hạn chế tối đa việc render lại tất cả dữ liệu trong DOM từ đó nâng cao hiệu suất và tối ưu hóa tốc độ tải trang. Để làm được điều này thì ReactJS hỗ trợ một DOM khác gọi là DOM ảo.
DOM ảo có cấu trúc tương tự DOM chính, ReactJS sẽ dùng DOM ảo này để kiểm tra, so sánh và tìm đúng thành phần của DOM chính cần cập nhật lại khi có sự kiện làm thay đổi thành phần đó và chỉ cập nhật đúng phần mà có sự thay đổi đó thay vì cập nhật lại cả DOM. Một cách bình thường, các trang web sẽ dùng trực tiếp HTML để render DOM cho chính nó, nếu các website thiên về hiển thị thông tin cho người dùng mà không có quá nhiều tương tác hoặc có ít trang thì cách làm thông thường này không có vấn đề gì nhưng khi một website có nhiều tương tác và nhiều trang hơn thì website sẽ gặp vấn đề về mặt hiệu năng vì DOM sẽ được render lại toàn bộ mỗi lần người dùng thực hiện chức năng reload lại trang. 15 Chương 01: Cơ sở lý thuyết Hình 1.1-1: Virtual DOM trong ReactJS [1] ReactJS cho phép người lập trình viết HTML hoặc cũng có thể viết CSS trực tiếp trong JavaScript bằng cú pháp JSX, dễ dàng và thuận tiện hơn trong việc xem kết quả đầu ra ngay lập tức. ReactJS có cấu trúc tổ chức theo dạng thành phần ( Component) cho phép các Component này lồng vào nhau và có mối quan hệ cha-con (parent-child), các Component cha-con này có thể liên kết truyền dữ liệu từ Component cha sang Component con thông qua các Properties của Component con, có nghĩa là một Component cha có thể có nhiều Component con và dữ liệu của Component con có thể được sử dụng, biến đổi mà không ảnh hưởng đến Component cha.
16 Chương 01: Cơ sở lý thuyết Hình 1.1-2: Cơ chế truyền dữ liệu của ReactJS [2] 1.2 Redux Redux là một thư viện Javascript giúp quản lý các trạng thái (State) của ứng dụng, giúp người lập trình xử lý luồng hoạt động một cách nhất quán và dễ dàng để kiểm tra. Nếu một ứng dụng có ít component thì việc truyền dữ liệu giữa các component là tương đối dễ dàng và không có vấn đề gì nhưng khi ứng dụng có nhiều component thì nó sẽ trở nên phức tạp hơn nhiều. Trong React, để chia sẻ dữ liệu các component thì chúng phải có quan hệ cha con và truyền dưới dạng 17 Chương 01: Cơ sở lý thuyết Properties. Vấn đề ở đây là khi giữa các component đó không có quan hệ cho con nhưng lại cần chia sẻ dữ liệu với nhau thì sẽ như thế nào.
Để có thể truyền dữ liệu một cách tối ưu và đơn giản hơn chúng ta sẽ lưu dữ liệu vào một nơi chứa chung, từ đó truyền dữ liệu cho các component cần dùng. Lúc này, nơi chứa này sẽ là đóng vai trò trung gian, nó có nhiệm vụ lưu trữ và phân phát dữ liệu. Redux sẽ hỗ trợ việc chia sẻ dữ liệu giữa các component. Redux sẽ có 3 thành phần: Actions, Reducers và Store.
● Actions: Là các event và chúng là cách thức cần thiết để gửi dữ liệu từ ứng dụng đến Store. Data là dữ liệu tương tác bởi user hoặc lấy APIs ● Reducers: Là những function, các function này sử dụng state hiện tại của ứng dụng sau đó hiện một action rồi cập nhật lại một state mới. Các states này sẽ được lưu trữ dưới dạng objects và quy định rõ các state của ứng dụng thay đổi khi phản hồi một action gửi đến store. ● Store: Là nơi lưu trạng thái ứng dụng.
Store cho phép việc truy cập tới các state đã được lưu trong nó. Redux hoạt động theo nguyên lý như sau: Sau khi một action được thực thi, dispatcher (thành phần trong store) sẽ được gọi để kích hoạt và gửi đến reducer một action. Lúc này reducer thực hiện hành động được định nghĩa dựa vào action tương ứng được gửi đến. Sau đó sẽ đồng thời lưu lại giá trị của state mới vào trong store và trả về state mới đó.
18 Chương 01: Cơ sở lý thuyết Hình 1.3-1: Nguyên lý hoạt động của redux [3] 1.3 Các thư viện hỗ trợ front-end khác ● Axios: là một thư viện HTTP client được phát triển dựa vào Javascript Promise, nhằm để hỗ trợ cho giao tiếp với các API Web Service ● Material UI: là thư viện có các React Component được tạo bởi Google, cung cấp cho lập trình viên các Component được xây dựng sẵn giúp các lập trình viên tiết kiệm thời gian dựng HTML và CSS ● NextUI: giống như Material UI cũng là thư viện chứa các React Component mới ra mắt gần đây. Hỗ trợ xây dựng với các component bắt mắt, nhiều tùy biến cho lập trình viên có thể sáng tạo, tùy chỉnh.4 NodeJS NodeJS được xây dựng và phát triển từ năm 2009 và phát triển với sự bảo trợ của công ty Joyent. Đây là một nền tảng phát triển độc lập dựa trên V8 JavaScript engine. Đây là một trình phiên dịch thực thi JavaScript code cho phép tạo các ứng dụng web.
Đặc biệt có khả mở rộng nhanh chóng và dễ dàng cũng như các trang mạng xã hội, diễn đàn. 19 Chương 01: Cơ sở lý thuyết Một trong các lợi thế lớn của NodeJS là có thể hoạt động trên nhiều nền tảng khác nhau từ Windows, Linux đến Mac OS. NodeJs cung cấp cho chúng ta một thư viện phong phú dưới dạng các modules JavaScript khác nhau giúp đơn giản hóa việc lập trình và giảm thiểu thời gian cần thiết. Nguyên lý chính của NodeJS là việc sử dụng non - blocking, nhanh chóng định tuyến đầu vào và đầu ra dữ liệu thông qua các tác vụ thời gian thực.
Điều này giúp NodeJS có khả năng mở rộng nhanh chóng và có thể xử lý một lượng lớn các kết nối đồng thời với thông lượng cao. Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì với giải pháp sử dụng đơn luồng (Single Threaded) kết hợp với non - blocking I/O mà NodeJS đưa ra giúp giải quyết hàng chục ngàn kết nối đồng thời. 20 Chương 01: Cơ sở lý thuyết Hình 1.5 MySQL MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở. Hệ thống hoạt động theo mô hình client – server, dựa trên ngôn ngữ truy vấn có cấu trúc (SQL) và được phát triển, phân phối, hỗ trợ bởi Tập đoàn Oracle.
21 Chương 01: Cơ sở lý thuyết MySQL được ưa chuộng trong quá trình xây dựng và phát triển các ứng dụng. Hệ thống quản trị cơ sở dữ liệu này được đánh giá có tốc độ cao, ổn định, dễ dùng và có khả năng thay đổi mô hình sử dụng phù hợp với điều kiện công việc. MySQL hiện đang hoạt động trên nhiều hệ điều hành Linux, Unix, Windows,…, cung cấp một hệ thống lớn các hàm tiện ích mạnh mẽ. Nó thích hợp với các ứng dụng có truy cập cơ sở dữ liệu trên internet nhờ tốc độ cao và tính bảo mật tốt.
Người dùng có thể tải miễn phí MySQL từ trang chủ với nhiều phiên bản cho các hệ điều hành khác nhau.6-1: Hệ quản trị cơ sở dữ liệu MySQL [6] 1.