Membuat aplikasi Angular dengan API Azure Cosmos DB untuk MongoDB - Bangun UI dengan Angular

BERLAKU UNTUK: MongoDB

Tutorial multi-bagian ini menunjukkan cara membuat aplikasi baru yang ditulis dalam Node.js dengan Express dan Angular lalu menyambungkannya ke akun Azure Cosmos DB Anda yang dikonfigurasi dengan API Azure Cosmos DB untuk MongoDB.

Bagian 3 dari tutorial dibangun pada Bagian 2 dan mencakup tugas-tugas berikut:

Membangun UI Angular
Gunakan CSS untuk mengatur tampilan dan nuansa
Uji aplikasi secara lokal

Panduan video

Prasyarat

Sebelum memulai bagian tutorial ini, pastikan Anda telah menyelesaikan langkah-langkah di Bagian 2 tutorial.

Tip

Tutorial ini memandu Anda melalui langkah-langkah untuk membangun aplikasi langkah demi langkah. Jika Anda ingin mengunduh proyek yang sudah selesai, Anda bisa mendapatkan aplikasi yang diselesaikan dari repo angular-cosmosdb di GitHub.

Membangun UI

Di Visual Studio Code, klik tombol Stop untuk menghentikan aplikasi Node.
Di jendela Command Prompt Windows atau Terminal Mac Anda, ketikkan perintah berikut untuk menghasilkan komponen heroes. Dalam kode ini g=generate, c=component, heroes=name of component, dan menggunakan struktur file flat (--flat) sehingga subfolder tidak dibuat untuk itu.
```
ng g c heroes --flat 
```
Jendela terminal menampilkan konfirmasi komponen baru.

Mari kita lihat file yang dibuat dan diperbarui.
Di Visual Studio Code, di panel Explorer, navigasi ke folder src\app baru dan buka file heroes.component.ts baru yang dihasilkan dalam folder aplikasi. File komponen TypeScript ini dibuat oleh perintah sebelumnya.

Tip

Jika folder aplikasi tidak ditampilkan di Visual Studio Code, masukkan CMD + SHIFT P di Mac atau Ctrl + Shift + P di Windows untuk membuka Palet Perintah, lalu ketik Muat Ulang Jendela untuk mengambil perubahan sistem.
Di folder yang sama, buka file app.module.ts, dan perhatikan bahwa itu menambahkan HeroesComponent ke deklarasi pada baris 5 dan mengimpornya juga di baris 10.

Kembali ke file heroes.component.html dan salin dalam kode ini. <div> adalah kontainer untuk seluruh halaman. Di dalam kontainer ada daftar hero yang perlu kita buat sehingga ketika Anda mengklik salah satu Anda dapat memilihnya dan mengeditnya atau menghapusnya di UI. Kemudian dalam HTML kita punya beberapa gaya sehingga Anda tahu mana yang telah dipilih. Ada juga area edit sehingga Anda dapat menambahkan hero baru atau mengedit yang sudah ada.

<div>
  <ul class="heroes">
    <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
      <button class="delete-button" (click)="deleteHero(hero)">Delete</button>
      <div class="hero-element">
        <div class="badge">{{hero.id}}</div>
        <div class="name">{{hero.name}}</div>
        <div class="saying">{{hero.saying}}</div>
      </div>
    </li>
  </ul>
  <div class="editarea">
    <button (click)="enableAddMode()">Add New Hero</button>
    <div *ngIf="selectedHero">
      <div class="editfields">
        <div>
          <label>id: </label>
          <input [(ngModel)]="selectedHero.id" placeholder="id" *ngIf="addingHero" />
          <label *ngIf="!addingHero" class="value">{{selectedHero.id}}</label>
        </div>
        <div>
          <label>name: </label>
          <input [(ngModel)]="selectedHero.name" placeholder="name" />
        </div>
        <div>
          <label>saying: </label>
          <input [(ngModel)]="selectedHero.saying" placeholder="saying" />
        </div>
      </div>
      <button (click)="cancel()">Cancel</button>
      <button (click)="save()">Save</button>
    </div>
  </div>
</div>

Sekarang kita punya HTML di tempat, kita perlu menambahkannya ke file heroes.component.ts sehingga kita dapat berinteraksi dengan template. Kode berikut menambahkan templat ke file komponen Anda. Sebuah konstruktor telah ditambahkan dan mendapatkan beberapa hero, dan menginisiasi komponen hero service untuk mendapatkan semua data. Kode ini juga menambahkan semua metode yang diperlukan untuk menangani peristiwa di UI. Anda dapat menyalin kode berikut melalui kode yang ada di heroes.component.ts. Diharapkan untuk melihat kesalahan di area Hero dan HeroService karena komponen yang sesuai belum diimpor, Anda akan memperbaiki kesalahan ini di bagian berikutnya.

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss']
})
export class HeroesComponent implements OnInit {
  addingHero = false;
  heroes: any = [];
  selectedHero: Hero;

  constructor(private heroService: HeroService) {}

  ngOnInit() {
   this.getHeroes();
  }

  cancel() {
    this.addingHero = false;
    this.selectedHero = null;
  }

  deleteHero(hero: Hero) {
    this.heroService.deleteHero(hero).subscribe(res => {
      this.heroes = this.heroes.filter(h => h !== hero);
      if (this.selectedHero === hero) {
        this.selectedHero = null;
      }
    });
  }

  getHeroes() {
    return this.heroService.getHeroes().subscribe(heroes => {
      this.heroes = heroes;
    });
  }

  enableAddMode() {
    this.addingHero = true;
    this.selectedHero = new Hero();
  }

  onSelect(hero: Hero) {
    this.addingHero = false;
    this.selectedHero = hero;
  }

  save() {
    if (this.addingHero) {
      this.heroService.addHero(this.selectedHero).subscribe(hero => {
        this.addingHero = false;
        this.selectedHero = null;
        this.heroes.push(hero);
      });
    } else {
      this.heroService.updateHero(this.selectedHero).subscribe(hero => {
        this.addingHero = false;
        this.selectedHero = null;
      });
    }
  }
}

Di Explorer, buka file app/app.module.ts dan perbarui bagian impor untuk menambahkan impor untuk FormsModule. Bagian impor sekarang terlihat seperti berikut:
```
imports: [
  BrowserModule,
  FormsModule
],
```

Dalam file app/app.module.ts tambahkan impor untuk modul FormsModule baru pada baris 3.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

Gunakan CSS untuk mengatur tampilan dan nuansa

Di panel Explorer, buka file src/styles.scss.

Salin kode berikut ke dalam file styles.scss, ganti konten file yang sudah ada.

/* You can add global styles to this file, and also import other style files */

* {
  font-family: Arial;
}
h2 {
  color: #444;
  font-weight: lighter;
}
body {
  margin: 2em;
}

body,
input[text],
button {
  color: #888;
  // font-family: Cambria, Georgia;
}
button {
  font-size: 14px;
  font-family: Arial;
  background-color: #eee;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  cursor: hand;
  &:hover {
    background-color: #cfd8dc;
  }
  &.delete-button {
    float: right;
    background-color: gray !important;
    background-color: rgb(216, 59, 1) !important;
    color: white;
    padding: 4px;
    position: relative;
    font-size: 12px;
  }
}
div {
  margin: .1em;
}

.selected {
  background-color: #cfd8dc !important;
  background-color: rgb(0, 120, 215) !important;
  color: white;
}

.heroes {
  float: left;
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  li {
    cursor: pointer;
    position: relative;
    left: 0;
    background-color: #eee;
    margin: .5em;
    padding: .5em;
    height: 3.0em;
    border-radius: 4px;
    width: 17em;
    &:hover {
      color: #607d8b;
      color: rgb(0, 120, 215);
      background-color: #ddd;
      left: .1em;
    }
    &.selected:hover {
      /*background-color: #BBD8DC !important;*/
      color: white;
    }
  }
  .text {
    position: relative;
    top: -3px;
  }
  .saying {
    margin: 5px 0;
  }
  .name {
    font-weight: bold;
  }
  .badge {
    /* display: inline-block; */
    float: left;
    font-size: small;
    color: white;
    padding: 0.7em 0.7em 0 0.5em;
    background-color: #607d8b;
    background-color: rgb(0, 120, 215);
    background-color:rgb(134, 183, 221);
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -4px;
    height: 3.0em;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
    width: 1.2em;
  }
}

.header-bar {
  background-color: rgb(0, 120, 215);
  height: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 4em;
  margin: .5em 0;
  color: #888;
  &.value {
    margin-left: 10px;
    font-size: 14px;
  }
}

input {
  height: 2em;
  font-size: 1em;
  padding-left: .4em;
  &::placeholder {
      color: lightgray;
      font-weight: normal;
      font-size: 12px;
      letter-spacing: 3px;
  }
}

.editarea {
  float: left;
  input {
    margin: 4px;
    height: 20px;
    color: rgb(0, 120, 215);
  }
  button {
    margin: 8px;
  }
  .editfields {
    margin-left: 12px;
  }
}

Simpan file.

Tampilkan komponen

Sekarang kita memiliki komponen, bagaimana memunculkannya di layar? Mari kita ubah komponen default di app.component.ts.

Di panel Explorer, buka /app/app.component.ts, ubah judul menjadi Heroes, lalu letakkan nama komponen yang kita buat di heroes.components.ts (app-heroes) untuk merujuk ke komponen baru tersebut. Konten file sekarang akan terlihat sebagai berikut:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  template: `
  <h1>Heroes</h1>
  <div class="header-bar"></div>
  <app-heroes></app-heroes>
`
})
export class AppComponent {
  title = 'app';
}

