目錄：快速掌握重點！

• Step 1. 登入 Microsoft Imagine
• Step 2. 確認 Microsoft Imagine 帳戶資訊
• Step 3. 報名 2018 Imagine Cup！
• Step 4. 開始建立團隊！
• Final Step！上傳團隊專案

Step 1. 登入 Microsoft Imagine

Step 2. 確認 Microsoft Imagine 帳戶資訊

Step 3. 報名 2018 Imagine Cup！

Step 4. 來建立團隊吧！

至多 3 人

至多 3 人

Final Step！上傳團隊的專案

1. 專案標題
2. 專案敘述（最多 255 個字元）
3. 專案提案（內容請包涵團隊與專案的介紹）
   • Word 或是 PDF 檔案不能超過 10 頁
   • PPT 檔案不能超過 20 張
   • 檔案限制為 100 MB
4. 專案檔案
   • 只接受 ZIP
   • 大小限制為 1GB，超過請按照說明操作
5. 專案檔案介紹
   • 只接受 DOC、DOCX、PDF 與 ZIP
   • 大小限制為 10 MB
6. 其他選填項目
7. 評選標準：

.NET 系列

• .NET 以下各式各樣的變種，這裡簡單介紹一下

.NET Core

• 這是這次主要要介紹的重點。
• 主要特點是能跨平台，但是不支援一些 GUI 的介面，適合拿來做 CLI 介面或是網路等無介面的應用。

.NET Framework

• 主要是用來開發 Windows PC 上面的應用程式，但是跨平台能力較差，但是可以開發出各式各樣 PC 上面的應用程式。
• 支援使用多種語言，如 C#、C++、VB…

Xamarin

• 主要的功能是開發跨平台的行動裝置原生應用程式，可以寫一份 code 就能在多個行動裝置上執行

Mono

• 一個在 .NET Core 出來之前跨平台的 C# 執行環境&編譯器
• 其專案也支援用 Gtk 開發桌面環境的程式
• 後來成為了 Xamarin 的前身

.NET Standard

• 如前面所述，.Net 有許許多多的分支，但是這些分支之間的 API 卻不一致，因此這個專案是為了讓開發人員可以使用一組共同的可攜式程式庫，使得一些和作業系統不相關的程式碼可以被簡單的共用。

官方網頁

• https://www.microsoft.com/net/
• https://docs.microsoft.com/zh-tw/dotnet/core/

入門

安裝開發環境

• 照著這個頁面上的步驟一步一步安裝 https://www.microsoft.com/net/download/core

撰寫第一個 .NET Core 程式

• 在電腦上打開終端機，輸入以下的指令

dotnet new console -o hwapp
cd hwapp

• 在那個資料夾中加入一個名為 Program.cs 檔案，並包含以下的內容

using System;

namespace hwapp
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}

• 這個程式的功能是在螢幕上印出 Hello World! 字樣
• 使用以下的指令執行他，就能看到螢幕上印出 Hello World!

dotnet run

簡單小練習

• 利用 .NET Core 輸出九九乘法表

using System;

namespace hwapp
{
    class Program
    {
        static void Main(string[] args)
        {
            for(int i=1;i<=9;i++)
                for(int j=1;j<=9;j++)
                    Console.WriteLine(i+"*"+j+"="+i*j);
        }
    }
}

跨平台執行

• 可以使用以下的指令把他 build 起來，之後到其他平台上就可以輕鬆地使用

dotnet build

• 如果是想要輸出成 Release 版本的話，就使用以下的指令

dotnet build -c Release

• 然後你會看到他輸出了一行類似於 XXX -> <Path>/XXX.dll 的東西，而那個路徑就是你的目標檔案
• 把那個路徑下的 XXX.dll 和 XXX.deps.json 拿到其他裝有 .NET Core Runtime 的環境，並且執行

dotnet XXX.dll

• 就會發現他成功地在其他環境中跑起來了

反向

工具

• 對於 .NET 系列的程式做逆向工程我會推薦使用一個名為 dnSpy 的開源軟體來達成這件事情
  • 官方 Github https://github.com/0xd4d/dnSpy
  • Release https://github.com/0xd4d/dnSpy/releases
• 下面是他 Github 上的示範動畫
• 安裝方法很簡單，從 Release 那裡載下來後解壓縮就能直接使用了

入門

