báo cáo môn project 2 ngành công nghệ thông tin thiết kế website bán đồ điện tử

PROJECT 2 Giáo viên hướng dẫn: Lê Thị HoaUseCase hệ thống1 Authentication Cho phép người dùng đăng ký, đăng nhập vàohệ thống website, thay đổi password.2 Quản lí khách hàng Quản trị viên

Trang 1

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

Trang 2

PROJECT 3 Giáo viên hướng dẫn: Vũ Đức Vượng

Trang 3

LỜI NÓI ĐẦU

Việc mua sắm trực tuyến đã trở thành một lựa chọn an toàn và phổ biến trong những năm qua, vì đa số người tiêu dùng đã tìm thấy sự thuận tiện và dễ dàng đểchọn lựa cửa hàng, sự thoải mái trong việc mua bán và thanh toán Một trong những yếu tố hấp dẫn nhất về mua sắm trực tuyến, là trong các kỳ nghỉ lễ, nó làm giảm bớt việc phải xếp hàng chờ đợi để tìm kiếm những mặt yêu thích trongcác cửa hàng

Những ưu thế của việc mua sắm trực tuyến đã làm thay thế được những bất tiệntrong cách mua bán truyền thống Người tiêu dùng, khi mua sắm trực tuyến, họ

có thể mua sản phẩm được lựa chọn nhanh chóng bằng cách thực hiện một số cúnhấp chuột, họ có thể chọn và mua những mặt hàng yêu thích từ thị trường vô tận và không giới hạn do internet cung cấp, họ không cần phải đi đến các cửa hàng, và không bị giới hạn bởi giờ mở cửa, họ có thể đặt hàng mọi lúc, mọi nơi

và hơn nữa việc giao hàng có thể được yêu cầu không chỉ đến nơi cư trú mà còn

ở nơi làm việc, do đó người tiêu dùng có thể mua sản phẩm với điều kiện thuận lợi nhất (giá cả, chất lượng, giảm giá khác) phù hợp với nhu cầu cá nhân Theo một cuộc khảo sát toàn cầu gần đây do Công ty Nielsen thực hiện, hơn 85% dân số trên thế giới đã sử dụng Internet để mua hàng, tăng 40% so với hai năm trước và hơn một nửa số người dùng Internet là những người mua sắm trực tuyến thường xuyên

Ưu thế của việc mua sắm trực tuyến ngày càng trở nên phổ biến Em mong muốn xây dựng một sàn giao dịch thương mại điện tử nhằm góp phần mang lại

sự tiện dụng cho người dùng

Hoàn thành xong đề tài, em vô cùng biết ơn cô Vũ Thị Hoa, người trực tiếp hướng dẫn nhiệt tình cho chúng em trong suốt quá trình thực hiện Project 2

Trang 4

CHI TIẾT CÔNG VIỆC THỰC HIỆN

Nội dung công việc:

Công việc 1 Nghiên cứu đề tài, thị trường

Công việc 2 Phân tích, thiết kế các kịch bản, chức năng của dự án

Công việc 3 Đưa ra các kịch bản, vẽ các diagram của từng module

Công việc 4 Thiết kế giao diện, chức năng (FrontEnd)

Công việc 5 Thiết kế cơ sở dữ liệu, nền tảng (Backend)

Công việc 6 Thiết kế API kết nối FrontEnd & BackEnd

Công việc 7 Triển khai website

Công việc 8 Kiểm tra đánh giá phần mềm

Công cụ phát triển:

Nền tảng công nghệ lập trình FrontEnd: JavaScript, NextJS

Nền tảng công nghệ lập trình BackEnd: Java, SpringBoot

Quản trị cơ sở dữ liệu: MySQL, MongoDB

Liên kết BackEnd & FrontEnd: RESTful API

IDE phát triển: Visual Studio Code, Intellij

Trang 5

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI

1.1 Đặt vấn đề

