Ứng dụng hỗ trợ báo giá cho sales (đồ án SE121 l21)

Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN
KHOA CƠNG NGHỆ PHẦN MỀM
🙤🙤🙤🙤🙤

BÁO CÁO ĐỒ ÁN
ĐỒ ÁN 1

ĐỀ TÀI
ỨNG DỤNG HỖ TRỢ BÁO GIÁ CHO SALES

Giảng viên hướng dẫn: ThS.Nguyễn Công Hoan
Sinh viên thực hiện:
Hồng Văn Châu

16520108

TP. Hồ Chí Minh, tháng 06 năm 2021

Hoàng Văn Châu

2


Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan
LỜI CẢM ƠN
Để hồn thành đề tài “Ứng dụng hỗ trợ báo giá cho sales”. Ngoài sự nỗ lực của

cá nhân em ra còn nhận được sự giúp đỡ của nhiều tập thể và cá nhân. Đặc biệt xin gửi
lời cảm ơn đến ThS. Nguyễn Công Hoan – giảng viên bộ môn “Đồ án 1” đã tận tình
giảng dạy, trang bị cho em những kiến thức q báu trong kì học vừa qua để em có thể
hoàn thành tốt đồ án. Trong thời gian học tập, em khơng chỉ nhận được những kiến
thức bổ ích về chun mơn mà cịn ở những lĩnh vực khác. Những trải nghiệm q báu
đó khơng chỉ giúp em hồn thành tốt bài báo cáo mà còn là hành trang theo em trong
suốt thời gian học tập và làm việc sau này.
Tuy nhiên trong quá trình nghiên cứu đề tài, do kiến thức chuyên ngành còn hạn
chế nên em vẫn còn nhiều thiếu sót khi tìm hiểu, đánh giá và trình bày về đề tài. Rất
mong nhận được sự quan tâm, đóng góp của thầy để đồ án của em được đầy đủ và
hồn chỉnh hơn.
Cuối cùng xin kính chúc q thầy dồi dào sức khỏe và thành công trong sự
nghiệp cao quý.
Chúng em xin chân thành cảm ơn.
TP.Hồ Chí Minh, ngày 26 tháng 06 năm 2021
Sinh viên thực hiện

Hoàng Văn Châu

3


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
NHẬN XÉT CỦA GIẢNG VIÊN
---------------------------------------------------------------------------------------------------MỤC LỤC
LỜI CẢM ƠN ………………………………………………………………………...
2
NHẬN XÉT CỦA GIẢNG VIÊN ………………………….………………………...
3
1. GIỚI THIỆU

7

1.1. Lí do chọn đề tài

7

1.2. Mục tiêu đề tài

7

2. CƠNG NGHỆ VÀ KIẾN TRÚC HỆ THỐNG SỬ DỤNG

7

2.1. Kiến trúc RESTful API

7

2.1.1. Khái niệm về RESTful API

7

2.1.2. RESTful API hoạt động như thế nào

10

2.2. Giới thiệu Framework VueJs

11

2.2.1. VueJs là gì?

11

2.2.2. Ưu điểm và nhược điểm

12

3.

SƠ ĐỒ LUỒNG DỮ LIỆU HỆ THỐNG

13

4.

XÂY DỰNG VÀ TRIỂN KHAI HỆ THỐNG

13

4.1. Môi trường cài đặt và phát triển

13

4.2. Một số giao diện của website

14

4.2.1. Giao diện quản lý users

14

4.2.2. Giao diện quản lý khách hàng

15

4.2.3. Giao diện quản lý danh mục

16

4.2.4. Giao diện quản lý sản phẩm

17

4.2.5. Giao diện quản lý đơn hàng

18

Hoàng Văn Châu

4


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan

5.

4.2.6. Giao hỗ trợ Sales

19

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

20

5.1. Kết quả đạt được

20

5.2. Đánh giá ưu điểm, khuyết điểm

20

5.2.1. Ưu điểm

20

5.2.2. Nhược điểm

20

5.3. Hướng phát triển

21

TÀI LIỆU THAM KHẢO

21

Hoàng Văn Châu

5


Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan
1. GIỚI THIỆU
1.1. Lí do chọn đề tài
Ngày nay Công nghệ thông tin phát triển nhu cầu mua bán online ngày càng
nhiều. Thấy được sự phát triển tiềm năng đó em đã xây dựng ứng dụng hỗ trợ báo giá
cho TeamSales để đáp ứng nhu cầu ngày lớn của khách hàng, giúp Team Sales có thể
báo giá một cách dễ dàng – tiện lợi mà không cần phải tốn thời gian và không cần
Team Design hỗ trợtrong q trình báo giá cho phía khách hàng. Đồng thời đáp ứng
nhu tối ưu giờ làm và bắt kịp xu thế phát triển ngành công nghiệp sản xuất phân mềm.
1.2. Mục tiêu đề tài
Trong đề tài nguyên cứu này, Chúng em muốn xây dựng một ứng dụng hỗ trợ
báo giá cho Team Sales với các feature như sau:
− Quản lý danh mục
− Quản lý sản phẩm
− Quản lý khách hàng
− Quản lý đơn hàng
− Filter sản phẩm
− Xuất PDF theo template dựng sẵn
− Xuất Excel báo giá

Hoàng Văn Châu

6

Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan
2.

CƠNG NGHỆ VÀ KIẾN TRÚC HỆ THỐNG SỬ DỤNG
2.1. Kiến trúc RESTful API
2.1.1. Khái niệm về RESTful API
REST viết tắt cho REpresentational State Transfer Khái niệm về REST lần đầu

tiên được giới thiệu vào năm 2000 trong luận văn Tiến sĩ của Roy Fielding (đồng sáng
lập giao thức HTTP) Là 1 kiểu kiến trúc lập trình, định nghĩa các quy tắc để thiết kế
web service chú trọng vào tài nguyên Mọi thứ trong REST đều được coi là tài nguyên
và được định danh thông qua URI, và có thể được biểu diễn thơng qua dạng văn bản,
XML, JSON.... RESTful là những ứng dụng mà có sử dụng kiến trúc REST.
RESTful API là một tiêu chuẩn dùng trong việc thiết kế API cho các ứng dụng
web (thiết kế Web services) để tiện cho việc quản lý các resource. Nó chú trọng vào tài
nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động…), bao gồm
các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP.

Hoàng Văn Châu

7


Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan

Hình 1 – Mơ hình RESTful API
Theo đó:
● API (Application Programming Interface) là một tập các quy tắc và cơ chế mà
theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay
thành phần khác. API có thể trả về dữ liệu mà bạn cần cho ứng dụng của mình

ở những kiểu dữ liệu phổ biến như JSON hay XML.
● REST (REpresentational State Transfer) là một dạng chuyển đổi cấu trúc dữ
liệu, một kiểu kiến trúc để viết API. Nó sử dụng phương thức HTTP đơn giản
để tạo cho giao tiếp giữa các máy. Vì vậy, thay vì sử dụng một URL cho việc xử
lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST,
DELETE, vv đến một URL để xử lý dữ liệu.
● RESTful API là một tiêu chuẩn dùng trong việc thiết kế các API cho các ứng
dụng web để quản lý các resource. RESTful là một trong những kiểu thiết kế
API được sử dụng phổ biến ngày nay để cho các ứng dụng (web, mobile…)
khác nhau giao tiếp với nhau.
● Chức năng quan trọng nhất của REST là quy định cách sử dụng các HTTP
method (như GET, POST, PUT, DELETE…) và cách định dạng các URL cho
ứng dụng web để quản các resource. RESTful không quy định logic code ứng
dụng và không giới hạn bởi ngơn ngữ lập trình ứng dụng, bất kỳ ngơn ngữ hoặc
framework nào cũng có thể sử dụng để thiết kế một RESTfulAPI.

Hoàng Văn Châu

8


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
2.1.2.

RESTful API hoạt động như thế nào

Hình 2 - Sơ đồ luồng sự kiện trong RESTful API
REST hoạt động chủ yếu dựa vào giao thức HTTP. Các hoạt động cơ bản nêu trên sẽ
sử dụng những phương thức HTTP riêng.
● GET (SELECT): Trả về một Resource hoặc một danh sách Resource.

● POST (CREATE): Tạo mới một Resource.
● PUT (UPDATE): Cập nhật thông tin cho Resource.
● DELETE (DELETE): Xoá một Resource.
Những phương thức hay hoạt động này thường được gọi là CRUD tương ứng với
Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa.
Hiện tại đa số lập trình viên viết RESTful API giờ đây đều chọn JSON là format chính
thức nhưng cũng có nhiều người chọn XML làm format, nói chung dùng thế nào cũng
được miễn tiện và nhanh.

Hoàng Văn Châu

9


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
2.2. Giới thiệu Framework VueJs
2.2.1.

VueJs là gì?

VueJs là một framework linh động (nguyên bản tiếng Anh: progressive – tiệm
tiến) dùng để xây dựng giao diện người dùng (user interfaces). Khác với các
framework nguyên khối (monolithic), Vue được thiết kế từ đầu theo hướng cho phép
và khuyến khích việc phát triển ứng dụng theo từng bước. Khi phát triển lớp giao diện
(view layer), người dùng chỉ cần dùng thư viện lõi (core library) của Vue, vốn rất dễ
học và tích hợp với các thư viện hoặc dự án có sẵn. Cùng lúc đó, nếu kết hợp với
những kĩ thuật hiện đại như SFC (single file components) và các thư viện hỗ trợ,
Vue cũng đáp ứng được dễ dàng nhu cầu xây dựng những ứng dụng một trang (SPA Single-Page Applications) với độ phức tạp cao hơn nhiều.v.v…

Hoàng Văn Châu

10


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
2.2.2. Ưu điểm và nhược điểm
− Ưu điểm:
 Trang web nhẹ, tốc độ xử lý cực nhanh bởi được Render, xử lý bằng
Javascript.
 Đơn giản, dễ học và dễ áp dụng trong các dự án, đặc biệt là với
newbie
 Có khả năng xử lý các render thuộc server thành file Js tĩnh
 Kho thư viện lớn, hỗ trợ xây dựng giao diện một cách nhanh chóng,
hồn hảo
 Dung lượng tải thấp, giúp tốc độ tải trang nhanh hơn
 Sàng lọc, tích hợp các tính năng ưu việt của nhiều framework đối
thủ, giúp tối ưu hóa hiệu suất làm việc.
− Nhược điểm:
● Khó khăn trong việc SEO
● Cộng đồng nhỏ và mới

Hoàng Văn Châu

11


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
3.

SƠ ĐỒ LUỒNG DỮ LIỆU HỆ THỐNG

− Sử dụng VueX để quản lý state của Vue
− Sử dụng Repositories Pattern để quản lý Model API
− Sử dụng Service Layer để quản lý và tương tác với các Service bên ngoài hệ
thống

Hoàng Văn Châu

12


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
4. XÂY DỰNG VÀ TRIỂN KHAI HỆ THỐNG
4.1. Môi trường cài đặt và phát triển
− Yêu cầu cấu hình:
● NodeJS >12.0
● Npm >6.0
● PHP >7.0
● Apache hoặc Nginx
● MySql

Hoàng Văn Châu

13


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
4.2. Một số giao diện của website
4.2.1. Giao diện trang quản lý users
− Màn hình quản lý danh sách users

−

Hình 15 – Màn hình trang chủ app
− Mô tả chức năng: Quản lý thông thin tài khoản, thêm xố sửa tài khoản Sales.
− Màn hình thêm và sửa user

Hoàng Văn Châu

14


Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan

Hồng Văn Châu

15


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
4.2.2. Giao diện quản lý khách hàng
− Màn hình danh sách khách hàng

Hình 15 – Màn hình top danh sách khách hàng
− Mơ tả chức năng: Danh sách các khách hàng, search.
− Màn hình thêm-sửa khách hàng

Hoàng Văn Châu

16

Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
4.2.3. Giao diện danh mục
− Màn hình danh sách danh mục

Hình 15 – Màn hình danh sách phim đã xem
− Mô tả chức năng: Liêt kê danh sách danh mục sản phẩm.
− Màn hình thêm-sửa danh mục

Hoàng Văn Châu

17


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
4.2.4. Giao diện quản lý sản phẩm
− Màn danh sách sản phẩm

Hình 15 – Màn hình tìm kiếm phim
− Mơ tả chức năng: Người dùng có thể tìm kiếm, filter sản phẩm theo danh mục,
màu sắc.
− Màn hình thêm-sửa sản phẩm

Hồng Văn Châu

18


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
4.2.5. Giao diện quản lý đơn hàng

− Màn hình danh sách đơn hàng

Hình 15 – Màn hình chi tiết bộ phim
− Mơ tả chức năng: Quản lý danh sách đơn hàng, filter theo khách hàng và Sales.
− Màn hình chi tiết đơn hàng

Hồng Văn Châu

19


Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan



4.2.6. Màn hình dành cho Sales
Màn hình trang chủ



Màn chi tiết sản phẩm



Màn hình cart

Hồng Văn Châu

20

Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan



Màn hình chọn ảnh để xuất mẫu PDF



Kết quả xuất mẫu PDF

Hoàng Văn Châu

21


Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan



Màn hình sau khi hồn thành báo giá



File Excel báo giá báo giá

Hoàng Văn Châu

22

Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan

5. KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
5.1. Kết quả đạt được
Sau một thời gian tập trung triển khai đề tài, em đã hoàn thành được ứng dụng
hỗ trợ báo giá cho Team Sales với giao diện đẹp, các thao tác sử dụng dễ dàng, thân
thiện với người dùng.
Ứng dụng giúp cho Sales tiết kiệm được tối ưu thời gian để tìm kiếm và báo
giá một hoặc nhiều sản phẩm. Ứng dụng cũng hổ trợ quản trị thông tin sản phẩm và
khách hàng rõ ràng giúp Sales có thể báo giá tới đúng khách hàng phù hợp.
Khi hồn thành xong được được website, chúng em có thêm những kỹ năng nền
tảng để xây dựng được một website bằng ngôn ngữ Javascript, Framework Vuejs áp
dụng những kiến thức đã học vào việc phát triển ứng dụng SPA.
Bên cạnh đó, chúng em cũng được mở rộng thêm các kiến thức chuyên ngành
mới. Nhờ việc tìm hiểu một số kiến thức lập trình để áp dụng vào việc phát triển ứng
Hoàng Văn Châu

23


Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan
dụng này. Nhờ vậy, kỹ năng tự học và vận dụng các kỹ năng mới của nhóm được nâng
cao hơn.
Khi thực hiện và hồn thành dự án, chúng em cũng đã biết thêm được nhiều
kinh nghiệm quý giá khi xây dựng ứng dụng SPA. Những kỹ năng này sẽ là nền tảng
để giúp chúng em nâng cao trình độ bản thân, kinh nghiệm trong thực tế trong các dự
án thiết kế ứng dụng.
5.2. Đánh giá ưu điểm, khuyết điểm
5.2.1.

Ưu điểm

− Ứng dụng được xây dựng theo đúng đặc thù lĩnh vực.
− Hoàn thành được các chức năng đề ra.
− Giao diện thiết kế trực quan, dễ sử dụng, thân thiện với người dùng.
− Thân thiện với người dùng.
− Chi phí phát triển, vận hành & bảo trì thấp.
− Dễ dàng triển khai trên hệ thống.
5.2.2.

Nhược điểm

− Yêu cầu Team phát triển có kiến thức tốt về hệ thống và ngơn ngữ
− Chưa tích hợp vào cho hệ thống ERP
− Ít template, cần bổ sung them đa dạng hơn
5.3. Hướng phát triển
− Cập nhật liên tục theo xu hướng và nhu cầu của khách hàng.
− Xây dựng kho dữ liệu và tích hợp vào hệ thống ERP.
− Cải tiến nâng cấp giao diện.
− Bổ dung đa dạng template.
TÀI LIỆU THAM KHẢO
− Mã nguồn dự án: /> /> /> />
Hoàng Văn Châu

24