Creare App Mobili con Angular e Capacitor

In questo tutorial, inizieremo con una nuova Angular app e passeremo nel regno dell'app mobile nativa utilizzando Capacitor. Opzionalmente, puoi anche aggiungere Konsta UI per un'interfaccia utente mobile migliorata con Tailwind CSS.

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

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

Questo tutorial ti guiderà attraverso il processo, iniziando con una nuova app Angular e poi incorporando Capacitor per passare nel regno delle app mobili native. Inoltre, puoi utilizzare optionalmente Konsta UI per migliorare la tua UI mobile con Tailwind CSS.

Su 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à di dispositivo nativo come la fotocamera tramite un ponte JS.

With Capacitor, ottenete un'app mobile nativa fantastica senza alcuna configurazione complessa o curva di apprendimento ripida. La sua API sottile e la sua funzionalità ottimizzata rendono facile integrarla nel tuo progetto. Sono sicuro che sarai impressionato dalla facilità con cui potrai ottenere un'app mobile nativa funzionale 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 del comando build, dovresti essere in grado di notare un nuovo dist folder

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

Aggiungere Capacitor al tuo App Angular

Per pacchettare qualsiasi app web in un contenitore mobile nativo, dobbiamo seguire alcuni passaggi iniziali, ma in seguito è semplice come eseguire un solo 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 alla 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 le cartelle del tuo progetto Angular.

Sono progetti nativi reali!

Per accedere al progetto Android in seguito, è necessario installare Android Studio. Per iOS, è necessario 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 è webDir, che deve puntare al risultato del comando di build. Attualmente, è inesatto.

Per risolvere questo problema, apri il file capacitor.config.json e aggiorna la proprietà webDir:

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

Puoi provare a eseguirlo 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à tutti i web code nei posti giusti delle piattaforme native, in modo che possano essere visualizzati in un'app.

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

Senza accorgersene, sei ora effettivamente finito, quindi vediamo l'applicazione su un dispositivo!

Costruisci e distribuisci applicazioni native

Per sviluppare applicazioni iOS, hai bisogno di avere Xcode installato, e per le applicazioni Android, hai bisogno di avere Android Studio installato. Inoltre, se hai l'intenzione di distribuire la tua applicazione 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 applicazioni mobili native, puoi utilizzare il 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 applicazione su un dispositivo connesso è facile. In Android Studio, basta attendere che tutto sia pronto, e puoi distribuire la tua applicazione su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, devi configurare il tuo account di firma per distribuire la tua applicazione su un dispositivo reale invece che solo sul 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'applicazione sul tuo dispositivo connesso, che puoi selezionare in alto. Ecco un esempio:

Congratulazioni! Hai avuto successo nel distribuire la tua app 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 live reload 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 app ospitata localmente con live reload su il tuo rete avendo l'app Capacitor caricare il contenuto dalla specifica URL.

Il primo passo è capire il tuo indirizzo IP locale. Se stai utilizzando un Mac, puoi scoprire questo esplorando 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 nel 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 correttoHo 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 syncma copierà solo le modifiche apportate al folder web e alla configurazione, senza aggiornare il progetto nativo. Il comando è simile a quello utilizzato per copiare le modifiche, ma funziona in modo diverso.

Puoi ora distribuire nuovamente la tua app 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, richiede comunque una ricostruzione del 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'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 prima. Per farlo, 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 abbiamo bisogno solo di importare il pacchetto e chiamare la funzione corrispondente dal nostro app, quindi cambiamo il share() __CAPGO_KEEP_0__ 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'
    });
  }
}

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:

npx cap sync

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

Aggiungere Konsta UI

Per utilizzare Konsta UI nel tuo app Nuxt 3, è necessario avere tailwind già installato e per installare il pacchetto:

npm i konsta

Inoltre, è necessario modificare il tuo tailwind.config.js file:

// 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 che estenderà la configurazione di default (o la tua personalizzata) Tailwind CSS con alcune varianti e utilità di aiuto richieste per Konsta UI.

Ora abbiamo bisogno di configurare il principale App component affinché possiamo impostare alcuni parametri globali (come theme).

Dobbiamo avvolgere l'intera app con App nel src/app/app.component.html:

<app>
  <h1>Welcome to Angular and Capacitor!</h1>
  <button (click)="share()">Share now!</button>
</app>

Pagina di Esempio

Ora che tutto è stato configurato, possiamo utilizzare i componenti UI Konsta Vue nelle nostre pagine Angular.

Ad esempio, apriamo src/app/app.component.html e cambialo nel seguente modo:

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

Se il live reload è fuori sincronia dopo aver installato tutti i componenti necessari, prova a riavviare tutto. Una volta fatto, dovresti vedere un'app mobile con un aspetto nativo, costruita con Angular e Capacitor!

Dovresti vedere la seguente pagina come risultato:

Conclusion

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 Capgo, è ancora più facile aggiungere aggiornamenti in tempo reale all'applicazione, assicurando che gli utenti abbiano sempre accesso alle funzionalità e alle correzioni di bug più recenti.

Se desiderate imparare a aggiungere Capgo al vostro'applicazione Angular, guardate il prossimo articolo:

Continuate da Building Mobile Apps con Angular e Capacitor

Se state utilizzando Building Mobile Apps con Angular e Capacitor per pianificare il comportamento di media e interfaccia nativa, connettetelo con Utilizzando @capgo/capacitor-live-activities per la capacità nativa in Utilizzando @capgo/capacitor-live-activities, @capgo/capacitor-live-activities per i dettagli di implementazione in @capgo/capacitor-attività-in-vivo, Utilizzando @capgo/capacitor-player-video, per la capacità nativa in Utilizzando @capgo/capacitor-player-video, @capgo/capacitor-player-video, per i dettagli di implementazione in @capgo/capacitor-player-video, e Utilizzando @capgo/capacitor-navigazione-nativa, per la capacità nativa in Utilizzando @capgo/capacitor-navigazione-nativa.