貼心小語

上一篇我們初步將專案架構建置起來了，這一篇將會開始撰寫功能，並從 Government 與 Host 開始製作。

ComponentBase

在開始之前先思考一件事情，我們開發的時候會將不同功能的頁面切割成不同的元件(Component)，但我們這個 DApp 的功能元件經常圍繞在 表單處理 與 交易處理 ，所以我們乾脆把這部分的事情提取出來做成 父類別 來減少重複的程式碼。在 app 路徑下新增一個名為 base 的資料夾，並建立component.base.ts，類別名稱為 ComponentBase 。

export class ComponentBase {
}

建立完成後我們再繼續思考，既然會圍繞在 交易處理 這方面，就表示會使用到 ProviderService 中的方法，所以我們乾脆把 ProviderService 引入到 ComponentBase 中，再透過 Angular 的 Injector 來注入到其他繼承的元件當中，如此一來，只要繼承 ComponentBase 的元件都可以使用 ProviderService 。

import { Injector } from '@angular/core';
import { ProviderService } from '../services/provider/provider.service';

export class ComponentBase {
    protected providerSvc: ProviderService;

    constructor(
        injector: Injector
    ) {
        this.providerSvc = injector.get(ProviderService);
    }
}

交易處理的狀態大致可分為 傳送中(pending) 、 確認(confirmed) 及 錯誤(error) ，我們將每個狀態單獨設立一個變數來作為判斷依據，其中發生錯誤時，應將錯誤訊息提供給使用者，所以設置變數來存放錯誤訊息。我們表單將採用 Model-Driven 的方法來設計，而 Model-Driven 可以自行定義驗證格式，我們的 DApp 會需要驗證帳戶位址的格式，所以直接在這裡設置驗證功能，帶入的參數會是 FormControl 。最後要讓表單在 pending 的時候進入 disabled 狀態，且在 confirmed 或 error 的時候取消 disabled 狀態，所以設置方法來使表單可以切換狀態：

import { Injector } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ProviderService } from '../services/provider/provider.service';
import { Web3Utils } from '../utils';

export class ComponentBase {
    public isPending = false;
    public isConfirmed = false;
    public isError = false;
    public errorMessage = '';

    protected providerSvc: ProviderService;

    constructor(
        injector: Injector
    ) {
        this.providerSvc = injector.get(ProviderService);
    }

    public resetConfirmState(): void {
        this.isConfirmed = false;
    }

    public resetErrorState(): void {
        this.isError = false;
        this.errorMessage = '';
    }

    public transactionConfirmed(): void {
        this.isPending = false;
        this.isConfirmed = true;
    }

    public transactionError(err?: string): void {
        this.isPending = false;
        this.isError = true;
        if (err) {
            this.errorMessage = err;
        }
    }

    protected addressValidator(control: FormControl): any {
        const address = control.value;
        return Web3Utils.isAddress(address) ? null : { message: `invalid address: ${ address }` };
    }

    protected setFormDisabled(formGroup: FormGroup, disable = true): void {
        Object.keys(formGroup.controls).forEach(elem => {
            if (disable) {
                formGroup.controls[elem].disable();
            } else {
                formGroup.controls[elem].enable();
            }
        });
    }

}

統一執行方法

我們知道透過 web3.js 呼叫合約的函式可以使用 Promise 或 EventEmitter 的方式來處理，為了方便統一管理，我們將會在 ProviderService 中擴充一個方法，將 Promise 轉換為 Observable ：

public executeMethod(method: any): Observable<any> {
    return from(method);
}

政府單位專區

大致上會有兩個功能區塊，一個是用來編輯權限的，一個是用來部署履歷合約的，我們會把這兩大功能再切割成兩個元件(Component)，並放在 government 資料夾下的 components 資料夾中。

Bootstrap 模組更新

由於我的介面打算使用 Tabset 來呈現切換功能的效果，所以添加 NgbTabsetModule 到 bootstrap.module.ts 中：

import { NgModule } from '@angular/core';
import { NgbTabsetModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [
        NgbTabsetModule
    ],
    exports: [
        NgbTabsetModule
    ]
})
export class BootstrapModule { }

部署履歷合約之元件

透過 AngularCLI 產生部署履歷合約用的元件：

ng g c modules/main/government/components/government-create-resume

將該元件添加到 government.module.ts 的 declarations ，並要引入 FormsModule 與 ReactiveFormsModule 來使用表單功能：

...
declarations: [
    GovernmentComponent,
    GovernmentCreateResumeComponent,
],
imports: [
    ...
    FormsModule,
    ReactiveFormsModule,
    ...
]
...

先將合約的列舉 Gender 與 OrganizationType 添加到我們的 type 中，為了方便管理，另外新增一個 form.ts 到 types 資料夾中，並從 index.ts 來 export ：

export enum Gender {
    male,
    female,
    other
}

export enum OrganizationType {
    school = 1,
    company
}

打開 government-create-resume.component.ts 進行設計，先繼承 ComponentBase 並用 Injector 來注入。我們將會使用 FormGroup 來管理所有的 FormControl ，並使用 FormBuilder 來建立，在建立的同時進行表單內容的定義，然後使用 Validators 來做簡單的驗證：

import { Component, Injector } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Gender, ResumeInitialOptions } from 'src/app/types';
import { ComponentBase } from 'src/app/base/component.base';

@Component({
    selector: 'app-government-create-resume',
    templateUrl: './government-create-resume.component.html',
    styleUrls: ['./government-create-resume.component.scss']
})
export class GovernmentCreateResumeComponent extends ComponentBase {
    public deployForm: FormGroup;
    public resumeInfo;

    constructor(
        private injector: Injector,
        private formBuider: FormBuilder
    ) {
        super(injector);
        this.deployForm = this.formBuider.group({
            name: ['', [Validators.required]],
            address: ['', [Validators.required, this.addressValidator]],
            age: [null, [Validators.required]],
            gender: [Gender.male, [Validators.required]]
        });
    }

    // 讓年齡選單有16~100歲可以選擇
    public get ageRange(): Array<number> {
        const range = [];
        for (let i = 16; i <= 100; i++) {
            range.push(i);
        }
        return range;
    }

    // 將gender轉換成文字的形式展示給使用者
    public get hostGender(): string {
        let result = '';
        switch (this.resumeInfo.gender) {
            case Gender.male:
              result = '男';
              break;
            case Gender.female:
              result = '女';
              break;
            case Gender.other:
              result = '其他';
        }
        return result;
    }

    // 部署合約的方法。成功時就將資料寫入this.resumeInfo並把合約位址添加進去，用途是展示給使用者看
    public deployResume(data: ResumeInitialOptions): void {
        if (Array.isArray(data.age)) {
            data.age = data.age[0];
        }
        this.isPending = true;
        this.setFormDisabled(this.deployForm);
        this.providerSvc.deployResume(data).subscribe(
            instance => {
                this.transactionConfirmed();
                this.setFormDisabled(this.deployForm, false);
                this.deployForm.reset();
                this.resumeInfo = data;
                this.resumeInfo.address = instance.address;
            },
            err => {
                this.transactionError(err.message);
                this.setFormDisabled(this.deployForm, false);
                this.deployForm.reset();
            }
        );
    }

}

接著來修改 government-create-resume.component.html 。如果在交易確認後或是發生錯誤，就不顯示表單頁面，如果是交易確認後就顯示履歷的資料與合約位址，如果發生錯誤就顯示錯誤訊息：

<div class="my-3" *ngIf="!isConfirmed && !isError">
    <form
        [formGroup]="deployForm"
        (ngSubmit)="deployResume(deployForm.value)"
    >
        <div class="form-group">
            <label for="name">姓名</label>
            <input
                type="text"
                class="form-control"
                id="name"
                placeholder="輸入姓名"
                [formControlName]="'name'"
            >
        </div>
        <div class="form-group">
            <label for="address">帳戶位址</label>
            <input
                type="text"
                class="form-control"
                id="address"
                placeholder="輸入帳戶位址"
                [formControlName]="'address'"
            >
        </div>
        <div class="form-group">
            <label for="gender">性別</label>
            <select class="form-control" id="gender" [formControlName]="'gender'">
                <option [ngValue]="0">男</option>
                <option [ngValue]="1">女</option>
                <option [ngValue]="2">其他</option>
            </select>
        </div>
        <div class="form-group">
            <label for="age">年齡</label>
            <select multiple class="form-control" id="age" [formControlName]="'age'">
                <option *ngFor="let age of ageRange" [ngValue]="age">{{ age }}</option>
            </select>
        </div>
        <div class="text-right">
            <button type="submit" class="btn btn-primary" [disabled]="deployForm.invalid || isPending">新增</button>
        </div>
    </form>
</div>
<div class="my-3" *ngIf="isConfirmed">
    <div class="card">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">{{ resumeInfo.name }}</li>
            <li class="list-group-item">{{ resumeInfo.age }}</li>
            <li class="list-group-item">{{ hostGender }}</li>
            <li class="list-group-item"><b>{{ resumeInfo.address }}</b></li>
        </ul>
        <div class="card-body text-right">
            <button class="btn btn-primary" (click)="resetConfirmState()">關閉</button>
        </div>
    </div>
</div>
<div class="my-3" *ngIf="isError">
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>發生錯誤</strong> {{ errorMessage }}
        <button type="button" class="close" (click)="resetErrorState()">
          <span aria-hidden="true">×</span>
        </button>
    </div>
</div>

編輯權限之元件

透過 AngularCLI 來產生元件：

ng g c modules/main/government/components/government-edit-permission

並將該元件添加到 government.module.ts 的 declarations ：

...
declarations: [
    GovernmentComponent,
    GovernmentCreateResumeComponent,
    GovernmentEditPermissionComponent
],
...

打開 government-edit-permission.component.ts 進行設計，與部署履歷合約的元件大同小異，但需要注意的是要先取得合約實例，再透過合約實例來使用合約中的函式，另外，如果設置無權限則是透過 removePermission() 來執行：

import { Component, Injector } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ComponentBase } from 'src/app/base/component.base';
import { OrganizationType } from 'src/app/types';

@Component({
    selector: 'app-government-edit-permission',
    templateUrl: './government-edit-permission.component.html',
    styleUrls: ['./government-edit-permission.component.scss']
})
export class GovernmentEditPermissionComponent extends ComponentBase {
    public editForm: FormGroup;

    constructor(
        private injector: Injector,
        private formBuilder: FormBuilder
    ) {
        super(injector);
        this.editForm = this.formBuilder.group({
            contract: ['', [Validators.required, this.addressValidator]],
            address: ['', [Validators.required, this.addressValidator]],
            permission: [true, [Validators.required]],
            name: ['', [Validators.required]],
            type: [OrganizationType.school, [Validators.required]]
        });
    }

    public editPermission(data: any): void {
        this.isPending = true;
        this.setFormDisabled(this.editForm);
        const resume = this.providerSvc.getResume(data.contract);
        if (data.permission) {
            this.providerSvc.executeMethod(
                resume.methods.setPermission(data.address, data.name, data.type, data.permission)
                .send({ from: this.providerSvc.defaultAccount })
            ).pipe(
                take(1)
            ).subscribe(
                receipt => {
                    this.transactionConfirmed();
                    this.editForm.reset();
                    this.setFormDisabled(this.editForm, false);
                },
                err => {
                    this.transactionError(err.message);
                    this.editForm.reset();
                    this.setFormDisabled(this.editForm, false);
                }
            );
        } else {
            this.providerSvc.executeMethod(
                resume.methods.removePermission(data.address)
                .send({ from: this.providerSvc.defaultAccount })
            ).pipe(
                take(1)
            ).subscribe(
                receipt => {
                    this.transactionConfirmed();
                    this.editForm.reset();
                    this.setFormDisabled(this.editForm, false);
                },
                err => {
                    this.transactionError(err.message);
                    this.editForm.reset();
                    this.setFormDisabled(this.editForm, false);
                }
            );
        }
    }

}

修改 government-edit-permission.component.html ：

