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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.24 MB, 41 trang )

Trang 1<div class="page_container" data-page="1">

TRƯỜNG ĐẠI HỌC VĂN HIẾN

KHOA CÔNG NGHỆ THƠNG TIN

</div>Trang 2<div class="page_container" data-page="2">

TP. HỒ CHÍ MINH, 2022

</div>Trang 3<div class="page_container" data-page="3">

TRƯỜNG ĐẠI HỌC VĂN HIẾN

KHOA CÔNG NGHỆ THƠNG TIN

</div>Trang 4<div class="page_container" data-page="4">

TP. HỒ CHÍ MINH, 2022

</div>Trang 5<div class="page_container" data-page="5">

Em xin gửi lời cám ơn chân thành đến Ban giám hiệu Nhà trường, quý thầy cô khoa Công nghệ thông tin đã tận tâm giảng dạy và truyền đạt những kiến thức, kinh nghiệm quý báu cho em. Đặc biệt, em xin cám ơn cô Nguyễn Thị Nam, cô đã tạo điệu kiện cho em có thể thực hiện đề tài này. Nhờ có cơ hội này mà em đã được biết thêm về nhiều kiến thức khác nhau, đó là một thế mạnh để em có thể dễ dàng tìm việc hơn sau khi ra trường. Một lần nữa, em xin chân thành cảm ơn cơ.

Bước đầu đi vào thực tế, tìm hiểu về lĩnh vực mới, kiến thức của em còn hạn chế và cịn nhiều bỡ ngỡ. Do vậy, khó tránh khỏi những sai sót, em rất mong nhận được những ý kiến đóng góp q báu của q thầy cơ và các bạn học cùng lớp để kiến thức của em trong lĩnh vực này được hoàn thiện hơn.

Em xin chân thành cám ơn!

TP. Hồ Chí Minh, ngày 31 tháng 3 năm 2022 Sinh viên thực hiện

</div>Trang 6<div class="page_container" data-page="6">

2.1.1 Giới thiệu Visual Studio Code...3

2.1.2 Một số tính năng của Visual Studio Code:...3

2.2 Giới thiệu về ngơn ngữ lập trình JavaScript và các cơng nghệ sử dụng...4

2.2.1 Giới thiệu về HTML...4

2.2.2 Giới thiệu về CSS...5

2.2.3 Giới thiệu về Javascript...5

2.2.4 Giới thiệu về ReactJS...6

2.3 Giới thiệu về Firebase...8

2.3.1 Giới thiệu về Firebase...8

2.3.2 Những service nổi bật của Firebase...9

2.3.2.1. Real-time Database...9

2.3.2.2. Authentication...10

2.3.2.3. Firebase cloud messaging...10

2.3.2.4. Firebase database query...11

2.3.2.5. Remote Config...11

</div>Trang 7<div class="page_container" data-page="7">

2.4 Giới thiệu về Ant Design...13

2.4.1 Giới thiệu về Ant Design...13

2.4.2 Cách cài đặt Ant Design...14

3.1.9 Trang thanh toán...22

3.2Các chức năng của website...22

3.2.1Chức năng đăng nhập...22

3.2.2Chức năng đăng xuất...23

3.2.3Chức năng liên hệ...24

3.2.4Chức năng thêm vào mục ưa thích...25

3.2.5Chức năng thêm vào giỏ hàng...26

3.2.6Chức năng thanh tốn...27

KẾT LUẬN...30

</div>Trang 8<div class="page_container" data-page="8">

TÀI LIỆU THAM KHẢO...31

</div>Trang 9<div class="page_container" data-page="9">

Hình 1 Giao diện Visual Studio Code...3

</div>Trang 10<div class="page_container" data-page="10">

Hình 21 Chức năng đăng nhập...22

Hình 22 Chức năng đăng nhập sau khi năng nhập...23

Hình 23 Chức năng đăng xuất...23

Hình 24 Đăng xuất thành cơng ...24

Hình 25 Chức năng liên hệ...24

Hình 26 Chức năng liên hệ khi ấn gửi...25

Hình 27 Chức năng thêm vào trang u thích...25

Hình 28 Chức năng thêm vào trang u thích khi hồn thành...26

Hình 29 Chức năng thêm vào trang giỏ hàng...26

Hình 30 Danh sách các sản phẩm trong giỏ hàng...27

Hình 31 Chức năng thanh tốn...27

Hình 32 Form nhập thơng tin người nhận hàng...28

Hình 33 Form đăng nhập tài khoản paypal...28

Hình 34 Form xác nhận thanh tốn đơn hàng...29

Hình 35 Thơng báo thanh tốn thành công...29

</div>Trang 11<div class="page_container" data-page="11">

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI1.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 ngồ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

</div>Trang 12<div class="page_container" data-page="12">

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.

1.2. Tìm hiểu “Xây dựng website bán dụng cụ làm bếp”.a. 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.

