Xây dựng website bán dụng cụ làm bếp bằng reactjs

Xây dựng website bán dụng cụ làm bếp chuyên nghiệp với ReactJS. Hướng dẫn từng bước, tối ưu SEO, giúp bạn tiếp cận khách hàng tiềm năng hiệu quả.

• Tác giả: Hồ Đức Phú
• Người hướng dẫn: Nguyễn Thị Nam
• Trường học: Trường Đại học Văn Hiến
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Xây dựng website bán dụng cụ làm bếp bằng ReactJS
• Loại tài liệu: Đồ án chuyên ngành
• Năm xuất bản: 2022
• Địa điểm: TP. Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• DANH MỤC HÌNH
• 1. CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
• 1.1. Tổng quan về đề tài
• 1.2. Tìm hiểu “Xây dựng website bán dụng cụ làm bếp”
• 1.3. Công cụ sử dụng
• 1.4. Mục tiêu đề tài
• 2. CHƯƠNG 2: SƠ LƯỢC VỀ CÔNG CỤ
• 2.1. Xây dựng hệ thống
• 2.1.1. Giới thiệu Visual Studio Code
• 2.1.2. Một số tính năng của Visual Studio Code
• 2.2. Giới thiệu về ngôn ngữ lập trình JavaScript và các công nghệ sử dụng
• 2.2.1. Giới thiệu về HTML
• 2.2.2. Giới thiệu về CSS
• 2.2.3. Giới thiệu về Javascript
• 2.2.4. Giới thiệu về ReactJS
• 2.3. Giới thiệu về Firebase
• 2.3.1. Giới thiệu về Firebase
• 2.3.2. Những service nổi bật của Firebase
• 2.3.2.1. Real-time Database
• 2.3.2.2. Firebase cloud messaging
• 2.3.2.3. Firebase database query
• 2.4. Giới thiệu về Ant Design
• 2.4.1. Giới thiệu về Ant Design
• 2.4.2. Cách cài đặt Ant Design
• 2.4.3. Cách sử dụng Ant Design
• 3. CHƯƠNG 3: THIẾT KẾ WEBSITE BÁN DỤNG CỤ LÀM BẾP
• 3.1. Form đăng nhập
• 3.2. Trang liên hệ
• 3.3. Trang sản phẩm
• 3.4. Trang yêu thích
• 3.5. Trang giỏ hàng
• 3.6. Trang thanh toán
• 3.7. Các chức năng của website
• 3.7.1. Chức năng đăng nhập
• 3.7.2. Chức năng đăng xuất
• 3.7.3. Chức năng liên hệ
• 3.7.4. Chức năng thêm vào mục ưa thích
• 3.7.5. Chức năng thêm vào giỏ hàng
• 3.7.6. Chức năng thanh toán
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Toàn cảnh xây dựng website bán dụng cụ làm bếp bằng ReactJS

Việc xây dựng website bán dụng cụ làm bếp bằng ReactJS là một giải pháp công nghệ hiện đại, đáp ứng xu hướng phát triển mạnh mẽ của thương mại điện tử. Trong bối cảnh cách mạng công nghiệp 4.0, hành vi mua sắm trực tuyến đã trở nên phổ biến. Theo một khảo sát của Hiệp hội Thương mại điện tử Việt Nam (VECOM), ngành này đã ghi nhận tốc độ tăng trưởng trên 32%, cho thấy tiềm năng to lớn của thị trường. Việc phát triển một trang web thương mại điện tử ReactJS không chỉ giúp doanh nghiệp tiếp cận một lượng lớn khách hàng mà còn tối ưu hóa quy trình vận hành. ReactJS, một thư viện JavaScript do Facebook phát triển, cung cấp nền tảng vững chắc để xây dựng các giao diện người dùng (UI) linh hoạt và hiệu suất cao. Dự án này tập trung vào việc áp dụng các công nghệ tiên tiến như ReactJS, Firebase và Ant Design để tạo ra một website bán hàng hoàn chỉnh. Các chức năng cốt lõi của một trang thương mại điện tử, từ hiển thị sản phẩm, quản lý giỏ hàng đến thanh toán, đều được triển khai một cách bài bản. Mục tiêu là tạo ra một sản phẩm không chỉ đáp ứng nhu cầu kinh doanh mà còn mang lại trải nghiệm mượt mà cho người dùng cuối.

1.1. Tầm quan trọng của trang web thương mại điện tử ReactJS

Sự bùng nổ của thương mại điện tử đặt ra yêu cầu cấp thiết về việc sở hữu một nền tảng bán hàng online chuyên nghiệp. Một trang web thương mại điện tử ReactJS mang lại nhiều lợi thế cạnh tranh. Nó cho phép doanh nghiệp hoạt động 24/7, phá vỡ rào cản địa lý và tiếp cận khách hàng toàn cầu. Các công cụ marketing tích hợp giúp quảng bá sản phẩm hiệu quả, trong khi hệ thống quản lý cho phép theo dõi doanh thu và hàng tồn kho một cách chính xác. Việc sử dụng ReactJS trong lập trình web reactjs giúp tạo ra các ứng dụng trang đơn (Single Page Application - SPA), mang lại tốc độ tải trang nhanh và trải nghiệm người dùng liền mạch, tương tự như sử dụng một ứng dụng di động. Điều này đặc biệt quan trọng trong việc giữ chân khách hàng và tăng tỷ lệ chuyển đổi.

1.2. Lý do lựa chọn lập trình web ReactJS cho dự án e commerce

ReactJS được chọn làm công nghệ chủ đạo vì những ưu điểm vượt trội trong việc phát triển frontend cho web bán hàng. Kiến trúc dựa trên component của React cho phép tái sử dụng mã nguồn, giúp quá trình phát triển nhanh hơn và dễ bảo trì hơn. Mỗi component react cho e-commerce, ví dụ như nút 'Thêm vào giỏ hàng' hay danh sách sản phẩm, có thể được phát triển độc lập và kết hợp lại. Virtual DOM là một tính năng nổi bật khác, giúp tối ưu hiệu năng React bằng cách giảm thiểu các thao tác cập nhật trực tiếp lên DOM thật, từ đó tăng tốc độ phản hồi của ứng dụng. Hơn nữa, hệ sinh thái rộng lớn của React với các thư viện hỗ trợ như Redux cho quản lý trạng thái và React Router cho điều hướng đã tạo nên một bộ công cụ mạnh mẽ để xây dựng các ứng dụng phức tạp.

II. Thách thức chính khi xây dựng trang web bán hàng với ReactJS

Quá trình xây dựng website bán dụng cụ làm bếp bằng ReactJS phải đối mặt với nhiều thách thức kỹ thuật. Một trong những vấn đề lớn nhất là quản lý trạng thái ứng dụng. Khi quy mô website tăng lên, việc đồng bộ dữ liệu giữa các component như giỏ hàng, thông tin người dùng và danh sách sản phẩm trở nên phức tạp. Việc lựa chọn phương pháp state management trong React phù hợp, ví dụ như sử dụng Context API hay các thư viện như Redux, là yếu tố quyết định đến sự ổn định của hệ thống. Bên cạnh đó, việc thiết kế một giao diện web bán hàng hấp dẫn, thân thiện và đáp ứng trên nhiều thiết bị (responsive) cũng là một bài toán khó. Giao diện không chỉ cần đẹp mắt mà còn phải đảm bảo trải nghiệm người dùng (UX) tối ưu để dẫn dắt khách hàng đến hành động mua hàng. Cuối cùng, việc tích hợp với các dịch vụ bên thứ ba như cổng thanh toán, đơn vị vận chuyển và hệ thống backend đòi hỏi kiến thức sâu về API và xử lý bất đồng bộ.

2.1. Vấn đề quản lý giỏ hàng React và trạng thái ứng dụng

Quản lý trạng thái là cốt lõi của một ứng dụng React phức tạp. Chức năng quản lý giỏ hàng React là một ví dụ điển hình. Trạng thái của giỏ hàng, bao gồm các sản phẩm, số lượng, tổng tiền, cần được truy cập và cập nhật từ nhiều component khác nhau. Nếu không có một cơ chế state management trong React hiệu quả, dữ liệu có thể trở nên không nhất quán, dẫn đến lỗi logic nghiêm trọng. Các giải pháp như ReactJS Redux Ecommerce cung cấp một 'kho' (store) tập trung để lưu trữ toàn bộ trạng thái của ứng dụng, giúp việc quản lý dữ liệu trở nên dễ đoán và dễ gỡ lỗi hơn. Việc thiết kế cấu trúc state hợp lý và các action, reducer rõ ràng là chìa khóa để giải quyết thách thức này.

2.2. Khó khăn trong việc thiết kế database sản phẩm và API

Hệ thống backend và cơ sở dữ liệu đóng vai trò xương sống cho website. Việc thiết kế database sản phẩm phải đảm bảo tính linh hoạt và khả năng mở rộng. Cần xác định rõ các thuộc tính của sản phẩm, mối quan hệ giữa các bảng (như sản phẩm, danh mục, đơn hàng) và tối ưu hóa truy vấn. Sau đó, việc xây dựng API cho website bán hàng là bước tiếp theo. API phải được thiết kế theo chuẩn RESTful, cung cấp các endpoint rõ ràng cho các hoạt động CRUD (Create, Read, Update, Delete) đối với sản phẩm, người dùng và đơn hàng. Thử thách nằm ở việc đảm bảo API có hiệu năng cao, bảo mật và khả năng chịu tải tốt, đặc biệt khi có lượng truy cập lớn.

III. Phương pháp xây dựng frontend cho web bán hàng với ReactJS

Giải pháp cho phần frontend của dự án là tập trung vào việc xây dựng một cấu trúc component mạch lạc và tái sử dụng. Nền tảng của dự án là ReactJS, kết hợp với JSX để viết mã HTML ngay trong JavaScript, giúp các component react cho e-commerce trở nên trực quan và dễ quản lý hơn. Toàn bộ giao diện web bán hàng được chia thành các component nhỏ, độc lập như Header, Footer, ProductCard, CartItem. Cách tiếp cận này không chỉ giúp quản lý mã nguồn hiệu quả mà còn tăng tốc độ phát triển. Để giải quyết bài toán giao diện, dự án đã sử dụng thư viện Ant Design. Đây là một bộ công cụ UI mạnh mẽ, cung cấp sẵn các component đã được thiết kế chuyên nghiệp và tuân thủ các nguyên tắc thiết kế tốt nhất. Việc sử dụng Ant Design giúp tiết kiệm đáng kể thời gian so với việc tự xây dựng mọi thứ từ đầu, đồng thời đảm bảo tính nhất quán và thẩm mỹ cho toàn bộ website. Các component này có thể dễ dàng tùy chỉnh để phù hợp với nhận diện thương hiệu của cửa hàng.

3.1. Cấu trúc component React cho E commerce hiệu quả

Việc cấu trúc hóa các component React cho e-commerce là nền tảng cho một dự án dễ bảo trì. Theo mô hình được áp dụng, các component được phân loại thành hai nhóm chính: container components (thông minh) và presentational components (ngu). Container components chịu trách nhiệm về logic, xử lý state và gọi API. Presentational components chỉ tập trung vào việc hiển thị dữ liệu nhận được qua props. Ví dụ, một trang danh sách sản phẩm sẽ có một container component để lấy dữ liệu sản phẩm từ API và quản lý các bộ lọc, sau đó truyền dữ liệu này xuống cho nhiều presentational component ProductCard để hiển thị. Cách phân tách này làm cho mã nguồn sạch sẽ và dễ tái sử dụng hơn.

