Daftar Tool Yang Perlu Diinstal

DAFTAR TOOL YANG PERLU DIINSTAL

          Sebelum dapat menggunakan Ionic dan emulator, Anda perlu menginstal terlebih dahulu beberapa tool. Ikuti step-by-step dibawah ini agar lebih mudah dipahami. Anda perlu mengunduh beberapa tool terlebih dahulu sebelum dapat diinstal.

Download dan Instal Java

          Pastikan Java telah terinstal di komputer Anda, Java dibutuhkan untuk menjalankan Android SDK. Untuk mengeceknya, bisa melalui Command Prompt, Ketikkan "Java".

Gambar Java telah terinstal

          Gambar diatas menunjukkan bahwa telah terinstal Java SDK versi 1.7.0_05. Jika Anda belum memilikinya, silahkan terlebih dahulu download Java SDK terbaru. Anda dapat mendownloadnya di https://www.java.com/en/download/chrome.jsp.

Download Apache Ant

          Apache Ant dibutuhkan oleh Android dan Cordova, Download Apache Ant di http://mirror.tcpdiag.net/apache//ant/binaries/apache-ant-1.9.4-bin.zip. Jika download telah selesai, selanjutnya ekstrak file download apache-ant-1.9.4-bin.zip di direktori yang Anda inginkan.

Gambar Download Apache Ant

          dan tambahkan path ke folder bin atau di variabel PATH evinronment.

Donwload Android SDK

          Android SDK menyediakan tool untuk mengembangkan aplikasi Android. Download Android SDK di http://developer.android.com/sdk/index.html.

Gambar Android SDK

          Lalu pilih yang sesuai dengan komputer Anda, apakah 32-bit atau 64-bit. Setelah itu, ekstrak hasil download tersebut. File tersebut terdiri dari 2 folder, yaitu aplikasi Eclipse dan SDK. Folder Eclipse berisi aplikasi Eclipse yang dapat juga Anda gunakan untuk membuat aplikasi Android, tapi pada postingan ini kita hanya akan menggunaka Command Prompt saja.

           Folder kedua yaitu SDK. Folder ini cukup penting dan akan digunakan nantinya. Android SDK berisi library dan emulator yang akan digunakan oleh aplikasi mobile yang dibuat nantinya.

Mengatur PATH environment

          

          Anda perlu mengatur PATH terlebih dahulu sebelum dapat menggunakan Android SDK bersamaan Ionic. Caranya cukup mudah, copy alamat direktori dari folder bin ke PATH environment variable.

          Jalankan Environment Variables melalui menu Start, lalu ketikkan "Environment Variables". Maka akan muncul jendela seperti di bawah ini.

Gambar Environment Variables

          Kemudian dari bagian System Variables (bagian bawah), klik dua kali di bagian PATH.

PATH dari Apache Ant

          Dari Apache Ant yang sebelumnya telah Anda ekstrak, cari folder "bin" dan copy lokasi folder "bin" ke PATH.

PATH dari Android SDK

            Begitu juga dengan Android SDK yang sebelumnya sudah Anda ekstrak, buka kembali folder sdk tersebut dan copy lokasi folder "platform-tools" dan "tools" ke PATH.

          Kemudian, tambahkan juga folder "tools" ke PATH. Jika Anda mengalami kendala untuk mengatur PATH ini, silahkan baca lebih lengkap di alamat http://cordova.apache.org/docs/en/4.0.0/guide_platforms_android_index.md.html.

Instal dan Update Node.js

          Node.js adalah salah satu tool populer untuk membangun utilisasi command line. Cordova dan Ionic menggunakannya. Anda dapat mengunduhnya melalui http://www.nodejs.org. Donwload lah sesuai kebutuhan komputer Anda, apakah 32-bit atau 64-bit.

Gambar Environment Variables

          Setelah proses download selesai, berikutnya ikuti proses instalasi Node.js hingga finish. ikuti langkah-langkahnya hingga proses akhir selesai. Untuk Node.js, Anda tidak perlu mengatur PATH environment.

Instal Cordova & Ionic

          Setelah semua tool di atas selesai diinstal, tahapan akhir adalah melakukan instalasi Cordova dan Ionic. Buka Command Prompt dan ketikkan perintah berikut:

$npm install -g cordova ionic

          Tunggu hingga proses instalasi selesai, dan sekarang Anda sudah dapat memulai proyek dengan Ionic. Ionic menyediakan 3 template awal untuk memulai proyek, yaitu blank, tabs, dan sidemenu. Untuk memulai aplikasi awal, nanti akan kita bahas pada postingan selanjutnya.

Instal Genymotion

          Seperti yang telah dijelaskan sebelumnya, bahwa aplikasi hasil dari Cordova dan Ionic ini dapat Anda jalankan pada emulator. Anda boleh menggunakan emulator apa saja sesuai kebutuhan.

          Salah satunya misalnya Genymotion. Genymotion meruapak emulator yang cukup powerful dan open-source. Anda dapat memanfaatkan emulator ini ketika membangun aplikasi.

Instal Google USB Drive

          Selain menggunakan emulator, Anda juga dapat pula menggunakan perangkat Android langsung untuk men-debug aplikasi Anda. Yang Anda butuhkan adalah kabel data Google USB drive yang dapat Anda download melalui SDK Manager. Pastikan Google USB Drivetelah terpasang dan kabel data menghubungkan perangkat Android Anda dengan komputer/laptop/PC.

Instal XAMPP Server

          XAMPP Server ini akan kita gunakan untuk membuat database dan menjalankan PHP. Download XAMPP versi terbaru melalui https://www.apachefriends.org/download.html.

          Jika sudah diinstal, silahkan mulai start aplikasi XAMPP dan aktifkan Apache dan MySQL, seperti berikut:

Gambar XAMPP Control Panel

            Pastikan kedua tombol diatas (Apache & MySQL) tersebut berubah menjadi "Stop". Ini menandakan bahwa service Apache dan MySQL sedang berjalan.

          Anda telah melakukan instalasi semua tool yang dibutuhkan. Lalu, Bagaimana memulai aplikasi awal? Nantikan postingan selanjutnya!

Penjelasan Perangkat Mobile

PENJELASAN PERANGKAT MOBILE

          Ada beberapa platform, yaitu iOS, Android, Windows 8, Firefox OS, Tizen, BlackBerry, dan masih banyak lagi. Dengan Ionic, kita dapat membangun aplikasi untuk iOS dan Android saja untuk saat ini. Dukungan untuk Windows 8 dan Forefox OS masih terus dikembangkan, namun untuk saat ini belum tersedia.

          Perangkat iOS dan Android tentu saja Anda butuhkan untuk menguji coba aplikasi Anda, selain menggunakan emulator tentunya. berikut penjelasan masing-masingnya.

Apple iOS

          Sistem operasi iOS sudah sangat terkenal dan digunakan pada perangkat iPhone dan iPad.

          Apple menyediakan Xcode sebagai program pengembangan utama untuk iOS dan Mac. Xcode gratis dan tersedia di AppStore.

          Xcode juga menyediakan emulator, di mana Anda dapat menguji coba aplikasi Anda untuk iPhone dan iPad dalam versi yabg berbeda-beda. Emulator ini cukup efisien untuk melihat langsung bagaimana aplikasi Anda ditampilkan pada versi iOS yang berbeda-beda.

            Yang menjadi masalahnya adalah, Xcode hanya dapat dijalankan di komputer Mac. Ya, Anda harus memiliki sistem operasi OSX untuk dapat membuat aplikasi untuk iOS ini.

          Apple Developer Program memiliki 2 tipe keanggotaan, iOS dan Mac. Anda harus mendaftar melalui http://developer.apple.com dan bergabung di iOS program. Dikenakan biaya USD 99 per tahun atau setara dengan 1,3 juta rupiah, namun Anda hanya perlu mendaftar ketika aplikasi Anda telah siap dipublikasikan ke AppStore.

Google Android

          Android merupakan platform open-source yang dikembangkan Google. Dibandingkan dengan Apple, Android memiliki banyak sekali macam perangkat. Saat ini, sistem operasi Android telah digunakan pada banyak perangkat mobile, jam tangan, kamera, TV, otomotif, dan komputer.

          Android menyediakan sejumlah tool untuk pengembangan, yang secara gratis dapat diunduh melalui situs Android. Google juga telah menyediakan tool tambahan seperti Chrome, browsernya Google, cukup cukup bermanffat untuk mengembangkan hybrid app.

          Pengembangan Android mendukung Mac, Linux, dan Windows. Anda dapat mempelajari lebih lanjut untuk tool pengembang Android di http://developer.android.com/sdk/index.html.

          Google juga memiliki Developer Program, dikenakan biaya USD 25 per tahun atau setara dengan 330 ribu rupiah. Sama seperti iOS, Anda hanya perlu mendaftar sebagai developer Android jika aplikasi Anda sudah siap untuk dipublikasikan di Play Store. Anda dapat melakukan registrasi di http://play.google.com/apps/publish/signup/.

Lalu Apa Saja Yang Perlu Diinstal Untuk Membuat Suatu Aplikasi Mobile? Yuk baca postingan Daftar Tool Yang Perlu Diinstal.

Persiapan Sebelum Memulai Ionic

PERSIAPAN SEBELUM MEMULAI IONIC

          Sebelum kita melangkah lebih jauh, mari siapkan beberapa hal yang nantinya menjadi dasar pemahaman. Untuk membangun aplikasi hybrid, dibutuhkan beberapa skill yang seharusnya sudah Anda miliki agar lebih mudah memahaminya.

          Tidak harus menjadi seorang ahli (expert) dalam semua keahlian, namun cukup Anda mempersiapkan diri untuk masing-masingnya.

Paham Dasar Platform Web

          Ini mungkin sudah tidak asing lagi bagi Anda. Ketika Anda mebangun sebuah website, maka Anda butuh platform web. HTML, CSS, dan JavaScript merupakan bahasa yang dapat dimengerti oleh browser. Dalam kasus ini, maka browser diibaratkan sebagai sistem operasinya.

          HTML mewakili struktur dari konten, CSS menyediakan desain, dan JavaScript menyediakan interaksi dan logika untuk website yang kita bangun tersebut.

          Oleh karena itu, Anda perlu sedikit familier dengan JavaScript, asynchronous, dan events.

Paham Dasar AngularJS

          Ada banyak teknologi yang digunakan pengembang dalam membangun aplikasi berbasis web. Jika Anda sudah cukup familier dengannya, maka ini akan sangat membantu.


          Aplikasi web yang akan kita bangun adalah dengan JavaScript menggunakan AngularJS. Ionic diciptakan agar dapat bekerja dengan AngularJS, dan pengembang yang sudah memiliki pengalaman dengan Angular akan lebih mudah memahaminya.


          Kita akan sedikit membahas Angular nantinya. Anda juga dapat mempelajari lebih lanjut mengenai AngularJS melalui http://www.angularjs.org.

Gambar AngularJS

Punya Perangkat Mobile

          Tentunya ini akan menjadi penting jika Anda adalah seorang pengembang aplikasi mobile. Perangkat mobile akan Anda butuhkan ketika nanti menguji coba aplikasi yang sedang Anda bangun.

          Walaupun tersedia emulator, namun untuk kasus tertentu, Anda tidak dapat menggunakan emulator, misalnya jika ingin mengakses kamera atau getar, tentu ini hanya bisa dilakukan oleh perangkat mobile yang sebenarnya.

          Anda juga perlu mendaftarkan perangkat mobile Anda jika membuat aplikasi iOS. Tentun ini akan sangat riskan jika masih menggunakan perangkat mobile pinjaman. Tidak harus baru, Anda bisa membeli perangkat mobile second atau sejenisnya yang harganya jauh di bawah harga kondisi baru.

Lalu Bagaimana Penjelasan tentang Perangkat Mobile Tersebut? Yuk baca postingan Penjelasan Perangkat Mobile.

Keunggulan Ionic

KEUNGGULAN IONIC

          Ionic memungkinkan Anda ntuk membuat aplikasi mobile hybrid dengan menggunakan teknologi web. Framework Ionic bersifat open-source dan menyediakan library HTML, CSS dan Javascript yang dapat Anda gunakan untuk membuat aplikasi interaktif.

          Nah, apa saja yang menjadi keunggulan Ionic dibanding Framework jenis lainnya?

Ionic untuk Pengembang

          Ionic mampu memnuhi kebutuhan pengembang yang menginginkan aplikasi yang cepat.

• Dapat dibangun dengan dengan platform web. Hanya menggunakan HTML, CSS, dan Javascript, Anda sudah dapat mengembangkan aplikasi mobile.
• Dibangun dengan AngularJS. Bagi yang sudah familier dengan Angular, tentu Ionic adalah pilhan terbaik.
• Teknologi terkini. Ionic didesain agar dapat bekerja dengan fitur-fitur modern CSS3, seperti animasi.
• CLI tools. Dengan adanya Command Line Tool, Anda dapat dengan cepat mengembangkan aplikasi melalui browser.

          

          Sebagai pengembang, Anda dapat memanfaatkan forum dari Ionic. Di sana kita dapat berdiskusi dengan para member lainnya jika ada masalah selama mengembangkan aplikasi. Forum Ionic dapat diakses melalui http://forum.ionicframework.com/.

Gambar Forum framework Ionic

Ionic untuk Pemilik Bisnis

          Dari segi bisnis, Ionic cukup punya manfaat besar. Ini dikarenakan framework ini juga disebut hybrid mobile app. Artinya, satu aplikasi yang dibangun dengan Ionic mampu bekerja di Android dan iOS.

• Hemat biaya. Tidak perlu menghabiskan biaya untuk dua platform, karena satu aplikasi yang dibangun dengan Ionic dapat bekerja di Android dan iOS.
• Open-source. Tidak perlu membayar royalti untuk hak cipta, karena sepenuhnya Ionic ini berliensi open-source.
• Mudah dikembangkan. membuat aplikasi dengan Ionic tidak butuh waktu yang lama. dengan waktu singkat aplikasi sudah bisa langsung running.

          Dengan kelebihan-kelebihan tersebut, tentu akan sangta menguntungkan pihak pengusaha dalam rangka mengembangkan bisnis mereka menggunakan smartphone Android dan iPhone/iPad.

Ionic untuk Pengguna

          Di era modern sekarang ini, tentunya konsumen akan sangat mempertimbangkan untuk menginstal aplikasi di perangkat mobile mereka. Apa saja yang menjadi kelebihan Ionic dari sisi konsumen? Berikut kelebihannya:

• Desain yang menarik. Ionic didesain sehingga dapat bekerja dan secara desain dapat digunakan pada hampir semua mobile platform sekarang ini.
• Performasi. Dengan mengurangi maipulasi DOM, tidak ada jQuery dan hardware accelerated transitions, membuat Ionic menjadi salah satu framework yang relatif cepat sekarang ini.
• Didukung di Android dan iOS. Saat ini Ionic telah dapat digunakan pada platform Android dan iOS. ke depannya, akan menyusul untuk platform lain.

          Anda dapat mendesain aplikasi yang menarik dan cepat, sehingga ini akan membuat konsumen Anda terkesan.

Lalu apa saja persiapan sebelum memulai Ionic? Yuk baca postingan Persiapan Sebelum Memulai Ionic.

Cara Kerja Framework Ionic

CARA KERJA FRAMEWORK IONIC

          Terdapat beberapa teknologi yang digunakan ketika membangun hybrid apps. Di Ionic sendiri, terdapat 3 teknologi utama, yaitu Framework Ionic, AngularJS, dan Cordova. Mari kita lihat lebih detail untuk masing-masingnya.

Framework Ionic

          Framework Ionic (juga disebut Ionic) merupakan kerangka kerja yang menyediakan sejumlah control antarmuka pengguna yang umum digunakan di aplikasi mobile. Bayangkan Anda sedang membangun sebuah aplikasi untuk membaca berita. Ionic menyediakan sejumlah komponen antarmuka pengguna, seperti sidemenu, button, list, dan lainnya, sehingga Anda dapat membuat menu navigasi, menampilkan pilihan kategori berita, dan menampilkan list berita. Komponen-komponen ini dibangun dengan kombinasi CSS, HTML, dan JavaScript.

Gambar Aplikasi Coride dibuat dengan Ionic

          Gambar diatas merupakan salah satu aplikasi Android dan iPhone, yaitu Coride yang dibangun dengan Framework Ionic.

          Ionic merupakan proyek open-source yang utamanya dikembangkan oleh Drifty. Dikenalkan pertama kali pada November 2013 dan telah berkembang dengan sangat cepat hingga menjadi pilihan utama untuk membangun hybrid apps. Hampir 20.000 aplikasi diluncurkan dengan Ionic setiap bulannya. Ionic dibangun di bawah lisensi MIT.

          Ionic juga memiliki Command Line Tool (CLI) yang membantu pengembang dalam mengembangkan aplikasi. Tool CLI ini dapat membantu Anda untuk memulai proyek, preview, build, dan deploy aplikasi Anda.

          Ionic juga memiliki library font icon di http://ionicons.com. font ini sangat bermanfaat dan dapat Anda gunakan untuk aplikasi Anda. Sifatnya opsional, kita akan mencoba menggunakannya pada contoh-contoh aplikasi nantinya.

AngularJS

          AngularJS (disebut juga Angular) adalah proyek open-source dari Google yang telah sangat populer dikalangan para pengembang aplikasi web. Angular membantu para pengembang dalam memnuliskan baris-baris kode program secara cepat dan memiliki struktur yang baik.

          Dulunya kita menggunakan bahasa berbasis server (seperti PHP, Ruby atau Java) untuk mebangun aplikasi kompleks. Sekarang ini framework berbasis web seperti AngularJS memungkinkan Anda untuk membangun aplikasi kompleks di browser. Ini merupakan sebuah kesempatan besar untuk para pengembang hybrid app, di mana kita dapat menggunakan browser ketika membangun aplikasi. Bagi Anda yang telah familier dengan AngularJS, maka ini akan menjadi lebih mudah bagi Anda dalam menerapkan Ionic ke dalam aplikasi mobile.

Gambar AngularJS dari Google

          AngularJS dimulai pada tahun 2009 oleh Misko Hevery dan Adam Abrons. Akhirnya Hevery bergabung dengan Google dan membawa Angular dengannya. Saat ini, proyek ini sangat populer di kalangan pengembang dan telah diadopsi oleh sejumlah situs besar, seperti www.nasa.gov. AngularJS juga di bawah lisensi MIT.

Cordova

          Kita akan menggunakan Apache Cordova dalam postingan ini sebagai framework hybrid app. Cordova merupakan layer yang mengatur komunikasi antara jendela browser dan native API. Misalnya, pada aplikasi cuaca membutuhkan akses ke informasi GPS (Global Positioning System) perangkat mobile untuk mengetahui lokasi, dan Cordova mampu menjembatani komunikasi antara Angular dan perangkat mobile untuk menerima informasi.

          Cordova menyediakan banyak sekali fitur dan plugin yang dapat kita guanakan dalam mengembangkan aplikasi. Lebih lanjut, Anda dapat menemukan Cordova di http://cordova.apache.org/.

Plugin Cordova

          Mungkin Anda pernah mendengar Phonegap. Adobe telah mengakuisisi Phonegap dan menggabungkannya ke dalam Apche Software Foundation dengan nama Cordova, saat ini, Phonegap adalah bagian dari Cordova. Phonegap adalah bagian inti dari Cordova yang mendukung beberapa fitur berbayar dari Adobe. Di postingan selanjutnya saya akan menggunakan Cordova, namun Anda juga dapat menggunakan Phonegap dan fitur berbayarnya jika dibutuhkan.

          Cordova adalah proyek open-source Apache yang memiliki komunitas yang cukup besar. Adobe merupakan pengembang utama daro framework ini. Cordova berada di bawah lisensi Apache 2.0.

Lalu Apa Keunggulan Ionic Dari Framework Lainnya? Yuk baca postingan Keunggulan Ionic.

Framework Ionic

FRAMEWORK IONIC

          Framework Ionic merupakan kombinasi sejumlah tool yang memungkinkan pengembang dengan cepat membangun aplikasi mobile hybrid (hybrid mobile app) mengunakan teknologi yang sama dengan yang digunakan untuk membangun website dan aplikasi berbasis web. lalu, bagaimana cara kerjanya?

          nah, disini saya akan membahas cara kerja Ionic secara lengkap. Let's down!

Apa itu Framework Ionic?

       
          Ionic merupakan framework HTML5 yang masih baru. Framework ini membantu Anda dalam mengembangkan aplikasi mobile dengan teknologi web, seperti HTML, CSS, JavaScript.

          Framework Ionic adalah sekumpulan teknologi yang dikembangkan untuk membangun aplikasi mobile hybrid yang powerful, cepat, mudah dan juga memiliki tampilan yang menarik. Ionic menggunakan AngularJS sebagai framework berbasis web dan menggunakan cordova untuk membangun aplikasi mobile.

Gambar teknologi yang digunakan oleh Framework Ionic

          Dengan tagline "The next generation HTML5 hybrid app development framework", Ionic dapat Anda gunakan untuk membangun aplikasi mobile native/hybrid. Saat ini, Ionic mrndukung UIWebView untuk iOS 6+ dan Android 4+ (dengan beberapa dukungan untuk 2.3). Dukungan pada Windows Phone dan Firefox OS masih dalam pengembangan.

          

          Sebagai pengembang (developer), tentu Anda juga dapat menggunakan emulator untuk menjalankan aplikasi dari Ionic, seperti Genymotion, Android Emulator, iOS Simulator, atau BlueStacks.

Bagaimana Ionic Bekerja?  Yuk baca pada postingan Cara Kerja Framework Ionic