- 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
GIỚI THIỆU ĐỀ TÀI
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
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨ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”
- 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.
+ Lập giỏ hang, đặt hàng.
Công cụ sử dụng
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.
SƠ LƯỢC VỀ CÔNG CỤ
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ự 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.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,
Hỗ trợ đa nền tảng: Windows, Linux hoặc Mac Systems Mac OS (Macintosh
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.
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨ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.
Giới thiệu về ngôn ngữ lập trình JavaScript và các công nghệ sử dụng
- 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
- 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
- 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
- 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
- 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
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨ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ở và thẻ đóng .
- 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
- 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.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:
- 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.
- 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.
- 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.
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
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ế.
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ư:
- 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 hoàn toàn có thể yên tâm về độ tương tác.
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
- 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.
- Firebase được xây dựng với tính năng nguyên 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 hoàn toà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
- Một trong những dịch vụ nổi bật của Firebase chính là nó có thể giúp bạn đơn giản hóa quá trình lấy dữ liệu thay vì phải thông qua các câu lệnh SQL phức tạp Tuy nhiên việc thiết lập ngôn ngữ truy vấn tại Firebase khá khó khăn, để làm được nó thì bạn cần xây dựng một database thật chính xác nhé.
- Remote Config giúp bạn làm 2 nhiệm vụ cơ bản là:
Cập nhật các ứng dụng một cách nhanh chóng và dễ dàng mà không cần xuất bản bản dựng mới lên app/play store.
Bạn có thể dễ dàng cài đặt phân đoạn hoạt động trong ứng dụng dựa trên yêu cầu thiết bị hoặc người dùng đang sử dụng nó.
- Để làm được điều đó, Firebase sẽ cài đặt các thông số bên máy chủ giúp người dùng cập nhật các dữ liệu ngay lập tức dù là thay đổi bố cục, bảng màu hay một phần cụ thể nào đó trong ứng dụng Điều này hết sức hữu dụng bởi các ứng dụng thông thường sẽ bị mất hoàn toàn cài đặt nếu người dùng gỡ ứng dụng đi Nếu muốn cài đặt trên nhiều ứng dụng khác nhau thì họ sẽ phải tự cấu hình thiết lập bằng tay trên từng thiết bị sao cho giống nhau Quá trình này khá phức tạp và mất nhiều thời gian.
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
- Firebase Storage là dịch vụ được xây dựng cho mục đích lưu trữ và quản lý các nội dung mà người dùng ứng dụng tạo ra như ảnh, videos hay dữ liệu dạng file.
- Firebase Storage cung cấp các API cho việc uploads và download các file từ app của bạn một cách bảo mật và bạn không cần quan tâm đến chất lượng đường truyền mạng.
- Firebase Storage được xây dựng trên nền tảng Google Cloud Platform nên có nhiều lợi thế.
Robust : Firebase Storage thực hiện việc upload và download không phụ thuộc vào chất lượng đường truyền mạng hơn nữa các quá trình đó có thể bắt đầu lại khi bị tạm dừng giúp tiết kiệm thời gian và băng thông.
Secure: Được tích hợp Firebase Authentication cho việc bảo mật nên dễ dàng quản lý quyền truy cập vào các files.
Scalable : Firebase Storage được xây dựng trên nền tảng Google Cloud Platform nên khả năng mở rộng có thể lên đến hàng Petabyte dữ liệu.
- Firebase Storage là một giải pháp tuyệt vời cho bạn lưu trữ file tạo ra từ app của bạn hoặc là nơi lưu trữ file dữ liệu online cho app Bạn không cần biết một dòng code server hay quan tâm đến hạ tầng phức tạp mà vẫn có thể viết app phục vụ hàng triệu người dùng.
Giới thiệu về Ant Design
2.4.1 Giới thiệu về Ant Design
- Antlà tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng Ant hiện đang có hơn 25k star trên Github.
- Có thể coi Ant Design cho React là tập hợp của hầu hết các thư viện về React Nó đáp ứng được hầu hết các yêu cầu của project của bạn mà ban không phải cài thêm bất cứ thư viện nào nữa Dưới đây là danh sách các component mà nó cung cấp:
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
Navigation: Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps
Data Entry: AutoComplete, Checkbox, Cascader, DatePicker, Form, InputNumber, Input, Mention, Rate, Radio, Switch, Slider, Select, TreeSelect, Transfer, TimePicker, Upload
Data Display: Avatar, Badge, Collapse, Carousel, Card, Calendar, List, Popover, Tree, Tooltip, Timeline, Tag, Tabs, Table
Feedback: Alert, Drawer, Modal, Message, Notification, Progress, Popconfirm, Spin, Skeleton
Other: Anchor, BackTop, Divider, LocaleProvider
2.4.2 Cách cài đặt Ant Design
- Sử dụng npm hoặc yarn:
Hình 10 Cách cài đặt cho Ant Design
2.4.3 Cách sử dụng Ant Design
- Bạn chỉ cần import nó vào và sử dụng như các component trong React Dưới đây là ví dụ sử dụng Layout component của antd:
Hình 11 Cách sử dụng Ant Design
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
THIẾT KẾ WEBSITE BÁN DỤNG CỤ LÀM BẾP
Giao diện
- Gồm 3 giao diện, dẫn đến 3 trang khác nhau:
+ Trang Sale (Sản phẩm giảm giá).
+ Trang Contact (Trang liên hệ)
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209 3.1.4 Trang liên hệ
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209 3.1.6 Trang sale
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
Các chức năng của website
- Người dùng sẽ điền tên đăng nhập và mật khẩu vào để có thể đăng nhập.
- Sau khi đăng nhập thành công biểu tượng user sẽ đổi thành key.
Hình 22 Chức năng đăng nhập sau khi đăng nhập
- Người dùng sẽ bấm vào nút Logout và xác nhận để đăng xuất.
Hình 23 Chức năng đăng xuất
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
- Sau khi đăng nhập thành sẽ hiện thông báo.
Hình 24 Đăng xuất thành công
- Người dùng sẽ điền thông tin gồm: Tên, địa chỉ Email và nội dung để có phản hồi về quá trình hoạt động của website, cũng như đóng góp ý kiến để phát triển website.
Hình 25 Chức năng liên hệ
- Sau khi người dùng ấn gửi website sẽ gửi thông báo gửi thành công.
Hình 26 Chức năng liên hệ khi ấn gửi
3.2.4 Chức năng thêm vào mục ưa thích
- Người dùng sẽ click vào nút like tương ứng với từng loại sản phẩm.
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
- Sau đó sản phẩm được cập nhật lại số lượng và thêm vào trang like.
Hình 28 Chức năng thêm vào trang yêu thích khi hoàn thành
3.2.5 Chức năng thêm vào giỏ hàng
- Người dùng sẽ click vào nút Add to cart tương ứng với từng loại sản phẩm.
Hình 29 Chức năng thêm vào trang giỏ hàng
- Sau đó sản phẩm được cập nhật lại số lượng và thêm vào trang cart.
Hình 30 Danh sách các sản phẩm trong giỏ hàng
- Người dùng click vào nút Pay.
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
- Người dùng sẽ được chuyển đến trang thanh toán gồm 3 bước thực hiện: + Nhập thông tin của người nhận hàng
Hình 32 Form nhập thông tin người nhận hàng
+ Đăng nhập vào tài khoản Paypal
Hình 33 Form đăng nhập tài khoản paypal
Hình 34 Form xác nhận thanh toán đơn hàng
- Sau khi ấn nút Conform (xác nhận) trang web sẽ chuyển về trang sản phẩm và hiển thị thông báo thanh toán thành công.
BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH HỒ ĐỨC PHÚ – 181A010209
Hình 35 Thông báo thanh toán thành công