Phát triển ứng dụng di động hỗ trợ học trực tuyến trên các thiết bị thông minh và hỗ trợ thanh toán online

ĐẠI HỌC QUỐC GIA TP.HCM TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA KHOA HỌC & KỸ THUẬT MÁY TÍNH LUẬN VĂN TỐT NGHIỆP ĐẠI HỌC PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG HỖ TRỢ HỌC TRỰC TUYẾN TRÊN CÁC THIẾT BỊ THÔNG MINH VÀ HỖ TRỢ THANH TOÁN ONLINE NGÀNH: KHOA HỌC MÁY TÍNH HỘI ĐỒNG: HỆ THỐNG & MẠNG MÁY TÍNH GVHD: TS NGUYỄN QUANG HÙNG GVPB: THS LÊ ĐÌNH THUẬN SVTH1: SVTH2: DANH TRÍ HIẾU (1711271) PHAN ĐÌNH TUỆ (1713814) Lời cam đoan Chúng xin cam đoan đề tài luận văn tốt nghiệp: "Phát triển ứng dụng di động hỗ trợ học trực tuyến thiết bị thơng minh hỗ trợ tốn online" thực hướng dẫn TS Nguyễn Quan Hùng Tất tham khảo từ cơng trình khác ghi rõ mục "Tài liệu tham khảo" Nội dung luận văn chưa cơng bố trước hình thức Nếu có sai phạm nào, chúng tơi xin chịu hồn tồn trách nhiệm trước Ban Chủ nhiệm Khoa Ban Giám hiệu Nhà trường Nhóm sinh viên thực Lời cảm ơn Trước hết, xin trân trọng gửi lời cảm ơn đến TS Nguyễn Quan Hùng - giảng viên khoa Khoa học Kỹ thuật Máy tính (trường Đại học Bách Khoa - ĐHQG TP.HCM) Trong thời gian vừa qua, thầy tận tình dạy, hướng dẫn cho kiến thức quý báu Bên cạnh thầy tạo điều kiện thuận lợi để chúng tơi hồn thành luận văn thời gian sớm Bên cạnh đó, chúng tơi xin gửi lời cảm ơn đến Trường Đại học Bách Khoa - ĐHQG TPHCM, nơi tạo cho nhóm môi trường học tập tốt Quý thầy cô khoa Khoa học Kỹ thuật Máy tính, người truyền tri thức tâm huyết cho nhóm vốn kiến thức suốt thời gian qua Chúng xin gửi lời cảm ơn sâu sắc đến bố mẹ bạn bè động viên tinh thần, bên cạnh nhóm suốt q trình học tập trường thực luận văn tốt nghiệp Do giới hạn kiến thức khả lý luận thân cịn nhiều thiếu sót hạn chế, kính mong dẫn đóng góp thầy để luận văn nhóm hồn thiện Lời cuối cùng, xin gửi lời cám ơn sâu sắc đến gia đình, bạn bè - người sát cánh bên chúng tôi, động lực to lớn để chúng tơi hồn thành luận văn cách trọn vẹn Nhóm sinh viên thực Tóm tắt Đề tài luận văn mà nhóm chúng tơi thực "Phát triển ứng dụng di động hỗ trợ học trực tuyến thiết bị thông minh hỗ trợ tốn online" Trong q trình thực đề tài này, nhóm chúng tơi thực qua hai giai đoạn, cụ thể sau: Giai đoạn 1: Tìm hiểu phân tích đề tài, tìm hiểu tảng moodle Đưa phân tích thiết kế ứng dụng, tìm hiểu kỹ thuật tảng triển khai Tiến hành lựa chọn công nghệ phù hợp Giai đoạn 2: Xây dựng ứng dụng có khả hoạt động tốt hai tảng iOS, Android hoạt động ổn định nhiều thiết bị có cấu hình yếu Đảm bảo đầy đủ chức cần thiết cho việc học tập học sinh Báo cáo luận văn tốt nghiệp nhóm trình bày thơng qua nội dung sau đây: • • • • • • Chương 1: Tổng quan Chương 2: Lý thuyết sở, cơng nghệ, cơng trình liên quan Chương 3: Thiết kế kiến trúc ứng dụng Chương 4: Hiện thực ứng dụng Chương 5: Kiểm thử phần mềm Chương 6: Kết luận hướng phát triển Summary The thesis topic that our team carries out is "Develop mobile application for online learning on smart devices and support online payment" In the process of implementing this topic, our team has done through two stages, specifically as follows: Stage 1: Learn to analyze the topic, learn the moodle background Provide system analysis and design, learn implementation foundation techniques Select the suitable technology Stage 2: Building applications capable of working well on two platforms iOS, Android and stable operation on many devices with weak configuration Ensure all necessary functions for students’ learning The group’s graduation thesis report will present through the following main contents: • • • • • • Chapter 1: Overview Chapter 2: Basic theory, technology, related construction Chapter 3: Application architecture designing Chapter 4: Application reality Chapter 5: Software testing Chapter 6: Conclusion and development direction Mục lục TỔNG QUAN 1.1 Đặt vấn đề 1.2 Các vấn đề 1.3 Mục tiêu đề tài 1.4 Phạm vi đề tài 1.5 Khó khăn thử thách LÝ THUYẾT CƠ SỞ, CƠNG NGHỆ, CÁC CƠNG TRÌNH LIÊN QUAN 2.1 Learning Management System - LMS 2.1.1 LMS - Edmodo 2.1.2 LMS - Moodle 2.1.3 Kết luận lựa chọn 2.2 Các loại ứng dụng di động 2.2.1 Native App 2.2.2 Hybrid App 2.2.3 Cross Platform App 2.2.4 Kết luận lựa chọn loại ứng dụng 2.3 Frame-work ngôn ngữ lập trình Cross Platform App 2.3.1 Flutter 2.3.2 Xamarin 2.3.3 React Native 2.3.4 Kết luận lựa chọn frame-work, ngôn ngữ lập trình Cross Platform App 2.4 Kiến trúc ứng dụng flutter 2.4.1 Widget 2.4.2 Gestures 2.4.3 Stateless widgets Stateful widgets 2.4.4 Layout 2.4.5 ScopedModel 2.4.6 REST API 2.4.7 Mơ hình MVVM 2.5 Một số lưu lý lập trình ứng dụng đa tảng 2.5.1 Phân biệt thiết kế UI hai tảng Android IOS 2.5.2 Xu hướng thiết kế ứng dụng 2020 2.6 Figma 2.7 Java Spring-boot 2.8 MySQL 2.9 Firebase 2.10 Google Cloud Platform 1 1 2 3 6 10 10 10 11 12 13 13 13 13 15 16 17 18 20 20 21 23 24 26 27 29 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính 2.11 VNPay 2.12 ZaloPay 30 31 THIẾT KẾ KIẾN TRÚC ỨNG DỤNG 3.1 Phân tích yêu cầu đề tài 3.1.1 Tìm hiểu ứng dụng tương tự 3.1.2 Phân tích nghiệp vụ, chức thực ứng dụng a Đối tượng ứng dụng b Các chức 3.2 Thiết kế use case 3.3 Thiết kế giao diện 3.3.1 Giao diện đăng nhập, đăng ký 3.3.2 Giao diện trang chủ 3.3.3 Giao diện mua khoá học 3.3.4 Giao diện thông tin cá nhân 3.3.5 Giao diện xem lại làm 3.3.6 Giao diện làm quiz 3.3.7 Giao diện trò chơi 3.3.8 Giao diện chức toán 3.3.9 Các loại popup 3.4 Thiết kế Back-end (API Bee Service) sở liệu 3.4.1 Cơ sở liệu 3.4.2 Back-end (Bee Service) 3.5 Cấu trúc hệ thống 33 33 33 33 33 33 35 40 40 40 41 41 42 42 43 43 44 45 45 46 47 48 48 48 49 49 49 49 50 50 51 52 52 53 53 54 55 56 56 57 58 58 59 59 HIỆN THỰC ỨNG DỤNG 4.1 Công nghệ sử dụng 4.2 Quản lý mã nguồn 4.3 Hiện thực API back-end 4.4 Hiện thực ứng dụng 4.5 Truy cập liệu, sử dụng hệ thống Moodle(Ong vàng học tập) 4.5.1 Web Service API 4.5.2 Một số hàm API Web Service sử dụng ứng dụng a Lấy danh sách khoá học b Lấy danh sách khoá học đăng ký c Lấy nội dung khóa học d Lấy thông tin người dùng e Cập nhật thông tin người dùng f Phân quyền người dùng g Lấy nội dung tập h Lấy danh sách lần làm người dùng i Người học bắt đầu thực tập j Lấy nội dung, câu hỏi tập k Lấy nội dung kết thực tập l Xử lý kết thực tập người học m Lấy kết khóa học n Lấy kết đầy đủ khóa học 4.6 Kết thực Trang 2/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính 4.6.1 4.6.2 4.6.3 4.6.4 4.6.5 4.6.6 59 62 63 64 66 67 67 69 70 71 KIỂM THỬ PHẦN MỀM 5.1 Kiểm thử API 5.2 Kiểm thử hệ thống 72 72 73 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết đạt 6.2 Thuận lợi 6.3 Khó khăn 6.4 Hướng phát triển tương lai 80 80 80 81 81 4.6.7 4.6.8 Đăng nhập, đăng ký Giao diện trang chủ chức đặt mục tiêu học tập Giao diện khoá học tập Chức làm quiz online Chức thống kê đánh giá Chức toán online a Thanh toán VNPay b Thanh toán ZaloPay Chơi game kết hợp làm quiz Thông tin người dùng Trang 3/83 Danh sách hình vẽ 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 Sơ đồ đơn giản ứng dụng hello world [15] Ví dụ cho StatelessWidget [20] Ví dụ cho StatefulWidget [20] Mơ hình MVVM [16] Ví dụ bảng màu tươi tơng màu nóng [13] Ví dụ bảng màu tươi tơng màu lạnh [13] Bảng màu tương phản [17] Các hình thức tốn VNPay [5] Các chức ZaloPay [4] 13 14 15 18 21 22 22 30 31 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 Use case cho người dùng Giao diện đăng nhập, đăng ký Giao diện trang chủ Giao diện trang chủ Giao diện thông tin cá nhân Giao diện xem lại làm Giao diện làm quiz Giao diện làm tập trị chơi Giao diện tốn Các loại popup thông báo ERD sở liệu hệ thống Thiết kế Back-end Kiến trúc chung hệ thống 35 40 40 41 41 42 42 43 43 44 45 46 47 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11 4.12 4.13 4.14 4.15 Xác thực người dùng thông với tài khoản Moodle Xác thực người dùng thông qua Firebase Giao diện đăng nhập, đăng ký Giao diện trang chủ chức đặt mục tiêu học tập Giao diện khoá học tập Luồng lấy liệu khóa học Luồng lấy liệu học cách hiển thị với người dùng Giao diện làm câu hỏi trắc nghiệm Giao diện thống kê kết Giao diện toán khoá học Sequent diagram chức toán VNPay Các phương thức toán hỗ trợ Sequent diagram chức toán qua ZaloPay Giao diện chơi game kết hợp làm quiz Giao diện thông tin người dùng 60 61 62 63 63 64 65 66 66 67 68 68 69 70 71 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính 5.1 5.2 Gọi API tạo URL tốn với VNPay kết trả thành cơng Gọi API tạo order toán với VNPay kết trả thành công 72 73 Trang 5/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính b Thanh tốn ZaloPay • Người dùng chọn khóa học bấm tốn • Ứng dụng gửi yêu cầu đến back-end để lấy thông tin toán từ Zalopay server để mở ứng dụng Zalopay để tốn • Người dùng tốn tài khoản Zalopay • Zalopay Server thực tốn gửi thơng tin tốn back-end mở lại ứng dụng OngVang để thông báo trạng thái giao dịch • Back-end cập nhật thơng tin toán vào Database cài đặt quyền để User truy cập khóa học Hình 4.13: Sequent diagram chức toán qua ZaloPay Trang 69/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính 4.6.7 Chơi game kết hợp làm quiz Chức giúp người dùng hứng thú việc học thông qua việc chơi game Mỗi lần quay game Spin Wheel chọn ngẫu nhiên câu hỏi câu hỏi giáo viên đặt trước Hình 4.14: Giao diện chơi game kết hợp làm quiz Trang 70/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính 4.6.8 Thơng tin người dùng Chức giúp người dùng quản lý thông tin cá nhân, thay đổi chỉnh sửa thông tin cá nhân, cài đặt chức nhận thông báo ứng dụng, thay đổi ngơn ngữ người dùng Hình 4.15: Giao diện thông tin người dùng Trang 71/83 Chương KIỂM THỬ PHẦN MỀM 5.1 Kiểm thử API Đối với ứng dụng nhóm xây dựng, thành phần giao tiếp với thơng qua API Vì vậy, cần phải kiểm thử riêng biệt với API nhóm thực trước tích hợp vào ứng dụng Nhóm chọn phần mềm Postman để kiểm thử API Kiểm thử API tạo URL tốn với VNPay Hình 5.1: Gọi API tạo URL toán với VNPay kết trả thành công 72 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính Kiểm thử API tạo Order tốn với Zalopay Hình 5.2: Gọi API tạo order toán với VNPay kết trả thành công 5.2 Kiểm thử hệ thống Kiểm thử hệ thống thuộc loại kiểm thử hộp đen (black box testing) Kiểm thử tập trung vào kiểm tra chức hệ thống Trong phần kiểm thử này, nhóm tiến hành kiểm thử giao diện chức ứng dụng Thiết bị kiểm thử bao gồm: điện thoại thông minh có hệ điều hành Android iOS, phần mềm giả lập Android iOS * Kết kiểm thử ID LOGIN01 LOGIN02 Test case Description Kiểm tra chức đăng nhập tài khoản Ongvanghoctap Kiểm tra chức đăng nhập tài khoản Google Precondition Step Học viên khởi động ứng dụng Học viên điền thông tin tài khoản, mật Học viên nhấn nút "Đăng nhập" Học viên nhấn biểu tượng Google Học viên nhấn nút "Đăng nhập" Học viên khởi động ứng dụng Expected Result Học viên chuyển tới trang chủ ứng dụng Học viên chuyển tới trang chủ ứng dụng Result PASSED PASSED Trang 73/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính ID LOGIN03 Test case Description Kiểm tra chức đăng nhập số điện thoại Precondition Step Học viên khởi động ứng dụng Học viên nhấn biểu tượng "thẻ sim" Học viên điền số điện thoại sau nhấn "Xác nhận" Học viên nhấn biểu tượng Google Học viên nhấn nút "Đăng ký" Học viên nhấn biểu tượng "Home" SIGNIN- Kiểm tra chức 01 đăng ký tài khoản Google Học viên khởi động ứng dụng HOME01 Kiểm tra chức hiển thị khoá học đề cử trang chủ "Home" Học viên đăng nhập thành công vào ứng dụng HOME02 Kiểm tra chức hiển thị khoá học miễn phí trang chủ "Home" Học viên đăng nhập thành công vào ứng dụng Học viên nhấn biểu tượng "Home" HOME03 Kiểm tra chức "Thay đổi mục tiêu" trang chủ "Home" Học viên đăng nhập thành công vào ứng dụng HOME04 Kiểm tra chức xem thêm trang chủ "Home" Học viên đăng nhập thành công vào ứng dụng Học viên nhấn biểu tượng "Home" Nhấn vào nút "Thay đổi mục tiêu" Nhấn kéo để tăng giảm thời gian mục tiêu Nhấn "Confirm" Học viên nhấn nút "Thêm" Expected Result Học viên chuyển tới trang chủ ứng dụng Result PASSED Học viên chuyển tới trang chủ ứng dụng PASSED Hiển thị khoá học đề cử mục "Recommended courses" gồm thơng tin hình ảnh tiêu đề khoá học Hiển thị khoá học đề cử mục "Free courses" gồm thơng tin tiêu đề khố học, thời gian tạo khố học thơng tin kèm Hiển thị thời gian thay đổi tiến độ PASSED Chuyển tới trang hiển thị toàn khoá học PASSED PASSED PASSED Trang 74/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính ID GAME01 Test case Description Kiểm tra chức vòng quay để trả lời câu hỏi PAYME- Kiểm tra chức NT-01 hiển thị khoá học danh sách toán PAYME- Kiểm tra chức NT-02 hiển thị thơng tin chi tiết khố học PAYME- Kiểm tra NT-03 tốn thành cơng ví ZaloPay Precondition Step Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Game" Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Courses" Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Courses" Học viên nhấn nút "SPIN", sau nhấn "Trả lời" Học viên đăng nhập thành công vào ứng dụng Vào tới trang chi tiết khoá học mục PAYMENT02 Nhấn vào "THANH TOÁN" Chuyển tới trang "Xác nhận toán", nhấn "Xác nhận toán" Chuyển tới ứng dụng ZaloPay mục toán, nhấn "Xác nhận giao dịch" Nhấn vào tên đề mục để thị thơng tin khố học Nhấn vào tên đề mục để thị thơng tin khố học Nhấn vào khố học Expected Result Chuyển tới trang trả lời câu hỏi vừa quay Hiển thị tên đề mục đầy đủ Hiển thị thông tin hình ảnh, tiêu đề, giá tiền khố học Chuyển tới trang thơng tin chi tiết khố học Hiển thị thơng tin hình ảnh, tiêu đề, phân loại, mô tả, thông tin liên lạc, giá tiền khố học Hiển thị popup "Thanh tốn thành cơng", khố học vừa mua cấp quyền truy cập Result PASSED PASSED PASSED PASSED Trang 75/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính ID Test case Description PAYME- Kiểm tra NT-04 tốn khơng thành cơng ví ZaloPay Precondition Step Học viên đăng nhập thành công vào ứng dụng Vào tới trang chi tiết khoá học mục PAYMENT02 Nhấn vào "THANH TỐN" Chuyển tới trang "Xác nhận tốn", nhấn "Xác nhận toán" Chuyển tới ứng dụng ZaloPay mục tốn, khơng xác nhận giao dịch trở lại Nhấn vào "THANH TỐN" Chuyển tới trang "Xác nhận tốn", nhấn "Xác nhận toán" Chuyển tới trang VNPay chọn tốn thẻ ATM, nhập thơng tin thẻ, nhấn "THANH TOÁN" Nhấn vào "THANH TOÁN" Chuyển tới trang "Xác nhận toán", nhấn "Xác nhận toán" Chuyển tới trang VNPay khơng tốn, nhấn trở PAYME- Kiểm tra NT-05 tốn thành cơng cổng tốn VNPay Học viên đăng nhập thành cơng vào ứng dụng Vào tới trang chi tiết khoá học mục PAYMENT02 PAYME- Kiểm tra NT-06 toán thành cơng cổng tốn VNPay Học viên đăng nhập thành công vào ứng dụng Vào tới trang chi tiết khoá học mục PAYMENT02 Expected Result Hiển thị popup "Bạn huỷ toán", khoá học vừa chọn mua không cấp quyền truy cập Result PASSED Hiển thị popup "Thanh tốn thành cơng", khố học vừa mua cấp quyền truy cập PASSED Hiển thị popup "Bạn huỷ tốn", khố học vừa mua khơng cấp quyền truy cập PASSED Trang 76/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính ID Test case Description PROFILE- Kiểm tra chức 01 thay đổi thông tin cá nhân PROFILE- Kiểm tra chức 02 xem kết học tập PROFILE- Kiểm tra chức 03 thống kê thời gian sử dụng ứng dụng/ PROFILE- Kiểm tra chức 04 mở nhận thông báo ứng dụng PROFILE- Kiểm tra chức 05 thay đổi ngôn ngữ Precondition Step Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Profile" Học viên nhấn vào dịng "Sửa thơng tin", thay đổi thuộc tính "Tên", "Email", "SĐT" , "Giới tính", sau nhấn "Lưu" Học viên nhấn vào dịng "Kết học tập" Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Profile" Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Profile" Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Profile" Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Profile" Học viên nhấn vào dòng "Thời gian app" Học viên nhấn chọn nút switch dịng "Nhận thơng báo ứng dụng" Học viên nhấn vào ngơn ngữ dịng "Thay đổi ngơn ngữ", sau chọn loại ngơn ngữ cần đổi Expected Result Thông tin tên số điện thoại cập nhật trang cá nhân Result PASSED Chuyển tới trang kết học tập học viên PASSED Chuyển tới trang thống kê thời gian sử dụng ứng dụng học viên Hiển thị đủ thơng tin "Khố học tham gia", "Tổng thời gian app" theo mục: Tháng trước, Hôm nay, Tháng Nhận thông báo "Bạn bật thông báo từ Ong vàng" PASSED Giao diện ứng dụng cập nhật lại toàn ngôn ngữ theo loại chọn PASSED PASSED Trang 77/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính ID Test case Description PROFILE- Kiểm tra chức 06 đăng xuất Precondition Step Học viên đăng nhập thành công vào ứng dụng Chuyển tới mục "Profile" Học viên đăng nhập thành công vào ứng dụng Học viên nhấn vào dòng "Đăng xuất", sau nhấn "Confirm" popup vừa lên Học viên nhấn vào nút "Thêm" COURS- Kiểm tra hiển ES-02 thị giảng khoá học Học viên đăng nhập thành cơng vào ứng dụng Học viên nhấn vào khố học COURS- Kiểm tra thống ES-03 kê điểm số kiểm tra giảng khoá học Học viên đăng nhập thành công vào ứng dụng Vào tới trang hiển thị thơng tin khố học Học viên nhấn vào biểu tượng thống kê giảng QUIZ01 Học viên đăng nhập thành công vào ứng dụng Vào tới trang hiển thị thông tin kiểm tra Học viên chọn kiểm tra có nhãn H5P COURS- Kiểm tra hiển ES-01 thị thơng tin khố học Kiểm tra làm dạng H5P Expected Result Đăng xuất thành công chuyển tới giao diện đăng nhập Được chuyển tới trang "Khoá học đề xuất" Hiển thị đủ tồn khố học gồm thơng tin tiêu đề khố học, thời gian tạo khố học, mơ tả khoá học Được chuyển tới trang với tiêu đề tiêu đề khố học Hiển thị đủ tồn giảng gồm thơng tin tiêu đề khố học, thời gian tạo khoá học Được chuyển tới trang "Thống kê" Hiển thị đủ toàn thống kê gồm thơng tin tiêu đề khố học, tiêu đề kiểm tra, điểm số học viên đạt Được chuyển tới trang làm tập Hiển thị dạng tập H5P Result PASSED PASSED PASSED PASSED PASSED Trang 78/83 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính ID QUIZ02 Test case Description Kiểm tra làm dạng trắc nghiệm Precondition Step Học viên đăng nhập thành công vào ứng dụng Vào tới trang hiển thị thông tin kiểm tra Học viên chọn kiểm tra khơng có nhãn H5P Expected Result Được chuyển tới trang làm tập Hiển thị dạng tập trắc nghiệm Result PASSED Bảng 5.1: Danh sách trường hợp kiểm thử back box Trang 79/83 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 6.1 Kết đạt Trong thời gian thực luận văn nhóm đạt số kết sau: • Tìm hiểu sở lý thuyết công nghệ liên quan: Mơ hình MVVM, ngơn ngữ Dart, phát triển ứng dụng đa tảng Flutter, LMS Moodle, sở liệu, ứng dụng Firebase vào phát triển ứng dụng di động – Lựa chọn Moodle LMS – Lựa chọn framework Flutter để phát triển ứng dụng tảng Android IOS – Lựa chọn Firebase Back-end as Service để thực chức phức tạp nâng cao trải nghiệm người dùng • Phân tích yêu cầu dự án: nắm bắt mục tiêu, phạm vi đề tài, chức cần có hệ thống • Tìm hiểu cơng nghệ mới, làm quen sử dụng dịch vụ Google Cloud Platform quy trình phát triển ứng dụng từ lúc lên ý tưởng đến lúc phát hành ứng dụng đến với người dùng • Giao diện đẹp, thân thiện dễ dàng sử dụng • Đồng khố học hệ thống E-learning dựa vào Moodle LMS (ongvanghoctap.edu.vn) • Hiện thực chức toán khoá học Ví ZaloPay cổng tốn VNPay • Hiện thực chức kèm nhằm hỗ trợ việc học tốt để hồn thiện ứng dụng • Thiết kế ứng dụng theo dạng module, dễ dàng tích hợp mở rộng sau 6.2 Thuận lợi Sau thời gian nghiên cứu, tìm hiểu đề tài nhóm nhận thấy đề tài có thuận lợi sau: • Đây đề tài áp dụng vào thực tế tình hình đa số người phải làm việc nhà học tập nhà Đây vừa hội, vừa thử thách đòi hỏi ứng dụng phải hoạt động tốt, trải nghiệm người dùng giao diện phải thật sinh động • Kinh nghiệm từ đề tài áp dụng vào cơng việc tương lai • Thực đề tài hình thức làm việc nhóm giúp tăng cao khả làm việc nhóm • Nhận chia sẻ, hướng dẫn tận tình từ TS Nguyễn Quang Hùng 80 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính 6.3 Khó khăn Bên cạnh thuận lợi nêu đề tài gặp nhiều khó khăn: • Khối lượng liệu khóa học địi hỏi phải lớn, thay đổi liên tục để phù hợp với đối tượng người dùng • Thơng tin từ khóa học bắt buộc phải xác 100% Số lượng khóa học phải đủ nhiều, • Flutter framework lại phải kết hợp với Moodle lớn mạnh xuất từ lâu, nên việc thao tác lấy liệu từ API Moodle gặp nhiều khó khăn • Nhiều cơng nghệ phải tìm hiểu từ công nghệ (Flutter, Firebase, Google Cloud Platform) tới công nghệ xuất lâu (PHP, Moodle, H5P, CSS, JS), nên việc kết hợp sử dụng gặp nhiều khó khăn 6.4 Hướng phát triển tương lai Liên tục cập nhật thơng tin khóa học thêm nhiều khóa học để đảm bảo nhu cầu người dùng Ứng dụng Machine Learning để đưa gợi ý khóa học phù hợp với đối tượng người sử dụng Hỗ trợ thêm nhiều dạng tập khác Tích hợp thêm tính trao đổi học sinh với học sinh, học sinh với giáo viên Trang 81/83 Tài liệu tham khảo [1] Moodle https://docs.moodle.org/310/en/Main_page, ngày truy cập: 22/12/2020 [2] Flutter https://flutter.dev/docs, ngày truy cập: 22/12/2020 [3] Firebase https://firebase.google.com/docs/, ngày truy cập: 22/12/2020 [4] Ví điện tử ZaloPay https://docs.zalopay.vn/v2/general/overview.html, ngày truy cập: 10/06/2021 [5] Cổng toán VNPay https://sandbox.vnpayment.vn/apis/docs/gioi-thieu/, ngày truy cập: 10/06/2021 [6] Google Cloud Platform https://cloud.google.com/docs, ngày truy cập: 10/06/2021 [7] Stackoverflow https://stackoverflow.com/questions/, ngày truy cập: 10/06/2021 [8] Flutter vs React Native – What to Choose in 2021? https://www.thedroidsonroids.com/blog/flutter-vs-react-nat ive-what-to-choose-in-2020, ngày truy cập: 15/07/2021 [9] NodeJs https://nodejs.org/en/docs/, ngày truy cập: 21/12/2020 [10] UI Flutter: https://github.com/iampawan/FlutterExampleApps, ngày truy cập: 22/12/2020 [11] Giới thiệu công cụ thiết kế Figma: https://medium.com/vnextlife/ui-02 -figma-gi, ngày truy cập: 15/12/2020 [12] Phân biệt ui design hai tảng Android IOS https://topuxd.com/phan-biet-ui-design-tren-flatform-ios-v a-android/, ngày truy cập: 22/12/2020 [13] https://designervn.net/threads/7-bang-mau-tuoi-sang-danh-c ho-cac-thit-k-chu-d-mua-thu.7775/, ngày truy cập: 22/12/2020 [14] https://viblo.asia/p/flutter-va-mvvm-L4x5xk4alBM, ngày truy cập: 22/12/2020 [15] Kiến trúc ứng dụng Flutter: https://vncoder.vn/bai-hoc/kien-truc-ung-dung-flutter-215, ngày truy cập: 15/07/2021 82 Trường Đại học Bách Khoa - Khoa Khoa học Kỹ thuật Máy tính [16] Tìm hiểu mơ hình lập trình MVVM https://www.overleaf.com/project/60ddf2d91d4ebcd1b207d752, ngày truy cập: 25/07/2021 [17] Khái niệm màu tương phản học vẽ https://wowart.vn/cha-me-day-con-sang-tao-khai-niem-mau-tu ong-phan-khi-hoc-ve-that-thu-vi-lam-sao/, ngày truy cập: 25/07/2021 [18] Top ngôn ngữ lập trình backend phổ biến https://vn.got-it.ai/blog/top-7-ngon-ngu-lap-trinh-backend -pho-bien-nhat, ngày truy cập: 25/07/2021 [19] MySQL gì? Tìm hiểu hệ quản trị sở liệu MySQL https://vn.got-it.ai/blog/mysql-la-gi-tim-hieu-he-quan-tri -co-so-du-lieu-mysql, ngày truy cập: 25/07/2021 [20] StatefulWidget StatelessWidget Flutter https://viblo.asia/p/statefulwidget-va-statelesswidget-tro ng-flutter-bWrZn6aQZxw, ngày truy cập: 25/07/2021 [21] Giới thiệu thứ Firebase Google https://cafedev.vn/gioi-thieu-tat-ca-moi-thu-ve-firebase-c ua-google/, ngày truy cập: 25/07/2021 [22] Top 10 hệ thống LMS bạn bỏ lỡ https://oes.vn/top-10-he-thong-lms-ban-khong-the-bo-lo/, ngày truy cập: 25/07/2021 [23] So sánh Native App Development Hybrid App Development https://topdev.vn/blog/so-sanh-giua-native-app-development -va-hybrid-app-development/, ngày truy cập: 25/07/2021 [24] Sự khác biệt Native App, Cross Platform Hybrid http://dotnetguru.org/su-khac-biet-giua-native-app-cross-pl atform-va-hybrid/, ngày truy cập: 25/07/2021 [25] Xamarin gì? Ưu khuyết điểm https://topdev.vn/blog/xamarin-la-gi/, ngày truy cập: 25/07/2021 Trang 83/83 ... cam đoan Chúng xin cam đoan đề tài luận văn tốt nghiệp: "Phát triển ứng dụng di động hỗ trợ học trực tuyến thiết bị thơng minh hỗ trợ tốn online" thực hướng dẫn TS Nguyễn Quan Hùng Tất tham khảo... tôi, động lực to lớn để chúng tơi hồn thành luận văn cách trọn vẹn Nhóm sinh viên thực Tóm tắt Đề tài luận văn mà nhóm chúng tơi thực "Phát triển ứng dụng di động hỗ trợ học trực tuyến thiết bị thông. .. dụng phần cứng phần mềm dành riêng cho thiết bị Các ứng dụng gốc cung cấp hiệu suất tối ưu hóa tận dụng cơng nghệ nhất, chẳng hạn GPS, so với ứng dụng web ứng dụng đám mây di động phát triển chung