Mengenal Ionic Framework

Ionic Framework Website
Ionic Framework Website

Tidak dipungkiri lagi bahwa Smartphone sudah tersebar di berbagai dunia dan pemenangnya adalah Android dan iOS. Di sisi lain, banyak usaha App-isasi dari website yang ada. Makanya jangan heran ketika berbagai layanan website berlomba lomba menyediakan aplikasi mobilenya. Sayangnya, kebutuhan mobile developer tidak sebanding dengan jumlah developer yang ada. Sebagai gambaran, Web sudah ada sejak 25 tahun yang Lalu, Pemrograman Visual sudah populer sejak 20 tahun yang lalu dan Mobile App J2ME baru sekitar 15 tahun lalu. Sementara Aplikasi SMartphone Android dan iOS baru sekitar 8 Tahun yang lalu. Dari sinilah muncul Gap mengapa programer Mobile selalu muncul di lowongan pekerjaan.

Apa Itu Ionic Framework?

Ionic adalah platform yang mentargetkan Programer Web agar bisa membuat aplikasi Mobile dengan TEKNOLOGI Web. Artinya apa? Programmer web yang ingin menjadi programer Mobile tidak perlu belajar Java atau Objective C atau C# untuk membuat versi Aplikasi dari layanan webnya. Inilah pandangan dari pendiri Ionic. Sebelumnya, pendiri ionic ingin membuat gebrakan revolusioner dengan konsep mengubah konsep Write one Run Anywhere dengan satu base code berbasis javascript.

Ternyata, ketika ide ini disampaikan ke para programer Android atau iOS, ide ini tidak disambut hangat. Mengapa? karena tidak semua bisa dilakukan dengan teknologi web. Salah satunya adalah pemrograman Game di Smartphone yang emmanfaatkan openGL ES atau aplikasi yang sangat tergantung Sensor. Dari sinilah pengembang Ionic akhirnya mempivot targetnya adalah untuk para programer web yang ingin membuat aplikasi mobile (biasanya aplikasi bisnis) tanpa harus belajar bahasa pemrograman lain.

Kelebihan Ionic Framework

Jadi jika anda punya website atau WebApp dan ingin dibuatkan aplikasi mobilenya, Ionic Framework adalah pilihan yang tepat. Terus apa bedanya Ionic dengan Framework lain? cek disini

Ionic Menggunakan lisensi Opensource

Ionic platform menggunakan lisensi opensource, anda boleh membuat aplikasi free ataupun comercial dengan Ionic.

Menggunakan teknologi web terbaru

Ionic memanfaatkan AngularJS untuk implementasi logicnya. Mengapa tidak memakai jQuery? karena jQuery terkenal lambat di mobile sedangkan Angular menawarkan performa dan respon cepat serasa aplikasi native.

Target Hanya untuk Android 4 dan ios 7 Keatas

Anda bisa melihat ini sebagai kelebihan ataupun kekurangan. Bagi yang suka dengan hal baru dan ingin kode yang bersih tanpa memikirkan kompabilitas dengan versi mobile OS lama, maka ionic adalah platform yang paling pas.

Berbasis Apache Cordova /Phonegap

Perhatikan point ini. Ionic hanya menyediakan frameworknya, untuk membungkusnya menjadi aplikasi Android atau iOS anda tetap pakai phonegap. Artinya bagi para programer phonegap  dengan platform lain, keahliannya tetap bisa dipakai.

Tool Resmi Ionic

Ionic CLI

Ionic CLI adalah tool command line yang digunakan untuk membuat project dan menjalankan project. Masih banyak fitur dari ionic CLI ini, silahkan mengacu ke http://ionicframework.com/docs/cli/start.html.

ionic Lab

IonicLab Adalah solusi bagi anda yang ingin kenyamanan. IonicLab adalah Versi GUI dari Ionic CLI, anda tinggal klik untuk melakukan operasi operasi yang semula harus mengetikan perintah di Console.

Ionic Lab
Ionic Lab

Ionic Creator

Berbeda dengan jQuery mobile atau platform lain yang memaksa kita coding manual untuk mendesain tampilan UInya. Ionic menyediakan Ionic Creater, produk free yang akan memudahkan anda mendesain tampilan UI dari aplikasi. Ionic Creator sendiri adalah WebApp artinya anda harus mengaksesnya lewat Browser. Untuk Akun Free kita hanya bisa mendesain satu aplikasi saja, Jika ingin lebih belilah paket Premium. Anda bisa mencobanya di https://creator.ionic.io/app/login.

Ionic ViewApp

Aplikasi ini adalah Aplikasi Android. Fungsi utamanya adalah mempreview program Ionic langsung dari Android. Aplikasi yang bisa di preview oleh ViewApp bisa aplikasi yang kita buat atau aplikasi orang lain yang dishare di Ionic Market.

Apa yang harus dipelajari terlebih dahulu

Setelah kita tahu teknologi kelebihan ionic diatas, ada beberapa teknologi yang harus ada kuasai, minimal anda tahu sebelum terjun ke Ionic. Ilmu ini harus anda pahami kalau ingin membuat aplikasi bagus. Kalau anda tidak pernah mencoba atau mendengar teknologi dibawah ini, jangan buru buru coba ionic, kalau dipaksakan, paling paling anda berhenti ditengah jalan.Teknologi itu adalah

  1. HTML5/CSS/Javascript
  2. Nama komponen visual di mobile App (android/iOS)
  3. AngularJS
  4. Dasar dasar NodeJS/NPM
  5. Phonegap/Apache Cordova
  6. Command line (CMD/Bash/Terminal Linux)
  7. Cara membuatApk  atau membuild /compile  iosApp.

Jadi 7 point itu harus anda pahami dulu, mengapa saya tekankan disini. Untuk point 7, jika anda hanya ingin membuat versi androidnya, maka anda tidak perlu belajar XCode.  karena banyak programer yang berusaha memakai teknologi baru tanpa memperhatikan ilmu dasarnya, makanya jangan heran banyak programer stress dan banyak mahasiswa mentok di tengah jalan karena tergiur berbagai fitur framework yang ditawarkan.

Selain itu, alangkah baiknya anda memahami Ekosistem Ionic secara menyeluruh, minimal tahu teknologi dibalik ionic agar mudah dalam mempelajari dan medebug Program. Anda bisa melihat Ekosistem Ionic dan Hubungannya dengan teknologi lain dari diagram dibawah ini.

minmapionic

Jika anda tidak ingin memahami semuanya, saya sarankan fokuslah ke teknologi AngularJS karena jika diibaratkan HTML5,CSS3,JS adalah badannya maka angularJS adalah rohnya. Dengan bahasa lain, Framework Ionic (UI component) adalah Viewnya dan AngularJS adalah Controllernya.

Ionic Platform

Selain Ionic Framework yang free dan opensource, Ionic juga memperkenalkan ionic Platform. Ionic Platform memberikan layanan tambahan bagi para developer ionic. Ionic Platfrom menambahkan fitur Create, deploy, update, Analytics, Marketing (Ionic Market) dan Push notification kedalam aplikasi yang dibangun dengan ionic. Saat ini, ionic Plaform masih dalam tahap Alpha testing dan anda gratis mencobanya.

ionicplatform

Untuk Platform ini memang masih alha dan belum ready, namun jika sambutan dari Developer positif, maka kedepannya ionic adalah platform paling menjanjikan untuk membuat aplikasi mobile yang terasa Native untuk Platform Android dan iOS.

Referensi

Karena ionic adalah Platform baru, masih sangat sedikit tutorial yang membahas tentang teknologi ini. Namun jika anda rajin membaca dokumentasi, sebenarnya sudah sangat lengkap. Link berikut ini bisa anda jadikan langkah pertama mengenal Ionic.

  1. http://ionicframework.com/, Website utama ionic Framework.
  2. http://ionic.io/, Website utama untuk ionic Platform.
  3. http://lab.ionic.io/, Lokasi download untuk Ionic Lab, IDE resmi dari ionic.
  4. http://market.ionic.io/, Pasar aplikasi yang dibangun dengan ionic.
  5. http://showcase.ionicframework.com/, Area untuk memajang aplikasi dari para developer.
  6. http://forum.ionicframework.com/, Forum resmi untuk ionic Framework.
  7. http://blog.ionic.io/, Blog Ionic Framework, wajib dibaca untuk meliaht fitur fitur baru di Ionic.
  8. https://angularjs.org/ , Website resmi AngularJS, Teknologi yang dipakai ionic untuk implementasi logic bisnis.

 

Tips Membangun Website Yang Mobile Friendly

Membangun website sekarang tentunya berbeda jauh dengan membangun website dengan 5 atau 10 tahun yang lalu. Dulu, orang mengakses website hanya dengan perangkat Laptop atau desktop. Sekarang  alat untuk mengaksesnya sangat beragam, dari featurephone, smartphone, gadget, Game Console,TV atau dashboard kendaraan. Dengan beragamnya perangkat pengakses, sudah saatnya kita meperhitungkan aspek ‘mobile friendly’ dari website yang kita bangun.

Sebelum lebih jauh, mari kita lihat statistik pengakses salah satu blog yang saya buat yaitu jejakcandra.blogspot.com , gambar berikut ini adalah data pengunjung berdasarkan OSnya .

 

pengunjung website berdasarkan osnya dari bulan november 2014
pengunjung website berdasarkan osnya dari bulan november 2014

 

Tampak bahwa pengakses Android sudah mencapai 37%, BB 9% dan iPhone 4%, jika di gabungkan pengakses mobile hampir menembus 50%. Windows  sendiri hanya 42%. Jika website anda hanya fokus ke desktop maka anda akan kehilangan calon pengunjung atau minimal pengunjung tidak akan nyaman dengan tampilan websitenya dilayar kecil.

Tips membuat website yang mobile friendly.

Berikut ini adalah tips yang bisa anda gunakan untuk meningkatkan kualitas website anda agar lebih mobile friendly.

1. Gunakan thema responsive. Jika anda memakai CMS, carilah tema yang mendukung mobile. Testingnya gampang, buka saja website anda di smartphone atau kecilkan browser anda, apakah tampilan akan menyesuaikan diri. Jika menggunakan layanan wordpress.com atau blogger, pilih dan aktifkan thema mobile. Jika anda ingin memulai membuat web yang responsive, silahkan download puluhan thema HTML5 responsive di html5up.net.

2. Hindari menggunakan kontent yang menggunakan Plugin seperti Flash, Java atau Silverlight. Gunakan HTML5.

3.  Gunakan Viewport Meta di Header (ini masih berhubungan dengan thema responsive), jika themanya sudah responsive ini ga usah di pikir lagi. jangan menggunakan Fix layout.

4. Gunakan font yang tidak terlalu kecil, jangan gunakan px sebagai satuan di CSS, biasakan menggunakan em dan ukuran relatif lainnya.

5. Jika web membutuhkan ikon, Gunakan font-icon seperti font-awesome untuk mempercepat loading halaman.

6. Gunakan teknik dinamic serving agar hasil optimal.

Sebagai contoh untuk Teknik ini, anggaplah kita punya website berita. Sebuah halaman web berita biasanya berisi (a) judul, (b) Gambar (c) ringkasan berita (d) isi berita (d) komentar (e) share button.  mengecek user agent browser dan OSnya. Jika browser desktop kita bisa meload dari point (a) sampai (e). Jika yang mengakses adalah smartphone maka cukup load (a), (b) dan (c). Jika yang mengakses adalah feature phone yang mendukung xhtml, maka cukup load point (a) dan (c). Inti dari dinamic serving kurang lebih seperti itu.

Baca tips lainnya di https://developers.google.com/webmasters/mobile-sites/.

Testing website Mobile Friendly

Setelah anda mengikuti tips diatas, maka langkah selanjutnya adalah testing. Disini ada 3 tool yang bisa kita gunakan untuk mengetesnya, semuanya tool dari Google.

Mobile friendly test

Alamat testingnya ada di https://www.google.com/webmasters/tools/mobile-friendly. Testing ini sangat sederhana, mengecek apakah website sudah menggunakan viewport(Responsive desain)  dan HTML5.

Hasil dari testing menyatakan candra.web.id mobile friendly
Hasil dari testing menyatakan candra.web.id mobile friendly

Testing di Pagespeed inSight

Testing sebelumnya hanya mengecek apakah website sudah mobile friendly. Testing ini mengecek lebih jauh yaitu mengecek apakah websitenya optimal jika diakses di mobile browser. Pagespeed memberikan point dari 0 sampai 100 dan memberikan rekomendasi untuk hal hal yang bisa ditingkatkan, terutama masalah kecepatan website. Alamat testing ada di https://developers.google.com/speed/pagespeed/insights

Tampilan hasil pagespeed test
Tampilan hasil pagespeed test, tampak bahwa candra.web.id belum optimal

Tampak bahwa saya harus mengoptimasi website ini. Pagespeed menyarankan mengkompress Javascript dan CSS serta memindahkan javascript ke bagian bawah halaman agar tidak memblokir proses rendering, kurang lebih itu inti dari sarannya.

 

Webmaster Tool Mobile Usability

Setelah anda mengoptimasi pagespeed, apakah sudah selesai? Tentu saja belum, masih ada point terakhir yaitu Mobile usability. Kadang, walaupun secara umum halaman website kita sudah mobile friendly,namun masih ada beberapa halaman yang kuran gmobile friendly. Bayangkan anda punya artikel ratusan, apakah yakin semuanya mobile friendly? Disinilah fungsi mobile usability. Webmaster tool ini akan mengecek per halaman artikel dan memberitahu artikel mana yang usabilitynya kurang. Jika anda belum paham webmaster tool, silahkan baca artikel saya yang berjudul Optimasi website dengan Google Webmaster Tool.

Menu mobile Usability ada di menu Search Traffics -> Mobile Usability.

Pengecekan Mobile usability di webmaster
Pengecekan Mobile usability di webmaster

Jika anda sudah melakukan 3 hal diatas, bukan hanya user akan nyaman mengakses website anda namun Google menjanjikan bahwa teknik diatas juga akan meningkatkan SEO dari website. Sekian dulu, semoga panduan singkat ini bermanfaat danHappy Testing!