Không gì tốt hơn xây dựng ứng dụng bằng JavaScript. Trừ khi bạn xây dựng ứng dụng di động. JavaScript dành cho web, và dùng nó để xây dựng ứng dụng native di động từng không thể. Lập trình web khó khăn khi chuyển sang native mobile. Họ phải học Java, Objective-C… hoặc ngôn ngữ khác cho mục đích này.
Cho đến khi React Native của Facebook phá vỡ rào cản này. React Native mang lại lợi ích lớn: xây dựng ứng dụng cross-platform cho cả Android và iOS. Trước đây, phải viết code hai lần — một cho Android, một cho iOS. Không còn như vậy nữa.
Bài viết này giới thiệu về React Native, hãy sẵn sàng! 😊
Tại sao chọn React Native?
React Native cung cấp nhiều giải pháp mà công nghệ khác không thể. Đây là những gì bạn có thể làm:
Xây dựng ứng dụng mobile native
React Native cho phép viết ứng dụng native bằng JavaScript cho cả iOS và Android. Sử dụng được tất cả component native: cử chỉ, push notification, camera, vị trí. Có thư viện JS khác như Ionic hay PhoneGap, nhưng chúng dùng Webview, ứng dụng không phải native thực sự.
Xây dựng ứng dụng cross-platform (iOS và Android)
Với React Native, xây dựng ứng dụng chạy trên cả iOS và Android. Đây là lợi ích lớn. Trước đây, phải build hai lần với code khác nhau: iOS (Swift/Objective-C), Android (Java/Kotlin). React Native giải quyết vấn đề này — một codebase chạy cả hai. Tuyệt vời! 😊
Viết code hoàn toàn bằng JavaScript và React
Khi xây dựng React Native, bạn viết JavaScript. Code ReactJS giúp xây dựng UI và trải nghiệm người dùng tuyệt vời.
Bắt đầu với React Native
Bắt đầu có thể hứng thú nhưng cũng hơi bối rối. Bước đầu là cài đặt, có nhiều cách:
Sử dụng expo-cli:
expo-cli là công cụ dòng lệnh. Tải và cài boilerplate React Native tích hợp Expo API (xem hướng dẫn cài đặt). Cách dễ dàng để build app React Native, khuyến nghị cho người mới bắt đầu.
expo-cli cung cấp nhiều tùy chọn. Chạy và test app trên thiết bị di động không cần cấu hình. Quét mã QR và app mở lên trên Expo mobile app. Khám phá các app React Native khác trên trình duyệt qua giao diện web tên là appertize!
Sử dụng react-native-cli
react-native-cli làm công việc giống expo-cli nhưng cách tiếp cận khác và có ưu điểm riêng. App cài bằng react-native-cli cho phép tạo native module riêng. Không cần eject để dùng native module. Eject cho phép dùng native module và viết riêng (sẽ khám phá trong phần khác).
Phát triển React Native trên các nền tảng khác nhau có quy trình khác nhau. Đôi khi cần cấu hình riêng cho nền tảng cụ thể. Ví dụ build cho Android cần Android SDK, hãy khám phá!
Xây dựng ứng dụng mobile cho Android
Một số yêu cầu để bắt đầu phát triển Android. Trước tiên, tải và cấu hình Android SDK và Android Studio. Tải tại đây.
Sau khi cài Android Studio, cần cài thêm APIs. Mở Android Studio, vào Settings, cửa sổ hiện ra:
Đầu tiên, tích ✔️ nền tảng bạn muốn React Native hỗ trợ ở tab SDK Platforms (ví dụ Android 6.0 Marshmallow). Sau đó chuyển sang SDK Tools.
Click ảnh để xem rõ
Tích Android SDK Build-Tools, Android SDK tools, và google play service. Dưới Android SDK Build-Tools chọn tất cả platform:
- Từ 19.0.0 đến 20.0.0
- Từ 22.0.0 đến 24.0.0
- Và 25.0.2, 26.0.1 đến 26.0.3
- 27.0.3 và 28.0.1 đến 28.02
Xong SDK và Android Studio. Bước tiếp theo là emulator. Emulator (hoặc simulator) là nơi chạy và test app. Nhiều lựa chọn.
Có thể dùng Android Studio emulator. Xem cách tạo emulator tại đây. Thực tế tôi không dùng. Thích Genymotion hoặc thiết bị thật hơn.
Genymotion
Genymotion là ứng dụng desktop cung cấp emulator ảo để test app. Tôi thích vì nó nhanh. 😊 Cho tùy chọn tạo điện thoại tùy chỉnh với tính năng như thiết bị thật: bật WiFi, Location, Camera. Khuyến nghị dùng Genymotion hơn Android Studio emulator hoặc emulator khác.
Sử dụng thiết bị thật
Không gì tốt hơn dùng thiết bị thật để chạy và test app. Vì nó cho biết app trông như thế nào trên thiết bị thực. Cảm nhận thực tế công việc mà thiết bị ảo không cho. Nếu có khả năng dùng thiết bị, đừng ngần ngại.
Đến đây ổn với Android — nhưng iOS thì sao?
Xây dựng React Native app cho iOS
Chạy React Native trên iOS không khác nhiều so với Android. Cùng một app React Native chạy trên Android cũng chạy trên iOS, với vài ngoại lệ.
Ví dụ, muốn chạy trên thiết bị iOS, cần macOS. Về macOS và iOS, không cần tải phụ thuộc thêm như SDK Android để chạy React Native trên iOS.
Về Emulator, Xcode có emulator đẹp để test React Native app. Xem bài viết này về mẹo dùng Emulator.
Image credit: appcoda
Trên macOS có thể chạy cả iOS và Android. Có thể cài Android Studio và Genymotion trên macOS. Khả năng này không tồn tại trên PC (chỉ chạy Android emulator, không chạy iOS emulator). Vậy bạn may mắn 😊 nếu có macOS — tận hưởng! 😊.
Bây giờ đã có môi trường build React Native app và cài xong mọi thứ, nhưng code React Native viết như thế nào? Rất đơn giản: bạn viết code ReactJS.
Xem hướng dẫn chính thức để thực hành React Native. Khuyến nghị bài viết tuyệt vời "React Native YouTube Replica". Hướng dẫn từng bước tạo app React Native đầu tiên.
Wow! Đến đây bạn ổn và đang code với react-native. 😊 Nhưng cần check và debug lỗi, xem log code. Log!! Vậy cần debugger! Làm sao debug với React Native?
Debug React Native
Debug code rất quan trọng, không chỉ React Native mà mọi ngôn ngữ. Trong code React Native, bạn cần biết đang xảy ra gì. Nhiều cách debug React Native app:
Debug với Chrome DevTools
React Native cho phép dùng Chrome DevTools xem log app. Để debug với Chrome và bật debug mode trên emulator, nhấn Ctrl+ m trên bàn phím.
Màn hình hiện ra:
Chọn Debug Js Remotely. Sẽ mở tab Chrome tại địa chỉ https://localhost:8081/debugger-ui/. Đó là Chrome DevTools, còn các tùy chọn khác?
Sử dụng React Native Debugger
Credit: react-native-debugger
React Native Debugger là công cụ tuyệt vời debug code React Native. Ứng dụng desktop với nhiều ưu điểm. Tích hợp Redux DevTools và React DevTools. Debug được style. Thực sự là debugger tốt nhất cho React Native và tôi dùng nó. Thường có sẵn trên macOS, Windows, Linux. Xem hướng dẫn cài đặt và tích hợp.
Tôi nghĩ đủ ở phần này. Đây là phần 1 của hướng dẫn tuyệt đối xây dựng mobile app với React Native. Phần sau sẽ đi sâu vào kỹ thuật: dùng native component, React Native API, tích hợp thư viện khác, Redux, GraphQL... Đăng ký mail-list để cập nhật khi phần tiếp theo ra. Cảm ơn thời gian của bạn. 😊
Luôn tìm thấy tôi trên Twitter 😊