b. 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.

- 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.

</div>Trang 13<div class="page_container" data-page="13">

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

- 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ự hồ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.1.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.

</div>Trang 14<div class="page_container" data-page="14">

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 qn 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.2 Giới thiệu về ngôn ngữ lập trình JavaScript và các cơng nghệ sử dụng2.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 “.htm” hoặc “.html”. 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.

</div>Trang 15<div class="page_container" data-page="15">

2.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à “.css”. 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.

- Ngồ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.

2.2.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ó tn 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

</div>Trang 16<div class="page_container" data-page="16">

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. “ ” là phần mở rộng thường được.js

dùng cho tập tin mã nguồn Javascript.

2.2.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 hồ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.instagram.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:

</div>Trang 17<div class="page_container" data-page="17">

2.2.4.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 tố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.

2.2.4.2 Components

- React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần (component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn. Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo.

2.2.4.3 Props và State:

- Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.

- State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI.

</div>Trang 18<div class="page_container" data-page="18">

BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A0102092.3 Giới thiệu về Firebase

2.3.1 Giới thiệu về Firebase

- Tiền thân của nền tảng Firebase chính là Envolve. Envolve đến với người dùng dưới mơ hình startup, họ cung cấp cho người dùng những API để dễ dàng tích hợp tính năng chat vào trang web. Thế nhưng, người dùng lại sử dụng Envolve để truyền dữ liệu ứng dụng chứ không đơn thuần là nhắn tin trị chuyện. Chính điều này đã khiến các nhà phát triển Envolve quyết định tách riêng chat system và the real-time architecture.

Hình 5 Giới thiệu về firebase

- Và năm 2012, Firebase ra đời dưới dạng Backend-as-a-Service với chức năng thời gian thực. Sau khi được Google mua lại vào năm 2014 thì Firebase nhanh chóng phát triển thành nền tảng phát triển ứng dụng đa năng của di động và website như ngày nay. Nền tảng này là sự kết hợp giữa cloud với hệ thống máy chủ của Google để tập trung chính cho 2 đối tượng là:

 Develop & test your app: phát triển và thử nghiệm các ứng dụng được thiết kế.

</div>Trang 19<div class="page_container" data-page="19">

 Grow & engage your audience: phân tích dữ liệu và tối ưu hóa trải nghiệm với

người dùng.

- Firebase cung cấp cho chúng ta những API đơn giản, mạnh mẽ và đa nền tảng trong

việc quản lý, sử dụng database, bởi vậy giờ đây chúng ta chỉ cần gọi API và phần server đã có Firebase lo!

2.3.2 Những service nổi bật của Firebase

- Firebase là một nền tảng đa năng, nó cung cấp rất nhiều dịch vụ khác nhau cho người

dùng. Thế nhưng khi nhắc đến nền tảng này thì người ta vẫn nghĩ ngay đến một số dịch vụ nổi bật như:

2.3.2.1. Real-time Database

- Dịch vụ Realtime database cho phép người dùng lưu trữ và đồng bộ dữ liệu theo thời gian thực. Dịch vụ này được lưu trữ trực tiếp trên iCloud. Trong trường hợp thiết bị của bạn ngoại tuyến thì chúng sẽ sử dụng tới bộ nhớ của thiết bị và tự động đồng bộ lên server khi thiết bị online. Do đó bạn hồn tồn có thể n tâm về độ

tương tác.

Hình 6 Real-time database

</div>Trang 20<div class="page_container" data-page="20">

BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNHHỒ ĐỨC PHÚ – 181A0102092.3.2.2. Authentication

- Dịch vụ Authentication cung cấp cho ứng dụng của bạn một số phương pháp xác thực thông qua email, mật khẩu, số điện thoải, tài khoản Google, tài khoản Facebook… Với tính năng này, người dùng sẽ dễ dàng xây dựng login mà không cần sử dụng dữ liệu đăng ký riêng.

Hình 7 Authentication

2.3.2.3. Firebase cloud messaging

- Firebase được xây dựng với tính năng ngun thủy là trị chuyện. Bởi thế Firebase cloud messaging (FCM) là tính năng cơ bản nhất của nền tảng này, nó cho phép người dùng xây dựng ứng dụng chat và đẩy thông báo tới nhiều thiết bị khác nhau như web, Android, iOS… Điểm nổi bật của dịch vụ này là hầu như khơng có bất kỳ mã hóa nào liên quan! FCM được tích hợp hồn tồn với Firebase Analytics, mang đến cho bạn sự tương tác chi tiết (detailed engagement) và theo dõi chuyển đổi (conversion tracking) trong quá trình sử dụng.

- Hơn thế, dịch vụ FCM còn giúp bạn tùy chọn thời điểm gửi tin là ngay lập tức hoặc vào thời điểm tương lai theo múi giờ địa phương của người dùng.

</div>