Dalam tutorial ini, kita akan mulai dengan Angular app dan beralih ke ranah mobile app native menggunakan Capacitor. Anda juga bisa menambahkan Capgo Native Navigation and Transitions agar terasa lebih native, serta gunakan tailwind-capacitor untuk safe areas.
Capacitor memungkinkan Anda mengubah aplikasi web Angular menjadi mobile app native dengan mudah tanpa perlu modifikasi besar atau mempelajari skill baru seperti React Native.
Hanya dengan beberapa langkah mudah, sebagian besar aplikasi Angular bisa diubah menjadi aplikasi mobile.
Tutorial ini akan memandu Anda melalui prosesnya, mulai dari aplikasi Angular baru hingga menggunakan Capacitor untuk masuk ke ranah aplikasi mobile native. Anda juga bisa menggunakan Capgo Native Navigation, Transitions, dan tailwind-capacitor untuk safe areas.
Tentang Capacitor
CapacitorJS adalah game-changer! Anda bisa mengintegrasikannya dengan mudah ke proyek web apa pun, dan ia akan membungkus aplikasi Anda dalam native webview, sekaligus membuatkan proyek native Xcode dan Android Studio untuk Anda. Selain itu, plugin-nya memberi akses ke fitur native perangkat seperti kamera lewat JS bridge.
Dengan Capacitor, Anda mendapatkan aplikasi mobile native yang luar biasa tanpa setup rumit atau kurva belajar yang curam. API yang ramping dan fungsionalitasnya yang efisien membuatnya sangat mudah diintegrasikan ke proyek Anda. Percayalah, Anda akan takjub betapa mudahnya membuat aplikasi native yang berfungsi penuh dengan Capacitor!
Menyiapkan Aplikasi Angular Anda
Untuk membuat aplikasi Angular baru, jalankan perintah berikut:
ng new my-app
cd my-appPilih “Angular” saat diminta menentukan versi Angular.
Untuk membuat aplikasi mobile native, kita memerlukan ekspor dari proyek kita. Jadi, mari kita tambahkan script sederhana ke dalam package.json yang bisa dipakai untuk build dan copy proyek Angular:
{
"scripts": {
// ...
"build": "ng build --prod"
}
}Setelah menjalankan perintah tersebut build, Anda seharusnya bisa mengenali yang baru dist folder baru di root proyek Anda.
Folder ini akan digunakan oleh Capacitor nanti, tapi untuk saat ini, kita harus mengaturnya dengan benar.
Menambahkan Capacitor ke Aplikasi Angular Anda
Untuk membungkus web app ke dalam container mobile native, kita perlu melakukan beberapa langkah awal, tapi setelah itu cukup dengan menjalankan satu sync perintah.
Pertama, kita bisa menginstal Capacitor CLI sebagai dev dependency, lalu mengaturnya di dalam proyek. Saat setup, Anda bisa tekan “enter” untuk menerima nilai default untuk name dan bundle ID.
Selanjutnya, kita perlu menginstal paket inti serta paket yang relevan untuk platform iOS dan Android.
Terakhir, kita bisa menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root proyek 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 androidPada tahap ini, Anda seharusnya sudah bisa melihat iOS dan Android folder di dalam proyek Angular Anda.
Itu proyek native sungguhan!
Untuk mengakses proyek Android nantinya, Anda harus menginstal Android Studio. Untuk iOS, Anda memerlukan Mac dan sebaiknya menginstal Xcode.
Selain itu, Anda akan menemukan capacitor.config.ts file di proyek Anda, yang berisi beberapa pengaturan fundamental Capacitor yang digunakan saat sinkronisasi. Satu hal yang perlu Anda perhatikan adalah webDir, yang harus mengarah ke hasil perintah build Anda. Saat ini, nilainya tidak tepat.
Untuk memperbaikinya, buka file capacitor.config.json file dan perbarui webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Anda bisa mencobanya dengan menjalankan perintah berikut:
npm run build
npx cap syncPerintah pertama npm run build hanya akan melakukan build pada proyek Angular Anda dan menyalin hasil build statisnya, sementara perintah kedua npx cap sync akan menyinkronkan semua web code ke tempat yang tepat di platform native agar bisa ditampilkan di aplikasi.
Selain itu, perintah sync mungkin akan memperbarui platform native dan menginstal plugin, jadi saat Anda menginstal Plugin Capacitor saatnya menjalankan npx cap sync lagi.
Tanpa terasa, Anda sebenarnya sudah selesai, jadi mari lihat aplikasinya di perangkat!
Build dan Deploy aplikasi native
Untuk mengembangkan aplikasi iOS, Anda perlu memiliki Xcode terinstal, dan untuk aplikasi Android, Anda perlu memiliki Android Studio terinstal. Selain itu, jika Anda berencana mendistribusikan aplikasi di App Store, Anda harus mendaftar ke Apple Developer Program untuk iOS dan Google Play Console untuk Android.
Jika Anda baru mengenal pengembangan mobile native, Anda bisa menggunakan Capacitor CLI untuk membuka kedua proyek native dengan mudah:
npx cap open ios
npx cap open androidSetelah proyek native siap, deploy aplikasi ke perangkat yang terhubung sangatlah mudah. Di Android Studio, Anda cukup menunggu hingga semuanya siap, lalu deploy aplikasi ke perangkat tanpa mengubah pengaturan apa pun. Berikut contohnya:
Di Xcode, Anda perlu mengatur signing account untuk men-deploy aplikasi ke perangkat fisik, bukan sekadar simulator. Jika belum pernah melakukannya, Xcode akan memandu Anda melalui prosesnya (namun sekali lagi, Anda harus terdaftar di Developer Program). Setelah itu, Anda cukup menekan tombol play untuk menjalankan aplikasi di perangkat yang terhubung, yang bisa Anda pilih di bagian atas. Berikut contohnya:
Selamat! Anda telah berhasil men-deploy web app Angular Anda ke perangkat mobile. Berikut contohnya:
Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukan ini saat development…
Live Reload Capacitor
Sekarang, Anda mungkin sudah terbiasa dengan hot reload di semua framework modern, dan kabar baiknya adalah Anda bisa mendapatkan fitur yang sama di perangkat mobile dengan usaha minimal!
Aktifkan akses ke aplikasi lokal Anda dengan live reload di jaringan Anda dengan membuat aplikasi Capacitor memuat konten dari URL tertentu.
Langkah pertama adalah mencari tahu alamat IP lokal Anda. Jika menggunakan Mac, Anda bisa mengetahuinya dengan menjalankan perintah berikut di terminal:
ipconfig getifaddr en0Di Windows, jalankan:
ipconfigLalu cari alamat IPv4.
Kita bisa menginstruksikan Capacitor untuk memuat aplikasi langsung dari server dengan menambahkan entri lain ke capacitor.config.ts file Anda:
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 untuk menggunakan IP dan port yang benar, saya menggunakan port default Angular dalam contoh ini.
Sekarang, kita bisa menerapkan perubahan ini dengan menyalinnya ke proyek native kita:
npx cap copyPanduan copy perintahnya mirip dengan sync, tapi hanya akan menyalin perubahan yang dibuat di folder web dan konfigurasi, tanpa memperbarui proyek native.
Sekarang Anda bisa deploy aplikasi sekali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi Angular Anda, aplikasi akan otomatis reload dan menampilkan perubahannya!
Perlu diingat bahwa jika Anda menginstal plugin baru seperti kamera, Anda tetap perlu melakukan rebuild pada proyek native. Ini karena file native berubah, dan tidak bisa dilakukan secara on the fly.
Perhatikan bahwa Anda harus menggunakan IP dan port yang benar di konfigurasi Anda. Blok code di atas menunjukkan port default Angular untuk keperluan demonstrasi.
Menggunakan Plugin Capacitor
Mari kita lihat cara menggunakan plugin Capacitor secara langsung, yang sudah kami sebutkan beberapa kali sebelumnya. Untuk melakukannya, kita bisa menginstal plugin yang cukup simpel dengan menjalankan:
npm i @capacitor/shareTidak ada yang istimewa dari plugin Share, tapi tetap memunculkan dialog share bawaan! Untuk ini, kita hanya perlu mengimpor package dan memanggil share() fungsi dari aplikasi kita, jadi mari kita ubah src/app/app.component.ts menjadi:
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, saat menginstal plugin baru, kita perlu melakukan operasi sync lalu redeploy aplikasi ke perangkat. Untuk melakukannya, jalankan perintah berikut:
npx cap syncSetelah menekan tombol, Anda bisa melihat dialog share native yang keren langsung beraksi!
Selanjutnya, Anda bisa membuat aplikasi terasa lebih native di iOS dan Android dengan navigasi dan transisi Capgo, serta memperbaiki masalah layout iOS yang umum menyebabkan horizontal overflow atau safe area terpotong.
UI yang terasa native dengan Native Navigation dan Transitions dari Capgo
Saya sudah bertahun-tahun bekerja dengan Ionic untuk membangun aplikasi cross-platform, tapi mengintegrasikannya dengan Angular terasa hacky dan jarang sepadan kalau Anda sudah punya Tailwind CSS.
Untuk mendapatkan feel mobile native di aplikasi Angular + Capacitor, gunakan plugin Capgo alih-alih UI kit khusus web seperti Konsta UI:
- @capgo/capacitor-native-navigation — navbar native, Liquid Glass tab bar di iOS, dan gaya tab bar blur di Android. Angular router Anda mempertahankan state route; plugin-nya yang mengelola native chrome.
- @capgo/capacitor-transitions — transisi halaman ala Ionic dan fitur iOS edge swipe-back di layer WebView, tanpa harus memakai Ionic UI.
Install keduanya:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurasi navigasi native dengan mode inset CSS agar konten web menyesuaikan dengan bar native:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Render Liquid Glass tab bar (iOS menggunakan rendering dari sistem; Android menggunakan backdrop WebView yang blur):
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 di-route dengan cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum navigasi. Jangan duplikasi header atau footer web kalau navigasi native sudah menangani area tersebut.
Lihat panduan lengkapnya: Menggunakan @capgo/capacitor-native-navigation dan Menggunakan @capgo/capacitor-transitions.
Safe areas dengan Tailwind
Untuk safe area perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai tailwind-capacitor pada npm). Ini menyediakan safe-areas utilitas dan plugin Tailwind lain yang kompatibel dengan Capacitor:
bun add -D tailwind-capacitorDi src/styles.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Gunakan utilitas seperti pt-safe, pb-safe, dan px-safe daripada menyisipkan env(safe-area-inset-*) secara manual. Proyek ini dikembangkan secara aktif — jika ada yang kurang untuk setup Angular Anda, buka PR di GitHub.
Memperbaiki Masalah Layout iOS (Viewport, Safe Area, dan Horizontal Overflow)
Jika konten terlihat terpotong, bergeser, atau bisa di-scroll secara horizontal di iOS, menambahkan lebih banyak overflow-x: hidden atau hanya mengutak-atik tag viewport saja biasanya tidak memperbaikinya. Lakukan pemeriksaan ini secara berurutan.
Pastikan meta tag viewport diterapkan dengan benar
Di src/index.html, atur tag meta viewport di <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Tangani iOS safe area hanya dari satu root wrapper
Buat satu app shell dan terapkan safe area padding di sana — bukan di beberapa komponen bersarang:
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 seluruh konten halaman di dalam .app-shell. Padding safe-area yang dobel di header, modal, dan wrapper layout sering membuat UI terlihat terpotong atau terlalu besar.
Dengan @capgo/tailwind-capacitor, Anda bisa menggunakan padding yang sama dengan utility seperti pt-safe pb-safe px-safe pada satu shell tersebut.
Atur Capacitor iOS contentInset ke never dulu
Di capacitor.config.ts, lebih baik nonaktifkan native inset dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengatur safe area:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'www',
ios: {
contentInset: 'never',
},
};Mencampur automatic content inset dari Capacitor dengan CSS env(safe-area-inset-*) padding sering kali menjadi penyebab spasi ganda.
Temukan elemen yang benar-benar overflow
Penyebab umumnya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar pixel tetap, atau ukuran yang 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, ganti w-screen dengan w-full jika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, duplikasi safe-area padding, atau container berukuran tetap — bukan dari viewport meta tag itu sendiri.
Kesimpulan
Capacitor adalah pilihan tepat untuk membangun aplikasi native dari proyek web yang sudah ada, memberikan cara simpel untuk berbagi code dan menjaga UI tetap konsisten.
Dan dengan hadirnya Capgo, makin mudah menambahkan live updates ke aplikasi Anda, sehingga pengguna Anda selalu bisa mengakses fitur terbaru dan perbaikan bug.
Jika Anda ingin mempelajari cara menambahkan Capgo ke aplikasi Angular Anda, simak artikel berikut:
Lanjutkan 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, hubungkan dengan Menggunakan @capgo/capacitor-live-activities untuk kemampuan native di Menggunakan @capgo/capacitor-live-activities, @capgo/capacitor-live-activities untuk detail implementasi di @capgo/capacitor-live-activities, Menggunakan @capgo/capacitor-video-player untuk kapabilitas native saat menggunakan @capgo/capacitor-video-player, @capgo/capacitor-video-player untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kapabilitas native saat menggunakan @capgo/capacitor-native-navigation.
