Building Mobile Apps with Angular and Capacitor

Mari kita mulai dengan proyek baru Angular Aplikasi dan transisi ke wilayah aplikasi mobile native menggunakan Capacitor. Anda juga dapat menambahkan Capgo Navigasi dan Transisi Native untuk merasakan aplikasi mobile native, dan menggunakan tailwind-capacitor untuk area yang aman.

Capacitor memungkinkan Anda untuk dengan mudah mengonversi aplikasi web Angular Anda menjadi aplikasi mobile native tanpa memerlukan perubahan signifikan atau belajar kemampuan baru seperti React Native.

Membutuhkan hanya beberapa langkah sederhana, sebagian besar aplikasi Angular dapat diubah menjadi aplikasi mobile.

Tutorial ini akan mengantarkan Anda melalui prosesnya, mulai dari aplikasi Angular baru dan kemudian mengintegrasikan Capacitor untuk memasuki wilayah aplikasi mobile asli. Anda juga dapat menggunakan Capgo Native Navigation, Transisi, dan tailwind-capacitor untuk area aman.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke proyek web apa pun, dan itu akan menggabungkan aplikasi Anda ke dalam tampilan web asli, menghasilkan proyek Xcode dan Android Studio asli untuk Anda. Selain itu, plugin-nya memberikan akses ke fitur perangkat asli seperti kamera melalui jembatan JS.

Dengan Capacitor, Anda mendapatkan aplikasi mobile asli yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. API dan fungsi yang diperbarui membuatnya mudah untuk diintegrasikan ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile asli yang sepenuhnya berfungsi dengan Capacitor!

Mengatur Aplikasi Angular Anda

Untuk membuat aplikasi Angular baru, jalankan perintah berikut:

ng new my-app
cd my-app

Pilih ‘Angular’ ketika diminta untuk versi Angular.

Untuk membuat aplikasi mobile asli, kami memerlukan ekspor projek kami. Jadi, mari kita tambahkan skrip yang sederhana ke dalam package.json yang dapat digunakan untuk membangun dan menyalin proyek Angular:

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

Setelah menjalankan perintah buildkamu harus dapat melihat folder baru di root proyekmu. dist Folder ini akan digunakan oleh Capgo nanti, tapi untuk saat ini, kita harus mengaturnya dengan benar.

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your Angular App

Pertama-tama, kita dapat menginstal sync Capacitor Capacitor

sebagai dependensi pengembangan, dan kemudian mengaturnya dalam proyek kita. Selama pengaturan, kamu dapat menekan "enter" untuk menerima nilai default untuk nama dan ID paket. Capacitor CLI Kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Finalnya, kita bisa menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root project kita:

# 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

Setelah itu, kamu harus bisa melihat folder baru ios dan context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan). android

folder di project Angular kamu.

Terjemahan asli proyek native! Untuk mengakses proyek Android nanti, kamu harus menginstalAndroid Studio . Untuk iOS, kamu membutuhkan Mac dan harus menginstal.

Xcode capacitor.config.ts file di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Yang perlu Anda perhatikan adalah webDiryang harus mengarah ke hasil perintah build Anda. Saat ini, itu tidak akurat.

Untuk memperbaiki hal ini, buka file capacitor.config.json dan update webDir:

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

Untuk mencobanya, Anda dapat menjalankan perintah-perintah berikut:

npm run build
npx cap sync

Perintah pertama npm run build akan hanya membangun proyek Angular Anda dan menyalin build statis, sedangkan perintah kedua npx cap sync akan sinkronisasi semua web code ke tempat-tempat yang tepat di platform-platform native sehingga dapat ditampilkan di aplikasi.

Selain itu, perintah sinkronisasi mungkin memperbarui platform native dan menginstal plugin, jadi ketika Anda menginstal plugin baru, Capacitor plugin maka saatnya menjalankan npx cap sync lagi.

Tidak menyadari, Anda sekarang sudah selesai, jadi mari kita lihat aplikasi di perangkat!

