Desarrollar Aplicaciones Móviles con Angular y Capacitor

En este tutorial, comenzaremos con una nueva aplicación de Angular y transitaremos al reino de la aplicación móvil nativa utilizando __CAPGO_KEEP_0__. Opcionalmente, también puedes agregar app and transition into the native mobile app realm using Capacitor. Optionally, you can also add para una interfaz de usuario móvil mejorada con Tailwind CSS. __CAPGO_KEEP_0__ 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.

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 te 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. Además, puedes utilizar opcionalmente Konsta UI para mejorar tu interfaz de usuario móvil con Tailwind CSS.

Sobre Capacitor

CapacitorJS es un juego de cambio! 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 dispositivo nativo como la cámara a través de un puente de JS.

Con Capacitor, obtienes una aplicación móvil nativa fantástica sin ninguna configuración complicada o curva de aprendizaje empinada. Su API delgado y su funcionalidad estrecha hacen que sea un placer integrarlo en tu proyecto. Confía en mí, te sorprenderá la facilidad con la que puedes lograr una aplicación móvil nativa completamente funcional 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 export de nuestro proyecto. Por lo tanto, incluiremos 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 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 de 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 As una dependencia de desarrollo, y luego configúrela dentro de nuestro proyecto. Durante la configuración, puede pulsar “intro” para aceptar los valores predeterminados para el nombre y el ID de paquete.

En el siguiente paso, 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.

Esas son proyectos nativos reales!

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

Además, debes encontrar un archivo capacitor.config.ts 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 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 build
npx cap sync

El primer comando npm run build construirá simplemente su proyecto Angular y copiará la compilación estática, mientras que la segunda orden 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, la orden de sincronización podría actualizar las plataformas nativas e instalar plugins, por lo que cuando instale un nuevo Capacitor plugins es hora de ejecutar npx cap sync de nuevo.

Sin darse cuenta, ya está hecho, así que veamos la aplicación en un dispositivo!

Crear y desplegar aplicaciones nativas

Para desarrollar aplicaciones iOS, necesita tener Xcode instalado, y para aplicaciones Android, necesita 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 debes 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 has hecho esto 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

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

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

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

ipconfig getifaddr en0

En Windows, ejecuta :

ipconfig

Luego busque la dirección IPv4.

Podemos instruir a Capacitor a 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úrese de utilizar la dirección IP y el puerto correctos, he utilizado el puerto de Angular por defecto en este ejemplo.

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

npx cap copy

El 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.

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!

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.

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 ver cómo usar un Capacitor plugin en acción, que mencionamos antes. Para hacer esto, podemos instalar un plugin bastante simple ejecutando:

npm i @capacitor/share

No hay nada sofisticado sobre el plugin de Compartir, pero lo trae de todos modos 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 mencionamos antes, cuando instalamos nuevos plugins, debemos 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

Agregar Konsta UI

Para usar Konsta UI en tu aplicación Nuxt 3, necesitas tener:

]} ya está instalado y para instalar el paquete:

npm i konsta

Además, necesitas modificar tu tailwind.config.js archivo:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{html,ts}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig extenderá la configuración predeterminada (o la personalizada) de Tailwind CSS con algunas variantes y utilidades adicionales requeridas para Konsta UI.

Ahora necesitamos configurar el componente principal de Aplicación para poder 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>

Pagina de Ejemplo

Ahora que todo está configurado, podemos utilizar componentes de Konsta UI Vue en nuestras páginas de Angular.

For ejemplo, abramos y cambie a lo siguiente: src/app/app.component.html Si el recarga en vivo está fuera de sincronía después de instalar todos los componentes necesarios, intente reiniciar todo. Una vez que lo haya hecho, debería ver una aplicación móvil con una apariencia algo nativa, construida con Angular y __CAPGO_KEEP_0__!

<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>

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with Angular and Capacitor!

konsta-angular

__CAPGO_KEEP_0__ es una excelente opción para construir aplicaciones nativas basadas en un proyecto web existente, ofreciendo una forma simple de compartir __CAPGO_KEEP_1__ y mantener una interfaz de usuario consistente.

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.

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

Siga adelante desde Construyendo aplicaciones móviles con Angular y Capgo

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

Si estás utilizando Desarrollar Aplicaciones Móviles con Angular y Capacitor para planificar el comportamiento y la interfaz de medios nativos, 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.