Creating Mobile Apps with live updates, Quasar and Capacitor.

En este tutorial, comenzaremos creando una nueva aplicación web utilizando Quasar. Más adelante, aprenderemos a convertirla en una aplicación móvil utilizando Capacitor. Si deseas hacer que tu aplicación se vea mejor en móviles.

Con Capacitor, puedes cambiar tu aplicación web de Quasar en una aplicación móvil sin necesitar hacer muchas cosas difíciles o aprender un nuevo método de hacer aplicaciones como lo harías con algo llamado React Native.

Este tutorial te guiará a través del proceso, comenzando con una nueva aplicación de Quasar y luego incorporando Capacitor para moverte al reino de aplicaciones móviles nativas. Además, utilizarás Capgo para enviar actualizaciones en vivo a tu aplicación en segundos.

Sobre Capacitor

CapacitorJS es verdaderamente un cambio de juego! Puedes incorporarlo fácilmente en cualquier proyecto web, y lo envolverá en una vista web nativa, generando el proyecto Xcode y Android Studio nativo para ti. Además, sus plugins te dan acceso a características de dispositivos nativos como la cámara a través de un puente JS.

Con Capacitor, obtienes una fantástica aplicación móvil nativa sin ningún setup complicado o curva de aprendizaje pronunciada. Su API y funcionalidad simplificada lo hacen un placer integrarlo en tu proyecto. Confía en mí, te sorprenderá lo fácil que es lograr una aplicación móvil nativa funcional con Capacitor!

Preparando su aplicación de Quasar

Para crear una nueva aplicación de Quasar, ejecute el siguiente comando:

npm init quasar

Seleccione la opción "Aplicación con Quasar CLI" luego "Quasar v2".

Para crear una aplicación móvil nativa, necesitamos una exportación de nuestro proyecto. Por lo tanto, incluyamos un script directo en nuestro package.json que se pueda utilizar para construir y copiar el proyecto de Quasar:

{
  "scripts": {
    // ...
    "build": "quasar build"
  }
}

Después de ejecutar el comando generatedebería poder ver un nuevo dist carpeta en la raíz de su proyecto.

Este carpeta se utilizará más adelante por Capacitor, pero por ahora debemos configurarla correctamente.

Agregar Capacitor a su aplicación Quasar

Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir unos pocos pasos inicialmente, pero posteriormente es tan simple como ejecutar un solo comando. sync Primero, podemos instalar el

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI A continuación, debemos instalar el paquete principal y los paquetes relevantes para las plataformas iOS y Android.

Finalmente, podemos agregar las plataformas, y __CAPGO_KEEP_0__ creará carpetas para cada plataforma en la raíz de nuestro proyecto:

Iniciar Capacitor

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

# Initialize Capacitor in your Quasar 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

ios ios And android carpetas en tu proyecto de Quasar.

¡Son proyectos nativos reales!

Para acceder al proyecto de Android más tarde, debes instalar Android Studio. Para iOS, necesitas un Mac y debes instalar Xcode.

Además, debes encontrar un archivo capacitor.config.ts en tu proyecto, que contiene algunas configuraciones fundamentales Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDirque debe apuntar a la salida de su comando de compilación. Actualmente, es inexacto.

Para corregir esto, abra el archivo capacitor.config.json y actualice el campo context:HTML text fragment from a longer Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Page/area: Capgo solutions marketing page. Role: Website copy sentence. Seen in: page solutions/cordova-to-capacitor-ai.astro. Message key `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).:

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

Puede probarlo ejecutando los siguientes comandos:

npm run generate
npx cap sync

El primer comando npm run generate simplemente compilará su proyecto Quasar y copiará la compilación estática, mientras que el segundo comando npx cap sync synceará todos los web code en los lugares adecuados de las plataformas nativas para que puedan ser visualizados en una aplicación.

Además, el comando sync puede actualizar las plataformas nativas e instalar plugins, por lo que cuando instale un nuevo Capacitor plugins es hora de ejecutar npx cap sync de nuevo.

Sin darse cuenta, ya has terminado, así que veamos la aplicación en un dispositivo.

Crear y desplegar aplicaciones nativas

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

Si eres nuevo en el desarrollo de aplicaciones móviles nativas, puedes utilizar el Capacitor CLI para abrir fácilmente ambos proyectos nativos:

npx cap open ios
npx cap open android

Una vez que hayas configurado tus proyectos nativos, desplegar tu aplicación en un dispositivo conectado es fácil. En Android Studio, solo necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación en un dispositivo conectado sin cambiar ninguna configuración. Aquí tienes un ejemplo:

En Xcode, necesitas configurar tu cuenta de firma para desplegar tu aplicación en un dispositivo real en lugar de solo en el simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero de nuevo, necesitas estar inscrito en el Programa de Desarrolladores). Una vez hecho esto, solo necesitas pulsar play para ejecutar la aplicación en tu dispositivo conectado, que puedes seleccionar en la parte superior. Aquí tienes un ejemplo:

¡Felicidades! Ha desplegado con éxito su aplicación web de Quasar en un dispositivo móvil. Aquí hay un ejemplo:

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…

Capgo Actualización en vivo

Capgo Actualización en vivo es un servicio que permite a los desarrolladores desplegar actualizaciones a sus aplicaciones móviles sin pasar por el proceso tradicional de subida a la Tienda de Aplicaciones. Esto puede ser una forma conveniente de corregir rápidamente errores o hacer pequeñas actualizaciones en una aplicación sin tener que esperar al proceso de revisión de la Tienda de Aplicaciones.

Integrar Capgo en su aplicación Quasar es un proceso sencillo que le permite aprovechar el poder de las actualizaciones en vivo en tiempo real. Este guía paso a paso le guiará a través de la integración e implementación de Capgo Actualización en vivo, lo que le permite entregar actualizaciones suaves.

Regístrese y acceda a la consola de Capgo:

Es hora de registrarse y obtener su clave de API para subir su primera versión. Comience por registrarse en Capgo.

Instale el Capgo SDK:

Desde una línea de comandos, directamente en la raíz de su aplicación Capacitor, ejecute:

npm i @capgo/capacitor-updater && npx cap sync To instalar el plugin en tu aplicación Capacitor.

Y luego agrega a tu aplicación este code como reemplazo de CodePush:

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Esto le dirá al plugin nativo que la instalación ha tenido éxito.

Inicia sesión en Capgo CLOUD:

Primero, utiliza el all apikey presente en tu cuenta para iniciar sesión con el CLI:

`npx @capgo/cli@latest login YOU_KEY`

Agrega tu primera Aplicación:

Comencemos creando una aplicación en Capgo Cloud con el CLI.

    npx @capgo/cli@latest app add

Esta orden utilizará todas las variables definidas en el archivo de configuración Capacitor para crear la aplicación.

Sube tu primera versión:

Ejecuta la orden para construir tu code y enviarlo a Capgo con:

npx @capgo/cli@latest bundle upload`

Por defecto, el nombre de la versión será el que se encuentre en tu archivo package.json.

Verificar en Capgo si se encuentra la compilación.

Puedes incluso probarlo con mi aplicación móvil de sandbox.

Hacer canal predeterminado:

Después de enviar tu aplicación a Capgo, debes hacer que tu canal sea el predeterminado para que las aplicaciones puedan recibir actualizaciones de Capgo.

npx @capgo/cli@latest channel set production -s default

Configurar la aplicación para validar actualizaciones:

Agregar esta configuración a tu archivo JavaScript principal.

import { CapacitorUpdater } from '@capgo/capacitor-updater'

CapacitorUpdater.notifyAppReady()

Luego haz un npm run build && npx cap copy para actualizar tu aplicación.

Recibir una Actualización en Vivo:

Para que tu aplicación reciba una actualización en vivo desde Deploy, necesitarás ejecutar la aplicación en un dispositivo o un emulador. La forma más sencilla de hacer esto es simplemente utilizar el siguiente comando para lanzar tu aplicación local en un emulador o un dispositivo conectado a tu computadora.

  npx cap run [ios | android]

