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

Ionic From Scratch: Bekerja Dengan Komponen Ionic

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Apa itu Komponen Ionik?

Komponen ionic, untuk sebagian besar, adalah apa yang membuat aplikasi hybrid Anda menjadi hidup. Komponen menyediakan antarmuka pengguna untuk aplikasi Anda, dan Ionic dilengkapi dengan lebih dari 28 komponen. Ini akan membantu Anda menciptakan kesan pertama yang menakjubkan dari aplikasi Anda.

Tentu saja, Anda tidak dapat menggunakan semua dari 28 komponen ini dalam satu aplikasi. Bagaimana cara memutuskan yang mana yang akan digunakan?

Nah, untungnya ada komponen yang akan Anda temukan di hampir setiap aplikasi. Dalam artikel sebelumnya saya menunjukkan cara menavigasi ke tampilan lain menggunakan Tombol Komponen Ionic. Yang kami butuhkan untuk membuat tombol ini adalah kode berikut:

Di sini, kita sudah menggunakan salah satu komponen ionic yang tersedia bagi kita. Itulah keindahan Ionic: kita tidak perlu menyibukkan diri dengan bagaimana komponen tombol dibangun, yang perlu kita ketahui adalah bagaimana menggunakan komponen yang relevan dengan tepat.

Kapan Harus Menggunakan Komponen Ionic?

Sebagai pemula, saya ragu bahwa akan ada aplikasi yang Anda kembangkan yang tidak akan menggunakan komponen ionic. Anda juga dapat mengembangkan komponen kustom Anda sendiri, tetapi itu adalah topik untuk hari lain untuk penggunaan lanjutan dari Ionic dan Angular.

Dengan yang disebutkan di atas, mari kita lihat cara menggunakan komponen yang paling sering digunakan dalam aplikasi seluler Ionic:

Komponen Slides

Komponen slide biasanya berfungsi sebagai intro untuk aplikasi, dan di bawah ini adalah gambar dari penggunaan umumnya:

Slides used in an intro for an app

List Komponen

Lists adalah salah satu komponen yang juga akan Anda gunakan secara teratur di aplikasi Ionic Anda. Lihatlah screenshot di bawah ini untuk contoh.

Example of a list in an app

Menambahkan Komponen ke Proyek Anda

Sekarang setelah kami mengumpulkan sedikit info tentang komponen-komponen ionic, mari coba dan letakkan beberapa 'building blocks' ini bersama-sama. Mari lanjutkan dan tambahkan beberapa komponen ke proyek Ionic kami.

Kita akan menggunakan proyek yang kita buat di tutorial sebelumnya, dan karena home adalah titik masuk aplikasi kita, kita akan menambahkan slide ke file home.html untuk menambahkan slide kita. Kita akan melakukannya dengan menavigasi ke file home.html di src/pages/home dan membuat perubahan berikut ke file:

Seperti yang Anda lihat di atas, kita telah menambahkan tiga slide menggunakan komponen slide. Ini di dalam <ion-slide>Content  here.. </ion-slide> Anda dapat menghasilkan banyak slide yang Anda inginkan, tetapi untuk tujuan contoh ini, kita hanya membuat tiga.

Kita akan menggunakan komponen Ionic lain: komponen list. Untuk melakukannya, mari kita lanjutkan dan menghasilkan halaman baru berjudul my-list. Anda harus ingat cara menghasilkan halaman baru dari tutorial sebelumnya menggunakan perintah berikut: ionic generate page my-list..

Dengan halaman baru kita ditambahkan ke aplikasi kita, mari kita pergi ke depan dan arahkan ke my-list.html dan edit file sebagai berikut:

Dengan kode di atas ditambahkan ke aplikasi Anda, Anda seharusnya dapat melihat daftar dengan tiga item. Nah, itu bagus, tapi saya yakin Anda ingin melihat beberapa scrolling halus dengan akselerasi dan deselerasi ketika Anda scroll list, kan? Nah, itu mudah dicapai — kita hanya perlu list yang lebih besar!

Pertimbangkan kode berikut di dalam file my-list.html:

Jika Anda memperbarui file dengan list yang lebih panjang di atas, Anda akan melihat scrolling dengan akselerasi dan deselerasi.

Sekarang ini adalah salah satu cara untuk membuat daftar dalam proyek kita, tetapi ini akan tampak sangat menjengkelkan jika kita perlu membuat daftar dengan lebih banyak lagi item. Itu berarti menulis <ion-item>...content...</ion-item> untuk masing-masing. Untungnya, ada cara yang lebih baik, dan bahkan sebagai pemula, Anda harus mencoba mengikuti metode yang sama ini ketika bekerja dengan sejumlah besar data dan informasi.

Dokumentasi Ionic resmi menunjukkan bagaimana menggunakan pendekatan yang berbeda untuk mengisi daftar dengan item:

Keajaiban dalam kode di atas adalah penggunaan direktif Angular: * ngFor. Kita tidak akan menyelam lebih dalam ke apa arahan ini dan apa yang dilakukan, tetapi singkatnya, iterates atas koleksi data, memungkinkan kita untuk membangun list dan tabel presentasi data di aplikasi kita. item adalah variabel yang berisi data kami, dan item diisi dengan setiap item dalam daftar itu. Jika Anda ingin mempelajari lebih lanjut tentang petunjuk ini, silakan lihat dokumentasi Angular resmi.

Dengan pengetahuan itu, mari tingkatkan proyek kita dengan direktif * ngFor. Edit file my-list.html untuk mencerminkan hal-hal berikut:

Banyak hal terjadi di sini. berisi serangkaian komponen . Atribut item-start berarti avatar akan disejajarkan dengan sisi kanan. Setiap item daftar juga berisi tag header (h2) dan tag paragraf (p).

Jadi, pada dasarnya, Anda juga dapat menambahkan komponen tambahan di dalam komponen daftar. Lihatlah contoh hebat lain tentang cara mencapai ini dalam contoh Daftar Dalam Kartu dari dokumen-dokumen Ionic. Sekali lagi, menerapkan * ngFor dalam contoh itu akan bermanfaat.

Sekarang, kembali ke kode kami, item kami dalam item berisi judul, sub-judul, dan gambar. Mari lanjutkan dan buat perubahan berikut di dalam file my-list.ts kami:

Dalam contoh di atas, kami mengisi item kami di dalam file konstruktor kami, my-list.ts. Ini akan ditampilkan di dalam template halaman kami, file my-list.html. Data ini dapat berasal dari sumber apa pun: basis data lokal, masukan pengguna, atau API REST eksternal. Tetapi demi contoh ini, kami hanya meng-coding data.

Kesimpulan

Meskipun kami tidak mencakup semua komponen Ionic, prinsip yang sama berlaku untuk yang lain. Saya ingin mendorong Anda untuk bermain-main dan menguji komponen lainnya dan mulai terbiasa menggunakannya. Seperti yang saya sebutkan di awal, komponen ini akan menjadi blok bangunan setiap aplikasi Ionic yang pernah Anda buat!

Sementara itu, periksa beberapa posting kami yang lain tentang pengembangan aplikasi Ionic.

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.