Membangun Aplikasi Mobile dengan Angular dan Capacitor

Dalam tutorial ini, kita akan memulai dengan aplikasi baru Angular dan beralih ke aplikasi mobile native menggunakan Capacitor. Jika diinginkan, Anda juga dapat menambahkan Konsta UI untuk meningkatkan antarmuka mobile dengan Tailwind CSS.

Capacitor 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.

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

Tutorial ini akan mengantumkan Anda melalui prosesnya, mulai dari aplikasi Angular baru dan kemudian mengintegrasikan Capacitor untuk memasuki ranah aplikasi mobile native. Selain itu, Anda juga dapat menggunakan Konsta UI untuk meningkatkan UI mobile Anda dengan Tailwind CSS.

Tentang Capacitor

CapacitorJS adalah perubahan besar! Anda dapat dengan mudah mengintegrasikannya ke dalam proyek web apa pun, dan itu akan menggabungkan aplikasi Anda ke dalam tampilan web native, 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 yang tipis dan fungsionalitas yang diperbarui membuatnya mudah untuk diintegrasikan ke dalam 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-app

Pilih ‘Angular’ ketika diminta untuk versi Angular.

Untuk membuat aplikasi mobile native, kita memerlukan eksport __CAPGO_KEEP_0__ dari proyek kami. Oleh karena itu, mari kita tambahkan skrip yang sederhana ke dalam file package.json kami yang dapat digunakan untuk membangun dan menyalin proyek Angular: Setelah menjalankan perintah , Anda seharusnya dapat melihat folder baru di root proyek Anda. Folder ini akan digunakan oleh __CAPGO_KEEP_0__ nanti, tetapi untuk saat ini, kita harus mengaturinya dengan benar.

{
  "scripts": {
    // ...
    "build": "ng build --prod"
  }
}

Menambahkan __CAPGO_KEEP_0__ ke Aplikasi Angular Anda buildUntuk mengemas aplikasi web ke dalam kontainer mobile native, kita harus mengikuti beberapa langkah awal, tetapi setelah itu, hanya perlu menjalankan perintah tunggal. dist Langkah pertama, kita dapat menginstal

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your Angular App

Dengan mengikuti langkah-langkah ini, Anda dapat dengan mudah mengemas aplikasi web Anda ke dalam kontainer mobile native menggunakan Capgo. sync Jadi, mari kita mulai!

Pertama-tama, kita harus menginstal Capacitor CLI sebagai dependensi pengembangan, dan kemudian atur dalam proyek kami. 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.

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

# 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 folder di proyek Angular Anda.

Itu adalah proyek native asli!

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 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 pembangunan statis, sementara perintah kedua npx cap sync akan sinkronkan semua web code ke tempat-tempat yang tepat dari platform native sehingga dapat ditampilkan dalam aplikasi.

Selain itu, perintah sinkronisasi mungkin juga memperbarui platform native dan menginstal plugin, jadi ketika Anda menginstal plugin baru Capacitor waktunya untuk menjalankan npx cap sync lagi.

Tanpa menyadari, Anda sekarang sudah selesai, jadi mari 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 Studio Android sudah terinstal. 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-baru ini memulai pengembangan mobile native, Anda dapat menggunakan __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ untuk dengan mudah membuka proyek native:

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

android-studio-run

xcode-run

Selamat! Anda telah berhasil mengdeploy aplikasi web Angular Anda ke perangkat mobile. Contoh berikut ini:

angular-mobile-app

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

__CAPGO_KEEP_0__ Live Reload

Capacitor Live Reload

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Live Reload di perangkat seluler dengan sedikit usaha!

Aktifkan akses ke aplikasi Anda yang dihosting secara lokal dengan reload yang hidup 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 menemukan informasi ini 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 file kami: capacitor.config.ts Pastikan Anda menggunakan

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;

alamat IP dan port yang benar file: config.xml, Saya telah menggunakan port Angular default dalam contoh ini.

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

npx cap copy

The copy Perintah ini mirip dengan sync, tetapi hanya menyalin perubahan yang dibuat ke folder web dan konfigurasi, tanpa memperbarui proyek native.

Anda dapat mengunduh aplikasi Anda satu kali lagi melalui Android Studio atau Xcode. Setelah itu, jika Anda mengubah sesuatu di aplikasi Angular Anda, aplikasi akan secara otomatis diperbarui dan menampilkan perubahan!

Perlu diingat bahwa jika Anda menginstal plugin baru seperti kamera, masih memerlukan pembangunan ulang proyek native. Ini karena file native telah berubah, dan tidak dapat dilakukan secara langsung.

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

Menggunakan Capacitor Plugins

Mari kita lihat cara 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, Tapi plugin ini tetap saja membawa dialog berbagi native! Untuk ini, kita hanya perlu mengimport paket dan memanggil fungsi yang sesuai dari aplikasi kita, jadi mari kita ubahsrc/app/app.component.ts share() ke ini: 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: Setelah menekan tombol, Anda dapat menyaksikan dialog berbagi native yang indah dalam aksi!

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

Menambahkan Konsta UI

npx cap sync

]}

src/app/app.component.ts

Untuk menggunakan Konsta UI di aplikasi Nuxt 3 Anda, Anda memerlukan __CAPGO_KEEP_0__ sudah terinstall dan untuk menginstal paket:

npm i konsta

Selain itu, Anda perlu memodifikasi file: tailwind.config.js akan memperluas konfigurasi CSS Tailwind default (atau yang Anda buat sendiri) dengan beberapa variasi dan utilitas bantuan yang diperlukan untuk Konsta UI.

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{html,ts}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig Sekarang kita perlu mengatur komponen utama

untuk dapat menetapkan beberapa parameter global (seperti Kita perlu mengelilingi aplikasi seluruhnya dengan dalam theme).

Halaman Contoh App untuk dapat menetapkan beberapa parameter global (seperti src/app/app.component.html:

<app>
  <h1>Welcome to Angular and Capacitor!</h1>
  <button (click)="share()">Share now!</button>
</app>

Kita perlu mengelilingi aplikasi seluruhnya dengan

Sekarang ketika semua sudah terinstal, kita bisa menggunakan komponen UI Konsta Vue di halaman Angular kita.

Misalnya, buka src/app/app.component.html dan ubah menjadi:

<app>
  <page>
    <navbar title="My App" />

    <block strong>
      <p>
        Here is your Angular & Konsta UI app. Let's see what we have here.
      </p>
    </block>
    <block-title>Navigation</block-title>
    <list>
      <list-item href="/about/" title="About" />
      <list-item href="/form/" title="Form" />
    </list>

    <block strong class="flex space-x-4">
      <button>Button 1</button>
      <button>Button 2</button>
    </block>
  </page>
</app>

Jika reload hidup tidak sinkron setelah menginstal semua komponen yang diperlukan, coba restart semuanya. Setelah itu, Anda seharusnya melihat aplikasi seluler dengan tampilan yang agak native, dibangun dengan Angular dan Capacitor!

Anda seharusnya melihat halaman berikut sebagai hasilnya:

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 Capgo, bahkan lebih mudah untuk menambahkan pembaruan hidup ke aplikasi Anda, sehingga pengguna Anda selalu memiliki akses ke fitur-fitur terbaru dan perbaikan bug.

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