Menulis Kode Aplikasi Ionic 2 Pertama Anda: Bersiap-siap

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:

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:

ionic info | grep "Version"

Berikut adalah contoh keluaran:

Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
Node Version: v6.7.0

Membuat Suatu Proyek Ionic Baru

Ionic CLI menyediakan perintah ionic start untuk memulai suatu proyek baru dengan mudah.

ionic start photoSharer blank --v2 --id com.tutsplus.photosharer

Berikut adalah tempat yang bisa membantu Anda memahami apa yang dilakukan oleh tiap pilihan:

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:

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.

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.

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:

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!

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.