Bangun dan Deploy aplikasi native

Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode terpasang, dan untuk aplikasi Android, Anda perlu memiliki Android Studio terpasang. Selain itu, jika Anda berencana untuk mendistribusikan aplikasi Anda di toko aplikasi, Anda harus mendaftar di Program Pengembang Apple untuk iOS dan Google Play Console untuk Android.

Jika Anda baru dalam pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek native baik itu iOS maupun Android:

npx cap open ios
npx cap open android

Setelah Anda telah mengatur proyek native Anda, meng-deploy aplikasi ke perangkat yang terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai semua siap, dan Anda dapat meng-deploy aplikasi ke perangkat yang terhubung tanpa mengubah pengaturan apa pun. Berikut adalah contoh:

Pada Xcode, Anda perlu mengatur akun signing Anda untuk meng-deploy aplikasi ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengantarkan Anda melalui prosesnya (tetapi lagi, Anda harus terdaftar di Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi pada perangkat yang terhubung, yang dapat Anda pilih di bagian atas. Berikut adalah contoh:

Hore! Anda telah berhasil meng-deploy aplikasi web Angular Anda ke perangkat mobile. Berikut adalah contoh:

Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukannya selama pengembangan…

Capacitor Live Reload

Dengan demikian, Anda mungkin sudah terbiasa dengan hot reload pada semua framework modern, dan kabar baiknya adalah bahwa Anda dapat memiliki fungsi yang sama on a mobile device dengan usaha yang minimal!

Aktifkan akses ke aplikasi yang di-host secara lokal dengan live reload On jaringan Anda Dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu.

Langkah pertama adalah menentukan alamat IP lokal Anda. Jika Anda menggunakan Mac, Anda dapat menemukannya dengan menjalankan perintah berikut di terminal:

ipconfig getifaddr en0

Pada Windows, jalankan :

ipconfig

Lalu cari alamat IPv4.

Kita dapat menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke dalam file: capacitor.config.ts Pastikan untuk menggunakan

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;

alamat IP dan port yang benar Saya telah menggunakan port Angular default dalam contoh ini.Sekarang, kita dapat menerapkan perubahan ini dengan menyalinnya ke proyek native kita:

Langkah

npx cap copy

The copy perintah ini mirip dengan sync, tetapi hanya mengcopy perubahan yang dibuat pada folder web dan konfigurasi, tanpa memperbarui proyek native.

Kamu bisa mengdeploy aplikasi satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika kamu mengubah sesuatu di aplikasi Angular kamu, aplikasi akan secara otomatis reload dan menampilkan perubahan!

Pertimbangkanlah bahwa jika kamu menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native. Hal ini karena file native telah berubah, dan tidak bisa dilakukan secara langsung.

Penting untuk diingat bahwa kamu harus menggunakan IP dan port yang benar dalam konfigurasi. Blok code di atas menampilkan port Angular default untuk keperluan demonstrasi.

Menggunakan Capacitor Plugins

Mari kita lihat bagaimana menggunakan plugin Capacitor dalam aksi, yang telah disebutkan beberapa kali sebelumnya. Untuk melakukan ini, kita bisa menginstal plugin yang cukup sederhana dengan menjalankan:

npm i @capacitor/share

Ada tidak banyak hal yang mewah tentang plugin Share plugin, tapi itu tetap membawa dialog berbagi asli! share() Untuk hal ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kita, jadi mari kita ubah src/app/app.component.ts menjadi ini:

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

Seperti yang disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian meng-redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:

npx cap sync

Setelah menekan tombol, Anda dapat menyaksikan dialog berbagi asli yang indah dalam aksi!

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.

Capgo

dan memperbaiki masalah layout iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong. Antarmuka yang terasa asli dengan navigasi dan transisi asli untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Angular adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.

Untuk merasakan sentuhan mobile asli dalam aplikasi Angular + Capacitor , gunakan plugin Capgo daripada kit UI web seperti Konsta UI:

• @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Pengaturan rute Angular tetap; plugin menguasai chrome native.
• @capgo/capacitor-transitions — transisi halaman gaya Ionic dan swipe-back di lapisan WebView iOS, tanpa menerima UI Ionic.

Install kedua:

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

Konfigurasi navigasi native dengan mode CSS inset agar konten web menghormati bar-bar native:

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

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

Tampilkan tab bar Liquid Glass (iOS menggunakan rendering yang dimiliki sistem; Android menggunakan latar belakang WebView yang diboroskan):

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

Wrap halaman yang diarahkan dalam cap-router-outlet, cap-page, dan cap-contentdan panggil setDirection('forward') atau setDirection('back') Sebelum melanjutkan. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-navigasi-nasional dan Menggunakan @capgo/capacitor-transisi.

Daerah aman dengan Tailwind

Untuk daerah aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai) tailwind-capacitor di npm. Ini menyediakan safe-areas fasilitas dan plugin lainnya yang Capacitor-ramah:

bun add -D tailwind-capacitor

In src/styles.css:

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

Pakai fasilitas seperti pt-safe, pb-safe, dan px-safe daripada menambahkannya secara manual. Projek ini aktif dikembangkan — jika ada yang kurang untuk pengaturan Angular Anda, env(safe-area-inset-*) buka PR di __CAPGO_KEEP_0__ open a PR on GitHub.

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak

atau mengatur tag viewport saja biasanya tidak cukup untuk memperbaikinya. Lakukan periksaan-periksaan ini secara berurutan. overflow-x: hidden Pastikan tag meta viewport diterapkan dengan benar

In

In src/index.htmlatur tag meta viewport di <head>:

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

Tangani zona aman iOS dari wrapper root saja

Buat shell aplikasi tunggal dan aplikasikan padding zona aman di sana — bukan di komponen nested beberapa kali:

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

Terapkan semua konten halaman di .app-shell. Pengaturan padding zona aman yang berulang di header, modal, dan wrapper layout sering membuat UI terlihat terpotong atau terlalu besar.

Dengan @capgo/tailwind-capacitorkamu bisa mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Set Capacitor iOS contentInset ke never context":"Page/area: Halaman produk update hidup. Peran: Label UI singkat atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Live Update Dynamic Label To)."

Ini capacitor.config.ts, lebih baik menggunakan inset native yang dinonaktifkan dan biarkan CSS (atau Navigasi Native) mengatur area aman: contentInsetMode: 'css'Menggabungkan __CAPGO_KEEP_0__’s konten inset otomatis dengan padding 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-*) Temukan elemen yang benar-benar mengalir ke luar

Penyebab biasanya adalah elemen yang menggunakan

, Tailwind 100vw, lebar piksel tetap, atau besar w-screenDalam Safari Web Inspector, jalankan: min-width.

Dengan Tailwind, ganti

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

dengan w-screen with w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screenpadding area aman yang diulang, atau kontainer dengan lebar tetap — bukan dari tag meta viewport itu sendiri.

Kesimpulan

Capacitor adalah pilihan yang sangat baik untuk membuat aplikasi native berdasarkan proyek web yang sudah ada, menawarkan cara sederhana untuk berbagi code dan menjaga UI yang konsisten.

Dan dengan penambahan Capgoitu bahkan lebih mudah untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug terbaru.

Jika Anda ingin belajar cara menambahkan Capgo ke aplikasi Angular Anda, lihatlah artikel berikutnya:

Teruskan dari Membangun Aplikasi Mobile dengan Angular dan Capacitor

Jika Anda menggunakan Membangun Aplikasi Mobile dengan Angular dan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Untuk Aktivitas Hidup @capgo/capacitor untuk kemampuan asli dalam Untuk Aktivitas Hidup @capgo/capacitor @capgo/capacitor-aktivitas-hidup untuk detail implementasi dalam @capgo/capacitor-aktivitas-hidup, Untuk Pengguna @capgo/capacitor-player-video untuk kemampuan asli dalam Untuk Pengguna @capgo/capacitor-player-video @capgo/capacitor-player-video untuk detail implementasi dalam @capgo/capacitor-player-video, dan Untuk Navigasi @capgo/capacitor-native untuk kemampuan asli dalam Untuk Navigasi @capgo/capacitor-native