đồ án môn học ngôn ngữ phát triển ứng dụng mới đề tài xây dựng website bán điện thoại di động

Mục tiêu đề tài:- Mục tiêu về đề tài xây dựng website bán Điện thoại di động nhóm chúngem chú trọng vào giao diện đơn giản, dễ sử dụng, đầy đủ các tính năng cơ bảnnhư là danh mục sản phẩ

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCMKHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC

NGÔN NGỮ PHÁT TRIỂN ỨNG DỤNG MỚI

ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI DI

ĐỘNG

Ngành: CÔNG NGHỆ THÔNG TIN

Giảng viên hướng dẫn: Ths Bùi Mạnh Toàn

Sinh viên thực hiện:

MỤC LỤC

ĐỒ ÁN MÔN HỌC 1

MỤC LỤC 2

DANH MỤC HÌNH ẢNH 3

LỜI CÁM ƠN 1

1.1 Giới thiệu đề tài: 2

CHƯƠNG 1: TỔNG QUAN 2

1.2 Đối tượng nghiên cứu: 2

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ 3

2.1 Công nghệ sử dụng: 3

2.2 Phân tích mô tả yêu cầu: 5

2.3 Phân tích mô hình: 7

CHƯƠNG 3: THỰC HIỆN XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI 10

3.1 Kết quả thực nghiệm .10

CHƯƠNG 4: KẾT LUẬN, ĐÁNH GIÁ VÀ HƯỚNG PHÁT TRIỂN 19

4.1 Kết quả đạt được và đánh giá: 19

4.2 Hướng phát triển: 19

TÀI LIỆU THAM KHẢO 20

DANH MỤC HÌNH ẢNH

Hình 2 1 Use Case tổng quát 7

Hình 2 2 Quản lý sản phẩm .8

Hình 2 3 Chức năng giỏ hàng 9

Hình 3 1 Trang login admin .10

Hình 3 2 Danh sách user 11

Hình 3 3 Danh sách sản phẩm 12

Hình 3 4 Danh sách loại sản phẩm .12

Hình 3 5 Danh sách đơn đặt hàng .13

Hình 3 6 Trang chủ website 14

Hình 3 7 Trang hiển thị sản phẩm .15

Hình 3 8 Trang hiển thị sản phẩm theo loại SamSung .16

Hình 3 9 Giỏ hàng 17

Hình 3 10 Xác nhận đặt hàng .17

Hình 3 11 Trang đăng ký tài khoản 18

Hình 3 12 Trang đăng nhập tài khoản .18

LỜI CÁM ƠNLời đầu tiên, để hoàn thành đồ án môn học này nhóm em xin gửi lời cảm ơnđến giảng viên hướng dẫn là thầy Bùi Mạnh Toàn đã tận tình giúp đỡ, hướng dẫn vàtruyền đạt các kiến thức cho chúng em trong quá trình thực hiện đồ án xây dựngwebsite Đề tài mà nhóm em chọn và thực hiện vẫn còn nhiều thiếu xót chưa hoànchỉnh vì kiến thức còn hạn hẹp thời gian có hạn nên nhóm em rất mong nhận được sựgóp ý của quý thầy cô để chúng em rút kinh nghiệm và học hỏi thêm để phát triểnthêm trong sau này Một lần nữa nhóm em xin cảm ơn thầy rất nhiều !!!

1.2 Đối tượng nghiên cứu:

1.2.1 Đối tượng:

- Đối tượng là khách hàng có nhu cầu mua điện thoại để sử dụng tronghọc tập, công việc,… nhưng không có nhiều thời gian hoặc ở xa, không thể ratrực tiếp tại cửa hàng để lựa chọn, tìm hiểu và mua sản phẩm

1.2.2 Mục tiêu nghiên cứu:

- Tìm hiểu về kỹ thuật lập trình JavaScript và React JS

- Tìm hiểu công cụ sử dụng lập trình và hỗ trợ làm giao diện Visual StudioCode

- Tìm hiểu sử dụng các ngôn ngữ hỗ trợ lập trình như HTML, CSS,…

- Tìm hiểu về cách thiết kế và cách lưu trữ dữ liệu trên Mongo DB.1.2.3 Mục tiêu đề tài:

