Creare App Mobili con Angular e Capacitor

In questo tutorial, ci occuperemo di 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 solo pochi 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 per te. Inoltre, i suoi plugin ti danno accesso alle funzionalità del dispositivo nativo come la camera 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

Per creare una nuova app Angular, esegui 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 esportazione del nostro progetto. Quindi, includiamo uno script semplice nel nostro package.json che può essere utilizzato per costruire 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 cartella alla radice del tuo progetto.

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

Aggiungere Capacitor alla tua app Angular

To pacchiare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma in seguito è semplice come eseguire un solo sync comando.

Per prima cosa, 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.

Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:

# 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

__CAPGO_KEEP_0__ creerà cartelle per ogni piattaforma nella radice del nostro progetto: Al punto in cui si trova, dovresti essere in grado di osservare nuove ios e cartelle per Android nel tuo progetto Angular.

Sono progetti nativi reali!

Per accedere al progetto Android in seguito, dovrai installare Studio AndroidPer 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 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 eseguire i seguenti comandi:

npm run build
npx cap sync

La prima riga npm run build costruirà il tuo progetto Angular e copierà la build statica, mentre la seconda riga npx cap sync synccherà tutti i contenuti web code nei posti giusti delle piattaforme native, in modo che possano essere visualizzati nell'app.

Inoltre, 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 nuovamente.

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

Costruisci e distribuisci app native

To 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 Apple Developer Program per iOS e al Google Play Console per Android.

Se sei nuovo nello sviluppo di app mobili native, puoi utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Dopo aver configurato 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 configurare il tuo account di firma per distribuire la tua app 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 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:

Buttatevi, c'è anche un modo più veloce per farlo 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 il caricamento caldo su il tuo rete avendo l'Capacitor app caricare il contenuto dalla specifica URL.

Il primo passo è capire il tuo indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire 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 ai nostri 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 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 cartella web e alla configurazione, senza aggiornare il progetto nativo. Puoi ora distribuire nuovamente il tuo app tramite Android Studio o Xcode. Dopo di che, se cambi qualcosa nell'app di Angular,

l'app si ricaricherà automaticamente Ora possiamo applicare queste modifiche copiandole nel nostro progetto nativo: e mostrare le modifiche!

Tenere presente che se installi nuovi plugin come la fotocamera, è comunque necessario ricostruire il tuo progetto nativo. Ciò è dovuto al fatto che i file nativi sono stati modificati, e ciò non può essere fatto in tempo reale.

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

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

npm i @capacitor/share

Non c'è nulla di particolarmente complesso nel plugin di condivisione, ma comunque apre il dialogo di condivisione nativo! Per questo ora basta importare il pacchetto e chiamare la funzione corrispondente dal nostro app, quindi cambiamo il share() src/app/app.component.ts a questo: funzione dal nostro app, quindi cambiamo il

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 menzionato in precedenza, quando si installano nuovi plugin, è necessario eseguire un'operazione di sincronizzazione e poi ripubblicare l'app sul nostro dispositivo. Per farlo, esegui il seguente comando:

npx cap sync

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

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

Interfaccia utente con un aspetto nativo con Capgo 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à si dispone di Tailwind CSS.

Per un aspetto mobile nativo in un'app Angular + Capacitor, utilizza i plugin Capgo al posto delle 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 sfocato su Android. Lo stato della route del router Angular viene mantenuto; il plugin possiede il chrome nativo.
• @capgo/capacitor-transitions — Transizioni di pagina stile Ionic e swipe-back di iOS nell layer WebView, senza adottare l'interfaccia utente di Ionic.

Installate sia:

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

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

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

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

