Penulis
Ionic adalah salah satu open source front-end SDK untuk mengembangkan aplikasi multi platform dengan berbasiskan web. Dengan adanya Ionic ini, kita dapat membuat aplikasi mobile untuk Android, iOS maupun windows dengan sekali kerja. Pengetahuan dasar untuk mengembangkan aplikasi mobile dengan ionic ini adalah HTML, CSS, JavaScript dan AngularJS.
Dalam istilah pengembangan aplikasi mobile phone. Secara sederhana dapat kita bagi menjadi 2 bagian. Bagian pertama kita sebut dengan bagian tampilan depan (front-end) kemudian bagian kedua kita sebut dengan bagian belakang (back-end).
Bagian kerja front-end ini lebih fokus pada tampilan sebuah aplikasi. Bagaimana tampilan muka aplikasi (User Interface) dan bagaimana tata letak dari menu dalam sebuah aplikasi (User Experience) semua adalah ranah kerja font-end.
Sedangkan ranah kerja back-end lebih fokus pada bagaimana data-data dari front-end ini diaolah sehingga bisa mengeluarkan hasil sesuai dengan yang diharapkan.
Pada aplikasi mobile yang dikembangkan dengan Ionic, bagian font-end banyak bersinggungan dengan HTML dan CSS sebagai basic pemrogrammannya. Sehingga, untuk memudahkan mempelajari Ionic ini alangkah lebih baik jika kita mempelajari terlebih dahulu mengenai apa itu HTML dan CSS.
Pada kesempatan kali ini, saya akan berbagi mengenai bagaimana membuat aplikasi dengan Ionic.
Dalam istilah pengembangan aplikasi mobile phone. Secara sederhana dapat kita bagi menjadi 2 bagian. Bagian pertama kita sebut dengan bagian tampilan depan (front-end) kemudian bagian kedua kita sebut dengan bagian belakang (back-end).
Bagian kerja front-end ini lebih fokus pada tampilan sebuah aplikasi. Bagaimana tampilan muka aplikasi (User Interface) dan bagaimana tata letak dari menu dalam sebuah aplikasi (User Experience) semua adalah ranah kerja font-end.
Sedangkan ranah kerja back-end lebih fokus pada bagaimana data-data dari front-end ini diaolah sehingga bisa mengeluarkan hasil sesuai dengan yang diharapkan.
Pada aplikasi mobile yang dikembangkan dengan Ionic, bagian font-end banyak bersinggungan dengan HTML dan CSS sebagai basic pemrogrammannya. Sehingga, untuk memudahkan mempelajari Ionic ini alangkah lebih baik jika kita mempelajari terlebih dahulu mengenai apa itu HTML dan CSS.
Pada kesempatan kali ini, saya akan berbagi mengenai bagaimana membuat aplikasi dengan Ionic.
Tahap pertama yang perlu kita lakukan adalah sebagai berikut:
Buka command prompt (CMD) dan masuk ke folder dimana project
kita akan dibuat. Project saya saat ini dibuat di directory
D:work/Mobile Apps. Setelah masuk ke directory tersebut, ketikan instruksi “ionic start firstApp blank”. Instruksi tersebut bertujuan untuk membuat folder baru dan memanggil library Ionic yang kita perlukan. lihat contoh berikut:
Setelah
folder baru dibuat (folder firstApp), selanjutnya masuklah kedalam folder
firstApp. Kemudian kita install platform yang akan kita gunakan untuk aplikasi
kita. Seperti yang saya jelaskan sebelumnya, Platform pada Ionic ini diantaranya adalah Android, iOS dan Windows Phone. Pada kesempatan ini saya akan menginstall platform android pada aplikasi
Ionic yang dibuat.
Setelah
platform terinstall pada aplikasi kita. Selanjutnya kita bisa berlanjut
pada pengisian konten aplikasi. Saya menggunakan Sublime Text editor untuk
melakukan coding. Kita buka aplikasi Sublime, kemudian buka folder
firstApp. Konten
aplikasi yang akan kita buat, dapat dilihat pada file index.html yang terletak
pada folder www. Ketikan kode berikut untuk mengisi konten aplikasi:
<!DOCTYPE html> <html> <head> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"></link> <link href="css/style.css" rel="stylesheet"></link> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content class="padding"> <h1>Ini adalah aplikasi perdana saya</h1> <h3>Halo...</h3> </ion-content> </ion-pane> </body> </html>
Setelah selesai kita isi kontennya, simpan file index.html tersebut kemudian buka kembali CMD, dan masuk pada directory tempat aplikasi dibuat. Untuk dapat melihat hasil aplikasi yang telah dibuat, bisa dilakukan dengan berbagai cara. Bisa di running pada emulator yang terinstall di komputer kita, bisa juga diinstall langsung pada smartphone dan terakhir bisa dilihat di browser. Cara yang paling mudah adalah dengan melihatnya di tampilan browser. Untuk melihatnya dalam browser, ketikan instruksi pada CMD seperti contoh berikut:
Secara otomatis, browser kita akan terbuka dan menampilkan aplikasi yang telah kita buat. Jika anda menggunakan browser chrome sebagai browser default anda. Maka anda bisa menekan F12 untuk melihat tampilan aplikasi sesuai dengan ukuran smartphone yang ada. kemudian klik icon smartphone di pojok kiri. maka tampilan akan seperti berikut ini:
Tampilan diatas adalah live-preview aplikasi kita, dimana setiap kita melakukan perubahan di source code di index.html maka secara otomatis akan berubah di tampilan ini.
Demikian tutorial pembuatan aplikasi dengan Ionic part-1.
7 comments
Gan ini biar ke create projectnya yang harus diinstall apa ya, soalnya E:\Workspace Ionic>ionic start firstApp blank
'ionic' is not recognized as an internal or external command,
operable program or batch file.
nah cmdnya tidak mau ngebaca ionic nya
Agan sudah install ionic nya belum?error seperti itu muncul biasanya karena karena belum install, atau belum di set global itu ionicnya.
Untuk saat ini saya belum buat contohnya mba..
mungkin lain kesempatan ya.
slamat pagi mas, jika kita sebelum nya sudah membuat emulator android nya lalu membuka nya kembali bagaimana ya mas perintah nya
Emulatornya pake apa mas?genymotion kah?
Kalau genymotion, perintah nya sama seperti di tutorial saya yang lain, ionic run android.
Pagi mas, saya belajar membuat mobile app dari ionic v1... . sampai saat ini masih bisa didownload di Play Store dan masih dipakai client saya.
Ketika saya update NPM dan IONIC CLI, codingan saya jadi nggk bisa di build lagi.
Pertanyaan:
1. Apakah betul IONIC 1 sudah nggk bisa dipakai...?
2. Sekarang banyak framework mobile app seperti React Native dan Flutter. Menurut Mas Prawito, mana yang lebih mudah dan performanya baik.
Terima kasih
EmoticonEmoticon