Xây dựng ứng dụng học từ vựng evoc với react native và firebase

ĐẠI HỌC DUY TÂN KHOA CÔNG NGHỆ THÔNG TIN 🙖🙐✰🙖🙐 - KHĨA LUẬN CỬ NHÂN CƠNG NGHỆ THƠNG TIN XÂY DỰNG ỨNG DỤNG HỌC TỪ VỰNG “EVOC" VỚI REACT NATIVE VÀ FIREBASE GIẢNG VIÊN HƯỚNG DẪN TS Lê Thanh Long SINH VIÊN THỰC HIỆN Nguyễn Long Vũ Đà Nẵng, 10/2022 Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase LỜI CAM ĐOAN Em xin cam đoan: Những nội dung báo cáo em thực hướng dẫn trực tiếp thầy Lê Thanh Long Mọi tham khảo dùng báo cáo trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian địa điểm công bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trái, em xin chịu hoàn toàn trách nhiệm Sinh viên thực Nguyễn Long Vũ Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase LỜI CẢM ƠN Em xin chân thành cảm ơn thầy cô khoa CNTT trường đại học Duy Tân đúc kết giảng tận tình giảng dạy, tạo điều kiện tốt để em thực tập rèn luyện khóa học chúng em vừa qua Đặc biệt, em xin chân thành cảm ơn Thầy Lê Thanh Long người hướng dẫn trực tiếp, giúp đỡ tạo điều kiện tốt cho em suốt thời gian thực đề tài này Mặc dù cố gắng song kiến thức kinh nghiệm hạn chế nên đề tài em tránh khỏi thiếu sót, mong đóng góp ý kiến q thầy bạn để chương trình hoàn chỉnh Một lần nữa, em xin chân thành cảm ơn! Sinh viên thực Nguyễn Long Vũ Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase TỔNG QUAN DỰ ÁN Tên dự án Ngày bắt đầu kết thúc XÂY DỰNG ỨNG DỤNG HỌC TỪ VỰNG “EVOC" VỚI REACT NATIVE VÀ FIREBASE 10/2022 – 12/2022 Trường Trường Đại học Duy Tân Tên GVHD TS Lê Thanh Long Nguyễn Long Vũ Thành viên MSSV: 24211206041 Email: longvuooo4@gmail.com Số điện thoại: 0338208072 Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase MỤC LỤC MỞ ĐẦU 1 Lý chọn đề tài Mục đích ý nghĩa đề tài .1 2.1 Mục đích đề tài .1 2.2 Ý nghĩa đề tài 2.2.1 Ý nghĩa khoa học 2.2.2 Ý nghĩa thực tiễn Đối tượng nghiên cứu Phạm vi nghiên cứu Phương pháp nghiên cứu Bố cục đề tài CHƯƠNG I: CƠ SỞ LÝ THUYẾT .3 1.1 Ngôn ngữ TypeScript .3 1.1.1 Định nghĩa 1.1.2 Ưu điểm 1.1.3 Nhược điểm 1.2 React Native .3 1.2.1 Định Nghĩa 1.2.2 Ưu điểm 1.2.3 Nhược điểm 1.3 Firebase .4 1.3.1 Định Nghĩa 1.3.1.1 Firebase gì? .4 1.3.1.2 Firebase Authentication 1.3.1.3 Firebase Realtime Database 1.3.2 Ưu điểm 1.3.3 Nhược điểm CHƯƠNG II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 Đặc tả yêu cầu chức 2.1.1 Mô tả yêu cầu .7 Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase 2.1.2 Môi trường phát triển 2.2 Phân tích thiết kế hệ thống 2.2.1 Tác nhân hệ thống 2.2.2 Biểu đồ Use case tổng quát 2.2.3 Mô tả chi tiết Use case 10 2.2.3.1 Đăng ký .10 2.2.3.1.1 Use case Đăng ký 10 2.2.3.1.2 Biểu đồ .11 2.2.3.1.3 Biểu đồ hoạt động 12 2.2.3.2 Đăng nhập 13 2.2.3.2.1 Use case Đăng nhập 13 2.2.3.2.2 Biểu đồ .14 2.2.3.2.3 Biểu đồ hoạt động 15 2.2.3.3 Tìm kiếm .16 2.2.3.3.1 Use case Tìm kiếm 16 2.2.3.3.2 Biểu đồ .17 2.2.3.3.3 Biểu đồ hoạt động 17 2.2.3.4 Học từ vựng 18 2.2.3.4.1 Use case Học từ vựng .18 2.2.3.4.2 Biểu đồ .19 2.2.3.4.3 Biểu đồ hoạt động 19 2.2.3.5 Làm test từ vựng 20 2.2.3.5.1 Use case Làm test từ vựng 20 2.2.3.5.2 Biểu đồ .21 2.2.3.5.3 Biểu đồ hoạt động 22 2.2.3.6 Lịch sử test 22 2.2.3.6.1 Use case Lịch sử test .22 2.2.3.6.2 Biểu đồ .23 2.2.3.6.3 Biểu đồ hoạt động 24 2.2.3.7 Quản lý thông tin 24 2.2.3.7.1 Use case Quản lý thông tin .24 Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase 2.2.3.7.2 Biểu đồ .25 2.2.3.7.3 Biểu đồ hoạt động 26 2.2.3.8 Thêm từ vựng .27 2.2.3.8.1 Use case Thêm từ vựng 27 2.2.3.8.2 Biểu đồ .28 2.2.3.8.3 Biểu đồ hoạt động 29 2.3 Thiết kế sở liệu .30 CHƯƠNG III: CÀI ĐẶT 32 3.1 Giao diện 32 3.1.1 Giao diện hình Đăng nhập 33 3.1.2 Giao diện hình Đăng ký 33 3.1.3 Giao diện hình Home 34 3.1.4 Giao diện hình Học từ vựng .35 3.1.5 Giao diện hình Test từ vựng .36 3.1.6 Giao diện hình Quản lý thơng tin .37 3.1.7 Giao diện hình Thêm từ vựng .39 3.2 Một số đoạn code 40 KẾT LUẬN 44 Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase Danh sách hình Hình 2.1: Use case tổng quát Hình 2.2: Use case đăng ký 10 Hình 2.3: Biểu đồ Đăng ký .11 Hình 2.4: Biểu đồ hoạt động Đăng ký 12 Hình 2.5: Use case Đăng nhập 13 Hình 2.6: Biểu đồ Đăng nhập 14 Hình 2.7: Biểu đồ hoạt động Đăng nhập 15 Hình 2.8: Use case Tìm kiếm .16 Hình 2.9: Biểu đồ hoạt động Tìm kiếm 17 Hình 2.10: Biểu đồ hoạt động Tìm kiếm 17 Hình 2.11: Use case Học từ vựng .18 Hình 2.12: Biểu đồ Học từ vựng 19 Hình 2.13: Biểu đồ hoạt động Học từ vựng 19 Hình 2.14: Use case Làm test từ vựng 20 Hình 2.15: Biểu đồ Làm test từ vựng .21 Hình 2.16: Biểu đồ hoạt động Làm test từ vựng 22 Hình 2.17: Use case Lịch sử test 22 Hình 2.18: Biểu đồ Lịch sử test 23 Hình 2.19: Biểu đồ hoạt động Lịch sử test 24 Hình 2.20 Use case Quản lý thông tin 24 Hình 2.21: Biểu đồ Quản lý thông tin 25 Hình 2.22: Biểu đồ hoạt động Quản lý thông tin 26 Hình 2.23: Use case Thêm từ vựng 27 Hình 2.24: Biểu đồ Thêm từ vựng 28 Hình 2.25: Biểu đồ hoạt động Thêm từ vựng .29 Hình 2.18: Node sở liệu User 30 Hình 2.19: Node sở liệu Folder 31 Hình 3.1: Giao diện hình Đăng nhập 32 Hình 3.2: Giao diện hình Đăng ký 33 Hình 3.3: Giao diện hình Home 34 Hình 3.4: Giao diện hình Học từ vựng .35 Hình 3.5: Giao diện hình Test từ vựng .36 Hình 3.6: Giao diện hình Quản lý thơng tin .37 Hình 3.7: Giao diện hình Thay đổi thông tin 38 Hình 3.8: Giao diện hình Thêm từ vựng .39 Hình 3.9: Code Login 40 Hình 3.10: Lấy list key Firebase .40 Hình 3.11: Thêm từ vựng vào Firebase 41 Hình 3.12: Navigator 41 Hình 3.13: Front-end Login 42 Hình 3.14: Flashcard 42 Hình 3.13: Front-end Học từ vựng .43 Hình 3.14: Update Profile 43 Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase Danh sách bảng Bảng 2.1: Mô tả tác nhân hệ thống .7 Bảng 2.1: Mô tả Use case tổng quát .8 Bảng 2.2: Mô tả Use case Đăng ký 10 Bảng 2.3: Mô tả Use case Đăng nhập 13 Bảng 2.4: Mô tả Use case Tìm kiếm 16 Bảng 2.5: Mô tả Use case Làm test từ vựng 20 Bảng 2.6: Mô tả Use case Lịch sử test 23 Bảng 2.7: Mô tả Use case Quản lý thông tin 24 Bảng 2.8: Mô tả Use case Thêm từ vựng 27 Bảng 2.9: Mô hình liệu ứng dụng 30 Bảng 2.10: Mô tả Node User 30 Bảng 2.11: Mô tả Node Folder 31 Xây dựng ứng dụng học từ vựng “EVoc" với React Native Firebase MỞ ĐẦU Lý chọn đề tài Công nghệ thông tin dần phát triển, dẫn đến vai trò ngành giáo dục ngày tăng Nếu trước đây, bạn muốn học, bạn phải đến trường đến trung tâm để tham gia học tập Nhưng từ công nghệ phát triển, bạn tham gia khóa học online nhà mà thời gian di chuyển địa điểm Cũng việc tham gia khóa học, lúc trước bạn muốn học từ vựng Tiếng anh, bạn cần phải có từ điển, cần phải chép vào vở, bạn lại làm sách vở, phải chép lại Nắm bắt điều này, em định lựa chọn đề tài “XÂY DỰNG ỨNG DỤNG HỌC TỪ VỰNG “EVOC" VỚI REACT NATIVE VÀ FIREBASE” Mục đích ý nghĩa đề tài 2.1 Mục đích đề tài Tạo môi trường học từ vựng thân thiện với người dùng  Có thể học từ vựng thông qua flashcard  Điền từ vựng sau nghe lại từ vựng  Tạo test theo học phần  Giáo viên tạo học phần để học sinh học từ vựng theo học phần 2.2 Ý nghĩa đề tài Tăng suất học tiếng Anh người 2.2.1 Ý nghĩa khoa học  Sử dụng công nghệ để lập trình giúp tiết kiệm chi phí, thời gian đảm bảo chất lượng phần mềm  Nghiên cứu cấu trúc hoạt động Firebase React Native, từ phát triển ứng dụng sử dụng cho đa tảng 2.2.2 Ý nghĩa thực tiễn Giúp cho Học sinh có cách học Tiếng anh tốt hơn, hỗ trợ Giáo viên việc kiểm tra từ vựng học sinh nhanh hơn, tiện lợi Đối tượng nghiên cứu - Ngơn ngữ lập trình TypeScript - React Native Framework