作者：CODING - 朱增輝

前言

Google Web Toolkit（GWT）是一個開源、免費的 Web 開發框架，通過該框架，您可以使用 Java 構建複雜、高效能的 JavaScript 應用程式。

持續整合指的是，頻繁地（一天多次）將程式碼整合到主幹。它的好處主要有兩個：（1）快速發現錯誤。（2）防止分支大幅偏離主幹。持續整合的目的，就是讓產品可以快速迭代，同時還能保持高質量。 —— 阮一峰

本文的示例會建立一個簡單的 GWT 應用，並利用 CODING 平臺持續整合能力實現自動構建、測試和釋出。

準備環境

安裝必要的工具，包括 Java、Maven 和 GWT SDK等。這裡以 MacOS 為例說明，其他系統請自行搜尋。

安裝 JDK

GWT 要求 JDK 1.6 或以上版本，在 console 中執行命令 java -version 檢查是否已安裝，輸出如下圖類似內容，即表示已安裝。

如果沒有安裝，可通過 Homebrew 工具安裝，命令如下

brew tap adoptopenjdk/openjdk

brew cask install adoptopenjdk8

其他平臺請按照官方指導安裝。

安裝 Maven

通過命令 mvn -v 檢查 Maven 版本，輸出類似下圖即表示已安裝

如果沒有安裝，可通過 Homebrew 工具安裝，命令如下

brew instll maven

其他平臺請按照官方指導

安裝 GWT SDK

可以通過 Homebrew 工具或者下載 GWT SDK 壓縮包安裝。寫作本文時，GWT 最新穩定版本是 2.8.2。

（1）Homebrew 安裝

brew install gwt

預設安裝路徑為

（2）下載壓縮包安裝

為方便大家下載，已將官網 GWT SDK 2.8.2 版本壓縮包上傳到 CODING 製品庫，可通過如下方式下載

curl -L "https://coding-public-generic.pkg.coding.net/demo-gwt/generic/gwt.zip?version=2.8.2" -o gwt-2.8.2.zip

 

下載後的壓縮包解壓到任意目錄（如 /home/user/gwt-2.8.2），並配置到 PATH 環境變數，如下所示

PATH=$PATH:/home/user/gwt-2.8.2/

export PATH

以上任一方式安裝後，可執行如下命令測試是否安裝成功

webAppCreator

輸出如下

Intellij IDEA 開啟 GWT 支援

IDEA 預設支援建立 GWT 應用，本文使用命令列工具建立專案，不依賴具體 IDE，通過 IDE 建立 GWT 應用的方式可參見 Intellij IDEA 相關介紹。

步驟一 建立 GWT 應用

使用命令列工具建立 GWT Maven 專案

webAppCreator -out hello -templates maven,sample,readme com.demo.gwt.HelloWorld

在 IDEA 中開啟上面建立的專案，依次點選：

File --> Open --> hello（專案名）

開啟後可以看到專案目錄結構：

步驟二 執行 GWT 應用

GWT 專案檔案主要由四部分組成（見下表），可以根據自己的需要修改，為避免增加複雜度，這裡不做修改。

在 IDEA 選單欄中選擇編輯配置，開啟執行配置彈窗，新增 GWT 配置。修改配置名，選擇 HelloWorld 模組，然後點選 OK 儲存配置並退出彈窗。

選擇上面建立的 GWT 執行配置，單擊執行，IDEA 會自動開啟瀏覽器，執行應用。

步驟三 利用持續整合進行自動構建、測試、釋出

（1）本地初始化 git 倉庫

在專案根目錄執行 git 初始化命令

git init

（2）準備 CODING 專案

在 CODING 平臺建立專案，選擇 DevOps 模板。

在填寫專案基本資訊頁面，為了使用本地 git 倉庫，這裡不勾選 啟用 README.md 檔案初始化專案。

上面建立的 CODING 專案沒有初始化程式碼倉庫，可以按照指引按照自己的需要進行初始化，這裡選擇使用命令列推送已存在的倉庫。

根據指引將原生程式碼倉庫推送到 CODING 平臺。

在 構建 頁面建立新的構建計劃，為方便管理構建計劃，這裡選擇使用程式碼倉庫中的 Jenkinsfile。

點選使用模板，可根據自己需要選擇合適模板，這裡選擇 簡易模板。

儲存構建計劃後，系統會自動將構建模板對應的 Jenkinsfile 推送到倉庫，預設為 master 分支。

本地執行 git pull 命令拉取程式碼，修改 Jenkinsfile 檔案。我們希望平臺可以自動構建、測試，最後釋出到製品庫，修改後的內容如下所示

def ARTIFACT_ID = ""

def VERSION = ""

pipeline {

  agent any

  stages {

    stage('檢出') {

      steps {

        checkout([

          $class: 'GitSCM', branches: [[name: env.GIT_BUILD_REF]],

          userRemoteConfigs: [[

            url: env.GIT_REPO_URL,

            credentialsId: env.CREDENTIALS_ID

          ]]

        ])

        script {

            def pom = readMavenPom()

            ARTIFACT_ID = pom.getArtifactId()

            VERSION = pom.getVersion()

        }

      }

    }

    stage('構建') {

      steps {

        sh 'mvn package'

        archiveArtifacts(artifacts: "target/${ARTIFACT_ID}-${VERSION}.war", fingerprint: true)

      }

    }

    stage('測試') {

      steps {

        sh 'mvn gwt:test'

      }

    }

    stage('釋出到 generic 製品庫') {

      steps {

        codingArtifactsGeneric(

            files: "${ARTIFACT_ID}-${VERSION}.war",

            repoName: "${env.GENERIC_REPO_NAME}",

            version: "${VERSION}",

            workspace: "/root/workspace/target"

        )

      }

    }

  }

}

修改後提交併推送到遠端倉庫，在 構建 頁面點選 立即構建 按鈕即可觸發構建，也可按需要配置自動構建觸發規則，詳情見 CODING 幫助檔案。構建完成後會收到通知，可以點開構建詳情檢視詳細日誌。

開啟 製品庫 頁面可以看到自動釋出的檔案。

總結

在本次教程中，我們建立了簡單的 GWT 應用，熟悉了 GWT 專案結構及其命令列工具的使用，並且藉助 CODING 平臺提供的持續整合能力實現了應用的自動構建、測試和釋出。CODING 提供的持續整合能力遠比教程中展示的要強大，有興趣的同學可以閱讀官方檔案詳細瞭解，相信可以為您的工作提供幫助，創造更好的效益。

示例程式碼可以在 CODING 公開原始碼倉庫 獲取。