• 首先我們把我們之前寫好的 .NET Core 應用程式的 dll 拿出來，拖曳到dnspy的視窗裡面，會發現到畫面左邊出現的樹狀目錄可以點，點一點之後就能找到我們寫的應用程式的程式內容
• 這時你會發現我們的程式居然被 dnSpy 反編譯成原本的樣子了
• 接下來我們試著去修改這隻程式
• 對著要修改的程式按右鍵後選擇 Edit Method (C#)...
• 接著你就會看到一個視窗，你可以在裡面把原本的函數改成你想要的樣子
• 接著按下 compile 按鈕
• 然後從上面選單中的 File 裡選擇 Save Module... 然後按下 OK 後就修改完成了
• 使用 .NET Core 執行看看，看看他是否真的改變了

CTF中的實例

• 這次的目標是 D-CTF Quals 2017 裡面的 Don't net, kids! 這一題
• 把題目給的 zip 載下來後會發現其實是一個 .NET Core 的 網頁程式
• 把裡面的 DCTFNetCoreWebApp.dll 丟到 dnSpy 裡面分析
• 觀察到 DCTFNetCoreWebApp.Controllers 這個 namespace 裡面的東西，發現這個是負責做路徑解析的功能，然後再看到裡面的 Post 函式
• 發現到以下的內容

string expr_69 = JsonConvert.SerializeObject(this._executor.Execute(request.Command));

• 連點兩下 Execute 跳轉進去那個函式的內容
• 然後觀察到這行

bool flag = command.GetType().get_Name().Equals(typeof(AdminCommand).get_Name());

• 仔細想想那行所代表的意思，發現其意思是: 如果 Command 的型態是 AdminCommand 的話，則代表這個 Command 可以執行被包含在 _amdinActions 內的 Command
• 這時我們的目標變成，如何讓輸入的 Command 會被轉型成 AdminCommand
• 這時我們回想起了 Post 函式裡的某個行程式碼

Request request = JsonConvert.DeserializeObject<Request>(value, new JsonSerializerSettings
{
    TypeNameHandling = TypeNameHandling.Auto
});

• 因為 TypeNameHandling 被設定成了 TypeNameHandling.Auto，因此我們可以構造一個 json，而其內容中含有"$type"，使得他會被轉型成想要的型態
• 最後我們使用以下的 json 來得到 Flag

{
    "Command": {
        "$type": "DCTFNetCoreWebApp.Models.AdminCommand, DCTFNetCoreWebApp, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null",
        "UserId": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
        "Action": "Readflag"
    }
}

接續

• 有時程式碼會被經過大量的混淆，那麼這時 dnSpy 出來的東西會變得很難看，這時就會需要花大量的耐心去仔細的觀察資料的流動和程式的邏輯，把裡面程式碼裡面重要和不要的部分分清楚，了解程式的核心，最後再找到目標，並且做到想要做的事情

額外

• 以下是幾個我覺得和 .NET 有關，而且蠻有趣的專案

peachpie

• https://github.com/peachpiecompiler/peachpie
• 一個用 .NET 寫的 PHP 7 編譯器和執行環境

SSH.NET

• https://github.com/sshnet/SSH.NET
• .NET 用的 SSH library

在開始之前

製作一個新的 APP

1. 在 My Apps 頁面，點擊 New App.
2. 在對話框中，將您的應用程序命名為 “TravelAgent”。
3. 選擇您應用程式的語言 (在 TravelAgent 中，我們選擇英文)，並點選 Create.

添加意圖 (intents)

添加語句 (utterances)

添加實體 (entities)

在語句 (utterances) 中標註實體 (entities)

添加預建構實體 (prebuilt entities)

訓練您的 APP

測試您的 app

發布您的 app

使用您的 app

下一步

• 嘗試通過繼續添加和標註 utterances 來提高 app 的性能。
• 試著添加 Features 來豐富您的模型並增進您 LUIS 的表現。Features 幫助您的應用識別可互換的詞/短語，以及在您的領域中較常用的用語。

利用 GUI 應用程式 操控 MongoDB

讓 Robomongo 和你的 MongoDB 做連接

MongoDB 的優點

• No-SQL 資料庫：存入的資料類型沒有限制要每個都一樣(具彈性)
• Document 資料庫：以一個個 JSON 格式的文字存入資料庫中,各程式建物件導向易於傳遞這些 JSON 資料(普遍性)
 
• MongoDB 核心是 C++：運算操作裡面的資料迅速(快速性)
 

用 Robomongo 的原因是因為相較於指令（cmd介面）能更理解資料庫中資料擺放的位置（視覺化）

                謝明軒 Ming-Hsuan Hsieh 專長：Java、C、Javascript GitHub ：

官方 Github Repo

• Bash On Windows
• 如果遇到 bug 或是想要有新的 feature，請上去發 Issues。

Release Note

• Bash On Windows - Release Notes
• 可以在這裡看到最新的 Windows Insider Preview 中 WSL 被改進了什麼東西，和出現了什麼bug。

安裝方法

• 以下僅考慮正式 Release 的 Windows 版本（Insider 請去看 Release Note）
• 如果你的電腦不是 Intel 的 64 位元架構的話（例如x86、arm架構）
  • 請買新電腦
• 如果你的 Windows OS 組建低於 14393
  • 請升級您的 Windows
• 如果你的 Windows OS 組建是 14393
  • 我還是建議升級您的 Windows，因為這個版本的功能不是很完整，使用時會遇到很多坑
  • 如果真的要安裝可以，請參考 15063 的 WSL 安裝方法
• 如果你的 Windows OS 組建是 15063
  • • 開啟 WSL 有兩種方法，一個是用圖形介面，一個是下指令，可以自由選擇。
    • 方法一
      • • 請打開 Windows【設定】（快捷鍵 Win+I）
       
      • • 打開【更新與安全性】，進去【開發人員專用】分頁，勾選【開發人員模式】
       
      • • 這時系統可能會叫你重開機，如果有的話，請重開
        • 進到【設定】裡的【APP】，然後點選畫面右方（有時會在畫面最下方）的【程式與功能】
       
      • • 然後點選【開啟或關閉 Windows 功能】，在裡面找到【適用於 Linux 的 Windows 子系統（搶鮮版（Beta））】勾選後按【確定】
       
    • 方法二
      • 打開管理員權限的 Powershell，輸入以下指令 Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
    • 跑了一陣子之後 Windows 會叫你重新開機，然後請重新開機。
    • 重開機完後 WSL 已經安裝完成。
    • 接下來要安裝 Ubuntu 的映像
    • 叫出【執行】（快捷鍵 Win+R），輸入【bash】後按確定
   
  • 接下來他會問一推問題，請依照需求回答，例如使用者帳號密碼之類的。
  • 以後要打開他可以直接叫出【執行】（快捷鍵 Win+R），輸入【bash】後按確定後打開。
    • 其執行檔位置在【C:\Windows\System32\bash.exe】
  • WSL 的管理方法 lxrun 在 LX 子系統上執行系統管理作業 使用方式: /install - 安裝子系統 選擇性引數: /y - 不提示使用者接受或建立子系統使用者 /uninstall - 解除安裝子系統 選擇性引數: /full - 執行完整解除安裝 /y - 不提示使用者確認 /setdefaultuser - 設定 bash 將以其身分啟動的子系統使用者。若該使用者不存在，將會建立該使用者。 選擇性引數: username - 提供使用者名稱 /y - 若提供使用者名稱，不提示建立密碼 /update - 更新子系統的套件索引

• 如果你的 Windows OS 組建是 16215 以上
  • 首先先參考 15063 的 WSL 安裝方式
  • 然後到 Windows Store 上下載喜歡的 Linux 映像
  • Ubuntu
  • openSUSE Leap 42
  • SUSE Linux Enterprise Server 12
• 官方說明文件

注意事項

• 當最後一個 bash.exe 結束的時候，就會把所有 WSL 的程序（包含背景執行的）結束，因此當有背景執行的 WSL 程式時，記得不要把所有的 bash.exe 都關掉。
• 因為 WSL 沒有 systemd，因此裝在系統上的服務不會自己開起來，要手動的打開 sudo service XXX-service start
• 使用 gdb 的時候，有時候某些 libary 載入到記憶體上的位置會和正常的Linux不一樣，因此打 CTF 的 Pwn 時，在 WSL 上的結果很有可能不符合預期。
• 無法在上面使用虛擬化技術，因此在上面無法使用 VirtualBox 或是 kvm (qemu) 之類的東西，不過 qemu 的管理器可以使用，但只能用來管理其他電腦上的 qemu。
• 當你在上面開啟 port 的時候，要注意不會跟其他 Windows 程式衝到。並且當你想要讓其他人能連到的話，需要去 Windows 的防火牆中設定，讓某些 port 能夠通行。
• 可以在 WSL 中執行 Windows 的 exe 程式，不過檔案需要放在 Windows 的目錄中，而不是 WSL 的 Linux 目錄上。

額外的東西

• • ssh server
    • 跟 Windows 10 內建的 ssh server 衝突，所以記得要改 port 或是關 Windows 10 的 ssh 功能
    • 安裝 ssh-server sudo apt install openssh-server
    • 修改【/etc/ssh/sshd_config】內的這些東西 AllowUsers <yourusername> PasswordAuthentication yes UsePrivilegeSeparation no
    • 然後要手動啟動 ssh-server 他 sudo service ssh --full-restart
  • 圖形介面
    • 我個人推薦使用的 X Server 是 VcXsrv Windows X Server
    • 安裝完之後請在啟動裡面加入有內容的 .bat 檔，讓 X Server 可以每次開機都直接啟動
    • 開啟啟動資料夾可以直接【執行】【shell:startup】 @echo 0 start "" "C:\Program Files\VcXsrv\vcxsrv.exe" :0 -ac -terminate -lesspointer -multiwindow -clipboard -wgl exit
• 然後進到 bash 裡面，在使用者的環境變數裡面新增 DISPLAY=127.0.0.1:0
• 如果使用DISPLAY=:0的話，本機上沒有問題，但是ssh -X的時候就會出現問題。
• 加入環境變數的方法有很多種，我個人的做法是在【~/.bashrc】裡面加入。 export DISPLAY=127.0.0.1
• Ubuntu Desktop
  • 裝上這個，你就有 firefox、gnome-terminal、gedit、Libre Office 等等東西可以用了 sudo apt install ubuntu-desktop
• Hime
  • 參考這個
  • 不過有幾點要注意，第一個是要開啟【支援遠端用戶端程式】
  • 然後在 VcXsrv 中 Ctrl-Space 這個組合鍵無法使用，因此需替換成 Shift-Space
  • 最後記得加上以下的環境變數 export GTK_IM_MODULE=hime export QT_IM_MODULE=hime
• 聲音
  • 我個人的做法是安裝 pulse audio，然後這裡有別人編好的版本
  • 然後解壓縮後執行裡面的bin/pulseaudio.exe
  • 接下來回到 bash 裡面，執行 sudo add-apt-repository ppa:therealkenc/wsl-pulseaudio sudo apt install --no-install-recommends libpulse0 pavucontrol
  • 然後可能要寫個 script 讓他自動重啟，因為他好像一段時間沒有播放聲音就會自己關掉。
  • 如果還有問題請參考這裡
• VLC
  • • 這個純粹就只是為了好玩用的，不一定要裝 :P
    • 記得確定 pulse audio 有打開喔。 sudo apt install vlc
    • bash 中輸入 vlc 打開之後
    • 【Tools】->【Video】->【Output】->【Color ASCII art video output】->【OK】
    • 把 vlc 關掉
    • 把環境變數的 DISPLAY 刪掉（或是改成空字串）
    • 執行 cvlc <影片位置>
   
  • • 欣賞漂亮的 ASCII Art 吧
   
• Visual Studio Code
  • 在 Windows 上的 VS Code 中的設定中加入以下內容，即可將 WSL 的 bash 變成預設的 shell。 "terminal.integrated.shell.windows": "C:\\WINDOWS\\Sysnative\\bash.exe", "terminal.external.windowsExec": "C:\\WINDOWS\\Sysnative\\bash.exe",
  • 但是目前沒辦法把 VS Code 裝在 WSL。有興趣可以看這裡
• PTT
  • 很多人都不知道其實 PTT 可以用 ssh 的方式上去。 ssh bbsu@ptt.cc
• 安裝 WSL 在其他磁碟
  • 請參考這個
• 改裝成 Arch
  • 先下載 Arch 的映像
  • 解開後 chroot 進去 arch 的 Live CD 根目錄上
  • 照著這個安裝教學安裝
  • 裝完之後，把所有的 bash.exe 都關掉
  • 用檔案總管進到【使用者目錄/AppData/Local/lxss】裡，找到 Arch 的根目錄，把它【移動】到最外面
  • 把 Arch 的根目錄重新命名成 rootfs
  • 打開 bash 測試是否成功

WSL 技術原理

1. 開發環境建置門檻高
   • 由於牽涉到多種平台的聯繫，等於需要對各種平台都要有相當的了解才知道怎麼設定。這個問題相較於以前已經減輕很多
2. 功能性
   • 每個平台都有各自的功能，Xamarin Forms 只能取其交集，對於 Xamarin Forms 不提供的特定功能只能針對該平台單獨實作。問題在於你可能不了解該平台，因此不知道該如何實作
   • 同時，身為新技術，Xamarin Forms 的確也還沒實作完「全部的交集」，某些功能在每個平台都有提供，但 Xamarin Forms 卻還未提供該功能，這時也會需要針對各個平台分別實作。這個問題已經改善很多，在未來也會持續改進
3. 相容性
   • 每個平台皆可獨立於 Xamarin Forms 之外自行更新，但這常常造成 Xamarin Forms 對於該平台的相容性問題，建議不要隨意升級各個平台的套件，由 Xamarin Forms 統一管理其升級事宜。這個問題相較於以前已經減輕很多

名詞解釋：

• View：通常是一個長方形的東西，有的可以在上面顯示文字、圖片、進度或任何你想顯示的東西，有的用手指點一下會有反應（「按鈕」就是一種 View），有的可以用來輸入文字
• Layout：是一種 View，也是一個長方形的東西，塞很多的 View 進去是它唯一的功能，但 Layout 很重要，因為沒有 Layout 你就不能在同一個畫面中放超過一個 View。Layout 通常是隱形的，你只能看到它怎麼將塞進它裡面的 View 排列在畫面上，而不能直接看到 Layout 本身

1. Button

   
   • 這大概是最親民的 View 了吧，因為用手指戳它會有反應 XD 新手入門可以從 Button 開始玩起
   • Debug 的時候很好用，可以用來觸發某段測試程序
   • 常用的屬性：Text
   • 常用的事件：Clicked

2. StackLayout

   
   • 想要將多個 View 放進同一個畫面，可以從 StackLayout 下手～它會幫你將 View 由上而下排得整整齊齊的 XD
   • 常用的屬性：Children, Orientation

3. ScrollView

   
   • 當一個 View 太大，比一個螢幕的大小還大，要怎麼辦呢？讓它可以用手指滑動是一個好選擇，就把它塞進 ScrollView 裡面吧～ ScrollView 是一個比較特別的 Layout，它只能塞一個 View 進去
   • 常用的屬性：Content

4. Editor

   
   • 想要一個可以打字的地方嗎？那就非 Editor 莫屬了！
   • 常用的屬性：Text

5. Image

   
   • 想要顯示一張圖片嗎？那就非 Image 莫屬了！
   • 常用的屬性：Source

6. ActivityIndicator

   
   • 如果程式正在下載一個檔案，或者進行一個龐大的計算，要很久，怎麼辦？顯示一個圈圈轉轉轉，或者一堆點點跑跑跑，讓使用者更心煩（X）紓壓（O）吧～
   • 常用的屬性：IsRunning

7. Label

   
   • 想要顯示文字？不想像 Button 一樣被戳會有反應，也不想像 Editor 一樣可以編輯文字。哦，那就用 Label 吧！除了用來顯示文字之外，甚麼事都不能做！XD
   • 常用的屬性：Text

8. Entry

   
   • 這是一個只能輸入一行的 Editor，這有甚麼用？方便的很呢，這樣使用者平常按換行（Enter）的那個鍵就可以用來當作「輸入完畢」鍵了！
   • 常用的屬性：Text, Placeholder, IsPassword
   • 常用的事件：Completed

9. Grid

   
   • 要怎麼把 View 排成九宮格呀？看看那邊～ Grid 正在對你偷笑！^_^ 除了做出九宮格之外，Grid 的強大排版功能可不只你想的那樣！
   • 警告：GridLength.Auto 不可濫用，100 個 Auto 會拖慢你的 App 至少 0.5 秒！
   • 常用的屬性：RowDefinitions, ColumnDefinitions

10. ProgressBar

    
    • ProgressBar 就是進度條，使用時機和 ActivityIndicator 類似，但是多了「顯示進度」的功能
    • 說的容易做起來難，你在寫程式的時候要怎麼讓程式知道自己跑了幾趴（%）？OwO 各顯神通吧　XD
    • 常用的屬性：Progress
    • 常用的方法：ProgressTo

0429 Facebook 小遊戲

簡介

這次的專案使用到了 Facebook Graph API，還不熟悉的讀者，可以參考我們先前的文章，或是到 Facebook 開發人員中心查看說明。

WebSocket

在這個範例中，我們使用了 WebSocket 作為伺服器和瀏覽器的溝通方式，它可以讓我們維持連線，不像一般讀取網頁一樣送完資料就結束連線，這剛好符合了我們的需求(我們必須不斷傳送題目、接收答案、公布解答等等) ，有關這個技術的詳細資訊在網路上已經有很多解說，在開始專案之前，建議讀者可以先去看看。

線上範例

這次的範例我們特別放到 Azure 上展示，實作前不妨先看看成果，讓你更有看到結尾的決心吧。
http://nodec4.azurewebsites.net/

第一部分－配對

第一部分我們先來做配對的部分，我們給第一位玩家專用的 URL ，等到第二位玩家存取這個網址後，檢查好友關係，並送出訊息讓網頁導向遊戲畫面。

流程圖

為了方便，我們在每次的通訊都會加上 type 這個值，用來說明這次的通訊目的，下圖中左、右方的文字就是 type 。

• 第一位玩家必須由1.建立遊戲來取得遊戲ID，並讓自己加入。
• 第二位玩家則需要提供遊戲ID來加入。
• 兩個人都加入後，伺服器會發送 MATCH 訊息給所有人。

登入流程

Facebook 的登入流程相信大家已經很熟悉了，這裡就不多做解釋，程式部分如下。

app.get('/api/code', (req, res) => {
    request('https://graph.facebook.com/v2.8/oauth/access_token?client_id=' + process.env.appID + '&redirect_uri=' + process.env.redirect + '/api/code?id=' + req.query.id + '&client_secret=' + process.env.appKEY + '&code=' + req.query.code, (error, response, body) => {
        
        var userdata = JSON.parse(body);
        req.session.key = userdata.access_token;
        /*  */
        getUser(userdata.access_token).then((data) => {
            req.session.name = data.name;
            req.session.fbid = data.id;
			// #27
            var url = (req.query.id != 'undefined')? '../?id=' + req.query.id : '../';
            res.redirect(url);
        });
    });
});
function getUser(key) {
    return new Promise((resolve, reject) => {
        request('https://graph.facebook.com/v2.8/me?fields=id%2Cname&access_token=' + key, (error, response, body) => {
            resolve(JSON.parse(body));
        });
    });
}

在 27 行我們判斷網址中是不是有 id 這個值，若有的話我們得一起傳到下個網頁去，否則使用者登入之後會遺失遊戲 id 。

WebSocket 中如何使用 Session

還記得接收到 Code 之後我們做的事情嗎? 我們把使用者的 id,name,access_token 存到 Session 中方便後續使用，這時候就會有個小問題出現囉，WebSocket (下方簡稱WS) 收到訊息後，是沒有辦法直接存取到 Session 的。但我們可以使用 SessionParser 取得資料內容後傳給 WS，方法有很多種，程式碼如下

const wss = new WebSocket.Server({ server, path: "/ws" });
wss.on('connection', function connection(ws) {
    sessionParser(ws.upgradeReq, {}, function () {
        var session = ws.upgradeReq.session;
        ws.session = session;
    });
    ws.on('message', function incoming(data) {
       // 處理接收到的訊息
    });
});

我們在 WS 連接 (on connection) 時，存取 session ，並把讀取到的資料傳給 ws.session 中。

我們是在 WS 連接時存取資料，所以之後若 session 有更新，已連線的 WS 是沒有辦法獲得新資料的，但在這個範例我們不在乎這點，因為我們要的資料只有 Facebook 資訊，這些資料早在 WS 連接前就寫入了。

Module

在前幾個範例中，我們把所有的程式都寫在 app.js 中，這不是件好事情，這次我們分成 4 個檔案。

這麼一來程式架構就比較清楚了，那不同檔案之間要怎麼溝通呢?
我們來看看下面這個例子，1.js 中呼叫 2.js 的 Function
1.js

var secondJs = require('./2')
secondJs.hello();

2.js

function printHelloWord(){
	console.log("Hello Word");
}
module.exports = {
	hello: printHelloWord
}

4 ~ 6 行中，我們定義了 2.js 的輸出，這麼一來，在 1.js 中呼叫 secondJs.hell 就會對應到 2.js 的 printHelloWord 了。
在接下來的程式中，為了方便，我們會將輸出的名稱和真正的名稱設為相同，像這樣

module.exports = {
	printHelloWord: printHelloWord
}
// 名稱相同時，我們可以簡寫成下面這個樣子
module.exports = {
	printHelloWord
}

後端程式

建立 WebSocket 伺服器

在這個範例中，我們會使用 Express 傳送靜態檔案，使用 WebSocket 來進行資料傳輸，這邊主要講解 WS 的部分。

//#41
const server = http.createServer(app);
//#42
const wss = new WebSocket.Server({ server, path: "/ws" });
wss.on('connection', function connection(ws) {
    sessionParser(ws.upgradeReq, {}, function () {
        var session = ws.upgradeReq.session;
        ws.session = session;
    });
	//#48
    ws.on('message', function incoming(data) {
        var msg = { type: null };
        try {
            msg = JSON.parse(data);
        } catch (e) { }
        if (msg.type == null) {
            ws.close();
        }
        else {
            wsc.route(ws, msg);
        }

    });
});

41 行 createServer(app)：載入 Express 的設定
42 行 WebSocket.Server：在路徑 /ws 下建立 WS 伺服器，我們使用 ws 模組。

var WebSocket = require('ws');

48 ws.on(‘message’…)：行定義了接收到訊息的動作，前面有提到為了方便，我們每次通訊都會加上 type 屬性，在接收到訊息後我們先檢查這個屬性，關閉不相容的通訊，接把訊息交給 wsConnection.js 處理，當然我們也先引用我們自己的模組。

var wsc = require('./wsConnect');

若您使用 Azure Web Service 作為平台，要先到設定面板中開啟 Websocket 功能才可以使用。

Azure Web Service 會限制 WebSocket 的連線數量，詳細資訊可以在這裡找到，免費的方案只有 5 個連線數，所以關閉不使用的連線是個聰明的選擇。

下載檔案

前面有提到，關於遊戲管理的部分，都由 gameManager.js 處理，我們沒有辦法在這裡教學這部分，麻煩讀者到 GitHub 下載這個檔案，並放在和 app.js 同一個目錄的位置。

處理通訊

首先，我們得先引用 gameManager ，並定義好 route 函式(用來處理接收到的訊息)以及輸出，另外我們 WS 訊息會以 json 格式傳送，為了方便，我們先寫好傳送 JSON 的功能。

const gm = require('./gameManager');
route = (ws, msg) => {
    switch (msg.type) {
		//依照不同類別處理訊息
	}
}
// 傳送JSON格式資料
sendJson = (ws, msg) => {
    ws.send(JSON.stringify(msg));
}
// 定義輸出
module.exports = {
    route
}

在配對的頁面中，我們會接到三種訊息，分別是 LOGIN 檢查登入狀態、CREATE 建立遊戲房間以及 JOIN 加入遊戲。

檢查登入狀態和以前相通，有登入就回傳名子，沒有就給授權網址，指示改為 WS 發送而已。但在回呼網址中，我們加上了 id 參數，這是為了讓有遊戲 ID 但還未登入的使用者保留 ID，而不會在登入後(網頁重新導向)遺失這個參數。

case "LOGIN":
if (ws.session.name)
	sendJson(ws, { type: msg.type, status: 'ok', name: ws.session.name });
else
	sendJson(ws, { type: msg.type, status: 'not login', url: 'https://www.facebook.com/v2.8/dialog/oauth?client_id=' + process.env.appID + '&redirect_uri=' + process.env.redirect + '/api/code?id=' + msg.game + '&scope=user_friends,user_birthday,user_photos' });
break;

接著是建立遊戲 ID 的部分了，用法很簡單，呼叫 createNewGame 即可

case "CREATE":
if (ws.session.name)
	sendJson(ws, { type: msg.type, status: 'ok', id: gm.createNewGame(ws), name: ws.session.name });
else
	sendJson(ws, { type: msg.type, status: "not login" });
break;

建立的遊戲 ID 在十分鐘後會自動刪除

最後是加入遊戲的部分了，值得注意的是兩個人(不管是不是建立遊戲的人)都需要執行才能開始遊戲。
用法為 joinGame([Websocket],[Game ID]) ，為 promise，會回傳 status (是否成功加入) 及 todo，若 todo 為 notify 時，表示已經有兩個人加入，可以開始遊戲，這時候我們必須傳送 MATCH 指令到前端。

case "JOIN":
if (msg.game && ws.session.name) {
	gm.joinGame(ws, msg.game).then((d) => {
		ws.session.game = msg.game;
		sendJson(ws, { type: msg.type, status: d.status, id: msg.game });
		if (d.todo == 'notify') {
			d.notify.forEach((wsToNotify) => {
			sendJson(wsToNotify, { type: "MATCH", players: d.players });
			})
		}
	});
} else {
	sendJson(ws, { type: msg.type, status: "not login or no game id" });
}
break;

前端程式

因為這次很多和前端的互動，我們得知道前後端怎麼運作的，所以這次我們會講解一些前端的東西。

開啟 WebSocket

前端開啟 ws 很簡單

new WebSocket("ws://[url]");

但考慮到我們可能在 HTTPS 連線下使用(這時須使用 wss://)，所以我們把程式改寫成這樣

var protocol = (window.location.protocol == "https:") ? "wss://" : "ws://";
ws = new WebSocket(protocol + window.location.host + "/ws");

後面的 /ws 是我們在伺服器設定的路徑
接著我們定義 onopen(開啟連線)、onmessage(收到訊息)、onclose(關閉連線)的動作

self.ws.onopen = function () {
        // Web Socket is connected, send data using send()
        console.log("[ws] connected.");
        self.sendJson(self.ws, {
            type: "LOGIN"
        });
};
self.ws.onmessage = function (evt) {
    var msg = JSON.parse(evt.data);
    console.log(msg);
    switch (msg.type) {
       case "LOGIN":
            loginStatus(msg);
            break;
        case "CREATE":
            newgame(msg);
            break;
        case "JOIN":
            checkJoin(msg);
            break;
        case "MATCH":
            match(msg);
            break;
    }

};
this.ws.onclose = function () {
    console.log("ws closed.");
};
this.sendJson = (ws, msg) => {
    ws.send(JSON.stringify(msg));
}

首先，我們一樣定義了 sendJson 來傳送資料，我們把所有的內容包在 WsManager 中，方便我們使用，並且在最上方定義了 self = WsManager，這只是我們的習慣，讀者可以自行決定。

建立完成連線後，我們馬上檢查登入，並等待伺服器回傳資訊。登入之後，我們先試試看能不能利用 ID 加入遊戲

loginStatus = (msg, text, url) => {
        if (msg.status == "ok") {
            self.sendJson(self.ws, {
                type: "JOIN",
                game: getUrlParameter("id")
            });
        } else {
            setAlert("<a href='" + msg.url + "' class=\"btn btn-primary btn-lg\" role=button>玩家FB登入</a>");
        }
}

若沒辦法加入，我們自己建立一個

checkJoin = (msg) => {
        if (msg.status != "ok") {
            setAlert("無法加入", "ID 無效，產生新的房間...", "");
            setTimeout(() => self.sendJson(self.ws, {
                type: "CREATE"
            }), 1000);
        } else
            self.gid = msg.id;
    }

加入完成後，就等待伺服器回傳 MATCH 指令就可以了！
這部分的完整程式在這裡

小節

到這裡我們已經完成了配對，接著就遊戲的內容了，配對完成後，前端要把兩位使用者導向 room.html 這個網頁，並附上遊戲 ID

原諒我們沒有時間美化介面^^

配對的流程需要兩個人(廢話)，若您只有一個人…可以開兩個瀏覽器或兩頁分頁

第二部分－遊戲

流程圖

1. 使用者加入後會傳送 INFO 要求取得遊戲資訊(兩位玩家的名稱和照片)
2. 當兩位玩家都傳送要求後，伺服器會開始製作題目，製作完成時發送 COMPUTING (finish: true)
3. 接著前端必須發送 READY 要求(當使用者按下準備)
4. 伺服器會發送 START 訊息，五秒後會發送題目
5. 伺服器發送題目，前端回傳答案，伺服器公布結果，重複執行值到沒有題目
6. 結束遊戲

取得題目

INFO

取得遊戲資訊，使用方式很為 info([WebSocket],[Game ID])
回傳 data (遊戲資訊內容)、todo (當todo為notify時，表示有兩位玩家要求 info ，開始準備題目)

case "INFO":
if (ws.session.name && msg.game) {
	gm.info(ws, msg.game).then((d) => {
		d.data.type = msg.type;
		ws.gameid = msg.game;
		sendJson(ws, d.data);
		if (d.todo == "notify") {
			sendJson(d.ws[0], { type: "COMPUTING" });
     			sendJson(d.ws[1], { type: "COMPUTING" });
			gm.createQuestions(msg.game).then(notifyGetReady);
		}
	});
}
break;

題目開始準備和準備完成我們都會發送訊息給前端

notifyGetReady = (data) => {
    var s = (data.status == "ok") ? { type: "COMPUTING", finish: true } : { type: "COMPUTING", finish: false };
    sendJson(data.game.players[0].ws, s);
    sendJson(data.game.players[1].ws, s);
}

題目

要取得題目，只需要呼叫 getQuestion([Gamd ID]) 即可，會回傳 que (題目內容) 或 null (沒有剩下的題目了)，傳送題目的程式如下，若沒有剩下題目，我們則傳送 END 訊息到前端。

sendQuestion = (gameid) => {
    gm.getQuestion(gameid).then((data) => {
        if (data != null) {
            var s = {
                type: "QUESTION",
                time: data.que.time,
                que: data.que.description,
                ans: data.que.ans,
                id: data.que.id
            };
            sendJson(data.d[0], s);
            sendJson(data.d[1], s);
            var g = gm.getGameByID(gameid);
            setTimeout(sendResult, s.time * 1000, g, g.nowquestion);
        }
        else {
            var game = gm.getGameByID(gameid);
            var re = { type: "END", data: gm.getEndResult(game) };
            for (var i = 0; i < 2; i++) {
                re.id = i;
                sendJson(game.players[i].ws, re);
            }

        }

    });
}

我們在送完題目後馬上開啟計時器(setTimeout)，這是為了在使用者超過時間還沒有回傳答案時，公布結果。

計分

回答問題

回答問題時，使用 solveQuestion([WS],[Answer])
程式會判斷是哪位使用者回答(相同Facebook ID可能會出錯)
使用者回答後，我們隔 1 秒公布答案。

 gm.solveQuestion(ws, msg.choose).then((data) => {
	if (data) {
		var g = gm.getGameByID(ws.gameid);
        	setTimeout(sendResult, 1000, g, g.nowquestion);
	}
}).catch((e) => { });

公布答案

getResult([Game]) 可取得答案及計分，我們在程式中判斷 nq 是否等於 nowquestion ，這樣可以避免回答到其他題目的答案。
送出結果後，我們隔 2 秒，進行下一題。

sendResult = (game, nq) => {
    if (game.nowquestion == nq) {
        var re = { type: "RESULT", data: gm.getResult(game) };
        for (var i = 0; i < 2; i++) {
            re.id = i;
            sendJson(game.players[i].ws, re);
        }
        setTimeout(sendQuestion, 2000, game.id);
    }
}

總結

目前題目只會有兩種(猜生日和按讚)，讀者可以自行修改 question.js 中的程式來增加不同的題目！

您可以到 Github 上瀏覽完整的專案和教學

謝謝您把文章看完，我們的系列課程也到一段落了，希望你們會喜歡。有任何其他問題，歡迎聯絡我們。

第十一屆微軟學生大使　技術組　蔡臻平、詹鈞婷、盧俊言、鄭薇、王采楓、何天與　撰寫

Node JS 技術小聚課程

1. Node js 實作課程：文字雲
2. Node js 實作課程：回憶影片
3. Node js 實作課程：小遊戲製作

Node js 回憶影片課程討論

這次的專案使用到了 Facebook Graph API，還不熟悉的讀者，可以參考我們先前的文章，或是到 Facebook 開發人員中心查看說明。

簡介

這次的課程我們會沿用上一次文字雲課程的 Facebook Graph API，來繼續實作回憶錄的功能，可以讓大家選擇自己在 Facebook 的照片變成一部回憶錄的影片並在網頁顯示出來，那除了上次課程使用到的 VS Code，還需要另外安裝 NodeJs (7.6.0) 以上的版本，原因會在後面程式碼為大家解說。

這次課程除了讓大家複習 Facebook Graph API 認證程序，也會帶大家使用套件來進行撰寫，主要在 NodeJS 的撰寫上，所以前端的部份我們不會解釋，如果有任何疑問，都可以在下方留言或進入社團跟我們交流。

這次完成的作品

使用 NodeJs 實作授權及取得資料

一樣，在開始之前，請前往下載課程檔案，裡面包還含了 npm 設定、VS code 設定、ffmpeg執行檔及前端資源。

申請應用程式

這個部分請參考上一篇 Node js 文字雲課程討論，步驟都是一樣的，不過因為這次範例我們是使用粉絲專頁存取權杖，用來取得使用者粉絲專業的資料，所以在導向授權頁面，我們傳回三個參數中的 scope，除了 user_posts 這個權限以外，我們還需要加入 manage_pages、user_photos，之後再選擇同意授權，就可以取得我們想要的資料了。

讓我們看一下程式碼修改之後的樣子吧。

app.get('/api/user', (req, res) => {
    var re;
    if (req.session.name)
        re = { statu: 'ok', name: req.session.name };
    else
        re = { statu: 'not login', url: 'https://www.facebook.com/v2.8/dialog/oauth?client_id=' + process.env.appID + '&redirect_uri=' + process.env.redirect + '/api/code&scope=user_posts&scope=manage_pages&scope=user_photos' };
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify(re));
});

使用者相簿資料

我們先使用測試工具來測試一下結果。

請按下取得權杖 → 取得用戶存取權杖，勾選 user_posts、manage_pages、user_photos。

接著試試看 me/albums 端點，可以看到有好幾個 id，一個 id 就是用戶的一個相簿，隨便點選一個 id，就是去搜尋那個相簿裡面的資料，然後再到左手邊的搜尋欄位輸入 photos 以及 images，按下提交。

就可以看到相簿裡面每一張不同大小相片的網址。
我們要取得相片的網址並將它下載至本機端。

在看 code 之前，我們先來介紹今天 code 會用到的一些套件，並於程式中require這些套件。

說這麼多先來看看 code 怎麼打。

// GET 取得相簿資料
app.get('/api/albums', (req, res) => {
    getAlbums(req.session.key).then((data) => {
        res.setHeader('Content-Type', 'application/json');
        res.end(JSON.stringify(data));
    });
});
// 讀相簿列表 
function getAlbums(key) {
    return new Promise((resolve, reject) => {
        var qs = {
            access_token: key
        };
        request({
            url: 'https://graph.facebook.com/v2.8/me/albums',
            qs
        }, (error, response, body) => {
            resolve(JSON.parse(body));
        });
    });
}

將資料傳送到前端，就可以選擇其中一個相簿。

那我們就接著繼續完成 Code 吧

// GET 取得相片資料傳給 getImage
app.get('/api/create', (req, res) => {
    getPhotos(req.session.key, req.query.id).then((data) => {
        getImage(data, res);
    });
});
// 讀取特定相簿的相片列表
function getPhotos(key, id) {
    return new Promise((resolve, reject) => {
        var qs = {
            fields: 'images',
            access_token: key
        };
        request({
            url: 'https://graph.facebook.com/v2.8/' + id + '/photos',
            qs
        }, (error, response, body) => {
            var photo_data = JSON.parse(body);
            var photos = [];
            for (var i in photo_data.data) {
                photos.push(photo_data.data[i].images[0].source);
            }
            resolve(photos);
        });
    });
}

做到這裡就可以取得相片的網址囉。

合成影片

步驟

取得相片列表後，我們使用前面介紹的 videoshow 模組把這些相片接成一個回憶影片。但是這個模組輸入的圖片一定要是相同大小，所以合成影片我們分成三個步驟：

在執行這三個步驟之前，我們要先清空存放下載圖片的 image 資料夾、存放調整過大小的 image_resized 資料夾，並確保兩個資料夾存在，以避免合成影片時發生錯誤。

接著我們就來寫 code 囉！首先先來看我們整個合成影片的步驟的 function。剩下的所有步驟都包含在這個 function 裡面了。但是我們每個步驟都需要執行完才能執行下一個步驟，結果才能完整呈現、不會出錯。所以我們要處理 javascript 的非同步問題。

記得上次課程用來處理非同步問題的 Promise 嗎? 這次我們介紹 async/await 的寫法搭配 Promise 使用，可以讓你的程式碼更好讀易懂！

async function getImage(key, res) {
    try {
        await clearFolder(); // 清空image資料夾和image_resized資料夾
        await urlImage(key); // 下載照片
        for (let i = 0; i < key.length; i++) {
            await imageResize("./image/" + i + ".jpg", "./image_resized/" + i + ".jpg", 960, 720); // 重設圖片大小
        }
        videoGen(res); // 合成影片
    } catch (e) {
        console.log(e);
    }
}

在function前面加"async"，function裡面就可以使用await。await可以接Promise物件。await要接到這個非同步的結果回傳後，才會執行下一行。

以下分別介紹每個步驟的function。

1.清空資料夾

function clearFolder() {  
    return new Promise((resolve, reject) => {
        var fileUrl = "./image";
        var fileUrl2 = "./image_resized";
        if(fs.existsSync(fileUrl)){
            var files = fs.readdirSync(fileUrl);
            files.forEach(function (file) {
                fs.unlinkSync(fileUrl + '/' + file);
                console.log("删除文件" + fileUrl + '/' + file + "成功");
            });
        }
        else{
            fs.mkdirSync(fileUrl);
        }     
        if(fs.existsSync(fileUrl2)){
            var files = fs.readdirSync(fileUrl2);
            files.forEach(function (file) {
                fs.unlinkSync(fileUrl2 + '/' + file);
                console.log("删除文件" + fileUrl2 + '/' + file + "成功");
            });
        }
        else{
            fs.mkdirSync(fileUrl2);
        } 
        resolve();
    })
}

在刪除資料夾內的檔案之前，要先確認資料夾存在 ( existsSync() )，否則程式會出錯。如果檢查到資料夾不存在，就要建一個資料夾 ( mkdirSync() )，等等才有地方存放圖片。
因為我們有兩個資料夾 (./image、./image_resized) 都要清空，所以大家會看到我們幾乎相同的code重複了兩次。

2.下載圖片

function urlImage(url) {   
    return new Promise((resolve, reject) => {
        url.forEach(function (url_data, index, array) {
            let stream = request(url_data).pipe(fs.createWriteStream("./image/" + index + ".jpg"))
            if (index === array.length - 1)
                stream.on('finish', () => resolve())
        })
    })
}

到這裏我們就成功把選擇的資料夾裡面的照片全部下載到 image 資料夾了。接下來我們要將圖片重設大小來配合 videoshow 套件的要求。

3.重設圖片大小

function imageResize(imgPath, imgPath_resized, width, height) {
    return new Promise((resolve, reject) => {
        sharp(imgPath)
        .resize(width, height)
        .ignoreAspectRatio()
        .toFile(imgPath_resized, (err, info) =>{
            resolve()
        });
    })
}

這裡我們用到 sharp 這個套件。如果你的 node_modules 資料夾裡面沒有 sharp這個資料夾，記得要先執行 npm install sharp 來安裝套件，並引入 sharp 模組。

var sharp = require('sharp');

4.使用 videoshow 合成影片

在使用 videoshow 之前，也要先安裝套件：

var videoshow = require('videoshow');

然後到 FFmpeg 官網 去下載 FFmpeg 的binary檔案 (ffmpeg.exe 和 ffprobe.exe)。
並在程式中加入下面這兩行，並注意檔案路徑：

videoshow.ffmpeg.setFfmpegPath(__dirname + '/ffmpeg/ffmpeg.exe')
videoshow.ffmpeg.setFfprobePath(__dirname + '/ffmpeg/ffprobe.exe')

我們在合成影片的時候需要設定影片和音樂的的一些參數：

var videoOptions = {
    fps: 25,
    loop: 5, // seconds
    transition: true,
    transitionDuration: 1, // seconds
    videoBitrate: 1024,
    videoCodec: 'libx264',
    size: '640x?',
    audioBitrate: '128k',
    audioChannels: 2,
    format: 'mp4',
    pixelFormat: 'yuv420p'
}

var audioParams = {
    fade: true,
    delay: 2 // seconds
}

然後就是重要的影片合成啦！

function videoGen(res) {
    var images = [];
    fs.readdir(__dirname + '/image_resized', function (err, files) {
        if (err) return;
        files.forEach(function (f) {
            images.push(__dirname + '/image_resized/' + f );
            //console.log('Files: ' + f);
            return images;
        });
        console.log(images);
        var audio = __dirname + '/music/About_That_Oldie.mp3'
        videoshow(images, videoOptions)
            .audio(audio, audioParams)
            .save('./static/output/video.mp4')
            .on('start', function (command) {
                console.log('ffmpeg process started:', command)
            })
            .on('error', function (err) {
                console.error('Error:', err)
            })
            .on('end', function (output) {
                console.log('Video created in:', output)
                var re;
                re = {
                    statu: 'ok',
                };
                res.setHeader('Content-Type', 'application/json');
                res.end(JSON.stringify(re));
            })
    });
}

我們先去 image_resized 把照片一張一張讀出來 ( readdir() )，然後塞進 image 陣列中。再指定音樂的路徑後，就可以用 videoshow 把影片做出來了。在影片合成完之後，就傳送成功的訊息給前端，在前端顯示合成完的影片。

在執行之前，不要忘記把前面取得相簿資料那步驟的傳送資料動作註解掉喔！

app.get('/api/albums', (req, res) => {
    getAlbums(req.session.key).then((data) => {
        //res.setHeader('Content-Type', 'application/json');
        //res.end(JSON.stringify(data));
    });
});

這樣就完成我們整個回憶錄的製作了！

總結

看過這篇文章後，你應該對 Facebook Graph API 的影片應用有更進一步的瞭解了，可以前往 範例 Github 看看完整程式，我們還有其他課程，若有興趣，可以加入課程社團 一起討論！

第十一屆微軟學生大使　技術組　王采楓、何天與　撰寫

Node JS 技術小聚課程

1. Node js 實作課程：文字雲
2. Node js 實作課程：回憶影片
3. Node js 實作課程：小遊戲製作

其他系列文

1. Power BI介紹+安裝註冊

2. 匯入資料與資料轉型

3. 資料模型介紹

4. 坐標軸+視覺化

5. 地圖+卡片+多列卡片

6. KPI +交叉分析篩選器

前言

• 將資料帶入 Power BI Desktop 並建立報表。
• 發行至 Power BI 服務，您可以在其中建立新的視覺效果，或建置儀表板
• 與其他人共用儀表板，尤其是行動工作者
• 使用 Power BI Mobile 應用程式來檢視共用的儀表板和報表，並與之互動

安裝

之後出現此畫面，仍然點選下載

下載後到路徑解壓縮就會出現

註冊

1. 接著回來網站點選右邊的”註冊”
2. 輸入自己學校的信箱
3. 到學校信箱收信然後就完成開通囉

教材下載

出處及參考文件：

1. Power BI 官網：https://powerbi.microsoft.com/zh-tw/