Crear Aplicaciones Móviles con Angular y Capacitor

En este tutorial, comenzaremos con una nueva aplicación de Angular y nos desplazaremos al reino de la aplicación móvil nativa utilizando __CAPGO_KEEP_0__. También puedes agregar la navegación y transiciones nativas de __CAPGO_KEEP_1__ para un sentir móvil nativo, y utilizar tailwind-__CAPGO_KEEP_2__ para áreas seguras. app and transition into the native mobile app realm using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Building Mobile Apps with Angular and Capacitor

With solo unos pocos pasos simples, la mayoría de las aplicaciones de Angular pueden ser transformadas en aplicaciones móviles.

Este tutorial le guiará a través del proceso, comenzando con una nueva aplicación de Angular y luego incorporando Capacitor para moverse al reino de aplicaciones móviles nativas. También puede utilizar Capgo de navegación nativa, transiciones y tailwind-capacitor para áreas seguras.

Sobre Capacitor

CapacitorJS es un juego cambiador! Puede incorporarlo fácilmente en cualquier proyecto web, y lo envolverá en una vista web nativa, generando el proyecto Xcode y Android Studio nativo para usted. Además, sus plugins proporcionan acceso a características de dispositivo nativo como la cámara a través de un puente de JS.

Con Capacitor, obtiene una fantástica aplicación móvil nativa sin ningún setup complicado o curva de aprendizaje empinada. Su API delgado y funcionalidad escalonada lo hacen un placer integrarlo en su proyecto. Confíe en mí, se sorprenderá de lo fácil que es lograr una aplicación nativa completamente funcional con Capacitor!

Preparando su aplicación de Angular

Para crear una nueva aplicación de Angular, ejecute el siguiente comando:

ng new my-app
cd my-app

Elige 'Angular' cuando se le pregunte por la versión de Angular.

Para crear una aplicación móvil nativa, necesitamos un export de nuestro proyecto. Así que incluyamos un script sencillo en nuestro package.json That can be used to build and copy the Angular project:

{
  "scripts": {
    // ...
    "build": "ng build --prod"
  }
}

Después de ejecutar el comando buildPuedes 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 Angular

Para empaquetar cualquier aplicación web en un contenedor móvil nativo, debemos seguir unos pocos pasos inicialmente, pero después 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 aplicación.

Después, debemos 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 Angular 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 Angular.

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, deberías encontrar un capacitor.config.ts archivo en tu proyecto, que contiene algunas configuraciones fundamentales 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 capacitor.config.json archivo y actualiza el webDir:

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

Puedes probarlo ejecutando los siguientes comandos:

npm run build
npx cap sync

El primer comando npm run build solo compilará tu proyecto Angular 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 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 darte cuenta, ya estás listo, 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, debes 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 android

Una vez que hayas configurado tus proyectos nativos, desplegar tu aplicación en un dispositivo conectado es fácil. En Android Studio, solo necesitas esperar a que todo esté listo, y puedes desplegar tu aplicación en 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 en un dispositivo real en lugar del simulador. Si no lo has hecho antes, Xcode te guía a través del proceso (pero de nuevo, debes estar inscrito en el Programa de Desarrolladores). Posteriormente, 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 Angular en un dispositivo móvil. Aquí tienes un ejemplo:

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…

Capacitor Live Reload

Hasta ahora, probablemente estás acostumbrado a tener hot reload con todas las marcos modernas, y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con un mínimo esfuerzo!

Habilita acceso a tu aplicación localmente hospedada con live reload On tu red por tener la aplicación Capacitor cargar el contenido desde la URL específica.

El primer paso es determinar tu dirección IP local. Si estás utilizando un Mac, puedes encontrar esto ejecutando el siguiente comando en la terminal:

ipconfig getifaddr en0

En Windows, ejecuta :

ipconfig

Luego busca la dirección IPv4.

Puedemos instruir a Capacitor para que cargue la aplicación directamente desde el servidor agregando otra entrada a nuestro capacitor.config.ts archivo:

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 utilizar la dirección IP y el puerto correctosEn este ejemplo, he utilizado el puerto de Angular por defecto.

Ahora, podemos aplicar estos cambios copiándolos a nuestro proyecto nativo:

npx cap copy

El copy El comando es similar a syncpero solo copiar los cambios realizados en la carpeta web y la configuración, sin actualizar el proyecto nativo.

Puede desplegar su aplicación una vez más a través de Android Studio o Xcode. Después de eso, si cambia algo en su aplicación de Angular, la aplicación se recargará automáticamente y mostrará los cambios!

Tenga en cuenta que si instala nuevos plugins como la cámara, todavía requiere una reconstrucción del proyecto nativo. Esto se debe a que los archivos nativos se han modificado, y no se puede hacer en tiempo real.

Tenga en cuenta que debe utilizar la IP y el puerto correctos en su configuración. El bloque code anterior muestra el puerto de Angular por defecto para fines de demostración.

Usando Capacitor Plugins

Vamos a echar un vistazo a 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/share

There’s nothing fancy about the Compartir pluginpero 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() src/app/app.component.ts a esto: Como se mencionó anteriormente, cuando instalamos nuevos plugins, necesitamos 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:

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'
    });
  }
}

Después de pulsar el botón, puedes ver el hermoso diálogo de compartir nativo en acción!

npx cap sync

Ahora puedes hacer que la aplicación se sienta más nativa en iOS y Android con __CAPGO_KEEP_0__ navegación y transiciones, y solucionar problemas de diseño comunes en iOS que causan desbordamiento horizontal o áreas de seguridad recortadas.

