EAGA Blog

Setup 101 y Configuración Apache Cordova

04-10-2022
image

El mundo se puede cambiar en 140 caracteres (Jack Dorsey).

Seguro sean mas de 140 caracteres los que necesitemos para desarrollar el contenido presentado y que se titula Setup 101 y Configuración Apache Cordova este es nuestro primer post que considera los elementos de desarrollo de aplicaciones.

En este apartado veremos los siguientes puntos:

  • Que es Apache Cordova y su Diferencia con Phonegap
  • Instalación y Configuración inicial

Que es Apache Cordova y su Diferencia con Phonegap

image

En la actualidad realizar desarrollos de aplicaciones requiere de algo conocido como optimización de código lo que quiere decir un solo código que funcione para diversas plataformas por lo que sugiero que si HTML5, CSS y Javascript no suenan familiar profundiza antes de seguir.

Dicho esto Apache Cordova es un framework de trabajo para el desarrollo de aplicaciones móviles multiplataforma esto quiere decir que reducimos la curva de aprendizaje al no utilizar el lenguaje nativo y reutilizar el código. Por otro lado Phonegap fue una distribución comercial por parte de Adobe basada en Apache Cordova y menciono la palabra fue porque su ciclo de desarrollo finalizo en el año 2014 cuando otras tecnologías emergentes provocaran su retiro. Sin embargo una de las bondades de Phonegap era su emulador de aplicación en tiempo real lo cual permitía tener una instantánea completa de la aplicación con mínimos recursos.

Como Funciona Apache Cordova:

  • Construir la aplicación usando estándares Web: HTML, HTML 5, CSS, CSS3, JavaScript o haciendo uso de otros frameworks para el desarrollo de aplicaciones Web.
  • Combinar la aplicación Web con Cordova, esto nos dará acceso a las características nativas de los dispositivos móviles.
  • Configurar la aplicación en cada una de las plataformas para las que queramos generar la aplicación nativa.

Dicho esto se que se preguntaran Nativo o Híbrido la principal diferencia reside en que las aplicaciones híbridas están diseñadas para funcionar en cualquier sistema operativo y utilizan la misma base de código, mientras que las aplicaciones nativas se desarrollan para un sistema operativo en particular, ya sea Android o iOS.

Instalación y Configuración inicial

image

Es importante que si eres de esas personas con poca paciencia mejor considera tomar un relajante pues es un proceso bastante largo y con muchas recomendaciones que seguir como siempre te recuerdo tener tu sistema operativo actualizado y estable es importante considerar que esta instalación esta basada en sistema operativo windows.

Primer paso: descarga e instala Nodejs LTS puedes ubicar el paquete desde Nodejs importante utiliza una version LTS una vez tengas instalado Nodejs verifica tu version instalada con los comandos node -v y npm -v.

Segundo paso: instalación de JAVA JDK aquí viene la primera recomendación a seguir esta instalación solo esta certifica con una version de JAVA jdk java jdk 8u271 esta version podrás descargarla desde los repositorios de Java una vez instalado es hora de configurar las variables de entorno de JAVA una nueva y la otra añadida al Path de windows.

JAVA_HOME - C:\Program Files\Java\jdk1.8.0_271\

PATH - C:\Program Files\Java\jdk1.8.0_271\bin

Tercer paso: instalación de Gradle segunda recomendación a seguir esta instalación solo esta certifica con una version de Gradle gradle 6.7.1 esta version podrás descargarla desde los repositorios de Gradle una vez instalado es hora de configurar las variables de entorno de Gradle una nueva y la otra añadida al Path de windows.

GRADLE_HOME - C:\gradle-6.7.1\

PATH - C:\gradle-6.7.1\bin

Cuarto paso: instalación de Android Studio para cuando escribí este post utilice la version Arctic Fox | 2020.3.1 aquí lo importante estará en obtener el SDK correcto y esto se convierte en tercera recomendación sdk 10.0 y sdk tool 30.0.3 esta version podrás descargarla desde los repositorios de Android Studio una vez instalado es hora de configurar las variables de entorno de Android Studio dos nueva y la otra añadida al Path de windows.

ANDROID_HOME - C:\Users\CTO\AppData\Local\Android\Sdk - Deprecate

ANDROID_SDK_ROOT - C:\Users\CTO\AppData\Local\Android\Sdk

PATH - C:\Users\CTO\AppData\Local\Android\Sdk\platform-tools

PATH - C:\Users\CTO\AppData\Local\Android\Sdk\tools

Quinto paso: instalación de Cordova esta es tal vez el paso mas sencillo basta con abrir tu terminal de comandos de preferencia y ejecutar el siguiente comando npm install -g cordova

Con estos pasos tienes todo listo para crear tu primera aplicación móvil basada en cordova sin embargo si deseas tener instalado tu emulador phonegap el cual también sirve para crear la estructura inicial de los proyectos basta con instalar Phonegap Desktop 0.4.5 sin embargo es necesario un truco mas para que esto funcione phonegap desktop tiene una instalación local de npm por lo que es necesario reemplazar la carpeta npm por la version 6 de Nodejs Por ultimo una vez cargada la carpeta nueva abrir tu consola de comandos navegar hasta la ruta 'C:\Program Files (x86)\Adobe\PhoneGap\PhoneGap Desktop\resources\app.asar.unpacked\bin' y ejecutar el archivo postInstall.bat con este ultimo paso el phonegap podrá ejecutarse normalmente

De este modo estas listo para crear aplicaciones desde cordova creo que la pregunta es cual que siempre ronda es Híbrido o Nativo y existe una delgada linea que los separa cada vez mas la tecnología y todo se enfoca en que tan rápido y eficiente puede ser la entrega de un proyecto. En una próxima actualización agregaremos un código de un desarrollo basado en tecnología HTML5 + CSS + JavaScript la cual convertiremos en móvil

Códigos de Ejemplo

En esta sección estará disponible el enlace al repositorio Aplicación Web