Mari kita mulai dengan proyek baru Angular 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 beberapa langkah sederhana, sebagian besar aplikasi Angular 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 is a game-changer! You can effortlessly incorporate it into any web project, and it will wrap your application into a native webview, generating the native Xcode and Android Studio project for you. Plus, its plugins provide access to native device features like the camera via a JS bridge.
With Capacitor, you get a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it a breeze to integrate into your project. Trust me, you’ll be amazed at how effortless it is to achieve a fully functional native app with Capacitor!
Mengatur Aplikasi Angular Anda
Untuk membuat aplikasi Angular baru, jalankan perintah berikut:
ng new my-app
cd my-appUntuk membuat aplikasi Angular baru, jalankan perintah berikut:
Pilih ‘Angular’ ketika diminta untuk versi Angular. export "proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam"} package.json Fungsinya dapat digunakan untuk membangun dan menyalin proyek Angular:
{
"scripts": {
// ...
"build": "ng build --prod"
}
}Setelah menjalankan perintah buildAnda dapat mengenali aplikasi yang baru dist folder di root projek Anda.
Folder ini akan digunakan oleh Capacitor nanti, tapi sekarang kita harus mengaturnya dengan benar.
Menambahkan Capacitor ke Aplikasi Angular Anda
Mengemas aplikasi web apa pun ke dalam kontainer mobile native memerlukan beberapa langkah awal, tetapi setelah itu, cukup sederhana seperti menjalankan perintah tunggal. sync command.
Pertama-tama, kita dapat menginstal Capacitor CLI as a development dependency, and then set it up within our project. During the setup, you can press “enter” to accept the default values for name and bundle ID.
Kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.
Akhirnya, kita dapat 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 androidSekarang Anda seharusnya dapat melihat perubahan android and android folder di proyek Angular Anda.
Proyek asli native itu!
Untuk mengakses proyek Android nanti, Anda harus menginstal Studio Android. Untuk iOS, Anda memerlukan Mac dan harus menginstal Xcode.
Selain itu, Anda harus menemukan sebuah Konfigurasi 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 pembangunan Anda. Saat ini, itu tidak akurat.
yang harus mengarah ke hasil perintah build Anda. Saat ini, itu tidak akurat. capacitor.config.json file 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 syncPerintah 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 yang tepat di platform native sehingga dapat ditampilkan di aplikasi.
Selain itu, perintah sinkronisasi mungkin juga akan memperbarui platform-platform native dan menginstal plugin-plugin, sehingga ketika Anda menginstal plugin baru Capacitor plugin waktunya untuk menjalankannya npx cap sync lagi.
Tanpa menyadari, Anda sekarang sudah selesai, jadi mari kita lihat aplikasi di perangkat!
Bangun dan Rilis Aplikasi Nativ
Membangun aplikasi iOS memerlukan Anda memiliki Xcode terpasang, dan untuk aplikasi Android, Anda perlu memiliki Studio Android 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-proyek native tersebut:
npx cap open ios
npx cap open androidSetelah Anda telah mengatur proyek-proyek native Anda, mengirimkan aplikasi Anda ke perangkat yang terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengirimkan aplikasi Anda ke perangkat yang terhubung tanpa mengubah pengaturan apa pun. Contoh:
Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengirimkan aplikasi Anda ke perangkat nyata daripada hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan Anda melalui prosesnya (tetapi lagi, Anda harus mendaftar ke Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi pada perangkat yang terhubung, yang dapat Anda pilih di bagian atas. Contoh:
Selamat! Anda telah berhasil mengirimkan aplikasi web Angular Anda ke perangkat mobile. Contoh:
Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukannya selama pengembangan…
Capacitor Reload Langsung
Sekarang Anda mungkin sudah terbiasa dengan memiliki reload panas dengan semua kerangka kerja modern, dan kabar baiknya adalah bahwa Anda dapat memiliki fungsi yang sama pada perangkat seluler dengan upaya minimal!
Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan reload langsung pada 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 menemukan informasi ini dengan menjalankan perintah berikut di terminal:
ipconfig getifaddr en0Di Windows, jalankan :
ipconfigLalu cari alamat IPv4.
Kita bisa menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke dalam konfigurasi kita. 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 bisa menerapkan perubahan-perubahan ini dengan menyalinnya ke proyek native kita:
npx cap copyThe copy perintah ini mirip dengan syncAnda bisa mengdeploy aplikasi Anda lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu pada aplikasi Angular Anda, Salin perubahan yang dibuat ke folder web and configuration, without updating the native project.
Anda dapat mengdeploy aplikasi Anda sekali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi Angular Anda, Aplikasi akan secara otomatis reload dan menampilkan perubahan!
Pertimbangkan hal ini yaitu jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native Anda. Ini karena file native 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 Angular default untuk keperluan demonstrasi.
Menggunakan Plugin Capacitor
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/shareTidak ada yang istimewa tentang plugin Pengunggahan, tetapi tetap saja membuka dialog pengunggahan native! Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kita, jadi mari kita ubah share() fungsi dari aplikasi kami, jadi mari kita ubah src/app/app.component.ts ke poin 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 telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kita. Untuk melakukan ini, jalankan perintah berikut:
npx cap syncSetelah menekan tombol, Anda dapat menyaksikan dialog berbagi native yang indah dalam aksi!
Selanjutnya, Anda dapat membuat aplikasi terasa lebih native pada iOS dan Android dengan Capgo navigasi dan transisi, serta memperbaiki masalah layout iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong.
UI native yang indah dengan Capgo Navigasi dan Transisi Native
Saya telah bekerja selama bertahun-tahun dengan Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan Angular adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.
Untuk merasakan mobile native dalam aplikasi Angular + Capacitor, gunakan plugin Capgo yang lebih baik daripada kit UI web seperti Konsta UI:
- @capgo/capacitor-navigasi native — navbar native, tab bar Liquid Glass pada iOS, dan gaya tab bar yang diboroskan pada Android. Router Angular Anda tetap menjaga keadaan jalur; plugin ini menguasai chrome native.
- @capgo/capacitor-transisi — Transisi halaman Ionic dan pengembalian ke belakang iOS dengan swipe di layer WebView, tanpa menerapkan UI Ionic.
Pasang kedua:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurasi 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 kaca cair (iOS menggunakan rendering milik 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']);
}
}Bungkus halaman yang diarahkan dengan cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum menavigasi. Jangan duplikasi header atau footer web ketika navigasi native menguasai permukaan tersebut.
Lihat panduan lengkap: Menggunakan @capgo/capacitor-native-navigation And Gunakan @capgo/capacitor-transisi.
Wilayah aman dengan Tailwind
Untuk wilayah aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor Publikasi sebagai tailwind-capacitor di npm). Ini menyediakan safe-areas Menawarkan utilitas dan plugin-plugin Tailwind yang ramah Capacitor:
bun add -D tailwind-capacitorIni 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 sebaliknya dari menyebarkan env(safe-area-inset-*) oleh tangan. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang untuk pengaturan Angular Anda, buka PR di GitHub.
Pengaturan Layout iOS (Viewport, Area Aman, dan Overflows Horizontal)
Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal di iOS, menambahkan lebih banyak overflow-x: hidden atau mengatur tag viewport sendiri biasanya tidak dapat memperbaikinya. Lakukan periksaan-periksaan ini secara berurutan.
Pastikan tag meta viewport diterapkan dengan benar
Dalam src/index.html, tetapkan tag meta viewport di <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Pengaturan Area Aman iOS dari satu wrapper root saja
Buatlah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen-komponen nested yang berbeda:
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);
}Selimuti semua konten halaman di dalam .app-shellPengaturan padding area aman yang berulang di header, modal, dan wrapper layout sering membuat UI terlihat dipotong 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 itu.
Atur Capacitor iOS contentInset ke never pertama
Di capacitor.config.ts, lebih baik menggunakan inset asli yang dinonaktifkan dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengendalikan 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 padding CSS env(safe-area-inset-*) adalah penyebab umum dari jarak ganda.
Temukan elemen yang benar-benar mengalir melebihi
Penyebab biasanya adalah elemen yang menggunakan 100vw, Tailwind w-screen, lebar piksel tertentu, atau lebar yang sangat min-width.
In 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 ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screen, padding area aman yang diulang, atau kontainer dengan lebar tertentu — bukan dari tag meta viewport itu sendiri.
Kesimpulan
Capacitor adalah pilihan yang sangat baik untuk membangun aplikasi native berdasarkan proyek web yang sudah ada, menawarkan cara sederhana untuk berbagi code dan menjaga UI yang konsisten.
Dan dengan penambahan CapgoMudah sekali untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.
Jika Anda ingin belajar bagaimana 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 interface native, hubungkannya dengan Menggunakan @capgo/capacitor-aktivitas-aktif untuk kemampuan native di Menggunakan @capgo/capacitor-aktivitas-aktif @capgo/capacitor-aktivitas-aktif untuk detail implementasi di @capgo/capacitor-aktivitas-aktif Menggunakan @capgo/capacitor-player-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-video-player, @capgo/capacitor-player video untuk detail implementasi dalam @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli dalam Menggunakan @capgo/capacitor-native-navigation.
