Apa yang akan kita lakukan dalam tutorial ini adalah memulai dengan aplikasi baru dan kemudian beralih ke aplikasi mobile native menggunakan __CAPGO_KEEP_0__. Anda juga dapat menambahkan __CAPGO_KEEP_1__ Navigasi dan Transisi Native untuk merasakan aplikasi mobile native, dan menggunakan tailwind-__CAPGO_KEEP_2__ untuk area-area yang aman. Angular Aplikasi baru dan kemudian beralih ke 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-area yang aman.
Capacitor memungkinkan Anda untuk dengan mudah mengubah aplikasi web Angular Anda menjadi aplikasi mobile native tanpa memerlukan perubahan signifikan atau belajar kemampuan baru seperti React Native.
Dengan beberapa langkah sederhana, sebagian besar aplikasi Angular dapat diubah menjadi aplikasi mobile.
Tutorial ini akan memandu Anda melalui prosesnya, mulai dari aplikasi Angular baru dan kemudian mengintegrasikan Capacitor untuk beralih ke aplikasi mobile native. Anda juga dapat menggunakan Capgo Navigasi, Transisi, dan tailwind-capacitor untuk area-area yang aman.
Tentang Capacitor
CapacitorJS adalah perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke proyek web apa pun, dan itu akan membungkus aplikasi Anda ke dalam native webview, menghasilkan proyek Xcode dan Android Studio native untuk Anda. Selain itu, plugin-pluginnya memberikan akses ke fitur perangkat native seperti kamera melalui jembatan JS.
Dengan Capacitor, Anda mendapatkan aplikasi mobile native yang fantastis tanpa setup yang rumit atau kurva belajar yang curam. Fungsi API dan Capacitor yang tipis dan terstruktur membuatnya mudah untuk diintegrasikan ke proyek Anda. Percayalah, Anda akan terkejut dengan seberapa mudahnya mencapai aplikasi mobile native yang sepenuhnya berfungsi dengan Capacitor!
Mengatur Aplikasi Angular Anda
Untuk membuat aplikasi Angular baru, jalankan perintah berikut:
ng new my-app
cd my-appPilih "Angular" ketika diminta versi Angular.
Membuat aplikasi mobile native memerlukan eksport projek kita. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam package.json yang dapat digunakan untuk membangun dan menyalin projek Angular:
{
"scripts": {
// ...
"build": "ng build --prod"
}
}Setelah menjalankan perintah build, Anda seharusnya dapat melihat folder baru di root projek Anda. dist Folder ini akan digunakan oleh kemudian, tetapi 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
eksport sync perintah.
Pertama-tama, kita dapat menginstal Capacitor CLI sebagai dependensi pengembangan, dan kemudian mengaturnya dalam proyek kita. Selama pengaturan, Anda dapat menekan “enter” untuk menerima nilai default untuk nama dan ID paket.
Kemudian, kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.
Finally, we can add the platforms, and Capacitor will create folders for each platform at the root of our project:
# 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__CAPGO_KEEP_0__ akan membuat folder untuk setiap platform di root proyek kita: Dengan titik ini, Anda seharusnya dapat melihat folder baru iOS dan
context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `dan` (Dan).
To akses proyek Android nanti, Anda harus menginstal Android Studio. Untuk iOS, Anda membutuhkan Mac dan harus menginstal Xcode.
Selain itu, Anda harus menemukan sebuah capacitor.config.ts file di proyek Anda, yang berisi beberapa pengaturan dasar Capacitor yang digunakan selama sinkronisasi. Yang perlu Anda perhatikan hanyalah webDircontext: direktori web
, yang harus mengarah ke hasil perintah build Anda. Saat ini, itu tidak akurat. capacitor.config.json __CAPGO_KEEP_0__.config.json webDir:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Silakan coba dengan menjalankan perintah-perintah berikut:
npm run build
npx cap syncPerintah pertama npm run build Akan hanya membangun proyek Angular Anda dan menyalin pembangunan statis, sedangkan perintah kedua npx cap sync Akan sinkronkan semua web code ke tempat-tempat yang tepat dari platform-platform native sehingga dapat ditampilkan dalam aplikasi.
Selain itu, perintah sinkronisasi mungkin juga memperbarui platform-platform native dan menginstal plugin-plugin, sehingga ketika Anda menginstal plugin baru __CAPGO_KEEP_0__ Capacitor plugins sekarang saatnya untuk menjalankan npx cap sync lagi.
Tidak menyadari, Anda sudah selesai, jadi mari kita lihat aplikasi di perangkat!
Bangun dan Deploy Aplikasi Nativ
Untuk mengembangkan aplikasi iOS, Anda memerlukan Xcode terpasang, dan untuk aplikasi Android, Anda membutuhkan untuk 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 berikut:
npx cap open ios
npx cap open androidSetelah Anda telah mengatur proyek native Anda, mengdeploy aplikasi Anda ke perangkat terhubung sangatlah mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengdeploy aplikasi Anda ke perangkat terhubung tanpa mengubah pengaturan apa pun. Berikut adalah contoh:
Di Xcode, Anda perlu mengatur akun tanda tangan Anda untuk mengdeploy aplikasi Anda ke perangkat nyata bukan hanya simulator. Jika Anda belum pernah melakukannya sebelumnya, Xcode akan mengarahkan Anda melalui prosesnya (tetapi lagi, Anda harus mendaftar di Program Pengembang). Setelah itu, Anda hanya perlu menekan tombol play untuk menjalankan aplikasi di perangkat terhubung, yang dapat Anda pilih di bagian atas. Berikut adalah contoh:
Selamat! Anda telah berhasil mengdeploy aplikasi web Angular Anda ke perangkat mobile. Berikut adalah contoh:
Tapi tunggu dulu, ada cara yang lebih cepat untuk melakukannya selama pengembangan...
Capacitor Reload Langsung
Dengan kemajuan ini, Anda mungkin sudah terbiasa dengan reload panas dengan semua kerangka kerja modern, dan kabar baiknya adalah bahwa Anda bisa memiliki fungsi yang sama di perangkat seluler dengan sedikit usaha!
Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan reload panas 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 bisa menemukan hal 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 file: capacitor.config.ts __CAPGO_KEEP_0__
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 benar, saya telah menggunakan port Angular default dalam contoh ini.
Sekarang, kita dapat menerapkan perubahan-perubahan ini dengan menyalinnya ke proyek asli kita:
npx cap copyPerintah ini mirip dengan copy , tetapi hanya akan syncmenyalin perubahan-perubahan yang dibuat pada folder web dan konfigurasi, tanpa mengupdate proyek asli. Anda dapat menyelesaikan proses deploy aplikasi satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda membuat perubahan pada aplikasi Angular Anda,
aplikasi akan secara otomatis reload dan menampilkan perubahan-perubahan! Perintah ini mirip dengan
Perlu diingat bahwa jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native Anda. Ini karena file native telah berubah, dan tidak dapat dilakukan secara langsung.
Penting untuk diingat bahwa Anda harus menggunakan IP dan port yang benar dalam konfigurasi. Blok code di atas menunjukkan 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() src/app/app.component.ts ke ini: Seperti yang telah 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:
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'
});
}
}sync
npx cap syncSetelah menekan tombol, Anda dapat menyaksikan dialog berbagi asli yang indah dalam aksi!
Selanjutnya, Anda dapat membuat aplikasi terasa lebih asli di iOS dan Android dengan Capgo navigasi dan transisi, dan memperbaiki masalah tata letak iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong.
Tampilan UI yang terasa asli dengan Capgo Navigasi dan Transisi Asli
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 asli di aplikasi Angular + Capacitor, gunakan plugin-plugin Capgo daripada kit UI web seperti Konsta UI:
- @capgo/capacitor-native-navigation — navbar asli, Liquid Glass tab bar di iOS, dan gaya tab bar yang diboroskan di Android. Pengaturan jalur Angular Anda tetap; plugin ini menguasai chrome asli.
- @capgo/capacitor-transitions — transisi halaman Ionic dan swipe-back di lapisan WebView di iOS, tanpa menerima UI Ionic.
Install kedua:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurasi navigasi native dengan mode inset CSS 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 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']);
}
}Wrap halaman yang diarahkan dalam cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') context: HTML fragment teks dari string UI Capgo yang lebih panjang (parent key `alternatives_cta_questions`). Halaman/area: Halaman perbandingan pembaruan hidup Capacitor. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman alternatives.astro. Simpanlah istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `alternatives_cta_questions` (Pertanyaan Tindakan Alternatif). | Fragment teks HTML dari string UI Capgo yang lebih panjang (parent key `appflow_cta_questions`). Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman ionic-appflow.astro. Simpanlah istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `appflow_cta_questions` (Pertanyaan Tindakan Appflow). | Fragment teks HTML dari string UI Capgo yang lebih panjang (parent key `capwesome_cta_questions`). Halaman/area: Halaman perbandingan Capawesome. Peran: Paragraf pemasaran atau hukum yang panjang. Dilihat di: halaman capwesome.astro. Simpanlah istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `capwesome_cta_questions` (Pertanyaan Tindakan Capwesome). | Fragment teks HTML dari string UI Capgo yang lebih panjang (parent key `consulting_faq_subtitle`). Halaman/area: Halaman layanan konsultasi. Peran: Judul atau tagline bagian. Dilihat di: halaman consulting.astro. Simpanlah istilah produk/brand dan istilah developer Capgo secara tepat. Kunci pesan `consulting_faq_subtitle` (Judul FAQ Konsultasi). | Halaman/area: Halaman perbandingan/migrasi pemasaran Appflow. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman ionic-appflow.astro, halaman ionic-enterprise-plugins.astro, halaman solusi/ionic-enterprise-plugins.astro. Kunci pesan `appflow_plugins_or` (Appflow Plugins Atau).
sebelum navigasi. Jangan duplikasi header atau footer web ketika navigasi native menguasai permukaan-permukaan tersebut. Using @capgo/capacitor-native-navigation Menggunakan @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation Using @capgo/capacitor-transitions.
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 utilitas dan plugin Tailwind lainnya yang Capacitor-ramah:
bun add -D tailwind-capacitorDi src/styles.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Pakai utilitas seperti pt-safe, pb-safe, dan px-safe sebaliknya dari menyebarkan env(safe-area-inset-*) secara manual. Projek ini aktif dikembangkan — jika ada yang hilang untuk pengaturan Angular Anda, buka PR di GitHub.
Memperbaiki Masalah Tampilan iOS (Viewport, Area Aman, dan Overlalu Horizontal)
Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal pada iOS, menambahkan lebih banyak overflow-x: hidden atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Jalankan 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" />Menangani 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-shell. Mengulangi padding area aman di header, modal, dan wrapper tata letak sering membuat UI terlihat dipotong atau terlalu besar.
Dengan @capgo/tailwind-capacitoranda dapat mengungkapkan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal itu.
Set Capacitor iOS contentInset ke never context: Halaman/area: Halaman produk live update. Peran: Label UI pendek atau item navigasi. Kunci pesan `live_update_dynamic_label_to` (Label Dinamis Live Update To).
pertama capacitor.config.tsDi contentInsetMode: 'css', lebih baik menggunakan inset asli yang dinonaktifkan dan biarkan CSS (atau Native Navigation’s)
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-*) Menggabungkan __CAPGO_KEEP_0__’s automatic content inset dengan CSS
padding adalah penyebab umum dari jarak ganda.
Cari elemen yang benar-benar mengalami overflownya 100vwTailwind w-screenlebar piksel tetap, atau besar 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 keluaran horizontal datang dari 100vw / w-screenduplikasi padding area aman, 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 Capgokonteks: Fragment teks HTML dari string Capgo yang lebih panjang (kunci induk `submitting_a_pr_to_capgo`). Halaman/area: Situs web pemasaran Capgo. Peran: Kalimat copy situs web. Dilihat di: halaman contributing.astro. Simpan Capgo produk/merek dan istilah pengembang secara tepat. Kunci pesan `submitting_a_pr_to_capgo` (Mengirimkan PR ke Capgo).
Mengapa Anda ingin menambahkan Capgo ke aplikasi Angular Anda? Baca artikel selanjutnya untuk mengetahui lebih lanjut:
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 untuk kemampuan native di Menggunakan @capgo/capacitor-aktivitas-hidup, @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup, Menggunakan @capgo/capacitor-pemain-video untuk kemampuan native di Menggunakan @capgo/capacitor-pemain-video, @capgo/capacitor-pemain-video untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan asli di Menggunakan @capgo/capacitor-native-navigation.
