Công nghệ phát triển ứng dụng di động react native và ứng dụng thí nghiệm cho phần mềm hỗ trợ học tiếng anh

BỘ GIÁO DỤC VÀ ĐÀO TẠO VIỆN ĐẠI HỌC MỞ HÀ NỘI LUẬN VĂN THẠC SỸ CÔNG NGHỆ PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG REACT NATIVE VÀ ỨNG DỤNG THÍ NGHIỆM CHO PHẦN MỀM HỖ TRỢ HỌC TIẾNG ANH PHẠM THỊ HÀ HẠNH CHUYÊN NGÀNH CÔNG NGHỆ THÔNG TIN MÃ SỐ: 60.48.02.018 NGƢỜI HƢỚNG DẪN KHOA HỌC TS DƢƠNG THĂNG LONG HÀ NỘI - 2017 LỜI CAM ĐOAN Tôi xin cam đoan tồn nội dung đƣợc trình bày luận văn kết tìm hiểu nghiên cứu riêng tôi, chƣa đƣợc sử dụng để bảo vệ học vị Tôi xin cam đoan rằng, giúp đỡ việc thực luận văn đƣợc cảm ơn thông tin trích dẫn luận văn đƣợc ghi rõ nguồn gốc Hà Nội, ngày 12 tháng 11 năm 2017 Học viên Phạm Thị Hà Hạnh i LỜI CẢM ƠN Trong q trình thực luận văn, tơi nhận đƣợc hƣớng dẫn, giúp đỡ động viên nhiều cá nhân tập thẻ Tôi xin đƣợc bày tỏ cảm ơn sâu sắc tới tất cá nhân tập thẻ tạo điều kiện giúp đỡ học tập nghiên cứu Tôi xin trân trọng cảm ơn Ban giám hiệu nhà trƣờng, khoa Đào tạo Sau đại học thầy giáo, cô giáo Viện Đại học Mở Hà Nội, đặc biệt TS Dƣơng Thăng Long nhiệt tình hƣớng dẫn bảo tơi q trình nghiên cứu thực đề tài Tơi xin cảm ơn động viên, giúp đỡ bạn bè gia đình giúp đỡ thực đề tài Tôi xin chân thành cảm ơn giúp đỡ quý báu đó! Hà Nội, ngày 12 tháng 11 năm 2017 Học viên Phạm Thị Hà Hạnh ii MỤC LỤC LỜI CAM ĐOAN i LỜI CẢM ƠN ii MỤC LỤC iii DANH MỤC CÁC THUẬT NGỮ, KÝ HIỆU, CỤM TỪ VIẾT TẮT vi DANH MỤC CÁC BẢNG BIỂU, HÌNH VẼ vii MỞ ĐẦU .1 CHƢƠNG TỔNG QUAN VỀ DI ĐỘNG VÀ LẬP TRÌNH DI ĐỘNG .4 1.1 Giới thiệu điện thoại thông minh 1.2 Kiến trúc tảng hệ điều hành 1.2.1 Hệ điều hành Android 1.2.2 Hệ điều hành iOS 10 1.2.3 Các hệ điều hành khác 15 1.3 Các phƣơng pháp lập trình ứng dụng .15 1.3.1 Phƣơng pháp lập trình ứng dụng Native .15 1.3.2 Phƣơng pháp lập trình ứng dụng lai 16 1.3.3 Phƣơng pháp lập trình ứng dụng đa tảng .17 1.4 Kết luận chƣơng .18 CHƢƠNG LẬP TRÌNH ỨNG DỤNG DI ĐỘNG VỚI REACT NATIVE 19 2.1 Tổng quan React Native 19 2.1.1 Giới thiệu React Native 19 2.1.2 Lịch sử phát triển 20 2.1.3 Ý tƣởng hình thành React Native 21 2.2 React Native công nghệ liên quan .23 2.2.1 Ngôn ngữ lập trình Javascript .23 2.2.2 Javascript VM (V8 engine) 24 2.2.3 ReactJS 26 iii 2.2.4 JSX 27 2.2.5 Node.js NPM 28 2.3 Kiến trúc React Native 28 2.3.1 Kiến trúc ứng dụng React Native 28 2.3.2 Cách thức hoạt động React Native .31 2.3.3 Luồng hoạt động hiệu 37 2.4 Thành phần khái niệm .38 2.4.1 React Native Component 38 2.4.2 Props state Component 39 2.4.3 Vòng đời React Native Component 42 2.4.4 Định dạng bố cục 44 2.4.5 Làm việc với mạng 47 2.4.6 Xử lý chạm 48 2.5 Các thành phần giao diện 48 2.5.1 Các thành phần đƣợc hỗ trợ React Native 49 2.5.2 Các giao diện đƣợc hỗ trợ từ React Native 49 2.6 Kết luận chƣơng .50 2.6.1 Ƣu điểm .50 2.6.2 Nhƣợc điểm 52 CHƢƠNG PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG HỖ TRỢ HỌC TIẾNG ANH DỰA TRÊN CÔNG NGHỆ REACT NATIVE 53 3.1 Phƣơng pháp triển khai 53 3.1.1 Lựa chọn nội dung phạm vi phát triển ứng dụng 53 3.1.2 Mục tiêu phát triển 53 3.2 Xác định phân tích chức 54 3.3 Phân tích hệ thống 55 3.4 Hình ảnh ứng dụng chạy thực tế 63 3.5 Kết luận chƣơng .67 iv KẾT LUẬN .68 DANH MỤC TÀI LIỆU THAM KHẢO 70 PHỤ LỤC 72 v DANH MỤC CÁC THUẬT NGỮ, KÝ HIỆU, CỤM TỪ VIẾT TẮT Kí hiệu, từ viết tắt Tiếng Anh Tiếng Việt Cây cú pháp trừu tƣợng AST Abstract Syntax Tree Cmp Component CocoaPod CocoaPod DOM Document Object Model Framework Framework IOT Internet of Things Native app Native application Một đối tƣợng giao diện ngƣời dùng React Native Bộ công cụ phát triển phần mềm cho hệ điều hành iOS Mơ hình đối tƣợng tài liệu HTML Nền tảng lập trình thực thi ứng dụng Kết nối vạn vật Ứng dụng viết ngôn ngữ gốc phát hành kèm theo hệ điều hành Dùng để mô tả công việc vẽ Render giao diện ngƣời dùng lên hình Render hiển thị thiết bị di động Tên tảng hỗ trợ lập trình RN React Native SDK Software Development Kit State state UI User Interface Giao diện ngƣời dùng VM Virtual Machine Máy ảo ứng dụng di động Bộ công cụ phát triển phần mềm Trạng thái Cmp React Native vi DANH MỤC CÁC BẢNG BIỂU, HÌNH VẼ Hình 1.1 Kiến trúc hệ điều hành Android Hình 1.2 Kiến trúc hệ điều hành iOS .11 Hình 2.1 Các ứng dụng đƣợc viết React Native 20 Hình 2.2 Cách thức hoạt động DOM ảo 22 Hình 2.3 Cách thức hoạt động React Native .22 Hình 2.4 Cách thức hoạt động Javascript VM 25 Hình 2.5 Quá trình tạo lớp ẩn Javascript VM 26 Hình 2.6 Kiến trúc ứng dụng React Native 29 Hình 2.7 Mỗi trƣờng cầu nối JavaScript VM ngôn ngữ gốc .29 Hình 2.8 Quá trình thực thi mã nguồn React Native .30 Hình 2.9 Chi tiết trình hoạt động mã nguồn RN thơng qua cầu nối 31 Hình 2.10 Ví dụ ứng dụng “Hello world” React Native 32 Hình 2.11 Quá trình biên dịch tải mã nguồn Javascript 33 Hình 2.12 Quá trình thực thi ứng dụng React Native 34 Hình 2.13 Quá trình tƣơng tác qua lại JavaScript mà ngôn ngữ gốc .35 Hình 2.14 Quá trình thành phần giao diện gốc đƣợc tạo tƣơng ứng với JavaScript 36 Hình 2.15 Quá trình xử lý tƣơng tác ngƣời dùng .37 Hình 2.16 Quá trình giao diện thay đổi theo state 41 Hình 2.17 Vịng đời component React Native 42 Hình 2.18 Các bƣớc thay đổi component Reat Native 42 Hình 2.19 Định dạng giao diện React Native 45 Hình 2.20 Q trình thay đổi kích thƣớc thành phần giao diện RN 45 Hình 2.21 Cách thức bố cục React Native 46 Hình 3.1 Biểu đồ User case tổng quát 56 Hình 3.2 Biểu đồ hoạt động đăng ký .57 vii Hình 3.3 Biểu đồ hoạt động đăng nhập 57 Hình 3.4 Biểu đồ hoạt động xem video 58 Hình 3.5 Biểu đồ hoạt động đƣa vào danh sách u thích .59 Hình 3.6 Biểu đồ hoạt động phát âm câu 59 Hình 3.7 Biểu đồ hoạt động phát âm từ 60 Hình 3.8 Biểu đồ hoạt động tra từ 60 Hình 3.9 Biểu đồ trình tự đăng ký 61 Hình 3.10 Biểu đồ trình tự phát âm câu 61 Hình 3.11 Biểu đồ trình tự phát âm từ .62 Hình 3.12 Biểu đồ trình tự tra từ 62 Hình 3.13 Màn hình đăng nhập 63 Hình 3.14 Màn hình đăng ký 63 Hình 3.15 Màn hình danh sách nội dung học 64 Hình 3.16 Màn hình menu nội dung ƣa thích 64 Hình 3.18 Màn hình xem nội dung video học .65 Hình 3.19 Tra từ điển xem chi tiết 66 Hình 3.20 Tra từ điển xem video 66 viii MỞ ĐẦU Mạng viễn thông xuất Việt Nam từ đầu năm 1990 theo thời gian số lƣợng thuê bao nhƣ nhà cung cấp dịch vụ động Việt Nam ngày tăng Do nhu cầu trao đổi thông tin ngày tăng nhu cầu sử dụng sản phẩm cơng nghệ cao nhiều tính năng, cấu hình cao, chất lƣợng tốt, kiểu dáng mẫu mà đẹp, phong phú nên nhà cung cấp phải luôn cải thiện, nâng cao sản phẩm Do việc xây dựng ứng dụng cho điện thoại di động ngành công nghiệp đầy tiềm hứa hẹn nhiều phát triển vƣợt bậc ngành khoa học kĩ thuật Trong năm gần triển lãm điện tử tiêu dùng CES, thiết bị thông minh nhƣ tivi thông minh, điện thoại thông minh, tủ lạnh thông minh liên tục đƣợc hãng công nghệ lớn giới thiệu Các hãng công nghệ không tập trung vào thiết bị độc lập mà chuyển sang xu hƣớng kết nối thiết bị thơng minh với thơng qua Internet hay cịn gọi xu hƣớng kết nối vạn vật (Internet of Things - gọi tắt IOT) Chúng có khả trao đổi truyền tải thông tin, liệu cách hiệu quả, tiện lợi thông qua mạng Internet mà không cần tƣơng tác trực tiếp ngƣời với thiết bị hay ngƣời với ngƣời Theo hãng Gartner năm 2016 có tới 6,4 triệu thiết bị kết nối, tăng 30% so với năm 2015, đến năm 2017 đƣợc dự đốn có tới 8.4 triệu thiết bị kết nối, đến năm 2020 dự đốn có tới 21 triệu thiết bị kết nối vào mạng Internet [12],[13] Do đó, IOT xu hƣớng tất yếu đăng đƣợc doanh nghiệp lĩnh vực công nghệ quan tâm, đầu tƣ nghiên cứu Cùng với xu hƣớng IOT, điện thoại thơng minh hay cịn gọi smartphone trở nên phổ biến thời điểm tại, smartphone loại IoT nhƣng có vai trị lớn tƣơng tác, tính tốn xử lý hệ tích hợp IoT Các hệ điều hành đƣợc sử dụng thiết bị không ngừng phát triển hồn thiện Đã có nhiều hệ điều hành đƣợc nghiên cứu phát triển nhƣ Android, iOS, WindowsPhone, Blackberry, Tizen Tuy nhiên theo hãng nghiên cứu thị trƣờng Gartner cho biết, hệ điều hành di động Android Google iOS ... nghiên cứu công nghệ phát triển ứng dụng di động đa tảng React native ứng dụng công nghệ phát triển ứng dụng hỗ trợ học Tiếng Anh Công nghệ hứa hẹn mang lại phƣơng pháp phát triển ứng dụng đa tảng... quan di động lập trình di động Chƣơng II: Lập trình ứng dụng di động với React Native Chƣơng III: Phát triển ứng dụng di động hỗ trợ học Tiếng Anh dựa công nghệ React Native Tuy cố gắng để hoàn... CHƢƠNG PHÁT TRIỂN ỨNG DỤNG DI ĐỘNG HỖ TRỢ HỌC TIẾNG ANH DỰA TRÊN CÔNG NGHỆ REACT NATIVE 53 3.1 Phƣơng pháp triển khai 53 3.1.1 Lựa chọn nội dung phạm vi phát triển ứng dụng