Crear aplicaciones móviles con actualizaciones en vivo, Quasar y 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 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 crear 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 To 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 de 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 aplicación móvil nativa fantástica sin ninguna configuración complicada o curva de aprendizaje empinada. Su API delgado y su funcionalidad estrecha hacen que sea un susurro para integrarlo en tu proyecto. Confía en mí, te sorprenderá la facilidad con la que puedes lograr una aplicación nativa funcionalmente 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 exportar nuestro proyecto. Por lo tanto, incluyamos un script sencillo en nuestro archivo export de nuestro proyecto. Así que incluyamos un script sencillo en nuestro package.json That can be used to build and copy the Quasar project:

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

Después de ejecutar el comando generatePuedes 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 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 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 la cesta.

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 nuevos ios y android carpetas en tu proyecto de Quasar.

Son proyectos nativos reales!

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

Además, deberías 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 webDir, que debe apuntar al resultado de tu comando de compilación. Actualmente, es inexacto.

Para corregir esto, abre el archivo capacitor.config.json y actualiza el webDir:

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

Puedes probarlo ejecutando los siguientes comandos:

npm run generate
npx cap sync

El 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 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 instales 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.

If you’re new to native mobile development, you can use the 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 a un dispositivo conectado es fácil. En Android Studio, solo debes 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:

En Xcode, debes configurar tu cuenta de firma para desplegar tu aplicación a un dispositivo real en lugar del simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero, una vez más, 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 Quasar a un dispositivo móvil. Aquí tienes 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 actualizaciones pequeñas a 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 guía 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 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`

Agregar su primera Aplicación:

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

    npx @capgo/cli@latest app add

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

Subir su primera versión:

Ejecute el comando 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 la construcción está presente.

Puede incluso probarlo con mi aplicación de prueba móvil.

Hacer canal predeterminado:

Después de enviar tu aplicación a Capgo, necesitas hacer 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:

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 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 los Documentación de Actualizaciones en Vivo.

Usando Capacitor Plugins

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 lo trae de todos modos 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() pages/index.vue a esto: Como mencionamos anteriormente, cuando instalamos nuevos plugins, debemos 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 sync

Opcionalmente, agregar Konsta UI

Para utilizar Konsta UI en tu aplicación Quasar, necesitas tener

tailwind instalado ya Capacitor y para instalar el paquete:

npm i konsta

Ademá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 predeterminada (o la personalizada) de Tailwind CSS con algunas variantes y utilidades de ayuda necesarias para Konsta UI.

Ahora necesitamos configurar el componente App principal para que podamos 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 And change it to the following:

<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, inténtelo de nuevo desde cero. Una vez que lo hayas hecho, deberías ver una aplicación móvil con una apariencia nativa algo similar, construida con Quasar y Capacitor!

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 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 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 plugin nativo, conectarlo con Directorio de Plugins Capgo para el flujo de trabajo del producto en Directorio de Plugins Capgo, Plugins de Capgo en Capacitor para el detalle de implementación en Plugins de Capgo en Capacitor, 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.