Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic 2

Pengenalan Ionic 2

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Dalam artikel ini, kita akan melihat Ionic 2, versi terbaru dari framework aplikasi seluler lintas platform Ionic. Sebagai permulaan, kami akan menguraikan apa itu ionic dan apa gunanya. Lalu kita akan terjun ke Ionic 2. Saya akan memberi tahu Anda apa yang baru dan bagaimana hal itu berbeda dari Ionic 1, dan saya akan membantu Anda memutuskan apakah Anda harus menggunakannya pada proyek berikutnya atau tidak.

Apa itu Ionic?

Ionic adalah framework untuk membangun aplikasi hibrida menggunakan HTML, CSS, dan JavaScript. Muncul dengan seperangkat komponen UI dan fungsi yang dapat Anda gunakan untuk membuat aplikasi seluler yang berfungsi penuh dan menarik.

Ionic dibangun di atas susunan Cordova. Anda tidak dapat membuat aplikasi seluler dengan Ionic saja karena hanya menangani bagian UI. Ini perlu bekerja dengan Angular, yang menangani logika aplikasi, dan Cordova, framework aplikasi lintas platform yang memungkinkan Anda untuk mengompilasi aplikasi Anda ke dalam file yang dapat diinstal dan menjalankannya di dalam tampilan web perangkat seluler.

Aplikasi yang dibuat dengan Cordova dan Ionic dapat berjalan di perangkat Android dan iOS. Anda juga dapat menginstal plugin Cordova untuk menyediakan fungsionalitas asli seperti mengakses kamera dan bekerja dengan perangkat Bluetooth Low Energy.

Untuk lebih lanjut tentang Cordova, periksa beberapa kursus dan tutorial kami di sini di Envato Tuts+.

Ionic lebih dari sekadar kerangka UI. Perusahaan Ionic juga menawarkan layanan yang mendukung Framework Ionic UI, termasuk Ionic Creator, Ionic View, dan Ionic Cloud.

Apa yang Baru di Ionic 2?

Di bagian ini, kita akan melihat beberapa perubahan signifikan pada Ionic di versi 2, dan juga fitur dan tool baru yang diperkenalkan di Ionic 2.

Dukungan Browser

Ionic 1 dibangun dengan hanya aplikasi seluler hibrida dalam pikiran. Tapi Ionic 2 dibangun untuk mendukung progressive web apps dan Electron apps juga. Ini berarti Anda sekarang dapat membangun tidak hanya aplikasi Ionic yang berjalan di dalam lingkungan Cordova tetapi juga aplikasi web progresif, yang menggunakan fitur web modern untuk memberikan pengalaman seperti aplikasi kepada pengguna.

Anda juga dapat menargetkan Electron, platform untuk membangun aplikasi desktop lintas platform menggunakan HTML, CSS, dan JavaScript. Elektron cukup mirip dengan Cordova tetapi untuk sistem operasi desktop seperti Windows, Ubuntu, atau macOS.

Angular 2 dan TypeScript

Ionic 2 sekarang menggunakan Angular 2 untuk templating dan logika aplikasi. Ini berarti bahwa pengembang harus mempelajari sintaks Angular 2 yang baru sebelum dapat menjadi produktif dalam menciptakan aplikasi Ionic 2. Namun jangan khawatir, karena konsepnya masih sama dengan yang ada di Angular 1. Ada juga sumber daya seperti ngMigrate yang akan membantu Anda mengubah keterampilan Sudut 1 ke Angular 2.

Selain dari Angular 2, Ionic 2 juga menggunakan TypeScript. Bagi mereka yang tidak terbiasa dengannya, TypeScript adalah superset JavaScript. Ini berarti Anda masih dapat menggunakan sintaksis JavaScript vanila untuk menulis aplikasi Anda. Jika Anda ingin menggunakan fitur yang datang dengan TypeScript, seperti sintaks ES6 dan ES7, pengetikan statis, dan penyelesaian kode cerdas, maka Anda dapat menggunakan sintaks khusus TypeScript. Ada plugin yang dapat Anda instal pada text editor favorit anda atau IDE Anda untuk memperoleh manfaat dari fitur penyelesaian kode lanjutan dari TypeScript.

Sintaks

Seperti yang saya sebutkan, sintaks template dalam Ionic 2 telah berubah secara signifikan, sebagian besar karena peralihannya ke penggunaan Angular 2. Anda bahkan dapat menemukan bahwa sintaks yang baru lebih sederhana dan ringkas. Berikut adalah beberapa contoh sintaks Ionic 1 dan Ionic 2 berdampingan:

