Membangun Aplikasi Mobile dengan Angular dan Capacitor

Dalam tutorial ini, kita akan memulai dengan aplikasi Angular baru dan beralih ke dunia aplikasi mobile native menggunakan __CAPGO_KEEP_0__. Anda juga dapat menambahkan __CAPGO_KEEP_1__ Native Navigation dan Transisi untuk merasa seperti aplikasi mobile native, dan menggunakan tailwind-__CAPGO_KEEP_2__ untuk area-area yang aman. __CAPGO_KEEP_0__ memungkinkan Anda untuk dengan mudah mengonversi aplikasi web Angular Anda menjadi aplikasi mobile native tanpa memerlukan perubahan signifikan atau belajar keterampilan baru seperti React Native. app and transition into the native mobile app realm using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

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.

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

This tutorial will guide you through the process, starting with a new Angular app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke proyek web apa pun, dan itu akan menggabungkan aplikasi Anda ke dalam sebuah native webview, menghasilkan proyek Xcode dan Android Studio asli untuk Anda. Selain itu, plugin-pluginnya 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. Fungsionalitas API dan Capacitor yang terintegrasi dengan baik membuatnya mudah untuk diintegrasikan ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile asli yang sepenuhnya berfungsi dengan Capacitor!

Mempersiapkan Aplikasi Angular

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 export proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam package.json bahwa 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_KEEP_0__ nanti, tapi untuk sekarang, kita harus mengaturnya dengan benar.

Mengambahkan Capacitor ke Aplikasi Angular Anda

Adding Capacitor to Your Angular App

Pertama-tama, kita dapat menginstal sync __CAPGO_KEEP_0__ __CAPGO_KEEP_1__

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 Mengambahkan __CAPGO_KEEP_0__ ke Aplikasi Angular Anda

Untuk mengemas aplikasi web apa pun ke dalam kontainer mobile native, kita harus mengikuti beberapa langkah awal, tapi setelah itu, cukup sederhana seperti menjalankan perintah tunggal.

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

Pada titik ini, Anda seharusnya dapat melihat folder baru ios dan android di proyek Angular Anda.

Itu adalah proyek asli native!

Untuk mengakses proyek Android nanti, Anda harus menginstal Android Studio. Untuk iOS, Anda membutuhkan Mac dan seharusnya menginstal Xcode.

Selain itu, Anda seharusnya menemukan capacitor.config.ts file di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Satu-satunya hal yang perlu Anda perhatikan adalah webDir, yang 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"
}

Anda dapat mencobanya dengan menjalankan perintah-perintah berikut:

npm run build
npx cap sync

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

Selain itu, perintah sinkronisasi mungkin memperbarui platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin baru Capacitor sudah saatnya menjalankan npx cap sync kembali.

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

Membangun dan Mengirimkan 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 ke 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 keduanya:

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 segalanya siap, dan Anda dapat meng-deploy aplikasi ke perangkat yang terhubung tanpa mengubah pengaturan apa pun. Berikut adalah contoh:

Di 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 di perangkat yang terhubung, yang dapat Anda pilih di bagian atas. Berikut adalah contoh:

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

Sampai saat ini, Anda mungkin sudah terbiasa dengan memiliki hot reload dengan semua framework modern, dan kabar baiknya adalah Anda dapat memiliki fungsi yang sama di perangkat mobile dengan usaha yang minimal!

Aktifkan akses ke aplikasi yang di-host secara lokal dengan live reload di 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

Di Windows, jalankan :

ipconfig

Lalu cari alamat IPv4.

Kita dapat menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke dalam 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;

Pastikan Anda menggunakan alamat IP dan port yang benarSaya telah menggunakan port Angular default dalam contoh ini.

Sekarang, kita dapat menerapkan perubahan ini dengan menyalinnya ke proyek native kita:

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.

Anda dapat menyelesaikan proses deploy aplikasi satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu pada aplikasi Angular Anda, aplikasi akan secara otomatis reload dan menampilkan perubahan!

Pertimbangkan bahwa jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native. Hal ini karena file native telah berubah, dan tidak dapat dilakukan secara instan.

Perlu diingat bahwa Anda harus menggunakan IP dan port yang benar dalam konfigurasi. Blok code di atas menampilkan port default Angular 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 dapat menginstal plugin yang cukup sederhana dengan menjalankan:

npm i @capacitor/share

Tidak ada yang istimewa tentang plugin ini Bagikan plugin, tetapi tetap saja membuka dialog bagikan asli! Untuk hal ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kita, jadi mari kita ubah share() src/app/app.component.ts ke ini: Seperti yang disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:

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

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

npx cap sync

Selanjutnya, Anda dapat membuat aplikasi terasa lebih asli di iOS dan Android dengan __CAPGO_KEEP_0__ navigasi dan transisi, dan memperbaiki masalah layout iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong.

UI yang terasa asli dengan Capgo Navigasi dan Transisi Asli

Native-feeling UI with Capgo Native Navigation and Transitions

Ionic ]} untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Angular adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.

Untuk merasakan pengalaman mobile asli di aplikasi Angular + Capacitor , gunakan Capgo plugin alih-alih kit UI web seperti Konsta UI:

• @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar yang diblurkan di Android. Router Angular Anda menjaga keadaan jalur; plugin ini menguasai chrome native.
• @capgo/capacitor-transitions — transisi halaman jenis Ionic dan swipe-back di lapisan WebView iOS tanpa menerapkan UI Ionic.

Install kedua:

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

Konfigurasi navigasi native dengan mode CSS inset sehingga 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 diblurkan):

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

Bungkus halaman yang dilalui dengan cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum berpindah ke halaman lain. Jangan duplikat header atau footer web ketika navigasi asli menguasai permukaan tersebut.

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

Wilayah aman dengan Tailwind

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

bun add -D tailwind-capacitor

Di src/styles.css:

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

Gunakan alat bantu seperti pt-safe, pb-safe, dan px-safe sebagai ganti dari menambahkannya secara manual. env(safe-area-inset-*) Jika ada hal yang hilang untuk pengaturan Angular Anda, buka PR di GitHub.

Mengatasi Masalah Tata Letak iOS (Viewport, Area Aman, dan Horizontal Overflow)

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak overflow-x: hidden atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Lakukan periksaan-periksaan ini secara berurutan.

Pastikan tag meta viewport diterapkan dengan benar

Di src/index.html, atur tag meta viewport <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:

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

Bungkus semua konten halaman di dalam .app-shellPengaturan padding zona aman yang berulang di header, modal, dan wrapper layout sering membuat tampilan UI terpotong atau terlalu besar.

Dengan @capgo/tailwind-capacitor, Anda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal tersebut.

Atur Capacitor iOS contentInset ke never pertama

Dalam capacitor.config.ts, lebih baik menggunakan inset asli yang dinonaktifkan dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengontrol area yang aman:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'www',
  ios: {
    contentInset: 'never',
  },
};

Menggabungkan Capacitor’s automatic content inset dengan CSS env(safe-area-inset-*) padding adalah penyebab umum dari jarak ganda.

Temukan elemen yang benar-benar mengalir keluar

Biasanya, penyebabnya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel yang tetap, atau besar min-width.

Di Safari Web Inspector, jalankan:

[...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 Tailwind, gantilah w-screen dengan w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, padding area aman yang diulang, atau kontainer 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 dari Capgo, bahkan lebih mudah untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur dan perbaikan bug yang terkini.

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 Menggunakan @capgo/capacitor-aktivitas-hidup-asli untuk kemampuan asli dalam Menggunakan @capgo/capacitor-aktivitas-hidup-asli, @capgo/capacitor-aktivitas-hidup-asli untuk detail implementasi dalam @capgo/capacitor-aktivitas-hidup-asli, Menggunakan @capgo/capacitor-pemain-video-asli untuk kemampuan asli dalam Menggunakan @capgo/capacitor-pemain-video-asli, @capgo/capacitor-pemain-video-asli untuk detail implementasi dalam @capgo/capacitor-pemain-video-asli, dan Menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli dalam Menggunakan @capgo/capacitor-navigasi-asli.