Mit Angular und Capacitor Mobile Apps entwickeln

In diesem Tutorial beginnen wir mit einer neuen Angular Anwendung und wechseln dann in die Welt der nativen mobilen Apps mit Capacitor. Optional können Sie auch Konsta UI hinzufügen, um eine verbesserte mobile UI mit Tailwind CSS zu erhalten. __CAPGO_KEEP_0__ ermöglicht es Ihnen, Ihre Angular-Web-Anwendung leicht in eine native mobile App umzuwandeln, ohne dass erhebliche Änderungen oder ein neues Wissen wie React Native erforderlich sind. Martin Donadieu

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.

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

Dieses Tutorial führt Sie durch den Prozess, beginnend mit einer neuen Angular-Anwendung und dann die Einbindung von Capacitor zur Einführung in die Welt der nativen mobilen Apps. Optional können Sie zudem Konsta UI nutzen, um Ihre mobile UI mit Tailwind CSS zu verbessern.

Ü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, wodurch die native Xcode- und Android-Studio-Projekte generiert werden. 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. Sein schlanker API und seine gestreamte Funktionalität machen es zu einem 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!

Vorbereitung Ihrer Angular-Anwendung

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

ng new my-app
cd my-app

Wählen Sie 'Angular' aus, wenn Sie nach der Angular-Version gefragt werden.

Um eine native mobile App zu erstellen, benötigen wir ein export von unserem Projekt. Daher sollten wir ein einfaches Skript in unserem package.json installieren, das zum Erstellen und Kopieren des Angular-Projekts verwendet werden kann:

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

Nachdem Sie die Kommandozeile buildausgeführt haben, sollten Sie ein neues dist Verzeichnis am Root Ihres Projekts finden.

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 nativen mobilen Container zu packen, müssen wir einige erste Schritte ausführen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Kommandos.

Zuerst können wir das Capacitor CLI As eine Entwicklungsabhängigkeit installieren und dann innerhalb unseres Projekts einrichten. Während der Einrichtung können Sie mit der Eingabe von “Enter” die Standardwerte für Namen und Bundle-ID 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

Zu diesem Zeitpunkt sollten Sie neue Ordner "ios" und "android" in Ihrem Angular-Projekt beobachten können. Das sind echte native Projekte! Um später auf das Android-Projekt zuzugreifen, müssen Sie "Android Studio" installieren. Für iOS benötigen Sie einen Mac und sollten "Xcode" installieren. 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 Studio" installieren. Für iOS benötigen Sie einen Mac und sollten "Xcode" installieren. Xcode.

Darüber hinaus sollten Sie ein capacitor.config.ts Datei in Ihrem Projekt finden, die einige grundlegende Capacitor-Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten sollten, ist der webDir, der auf das Ergebnis Ihres Build-Befehls verweisen muss. Derzeit ist dies fehlerhaft.

Um dies zu korrigieren, öffnen Sie die capacitor.config.json -Datei und aktualisieren Sie den webDir:

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

Sie können dies 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 Buildkopie anlegen, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der native Plattformen synchronisiert, damit sie in einer App angezeigt werden können.

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

Sie merken es gar nicht, aber Sie sind jetzt tatsächlich fertig, also sehen wir mal das App auf einem Gerät!

Erstellen und Bereitstellen von native Apps

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert, und um Android-Apps zu entwickeln, benötigen Sie Android Studio installiert. Darüber hinaus müssen Sie, wenn Sie Ihre App im App Store verteilen möchten, sich bei Apple Developer Program für iOS und Google Play Console für Android 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 bei dem 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:

Herzlichen 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

Da Sie jetzt wahrscheinlich mit der Hot-Reload-Funktion aller modernen Frameworks vertraut sind, ist die gute Nachricht, dass Sie die gleiche Funktionalität auf einem mobilen Gerät haben können mit minimalen Anstrengungen!

