Creare App Mobili con Angular e Capacitor

In questo tutorial, inizieremo con una nuova Angular In questo tutorial, inizieremo con una nuova app Angular e passeremo alla sfera dell'app mobile nativa utilizzando Capacitor. Puoi anche aggiungere la navigazione e le transizioni native con Capgo e utilizzare tailwind-capacitor per aree sicure.

Capacitor consente di convertire facilmente la tua applicazione web Angular in un'app mobile nativa senza richiedere modifiche significative o l'apprendimento di una nuova tecnologia come React Native.

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

Questa guida vi guiderà attraverso il processo, iniziando con una nuova app Angular e poi incorporando Capacitor per passare nel regno delle app mobili native. Potete anche utilizzare Capgo per la navigazione nativa, le transizioni e tailwind-capacitor per aree sicure.

Sui Capacitor

CapacitorJS è un vero cambiamento! Potete incorporarlo facilmente in qualsiasi progetto web e renderà la vostra applicazione in una view web nativa, generando il progetto Xcode e Android Studio nativo per voi. Inoltre, i suoi plugin forniscono accesso alle funzionalità del dispositivo nativo come la fotocamera tramite un ponte JS.

Con Capacitor, otterrete una fantastica app mobile nativa senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API e funzionalità streamlinata rendono facile integrarla nel vostro progetto. Sono sicuro che vi sorprenderà la facilità con cui potete ottenere un'app mobile nativa completa con Capacitor!

Preparazione dell'app Angular

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

ng new my-app
cd my-app

Scegliete “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 può essere utilizzato per creare e copiare il progetto Angular:

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

Dopo l'esecuzione della __CAPGO_KEEP_0__ buildpotresti notare un nuovo dist cartella nella radice del tuo progetto.

Questa cartella verrà utilizzata da Capacitor in seguito, ma per ora dobbiamo configurarla correttamente.

Aggiungere Capacitor al tuo App Angular

Per pacchettizzare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma in seguito è semplice come eseguire un singolo sync comando.

Innanzitutto, possiamo installare il Capacitor CLI come dipendenza di sviluppo e poi 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

Da questo punto in poi, dovresti essere in grado di osservare nuove ios e context:Pagina/area: Sito web di marketing Capgo. Ruolo: Etichetta di navigazione breve o elemento UI. Visto in: pagina trust.astro. Chiave messaggio `e` (E). android

cartelle nel tuo progetto Angular.

Sono progetti nativi reali! Per accedere al progetto Android in seguito, devi installareAndroid Studio . Per iOS, hai bisogno di un Mac e dovresti installare.

Xcode capacitor.config.ts file del tuo progetto, che contiene alcune impostazioni fondamentali Capacitor utilizzate durante la sincronizzazione. L'unica cosa di cui devi preoccuparti è il webDirche deve puntare al risultato del 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"
}

Puoi provare 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 web code nei posti giusti delle piattaforme native, in modo che possano essere visualizzate nell'app.

Allo stesso tempo, il comando di sincronizzazione potrebbe aggiornare le piattaforme native e installare i plugin, quindi quando installi un nuovo Capacitor plugin è il momento di eseguire npx cap sync nuovamente.

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

Sviluppa e distribuisci app native

Per sviluppare app iOS, hai bisogno di avere Xcode installato, e per le app Android, hai bisogno di 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 allo sviluppo di app mobili native, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti native:

npx cap open ios
npx cap open android

Una volta che hai configurato i tuoi progetti nativi, distribuire l'applicazione su un dispositivo connesso è facile. In Android Studio, basta aspettare che tutto sia pronto e potrai distribuire l'applicazione su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

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

Congratulazioni! Hai distribuito con successo la tua 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, sei probabilmente abituato a avere il reload caldo con tutti i framework moderni, e la buona notizia è che puoi avere la stessa funzionalità su un dispositivo mobile con sforzo minimo!

Abilita l'accesso alla tua applicazione ospitata localmente con live reload On 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 scoprire questo eseguendo il seguente comando nella finestra del terminale:

ipconfig getifaddr en0

On Windows, esegui :

ipconfig

Poi cerca l'indirizzo IPv4.

Posiamo 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 la porta corretti, ho utilizzato il porto predefinito di Angular in questo esempio.

Ora, possiamo applicare questi cambiamenti copiandoli nel nostro progetto nativo:

npx cap copy

La copy il comando è simile a syncma copierà solo copierà solo le modifiche apportate al cartello web e alla 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à 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 possono essere modificati in tempo reale.

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

Utilizzo dei plugin Capacitor

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

npm i @capacitor/share

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

