Setelah berhasil membuat aplikasi “Hello World”, kini saatnya Anda berkenalan lebih dalam dengan “tongkat sihir” di balik pengembangan Ionic: Command Line Interface (CLI). Ionic CLI adalah alat berbasis teks yang memungkinkan Anda melakukan hampir semua hal dalam siklus pengembangan aplikasi, mulai dari membuat proyek, menambahkan halaman, hingga membangun aplikasi untuk rilis. Menguasai CLI akan membuat alur kerja Anda jauh lebih cepat dan efisien. 🚀

Apa Itu Ionic CLI?

Bayangkan Ionic CLI sebagai asisten pribadi Anda. Daripada mengelola file, folder, dan konfigurasi secara manual, Anda cukup memberikan perintah singkat di terminal, dan CLI akan melakukan semua pekerjaan berat untuk Anda. Ia terintegrasi langsung dengan kerangka kerja pilihan Anda (Angular, React, atau Vue) dan juga dengan native runtime seperti Capacitor atau Cordova.

Untuk memeriksa apakah Ionic CLI sudah terpasang dan melihat versinya, Anda bisa menjalankan perintah:

ionic --version

Perintah-Perintah Kunci yang Wajib Diketahui

Berikut adalah daftar perintah paling vital yang akan Anda gunakan sehari-hari saat mengembangkan aplikasi dengan Ionic.

1. ionic start

Ini adalah perintah pertama yang Anda jalankan untuk memulai sebuah proyek baru. Perintah ini akan membuatkan struktur folder, mengunduh template awal, dan menginstal semua dependensi yang dibutuhkan.

Sintaks:

ionic start [nama-aplikasi] [template]

• [nama-aplikasi]: Nama untuk folder dan aplikasi Anda (misalnya, aplikasi-belanja).
• [template]: Kerangka awal aplikasi. Pilihan yang paling umum adalah:
  • tabs: Aplikasi dengan navigasi tab di bagian bawah.
  • sidemenu: Aplikasi dengan menu samping yang bisa digeser.
  • blank: Proyek kosong tanpa navigasi apa pun.

Contoh:

ionic start aplikasiBelanja tabs

Setelah menjalankan perintah ini, CLI akan menanyakan framework yang ingin Anda gunakan (Angular, React, atau Vue).

2. ionic serve

Perintah ini adalah sahabat terbaik Anda selama proses pengembangan. ionic serve akan mengompilasi aplikasi, menjalankannya di server pengembangan lokal, dan secara otomatis membukanya di browser Anda.

Fitur Unggulan:

• Live Reload: Setiap kali Anda menyimpan perubahan pada kode (file .html, .ts, atau .scss), aplikasi di browser akan otomatis diperbarui. Ini sangat mempercepat proses debugging dan penyesuaian tampilan.

Sintaks:

# Jalankan perintah ini dari dalam direktori proyek Anda
ionic serve

Anda juga bisa melihat tampilan aplikasi di berbagai platform (iOS dan Android) secara bersamaan menggunakan opsi --lab.

ionic serve --lab

3. ionic generate

Butuh halaman baru? Komponen? Atau service untuk mengambil data dari API? Perintah ionic generate adalah jawabannya. Ia akan membuatkan file-file yang diperlukan sesuai dengan standar arsitektur framework yang Anda pilih.

Sintaks:

ionic generate [tipe] [nama]

• [tipe]: Jenis file yang ingin dibuat, seperti page, component, service, module, dll.
• [nama]: Nama untuk file tersebut (misalnya, login atau produk/detail).

Contoh:

# Membuat halaman baru bernama "login"
ionic generate page login

# Membuat service untuk otentikasi
ionic generate service services/auth

Perintah ini sangat membantu menjaga konsistensi dan kerapian struktur proyek Anda.

4. ionic build

Ketika aplikasi web Anda sudah siap untuk diubah menjadi aplikasi native, Anda perlu membuat versi produksi yang teroptimasi. Perintah ionic build akan mengompilasi, menyusutkan ukuran file, dan menyiapkan aset web Anda di dalam folder www atau build.

Sintaks:

ionic build

Perintah ini adalah langkah wajib sebelum Anda menyalin aset ke proyek Android atau iOS.

5. Rangkaian Perintah Capacitor

Setelah aplikasi web selesai di-build, saatnya menggunakan Capacitor untuk menjembataninya ke platform native.

• ionic capacitor add [platform] Perintah ini digunakan untuk menambahkan platform native (android atau ios) ke dalam proyek Anda. Ini hanya perlu dilakukan sekali di awal.
  Bash

  ionic capacitor add android
  

• ionic capacitor copy Setiap kali ada perubahan signifikan pada kode web, jalankan perintah ini setelah ionic build untuk menyalin hasil build terbaru ke folder platform native (misalnya, ke folder android).
  Bash

  ionic capacitor copy
  

• ionic capacitor run [platform] Ini adalah perintah pamungkas untuk menjalankan aplikasi Anda di emulator atau perangkat fisik yang terhubung. Perintah ini secara otomatis akan menjalankan build dan copy sebelum mendeploy aplikasi.
  Bash

  # Menjalankan di emulator atau perangkat Android
  ionic capacitor run android
  

Mendapatkan Bantuan

Jika Anda lupa sintaks sebuah perintah atau ingin tahu opsi apa saja yang tersedia, Ionic CLI memiliki dokumentasi bawaan yang sangat membantu. Cukup tambahkan flag --help setelah perintah apa pun.

Contoh:

ionic generate --help
ionic serve --help

Kesimpulan

Ionic CLI adalah alat yang sangat kuat dan fleksibel. Dengan memahami dan menggunakan perintah-perintah inti seperti start, serve, generate, dan capacitor, Anda dapat mempercepat alur kerja pengembangan secara dramatis. Anggaplah terminal sebagai kokpit Anda, dan perintah-perintah ini sebagai kontrol utama untuk menerbangkan ide aplikasi Anda menjadi kenyataan.

Di tutorial selanjutnya, kita akan membahas lebih dalam tentang konsep dasar navigasi dan routing di dalam aplikasi Ionic. Selamat mencoba!