App mòbil amb React Native: Android Studio, mòbil amb USB, emulador

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

(TBD)

Instal·lar Android Studio

Ha passat un any, tinc un nou portàtil, i instal·lo Android Studio en aquest portàtil, doncs el més correcte és desenvolupar aquest projecte amb Android Studio. Per instal·lar segueixo:

sudo apt-add-repository ppa:maarten-fonville/android-studio
sudo apt-get update
sudo apt-get install android-studio
sudo apt-get --fix-broken install

TBD

https://reactnative.dev/docs/environment-setup

React Native CLI Quickstart
escullo Linux, Android

Ja tinc instal·lat el Java JDK i l'Android Studio

Download and install Android Studio. While on Android Studio installation wizard, make sure the boxes next to all of the following items are checked:
*Android SDK
*Android SDK Platform
*Android Virtual Device

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 10 (Q) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

To do that, open Android Studio, click on "Configure" button and select "SDK Manager".

The SDK Manager can also be found within the Android Studio "Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.

Select the "SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 10 (Q) entry, then make sure the following items are checked:

Android SDK Platform 29
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

---
instal·lem watchman:
sudo apt-get install libtool
$ # use the latest stable release
$ git clone https://github.com/facebook/watchman.git -b v4.9.0 --depth 1
$ cd watchman 
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

https://stackoverflow.com/questions/60478843/i-have-encontered-an-error-while-installing-watchman-on-ubuntu-19-can-someone-g
Adding these flags to configure (before make) did it for me:
./configure --without-python  --without-pcre --enable-lenient

---
Finalment:
npx react-native init AwesomeProject
...
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies

  
  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "/home/joan/AwesomeProject2" && npx react-native run-android

---
Using a physical device
https://reactnative.dev/docs/running-on-device

. You will need to enable USB Debugging on your device in order to install your app during development.

To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to Settings → About phone → Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable "USB debugging".

1. On the device, go to Settings > About <device>.
2. Tap the Build number seven times to make Settings > Developer options available.
3. Then enable the USB Debugging option. Tip: You might also want to enable the Stay awake option, to prevent your Android device from sleeping while plugged into the USB port.

---
En el Android 10, m'ha costat molt trobar l'opció de debugging USB
Traça del sistema

$ lsusb
...
Bus 003 Device 007: ID 18d1:4ee7 Google Inc. Redmi Note 9

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

$ adb devices
List of devices attached
039725da0405	device

----
He de tenir dues consoles obertes, i a totes dues faig cd del meu projecte. En la primera executo metro:
$ npx react-native start

En la segona executo l'aplicatiui
npx react-native run-android
error


General error during semantic analysis: Unsupported class file major version 60


For those who are here for java.lang.IllegalArgumentException: Unsupported class file major version 60

One of the reason for the same is:

Java version 16 installed which is not yet supported by react-native.
$ java --version
openjdk 16.0.1 2021-04-20
OpenJDK Runtime Environment (build 16.0.1+9-Ubuntu-120.04)
OpenJDK 64-Bit Server VM (build 16.0.1+9-Ubuntu-120.04, mixed mode, sharing)

Remove the jdk-16 if present using this, sudo rm -rf jdk-16.jdk/

Basically, you can remove JDKs other than adoptopenjdk-8.jdk which will be present if you followed React-Native Env Setup.


Java Development Kit
React Native requires at least the version 8 of the Java SE Development Kit (JDK). You may download and install OpenJDK from AdoptOpenJDK or your system packager. You may also Download and install Oracle JDK 14 if desired.

$ export PATH=$PWD/jdk-11.0.11+9/bin:$PATH

TODO: he de posar aquest export en el .bashrc

$ echo $PATH
/home/joan/Baixades/jdk-11.0.11+9/bin
...

$ java --version
openjdk 11.0.11 2021-04-20
OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
OpenJDK 64-Bit Server VM AdoptOpenJDK-11.0.11+9 (build 11.0.11+9, mixed mode)

npx react-native run-android
...
BUILD SUCCESSFUL in 1m 17s
29 actionable tasks: 29 executed
info Connecting to the development server...
8081
info Starting the app on "039725da0405"...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }
...

finalment ja funciona. Tinc el mòbil connectat per USB

