Desde cero: Cómo crear aplicaciones móviles híbridas con Cordova + Vue.js 2

Crear aplicaciones móviles híbridas con Cordova y Vue.js 2

En este post vamos a ver paso a paso como crear una aplicación móvil híbrida utilizando Apache Cordova y Vue.js 2.

Los pasos que verás a continuación, describen el proceso de configuración de una plataforma de desarrollo en la que podrás crear aplicaciones móviles híbridas utilizando Cordova + Vue.js 2

Esto incluye:

  • Instalación y configuración de Cordova + Webpack + Vue.js.
  • Vista previa de la aplicación en el navegador.
  • Hot / Live: Recarga tu aplicación en el navegador automáticamente al detectar nuevos cambios.
  • Ejecutar la aplicación en dispositivos móviles Android / iOS (Utilizaremos los emuladores respectivos).

Antes de empezar, debo definirles lo que es una aplicación móvil hibrida:

¿Qué es una aplicación móvil híbrida?

Las aplicaciones híbridas son aplicaciones móviles diseñadas en un lenguaje de programación web empleando tecnologías como HTML5, CSS y JavaScript, y que gracias a un framework (en nuestro caso Cordova), permite adaptar la vista de nuestra aplicación web a cualquier vista de un dispositivo móvil mediante un navegador empotrado (WebView).

Adicionalmente, este framework (Cordova), mediante plugins, nos permite acceder a los componentes nativos de los dispositivos tales como la cámara, GPS, Wifi, Acelerómetros, Libreta de Contactos, entre otros.

Lo interesante de todo esto es que cada día el look and feel de una aplicación híbrida es casi igual al de una nativa, esto gracias a que poco a poco esta tecnología ha ido madurando y haciendo que sea más fácil integrar estas aplicaciones en los dispositivos móviles.

Otro aspecto importante es que estas aplicaciones híbridas se distribuyen igual que una nativa, mediante los markets como Google Play Store y el App Store.

Y por último y no menos importante está el hecho de que las aplicaciones híbridas brindan ventajas notables frente a las nativas, algunas de estas son:

  • El costo de desarrollo es muchisimo inferior al de una aplicación nativa ya que el código se escribe una sola vez y es compilado hacia las distintas plataformas deseadas.
  • No se requiere de sólidos conocimientos nativos para cada plataforma ya que la curva de aprendizaje y de implementación es muy corta.
  • El mantenimiento de nuestras aplicaciones es muchisimo mas eficiente ya que solo tenemos que cambiar el código una sola vez y luego compilar hacia las distintas plataformas.
  • No se requiere conocimiento de lenguajes de programación natívos como Java (Android), Swift u Objective C (iOS), entre otros.

Pre-Requisitos

Para llevar a cabo este ejemplo, debemos tener instalado los siguientes pre-requisitos:

  • Sistema Operativo macOS — High Sierra 10.13.2
  • Node.js — v9.2.1—Ir a la web oficial para instalar Node.js
  • Apache Cordova — 8.0.0 —  npm install -g cordova
  • Vue-CLI — 2.9.3 — npm install-g vue-cli
  • Gradle — 4.5.1 — brew install gradle — ¿Cómo Instalar Homebrew?
  • Android SDK — brew tap caskroom/cask — brew cask install android-sdk
  • Android Platform Tools — brew cask install android-platform-tools
  • Xcode—xcode-select –install— Descargar Xcode
  • ios-deploy—npm install -g ios-deploy

Iniciando el proyecto con Cordova + Vue.js + Webpack

Antes de todo, debemos situarnos en el path donde deseamos que se cree nuestro proyecto.

1. Creamos el proyeto Cordova:

2. Creamos el proyecto Vue.js  + Webpack:

Vue te preguntará:

A lo que debemos contestar “Y” para aceptar y continuar ya que el directorio fué creado y configurado previamente por el proyecto de cordova en el paso anterior.

Seguidamente, vue te pedirá información para configurar el proyecto, los datos que yo introduje son los siguientes:

Unir los procesos de “build” del proyecto Cordova y Vue.js-WebPack

El directorio ./www de tu proyecto Cordova debe lucir actualmente así:

Lo primero que debemos hacer es eliminar el contenido de la carpeta ./www de Cordova, ya que construiremos este contenido con WebPack en su lugar.

