Building Mobile Apps with Angular and 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.

Questa guida ti guiderà attraverso il processo, iniziando con una nuova app Angular e poi incorporando Capacitor per entrare nel regno delle app mobili native. Puoi anche utilizzare Capgo Native Navigation, Transizioni e tailwind-capacitor per aree sicure.

Sui 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 forniscono accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JS.

Con Capacitor, ottieni una fantastica app mobile nativa senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API e funzionalità streamlinata rendono facile integrarla nel tuo progetto. Sono sicuro che sarai impressionato dalla facilità con cui puoi ottenere un'app mobile nativa completa con Capacitor!

Preparazione dell'App Angular

Per creare una nuova app Angular, esegui il seguente comando:

ng new my-app
cd my-app

Scegli 'Angular' quando ti viene chiesto 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 costruire e copiare il progetto Angular:

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

Dopo l'esecuzione della richiesta buildcartella fresca nella radice del tuo progetto. dist cartella nella radice del tuo progetto.

Questo cartella verrà utilizzata in futuro da Capacitor, ma per ora dobbiamo configurarla correttamente.

Aggiungere Capacitor alla tua App Angular

To package any web app into a native mobile container, we must follow a few initial steps, but afterward it’s as simple as executing a single sync command.

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

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

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

Da questo punto dovresti essere in grado di osservare nuovi ios e android cartelle nel tuo progetto Angular.

Quelli sono progetti nativi reali!

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

Inoltre, dovresti trovare un capacitor.config.ts il file del tuo progetto, che contiene alcune impostazioni fondamentali Capacitor utilizzate durante la sincronizzazione. L'unica cosa a cui devi prestare attenzione è il webDirche deve puntare al risultato del tuo comando di build. Attualmente, è inesatto.

Per correggere questo, apri il capacitor.config.json file e aggiorna il webDir:

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

Prova a farlo eseguendo i seguenti comandi:

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 Sincronizzerà tutte le code web nei posti giusti delle piattaforme native affinché possano essere visualizzate nell'app.

Inoltre, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare plugin, quindi quando installi un nuovo Capacitor plugin è ora il momento di ripartire npx cap sync again.

Ora, senza accorgersi, si è completato il processo, quindi vediamo l'app sul dispositivo!

Per sviluppare app iOS, hai bisogno di avere

Per sviluppare app iOS, è necessario avere Xcode installato, e per le app Android, è necessario avere Android Studio Se sei nuovo nello sviluppo di app mobili native, puoi utilizzare il __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ per aprire facilmente entrambi i progetti nativi:

Se sei nuovo allo sviluppo mobile nativo, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi.

npx cap open ios
npx cap open android

Once you’ve set up your native projects, deploying your app to a connected device is easy. In Android Studio, you just need to wait for everything to be ready, and you can deploy your app to a connected device without changing any settings. Here’s an example:

In Xcode, è necessario configurare il proprio account di firma per distribuire l'applicazione su un dispositivo reale anziché solo sul simulatore. Se non si è mai fatto prima, Xcode guida attraverso il processo (ma di nuovo, è necessario essere iscritti al Programma per sviluppatori). Successivamente, si può semplicemente premere play per eseguire l'applicazione sul dispositivo collegato, che si può selezionare in alto. Ecco un esempio:

Congratulazioni! Ha avuto successo nel distribuire la sua applicazione web Angular su un dispositivo mobile. Ecco un esempio:

Ma aspetta, c'è anche un modo più veloce per farlo durante lo sviluppo…

Capacitor Live Reload

Da adesso, è probabile che sia abituato a avere il reload caldo con tutti i framework moderni, e la buona notizia è che può avere la stessa funzionalità su un dispositivo mobile con minimo sforzo!

Abilita l'accesso alla sua applicazione ospitata localmente con live reload su il tuo rete avendo l'app Capacitor caricare il contenuto dalla specifica URL.

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

ipconfig getifaddr en0

Su Windows, esegui:

ipconfig

Poi cerca l'indirizzo IPv4.

Possiamo 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 port correttiHo utilizzato il porto predefinito di Angular in questo esempio.

Ora possiamo applicare queste modifiche copiandole nel nostro progetto nativo.

npx cap copy

Il copy comando è simile a sync, ma funzione sarà solo copiare le modifiche apportate al folder web e la configurazione, senza aggiornare il progetto nativo.

Ora puoi distribuire la tua app un'altra volta tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nella tua app Angular, l'app si ricaricherà automaticamente e mostrerà le modifiche!

Tieni presente che se installi nuovi plugin come la fotocamera, è ancora necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati, e non è possibile farlo in modo automatico.

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

Utilizzo dei Plugin Capacitor

Ecco un esempio di 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 in questo Condividi pluginMa porta comunque in evidenza il dialogo di condivisione nativo! Per questo, adesso basta importare il pacchetto e chiamare il metodo corrispondente. share() funzione dalla nostra app, quindi cambiamo il src/app/app.component.ts a questo:

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 splendida finestra di condivisione nativa in azione!

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Interfaccia utente con un aspetto nativo grazie a Capgo Navigazione e Transizioni native

Ho lavorato per anni con Ionic per costruire applicazioni cross-platform, ma integrarla con Angular è un po' una fatica e non vale la pena quando già si dispone di Tailwind CSS.

Per un aspetto nativo su mobile in un'app Angular + Capacitor utilizzare i plugin Capgo al posto di kit UI web-only come Konsta UI:

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

Installare entrambi:

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

Configurare la navigazione nativa con modalità CSS inset affinché il contenuto web rispetti le barre native:

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

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

Visualizza una barra dei 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']);
  }
}

Avvolgere le pagine di rotta in cap-router-outlet, cap-pagee cap-contente chiamare setDirection('forward') o setDirection('back') Prima di navigare. Non duplicare i titoli o i piedi di pagina web quando la navigazione nativa gestisce questi elementi.

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

Aree sicure con Tailwind

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

bun add -D tailwind-capacitor

Invece di src/styles.css:

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

Utilizza strumenti come pt-safe, pb-safe, e px-safe al posto di aggiungerli 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 più overflow-x: hidden o regolare il tag viewport da solo non risolve di solito il problema. Esegui questi controlli in ordine.

Assicurati di aver applicato correttamente il tag meta viewport

Invece di src/index.html, imposta il tag meta viewport in <head>:

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

Tratta l'area sicura di iOS da un unico wrapper radice

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

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

Avvolgere tutto il contenuto della pagina dentro .app-shellIl sovrapposizionamento di padding di area sicura in intestazioni, modali e wrapper di layout può rendere l'interfaccia utente appiattita o troppo grande.

Con @capgo/tailwind-capacitorpuoi esprimere lo stesso padding con utilità come pt-safe pb-safe px-safe su quel singolo contenitore.

Imposta Capacitor iOS contentInset su never first

primo capacitor.config.tspreferare l'inserzione nativa disabilitata e lasciare che CSS (o la navigazione nativa) contentInsetMode: 'css'Possiedere l'area di sicurezza:

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

Mettere insieme l'inserimento automatico di contenuto di Capacitor con CSS env(safe-area-inset-*) è una causa comune di doppia spaziatura.

Trova l'elemento sovrapposto reale

Il solito colpevole è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza fissa in pixel, o una larghezza 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 sovrascrittura orizzontale derivano da 100vw / w-screen, duplicato spazio di sicurezza o un contenitore di larghezza fissata — non dal tag meta viewport stesso.

Conclusion

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

E con l'aggiunta di CapgoE' ancora più facile aggiornare in tempo reale il tuo app, garantendo 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 con Building Mobile Apps con Angular e Capacitor

Se stai utilizzando Building Mobile Apps with Angular and Capacitor per pianificare il comportamento dei media e dell'interfaccia nativi, connettilo con Usando @capgo/capacitor-attività in tempo reale per la capacità nativa in Utilizzo di @capgo/capacitor-attività-in-vivo @capgo/capacitor-attività-in-vivo per il dettaglio di implementazione in @capgo/capacitor-attività-in-vivo Utilizzo di @capgo/capacitor-lettore-di-video per la capacità nativa in Utilizzo di @capgo/capacitor-lettore-di-video @capgo/capacitor-lettore-di-video per il dettaglio di implementazione in @capgo/capacitor-lettore-di-video, e Utilizzo di @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzo di @capgo/capacitor-navigazione-nativa.