Tutorial Ionic 5 Hello Worlds

Hallo temen-temen semuanya. pada sesi kali ini kita akan belajar membuat aplikasi sederhana “Hello Worlds” menggunakan ionic framework versi 5

Cukup menggunakan beberapa langkah CLI, kita dapat membuat menggunakan template bawaan dari ionic dengan sangat mudah.

Install Ionic

Pertama,dan yang paling utama adalah install ionic framework terlebih dahulu, ikutilah berdasarkan dokumentasi resmi di situs ionic. Namun, sebelum bisa menggunakan CLI di ionic framework, kita perlu menginstall Node.js, cara install node js bisa dilihat juga di dokumentasi resminya.

Jika sudah, silahkan masuk ke command promt. ketikan perintah berikut:

npm install -g @ionic/cli

Jika sebelumnya, Anda telah menginstall ionic framework versi sebelumnya, uninstall dahulu ionicnya.

npm uninstall -g ionic
$ npm install -g @ionic/cli

catatan: -g opsi menunjukan global install.

Buat Aplikasi Pertama

Ayo buat aplikasi ionic framework pertamamu, daftar pre template pada ionic sebagai berikut:

• tabs
• sidemenu
• blank
• my-first-app
• conference

Mengubah Halaman

Mari kita ubah halaman home.html. Kita isi dengan konten Hello World

<ion-content class="home">
  <ion-card>
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      Hello World
    </ion-card-content>
  </ion-card>
</ion-content>

Sekarang kita beri judul juga “Hello World”

 <ion-title>
    Hello World
  </ion-title>

Serve

Selanjutnya, kita jalankan ionic serve untuk melihat hasil dari aplikasi yang telah kita buat.

ionic serve

Kesimpulan

Untuk membuat aplikasi “Hello World” di ionic framework cukup mudah, tidak sampai 10 menit sudah bisa kita jalankan.

Dengan template bawaan dari ionic memudahkan kita untuk memulai membuat suatu aplikasi yang menyenangkan.

Happy coding!