- Mục tiêu về đề tài xây dựng website bán Điện thoại di động nhóm chúng

em chú trọng vào giao diện đơn giản, dễ sử dụng, đầy đủ các tính năng cơ bảnnhư là danh mục sản phẩm, loại sản phẩm, giá sản phẩm, mô tả chi tiết về sảnphẩm nhằm giúp khách hàng có nhiều sự lựa chọn Có các chức năng đăng ký,đăng nhập khách hàng Khi khách hàng thích sản phẩm có thể thêm sản phẩmvào giỏ hàng và thanh toán,… Ở trang Admin quản lý thì nhóm chúng em đề ramục tiêu với các chức năng như: quản lý sản phẩm, loại sản phẩm, quản lý nhânviên và khách hàng, quản lý đơn hàng, chi tiết đơn đặt hàng một số chức năngkhác,…

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ

2.1 Công nghệ sử dụng:

2.1.1 Giới thiệu về ngôn ngữ lập trình JavaScript

-JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang webtương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồtương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trangweb

- Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệcốt lõi của World Wide Web Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáoquay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị hoặc màu sắc phần tử thay đổiđộng trên trang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript

- Trước đây, các trang web có dạng tĩnh, tương tự như các trang trong một cuốnsách Một trang tĩnh chủ yếu hiển thị thông tin theo một bố cục cố định và không làmđược mọi thứ mà chúng ta mong đợi như ở một trang web hiện đại JavaScript dần đượcbiết đến như một công nghệ phía trình duyệt để làm cho các ứng dụng web linh hoạt hơn

Sử dụng JavaScript, các trình duyệt có thể phản hồi tương tác của người dùng và thay đổi

bố cục của nội dung trên trang web

- Khi ngôn ngữ này phát triển hoàn thiện, các nhà phát triển JavaScript đã thiết lậpcác thư viện, khung và cách thức lập trình cũng như bắt đầu sử dụng ngôn ngữ này bênngoài trình duyệt web Ngày nay, bạn có thể sử dụng JavaScript để thực hiện hoạt độngphát triển cả ở phía máy khách và máy chủ

2.1.2 Giới thiệu về Mongo DB

- MongoDB là một database hướng tài liệu (document), một dạng NoSQL database

Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng vớicác tài liệu như JSON có một schema rất linh hoạt gọi là BSON.MongoDBsử dụng lưutrữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và cácdocument khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽrất nhanh

- MongoDB lần đầu ra đời bởi MongoDB Inc., tại thời điểm đó là thế hệ 10, vàotháng Mười năm 2007, nó là một phần của sản phẩm PaaS (Platform as a Service) tương

tự như Windows Azure và Google App Engine Sau đó nó đã được chuyển thành nguồn

mở từ năm 2009

2.1.3 Giới thiệu về React JS

- ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013,bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với cácthành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render

dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

- ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giaodiện người dùng hay UI Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phảilàm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng UI là tập hợpnhững thành phần mà bạn nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể kể

đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card,… Giả sử bạn đang lập trìnhmột website thương mại điện tử, sau khi người dùng chọn được sản phẩm ưng ý rồi vànhấn vào nút “Thêm vào giỏ hàng”, thì việc tiếp theo mà bạn phải làm đó là thêm sảnphẩm được chọn vào giỏ hàng và hiển thị lại sản phẩm đó khi user vào xem => xử lýtương tác.

- Trước khi có ReactJS, lập trình viên thường gặp rất nhiều khó khăn trong việc sửdụng “vanilla JavaScript”(JavaScript thuần) và JQuery để xây dựng UI Điều đó đồngnghĩa với việc quá trình phát triển ứng dụng sẽ lâu hơn và xuất hiện nhiều bug, rủi ro hơn

Vì vậy vào năm 2011, Jordan Walke – một nhân viên của Facebook đã khởi tạo ReactJSvới mục đích chính là cải thiện quá trình phát triển UI

- Hơn nữa, để tăng tốc quá trình phát triển và giảm thiểu những rủi ro có thể xảy ratrong khi coding, React còn cung cấp cho chúng ta khả năng Reusable Code (tái sử dụngcode) bằng cách đưa ra 2 khái niệm quan trọng bao gồm:

 JSX

 Virtual DOM

