báo cáo thiết kế website bán hàng thiết bị iot

IoT định hướng kết nối những thiết bị, công cụ, đồ vậttrong đời sống hàng ngày với internet để con người có thể giao tiếp, truy cập,điều khiển, thu thập được thông tin và quản trị các th

Trang 1

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘIVIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

──────── * ───────

BÁO CÁO

MÔN: PROJECT 3

THIẾT KẾ WEBSITE BÁN HÀNG THIẾT BỊ IOT

Sinh viên thực hiện: Hoàng Văn Dũng – 20210052P Lớp: VHVL – K66

Giáo viên hướng dẫn: Th.S Vũ Đức Vượng

Hà Nội, tháng 12 năm 2022

Trang 2

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

LỜI NÓI ĐẦU 4

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

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

2.2.1 Biểu đồ UseCase tổng quan 9

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

2.2.3 Quy trình nghiệp vụ 17

2.2.4 Đặc tả chức năng 19

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

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

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

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

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

CHƯƠNG 3: CÔNG NGHỆ VÀ THUẬT TOÁN SỬ DỤNG 28

3.1 Ngôn ngữ HTML và CSS 28

3.2 Ngôn ngữ kịch bản JavaScript 29

3.2.1 JavaScript là gì? 29

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

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

3.2.4 JavaScript Framework NuxtJs 33

3.3 Ngôn ngữ lập trình PHP 34

3.3.1 Giới thiệu 34

3.3.2 Giới thiệu Framework Laravel 34

3.4 Hệ quản trị cơ sở dữ liệu 36

3.4.1 Các khái niệm 362

Trang 3

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

3.4.2 Chức năng của hệ cơ sở dữ liệu 36

4.2 Thiết kế chi tiết 41

4.2.1 Thiết kế giao diện 41

Trang 4

PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngLỜI NÓI ĐẦU

IoT là viết tắt của từ “Internet of Things” – “Internet vạn vật” hay “Mạnglưới vạn vật kết nối” IoT định hướng kết nối những thiết bị, công cụ, đồ vậttrong đời sống hàng ngày với internet để con người có thể giao tiếp, truy cập,điều khiển, thu thập được thông tin và quản trị các thiết bị đó nhằm làm tănghiệu suất, hiệu quả sử dụng.

Ứng dụng của IoT trong đời sống hiện nay rất phổ biến và đa dạng, có thểkể đến như: Nông nghiệp thông minh, Đô thị thông minh, Nhà máy thông minh,Nhà thông minh… Ứng dụng IoT được thể hiện rõ nét nhất trong các mô hình“nhà thông minh” Ví dụ khi bạn ra ngoài, bạn chỉ cần bật tính năng “Tôi đã rakhỏi nhà” trên ứng dụng Tự động hệ thống đèn sẽ tắt, máy lạnh sẽ tắt, rèm kéolại, cửa sổ tự động đóng lại Và khi bạn quay về nhà, bạn có thể bật tính năng“Tôi đã về nhà” thì hệ thống sẽ tự khởi động lại hệ thống đèn, máy lạnh mở, rèmkéo ra và cửa sổ mở…

Vậy nên các sản phẩm IoT sẽ không thể thiếu trong tương lai của nhânloại, sẽ rất thành công khi chúng ta áp dụng công nghệ để bán các thiết bị côngnghệ tới tay người tiêu dùng Nắm bắt được thị trường này tôi đã quyết địnhthực hiện dự án “Thiết kế website bán hàng thiết bị IOT” để hy vọng sẽ quảngbá những sản phẩm IoT đến với người tiêu dùng, mang lại cho người sử dụng cómột cuộc sống hiện đại và vô cùng tiện ích Đấy chắc chắn là sứ mệnh của ngườilàm công nghệ.

4

Trang 5

PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngCHI 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ự ánCông việc 3 Đưa ra các kịch bản, vẽ các diagram của từng moduleCô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 & BackEndCô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:

Máy chủ ảo: XAMPP

Nền tảng công nghệ lập trình FrontEnd: VUEJSNền tảng công nghệ lập trình BackEnd: PHP, Laravel Quản trị cơ sở dữ liệu: MySQL