<div class="my-3" *ngIf="!isConfirmed && !isError">
    <form
        [formGroup]="editForm"
        (ngSubmit)="editPermission(editForm.value)"
    >
        <div class="form-group">
            <label for="contract">履歷位址</label>
            <input
                type="text"
                class="form-control"
                id="contract"
                placeholder="輸入履歷位址"
                [formControlName]="'contract'"
            >
        </div>
          <div class="form-group">
              <label for="address">帳戶位址</label>
              <input
                  type="text"
                  class="form-control"
                  id="address"
                  placeholder="輸入帳戶位址"
                  [formControlName]="'address'"
              >
          </div>
          <div class="form-group">
              <label for="permission">編輯權限</label>
              <select class="form-control" id="permission" [formControlName]="'permission'">
                  <option [ngValue]="true">是</option>
                  <option [ngValue]="false">否</option>
              </select>
          </div>
          <div class="form-group">
              <label for="name">單位名稱</label>
              <input
                  type="text"
                  class="form-control"
                  id="name"
                  placeholder="輸入單位名稱"
                  [formControlName]="'name'"
              >
          </div>
          <div class="form-group">
              <label for="type">機構類別</label>
              <select class="form-control" id="type" [formControlName]="'type'">
                  <option [ngValue]="1">教育單位</option>
                  <option [ngValue]="2">企業單位</option>
              </select>
          </div>
          <div class="text-right">
              <button type="submit" class="btn btn-primary" [disabled]="editForm.invalid || isPending">送出</button>
          </div>
      </form>
</div>
<div class="my-3" *ngIf="isConfirmed">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>編輯完成</strong>
        <button type="button" class="close" (click)="resetConfirmState()">
            <span aria-hidden="true">×</span>
        </button>
    </div>
</div>
<div class="my-3" *ngIf="isError">
  <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>發生錯誤</strong> {{ errorMessage }}
      <button type="button" class="close" (click)="resetErrorState()">
        <span aria-hidden="true">×</span>
      </button>
  </div>
</div>

添加到Government元件

修改 government.component.html ：

<div class="container my-3">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">政府專區</h1>
            <p class="lead">提供政府單位新增公民履歷以及編輯單位權限</p>
        </div>
    </div>
</div>
<div class="container">
    <ngb-tabset>
        <ngb-tab title="編輯權限">
            <ng-template ngbTabContent>
                <app-government-edit-permission></app-government-edit-permission>
            </ng-template>
        </ngb-tab>
        <ngb-tab title="新增履歷">
            <ng-template ngbTabContent>
                <app-government-create-resume></app-government-create-resume>
            </ng-template>
        </ngb-tab>
    </ngb-tabset>
</div>

成果展示

編輯權限頁面：

新增履歷頁面：

成功部署履歷的頁面：

求職者專區

基本上跟政府單位專區的設計思維差不多，所以前面的開發有理解清楚的話，接下來的開發都不是問題了！

Host元件

在修改元件之前，要先到 host.module.ts 裡引入 FormsModule 與 ReactiveFormsModule 來使用表單功能：

imports: [
    ...
    FormsModule,
    ReactiveFormsModule,
    ...
]

接著打開 host.component.ts 來進行設計。這裡與 government 比較不同的地方是表單使用了 FormArray ，因為我們專業技能需要能夠動態增減項目，用陣列的方式來存放對應的表單資料。還有一個值得注意的是在呼叫合約的地方使用了 forkJoin 來處理，它有點類似於 Promise.all() ，全部成功了才算完成，只要有一項發生錯誤就會直接報錯。那為什麼使用 forkLoin 呢？因為理論上要全部交易都確認了才算完整的更改表單：

import { Component, Injector } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
import { ComponentBase } from 'src/app/base/component.base';
import { from, forkJoin } from 'rxjs';
import { take } from 'rxjs/operators';

@Component({
    selector: 'app-host',
    templateUrl: './host.component.html',
    styleUrls: ['./host.component.scss']
})
export class HostComponent extends ComponentBase {
    public profileForm: FormGroup;

    constructor(
        private injector: Injector,
        private formBuilder: FormBuilder
    ) {
        super(injector);
        this.profileForm = this.formBuilder.group({
            contract: ['', [Validators.required, this.addressValidator]],
            contact: ['', [Validators.required]],
            autobiography: ['', [Validators.required]],
            skills: this.formBuilder.array([this.createSkillFields()])
        });
    }

    public updateProfile(data: any): void {
        this.isPending = true;
        this.setFormDisabled(this.profileForm);
        const resume = this.providerSvc.getResume(data.contract);
        const request = [];
        request.push(
            from(resume.methods.setContact(data.contact).send({ from: this.providerSvc.defaultAccount })),
            from(resume.methods.setAutobiography(data.autobiography).send({ from: this.providerSvc.defaultAccount }))
        );
        for (const skill of data.skills) {
            request.push(from(resume.methods.setSkill(skill.class, skill.name).send({ from: this.providerSvc.defaultAccount })));
        }
        forkJoin(request).pipe(take(1)).subscribe(
            res => {
                this.transactionConfirmed();
                this.profileForm.reset();
                this.setFormDisabled(this.profileForm, false);
            },
            err => {
                this.transactionError(err.message);
                this.profileForm.reset();
                this.setFormDisabled(this.profileForm, false);
            }
        );
    }

