Hướng dẫn cài genymotion cho react native

Mình sẽ hướng dẫn các các bạn setup máy ảo Android Studio hoặc các bạn có thể cài Genymotion. Android Studio và Genymotion thì mình thấy Genymotion chạy nhẹ hơn đỡ giật lag nhưng giao diện không đẹp bằng Android Studio. Với lại cài Genymotion cũng lăng nhằng lắm.

Các bạn tạo một project Android Studio mới, nó cũng khá đơn giản thôi. Sau khi tạo xong bạn click vào biểu tượng như dưới ở thanh công cụ nhé.

Hướng dẫn cài genymotion cho react native
tạo máy ảo android studio

Sau đó chọn tạo mới máy ảo, hình dưới bạn sẽ phải setup màn hình và loại máy ( nên chọn cái nào có Play Store nhé ) xong rồi next.

Hướng dẫn cài genymotion cho react native
tao may ao android

Hướng dẫn cài genymotion cho react native
Cài API cho máy ảo

Hướng dẫn cài genymotion cho react native
setup máy ảo

Hướng dẫn cài genymotion cho react native
Chạy máy ảo android

Cài đặt React Native trên Windows

Bước 1 : Đầu tiên mình sẽ tạo một forder lưu project là ” React_Native ” tại thanh đường dẫn mình gõ cmd, để chỏ cmd đến thư mục này.

Hướng dẫn cài genymotion cho react native
tạo project react native

Bước 2: Tại cmd gõ lệnh ” npx react-native init ShareCS ” để tạo project, sau init sẽ là tên project. Sau đó các bạn đợi cho nó setup project nhá.

Hướng dẫn cài genymotion cho react native
Install React Native

Bước 3 : Trong thư mục project của mình hiện tại là “ShareCS” gõ lệnh ” npx react-native start ” để khởi động Metro Bundler. Tiếp theo bạn mở một tab cmd trong thư mục project nữa và chạy lệnh ” npx react-native run-android “.

Hướng dẫn cài genymotion cho react native
chạy react native

Bước 4 : Tận hưởng thành quả wow :

Hướng dẫn cài genymotion cho react native
kết quả.

Code React Native bằng gì ?

Có rất nhiều IDE hỗ trợ nhưng phổ biến nhất vẫn là Vscode và Atom. Việc cài đặt không có gì khác và mình thấy có rất nhiều trang hướng dẫn rồi nên mình sẽ không hướng dẫn lại nữa. Nhớ để lại ý kiến của các bạn cũng như những khó khăn trong quá trình cài nhé. Mình sẽ hướng dẫn trong tầm hiểu biết của mình.

Sau khi chúng ta đã biết cách dùng Android Studio để có thể tự tạo project của riêng mình rồi. Công việc tiếp theo là cài đặt thiết bị để có thể kiểm tra ứng dụng khi coding. Có 2 lựa chọn để bạn có thể làm được điều này: Nếu bạn có điện thoại thật thì nên debug ứng dụng trên nó. Còn với bạn nào chưa có điện thoại thật thì cài đặt máy ảo Android là giải pháp duy nhất.

♠ Nếu chưa xem bài cũ thì xem ngay nhé: cách sử dụng Android Studio

Bài viết này mình sẽ hướng dẫn chi tiết cả 2 cách tiếp cận trên. Nội dung bài viết gồm có:

  • Tạo máy ảo bằng trình giả lập mặc định của Android Studio
  • Tạo máy ảo Genymotion. Đây là máy ảo Android nhanh, mượt và ít tốn RAM
  • Cách chạy ứng dụng trên thiết bị thật qua USB Cable
  • Kết nối điện thoại với PC qua WIFI để kiểm tra ứng dụng

Chúng ta bắt đầu nhé

Nội dung chính của bài viết

Cài đặt máy ảo Android (Android Virtual Device) toàn tập

1. Tạo AVD (Android Virtual Device) bằng trình giả lập trong Android Studio

Chúng ta sẽ cùng bắt đầu với AVD để kiểm tra ứng dụng Android. Về cơ bản, AVD Manager là một công cụ mà bạn có thể sử dụng để tạo và quản lý AVD (Thiết bị ảo Android). AVD hay còn được gọi là Emulator.

Các bạn lưu ý là để chạy được máy ảo thì bạn cần phải cài đặt JDK trước đó nhé.

Dưới đây là các bước để tạo AVD mới trong Android Studio

Đầu tiên, chọn Tools > Android > AVD Manager > Nhấp vào biểu tượng AVD Manager (trình quản lý AVD) trên thanh công cụ. Có một cách khác để mở AVD Manger trực tiếp là bằng biểu tượng AVD trên thanh Công cụ như hình vẽ

Hướng dẫn cài genymotion cho react native

Trình quản lý máy ảo Android (Android Virtual Device Manager) sẽ được mở. Sau đó nhấp vào Create Virtual Device (Tạo máy ảo).

Chọn Category (thể loại), kích thước điện thoại và lựa chọn độ phân giải mà bạn muốn. Sau khi nhấp vào nút Next.

Lưu ý quan trọng: Khi Chọn độ phân giải của máy ảo thì bạn cần cân đối chút nhé. Máy áo càng có độ phân giải cao thì càng chiếm RAM nhiều. Nếu máy tính của bạn có RAM thấp thì bạn nên chọn thiết bị có độ phân giải thấp thôi không thì sẽ rất lag.

Hướng dẫn cài genymotion cho react native

Ổn rồi đấy! Tiếp theo hãy chọn phiên bản SDK và nhấp vào nút Next. Nếu bạn có nhiều phiên bản SDK khác nhau như Kitkat, Lolipop và Marshmallow … trong SDK của mình thì bạn có thể chọn một trong số chúng. Ở đây mình chỉ có mỗi phiên bản SDK Marshmallow. Vì vậy, mình sẽ làm việc với phiên bản SDK Marshmallow

Hướng dẫn cài genymotion cho react native

Sau đó điền tên AVD và chọn nút Finish. Sau này nếu muốn, bạn vẫn có thể tùy chỉnh lại các cấu hình vừa rồi cho máy ảo.

Hướng dẫn cài genymotion cho react native

Như vậy là đã xong, máy ảo Android đã được tạo.

Để có thể sử dụng được máy áo thì chúng ta khởi động nó lên thôi

Bạn mở lại trình quản lý AVD và bạn sẽ thấy AVD mới được tạo trong danh sách. Nhấn vào biểu tưởng Start để khởi động máy ảo như hình bên dưới.

Hướng dẫn cài genymotion cho react native

Bạn đợi một lát để máy áo khởi động. Đừng sốt ruột nhé

2. Cài đặt máy ảo Genymotion

Genymotion là một trình giả lập Android được đánh giá là nhanh hơn trình giả lập Android Studio. Trong khi Genymotion chiếm ít RAM hơn, nên máy ảo sẽ mượt mà và nhanh hơn so với trình giả lập mặc định.

Sau khi cài đặt Genymotion xong thì bạn hoàn toàn sử dụng nó như máy ảo mặc định của Android Studio thôi . Bạn có thể trực tiếp sử dụng nó từ Android Studio chỉ với một lần cài đặt với plugin từ chính Genymotion.

Tải và cài đặt máy ảo Genymotion

Đầu tiên, bạn cần tải Genymotion tương ứng với Hệ điều hành bạn đang sử dụng: Tải Genymotion

Kéo xuống dưới màn hình, bạn sẽ tìm thấy 2 tab “Cá nhân” và “Doanh nghiệp”. Để tải xuống miễn phí, bạn phải chọn Tab Cá nhân

Hướng dẫn cài genymotion cho react native

Trong phần chọn cá nhân, bạn click vào “get started” rồi nhấp vào “Download Genymotion Package”. Bạn sẽ được yêu cầu đăng nhập. Nếu bạn chưa có tài khoản thì chỉ cần nhấp vào tạo tài khoản và điền vào biểu mẫu

Sẽ có 2 tùy chọn cho gói download: Gói có sẵn Virtual box và gói không có Virtual box. Tùy vào tình hình máy tình hiện tại của bạn mà lựa chọn nhé. Virtual box là trình giả lập bắt buộc để tạo máy ảo. Nếu máy tính của bạn đã cài đặt trước đó rồi thì có thể chọn gói không có Virtual box, còn không thì cứ chọn gói đầy đủ để đảm bảo tính tương thích tốt nhất.

Hướng dẫn cài genymotion cho react native

Sau khi đã download xong bộ cài thì việc cài đặt Genymotion trên PC của bạn tương tự như cài bất kỳ phần mềm nào khác

Hướng dẫn cài genymotion cho react native

Sau khi cài đặt xong, bạn sẽ sẽ thấy biểu tượng hình tròn của Genymotion trên màn hình. Click đúp vào Genymotion để chạy.

Khi cửa sổ Genymotion được khởi chạy xong thì bạn đăng nhập tài khoản của bạn vào nhé

Bây giờ, bạn hãy bấm vào nút Add để tạo ra máy ảo Android.

Hướng dẫn cài genymotion cho react native

Bạn chọn một loại thiết bị mà bạn muốn, nó sẽ tải xuống thiết bị Android tương ứng về cho bạn

Hướng dẫn cài genymotion cho react native

Cài đặt plugin để sử dụng trực tiếp Genymotion trong Android Studio

Trong lúc chờ đợi Genymotion tải tài nguyên cần thiết. Bạn vào Android Studio để cài đặt plugin. Click File > Settings > Plugins

Hướng dẫn cài genymotion cho react native

Trong ô tìm kiếm, nhập từ khóa Genymotion. Chọn plugin cần cài đặt và nhấn OK

Hướng dẫn cài genymotion cho react native

Sau khi cài đặt xong, bạn sẽ có 1 biểu tượng Genymotion trên thanh tác vụ. Bất cứ khi nào bạn muốn chạy máy ảo Genymotion, chỉ cần chọn một cái trong danh sách và nhấp vào Bắt đầu là được.

Hướng dẫn cài genymotion cho react native

3. Chạy ứng dụng Android trên thiết bị thật qua USB cable

Nếu bạn có thiết bị thật thì tốt nhất là chạy kiểm tra ứng dụng trên nó. Vì kiểm tra ứng dụng trên thiết bị thật sẽ cho kết quả tốt hơn trên máy áo, mà tốc độ cũng nhanh hơn rất nhiều. Dù gì sau này, ứng dụng của bạn sẽ phải triển khai trên các thiết bị thật của khách hàng đúng không?

Để cài được APK lên các thiết bị thật thì việc đầu đầu tiên là phải kết nối được thiết bị với PC. Chúng ta có 2 cách để kết nối: – Kết nối với PC qua USB cable – Kết nối với PC qua WIFI ( tham khảo mục

4: Kết nối điện thoại Android qua WIFI ADB)

Phần này mình sẽ hướng dẫn cách kết nối qua USB cable. Đầu tiên bạn mở điện thoại và chuyển đến mục Setting(Cài đặt). Sau đó, hãy chuyển đến “About phone” ( Giới thiệu về điện thoại)

Hướng dẫn cài genymotion cho react native

Nếu Developer Options (Tùy chọn nhà phát triển) không được hiển thị trong thiết bị của bạn. Bạn cần nhấp 7 lần vào Build number để hiện Developer Options như được hiển thị trong hình bên dưới.

Hướng dẫn cài genymotion cho react native

Sau đó quay trở lại, bạn sẽ thấy tùy chọn Developer options đã xuất hiện. Bạn vào mục đó và bật USB debugging trong thiết bị của bạn như minh họa bên dưới.

Hướng dẫn cài genymotion cho react native

Kết nối thiết bị với PC của bạn thông qua USB cable. Nếu có hộp thoại yêu cầu cấp quyền thì nhấn OK.

Hướng dẫn cài genymotion cho react native

Chạy ứng dụng trên thiết bị thật từ Android Studio

Như vậy là việc kết nối đã hoàn thành. Để có thể chạy ứng dụng từ Android Studio, bạn mở thanh menu như bên dưới

Hướng dẫn cài genymotion cho react native

Nếu thiết bị thực đã được kết nối thành công với PC của bạn thì nó sẽ hiển thị là Trực tuyến(Online). Bây giờ click vào điện thoại tương ứng và ứng dụng sẽ được chạy trong thiết bị.

Hướng dẫn cài genymotion cho react native

Lưu ý quan trọng: Nếu bạn không thấy điện thoại không xuất hiện trong danh sách. Có thể là bạn chưa cài đặt USB driver cho điện thoại. Để sửa lỗi này thì đơn giản là bạn cần phải tìm đúng driver của điện thoại và cài đặt vào PC thôi. Ví dụ: như của mình thì cài đặt trình điều khiển USB Motorola cho con điện thoại Motorola cổ điển

4. Kết nối điện thoại Android qua WIFI ADB

Phần mềm Wifi ADB cho phép bạn kết nối thiết bị Android với PC qua WiFi để cài đặt, chạy và debug ứng dụng mà không cần USB cable

Phiên bản 2.0 có một cửa sổ hiển thị trạng thái thiết bị của bạn có được kết nối hay không và cho phép kết nối/ngắt kết nối theo cách thủ công (nếu cần).

Android Wifi ADB – bạn có thể download the plugin từ trang JetBrains. Cách khác, bạn có thể cài theo cách thủ công: Preferences/Settings ->Plugins ->Install plugin from disk.

Các bước chạy Android wifi debugging

Mở Android Studio. Đi đến Tools -> Android -> SDK Manager

Hướng dẫn cài genymotion cho react native

Một cửa sổ mới được mở ra tên là Default Settings -> tab Plugins ->Click nút Browse repositories

Hướng dẫn cài genymotion cho react native

Repositories hiện ra. Bạn tìm từ khóa “wifi” và chọn Android WiFi ADB để cài đặt

Hướng dẫn cài genymotion cho react native

Sau khi cài đặt plugin xong thì khởi động lại Android Studio

Trước khi sử dụng Wifi để kết nối với PC thì trước hết vẫn phải cần đến USB cable một lần. Kết nối điện thoại của bạn với PC bằng cáp USB. Sau khi kết nối, nhấp vào tab Android WiFi ADB

Hướng dẫn cài genymotion cho react native

Trong cửa sổ này, thiết bị của bạn được liệt kê và hiển thị hai nút (Kết nối và ngắt kết nối). Nhấp vào nút kết nối

Lưu ý: Để điện thoại kết nối được với PC thì điều kiện tiên quyết là PC và thiết bị của bạn phải được kết nối với cùng một mạng WiFi.

Sau đó nhấp vào nút kết nối thành công. Từ nay bạn sẽ không cần phải sử dụng đến USB cable nữa. Rất là tiện phải không

Như vậy là mình đã hoàn thành việc cài đặt máy ảo Android cũng như kết nối được thiết bị thật qua cả 2 cách là dùng USB cable và WIFI. Bài viết tiếp theo trong khóa học tự học lập trình Android trong 24 giờ, mình sẽ hướng dẫn các bạn cách debug ứng dụng bằng Android Studio. Đây là những kiến thức nền tảng để phục vụ các bạn sau này khi bắt tay vào xây dựng ứng dụng Android. Các bạn đón đọc nhé