Profile Software Services

Capacitor e Ionic: qué son y cómo llevar tu app web al móvil 

  • Everit Jhon Molero

    • Cada vez es más común tener una web hecha en Angular, React o Vue y querer llevarla tal cual al móvil sin reescribir nada en Swift, Kotlin o Java. Ahí es donde entran Capacitor e Ionic: una combinación que permite crear apps para iOS y Android reutilizando casi todo tu código web. 

    La idea es sencilla: 

    desarrollo de app móviles Capacitor + Ionic

    La combinación Angular + Ionic + Capacitor permite 

    ¿Qué es Capacitor? 

    Capacitor es el runtime nativo de Ionic. Por debajo hace básicamente tres cosas: 

    Lo mejor es que no está casado con Angular. Mientras exista un index.htmly una carpeta con el build (por ejemplo dist/tu-app/browser), Capacitor puede trabajar encima de eso: Angular, React, Vue, Svelte o una web clásica. 

    A nivel de configuración, Capacitor se controla con un archivo de config (normalmente capacitor.config.ts o capacitor.config.json) donde indicas: 

    Ionic: la capa de UI orientada a móvil 

    Ionic aporta la parte visual, componentes listos para móvil que se integran perfectamente con Angular: 

    Podrías usar solo Web App + Capacitor, pero la interfaz se vería “web” a menos que ajustemos mucho el CSS (lo que podría tomar mucho tiempo). Con Ionic esos componentes ya vienen listos para verse bien en móvil casi sin esfuerzo. 

    Funcionamiento de Angular + Ionic + Capacitor

    En este caso, veremos el ejemplo utilizando Angular, un framework muy popular de Google: 

    Crear una app híbrida y ejecutarla en dispositivos Apple y Android

    Inicializar un proyecto Angular estándar:

    ng new contador-hibrido --routing=false --style=scss 
    cd contador-hibrido 
    ng serve 

    Abre http://localhost:4200 y comprueba que la aplicación base de Angular se ve bien. 

    Añadir Ionic sobre Angular 

    Para usar los componentes de Ionic debemos agregar las dependencias a nuestro proyecto: 

    ng add @ionic/angular 

    Este comando agrega las dependencias de Ionic, ajusta el AppModule y te deja listo para usar etiquetas como <ion-app>, <ion-header>, <ion-content>, etc. 

    <!-- app.component.html --> 
<ion-app> 
<ion-header> 
<ion-toolbar> 
<ion-title>Contador híbrido</ion-title> 
</ion-toolbar> 
</ion-header> 

<ion-content class="ion-padding"> 
<app-counter></app-counter> 
</ion-content> 
</ion-app>

    La etiqueta<app-counter> será el componente que vamos a crear ahora. 

    Componente contador “- 0 +” 

    Genera el componente Angular: 

    ng generate component counter 

src/app/counter/counter.component.ts
    import { Component } from '@angular/core'; 
@Component({ 
selector: 'app-counter', 
templateUrl: './counter.component.html', 
styleUrls: ['./counter.component.scss'], 
}) 
export class CounterComponent { 
value = 0; 

increment() { 
this.value = this.value + 1; 
} 

decrement() { 
this.value = this.value - 1; 
} 
} 
    src/app/counter/counter.component.html 
    <div class="counter-wrapper"> 
<ion-button 
color="medium" 
fill="outline" 
(click)="decrement()" 
> 
-
</ion-button> 
<span class="counter-value"> 
{{ value }} 
</span> 

<ion-button 
color="primary" 
fill="solid" (
click)="increment()" 
> 
+ 
</ion-button> 
</div>
    src/app/counter/counter.component.scss
    .counter-wrapper { 
display: flex; 
align-items: center; 
justify-content: center; 
gap: 1.5rem; 
margin-top: 2rem; 
} 

.counter-value { 
font-size: 2.5rem; 
font-weight: 600; 
}

    Con «ng serve» deberías ver la pantalla con los botones «-» y «+» y el número en medio actualizándose. 

    Instalar Capacitor en el proyecto 

    La opción cómoda con Angular es: ng add @capacitor/angular 

    Esto instala @capacitor/core y @capacitor/cli y te genera el archivo de configuración de Capacitor. 

    Sin embargo, se puede instalar de forma manual: 

    npm install @capacitor/core 

npm install --save-dev @capacitor/cli 

npx cap init

    El init pide: App name (por ejemplo Contador híbrido) y App ID (por ejemplo com.everit.contador). 

    Configurando capacitor.config 

    Según la versión de Capacitor/Angular, verás algo como capacitor.config.ts o capacitor.config.json en la raíz del proyecto. 

    Ejemplo con capacitor.config.ts: 

    import { CapacitorConfig } from '@capacitor/cli'; 

const config: CapacitorConfig = { 
appId: 'com.everit.contador', 
appName: 'Contador híbrido', 
webDir: 'dist/contador-hibrido/browser', 
bundledWebRuntime: false, 
server: { 
// Útil para live-reload en desarrollo móvil 
// url: 'http://192.168.1.100:4200', 
// cleartext: true, 
}, 
}; 

export default config;

    Si usas capacitor.config.json, la estructura sería: 

    { 
"appId": "com.everit.contador", 
"appName": "Contador híbrido", 
"webDir": "dist/contador-hibrido/browser", 
"bundledWebRuntime": false 
}

    Si se cambia el nombre del proyecto o la carpeta de salida del build, hay que recordar actualizar webDir. 

    Build de Angular y sincronización 

    Antes de crear los proyectos nativos, la app Angular tiene que estar construida: ng build --configuration production. Cuando ya hemos construido el build, añadir las plataformas nativas: 

    npm install @capacitor/android @capacitor/ios npx cap add android 

npx cap add ios

     Cada vez que se cambie el código de Angular y se quiera que esos cambios lleguen a las apps nativas, el ciclo típico es: 

    ng build --configuration production npx cap sync 

    sync copia los archivos de webDir a cada proyecto nativo y actualiza plugins y configuración. 

    Abrir el proyecto en Android Studio 

    Con la carpeta android/ creada, abrir el proyecto: 

    npx cap open android 

    Esto lanza Android Studio apuntando al proyecto generado. Desde ahí eliges dispositivo (emulador o físico) y pulsar Run para instalar la app y ver la pantalla del contador. 

    Abrir el proyecto en Xcode 

    En macOS, con Xcode instalado:  npx cap open ios 

    Esto abre el workspace de iOS en Xcode. Elige simulador o dispositivo, selecciona el target de la app y pulsar Run para ver el contador corriendo en iOS. 

    Opcional: live reload en dispositivo 

    Para evitar hacer build cada vez mientras desarrollas, se puede usar el servidor de desarrollo de Angular: 

    ng serve --host 0.0.0.0 --port 4200 
En capacitor.config.ts, configurar el servidor: 

server: { 
url: 'http://192.168.1.50:4200', 
cleartext: true 
}

    Después de npx cap sync, la app nativa cargará directamente desde ese servidor de desarrollo y tendrás recarga automática también en el dispositivo. Para builds de producción, vuelve a servir desde webDir. 

    Conclusiones 

    Con Capacitor e Ionic no hace falta elegir entre web o móvil: puedes partir de una app Angular (o cualquier framework web moderno) y terminar con un binario listo para instalar en Android e iOS usando el mismo código base. 

    A nivel práctico, esta combinación aporta: 

    El contador «- 0 +» es un ejemplo mínimo, pero ya recorre el camino completo: desde ng new hasta abrir el proyecto en Android Studio y Xcode. A partir de aquí, el siguiente paso natural es empezar a añadir pantallas, navegación, almacenamiento local y plugins nativos más avanzados, manteniendo siempre la ventaja de seguir trabajando en TypeScript y en tu entorno Angular de siempre. 

     Si te interesa estar al día en desarrollo web, arquitectura y buenas prácticas en programación, síguenos en nuestras redes sociales y Canal de YouTube.

    Salir de la versión móvil