    // 運用淺拷貝的特性先將專業技能的陣列寫入變數，再 push 一個新的 group 進去
    public addSkillField(): void {
        const skills = this.profileForm.controls.skills as FormArray;
        skills.push(this.createSkillFields());
    }

    // 運用淺拷貝的特性先將專業技能的陣列寫入變數，再根據 index 來移除指定的項目
    public removeSkillField(index: number) {
        const skills = this.profileForm.controls.skills as FormArray;
        skills.removeAt(index);
    }

    // 建立 group 並回傳，用於增加一筆新的專業技能
    private createSkillFields(): FormGroup {
        return this.formBuilder.group({
            class: ['', [Validators.required]],
            name: ['', [Validators.required]]
        });
    }

}

然後設計我們的頁面：

<div class="container my-3">
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">求職者專區</h1>
            <p class="lead">提供求職者撰寫自傳、聯絡方式及專業技能的頁面</p>
        </div>
    </div>
</div>
<div class="container">
    <div class="my-3" *ngIf="!isConfirmed && !isError">
        <form
            [formGroup]="profileForm"
            (ngSubmit)="updateProfile(profileForm.value)"
        >
            <div class="form-group">
                <label for="contract">履歷位址</label>
                <input
                    type="text"
                    class="form-control"
                    id="contract"
                    placeholder="輸入履歷位址"
                    [formControlName]="'contract'"
                >
            </div>
            <div class="form-group">
                <label for="contact">聯絡方式</label>
                <input
                    type="text"
                    class="form-control"
                    id="contact"
                    placeholder="輸入聯絡方式"
                    [formControlName]="'contact'"
                >
            </div>
            <div class="form-group">
                <label for="autobiography">自傳</label>
                <textarea
                    class="form-control"
                    id="autobiography"
                    rows="5"
                    [formControlName]="'autobiography'"
                ></textarea>
            </div>
            <label>專業技能</label>
            <div [formArrayName]="'skills'">
                <div class="form-group" *ngFor="let address of profileForm.controls['skills']['controls']; let i=index" [formGroupName]="i" >
                    <input type="text" class="form-control" placeholder="輸入類別" [formControlName]="'class'">
                    <input type="text" class="form-control" placeholder="輸入技能名稱" [formControlName]="'name'">
                    <div class="text-right">
                        <button type="button" class="btn btn-danger btn-circle" (click)="removeSkillField(i)">-</button>
                    </div>
                    <hr>
                </div>
            </div>
            <button type="button" class="btn btn-info btn-circle" (click)="addSkillField()">+</button>
            <div class="text-right">
                <button type="submit" class="btn btn-primary" [disabled]="profileForm.invalid || isPending">新增</button>
            </div>
        </form>
    </div>
<div class="my-3" *ngIf="isConfirmed">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>更新完成</strong>
        <button type="button" class="close" (click)="resetConfirmState()">
          <span aria-hidden="true">×</span>
        </button>
    </div>
</div>
<div class="my-3" *ngIf="isError">
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <strong>發生錯誤</strong> {{ errorMessage }}
        <button type="button" class="close" (click)="resetErrorState()">
          <span aria-hidden="true">×</span>
        </button>
    </div>
</div>
</div>

這是對應的 SCSS ：

.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

成果展示

這是填寫聯絡方式、自傳及專業技能的頁面：

資料填妥後發送出去會有很多筆交易需要確認：

等待交易全部完成後就會顯示更新成功：

今日小結

將大部分元件(Component)會使用的的共同功能製作成 ComponentBase ，讓有需要這些功能的元件來繼承，並製作簡單的政府單位專區頁面來進行部署履歷合約及編輯合約權限，還同時製作了求職者專區來編輯聯絡方式、自傳及專業技能。今天的內容比較多，讀者需要花多一點的時間來整理開發的過程及思路，一旦理解了，接下來的開發對各位來說就是一塊蛋糕了(a piece of cake)，加油各位！