W tej części skupimy się na kwestiach technicznych istotnych z punktu widzenia integracji infrastruktury AWS z aplikacją napisaną przy wykorzystaniu Angulara. Oczywiście, nie będziemy skupiać się na przygotowaniu samego kodu i przechodzeniu przez kolejne kroki dla aplikacji front-endowej. Tę część możecie przygotować w oparciu o dowolny framework - dla nas najistotniejsze będzie miejsce w którym wykonamy żądanie do naszej bramki API.

Interfejs użytkownika będzie bazował na wpisie: Angular 8: Integracja z .NET Core (część 2)

Korzystając z dowolnej technologii (lub prostego pliku *.html) przygotujemy prosty formularz, który będzie pozwalał na przesłanie poniższych pól:

• brand;
• model;
• color;
• price.

Bazując na wspomnianym powyżej wpisie możemy w prosty sposób przygotować aplikację z jednym komponentem, która będzie zachowywała się w poniższy sposób:

Celowo dodałem alerty - pozwalają nam sprawdzić czy sama implementacja jest poprawna a wartości pól zostają przekazywane. Z perspektywy kodu html plik ordering.component.html (w moim przypadku) przyjmuje postać:

<p>Zamawianie samochodu!</p>

<div style="width:25%;float:left">
    <p>Wprowadz poniżej dane nowego ogłoszenia!</p>
    <p>
        <strong>Marka: </strong>
        <!-- [(ngModel)] -> pamiętajcie o modyfikacji app.module.ts i imporcie odpowiedniego modułu -->
        <input type="text" [(ngModel)]="car.brand" />
    </p>

    <p>
        <strong>Model: </strong>
        <input type="text" [(ngModel)]="car.model" />
    </p>

    <p>
        <strong>Kolor: </strong>
        <input type="text" [(ngModel)]="car.color" />
    </p>

    <p>
        <strong>Cena: </strong>
        <input type="number" [(ngModel)]="car.price" />
    </p>
</div>

<div style="width:25%;float:left">
    <button (click)="onSubmit()">Zamów samochód</button>
</div>

Implementacja pliku ordering.component.ts z brakującym jeszcze endpoint’em przyjmuje poniższą postać:

import { Component, OnInit } from '@angular/core';
import { Cars } from 'src/interfaces/cars';
import { HttpService } from '../services/http.service';

@Component({
  selector: 'app-ordering',
  templateUrl: './ordering.component.html',
  styleUrls: ['./ordering.component.css']
})
export class OrderingComponent implements OnInit {

  public car: Cars;

  constructor(private httpService: HttpService) {
    // W konstrukturze tworzymy model tzw. danych defaultowych
    // Zostaną one połączone z danymi wprowadzonymi przez użytkownika
    // Otwierając ekran tworzenia nowego ogłoszenia zrozumiecie mój zamysł
    // poniższych danych
    this.car = {
      brand: "", 
      model: "", 
      color:"",
      price: 1
    };
  }

  // wykorzystujemy implementację naszego serwisu, przekazujemy odpowiedni adres
  // naszego API a zarazem żadanej metody. Obsługujemy informację pomyślną oraz 
  // ewentualne błędy
  public addCar = () => {
    const order: string = `Marka: ${this.car.brand}, Model: ${this.car.model}, Kolor: ${this.car.color}, Cena: ${this.car.price}zł`
    alert(order);
    
    let route: string = 'https://wprowadz_adres_wystawionego_api';
    this.httpService.addData(route, this.car)
      .subscribe((result) => {
        alert("Zamówienie przebiegło pomyślnie")
      },
        (error) => {
          console.error(error);
        });
  }

  onSubmit() {
    alert('Zamówienie gotowe!');
    this.addCar();
  }

  ngOnInit() {
  }
}

W poprzednim wpisie przygotowaliśmy kompletną infrastrukturę po stronie AWS. W tej części przygotowaliśmy formularz wraz z prostym serwisem, który pozwoli nam na wysłanie żądania typu POST, które jest oczekiwane przez naszą bramkę API. Co musimy zrobić? Musimy nieznacznie zmodyfikować plik ordering.component.ts podając właściwy url naszej bramki. Adres pobieramy z poziomu konsoli AWS przechodząc do usługi API Gateway:

Kolejny krok to dodanie tego adresu do kodu naszej aplikacji napisanej (w moim przypadku) w Angularze. Przechodzimy do pliku ordering.component.ts do funkcji addCar a następnie zmieniamy parametr route:

public addCar = () => {
    const order: string = `Marka: ${this.car.brand}, Model: ${this.car.model}, Kolor: ${this.car.color}, Cena: ${this.car.price}zł`
    alert(order);
    
    let route: string = 'https://5h62e6tudb.execute-api.us-east-1.amazonaws.com/dev';
    this.httpService.addData(route, this.car)
      .subscribe((result) => {
        alert("Zamówienie przebiegło pomyślnie")
      },
        (error) => {
          console.error(error);
        });
  }

Pora na uruchomienie aplikacji: ng serve, wypełnienie formularza: Oraz kliknięcie przycisku ‘Zamów samochód’ i oczekiwanie na powiadomienie sms:

I to by było na tyle. Mam nadzieję, że przeszliście przez wszystkie wpisy z pełnym zrozumieniem. Problemy (niestety) na pewno się pojawią, czasem będą niezwykle frustrujące i ciężkie do rozwiązania - taka jest natura aplikacji pisanych w chmurze. Warto jednak iść z duchem czasu, być otwartym na nowe technologie i podejścia architektoniczne.

Nasz ostatni wpis w tej serii miał na celu praktyczne wykorzystanie wiedzy zdobytej w pracy z poszczególnymi usługami. Jeżeli chcecie iść dalej w tym kierunku warto spróbować przygotować swoje własne rozwiązania wykorzystując infrastrukturę AWS. Pomysł: można rozbudować salon samochodowy, wykorzystać CQRS przy tworzeniu API, dane przechowywać w DynamoDB, przygotować funkcje reagujące na nowe zamówienia i powiadamiające klienta o rozpoczęciu procesu przygotowywania auta w fabryce. Z drugiej strony można dodać moduł analityczny, który wraz z kolejnym zamówieniem będzie zbierał wszelkiej maści statystyki - możliwości mamy tutaj naprawdę dużo.

Jeżeli seria wpisów dotycząca AWS była dla Ciebie pomocna, pozwoliła Ci rozwinąć obecne umiejętności lub dzięki niej nauczyłeś się czegoś nowego... będę wdzięczny za wsparcie w każdej postaci wraz z wiadomością, którą będę miał przyjemność przeczytać.

Z góry dziekuje za każde wsparcie - i pamiętajcie, wpisy były, są i będą za darmo!