Bạn đã có ý tưởng kinh doanh online? Sau khi bạn chuẩn bị vốn, kế hoạchkinh doanh, và tìm nguồn cung ứng hàng hóa tốt, tiếp theo bạn sẽ lựa chọn cáckênh bán hàng online phù hợp: mạng xã hội, website, sàn thương mại điện tử Nếu sản phẩm của bạn nhiều, lên đến hàng trăm hàng ngàn mẫu mã thì lựa chọnthiết kế website thương mại điện tử là lựa chọn phù hợp Bên cạnh đó, ngay cảnhững công ty lớn và nổi tiếng tại Việt Nam cũng đang sử dụng hình thứcwebsite này và gặt hái được nhiều thành công

Xuất phát từ tình hình thực tế về nhu cầu cuộc sống của con người ở hiệntại và trong tương lai, rất nhiều ngành nghề cần có máy tính (Ví dụ: Editor,Designer,…) Để đáp ứng được nhu cầu của thị trường, là người làm công nghệphải có sứ mệnh mang đến cho người tiêu dùng những sản phẩm hiện tại và antoàn nhất, với một mức giá phù hợp nhất Nếu giải quyết được vấn đề này thì sẽđem lại lợi ích lớn cho chính mình và xã hội, người tiêu dùng sẽ tiếp cận và trảinghiệm được những sản phẩm chất lượng, giúp đời sống tăng cao đáng kể, mặtkhác nó giúp ta mang lại nguồn thu nhập lớn cho bản thân

Ngoài ra, chúng ta có thể sử dụng trang web áp dụng với các mặt hàngtrong các lĩnh vực khác nhau

1.2 Mục tiêu và phạm vi đề tài

Từ lần đầu tiên chiếc máy tính điện tử được giới thiệu vào ngày 15 tháng 2năm 1946 với cái tên là ENIAC (Electronic Numerical Integrator andComputer).Hiện nay chiếc máy tính đã trở thành trợ thủ đắc lực cho mọi ngànhnghề từ công việc hằng ngày cho đến nghiên cứu khoa học

Hiện tại cùng với sự phát triển của khoa học và công nghệ Càng nhiềungành nghề cần sự trợ giúp của những chiếc máy tính cho công việc hoặc giảitrí

Trang 6

Từ cơ sở trên, phát triển website bán thiết bị máy tính là rất cần thiết, tuynhiên có một số hạn chế như: chưa có chi phí cho marketing, tiếp cận với nguồnhàng khá khó khăn, phân phối kho, quản lý người dùng còn gặp khó khăn…

1.3 Định hướng giải pháp

Trong vô vàn trang web bán hàng hiện nay, việc quản lý người dùng và kholuôn là vấn đề được quan tâm và được đặt ưu tiên hàng đầu, rất nhiều websiteđược phát triển nhưng chưa đáp ứng đủ và đúng như mong được của kháchhàng, số lượng khách hàng ghé thăm website giảm dẫn đến thu nhập của ngườikinh doanh bị ảnh hưởng,khó có thể phát triển hơn nữa, vì vậy tạo ra mộtwebsite bán thiết bị máy tính thông minh và tiện dụng là một nhu cầu tất yếu.Website bán thiết bị máy tính được xây dựng dựa trên những nhu cầu thực

tế của khách hàng và nhà quản lý nhằm giải quyết những khó khăn gặp phải Hệthống hướng tới các đối tượng là khách hàng và những nhân viên quản lý trangweb Hệ thống có các chức năng chính bao gồm: authentication, quản lý ngườidùng, và quản lý kho Các chức năng này giúp người quản lý dễ dàng quản lýthông tin khách hàng và quản lý kho một cách đơn giản và tối ưu, khách hàng cóthể mua hàng và tự quản lý thông tin cá nhân

1.4 Bố cục báo cáo

Phần còn lại của báo cáo này được tổ chức như sau:

Chương 2: Thực hiện phân tích thiết kế bài toàn bằng cách khảo sát hiệntrạng và yêu cầu mong muốn của khách hàng cũng như các hệ thống sẵn có vàcác website tương tự đang hoạt động Từ đó thực hiện phân tích bằng các biểu

đồ UserCase

