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

87 1 0
  • Loading ...
1/87 trang

Thông tin tài liệu

Ngày đăng: 07/05/2020, 23:15

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 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 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 Tƣơng tự nhƣ hình đăng ký, ngƣời dùng muốn đăng nhập cần nhập tên đăng nhập mật sau ấn “Login” Hệ thống kiểm tra thơng tin tài khoản ký chuyển sang hình danh sách nội dung học ❖ Xem danh sách nội dung học Hình 3.15 Màn hình danh sách Hình 3.16 Màn hình menu nội dung nội dung học ƣa thích Trong hình danh sách nội dung học tất nội dung học đƣợc hiển thị Mỗi phần tử danh sách có “menu” để sử dụng thêm vào, xóa bỏ khỏi danh sách nội dung ƣa thích 64 ❖ Xem chi tiết nội dung video học Hình 3.17 Màn hình xem chi tiết nội Hình 3.178 Màn hình xem nội dung dung học video học Trong hình xem chi tiết hiển thị danh sách câu phụ đề Ngƣời học ấn vào hình loa để nghe phát âm câu, từ để nghe phát âm từ Khi ấn vào từ từ đƣợc chép vào nhớ tạm phục vụ cho việc tra từ điển nhanh 65 Trong bàn hình xem nội dung video phụ đề đƣợc hiển thị theo thời gian video phát Khi ấn vào từ chức hồn tồn tƣơng tự nhƣ hình xem chi tiết đồng thời video chạy dừng lại ❖ Chức tra từ điển Hình 3.19 Tra từ điển xem chi tiết Hình 3.20 Tra từ điển xem video Trong chức bấm vào từ bất nội dung từ phần chi tiết phần phụ đề xem bật popup phần mô tả nghĩa từ 66 3.5 Kết luận chƣơng Ứng dụng thử nghiệm đáp ứng đƣợc yêu cầu thử nghiệm đặt Có thể đánh giá đƣợc thực tế áp dụng RN để phát triển, triển khai yêu cầu ứng dụng từ đơn giản đến phức tạp Trong ứng dụng sử dụng nhiều Cmp từ đơn giản đến phức tạp, từ Cmp đƣợc viết hoàn toàn JS hay Cmp đƣợc viết ngôn ngữ gốc hệ điều hành nhƣ Cmp giúp chạy Youtube video Bên cạnh thử nghiệm việc giao tiếp với API để tải liệu hay tích hợp thƣ viện bên thứ cung cấp nhƣ tích hợp việc đăng nhập Facebook, Mã nguồn JS đƣợc sử dụng lại đƣợc 80% cho hai tảng Android iOS, số trƣờng hợp phải tiến hành xử lý riêng hai tảng số API, Cmp, hay thuộc tính khơng sử dụng đƣợc HĐH Ứng dụng học Tiếng Anh RN chạy đƣợc hai hệ điều hành Android iOS, thử nghiệm thành công RN để phát triển ứng dụng tảng di động 67 KẾT LUẬN Sau trình nghiên cứu áp dụng React Native, xây dựng thành công ứng dụng hỗ trợ học Tiếng Anh dựa video Về lý thuyết luận văn nghiên cứu phƣơng pháp phát triển ứng dụng di động React Native so sánh phƣơng pháp với phƣơng pháp phát triển khác để thấy đƣợc ác ƣu nhƣợc điểm Về mặt thực nghiệm ứng dụng áp dụng thực tế mang lại lợi ích cho ngƣời dùng  Kết đạt đƣợc Luận văn nghiên cứu áp dụng thành công phƣơng pháp triển ứng dụng React Native Đánh giá đƣợc khả áp dụng đƣợc React Native vào thực tế để triển khai ứng dụng từ đơn giản đến phức tạp Ứng dụng thử nghiệm học Tiếng Anh đáp ứng đƣợc yêu cầu thử nghiệm đặt Trên thực tế trải nghiệm ứng dụng chạy nhanh, khơng có độ trễ, giật thao tác chuyển hình thao tác khác ứng dụng  Hạn chế Do thời gian nghiên cứu hạn chế nên chƣa có thời gian tìm hiểu sâu RN nhƣ công nghệ liên quan Chức ứng dụng hạn chế, phục vụ việc thử nghiệm Tuy sử dụng đƣợc phục vụ việc học tập, nhƣng để phục cụ cho nhiều ngƣời sử dụng cần hoàn thiện thêm chức nội dung Do thời phát triển ứng dụng hạn chế nên nên chức chƣa đƣợc hồn thiện, ứng dụng chay phát sinh số lỗi không mong muốn  Hƣớng phát triển Hoàn thiện phát triển thêm chức nội dung ứng dụng học Tiếng Anh để triển khai ứng dụng thực tế hỗ trợ ngƣời dùng học ngoại ngữ 68 Nghiên cứu sâu React Native công nghệ liên quan để đạt đƣợc kiến thức định nghiên cứu phƣơng pháp mang lại khả tối ƣu cho việc phát triển ứng dụng Đặc biệt, React phát triển có phiên dành cho Web, React Native cho di động, có phiên phát triển ứng dụng dành cho Windows, VR (thực tế tăng cƣờng), Do tƣơng lai React Native công nghệ liên quan phát triển 69 DANH MỤC TÀI LIỆU THAM KHẢO Tài liệu tiếng Việt [1] Nguyễn Anh Tiệp, Cao Thanh Vàng (2013), “Tài liệu hƣớng dẫn xây dựng ứng dụng iPhone”, NXB Đại học Lạc Hồng [2] Trung tâm tin học ĐH KHTN Tp Hồ Chí Minh (2015), “Lập trình thiết bị di động Android” Tài liệu Tiếng Anh [3] Crysfel Villa, Stan Bershadskiy (2016), React Native Cookbook, Packt Publishing [4] Eric Masiello, Jacob Friedmann (2017), Mastering React Native, Packt Publishing [5] Nicholas Zakas (2016), Understanding ECMAScript 6, The Definitive Guide for JavaScript Developers, No Starch Press Publishing [6] Sandro Pasquali (2013), Mastering Node.js, Packt Publishing Tài liệu tham khảo từ Internet [7] Android Developers (2017) Provides the Android SDK and documentation for app developers and designers Available: https://developer.android.com/index.html, truy cập ngày 20/7/2017 [8] Apple Developer (2017) Apple Developer Documentation Available: https://developer.apple.com/, truy cập ngày 3/7/2017 [9] Facebook Inc (2017) React Native, A Framework for Building Native Apps Using React Available: http://facebook.github.io/react-native, truy cập ngày 28/9/2017 [10] Facebook Inc (2017) React, A JavaScript Library for building User Interface Available: https://reactjs.org, truy cập ngày 11/8/2017 [11] Facebook Inc (2017) JSX, XML-Like Syntax Extension to ECMAScript Available: https://facebook.github.io/jsx, truy cập ngày 11/8/2017 70 [12] Gartner (2015) Gartner Says 6.4 Billion Connected "Things" Will Be in Use in 2016, Up 30 Percent From 2015 Availble: https://www.gartner.com/newsroom/id/3165317, truy cập ngày 2/6/2017 [13] Gartner (2017) Gartner Says 8.4 Billion Connected "Things" Will Be in Use in 2017, Up 31 Percent From 2016 Available: https://www.gartner.com/newsroom/id/3598917, truy cập ngày 2/6/2017 [14] Google Inc (2017) Chrome V8, Google's high performance, open source, JavaScript engine Available: https://developers.google.com/v8, truy cập ngày 23/8/2017 [15] Kinvey Native vs Web vs Hybrid App Development Available: http://go.kinvey.com/native-web-hybrid-developers-ebook, ngày truy cập 27/7/2017 71 PHỤ LỤC ❖ Thƣ viện sử dụng ứng dụng "dependencies": { "mobx": "^3.3.2", "mobx-react": "^4.3.5", "prop-types": "^15.6.0", "react": "16.0.0", "react-native": "^0.50.3", "react-native-cli": "^2.0.1", "react-native-elements": "^0.18.2", "react-native-fbsdk": "^0.6.3", "react-native-modalbox": "^1.4.2", "react-native-share": "^1.0.23", "react-native-splash-screen": "^3.0.6", "react-native-tts": "^1.4.1", "react-native-vector-icons": "^4.4.2", "react-native-video": "^2.0.0", "react-native-youtube": "^1.0.1", "react-navigation": "^1.0.0-beta.21" }, ❖ Mã nguồn bố cục hình đăng nhập const ComponentName = Platform.OS == "ios" ? KeyboardAvoidingView : View return ( ESLA this.username = text} onKeyPress={(event)=> this._onTouchNextReturnKey(event) returnKeyType = 'next'/> this.password = text} onKeyPress={(event)=>{ this._onTouchGoReturnKey(event) }} returnKeyType = 'go' /> this._onSubmit()} title={strings.get('sign_in')} /> this._onPressRegister()} title={strings.get('sign_up')} color="#0496E9" /> | this._onForgotPassword()} title={strings.get('forgot_password')} color="#0496E9" /> this._onGoBack()} icon={()} /> 73 ❖ Mã nguồn tích hợp đăng nhập Facebook async _signInViaFacebook() { try { let accessToken = await this._getFacebookAccessToken() let response = await ApiService.loginViaFB(accessToken) if (response.token && response.token.length > 0) { this._openSyncScreen() Context.saveToken(response.token); this.props.accountStore.displayName = response.name || ""; this.props.accountStore.avatarUrl = response.picture || this.props.accountStore.avatarUrl } else { AlertUtils.showMessage(response.error) } } catch (e) { AlertUtils.showMessage(e.message) } } async _getFacebookAccessToken() { try { await LoginManager.logInWithReadPermissions(['public_profile']) let accessToken = await AccessToken.getCurrentAccessToken() return accessToken.accessToken.toString() } catch (e) { AlertUtils.showMessage(e.message) } } ❖ Mã nguồn làm việc với API async getRequest(url, params, header) { let urlParam = this.createQuery(params) let urlRequest = url + urlParam let response = await fetch(urlRequest,{ headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded', header } }); let responseJson = HttpParser.parserJson(response) return responseJson; } 74 ❖ Mã nguồn đọc ghi liệu xuống nhớ điện thoại export default class LocalStore { static async getString(key: String){ return await AsyncStorage.getItem(key); } static async save(key: String, value) { if(value instanceof Array) { value.map((val, i) => {return { val, index: i}}) } await AsyncStorage.setItem(key, JSON.stringify(value)); } } ❖ Mã nguồn làm việc với API hệ thống Trong ứng dụng thử nghiệm có chức phát âm từ câu phần phụ đề nội dung video học Chức sử dụng thƣ viện “eact-native-tts” Mã nguồn chức viết JS với phƣơng thức speak với hai tham số utterance (từ, câu muốn phát âm), voiceId (lấy giá trị mặc định) speak(utterance, voiceId) { if (Platform.OS === 'ios') { return TextToSpeech.speak(utterance, voiceId); } else { return TextToSpeech.speak(utterance); } } Phƣơng thức gọi API Android iOS lần lƣợt nhƣ sau: private int speak(String utterance, String utteranceId) { if (Build.VERSION.SDK_INT >= 21) { return tts.speak(utterance, TextToSpeech.QUEUE_ADD, null, utteranceId); } else { HashMap params = new HashMap(); params.put(TextToSpeech.Engine.KEY_PARAM_UTTERANCE_ID, utteranceId); return tts.speak(utterance, TextToSpeech.QUEUE_ADD, params); } } 75 RCT_EXPORT_METHOD(speak:(NSString *)text voice:(NSString *)voice resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) { if(!text) { reject(@"no_text", @"No text to speak", nil); return; } AVSpeechUtterance *utterance =[[AVSpeechUtterance alloc] initWithString:text]; if(voice) { utterance.voice = [AVSpeechSynthesisVoice voiceWithIdentifier:voice]; } else if (_defaultVoice) { utterance.voice = _defaultVoice; } if (_defaultRate) { utterance.rate = _defaultRate; } if (_defaultPitch) { utterance.pitchMultiplier = _defaultPitch; } [self.synthesizer speakUtterance:utterance]; resolve([NSNumber numberWithUnsignedLong:utterance.hash]); } ❖ Mã nguồn chia sẻ liệu hình Có hai cách để chia sẻ liệu hình với truyền liệu qua “Navigation” dùng thƣ viện quản lý “state” Sau mã nguồn thể việc truyền thông tin mội dung học từ danh sách bấm vào Item sang hình “ContentDetail” thơng qua “Navigation” onPressContentItem(item){ this.props.navigation.navigate('ContentDetail', {item}) } 76 Với cách sử dụng “mobx” để quản lý liệu “state” Cmp ứng dụng Chi tiết nhƣ sau: export default class CaptionStore { loading = true contentItem = {}; @observable loadCaptionError = false; @observable captions = []; videoUrl = ""; videoThumbUrl = " } Dữ liệu phụ đề video đƣợc chia sẻ hai hình “ContentDetailScreen” “PlayVideoScreen” nhƣ sau: @inject('captionStore') @observer class ContentDetailScreen extends Component { componentDidMount(){ try { this.props.captionStore.setContentItem(this.params.item); this.props.captionStore.getCaptions(this.params.item.mediaId); } catch (e) { } } } @inject('captionStore') @observer class PlayVideoScreen extends Component { componentDidMount() { this.mounted = true; this.playerHelper.init(this.props.captionStore.captions, 500) } } 77 ❖ Xem Youtube Video Để xem nội dung Video (Youtube) học ứng dụng sử dụng thƣ viện “react-native-youtube” Thƣ viện sử dụng “youtube-ios-playerhelper” cho iOS YouTube Android Player API cho Android { this.player = component; }} apiKey="AIzaSyBgbyU_HGBfiG1IiJRbAlzK5qLTbOBdVNY" videoId={this.youtubeId} play={this.state.isPlaying} loop={this.state.isLooping} fullscreen={this.state.fullscreen} controls={0} showinfo={false} style={[ {height: this._getVideoHeight()}, styles.player, ]} onError={this._onVideoError.bind(this)} onReady={this._onVideoReady.bind(this)} onChangeState={this._onVideoChangeState.bind(this)} onChangeQuality={e => this.setState({quality: e.quality})} onChangeFullscreen={e => this.setState({fullscreen: e.isFullscreen})} onProgress={e => { this._setVideoUpdateTime(e.currentTime * 1000, e.duration) }} /> 78 ... 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
- Xem thêm -

Xem thêm: 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 , 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

Gợi ý tài liệu liên quan cho bạn