Creare App Mobili con Angular e Capacitor

In questo tutorial, inizieremo con una nuova Angular 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.

Capacitor allows you to easily convert your Angular web application into a native mobile app without requiring significant modifications or learning a new skill like React Native.

Con pochi semplici passaggi, la maggior parte delle applicazioni Angular può essere trasformata in app mobili.

This tutorial will guide you through the process, starting with a new Angular app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

About Capacitor

CapacitorJS è un vero cambiamento! Puoi incorporarlo facilmente in qualsiasi progetto web e lo utilizzerai per avvolgere la tua applicazione in una view web nativa, generando il progetto Xcode e Android Studio nativo per te. Inoltre, i suoi plugin ti danno accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JS.

With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!

Preparazione dell'app Angular

Inizia creando una nuova app Angular eseguendo il seguente comando:

ng new my-app
cd my-app

Scegli ‘Angular’ quando viene richiesto la versione di Angular.

Per creare un'app mobile nativa, abbiamo bisogno di un export del nostro progetto. Quindi, includiamo uno script semplice nel nostro package.json che possiamo utilizzare per creare e copiare il progetto Angular:

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

Dopo l'esecuzione del comando build, dovresti essere in grado di individuare un nuovo dist folder

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

Questo folder verrà utilizzato da Capacitor in seguito, ma per ora dobbiamo configurarlo correttamente.

Aggiungere __CAPGO_KEEP_0__ all'app Angular di tuo interesse. Per avvolgere qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma dopo di che è semplice come eseguire un comando singolo. sync comando.

In primo luogo, possiamo installare il Capacitor CLI come dipendenza di sviluppo, e quindi configurarlo nel nostro progetto. Durante la configurazione, puoi premere “invio” per accettare i valori predefiniti per nome e ID bundle.

Successivamente, dobbiamo installare il pacchetto di base e i pacchetti pertinenti per le piattaforme iOS e Android.

Infine, possiamo aggiungere le piattaforme, e Capacitor creerà cartelle per ogni piattaforma nella radice del nostro progetto:

# 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

Fino a questo punto, dovresti essere in grado di osservare nuove ios e android cartelle nel tuo progetto Angular.

Sono progetti nativi reali!

To accedere al progetto Android in seguito, dovrai installare Android Studio. Per iOS, hai bisogno di un Mac e dovresti installare Xcode.

Inoltre, dovresti trovare un file capacitor.config.ts che contiene alcune impostazioni fondamentali Capacitor utilizzate durante la sincronizzazione. L'unica cosa a cui dovresti prestare attenzione è il webDircontext:HTML text fragment from a longer Capgo UI string (parent key `solutions_cordova_to_capacitor_ai_step2_body`). Page/area: Capgo solutions marketing page. Role: Website copy sentence. Seen in: page solutions/cordova-to-capacitor-ai.astro. Message key `solutions_cordova_to_capacitor_ai_step2_body` (Solutions Cordova To Capacitor Ai Step2 Body).

che deve puntare al risultato del tuo comando di build. Attualmente, è inesatto. capacitor.config.json __CAPGO_KEEP_0__.config.json webDir:

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

Esegui i seguenti comandi per provare:

npm run build
npx cap sync

Il primo comando npm run build costruirà semplicemente il tuo progetto Angular e copierà la build statica, mentre il secondo comando npx cap sync syncronizzerà tutti i contenuti web code nei posti giusti delle piattaforme native, in modo che possano essere visualizzati nell'app.

Di conseguenza, il comando sync potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi un nuovo Capacitor plugin è il momento di eseguire npx cap sync ancora.

Senza accorgersene, sei ora effettivamente pronto, quindi vediamo l'app sul dispositivo!

Sviluppa e distribuisci app native

Per sviluppare app iOS, hai bisogno di Xcode installato e per le app Android, è necessario avere Android Studio installato. Inoltre, se hai l'intenzione di distribuire la tua app sul negozio di app, devi iscriverti al programma di sviluppatore Apple per iOS e al Google Play Console per Android.

Se sei nuovo nel mondo dello sviluppo mobile nativo, puoi utilizzare i Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Una volta impostati i tuoi progetti nativi, distribuire la tua app su un dispositivo connesso è facile. In Android Studio, basta aspettare che tutto sia pronto, e puoi distribuire la tua app su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, devi impostare il tuo account di firma per distribuire la tua app su un dispositivo reale al posto del simulatore. Se non hai fatto ciò prima, Xcode ti guida attraverso il processo (ma di nuovo, devi essere iscritto al programma di sviluppo). Successivamente, puoi semplicemente premere play per eseguire l'app sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:

Congratulazioni! Hai distribuito con successo la tua app web Angular su un dispositivo mobile. Ecco un esempio:

Ma aspetta, c'è anche un modo più veloce di fare ciò durante lo sviluppo…

Capacitor Live Reload

Da adesso, siete probabilmente abituati a avere il caricamento caldo con tutti i framework moderni, e la buona notizia è che potete avere la stessa funzionalità su un dispositivo mobile con sforzo minimo!

Abilita l'accesso alla tua applicazione ospitata localmente con caricamento caldo su il tuo rete avendo l'app Capacitor caricare il contenuto dalla specifica URL.

Il primo passo è determinare l'indirizzo IP locale. Se stai utilizzando un Mac, puoi trovare questo eseguendo il seguente comando nel terminale:

ipconfig getifaddr en0

Su Windows, esegui :

ipconfig

Poi cerca l'indirizzo IPv4.

Potremmo istruire Capacitor a caricare l'app direttamente dal server aggiungendo un'altra voce al nostro capacitor.config.ts file:

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;

Assicurati di utilizzare l'indirizzo IP e il porto corretti, ho utilizzato il porto predefinito di Angular in questo esempio.

Ora, possiamo applicare queste modifiche copiandole nel nostro progetto nativo:

npx cap copy

La copy comando è simile a sync, ma copierà solo le modifiche apportate al cartello web e la configurazione, senza aggiornare il progetto nativo.

Ora puoi distribuire nuovamente il tuo app tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nel tuo app Angular l'app si ricaricherà e mostrerà le modifiche!

Tenete presente che se installate nuovi plugin come la camera, è comunque necessario un rebuild del progetto nativo. Ciò è dovuto al fatto che i file nativi sono cambiati, e non è possibile farlo in modo dinamico.

Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco code sopra mostra il port di default di Angular per fini dimostrativi.

Utilizzo dei Plugin Capacitor

Vediamo come utilizzare un plugin Capacitor in azione, di cui abbiamo parlato in precedenza. Per farlo, possiamo installare un plugin abbastanza semplice eseguendo:

npm i @capacitor/share

Non c'è nulla di particolarmente complesso nel plugin di condivisionema comunque apre il dialogo di condivisione nativo! Per questo, adesso abbiamo bisogno solo di importare il pacchetto e chiamare la funzione corrispondente dal nostro app, quindi cambiamo il share() src/app/app.component.ts a questo: Come menzionato in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ri-deployare l'app sul nostro dispositivo. Per farlo, esegui il seguente 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'
    });
  }
}

As mentioned earlier, when installing new plugins, we need to perform a sync operation and then redeploy the app to our device. To do this, run the following command:

npx cap sync

Dopo aver premuto il pulsante, potrai assistere alla bella finestra di condivisione nativa in azione!

Successivamente, puoi rendere l'app più nativa su iOS e Android con Capgo di navigazione e transizioni, e risolvere i problemi di layout comuni di iOS che causano overflow orizzontale o aree sicure tagliate.

Interfaccia utente con Capgo di navigazione e transizioni native

Lavoro da anni con Ionic per costruire applicazioni cross-platform, ma integrarla con Angular è un processo complicato e raramente vale la pena quando già disponi di Tailwind CSS.

Per un aspetto mobile nativo in un'app Angular + Capacitor, utilizza i plugin Capgo al posto delle kit UI web come Konsta UI:

• @capgo/capacitor-navigazione-nativa — barra di navigazione nativa, Liquid Glass bar delle schede su iOS e stile delle schede sfocato su Android. Il router Angular mantiene lo stato delle rotte; il plugin gestisce il chrome nativo.
• @capgo/capacitor-transizioni — transizioni di pagina dello stile Ionic e swipe-back di iOS nell' layer WebView, senza adottare l'interfaccia utente di Ionic.

Installa entrambi:

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

Configura la navigazione nativa con il modello CSS inset per far rispettare le barre native al contenuto web:

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

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

Rendi una barra di tab di vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo di WebView sfocato):

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

Avvolgi le pagine di destinazione in cap-router-outlet, cap-page, e cap-content, e chiama setDirection('forward') o setDirection('back') prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa possiede quelle superfici.

Vedi le guide complete: Utilizza @capgo/capacitor-navigazione-nativa e Utilizza @capgo/capacitor-transizioni.

Aree sicure con Tailwind

Per aree sicure del dispositivo in Tailwind CSS, utilizza @capgo/tailwind-capacitor (pubblicato come tailwind-capacitor su npm). Fornisce safe-areas utilità e altri plugin Tailwind compatibili con Capacitor:

bun add -D tailwind-capacitor

In src/styles.css:

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

Utilizza utilità come pt-safe, pb-safe, e px-safe al posto di aggiungerle env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Angular, apri una PR su GitHub.

Risolvere Problemi di Layout iOS (Viewport, Area di Sicurezza e Scoramento Orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere o modificare il tag viewport da solo non risolve di solito il problema. Esegui questi controlli in ordine. overflow-x: hidden Assicurati di aver applicato correttamente il tag meta viewport

In

, impostare il tag meta viewport in src/index.htmlGestisci l'area di sicurezza di iOS da un wrapper radice solo <head>:

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

Creare un unico contenitore dell'app e applicare il padding dell'area di sicurezza lì — non in componenti nidificati multipli:

Avvolgi tutto il contenuto della pagina all'interno di

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

La duplicazione del padding dell'area di sicurezza nei titoli, nei modali e nei contenitori di layout spesso fa sembrare il UI tagliato o troppo grande. .app-shellCon

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitoresprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quella singola shell.

Imposta Capacitor iOS contentInset a never context: Pagina/Area: Pagina prodotto di aggiornamenti in tempo reale. Ruolo: Etichetta di navigazione breve o elemento UI.

primo capacitor.config.tsIn contentInsetMode: 'css', preferisci l'inserimento nativo disabilitato e lascia che CSS (o la navigazione 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-*) Mischia l'inserimento automatico del contenuto di __CAPGO_KEEP_0__ con CSS

è una causa comune di doppia spaziatura.

Trova l'elemento che sta veramente sovrascrivendo il contenuto. 100vwTailwind w-screenuna larghezza di pixel fissi, o una grande min-width.

In Safari Web Inspector, esegui:

[...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,
  }));

Con Tailwind, sostituisci w-screen con w-full quando possibile. Molti problemi di sovrapposizione orizzontale derivano da 100vw / w-screenduplicati padding di area sicura, o un contenitore di larghezza fissata — non dal tag meta viewport stesso.

Conclusioni

Capacitor è un'ottima opzione per creare applicazioni native basate su un progetto web esistente, offrendo un modo semplice per condividere code e mantenere un'interfaccia utente coerente.

E con l'aggiunta di Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, assicurando che i tuoi utenti abbiano sempre accesso alle ultime funzionalità e correzioni di bug.

Se desideri imparare a aggiungere Capgo alla tua app Angular, consulta l'articolo successivo:

Continua da Building Mobile Apps con Angular e Capacitor

Se stai utilizzando Building Mobile Apps con Angular e Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Utilizzare @capgo/capacitor-live-attività per la capacità nativa in Utilizzare @capgo/capacitor-live-attività Utilizzare @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività Utilizzare @capgo/capacitor-video-player per la capacità nativa in Utilizzare @capgo/capacitor-video-player Utilizzare @capgo/capacitor-video-player per i dettagli di implementazione in @capgo/capacitor-video-player, e Utilizzando @capgo/capacitor-native-navigation per la capacità nativa in Utilizzando @capgo/capacitor-native-navigation.