Liên kết BackEnd & FrontEnd: RESTful APIIDE phát triển: Visual Studio Code, PHPStorm

5

Trang 6

PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngCHƯƠ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, sự có mặt của IoT là thực sự cần thiết Để quảng bá cũngnhư đáp ứng được nhu cầu của thị trường sắp tới, là người làm công nghệ phảicó sứ mệnh mang đến cho người tiêu dùng những sản phẩm hiện tại và an toànnhấ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ẽ đemlạ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

Sau nhiều năm kỳ vọng, kỷ nguyên của Internet vạn vật (IoT) đã đến Cácsản phẩm và dịch vụ thực sự của IoT được sử dụng không chỉ cho lĩnh vực côngnghiệp mà còn cả người dùng.

Các sản phẩm như tủ lạnh thông minh, đồng hồ thông minh, máy theo dõisức khỏe, thậm chí là tấm thảm yoga thông minh sẽ trở nên phổ biến chỉ sau vàinăm Các ứng dụng được kích hoạt bở công nghệ IoT là gần như vô hạn.

Số lượng thiết bị IoT trên toàn thế giới đang tăng vọt Ước tính sẽ có hơn75 tỷ thiết bị IoT được lắp đặt vào năm 2025, gấp 5 lần so với 2015.

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

6

Trang 7

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ị IoT thông minh và tiện dụng là một nhu cầu tất yếu.

Website bán thiết bị IoT được xây dựng dựa trên những nhu cầu thực tế củakhá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ốnghướng tới các đối tượng là khách hàng và những nhân viên quản lý trang web.Hệ thống có các chức năng chính bao gồm: authentication, quản lý người dùng,quản lý phân quyền người dùng và quản lý kho Các chức năng này giúp ngườiquả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ảnvà 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ị IOT

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

7

Trang 8

PROJECT 3 Giáo viên hướng dẫn: Vũ Đức VượngCHƯƠ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ệntử 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ểukhách hàng tiềm năng Khách hàng ở độ tuổi nào, sở thích, thói quen mua sắm từ đó bạn sẽ thiết kế giao diện để thu hút khách hàng tiềm năng của bạn Nếukhách hàng tiềm năng không thấy giao diện của website bạn có sự thu hút, thìcho dù có nhiều người khen đẹp thì cũng không để tạo ra doanh thu tốt.

8

Trang 9

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ệntử 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ăngvà 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.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ý nhân viên: Cho phép quản có thể xem danh sách nhân viên, chỉnhsửa thông tin các nhân, thêm/sửa/xóa tài khoản nhân viên.

9

Trang 10

PROJECT 3 Giáo viên hướng dẫn: Vũ Đức Vượng- Quản lý khách hàng: Cho phép nhân viên xem danh sách khách hàng,thêm/sửa/xóa tài khoản khách hàng.

- Quản lý kho hàng: Cho phép nhân 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 Quản lý Quản lý tài khoản nhân viên, xem/thêm/thayđổi thông tin nhân viên, phân quyền.2 Nhân viên 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.3 Khách hàng Đă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.

10

Trang 11

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

Hình 2.2.1: UseCase tổng quan

Trang 12

UseCase hệ thống

1 Authentication Cho phép người dùng đăng ký, đăng nhậpvào hệ thống website, thay đổi password.2 Quản lý nhân viên Quản lý có thể xem danh sách nhân viên,

Quản lý thêm/sửa/xóa tài khoản nhân viên.Có thể đặt quyền cho nhân viên đó là quyềnquản lý hoặc quyền nhân viên.

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

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

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

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

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

12

Trang 35

3.3.1.Giới thiệu

Định nghĩa PHP:

PHP (viết tắt là Hypertext Preprocessor) là một ngôn ngữ lập trình kịch bản hay một

loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, dùngcho các mục đích tổng quát Rất thích hợp với các web và có thể nhúng vào trangHTML.

Ưu điểm của PHP:

PHP không phải là ngôn ngữ script phía server duy nhất có sẵn Có một số lý do kháckhiến PHP là ngôn ngữ script tuyệt vời để sử dụng:

