解決 ng2 的 Cross Domain 問題

當我們在開發環境使用 Angular2 要去後端 Web API 取資料時，出現以下錯誤
No 'Access-Control-Allow-Origin' header is present on the requested resource.

這是因為後端的 Web API 沒有支援 Cross Origin Resource Sharing (CORS)
這時，我們可以在Client端設定，透過 Proxy 轉發網址

Step 1. 於根目錄(與package.json同層) 建立 proxy.config.json 檔案，內容如下
(其中 KyleAPI 是Web API 的名稱，target 指的是 Visual Studio 執行後產生 IIS Express 的站台IP)
{
  "/KyleAPI": {
    "target": "http://localhost:47496",
    "secure": false
  }
}

Step 2. 修改package.json檔案，將npm 指令中的 start 加上proxy-config，並指向proxy.config.json 檔案
"start": "ng serve",
↓↓↓
"start": "ng serve --proxy-config proxy.config.json",

Step 3. 重新啟動 npm start，並在程式中的 url 只要改成下面這段即可
    //let url = 'http://localhost:47496/KyleAPI/api/values/';
    let url = '/KyleAPI/api/values/';
這時我們的 proxy 設定會自動將 /KyleAPI/api/values/ 網址轉為 http://localhost:47496/KyleAPI/api/values/


當你將開發的 Angular2 與 Web API 部署到 IIS 上之後，請把他們放在一起(詳見這一篇)，這時候就不需要這個設定了

ng2 檔案資料夾介紹

開發 angular2 必須要有幾個關鍵的資料夾與檔案
a. 資料夾的部分
node_modules
Node.JS 的一些模組
e2e
End-to-end (E2E) Tests 測試用

b. app資料夾裡面
*.spec
Unit Tests 用的檔案
app.module.ts
用來註冊其他的 NgModule 到 root NgModule 裡面
main.ts
用來綁定 platform-browser-dynamic 與 NgModule

c. 檔案部分
package.json
定義有多少 npm 指令可以執行
protractor.config.js
e2e 測試用的config檔
systemjs.config.js
Mapping angular2 載入的模組

ng2 建立新專案

建立 Angular2 專案的步驟，在官網也有介紹。 https://angular.io/docs/ts/latest/cli-quickstart.html
這邊只是單存的紀錄一下自己的學習筆記

Step 1. 必須先安裝 node.js (小太陽裝的是node-v7.3.0-x86.msi 這個版本)，安裝完畢即可使用 cmd 操作 npm 指令
查看版本
node -v
npm -v

Setp 2. 設定連外網的 Proxy (如果你的環境需要設定連外網的話)
npm config set proxy=http://192.168.xx.xxx:8080
檢查設定值
npm config list

Step 3. 透過 angular cli 安裝 Angular2 環境
npm install -g angular-cli

Step 4. 安裝完畢後，可以開始操作 ng 指令
查看 help
ng --help
建立一個 demo 專案
ng new 專案名稱
 (這個階段要有耐心點，等它跑完，因為小太陽跑到下面這段以為結束了... 強制關閉，結果就是專案Create失敗)
Installing packages for tooling via npm.
(看到下面這段才算建立專案完成)
Project '專案名稱' successfully created.

Step 5. 執行測試
cd 專案名稱
ng serve
開啟網頁輸入 http://127.0.0.1:4200，網頁出現 app works! 表示建立專案成功囉！

Web Service 傳遞自定物件

測試了一下，如何使用 Web Service 傳定自定的物件

1) Web Service 端
Step 1. 先自定一個物件，名叫 Hero，設定為可序列化類別
一定要加入 public Hero() { } 這行，不然會出現「無法序列化 XXX.Hero，因為它沒有參數建構函式。」的錯誤
    [Serializable]
    public class Hero
    {
        public int id { get; set; }
        public string name { get; set; }
        public Hero() { }
        public Hero(int id, string name)
        {
            this.id = id;
            this.name = name;
        }
    }

Step 2. 撰寫 Web Service 方法
        [WebMethod]
        public List<Hero> GetHeroes()
        {
            List<Hero> lstHero = new List<Hero>();
            lstHero .Add(new Hero(1, "Kyle"));
            lstHero .Add(new Hero(2, "Paul"));
            return lstHero ;
        }

2) Web Client 端
上面的 Web 參考名為 localhost，類別為 WebService1
用下面這兩段就可以將 Hero 物件接回去了
        localhost.WebService1 CallWebService = new localhost.WebService1();
        localhost.Hero[] heroes = CallWebService.GetHeroes();

後續也可以將 localhost.Hero[] 轉回為自定的物件 Hero
            List<Hero> lstHero = new List<Hero>();
            for (int i = 0; i < heroes.Length; i++)
            {
                lstHero.Add(new Hero(heroes[i].id, heroes[i].name));
            }

一些基本的程式應用

1) 在一串數字中將重複的刪除
            bool bIsDup = false;
            int[] iRawData = { 0, 3, 5, 3, 2, 1, 0 };
            List<int> lstAns = new List<int>();

            for (int i = 0; i < iRawData.Count(); i++)
            {
                bIsDup = false;
                foreach (var a in lstAns)
                    if (iRawData[i] == a)
                    {
                        bIsDup = true;
                        break;
                    }
                if (!bIsDup)
                    lstAns.Add(iRawData[i]);
            }
            iRawData = lstAns.ToArray();


2) 在一個數組裡找出兩個數，使得他們的和為給定的數值 (例如7)
            int[] iRawData = { 0, 3, 5, 3, 2, 1, 0, 9, 8, 3, 2, 1, 7, 6, 5};
            int iAns = 7;
            List<KeyValuePair<int,int>> lstAns = new List<KeyValuePair<int,int>>();
            for (int i = 0; i < iRawData.Count(); i++)
            {
                for (int j = 0; j < iRawData.Count(); j++)
                {
                    if (iRawData[i]+iRawData[j] == iAns)
                        lstAns.Add(new KeyValuePair<int,int>(iRawData[i],iRawData[j]));
                }

            }


3) 

TIBCO RV Daemon 自動關閉

昨晚庫房打來反應 WMS 無法透過 tibco rv 連線到 MES；看了一下系統狀況，發現 rvd 已經不存在了，也難怪 WMS 無法連線。

在這裡必須先說明一下 rvd 的特性，翻了一下原廠文件如下：

The Rendezvous daemon process, rvd, starts automatically when needed, runs continuously and may exit after a period of inactivity.

Usually, the Rendezvous daemon (rvd) process starts automatically. When a Rendezvous program creates a transport, Rendezvous software determines whether a daemon is already listening for connections (as specified by the daemon parameter). If so, the new transport connects to that daemon. If not, it automatically starts a new daemon and connects to it.

However, when the daemon parameter of the transport creation call specifies a remote daemon, the daemon does not start automatically—you must start it manually on the remote computer.

上面說明了，Rendezvous daemon (rvd) 常駐在背景中，一段時間沒有程式連線，將自動被下下來。但當 rvd 未開啟時，本機程式是有能力能將 rvd 重新開啟的，但為什麼 WMS 沒有自動帶起 rvd 呢？

是的，文中提到的 remote daemon ﹝即一台跨網段的主機，透過 tcp 連線到網段內 local 端主機的 rvd，進而使用該 rvd 來進行訊息收送﹞，即紅色字體的說明：如果是透過 remote daemon 的方式進行連線，當 local 端主機的 rvd 被下下來，remote 端的程式將沒有權限將 rvd 開啟。

這個問題之前沒有發生過，原因是不久前 MES 主機換了一台，但 WMS 仍透過 Remote Daemon 的方式連線舊 MES 主機，而舊 MES 主機的 rvd 僅 WMS 在使用，也就是說，只要 WMS 關閉連線一段時間，rvd 因沒人使用被自動下下來，這時 WMS 就會陷入找不到 rvd 也無法開啟 rvd 的窘境。

當下的暫時性解法，就是使用 command 的方式把 rvd 手動帶起，並請 WMS 趕緊進行連線

%>tibrvlisten -service 8585 -daemon tcp:8585 aaa

查看一下，rvd 是否已經開啟

 %>ps -ef | grep rvd

SS   24986  4755  0 10:43:53 pts/0       00:00 grep rvd

SS   24512     1  0 01:18:37 ?           02:32 rvd -listen tcp:8585 -no-permanent

當然，長期的解法，還是得請 WMS 連線到新 MES 主機，因為新 MES 主機的 rvd 是全年無休，且 MES 本身會去使用，所以不會有被下下來的問題。

肩頸酸痛

長時間坐辦公室，總是感到肩頸酸痛，尤其又是從事程式開發的工作，經常固定一個姿勢太久，導致肩頸酸痛。
每當放長假時，酸痛就會完全地消失，古人云：休息是為了走更長遠的路，一點都不假！但是，長假並非經常發生，假期結束回到公司後，肩頸酸痛又會伴隨著你，去看了一些網路文章，也聽了朋友的方法，最有效的紓解方式，不外乎是，多多起身走動，或是補充維生素B1、B6、B12等，也有人建議調整工作桌面的高度，但這些似乎沒能完全解決酸痛的問題。