Cara Membuat Project pada Ionic Framework

Dalam sesi tutorial android dengan menggunakan ionic framework kali ini, kita akan mempelajari bagaimana membuat project dengan ionic framework.

Setelah kita menginstall ionic framework beserta persyaratan lainnya, biasanya kita akan menguji apakah framework tersebut sudah dapat bekerja dengan baik atau tidak dengan membuat sebuah project (Ionic apps).

Pembuatan ionic apps berdasarkan CLI (Command Line Interface), untuk itu kita harus melakukannya pada command promp (windows) dan pastikan juga koneksi internet tetap stabil, karena ada file yang akan didownload disaat kita create sebuah project.

Pada ionic framework terdapat tiga template utama yang dapat kita gunakan dalam membuat project (ionic apps) :

• Blank : Membuat ionic app dengan blank project
• Tabs : Membuat contoh ionic app dengan menggunakan tabs
• Side menu : Membuat contoh ionic app yang dilengkapi dengan navigasi side menu

Membuat ionic app dengan template blank

Buka command prompt anda dan kemudian tentukan lokasi folder project ionic app. Dalam contoh ini saya akan meletakkan semua ionic apps pada folder C:\ionicApps, kemudian saya membuat ionic ap dengan template blank dengan syntax berikut :

ionic start app1 blank

Pada command prompt akan terlihat seperti pada Gambar.1 dibawah ini :

(Gambar.1)

Seperti yang terlihat pada Gambar.1 diatas, maka dilakukan proses download file yang diperlukan untuk mengcreate project dengan template blank. Silahkan periksa pada folder lokasi project anda dimana telah didownload sejumlah file untuk keperluan pembuatan project ionic dengan template blank project.

Keterangan :

• ionic start : perintah ini untuk memerintah pembuatan project ionic
• app1 : merupakan nama project
• blank : merupakan template dengan blank project

Kemudian untuk menjalakannya, masuk ke lokasi nama project yang barusan kita buat barusan pada command prompt and, kemudian ketikkan perintah berikut :

ionic serve

Pada command prompt akan ditunjukkan oleh Gambar.2 dibawah ini :

(Gambar.2)

Secara otomatis hasilnya akan ditampilkan pada default browser anda, dimana tampilannya ditunjukkan oleh Gambar.3 dibawah ini :

(Gambar.3)

Membuat ionic app dengan template tabs

Langkah-langkah pada pembuatan project ionic (ionic app) dengan template tabs sama seperti diatas, kita cuma menggantikan blank dengan tabs seperti command dibawah ini :

ionic start app2 tabs

Keterangan :

• ionic start : perintah ini untuk memerintah pembuatan project ionic
• app2 : merupakan nama project
• tabs : merupakan template dengan tabs project

Kemudian ketikkan command berikut pada command prompt setelah anda masuk ke folder app2 :

ionic serve

Sehingga tampilannya akan diperlihatkan oleh Gambar.4 dibawah ini :

(Gambar.4)

Membuat ionic app dengan template sidemenu

Pada pembuatan project ionic dengan template sidemenu, kita namakan projectnya dengan nama app3. Langkah-langkahnya tetap sama dengan cara diatas, pada command prompt ketikkan command berikut :

ionic start app3 sidemenu

Keterangan :

• ionic start : perintah ini untuk memerintah pembuatan project ionic
• app3 : merupakan nama project
• sidemenu : merupakan template dengan sidemenu project

Kemudian ketikkan command berikut pada command prompt setelah anda masuk ke folder app3 :

ionic serve

Sehingga akan menghasilkan tampilan seperti yang ditunjukkan oleh Gambar.5 dibawah ini :

(Gambar.5)