Chương 3: Thực hiện nghiên cứu về các công nghệ, nền tảng, thuật toán ápdụng phù hợp với việc triển khai thiết kế website bán hàng thiết bị máy tính Chương 4: Thực hiện phát triển và triển khai ứng dụng từ các yêu cầunghiệp vụ đã phân tích và công nghệ nền tảng lựa chọn để phát triển Phần cuối là kết luận và định hướng phát triển các phiên bản nâng cấp tiếptheo của hệ thống và kết thúc bài báo cáo

Trang 7

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ BÀI TOÁN

2.1 Khảo sát hiện trạng

Ngày càng có nhiều doanh nghiệp lựa chọn website dạng thương mại điện

tử thay cho website truyền thống Những doanh nghiệp lớn đã ứng dụng dạngwebsite này và gặt hái được con số ấn tượng về lượng truy cập và doanh thu:Thế Giới Di Động, Điện Máy Xanh, Bách Hóa Xanh Ngay cả các cửa hàngkinh doanh mỹ phẩm, nhà thuốc, thời trang cũng xây dựng website bánhàng có tích hợp tính năng và thanh toán

Mục đích của việc thiết kế website dạng thương mại điện tử nhằm tránh lệthuộc vào các sàn thương mại điện tử, cũng như tăng độ tiếp cận của doanhnghiệp đến với khách hàng Theo số liệu từ Statista, độ tuổi mua sắm trên sànthương mại điện tử nhiều nhất là từ 25-34 Vì vậy, nếu đối tượng khách hàngtiềm năng của doanh nghiệp nằm trong phân khúc 25-34 thì việc thiết kế websitethương mại điện tử là điều cực kỳ cần thiết

Vậy hiện trạng nhu cầu của khách hàng hiện nay đã thay đổi như thế nào?

Và các hệ thống hiện tại đã và đang đáp ứng như thế nào đối với nhu cầu củangười dùng? Chúng ta hãy cùng đi tìm hiểu

2.1.1 Về khách hàng

a Website cung cấp đầy đủ sản phẩm, dịch vụ và tiện ích

Khi khách hàng truy cập vào website là bạn đã nắm trong tay cơ hội biến

“người dùng” thành “khách mua hàng” Do đó sản phẩm và dịch vụ phải đượcsắp xếp theo từng danh mục rõ ràng Ngoài ra, khi khách hàng click vào để tìmhiểu bất kỳ sản phẩm nào thì sản phẩm đó phải có đầy đủ thông tin, thương hiệu,

mô tả, xuất xứ, giá cả để khách hàng yên tâm lựa chọn mua hàng

b Giao diện thu hút khách hàng tiềm năng

Giao diện thu hút là một trong những yếu tố để người dùng dành nhiều thờigian để ở lại website của bạn Việc thiết kế giao diện phải dựa vào việc hiểu

Trang 8

c Giao diện tương thích với thiết bị di động

Thiết bị di động ngày càng chiếm ưu thế hơn so với máy tính và laptop Do

đó, khi thiết kế giao diện và hình ảnh cho website, bạn nên lưu ý kiểm tra lạimột lần nữa xem đã hiển thị đúng kích thước trên thiết bị di động hay chưa Nếukhi hiển thị trên điện thoại hình ảnh bị sai tỷ lệ hoặc bố cục chữ bị rối mắt thìbạn nên điều chỉnh để tránh việc khách hàng cảm thấy khó chịu với giao diện vàthoát ra ngoài

2.1.2 Về các hệ thống đã có

Ngày càng có nhiều doanh nghiệp lựa chọn website dạng thương mại điện

tử thay cho website truyền thống Những doanh nghiệp lớn đã ứng dụng dạngwebsite này và gặt hái được con số ấn tượng về lượng truy cập và doanh thu:Thế Giới Di Động, Điện Máy Xanh, Bách Hóa Xanh Ngay cả các cửa hàngkinh doanh mỹ phẩm, nhà thuốc, thời trang cũng xây dựng website bánhàng có tích hợp các tính năng và thanh toán, theo dõi đơn hàng

2.1.3 Về ứng dụng tương tự

Về các ứng dụng tương tự trên thị trường, cũng đã phát triển các tính năng

và nhu cầu của khách hàng như:

- Cung cấp đầy đủ sản phẩm, dịch vụ và tiện ích

