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

Membuat Aplikasi Task Manager Menggunakan Ionic: Bagian 1

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Dalam seri tutorial ini, Anda akan belajar memulai dengan membuat aplikasi mobile menggunakan kerangka Ionic. Ionic menggunakan Angular untuk menulis komponennya dan membuat aplikasi mobile.

Sepanjang rangkaian seri ini, Anda akan membuat aplikasi mobile task manager sederhana menggunakan kerangka Ionic.

Dari dokumentasi resmi:

Ionic adalah SDK mobile yang indah, gratis dan open source untuk pengembangan aplikasi web asli dan progresif dengan mudah.

Persiapan

Mari kita mulai dengan menginstal Ionic menggunakan Node Package Manager (npm). Sebelum menginstal Ionic, pastikan Anda menginstal Node.js di sistem Anda.

Setelah Ionic terinstal, buat proyek kosong Ionic baru dengan menggunakan perintah berikut:

Anda akan menguji aplikasi Ionic di browser sampai selesai. Setelah selesai, Anda akan menguji aplikasi pada perangkat Android.

Ketik perintah berikut untuk menjalankan aplikasi dari browser.

Arahkan browser Anda ke http://localhost:8100/ dan Anda akan menjalankan proyek Ionic.

IONIC Blank Template Project

Berikut adalah bagaimana struktur proyek terlihat:

IONIC Project Structure

Struktur Proyek IONICDi dalam proyek Ionic, Anda memiliki folder bernama src/app. Di dalam folder app, Anda akan menemukan sebuah file bernama app.module.ts dimana modul root AppModule didefinisikan.

Di file app.module.ts di dalam bagian imports, Anda dapat melihat bahwa komponen root telah didefinisikan dengan menggunakan kode berikut:

MyApp telah diimpor dari app.component dimana ia telah menetapkan rootPage sebagai HomePage, yang tampil saat aplikasi dimuat.

Membuat Komponen Daftar Tugas

Mari membuat view untuk daftar tugas yang ditambahkan. Di dalam folder src/pages, buat folder lain untuk komponen list yang disebut list.

Di dalam folder list, buatlah sebuah file bernama list.component.html yang akan menjadi template komponen. Tambahkan kode berikut ke file list.component.html:

Seperti yang terlihat pada kode di atas, Anda telah menggunakan tag khusus Ionic untuk membuat elemen. Anda bisa merujuk ke dokumentasi resmi Ionic untuk mendapatkan daftar API komponen Ionic yang dapat Anda gunakan saat membuat template Anda.

Untuk mengendalikan template yang dibuat di atas, Anda memerlukan kelas controller. Buat file bernama list.component.ts dan tentukan kelas ListPage. Berikut ini tampilnya:

Anda telah menentukan komponen daftar tugas menggunakan dekorator @Component. Di dalam dekorator @Component, Anda telah menentukan selector dengan menggunakan tombol penyeleksi dan template menggunakan kunci templateUrl untuk komponennya.

Aplikasi perlu mengetahui bahwa komponen yang ada di atas ada, dan karenanya Anda perlu mengimpornya di dalam modul root.

Impor kelas ListPage di dalam file src/app/app.module.ts dan sertakan dalam daftar declarations dan entryComponen. Berikut adalah bagaimana file app.module.ts yang dimodifikasi terlihat:

Saat aplikasi dimuat, Anda ingin komponen List yang baru dibuat muncul bukannya HomePage. Jadi, modifikasi rootPage yang didefinisikan di dalam file app.component.ts.

Seperti yang terlihat pada kode di atas, Anda mengimpor ListPage di dalam file app.component.ts dan mengubah rootPage menjadi ListPage, bukan HomePage.

Simpan perubahan di atas dan mulai server Ionic menggunakan perintah berikut:

Anda harus memiliki aplikasi mobile yang berjalan di http://localhost:8100/.

Ionic App With List Component

Membuat Komponen Add Task

Dari layar daftar, Anda akan menambahkan tautan untuk menambahkan item ke dalam daftarnya. Mari kita pasang ikon tambah di sisi kanan layar. Di dalam file list.component.html, tambahkan berikut ini untuk menambahkan ikon plus.

Berikut adalah bagaimana file list.component.html yang dimodifikasi terlihat:

Simpan perubahan di atas dan mulai ulang server, dan Anda akan memiliki ikon plus yang ditampilkan di layar.

Task Manager List With Add Icon

Saat pengguna mengklik ikon plus, Anda perlu menampilkan layar untuk menambahkan tugas baru. Jadi mari kita membuat komponen lain yang disebut komponen Add.

Buat folder yang disebut add di dalam folder pages. Di dalam folder add, buat file bernama add.component.html dan tambahkan kode berikut:

Kode di atas menampilkan layar untuk menambahkan tugas baru.

Anda perlu menampilkan layar di atas saat pengguna mengklik ikon tambah di layar daftar. Jadi Anda akan menunjukkannya sebagai popup modal.

Buat file bernama add.component.ts dan tambahkan kode berikut:

Seperti yang terlihat pada kode di atas, Anda baru saja membuat komponen Add dengan menentukan selector dan templateUrl.

Daftarkan komponennya dengan mengimpornya di file app.module.ts di dalam folder src/app. Berikut adalah bagaimana file app.module.ts yang dimodifikasi terlihat:

Untuk menampilkan komponen AddPage dalam popup modal, Anda perlu mengimpor ModalController yang disediakan oleh ionic-angular. Impor ModalController di list.component.ts.

Buat metode yang disebut presentAddModal dan buat modal menggunakan ModalController yang diimpor. Berikut adalah bagaimana file list.component.ts terlihat:

Daftarkan event click pada tombol tambah di list.component.html.

Simpan perubahan di atas dan mulai ulang server Ionic. Klik pada ikon add di halaman daftar dan Anda akan memiliki halaman tambah tugas.

Task Manager App - Add Task

Untuk tombol kembali pada layar tambah tugas, Anda perlu menambahkan metode dismiss pada click tombol di file add.component.ts.

Impor modul ViewController dan panggil metode dismiss untuk kembali ke layar daftar. Berikut ini tampilnya:

Merangkum

Dalam tutorial ini, Anda melihat bagaimana memulai dengan membuat aplikasi mobile menggunakan kerangka Ionic, yang menggunakan Angular. Anda membuat tampilan untuk aplikasi task manager. Anda membuat komponen Add and List.

Di bagian selanjutnya dari rangkaian tutorial ini, Anda akan menerapkan fungsionalitas untuk aplikasi task manager untuk menambahkan dan mendaftar tugas.

Kode sumber dari tutorial ini tersedia di GitHub.

Beri tahu kami saran Anda di komentar di bawah ini.

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.