Abre la aplicación, ponla en segundo plano y abrela de nuevo, deberías ver en los registros que la aplicación realizó la actualización.

Felicidades! 🎉 Has desplegado con éxito tu primera Actualización en Vivo. Esto es solo el comienzo de lo que puedes hacer con las Actualizaciones en Vivo. Para aprender más, consulta la documentación completa de Documentación de Actualizaciones en Vivo.

Usando Plugins de Capacitor

Vamos a ver cómo utilizar un plugin de Capacitor en acción, que mencionamos antes. Para hacer esto, podemos instalar un plugin bastante simple ejecutando:

npm i @capacitor/share

No hay nada especial en el Plugin de Compartir, pero de todos modos abre el diálogo de compartir nativo. Para esto ahora solo necesitamos importar el paquete y llamar a la función correspondiente desde nuestra aplicación, así que cambiemos el share() archivo pages/index.vue Usando Plugins de __CAPGO_KEEP_0__ a esto:

<template>
  <div>
    <h1>Welcome to Quasar 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>

Como se mencionó anteriormente, cuando se instalan nuevos plugins, debemos realizar una operación de sincronización y luego volver a desplegar la aplicación en nuestro dispositivo. Para hacer esto, ejecute el siguiente comando:

npx cap sync

Después de pulsar el botón, puede ver el diálogo de compartir nativo en acción.

A continuación, puede hacer que la aplicación se sienta más nativa en iOS y Android con navegación y transiciones Capgo y solucione problemas de diseño comunes de iOS que causan rebosamiento horizontal o áreas de seguridad recortadas.

Interfaz de usuario que se siente nativa con Capgo Navegación y Transiciones Nativas

He trabajado durante años con Ionic para construir aplicaciones de múltiples plataformas, pero integrarla con Quasar es engorrosa y raramente vale la pena cuando ya tienes Tailwind CSS.

Para un sentir móvil nativo en una aplicación Quasar + Capacitor, utilice plugins Capgo en lugar de kits de interfaz de usuario web solo como Konsta UI:

• @capgo/capacitor-native-navigation — barra de navegación nativa, barra de pestañas de vidrio líquido en iOS y un estilo de barra de pestañas empañada en Android. Su router de Quasar mantiene el estado de ruta; el plugin es dueño del navegador nativo.
• @capgo/capacitor-transiciones — Transiciones de página de estilo Ionic y retroceso de borde de iOS en la capa de WebView, sin adoptar la interfaz de usuario de Ionic.

Instale ambos:

npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap sync

Configure la navegación nativa con el modo de inserción de CSS para que el contenido web respete las barras nativas:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Renderice una barra de pestañas de vidrio líquido (iOS utiliza la renderización propia del sistema; Android utiliza un fondo de fondo de WebView difuminado):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

Agregue transiciones de página nativas en la caja de su aplicación:

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

Envuelva las páginas de rutas en cap-router-outlet, cap-pagey cap-contentllame a setDirection('forward') o setDirection('back') Contexto: Fragmento de texto HTML de una cadena de UI Capgo más larga (clave de padre `alternatives_cta_questions`). Página/área: Comparación de alternativas de actualización en vivo de Capacitor. Rol: Párrafo de marketing o legal largo. Visto en: página alternatives.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `alternatives_cta_questions` (Preguntas de llamada a la acción de alternativas). | Fragmento de texto HTML de una cadena de UI Capgo más larga (clave de padre `appflow_cta_questions`). Página/área: Copia de marketing de comparación/migración de Appflow. Rol: Párrafo de marketing o legal largo. Visto en: página ionic-appflow.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `appflow_cta_questions` (Preguntas de llamada a la acción de Appflow). | Fragmento de texto HTML de una cadena de UI Capgo más larga (clave de padre `capwesome_cta_questions`). Página/área: Página de comparación de Capawesome. Rol: Párrafo de marketing o legal largo. Visto en: página capwesome.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `capwesome_cta_questions` (Preguntas de llamada a la acción de Capawesome). | Fragmento de texto HTML de una cadena de UI Capgo más larga (clave de padre `consulting_faq_subtitle`). Página/área: Página de servicios de consultoría. Rol: Título o etiqueta de sección. Visto en: página consulting.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `consulting_faq_subtitle` (Título de subtítulo de FAQ de consultoría). | Página/área: Copia de marketing de comparación/migración de Appflow. Rol: Etiqueta de UI corta o elemento de navegación. Visto en: página ionic-appflow.astro, página ionic-enterprise-plugins.astro, página soluciones/ionic-enterprise-plugins.astro. Clave de mensaje `appflow_plugins_or` (Appflow Plugins Or).

antes de navegar. No duplique los encabezados o pie de página web cuando la navegación nativa propietaria se encarga de esas superficies. Usando @capgo/capacitor-navegación nativa y Usando @capgo/capacitor-transiciones.

Áreas seguras con Tailwind

Para áreas seguras de dispositivos en Tailwind CSS, utilice @capgo/tailwind-capacitor (publicado como) tailwind-capacitor en npm. safe-areas Proporciona utilidades y otros plugins de Tailwind amigables con Capacitor:

npm add -D tailwind-capacitor

In src/css/app.scss:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Utilice utilidades como pt-safe, pb-safe, y px-safe en lugar de esparcir env(safe-area-inset-*) manualmente. El proyecto está activamente desarrollado — si algo falta para tu configuración de Quasar, abre una PR en GitHub.

Corrección de problemas de diseño de iOS (Viewport, Área Segura y Desbordamiento Horizontal)

Si el contenido parece recortado, desplazado o desplazable horizontalmente en iOS, agregar más overflow-x: hidden o ajustar la etiqueta de viewport sola usualmente no lo resuelve. Trabaja a través de estas comprobaciones en orden.

Asegúrate de que la etiqueta meta de viewport se aplique correctamente

In index.html (o en tu plantilla HTML de Quasar), establece la etiqueta meta de viewport en <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Gestiona el área segura de iOS desde un solo contenedor raíz

Crear un solo contenedor de aplicación y aplicar allí el relleno de área segura — no en múltiples componentes anidados:

html,
body,
#q-app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Envuelve todo el contenido de la página dentro .app-shellLa duplicación de la rellena de área segura en encabezados, modales y wrappers de diseño a menudo hace que la interfaz de usuario parezca recortada o demasiado grande.

Con @capgo/tailwind-capacitor, puedes expresar la misma rellena con utilidades como pt-safe pb-safe px-safe en esa sola capa.

Establece Capacitor iOS contentInset en never contexto: Página/área: Página de productos de actualizaciones en vivo. Rol: Etiqueta de interfaz de usuario corta o elemento de navegación. Clave de mensaje `live_update_dynamic_label_to` (Etiqueta dinámica de actualización en vivo a).

primero capacitor.config.tsEn contentInsetMode: 'css', prefiere el relleno de área nativo deshabilitado y deja que CSS (o la navegación nativa)

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist/spa',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) el relleno es una causa común de doble espacio.

Encuentre el elemento que está desbordando en realidad

El culpable habitual es un elemento que utiliza 100vw, Tailwind w-screen, una anchura de píxel fija, o un contenedor muy ancho min-width.

En Safari Web Inspector, ejecute:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Con Tailwind, reemplaza w-screen con w-full cuando sea posible. Muchos problemas de desbordamiento horizontal provienen de 100vw / w-screen, duplicado relleno de área segura, o un contenedor de ancho fijo — no del etiqueta de meta de viewport en sí misma.

Conclusión

Capacitor es una excelente opción para crear aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma sencilla de compartir code y mantener una interfaz de usuario consistente.

And con la adición de Capgode hecho, 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.

Si deseas aprender a agregar Capgo a tu aplicación de Next.js, mira el siguiente artículo:

Sigue adelante desde Crear Aplicaciones Móviles con actualizaciones en vivo, Quasar y Capacitor.

Si estás utilizando Crear Aplicaciones Móviles con actualizaciones en vivo, Quasar y Capacitor. para planificar el trabajo de plugins nativos, conecta con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Construcción Nativa para el flujo de trabajo del producto en Capgo Construcción Nativa.