Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)
Dengan rilis terbaru Ionic 2, mungkin Anda salah satu pengembang aplikasi hybrid yang ingin mencobanya. Tetapi mungkin juga Anda kewalahan dengan begitu banyaknya hal yang harus dipelajari untuk memulai.
Itulah mengapa saya ingin memberikan pada Anda awal yang baik dengan mengajak Anda belajar selangkah demi selangkan akan pembuatan aplikasi Ionic 2 pertama Anda. Jika Anda sudah familiar dengan Ionic, bisa jadi konsepnya mudah "klik" dengan Anda. Tetapi jika Anda adalah benar-benar pemulaa, tak usah khawatir—saya tidak akan mengasumsikan Anda tahu apapun tentang framework ini.
Ikhtisar Aplikasi
Di tutorial ini dan yang berikutnya, Anda akan membuat suatu aplikasi berbagi foto yang memungkinkan pengguna mengambil gambar dari perangkat mereka dan membagikannya ke Instagram. Berikut penampakan aplikasinya nanti:



Pangaturan Awal Environment Anda
Sebelum Anda mulai mengembangkan aplikasi dengan Ionic 2, mula-mula Anda harus melakukan pengaturan awal environment pengembangannya. Termasuk beberapa software berikut:
- Android SDK: aplikasi yang dikembangkan dengan Cordova dan Ionic berganting pada developer tool yang sama dengan yang digunakan oleh pengembang aplikasi native.
- Node.js: yang ini utamanya digunakan dengan Ionic for tooling—seperti kompilasi kode dan mengecek kesalahan.
- Suatu perangkat Android atau emulator untuk pengujuan. Anda bisa memasang emulator Android dengan installer Android SDK.
Saya tidak akan menunjukkan Anda cara pengaturan awal environment untuk pengembangan. Panduan platform Cordova telah melakukannya dengan sangat baik:
Dua halaman tersebut akan menunjukkan semua yang Anda butuhkan untuk mengetahui tentang pengaturan Cordova untuk iOS atau Android. Sekalinya dev environment Anda tertata dengan benar, kita bisa lanjut ke langkah berikutnya.
Memasang Cordova dan Ionic
Fiiuuh! Sekarang Anda bisa benar-benar memasang Cordova dan Ionic. Gunakan perintah berkut:
1 |
npm install -g cordova ionic |
Sekalinya Anda selesai memasang, dengan asumsi tidak ada kesalahan sama sekali, Anda bisa memverifikasi apakah benar-benar sudah dipasang dengan perintah berikut: cordova --version
and ionic --version
. Perintah itu akan menunjukkan versi framework Cordova dan Ionic yang dipasang dalam sistem Anda. Bagi saya, perintah tersebut memberikan hasil 6.4.0
dan 2.2.1
Jika Anda ingin melihat versi yang lebih terperinci seperti versi Ionic Framework dan versi Ionic CLI, gunakan perintah berikut:
1 |
ionic info | grep "Version" |
Berikut adalah contoh keluaran:
1 |
Ionic Framework Version: 2.2.0 |
2 |
Ionic CLI Version: 2.2.1 |
3 |
Ionic App Lib Version: 2.2.0 |
4 |
Ionic App Scripts Version: 1.1.4 |
5 |
Node Version: v6.7.0 |
Membuat Suatu Proyek Ionic Baru
Ionic CLI menyediakan perintah ionic start
untuk memulai suatu proyek baru dengan mudah.
1 |
ionic start photoSharer blank --v2 --id com.tutsplus.photosharer |
Berikut adalah tempat yang bisa membantu Anda memahami apa yang dilakukan oleh tiap pilihan:
1 |
ionic start {name of the app} {starter template to use} --v2 --id {ID of the app when installed} |
Templat starter yang digunakan di sini adalah blank
. Hanya berisi yang paling minimal dalam rangka menampilkan sesuatu di layar. Ada yang lain juga, tetapi bisa membuat Anda sedikit kewalahan.
Ingat bahwa Ionic CLI hanya melayani proyek-proyek Ionic 1 dan Ionic 2, sehingga Anda masih harus menepatkan pilihan --v2
agar bisa bootstrap suatu proyek Ionic2 karena defaultnya masih Ionic 1. Tetapi begitu Anda di dalam suatu proyek Ionic2, Ionic CLI cukup cerdas untuk mengetahui versi mana yang digunakan.
Menambahkan Platformnya
Secara default, Ionic tidak membawa platform apapun yang akan Anda gunakan. Anda bisa menambahkan dengan perintah ionic platform add
yang diikuti dengan platform yang akan Anda gunakan:
1 |
ionic platform add android |
Jika Anda ingin menggunakan platform lainnya, ubah saja android
dengan platform apa saja yang Anda inginkan.
Memasang Plugin
Untuk aplikasi ini, Anda butuh dua plugin: yang satu untuk memilih gambar dari library pengguna, dan satu lagi untuk membagikan gambar ke aplikasi Instagram.
Pertama adalah plugin Image Picker. Ini akan memberikan aplikasi kemampuan untuk memilih gambar dari library foto pengguna.
1 |
ionic plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker |
Selanjutnya adalah plugin Instagram. Ini memungkinkan Anda untuk meneruskan gambarnya ke aplikasi Instagram untuk dikirimkan.
1 |
ionic plugin add cordova-instagram-plugin |
Kedua plugin yang baru saja Anda pasang adalah bagian dari paket wrapper ES6 dan TypeScript untuk plugin Cordova yang disebut sebagai Ionic Native. Tugas utamanya adalah memudahkan interaksi dengan plugin Cordova dengan mengikat plugin callbacks dalam Promises
atau Observables
.
Alur Kerja Pengembangan
Sekarang Anda siap untuk benar-benar mulai menulis kode aplikasinya. Tapi sebelum melakukanya, mari sebelumnya kita lihat alur kerja pengembangan Ionic 2 dan struktur foldernya.
Di Ionic 2, kebanyakan kerja pengembangan dilakukan di dalam folder src. File-file ini dikompilasi ulang tiap kali Anda melakukan perubahan pada file-file di dalam folder ini. Tidak seperti di Ionic 1, kompilasi penting karena file-file sumber ditulis dalam TypeScript (dikompilasi ke kode ES5) dan Sass (dikompilasi ke kode CSS) Setiap kali Anda melakukan perubahan, kodenya juga diperiksa kesalahan-kesalahannya, yang selanjutnya dilaporkan kembali ke pengembang melalui konsol atau pratinjau aplikasi. Begitu kompilasinya selesai, file-file yang dihasilkan disalin ke folder www, dan perubahannya direfleksikan dalam pratinjau aplikasi.
Struktur Folder
Agar nyaman bekerja dalam suatu proyek Ionic 2, Anda harus mengakrabka diri dengan struktur folder. Untuk pemula, Anda harus tahu apa kegunaan tiap folder sehingga Anda tahu di mana menempatkan file-file sumber Anda dan ke mana mencari file-file yang Anda butuhkan.
- node-modules: di sinilah dependensi Ionic 2 disimpan. Seringkali Anda tidak harus menyentuh folder ini kecuali ada masalah dengan salah satu dependensi dan Anda harus memasangnya ulang.
- platform: adalah lokasi penyimpanan kode khusus platform dan installer aplikasi ketika Anda membuat aplikasi untuk dijalankan di suatu perangkat atau emulator. Ini artinya semua file Anda di folder www dan plugin disalin di sini tiap kali Anda membangun aplikasinya.
- plugins: di sini plugin disimpan, baik plugin default Ionic dan plugin lain yang Anda pasang.
- resources: di sini Anda menyimpan sumber-sumber daya aplikasi seperti icon dan splash screen.
- src: di sinilah Anda akan sering menulis kode. Semua file templat, stylesheets, dan TypeScript yang melengkapi aplikasi Anda disimpan di sini.
- www: di sinilah semua kompilasi Anda berjalan. File-file di sini dilayani dalam pratinjau aplikasinya.
- hooks: di sini hook script pengembangan Cordova disimpan. Digunakan jika Anda punya script kustom yang hendak dieksekusi dalam beberapa bagian siklus pengembangannya (misalnya ketika suatu platform atau plugin ditambahkan).
Menjalankan Server Development
Ketika sedang mengembangkan suatu aplikasi, penting untuk melihat pratinjau langsung aplikasi yang diperbarui ketika Anda membuat perubahan pada kode. Untuk meluncurkan development server, gunakan perintah berikut:
1 |
ionic serve |
Akan dimulai proses melihat perubahan di file-file sumber dan akan dimulai juga kompilasinya di waktu sesungguhnya. Secara default, Ionic akan menampilkan pratinjau di http://localhost:8100/
. Anda akan melihat seperti di bawah ini, lalu Anda bisa melanjutkan dan mempratinjau aplikasi Anda di peramban pada ULR yang dilaporkan.



Langkah Berikutnya
Sekarang pengaturan awal environment development kita sudah siap, mari mulai menulis kode aplikasinya! Tetaplah di sini untuk kiriman berikutnya, akan kami tunjukkan Anda cara sebenarnya menulis kode aplikasi, membuat UI dan semua fungsionalitas berbagi foto. Ini akan menjadi sangat menyenangkan!
Sementara itu, periksa beberapa tutorial kami terkait Ionic 2!
- IonicBagaimana Membuat Aplikasi Kamera dengan Ionic 2Ashraff Hathibelagal
- Ionic 2Mengenal Ionic 2Wernher-Bel Ancheta
Jika Anda ingin belajar secara mendalam dan praktis tentang mengenal framework Ionic 2, cobalah kursus kami Getting Started With Ionic 2.

Di kursus ini, Reggie Dawson akan mengajari Anda semua tentang framework Ionic dan menunjukkan cara membuat suatu aplikasi selular dari nol. Selama prosesnya, Anda akan belajar tentang Ionic component library, tentang pemrograman Java Script yang bertipe statis, dan tentang mengintegrasikan aplikasi Ionic 2 dengan suatu media API yang kaya.