Desarrollar aplicaciones móviles con Vue y Capacitor

En este tutorial, te guiaremos a través del proceso de convertir una aplicación web de Vue en una aplicación móvil nativa utilizando Capacitor. Opcionalmente, también puedes mejorar tu interfaz de usuario móvil con Konsta UI, una biblioteca de interfaz de usuario móvil basada en Tailwind CSS.

Acerca de Capacitor

Capacitor es una herramienta revolucionaria que te permite integrarlo fácilmente en cualquier proyecto web y convertir tu aplicación en una aplicación móvil nativa. Genera proyectos nativos de Xcode y Android Studio para ti y proporciona acceso a características nativas del dispositivo como la cámara a través de un puente JavaScript.

Preparando tu aplicación Vue

Primero, crea una nueva aplicación Vue ejecutando el siguiente comando:

vue create my-app
cd my-app
npm install

Para preparar tu aplicación Vue para el despliegue móvil nativo, necesitarás exportar tu proyecto. Agrega un script en tu archivo package.json para construir y copiar el proyecto Vue:

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

Después de ejecutar el comando build, deberías ver una nueva carpeta dist en el directorio raíz de tu proyecto. Esta carpeta será utilizada por Capacitor más adelante.

Agregando Capacitor a tu aplicación Vue

Para convertir tu aplicación web Vue en un contenedor móvil nativo, sigue estos pasos:

1. Instala Capacitor CLI como una dependencia de desarrollo y configúralo dentro de tu proyecto. Acepta los valores predeterminados para el nombre y el ID del paquete durante la configuración.

2. Instala el paquete principal y los paquetes relevantes para las plataformas iOS y Android.

3. Agrega las plataformas, y Capacitor creará carpetas para cada plataforma en la raíz de tu proyecto:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Ahora deberías ver nuevas carpetas iOS y android en tu proyecto Vue.

Actualiza el archivo capacitor.config.json para que el webDir apunte al resultado de tu comando de construcción:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

Ahora puedes construir tu proyecto Vue y sincronizarlo con Capacitor:

npm run build
npx cap sync

Construir y desplegar aplicaciones nativas

Para desarrollar aplicaciones iOS, necesitas tener Xcode instalado, y para aplicaciones Android, necesitas tener Android Studio instalado. Además, necesitas inscribirte en el Programa de Desarrolladores de Apple para iOS y en la Consola de Google Play para Android para distribuir tu aplicación en la tienda de aplicaciones.

Usa Capacitor CLI para abrir ambos proyectos nativos:

npx cap open ios
npx cap open android

Despliega tu aplicación en un dispositivo conectado usando Android Studio o Xcode.

Recarga en vivo de Capacitor

Habilita la recarga en vivo en tu dispositivo móvil haciendo que la aplicación Capacitor cargue el contenido desde una URL específica en tu red.

Encuentra tu dirección IP local y actualiza el archivo capacitor.config.ts con la IP y el puerto correctos:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

Aplica estos cambios copiándolos a tu proyecto nativo:

npx cap copy

Ahora, tu aplicación se recargará automáticamente y mostrará los cambios cuando actualices tu aplicación Vue.

Usando plugins de Capacitor

Instala un plugin de Capacitor, como el plugin Share, y úsalo en tu aplicación Vue:

npm i @capacitor/share

Importa el paquete y llama a la función share() en tu aplicación:

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

Después de instalar nuevos plugins, ejecuta el comando sync y vuelve a desplegar la aplicación en tu dispositivo:

npx cap sync

Agregando Konsta UI

Para usar Konsta UI en tu aplicación Vue, necesitas tener tailwind ya instalado y para instalar el paquete: Para usar Konsta UI en tu aplicación Vue, instala el paquete y modifica tu archivo tailwind.config.js:

npm i konsta

Envuelve tu aplicación con el componente App en el archivo pages/_app.vue, y usa los componentes Vue de Konsta UI en tus páginas Vue.

Conclusión

Capacitor es una gran opción para construir aplicaciones nativas basadas en un proyecto web existente. Con la adición de Capgo, es aún más fácil agregar actualizaciones en vivo a tu aplicación, asegurando que tus usuarios siempre tengan acceso a las últimas características y correcciones de errores.

Descubre cómo Capgo puede ayudarte a construir mejores aplicaciones más rápido, regístrate para obtener una cuenta gratuita hoy.