Mit Angular und Capacitor mobile Apps erstellen

In dieser Anleitung beginnen wir mit einer neuen Angular Anwendung und wechseln dann in das native mobile App-Bereich mit Capacitor. Optional können Sie auch Konsta UI hinzufügen Konsta UI für eine verbesserte mobilen Benutzeroberfläche mit Tailwind CSS.

Capacitor ermöglicht Ihnen, Ihre Angular-Webanwendung leicht in eine native mobile App umzuwandeln, ohne dass erhebliche Änderungen oder ein neues Wissen wie React Native erforderlich sind.

Mit nur wenigen einfachen Schritten können die meisten Angular-Anwendungen in mobile Apps umgewandelt werden.

Diese Anleitung führt Sie durch den Prozess, beginnend mit einer neuen Angular-Anwendung und dann die Einbindung von Capacitor zur Erschließung der native mobilen Apps. Optional können Sie zudem Konsta UI für eine verbesserte mobilen Benutzeroberfläche mit Tailwind CSS verwenden.

Über Capacitor

CapacitorJS ist ein Game-Changer! Sie können es leicht in jede Web-Projekt einbinden, und es wird Ihre Anwendung in eine native Webview einhüllen, die native Xcode- und Android Studio-Projekte generiert. Zusätzlich bieten seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke.

Mit Capacitor erhalten Sie eine fantastische native mobile App ohne einen komplizierten Setup oder einen steilen Lernkurve. Seine schlanken API und gestreamten Funktionalitäten machen es ein Kinderspiel, es in Ihr Projekt zu integrieren. Vertrauen Sie mir, Sie werden sich wundern, wie einfach es ist, eine voll funktionsfähige native App mit Capacitor zu erreichen!

Ihre Angular-Anwendung vorbereiten

Um eine neue Angular-Anwendung zu erstellen, führen Sie den folgenden Befehl aus:

ng new my-app
cd my-app

Wählen Sie 'Angular' aus, wenn Sie für die Angular-Version gefragt werden.

Um eine native mobile App zu erstellen, benötigen wir ein __CAPGO_KEEP_0__ aus unserem Projekt. Daher fügen wir ein einfaches Skript in unserem package.json hinzu, das zum Erstellen und Kopieren des Angular-Projekts verwendet werden kann:

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

Nachdem Sie die Kommandozahlung buildausgeführt haben, sollten Sie ein frisches dist Verzeichnis am Root Ihres Projekts erkennen.

Dieses Verzeichnis wird später von Capacitor verwendet, aber für den Moment müssen wir es korrekt einrichten.

Adding Capacitor to Your Angular App

Um jede Web-App in einen native mobile Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung einer einzigen sync Kommandozahlung.

Zunächst können wir das Capacitor CLI als Entwicklungspaket installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie auf „Enter“ drücken, um die Standardwerte für Namen und Bundle-ID zu akzeptieren.

Als nächstes müssen wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen installieren.

Schließlich können wir die Plattformen hinzufügen, und Capacitor wird für jede Plattform einen Ordner am Root unseres Projekts erstellen:

# 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

Bis zu diesem Punkt sollten Sie neue ios und android Ordner in Ihrem Angular-Projekt beobachten können.

Das sind echte native Projekte!

Um später auf das Android-Projekt zuzugreifen, müssen Sie Android StudioFür iOS benötigen Sie einen Mac und sollten Xcode.

Darüber hinaus sollten Sie ein capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der

webDir capacitor.config.json Um dies zu korrigieren, öffnen Sie die __CAPGO_KEEP_0__.config.json:

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

Sie können es ausprobieren, indem Sie die folgenden Befehle ausführen:

npm run build
npx cap sync

Der erste Befehl npm run build wird einfach Ihr Angular-Projekt bauen und die statische Build kopieren, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren, damit sie in einer App angezeigt werden können.

Zusätzlich kann der Synchronisierungs-Befehl die nativen Plattformen aktualisieren und Plugins installieren, sodass, wenn Sie ein neues Capacitor-Plugin installieren, es Zeit ist, npx cap sync wieder zu laufen.

Ohne es zu merken, sind Sie jetzt tatsächlich fertig, also sehen wir mal die App auf einem Gerät!

Erstellen und Bereitstellen von nativen Apps

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert und für Android-Apps benötigen Sie, dass Sie Android Studio installiert haben. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Wenn Sie mit der nativen mobilen Entwicklung neu sind, können Sie die Capacitor CLI verwenden, um beide native Projekte leicht zu öffnen:

npx cap open ios
npx cap open android

Sobald Sie Ihre native Projekte eingerichtet haben, ist die Bereitstellung Ihrer App auf einem verbundenen Gerät einfach. In Android Studio müssen Sie nur auf alles warten, bis alles bereit ist, und Sie können Ihre App auf einem verbundenen Gerät bereitstellen, ohne dass Sie Einstellungen ändern müssen. Hier ist ein Beispiel:

In Xcode müssen Sie Ihre Signierungsanmeldung einrichten, um Ihre App auf einem realen Gerät bereitzustellen, anstatt nur auf dem Simulator. Wenn Sie dies noch nicht getan haben, führt Xcode Sie durch den Prozess (aber wiederum müssen Sie sich im Entwicklerprogramm angemeldet haben). Anschließend können Sie einfach auf 'Play' klicken, um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können. Hier ist ein Beispiel:

Glückwunsch! Sie haben erfolgreich Ihre Angular-Web-App auf einem mobilen Gerät bereitgestellt. Hier ist ein Beispiel:

Aber warten Sie, es gibt auch eine schnellere Möglichkeit, dies während der Entwicklung zu tun…

Capacitor Live Reload

Sie sind wahrscheinlich jetzt daran gewöhnt, dass Sie mit allen modernen Frameworks eine Hot-Reload-Funktion haben, und die gute Nachricht ist, dass Sie dieselbe Funktionalität auf einem Mobilgerät mit minimalen Anstrengungen haben können!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live-Reload auf Ihrem Netzwerk indem Sie die Capacitor-App laden, die den Inhalt von der spezifischen URL lädt.

Der erste Schritt besteht darin, Ihre lokale IP-Adresse zu ermitteln. Wenn Sie einen Mac verwenden, können Sie dies herausfinden, indem Sie den folgenden Befehl in der Terminal-Anwendung ausführen:

ipconfig getifaddr en0

Auf Windows ausführen:

ipconfig

Dann suchen Sie nach der IPv4-Adresse.

Wir können Capacitor anweisen, die App direkt vom Server zu laden, indem wir eine weitere Eintragung in unserem capacitor.config.ts Datei

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;

verwenden, indem Sie sicherstellen, dass Sie die richtige IP-Adresse und den Port, ich habe in diesem Beispiel die Standard-Port von Angular verwendet.

Jetzt können wir diese Änderungen übernehmen, indem wir sie in unser natives Projekt übernehmen:

npx cap copy

Das copy Die Kommandozeilenanweisung ist ähnlich wie sync, aber sie kopiert nur die Änderungen, die an der Web-Folder und der Konfiguration vorgenommen wurden, ohne das natives Projekt zu aktualisieren. Sie können Ihre App nun noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer Angular-Anwendung ändern,

wird die App automatisch neu geladen und zeigt die Änderungen an! Bleiben Sie daran denken

Keep in mind Wenn Sie neue Plugins wie die Kamera installieren, ist eine Neuverteilung Ihres native Projekts erforderlich. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Flugschleuse erfolgen kann.

Hinweis: Verwenden Sie bitte die richtige IP-Adresse und den Port in Ihrer Konfiguration. Der code-Block oben zeigt die Standard-Port für Angular zum Zweck der Demonstration an.

Verwendung von Capacitor-Plugins

Lassen Sie uns nun sehen, wie man ein Capacitor-Plugin in Aktion verwendet, das wir bereits mehrfach erwähnt haben. Dazu können wir ein ziemlich einfaches Plugin installieren, indem wir folgendes Kommando ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Share-Plugin, aber es bringt trotzdem den native Share-Dialog zum Vorschein! Dazu müssen wir nun nur noch das Paket importieren und die entsprechende share() Funktion in unserem App aufrufen, also ändern wir das src/app/app.component.ts auf Folgendes:

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

Wie bereits erwähnt, ist bei der Installation neuer Plugins eine Synchronisationsoperation erforderlich, gefolgt von einer erneuten Bereitstellung der App auf dem Gerät. Dazu führen Sie bitte folgendes Kommando aus:

npx cap sync

Nachdem Sie auf den Button geklickt haben, können Sie den schönen native Share-Dialog in Aktion sehen!

Konsta UI hinzufügen

Um Konsta UI in Ihrer Nuxt 3-Anwendung zu verwenden, müssen Sie bereits installiert haben und das Paket installieren:

npm i konsta

Zusätzlich müssen Sie Ihre tailwind.config.js Datei anpassen:

// 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 erweitert die Standard- (oder Ihre benutzerdefinierte) Tailwind CSS-Konfiguration mit einigen zusätzlichen Varianten und Hilfsfunktionen, die für Konsta UI erforderlich sind.

Jetzt müssen wir die Haupt- Komponente einrichten, um einige globale Parameter (wie Wir müssen die gesamte Anwendung mit theme).

umschließen: App __CAPGO_KEEP_0__ src/app/app.component.html:

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

Example Page

Jetzt können wir mit Konsta UI Vue-Komponenten in unseren Angular-Seiten arbeiten.

Beispielweise öffnen wir src/app/app.component.html und ändern es in folgendes:

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

Wenn der Live-Reload nach der Installation aller notwendigen Komponenten aus der Synchronisation ist, versuchen Sie, alles neu zu starten. Sobald Sie das getan haben, sollten Sie eine mobile App mit einem etwas nativen Aussehen sehen, die mit Angular und Capacitor erstellt wurde!

Sie sollten die folgende Seite als Ergebnis sehen:

Zusammenfassung

Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf der Basis eines bestehenden Web-Projekts, die eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu erhalten.

Und mit der Zugabe von Capgo, ist es sogar einfacher, Live-Updates in Ihrer App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn Sie gerne erfahren möchten, wie Sie Capgo in Ihrer Angular-Anwendung hinzufügen können, nehmen Sie einen Blick auf das nächste Artikel: