Crear aplicaciones móviles con Angular y Capacitor

In este tutorial, comenzaremos con una nueva Angular app y transitaremos al reino de la aplicación móvil nativa utilizando Capacitor. También puedes agregar Capgo de navegación nativa y transiciones para un sentir móvil nativo, y utilizar tailwind-capacitor para áreas seguras.

Capacitor te permite convertir fácilmente tu aplicación web de 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 de Angular pueden ser transformadas en aplicaciones móviles.

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

Sobre Capacitor

CapacitorJS es 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 te 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 ningún setup complicado o curva de aprendizaje empinada. Su API y funcionalidad escalonada lo hacen un placer 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 de Angular

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

ng new my-app
cd my-app

Elige "Angular" cuando se te pregunte por la versión de Angular.

Para crear una aplicación móvil nativa, necesitamos un exportación de nuestro proyecto. Por lo tanto, incluyamos un script directo en nuestro package.json que se puede utilizar para construir y copiar el proyecto de Angular:

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

Después de ejecutar el comando build, deberías poder ver un nuevo dist carpeta

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your Angular App

Capacitor sync comando.

Primero, podemos instalar el Capacitor CLI como una dependencia de desarrollo, y luego configurarlo dentro de nuestro proyecto. Durante la configuración, puede pulsar “enter” para aceptar los valores predeterminados para el nombre y el ID de la caja.

A continuación, 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 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.

Aquellas son proyectos nativos reales!

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