Listening to events:

Menggunakan model:

Looping melalui array dan menampilkan setiap item:

Struktur Folder

Jika Anda membandingkan struktur folder proyek Ionic 1 dan proyek Ionic 2, Anda akan melihat bahwa sebagian besar folder yang biasa Anda lihat dalam proyek Ionic 1 masih ada di Ionic 2. Ini karena yang mendasari Platform belum benar-benar berubah — Ionic 2 masih menggunakan Cordova. Satu-satunya hal yang telah berubah adalah bagian yang harus dilakukan dengan file sumber Anda. Berikut adalah screenshot struktur folder aplikasi Ionic 1:

ionic 1 folder structure

Dan inilah aplikasi yang dibuat dengan Ionic 2:

ionic 2 folder structure

Jika Anda melihat lebih dekat, Anda akan melihat bahwa sekarang ada folder src. Di situlah semua file sumber proyek Anda, dan setiap kali Anda membuat perubahan ke file di direktori itu, file yang diubah akan dikompilasi dan disalin ke direktori www/build. Sebelumnya, file sumber semuanya ada di direktori www, dan Anda tidak memerlukan langkah kompilasi tambahan.

Struktur direktori juga lebih terorganisir. Jika Anda memeriksa direktori src/pages, Anda dapat melihat bahwa setiap halaman memiliki foldernya sendiri, dan di dalamnya masing-masing adalah file HTML, CSS, dan JavaScript untuk halaman tertentu.

Sebelumnya, di Ionic 1, Anda hanya diberi direktori kosong dan memiliki kebebasan untuk menyusun proyek Anda sesuai keinginan Anda. Tapi ini datang dengan kerugian karena tidak memaksa Anda melakukan hal-hal dengan cara terbaik. Anda bisa malas dan tetap dengan struktur yang menyatukan semua file, yang dapat menyulitkan tim yang lebih besar yang bekerja pada aplikasi yang rumit.

Theming

Tidak seperti versi Ionic sebelumnya, yang hanya memiliki satu tampilan dan nuansa untuk semua platform, Ionic 2 sekarang mendukung tiga mode: Material Design, iOS, dan Windows. Sekarang Ionic cocok dengan tampilan dan nuansa platform yang digunakan. Jadi jika aplikasi Anda dipasang di Android, misalnya, akan menggunakan styling dan perilaku yang mirip dengan aplikasi Android asli.

Ada dukungan untuk theming di Ionic, meskipun pada saat penulisan artikel ini, itu hanya dikirimkan dengan tema Light default. Jika Anda ingin men-tweak tema, Anda dapat mengedit file src/theme/variables.scss.

Tooling

Ionic 2 juga dilengkapi dengan alat-alat baru yang akan membuatnya menyenangkan untuk membuat aplikasi seluler. Saya akan menunjukkan beberapa di bagian ini.

Generator

Ionic 2 sekarang menyediakan generator yang memungkinkan Anda untuk membuat halaman dan layanan untuk aplikasi Anda:

Ini akan membuat file-file berikut di folder app/pages Anda:

Setiap file juga memiliki beberapa kode boilerplate di dalamnya:

Ini juga berfungsi sebagai panduan untuk pengembang baru sehingga mereka tahu praktik terbaik untuk menyusun kode mereka. Inilah kode TypeScript yang dihasilkan yang menangani logika untuk halaman di atas:

Error Reporting

Ionic 2 kini hadir dengan tool error reporting untuk front-end. Ini berarti bahwa setiap kali ada kesalahan dengan kode Anda, Ionic akan membuka jendela modal tepat di pratinjau aplikasi itu sendiri. Ini membuatnya sangat mudah bagi pengembang untuk mencari tahu tentang kesalahan yang terjadi dalam aplikasi.

Ionic App Scripts

Ionic App Scripts adalah kumpulan skrip pembangunan untuk proyek-proyek Ionic. Sebelumnya, Ionic menggunakan Gulp untuk menangani proses pembangunannya.

Ionic 2 dilengkapi dengan beberapa skrip ini untuk mempermudah menyelesaikan tugas pengembangan umum. Ini termasuk hal-hal seperti transpiling kode TypeScript ke ES5, melayani aplikasi untuk pengujian di browser, atau menjalankannya di perangkat tertentu.

Anda dapat menemukan skrip default di file package.json proyek:

New Components

Komponen adalah blok bangunan UI di Ionic. Contohnya termasuk tombol, kartu, daftar, dan bidang masukan. Banyak komponen baru telah ditambahkan ke Ionic 2, dan di bagian ini kita akan melihat beberapa di antaranya.