Aktivieren Sie den Zugriff auf Ihre lokal gehostete Anwendung mit Live-Neustart auf Ihrem Netzwerk durch das Laden der Capacitor-Anwendung von der spezifischen URL.

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 im Terminal ausführen:

ipconfig getifaddr en0

Bei Windows ausführen:

ipconfig

Dann suchen Sie nach der IPv4-Adresse.

Wir können Capacitor anweisen, die Anwendung 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;

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

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

npx cap copy

Der copy Befehl ist ähnlich wie sync, aber er kopiert nur die Änderungen, die an dem Web-Ordner und der Konfiguration vorgenommen wurden ohne das natives Projekt zu aktualisieren.

Sie können Ihr App nun noch einmal über Android Studio oder Xcode bereitstellen. Anschließend, wenn Sie etwas in Ihrer Angular App ändern, wird die App automatisch neu geladen und zeigt die Änderungen an!

Beachten Sie dass, wenn Sie neue Plugins wie die Kamera installieren, ein Neubuild Ihres natives Projekts erforderlich ist. Dies liegt daran, dass native Dateien geändert werden und dies nicht auf der Fliege erfolgen kann.

Hinweis, dass Sie den korrekten IP- und Port in Ihrer Konfiguration verwenden sollten. Der code Block oben zeigt die Standard-Port von Angular für Demonstrationszwecke an.

Mit Capacitor-Plugins arbeiten

Lassen Sie uns sehen, wie man ein Capacitor-Plugin in Aktion verwendet, das wir vorher mehrmals erwähnt haben. Um dies zu tun, können wir ein ziemlich einfaches Plugin installieren, indem wir Folgendes ausführen:

npm i @capacitor/share

Es ist nichts Besonderes an dem Share-Pluginaber es bringt trotzdem den native Share-Dialog auf! Dazu müssen wir nun nur noch das Paket importieren und die entsprechende share() Funktion in unserer App aufrufen, also ändern wir das src/app/app.component.ts in 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 erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und dann die App auf unserem Gerät neu bereitstellen. Um dies zu tun, führen Sie bitte Folgendes 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-App zu verwenden, müssen Sie Folgendes haben Tailwind ist bereits installiert und um das Paket zu 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 Dies wird die Standard- (oder Ihre benutzerdefinierte) Tailwind CSS-Konfiguration mit einigen zusätzlichen Varianten und Hilfsfunktionen erweitern, die für Konsta UI erforderlich sind.

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

umschließen in der App Beispiel-Seite src/app/app.component.html:

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

Jetzt, wenn alles eingerichtet ist, können wir Konsta UI Vue-Komponenten in unseren Angular-Seiten verwenden.

and to install the package: __CAPGO_KEEP_0__

For example, let’s open src/app/app.component.html und ändere 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 außer Synchron ist, versuche es mit einem Neustart. Sobald du das getan hast, solltest du eine mobile App mit einem etwas nativen Aussehen sehen, die mit Angular und Capacitor! gebaut wurde.

Du solltest folgende Seite als Ergebnis sehen:

Fazit

Capacitor ist eine hervorragende Option für die Erstellung von nativen Anwendungen auf 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 deine App hinzuzufügen, um sicherzustellen, dass deine Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Wenn du gerne wissen möchtest, wie du Capgo in deine Angular-App hinzufügen kannst, lies dir bitte den nächsten Artikel an:

Fortsetze von Building Mobile Apps with Angular und Capacitor

If Sie eine App mit __CAPGO_KEEP_0__ entwickeln Mit Angular und Capacitor Mobile Apps bauen um native Medien und Schnittstellen zu planen und das Verhalten zu steuern, verbinden Sie es mit Mit @capgo/capacitor-live-aktivitäten Für die native Fähigkeit in @capgo/capacitor-live-aktivitäten @capgo/capacitor-live-aktivitäten Für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten Mit @capgo/capacitor-video-player Für die native Fähigkeit in @capgo/capacitor-video-player @capgo/capacitor-video-player Für die Implementierungsdetail in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigation für die native Fähigkeit in Using @capgo/capacitor-native-navigation.