Debug ứng dụng React Native trên thiết bị thật thì làm gì?

Chào các bạn!

Sắp tới mình có làm cái đồ án về React Native & Swift, nên cùng mày mò tìm hiểu thử, sau mấy tiếng đầu "hack não" với nó thì mình nhận ra mình còn quá "ngáo đá" khi vướng mãi một chỗ Debugging with real devices. Sau một hồi mày mò mình nhận ra nên note lại một số điều để cho các bạn nào là newbie với React Native như mình có thể tìm hiểu.

BẬT CHỨC NĂNG GỠ LỖI QUA USB (Android)

Hầu hết các thiết bị Android mặc định bạn chỉ có thể cài đặt và chạy ứng dụng được tải xuống từ Google Play Store. Để cài đặt ứng dụng do chính bạn dev ra, bạn sẽ cần bật tính năng Gỡ lỗi qua USB (USB Debugging) trên thiết bị của mình.

Để bật "gỡ lỗi qua USB" trên thiết bị của bạn, đầu tiên bạn cần tìm và bật menu "Tùy chọn nhà phát triển" (Developer Options) bằng cách:

• Chọn Cài đặt → Giới thiệu về điện thoại (About phone)
• Sau đó chạm vào dòng Build number bảy lần gì đó cho đến khi nó hiện lên thông báo "Bạn đã là nhà phát triển" (You're now a developer) là thành công. 
• Cuối cùng, bạn có thể quay lại Cài đặt → "Tùy chọn nhà phát triển", tick vào checkbox để bật "gỡ lỗi qua USB".

THIẾT LẬP TRÊN THIẾT BỊ IOS

Để chạy ứng dụng trên iOS các bạn cần đăng ký Apple developer account.


KẾT NỐI THIẾT BỊ VỚI MÁY TÍNH QUA USB (Android)

Điều này là bắt buộc, kể cả bạn có muốn debug và reload qua Wifi đi chăng nữa thì cũng phải kết nối thiết bị qua USB để install app vào trước.

Kết nối thiết bị vào qua cổng USB như khi cài đặt app native thông thường, sau đó kiểm tra kết nối bằng cách gõ lệnh sau:
Windows, macOS: adb devices
Linux: lsusb

Nếu thấy thiết bị của mình ở trong danh dách hiện ra thì thành công. Nếu không bạn hay kiểm tra lại: 
- Đã bật USB Debugging chưa.
- Cáp nối có chắc chắn, thiết bị có hiển thị đang sạc hay không.
- Đã chọn mục "Đưa máy tính này vào danh sách thiết bị tin tưởng" - việc cần làm để cho thiết bị chấp nhận việc cài đặt ứng dụng/truy cập bộ nhớ từ một máy tính lạ.
- Đã cài jdk8 và Android SDK chưa.


KẾT NỐI THIẾT BỊ VỚI MÁY TÍNH QUA USB (iOS)

Kết nối thiết bị của bạn tới máy macOS bằng cáp USB Lighting. Đi đến thư mục ios trong thư mục chưa project của bạn, sau đó mở tệp .xcodeproj bên trong bằng Xcode.

Chọn ứng dụng của bạn trong Project Navigator và tìm tab General. Chuyển đến Signing và đảm bảo rằng tài khoản nhà phát triển Apple của bạn đã được chọn.

Mở menu Product từ thanh menu Xcode, sau đó chuyển đến Destination. Tìm và chọn thiết bị của bạn từ danh sách. Xcode sẽ đăng ký thiết bị của bạn để phát triển.

Nếu mọi thứ được thiết lập chính xác, thiết bị của bạn sẽ được liệt kê là mục tiêu xây dựng trong thanh công cụ Xcode. Bây giờ bạn có thể nhấn nút Build và chạy hoặc chọn Run từ menu Product. Ứng dụng của bạn sẽ sớm khởi chạy trên thiết bị của bạn.

CÀI ĐẶT VÀ CHẠY ỨNG DỤNG CỦA BẠN

Để cài đặt và chạy ứng dụng của bạn ở chế độ debug, bạn cần bật cmd, cd đến thư mục chứa profile của bạn (thư mục có các file app.json, index.android.js, index.ios.js,..) rồi gõ lệnh:

react-native run-android

hoặc

react-native run-ios

Khi này máy tính sẽ tiến hành build project và install vào tất cả thiết bị và emulator đang được kết nối với máy tính.

KẾT NỐI ĐẾN DEVELOPMENT SERVER

React Native khi hoạt động cần kết nối tới một server, ở đây thường là localhost:8081. Bằng cách kết nối như vậy, mỗi lần bạn có thay đổi nhỏ trong các View ở file index.android.js, index.ios.js thì chỉ cần ấn Reload (hoặc lắc nhẹ thiết bị thật) là thay đổi sẽ tự động cập nhật và hiển thị ngay. Cực kì cool đúng không nào?

Bạn thường có hai cách để kết nối đến server.

Cách 1: Sử dụng adb reverse (Nên dùng)

Bạn nên sử dụng phương pháp này nếu thiết bị của bạn đang chạy Android 5.0 (Lollipop) hoặc cao hơn. Đối với các phiên bản dưới Android 5.0 thì bạn có thể google "adb reverse android pre lollipop" và tham khảo một số cách workaround nha.

Chạy lệnh sau:
adb reverse tcp:8081 tcp:8081

Sau đó mở app trên thiết bị lên, lắc nhẹ thiết bị hoặc ấn phím Menu trên thiết bị để show dialog Developer Settings lên và chọn reload. Nếu thay đổi cập nhật ngay thì bạn đã thành công. Tuy nhiên nếu xuất hiện lỗi như sau:

Thì bạn cần kiểm tra lại kết nối của mình xem cáp USB có kết nối một cách chắc chắn không, đã bật usb debugging chưa,... Nêu không được bạn nên chuyển qua cách 2.

Cách 2: Kết nối bằng Wifi

Bạn có thể kết nối với development server thông qua sóng Wifi. Tuy nhiên như mình đã đề cập ở trên: trước tiên, bạn phải cài đặt ứng dụng lên thiết bị của mình qua cáp USB.  Và một khi đã cài đặt và chạy lần đầu xong, bạn có thể tháo cáp USB ra, thực hiện debug qua Wifi bằng cách làm theo các hướng dẫn sau. 
Bạn cần kết nối cả hai thiết bị đến cùng một Wifi, và bạn cũng cần biết địa chỉ IP hiện tại của máy tính của mình trước khi tiếp tục.

Để lấy được địa chỉ IP của máy tính, bạn mở cmd và gõ ipconfig. 

Các bạn tìm đến dòng Wireless LAN adapter Wi-Fi và lấy địa chỉ IPv4: 192.168.100.2. Đó chính là private IP của máy bạn, dùng để kết nôi đến Wifi hiện tai.

• Đảm bảo rằng thiết bị và máy tính chứa source code để chạy server cùng kết nối đến một mạng Wifi
• Mở app React Native của bạn trên thiết bị
• Bạn sẽ thấy màn hình lỗi màu đỏ mình ví dụ ở phía trên, nhưng không sao, do chưa kết nối đến development server mà :D
• Ấn nút Menu trên thiết bị để mở Developer Settings trên app
• Chọn  Dev Settings → Debug server host for device.
• Gõ vào địa chỉ IP của máy bạn kèm theo port mà development server đang chạy trên. (Ví dụ: máy mình là 192.168.100.2:8081)
• Ấn Back trở lại menu Developer Settings chọn Reload.

Vậy là thành công rồi :D. Ngoài ra bạn có thể chọn options Live Reload để load nhanh thay đổi từ server xuống khi vừa chỉnh sửa các View của các file index.js mà không cần vào app ấn Reload nha.

Cuối cùng mình nghĩ Facebook nó recommend cách 1, tuy nhiên cách 2 có vẻ tiện hơn dành cho new bie mới học nhỉ :D. Vì app khi đó còn nhẹ nên load cũng sẽ nhanh, và đỡ bị chai pin thiết bị khi vừa debug vừa sạc.

Cảm ơn các bạn đã theo dõi, chúc các bạn học tập tốt!