Slides

Jika Anda ingin aplikasi berjalan untuk pengguna pertama kali, komponen Slide membuatnya mudah dibuat. Komponen ini memungkinkan Anda membuat tata letak berbasis-laman yang dapat digeser oleh pengguna untuk membaca semua tentang aplikasi Anda.

Action Sheet

Action sheets adalah menu yang meluncur ke atas dari bagian bawah layar. Action sheet ditampilkan di lapisan atas layar, sehingga Anda harus menutupnya dengan mengetuk spasi atau memilih opsi dari menu. Ini biasanya digunakan untuk konfirmasi seperti saat Anda menghapus file di perangkat iOS Anda.

Segments

Segments seperti tab. Mereka digunakan untuk mengelompokkan konten terkait bersama-sama sedemikian rupa sehingga pengguna hanya dapat melihat konten segmen yang dipilih saat ini. Segmen biasanya digunakan dengan daftar untuk memfilter item terkait.

Toast

Toasts adalah versi pemberitahuan yang halus. Mereka biasanya digunakan untuk menginformasikan pengguna bahwa sesuatu telah terjadi yang tidak memerlukan tindakan pengguna. Mereka sering ditampilkan di bagian atas atau bawah halaman agar tidak mengganggu konten yang sedang ditampilkan. Mereka juga menghilang setelah jumlah detik yang ditentukan.

Toolbar

Toolbar digunakan sebagai container untuk informasi dan tindakan yang terletak di header atau footer aplikasi. Misalnya, judul layar saat ini, tombol, bidang pencarian, dan segmen sering kali terdapat di toolbar.

DateTime

Komponen DateTime digunakan untuk menampilkan UI untuk memilih tanggal dan waktu. UI mirip dengan yang dihasilkan saat menggunakan elemen datetime-local, satu-satunya perbedaan adalah bahwa komponen ini dilengkapi dengan API JavaScript yang mudah digunakan. Sebelumnya, Ionic tidak memiliki komponen untuk bekerja dengan tanggal dan waktu. Anda juga harus menggunakan pemilih tanggal asli browser atau untuk menginstal plugin.

Floating Action Buttons

Floating Action Buttons (FABs) adalah tombol yang dipasang di area tertentu di layar. Jika Anda pernah menggunakan aplikasi Gmail, tombol untuk membuat pesan baru adalah tombol aksi mengambang. Mereka tidak terbatas pada satu tindakan karena mereka dapat memperluas untuk menampilkan tombol mengambang lainnya ketika disadap.

Untuk info lebih lanjut mengenai komponen baru, periksa dokumentasi pada komponen.

New Features and Improvements

Ionic 2 juga dikemas dengan fitur dan peningkatan baru. Ini sebagian besar karena transisi ke Angular 2 dan TypeScript.

Web Animations API

Satu keuntungan dari beralih ke Angular 2 adalah sistem animasi baru milik Angular, yang dibangun di atas API Animasi Web. Perhatikan bahwa Web Animations API tidak didukung di semua browser — itulah mengapa Anda perlu menggunakan Crosswalk untuk menginstal browser yang didukung bersama dengan aplikasi Anda. Satu-satunya downside dari ini adalah itu akan membuat ukuran pemasangan lebih besar. Pilihan lainnya adalah menggunakan polyfill.

Performance

Aplikasi yang dibuat dengan Ionic 2 lebih cepat daripada yang dibuat dengan Ionic 1. Inilah alasannya:

  • Angular 2: Manipulasi DOM dan kinerja JavaScript telah meningkat pesat di Angular 2. Anda dapat memeriksa tabel ini jika ingin mempelajari spesifikasinya. Manfaat lain yang muncul dengan Angular 2 adalah kompilasi sebelum waktunya — template dikompilasi terlebih dahulu menggunakan alat build daripada dikompilasi saat aplikasi berjalan di browser. Ini membuat aplikasi lebih cepat menginisialisasi karena tidak perlu lagi mengkompilasi template dengan cepat.
  • Native Scrolling: Ionic tidak lagi menggunakan scrolling JavaScript. Sebaliknya, sekarang menggunakan native scrolling untuk WebViews yang didukung. Sekarang juga diaktifkan di semua platform (dibandingkan dengan hanya didukung pada Android di Ionic 1). Selain dari native scrolling, ada juga Virtual Scroll, yang memungkinkan bergulir pada daftar item yang sangat besar dengan sedikit sekali pementasan kinerja. Kedua perubahan ini menambahkan kinerja pengguliran yang lebih mulus.
  • Web Workers: Web Workers memungkinkan Anda menjalankan skrip di latar belakang, diisolasi dari thread yang menjalankan halaman web. Ionic 2 mengimplementasikan pekerja web melalui komponen ion-img mereka. Menggunakan komponen ini sebagai ganti elemen img standar memungkinkan Anda mendelegasikan permintaan HTTP untuk mengambil gambar ke Web Workers. Ini membuat pemuatan gambar lebih cepat, terutama di dalam daftar besar. Komponen ion-img juga menangani pemuatan lambat, yang hanya akan meminta dan merender gambar karena terlihat di viewport pengguna.

