(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên

(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên(Đồ án tốt nghiệp) Xây dựng ứng dụng hỗ trợ đoàn viên

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 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Ợ ĐOÀ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 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 q 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 yê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ơi thúc chúng em hồ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 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 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 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 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 Duyên +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 hồ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) 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 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 3.2.1 Bảng Users .31 3.2.2 Bảng User_role 32 3.2.3 Bảng User_privilege .32 3.2.4 Bảng Students 33 3.2.5 Bảng Semesters 33 3.2.6 Bảng Scholastics 34 3.2.7 Bảng Roles .35 3.2.8 Bảng Role_privilege .35 3.2.9 Bảng Privileges 35 3.2.10 Bảng People_contact 36 3.2.11 Bảng Managers 36 3.2.12 Bảng Faculities .37 3.2.13 Bảng Classes .38 3.2.14 Bảng Activity_level 38 3.2.15 Bảng Activities_description 39 3.2.16 Bảng Activities .40 3.3 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 41 3.3.1 Giao diện website 41 3.3.1.1 Giao diện trang đăng nhập .41 3.3.1.2 Giao diện trang Dashboard 41 3.3.1.3 Giao diện trang Quản lý Khoa 42 3.3.1.4 Giao diện trang Quản lý Học kì 44 3.3.1.5 Giao diện trang Quản lý Lớp .47 3.3.1.5 Giao diện trang Quản lý Người dùng 48 3.3.1.6 Giao diện trang Quản lý Hoạt động cấp trường 49 3.3.1.7 Giao diện trang Quản lý Hoạt động cấp khoa 51 3.3.2 Giao diện Mobile 52 3.3.2.1 Giao diện trang Đăng nhập 52 3.3.2.2 Giao diện trang Đăng kí Mobile 53 3.3.2.3 Giao diện Trang chủ Mobile .54 3.3.2.4 Giao diện trang chi tiết nội dung Mobile 54 3.3.2.4 Giao diện trang Tài khoản Mobile 55 3.3.2.5 Giao diện trang Đánh giá Mobile 55 3.3.2.6 Giao diện trang Thay đổi mật 56 3.3.2.7 Giao diện trang Hoạt động Đăng kí .56 3.4 SƠ ĐỒ TUẦN TỰ CỦA MỘT SỐ TÍNH NĂNG CHÍNH 57 3.4.1 Đăng nhập 57 3.4.2 Đăng ký hoạt động 57 3.4.3 Thêm hoạt động .58 3.4.4 Đăng ký tài khoản 58 CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM 59 4.1 CÀI ĐẶT PHẦN MỀM 59 4.2 KIỂM THỬ PHẦN MỀM 59 4.2.1 Kế hoạch kiểm thử 59 4.2.2 Thực chạy testcase 60 4.2.2.1 Màn hình trang chủ 60 4.2.2.2 Màn hình đăng nhập 60 4.2.2.3 Màn hình đăng ký .61 4.2.2.4 Màn hình tạo hoạt động 62 4.2.2.5 Màn hình đăng kí hoạt động 62 PHẦN KẾT LUẬN 63 KẾT QUẢ ĐẠT ĐƯỢC 63 ƯU ĐIỂM 63 NHƯỢC ĐIỂM 63 HƯỚNG PHÁT TRIỂN 64 TÀI LIỆU THAM KHẢO 65 PHỤ LỤC .66 CHẠY ỨNG DỤNG API SERVER VÀ WEBSITE QUẢN LÝ TRÊN VPS 66 1.1 Sử dụng VPS chạy ứng dụng 66 1.2 Trỏ địa hostname VPS 68 DEPLOY ỨNG DỤNG ANDROID LÊN GOOGLE STORE 69 2.1 Xuất file AAB với đầy đủ Signager 69 2.2 Upload lên Google Store 71 PHỤ LỤC .73 1.1 Cài đặt IDE .73 1.2 Cài đặt Java JDK 1.8 trở lên 73 1.3 Cài đặt môi trường 73 1.4 Database Managerment System (DBMS) – MongoDB 74 1.5 Cài đặt NodeJs 75 1.6 Cài đặt ReactJs 75 1.7 Cài đặt React Native 76 DANH SÁCH BẢNG BIỂU Bảng 1: Usercase Quản lý năm học 17 Bảng 2: Usecase Quản lý học kì 17 Bảng 3: Usecase Quản lý tài khoản 18 Bảng 4: Usecase Phân quyền 18 Bảng 5: Usecase Quản lý hoạt động 19 Bảng 6: Usecase Tìm kiếm 19 Bảng 7: Usecase Gửi thông báo 20 Bảng 8: Usecase Thống kê 20 Bảng 9: Usecase Xem file CSV 21 Bảng 10: Usecase Đăng kí .21 Bảng 11: Usecase Quên mật 22 Bảng 12: Usecase Gửi email 23 Bảng 13: Usecase Đăng nhập 24 Bảng 14: Usecase Xem hoạt động 25 Bảng 15: Usecase Đăng kí tham gia 26 Bảng 16: Usecase Đánh giá .27 Bảng 17: Usecase Xem thông tin cá nhân .28 Bảng 18: Usecase Đổi mật 29 Bảng 19: Usecase Xem hoạt động đăng kí 30 Bảng 20: Chi tiết liệu bảng User .31 Bảng 21: Chi tiết bảng liệu user_role 32 Bảng 22: Chi tiết bảng liệu user_privilege 32 Bảng 23: Chi tiết bảng liệu students 33 Bảng 24: Chi tiết bảng liệu semesters .33 Bảng 25: Chi tiết bảng liệu scholastics 34 Bảng 26: Chi tiết bảng liệu roles .35 Bảng 27: Chi tiết bảng liệu roles_privilege .35 Bảng 28: - Chi tiết bảng liệu privileges .35 Bảng 29: Chi tiết bảng liệu people_contact .36 Bảng 30: Chi tiết bảng liệu managers .36 Bảng 31: Chi tiết bảng liệu faculities 37 Bảng 32: Chi tiết bảng liệu classes 38 Bảng 33: Chi tiết bảng liệu activity_level 38 Bảng 34: Chi tiết bảng liệu activities_description 39 Bảng 35: Chi tiết bảng liệu activities .40 Bảng 36: Danh sách xử lý trang Đăng nhập 41 Bảng 37: Danh sách xử lý trang Dashboard 42 Bảng 38: Danh sách xử lý trang Quản lý Khoa 42 Bảng 39: Danh sách xử lý trang thêm Khoa 43 Bảng 40: Danh sách xử lý trang chỉnh sửa Khoa 43 Bảng 41: Danh sách xử lý trang xóa Khoa .44 Bảng 42: Danh sách xử lý trang Quản lý Học kì 44 Bảng 43: Danh sách xử lý trang thêm Học kì .45 Bảng 44: Danh sách xử lý trang chỉnh sửa Học kì 46 Bảng 45: Danh sách xử lý trang xóa Học kì 47 Bảng 46: Danh sách xử lý trang Quản lý Lớp 47 Bảng 47: Danh sách xử lý trang thêm Lớp 47 Bảng 48: Danh sách xử lý trang chỉnh sửa Lớp .48 Bảng 49: Danh sách xử lý trang xóa Lớp .48 Bảng 50: Danh sách xử lý trang Quản lý Người dùng 49 Bảng 51: Danh sách xử lý trang Quản lý Hoạt động cấp trường 49 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 hoà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 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 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 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 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 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 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 q 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 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 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 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 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 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 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 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 S K L 0