Dopo aver premuto il pulsante, potrai assistere al bellissimo dialogo di condivisione nativo in azione!

npx cap sync

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

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

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic Capacitor per costruire applicazioni cross-platform, ma integrarla con Angular è un po' artigianale e raramente vale la pena quando già ne hai Tailwind CSS.

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

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

Installa entrambi:

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

Configura la navigazione nativa con modalità CSS inset per far rispettare i barre web al chrome nativo:

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

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

Rendi una barra delle schede 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 rotta in cap-router-outlet, cap-page, e cap-contentEcco e chiama setDirection('forward') o setDirection('back') Ecco alcune delle alternative per il live-update di Capacitor: chiamare

Ecco alcune delle alternative per Appflow: chiamare Using @capgo/capacitor-native-navigation Ecco alcune delle alternative per le nostre consulenze: chiamare Using @capgo/capacitor-transitions.

Vedi i guide complete:

Usare @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigazione nativa @capgo/tailwind-capacitor Usare @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transizioni tailwind-capacitor Zone sicure con Tailwind CSS sono indicate da @npm/tailwind-__CAPGO_KEEP_1__ (pubblicato su npm). Fornisce safe-areas strumenti 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 strumenti come pt-safe, pb-safe, e px-safe invece di spruzzare env(safe-area-inset-*) manualmente. Il progetto è attivamente sviluppato — se qualcosa manca per la tua configurazione Angular, apri un PR su GitHub.

Risolvere problemi di layout iOS (Viewport, Area sicura, e sovrapposizione orizzontale)

Se il contenuto sembra essere tagliato, spostato o scorrevole orizzontalmente su iOS, aggiungere più overflow-x: hidden o regolare il tag meta viewport da solo non risolve di solito il problema. Passa attraverso questi controlli in ordine.

Assicurati che il tag meta viewport sia applicato correttamente

In src/index.htmlimpostare la meta tag di viewport in <head>:

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

gestire l'area sicura di iOS da un wrapper radice solo

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 tutta il contenuto della pagina dentro .app-shellDuplicato il padding dell'area sicura nei titoli, nei modali e nei wrapper di layout spesso fa sembrare l'interfaccia utente tagliata o troppo grande.

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

Impostare Capacitor iOS contentInset su never context: Pagina/area: Pagina di aggiornamenti in tempo reale. Ruolo: Etichetta di UI breve o elemento di navigazione. Chiave di messaggio `live_update_dynamic_label_to` (Etichetta di Aggiornamento Dinamico Live To).

Insieme a capacitor.config.ts, preferisci l'ingombro nativo disabilitato e lascia che CSS (o la navigazione nativa ' contentInsetMode: 'css') gestisca l'area sicura:

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

Mischia l'ingombro automatico di contenuto di Capacitor con CSS env(safe-area-inset-*) L'aggiunta di padding è una causa comune di doppia interlinea.

Cerca l'elemento che sta effondando realmente

L'elemento colpevole è spesso un elemento che utilizza 100vw, Tailwind w-screen, un'altezza fissa in pixel, o un 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-screenun padding di area sicura duplicato, o da un contenitore di larghezza fissata — non dal tag meta viewport stesso.

Conclusioni

Capacitor è un'ottima scelta 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 Capgocontesto: frammento di testo HTML da una stringa di Capgo UI più lunga (chiave di messaggio `submitting_a_pr_to_capgo`). Pagina/area: Sito web di marketing di Capgo. Ruolo: Copia del sito web. Visto in: pagina contributing.astro. Preservare esattamente i termini del prodotto/marchio e del developer di Capgo. Chiave di messaggio `submitting_a_pr_to_capgo` (Invio di una PR a Capgo).

If you would like to learn how to add Capgo to your Angular app, take a look at the next article:

Se desiderate imparare a aggiungere Capacitor alla vostra app Angular, prendete un'occhiata all'articolo successivo:

Continuate da Building Mobile Apps con Angular e __CAPGO_KEEP_0__ Building Mobile Apps with Angular and Capacitor Building Mobile Apps con Angular e __CAPGO_KEEP_0__ Utilizzando @capgo/capacitor-live-attività per la capacità nativa in Utilizzando @capgo/capacitor-live-attività @capgo/capacitor-live-attività per il dettaglio di implementazione in @capgo/capacitor-live-attività Utilizzando @capgo/capacitor-player-video per la capacità nativa in Utilizzando @capgo/capacitor-player-video @capgo/capacitor-player-video per il dettaglio di implementazione in @capgo/capacitor-player-video, e Utilizzando @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzando @capgo/capacitor-navigazione-nativa.