Además, debes encontrar un archivo capacitor.config.ts que contiene algunas configuraciones fundamentales Capacitor utilizadas durante la sincronización. La única cosa a la que debes prestar atención es el webDircontexto: Fragmento de texto HTML de una cadena de Capgo UI más larga (clave de página `solutions_cordova_to_capacitor_ai_step2_body`). Página/área: Página de marketing de soluciones de Capgo. Rol: Oración de copia de sitio web. Visto en: página solutions/cordova-to-capacitor-ai.astro. Clave de mensaje `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

, que debe apuntar al resultado de tu comando de compilación. Actualmente, es inexacto. capacitor.config.json __CAPGO_KEEP_0__.config.json carpetaWeb:

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

Podrías probarlo ejecutando los siguientes comandos:

npm run build
npx 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á todos los web code en los lugares adecuados 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 darte cuenta, ya estás listo, así que veamos la aplicación en un dispositivo!

Desarrollar y desplegar aplicaciones nativas

Para desarrollar aplicaciones iOS, necesitas tener Xcode instalado, y para aplicaciones de 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 de aplicaciones móviles nativas, 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, nuevamente, 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

Por ahora, probablemente estás acostumbrado a tener recarga caliente con todos los marcos modernos, y la buena noticia es que puedes tener la misma funcionalidad en un dispositivo móvil con un mínimo esfuerzo!

Habilite el acceso a su aplicación localmente alojada con recarga en vivo en su red teniendo la aplicación Capacitor cargar el contenido desde la URL específica.

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

ipconfig getifaddr en0

En Windows, ejecuta :

ipconfig

Luego busque la dirección IPv4.

Puedemos instruir a Capacitor para cargar 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 el IP y puerto correctos, he utilizado el puerto Angular por defecto en este ejemplo.

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

npx cap copy

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

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 el app se recargará automáticamente y mostrará los cambios!

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

Ten 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 Plugins Capacitor

Vamos a ver 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

No hay nada especial en el plugin de Compartir, pero de todos modos abre el diálogo de compartir nativo. Para esto ahora solo necesitamos importar el paquete y llamar a la función correspondiente desde nuestra aplicación, así que cambiemos el share() src/app/app.component.ts a esto: Como se mencionó anteriormente, al instalar nuevos plugins, debemos realizar una operación de sincronización y luego volver a desplegar la aplicación en nuestro dispositivo. Para hacer esto, ejecute 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'
    });
  }
}

Usando __CAPGO_KEEP_0__ Plugins

npx cap sync

After presionar el botón, puedes ver el diálogo de compartir nativo en acción!

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

Interfaz de usuario que se siente nativa con Capgo de navegación nativa y transiciones

Trabajé durante años con Ionic 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 plugins Capgo en lugar de kits de interfaz de usuario web solo como Konsta UI:

• @capgo/capacitor-navegación-nativa — barra de navegación nativa, barra de pestañas de vidrio líquido en iOS, y un estilo de barra de pestañas empañada en Android. Su router de Angular mantiene el estado de ruta; el plugin posee el navegador nativo.
• @capgo/capacitor-transiciones — transiciones de página estilo Ionic y retroceso de arrastre de iOS en la capa de WebView, sin adoptar la interfaz de usuario de Ionic.

Instale ambos:

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

Configure la navegación nativa con el modo de inserción 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',
  },
});

Renderice una barra de pestañas de vidrio líquido (iOS utiliza la renderización propia del sistema; Android utiliza un fondo de fondo de WebView desenfocado):

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 las páginas de ruteo en cap-router-outlet, cap-pagey cap-contenty llame a setDirection('forward') o setDirection('back') contexto: Fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de mensaje `alternatives_cta_questions`). Página/área: Comparación de alternativas de actualización en vivo de Capacitor. Rol: Párrafo de marketing o legal largo. Visto en: página alternatives.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `alternatives_cta_questions` (Preguntas de CTA de alternativas). | Fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de mensaje `appflow_cta_questions`). Página/área: Copia de marketing de comparación/migración de Appflow. Rol: Párrafo de marketing o legal largo. Visto en: página ionic-appflow.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `appflow_cta_questions` (Preguntas de CTA de Appflow). | Fragmento de texto HTML de una cadena de UI de Capgo más larga (clave de mensaje `capwesome_cta_questions`). Página/área: Página de comparación de Capawesome. Rol: Párrafo de marketing o legal largo. Visto en: página capwesome.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `capwesome_cta_questions` (Preguntas de CTA de Capwesome). | Página/área: Página de servicios de consultoría. Rol: Título de sección o etiqueta. Visto en: página consulting.astro. Preservar términos de producto y marca de Capgo exactamente. Clave de mensaje `consulting_faq_subtitle` (Título de sección de FAQ de consultoría). | Página/área: Copia de marketing de comparación/migración de Appflow. Rol: Etiqueta de UI corta o elemento de navegación. Visto en: página ionic-appflow.astro, página ionic-enterprise-plugins.astro, página soluciones/ionic-enterprise-plugins.astro. Clave de mensaje `appflow_plugins_or` (Appflow Plugins Or).

antes de navegar. No duplique los encabezados o pie de página web cuando la navegación nativa posee esas superficies. Using @capgo/capacitor-native-navigation Usando @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation y contexto: Página/área: Sitio web de marketing de Capgo. Rol: Etiqueta de UI corta o elemento de navegación. Visto en: página trust.astro. Clave de mensaje `and` (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). Ofrece 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";

Utilice utilidades como pt-safe, pb-safe, y px-safe en lugar de esparcirlos 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.

Resolviendo Problemas de Diseño en iOS (Viewport, Á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 viewport en sí mismo no suele solucionar el problema. Trabaja a través de estos controles en orden.

Asegúrate de que la etiqueta meta de viewport se aplique correctamente

En src/index.html, establece la etiqueta meta de viewport en <head>:

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

Gestiona el área segura de iOS desde un solo contenedor raíz

Crear un solo contenedor de aplicación y aplicar allí el relleno del área segura — 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);
}

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

Con @capgo/tailwind-capacitorpuedes expresar el mismo relleno con utilidades como pt-safe pb-safe px-safe en esa sola caja.

Establecer Capacitor en iOS contentInset a never contexto: Página/área: Página de producto de actualizaciones en vivo. Rol: Etiqueta de IU corta o elemento de navegación. Clave de mensaje `live_update_dynamic_label_to` (Etiqueta dinámica de actualización en vivo a).

primero capacitor.config.tsEn contentInsetMode: 'css', prefiere el relleno nativo deshabilitado y deja que CSS (o la navegación nativa)

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-*) Mezclar el relleno automático de contenido de __CAPGO_KEEP_0__ con CSS

es una causa común de doble espaciado.

Encuentra el elemento que está desbordando en realidad 100vwEn Safari Web Inspector, ejecuta: 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,
  }));

cuando sea posible. Muchos problemas de rebosamiento horizontal provienen de w-screen duplicado relleno de zona segura, o un contenedor de ancho fijo — no del etiqueta meta de viewport en sí. w-full Conclusión 100vw / w-screen__CAPGO_KEEP_0__ es una excelente opción para crear aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma sencilla de compartir __CAPGO_KEEP_1__ y mantener una interfaz de usuario consistente.

Y con la adición de

Capacitor is an excellent option for building native applications based on an existing web project, offering a simple way to share code and maintain a consistent UI.

contexto: texto de HTML fragmento de una cadena de Capgo UI más larga (clave de página `submitting_a_pr_to_capgo`). Área/Página: sitio web de marketing de Capgo. Rol: copia de sitio web. Visto en: página contribuyendo.astro. Preservar términos de producto/marca y términos de desarrollador exactamente. Clave de mensaje `submitting_a_pr_to_capgo` (Enviar Un Pr A Capgo). Capgo, Tailwind

Si desea aprender a agregar Capgo a su aplicación de Angular, consulte el próximo artículo:

Siga adelante desde Building Mobile Apps con Angular y Capacitor

Si está utilizando Building Mobile Apps con Angular y Capacitor para planificar el comportamiento de medios y interfaces nativos, conecte con Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo Usando @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 Usando @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.