昨天我們完成了 ColorCodeTag 後端的初步建置，今天，我們一樣先簡單的介紹 Angular 然後開始實作，預期將分成上下兩篇。

本日前端會展示前端程式碼，若專業職能非實踐前端的讀者也能直接快轉到 GIF 圖檔的地方。

Angular 簡介

Angular is a development platform, built on TypeScript

(取自 https://angular.io/guide/architecture )

Angular 是由 Google 開發並基於 TypeScript 的框架，是一個單頁式架構 (Single Page Applications, SPA)；目前在企業開發上十分受歡迎，而我個人的觀察發現 Angular 在實踐 MVC 的特性很適合多人團隊開發，在創建 Component 時同時會建立 component.ts, component.html 和 css 來區分要實現的項目，也能注入 Service 發送 REST 請求。

前端建置

這次前端的建置使用 Bootstrap 5 快速的製作元件，今天先以 Bootstrap 的 Modal 驗證與呈現回傳的色碼，關於 Angular 的建置的步驟就不詳細說明。

#創建專案
ng new ColorCodeTag
#選擇創立基本的 routing，並選擇 CSS 為 stylesheet format

#創建主要頁面的 component 於 pages 資料夾下
ng g c pages/main-page
#創建檔案上傳的 service 於 services 資料夾下
ng g s services/file-upload

創建專案後，我們先將 app.component.html 內預設的代碼都清空，僅留下 router-outlet。另外，我們在 asserts 資料夾內放置一張圖片當首頁圖。

style.css

@import '~bootstrap/dist/css/bootstrap.min.css';
body{
  background-color: #f2f2f2;
}

file-upload.service.ts

在此定義上傳檔案的方法與後端的 API，在後續我們會將他抽離到 emvironment 內。

  // Spring Boot API
  baseApiUrl = "http://localhost:8081/getColor"

  constructor(private http: HttpClient) { }

  upload(file:any): Observable<any> {
    const formData = new FormData();
    formData.append("file", file, file.name);
    return this.http.post(this.baseApiUrl, formData)
  }

main-page.component.ts

export class MainPageComponent implements OnInit {

  file!: File;
  colorList!: string[];

  constructor(
    private fileUploadService: FileUploadService
  ) { }

  ngOnInit(): void {
  }

  onChange(event:any) {
    this.file = event.target.files[0];
  }

  onUpload() {
    this.fileUploadService.upload(this.file).subscribe(
      (event: any) => {
        if (typeof (event) === 'object') {
          this.colorList = event;
        }
      }
    );
  }

  cleanColor(){
    this.colorList = [];
  }

main-page.component.html

<div class="mainBody">

  <H1 style="text-align: center;">Color Code Tag</H1>

  <div style="text-align: center; margin-top: 20px;">
    <img src="../../../assets/img/PIX.png" alt="" style="height: 200px;">
  </div>

  <div class="mb-3" style="text-align: center; margin-top: 15px;">
    <label for="formFile" class="form-label">
      Get Your Color Code Set
      <br>
      From Your Picture
    </label>
    <input class="form-control" type="file" accept="image/*" id="formFile" style="width: 180px; margin: 0 auto;" (change)="onChange($event)">
  </div>

  <div style="text-align: center;">

    <button class="btn btn-primary btn-sm" (click)="onUpload()" data-bs-toggle="modal" data-bs-target="#exampleModal">
      <b>Get Start</b>
    </button>

  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Your Colors</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" (click)="cleanColor()"></button>
      </div>
      <div class="modal-body">

        <div style="display:inline-block;">

          <div class="label" *ngFor="let color of colorList">

         <div>{{color}}:</div><div style="width: 30px; height: 30px;" [style.backgroundColor]="color"></div>

        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save Tags</button> -->
      </div>
    </div>
  </div>
</div>

main-page.component.css

.mainBody{
  background-color: white;
  border: 1px solid #e5e5e5;
  /* margin: 40px 30px 30px 30px; */
  margin: 0 auto;
  margin-top: 60px;
  border-radius: 5px;
  padding: 25px;
  width: 350px;
}

.subBody{
  background-color: white;
  border: 1px solid #e5e5e5;
  /* margin: 40px 30px 30px 30px; */
  margin: 0 auto;
  margin-top: 40px;
  border-radius: 5px;
  padding: 25px;
  width: 350px;
}

app-routing.modules.ts

最後，我們將 MainPageComponent 的路徑加到路由內部

const routes: Routes = [
  {path: 'Main', component: MainPageComponent},
  {path: '', redirectTo: 'Main', pathMatch:'full'}, // 導向 Main
];

啟動測試

ng serve

啟動後，我們即可在 localhost:4200 下訪問前端網站，同時，我們也將昨日完成的 ColorCodeTag 後端於 Eclipse 內啟動，並上傳幾張照片測試:

可以看到，前端傳送的兩張照片都成功的解析出色碼並回傳，我們接著便能著手精緻化前端面，另一方面，也因為 ColorCodeTag 是以階段性的展示，但在實際的多人協作開發上，前端、後端、測試部署的工作並不一定會等待前者完成後才交給後者，而是會相互交疊，如當前後端都達到最小可部署的狀態時，維運人員其實就能先著手打造與測試 pipeline，來加快開發的時間。

今日結語

今天，我們簡單的介紹了 Angular 並快速實踐由前端發送請求，並且獲取色碼及轉為顏色方塊，明天，我們來一起調整畫面細節，以及說明一些後續在部署時需要注意的地方。

參考資料

Angular 官方文件