Buat Aplikasi Library Finder di Angular: HomeComponent dan LibraryListComponent

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

Dalam salah satu seri tutorial Angular saya sebelumnya, saya membahas dasar-dasar Angular, mulai dari menginstal CLI dan kemudian membahas cara membuat komponen dasar dan mengimplementasikan routing. Lihat postingan saya tentang Membuat Aplikasi Angular Pertama Anda: Basic, untuk penyegar pemasangan Angular CLI dan alat lain yang direkomendasikan untuk membuat aplikasi Angular dengan mudah.

Angular

Membuat Aplikasi Angular Pertama Anda: Dasar-dasar

Monty Shokeen

Aplikasi informasi negara yang kami buat dalam seri itu bagus untuk memulai dengan Angular, tetapi tidak memiliki beberapa fitur. Misalnya, kita menyimpan informasi yang ingin kita tampilkan kepada pengguna kita di dalam array. Namun, dalam tutorial ini, kita akan bergerak di luar sejumlah kecil data dan membiarkan pengguna mencari database perpustakaan yang tersedia dari CDNJS.

Ini aplikasi yang akan kita buat:

Di posting sebelumnya, kita membuat kelas LibraryService untuk mendapatkan informasi tentang berbagai pustaka menggunakan API CDNJS. Kita juga membuat file app-routing.module.ts untuk menyediakan semua logika routing untuk aplikasi kita.

Dalam logika routing, Anda mungkin telah memperhatikan bahwa kita memberi tahu Angular untuk merender HomeComponent ketika pengguna berada di beranda aplikasi kita. Demikian pula, kita memberi tahu Angular untuk merender LibraryListComponent ketika pengguna mengeklik tombol List All Libraries setelah mengetik sesuatu di input field.

Dalam tutorial ini, kita akan membuat dua komponen ini untuk aplikasi Angular kita. Kita akan membuat HomeComponent terlebih dahulu dan kemudian membuat LibraryListComponent nanti.

Membuat Kelas HomeComponent

Untuk membuat file HomeComponent menggunakan CLI Angular, pindah ke direktori aplikasi library-finder di console. Setelah itu, jalankan perintah berikut:

1	ng generate component home

Ini akan membuat folder bernama home di dalam direktori root aplikasi librari finder kita. Folder ini akan memiliki empat file berbeda. Tiga dari file-file ini harus dinamai home.component.css, home.component.html, dan home.component.ts.

File HTML akan berisi kode template untuk HomeComponent, dan file CSS akan berisi informasi style untuk template itu. File TypeScript akan berisi logika HomeComponent kita.

Berikut adalah kode untuk file home.component.ts:

import { Component } from '@angular/core';

import { LibraryService } from '../library.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  searchTerm = '';
  libraryName = '';

  constructor(private libraryService: LibraryService) { }

  updateTerm(event: any): void {
    this.searchTerm = event.target.value;
  }

  updateName(event: any): void {
    this.libraryName = event.target.value;
  }

}

Jika Anda membaca seri membuat aplikasi Angular pertama Anda, Anda mungkin telah memperhatikan bahwa HomeComponent yang kita buat di tutorial kedua dari seri tersebut telah mengimpor modul OnInit dari Angular core. Kita juga menginisialisasi nilai properti yang berbeda di kelas tersebut di dalam metode ngOnInit().

Tidak ada modul yang diimpor kali ini karena HomeComponent tidak mendapatkan atau menetapkan nilai apa pun selama inisialisasi. Selain itu, kebanyakan hal lain dilakukan dengan cara yang sama.

Kita mulai dengan mengimpor kelas LibraryService yang kita buat sebelumnya. Setelah itu, kita menetapkan nilai selector, templateUrl, dan styleUrls di dalam dekorator komponen. Ingat bahwa Anda dapat memberikan beberapa stylesheet untuk menata komponen tetapi hanya satu file templat untuk merendernya.

Di dalam definisi kelas HomeComponent, kita mendefinisikan dua properti yang disebut searchTerm dan libraryName. Nilai dari kedua properti ini ditetapkan ke string kosong secara default. Nilai-nilai ini diperbarui di dalam metode updateTerm() dan updateName() ketika pengguna mengetik sesuatu di bidang input masing-masing.

Membuat Template HomeComponent

HomeComponent kita akan memiliki dua bidang input dan dua tautan yang akan bertindak seperti tombol dan membawa pengguna ke jalur yang berbeda. Input field akan mendengarkan event keyup dan memperbarui nilai properti searchTerm dan libraryName sesuai.

Dua tautan di samping bidang input membawa pengguna ke path yang berbeda menggunakan routerLink directive. Dalam kasus pertama, pengguna masuk ke /list/{{searchTerm}}, dan dalam kasus kedua, mereka pergi ke /detail/{{libraryName}}. Path diperbarui secara dinamis berdasarkan nilai saat ini dari field input. Sebagai contoh, path menjadi /list/bootstrap ketika seseorang mengetik bootstrap di kolom input pertama, dan itu menjadi /detail/jquery ketika seseorang mengetik jquery di kolom input kedua.

Berikut ini adalah kode lengkap untuk file home.component.html kita:

<div class="wrapper">
  <div class="input-container">
    <input type="text" placeholder="Search Term" (keyup)="updateTerm($event)">
    <a class="simple" routerLink="/list/{{searchTerm}}">List All Libraries</a>
  </div>
  <br>
  <div class="input-container">
    <input type="text" placeholder="Library Name" (keyup)="updateName($event)">
    <a class="simple" routerLink="/detail/{{libraryName}}">Show Library Details</a>
  </div>
  <br>
  <h3>Popular Libraries</h3>
  <div class="library-box" routerLink="/detail/jquery">jQuery</div>
  <div class="library-box" routerLink="/detail/Chart.js">Chart.js</div>
  <div class="library-box" routerLink="/detail/sweetalert">SweetAlert</div>