2.2 Phân tích mô tả yêu cầu:

2.2.1 Yêu cầu chức năng:

- Người Dùng:

+ Đăng ký:

 Chi tiết: Khách hàng tạo tài khoản, mật khẩu và nhập thôngtin cá nhân của mình bao gồm(họ và tên, mật khẩu, sđt,email)

+ Đăng nhập:

 Chi tiết: Khách hàng nhập tài khoản, mật khẩu đã tạo để cóthể vào mua hàng

+ Giỏ hàng:

 Chi tiết: Khách hàng lựa những sản phẩm mà mình muốn

để thêm vào giỏ hàng

+ Đặt hàng:

 Chi tiết: Người dùng đăng nhập vào website rồi đặt sảnphẩm mà mình muốn mua

+ Xem thông tin sản phẩm:

 Chi tiết: xem thông tin các mặt hàng trong shop về mặtthông số, kỹ thuật

- Admin:

+ Quản lý tài khoản người dùng:

 Chi tiết: Admin có thể chỉnh sửa thông tin khách hàng khikhách hàng gặp vấn đề về tài khoản của mình và xóa tàikhoản người dùng

2.2.2 Yêu cầu giao diện:

Giao diện dễ nhìn

Giao diện dễ sử dụng

Giao diện đẹp

Màu sắc hài hòa, đơn giản không quá nổi bật

Hình ảnh có kích thước hợp lý, không quá to hay quá nhỏ

Font chữ phổ biến dễ nhìn

2.3 Phân tích mô hình:

2.3.1 Mô hình Use Case

- Mô hình use case tổng quát:

Hình 2 1 Use Case tổng quát

- Mô hình use case chức năng admin:

Hình 2 2 Quản lý sản phẩm

- Mô hình usecase chức năng khách hàng

Hình 2 3 Chức năng giỏ hàng

CHƯƠNG 3: THỰC HIỆN XÂY DỰNG WEBSITE BÁN

ĐIỆN THOẠI3.1 Kết quả thực nghiệm

3.1.1 Phần quản trị:

Hình 3 1 Trang login admin

- Đăng nhập để vào sử dụng các chức năng quản trị của trang web.

- Trang chủ có chứa phần thống kê doanh thu theo tháng, năm, số đơn hàng mới,…

Hình 3 2 Danh sách user

• Các chức năng phần quản lý user:

+ Tạo tài khoản: cho phép tạo thêm tài khoản đăng nhập cho nhân viên.+ Đổi mật khẩu: cho phép quản lý đổi mật khẩu các nhân viên

+Chỉnh sửa quyền: ADMIN, CUSTOMMER, …

- Các chức năng phần quản lý loại sản phẩm:

+ Thêm mới loại sản phẩm: thêm một loại sản phẩm mới.+ Chỉnh sửa thông tin loại sản phẩm

143.1.2.Phần website người dùng:

Hình 3 6 Trang chủ website

Hình 3 7 Trang hiển thị sản phẩm.

- Phần hiển thị có thể hiển thị theo loại

16Hình 3 8 Trang hiển thị sản phẩm theo loại SamSung.

Hình 3 11 Trang đăng ký tài khoản

Hình 3 12 Trang đăng nhập tài khoản

CHƯƠNG 4: KẾT LUẬN, ĐÁNH GIÁ VÀ HƯỚNG PHÁT

TRIỂN4.1 Kết quả đạt được và đánh giá:

- Sau khoảng thời gian học tập và thực nghiệm xây dựng website bán điệnthoại của nhóm đã đáp ứng được một số chức năng cơ bản, tuy nhiên vẫn còn một sốsai sót nhóm chưa thể khắc phục kịp thời Nhóm sẽ tiếp tục tìm hiểu và phát triểnphần mềm tiếp trong tương lai

 Kết hợp thanh toán trực tuyến vào trang web để mua hàng tiện lợi hơn

 Làm về khuyến mãi

 Triển khai xây dụng bảo mật hơn cho trang web

 Thêm AI bot chat tự động, trực tuyến

TÀI LIỆU THAM KHẢO[1] Website tài liệu về NodeJS:https://www.nodebeginner.org/index-vi.html.[2] WebsiteW3Schools Online Web Tutorials