Do đó việc kinh doanh online càng trở nên khắc nghiệt đòi hỏi người kinh doanh phải có một hệ thống đủ tốt để vừa kiếm được lợi nhuận vừa có thể phát triển thương hiệu Nhận thức được nhu
Trang 1Hà Nội, 12-2021
VŨ NHƯ QUANG AT150344
NGUYỄN VIỆT HOÀNG AT150319 Nhóm 27
Giảng viên hướng dẫn: ThS BÙI THỊ NHƯ
Trang 3LỜI NÓI ĐẦU
Ngày nay, với sự xuất của mạng xã hội đã kéo theo sự hình thành của phương pháp kinh doanh online Khi lượng người dùng mạng xã hội tăng thì hình thức kinh doanh này càng phát triển và số lượng người tham gia kinh doanh online cũng ngày càng đông Do đó việc kinh doanh online càng trở nên khắc nghiệt đòi hỏi người kinh doanh phải có một hệ thống đủ tốt để vừa kiếm được lợi nhuận vừa có thể phát triển thương hiệu
Nhận thức được nhu cầu xây dựng mô hình kinh doanh và phát triển thương hiệu này, nhóm em đã phát triển sản phẩm ladibook giúp cho những người muốn tạo, sử dụng landing page trong giai đoạn thu hút và lọc khách hàng của hệ thống kinh doanh giúp chủ doanh nghiệp
có thể chọn đúng tập khách hàng mục tiêu để chăm sóc từ đó gia tăng hiệu quả kinh doanh cũng như thương hiệu
Trong đề tài này, chúng em đã tạo được một ứng dụng web cho người dùng có thể chọn
và tự do tuỳ chỉnh các mẫu landing page có sẵn và đem đi thu hút khách hàng Mỗi lần khách hàng truy cập đường link landingpage hoặc quan tâm đến sản phẩm thì hệ thống sẽ ghi nhận thông tin khách hàng rồi thống kê lại các yêu cầu cho chủ doanh nghiệp Khi đã có một lượng khách quan tâm thì chủ doanh nghiệp( hoặc nhân viên được phân quyền) có thể phát hành các chiến dịch chăm sóc, khuyến mãi,… thông qua gmail
Nội dung trong báo cáo này được chia làm 03 phần như sau:
Chương 1: Tổng quan về đề tài Chương này sẽ giới thiệu công nghệ được ứng dụng và
phát triển đề tài của chúng em Cách mà bọn em kết nối các công nghệ lại với nhau thành sản phầm
Chương 2: Phân tích hệ thống, các use case, các luồng chính trong đề tài, các trang giao
diện và cấu trúc lưu trữ
thực nghiệm Từ đó tìm ra hướng phát triển trong tương lai
Trang 5LỜI CAM ĐOAN
Tôi là Dương Quang Huy, mã số sinh viên AT150323, sinh viên lớp AT15C, khóa AT15 Người hướng dẫn là ThS Bùi Thị Như Tôi xin thay mặt, cam đoan toàn bộ nội dung được trình bày trong đồ án Xây dựng ứng dụng tổng hợp và tóm tắt tin tức là kết quả quá trình tìm hiểu và nghiên cứu của chúng tôi Các dữ liệu được nêu trong đồ án là hoàn toàn trung thực, phản ánh đúng kết quả đo đạc thực tế Mọi thông tin trích dẫn đều tuân thủ các quy định về sở hữu trí tuệ; các tài liệu tham khảo được liệt kê rõ ràng Tôi xin chịu hoàn toàn trách nhiệm với những nội dung được viết trong báo cáo này
Hà Nội, ngày 31 tháng 12 năm 2021
Người cam đoan
Dương Quang Huy
Trang 7MỤC LỤC
DANH MỤC HÌNH VẼ i
DANH MỤC BẢNG BIỂU ii
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1
1.1 Tổng quan về ngôn ngữ và các công cụ hỗ trợ 1
1.1.1 Tổng quan về backend trong dự án: java và spring data jpa 1
1.1.2 Tổng quan về frontend trong dự án: html, css, bootstrap, javascript 1
1.1.3 Các công cụ hỗ trợ 2
1.1.4 Lưu trữ dữ liệu 2
1.2 Quy trình chuyển từ landingpage mẫu sang landingpage có thể tuỳ biến 2
1.3 Quy trình xuất bản landingpage 3
CHƯƠNG 2 THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG 3
2.1 Phân tích hệ thống 3
2.1.1 Biểu đồ phân rã chức năng 3
2.1.2 Biểu đồ Use Case tổng quát 4
2.1.3 Xác định actor và chức năng 5
2.1.4 Biểu đồ Use case chi tiết 5
2.1.5 Đặc tả các ca sử dụng 8
2.2 Cấu trúc ứng dụng thử nghiệm 15
2.2.1 Trang đăng nhập 15
2.2.2 Trang dashboard 15
2.2.3 Trang các landingpage mẫu 16
2.2.4 Trang các yêu cầu 16
2.2.5 Trang chi tiết yêu cầu 17
2.2.6 Trang chỉnh sửa vai trò 17
2.2.7 Trang chỉnh sửa landingpage 18
2.3 Thiết kế hệ thống lưu và tuỳ chỉnh landingpage 18
2.3.1 Chuẩn hoá landingpage 18
2.3.2 Tách style, javascript 19
2.3.3 Sử dụng kỹ thuật chuyển từ thành vector số thực 19
2.3.4 Lưu metadata vào database, nội dung landingpage vào disk 19
Trang 82.4 Hệ thống lưu trữ 19
2.4.1 Bảng customer 20
2.4.2 Bảng landingpage 20
2.4.3 Bảng order_customer 21
2.4.4 Bảng orders 21
2.4.5 Bảng permission 22
2.4.6 Bảng role 22
2.4.7 Bảng role_permission 22
2.4.8 Bảng template 23
2.4.9 Bảng user 23
Chương 3: KẾT QUẢ THỰC NGHIỆM 23
3.1 Kết quả chạy hệ thống giao diện người dùng 24
3.2 Kết quả chạy hệ thống tạo và quản lý landingpage 24
3.2.1 Hệ thống tạo landingpage 24
3.2.2 Hệ thống quản lý landingpage 24
KẾT LUẬN 25
Kết luận chung 25
Hướng phát triển 25
PHÂN CÔNG CÔNG VIỆC 26
Trang 9DANH MỤC HÌNH VẼ
Hình 1 Biểu đồ phân rã chức năng 3
Hình 2 Biểu đồ Use Case tổng quát 4
Hình 3 Biểu đồ UC Customer 5
Hình 4 Biểu đồ UC Xuất bản landingpage 6
Hình 5 Biểu đồ UC quản lý tin tức 6
Hình 6 Biểu đồ UC quản lý yêu cầu 7
Hình 7 Biểu đồ UC quản lý nhân viên 7
Hình 8 Trang đăng nhập 15
Hình 9 Trang dashboard 15
Hình 10 Trang landingpage mẫu 16
Hình 11 Trang các yêu cầu 16
Hình 12 Trang chi tiết yêu cầu 17
Hình 13 Trang chỉnh sửa vai trò 17
Hình 14 Trang chỉnh sửa vai trò 18
Hình 15 Luồng lưu và tuỳ chỉnh landindingpage 18
Hình 16 Cấu trúc dữ liệu 19
Hình 17 Cấu trúc bảng customer 20
Hình 18 Cấu trúc bảng landingpage 20
Hình 19 Cấu trúc bảng order_customer 21
Hình 20 Cấu trúc bảng orders 21
Hình 21 Cấu trúc bảng permission 22
Hình 22 Cấu trúc của bảng role 22
Hình 23 Cấu trúc của bảng role_permission 22
Hình 24 Cấu trúc của bảng template 23
Hình 25 Cấu trúc của bảng user 23
Trang 10ii
DANH MỤC BẢNG BIỂU
Bảng 1 Chức năng các actor 5
Bảng 2 Use Case đăng ký 8
Bảng 3 Use Case đăng nhập 8
Bảng 4 Use Case quên mật khẩu 9
Bảng 5 Use Case đăng xuất 9
Bảng 6 Use Case thay đổi thông tin cá nhân 10
Bảng 7 Use Case tạo landingpage 10
Bảng 8 Use Case quản lý landingpage 11
Bảng 9 Use Case xoá landingpage 11
Bảng 10 Use Case xem các yêu cầu từ landingpage 11
Bảng 11 Use Case quản lý yêu cầu 12
Bảng 12 Use Case xem chi tiết một yêu cầu 12
Bảng 13 Use Case xoá landingpage 12
Bảng 14 Use Case chỉ định nhân viên xử lý yêu cầu 13
Bảng 15 Use Case quản lý nhân viên 13
Bảng 16 Use Case sửa thông tin nhân viên 13
Bảng 17 Use Case chỉnh sửa vai trò nhân viên 14
Bảng 18 Use Case tạo vai trò 14
Trang 11TÓM TẮT ĐỒ ÁN
Nhu cầu tạo landingpage hiện nay tương đối lớn và cũng có nhiều công ty tạo ra các giải pháp cho nhu cầu này Tuy nhiên hầu hết các giải pháp chỉ là dùng lập trình viên gia công landingpage và thu phí hoặc cho người dùng chọn mẫu có sẵn và gia công cho phù hợp nhu cầu người dùng Điều này tương đối tốn nguồn lực của công ty gia công landingpage khiến mô hình kinh doanh không mở rộng nhanh được mà người dùng cũng chưa chắc đã truyền đạt hết ý tưởng của mình cho người gia công Vấn đề đặt ra là làm thế nào để có thể tăng tính tuỳ biến landingpage cho người dùng vừa có thể tập chung lại nguồn lực vào các công việc nâng cấp hệ thống và mở rộng mô hình kinh doanh
Để giải quyết vấn đề này, nhóm chúng em nảy ra ý tưởng là tạo ra một trang web có thể tuỳ ý chỉnh sửa các mẫu landingpage có sẵn từ hình ảnh, layout, tiêu đề, nội dung,…Sau khi sửa xong thì người dùng có thể xuất bản luôn landingpage của mình Về phía người dùng điều này giúp cho người dùng không cần biết công nghệ cũng có thể chỉnh sửa landingpage theo ý muốn, còn về phía công ty gia công landingpage thì có thể thu nhân lực về các công việc khác
để nâng cấp hệ thống và trải nghiệm dịch vụ Trong quá trình xây dựng hệ thống, chúng em cũng có xây dựng các tính năng quản lý cơ bản của nghiệp vụ quản lý yêu cầu
Đồ án phát triển theo ba bước được nêu ra trong quyển đồ án này lần lượt là các bước: Đánh giá - Phân tích hệ thống, Thiết kế và tinh chỉnh các thành phần của hệ thống và cuối dùng
là việc Xây dựng và đánh giá hệ thống Các công nghệ, phương pháp xử lý ở môi trường xử lý của hệ thống cũng được nêu rõ trong quyển đồ án ở các phần sau
Đồ án này phần nào củng cố các kiến thức đã được học về việc thiết kế và xây dựng một ứng dụng Bên cạnh đó, phát triển thêm các kĩ năng tự tìm hiểu, học hỏi thêm các kiến thức mới từ những công việc thực tế khi có thể tạo ra một hệ thống hoàn chỉnh, có thể áp dụng vào thực tế và có tính ứng dụng cao khi có thể sử dụng ứng dụng cập nhật tin tức hàng ngày nhanh chóng và hiệu quả hơn
Trang 13CHƯƠNG 1 CƠ SỞ LÝ THUYẾT
Chương 1 miêu tả tổng quan nhất về các ngôn ngữ, công cụ hỗ trợ, nêu ra các quy trình xây dựng lên hệ thống Cùng với đó là vấn đề chính của đồ án này, đó là quy trình chuyển từ một landingpage mẫu sang landingpage có thể tuỳ biến theo ý người dùng, lưu landingpage kết quả
và quản lý các yêu cầu đến landinpage
1.1 Tổng quan về ngôn ngữ và các công cụ hỗ trợ
1.1.1 Tổng quan về backend trong dự án: java và spring data jpa
Java là ngôn ngữ lập trình bậc cao, được phát triển bởi Sun Microsystems, do James
Gosling khởi xướng và phát hành vào năm 1995 như là một thành phần cốt lõi của nền tảng Java của Sun Microsystems (Java 1.0 [J2SE]) Java chạy trên rất nhiều nền tảng khác nhau, như Windows, Mac và các phiên bản khác nhau của UNIX
Phiên bản mới nhất của Java Standard Edition là Java SE 8 Với sự tiến bộ của Java và
sự phổ biến rộng rãi của nó, nhiều cấu hình đã được xây dựng để phù hợp với những loại nền tảng khác nhau Ví dụ: J2EE cho các ứng dụng doanh nghiệp, J2ME cho các ứng dụng di động
Spring Data jpa là một module của Spring Framework Mục đích của Spring Data JPA
là giảm thiểu việc thực hiện quá nhiều bước để có thể implement được JPA Spring Data JPA
là một phần của Spirng Data và nó hỗ trợ Hibernate 5, OpenJPA 2.4 và EclipseLink 2.6.1
Trong tương lai có thể chúng em sẽ tiếp tục backend của dự án tiến tới mô hình microservice để có thể sử dụng ngôn ngữ phù hợp với từng nghiệp vụ Ví dụ như dùng rabbitmq hoặc kafa để quản lý queue gửi mail, dùng redis để đếm số lượng truy cập landingpage để giảm tải cho database, dùng docker để đóng gói sản phẩm,…
1.1.2 Tổng quan về frontend trong dự án: html, css, bootstrap, javascript
html là viết tắt của cụm từ Hypertext Markup Language (tạm dịch là Ngôn ngữ đánh
dấu siêu văn bản) html được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và html không phải là ngôn ngữ lập trình
css là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm
và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (html) Nói ngắn gọn hơn
là ngôn ngữ tạo phong cách cho trang web Bạn có thể hiểu đơn giản rằng, nếu html đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử html đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…
JavaScript là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên
mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs) Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape
Trang 142
với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript Phiên bản mới nhất của JavaScript là ECMAScript 12[3] ECMAScript là phiên bản chuẩn hóa của JavaScript Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ không đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357
1.1.3 Các công cụ hỗ trợ
Trình hỗ trợ soạn thảo mã nguồn: Cho phép mọi người lập trình và chạy các mã
nguồn Visual Studio Code là một trong số đó Với những extention có thể tích hợp dễ dàng, giúp cho việc lập trình và thực thi mã nguồn tiện lợi, hiệu quả Đó là công cụ mạnh mẽ mà chúng em sẽ sử dụng xuyên suốt khi phát triển frontend của đề tài Còn về backend chúng em
sử dụng eclipse để lập trình java
Version Control System: là hệ thống kiểm soát các phiên bản phân tán mã nguồn mở
Các VCS sẽ lưu trữ tất cả các file trong toàn bộ dự án và ghi lại toàn bộ lịch sử thay đổi của file Mỗi sự thay đổi được lưu lại sẽ được và thành một version Chúng em sử dụng Git để làm công cụ quản lý vesion và làm việc nhóm
1.1.4 Lưu trữ dữ liệu
Hệ thống sử dụng lưu trữ dạng dữ liệu quan hệ Sử dụng phần mềm MySQL để quản lý
và truy vấn các thông tin trong hệ thống Phần mềm này thông dụng và dễ dàng sử dụng, triển khai cũng như là bảo trì và vận hành Với khối lượng thông tin không quá lớn, dữ liệu đơn giản,
độ phức tạp dữ liệu cũng thấp, nên nhóm quyết định sử dụng MySQL để quản lý cơ sở dữ liệu của hệ thống
1.2 Quy trình chuyển từ landingpage mẫu sang landingpage có thể tuỳ biến
cấu trúc chưa đủ gọn, hiện tượng thừa thiếu style, script, các thẻ html chưa hợp bố cùng thường thấy thường xuyên cho nên cần phải có bước tiền xử lý để chuẩn hoá các landingpage này nhằm mục đích tránh các style lạ khi chỉnh sửa landingpage không như ý muốn cũng như sẵn sàng hơn khi khách hàng có nhu cầu khó và cần đến nhân viên trợ giúp
script riêng để tránh việc style, script bị xung đột với trình chỉnh sửa landingpage
có yêu cầu chỉnh sửa landingpage thì backend sẽ trả ra một file html kèm với thư viện grapejs
đã được cài đặt theo mẫu sẵn, sau khi html và thư viện được tải xong thì sẽ tiếp tục yêu cầu lấy style và script của landingpage mẫu Sau quá trình này thì người dùng đã có thể nhìn và chỉnh sửa được landingpage mẫu và còn có thể chỉnh sửa trực tiếp được luôn
Trang 151.3 Quy trình xuất bản landingpage
landingpage mẫu và tuỳ chỉnh xong và ấn xuất bản thì frontend sẽ gửi nội dung người dùng tuỳ chỉnh rồi ghép với style, script gốc và lưu vào disk( Sau này có thể cài đặt thêm giao thức nfs
để chia sẻ kết quả giữa các server để mở rộng hệ thống) và lưu các metadata vào mysql
đã có một đường dẫn để chia sẻ landingpage, khi có yêu cầu vào đường dẫn này thì backend tự động truy xuất vào mysql và disk và landingpage cho người dùng
backend tự động lưu lại yêu cầu và thông báo cho chủ doanh nghiệp
CHƯƠNG 2 THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG
Chương 2 sẽ khái quát quá trình của nhóm đã làm trên thực tế, bao gồm các công việc phân tích, thiết kế và xây dựng hệ thống Đây là chương mang trọng tâm lớn với quy trình phát triển ứng dụng đã được học từ các môn trước Cùng với đó, ở trong chương này, cách hoạt động và
xử lý văn bản của hệ thống thu thập và tóm tắt thông tin cũng được nêu rõ, kèm với các hình ảnh hoạt động thực tế của hệ thống
2.1 Phân tích hệ thống
2.1.1 Biểu đồ phân rã chức năng
Hình 1 Biểu đồ phân rã chức năng
Hệ thống tạo & quản lý landingpage
Xoá & Sửa nội dung trước xuất bản
Xem trước landingpage
Quản lý landingpage
Cho phép mọi người truy cập
Xoá & Sửa nội dung sau xuất bản
Xử lý, thông báo yêu cầu, thống kê
Trang 164
Ở biểu đồ trên, hệ thống được chia ra làm 2 phân vùng, gồm tạo landingpage và quản
lú landingpage Với 2 phân vùng như trên, nó tương ứng với chức năng được nêu ra ở mỗi phần Với phần vùng tạo landingpage, người dùng ở đây là những chủ doanh nghiệp có thể tạo, xem trước, xuất bản landingpage Các landingpage được lưu vào disk và metadata vào database Ở phân vùng quản lý landingpage, các landingpage ở đây là các landingpage đã được xuất bản cho mọi người có thể truy cập, hệ thống có thể thống kê số lần truy cập, số lần yêu cầu, tỷ lệ yêu cầu/truy cập, phân quyền cho nhân viên xử lý yêu cầu, phân quyền nhân viên với các tính năng hệ thống, gửi mail, xem thông tin khách hàng,…
2.1.2 Biểu đồ Use Case tổng quát
Hình 2 Biểu đồ Use Case tổng quát
Với hệ thống ứng dụng được xây dựng, người dùng được chia làm 3 dạng với các Use Case tổng quát khác nhau gồm có: Chủ doanh nghiệp, nhân viên và khách hàng Với chủ doanh nghiệp thì sẽ có quyền admin và có thể thực thi tất cả các quyền hạn Với nhân viên thì mặc định sẽ có role employee các quyền hạn sẽ có thể được chỉnh sửa bảo chủ doanh nghiệp Với khách hàng thì có thể xem và tạo yêu cầu đến doanh nghiệp thông qua landingpage đã xuất bản
Trang 17hệ thống
Đăng kí để trở thành admin, xem landingpage đã xuất bản, gửi yêu cầu đến doanh nghiệp
2 Amin Là người hỗ
trợ quản lí nắm bắt các nghiệp vụ của ứng dụng
Đăng nhập, đăng xuất, tạo, quản lý landingpage, quản lý các yêu cầu, quản lý khách hàng, quản lý nhân viên
3 Employee Là đối tượng
được tạo bởi admin
Đăng nhập, đăng xuất, tạo, quản lý landingpage, quản lý các yêu cầu, quản lý khách hàng tuỳ theo phân quyền của admin
Trang 186
2.1.4.2 Biểu đồ UC xuất bản landingpage
Hình 4 Biểu đồ UC Xuất bản landingpage
Với người dùng là Admin( hoặc employee được phân quyền) có thể chọn landingpage mẫu, xuất bản, chỉnh sửa, xem trước xuất bản của mình
2.1.4.3 Biểu đồ UC quản lý landingpage
Hình 5 Biểu đồ UC quản lý tin tức
Với người dùng là Admin( hoặc employee được phân quyền) có thể chỉnh sửa landingpage sau xuất bản, xoá landingpage, xem các yêu cầu tương ứng với landingpage…
Trang 192.1.4.4 Biểu đồ UC quản lý yêu cầu
Hình 6 Biểu đồ UC quản lý yêu cầu
Với người dùng là Admin( hoặc employee được phân quyền) có thể tương tác với khác
hàng qua hình thức gửi mail, xem chi tiết yêu cầu, cập nhật trạng thái yêu cầu…
2.1.4.5 Biểu đồ UC quản lý Employee
Hình 7 Biểu đồ UC quản lý nhân viên
Với người dùng là Admin có thể tạo, chỉnh sửa, phân quyền lại cho nhân viên