Ja puc editar el fitxer App.js, i com que tinc el Metro funcionant, quan gravo el fitxer automàticament se'm refresca el mòbil (de forma molt ràpida, doncs no estic utilitzant cap emulador). També s'ha de fer notar que no estic utilitzant el Android Studio (tot i que el tinc instal·lat)

====
TODO:
instal·lar Babel en el Sublime
====
Using a virtual device

Ara que ja tinc una aplicació de reactnative funcionant seguint l'apartat ''Using a physical device'', ara he de seguir l'altre apartat: ''Using a virtual device''.
*https://reactnative.dev/docs/environment-setup
i és per això que tinc instal·lat el Android Studio.

El meu projecte (AwesomeProject) que l'he creat seguint les instruccions, té la carpeta ''android'' que és de fet la carpeta de projecte per a l'Android Studio. Per tant, obro el Android Studio i obro aquest projecte.

Tools > AVD Manager
ja hi ha un dispositiu (Pixel_3a_API_30_x86), però vull crear un nou Virtual Device

El meu model de mòbil és el Xiaomi Redmi Note 9, i segueixo aquest model com a característic de cara a mida de pantalla, etc.
DISPLAY	
Type	IPS LCD, 450 nits (typ)
Size	6.53 inches, 104.7 cm2 (~83.5% screen-to-body ratio)
Resolution	1080 x 2340 pixels, 19.5:9 ratio (~395 ppi density)

Escullo el Pixel4a
Name: Pixel_4a_API_30

I ara, des del AVD Manager, puc clicar sobre el triangle verd de start per tal d'arrencar l'emulador.

Step 1. Igual que abans, start Metro Bundler:

npx react-native start

Explicació de per què serveix Metro Bundler:
If you're familiar with web development, Metro is a lot like webpack—for React Native apps. Unlike Kotlin or Java, JavaScript isn't compiled—and neither is React Native. Bundling isn't the same as compiling, but it can help improve startup performance and translate some platform-specific JavaScript into more widely supported JavaScript.

Step 2: Start your application

En un altre terminal:
npx react-native run-android

npx react-native run-android is one way to run your app - you can also run it directly from within Android Studio. Important, és a dir, ara l'Android Studio l'estic utilitzant només per fer córrer l'emulador. I puc editar el fitxer App.js amb qualsevol altre editor (amb el Sublime, per ex). Però l'aplicació la puc fer córrer des del Android Studio.

Des del Android Studio també puc obrir el App.js, editar-lo, gravar, i els canvis també es veuen en l'emulador.

Des del Android Studio puc generar l'APK (Build > Build Bundle/APK > Build APK), que es genera a :
/home/joan/AwesomeProject/android/app/build/outputs/apk/debug/app-debug.apk

Potser millor que el APK també es pot generar el bundle: /home/joan/AwesomeProject/android/app/build/outputs/bundle/debug/app-debug.aab

Resum: iniciar un projecte react-native amb el mòbil connectat per USB

Obrir la consola, amb dues pestanyes. Een les dues pestanyes fem:

$ export PATH=/home/joan/Baixades/jdk-11.0.11+9/bin:$PATH

$ java --version
openjdk 11.0.11 2021-04-20
OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
OpenJDK 64-Bit Server VM AdoptOpenJDK-11.0.11+9 (build 11.0.11+9, mixed mode)

Iniciem el projecte:

$ npx react-native init provaReactNative

a totes dues pestanyes faig

$ cd provaReactNative/

connecto el mòbil per USB i l'ha de reconèixer:

$ adb devices
List of devices attached
039725da0405	device

En la segona pestanya, arrenquem el servidor: (necessita watchman)

$ npx react-native start

i en la primera pestanya instal·lem l'aplicació al dispositiu mòbil:

$ npx react-native run-android

Problemes

Em passa aquest problema: quan instal·lo l'aplicació, en el mòbil es queda penjat a:

loading from localhost:8081

I és que prèviament en el start ja m'avisava de problemes amb el watchman:

...Error: A non-recoverable condition has triggered.  Watchman needs your help!
The triggering condition was at timestamp=1622969729: inotify-add-watch(/home/joan/MyTestApp/node_modules/scheduler/cjs) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem.  You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch
...

La solució la trobem a:

I en el meu cas, el que m'ha funcionat és una de les solucions que es proposa:

In my case, problem is due to file handle limit. Once, I refresh the limit by following command, application starts to running without any problem.

echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events && echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances && watchman shutdown-server

creat per Joan Quintana Compte, juny 2021