Setelah berhasil menyiapkan lingkungan pengembangan, saatnya untuk melakukan hal yang paling seru: membuat aplikasi pertama Anda! Dalam tutorial ini, kita akan menggunakan Ionic CLI untuk membuat proyek baru, memahami struktur dasarnya, dan menjalankannya di browser. Ini adalah langkah pertama untuk melihat bagaimana kode Anda berubah menjadi aplikasi yang fungsional. 📱

## Langkah 1: Membuat Proyek Ionic Baru

Ionic CLI membuat proses memulai proyek baru menjadi sangat mudah. Anda hanya perlu satu perintah untuk menghasilkan seluruh kerangka aplikasi.

1. Buka Terminal atau Command Prompt: Buka terminal (Mac/Linux) atau cmd (Windows).
2. Navigasi ke Direktori Kerja: Pindahlah ke direktori di mana Anda biasa menyimpan proyek-proyek Anda. Contoh:
   Bash

   cd Documents/Projects
   

3. Gunakan Perintah ionic start: Ini adalah perintah utama untuk membuat proyek. Jalankan perintah berikut:
   Bash

   ionic start myApp tabs
   

   Mari kita bedah perintah ini:

   • ionic start: Memberi tahu CLI untuk memulai pembuatan proyek baru.
   • myApp: Ini adalah nama aplikasi Anda. Anda bisa menggantinya dengan nama lain, misalnya aplikasi-pertama-saya.
   • tabs: Ini adalah template atau cetakan awal untuk aplikasi Anda. Ionic menyediakan beberapa template siap pakai, dan tabs adalah yang paling umum, menyediakan aplikasi dengan navigasi tab di bagian bawah.
4. Pilih Framework: Setelah menjalankan perintah di atas, Ionic CLI akan bertanya, “Which framework would you like to use?”. Anda akan diberi pilihan antara Angular, React, dan Vue.
   • Untuk tutorial ini, mari kita pilih Angular. Gunakan tombol panah untuk memilih dan tekan Enter.
5. Tunggu Proses Selesai: Ionic CLI sekarang akan mengunduh template, menginstal semua library dan dependensi yang dibutuhkan. Proses ini mungkin memakan waktu beberapa menit.

Setelah selesai, Anda akan melihat folder baru bernama myApp di direktori kerja Anda.

## Langkah 2: Menjalankan Aplikasi di Browser

Sebelum kita membungkusnya menjadi aplikasi Android, cara terbaik dan tercepat untuk menguji aplikasi Ionic adalah melalui browser di komputer Anda. Ionic menyediakan server pengembangan live-reload yang sangat efisien.

1. Masuk ke Direktori Proyek: Pertama, masuk ke dalam folder proyek yang baru saja dibuat.
   Bash

   cd myApp
   

2. Jalankan dengan ionic serve: Di dalam direktori proyek, jalankan perintah berikut:
   Bash

   ionic serve
   

3. Lihat Hasilnya: Perintah ini akan mengompilasi aplikasi Anda dan secara otomatis membuka tab baru di browser Anda (biasanya di http://localhost:8100). Anda akan melihat sebuah aplikasi dengan tiga tab: “Tab 1”, “Tab 2”, dan “Tab 3”.

Keajaiban dari ionic serve adalah fitur live-reload. Coba buka proyek Anda di VS Code dan ubah teks di salah satu halaman (misalnya di src/app/tab1/tab1.page.html). Saat Anda menyimpan perubahan, aplikasi di browser akan otomatis diperbarui. Ini membuat proses pengembangan menjadi sangat cepat!

## Langkah 3: Memahami Struktur Folder Proyek

Membuka folder proyek Ionic di VS Code mungkin terasa sedikit membingungkan pada awalnya. Namun, ada beberapa direktori kunci yang perlu Anda ketahui.

• src/: Ini adalah direktori terpenting. 99% pekerjaan Anda akan dilakukan di sini.
  • src/app/: Folder inti dari aplikasi Anda. Di dalamnya terdapat folder-folder untuk setiap halaman (misalnya tab1, tab2) dan file-file routing aplikasi.
    • tab1/tab1.page.html: File HTML yang berisi struktur dan tampilan halaman Tab 1.
    • tab1/tab1.page.scss: File SCSS/CSS untuk menata gaya spesifik halaman Tab 1.
    • tab1/tab1.page.ts: File TypeScript (JavaScript dengan tipe) yang berisi logika untuk halaman Tab 1.
  • src/assets/: Tempat untuk menyimpan aset statis seperti gambar, ikon, atau file JSON.
  • src/theme/variables.scss: File untuk mendefinisikan skema warna global aplikasi Anda.
• ionic.config.json: File konfigurasi untuk proyek Ionic Anda.
• package.json: File standar Node.js yang mencatat semua dependensi dan skrip proyek.

## Langkah 4: Membangun Aplikasi untuk Android

Sekarang bagian yang paling ditunggu: mengubah aplikasi web kita menjadi file APK yang bisa diinstal di perangkat Android.

1. Tambahkan Platform Android: Beri tahu Ionic bahwa Anda ingin membangun untuk platform Android.
   Bash

   ionic capacitor add android
   

   Perintah ini akan membuat folder android/ di dalam proyek Anda. Folder ini berisi proyek Android Studio asli.

2. Bangun Proyek Web: Sebelum menyalin ke proyek Android, kita perlu membangun versi produksi dari aplikasi web kita.
   Bash

   
   ionic build
   

3. Buka Proyek di Android Studio: Setelah selesai, buka proyek Android native di Android Studio.
   Bash

   ionic capacitor open android
   

   Perintah ini akan secara otomatis membuka Android Studio dengan proyek Anda.

4. Jalankan di Android Studio: Di Android Studio, tunggu hingga proses Gradle Sync selesai. Setelah itu, Anda bisa menekan tombol Run (▶️) untuk menginstal dan menjalankan aplikasi di emulator atau perangkat Android fisik yang terhubung.

## Kesimpulan

Selamat! Anda telah berhasil membuat, menjalankan, dan membangun aplikasi Ionic pertama Anda untuk Android. Anda belajar alur kerja dasar: membuat proyek dengan ionic start, mengembangkannya dengan cepat menggunakan ionic serve, dan akhirnya membungkusnya untuk platform native menggunakan Capacitor.

Di tutorial selanjutnya, kita akan fokus pada dasar-dasar navigasi dan cara membuat halaman baru di dalam aplikasi Ionic Anda.