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 que tu aplicación se vea mejor en móvil.
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 Capacitor para enviar actualizaciones en vivo a tu aplicación en segundos. Sobre Capgo CapacitorJS es verdaderamente un juego cambiador. Puedes incorporarlo fácilmente en cualquier proyecto web, y lo envolverá en una vista web nativa, generando el proyecto de Xcode y Android Studio nativo para ti. Además, sus plugins te proporcionan acceso a características de dispositivos nativos como la cámara a través de un puente de JS.
About Capacitor
CapacitorJS es verdaderamente un juego cambiador. Puedes incorporarlo fácilmente en cualquier proyecto web, y lo envolverá en una vista web nativa, generando el proyecto de Xcode y Android Studio nativo para ti. Además, sus plugins te proporcionan acceso a características de dispositivos nativos como la cámara a través de un puente de JS.
With Capacitor, obtén una fantástica aplicación móvil nativa sin ningún complicado setup o curva de aprendizaje pronunciada. Su delgado API y funcionalidad afinada hacen que sea un placer integrarla en tu proyecto. Confía en mí, te sorprenderá lo sencillo que es lograr una aplicación móvil nativa funcional con Capacitor!
Configuración de la 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 sencillo en nuestro package.json que se puede utilizar para construir y copiar el proyecto Quasar:
{
"scripts": {
// ...
"build": "quasar build"
}
}Después de ejecutar el comando generate, deberías poder ver una aplicación fresca 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 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 sync comando.
Primero, podemos instalar el Capacitor CLI como una dependencia de desarrollo, y luego configurarlo dentro de nuestro proyecto. Durante la configuración, puedes pulsar “enter” para aceptar los valores predeterminados para el nombre y el ID de paquete.
Siguiente, necesitamos 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 nuevas iOS y Android los 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 que contiene algunas configuraciones fundamentales Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el carpetaWeb, que debe apuntar a la salida de tu comando de compilación. Actualmente, es inexacto.
Para corregir esto, abre el capacitor.config.json archivo y actualiza la carpetaWeb:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Puedes probarlo ejecutando los siguientes comandos:
npm run generate
npx cap syncEl primer comando npm run generate solo compilará tu proyecto Quasar y copiará la compilación estática, mientras que el segundo comando npx cap sync sincronizará 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 de sincronización puede actualizar las plataformas nativas e instalar plugins, por lo que cuando instales un nuevo Capacitor plugins Es hora de correr de nuevo. npx cap sync .
Sin darse cuenta, ya has terminado, así que veamos la aplicación en un dispositivo!
Construye y despliega 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 móvil nativo, puedes utilizar el 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 a un dispositivo conectado es fácil. En Android Studio, solo necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación a un dispositivo conectado sin cambiar ninguna configuración. Aquí tienes un ejemplo:
In 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). 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 a sus aplicaciones móviles sin tener que 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 tu aplicación de 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 y la 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 registrarte en 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 tu cuenta para iniciar sesión con el CLI:
`npx @capgo/cli@latest login YOU_KEY`Agrega tu primera App:
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 Capacitor para crear la aplicación.
Carga tu primera versión:
Ejecuta el comando para construir tu code y envíalo a Capgo con:
npx @capgo/cli@latest bundle upload`Por defecto, el nombre de la versión será el que se encuentra en tu archivo package.json.
Revisa en Capgo si la construcción está presente.
Puedes incluso probarlo con mi aplicación de escritorio móvil Establecer canal por defecto.
Después de haber enviado tu aplicación a __CAPGO_KEEP_0__, necesitas establecer tu canal como predeterminado para que las aplicaciones puedan recibir actualizaciones de __CAPGO_KEEP_1__.:
After you have sent your app to Capgo, you need to make your channel default to let apps receive updates from Capgo.
npx @capgo/cli@latest channel set production -s default
Agrega esta configuración a tu archivo JavaScript principal.:
Luego haz un
import { CapacitorUpdater } from '@capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()Luego haz un npm run build && npx cap copy Para actualizar tu aplicación.
Recibir un 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 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 el documento completo sobre Documentación de Actualizaciones en Vivo.
Usando Capacitor Plugins
Vamos a ver cómo utilizar un plugin Capacitor en acción, que mencionamos antes. Para hacer esto, podemos instalar un plugin bastante simple ejecutando:
npm i @capacitor/shareNo hay nada especial sobre el Plugin de Compartirpero de todos modos abre el diálogo de compartir nativo. Para esto ahora solo necesitamos importar el paquete y llamar al método correspondiente desde nuestra aplicación, así que cambiemos el share() function from our app, so let’s change the pages/index.vue 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, necesitamos 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 syncDespués de pulsar el botón, puede ver el diálogo de compartir nativo en acción!
Agregar Konsta UI de manera opcional
Para utilizar Konsta UI en su aplicación Quasar, necesita tener tailwind ya instalado y para instalar el paquete:
npm i konstaAdemás, necesita modificar su tailwind.config.js archivo:
// import konstaConfig config
const konstaConfig = require('konsta/config')
// wrap config with konstaConfig config
module.exports = konstaConfig({
content: [
'./pages/**/*.{vue}',
'./components/**/*.{vue}',
],
darkMode: 'media', // or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
})konstaConfig extenderá la configuración de CSS Tailwind predeterminada (o la suya personalizada) con algunas variantes y utilidades de ayuda necesarias para Konsta UI.
Ahora necesitamos configurar el principal App componento para poder establecer algunos parámetros globales (como theme).
Necesitamos envolver toda la aplicación con App en el pages/_app.vue:
<template>
<App theme="ios">
<Quasar />
</App>
</template>
<script setup>
import { App } from 'konsta/vue';
</script>Página de Ejemplo
Ahora que todo está configurado, podemos utilizar componentes de Konsta UI Vue en nuestras páginas de Quasar.
Por ejemplo, abramos pages/index.vue y cambiémoslo a lo siguiente:
<template>
<Page>
<Navbar title="My App" />
<Block strong>
<p>
Here is your Quasar & Konsta UI app. Let's see what we have here.
</p>
</Block>
<BlockTitle>Navigation</BlockTitle>
<List>
<ListItem href="/about/" title="About" />
<ListItem href="/form/" title="Form" />
</List>
<Block strong class="flex space-x-4">
<Button>Button 1</Button>
<Button>Button 2</Button>
</Block>
</Page>
</template>
<script setup>
import {
Page,
Navbar,
Block,
Button,
List,
ListItem,
Link,
BlockTitle,
} from 'konsta/vue';
</script>Si el recarga en vivo está fuera de sincronía después de instalar todos los componentes necesarios, intenta reiniciar todo. Una vez que hayas hecho eso, deberías ver una aplicación móvil con un aspecto algo nativo, construida con Quasar y Capacitor!
Conclusión
Capacitor es una excelente opción para construir 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 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.
Si deseas aprender a agregar Capgo a tu aplicación de Next.js, consulta el próximo artículo:
