En este tutorial, comenzaremos con una nueva aplicación de Angular y la transformaremos en una aplicación móvil nativa usando Capacitor. Opcionalmente, también puedes añadir Konsta UI para mejorar la interfaz móvil con Tailwind CSS.
Capacitor te permite convertir fácilmente tu aplicación web Angular en una aplicación móvil nativa sin requerir modificaciones significativas o aprender una nueva habilidad como React Native.
Con solo unos pocos pasos simples, la mayoría de las aplicaciones Angular pueden transformarse en aplicaciones móviles.
Este tutorial te guiará a través del proceso, comenzando con una nueva aplicación Angular y luego incorporando Capacitor para moverte al ámbito de las aplicaciones móviles nativas. Adicionalmente, puedes usar opcionalmente Konsta UI para mejorar tu interfaz móvil con Tailwind CSS.
Acerca de Capacitor
¡Capacitor es un cambio de juego! Puedes incorporarlo sin esfuerzo en cualquier proyecto web, y envolverá tu aplicación en una vista web nativa, generando el proyecto nativo de Xcode y Android Studio por ti. Además, sus plugins proporcionan acceso a características nativas del dispositivo como la cámara a través de un puente JS.
Con Capacitor, obtienes una fantástica aplicación móvil nativa sin ninguna configuración complicada o curva de aprendizaje pronunciada. Su API ligera y funcionalidad optimizada hacen que sea muy fácil integrarlo en tu proyecto. ¡Confía en mí, te sorprenderá lo sencillo que es lograr una aplicación nativa completamente funcional con Capacitor!
Preparando Tu Aplicación Angular
Para crear una nueva aplicación Angular, ejecuta el siguiente comando:
ng new my-appcd my-app
Elige “Angular” cuando se te solicite la versión de Angular.
Para crear una aplicación móvil nativa, necesitamos una exportación de nuestro proyecto. Por lo tanto, incluyamos un script sencillo en nuestro package.json que pueda utilizarse para construir y copiar el proyecto Angular:
{ "scripts": { // ... "build": "ng build --prod" }}
Después de ejecutar el comando build
, deberías poder ver una nueva carpeta dist
en la raíz de tu proyecto.
Esta carpeta será utilizada por Capacitor más adelante, pero por ahora, debemos configurarla correctamente.
Añadiendo Capacitor a Tu Aplicación Angular
Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir algunos pasos iniciales, pero después es tan simple como ejecutar un único comando sync
.
Primero, podemos instalar el CLI de Capacitor como una dependencia de desarrollo, y luego configurarlo dentro de nuestro proyecto. Durante la configuración, puedes presionar “enter” para aceptar los valores predeterminados para el nombre y el ID del paquete.
Después, necesitamos instalar el paquete principal y los paquetes relevantes para las plataformas iOS y Android.
Finalmente, podemos añadir las plataformas, y Capacitor creará carpetas para cada plataforma en la raíz de nuestro proyecto:
# Install the Capacitor CLI locallynpm install -D @capacitor/cli
# Initialize Capacitor in your Angular projectnpx cap init
# Install the required packagesnpm install @capacitor/core @capacitor/ios @capacitor/android
# Add the native platformsnpx cap add iosnpx cap add android
En este punto, deberías poder observar nuevas carpetas ios y android en tu proyecto Angular.
¡Estos son proyectos nativos reales!
Para acceder al proyecto Android más tarde, debes instalar Android Studio. Para iOS, necesitas una 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. Lo único a lo que debes prestar atención es el webDir, que debe apuntar al resultado de tu comando de construcció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 buildnpx cap sync
El primer comando npm run build
simplemente construirá tu proyecto Angular y copiará la construcción estática, mientras que el segundo comando npx cap sync
sincronizará todo el código web en los lugares correctos de las plataformas nativas para que puedan mostrarse en una aplicación.
Además, el comando sync podría actualizar las plataformas nativas e instalar plugins, así que cuando instales nuevos plugins de Capacitor es momento de ejecutar npx cap sync
nuevamente.
Sin darte cuenta, ahora has terminado, ¡así que veamos la aplicación en un dispositivo!
Construir 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, debes inscribirte en el Programa de Desarrollador de Apple para iOS y en la Consola de Google Play para Android.
Si eres nuevo en el desarrollo móvil nativo, puedes usar el CLI de Capacitor para abrir fácilmente ambos proyectos nativos:
npx cap open iosnpx 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 necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación a un dispositivo conectado sin cambiar ninguna configuración. Aquí hay un ejemplo:
En Xcode, necesitas configurar tu cuenta de firma para desplegar tu aplicación a un dispositivo real en lugar de solo el simulador. Si no has hecho esto antes, Xcode te guía a través del proceso (pero nuevamente, debes estar inscrito en el Programa de Desarrollador). Posteriormente, puedes simplemente presionar play para ejecutar la aplicación en tu dispositivo conectado, que puedes seleccionar en la parte superior. Aquí hay un ejemplo:
¡Felicitaciones! Has desplegado exitosamente tu aplicación web Angular a un dispositivo móvil. Aquí hay un ejemplo:

Pero espera, también hay una forma más rápida de hacer esto durante el desarrollo…
Recarga en Vivo de Capacitor
A estas alturas, probablemente estés acostumbrado a tener recarga en caliente con todos los frameworks modernos, ¡y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con un esfuerzo mínimo!
Habilita el acceso a tu aplicación alojada localmente con recarga en vivo en tu red haciendo que la aplicación Capacitor cargue el contenido desde la URL específica.
El primer paso es averiguar tu dirección IP local. Si estás usando una Mac, puedes averiguarlo ejecutando el siguiente comando en la terminal:
ipconfig getifaddr en0
En Windows, ejecuta:
ipconfig
Luego busca la dirección IPv4.
Podemos instruir a Capacitor para que cargue la aplicación directamente desde el servidor añadiendo otra entrada a nuestro archivo capacitor.config.ts
:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { appId: 'com.example.app', appName: 'my-app', webDir: 'dist', bundledWebRuntime: false, server: { url: 'http://192.168.x.xx:4200', cleartext: true }};
export default config;
Asegúrate de usar la IP y el puerto correctos, he usado el puerto predeterminado de Angular en este ejemplo.
Ahora, podemos aplicar estos cambios copiándolos a nuestro proyecto nativo:
npx cap copy
El comando copy
es similar a sync
, pero solo copiará los cambios realizados en la carpeta web y la configuración, sin actualizar el proyecto nativo.
Ahora puedes desplegar tu aplicación una vez más a través de Android Studio o Xcode. Después de eso, si cambias algo en tu aplicación Angular, la aplicación se recargará automáticamente y mostrará los cambios.
Ten en cuenta que si instalas nuevos plugins como la cámara, aún requiere una reconstrucción de tu proyecto nativo. Esto es porque los archivos nativos son cambiados, y no se puede hacer sobre la marcha.
Ten en cuenta que debes usar la IP y el puerto correctos en tu configuración. El bloque de código anterior muestra el puerto predeterminado de Angular como ejemplo.
Usando Plugins de Capacitor
Veamos cómo usar un plugin de Capacitor en acción, que hemos mencionado varias veces antes. Para hacer esto, podemos instalar un plugin bastante simple ejecutando:
npm i @capacitor/share
No hay nada especial sobre el plugin Share, ¡pero de todos modos muestra el diálogo de compartir nativo! Para esto ahora solo necesitamos importar el paquete y llamar a la función share()
correspondiente desde nuestra aplicación, así que cambiemos el src/app/app.component.ts a esto:
import { Component } from '@angular/core';import { Share } from '@capacitor/share';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss']})export class AppComponent { title = 'my-app';
async share() { await Share.share({ title: 'Open Youtube', text: 'Check new video on youtube', url: 'https://www.youtube.com', dialogTitle: 'Share with friends' }); }}
Como se mencionó anteriormente, al instalar nuevos plugins, necesitamos realizar una operación de sincronización y luego redesplegar la aplicación a nuestro dispositivo. Para hacer esto, ejecuta el siguiente comando:
npx cap sync
¡Después de presionar el botón, puedes ver el hermoso diálogo de compartir nativo en acción!
Añadiendo Konsta UI
Para usar Konsta UI en tu aplicación Nuxt 3, necesitas tener tailwind ya instalado y instalar el paquete:
npm i konsta
Adicionalmente, necesitas modificar tu archivo tailwind.config.js
:
// import konstaConfig configconst konstaConfig = require('konsta/config')
// wrap config with konstaConfig configmodule.exports = konstaConfig({ content: [ './src/**/*.{html,ts}', ], darkMode: 'media', // or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [],})
konstaConfig
extenderá la configuración predeterminada de Tailwind CSS (o tu configuración personalizada) con algunas variantes extra y utilidades auxiliares requeridas para Konsta UI.
Ahora necesitamos configurar el componente principal App para que podamos establecer algunos parámetros globales (como theme
).
Necesitamos envolver toda la aplicación con App
en el src/app/app.component.html
:
<app> <h1>Welcome to Angular and Capacitor!</h1> <button (click)="share()">Share now!</button></app>
Página de Ejemplo
Ahora que todo está configurado, podemos usar los componentes Vue de Konsta UI en nuestras páginas Angular.
Por ejemplo, abramos src/app/app.component.html
y cambiémoslo a lo siguiente:
<app> <page> <navbar title="My App" />
<block strong> <p> Here is your Angular & Konsta UI app. Let's see what we have here. </p> </block> <block-title>Navigation</block-title> <list> <list-item href="/about/" title="About" /> <list-item href="/form/" title="Form" /> </list>
<block strong class="flex space-x-4"> <button>Button 1</button> <button>Button 2</button> </block> </page></app>
Si la recarga en vivo está desincronizada 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 Angular y Capacitor!
Deberías ver la siguiente página como resultado:
Conclusión
Capacitor es una excelente opción para construir aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma simple de compartir código y mantener una interfaz de usuario consistente.
Y con la adición de Capgo, es aún más fácil añadir actualizaciones en vivo a tu aplicación, asegurando que tus usuarios siempre tengan acceso a las últimas características y correcciones de errores.
Si te gustaría aprender cómo añadir Capgo a tu aplicación Angular, echa un vistazo al siguiente artículo: