Sebelum kita mulai, pastikan Anda telah menginstal Node.js dan Ionic CLI di sistem Anda. Jika tidak, Anda dapat menginstalnya dengan mengikuti dokumentasi resmi dari situs mereka.
1. Membuat proyek Ionic baru
Buka terminal atau command prompt Anda dan navigasikan ke direktori tempat Anda ingin membuat proyek. Kemudian, jalankan perintah berikut:
ionic start helloWorld blank
Perintah ini membuat sebuah proyek Ionic baru bernama "helloWorld" menggunakan template "blank".
2. Masuk ke direktori proyek
Setelah proyek dibuat, navigasikan ke direktori proyek dengan menjalankan perintah berikut:
cd helloWorld
3. Buat halaman baru
Di Ionic, halaman digunakan untuk menampilkan konten. Mari buat halaman baru bernama "halo" dengan menjalankan perintah berikut:
ionic generate page hello
Perintah ini membuat halaman baru dengan file dan konfigurasi yang diperlukan.
4. Ubah konten halaman yang baru dibuat
Buka file yang baru dibuat hello.page.html yang terletak di direktori src/app/hello. Ganti konten yang ada dengan kode berikut:
<ion-header>
<ion-toolbar>
<ion-title>
Hello World
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title>
Welcome to Ionic!
</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Hello World!</p>
</ion-card-content>
</ion-card>
</ion-content>
Kode ini menentukan struktur dan konten halaman "Hello World".
5. Ubah konfigurasi routing
Buka file app-routing.module.ts yang terletak di direktori src/app. Impor HelloPage dan tambahkan rute baru untuk HelloPage di array Rute:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloPage } from './hello/hello.page'; // Import the HelloPage
const routes: Routes = [
{
path: '',
redirectTo: 'hello',
pathMatch: 'full'
},
{
path: 'hello',
component: HelloPage // Add the route for HelloPage
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Konfigurasi ini memastikan bahwa HelloPage dimuat saat mengakses URL root.
6. Jalankan aplikasi
Sekarang saatnya menjalankan aplikasi yang sudah kita buat. Di terminal, jalankan perintah berikut:
ionic serve
Perintah ini memulai server pengembangan lokal dan membuka aplikasi di browser web default Anda.
7. Lihat halaman "Hello World"
Secara default, aplikasi akan berjalan di alamat berikut: http://localhost:8100. Anda akan melihat aplikasi Ionic berjalan di browser Anda. Untuk melihat halaman "Hello World", tambahkan /hello ke URL dan tekan Enter. Misalnya, http://localhost:8100/hello.
Selamat! Anda telah berhasil membuat aplikasi "Hello World" menggunakan Ionic.