Cómo crear una app híbrida con Cordova y Vue.js paso a paso

En el mundo actual, tener una presencia móvil es casi una obligación para cualquier negocio o proyecto. Las aplicaciones híbridas ofrecen una solución fantástica para llegar tanto a usuarios de Android como de iOS con una única base de código. En esta guía, te mostraremos cómo combinar la potencia de Apache Cordova para el empaquetado y la flexibilidad de Vue.js para la interfaz de usuario, creando una app híbrida desde cero y paso a paso.

¿Por qué Cordova y Vue.js?

Apache Cordova: Permite empaquetar una aplicación web (HTML, CSS, JavaScript) como una aplicación nativa para diversas plataformas móviles. Ofrece acceso a las funcionalidades del dispositivo (cámara, GPS, acelerómetro) a través de plugins.
Vue.js: Un framework de JavaScript progresivo para construir interfaces de usuario. Es conocido por su facilidad de aprendizaje, rendimiento y reactividad, lo que lo hace ideal para Single Page Applications (SPA) y, por ende, para apps híbridas.

La combinación de ambos te permite escribir código web que se ejecuta como una aplicación nativa, ahorrando tiempo y recursos.

Requisitos Previos

Antes de empezar, asegúrate de tener instaladas las siguientes herramientas:

Node.js y npm: Indispensables para gestionar paquetes de JavaScript.
Git: Para control de versiones.
Java Development Kit (JDK): Necesario para construir apps Android.
Android Studio (opcional pero recomendado): Para emuladores Android y herramientas de SDK.
Xcode (solo para iOS y macOS): Necesario para construir apps iOS y usar el simulador.

Paso 1: Configurar el Entorno de Cordova

Primero, instalaremos Cordova globalmente y crearemos nuestro proyecto base.

Instalar Cordova CLI:
npm install -g cordova
Crear un nuevo proyecto Cordova:
cordova create my-vue-app com.example.myvueapp MyVueApp cd my-vue-app
- my-vue-app: El nombre de la carpeta de tu proyecto.
- com.example.myvueapp: El ID de tu paquete (ej. dominio inverso).
- MyVueApp: El nombre visible de tu aplicación.
Añadir plataformas:
cordova platform add android cordova platform add ios # Solo si estás en macOS
Esto configura los proyectos nativos para cada plataforma dentro de la carpeta platforms.

Paso 2: Crear el Proyecto Vue.js

Ahora, inicializaremos un proyecto Vue.js dentro de la carpeta www de nuestro proyecto Cordova.

Instalar Vue CLI (si no lo tienes):
npm install -g @vue/cli
Crear el proyecto Vue en la carpeta www:
vue create www
Cuando te pregunte, selecciona Manually select features y asegúrate de elegir Router. Puedes optar por ESLint + Prettier también. Para el modo de historia del router, elige No.
Advertencia: Vue CLI creará una carpeta www dentro de tu actual www. Esto no es lo que queremos. Debes eliminar la carpeta www creada por Cordova y luego ejecutar vue create www para que Vue CLI cree su estructura directamente en la raíz de lo que será tu contenido web.
Corrección:
# En la raíz de tu proyecto Cordova (my-vue-app) rm -rf www # Elimina la carpeta www de Cordova vue create www # Crea el proyecto Vue en la carpeta www
Asegúrate de configurar Vue CLI para que compile tu aplicación de producción en la carpeta raíz www. Por defecto, Vue CLI compila en dist. Tendrás que ajustar vue.config.js o el package.json para que el build de Vue apunte a la carpeta www.
Modifica vue.config.js (créalo si no existe en la raíz de tu proyecto Vue my-vue-app/www):
module.exports = { outputDir: '../www' // Esto es crucial para que Vue construya en la carpeta www de Cordova }
Nota: Si ya has creado el proyecto Vue dentro de www, la outputDir debe ser . o ../www si estás ejecutando el build desde la raíz de my-vue-app/www.
Vamos a simplificar el enfoque:
1. Crea el proyecto Vue en una carpeta temporal:
  cd my-vue-app vue create temp-vue
2. Configura temp-vue/vue.config.js para que el outputDir sea ../www.
3. Construye el proyecto Vue:
  cd temp-vue npm run build
  Esto copiará los archivos de producción de Vue directamente a my-vue-app/www.
4. Ahora puedes eliminar la carpeta temp-vue:
  cd .. rm -rf temp-vue

Paso 3: Integrar Vue Router con Cordova

Cuando se construye para Cordova, no siempre se usa la API de historial del navegador.

Modifica www/src/router/index.js:

Asegúrate de que el router de Vue esté en modo hash para Cordova, lo que evita problemas con la recarga de páginas en la aplicación.

import { createRouter, createWebHashHistory } from 'vue-router' // Cambia createWebHistory a createWebHashHistory

const routes = [
  // tus rutas aquí
]

const router = createRouter({
  history: createWebHashHistory(), // Usa createWebHashHistory
  routes
})

export default router

Paso 4: Ajustes para Cordova

Hay algunos ajustes específicos que necesitas hacer para que tu app Vue.js funcione bien dentro de Cordova.

Content Security Policy (CSP):
Abre my-vue-app/config.xml y busca la etiqueta <access origin="*" />. También es buena idea añadir una meta etiqueta CSP en www/index.html para mayor seguridad.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
Ajusta esta CSP según las necesidades de tu aplicación (por ejemplo, si utilizas servicios externos).

Dispositivo listo (deviceready):

Es crucial esperar a que Cordova esté completamente cargado antes de inicializar tu aplicación Vue.js para asegurarte de que los plugins de Cordova estén disponibles.

En www/src/main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)

