Tutorial Ionic Framework - Starter Project

Tutorial Ionic Framework - Starter Project. Berikut saya memberikan gambaran sederhana untuk membut project pertama ionic framework. Sebelum itu, perlu kita ketahui komponen-kompenen apa saja sih yang dibutuhkan oleh framework ionic?
Mari kita simak tabel berikut ini :

SN	Perangkat lunak	Deskripsi
1	NodeJS	platform dasar yang dibutuhkan untuk membuat Mobile Apps menggunakan Ionic. Pastikan Anda juga menginstal NPM ketika menginstal NodeJs. Cara install node js klik.
2	Android SDK	Jika Anda akan bekerja pada platform Windows dan mengembangkan aplikasi untuk platform Android maka Anda harus memiliki Android SDK setup pada mesin Anda.
3	Xcode	Jika Anda akan bekerja pada platform Mac dan mengembangkan aplikasi untuk platform iOS maka Anda harus memiliki Xcode setup pada mesin Anda.
4	Coradova dan Ionic	SDK utama yang diperlukan untuk mulai bekerja dengan Ionic.

Instalasi Cordova dan Ionic

npm install -g cordova ionic

Membuat projek baru

Perlu kita ketahui, ionic sendiri memberikan kemudahan template default untuk membuat project awal kita, antara lain:

• Tab App
• Blank App
• Sidemenu App

Untuk membuat projek baru ionic itu sangatlah mudah. hal pertama yang perlu dilakukan adalah menjalankan CMD (command Prompt) kemudian arahkan ke direktori yang akan di gunakan untuk menyimpan projek ionic tersebut.

ionic start app blank

blank app ionic

ionic start app1 tabs

tabs app ionic

ionic start app2 sidemenu

sidemenu app ionic

Add Platform

Setelah kita membuat proyek pertama kita, mari kita menambahkan cordova untuk platform android.

ionic platform add android

Build App

Berikutnya, mari kita membuild aplikasi yang telah kita buat.

ionic build android

Run App

Kemudian, langkah terakhir adalah menjalankan aplikasi kita

ionic run android

Uji App di browser

Karena kita bekerja dengan JavaScript Anda dapat melayani aplikasi Anda pada setiap web browser. Hal ini akan mempercepat proses pembangunan Anda, tetapi Anda harus selalu menguji aplikasi Anda pada emulator dan perangkat asli. Ketik berikut untuk melayani aplikasi Anda pada web browser.

ionic serve

Perintah di atas akan membuka aplikasi Anda di web browser. Google chrome memberikan perangkat fungsi modus untuk pengujian pengembangan mobile. Tekan F12 untuk pengembang akses konsol.

Stuktur Folder Proyek

Struktur folder proyek sangat penting mengingat kita perlu mengetahui lokasi file-file penting yang akan kita buat. Maka dari itu, struktur ini sangat penting bagi para developer android terutama ionic.

structure folder ionic

Untuk lebih jelasnya folder-folder tersebut untuk apa saja, Anda bisa melihatnya langsung di dokumentasi ionic framework

Demikian simple starter project ionic framework. Happy coding.