XÂY DỰNG CỔNG THÔNG TIN SỰ KIỆN SINH VIÊN VÀ DỰ ÁN GÂY QUỸ

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN *** BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH CÔNG NGHỆ PHẦN MỀM ĐỀ TÀI: XÂY DỰNG CỔNG THÔNG TIN SỰ KIỆN SINH VIÊN VÀ DỰ ÁN GÂY QUỸ Giáo viên hướng dẫn: TS Nguyễn Văn Hiệu Sinh viên thực hiện: Đỗ Minh Nhật Trần Hữu Thắng 15T1 15T1 102150055 102150068 Nguyễn Đình Hoan 15T1 Nguyễn Đức Văn 15T1 102150034 102150081 Lê Văn Mẫn 102150049 15T1 Nhóm: 15.11A Đà Nẵng, tháng 04 năm 2019 Mục lục GVHD: Nguyễn Văn Hiệu MỤC LỤC Nội dung MỤC LỤC DANH MỤC HÌNH ẢNH MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đề tài 1.2 Giới thiệu SVdanang 1.3 Nhu cầu người dùng CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Spring boot 2.1.1 2.1.2 2.1.3 2.1.4 Giới thiệu Phiên Tạo Spring boot application Giới thiệu RESTful Webservice 2.2 Angular 2.2.1 Giới thiệu 2.2.2 Các đặc tính Angular 2.2.3 Các thành phần Angular 2.3 Android 11 2.3.1 Giới thiệu 11 2.3.2 Cơ chế hoạt động 12 2.3.3 Môi trường phát triển 13 CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 15 3.1 Phân tích thiết kế hệ thống 15 3.1.1 Đặc tả chức hệ thống 15 3.1.2 Phân tích đối tượng 15 3.1.3 Hệ thống sơ đồ Use-case 16 3.1.4 Cơ sở liệu 18 CHƯƠNG XÂY DỰNG CHƯƠNG TRÌNH 20 4.1 Xây dựng hệ thống 20 4.1.1 Phần Back-End 20 4.1.2 Phần Front-End website 29 4.1.3 Phần Front-End application 44 4.2 Bảng phân công công việc 48 CHƯƠNG TRIỂN KHAI HỆ THỐNG 49 5.1 Kế hoạch làm việc 49 5.2 Triển khai hệ thống API VPS 51 5.2.1 Java SE Runtime Environment 51 5.2.2 Apache Tomcat 51 5.2.3 Triển khai Database MySQL 52 5.2.4 Triển khai Spring Boot Application Tomcat 52 5.3 Triển khai hệ thống website trang public 54 5.3.1 Build dự án Angular với cấu hình product 54 5.3.2 Sao chép toàn output folder lên folder Web Server 54 Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang Mục lục GVHD: Nguyễn Văn Hiệu 5.3.3 Cấu hình Server điều hướng request đến file index.html 55 5.4 Quá trình triển khai dự án thông qua Trello 56 CHƯƠNG KẾT QUẢ SẢN PHẨM VÀ ĐÁNH GIÁ 57 6.1 Kết sản phẩm 57 6.1.1 Trang Public 57 6.1.2 Trang quản lý 63 6.1.3 Ứng dụng di động 67 6.2 Kết luận hướng phát triển 71 6.2.1 Đạt 71 6.2.2 Chưa đạt 71 6.2.3 Hướng phát triển 71 Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang Mục lục GVHD: Nguyễn Văn Hiệu DANH MỤC HÌNH ẢNH Hình Thành phần Angular Hình Các thành phần Android 12 Hình Sơ dồ Use case Admin Svdanang 16 Hình Sơ đồ Use case trưởng ban 17 Hình Sơ đồ Use case thành viên diễn đàn 17 Hình Sơ đồ Use case người dùng 18 Hình Cơ sở liệu 19 Hình Quá trình CRUD với phương thức API Mapping 22 Hình Thanh tốn Paypal SDK 22 Hình 10 JWT framework 24 Hình 11 Hoạt động JWT 25 Hình 12 JWT trả đăng nhập 26 Hình 13 Swagger dự án 28 Hình 14 Cách tổ chức ứng dụng trang quản lý 29 Hình 15 Core Module trang quản lý 30 Hình 16 Shared Module trang quản lý 31 Hình 17 User Module trang quản lý 32 Hình 18 Role Module trang quản lý 32 Hình 19 Event Module trang quản lý 33 Hình 20 Project Module trang quản lý 34 Hình 21 Blogpost Module trang quản lý 35 Hình 22 Meeting Module trang quản lý 35 Hình 23 Profile Module trang quản lý 36 Hình 24 Dashboard Module trang quản lý 36 Hình 25 Cách tổ chức ứng dụng cho trang public 37 Hình 26 Core Module trang public 38 Hình 27 Shared Module trang public 38 Hình 28 Home Module trang public 39 Hình 29 Register-Loing Module trang public 40 Hình 30 Blog Module trang public 41 Hình 31 Event Module trang public 41 Hình 32 Fund - Raising Project Module trang public 42 Hình 33 Me Module trang public 43 Hình 34 Java SE Runtime Environment 51 Hình 35 Apache Tomcat 52 Hình 36 Triển khai database MySQL 52 Hình 37 Spring Boot Application Tomcat 52 Hình 38 Kết việc Update packaging JAR into WAR 53 Hình 39 Triển khai Tomcat 53 Hình 40 Kết thực triển khai Tomcat 54 Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang Mục lục GVHD: Nguyễn Văn Hiệu Hình 41 Giao diện cơng cụ FileZilla FTP Client 55 Hình 42 Triển khai dự án thơng qua Trello 56 Hình 43 Trang chủ 57 Hình 44 Trang danh sách viết 58 Hình 45 Trang chi tiết viết 58 Hình 46 Trang danh sách kiện 59 Hình 47 Trang chi tiết kiện 59 Hình 48 Form đăng kí tham gia kiện 60 Hình 49 Trang danh sách dự án gây quỹ 60 Hình 50 Trang chi tiết dự án gây quỹ 61 Hình 51 Form ủng hộ dự án gây quỹ 61 Hình 52 Trang toán ủng hộ (Paypal) 62 Hình 53 Trang quản lý thông tin cá nhân người dùng 62 Hình 54 Trang liên hệ 63 Hình 55 Trang quản lý 63 Hình 56 Trang tạo người dùng 64 Hình 57 Trang quản lý vai trò 64 Hình 58 Tạo vai trò 65 Hình 59 Trang phân quyền cho vai trò 65 Hình 60 Trang quản lý đăng 66 Hình 61 Trang tạo đăng 66 Hình 62 Quản lý lịch họp 67 Hình 63 Trang tạo họp 67 Hình 64 Trang xem dự án gây quỹ di động 68 Hình 65 Trang chỉnh sửa thông tin cá nhân di động 68 Hình 66 Trang xem thơng tin cá nhân di động 69 Hình 67 Thanh Sidebar ứng dụng di động 69 Hình 68 Trang chủ ứng dụng 70 Hình 69 Ủng hộ dự án di động 70 Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang Mục lục GVHD: Nguyễn Văn Hiệu MỞ ĐẦU Lời đầu tiên, chúng em muốn gửi lời cảm ơn biết ơn chân thành tới tất người hỗ trợ, giúp đỡ chúng em kiến thức tinh thần trình thực đồ án Trước hết chúng em xin chân thành cảm ơn Thầy Nguyễn Văn Hiệu, Giảng viên Khoa Công Nghệ Thông Tin, Trường Đại Học Bách Khoa – Đại Học Đà Nẵng, người trực tiếp hướng dẫn, nhận xét, giúp đỡ chúng em suốt trình thực đồ án Xin chân thành cảm ơn ban giám hiệu nhà trường, thầy cô Khoa Cơng Nghệ Thơng Tin phòng ban nhà trường tạo điều kiện tốt cho chúng em bạn khác suốt thời gian làm đồ án Với đề tài thiết thực hữu ích cho xã hội, chúng em làm việc cách đầy nỗ lực với mục tiêu sản phẩm đến với người dùng cách dễ dàng đầy hấp dẫn Tuy nhiên với vốn kiến thức hạn hẹp, thời gian làm việc có hạn nên chúng em khơng tránh khỏi thiếu sót Chúng em mong nhận ý kiến, đóng góp, phê bình Q thầy để sản phầm hồn thiện Đó hành trang quý giá để chúng em tiếp tục hồn thiện kiến thức sau Em xin chân thành cảm ơn Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang GVHD: Nguyễn Văn Hiệu CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đề tài Xây dựng website ứng dụng di động cho cổng thông tin kiện sinh viên dự án gây quỹ cộng đồng dành cho diễn đàn Svdanang 1.2 Giới thiệu SVdanang Diễn đàn Svdanang diễn đàn dành cho sinh viên Đà Nẵng, tổ chức phi lợi nhuận thành lập 15 năm.Tổ chức thường tạo kiện dành cho sinh viên đăng kí tham gia dự án cộng đồng cần giúp đỡ gây quỹ từ người Mục tiêu diễn đàn cổng thông tin cho sinh viên học sinh tiếp cận với thông tin dự án cộng đồng cách nhanh chóng thuận lợi 1.3 Nhu cầu người dùng  Diễn đàn cần tạo website ứng dụng để cập nhật thơng tin chương trình kiện diễn đàn đến với người Mọi người đăng kí trực tuyến ủng hộ cho dự án cộng đồng Nhận đọc tin tức hoạt động sinh viên nhanh thuận tiện Thành viên diễn đàn quản lý thành viên nhân diễn đàn, tạo họp nhanh tiện lợi  Hệ thống phục vụ cho đối tượng người dùng chính: o Admin diễn đàn o Thành viên diễn đàn o Người dùng Sinh viên, người ủng hộ…  Website cho phép người dùng lưu trữ điền trực tiếp thơng tin vào Form đăng kí tuyển tình nguyện viên dành cho kiện diễn đàn Svdanang, người dùng ủng hộ trực tuyến cho dự án gây quỹ cộng đồng tổ chức diễn đàn Svdanang  Thành viên diễn đàn tiếp cận với lịch họp nắm bắt thông tin người đăng ký thành viên diễn đàn Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang GVHD: Nguyễn Văn Hiệu CHƯƠNG CƠ SỞ LÝ THUYẾT 2.1 Spring boot 2.1.1 Giới thiệu Spring boot module Spring Framework cung cấp tính RAD(Rapid Application Development) để phát triển ứng dụng nhanh Nếu trước đây, công đoạn khởi tạ o dự án Spring vất vả từ việc khai báo dependency file pom.xml   cấu hình XML annotation phức tạp, với Spring Boot, tạo ứng dụng Spring cách nhanh chóng cấu hình c ũng đơn giản Dưới số tính bật Spring Boot:  Có tính Spring Framework  Tạo ứng dụng độc lập, chạy java -jar (cho java web)  Cung cấp loạt tính phi chức phổ biến cho dự án lớn nhúng trực tiếp web server Tomcat, Jetty,…  Cấu hình ít, tự động cấu hình (Giảm thời gian viết code, tăng suất)  Không yêu cầu XML config  Cung cấp nhiều plugin  Chuẩn cho Microservices (Cloud support; giảm việc setup, config; thư viện hỗ trợ…) 2.1.2 Phiên Phiên 2.1.x 2.1.3 Tạo Spring boot application Để tạo Spring boot application cần có thành phần sau:  Java 1.8  Gradle 2.3+ Maven 3.0+  Spring Framework 5.0.0.BUILD-SNAPSHOT  An IDE (Spring Tool Suit) – extention eclipse 2.1.4 Giới thiệu RESTful Webservice 2.1.4.1 Giới thiệu RESTful Web Service Web Service viết dựa kiến trúc REST REST sử dụng rộng rãi thay cho Web Service dựa SOAP WSDL RESTful WebService nhẹ, dễ dàng mở rộng bảo trì REST định nghĩa Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang GVHD: Nguyễn Văn Hiệu quy tắc kiến trúc để bạn thiết kế Web services, trọng vào tài nguyên hệ thống, bao gồm trạng thái tài nguyên định dạng truyền tải qua HTTP, viết nhiều ngôn ngữ khác Nếu tính theo số dịch vụ mạng sử dụng, REST lên vài năm qua mơ hình thiết kế dịch vụ chiếm ưu Trong thực tế, REST có ảnh hưởng lớn gần thay SOAP WSDL đơn giản dễ sử dụng nhiều 2.1.4.2 Xây dựng RESTful Webservice Quy tắc để tạo ứng dụng WebService tuân thủ quy tắc sau thiết kế sau:  Sử dụng phương thức HTTP cách rõ ràng Bạn muốn thực thao tác liệu cần lưu ý thao tác sau: - Để tạo tài nguyên máy chủ, bạn cần sử dụng phương thức POST - Để truy xuất tài nguyên, sử dụng GET - Để thay đổi trạng thái tài nguyên để cập nhật nó, sử dụng PUT - Để huỷ bỏ xoá tài nguyên, sử dụng DELETE - Phi trạng thái  Một đặc điểm REST phi trạng thái (stateless), có nghĩa khơng lưu giữ thông tin client Chẳng hạn bạn vừa gửi yêu cầu để xem trang thứ tài liệu, bạn muốn xem trang tiếp theo.REST khơng lưu trữ lại thơng tin trước phục vụ bạn Điều có nghĩa REST không quản lý phiên làm việc (Session)  Hiển thị cấu trúc thư mục URls - REST đưa cấu trúc để người dùng truy cập vào tài ngun thơng qua URL, tài nguyên tất mà bạn gọi tên (Video, ảnh, báo cáo thời tiết, ) - Một vài nguyên tắc bổ sung để lưu ý nói cấu trúc địa RESTful Web service là: • Giấu tài liệu mở rộng gốc máy chủ (.jsp, php, asp), có, bạn giấu số thứ mà không cần thay đổi địa Urls • Để thứ chữ thường • Thay khoảng trống gạch chân hoặc gạch nối (một hai loại) • Tránh chuỗi u cầu nhiều tốt • Thay sử dụng mã(404 Not Found) yêu cầu địa cho phần đường dẫn, luôn cung cấp trang mặc định tài nguyên phản hồi  Truyền tải JavaScript Object Notation (JSON), XML hai Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang GVHD: Nguyễn Văn Hiệu Khi Client gửi yêu cầu tới web service thường truyền tải dạng XML JSON thông thường nhận với hình thức tương tự - Đơi Client định kiểu liệu nhận mà mong muốn (JSON, XML, ), định gọi kiểu MINE, gửi kèm phần HEADER request - Dưới kiểu MINE phổ biến thường sử dụng với REST service - MIME-Type JSON XML XHTML Content-Type application/json application/xml application/xhtml+xml 2.2 Angular 2.2.1 Giới thiệu Angular tảng phát triển dành cho xây dựng ứng dụng web mobile desktop 2.2.2 Các đặc tính Angular Đa tảng Tốc độ, hiệu hiệu suất Hỗ trợ phát triển tồn diện 2.2.3 Các thành phần Angular Hình Thành phần Angular Module:  Giúp tổ chức ứng dụng thành khối chức liên kết  Mỗi ứng dụng phải có module, thường AppModule Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang GVHD: Nguyễn Văn Hiệu Hình 44 Trang danh sách viết Hình 45 Trang chi tiết viết Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 58 GVHD: Nguyễn Văn Hiệu Hình 46 Trang danh sách kiện Hình 47 Trang chi tiết kiện Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 59 GVHD: Nguyễn Văn Hiệu Hình 48 Form đăng kí tham gia kiện Hình 49 Trang danh sách dự án gây quỹ Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 60 GVHD: Nguyễn Văn Hiệu Hình 50 Trang chi tiết dự án gây quỹ Hình 51 Form ủng hộ dự án gây quỹ Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 61 GVHD: Nguyễn Văn Hiệu Hình 52 Trang tốn ủng hộ (Paypal) Hình 53 Trang quản lý thông tin cá nhân người dùng Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 62 GVHD: Nguyễn Văn Hiệu Hình 54 Trang liên hệ 6.1.2 Trang quản lý Hình 55 Trang quản lý Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 63 GVHD: Nguyễn Văn Hiệu Hình 56 Trang tạo người dùng Hình 57 Trang quản lý vai trò Báo cáo đồ án chun ngành Cơng nghệ phần mềm Trang 64 GVHD: Nguyễn Văn Hiệu Hình 58 Tạo vai trò Hình 59 Trang phân quyền cho vai trò Báo cáo đồ án chun ngành Cơng nghệ phần mềm Trang 65 GVHD: Nguyễn Văn Hiệu Hình 60 Trang quản lý đăng Hình 61 Trang tạo đăng Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 66 GVHD: Nguyễn Văn Hiệu Hình 62 Quản lý lịch họp Hình 63 Trang tạo họp 6.1.3 Ứng dụng di động Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 67 GVHD: Nguyễn Văn Hiệu Hình 64 Trang xem dự án gây quỹ di động Hình 65 Trang chỉnh sửa thơng tin cá nhân di động Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 68 GVHD: Nguyễn Văn Hiệu Hình 66 Trang xem thơng tin cá nhân di động Hình 67 Thanh Sidebar ứng dụng di động Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 69 GVHD: Nguyễn Văn Hiệu Hình 68 Trang chủ ứng dụng Hình 69 Ủng hộ dự án di động Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 70 GVHD: Nguyễn Văn Hiệu 6.2 Kết luận hướng phát triển 6.2.1 Đạt  Thông qua đồ án nhóm giải u cầu đặt hệ thống dùng cho diễn đàn sinh viên Đà Nẵng, bao gồm chức dành cho người dùng, khách vãng lai chức dành cho người quản trị, thành viên diễn đàn  Các chức viết, kiện, dự án gây quỹ hoạt động tốt bên phần quản trị lẫn phần public  Phần phân quyền triển khai rõ ràng, cụ thể  Chức ủng hộ cho dự án gây quỹ có thơng qua bên thứ ba (PayPal) hoạt động ổn định  Là dự án có người sử dụng thực quy trình phát triển sản phẩm cơng nghệ  Cả nhóm thực tiến độ làm việc nhóm tinh thần tự giác cao 6.2.2 Chưa đạt     Giao diện website chưa responsive tốt hiển thị di động Ứng dụng di động chưa có chức quản lý cho thành viên diễn đàn Chức thông báo đến thành viên diễn đàn chưa phát triển Tính ổn định số lượng người sử dụng chưa cao 6.2.3 Hướng phát triển Đồ án giải yêu cầu đặt ban đầu, song phát triển thêm nhiều tính giải số đề tồn đọng, chẳng hạn như:  Người dùng quản lý kiện mà đăng ký/tham gia, quản lý lần ủng hộ vào dự án gây quỹ  Người dùng nhận thơng báo/nhắc nhở kiện diễn  Người dùng liên hệ trực tiếp với thành viên diễn đàn chức chat trực tiếp hệ thống  Người dùng ủng hộ dự án nhiều phương thức khác  Tối ưu hóa phần giao diện hơn, giúp tăng trải nghiệm người dùng  Người dùng đăng nhập bình luận bày tỏ cảm xúc viết tin tức  Người dùng kéo thả/co giãn ảnh đại diện cách linh hoạt khung ảnh, ảnh đại diện đưa lên bị gắn cứng khung  Tích hợp nhiều tính mặt giải trí mạng xã hội hướng cho diễn đàn Svdanang Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 71 GVHD: Nguyễn Văn Hiệu TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt [1] Giáo trình lập trình Android – FPT Software [2] Giáo trình lập trình Android – ThS Nguyễn Văn Hiệp Tài liệu khác [1] Website: http://angular.io/ [2] Website: http:// stackoverflow.com/ [3] Website: https://vi.wikipedia.org/ [4] Website: https://www.tutorialspoint.com/spring_boot/ [4] Website: https://www.w3schools.com/angular/ Báo cáo đồ án chuyên ngành Công nghệ phần mềm Trang 72 ... viết • Quản lý thơng tin người đăng kí tham gia kiện • Xem đăng kiện, dự án gây quỹ • Tạo đăng kiện, dự án gây quỹ • Xem lịch họp báo vắng • Xem kế hoạch kiện • Ủng hộ dự án gây quỹ • Quản lý người... cáo đồ án chuyên ngành Công nghệ phần mềm Trang GVHD: Nguyễn Văn Hiệu CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI 1.1 Đề tài Xây dựng website ứng dụng di động cho cổng thông tin kiện sinh viên dự án gây quỹ cộng... động sinh viên o Cung cấp thông tin kiện diễn tổ chức diễn đàn Svdanang o Cung cấp thông tin dự án vị cộng đồng cần gây quỹ ủng hộ o Đăng kí tham gia hoạt động kiện Svdanang tổ chức o Thanh toán