- Thiết kế giao diện dễ dùng và hiện đại

- Tích hợp đa dạng các phương thức thanh toán

- Tương thích với các thiết bị di động

- Cung cấp đầy đủ thông tin của doanh nghiệp

2.2 Tổng quan chức năng

2.2.1 Biểu đồ UseCase tổng quan

- Authentication: Cho phép khách hàng và quản trị viên đăng nhập bằng tàikhoản đăng ký, đăng nhập bằng Facebook, thay đổi password, đăng xuất ra khỏiwebsite

- Quản lý user: Cho phép quản trị viên xem danh sách khách hàng,thêm/sửa/xóa tài khoản khách hàng

Trang 9

- Quản lý kho hàng: Cho quản trị viên theo dõi và quản lý kho hàng, có thểthêm/sửa/xóa các mặt hàng trong kho

- Thêm vào giỏ hàng: Cho phép khách hàng thêm sản phẩm muốn mua vàogiỏ hàng

- Tạo mới một đơn hàng: Cho phép khách hàng đặt một đơn hàng và hiểnthị đơn hàng mới vào trang admin để quản lý

Xác nhận các tác nhân tham gia hệ thống:

1 Admin Quản lý tài khoản khách hàng, quản lý kho,

xem/thay đổi thông tin khách hàng,xem/thay đổi thông tin mặt hàng

2 Customer Đăng ký tài khoản, đăng nhập, xem/thay đổi

thông tin của mình, xem sản phẩm, thêmvào giỏ hàng

Trang 10

Sơ đồ UseCase tổng quát của hệ thống

Hình 2.2.1: UseCase tổng quan

Trang 11

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa UseCase hệ thống

1 Authentication Cho phép người dùng đăng ký, đăng nhập vào

hệ thống website, thay đổi password

2 Quản lí khách hàng Quản trị viên có thể xem danh sách khách

hàng, Nhân viên thêm/sửa/xóa tài khoản kháchhàng

3 Quản lý kho hàng Quản trị viên có thể xem danh sách mặt hàng,

Có thể thêm/sửa/xóa mặt hàng trong kho hàng

4 Thêm vào giỏ hàng Khách hàng xem danh sách sản phẩm, xem chi

tiết sản phẩm, và chọn thêm vào giỏ hàng

5 Khách hàng đặt hàng Khách hàng vào giỏ hàng, xem giỏ hàng và đặt

đơn hàng đang có trong giỏ

6 Quản lí đơn hàng Quản trị viên vào trang danh sách các đơn

hàng, xem chi tiết/sửa/xóa đơn hàng

2.2.2 Biểu đồ use case phân rã từng module

2.2.2.1 Phân rã use case “Đăng nhập”

Trang 12

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa 2.2.2.2 Phân rã use case “Đăng ký”

Hình 2.2.2.2: Use case Register

2.2.2.3 Phân rã use case “Mua hàng”

Hình 2.2.2.3: Use case mua hàng

Trang 13

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa 2.2.2.4 Phân rã use case “Quản lý khách hàng”

Hình 2.2.2.4: Use case Quản lí Khách hàng

2.2.2.5 Phân rã use case “Quản lý sản phẩm”

Trang 14

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa 2.2.2.6 Phân rã use case “Quản lý danh mục sản phẩm”

Hình 2.2.2.6: Use Case quản lý danh mục sản phẩm

2.2.2.7 Phân rã use case “Quản lí Đơn hàng”

Hình 2.2.2.7: Use case Quản lí đơn hàng

Trang 15

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa 2.2.3 Biểu đồ hoạt đông (Activity diagram)

2.2.3.1 Biểu đồ hoạt động thêm sản phẩm

Hình 2.2.3.1: Biểu đồ hoạt động thêm sản phẩm

Trang 16

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa

2.2.3.2 Biểu đồ hoạt động sửa sản phẩm

Hình 2.2.3.2: Biểu đồ hoạt động sửa sản phẩm

Trang 17

2.2.3.3 Biểu đồ hoạt động mua hàng

Hình 2.2.3.4: Biểu đồ hoạt động mua hàng

Trang 18

2.2.3.4 Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng

Hình 2.2.3.4: Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng

Trang 19

2.2.3.5 Biểu đồ hoạt động đăng ký

Hình 2.2.3.4: Biểu đồ hoạt động đăng ký

Trang 20

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa 2.2.4 Đặc tả chức năng

2.2.4.1 Đặc tả use case Authentication

Mô tả Use case Đăng ký:

UseCase Register

Actor Guest

Tiền điều kiện Không có

Chuỗi sự kiện chính:

1 Khách hàng chưa có tài khoản muốn vào trang website để mua hàng

2 Khách hàng vào trang đăng kí tài khoản

3 Khách hàng nhập đầy đủ email, password, confirm password

4 Khách hàng bấm vào nút Đăng kí để hoàn thành đăng kí tàì khoản.Ngoại lệ

3.1 Nhập thiếu trường => hệ thống thông báo phải nhậpđầy đủ 3 trường

3.2 Trường confirm password và password khác nhau

=> hệ thống thông báo 2 trường phải giống nhau

2.2.4.2 Đặc tả use case Quản lí khách hàng

Mô tả use case

UseCase Manage User

Actor Quản trị viên

Tiền điều kiện Quản trị viên đăng nhập thành công vào hệ thống

1 Quản trị viên truy cập vào trang quản lí Khách hàng

2 Hệ thống điều hướng đến trang quản lí Khách hàng và hiển thị danh sách Khách hàng

3 Quản trị viên chọn xem chi tiết Khách hàng

4 Hệ thống hiển thị thông tin chi tiết Khách hàng

5 Quản trị viên chọn vào nút “Tạo mới Khách hàng”

6 Hệ thống hiện giao diện form tạo mới Khách hàng

7 Quản trị viên nhập đầy đủ các trường trong form tạo mới

8 Quản trị viên bấm vào nút Tạo mới

9 => Hệ thống thông báo tạo mới Khách hàng thành công và quay lại màn hình danh sách Khách hàng

Trang 21

10 Quản trị viên bấm vào button sửa Khách hàng

11.Hệ thống sẽ hiện thông tin của Khách hàng đã được chọn và hiển thị trong form

12 Quản trị viên sửa những thông tin Khách hàng muốn update

13 Quản trị viên bấm vào button “Submit”

14 => Hệ thống hiển thị thông báo update thành công

15 Quản trị viên bấm vào button xóa Khách hàng

16 Hệ thống hiển thị popup xác nhận xóa Khách hàng

17 Quản trị viên bấm vào button “No” để hủy thao tác

18 Quản trị viên bấm vào button “Delete” để xóa Khách hàng vừa chọn

19 => Hệ thống thông báo xóa thành công, ẩn popup và hiển thị danh sách Khách hàng sau khi đã xóa

9.2 Hệ thống tạo mới Khách hàng bị lỗi, hiển thị lỗi ra màn hình

12.1 Hệ thống không lấy được thông tin Khách hàng, hiển thị lỗi ra màn hình

14.1 Quản trị viên nhập thiếu trường bắt buộc, hiển thị thông báo cần phải nhập đầy dủ các trường bắt buộc.14.2 Hệ thống lỗi update Khách hàng, hiển thị thông báo lỗi ra màn hình

19.1 Hệ thống bị lỗi khi xóa một Khách hàng, hiển thị thông báo lỗi ra màn hình

2.2.4.3 Đặc tả use case Quản lí sản phẩm

Trang 22

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa Chuỗi sự kiện chính:

1 Quản trị viên truy cập vào trang quản lí Sản phẩm

2 Hệ thống điều hướng đến trang quản lí Sản phẩm và hiển thị danh sáchcác sản phẩm

3 Quản trị viên chọn vào xem chi tiết một Sản phẩm

4 Hệ thống điều hướng đến trang Sản phẩm chi tiết

5 Quản trị viên chọn vào nút “Tạo mới Sản phẩm”

6 Hệ thống hiện giao diện form tạo mới Sản phẩm

9 => Hệ thống thông báo tạo mới Sản phẩm thành công và quay lại màn hình danh sách Sản phẩm

10 Quản trị viên bấm vào button sửa Sản phẩm

