(Đồ án hcmute) xây dựng ứng dụng hỗ trợ đoàn viên

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG ỨNG DỤNG HỖ TRỢ ĐOÀN VIÊN GVHD: NGUYỄN TRẦN THI VĂN SVTH: VÕ HỒNG PHÚC MSSV: 16110423 SVTH: ĐẶNG THỊ DUYÊN MSSV: 16110299 SKL007093 Tp Hồ Chí Minh, năm 2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CƠNG NGHỆ THƠNG TIN BỘ MƠN CƠNG NGHỆ PHẦN MỀM - - VÕ HỒNG PHÚC: 16110423 ĐẶNG THỊ DUYÊN: 16110299 Đề tài: XÂY DỰNG ỨNG DỤNG HỖ TRỢ ĐỒN VIÊN KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN ThS NGUYỄN TRẦN THI VĂN KHÓA 2016 – 2020 an TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN CÔNG NGHỆ PHẦN MỀM - - VÕ HỒNG PHÚC: 16110423 ĐẶNG THỊ DUYÊN: 16110299 Đề tài: XÂY DỰNG ỨNG DỤNG HỖ TRỢ ĐỒN VIÊN KHĨA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIẢNG VIÊN HƯỚNG DẪN ThS NGUYỄN TRẦN THI VĂN KHÓA 2016 – 2020 an ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Võ Hồng Phúc MSSV 1: 16110423 Họ tên Sinh viên 2: Đặng Thị Duyên MSSV 2: 16110299 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng hỗ trợ đoàn viên Họ tên Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên hướng dẫn (Ký & ghi rõ họ tên) an năm 2020 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Võ Hồng Phúc MSSV 1: 16110423 Họ tên Sinh viên 2: Đặng Thị Duyên MSSV 2: 16110299 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng hỗ trợ đoàn viên Họ tên Giáo viên phản biện: ……………………………………………………… NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng năm 2020 Giáo viên phản biện (Ký & ghi rõ họ tên) an LỜI CẢM ƠN Lời nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với Khoa Công Nghệ Thông Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh tạo điều kiện cho nhóm chúng em học tập, phát triển tảng kiến thức sâu sắc thực đề tài Bên cạnh nhóm chúng em xin gửi đến thầy Nguyễn Trần Thi Văn lời cảm ơn sâu sắc Trải qua trình dài học tập thực đề tài thời gian qua Thầy tận tâm bảo nhiệt tình nhóm chúng em suốt trình từ lúc bắt đầu kết thúc đề tài Nhờ có tảng kiến thức chuyên ngành vững cộng thêm với kinh nhiệm u cầu thực tế ngồi xã hội thơng qua việc học trường chuyến thực tế thu thập ý kiến người dùng Tập thể thầy cô Khoa Công Nghệ Thông Tin đặc biệt thầy Nguyễn Trần Thi Văn tặng cho chúng em khối lượng kiến thức kinh nghiệm khổng lồ chuyên ngành công việc tương lai Đặc biệt điều giúp thúc chúng em hoàn thành đề tài Đây hành trang vô lớn chúng em trước bước sống Tuy nhiên lượng kiến thức vô tận với khả hạn hẹp chúng em cố gắng để hoàn thành cách tốt Chính việc xảy thiếu sót điều khó tránh khỏi Chúng em hi vọng nhận góp ý tận tình q thầy(cơ) qua chúng em rút học kinh nghiệm hoàn thiện cải thiện nâng cấp lại sản phẩm cách tốt đẹp Chúng em xin chân thành cảm ơn! Nhóm thực Võ Hồng Phúc – 16110423 Đặng Thị Duyên – 16110299 an Trường ĐH Sư Phạm Kỹ Thuật TP.HCM Khoa Cơng nghệ Thơng tin ĐỀ CƯƠNG KHĨA LUẬN TỐT NGHIỆP Họ tên Sinh viên 1: Võ Hồng Phúc MSSV 1: 16110423 Họ tên Sinh viên 2: Đặng Thị Duyên MSSV 2: 16110299 Thời gian làm khóa luận: Từ 30/03/2020 đến 19/07/2020 (15 tuần) Chuyên ngành: Công nghệ phần mềm Tên khóa luận: Xây dựng ứng dụng hỗ trợ đoàn viên Giáo viên hướng dẫn: ThS Nguyễn Trần Thi Văn Nhiệm vụ khóa luận: Lý thuyết: Tìm hiểu cơng nghệ: Spring Framework, ReactJS, React Native, Json Web Token, Hibernate, Google Firebase Thực hành: • Sử dụng Spring Framework để viết APIs cho module hệ thống quản lý • Sử dụng Hibernate kết nối thao tác với hệ quản trị sở liệu MongoDB • Sử dụng Json Web Token làm security cho hệ thống • Sử dụng ReactJS làm Framework để thiết kế xử lý giao diện web cho người dùng thao tác • Sử dụng React Native làm Framework để thiết kế xử lý giao diện mobile • Sử dụng Google Firebase để gửi thơng báo tức thời cho ứng dụng Đề cương khóa luận PHẦN MỞ ĐẦU PHẦN NỘI DUNG CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 SPRING FRAMEWORK – SPRING BOOT 1.2 HIBERNATE 1.3 REACT JS an 1.4 JSON WEB TOKEN 1.5 REACT NATIVE 1.6 GOOGLE FIRE 1.7 MONGODB CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU 2.1 KHẢO SÁT HIỆN TRẠNG 2.2 XÁC ĐỊNH YÊU CẦU 2.3 MƠ HÌNH HĨA U CẦU CHƯƠNG THIẾT KẾ PHẦN MỀM 3.1 THIẾT KẾ HỆ THỐNG 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 3.3 THIẾT KẾ GIAO DIỆN CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 5.1 CÀI ĐẶT ỨNG DỤNG 5.2 KIỂM THỬ PHẦN MỀM PHẦN KẾT LUẬN NHỮNG KẾT QUẢ ĐẠT ĐƯỢC ƯU ĐIỂM ĐỀ TÀI NHƯỢC ĐIỂM ĐỀ TÀI HƯỚNG PHÁT TRIỂN TÀI LIỆU THAM KHẢO PHỤ LỤC PHỤ LỤC an KẾ HOẠCH THỰC HIỆN Tuần Ngày Nhiệm vụ (Công việc dự kiến) 1+2 30/03 – 12/04 - 3+4+5 13/04 – 03/05 - - Khảo sát trạng Thiết kế prototype Thiết kế usecase mơ hình hóa yêu cầu Thiết kế sở liệu Thiết kế giao diện thiết kế xử lý Tìm hiểu Mobile CrossPlatform ReactNative Tìm hiểu Jeact JS cho Website Tìm hiểu Java Springboot cho phát triển APIs Sản phẩm Sinh viên thực Duyên - - Tìm hiểu JSON WEB TOKEN để ứng dụng vào hệ thống Tìm hiểu MongoDB Tìm hiểu cách xây dựng Restful API Tiến hành phát triển API dựa document Tìm hiểu Firebase áp dụng vào hệ thống Xây dựng giao diện thiết bị di động ReactNative Xây dụng giao diện web admin ReactJS Xây dựng class xử lý APIs với Java SpringBoot Xây dựng document Resful API ứng dụng Xây dụng API với database MongoDB thiết kế Phúc 6+7 +8 04/05 – 24/05 - 9+10 25/05 – 07/06 - 11+12 08/06 – 21/06 Kết hợp thành phần xây dựng (Giao diện, API, Database) Ứng dụng hoàn thành Dun +Phúc Tìm hiểu xây dựng hệ thống hồn thiện Ứng dụng hoàn thành Phúc 13 22/06 – 28/06 Kiểm thử chương trình, tiến hành sửa lỗi Chỉnh sửa tổng hợp báo cáo Ứng dụng kiểm thử sửa lỗi Duyên 14 29/06 12/07 - 15 13/07 – 19/07 Hồn tất chương trình Bản báo cáo hoàn chỉnh để in nộp Duyên + Phúc Phúc Duyên Tp Hồ Chí Minh, ngày…tháng…năm 2020 Giáo viên hướng dẫn Người viết đề cương (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) an Ghi MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP KẾ HOẠCH THỰC HIỆN DANH SÁCH BẢNG BIỂU DANH SÁCH HÌNH PHẦN MỞ ĐẦU 1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI ĐỐI TƯỢNG NGHIÊN CỨU PHẠM VI NGHIÊN CỨU PHÂN TÍCH CÁC ỨNG DỤNG CĨ LIÊN QUAN KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 SPRING FRAMEWORK – SPRING BOOT [1] 1.2 HIBERNATE [2] 1.3 REACT JS [3] 1.4 JSON WEB TOKEN [4] 1.5 REACT NATIVE [5] 1.6 GOOGLE FIREBASE [6] 10 1.7 MONGO DB [7] .11 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MƠ HÌNH HĨA U CẦU 12 2.1 KHẢO SÁT HIỆN TRẠNG 12 2.2 XÁC ĐỊNH YÊU CẦU 13 2.2.1 Yêu cầu chức nghiệp vụ 13 2.2.2 Yêu cầu chức hệ thống 14 2.2.2 Yêu cầu phi chức 14 2.3 MƠ HÌNH HÓA YÊU CẦU 15 2.3.1 Lược đồ Usecase 15 2.3.1.1 Sơ đồ usecase tổng quan 15 2.3.1.2 Sơ đồ usecase chi tiết quản lý năm học 15 2.3.1.3 Sơ đồ usecase chi tiết quản lý học kì 16 2.3.1.4 Sơ đồ usecase chi tiết quản lý tài khoản .16 2.3.1.5 Sơ đồ usecase chi tiết quản lý hoạt động 16 2.3.2 Đặc tả chi tiết usecase 17 CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 31 3.1 THIẾT KẾ HỆ THỐNG 31 3.2 THIẾT KẾ CƠ SỞ DỮ LIỆU 31 an PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC - Xây dựng thành công website admin quản trị app cho người dùng với tính năng: quản lý hoạt động, quản lý thông tin sinh viên, danh sách sinh viên tham gia hoạt động theo cấp - Tìm hiểu tính vận dụng thành công ngôn ngữ mới, công nghệ đại: Spring Boot, React JS, Mongo DB, Google Firebase - Sản phẩm đưa lên host publish cửa hàng ứng dụng để người dùng cài đặt sử dụng - Hiểu quy trình xây dựng ứng dụng thực hành cơng việc làm nhóm - Nâng cao khả nghiên cứu, bổ sung kiến thức cách sử dụng công nghệ ƯU ĐIỂM - Giao diện đơn giản, dễ dàng sử dụng, đặc biệt với người dùng - Phần quản lý Admin hồn thiện, có tính xuất file excel gửi email thông báo, đồng thời có khả bảo trì nâng cấp - Có tính phục vụ tốt cho mục đích đề tài: đăng ký hoạt động, xem lại hoạt động đăng ký, đánh giá - Sử dụng công nghệ đại, phân chia cấu trúc FrontEnd – BackEnd rõ ràng, hỗ trợ APIs tương ứng, đảm bảo luồng liệu hoạt động cách xác - Việc đưa ứng dụng lên host publish cửa hàng ứng dụng giúp người quản trị người dùng dễ dàng sử dụng mà không cần phải cài đặt NHƯỢC ĐIỂM - Thời gian tải liệu cịn chậm - Tính đăng nhập nên bổ sung thêm việc đăng nhập Facebook Google - Ngoài phần đánh giá sao, bổ sung phần comment để ghi nhận ý kiến sinh viên hoạt động 63 an HƯỚNG PHÁT TRIỂN - Tiếp tục hồn thiện chức cịn thiếu - Bổ sung thêm tính nâng cao cơng tác quản lý: kiểm tra thông qua nhận diện khuôn mặt, khảo sát đánh giá chất lượng - Xây dựng ứng dụng tảng IOS - Cải thiện trải nghiệm người dùng ứng dụng để đưa tính cịn thiếu, đồng thời xây dựng giao diện hoàn thiện 64 an TÀI LIỆU THAM KHẢO [1] The Spring Teem, Spring Framework Documentation, lesson Overview, Core, Release 5.1.3 version, last updated 27/11/2018 Link: https://docs.spring.io/spring/docs/current/spring-framework-reference/ [2] Vlad Mihalcea, Steve Ebersole, Andrea Boriero, Gunnar Morling, Gail Badner, Chris Cranford, Emmanuel Bernard, Sanne Grinovero, Brett Meyer, Hardy Ferentschik, Gavin King, Christian Bauer, Max Rydahl Andersen, Karel Maesen, Radim Vansa, Louis Jacomet, Hibernate ORM 5.2.18.Final User Guide, Lession 1: Architecture, Last updated 16/11/2018 Link:http://docs.jboss.org/hibernate/orm/5.2/userguide/html_single/Hibernate_User_Guide.html [3] React Team, React Documentation, Lesstion Tutorial/Introduction, Fundamentals/Architecture Overview Link: https://reactjs.org/docs/getting-started.html [4] Phan Đức Việt, Khái niệm Json Web Token (JWT), Tập Lập Trình Web, Ngày đăng: 10/07/2016 Link: https://techmaster.vn/posts/33959/khai-niem-ve-json-web-token [5] Giới thiệu React Native Link: https://facebook.github.io/react-native/docs/getting-started [6] Tổng quan FireBase Link: https://viblo.asia/p/firebase-android-overview-3P0lPYL85ox [7] Giới thiệu hệ quản trị sở liệu NoSQL Mongo DB Link: https://viblo.asia/p/gioi-thieu-he-quan-tri-co-so-du-lieu-nosql-mongodb-oOVlYMLzl8W 65 an PHỤ LỤC 1 CHẠY ỨNG DỤNG API SERVER VÀ WEBSITE QUẢN LÝ TRÊN VPS 1.1 Sử dụng VPS chạy ứng dụng Để chạy thử ứng dụng API server web server ta thực lệnh sau: - Truy cập https://github.com/winsw/winsw dowload version file WinSW.NET4.exe sample-minimal.xml winsw - Copy file api.jar vào thư mục với file WinSW - Sửa nội dung file sample-minimal.xml yhcmute Yhcmute App Service Run API YHCMUTE java -jar %BASE%\api.jar - Đổi tên file sample-minimal.xml thành WinSW.NET4.exe - Run WinSW.NET4.exe kiểm tra service Task Manager - Thử chạy lại Postman để xem API hoạt động hay chưa 66 an Sau chạy Postman, ứng dụng trả Respone không báo lỗi, Header chứa token tức API hoạt động đăng nhập thành công - Run cmd chuyển đến Project Web - Chạy lệnh: npm start để chạy ứng dụng, thành công trả kết sau: - Mở trình duyện thử truy cập vào trang web 67 an 1.2 Trỏ địa hostname VPS - Với địa web thực dãy địa IP không thân thiện tạo nhiều khó khăn q trình sử dụng Nhóm thực thử nghiệm tên miền miễn phí trang web noip.com cho phép dùng thử nghiệm Việc đăng kí tạo tài khoản trang web tham khảo link: https://www.noip.com/sign-up - Sau đăng kí tài khoản thành cơng, đăng kí sử dụng tên miền yhcmute.myftp.org - Cấu hình DNS trỏ VPS serer - Chờ đợi update hệ thống khoảng – 15p - Thử truy cập địa yhcmute.ddns.net ta kết 68 an DEPLOY ỨNG DỤNG ANDROID LÊN GOOGLE STORE 2.1 Xuất file AAB với đầy đủ Signager Trong trình phát triển ứng dụng, để publish từ ứng dụng APK trình phát triển thành file APK có đầy đủ signager theo yêu cầu google, làm theo hướng dẫn trang chủ React Native theo link https://facebook.github.io/react-native/docs/signed-apk-android - Generating an upload key - $ keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 - Setting up Gradle variables - Adding signing config to your app's Gradle config - Generating the release APK $ cd android $ /gradlew bundleRelease Và thực thêm vài bước phụ, gặp phải lỗi không xác định upload lên Google Store gặp phải lỗi liên quan đến chữ ký số ứng dụng mã hóa ứng dụng → Cách dễ dàng để khắc phục lỗi trên, mở ứng dụng Android Studio generate key Android Studio Bước 1: Click Build -> Generate signed Bundle/APK 69 an Click Next điền đầy đủ nội dung Tick chọn Export encrypted key for enrolling published apps in Google Play App Siging Chọn Next chọn Release Click Finish Bước 2: Generate Android App Bundle 70 an Click Build -> Build Bundle(s) / APK(s) -> Build Bundle(s) Chú thích: Ở build file dạng Android App Bundle thay cho APK, sử dụng Andorid App Bundle tương thích với hệ thống Google Store đồng thời giúp giảm dung lượng tải xuống từ Store cịn chưa đến ½ so với sử dụng file APK truyền thống 2.2 Upload lên Google Store Bước 1: Truy cập trang web: https://play.google.com/ Bước 2: Tiến hành đăng nhập Tạo ứng dụng Chi tiết cách upload ứng dụng tham khảo link: https://vntalking.com/submit-ung-dung-lengoogle-play-store.html 71 an Bước 3: Chờ đợi khoảng thời gian Google duyệt ứng dụng Tối đa vịng ngày có kết trả Kết sau upload ứng dụng 72 an PHỤ LỤC 1.1 Cài đặt IDE - Cài đặt IntelliJ IEA Eclipse để chạy project Java local - Cài đặt IDE hỗ trợ code JavaScript dễ dàng, Visual Studio Code, Sublime Text WebStorm 1.2 Cài đặt Java JDK 1.8 trở lên - Để phát triển ứng dụng tảng Java trước tiên cần cài đặt JDK - công cụ cho việc phát triển ứng dụng ngơn ngữ lập trình Java (nếu cài đặt bỏ qua bước này) - Dowload JDK - Tiến hành cài đặt bước bình thường 1.3 Cài đặt môi trường Bước 1: Nhấp chuột phải vào My Computer → Properties → Advanced system settings → Advanded → Environment Variables Bước 2: Nhấn New để tạo biến mơi trường có tên JAVA_HOME Bước 3: Nhập vào giá trị sau: Variable name: JAVA_HOME 73 an Variable value: đường dẫn tới thư mục cài đặt JDK Ví dụ: C:\DevPrograms\Java\jdk1.8.0_45 Bước 4: Cập nhập biến mơi trường path Thêm vào phía trước giá trị biến mơi trường path: %JAVA_HOME%\bin Hồn tất việc cài đặt JDK 1.4 Database Managerment System (DBMS) – MongoDB Bước 1: Dowload MongoDB với phiên phù hợp đường dẫn: https://www.mongodb.com/download-center#community 74 an Bước 2: Cài đặt gói vừa tải Bước 3: Cài đặt MongoDB lựa chọn “Install MongoDB Compass” 1.5 Cài đặt NodeJs - ReactJs yêu cầu phải cài đặt NodeJs version 8.x 10.x (khuyến khích cài NodeJs LTS version 10.15.0) - Link dowload NodeJs: https://nodejs.org/en/ - Kiếm tra version NodeJs, mở Terminal nhập lệnh node -v 1.6 Cài đặt ReactJs - Với ReactJs, không cần cài thêm CLI tạo project ứng dụng tải module cần thiết để chạy - Chuyển đường dẫn đến project React Terminal, cài đặt package nằm file package.json lệnh: npm install –save npm install –save-dev o Lệnh npm install –save: cài đặt gói thư viện nằm khối lệnh dependencies file package.json o Lệnh npm install –save-dev: cài đặt gói thư viện nằm khối lệnh devDependencies file package.json package hỗ trợ code môi trường develop - Để chạy ứng dụng, ta dùng lệnh npm start ng serve 75 an 1.7 Cài đặt React Native - Cần tải cài đặt Chocolatey để dễ dàng trình cài đặt React Native Tìm tải trang chủ https://chocolatey.org/ - Sau cài xong Chocolatey, trang chủ React Native khuyên cài Node, Java SE Development Kit (JDK) Python thông qua Chocolatey cách chạy lệnh sau với quyền Admin: choco install -y nodejs.install python2 jdk8 - Tiếp theo ta cài đặt React Native CLI cách chạy lệnh: npm install -g react -native-cli - Cài đặt môi trường Android Studio để phát triển ứng dụng Android (Xcode để phát triển ứng dụng IOS) - Tạo project chạy thử thiết bị ảo thiết bị thật 76 an S an K L 0 ... Core, xây dựng đầy đủ API phục vụ cho phần hiển thị cuối PHÂN TÍCH CÁC ỨNG DỤNG CĨ LIÊN QUAN Hầu hết ứng dụng hỗ trợ Đoàn viên xây dựng mắt, có nhiều tính từ đến phức tạp Tuy nhiên số ứng dụng. .. hệ thống Xây dựng giao diện thiết bị di động ReactNative Xây dụng giao diện web admin ReactJS Xây dựng class xử lý APIs với Java SpringBoot Xây dựng document Resful API ứng dụng Xây dụng API... GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Võ Hồng Phúc MSSV 1: 16110423 Họ tên Sinh viên 2: Đặng Thị Duyên MSSV 2: 16110299 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng ứng dụng hỗ trợ đoàn viên