BÀI TẬP MÔN HỌC PHÁT TRIỂN PHẦN MỀM ỨNG DỤNG ĐỀ TÀI XÂY DỰNG ỨNG DỤNG WEB TẠO VÀ QUẢN LÝ LANDINGPAGE

HỌC VIỆN KỸ THUẬT MẬT MÃ KHOA CÔNG NGHỆ THÔNG TIN BÀI TẬP MÔN HỌC PHÁT TRIỂN PHẦN MỀM ỨNG DỤNG ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG WEB TẠO VÀ QUẢN LÝ LANDINGPAGE Sinh viên thực hiện: Giảng viên hướng dẫn: DƯƠNG QUANG HUY AT150323 VŨ NHƯ QUANG AT150344 NGUYỄN VIỆT HỒNG AT150319 Nhóm 27 ThS BÙI THỊ NHƯ Hà Nội, 12-2021 LỜI NÓI ĐẦU Ngày nay, với xuất mạng xã hội kéo theo hình thành phương pháp kinh doanh online Khi lượng người dùng mạng xã hội tăng hình thức kinh doanh phát triển số lượng người tham gia kinh doanh online ngày đơng Do việc kinh doanh online trở nên khắc nghiệt đòi hỏi người kinh doanh phải có hệ thống đủ tốt để vừa kiếm lợi nhuận vừa phát triển thương hiệu Nhận thức nhu cầu xây dựng mô hình kinh doanh 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 người muốn tạo, sử dụng landing page giai đoạn thu hút lọc khách hàng hệ thống kinh doanh giúp chủ doanh nghiệp chọn tập khách hàng mục tiêu để chăm sóc từ gia tăng hiệu kinh doanh thương hiệu Trong đề tài này, chúng em tạo ứng dụng web cho người dùng chọn tự tuỳ chỉnh mẫu landing page có sẵn đem thu hút khách hàng Mỗi lần khách hàng truy cập đường link landingpage quan tâm đến sản phẩm hệ thống ghi nhận thơng tin khách hàng thống kê lại yêu cầu cho chủ doanh nghiệp Khi có lượng khách quan tâm chủ doanh nghiệp( nhân viên phân quyền) phát hành chiến dịch chăm sóc, khuyến mãi,… thông qua gmail Nội dung báo cáo chia làm 03 phần sau: Chương 1: Tổng quan đề tài Chương giới thiệu công nghệ ứng dụng phát triển đề tài chúng em Cách mà bọn em kết nối công nghệ lại với thành sản phầm Chương 2: Phân tích hệ thống, use case, luồng đề tài, trang giao diện cấu trúc lưu trữ Chương 3: Trình bày trình thực nghiệm đánh giá kết thu thực nghiệm Từ tìm hướng phát triển tương lai LỜI CAM ĐOAN Tôi 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 ThS Bùi Thị Như Tôi xin thay mặt, cam đoan tồn nội dung trình bày đồ án Xây dựng ứng dụng tổng hợp tóm tắt tin tức kết q trình tìm hiểu nghiên cứu chúng tơi Các liệu nêu đồ án hoàn toàn trung thực, phản ánh kết đo đạc thực tế Mọi thơng tin trích dẫn tn thủ quy định sở hữu trí tuệ; tài liệu tham khảo liệt kê rõ ràng Tơi xin chịu hồn toàn trách nhiệm với nội dung viết báo cáo Hà Nội, ngày 31 tháng 12 năm 2021 Người cam đoan Dương Quang Huy MỤC LỤC DANH MỤC HÌNH VẼ i DANH MỤC BẢNG BIỂU ii CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Tổng quan ngôn ngữ công cụ hỗ trợ 1.1.1 Tổng quan backend dự án: java spring data jpa 1.1.2 Tổng quan frontend dự án: html, css, bootstrap, javascript 1.1.3 Các công cụ hỗ trợ 1.1.4 Lưu trữ liệu 1.2 Quy trình chuyển từ landingpage mẫu sang landingpage tuỳ biến 1.3 Quy trình xuất landingpage CHƯƠNG THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG 2.1 Phân tích hệ thống 2.1.1 Biểu đồ phân rã chức 2.1.2 Biểu đồ Use Case tổng quát 2.1.3 Xác định actor chức 2.1.4 Biểu đồ Use case chi tiết 2.1.5 Đặc tả ca sử dụng 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 landingpage mẫu 16 2.2.4 Trang 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 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 2.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 chạy hệ thống giao diện người dùng 24 3.2 Kết chạy hệ thống tạo quản lý landingpage 24 3.2.1 3.2.2 Hệ thống tạo landingpage 24 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 DANH MỤC HÌNH VẼ Hình Biểu đồ phân rã chức Hình Biểu đồ Use Case tổng quát Hình Biểu đồ UC Customer Hình Biểu đồ UC Xuất landingpage Hình Biểu đồ UC quản lý tin tức Hình Biểu đồ UC quản lý yêu cầu Hình Biểu đồ UC quản lý nhân viên Hình Trang đăng nhập 15 Hình Trang dashboard 15 Hình 10 Trang landingpage mẫu 16 Hình 11 Trang 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 tuỳ chỉnh landindingpage 18 Hình 16 Cấu trúc 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 bảng role 22 Hình 23 Cấu trúc bảng role_permission 22 Hình 24 Cấu trúc bảng template 23 Hình 25 Cấu trúc bảng user 23 i DANH MỤC BẢNG BIỂU Bảng Chức actor Bảng Use Case đăng ký Bảng Use Case đăng nhập Bảng Use Case quên mật Bảng Use Case đăng xuất Bảng Use Case thay đổi thông tin cá nhân 10 Bảng Use Case tạo landingpage 10 Bảng Use Case quản lý landingpage 11 Bảng Use Case xoá landingpage 11 Bảng 10 Use Case xem 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 yêu cầu 12 Bảng 13 Use Case xoá landingpage 12 Bảng 14 Use Case đị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 ii Use Case Actor Brief Description Pre-conditions Basic Flows Alternative Flows Post-conditions Special Requiements Chỉ định nhân viên xử lý yêu cầu Employee, Admin Người dùng muốn định nhân viên xử lý yêu cầu Đăng nhập, chọn yêu cầu Người dùng chọn thành viên Hệ thống thay đổi nhân viên xử lý yêu cầu Không có Nhân viên xử lý yêu cầu thay đổi Khơng có Bảng 14 Use Case định nhân viên xử lý yêu cầu Use Case Actor Brief Description Pre-conditions Basic Flows Alternative Flows Post-conditions Special Requiements Quản lý nhân viên Employee, Admin Employee, Admin quản lý nhân viên Đăng nhập, có quyền quản lý nhân viên Người dùng chọn quản lý nhân viên Người dùng chọn nhận viên muốn quản lý Khơng có Nhân viên thay đổi thông tin Không đủ quyền hạn Bảng 15 Use Case quản lý nhân viên Use Case Actor Brief Desecription Pre-conditions Basic Flows Sửa thông tin nhân viên Employee, Admin Employee, Admin sửa thơng tin nhân viên Đăng nhập, có quyền quản lý nhân viên Chọn nhân viên muốn chỉnh sửa Thay đổi thông tin muốn sửa Hệ thống lưu thông tin sau chỉnh sửa Alternative Flows Nếu người dùng nhập thiếu thông tin, hệ thống báo lỗi gửi lại form Người dùng khơng nhập thơng tin chọn hủy Cập nhật thơng tin nhân viên Khơng có Post-conditions Special requiements Bảng 16 Use Case sửa thông tin nhân viên 13 Use Case Actor Brief Desecription Pre-conditions Basic Flows Alternative Flows Post-conditions Special requiements Chỉnh sửa vai trò nhân viên Employee, Admin Employee, Admin sửa vai trò nhân viên Đăng nhập, có quyền quản lý nhân viên Chọn nhân viên muốn chỉnh sửa Chọn vào vai trị Hệ thống hiển thị vai trò tạo Người dùng chọn vai trò Hệ thống cập nhật vai trị nhân viên Khơng có Nhân viên thay đổi vai trị Khơng có Bảng 17 Use Case chỉnh sửa vai trò nhân viên Use Case Actor Brief Desecription Pre-conditions Basic Flows Alternative Flows Post-conditions Special requiements Tạo vai trò Employee, Admin Employee, Admin muốn định nghĩa vai trị Đăng nhập, có quyền quản lý nhân viên Chọn mục tạo vai trò Nhập tên vai trò Chọn quyền hệ thống cho vai trị Hệ thống cập nhật thơng tin vai trị Khơng có Vai trị định nghĩa gán cho nhân viên Khơng có Bảng 18 Use Case tạo vai trò 14 2.2 Cấu trúc ứng dụng thử nghiệm 2.2.1 Trang đăng nhập Hình Trang đăng nhập 2.2.2 Trang dashboard Hình Trang dashboard Hình 2.7: Trang dashboard 15 2.2.3 Trang landingpage mẫu Hình 10 Trang landingpage mẫu 2.2.4 Trang yêu cầu Hình 2.8: Hình 11 Trang yêu cầu 16 2.2.5 Trang chi tiết yêu cầu Hình 12 Trang chi tiết yêu cầu 2.2.6 Trang chỉnh sửa vai trị Hình 13 Trang chỉnh sửa vai trò 17 2.2.7 Trang chỉnh sửa landingpage Hình 14 Trang chỉnh sửa vai trị 2.3 Thiết kế hệ thống lưu tuỳ chỉnh landingpage Hình 15 Luồng lưu tuỳ chỉnh landindingpage 2.3.1 Chuẩn hoá landingpage Ở giai đoạn chủ yếu công việc người lập trình Các landingpage cần chuẩn hố để phù hợp với nhu cầu người dùng, cấu trúc code chuẩn SEO, giao diện không bị vỡ thiết bị, đảm bảo an tồn hệ thống dùng thư viện ngồi 18 2.3.2 Tách style, javascript Giai đoạn yêu cầu bước chuẩn hoá phải chuẩn Khi bước chuẩn hố chuẩn lập trình viên cần tách script file riêng, style file riêng để tránh sung đột với thư viện grapejs 2.3.3 Sử dụng kỹ thuật chuyển từ thành vector số thực Sau bước bên bước lập trình viên cần đưa phần html vào thư viện grapejs, sau khai báo đường dẫn file style script cho grapejs Kết bước landingpage chỉnh sửa, tính tương tác với landingpage, xuất phải đảm bảo kết xuất giống với trình chỉnh sửa 2.3.4 Lưu metadata vào database, nội dung landingpage vào disk Vì nội dung landingpage dài, lưu vào database làm giảm hiệu suất database nên lưu nội dung landingpage vào disk metadata vào database Khi serving backend hệ thống dựa vào metadata database để tìm nội dung landingpage tương ứng để trả lại cho người dùng 2.4 Hệ thống lưu trữ Dưới danh sách bảng database, chi tiết bảng chỉnh nêu mục Hình 16 Cấu trúc liệu 19 2.4.1 Bảng customer Đây nơi chứa thông tin khách hàng doanh nghiệp Hình 17 Cấu trúc bảng customer 2.4.2 Bảng landingpage Đây nơi chứa thông tin metadata landingpage tạo, dùng để hiển thị truy xuất nội dung landingpage tương ứng Hình 18 Cấu trúc bảng landingpage 20 2.4.3 Bảng order_customer Bảng chứa thông tin yêu cầu khách hàng Hình 19 Cấu trúc bảng order_customer 2.4.4 Bảng orders Bảng chứa thông tin yêu cầu, yêu cầu có chứa nhiều khách hàng Hình 20 Cấu trúc bảng orders 21 2.4.5 Bảng permission Bảng chứa quyền định nghĩa từ trước, vai trị chứa nhiều quyền Backend dựa vào trường permission_no để xác định có cho phép truy cập hay khơng Hình 21 Cấu trúc bảng permission 2.4.6 Bảng role Bảng chứa thơng tin vai trị người dùng định nghĩa Hình 22 Cấu trúc bảng role 2.4.7 Bảng role_permission Bảng bảng bảng role permission liên kết nhiều nhiều Hình 23 Cấu trúc bảng role_permission 22 2.4.8 Bảng template Bảng bảng lưu lại metadata template để hiển thị truy xuất nội dung template tương ứng Hình 24 Cấu trúc bảng template 2.4.9 Bảng user Bảng bảng chưa người dùng hệ thống, password người dùng hash lưu lại không lưu dạng plaintext bảng Hình 25 Cấu trúc bảng user Chương 3: KẾT QUẢ THỰC NGHIỆM Sau hệ thống hoạt động thời gian, trường hợp lỗi khống chế sửa chữa Hệ thống đưa vào sử dụng dạng thử nghiệm cho thành viên 23 nhóm để kiểm tra kết thực nghiệm Và thành viên nhóm rút số kết 3.1 Kết chạy hệ thống giao diện người dùng Xử lý giao diện người dùng đảm bảo mục tiêu đề Các dạng người dùng liệt kê khâu thiết kế sử dụng hệ thống cách dễ dàng, thao tác không phức tạp, giúp người sử dụng dễ dàng làm quen sử dụng dễ dàng 3.2 Kết chạy hệ thống tạo quản lý landingpage Hệ thống chạy 24/7 với thông tin cập nhật kịp thời, trường hợp ngoại lệ sau đọc log chỉnh sửa 3.2.1 Hệ thống tạo landingpage Hệ thống cung cấp nhiều thêm landingpage mẫu tương lai gần Các landingpage chạy có đủ tính linh hoạt để người dùng tuỳ chỉnh, kết xuất giống với trình chỉnh sửa, khơng bị vỡ giao diện, trình chỉnh sửa thiết kế hợp lý khơng q khó dùng Khi xuất serving 3.2.2 Hệ thống quản lý landingpage Hệ thống quản lý landingpage tạo với đầy đủ tính tạo, xem, xửa xố, liệt kê Quản lý yêu cầu landingpage với tính xem thông tin người dùng, truy xuất lại landinpage yêu cầu, chọn nhân viên xử lý yêu cầu, cập nhật trạng thái yêu cầu, gửi mail cho nhiều người dùng, phân quyền nhân viên hệ thống 24 KẾT LUẬN Kết luận chung Ngoài kết hệ thống đạt được, chúng em rèn luyện thêm khả làm việc nhóm, tư phát triển phần mềm, tư phát triển hệ thống, hiểu thêm yêu cầu chủ doanh nghiệp để định hướng phát triển sau Vì khơng có nhiều nguồn lực phát triển nên hệ thống cịn nhiều tính cần phát triển việc tổ chức hệ thống lượng request lớn chưa đáp ứng Hướng phát triển Trong tương lai chúng em tiếp tục lắng nghe nhu cầu khách hàng tập khách hàng song song với việc hoàn thiện, phát triển hệ thống Về phần phát triển, hoàn thiện hệ thống chúng em tạo thêm nhiều mẫu landingpage cho người dùng chọn, phát triển công cụ monitor hệ thống để phát lỗi kịp thời, áp dụng cơng cụ nghệ tăng tính sẵn sàng cho hệ thống load balancer, redis, rabbitmq,… Ngồi cơng cụ tăng tính bảo mật cho hệ thống tìm hiểu áp dụng song song 25 PHÂN CƠNG CƠNG VIỆC [1] Dương Quang Huy: Trưởng nhóm – Xử lý backend, phát triển trình chỉnh sửa landingapge [2] Vũ Như Quang: Phát triển frontend [3] Nguyễn Việt Hoàng: Cùng phát triển frontend làm tài liệu 26