Ada komponen lain di heroes.components.ts yang kita maksud, seperti komponen Hero, jadi kita harus membuatnya juga. Di prompt perintah CLI Sudut, gunakan perintah berikut untuk membuat model hero dan file bernama hero.ts, di mana g=generate, cl=class, dan hero=name of class.
```
ng g cl hero
```
Di panel Explorer, buka src\app\hero.ts. Di hero.ts, ganti konten file dengan kode berikut, yang menambahkan kelas Hero dengan ID, nama, dan ucapan.
```
  export class Hero {
  id: number;
  name: string;
  saying: string;
}
```
Kembali ke heroes.components.ts dan perhatikan bahwa di baris selectedHero: Hero; (baris 10), Hero memiliki garis merah di bawahnya.
Klik kiri istilah Hero, dan Visual Studio menampilkan ikon bohlam lampu di sisi kiri blok kode.
Klik bohlam dan klik Impor Hero dari "/app/hero". atau Impor Hero dari "./hero". (Pesan berubah bergantung pada penyiapan Anda)

Baris kode baru muncul di baris 2. Jika referensi baris 2 /app/hero, modifikasi sehingga mereferensikan file hero dari folder lokal (./hero). Baris 2 harus terlihat seperti ini:
```
import { Hero } from "./hero";
```
Itu terkait model, tetapi kita masih perlu membuat layanannya.

Membuat Layanan

Di prompt perintah CLI Angular, masukkan perintah berikut untuk membuat layanan hero di app.module.ts, di mana g=generate, s=service, hero=name of service, -m=put in app.module.
```
ng g s hero -m app.module
```
Di Visual Studio Code, kembali ke heroes.components.ts. Perhatikan bahwa pada baris constructor(private heroService: HeroService) {} (baris 13), HeroService memiliki garis merah di bawahnya. Klik HeroService, dan Anda akan mendapatkan bohlam lampu di sisi kiri blok kode. Klik bohlam dan klik Impor HeroService dari "./hero.service ". atau Impor HeroService dari "/app/hero.service ".

Mengklik bohlam lampu akan menyisipkan baris kode baru pada baris 2. Jika referensi baris 2 /app/hero.service, modifikasi sehingga mereferensikan file hero dari folder lokal (./hero.service). Baris 2 harus terlihat seperti ini:
```
import { HeroService } from "./hero.service"
```

Di Visual Studio Code, buka hero.service.ts dan salin dalam kode berikut, mengganti konten file.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Hero } from './hero';

const api = '/api';

@Injectable()
export class HeroService {
  constructor(private http: HttpClient) {}

  getHeroes() {
    return this.http.get<Array<Hero>>(`${api}/heroes`)
  }

  deleteHero(hero: Hero) {
    return this.http.delete(`${api}/hero/${hero.id}`);
  }

  addHero(hero: Hero) {
    return this.http.post<Hero>(`${api}/hero/`, hero);
  }

  updateHero(hero: Hero) {
    return this.http.put<Hero>(`${api}/hero/${hero.id}`, hero);
  }
}

Kode ini menggunakan versi HttpClient terbaru yang ditawarkan Angular, yaitu modul yang perlu Anda sediakan, jadi kami akan melakukannya berikutnya.

Di Visual Studio Code, buka app.module.ts dan impor HttpClientModule dengan memperbarui bagian impor untuk menyertakan HttpClientModule.
```
imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule
],
```
Di app.module.ts, tambahkan pernyataan impor HttpClientModule daftar impor.
```
import { HttpClientModule } from '@angular/common/http';
```
Simpan semua file di Visual Studio Code.

Membangun aplikasi

Pada prompt perintah, masukkan perintah berikut untuk membangun aplikasi Angular.
```
ng b
```
Jika ada masalah, jendela terminal menampilkan informasi tentang file yang akan diperbaiki. Ketika build selesai, file baru masuk ke folder dist. Anda dapat meninjau berkas baru di folder dist jika mau.

Sekarang mari kita jalankan aplikasi.
Di Visual Studio Code, klik tombol Debug di sisi kiri, lalu klik tombol Mulai Debugging .
Sekarang buka browser internet dan navigasi ke localhost:3000 dan lihat aplikasi berjalan secara lokal.

Langkah berikutnya

Di bagian tutorial ini, Anda telah melakukan hal berikut:

Membangun UI Angular
Menguji aplikasi secara lokal

Anda dapat melanjutkan ke bagian berikutnya dari tutorial untuk membuat akun Azure Cosmos DB.

Membuat akun Azure Cosmos DB menggunakan Azure CLI

Mencoba melakukan perencanaan kapasitas untuk migrasi ke Azure Cosmos DB? Anda dapat menggunakan informasi tentang kluster database Anda yang ada saat ini untuk membuat perencanaan kapasitas.

Jika Anda hanya mengetahui jumlah vcore dan server di kluster database yang ada, baca tentang memperkirakan unit permintaan menggunakan vCore atau vCPU
Jika Anda mengetahui rasio permintaan umum untuk beban kerja database Anda saat ini, baca memperkirakan unit permintaan menggunakan perencana kapasitas Azure Cosmos DB

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2024-08-15