11.Hệ thống sẽ hiện thông tin của Sản phẩm đã được chọn và hiển thị trong form

12 Quản trị viên sửa những thông tin Sản phẩm muốn update

15 Quản trị viên bấm vào button xóa Sản phẩm

16 Hệ thống hiển thị popup xác nhận xóa Sản phẩm

18 Quản trị viên bấm vào button “Delete” để xóa Sản phẩm vừa chọn

19 => Hệ thống thông báo xóa thành công, ẩn popup và hiển thị danh sách Sản phẩm sau khi đã xóa

Ngoại lệ 2.1 Hệ thống lấy danh sách Sản phẩm bị lỗi, hệ thống

9.2 Hệ thống tạo mới Sản phẩm bị lỗi, hiển thị lỗi ra màn hình

12.1 Hệ thống không lấy được thông tin Sản phẩm, hiểnthị lỗi ra màn hình

14.1 Quản trị viên nhập thiếu trường bắt buộc, hiển thị thông báo cần phải nhập đầy dủ các trường bắt buộc.14.2 Hệ thống lỗi update Sản phẩm, hiển thị thông báo

Trang 23

lỗi ra màn hình

19.1 Hệ thống bị lỗi khi xóa một Sản phẩm, hiển thị thông báo lỗi ra màn hình

2.2.4.4 Đăc tả use case Thêm vào giỏ hàng

UseCase Thêm vào giỏ hàng

Actor Khách hàng

1.Khách hàng vào trang danh sách các Sản phẩm

2.Hệ thống hiển thị danh sách các Sản phẩm

3.Khách hàng chọn vào một Sản phẩm để xem chi tiết

4.Hệ thống hiển thị trang chi tiết thông tin, thông số của Sản phẩm

5.Khách hàng chọn vào button “Thêm vào giỏ hàng”

6.=> Hệ thống thông báo thêm vào giỏ hàng thành công

UseCase Place Order

Actor Khách hàng

Tiền điều kiện Khách hàng đăng nhập vào hệ thống website thành

Trang 24

3.Khách hàng chọn vào số lượng và loại hàng muốn đặt

5.1 Hệ thống dặt hàng lỗi, hiển thị thông báo lỗi

2.2.4.6 Đặc tả use case Quản lí đơn hàng

Mô tả đơn hàng

UseCase Manage Order

Actor Quản trị viên

Tiền điều kiện Quản trị viên đăng nhập thành công vào hệ thống

1 Quản trị viên truy cập vào trang quản lí đơn hàng

2 Hệ thống điều hướng đến trang quản lí đơn hàng và hiển thị danh sách các đơn hàng

3 Quản trị viên chọn vào xem chi tiết một đơn hàng

4 Hệ thống điều hướng đến trang đơn hàng chi tiết

5 Quản trị viên chọn vào nút “Tạo mới đơn hàng”

6 Hệ thống hiện giao diện form tạo mới đơn hàng

9 => Hệ thống thông báo tạo mới đơn hàng thành công và quay lại màn hình danh sách đơn hàng

10 Quản trị viên bấm vào button cập nhật đơn hàng

11.Hệ thống sẽ hiện thông tin của đơn hàng đã được chọn và hiển thị trong form

12 Quản trị viên sửa những thông tin đơn hàng cần update

15 Quản trị viên bấm vào button xóa đơn hàng

16 Hệ thống hiển thị popup xác nhận xóa đơn hàng

18 Quản trị viên bấm vào button “Delete” để xóa đơn hàng vừa chọn

19 => Hệ thống thông báo xóa thành công, ẩn popup và hiển thị danh sách đơn hàng sau khi đã xóa

Trang 25

Ngoại lệ 2.1 Hệ thống lấy danh sách đơn hàng bị lỗi, hệ thống

9.2 Hệ thống tạo mới đơn hàng bị lỗi, hiển thị lỗi ra màn hình

12.1 Hệ thống không lấy được thông tin dơn hàng, hiểnthị lỗi ra màn hình

14.1 Quản trị viên nhập thiếu trường bắt buộc, hiển thị thông báo cần phải nhập đầy dủ các trường bắt buộc.14.2 Hệ thống lỗi update đơn hàng, hiển thị thông báo lỗi ra màn hình