Rendere una barra dei tab di vetro liquido (iOS utilizza la rendering di sistema; Android utilizza un sfondo 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 destinazione in cap-router-outlet, cap-pagee cap-contente chiamare setDirection('forward') o setDirection('back') context: HTML testo frammento da una stringa UI Capgo più lunga (chiave genitore `alternatives_cta_questions`). Pagina/area: pagina di confronto delle alternative di Capacitor per l'aggiornamento in tempo reale. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina alternatives.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `alternatives_cta_questions` (Domande per l'azione di alternativa). | Testo frammento HTML da una stringa UI Capgo più lunga (chiave genitore `appflow_cta_questions`). Pagina/area: copia di marketing di confronto/migrazione per Appflow. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina ionic-appflow.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `appflow_cta_questions` (Domande per l'azione di Appflow). | Testo frammento HTML da una stringa UI Capgo più lunga (chiave genitore `capwesome_cta_questions`). Pagina/area: pagina di confronto di Capawesome. Ruolo: lungo paragrafo di marketing o legale. Visto in: pagina capwesome.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `capwesome_cta_questions` (Domande per l'azione di Capwesome). | Pagina/area: pagina di servizi di consulenza. Ruolo: sottotitolo o didascalia di sezione. Visto in: pagina consulting.astro. Preservare i termini di prodotto e marchio Capgo e i termini di sviluppatore esattamente. Chiave del messaggio `consulting_faq_subtitle` (Sottotitolo FAQ di consulenza). | Pagina/area: copia di marketing di confronto/migrazione per Appflow. Ruolo: breve etichetta UI o elemento di navigazione. Visto in: pagina ionic-appflow.astro, pagina ionic-enterprise-plugins.astro, pagina soluzioni/ionic-enterprise-plugins.astro. Chiave del messaggio `appflow_plugins_or` (Appflow Plugins o).

prima di navigare. Non duplicare i capisaldi o i piedi di pagina web quando la navigazione nativa possiede quelle superfici. Using @capgo/capacitor-native-navigation Usare @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-navigazione nativa Utilizzando @capgo/capacitor-transizioni.

Zone sicure con Tailwind

Per le aree sicure del dispositivo in Tailwind CSS, utilizzare @capgo/tailwind-capacitor Pubblicato su 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, aprire una PR su GitHub.

Risoluzione dei problemi di layout iOS (Viewport, Area di sicurezza, e sovrapposizione orizzontale)

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

Assicurati che la tag meta viewport sia applicata correttamente

In src/index.html, impostare la tag meta viewport in <head>:

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

Gestisci l'area di sicurezza di iOS da un solo wrapper radice

Creare un unico contenitore dell'applicazione e applicare il padding dell'area di sicurezza lì — non in 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);
}

Avvolgi tutto il contenuto della pagina all'interno di .app-shellLa duplicazione del padding dell'area di sicurezza nei titoli, nei modali e nei wrapper di layout spesso fa sembrare il UI tagliato o troppo grande.

Con @capgo/tailwind-capacitor, puoi esprimere la stessa spaziatura con utilità come pt-safe pb-safe px-safe su quella singola shell.

Imposta Capacitor iOS contentInset su never context: Pagina/Area: Pagina prodotto per aggiornamenti in tempo reale. Ruolo: Etichetta UI breve o elemento di navigazione. Chiave messaggio `live_update_dynamic_label_to` (Etichetta dinamica di aggiornamento in tempo reale To).

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-*) Mescolare __CAPGO_KEEP_0__’s automatico contenuto insetto con CSS

spaziatura è una causa comune di doppia spaziatura.

Il solito colpevole è un elemento che utilizza 100vw, Tailwind w-screen, una larghezza in pixel fissata, o un contenitore molto ampio 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 overflow orizzontale derivano da 100vw / w-screen, padding di area sicura duplicato, 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 applicazione Angular, consulta l'articolo successivo:

Continua da Costruire applicazioni mobili con Angular e Capacitor

Se stai utilizzando Costruire applicazioni mobili con Angular e Capacitor per pianificare il comportamento di media e interfaccia nativa, connettilo con Utilizzare @capgo/capacitor-attività-in-vivo per la capacità nativa in Utilizzare @capgo/capacitor-attività-in-vivo @capgo/capacitor-attività-in-vivo per il dettaglio di implementazione in @capgo/capacitor-attività-in-vivo Utilizzare @capgo/capacitor-lettore-video per la capacità nativa in Utilizzare @capgo/capacitor-lettore-video video player @capgo/capacitor per i dettagli di implementazione in video player @capgo/capacitor Utilizzo di @capgo/capacitor-navigazione nativa per la capacità nativa in Utilizzo di @capgo/capacitor-navigazione nativa