iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 27
1
Blockchain

區塊練起來-智能合約與DApp開發系列 第 27

[區塊練起來-智能合約與DApp開發] DAY 27 - 實戰DApp!區塊鏈履歷應用(1)

貼心小語

前面幾篇將 web3.js 的基本功能介紹與實作完畢,已經可以透過這些功能做簡單的 DApp ,我們就來完成區塊鏈履歷的應用吧/images/emoticon/emoticon18.gif


系統規劃

與前面幾篇的設計模式差不多,所以我們沿用這些程式碼: type 、 Utils 與 ProviderService 。

模組規劃

前面有提到 Angular 是模組化開發的,所以我們將各個角色會用到的頁面切成獨立模組:

  • HomeModule :首頁模組,查看履歷頁面
  • HostModule :求職者用模組,提供求職者頁面來修改自傳、專業技術與基本聯絡方式
  • GovernmentModule :政府單位用模組,提供政府單位頁面來修改權限、部署求職者履歷合約
  • SchoolModule :教育單位用模組,提供教育單位頁面來設置學生的學歷、修課證明與專業證照
  • CompanyModule :企業單位用模組,提供企業單位頁面來設置員工於該公司的職稱與工作期間

共用 Service 與 Utils 規劃

  • ProviderService :用來取得 Provider 等操作
  • Web3Utils :用來包裝 web3.js 的 util 函式以及其他靜態的方法

types 規劃

  • contract.ts :用來定義與合約相關的資料格式與來源
  • ether-unit.ts :用來定義以太幣的單位
  • transaction.ts :用來定義與交易相關的資料格式
  • form.ts: 用來定義在合約中部分列舉
  • profile.ts: 用來處理取得履歷合約的資訊

建置模組

透過 AngularCLI 建置模組:

Home

輸入下方指令產生 Home 模組,並透過 --routing 產生相關路由模組:

ng g m modules/main/home --routing

輸入下方指令產生 Component 來作為顯示的頁面,並透過 --flat 來指定不產生資料夾:

ng g c modules/main/home --flat

如果沒有 AutoImport 的話,就手動在 home.module.ts 中引入 HomeComponent ,並在 declarations 中使用:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';

@NgModule({
    declarations: [HomeComponent],
    imports: [
        CommonModule,
        HomeRoutingModule
    ]
})
export class HomeModule { }

在Angular 的世界裡,如果要在模組中靜態載入 Component 就要放入 declarations

去設置 home-routing.module.ts ,讓在該模組的根路由下可以顯示 HomeComponent 頁面:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
    { path: '', component: HomeComponent }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomeRoutingModule { }

Host 、 Government 、 School 以及 Company 模組的做法都是一樣的,只是名稱不同,為了不要有太多重複的內容,後面就只列出指令,其餘的步驟與 Home 相同

Host

輸入下方指令產生 Host 模組,並透過 --routing 產生相關路由模組:

ng g m modules/main/host --routing

輸入下方指令產生 Component 來作為顯示的頁面,並透過 --flat 來指定不產生資料夾:

ng g c modules/main/host --flat

Government

輸入下方指令產生 Government 模組,並透過 --routing 產生相關路由模組:

ng g m modules/main/government --routing

輸入下方指令產生 Component 來作為顯示的頁面,並透過 --flat 來指定不產生資料夾:

ng g c modules/main/government --flat

School

輸入下方指令產生 School 模組,並透過 --routing 產生相關路由模組:

ng g m modules/main/school --routing

輸入下方指令產生 Component 來作為顯示的頁面,並透過 --flat 來指定不產生資料夾:

ng g c modules/main/school --flat

Company

輸入下方指令產生 Company 模組,並透過 --routing 產生相關路由模組:

ng g m modules/main/company --routing

輸入下方指令產生 Component 來作為顯示的頁面,並透過 --flat 來指定不產生資料夾:

ng g c modules/main/company --flat

路由配置與延遲載入

Angular 雖然是 SPA 框架,但它可以在前端處理路由變化,不過這樣的代價就是要一次把所有相關的檔案先載完畫面才會出現,還好 Angular 有提供 延遲載入(Lazy Loading) 的機制,來克服這個問題。那什麼是延遲載入呢?簡單來說就是需要使用哪些模組,再針對這些模組做載入的動作,可以加快首次進入畫面的速度,是非常重要且實用的功能!

路由規劃

我們對於路由的設計大致上列成以下幾點:

  • / :載入 HomeModule
  • /host :載入 HostModule
  • /government :載入 GovernmentModule
  • /school :載入 SchoolModule
  • /company :載入 CompanyModule

配置路由

打開 app-routing.module.ts ,並使用 loadChildren 來實作延遲載入,需要特別注意的就是 path** 的設計表示萬用路由,只要不是上面那些定義的路由都會執行萬用路由的結果,這邊我們是設置跳轉至首頁:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
    {
        path: '',
        loadChildren: () => import('./modules/main/home/home.module').then(mod => mod.HomeModule)
    },
    {
        path: 'government',
        loadChildren: () => import('./modules/main/government/government.module').then(mod => mod.GovernmentModule)
    },
    {
        path: 'host',
        loadChildren: () => import('./modules/main/host/host.module').then(mod => mod.HostModule)
    },
    {
        path: 'school',
        loadChildren: () => import('./modules/main/school/school.module').then(mod => mod.SchoolModule)
    },
    {
        path: 'company',
        loadChildren: () => import('./modules/main/company/company.module').then(mod => mod.CompanyModule)
    },
    {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

這樣就完成我們基本的路由設定了!


今日小結

開始實作 DApp,並規劃系統以及配置路由,不過今天的內容較偏向前端的基本配置,明天開始會搭配 web3.js 來開發!


上一篇
[區塊練起來-智能合約與DApp開發] DAY 26 - web3.js 解碼 log 資訊
下一篇
[區塊練起來-智能合約與DApp開發] DAY 28 - 實戰DApp!區塊鏈履歷應用(2)
系列文
區塊練起來-智能合約與DApp開發31

尚未有邦友留言

立即登入留言