Tendremos que eliminar el directorio ./www ya que este es el código que Cordova integrará en el dispositivo móvil.

Ahora debemos abrir el archivo de configuación de Webpack: ./config/index.js y actualiza los siguientes paths:

  • Cambia los paths de index y assestsRoot para apuntar al directorio ./www y así el código de nuestra aplicación se genere en la ruta ./www/dist antes de ser empaquetado en el dispositivo móvil.
  • Cambia el valor del path de assetsPublicPath para que sea una cadena vacía. Esto va a permitir a tu móvil servir la vista vía el protocolo file:///. Esto es importante puesto que no estaremos ejecutando un servidor web en nuestro dispositivo móvil (usualmente).

Actualiza tu ./config/index.js para que luzca de la siguiente manera:

Abre el archivo ./config.xml en tu IDE preferido y actualiza el punto de entrada del WebView de Cordova.

Ahora procedemos a crear el paquete de distribución de nuestra aplicación:

El directorio ./www/dist debe lucir ahora algo parecido a esto:

Abre el archivo ./www/dist/index.html en tu navegador para verificar que todo funciona perfectamente vía el protocolo file:///.

Aplicaciones móviles híbridas con Cordova + Vue.js 2

Puedes notar en la barra de dirección el protocolo file:///

Seguidamente debemos abrir el archivo ./index.html de Vue.js en tu IDE y actualiza el meta tag “Content-Security-Policy” para permitir los sockets web locales. Puedes hacer esto agregando: connect-src ‘self’ ws:;. Esto permitirá a Webpack conocer cuando se ha creado el paquete de distribución de la aplicación y cuando se ha recargado o actualizado el codigo en la vista previa del navegador. Esto deberá suceder cada vez que hagas un cambio en el codigo fuente.

Ahora podemos probar que el modo dev funciona correctamente:

Ahora el Servidor hot-reload de Vue-Webpack esta online, Entra en http://localhost:8080 para ver la aplicación.

Deberas ver la siguiente pantalla:

Aplicaciones móviles híbridas con Cordova + Vue.js 2

Nótese el mensaje de web-sockets en el log de la consola, y el host:puerto en la barra de direcciones del navegador.

Ejecutando la aplicación en Android

Vamos ahora a probar que todo funciona en un dispositivo móvil Android. Asegurate que tienes conectado uno en tu computador.

Procedemos a agregar a Android como plataforma en Cordova:

Luego de esto procedemos a ejecutar la aplicación en nuestro dispositivo Android:

Luego de esto deberás ver la aplicación corriendo en tu dispositivo Android.

Aplicaciones móviles híbridas con Cordova + Vue.js 2

Ejecutando la aplicación en iOS

Es tiempo de verificar cosas en un dispositivo iOS. Asegúrate de que lo hayas conectado a tu computador.

Primero, Agreguemos la plataforma iOS a nuestro proyecto Cordova:

Abre el proyecto de nuestra aplicación en el Xcode ejecutando lo siguiente:

Lo siguiente será seleccionar el certificado de Equipo (Team certificate) en el menú desplegable “Build Signing”.

Aplicaciones móviles híbridas con Cordova + Vue.js 2

Crear el paquete para iOS.

Procedemos a ejecutar la aplicación en nuestro dispositivo iOS:

Deberías poder ver la aplicación Vue.js en tu dispositivo iOS tal como se muestra a continuación:

Aplicaciones móviles híbridas con Cordova + Vue.js 2

Y ya con esto hemos logrado entonces combinar dos tecnologías ideales para el desarrollo de aplicaciones móviles híbridas de una forma sencilla y que estoy seguro que a muchos de ustedes les va a servir para iniciarse en este mundo de las aplicaciones móviles.

Si gustas revisar el código resultante de nuestra aplicación de ejemplo, puedes clonarlo desde mi repositorio en github.com

Si te gustó este post, ayúdame a que pueda servirle a muchas más personas, compartiendo mis contenidos en tus redes sociales.

Espero que este post haya sido de gran ayuda para ti, y como siempre, cualquier inquietud o duda que tengas, puedes contactarme por cualquiera de las vías disponibles, o dejando tus comentarios al final de este post. También puedes sugerir que temas o post te gustaría leer a futuro.