Introducción ¡Hola! ¡Bienvenido al canal Just Code! El propósito de este video es brindarle una
guía para el desarrollo de aplicaciones móviles híbridas. Por favor, apóyanos suscribiéndote a
nuestro canal y haciendo clic en el botón Me gusta. En la agenda de hoy cubriremos los siguientes temas. Primero, los tipos de aplicación móvil. Discutiremos los tipos de aplicaciones móviles y sus ventajas y desventajas. A continuación, hablaremos de qué es una app híbrida, sus ventajas y arquitectura. Siga, discutiremos qué es reaccionar nativo. Por último, pero no menos importante, le mostraremos cómo configurar el
entorno de desarrollo nativo de reacción en una máquina Mac. La razón para usar una máquina Mac es que puede
ejecutar la aplicación iOS y Android en la misma máquina. En esta serie de videos, asumimos que tienes
conocimientos básicos de programación, preferiblemente javascript.
Sin embargo, si no tiene ningún
conocimiento básico de programación , este video le dará algunas
ideas sobre el desarrollo de aplicaciones híbridas. Actualmente, tenemos tres tipos principales de la aplicación móvil. Primero, es la aplicación nativa. La palabra "Nativa" significa que la aplicación está
específicamente diseñada y creada para el sistema operativo. La principal ventaja de la aplicación nativa es el rendimiento. Normalmente requiere usar un
lenguaje de programación y una herramienta específicos para la plataforma respectiva.
Por ejemplo, usaremos Java y
Android Studio para desarrollar una aplicación para Android. Y usando Swift y Xcode para desarrollar aplicaciones para iOS. A continuación, está la aplicación web móvil. Es una aplicación web que hace que su interfaz de usuario sea adecuada para
el dispositivo móvil a través del navegador web. La principal ventaja de la aplicación web móvil es
el bajo costo de desarrollo y la multiplataforma.
Puede utilizar cualquier lenguaje de programación de aplicaciones web disponible
para desarrollar una aplicación web móvil. Por ejemplo, ASP.Net, Angular JS, PHP, etc. El último tipo es la aplicación híbrida. La palabra "Híbrida" significa que este tipo de aplicación se encuentra entre
la aplicación web nativa y la aplicación web móvil. La aplicación híbrida se comporta como una aplicación nativa. Tiene su ícono de aplicación, se ejecuta más rápido que la aplicación web y tiene la capacidad fuera de línea. Hay varios marcos
que puede usar para desarrollar una aplicación híbrida como React Native, Ionic, Flutter, etc. Ahora veamos los
pros y los contras de estas aplicaciones móviles. Primero está el rendimiento de la aplicación. No hace falta decir que la aplicación nativa
tendrá el mejor rendimiento en comparación con los otros dos tipos de aplicaciones móviles.
El peor rendimiento es la aplicación web. La aplicación híbrida se encuentra entre la
aplicación web nativa y la móvil. A continuación, nos fijamos en las características. La característica aquí significa la capacidad
de usar la capacidad del dispositivo móvil. Por ejemplo, el sensor de proximidad, la brújula, la cámara, el almacenamiento, etc. Dado que la aplicación nativa está diseñada para el sistema operativo especificado , puede usar casi todas las funciones
disponibles en el teléfono, excepto las funciones del fabricante o del
administrador del sistema. La aplicación web móvil tiene la mayor limitación
cuando intenta acceder a las capacidades del teléfono. Una vez más, la aplicación híbrida se encuentra entre
la aplicación web nativa y la aplicación web móvil. En cuanto al tamaño del archivo de la aplicación, la aplicación nativa es la más pequeña y luego
la aplicación híbrida.
Dado que el navegador carga la aplicación web móvil a pedido, por lo tanto, no hay nada que instalar. Para la reutilización del código, dado que la aplicación nativa depende de la plataforma , es difícil reutilizar la mayor parte del código. Para la aplicación web móvil , solo codificamos una vez y puede ejecutarse tanto en Android como en iOS, por lo que es la mejor en términos de reutilización de código. Para la aplicación híbrida, también se desarrolla una vez y se ejecuta en ambos sistemas operativos; sin embargo , puede haber una pequeña parte del código
que depende de su plataforma. Por ejemplo, es posible que ciertas bibliotecas de terceros solo funcionen en Android y no en iOS. En términos de bajo costo, la aplicación nativa es la más costosa de desarrollar, ya que debe desarrollarse para ambos sistemas operativos. Tanto la aplicación web móvil como la aplicación híbrida
son las más rentables, ya que solo es necesario desarrollarlas una vez. Para el mantenimiento de la aplicación, dado que la aplicación nativa debe desarrollarse una vez para cada sistema operativo , el esfuerzo de mantenimiento es el
doble en comparación con la aplicación web móvil y la aplicación híbrida.
Tanto la aplicación nativa como la híbrida tienen capacidad sin conexión, excepto la aplicación web móvil. Dado que la aplicación web móvil debe cargarse desde el servidor cada vez que el navegador intenta usarla. Para configurar el entorno de desarrollo para la aplicación nativa , solo necesitamos instalar una sola pieza
de software y funcionará. Por ejemplo , solo necesitamos instalar Xcode para desarrollar iOS y Android Studio para desarrollar una aplicación de Android. Sin embargo, para la aplicación híbrida, hay que instalar más componentes para configurar el entorno de desarrollo. Para la capacidad multiplataforma, dado que la aplicación nativa está diseñada y construida para una plataforma específica, por lo tanto, no hay capacidad multiplataforma
en comparación con la web móvil y la aplicación híbrida. ¿Qué es la aplicación híbrida? Las aplicaciones híbridas, como las aplicaciones nativas, se ejecutan en el dispositivo y están escritas con tecnologías web como HTML 5, CSS, JavaScript.
Las aplicaciones híbridas se ejecutan dentro de un contenedor nativo y aprovechan el motor del navegador del dispositivo para representar
el HTML y procesar el JavaScript localmente. Una capa de abstracción de la web a la nativa permite el acceso a las capacidades del dispositivo a las que no se puede acceder en las aplicaciones de la web móvil , como el acelerómetro, la cámara y el almacenamiento local. Sin embargo, con el avance de la tecnología, la declaración anterior podría no ser 100% precisa. Echemos un vistazo a la definición en la aplicación híbrida React Native. Las primitivas de React Native se procesan en la interfaz de usuario de la plataforma nativa, lo que significa que su aplicación utiliza las mismas
API de plataforma nativa que otras aplicaciones.
A partir de la definición de React Native, podemos ver que React Native representa la interfaz de usuario utilizando la interfaz de usuario de la plataforma nativa en lugar de utilizar la interfaz de usuario web. Esa es la razón por la que te presentamos React Native. Principal ventaja de la aplicación híbrida. La primera ventaja es la reducción
de tiempo y coste del desarrollo. Dado que el desarrollo solo ocurre una vez, por lo tanto, redujo el tiempo y el costo a la mitad. La segunda ventaja es el fácil mantenimiento ya que solo tenemos un código base para mantener. La tercera ventaja es que, dado que se reduce el tiempo de desarrollo , la aplicación puede llegar al mercado en menos tiempo. Arquitectura de aplicaciones híbridas. Las dos primeras capas pertenecen al dispositivo. Primero está la capa de hardware. Esta capa consta de hardware físico como almacenamiento, sensores, medios, red, GPS, etc. La capa de hardware requiere la capa del sistema operativo para que funcione. Sin la capa del sistema operativo, el hardware es solo un pedazo de chatarra.
La siguiente capa es el Puente JS. Esta capa consta de código nativo para cada plataforma que une Javascript y la capa del sistema operativo. Permite que Javascript acceda a las capacidades del sistema operativo. Luego tenemos la capa JS App Logic. Esta capa es la lógica principal de la aplicación que está creando. Consiste en la funcionalidad de datos Crear, Recuperar, Actualizar, Eliminar la validación de la entrada del usuario, acceder a la API del servidor remoto, etc. También controla el flujo de la página de su capa de interfaz de usuario. La capa de interfaz de usuario es la interfaz de usuario de la aplicación. Puede ser una interfaz web o nativa, según
el tipo de marco de aplicaciones híbridas que utilice.
Ahora echemos un vistazo a lo que es React Native. Por definición, React Native es un marco que crea una jerarquía de componentes de interfaz de usuario para crear el código JavaScript. Tiene un conjunto de componentes para las plataformas iOS y Android para crear una aplicación móvil con una apariencia nativa. Echemos un vistazo a la arquitectura React Native. En su aplicación React Native , contiene el motor React Native, este motor depende de la plataforma, por lo tanto, puede ejecutar su Javascript tanto en Android como en iOS.
A continuación, tenemos el módulo nativo de RN. Es el JS Bridge que habíamos discutido en la arquitectura de aplicaciones híbridas. Permite que el Javascript en el motor acceda a la API de la plataforma para usar las capacidades del dispositivo. La API de la plataforma consiste en el
hardware y el sistema operativo. Dentro del motor React Native se
encuentra el intérprete de Javascript. Interpretó su módulo Javascript y lo ejecutó. Su aplicación consistirá en muchos otros
módulos de Javascript para realizar una determinada tarea. Por ejemplo, el módulo de la cámara, el módulo de notificaciones push, el módulo GPS, etc. Incluso su aplicación también es un módulo de Javascript. La última parte es su aplicación Javascript , maneja los flujos de su aplicación y controla la interfaz de usuario. En React Native, usamos un lenguaje de marcado de interfaz de usuario llamado JSX. Discutiremos eso en detalle en los próximos videos tutoriales.
Ahora permítanos mostrarle cómo configurar el entorno de desarrollo para React Native en una máquina Mac. Los componentes que necesitamos instalar son Xcode, Android Studio, Node JS, Watchman, CocoaPods, VS Code y React Native a través de npx. Con React Native 0.60 y superior, no es necesario instalar React Native localmente. Podemos usar el comando npx para ejecutarlo a pedido. Lo primero que necesitamos instalar es Xcode. El uso principal de Xcode en el desarrollo de React Native es para compilar e implementar su aplicación en la tienda de aplicaciones de Apple.
Ahora inicie la tienda de aplicaciones de Apple desde la Mac. Haga clic en el menú lateral Desarrollar y verá el icono de Xcode. Haga clic en el icono de Xcode y la tienda de aplicaciones
mostrará los detalles de Xcode. Haga clic en el botón Obtener de la esquina superior derecha para
instalar Xcode en su máquina. Llevará algún tiempo realizar la instalación. Ingrese la contraseña de su máquina para continuar. Ahora la instalación se había completado. Inicie el Xcode. Vaya a la preferencia de Xcode. En la pestaña de componentes, asegúrese de que haya al menos un simulador instalado. Si no lo hay , haga clic en el icono de descarga a la izquierda
del simulador que desea instalar. Como tenemos el simulador instalado, podemos pasar a la pestaña Ubicaciones. Asegúrese de que las herramientas de la línea de comandos no estén en blanco.
Por ejemplo, tenemos seleccionado Xcode 11.3. Podemos cerrar el Xcode por ahora. A continuación, necesitamos instalar Android Studio. Abramos el navegador y busquemos
Android Studio en la barra de direcciones. Del resultado de la búsqueda, el primer elemento es lo que necesitamos. Haga clic en el enlace para ir a la página de descarga. Haga clic en el botón Descargar Android Studio y acepte los términos y condiciones y luego haga clic en el botón Descargar Android Studio para Mac. La descarga comenzará, espere hasta que se complete y haga clic en el archivo descargado. El sistema procederá con la instalación. Haga clic y arrastre la aplicación Android Studio a la carpeta de aplicaciones. La instalación está completa , iniciemos Android Studio por primera vez.
Haga clic en el botón Abrir. Haga clic en Aceptar para continuar. Haga clic en cualquiera de los botones de Intercambio de datos según sus preferencias. Haga clic en el botón Siguiente. Seleccione Estándar y haga clic en el botón Siguiente. Seleccione el tema que prefiera y haga clic en el botón Siguiente. Haga clic en el botón Finalizar para continuar. Introduzca la contraseña de su máquina. Haga clic en el botón Aceptar. Haga clic en el botón Aceptar. Haga clic en el botón Finalizar para continuar. Ahora vayamos al SDK Manager, en Android SDK, SDK Platforms, asegúrese de que la versión de Android que desea usar esté instalada. Además, asegúrese de que estén instaladas las herramientas SDK necesarias. Por ejemplo, las herramientas de compilación, el emulador, las herramientas de la plataforma, las herramientas del SDK y el acelerador del emulador.
Haga clic en Aceptar para cerrar el administrador de SDK. Ahora vamos al Administrador de AVD. Haga clic en el botón Crear dispositivo virtual. Seleccione el tipo de dispositivo virtual que desea. Por ejemplo, el Pixel XL y haga clic en el botón Siguiente. Seleccione el sistema operativo del dispositivo virtual, por ejemplo, Q. Haga clic en el enlace Descargar, acepte el acuerdo de licencia y haga clic en el botón Siguiente nuevamente. Esto descargará el sistema operativo del emulador. La instalación finalizó, haga clic en el botón Finalizar. Ahora hacemos clic en el botón Siguiente. Asigne un nombre al nuevo dispositivo virtual, para este caso usamos el nombre predeterminado. Seleccione automático para los gráficos
y haga clic en el botón Finalizar. Ahora vemos el dispositivo virtual en la lista.
Cierre el administrador de dispositivos virtuales y el estudio de Android. Ahora necesitamos configurar la ruta a
través de la línea de comandos para el estudio de Android. Dependiendo del tipo de shell que esté usando, algunos usan bash y otros usan zsh. Para saber qué shell está utilizando, eche un vistazo a la barra de título de la pantalla de su terminal. Estamos usando zsh para este ejemplo. Vamos a crear el perfil zsh en su directorio de inicio usando el editor nano. En la línea de comando, escriba nano .zshrc y presione enter. En la edición nano, especifique las siguientes rutas. La primera ruta es la página de inicio de Android, que apunta a la instancia del SDK de Android. La siguiente ruta es la ruta del emulador. Siga por la ruta herramientas, papelera y plataforma-herramientas. Presione Ctrl+x para guardar el archivo, escriba Y y presione enter para confirmar los cambios.
Para probar que la ruta del entorno está configurada correctamente, simplemente escriba adb en la línea de comando. Es una herramienta del estudio de Android, si la ruta es correcta, debería mostrar las opciones disponibles para adb. Ahora habíamos configurado completamente el entorno de estudio de Android. A continuación, necesitamos instalar algunos componentes más a
través de la línea de comandos. Primero, asegúrese de que su máquina tenga instalado el comando brew. Simplemente escriba brew en la línea de comando
para probar si su máquina tiene brew. Si muestra el comando no encontrado, entonces necesita instalarlo. Si su máquina ya tiene preparación, puede omitir este paso. Instalaremos brew usando el comando ruby. Ingrese el comando como se muestra en la pantalla y presione enter.
Presiona enter para continuar. Introduzca la contraseña de su máquina. Habíamos completado la instalación de cerveza. Para probarlo, escriba brew en la línea de comando y presione enter. Si muestra las opciones disponibles para una preparación, significa que la preparación se instaló correctamente. A continuación, instalaremos el componente Node JS
usando el comando brew. En la terminal, escriba brew install node y
presione enter para iniciar la instalación. La instalación está completa. Para verificar que la instalación sea exitosa, escriba node en la línea de comando y presione enter. Debería ver el símbolo del sistema del nodo con el número de versión.
Para salir del nodo js, presione Ctrl+C dos veces. El siguiente componente a instalar es el vigilante. Un vigilante es una herramienta de react-native que
monitorea los cambios de archivos en el directorio del proyecto. En el tipo de terminal en brew install vigilante
para realizar la instalación. La instalación del vigilante está hecha. A continuación procederemos a instalar los cocoapods para iOS. En la clave de terminal en sudo gem, instale cocoapods. Introduzca la contraseña de la máquina para continuar. La instalación de cocoapods está hecha. Ahora necesitamos instalar Java JDK para el desarrollo de Android. En la tecla de terminal en la
pestaña de preparación AdoptOpenJDK/openjdk y presione enter.
Para completar la instalación, escriba
brew cask, instale adoptopenjdk8 en la terminal y presione enter. Introduzca la contraseña de la máquina. La instalación está completa. Para probar la instalación,
ingrese java y presione enter en la terminal. El terminal debería mostrar una lista de opciones para Java JDK. A continuación, vamos a instalar el editor IDE. Puede usar cualquier editor con el que esté familiarizado; sin embargo, recomendamos Microsoft Visual Studio Code. Inicie el navegador nuevamente, en la barra de direcciones, ingrese el código vs para mac y presione enter. Haga clic en el primer enlace para ir a la página de descarga. Haga clic en el icono de Mac para iniciar la descarga. Haga clic en el archivo descargado y
el sistema lo descomprimirá por nosotros. Haga clic y arrastre Visual Studio Code a
la carpeta de la aplicación a la izquierda. Una vez que el archivo se arrastra a la carpeta de la aplicación,
haga clic en LaunchPad; debería ver el código de Visual Studio y haga clic en el icono para iniciarlo.
Haga clic en el botón abrir. Ahora necesitamos instalar una extensión en el código VS
para el desarrollo nativo de reacción. Haga clic en el ícono de la extensión y escriba reaccionar nativo en la barra de búsqueda
y presione enter. En la lista de resultados, haga clic en React Native Tools
y luego haga clic en el botón Instalar. La instalación está completa y podemos cerrarla ahora mismo. Cerremos el código VS por ahora. Habíamos completado todas las herramientas necesarias
y la instalación de componentes. Ahora vamos a crear una aplicación nativa de reacción de muestra para probar el entorno de desarrollo. Primero, emitamos el comando npx seguido de
react-native init HelloReactNative. Esto ejecutará react-native para
inicializar la plantilla de la aplicación.
Usamos npx para que no necesitemos
instalar react-native en su máquina. Npx buscará el nativo de reacción de la web y lo ejecutará. El nativo de reacción había completado la
inicialización de la plantilla de la aplicación. Probemos la ejecución de la aplicación
navegando a la carpeta del proyecto. Escriba npx react-native run-ios en la terminal
para probar la ejecución de la aplicación en el emulador de iOS. Ahora, el nativo de reacción intentará compilar la
aplicación e iniciar el emulador de iOS. El nativo de reacción lanzará otra ventana de terminal
que ejecuta Metro Bundler.
Metro Bundler actúa como un servidor de archivos para alojar
todos los archivos requeridos por la aplicación. Ahora la aplicación se ha iniciado en el emulador
y se está ejecutando correctamente. A continuación, probaremos ejecutar la aplicación en el emulador de Android. Navegue a la carpeta del proyecto en la terminal y
escriba npx react-native run-android y presione enter. Compilamos con éxito la aplicación para
Android y la aplicación se ejecuta en el emulador de Android. Si le gusta nuestro video y desea obtener más información
sobre el desarrollo de aplicaciones móviles, apóyenos dando me gusta a nuestro video, haga clic en el botón Suscribirse y en la campana de notificación para recibir notificaciones cuando publiquemos nuevos videos. ¡Gracias por ver, adiós!.