- Dễ học: Có thể học dễ dàng vì nó có tài liệu tuyệt vời về các chức năng về ví dụ.- Được sử dụng rộng rãi, phổ biến: Nó được sử dụng để tạo ra các loại nền tảng nhưthương mại điện tử, blogs, phương tiện truyền thông xã hội

- Chi phí thấp: Nó là nguồn mở để có thể sử dụng miễn phí.

- Cộng đồng lớn: Nếu gặp phải những khó khăn nào đó, sẽ không phải là điều lo lắngvì có rất nhiều blog PHP trên Internet.

- Tích hợp với cơ sở dữ liệu: Ví dụ như MySQL, Oracle

3.3.2.Giới thiệu Framework Laravel

Framework Laravel chính là một thư viện với các tài nguyên có sẵn cho từng lĩnh vựcđể lập trình viên sử dụng thay vì phải tự thiết kế Với Framework, lập trình viên chỉcần tìm hiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau và hoànchỉnh sản phẩm của mình.

35

Trang 36

Hình 3.3.2: Mô hình MVC trong Laravel

Một số tính năng nổi bật của Laravel làm cho Framework này khác biệt so vớicác Web Framework khác như:

Tính mô đun:

Tính mô đun là khả năng một thành phần ứng dụng web có thể tách rời và kếthợp lại, tất cả đều hoạt động cùng nhau để làm cho ứng dụng web hoạt động.Sử dụng cấu trúc mô đun có thể thiết kế và phát triển ứng dụng doanh nghiệp quy môlớn dễ dàng Laravel cung cấp các hướng dẫn rất đơn giản để tạo mô đun trongLaravel.

Tính năng xác thực:

Xác thực là một phần không thể thiếu của bất kỳ website hiện đại Các xác thựcviết trong những Framework có thể mất nhiều thời gian Nhưng với Laravel thì chỉcần chạy một lệnh dơn giản là đã có thể tạo một hệ thống xác thực đầy đủ.

Tính năng định tuyến:

Định tuyến(routing) trong Laravel rất dễ hiểu, có thể sử dụng để tạo ứng dụngtĩnh Có thể nhóm các routes, áp dụng các bộ lọc cho chúng và liên kết mô hình dữliệu với chúng Các routes có thể sử dụng để tọa các URL thêm thiện với công cụ tìmkiếm.

Bộ nhớ đệm:

36

Trang 37

Bộ nhớ đệm(caching) là một kỹ thuật để lưu trữ dữ liệu trong một vị trí lưu trữtạm thời có thể lấy ra nhanh chóng khi cần, chủ yếu sử dụng để làm tăng hiệu suất củaweb.

Laravel gần như lưu tất cả các dữ liệu từ View đến routes, giúp Laravel giảmthời gian xử lý và tăng hiệu suất rất nhiều.

Hệ quản trị cơ sở dữ liệu (Database Management System) là một phần mềm để lưu trữvà truy xuất dữ liệu của người dùng trong khi xem xét các biện pháp bảo mật thíchhợp Nó bao gồm một nhóm các chương trình thao tác cơ sở dữ liệu Hệ quản trị cơ sởdữ liệu chấp nhận yêu cầu dữ liệu từ một ứng dụng và hướng dẫn hệ điều hành cungcấp dữ liệu cụ thể Trong các hệ thống lớn, nó giúp người dùng và phần mềm bên thứba lưu trữ và truy xuất dữ liệu.

3.4.2 Chức năng của hệ cơ sở dữ liệu

Cung cấp môi trường tạo lập cơ sở dữ liệu: Hệ quản trị CSDL đóng vai trò

cung cấp cho người dùng một ngôn ngữ định nghĩa dữ liệu để mô tả, khai báo kiểu dữliệu, các cấu trúc dữ liệu.

Cung cấp cách cập nhật và khai thác dữ liệu: Hệ quản trị CSDL cung cấp cho

người dùng ngôn ngữ thao tác dữ liệu để diễn tả các yêu cầu, các thao tác cập nhật và37