Interfaz de usuario que se siente nativa con Capgo Navegación y Transiciones Nativas

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic Capacitor para construir aplicaciones de múltiples plataformas, pero integrarla con Angular es engorrosa y raramente vale la pena cuando ya tienes Tailwind CSS.

Para un sentir móvil nativo en una aplicación de Angular + Capacitor , utilice Capgo plugins en lugar de kits de interfaz de usuario web solo como Konsta UI:

• @capgo/capacitor-navegación nativa — barra de navegación nativa, Liquid Glass barra de pestañas en iOS, y un estilo de barra de pestañas difuminada en Android. Su router de Angular mantiene el estado de la ruta; el plugin es dueño de la cromosoma nativa.
• @capgo/capacitor-transiciones — transiciones de página estilo Ionic y retroceso de arrastre en la capa de WebView en iOS, sin adoptar la interfaz de usuario de Ionic.

Instale ambos:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Configurar la navegación nativa con el modo de inserción de CSS para que el contenido web respete las barras nativas:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Renderizar una barra de pestañas de vidrio líquido (iOS utiliza la renderización propiedad del sistema; Android utiliza un fondo difuminado de la capa de WebView):

import { inject } from '@angular/core';
import { Router } from '@angular/router';

const router = inject(Router);

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.navigate([`/${id}`]);
});

Add native page transitions in your app shell:

```typescript
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions';

initTransitions({ platform: 'auto' });

@Component({
  selector: 'app-root',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <cap-router-outlet #outlet platform="auto" swipe-gesture="auto">
      <router-outlet></router-outlet>
    </cap-router-outlet>
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('outlet') outlet?: ElementRef<HTMLElement>;

  constructor(private router: Router) {}

  ngAfterViewInit() {
    if (this.outlet?.nativeElement) {
      setupRouterOutlet(this.outlet.nativeElement, { platform: 'auto', swipeGesture: 'auto' });
    }
  }

  openSettings() {
    setDirection('forward');
    this.router.navigate(['/settings']);
  }
}

Envuelva páginas de rutas en cap-router-outlet, cap-page, y cap-content, y llamar setDirection('forward') o setDirection('back') antes de navegar. No duplique encabezados o pie de página web cuando la navegación nativa controla esas superficies.

Consulte las guías completas: Usando @capgo/capacitor-navegación-nativa y Usando @capgo/capacitor-transiciones.

Áreas seguras con Tailwind

Para áreas seguras de dispositivos en Tailwind CSS, utilice @capgo/tailwind-capacitor (publicado como tailwind-capacitor en npm). Proporciona safe-areas utilidades y otros plugins de Tailwind compatibles con Capacitor:

bun add -D tailwind-capacitor

En src/styles.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Utiliza utilidades como pt-safe, pb-safe, y px-safe en lugar de agregarlas env(safe-area-inset-*) manualmente. El proyecto está activamente desarrollado — si algo falta para tu configuración de Angular, abre una solicitud de revisión en GitHub.

Solucionar problemas de diseño de iOS (Vista de pantalla, Área segura y Desbordamiento horizontal)

Si el contenido parece recortado, desplazado o desplazable horizontalmente en iOS, agregar más overflow-x: hidden o ajustar la etiqueta de vista previa sola no suele solucionar el problema. Pasa por estas comprobaciones en orden.

Asegúrate de que la etiqueta meta de vista previa se aplique correctamente

En src/index.htmlEstablecer la etiqueta meta de viewport en <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Gestionar el área seguro de iOS desde un solo contenedor raíz

Crear una caja de aplicación única y aplicar allí el relleno del área seguro, y no en múltiples componentes anidados:

html,
body,
app-root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Envolver todo el contenido de la página dentro de .app-shellEl relleno del área seguro duplicado en encabezados, modales y contenedores de diseño a menudo hace que la interfaz de usuario se vea recortada o demasiado grande.

Con @capgo/tailwind-capacitor, puedes expresar el mismo relleno con utilidades como pt-safe pb-safe px-safe en esa caja única.

Establecer Capacitor iOS contentInset a never primero

Inicia capacitor.config.ts, prefiera el área de inserción nativa deshabilitada y deja que CSS (o la navegación nativa) tenga el área de seguridad: contentInsetMode: 'css'Mezclar el área de contenido automático de __CAPGO_KEEP_0__ con CSS de relleno es una causa común de espaciado doble.

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'www',
  ios: {
    contentInset: 'never',
  },
};

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) El culpable habitual es un elemento que utiliza

, Tailwind

, un ancho de píxeles fijo o un ancho muy grande 100vwInspecciona con Safari Web Inspector: w-screenCon Tailwind, reemplaza min-width.

con

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Mixing __CAPGO_KEEP_0__’s automatic content inset with CSS padding is a common cause of double spacing. w-screen Find the real overflowing element is The usual culprit is an element using w-full cuando sea posible. Muchos problemas de rebosamiento horizontal provienen de 100vw / w-screen, relleno de área segura duplicado, o un contenedor de ancho fijo — no del etiqueta meta de viewport en sí misma.

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 Angular, mira el siguiente artículo:

Sigue adelante desde Building Mobile Apps con Angular y Capacitor

Si estás utilizando Building Mobile Apps con Angular y Capacitor para planificar el comportamiento de medios y interfaz nativa, conecta con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos @capgo/capacitor-reproductor-de-videos para el detalle de implementación en @capgo/capacitor-reproductor-de-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa