Creación de aplicaciones móviles con Capacitor y Vue.js

1. Características del condensador
2. Requisitos
3. Creando un proyecto Vue
   1. Instalación de Vue CLI v3
   2. Generando un nuevo proyecto Vue
4. Añadiendo Iónico 4
   1. Agregar componentes de Vue
   2. Agregar navegación con Vue Router
5. Agregar condensador
   1. Integración de condensador con Vue
6. Uso de complementos de condensadores
   1. Ejemplo: agregar un complemento de condensador
   2. Creación de la aplicación para plataformas de destino
7. Conclusión

En este tutorial, aprenderá a utilizar Capacitor y tecnologías web de vanguardia, como los componentes web Vue.js y Ionic 4, para crear aplicaciones móviles multiplataforma para Android e iOS. También puede aprovechar Capacitor para apuntar a otras plataformas, como el escritorio y la web, utilizando la misma base de código.

Recientemente, el equipo de Ionic anunció un sucesor espiritual de código abierto de Apache Cordova y Adobe PhoneGap, llamado Capacitor . Capacitor le permite crear una aplicación con tecnologías web modernas y ejecutarla en todas partes, desde navegadores web hasta dispositivos móviles nativos (Android e iOS) e incluso plataformas de escritorio a través de Electron, la popular plataforma GitHub para crear aplicaciones de escritorio multiplataforma con Node.js. y tecnologías web front-end.

Ionic, el marco móvil híbrido más popular, actualmente se ejecuta sobre Cordova, pero en versiones futuras, Capacitor será la opción predeterminada para las aplicaciones Ionic. Capacitor también proporciona una capa de compatibilidad que permite el uso de complementos Cordova existentes en proyectos de Capacitor.

Además de usar Capacitor en aplicaciones Ionic, también puede usarlo sin Ionic con su marco de interfaz de usuario o biblioteca de interfaz de usuario preferido, como Vue, React, Angular with Material, Bootstrap, etc.

En este tutorial, veremos cómo usar Capacitor y Vue para crear una aplicación móvil sencilla para Android. De hecho, como se mencionó, su aplicación también puede ejecutarse como una aplicación web progresiva (PWA) o como una aplicación de escritorio en los principales sistemas operativos con solo unos pocos comandos.

También usaremos algunos componentes de la interfaz de usuario de Ionic 4 para diseñar nuestra aplicación móvil de demostración.

Características del condensador

Capacitor tiene muchas características que lo convierten en una buena alternativa a otras soluciones como Cordova. Veamos algunas de las características de Capacitor:

• Capacitor , gratuito y de código abierto
  , es un proyecto de código abierto, con la licencia permisiva del MIT y mantenido por Ionic y la comunidad.
• Multiplataforma
  Puede utilizar Capacitor para crear aplicaciones con una base de código y apuntar a múltiples plataformas. Puede ejecutar algunos comandos más de la interfaz de línea de comandos (CLI) para admitir otra plataforma.
• Acceso nativo a los SDK de la plataforma
  Capacitor no interfiere cuando necesita acceso a los SDK nativos.
• Tecnologías web y de navegador estándar
  Una aplicación creada con Capacitor utiliza API web estándar, por lo que su aplicación también será compatible con todos los navegadores y se ejecutará bien en todos los navegadores modernos que sigan los estándares.
• Extensible
  Puede acceder a las funciones nativas de las plataformas subyacentes agregando complementos o, si no puede encontrar un complemento que se ajuste a sus necesidades, creando un complemento personalizado a través de una API simple.

Requisitos

Para completar este tutorial, necesitará una máquina de desarrollo con los siguientes requisitos:

• Necesitará Node v8.6+ y npm v5.6+ instalados en su máquina. Simplemente dirígete al sitio web oficial y descarga la versión para tu sistema operativo.
• Para crear una aplicación para iOS, necesitará una Mac con Xcode.
• Para crear una aplicación de Android, deberá instalar Java 8 JDK y Android Studio con el SDK de Android.

Creando un proyecto Vue

En esta sección, instalaremos Vue CLI y generaremos un nuevo proyecto de Vue. Luego, agregaremos navegación a nuestra aplicación usando el enrutador Vue. Finalmente, crearemos una interfaz de usuario simple utilizando componentes de Ionic 4.

Instalación de Vue CLI v3

Comencemos instalando Vue CLI v3 desde npm ejecutando lo siguiente desde la línea de comando:

$ npm install -g @vue/cli

Es posible que deba agregar sudopara instalar el paquete globalmente, según su configuración de npm.

Generando un nuevo proyecto Vue

Después de instalar Vue CLI, usémoslo para generar un nuevo proyecto de Vue ejecutando lo siguiente desde CLI:

$ vue create vuecapacitordemo

Puede iniciar un servidor de desarrollo navegando dentro de la carpeta raíz del proyecto y ejecutando el siguiente comando:

 $ cd vuecapacitordemo $ npm run serve

Su aplicación front-end se ejecutará desde https://localhost:8080/.

Si visita https://localhost:8080/en su navegador web, debería ver la siguiente página:

Añadiendo Iónico 4

Para poder utilizar los componentes de Ionic 4 en su aplicación, necesitará utilizar el paquete principal de Ionic 4 de npm.

Entonces, continúe y abra el index.htmlarchivo, que se encuentra en la publiccarpeta de su proyecto Vue, y agregue la siguiente lt;script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'gt;lt;/scriptgt;etiqueta en el encabezado del archivo.

Este es el contenido de public/index.html:

!DOCTYPE htmlhtmlheadmeta charset="utf-8"meta http-equiv="X-UA-Compatible" content="IE=edge"meta name="viewport" content="width=device-width,initial-scale=1.0"link rel="icon" href="%= BASE_URL %favicon.ico"titlevuecapacitordemo/title/headbodynoscriptstrongWe’re sorry but vuecapacitordemo doesn’t work properly without JavaScript enabled. Please enable it to continue./strong/noscriptdiv /div!-- built files will be auto injected --script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'/script/body/html

Puede obtener la versión actual del paquete principal de Ionic en npm .

Ahora, abra src/App.vuey agregue el siguiente contenido dentro de la templateetiqueta después de eliminar lo que hay allí:

templateion-app router-view/router-view/ion-app/template

ion-appes un componente iónico. Debería ser el componente de nivel superior que envuelve otros componentes.

router-viewes la salida del enrutador Vue. El enrutador Vue representará aquí un componente que coincida con una ruta.

Después de agregar componentes Ionic a su aplicación Vue, comenzará a recibir advertencias en la consola del navegador similares a las siguientes:

[Vue warn]: Unknown custom element: ion-content - did you register the component correctly? For recursive components, make sure to provide the "name" option.found in--- HelloWorld at src/components/HelloWorld.vue App at src/App.vue Root

Esto se debe a que los componentes de Ionic 4 son en realidad componentes web, por lo que deberá decirle a Vue que los componentes que comienzan con el ionprefijo no son componentes de Vue. Puede hacerlo en el src/main.jsarchivo agregando la siguiente línea:

Vue.config.ignoredElements = [/^ion-/]

Esas advertencias ahora deberían eliminarse.

Agregar componentes de Vue

Agreguemos dos componentes. Primero, elimine cualquier archivo de la src/componentscarpeta (también elimine cualquier importación del HelloWorld.vuecomponente en App.vue) y agregue los archivos Home.vuey About.vue.

Abra src/components/Home.vuey agregue la siguiente plantilla:

templateion-appion-header ion-toolbar color="primary" ion-title Vue Capacitor /ion-title /ion-toolbar/ion-headerion-content padding The world is your oyster. pIf you get lost, the a href="https://ionicframework.com/docs"docs/a will be your guide./p/ion-content/ion-app/template

A continuación, en el mismo archivo, agregue el siguiente código:

scriptexport default { name: 'Home'}/script

Ahora, abra src/components/About.vuey agregue la siguiente plantilla:

templateion-appion-header ion-toolbar color="primary" ion-title Vue Capacitor | About /ion-title /ion-toolbar/ion-headerion-content paddingThis is the About page./ion-content/ion-app/template

Además, en el mismo archivo, agregue el siguiente código: Blog sobre salud

scriptexport default { name: 'About'}/script

Agregar navegación con Vue Router

Comience instalando el enrutador Vue, si aún no está instalado, ejecutando el siguiente comando desde la carpeta raíz de su proyecto:

npm install --save vue-router

A continuación, en src/main.js, agregue las siguientes importaciones:

import Router from 'vue-router'import Home from './components/Home.vue'import About from './components/About.vue'

Esto importa el enrutador Vue y los componentes "Inicio" y "Acerca de".

Agrega esto:

Vue.use(Router)

Cree una Routerinstancia con una variedad de rutas:

const router = new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]})

Finalmente, cuéntale a Vue sobre la Routerinstancia:

new Vue({router,render: h = h(App)}).$mount('#app')

Ahora que hemos configurado el enrutamiento, agreguemos algunos botones y métodos para navegar entre nuestros dos componentes "Inicio" y "Acerca de".

Abra src/components/Home.vuey agregue el siguiente goToAbout()método:

...export default { name: 'Home', methods: { goToAbout () { this.$router.push('about') },

En el templatebloque, agregue un botón para activar el goToAbout()método:

ion-button @click="goToAbout" fullGo to About/ion-button

Ahora necesitamos agregar un botón para volver a inicio cuando estemos en el componente "Acerca de".

Abra src/components/About.vuey agregue el goBackHome()método:

scriptexport default { name: 'About', methods: { goBackHome () { this.$router.push('/') } } }/script

Y, en el templatebloque, agregue un botón para activar el goBackHome()método:

ion-button @click="goBackHome()" fullGo Back!/ion-button

Al ejecutar la aplicación en un dispositivo móvil o emulador real, notará un problema de escala. Para resolver esto, simplemente necesitamos agregar algunas metaetiquetas que configuren correctamente la ventana gráfica.

En public/index.html, agregue el siguiente código a headla página:

meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"meta name="format-detection" content="telephone=no"meta name="msapplication-tap-highlight" content="no"

Agregar condensador

Puedes utilizar Capacitor de dos maneras:

• Crea un nuevo proyecto de Capacitor desde cero.
• Agregue Capacitor a un proyecto front-end existente.

En este tutorial, adoptaremos el segundo enfoque, porque primero creamos un proyecto Vue y ahora agregaremos Capacitor a nuestro proyecto Vue.

Integración de condensador con Vue

Capacitor está diseñado para integrarse en cualquier aplicación JavaScript moderna. Para agregar Capacitor a su aplicación web Vue, deberá seguir algunos pasos.

Primero, instale la CLI de Capacitor y los paquetes principales de npm. Asegúrese de estar en su proyecto Vue y ejecute el siguiente comando:

$ cd vuecapacitordemo$ npm install --save @capacitor/core @capacitor/cli

A continuación, inicialice Capacitor con la información de su aplicación ejecutando el siguiente comando:

$ npx cap init

Estamos usando npxpara ejecutar comandos de Capacitor. npxes una utilidad que viene con npm v5.2.0 y que está diseñada para facilitar la ejecución de utilidades CLI y ejecutables alojados en el registro de npm. Por ejemplo, permite a los desarrolladores utilizar ejecutables instalados localmente sin tener que utilizar los scripts de ejecución npm.

El initcomando de Capacitor CLI también agregará las plataformas nativas predeterminadas para Capacitor, como Android e iOS.

También se le pedirá que ingrese información sobre su aplicación, como el nombre, el ID de la aplicación (que se usará principalmente como nombre de paquete para la aplicación de Android) y el directorio de su aplicación.

Después de haber ingresado los detalles requeridos, Capacitor se agregará a su proyecto Vue.

También puedes proporcionar los detalles de la aplicación en la línea de comando:

$ npx cap init vuecapacitordemo com.example.vuecapacitordemo

El nombre de la aplicación es vuecapacitordemoy su ID es com.example.vuecapacitordemo. El nombre del paquete debe ser un nombre de paquete Java válido.

Debería ver un mensaje que diga: "¡Su proyecto de condensador está listo para funcionar!".

También puede notar que capacitor.config.jsonse ha agregado un archivo llamado a la carpeta raíz de su proyecto Vue.

Tal como sugiere la CLI cuando inicializamos Capacitor en nuestro proyecto Vue, ahora podemos agregar plataformas nativas a las que queremos apuntar. Esto convertirá nuestra aplicación web en una aplicación nativa para cada plataforma que agreguemos.

Pero justo antes de agregar una plataforma, debemos decirle a Capacitor dónde buscar los archivos creados, es decir, la distcarpeta de nuestro proyecto Vue. Esta carpeta se creará cuando ejecute el buildcomando de la aplicación Vue por primera vez ( npm run build), y está ubicada en la carpeta raíz de nuestro proyecto Vue.

Podemos hacerlo cambiando webDiren capacitor.config.json, que es el archivo de configuración de Capacitor. Entonces, simplemente reemplácelo wwwcon dist. Aquí está el contenido de capacitor.config.json:

{ "appId": "com.example.vuecapacitordemo", "appName": "vuecapacitordemo", "bundledWebRuntime": false, "webDir": "dist"}

Ahora, creemos la distcarpeta y construyamos nuestro proyecto Vue ejecutando el siguiente comando:

$ npm run build

Después de eso, podemos agregar la plataforma Android usando lo siguiente:

npx cap add android

Si observa su proyecto, encontrará que se androidha agregado un proyecto nativo.

Eso es todo lo que necesitamos para integrar Capacitor y apuntar a Android. Si desea apuntar a iOS o Electron, simplemente ejecute npx cap add ioso npx cap add electron, respectivamente.

Uso de complementos de condensadores

Capacitor proporciona un tiempo de ejecución que permite a los desarrolladores utilizar los tres pilares de la web (HTML, CSS y JavaScript) para crear aplicaciones que se ejecutan de forma nativa en la web y en las principales plataformas móviles y de escritorio. Pero también proporciona un conjunto de complementos para acceder a funciones nativas de los dispositivos, como la cámara, sin tener que utilizar el código de bajo nivel específico de cada plataforma; el complemento lo hace por usted y proporciona una API normalizada de alto nivel, de hecho.

Capacitor también proporciona una API que puede utilizar para crear complementos personalizados para las funciones nativas que no están cubiertas por el conjunto de complementos oficiales proporcionados por el equipo de Ionic. Puede aprender cómo crear un complemento en los documentos.

También puede encontrar más detalles sobre las API disponibles y los complementos principales en los documentos.

Ejemplo: agregar un complemento de condensador

Veamos un ejemplo del uso de un complemento Capacitor en nuestra aplicación.

Usaremos el complemento "Modals", que se usa para mostrar ventanas modales nativas para alertas, confirmaciones y solicitudes de entrada, así como hojas de acción.

Abra src/components/Home.vuey agregue la siguiente importación al comienzo del scriptbloque:

import { Plugins } from '@capacitor/core';

Este código importa la Pluginsclase desde @capacitor/core.

A continuación, agregue el siguiente método para mostrar un cuadro de diálogo:

… methods: { … async showDialogAlert(){ await Plugins.Modals.alert({ title: 'Alert', message: 'This is an example alert box' }); }

Finalmente, agregue un botón en el templatebloque para activar este método:

ion-button @click="showDialogAlert" fullShow Alert Box/ion-button

Aquí hay una captura de pantalla del cuadro de diálogo:

Puede encontrar más detalles en los documentos .

Creación de la aplicación para plataformas de destino

Para construir su proyecto y generar un binario nativo para su plataforma de destino, deberá seguir algunos pasos. Primero veámoslos en pocas palabras:

1. Genere una compilación de producción de su aplicación Vue.
2. Copie todos los recursos web en el proyecto nativo (Android, en nuestro ejemplo) generado por Capacitor.
3. Abra su proyecto de Android en Android Studio (o Xcode para iOS) y use el entorno de desarrollo integrado (IDE) nativo para crear y ejecutar su aplicación en un dispositivo real (si está conectado) o en un emulador.

Entonces, ejecute el siguiente comando para crear una compilación de producción:

$ npm run build

A continuación, utilice el copycomando de Capacitor CLI para copiar los recursos web al proyecto nativo:

$ npx cap copy

Finalmente, puede abrir su proyecto nativo (Android, en nuestro caso) en el IDE nativo (Android Studio, en nuestro caso) usando el opencomando de Capacitor CLI:

$ npx cap open android

Se abrirá Android Studio con su proyecto o se abrirá la carpeta que contiene los archivos nativos del proyecto.

Si eso no abre Android Studio, simplemente abra su IDE manualmente, vaya a "Archivo" → "Abrir...", luego navegue hasta su proyecto y abra la androidcarpeta desde el IDE.

Ahora puedes usar Android Studio para iniciar tu aplicación usando un emulador o un dispositivo real.

Conclusión

En este tutorial, hemos utilizado Ionic Capacitor con componentes web Vue e Ionic 4 para crear una aplicación móvil de Android con tecnologías web. Puede encontrar el código fuente de la aplicación de demostración que hemos creado a lo largo de este tutorial en el repositorio de GitHub .

(lf, ra, yk, al)Explora más en

• Aplicaciones
• javascript
• vista
• Androide
• iOS

Tal vez te puede interesar:

1. Creación de su propia biblioteca de validación de React: la experiencia del desarrollador (Parte 3)
2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
3. Creación de un componente web retro que se puede arrastrar con iluminación
4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

Creación de aplicaciones móviles con Capacitor y Vue.js

Características del condensadorRequisitosCreando un proyecto VueAñadiendo Iónico 4Agregar condensadorUso de complementos de condensadoresConclusiónClase ma

programar

es

https://aprendeprogramando.es/static/images/programar-creacion-de-aplicaciones-moviles-con-capacitor-y-vue-944-0.jpg

2025-01-14

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente