Membangun Aplikasi Seluler dengan Angular dan Capacitor

Dalam tutorial ini, kita akan memulai dengan aplikasi Angular 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, serta menggunakan tailwind-__CAPGO_KEEP_2__ untuk area-area yang aman. __CAPGO_KEEP_0__ 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. 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.

Tutorial ini akan mengantarkan Anda melalui prosesnya, mulai dari aplikasi Angular baru dan kemudian mengintegrasikan Capacitor untuk beralih ke aplikasi mobile native. Anda juga dapat menggunakan __CAPGO_KEEP_1__ Navigasi, Transisi, dan tailwind-__CAPGO_KEEP_2__ untuk area-area yang aman.

Tentang __CAPGO_KEEP_0__

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.

About Capacitor

Pengembang Konten

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

Mengatur 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 native, kami memerlukan export proyek kami. Oleh karena itu, 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 build, Anda seharusnya dapat melihat folder baru di root proyek Anda. dist export

Folder ini akan digunakan oleh Capacitor nanti, tetapi untuk saat ini, kita harus mengaturnya dengan benar.

Menambahkan Capacitor ke Aplikasi Angular Anda

Untuk mengemas aplikasi web apa pun ke dalam kontainer mobile native, kita harus mengikuti beberapa langkah awal, tetapi setelah itu, hal itu sebenarnya cukup sederhana seperti menjalankan perintah tunggal. sync Pertama-tama, kita dapat menginstal

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI Kemudian, kita perlu menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Akhirnya, kita dapat menambahkan platform, dan __CAPGO_KEEP_0__ akan membuat folder untuk setiap platform di root proyek kita:

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

ios dan Android android folder-folder di proyek Angular Anda.

Itu adalah proyek asli native!

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

Selain itu, Anda harus menemukan file capacitor.config.ts 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 direktori web 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-platform native sehingga dapat ditampilkan dalam aplikasi.

Selain itu, perintah sinkronisasi mungkin juga memperbarui platform-platform native dan menginstal plugin, sehingga ketika Anda menginstal plugin baru Capacitor waktu yang tepat untuk menjalankan npx cap sync lagi.

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

Buat dan Deploy aplikasi native

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

Jika Anda baru mengenal pengembangan mobile native, Anda dapat menggunakan Capacitor CLI untuk dengan mudah membuka proyek native:

npx cap open ios
npx cap open android

Setelah Anda telah mengatur proyek native Anda, mengdeploy aplikasi ke perangkat terhubung sangat mudah. Di Android Studio, Anda hanya perlu menunggu sampai segalanya siap, dan Anda dapat mengdeploy aplikasi ke perangkat terhubung tanpa mengubah pengaturan apa pun. Contoh berikut:

Di Xcode, Anda perlu mengatur akun signing Anda untuk mengdeploy aplikasi 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. Contoh berikut:

Selamat! Anda telah berhasil menginstal aplikasi web Angular Anda ke perangkat mobile. Berikut contoh:

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

Capacitor Live Reload

Sampai sekarang, Anda mungkin sudah terbiasa dengan hot reload pada semua framework modern, dan kabar baiknya adalah Anda bisa memiliki fungsi yang sama pada perangkat mobile dengan sedikit usaha!

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan live reload 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 bisa menemukan informasi ini dengan menjalankan perintah berikut di terminal:

ipconfig getifaddr en0

Pada Windows, jalankan :

ipconfig

Lalu cari alamat IPv4.

Kita bisa menginstruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan entri lain ke file kami. 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 benar, Saya telah menggunakan port Angular default dalam contoh ini.

Sekarang, kita bisa menerapkan perubahan-perubahan ini dengan menyalinnya ke proyek native kami:

npx cap copy

Perintah ini mirip dengan copy , tetapi hanya akan syncmenyalin perubahan yang dibuat pada folder web dan konfigurasi, tanpa memperbarui proyek native. ]} ]} ]}

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

Pertahankanlah bahwa jika kamu menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native kamu. Ini karena file native yang berubah, dan tidak bisa dilakukan secara instan.

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

Menggunakan Capacitor Plugins

Marilah 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

Tidak ada yang istimewa tentang plugin Share, tapi tetap saja menampilkan dialog bagikan native! Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi, jadi mari kita ubah share() __CAPGO_KEEP_0__ targetLanguage: Indonesia protectedTokens: ["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"]

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

texts: ["src/app/app.component.ts","ke menuju ini:","Seperti yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kami. Untuk melakukan ini, jalankan perintah berikut:","Setelah menekan tombol, Anda dapat menyaksikan dialog berbagi asli native dalam aksi!"

npx cap sync

Selanjutnya, Anda dapat membuat aplikasi terasa lebih native pada iOS dan Android dengan __CAPGO_KEEP_0__ navigasi dan transisi, dan memperbaiki masalah tata letak iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong.","Antarmuka native yang indah dengan __CAPGO_KEEP_0__ Navigasi dan Transisi Native","Saya telah bekerja selama tahun-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 di aplikasi Angular + __CAPGO_KEEP_0__ , gunakan __CAPGO_KEEP_1__ plugin alih-alih kit UI web seperti Konsta UI:","@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation"]

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.

Native-feeling UI with Capgo Native Navigation and Transitions

Selanjutnya, Anda dapat membuat aplikasi terasa lebih native pada iOS dan Android dengan __CAPGO_KEEP_0__ navigasi dan transisi, dan memperbaiki masalah tata letak iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong.","Antarmuka native yang indah dengan __CAPGO_KEEP_0__ Navigasi dan Transisi Native","Saya telah bekerja selama tahun-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 di aplikasi Angular + __CAPGO_KEEP_0__ , gunakan __CAPGO_KEEP_1__ plugin alih-alih kit UI web seperti Konsta UI:","@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation"] protectedTokens: ["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"] texts: ["src/app/app.component.ts","ke menuju ini:","Seperti yang telah disebutkan sebelumnya, ketika menginstal plugin baru, kita perlu melakukan operasi sinkronisasi dan kemudian redeploy aplikasi ke perangkat kami. Untuk melakukan ini, jalankan perintah berikut:","Setelah menekan tombol, Anda dapat menyaksikan dialog berbagi asli native dalam aksi!" Selanjutnya, Anda dapat membuat aplikasi terasa lebih native pada iOS dan Android dengan __CAPGO_KEEP_0__ navigasi dan transisi, dan memperbaiki masalah tata letak iOS yang umum yang menyebabkan overflow horizontal atau area aman yang dipotong.","Antarmuka native yang indah dengan __CAPGO_KEEP_0__ Navigasi dan Transisi Native","Saya telah bekerja selama tahun-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 di aplikasi Angular + __CAPGO_KEEP_0__ , gunakan __CAPGO_KEEP_1__ plugin alih-alih kit UI web seperti Konsta UI:","@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation"].

For a native mobile feel in an Angular + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

• @capgo/capacitor-native-navigation — navbar native, tab bar Liquid Glass pada iOS, dan gaya tab bar yang diboroskan pada Android. Router Angular Anda menjaga keadaan jalur; plugin ini menguasai chrome native.
• @capgo/capacitor-transisi — transisi halaman dengan gaya Ionic dan swipe balik pada iOS di layer WebView, tanpa menerima UI Ionic.

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

Terapkan halaman yang diarahkan dalam cap-router-outlet, cap-page, dan cap-content, dan panggil setDirection('forward') atau setDirection('back') sebelum berpindah. Jangan duplikat header atau footer web ketika navigasi native menguasai permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-native-navigation dan Menggunakan @capgo/capacitor-transitions.

Wilayah aman dengan Tailwind

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

bun add -D tailwind-capacitor

Dalam src/styles.css:

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

Gunakan fasilitas seperti pt-safe, pb-safe, dan px-safe bukan dengan menyebarkan secara manual. Projek ini aktif dikembangkan — jika ada sesuatu yang hilang 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 dapat memperbaikinya. Kerjakan cek-cek ini secara berurutan. overflow-x: hidden Pastikan tag meta viewport diterapkan dengan benar

Di

, tetapkan tag meta viewport di src/index.htmlAtasi area aman iOS dari satu wrapper root saja <head>:

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

Buatlah shell aplikasi tunggal dan terapkan padding area aman di sana — bukan di komponen-komponen nested yang berbeda-beda:

Bungkus semua konten halaman di dalamnya

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

Buatlah shell aplikasi tunggal dan terapkan padding area aman di sana — bukan di komponen-komponen nested yang berbeda-beda: .app-shell. Padding area yang aman di header, modal, dan wrapper layout sering membuat UI terlihat dipotong atau terlalu besar.

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

Atur Capacitor iOS contentInset ke never pertama

Dalam capacitor.config.ts, lebih baik mengaktifkan inset native dan biarkan CSS (atau Native Navigation’s contentInsetMode: 'css') mengontrol area 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-*) Penambahan padding adalah penyebab umum dari penambahan spasi ganda.

Cari elemen yang sebenarnya mengalami overflow.

Biasanya, penyebabnya adalah elemen yang menggunakan 100vwTailwind w-screen, lebar piksel tetap, atau lebar yang sangat min-width.

Dalam 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, gantikan w-screen dengan w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screenpenambahan padding 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 dari Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.

If you would like to learn how to add Capgo to your Angular app, take a look at the next article:

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

Teruslah dari Membangun Aplikasi Mobile dengan Angular dan __CAPGO_KEEP_0__ Building Mobile Apps with Angular and Capacitor Membangun Aplikasi Mobile dengan Angular dan __CAPGO_KEEP_0__ Using @capgo/capacitor-live-activities Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan asli dalam Menggunakan @capgo/capacitor-aktivitas-hidup @capgo/capacitor-aktivitas-hidup Menggunakan @capgo/capacitor-player-video untuk kemampuan asli dalam Menggunakan @capgo/capacitor-player-video, @capgo/capacitor-player-video untuk detail implementasi dalam @capgo/capacitor-player-video, dan Menggunakan @capgo/capacitor-navigasi-asli untuk kemampuan asli dalam Menggunakan @capgo/capacitor-navigasi-asli.