Creare App Mobili con Angular e Capacitor

In questo tutorial, inizieremo con una nuova Angular app e passeremo nel regno delle applicazioni mobili native utilizzando Capacitor. Se lo desiderate, potete anche aggiungere Konsta UI per un'interfaccia utente mobile migliorata con Tailwind CSS.

Capacitor consente di convertire facilmente la vostra applicazione web Angular in un'applicazione 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.

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

Sul progetto 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 i progetti Xcode e Android Studio nativi per te. Inoltre, i suoi plugin forniscono accesso alle funzionalità di 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 snella e la sua 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 di comando buildpotresti notare un nuovo dist cartella nella radice del tuo progetto.

Questa cartella verrà utilizzata da Capacitor in un secondo momento, 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 solo sync comando.

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

Dovresti essere in grado di osservare i nuovi cartelle "ios" e "android" nel tuo progetto Angular. ios e android Sono progetti nativi reali!

Per accedere al progetto Android in seguito, è necessario installare "Android Studio".

Per iOS, hai bisogno di un Mac e dovresti installare "Xcode". Inoltre, dovresti trovare un file "__CAPGO_KEEP_0__.config.ts"__CAPGO_KEEP_0__.config.ts Android Studio.

Xcode 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 webDir, che 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à tutti i web code nei posti giusti delle piattaforme native affinché possano essere visualizzati 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 eseguire npx cap sync nuovamente.

Senza accorgersene, si è ora effettivamente completati, quindi vediamo l'applicazione su un dispositivo!

Costruisci e distribuisci applicazioni native

Per sviluppare applicazioni iOS, è necessario avere Xcode installato, e per le applicazioni Android, è necessario avere Android Studio installato. Inoltre, se si prevede di distribuire l'applicazione sul negozio di app, è necessario iscriversi al programma di sviluppatore Apple per iOS e al Google Play Console per Android.

Se si è nuovi allo sviluppo di applicazioni mobili native, si può utilizzare il Capacitor CLI per aprire facilmente entrambi i progetti nativi:

npx cap open ios
npx cap open android

Una volta impostati i progetti nativi, distribuire l'applicazione su un dispositivo connesso è facile. In Android Studio, è sufficiente attendere che tutto sia pronto, e si può distribuire l'applicazione su un dispositivo connesso senza modificare alcun impostazione. Ecco un esempio:

In Xcode, è necessario configurare il proprio account di firma per distribuire l'applicazione su un dispositivo reale invece che solo sul simulatore. Se non si è mai fatto prima, Xcode guida attraverso il processo (ma ancora una volta, è 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 l'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 ora in poi, probabilmente si è abituati a avere il caricamento caldo con tutti i framework moderni, e la buona notizia è che si può avere la stessa funzionalità su un dispositivo mobile con sforzo minimo!

Abilita l'accesso all'applicazione ospitata localmente con il caricamento live su il proprio network caratterizzato dal fatto che l'app Capacitor carica 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 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 la porta correttiNell'esempio ho utilizzato la porta Angular predefinita.

Ora possiamo applicare questi cambiamenti copiandoli nel nostro progetto nativo:

npx cap copy

Il copy comando è simile a syncma ciò che farà è copiare solo le modifiche apportate al folder web e alla 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 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 ciò non può essere fatto in tempo reale. Nota che dovresti utilizzare l'IP e il port corretti nella tua configurazione. Il blocco __CAPGO_KEEP_0__ sopra mostra il port di default di Angular per fini dimostrativi.

Utilizzo dei plugin code

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

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

Condividi plugin, ma comunque apre comunque il dialogo di condivisione nativo! Per questo ora dobbiamo solo importare il pacchetto e chiamare la funzione corrispondente dal nostro 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 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'
    });
  }
}

Dopo aver premuto il pulsante, potrai assistere alla meravigliosa condivisione nativa in azione!

npx cap sync

Aggiungere Konsta UI

Per utilizzare Konsta UI nel tuo app Nuxt 3, hai bisogno di avere

tailwind già installato e per installare il pacchetto: Inoltre, hai bisogno di modificare il tuo

npm i konsta

src/app/app.component.ts 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 Estenderà la configurazione di default (o quella personalizzata) di Tailwind CSS con alcune varianti e utilità aggiuntive necessarie per Konsta UI.

Ora abbiamo bisogno di configurare il componente principale App per poter impostare alcuni parametri globali (come theme).

Abbiamo bisogno di avvolgere l'intera app con App in il 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 Vue di Konsta UI 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:

Conclusione

Capacitor è un'ottima scelta per la creazione di 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, assicurandosi 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: