Membuat Aplikasi News Portal Dengan Ionic Part 1

Halo apa kabar? hari ini saya akan mengajarkan teman-teman bagaimana membuat aplikasi mobile portal berita seperti "detikcom" menggunakan ionic framework. Setelah kalian belajar cara instalasi ionic pada tutorial sebelumnya, sekarang kita akan langsung memulai projek pertama kita.

Buat Folder

Step pertama, silahkan teman-teman buat folder dengan nama apa saja dimana saja, disini saya membuat folder dengan nama "ionic-project" di Desktop.

Instalasi

Kemudian, saat kita melakukan instalasi ionic. Jalankan CMD (Command Prompt Windows), masuklah ke dalam folder project ionic yang anda buat tadi.

Ketik "ionic start my-blog blank", karena kita akan men-download file ionic, jadi pastikan koneksi internet anda hidup.

Tunggu beberapa saat, sampai proses selesai.

Jalankan di browser

Masuk kedalam folder "my-blog", kemudian ketikan "ionic serve".

Aplikasi akan otomatis running.

Open Sublime Text

Buka folder project dalam text editor sublime text. Anda bisa menggunakan teks editor lain, namun Sublime Text adalah teks editor yang paling di recommended.

Coding

Setelah semua persiapan project ionic selesai, saatnya kita akan melakukan koding. Teman-teman untuk saat fokus dulu pada 2 file, yakni file index.html dan js/app.js. Silahkan jalankan kedua file tersebut.

Pada file index.html, didalam body rubah value "ng-app" menjadi "blogApp", dan dalam tag ion-content tambahkan atribut ng-controller='blogController'.

Selanjutnya di dalam file app.js, kita akan buat angular controller.

Perlu diperhatikan, sebelum memulai project ionic, pastikan anda sudah menguasai atau minimal tahu tentang konsep AngularJS.

Di dalam controller, buat variabel $scope.

$scope (variable) memungkinkan interaksi antara view (index.html) dan controller.

Kemudian kita cetak pada index.html.

Dan hasilnya adalah...