En este tutorial, crearemos una nueva aplicación web utilizando QuasarMás adelante, aprenderemos a convertirlo en una aplicación móvil utilizando Capacitor. Si deseas que tu aplicación se vea mejor en móvil.
Con Capacitor, puedes convertir 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 creación de aplicaciones como si lo hicieras con algo llamado React Native.
Este tutorial te guiará a través del proceso, comenzando con una nueva aplicación Quasar y luego incorporando Capacitor para moverse 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 proporcionan acceso a características de dispositivos nativos como la cámara a través de un puente de JS.
Con Capacitor, obtienes una fantástica aplicación móvil nativa sin ningún setup complicado o curva de aprendizaje empinada. Su API y funcionalidad simplificada lo hacen un placer integrarlo en tu proyecto. Confía en mí, te sorprenderá la facilidad con la que lograrás una aplicación nativa funcional completa con Capacitor!
Preparando tu aplicación Quasar
Para crear una nueva aplicación Quasar, ejecuta el siguiente comando:
npm init quasar
Elige la opción "Aplicación con Quasar CLI" luego "Quasar v2"
Para crear una aplicación móvil nativa, necesitamos un export de nuestro proyecto. Por lo tanto, incluyamos un script directo en nuestro package.json que se puede utilizar para construir y copiar el proyecto de Quasar:
{
"scripts": {
// ...
"build": "quasar build"
}
}Después de ejecutar el comando generatedeberías poder ver un nuevo dist carpeta en la raíz de tu proyecto.
Esta carpeta se utilizará por Capacitor más adelante, pero por ahora debemos configurarla correctamente.
Agregar Capacitor a tu aplicación de Quasar
Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir unos pocos pasos inicialmente, pero después es tan simple como ejecutar un solo sync comando.
Primero, podemos instalar el Capacitor CLI como dependencia de desarrollo, y luego configúrela dentro de nuestro proyecto. Durante la configuración, puede pulsar “enter” para aceptar los valores predeterminados para el nombre y el ID de la caja.
Enseguida, debemos instalar el paquete principal y los paquetes relevantes para las plataformas iOS y Android.
Finalmente, podemos agregar las plataformas, y Capacitor creará carpetas para cada plataforma en la raíz de nuestro proyecto:
# 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
Hasta este punto, deberías poder observar nuevos ios y context: Página/área: sitio web de marketing de Capgo. Rol: etiqueta de IU corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `y` (Y). android
carpetas en tu proyecto Quasar.
Son proyectos nativos reales! Para acceder al proyecto de Android más tarde, debes instalar el 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 de Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDircontexto
que debe apuntar al resultado de tu comando de compilación. Actualmente, es inexacto. capacitor.config.json __CAPGO_KEEP_0__.config.json y actualiza el:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}webDir
npm run generate
npx cap syncThe primer comando npm run generate se limitará a construir su proyecto de Quasar y copiar la construcción estática, mientras que el segundo comando npx cap sync actualizará todos los web code en los lugares correctos de las plataformas nativas para que puedan ser mostrados en una aplicación.
Además, el comando de sincronización podría 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 está hecho, así que veamos la aplicación en un dispositivo!
Construir y Desplegar aplicaciones nativas
Para desarrollar aplicaciones iOS, necesita tener Xcode instalado, y para aplicaciones Android, necesita tener Android Studio instalado. Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, debes 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 los Capacitor CLI para abrir fácilmente ambos proyectos nativos:
npx cap open ios
npx cap open androidUna 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, debes 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 nuevamente, debes estar inscrito en el Programa de Desarrolladores). Después de eso, puedes simplemente pulsar play para ejecutar la aplicación en tu dispositivo conectado, que puedes seleccionar en la parte superior. Aquí tienes un ejemplo:
¡Felicidades! Has desplegado con éxito tu aplicación web de Quasar en un dispositivo móvil. Aquí tienes un ejemplo:
Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…
Capgo Live Update
Capgo Live Update es un servicio que permite a los desarrolladores desplegar actualizaciones en sus aplicaciones móviles sin pasar por el proceso tradicional de envío a la Tienda de Aplicaciones. Esto puede ser una forma conveniente de corregir rápidamente errores o hacer actualizaciones pequeñas en una aplicación sin tener que esperar al proceso de revisión de la Tienda de Aplicaciones.
Integrando Capgo en tu aplicación Quasar es un proceso sencillo que te permite aprovechar el poder de actualizaciones en tiempo real. Este paso a paso te guiará a través de la integración e implementación de Capgo Live Update, permitiéndote entregar actualizaciones suaves.
Regístrate y accede a la consola de Capgo:
Es hora de registrarse y obtener tu clave de API para subir tu primera versión. Comienza por registrándote en una cuenta de Capgo.
Instala el Capgo SDK:
Desde una línea de comandos, directamente en la raíz de tu aplicación Capacitor, ejecuta:
npm i @capgo/capacitor-updater && npx cap sync Para instalar el plugin en tu aplicación Capacitor.
Y luego agrega a tu aplicación este code como reemplazo de CodePush uno:
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 su cuenta para iniciar sesión con el CLI:
`npx @capgo/cli@latest login YOU_KEY`Agregue su primera aplicación:
Comencemos creando una aplicación en Capgo Cloud con el CLI.
npx @capgo/cli@latest app addEsta orden utilizará todas las variables definidas en el archivo de configuración de Capacitor para crear la aplicación.
Suba su primera versión:
Ejecute la orden para construir su code y enviarlo a Capgo con:
npx @capgo/cli@latest bundle upload`Por defecto, el nombre de la versión será el que se encuentra en su archivo package.json.
Revisar en Capgo si el build está presente.
Puede incluso probarlo con mi aplicación de sandbox móvil Agregue su primera aplicación.
Establecer canal predeterminado:
Después de enviar tu aplicación a Capgo, debes establecer tu canal predeterminado para que las aplicaciones puedan recibir actualizaciones de Capgo.
npx @capgo/cli@latest channel set production -s default
Configurar aplicación para validar actualizaciones:
Agrega 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 fácil de hacer esto es simplemente usar 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 abríla 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 Actualizaciones en Vivo. Para aprender más, consulta la documentación completa de Actualizaciones en Vivo.
Usando Capacitor Plugins
Vamos a ver cómo utilizar un plugin Capacitor en acción, que mencionamos anteriormente varias veces. Para hacer esto, podemos instalar un plugin bastante simple ejecutando:
npm i @capacitor/shareNo hay nada sofisticado sobre el plugin 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 la share() página de inicio a esto: Como mencionamos anteriormente, cuando instalamos nuevos plugins, necesitamos realizar una operación de sincronización y luego volver a desplegar la aplicación en nuestro dispositivo. Para hacer esto, ejecuta el siguiente comando:
<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>Después de pulsar el botón, puedes ver el hermoso diálogo de compartir nativo en acción!
npx cap syncAhora puedes hacer que la aplicación se sienta más nativa en iOS y Android con la navegación y las transiciones __CAPGO_KEEP_0__ y solucionar problemas de diseño comunes de iOS que causan desbordamiento horizontal o áreas de seguridad recortadas.
Interfaz de usuario que se siente nativa con navegación y transiciones Capgo nativas
Native-feeling UI with Capgo Native Navigation and Transitions
Capacitor Ionic a Ionic pero integrarlo con Quasar es engorroso y raramente vale la pena cuando ya tienes.
For a native mobile feel in a Quasar + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- Para un sentir móvil nativo en una aplicación Quasar + capgo, utilice en su lugar los plugins capacitor en lugar de los kits de interfaz de usuario web como Konsta UI: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation
- @capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
— transiciones de página estilo Ionic y retroceso de arrastre en la capa WebView en iOS, sin adoptar la interfaz de usuario de Ionic.
npm add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
npmx cap syncInstale ambos:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Configure la navegación nativa con el modo de inserción de CSS para que el contenido web respete las barras nativas:
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}`);
});Renderice una barra de pestañas de vidrio líquido (iOS utiliza la renderización propiedad del sistema; Android utiliza un fondo difuminado de la capa WebView):
<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>Envuelve páginas de rutas en cap-router-outlet, cap-page, y cap-content, y llama setDirection('forward') o setDirection('back') Antes de navegar. No duplique encabezados o pie de página web cuando la navegación nativa se encarga de esas superficies.
Ver las guías completas: Usando @capgo/capacitor-navegación-nativa y Usando @capgo/capacitor-transiciones.
Áreas seguras con Tailwind
Para áreas seguras de dispositivos en Tailwind CSS, utiliza @capgo/tailwind-capacitor (publicado como) tailwind-capacitor en npm). Ofrece safe-areas utilidades y otros plugins de Tailwind compatibles con Capacitor:
npm add -D tailwind-capacitorIn src/css/app.scss:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Utiliza utilidades como pt-safe, pb-safe, y px-safe en lugar de esparcirlos env(safe-area-inset-*) manualmente. El proyecto está activamente desarrollado — si algo falta para tu configuración de Quasar, abre una solicitud de extracción 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 no suele solucionar el problema. Pasa por estos controles en orden.
Asegúrese de que la etiqueta meta de viewport se aplique correctamente
En index.html (o su plantilla HTML de Quasar), establezca la etiqueta meta de viewport en <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Administre el área segura de iOS desde un solo wrapper raíz
Cree una caja de aplicación única y aplique 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);
}Envuelva todo el contenido de la página dentro de .app-shellEl relleno de área segura duplicado en encabezados, modales y wrappers de diseño a menudo hace que la IU parezca recortada o demasiado grande.
Con @capgo/tailwind-capacitorpuede expresar el mismo relleno con utilidades como pt-safe pb-safe px-safe en esa caja única.
Establezca Capacitor iOS contentInset Hasta never primero
En capacitor.config.ts, prefiera el deshabilitado nativo y deja que CSS (o la navegación nativa) maneje el área segura: contentInsetMode: 'css'Mezclar el contenido de ajuste automático de __CAPGO_KEEP_0__ con CSS
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-*) Encuentra el elemento que está desbordando en realidad
El culpable habitual es un elemento que utiliza
, Tailwind 100vw, un ancho de píxeles fijo o un ancho muy grande w-screenInicia sesión en Safari Web Inspector y ejecuta: min-width.
En
[...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,
}));With Tailwind, reemplaza w-screen con w-full Muchos problemas de rebosamiento horizontal provienen de 100vw / w-screen, relleno de área segura duplicado, o un contenedor de ancho fijo — no del metaetiqueta de viewport en sí.
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.
Y con la adición de Capgocontext
If you would like to learn how to add Capgo to your Next.js app, take a look at the next article :
Si deseas aprender a agregar Capacitor a tu aplicación de Next.js, mira el siguiente artículo :
Continúa leyendo desde Crear aplicaciones móviles con actualizaciones en vivo, Quasar y __CAPGO_KEEP_0__. Creando Aplicaciones Móviles con actualizaciones en vivo, Quasar y Capacitor. para planificar el trabajo de plugins nativos, conectarlo 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 Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas.
