Mobile Apps mit Angular und Capacitor erstellen

In diesem Tutorial beginnen wir mit einer neuen Angular Anwendung und wechseln dann in die Welt der mobilen Apps mit Capacitor. Sie können auch Capgo-Native Navigation und Transitions hinzufügen, um eine nativere mobile Erfahrung zu erhalten, und tailwind-capacitor für sichere Bereiche verwenden.

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

With 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 Eingabe in die Welt der nativen mobilen Apps. Sie können auch Capgo Native Navigation, Transitions und tailwind-capacitor für sichere Bereiche 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. Zudem bieten seine Plugins Zugriff auf native Geräte-Funktionen 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 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!

Vorbereitung Ihrer Angular-Anwendung

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 nach der Angular-Version gefragt werden.

Um eine native mobile App zu erstellen, benötigen wir ein export des Projekts. Also lassen Sie uns ein einfaches Skript in unserem package.json dafür verwendet werden können, um ein Angular-Projekt zu erstellen und zu kopieren:

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

Nachdem Sie die Kommandozeile ausgeführt haben build, sollten Sie ein neues dist Verzeichnis an der Wurzel 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 nativen mobilen Container zu packen, müssen wir einige erste Schritte befolgen, aber danach ist es so einfach wie die Ausführung eines einzigen sync Kommandos.

Zuerst können wir das Capacitor CLI als Entwicklungszusammenhang 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 Studioinstallieren. Für iOS benötigen Sie einen Mac und sollten Xcode.

installieren. Zudem sollten Sie auch einen capacitor.config.ts Datei in Ihrem Projekt, die einige grundlegende Capacitor Einstellungen enthält, die während der Synchronisierung verwendet werden. Die einzige Sache, auf die Sie achten müssen, 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 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 den statischen Build kopieren, während der zweite Befehl npx cap sync alle Web code in die richtigen Orte der nativen Plattformen synchronisieren wird, damit sie in einer App angezeigt werden können.

Darüber hinaus aktualisiert der Synchronisierungs-Befehl möglicherweise die nativen Plattformen und installiert Plugins, sodass Sie, wenn Sie ein neues Capacitor installieren, es Zeit ist, npx cap sync erneut auszuführen.

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

Erstellen und bereitstellen von nativen Apps

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert zu haben, und um Android-Apps zu entwickeln, benötigen Sie Android Studio installiert zu haben. 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.

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

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

Herzlichen Glückwunsch! Sie haben Ihre Angular-Web-App erfolgreich 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

Indem Sie jetzt wahrscheinlich mit Hot Reload bei allen modernen Frameworks vertraut sind, ist die gute Nachricht, dass Sie die gleiche Funktionalität auf einem mobilen Gerät mit minimalen Anstrengungen haben können!

Stellen Sie sicher, dass Sie Zugriff auf Ihre lokal gehostete Anwendung mit Live Reload haben auf Ihrem Netzwerk durch das Laden der Capacitor-App den Inhalt 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 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 unsere capacitor.config.ts Datei hinzufügen.

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 verwendenIch habe in diesem Beispiel die Standard-Port von Angular verwendet.

Nun können wir diese Änderungen anwenden, indem wir sie in unsere native Projekt kopieren:

npx cap copy

Die copy Der Befehl ähnelt sich sync, aber es wird nur alle Änderungen im Web-Ordner und die Konfiguration, ohne das native 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, die App wird automatisch neu geladen und zeigt die Änderungen an!

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

Hinweis: Sie sollten die richtige IP-Adresse und den Port in Ihrer Konfiguration verwenden. Der code-Block oben zeigt die Standard-IP-Adresse von Angular für Demonstrationszwecke.

Mit Capacitor-Plugins

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

npm i @capacitor/share

There ist nichts Besonderes an dem Share-Pluginaber es bringt trotzdem das native Share-Dialog auf! Für dies benötigen wir nur noch die Importierung der Pakete und die Aufruf der entsprechenden share() Funktion in unserer App, also ändern wir nun das src/app/app.component.ts

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

in folgende Weise:

npx cap sync

Wie bereits erwähnt, müssen wir bei der Installation neuer Plugins eine Synchronisierungsoperation durchführen und das App dann auf unserem Gerät neu bereitstellen. Dazu führen Sie bitte folgende Kommando aus:

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Als nächstes können Sie die App noch nativer auf iOS und Android mit Capgo Navigation und Übergängen gestalten und gängige iOS-Anzeige-Problem lösen, die zu horizontaler Überlauf oder gekürzten sicheren Bereichen führen.

Natürliche Benutzeroberfläche mit __CAPGO_KEEP_0__ Native Navigation und Übergängen Ich habe Jahre lang mit ionic gearbeitet To cross-platform-Anwendungen zu bauen, aber die Integration mit Angular ist hackig und selten wertvoll, wenn Sie bereits haben Tailwind CSS.

Für ein nativem mobilen Gefühl in einer Angular + Capacitor-Anwendung verwenden Sie Capgo-Plugins anstelle von web-only-UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigation — nativere Leiste, Liquid Glass-Tasteleiste auf iOS und eine verschwommene Tasteleiste-Style auf Android. Ihre Angular-Router behält die Routenstatus; Der Plugin besitzt die native Chrome.
• @capgo/capacitor-transitions — Seitenübergänge im Ionic-Stil und iOS-Rückwärts-Schleuder in der WebView-Schicht, ohne Ionic-UI zu übernehmen.

Installieren Sie beide:

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

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit Web-Inhalt die native Leisten respektiert:

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

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

Rendern Sie eine Liquid Glass-Tasteleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene WebView-Hintergrund):

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

Umgehen Sie die gerouteten Seiten in cap-router-outlet, cap-page, und cap-contentund rufen Sie an setDirection('forward') oder setDirection('back') bevor Sie navigieren. Duplikate Web-Ober- und -Unterkante, wenn native Navigation diese Ober- und Unterkanten besitzt.

Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.

Sichere Bereiche mit Tailwind

Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor veröffentlicht auf npm). Es bietet safe-areas Nutzbarkeiten und andere Capacitor-freundliche Tailwind-Plugins:

bun add -D tailwind-capacitor

In src/styles.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Verwenden Sie Nutzbarkeiten wie pt-safe, pb-safe, und px-safe anstatt sie env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Angular-Konfiguration fehlt, Öffnen Sie ein PR auf GitHub.

iOS-Bereichsprobleme beheben (Viewport, Safe Area, und horizontale Überschreitung)

Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder passen Sie den Viewport-Tag an, um es normalerweise nicht zu beheben. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.

Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird

In src/index.htmlSetze die Viewport-Metatag ein <head>:

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

Behandle iOS-Safe-Area von einem Root-Wrapper aus

Erstelle ein einzelnes App-Shell und füge dort Safe-Area-Padding an — nicht in mehreren verschachtelten Komponenten:

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

Fasse alle Seite-Inhalte innerhalb von .app-shellDoppelte Safe-Area-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.

Mit @capgo/tailwind-capacitor, kannst du denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf diesem einzelnen Shell ausdrücken.

Setze Capacitor iOS contentInset auf never erstes

In bevorzugt native Einstellungen deaktivieren und lassen Sie CSS (oder Native Navigation’s capacitor.config.ts) den sicheren Bereich besetzen: contentInsetMode: 'css'Mischen Sie __CAPGO_KEEP_0__’s automatische Inhaltsabstände mit CSS

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-*) Finden Sie das überlaufende Element

Der übliche Täter ist ein Element, das

, Tailwind 100vw, eine fixe Pixelbreite oder eine große w-screenIn Safari Web Inspector, führen Sie aus: min-width.

Mit Tailwind ersetzen Sie

[...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,
  }));

mit w-screen with w-full When immer möglich. Viele horizontale Überschreitungsausgaben kommen von 100vw / w-screen, dupliziertem sicheren Bereichsabstand oder einem festerbreiten Container — nicht von der Viewport-Meta-Tags selbst.

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 Einführung von Capgo, ist es noch 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:

Fortsetzen Sie von Building Mobile Apps with Angular und Capacitor

Wenn Sie Building Mobile Apps with Angular und Capacitor zur Planung nativer Medien- und Schnittstellenverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Mit @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 Mit @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 Mit @capgo/capacitor-native-navigation