Ứ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 ĐỀ 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: Hoàng Văn Châu 16520108 TP Hồ Chí Minh, tháng 06 năm 2021 Hồng Văn Châu 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 nỗ lực cá nhân em nhận giúp đỡ nhiều tập thể 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 môn “Đồ án 1” tận tình giảng dạy, trang bị cho em kiến thức quý báu kì học vừa qua để em hồn thành tốt đồ án Trong thời gian học tập, em không nhận kiến thức bổ ích chun mơn mà lĩnh vực khác Những trải nghiệm quý báu khơng giúp em hồn thành tốt báo cáo mà hành trang theo em suốt thời gian học tập làm việc sau Tuy nhiên trình nghiên cứu đề tài, kiến thức chuyên ngành hạn chế nên em cịn nhiều thiếu sót tìm hiểu, đánh giá trình bày đề tài Rất mong nhận quan tâm, đóng góp thầy để đồ án em đầy đủ hoàn chỉnh Cuối xin kính chúc quý thầy dồi sức khỏe thành công 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 Hoàng Văn Châu 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 ……………………………………………………………………… NHẬN XÉT CỦA GIẢNG VIÊN ………………………….……………………… GIỚI THIỆU 1.1 Lí chọn đề tài 1.2 Mục tiêu đề tài 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 RESTful API 2.1.2 RESTful API hoạt động 10 2.2 Giới thiệu Framework VueJs 11 2.2.1 VueJs gì? 11 2.2.2 Ưu điểm nhược điểm 12 SƠ ĐỒ LUỒNG DỮ LIỆU HỆ THỐNG 13 XÂY DỰNG VÀ TRIỂN KHAI HỆ THỐNG 13 4.1 Môi trường cài đặt phát triển 13 4.2 Một số giao diện 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 Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan 4.2.6 Giao hỗ trợ Sales 19 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 20 5.1 Kết đạt 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 Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan GIỚI THIỆU 1.1 Lí chọn đề tài Ngày Công nghệ thông tin phát triển nhu cầu mua bán online ngày nhiều Thấy phát triển tiềm em xây dựng ứng dụng hỗ trợ báo giá cho TeamSales để đáp ứng nhu cầu ngày lớn khách hàng, giúp Team Sales báo giá cách dễ dàng – tiện lợi mà không cần phải tốn thời gian không cần Team Design hỗ trợtrong trình báo giá cho phía khách hàng Đồng thời đáp ứng nhu tối ưu làm bắt kịp xu 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 ứng dụng hỗ trợ báo giá cho Team Sales với feature 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 Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan 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 RESTful API REST viết tắt cho REpresentational State Transfer Khái niệm REST lần giới thiệu vào năm 2000 luận văn Tiến sĩ Roy Fielding (đồng sáng lập giao thức HTTP) Là kiểu kiến trúc lập trình, định nghĩa quy tắc để thiết kế web service trọng vào tài nguyên Mọi thứ REST coi tài nguyên định danh thơng qua URI, biểu diễn thông qua dạng văn bản, XML, JSON RESTful ứng dụng mà có sử dụng kiến trúc REST RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web (thiết kế Web services) để tiện cho việc quản lý resource Nó trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, liệu động…), bao gồm trạng thái tài nguyên định dạng truyền tải qua HTTP Hoàng Văn Châu Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan Hình – Mơ hình RESTful API Theo đó: ● API (Application Programming Interface) tập quy tắc chế mà theo đó, ứng dụng hay thành phần tương tác với ứng dụng hay thành phần khác API trả liệu mà bạn cần cho ứng dụng kiểu liệu phổ biến JSON hay XML ● REST (REpresentational State Transfer) dạng chuyển đổi cấu trúc liệu, 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 máy Vì vậy, thay sử dụng URL cho việc xử lý số thông tin người dùng, REST gửi yêu cầu HTTP GET, POST, DELETE, vv đến URL để xử lý liệu ● RESTful API tiêu chuẩn dùng việc thiết kế API cho ứng dụng web để quản lý resource RESTful kiểu thiết kế API sử dụng phổ biến ngày ứng dụng (web, mobile…) khác giao tiếp với ● Chức quan trọng REST quy định cách sử dụng HTTP method (như GET, POST, PUT, DELETE…) cách định dạng URL cho ứng dụng web để quản resource RESTful không quy định logic code ứng dụng không giới hạn ngơn ngữ lập trình ứng dụng, ngơn ngữ framework sử dụng để thiết kế RESTfulAPI Hoàng Văn Châu Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan 2.1.2 RESTful API hoạt động Hình - Sơ đồ luồng kiện RESTful API REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động nêu sử dụng phương thức HTTP riêng ● GET (SELECT): Trả Resource danh sách Resource ● POST (CREATE): Tạo Resource ● PUT (UPDATE): Cập nhật thơng tin cho Resource ● DELETE (DELETE): Xố Resource Những phương thức hay hoạt động thường gọi CRUD tương ứng với Create, Read, Update, Delete – Tạo, Đọc, Sửa, Xóa Hiện đa số lập trình viên viết RESTful API chọn JSON format thức có nhiều người chọn XML làm format, nói chung dùng miễn tiện nhanh Hoàng Văn Châu Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan 2.2 Giới thiệu Framework VueJs 2.2.1 VueJs gì? VueJs framework linh động (nguyê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 framework nguyên khối (monolithic), Vue thiết kế từ đầu theo hướng cho phép khuyến khích việc phát triển ứng dụng theo bước Khi phát triển lớp giao diện (view layer), người dùng cần dùng thư viện lõi (core library) Vue, vốn dễ học tích hợp với thư viện dự án có sẵn Cùng lúc đó, kết hợp với kĩ thuật đại SFC (single file components) thư viện hỗ trợ, Vue đáp ứng dễ dàng nhu cầu xây dựng ứng dụng trang (SPA Single-Page Applications) với độ phức tạp cao 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 nhược điểm − Ưu điểm:  Trang web nhẹ, tốc độ xử lý cực nhanh Render, xử lý Javascript  Đơn giản, dễ học dễ áp dụng dự án, đặc biệt với newbie  Có khả xử lý 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 cách nhanh chóng, hoàn hảo  Dung lượng tải thấp, giúp tốc độ tải trang nhanh  Sàng lọc, tích hợp tính ưu việt 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 việc SEO ● Cộng đồng nhỏ Hồng Văn Châu 11 Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan SƠ ĐỒ LUỒNG DỮ LIỆU HỆ THỐNG − Sử dụng VueX để quản lý state Vue − Sử dụng Repositories Pattern để quản lý Model API − Sử dụng Service Layer để quản lý tương tác với Service bên hệ thống Hoàng Văn Châu 12 Lớp: SE121.L21GVHD: ThS.Nguyễn Công Hoan XÂY DỰNG VÀ TRIỂN KHAI HỆ THỐNG 4.1 Môi trường cài đặt phát triển − Yêu cầu cấu hình: ● NodeJS >12.0 ● Npm >6.0 ● PHP >7.0 ● Apache Nginx ● MySql Hồng Văn Châu 13 Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan 4.2 Một số giao diện 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 xoá sửa tài khoản Sales − Màn hình thêm sửa user Hồ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 khách hàng, search − Màn hình thêm-sửa khách hàng Hồ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 Hồ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 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 phim − Mô tả chức năng: Quản lý danh sách đơn hàng, filter theo khách hàng 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 xuất mẫu PDF Hồng Văn Châu 21 Lớp: SE121.L21GVHD: ThS.Nguyễn Cơng Hoan  Màn hình sau 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 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 Kết đạt Sau thời gian tập trung triển khai đề tài, em hoàn thành ứng dụng hỗ trợ báo giá cho Team Sales với giao diện đẹp, 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 tối ưu thời gian để tìm kiếm báo giá nhiều sản phẩm Ứng dụng hổ trợ quản trị thông tin sản phẩm khách hàng rõ ràng giúp Sales báo giá tới khách hàng phù hợp Khi hoàn thành xong được website, chúng em có thêm kỹ tảng để xây dựng website ngôn ngữ Javascript, Framework Vuejs áp dụ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 mở rộng thêm kiến thức chuyên ngành Nhờ việc tìm hiểu 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 Nhờ vậy, kỹ tự học vận dụng kỹ nhóm nâng cao Khi thực hoàn thành dự án, chúng em biết thêm nhiều kinh nghiệm quý giá xây dựng ứng dụng SPA Những kỹ tảng để giúp chúng em nâng cao trình độ thân, kinh nghiệm thực tế 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 xây dựng theo đặc thù lĩnh vực − Hoàn thành chức đề − 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 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 hệ thống 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 5.3 Hướng phát triển − Cập nhật liên tục theo xu hướng nhu cầu khách hàng − Xây dựng kho liệu 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: https://github.com/ChauDucGiang/SE121.L11 https://vuejs.org/ https://restfulapi.net/ https://www.laravel.com/ Hoàng Văn Châu 24 ... hoàn thành ứng dụng hỗ trợ báo giá cho Team Sales với giao diện đẹp, 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 tối ưu thời gian để tìm kiếm báo giá nhiều... triển nhu cầu mua bán online ngày nhiều Thấy phát triển tiềm em xây dựng ứng dụng hỗ trợ báo giá cho TeamSales để đáp ứng nhu cầu ngày lớn khách hàng, giúp Team Sales báo giá cách dễ dàng – tiện... PHẦN MỀM