Ionic Native

Ionic Native setara dengan ngCordova untuk Ionic 2. Keduanya berfungsi sebagai pembungkus plugin Cordova untuk mengimplementasikan fungsi asli (misalnya Camera, GeoLocation). Anda bahkan dapat menggunakan Ionic Native di aplikasi Ionic 1 Anda jika Anda mau. Perbedaan utama adalah bahwa Ionic Native memungkinkan Anda untuk menulis kode Anda menggunakan fitur ES6 dan sintaks TypeScript. Ini membuatnya lebih mudah untuk bekerja dengan Ionic 2 karena sudah menggunakan TypeScript secara default. Berikut ini contoh cara mengimplementasikan plugin Cordova Camera di ngCordova:

Dan inilah yang dilakukan menggunakan Ionic Native:

Dokumentasi

Dokumentasi telah meningkat banyak. Saya terutama menyukai kenyataan bahwa sekarang ada pratinjau berbeda untuk setiap komponen di setiap platform. Ini memberi pengembang ide yang sangat bagus tentang bagaimana aplikasi mereka akan terlihat. Semua ini tanpa pengembang menulis satu baris kode!

Haruskah Anda Menggunakan Ionic 2?

Pada saat penulisan artikel ini, Ionic 2 telah dirilis. Ini berarti siap digunakan untuk aplikasi produksi. Mempertimbangkan semua fitur baru, alat dan manfaat yang datang dengan Angular 2 dan TypeScript, satu-satunya hal yang akan menghentikan Anda dari menggunakan Ionic 2 adalah status proyek Anda.

Jika Anda baru saja memulai proyek baru, Anda masih dapat menggunakan Ionic 1 jika Anda dan rekan tim Anda hanya akrab dengan Angular 1 dan proyek Anda harus diselesaikan sesegera mungkin. Tetapi jika Anda telah diberi cukup waktu untuk proyek tersebut, Anda harus mempertimbangkan menggunakan Ionic 2. Akan ada sedikit kurva pembelajaran, dan Anda juga akan mengalami beberapa masalah karena itu tidak teruji sebagai Ionic 1, tetapi semua sepadan dengan upaya karena fitur dan peningkatan baru Ionic 2 yang keren.

Jika Anda sudah memulai proyek Anda saat ini dengan Ionic 1, Anda mungkin ingin tetap menggunakan Ionic 1 dan menghindari penulisan ulang yang besar. Jangan terlalu khawatir tentang dukungan, perbaikan, dan perbaikan bug untuk Ionic 1 — pengembang ionic telah berkomitmen untuk mendukung Ionic 1 untuk waktu yang lama. Berapa lama tepatnya tidak jelas. Paling tidak, itu akan didukung selama beberapa tahun setelah versi stabil Ionic 2 dirilis. Tetapi kita juga perlu mengingat bahwa Ionic adalah proyek open-source dengan lebih dari 200 kontributor. Jadi, selama orang terus menggunakannya, kita selalu dapat mengharapkan beberapa bentuk dukungan dari komunitas.

Kesimpulan

Itu dia! Dalam artikel ini Anda telah mempelajari semua tentang Ionic 2. Secara khusus, Anda telah belajar tentang perbedaan signifikan antara Ionic 2 dan pendahulunya. Kami juga telah melihat fitur-fitur baru yang ditambahkan ke Ionic 2, dan apakah Anda harus menggunakannya untuk proyek masa depan Anda atau tidak. Dalam tutorial masa depan, kita akan mempraktikkan pengetahuan ini dengan membuat aplikasi Ionic 2. Tetap disini!

Jika Anda ingin mempelajari lebih lanjut tentang Ionic 2, pastikan untuk memeriksa resources berikut:

Dan tentu saja, kami memiliki kursus Ionic 2 mendalam yang dapat Anda ikuti, di sini di Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.