// Función para iniciar la app
function startApp() {
  app.mount('#app')
}

// Esperar a que Cordova esté listo
document.addEventListener('deviceready', startApp, false)

// En caso de que Cordova no se cargue (ej. en el navegador para desarrollo)
if (!window.cordova) {
  startApp()
}

Paso 5: Construir y Probar la Aplicación

Finalmente, construye tu aplicación Vue y luego empaquétala con Cordova.

Construir tu aplicación Vue para producción:
Asegúrate de estar en la carpeta raíz de tu proyecto Vue (my-vue-app/www) y ejecuta:
npm run build
Esto copiará los archivos compilados a la carpeta my-vue-app/www (o la que hayas configurado en vue.config.js).
Construir la aplicación Cordova:
Vuelve a la raíz de tu proyecto Cordova (my-vue-app) y ejecuta:
cordova build android cordova build ios # Solo en macOS
Esto compilará tu aplicación para las plataformas añadidas. Los archivos .apk (Android) o .ipa (iOS) se encontrarán en las respectivas carpetas platforms/android/app/build/outputs/apk/debug o platforms/ios/build/emulator.

Ejecutar en un emulador o dispositivo:

cordova emulate android
cordova run android # Para ejecutar en un dispositivo conectado
cordova emulate ios # Solo en macOS
cordova run ios # Solo en macOS

Paso 6: Uso de Plugins de Cordova

Para acceder a las funciones nativas del dispositivo, necesitarás plugins de Cordova.

Buscar plugins: Visita el registro de plugins de Apache Cordova.

Instalar un plugin (ej. Cámara):

cordova plugin add cordova-plugin-camera

Usar el plugin en tu componente Vue:

<template>
  <div>
    <h1>Mi App Híbrida Vue/Cordova</h1>
    <button @click="takePhoto">Tomar Foto</button>
    <img v-if="imageData" :src="imageData" style="max-width: 100%;" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: null
    };
  },
  methods: {
    takePhoto() {
      if (!navigator.camera) {
        alert("Cámara no disponible. Asegúrate de que Cordova esté listo y el plugin esté instalado.");
        return;
      }

      navigator.camera.getPicture(
        (imageURI) => {
          this.imageData = imageURI;
        },
        (message) => {
          console.error("Fallo al tomar foto: " + message);
        },
        {
          quality: 50,
          destinationType: Camera.DestinationType.FILE_URI,
          encodingType: Camera.EncodingType.JPEG,
          mediaType: Camera.MediaType.PICTURE,
          allowEdit: true,
          correctOrientation: true
        }
      );
    }
  }
};
</script>

Asegúrate de que este código se ejecuta después del evento deviceready.

¡Felicidades! Has aprendido a configurar un entorno para desarrollar aplicaciones híbridas con Cordova y Vue.js. Esta poderosa combinación te permite reutilizar tus habilidades y código web para crear aplicaciones móviles robustas y multiplataforma. Experimenta con diferentes plugins de Cordova y la reactividad de Vue para construir la aplicación que siempre has soñado.

Buscar este blog

MetalSyntax - Convergencia del Conocimiento