</div>

Kita juga telah membuat tiga kotak berbeda untuk daftar nama-nama beberapa pustaka populer. Pengguna akan dapat melihat secara langsung rincian dari pustaka ini, bukan terlebih dahulu mengetikkan nama mereka dan kemudian mengklik tombol Show Library.

Semua elemen ini telah dibungkus di dalam elemen div container untuk mengelompokkannya bersama-sama untuk styling.

Membuat File CSS HomeComponent

Setelah menulis logika komponen dan membuat file template, kita hanya perlu memperbarui file CSS untuk membuat HomeComponent kita layak ditampilkan.

Berikut ini CSS yang saya gunakan untuk menata berbagai elemen di dalam file template. Anda dapat mengubah semua aturan style di sini berdasarkan preferensi Anda sendiri.

div.wrapper {
  width: 800px;
  margin: 20px auto;
}

h3 {
  font-size: 1.5em;
  text-align: center;
  color: #666;
  font-family: 'Lato';
}

a.simple {
  background: white;
  color: black;
  border: 1px solid black;
  padding: 5px 10px;
  font-size: 1.3rem;
  font-family: 'Lato';
  font-weight: 300;
  border-radius: 5px;
  text-decoration: none;
  width: 200px;
  display: inline-block;
  text-align: center;
}

input {
  border: none;
  border-bottom: 2px solid #00ccff;
  font-size: 1.5rem;
  outline: none;
  font-family: 'Lato';
  font-weight: 300;
  margin-right: 100px;
  width: 450px;
}

input:focus {
  border-bottom: 2px solid #ccff00;
}

div.library-box {
  font-family: 'Lato';
  color: white;
  background: purple;
  width: 200px;
  height: 70px;
  text-align: center;
  padding-top: 30px;
  font-size: 2em;
  border-radius: 4px;
  display: inline-block;
  margin: 20px;
}

div.library-box:hover {
  background: black;
  cursor: pointer;
}

Segala sesuatu dalam file CSS sudah cukup jelas. Kita mengatur lebar dari div wrapper kita dengan nilai tetap 800 px. Kotak bawah dengan nama populer libraries mengubah warna latar belakang menjadi hitam saat pengguna mengarahkan kursor ke atasnya.

Membuat Kelas LibraryListComponent

Seperti yang saya sebutkan sebelumnya, LibraryListComponent akan digunakan untuk membuat daftar semua pustaka yang berisi istilah pencarian yang diekstrak dari path saat ini. Anda dapat dengan cepat menghasilkan semua file yang diperlukan untuk komponen ini dengan mengeksekusi pernyataan berikut pada baris perintah:

1	ng generate component library-list

Sama seperti komponen home kita, perintah ini akan membuat folder yang disebut library-list di direktori root. Akan ada empat file di dalam folder, tetapi kita perlu khawatir hanya tiga file: library-list.component.css, library-list.component.html, dan library-list.component.ts.

Kita akan mencoba mendapatkan daftar pustaka yang terkait dengan istilah pencarian yang disediakan di URL segera setelah komponen dimuat. Ini berarti bahwa kita juga harus mengimpor OnInit bersama dengan Component dari @angular/core.

Mengimpor ActivatedRoute memungkinkan kita untuk bekerja dengan semua informasi route yang terkait dengan komponen yang dimuat saat ini. Dengan cara ini, kita dapat dengan mudah mengekstrak istilah pencarian dari path saat ini. Setelah mengimpor berbagai dependensi dari Angular, kita melanjutkan dan mengimpor kelas LibraryService kita.

Seperti biasa, penghias komponen menyimpan nilai selector, URL template, dan jalur stylesheet untuk LibraryListComponent.

Di dalam metode ngOnInit(), kita memanggil metode getLibrary(). Metode getLibrary() selanjutnya menggunakan metode searchLibraries() dari LibraryService untuk mendapatkan semua hasil kita. Hasil ini kemudian disimpan di dalam libraries array yang dinyatakan di bagian atas definisi kelas kita.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { LibraryService } from '../library.service';

@Component({
  selector: 'app-library-list',
  templateUrl: './library-list.component.html',
  styleUrls: ['./library-list.component.css']
})

export class LibraryListComponent implements OnInit {

  libraries = [];

  constructor(
    private route: ActivatedRoute,
    private libraryService: LibraryService
  ) { }

  ngOnInit() {
    this.getLibrary();
  }


  getLibrary(): void {
    const library: string = this.route.snapshot.paramMap.get('search');
    this.libraryService.searchLibraries(library)
      .then((data: any) => {
        data.results.forEach(function (result) {
          this.libraries.push({ 'name': result.name, 'version': result.version, 'description': result.description });
        }, this);
      });
  }
}

Ide Akhir

Dalam tutorial ini, kita berhasil membuat HomeComponent aplikasi library finder kita. Ini akan memungkinkan pengguna untuk mencari pustaka yang berbeda dalam basis data CDNJS. The HomeComponent tidak terlalu berguna dengan sendirinya. Jadi kita akan membuat dua komponen lagi yang disebut LibraryListComponent dan LibraryDetailsComponent.

Kita telah memperbarui file TypeScript untuk LibraryListComponent kita. Kita akan memperbarui template HTML dan file CSS di tutorial berikutnya. Jika Anda memiliki pertanyaan terkait tutorial ini, beri tahu saya di komentar.