2017年12月25日 星期一

使用vue.js建構treeview

使用vue.js建構treeview

前言

  以前在工作要維護遊戲的後台程式碼,裡面有個treeview,是單純用html與javascript來實現,同步資料時要在不同的幾個地方修改,常常會忘記,最近碰觸到vue.js,發現同步資料相當方便。官方雖然提供了一個範例,但我看不習慣,我修改了其中的部份,這邊做個紀錄。

程式碼

  以下是html的部分

<head>
  
  
  <title>treeview example</title>
</head>
<script id="treeview-template" type="text/x-template">
  <ul>
<li>
      <div @click="onClick">
        {{node.name}}
        <span v-show="isFolder">[{{isExpand?"-":"+"}}]</span>
      </div>
</li>
<treeview v-show="isExpand" v-for="childNode in node.child" :node="childNode"></treeview>
  </ul>
</script>
<body>
  <div id="app">
    <treeview :node="rootNode"></treeview>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

</body>
</html>

  以下是javascript的部分
var treeNode={
  name:"root",
  child:[
    {
      name:"sub"
    },
    {
      name:"sub1",
      child:[
        {
          name:"sub2"
        }
      ]
    },
    {
      name:"sub3"
    }
  ]
};
Vue.component("treeview",{
  props : ["node"],
  template : "#treeview-template",
  data : function(){
    return {
      isExpand : false
    };
  },
  computed:{
    isFolder:function(){
      return this.node.child &&
              this.node.child.length;
    }
  },
  methods:{
    onClick:function(){
      if(this.isFolder){
        this.isExpand=!this.isExpand;
      }
    }
  }
});
var app = new Vue({
  el:"#app",
  data:{
    rootNode:treeNode
  }
});


參考資料

Tree View Example


2017年12月18日 星期一

解決jenkins的windows批次命令無法正常呼叫npm的global module的問題

解決jenkins的windows批次命令無法正常呼叫npm的global module的問題

前言

  如果你企圖利用jenkins裡windows批次命令去呼叫npm的global module的時候,會發生找不到命令的問題,如下圖
命令找不到
圖中,rollup為一個global module的命令,但直接在windows的console下命令卻可以找的到!找了一下資料發現是環境變數的問題,但直接修改系統變數裡的"Path"後發現狀況依舊,之後找到下面的方法來解決。

  到jenkins的首頁,按下"設定系統",如下圖
設定系統
接著到"全域屬性"的標籤,設定環境變數,如下圖
設定環境變數
"名稱"的部分填上要新增修改的環境變數,這裡的數值是"Path",這個是給win10,我印象中,舊的windows環境變數是"PATH",請一句你的作業系統環境去修改,"值"的部分瑱上以下內容
%Path%;C:\Users\hosee\AppData\Roaming\npm;

其中"%Path%"是指現在windows的環境變數,接下來是"C:\Users\hosee\AppData\Roaming\npm"的部分,這是我的npm global module的安裝位址,請依據你所安裝的位址新增,若不清楚安裝的位址,可以輸入以下命令後得到
npm list -g

位址的內容如下圖
npm global module的安裝位址

參考資料:
How to set the PATH environment variable in Jenkins configuration on Windows?
Where does npm install packages?

2017年12月17日 星期日

使用jenkins建置unity3d專案

使用jenkins建置unity3d專案

前言

  最近開始接觸jenkins,就試著用jenkins來建置unity3d的專案,發現過程有點複雜,所以記錄下來。如果只需要建置專案而已,就只需要做到步驟6就可以了,之後的步驟是為了做建置備份而設定的。

步驟1:安裝unity3d plugin

  開啟jenkins後,到管理外掛程式,如下圖
開啟管理外掛程式
接著到"可用的"頁籤,並在右上角的過濾條件輸入"unity",然後在下方列表勾選"Unity3d plugin"後,按下"直接安裝",如下圖
安裝unity3d plugin
如果這個外掛已安裝,這個步驟可以略過。

步驟2:設定unity3d plugin

  到"Global Tool Configuration",如下圖
開啟Global Tool Configuation
接著將畫面向下拉可以找到"Unity3d"的標籤,並按下"Unity3d安裝...",如下圖
按下"Unity3d安裝..."
接著設定unity3d程式的路徑,如下圖
設定unity3d程式的路徑
這裡可以依據需求來新增unity3d程式,名稱可以自己取名,這邊建議將Unity的版本寫在名稱裡,方便日後辨識,安裝目錄的話要注意並不是執行檔的目錄的位址,假設unity3d的執行檔位址是"C:\Program Files\Unity\Editor\Unity.exe",那這邊要填的路徑就會是"C:\Program Files\Unity",填完後按下"Save"即可。


步驟3:新增建置script在unity3d的專案

  開啟要被建置的unity3d專案,加入一個名為"JenkinsBuilder"的C#Script,然後填下以下內容

#if UNITY_EDITOR
using System;
using System.Linq;
using UnityEditor;

static class JenkinsBuilder {
 [MenuItem("Auto Builder/Build Win64")]
 public static void PerformBuildWin64()
 {
  var path = string.Format("Builds/Win64/{0:yyyy-MM-dd-hh-mm-ss}", DateTime.Now);

  if (UnityEditorInternal.InternalEditorUtility.inBatchMode)
  {
   path = GetBatchOutputPath();

   if (path == null)
   {
    throw new ArgumentException("-output is not set");
   }
  }

  PerformBuild(path, BuildTarget.StandaloneWindows64);
 }
 static void PerformBuild(string path, BuildTarget target)
 {
  var scenes = EditorBuildSettings.scenes.Where((v) => { return v.enabled; }).Select((v) => { return v.path; });
  BuildPipeline.BuildPlayer(scenes.ToArray(), path, target, BuildOptions.None);
 }

 static string GetBatchOutputPath()
 {
  var args = Environment.GetCommandLineArgs();
  for (int ii = 0; ii < args.Length; ++ii)
  {
   if (args[ii].ToLower() == "-output")
   {
    if (ii + 1 < args.Length)
    {
     return args[ii + 1];
    }
   }
  }

  return null;
 }
}
#endif

這裡要注意這裡設定是要建置windows 64bit的版本,若要建置不同平台的話,這個script需要修改!

步驟4:在jenkins裡新增作業

  到jenkins的首頁,按下"新增作業",如下圖
新增作業
接著設定作業,如下圖
設定作業
"Enter an item name"裡設定的是作業名稱,可以自己命名,這裡使用"BuildUnityTest",然後選擇"建置Free-style軟裡專案"後,按下"OK"。

步驟5:設定作業組態

  完成上一步驟後,會看到下圖
設定作業組態頁面
往下拉,在建置標籤裡,按下"新增建置步驟",並在子選單中選擇"Invoke Unity3d Editor",如下圖
新增建置步驟
接著設定建置步驟,如下圖
設定建置步驟
"Unity3d installation name"的欄位可以選擇要用哪一個unity3d來建置,如果這個欄位的選單是空的,表示步驟2的設定沒設定好!"Editor command line arguments"的欄位是填入建置的console命令,填入以下的命令
-projectPath "C:\Users\hosee\Documents\Unity\Test" -logFile "$WORKSPACE/unity3d_editor.log" -quit -batchmode -nographics -executeMethod JenkinsBuilder.PerformBuildWin64 -output "$WORKSPACE/Builds/test.exe"

-projectPath裡設定的是要建置的unity3d專案的路徑,這裡設定的是"C:\Users\hosee\Documents\Unity\Test",-logFile設定的是log檔輸出的位置,-executeMethod裡設定的是要執行的script命令,還記得步驟3的script嗎?這裡就是去呼叫那一個script的method,可以根據需要更改,這裡呼叫的是"JenkinsBuilder.PerformBuildWin64",-output設定的是輸出的路徑,這裡的設定值在不同的平台設定的方式不太一樣,在Windows平台設定的是輸出執行檔,所以設定為"$WORKSPACE/Builds/test.exe"。設定完後按下下方的"儲存"。

步驟6:建置專案

  到jenkins的首頁,點選建置的作業,如下圖
選擇建置的作業
接著按下"馬上建置",如下圖
馬上建置
建置完成後就可以在"(jenkins的安裝目錄)/workspace/(作業名稱)/Builds/"下得到建置後的檔案,如下圖
建置後的檔案

步驟7:安裝Build Timestamp Plugin

  和步驟1一樣的方法安裝"Build Timestamp Plugin"。

步驟8:設定Build Timestamp Plugin

  到jenkins的首頁,按下"設定系統",如下圖
設定系統
在"Build Timestamp"的標籤裡,按下新增並設定參數,如下圖
設定Build Timestamp
其中Name是環境變數的名稱,這裡的參數是"BUILD_TIMESTAMP",Pattern是日期時間的格式,這裡的參數是"yyyy_MM_dd_HH_mm_ss",這兩個參數都可以依據需要來調整。設定完後按下方的"儲存"。

步驟9:設定備份

  回到作業的組態,在建置的標籤中,把"Editor command line arguments"改成下面
-projectPath "C:\Users\hosee\Documents\Unity\Test" -logFile "$WORKSPACE/unity3d_editor.log" -quit -batchmode -nographics -executeMethod JenkinsBuilder.PerformBuildWin64 -output "$WORKSPACE/Builds/$BUILD_TIMESTAMP/test.exe"

這裡是改變-output的參數,讓它會依據日期時間來輸出資料夾。接著到建置後動作的標籤下,按下新增建置後動作,然後選擇封存成品,如下圖
新增封存成品
接著設定封存成品的參數,在"要封存的檔案"的欄位輸入"
在"要封存的檔案"的欄位輸入"Builds/$BUILD_TIMESTAMP/**/*.*",如下圖
設定封存成品
設定完後按下下方的"儲存"。

步驟10:測試建置

  回到作業頁面按下"馬上建置",建置完後,到"(jenkins的安裝目錄)/workspace/(作業名稱)/Builds"下檢查是否有建置時間的資料夾並確認專案輸出的檔案是否被正確建置,如下圖
確認workspace的檔案
接著確認是否備份,到"(jenkins的安裝目錄)/jobs/(作業名稱)/builds/(建置次數)/archive/Builds"下檢查是否有建置時間的資料夾並確認專案輸出的檔案是否被正確建置,如下圖
確認是否備份

參考資料:

思元的開發筆記

2017年12月12日 星期二

建立一個javascript的library在window平台

建立一個javascript的library在window平台

前言

  由於對javascript不熟,買到的書也都剛好沒再講怎麼建library,在此把過程記錄下來。建置完後的library會有2個,一個是正常的版本,另一個版本是最小化的版本,兩個本本的差異在正常版本會保留空白換行等字元,最小化的則不會,但最小化後的檔案會比較小。

步驟1:安裝node.js

  到node.js官網下載安裝檔後安裝即可。安裝完後請在console鍵入。
npm help

確認npm是否能正常運作。
如果node.js已安裝過,這個步驟可略過。


步驟2:建立library的資料夾

  建立一個資料夾並為它命名(在本範例中,library的資料夾命名為"JSLibSample"),這個資料夾將會是專案的根目錄。

步驟3:安裝rollup.js

  在console鍵入下列命令
npm install --global rollup

安裝完後,鍵入下列命令確認是否安裝完成。
rollup -h

如果rollup.js已安裝過,這個步驟可以略過。


步驟4:建立package.json

  在console到專案的根目錄,鍵入下列命令
npm init

輸入完命令後,會需要輸入"package name"、"version"...等訊息,直接用enter略過,這些數值之後都可以改,不用擔心。執行完會看到下圖
npm init執行後的結果
在認專案的根目錄下會產生一個名為"package.json"的檔案。


步驟5:建立rollup.config.js

在專案的根目錄下,建立一個名為rollup.config.js的檔案,並在內容填下
export default {
  entry: 'src/scripts/main.js',
  format: 'umd',
  targets: [
 {
  format: 'umd',
  moduleName: 'JSLIBSAMPLE',
  dest: 'build/js/main.js'
 }
  ]
};

其中entry這個變數代表library的來源檔案,dest這個變數代表要輸出的library,modulename則是library的名稱,這裡可以根據需要來變更。

步驟6:建立一個簡單的library

  在根目錄下建立來源檔案(本範例是"src/scripts/main.js"),如下圖
建立來源檔案
並在該檔案填入以下內容
function TestCall(){
 console.log("TestCall()");
}
export{ TestCall };

在根目錄下建立輸出資料夾(本範例為build/js/),如下圖
建立輸出資料夾
建立完輸入與輸出後,在console並到專案的根目錄下,鍵入以下命令
rollup -c

執行完後可以在輸出的資料夾下看到輸出檔案。如下圖
輸出的library

步驟7:測試輸出的library

  在專案的根目錄下,建立一個名為"test"的資料夾,並在該資料夾建立一個名為"test.html"的檔案,然後填入以下內容在該檔案
<script src="../build/js/jsLibSample.js"></script>
<script>
JSLIBSAMPLE.TestCall();
</script>

完成後如下圖
測試用網頁的建立
接著用瀏覽器開啟"test.html",並確認console.log()是否有正確輸出"TestCall()",如下圖
測試library

步驟8:安裝uglify-js

  在console鍵入下列命令
npm install --global uglify-js

安裝完後,鍵入下列命令確認是否安裝完成。
uglifyjs -h

如果uglify-js已安裝過,這個步驟可以略過。


步驟9:設定建置命令

  在專案的根目錄中,將"package.json"檔案的內容改成以下內容
{
  "name": "jslibsample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "build-uglify": "rollup -c && uglifyjs build/js/jsLibSample.js -cm > build/js/jsLibSample.min.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

紅字的部分為新增的部分,左側的"build"與"build-uglify"是建置的命令名稱,可以自行命名,右側為實際執行的命令。build-uglify的執行命令,-cm前方為library的輸出檔案,右方則設置要輸出的最小化後的檔案。接著在console並到專案的根目錄下,執行建置最小化的檔案,鍵入以下命令
npm run build-uglify

接著確定最小化後的檔案是否確實被建置。如下圖
執行建置最小化後的結果

步驟10:測試最小化檔案

  在專案的根目錄的test資料夾裡,建立一個名為"testmin.html"的檔案,檔案的內容如下
<script src="../build/js/jsLibSample.min.js"></script>
<script>
JSLIBSAMPLE.TestCall();
</script>

接著用瀏覽器開啟"testmin.html",並確認console.log()是否有正確輸出"TestCall()"。

參考資料:

Rollup.js Tutorial, Part 1: How to Set Up Smaller, More Efficient JavaScript Bundling Using Rollup
rollup.js