TRƯỜNG ĐẠI HỌC MỎ ĐỊA CHẤT KHOA CÔNG NGHỆ THÔNG TIN -*** - Báo Cáo Thực Tập Sản Xuất Đề tài Tìm Hiểu Về Framework React Native Sinh Viên Thực Hiện Giảng Viên Hướng Dẫn NGUYỄN TIẾN HOÀNG TS LÊ HỒNG ANH LỚP KHMT K61B Hà Nội – 2021 LỜI CẢM ƠN Em xin chân thành cảm ơn Khoa Công Nghệ Thông Tin, Bộ môn Khoa Học Máy Tính , trường Đại học Mỏ – Địa Chất tạo điều kiện tốt cho em hoàn thành báo cáo Em xin gửi lời cảm ơn sâu sắc tới tất các thầy cô, người giảng dạy, trang bị cho em kiến thức quý báu suốt năm học vừa qua Xin chân thành cảm ơn tới gia đình, anh chị, bạn bè giúp đỡ, ủng hộ, động viên em suốt thời gian học tập nghiên cứu Mặc dù em cố gắng hoàn thiện thật tốt đồ án kiến thức có hạn khơng thể tránh khỏi sai sót, em rất mong nhận cảm thơng, ý kiến đóng góp các q Thầy Cô các bạn! Em xin chân thành cảm ơn ! Hà Nội , Ngày 25 Tháng 01 Năm 2021 Sinh viên thực Hoàng Nguyễn Tiến Hoàng Mục lục Chương I: Tổng Quan Cros-Platfrom Cross-Platfrom Ưu nhược điểm Cross-Platfrom Chương II : Giới Thiệu Framework React Native 2.1 Tổng quan React Native 2.2 Ưu nhược điểm React Native 2.3 Thiết lập môi trường 2.3.1 Thiết lập môi ảo 2.3.2 Thiết lập môi thực 12 Chương III :Trợ Năng - Guide 13 AccesiibilityTraits(IOS) 13 AccessibilityViewModal 13 onAccessibilityTap14 onMagicTap 14 Chương IV: Một số Component React Native 15 Chương V :Tích hợp React Native vào ứng dụng Native 16 5.1 Tich hợp React Native vào IOS 16 5.2 Tích hợp React Native vào Android Chương VI :Hiệu suất React Native 20 Chương VII :JavaScript RunTime 25 Chương VIII:Native Modules 25 8.1 Android Native Modules Chương IX : Định hướng phát triển 29 Chương X :Demo 29 25 19 I Tổng quan Cross-Platfrom Cross-Platfrom ? Trong cơng nghệ điện toán , đa tảng (Cross-Platfrom) thuật ngữ chỉ các phần mềm máy tính hay các phương thức điện toán các khái niệm thực thi đầy đủ vận hanh nhiều tảng máy tính hay ứng dụng … Phần mềm đa tảng chia thành hai loại: + Loại 1: yêu cầu phải thiết kế biên dịch phiên cho mỗi tảng hỡ trợ + Loại 2: chạy trực tiếp bất tảng mà không cần chuẩn bị thêm đặc biệt chẳng hạn viết ngôn ngữ thông dịch hay biên dich sang mã bytecode có khả di động bằng trình thơng dịch hay các gói run-time thường dùng thành phần tiêu chuẩn mọi tảng Ưu điểm , nhược điểm cross-platfrom 2.1 Ưu điểm + Mạch lạc kiến trúc: Để xây dựng ứng dụng cross-platform thiết kế chặt chẽ , tn thủ theo mơ hình ( MVC, MVVM…) để tách phần phụ thuộc vào Ó , phần phụ thuộc vào phía 3rd Library Việc sẽ áp lục cho nhà thiết kế , bù lại sẽ làm cho ứng dụng có hiệu cao , dễ dàng bảo trì tương lai + Viết code ít: Bạn chỉ cần code nhất mã build chạy các tảng khác , Nghĩa công sức bỏ để viết mã máy sẽ tối ưu + Dễ dàng bảo trì mở rộng: Do mạch lạc kiến trúc việc điều tra sửa lỗi cũng sẽ dễ dàng hơn, giúp cho việc bảo trì mở rộng cũng sẽ dễ dàng nhiều + Tính tái sử dụng cao : Vì cross-platform nên các đoạn mã sẽ dễ dàng tái sử dụng share cho các ứng dụng , phần mềm khác cho dù cross-platform khơng + Chi phí gia cơng bảo trì thấp: Vì cross-platform tính chất build lần chạy nhiều nơi nên sẽ giảm chi phí thuê người code , tăng tốc độ hoàn thành dự án 2.2 Nhược điểm: + Hiệu thấp + Ứng dụng có chức nặng phần cứng sẽ khá khó xử lý II Giới Thiệu Framework React Native Điều kiện tiên phải có kiến thức CSS, JS ( ES6 trở lên), ReactJS Sự phát triển CNTT ngày khủng khiếp Những công nghệ làm thay đổi giới cách nhanh chóng Từ lúc đời smartphone có bước tiến mạnh mẽ mà cơng nghệ kèm theo cũng địi hỏi nhà phát triển phần mềm viết nhiều phần mềm để sử dụng smartphone khơng đơn ứng dụng nhắn tin gọi điện thơng thường Kèm theo số lượng người dùng di động (smartphone) tăng lên chóng mặt Cụ thể theo báo cáo mà các nhà khoa học thống kê thời gian dành cho smartphone trung bình qua khảo sát hàng tỉ người rơi vào khoảng tiếng ngày Đồng thời giá smartphone ngày rẻ qua năm, các dịng smartphone giá rẻ đến từ các quốc gia phát triển đông dân Ấn Độ, Trung Quốc Cùng với cơng nghệ sản x́t dần hồn thiện kéo giá smartphone xuống tới các tầng lớp phổ thông xã hội Từ smartphone trở thành thiết bị sở hữu dễ dàng Nhiều công ty sản xuất phần mềm di động cơng ty lớn nhìn thấy mảnh đất màu mỡ tiềm phát triển rất lớn Đồng thời dựa theo số liệu thống kê bắt đầu người dùng chịu chi tiền cho smartphone nhiều hơn, số lượng người dùng chịu bỏ tiền mua ứng dụng để sử dụng smartphone cũng tăng lên theo năm Do kéo theo nhu cầu công việc liên quan đến mảng smartphone nói chung lập trình mobile nói riêng tăng lên chóng mặt Đưa tiềm thử thách dành cho muốn phát triển theo hướng lập trình ứng dụng di động Nhu cầu dạy học lập trình ứng dụng di động dần trở thành xu hướng xã hội 2.1 Tổng quan React Native React Native framework mã nguồn mở Facebook phát triển nhằm mục địch giải toán hiệu Hybrid toán chi phí mà phải viết nhiều loại ngôn ngữ native cho tảng di dộng Chúng ta sẽ build ứng dụng Native , build ứng dụng cách đa tảng ( Cross-platform) “ mobile web app” , “ HTML5 app”, cũng hybrid app, hay cũng không chỉ build IOS hay Android mà build chạy hai hệ sinh thái Một điểm hay ho giảm chi phí recompile Native bằng cách sử dụng Hot-loading tức bạn không cần phải build lại ứng dụng từ đầu nên việc chỉnh sửa diễn nhất nhanh chóng Giups cho lập trình viên thấy chỉnh sửa họ cách nhanh chóng trực quan , khơng phải bỏ quá nhiều thời gian việc build run ứng dụng 2.2 Ưu nhược điểm React Native 2.2.1 Ưu điểm: • Hiệu mặt thời gian mà bạn muốn phát triển ứng dụng nhanh chóng • Hiệu tương đối ởn định • • • • • Cộng đồng phát triển mạnh Tiết kiệm tiền Team phát triển nhỏ Ứng dụng tin cậy ổn định Xây dựng cho nhiều hệ điều hành khác với ít native code nhất • Trải nghiệm người dùng tốt hybrid app 2.2.2 Nhược điểm: • Vẫn địi hỏi native code • Hiệu sẽ thấp với app native code • Bảo mật không cao dựa JS • Quản lý nhớ • Khả tùy biến cũng không thực tốt vài module 2.3 Thiết lập mơi trường Có cách để thiết lập mơi trường phát triển React Native: • Thiết lập mơi trường ảo thơng qua virtual devices • Thiết lập mơi trường thực thông qua Expo 2.3.1 Thiết lập môi trường ảo thông qua virtual devices 2.3.1.1 Cài đặt Nodejs, JDK, Android Studio a) Nodejs b) JDK c) Android Studio 2.3.1.2 Cài SDK Android Studio Để xây dựng ứng dụng React Native với code native cần cài đặt số gói Android Studio File -> Settings -> Appearance & Behavior -> System -> Android SDK -> Select Show package Details -> Android 10.0(Q) -> Select Android SDK Platform 29 , Intel x86 Atom System Image, Intel x86 Atom_64 System Image -> SDK Tools -> Select Show package Details -> Android SDK Build-Tools -> Select 28.0.3 -> OK • File -> Settings • Appearance & Behavior -> System -> Android SDK • Select Show package Details • Selects: Android 10.0(Q) -> Select Android SDK Platform 29 , Intel x86 Atom System Image, Intel x86 Atom_64 System Image 10 • Bước sử dụng các thư viện bridge có sẵn để thiết lập kết nói với phía JS bên ngoài, tất nhiên để bên biết cần phải gọi module Chúng ta cần khai báo tiếp vào file sau • Sau bước có tên ToastExample để giao tiếp với JS Để xử lý thời gian ngắn hay dài, ta sẽ thêm đoạn xử lý sau (phần tuỳ với native bạn custom thoải mái), với mục đích khai báo const (hằng số) cho phần JS 29 • Cuối viết function để sau JS call cho lên thơng báo • có hàm tên show nhận vào đối số message nội dung duration thời gian hiển thị Tiếp theo cần implement bằng interface Package chung RN (tương tự các native modules khác mà RN viết sẵn) • Chúng ta tiếp tục tạo file tên CustomReactPackages.java chẳng hạn, import file ToastModule vừa xong khai báo sau để đăng ký 30 • Cuối đăng ký thêm Package với ứng dụng chính xong Ta sửa file MainApplication.java 31 IX Định hướng phát triển ứng dụng IX.1 Mục tiêu: Giải các vấn đề nhu cầu tìm việc làm cho học sinh , sinh viên ,… - IX.2 Phát triển ứng dụng: Server: + nodejs ( Express) viết Api + sử dụng gói socket.io để xử lý gọi trực tiếp - CSDL : Mysql - React Native : sử dụng google Map để quét vị trí xung quanh XI DEMO 32 11.1: Giao diện Dashboard 33 34 11.2 Giao diện Đăng Nhập 35 36 11.3 Giao diện đăng nhập thành công 37 38 XI.4 Giao diện Lấy lại mật khẩu 39 40 XI.5 Giao diện Tạo tài khoản 41 42 43 ... Component React Native 15 Chương V :Tích hợp React Native vào ứng dụng Native 16 5.1 Tich hợp React Native vào IOS 16 5.2 Tích hợp React Native vào Android Chương VI :Hiệu suất React Native. .. các thành phần React Native • Start React Native server chạy ứng dụng native • Xác nhận React Native ứng dụng bạn hoạt động kỳ vọng V.1.2 Điều kiện cần Đã cài đặt React Native Cli Môi trường... Ưu nhược điểm Cross-Platfrom Chương II : Giới Thiệu Framework React Native 2.1 Tổng quan React Native 2.2 Ưu nhược điểm React Native 2.3 Thiết lập môi trường 2.3.1 Thiết lập môi ảo