Anunciando el Esquema del Capacitor ngAdd

Hoy, en Ionic estamos felices de compartir el lanzamiento de Angular Schematics for Capacitor. Echemos un vistazo a lo que es el Condensador y cómo añadirlo a un proyecto Angular.

Vista general de los condensadores

En primer lugar, repasemos qué es el condensador y cómo se relaciona con otros proyectos de plataformas cruzadas que hay por ahí.
De un vistazo, Capacitor sigue muchas de las mismas ideas de Apache Cordova.

Hay una capa web que renderiza la aplicación y una capa nativa que escucha las llamadas a las APIs nativas. Dentro de esas capas hay muchas decisiones técnicas que hacen que la experiencia general del desarrollador y del usuario sea mucho más fluida.

  • API unificado que facilita el desarrollo multiplataforma
  • Las Plataformas Nativas no son objetivos de distribución, sino que están comprometidas con el control de versiones y pueden ser editadas por el desarrollador.
  • Las modernas herramientas y bibliotecas de construcción nativa, como Cocoapods, Android Libraries, Xcode y Android Studio, proporcionan más visibilidad de los cambios en los proyectos nativos y una mejor mantenibilidad de las aplicaciones.
  • Utiliza npm y las modernas herramientas JS para simplificar la adición de plugins de núcleo y la creación de nuevos.

Estos principios traen lo mejor del desarrollo de la web y del desarrollo nativo con poca o ninguna fricción para los desarrolladores.

Condensador e integración angular

El condensador en sí mismo está compuesto por 2 paquetes, la funcionalidad del núcleo (@condensador/núcleo) y el CLI (@condensador/cli). Para añadir el condensador a tu proyecto, empecemos con una simple aplicación angular de la CLI angular.

ng new capApp --routing --style css
cd capApp

Con la aplicación creada, añadamos Capacitor a nuestro proyecto.

ng add @capacitor/angular

Con esto, los desarrolladores pueden agregar Capacitor a su proyecto con facilidad.

Cuando el esquema termine de ejecutarse, los desarrolladores deberán construir nuestra aplicación, y ejecutar npx cap add <ios,android> o yarn cap add <ios, android ]; ¡y se crearán nuestros proyectos Xcode o Android Studio!

ng ejecutar capApp:build
npx cap add ios

Tirando hacia atrás la cortina

Entonces, ¿qué está haciendo realmente el esquema entre bastidores?

  • Instalación de las dependencias de los condensadores

Primero, añade las dependencias de los capacitores al paquete.json: Núcleo y CLI.

  • Instala dependencias

Esto sólo hará una rápida instalación de npm (o hilo) y luego se asegurará de que tenemos los paquetes de Núcleo y CLI para el Condensador.

  • Ejecute el script de inicio del Capacitor CLI y cree el andamiaje necesario.

Para asegurarse de que el proyecto Capacitor entiende su proyecto Angular, el esquema infiere muchos datos basados en su angular.json. Leerá el nombre de tu aplicación y lo usará al crear los proyectos iOS y Android, así como leerá la carpeta de construcción para saber dónde copiar tu código web al preparar los proyectos nativos. Esto significa que tu proyecto Capacitor se sentirá como una extensión natural de tu proyecto Angular.
Una vez añadido, hacemos una compilación de nuestra aplicación, y la desplegamos en iOS, Android, web o Electron. Para construir en iOS o Android, necesitarás tener instalados los SDKs y herramientas nativas. Para obtener una guía detallada sobre esto, consulta esta guía para iOS y esta guía para Android

Categorías Blog