3.2. Sử dụng thư viện Ant Design để tối ưu giao diện web bán hàng

Ant Design là một lựa chọn chiến lược để tăng tốc độ phát triển giao diện web bán hàng. Tài liệu nghiên cứu gốc chỉ ra rằng, Ant Design cung cấp một hệ thống gồm các component đa dạng như Layout, Button, Form, Table, Modal. Các component này không chỉ có thiết kế đẹp mà còn được tích hợp sẵn các tính năng phức tạp như xác thực form, phân trang, và thông báo. Bằng cách import và sử dụng các component này, đội ngũ phát triển có thể nhanh chóng dựng lên các trang chức năng như đăng nhập, đăng ký, trang chi tiết sản phẩm và trang thanh toán mà không cần phải viết CSS và JavaScript phức tạp từ đầu. Điều này giúp tập trung nguồn lực vào việc xử lý logic nghiệp vụ cốt lõi của ứng dụng.

IV. Giải pháp backend với Firebase và thiết kế database sản phẩm

Để đơn giản hóa và tăng tốc độ phát triển phần backend, dự án đã lựa chọn giải pháp Backend-as-a-Service (BaaS) từ Firebase của Google. Firebase cung cấp một bộ công cụ mạnh mẽ, cho phép xây dựng các ứng dụng phức tạp mà không cần quản lý hạ tầng máy chủ. Đây là một cách tiếp cận hiện đại, đặc biệt phù hợp với các dự án cần triển khai nhanh. Dịch vụ cốt lõi được sử dụng là Firebase Realtime Database, một cơ sở dữ liệu NoSQL cho phép lưu trữ và đồng bộ dữ liệu theo thời gian thực. Khi có bất kỳ thay đổi nào trong cơ sở dữ liệu, mọi client kết nối sẽ tự động được cập nhật. Điều này rất hữu ích cho các tính năng như thông báo tồn kho hoặc cập nhật giỏ hàng trực tiếp. Ngoài ra, Firebase Authentication được sử dụng để xử lý việc đăng nhập, đăng ký một cách an toàn thông qua email, mật khẩu hoặc các nhà cung cấp bên thứ ba như Google, Facebook. Firebase Storage cũng đóng vai trò quan trọng trong việc lưu trữ các tệp media như hình ảnh sản phẩm.

4.1. Kết nối backend và dữ liệu thời gian thực với Firebase

Việc kết nối backend NodeJS (hoặc trong trường hợp này là một BaaS như Firebase) được thực hiện thông qua Firebase SDK cho JavaScript. SDK này cung cấp các API đơn giản để tương tác với các dịch vụ của Firebase. Ví dụ, để lấy danh sách sản phẩm, chỉ cần gọi một hàm để lắng nghe thay đổi trên một nút (node) cụ thể trong Realtime Database. Đặc tính thời gian thực của Firebase giúp loại bỏ sự cần thiết của việc làm mới trang thủ công. Khi một người dùng khác mua một sản phẩm, số lượng tồn kho hiển thị trên trang của những người dùng khác có thể được cập nhật ngay lập tức, tạo ra một trải nghiệm mua sắm năng động và chính xác. Đây là một ưu điểm lớn so với kiến trúc backend truyền thống.

4.2. Cách thiết kế database sản phẩm tối ưu trên nền tảng NoSQL

Việc thiết kế database sản phẩm trên một nền tảng NoSQL như Firebase đòi hỏi một tư duy khác so với cơ sở dữ liệu quan hệ. Thay vì chuẩn hóa dữ liệu một cách nghiêm ngặt, cấu trúc dữ liệu thường được làm phẳng (denormalized) để tối ưu hóa cho các truy vấn đọc. Dữ liệu được tổ chức dưới dạng một cây JSON lớn. Ví dụ, có thể có các nút chính như 'products', 'users', và 'orders'. Dưới 'products', mỗi sản phẩm là một đối tượng với các thuộc tính như tên, giá, mô tả, và URL hình ảnh. Cấu trúc này giúp việc lấy thông tin chi tiết của một sản phẩm trở nên cực kỳ nhanh chóng chỉ với một lần truy cập. Dù có thể dẫn đến dư thừa dữ liệu, nhưng nó đánh đổi lại bằng hiệu suất đọc vượt trội, điều rất quan trọng đối với một trang thương mại điện tử.

V. Hướng dẫn tích hợp thanh toán online và quản lý giỏ hàng

Hai chức năng quan trọng nhất của một website thương mại điện tử là quản lý giỏ hàng React và tích hợp thanh toán online. Trong dự án này, chức năng giỏ hàng được xây dựng như một component trung tâm, quản lý một mảng các đối tượng sản phẩm được người dùng lựa chọn. Mỗi khi người dùng thêm, xóa hoặc cập nhật số lượng sản phẩm, trạng thái của giỏ hàng sẽ được cập nhật và giao diện sẽ được render lại để phản ánh thay đổi. Dữ liệu giỏ hàng có thể được lưu trữ tạm thời trong Local Storage của trình duyệt để người dùng không mất giỏ hàng khi đóng tab. Đối với chức năng thanh toán, dự án đã tích hợp với PayPal, một trong những cổng thanh toán phổ biến và an toàn nhất thế giới. Quá trình tích hợp bao gồm việc nhúng PayPal SDK vào ứng dụng React, cấu hình các nút thanh toán và xử lý các callback trả về từ PayPal để xác nhận giao dịch thành công. Việc này đòi hỏi xử lý cẩn thận để đảm bảo tính toàn vẹn và bảo mật của đơn hàng.

5.1. Xây dựng chức năng quản lý giỏ hàng React từ A Z

Chức năng quản lý giỏ hàng React bắt đầu từ việc tạo một state để lưu trữ danh sách các mặt hàng. Khi người dùng nhấn nút 'Thêm vào giỏ', một action sẽ được kích hoạt, mang theo thông tin sản phẩm. Action này sẽ được một reducer xử lý để cập nhật state của giỏ hàng: kiểm tra xem sản phẩm đã tồn tại chưa, nếu có thì tăng số lượng, nếu chưa thì thêm mới. Giao diện giỏ hàng sẽ hiển thị danh sách các sản phẩm này, cùng với các nút để thay đổi số lượng hoặc xóa sản phẩm. Tổng giá trị đơn hàng cũng được tính toán và hiển thị tự động mỗi khi giỏ hàng thay đổi. Logic này đảm bảo dữ liệu luôn được đồng bộ và chính xác trên toàn bộ ứng dụng.

5.2. Các bước tích hợp thanh toán online an toàn với PayPal

Việc tích hợp thanh toán online với PayPal bao gồm ba bước chính. Đầu tiên, đăng ký một tài khoản nhà phát triển trên PayPal để nhận được Client ID. Thứ hai, sử dụng một thư viện React-PayPal (hoặc tích hợp trực tiếp SDK) để hiển thị nút thanh toán của PayPal. Nút này khi được nhấp sẽ mở ra một cửa sổ popup để người dùng đăng nhập và xác nhận thanh toán. Thứ ba, xử lý kết quả trả về. Khi thanh toán thành công, PayPal sẽ gọi một hàm callback trong mã React, cung cấp thông tin chi tiết về giao dịch. Tại đây, ứng dụng sẽ tạo một đơn hàng mới trong cơ sở dữ liệu, cập nhật trạng thái thanh toán và thông báo cho người dùng. Toàn bộ quá trình diễn ra ở phía client, giúp giảm tải cho máy chủ.

VI. Tối ưu hiệu năng React và hướng phát triển trong tương lai

Sau khi hoàn thành các chức năng cơ bản, việc tối ưu hiệu năng React là bước cần thiết để đảm bảo website hoạt động mượt mà và mang lại trải nghiệm tốt nhất. Một số kỹ thuật có thể áp dụng bao gồm: lazy loading các component và hình ảnh để giảm thời gian tải ban đầu, sử dụng React.memo để ngăn chặn việc render lại không cần thiết của các component, và tối ưu hóa kích thước bundle bằng các công cụ như Webpack Bundle Analyzer. Hướng phát triển trong tương lai cho dự án này rất rộng mở. Một trong những cải tiến quan trọng là chuyển đổi sang một framework xây dựng trên React như Next.js. Việc xây dựng e-commerce với Next.js sẽ mang lại lợi ích to lớn về SEO nhờ khả năng server-side rendering (SSR) với Next.js. Điều này giúp các công cụ tìm kiếm dễ dàng thu thập dữ liệu trang web hơn. Ngoài ra, việc phát triển các tính năng nâng cao như hệ thống gợi ý sản phẩm, đánh giá và bình luận, và tích hợp các phương thức thanh toán khác cũng là những mục tiêu tiếp theo để hoàn thiện website.

6.1. Các kỹ thuật tối ưu hiệu năng React cho website e commerce

Để tối ưu hiệu năng React, cần tập trung vào việc giảm thời gian tương tác đầu tiên (Time to Interactive). Kỹ thuật Code-splitting cho phép chia nhỏ mã nguồn thành các phần và chỉ tải khi cần thiết. Ví dụ, mã cho trang thanh toán chỉ được tải khi người dùng điều hướng đến trang đó. Sử dụng useMemo và useCallback hooks giúp ghi nhớ kết quả của các phép tính phức tạp và các hàm, tránh việc thực thi lại chúng trong mỗi lần render. Đối với danh sách dài, kỹ thuật 'windowing' hoặc 'virtualization' với các thư viện như react-window có thể cải thiện đáng kể hiệu suất bằng cách chỉ render các mục hiển thị trên màn hình.

6.2. Lợi ích của Server Side Rendering SSR với Next.js

Chuyển sang xây dựng e-commerce với Next.js là một bước tiến chiến lược. Các ứng dụng React thuần (Client-Side Rendering) thường trả về một tệp HTML trống ban đầu, và nội dung được tạo bởi JavaScript. Điều này gây khó khăn cho các bot tìm kiếm. Ngược lại, server-side rendering (SSR) với Next.js sẽ render trang HTML hoàn chỉnh trên máy chủ trước khi gửi cho trình duyệt. Kết quả là thời gian hiển thị nội dung đầu tiên (First Contentful Paint) nhanh hơn và trang web thân thiện hơn với SEO. Ngoài SSR, Next.js còn cung cấp các tính năng mạnh mẽ khác như Static Site Generation (SSG), tối ưu hóa hình ảnh tự động và định tuyến dựa trên tệp tin, giúp quá trình phát triển trở nên hiệu quả hơn.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. Tổng quan về đề tài - Trong thời đại cách mạng công nghiệp 4.0, thương mại điện tử (TMĐT) đã phát triển rất nhanh chóng trên thế giới và cả ở Việt Nam. Theo khảo sát của Hiệp hội Thương mại điện tử Việt Nam (VECOM), tốc độ tăng trưởng của thương mại điện tử đạt trên 32%. Quy mô thương mại điện tử bán lẻ hàng hoá và dịch vụ tiêu dùng năm 2019 đạt khoảng 11,5 tỷ USD.

VECOM dự đoán tốc độ tăng trưởng của năm 2020 sẽ tiếp tục duy trì ở mức trên 30%, khi đó quy mô thương mại điện tử Việt Nam sẽ vượt con số 15 tỷ USD. Mô hình bán hàng trực tuyến mở rộng và phát triển không chỉ đơn thuần ở việc các doanh nghiệp bán lẻ xây dựng website cho phép khách hàng “đi chợ” trực tuyến, mà còn ở việc hàng loạt các chuyên trang TMĐT nội địa và nước ngoài đang nhanh chóng thâm nhập sâu và rộng vào thị trường thương mại nước ta. Có thể kể ra hàng loạt các website TMĐT đang hoạt động khá tốt tại thị trường Việt Nam như Lazada, Tiki, Shopee, Sendo,… Các website này liên tục có những màn mời chào ấn tượng, giảm giá thường xuyên theo ngày, sản phẩm ngày càng đa dạng, phong phú để người dùng dễ dàng lựa chọn. - TMĐT hiện đại thường sử dụng công nghệ World Wide Web, hay còn gọi là Web sẽ giúp bạn đưa những thông tin mong muốn của mình lên mạng Internet cho mọi người cùng xem một cách dễ dàng với các công cụ và những ngôn ngữ lập trình khác nhau.

Sự ra đời của các ngôn ngữ lập trình cho phép chúng ta xây dựng các trang Web đáp ứng được các yêu cầu của người sử dụng. - Bằng việc thực hiện đề tài “Xây dựng website bán dụng cụ làm bếp”, em muốn tìm hiểu vể công nghệ ReactJS cũng như quá trình xây dựng một website TMĐT nhằm giải quyết công việc bán hàng trực tuyến. Website mang lại rất nhiều lợi ích như: khả năng quảng cáo các loại sản phẩm được phổ biến, việc kinh doanh sẽ mở 24/24, giảm thiểu chi phí nhân viên cho việc tiếp thị, dễ dàng nhận phản hồi từ phía khách hàng, dễ quản lý hàng hóa và xem thống kê doanh thu,. - Website bán hàng giúp cung cấp cho khách hàng những lựa chọn linh hoạt và tiện lợi trong việc tìm mua sản phẩm thông qua chức năng tìm kiếm và giỏ hàng.

Các thông 1 BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A010209 tin về sản phẩm được hiển thị chi tiết với từng sản phẩm, từ đó khách hàng dễ dàng nhận biết và lựa chọn được sản phẩm phù hợp. Tìm hiểu “Xây dựng website bán dụng cụ làm bếp”. Lý thuyết: - Tìm hiểu về thương mại điện tử. - Tìm hiểu về ngôn ngữ JavaScript và các công nghệ: HTML, CSS, ReactJS.

Thực hành: - Xây dựng website bán dụng cụ làm bếp với các chức năng: + Trang chủ giới thiệu, quảng cáo sản phẩm. + Lập giỏ hang, đặt hàng. Công cụ sử dụng: - Visual Studio Code. Mục tiêu đề tài - Xây dựng các chức năng cơ bản của website bán hàng thương mại điện tử.

- Đảm bảo việc mua bán sản phẩm giữa shop bán hàng và khách hàng diễn ra nhanh chóng. - Giúp người quản lý quản lý tình hình hoạt động của cửa hang. - Đảm bảo khách hàng có thông tin chính xác về sản phẩm. 2 BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A010209 CHƯƠNG 2: SƠ LƯỢC VỀ CÔNG CỤ 2.

Xây dựng hệ thống 2.1 Giới thiệu Visual Studio Code - Visual Studio Code là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS, Visual Studio Code được phát triển bởi Microsoft. Nó được xem là một sự kết hợp hoàn hảo giữa IDE và Code Editor. Nó hỗ trợ chức năng Debug, đi kèm với Git, có syntax highlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn. Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác.

Hình 2 Giao diện Visual Studio Code.2 Một số tính năng của Visual Studio Code:  Hỗ trợ nhiều ngôn ngữ lập trình: C/C++, C#, F#, Visual Basic, HTML, CSS, Javascript,….  Hỗ trợ đa nền tảng: Windows, Linux hoặc Mac Systems. Mac OS (Macintosh Operating System)  Màn hình đa nhiệm: người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục mặc dù chúng không hề liên quan với nhau. 3 BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A010209  Intellisense: nó có thể phát hiện nếu bất kỳ đoạn mã nào không đầy đủ.

Thậm chí, khi lập trình viên quên không khai báo biến, Intellisense sẽ tự động giúp họ bổ sung các cú pháp còn thiếu.  Hỗ trợ Git: Visual Studio Code hỗ trợ kéo hoặc sao chép mã trực tiếp từ GitHub. Mã này sau đó có thể được thay đổi và lưu lại trên phần mềm.2 Giới thiệu về ngôn ngữ lập trình JavaScript và các công nghệ sử dụng 2.1 Giới thiệu về HTML - HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo các tài liệu có thể truy cập trên mạng. Tài liệu HTML được tạo nhờ dùng các thẻ và các phần tử của HTML.

File được lưu trên máy chủ dịch vụ Web với phần mở rộng “. Các trình duyệt sẽ đọc tập tin HTML và hiển thị chúng dưới dạng trang Web. Các thẻ HTML sẽ được ẩn đi, chỉ hiển thị nội dung văn bản và các đối tượng khác: hình ảnh, media. Với các trình duyệt khác nhau đều hiển thị một tập HTML với một kết quả nhất định.

Các trang HTML được gửi đi qua mạng Internet theo giao thức HTTP. Hình 2 Cú pháp HTML. - HTML không những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản như Javascript để tạo hiệu ứng động cho trang Web. 4 BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A010209 2.2 Giới thiệu về CSS - CSS (Cascading Style Sheets): là ngôn ngữ định kiểu theo tầng được dùng để tạo bố cục, trang trí, thiết lập màu nền, màu chữ, kích thước.

cho trang Web. CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính. CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ một file css riêng biệt. Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng là “.

Chính vì vậy mà các trang Web có sử dụng CSS thì mã HTML sẽ trở nên ngắn gọn hơn. Hình 3 Cú pháp CSS. - Ngoài ra có thể sử dụng một tập tin CSS đó cho nhiều website tiết kiệm rất nhiều thời gian và công sức. Một đặc điểm quan trọng đó là tính kế thừa của CSS do đó sẽ giảm được số lượng dòng code mà vẫn đạt được yêu cầu.3 Giới thiệu về Javascript - Javascript là một ngôn ngữ dạng script thường được sử dụng cho việc lập trình Web ở phía client, nó tuân theo chuẩn ECMAScript.

Là một ngôn ngữ linh động, cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình. Javascript không hề liên quan tới ngôn ngữ lập trình Java, nó được hầu hết các trình duyệt ngày nay hỗ trợ. Với Javascript, ứng dụng Web của bạn sẽ trở nên vô cùng sinh động, mang tính trực quan và tương tác cao. Javascript theo phiên bản hiện hành là một ngôn ngữ lập trình kịch bản dựa trên đối tượng 5 BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A010209 được phát triển từ các ý niệm nguyên mẫu.

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ mở <script> và thẻ đóng </script>. Hình 4 Cú pháp Javascript. - Ngôn ngữ này được dùng rộng rãi cho các trang Web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Giống Java, Javascript có cú pháp tương tự ngôn ngữ lập trình C.js” là phần mở rộng thường được dùng cho tập tin mã nguồn Javascript.4 Giới thiệu về ReactJS - React.js là một thư viện Javascript được phát triển bởi Facebook, đang nổi lên trong những năm gần đây với xu hướng Single Page Application.

Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. - Chẳng hạn như nếu AngularJS cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat. thì với react lại cho phép nhúng code html trong code javascript nhờ vào JSX, ae có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn,. - React dùng để hỗ trợ việc xây dựng những thành phần UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được.

React được sử dụng tại Facebook trong production, và www.com được viết hoàn toàn trên React. - Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. - Vài khái niệm mà ai cũng phải biết: 6 BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A010209 2.1 Virtual DOM: - Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng.

Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props.

Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi. Với các đặc điểm ở trên, React dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi.