fbpixel
Etiquetas: ,

En este tutorial, veremos cómo programar una aplicación para smartphones utilizando React Native y VSCode. React Native es una potente herramienta para crear aplicaciones multiplataforma (Android, IOs) utilizando el lenguaje JavaScript. Visual Studio Code es un editor de código para desarrollar en C++, Python y React Native.

Como parte de un proyecto Arduino o Raspberry Pi, hemos visto cómo crear una aplicación Android con App Inventor 2. Con React Native, aunque más complejo, podrás crear aplicaciones más avanzadas y desarrollar en Android e IOs.

Instalación de Node.js

Node.js es un entorno de ejecución Javascript para el desarrollo back-end y front-end.

Para instalar Node.js en su ordenador Windows, sólo tiene que descargar el instalador

Una vez instalado Node.js, tendrás acceso a npm (Node Package Manager), que te permitirá instalar los paquetes necesarios.

verify-node-js-installation Creación de una aplicación con React Native y VSCode

Instalación y configuración de Android Studio

Descargar e instalar Java JDK 11

Configure JAVA_HOME en las variables de entorno (C:\Archivos de Programa\Microsoft\jdk-11.0.17.8-hotspot\)

Descarga y ejecuta el instalador de Android Studio

Configurar ANDROID_HOME en las variables de entorno (C:\Users\ADMIN\AppData\Local\Android\Sdk)

Abra Android Studio. En la ventana de inicio, haga clic en Configurar y luego en Administrador de AVD.

Aquí puedes definir los dispositivos virtuales en los que probar tu aplicación.

android-studio-avd-manager Creación de una aplicación con React Native y VSCode

N.B.: La instalación y configuración de Android Studio y el correcto funcionamiento de los dispositivos virtuales puede depender de la instalación de Android SDK, Java SDK y Gradle, etc. Compruebe que las versiones son compatibles.

Instalación y configuración de Visual Studio Code

Para instalar Visual Studio Code, sólo tiene que descargar y ejecutar el instalador

Una vez instalado el software, puedes añadir las extensiones necesarias para el desarrollo bajo React Native con VSCode

vscode-install-react-native-tools Creación de una aplicación con React Native y VSCode

Creación de un proyecto React Native

Crea una carpeta con tu proyecto ReactNative y ábrela en VSCode

En el terminal,

npx react-native@latest init CustomApp
vscode-create-react-native-project Creación de una aplicación con React Native y VSCode

Instala las dependencias con yarn y lanza la aplicación

cd CustomApp
npm install -g yarn  
yarn install
npx react-native start

A continuación, pulse «a» para ejecutarlo en Android

react-native-default-app-android Creación de una aplicación con React Native y VSCode

Ver la aplicación en un dispositivo Android

En tu teléfono Android, en «Ajustes», ve a «Ajustes adicionales» y luego a «Opciones para desarrolladores». Busca la opción «Depuración USB» y actívala. Esto te permitirá instalar aplicaciones a través del puerto USB.

Puede comprobar que el dispositivo se ha detectado y configurado correctamente con el comando adb devices.

windows-detect-android-devices Creación de una aplicación con React Native y VSCode

Una vez configurado correctamente su dispositivo, si vuelve a lanzar la aplicación, ésta se descargará e instalará en el dispositivo.

react-native-app-android-device Creación de una aplicación con React Native y VSCode

Ya puedes desarrollar e instalar tu aplicación en un dispositivo.

N.B.: Si tiene dificultades para instalar un simulador o si no dispone de un dispositivo, también puede ver los resultados en CodeSandBox para probar su aplicación.

Generación de APK

Una vez que su aplicación ha sido probada y validada en un simulador o dispositivo real, puede generar el archivo APK. Este archivo puede descargarse en cualquier dispositivo con un SO compatible y utilizarse para instalar la aplicación.

En el archivo android/build.gradle, comprueba que la versión del SDK (nivel de API) se corresponde con la versión de la plataforma de destino

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.3.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

En la raíz del proyecto CustomApp, introduzca los siguientes comandos en VS Code

cd android
./gradlew assembleRelease

Es posible limpiar la compilación antes de generar la compilación con el comando

./gradlew clean
react-native-vs-code-build-apk Creación de una aplicación con React Native y VSCode

Cambiar el icono de la aplicación

Los iconos de las aplicaciones se encuentran en la carpeta android

react-native-default-icon Creación de una aplicación con React Native y VSCode

Para sustituir los iconos predeterminados de la aplicación, es necesario crear iconos de distintos tamaños. Esto se puede hacer fácilmente con la herramienta IconKitchen, que te permite subir una imagen y generar todos los tamaños de iconos. Una vez que hayas descargado la carpeta IconKitchen-Output, puedes reemplazar las siguientes carpetas en la carpeta res de tu proyecto.

  • mipmap-hdpi
  • mipmap-mdpi
  • mipmap-xhdpi
  • mipmap-xxhdpi
  • mipmap-xxxhdpi
react-native-custom-icon Creación de una aplicación con React Native y VSCode

N.B.: Modificar el nombre del archivo con el nombre del archivo original si es necesario o cambiar el nombre del archivo en AndroidManifest.xml

React Native: buenas prácticas

Hay distintas formas de hacer lo mismo, sobre todo en programación. Sin embargo, la experiencia de muchas personas demuestra que los buenos hábitos permiten trabajar con más eficacia.

  • Añadir TypeScript para mejorar la lectura del código y evitar errores
  • Utiliza estilos responsivos que se adapten a diferentes tamaños de pantalla
  • Utilizar estilos en función de la plataforma
  • Prefiera los componentes funcionales a los componentes de clase
  • Crear un tema en el que se especifiquen los estilos de interfaz
  • Definir las diferentes vías de acceso de los usuarios

Aplicaciones

Fuentes