19.1 Hệ thống bị lỗi khi xóa một đơn hàng, hiển thị thông báo lỗi ra màn hình

2.3 Yêu cầu phi chức năng

2.3.1 Yêu cầu về hiệu năng

Trong hệ thống website hàng triệu người dùng và có đến hàng trăm nghìn sản phẩmthì hiệu năng là một trong những vấn đề được người dùng đặc biệt quan tâm Nó liênquan trực tiếp đến trải nghiệm của người dùng

Các nhà phát triển thường sẽ đặt ra những tiêu chí ví dụ như tìm kiếm 1 sản phầmkhông quá 0.5s, tốc độ tải trang không quá 1s, …

2.3.2 Yêu cầu về độ tin cậy

Ngoài ra, về bảo mật cũng là một trong những điều đội ngũ phát triển cũng cần lưu

ý, để bảo mật danh tính cũng như thông tin người dùng cần tuân thủ 1 số yêu cầu về

an toàn bảo mật

Trang 26

Đảm bảo phần mềm có khả năng ghi nhật ký và chẩn đoán tốt

Tạo và duy trì sổ tay hoạt động

Trợ giúp phân loại vé hỗ trợ đã leo thang

Làm việc trên các yêu cầu tính năng, lỗi và các nhiệm vụ phát triển khácĐóng góp vào lộ trình sản phẩm tổng thể

2.3.3 Yêu cầu về độ dễ dùng của website

Website phải có giao diện dễ nhìn, những chức năng chính cần hiển thị to, rõ ràng,

và xuất hiện ở nơi dễ nhìn thấy trong trang web

Nhà phát triển phải thiết kế sản phẩm sao cho một người dùng bất kì có thể sử dụngthành thạo sau 1 đến 2 lần sử dụng

2.3.4 Yêu cầu về tính dễ bảo trì

Dễ bảo trì khi có sự cố xảy ra

Mỗi lần bảo trì không quá 10 phút

Trang 27

PROJECT 2 Giáo viên hướng dẫn: Lê Thị Hoa CHƯƠNG 3: CÔNG NGHỆ VÀ THUẬT TOÁN SỬ DỤNG 3.1 Ngôn ngữ HTML và CSS

3.1.1 HTML

HTML (Hypertext Markup Language) là mã được dùng để xây dựng nên cấutrúc và nội dung của trang web Ví dụ, nội dung có thể được cấu thành bởi một loạtcác đoạn văn, một danh sách liệt kê, hoặc sử dụng những hình ảnh và bảng biểu

3.1.2 CSS

CSS – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữHTML và XHTML CSS là viết tắt của Cascading Style Sheets CSS được hiểu mộtcách đơn giản đó là cách mà chúng ra thêm các kiểu hiển thị (font chữ, kích thước,màu sắc,…) cho một tài liệu Web

3.1.3 Sự khác nhau cơ bản giữa HTML và CSS

HTML là một ngôn ngữ đánh dấu để mô tả các tài liệu web (trang web)” W3Schools

-HTML được tạo ra để giúp các lập trình viên mô tả nội dung trên một trangweb HTML sử dụng các thẻ để gúp bạn thêm đoạn văn, tiêu đề, hình ảnh, dấu đầudòng và các phần cấu trúc khác Giống như việc viết một cái gì đó trên một tài liệuword, HTML giúp bạn viết một cái gì đó trên một trang web

“CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặccác phương tiện khác” - W3Schools

CSS là thứ làm cho một trang web trong tuyệt vời Trình bày và tính dễ sử dụng

là một số phẩm chất mà CSS mang lại cho việc phát triển web Nó liên quan nhiềuhơn đến việc thay đổi phong cách trang web, hơn là nội dung của nó Giống như thayđổi kích thước phông chữ, màu phông chữ và định vị trên một tài liệu word CSS chịu

Trang 28

JavaScript là ngôn ngữ lập trình phổ biến dùng để tạo ra các trang web tương tác.Được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn JavaScriptđóng vai trò như một phần của trang web, thực thi cho phép Client-Side Script từ phíangười dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động

JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng

Là một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xâydựng một website sống động, chuyên nghiệp, bạn có thể nhìn tổng quan như sau:HTML: Cung cấp cấu trúc cơ bản, hỗ trợ trong việc xây dựng layout, thêm nộidung dễ dàng trên website

CSS: Được sử dụng để kiểm soát và hỗ trợ việc định dạng thiết kế, bố cục,style, màu sắc,…

JavaScript: Tạo nên những nội dung “động” trên website

3.2.2 Ứng dụng nổi bật của JavaScript

Với sự cải thiện và nâng cấp không ngừng, giờ đây Javascript có thể làm được cáchoạt động tinh vi, phức tạp hơn, giúp tăng tương tác và trải nghiệm người dùng:Sửa lỗi bố cục, cải thiện phần nhìn:

Javascript có khả năng nhận diện thiết bị người dùng và các chi tiết như ứng dụngtrình duyệt, độ phân giải màn hình Những thông tin này góp phần cải thiện phầnnhìn, thay đổi bố cục website hợp lý hơn, nhằm phục vụ tốt cho việc thiết kế đáp ứng(responsive design)

Tạo hiệu ứng sinh động bắt mắt:

Với một website hiện đại thì hiệu ứng chuyển động là một phần không thể thiếu nhưhiệu ứng mỗi bài viết, nội dung trang, hoạt cảnh chuyển kênh giữa các menu Nhữnghiệu ứng và hoạt cảnh này đem tới những tương tác mới mẻ và thú vị

Cải thiện tính năng tương tác người dùng:

Ngoài thay đổi hiệu ứng, còn rất nhiều tính năng hấp dẫn như:

-Tính năng giỏ hàng: Nhanh chóng biết được mình phải trả bao nhiêu tiền cũng nhưtoàn bộ thông tin đơn hàng trước khi thanh toán

Trang 29

-Tính năng kiểm tra người dùng: Khi nhập tên người dùng mong muốn, Javascript cóthể lập tức dò cơ sở dữ liệu xem lịch sử đặt trước của người dùng Tính năng này hoàntoàn tự động, không cần tải lại trang

-Tính năng cập nhật liên tục: Không tốn thời gian tải lại, trang có thể tự động cậpnhật

-Tính năng gợi ý từ khóa trên khung tìm kiếm: Tự động nhận diện, tính toán xem bạnđang muốn gì và hiện ra list gợi ý liên quan nhất

Tự động hóa:

Mọi ứng dụng đều trở nên hữu ích và thú vị hơn khi chúng được kích hoạt tự động.Javascript cho phép thực hiện chuỗi hành động đã được lên kịch bản sẵn ngay khingười dùng mới truy cập vào trang

3.2.3 Client-side rendering (CSR) vs Server-side rendering (SSR)

Theo truyền thống, khi xây dựng các trang web hay ứng dụng web đều có chiến lượcchung là đó là server sẽ chuẩn bị sẵn các nội dung HTML để gửi xuống trình duyệt.Các nội dung này sẽ được trình duyệt kết hợp với CSS để tạo thành tranh web cho bạn

sử dụng

Sau này, xuất hiện các Javascript framework hiện đại như ReactJS, VueJS… đã làmthay đổi cách tiếp cận khi phát triển ứng dụng web, cách tiếp cận mới mang tới khảnăng giảm gánh nặng cho server, xây dựng mô hình phân tán thay vì tập trung tạiserver

Đến đây, rất nhiều diễn đàn lại nảy sinh tranh luận gay gắt xem cách tiếp CSR haySSR, cái nào tốt hơn, cái nào tối ưu?

Server Side Rendering (SSR) là gì?

Tiêu đề	Thiết kế website bán đồ điện tử
Tác giả	Trần Thanh Sơn
Người hướng dẫn	Th.S Lê Thị Hoa, Vũ Đức Vượng
Trường học	Trường Đại học Bách Khoa Hà Nội, Viện Công nghệ Thông tin và Truyền thông
Chuyên ngành	Công nghệ thông tin
Thể loại	Báo cáo môn Project
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	58
Dung lượng	5,85 MB