RestAPI綜合運用1(WEB)

# FastWeb之RestAPI綜合運用1

適用平臺：WEB(桌面)

# 1. 說明

採用RestAPI通訊方式，與第三方工具的API進行整合對接，實現FastWeb上應用的擴充套件功能。在使用本示例前，請先閱讀Shinobi文件 (opens new window)以及Myrtille文件 (opens new window)安裝並配置，測試相關的API的可用性。如果訪問FastWeb使用的是http，則播放視訊以及網頁顯示的鏈接也應使用http；如果訪問FastWeb使用的是https，則播放視訊以及網頁顯示的鏈接也應使用https。這樣可以避免瀏覽器因跨域導致資源無法訪問。

通過本範例學習，可以掌握Shinobi與Myrtille API的運用方式，實現JSON的解析。

# 2. 設計明細

開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

①：TUgURLFrame元件，控制元件名稱為UgURLFrame。

②：TUgButton元件，控制元件名稱為btnLogin。

③：TUgRestApi元件，控制元件名稱為restLogin。

④：TUgRestApi元件，控制元件名稱為restStart。

⑤：TUgButton元件，控制元件名稱為btnStart。

⑥：TUgButton元件，控制元件名稱為btnMonitor。

⑦：TUgRestApi元件，控制元件名稱為restMonitor。

⑧：TUgButton元件，控制元件名稱為btnLive。

⑨：TUgButton元件，控制元件名稱為btnStop。

⑩：TUgRestApi元件，控制元件名稱為restStop。

(11)：TUgButton元件，控制元件名稱為btnMyrtilleLogin。

(12)：TUgRestApi元件，控制元件名稱為restMyrtilleLogin。

(13)：TUgRestApi元件，控制元件名稱為restMyrtilleLogout。

(14)：TUgButton元件，控制元件名稱為btnMyrtilleLogout。

(15)：TUgFlvPlayer元件，控制元件名稱為UgFlvPlayer01。

(16)：TUgMemo元件，控制元件名稱為mmLog。

UgWebRunFrame屬性設定
- Height：設定頁面高度=600。
- Width：設定頁面寬度=1280。
UgContainerPanel01屬性設定

UgContainerPanel01用於給界面右側顯示的控制元件提供佈局容器。
- Align：設定控制元件的對齊方式，設定為alRight。
- Width：設定控制元件的寬度，設定為400。
UgContainerPanel02屬性設定

UgContainerPanel02用於給界面中顯示的按鈕控制元件提供佈局容器。
- Align：設定控制元件的對齊方式，設定為alTop。
①UgURLFrame屬性設定
- Align：設定控制元件的對齊方式，設定為alClient。
②btnLogin屬性設定
- Caption：設定按鈕上顯示的文字，設定為1.登錄。
③restLogin屬性設定

restLogin設定的是Shinobi的登錄API。
- Body：請求體的內容。打開其中的文字編輯器，在其中輸入以下內容。請注意修改mail與pass后的內容為您設定的郵箱及登錄密碼。
```
{
    "machineID": "jsiqsju2wesqw2",
    "mail": "admin@example.com",
    "pass": "admin",
    "function": "dash"
}
```
1
2
3
4
5
6
- Content-Type：請求的內容形式，此處設定為application/json。
- Method：設定請求的方法，設定為rmPOST。
- Params：設定請求的參數，打開其中的文字編輯器，在其中輸入以下內容json=true。
- Url：設定Rest伺服器的地址，設定為%s。
④restStart屬性設定

restStart設定的是Shinobi中攝像頭的開啟監視API。
- Content-Type：請求的內容形式，此處設定為application/json。
- Method：設定請求的方法，設定為rmGET。
- Url：設定Rest伺服器的地址，設定為%s/%s/monitor/%s/%s/start。
⑤btnStart屬性設定
- Caption：設定按鈕上顯示的文字，設定為開始監控。
⑥btnMonitor屬性設定
- Caption：設定按鈕上顯示的文字，設定為2.監視器。
⑦restMonitor屬性設定

restMonitor設定的是Shinobi中檢視攝像頭列表的API。
- Content-Type：請求的內容形式，此處設定為application/json。
- Method：設定請求的方法，設定為rmGET。
- Url：設定Rest伺服器的地址，設定為%s/%s/monitor/%s。
⑧btnLive屬性設定
- Caption：設定按鈕上顯示的文字，設定為檢視監視器。
⑨btnStop屬性設定
- Caption：設定按鈕上顯示的文字，設定為停止監控。
⑩restStop屬性設定

restStop設定的是Shinobi中停止視訊監控的API。
- Content-Type：請求的內容形式，此處設定為application/json。
- Method：設定請求的方法，設定為rmGET。
- Url：設定Rest伺服器的地址，設定為%s/%s/monitor/%s/%s/stop。
(11)btnMyrtilleLogin屬性設定
- Caption：設定按鈕上顯示的文字，設定為Myrtille登錄。
(12)restMyrtilleLogin屬性設定

restMyrtilleLogin設定的是Myrtille登錄相關的API資訊。
- Body：請求體的內容。打開其中的文字編輯器，在其中輸入以下內容。請注意修改與的內容為遠程登錄的計算機的使用者名稱及登錄密碼。修改的地址為閘道器可連線至此遠端桌面伺服器的地址。修改部分為閘道器伺服器的地址。
```
{
    "User":{
        "Domain": "",
        "UserName": "{{username}}",
        "Password": "{{password}}"
    },
    "Host":{
        "HosType": 0,
        "SecurityProtocol": 0,
        "IPAddress": "{{RDPHostAddress}}"
    },
    "VM": null,
    "AllowRemoteClipboard": false,
    "AllowFileTransfer": false,
    "AllowPrintDownload": true,
    "AllowAudioPlayback": true,
    "MaxActiveGuests": 2,
    "StartProgram": null,
    "GatewayURL": "http://{{server}}/Mytrille/"
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- Content-Type：請求的內容形式，此處設定為application/json。
- Method：設定請求的方法，設定為rmPOST。
- Url：設定Rest伺服器的地址，設定為http://:8008/MyrtilleAdmin/ConnectionService/GetConnectionId。請在實際設定時將部分更換為Myrtille閘道器伺服器的地址。
(13)restMyrtilleLogout屬性設定

restMyrtilleLogout設定的是Myrtille登出相關的API資訊。
- Content-Type：請求的內容形式，此處設定為application/json。
- Method：設定請求的方法，設定為rmGET。
- Url：設定Rest伺服器的地址，設定為http:///Myrtille/api/Disconnection/Disconnect。
(14)btnMyrtilleLogout屬性設定
- Caption：設定按鈕上顯示的文字，設定為Myrtille登出。
(15)UgFlvPlayer01屬性設定
- Align：設定對齊方式，設定為alTop。
- Height：設定控制元件的高度，設定為240。
(16)mmLog屬性設定
- Align：設定對齊方式，設定為alTop。

# 3. 程式設計

點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式需要引用MessageInfo單元。

# 3.1. 程式初始設定

初始化時設定URL以及公共變數等相關資訊。

//JScript
var shinobiURL,shinobiAuthToken,shinobiGroupKey,shinobiMonitorID,myrtilleAuthToken;

...

{
  shinobiURL = "http://{{shinobi_server}}";
}

1
2
3
4
5
6
7
8

//PasScript
Var
  shinobiURL: String;
  shinobiAuthToken: String;
  shinobiGroupKey: String;
  shinobiMonitorID: String;
  myrtilleAuthToken: String;

...
Begin
  shinobiURL := 'http://{{shinobi_server}}';
End.

1
2
3
4
5
6
7
8
9
10
11
12

// Make sure to add code blocks to your code group

# 3.2. 事件設定

②btnLogin-OnClick事件

點選登錄按鈕時，向Shinobi伺服器發送登錄資訊以獲取token。

//JScript
function btnLoginOnClick(sender)
//登錄按鈕
{
  //UgURLFrame.URL = shinobiURL;
  restLogin.URL = Format(restLogin.URL,[shinobiURL]);
  restLogin.Send;
}

1
2
3
4
5
6
7
8

//PasScript
procedure btnLoginOnClick(sender: tobject);
//登錄按鈕
begin
  UgURLFrame.URL := shinobiURL;
  restLogin.URL := Format(restLogin.URL,[shinobiURL]);
  restLogin.Send;
end;

1
2
3
4
5
6
7
8

// Make sure to add code blocks to your code group

③restLogin-ResultData事件

返回的Shinobi登錄資訊中，提取token，group_key等資訊。

//JScript
function restLoginOnResultData(sender,aresult)
//登陸獲取token 
{
  var vJSON = new TJSONObject();
  var vValue = new TJSONValue();
  Try{
    vValue = vJSON.ParseJSONValue(aresult,False,False);
    vValue = TJSONObject(vValue).GetValue("$user");
    shinobiAuthToken = TJSONObject(vValue).GetValue("auth_token").Value;
    shinobiGroupKey = TJSONObject(vValue).GetValue("ke").Value;
    mmLog.Lines.Add("auth_token:" + shinobiAuthToken + " group_key:" + shinobiGroupKey);
  }
  Finally{
    vJSON.Free;
    vValue.Free;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//PasScript
procedure restLoginResultData(sender: tobject;aresult: string);
//登陸獲取token 
var
  vJSON: TJSONObject;
  vValue: TJSONValue;
begin
  vJSON := TJSONObject.Create;
  vValue := TJSONValue.Create;
  Try
    vValue := vJSON.ParseJSONValue(aresult,False,False);
    vValue := TJSONObject(vValue).GetValue('$user');
    shinobiAuthToken := TJSONObject(vValue).GetValue('auth_token').Value;
    shinobiGroupKey := TJSONObject(vValue).GetValue('ke').Value;
    mmLog.Lines.Add('auth_token:' + shinobiAuthToken + ' group_key:' + shinobiGroupKey);
  Finally
    vJSON.Free;
    vValue.Free;
  End;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Make sure to add code blocks to your code group

(11)btnMyrtilleLogin-OnClick事件

當Myrtille登錄按鈕按下時，向閘道器伺服器發送POST請求以獲取token。

//JScript
function btnMyrtilleLoginOnClick(sender)
//Myrtille登錄
{
  restMyrtilleLogin.Send;
}

1
2
3
4
5
6

//PasScript
procedure btnMyrtilleLoginOnClick(sender: tobject);
//Myrtille登錄
begin
  restMyrtilleLogin.Send;
end;

1
2
3
4
5
6

// Make sure to add code blocks to your code group

(12)restMyrtilleLogin-ResultData事件

Myrtille登陸時返回的token資訊進行處理。將獲取的token填入網址中，登錄至頁面。

//JScript
function restMyrtilleLoginOnResultData(sender,aresult)
//登錄
{
   myrtilleAuthToken = StringReplace(aresult,"'","");
   mmLog.Lines.Add("auth_token:" + myrtilleAuthToken);
   UgURLFrame.URL = "http://{{server}}/Myrtille/?__EVENTTARGET=&cid="+ myrtilleAuthToken + "&connect=Connect%21";
}

1
2
3
4
5
6
7
8

//PasScript
procedure restMyrtilleLoginResultData(sender: tobject;aresult: string);
//登錄
begin
   myrtilleAuthToken := StringReplace(aresult,'"','');
   mmLog.Lines.Add('auth_token:' + myrtilleAuthToken);
   UgURLFrame.URL := 'http://{{server}}/Myrtille/?__EVENTTARGET=&cid='+ myrtilleAuthToken + '&connect=Connect%21';
end;

1
2
3
4
5
6
7
8

// Make sure to add code blocks to your code group

(14)btnMyrtilleLogout-OnClick事件

登出按鈕點選操作。

//JScript
function btnMtrtilleLogoutOnClick(sender)
//Myrtille登出
{
  restMyrtillelogout.Params.Text = Format(restMyrtillelogout.Params.Text,[myrtilleAuthToken]);
  restMyrtillelogout.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnMtrtilleLogoutOnClick(sender: tobject);
//Myrtille登出
begin
  restMyrtillelogout.Params.Text := Format(restMyrtillelogout.Params.Text,[myrtilleAuthToken]);
  restMyrtillelogout.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑥btnMonitor-OnClick事件

點選按鈕，發送檢視監視器的請求。

//JScript
function btnMonitorOnClick(sender)
//獲取監視器
{
  restMonitor.URL = Format(restMonitor.Url,[shinobiAuthToken,shinobiGroupKey]);
  restMonitor.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnMonitorOnClick(sender: tobject);
//獲取監視器
begin
  restMonitor.URL := Format(restMonitor.Url,[shinobiAuthToken,shinobiGroupKey]);
  restMonitor.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑦restMonitor-ResultData事件

獲取監視器資訊，並進行回傳。

//JScript
function restMonitorOnResultData(sender,aresult)
//獲取結果
{
  var vValueList = new TJSONArray();
  Try{   
    vValueList = TJSONObject.ParseJSONValue(aresult,False,False) as TJSONArray;
    var vCount = vValueList.Size;
    if (vCount == 0) return;//exit;
    shinobiMonitorID = UGCM.GetJSONString(vValueList,"[0].mid"); //獲取第一個JSON序列
    mmLog.Lines.Add("monitorid:"+ shinobiMonitorID);
  }
  Finally{
    vValueList.Free;
  }  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//PasScript
procedure restMonitorOnResultData(sender: tobject;aresult: string);
//獲取結果
var
  vJSON: TJSONObject;
  vValueList: TJSONArray;
  vCount: Integer;
  i: Integer;
begin
  vJSON := TJSONObject.Create;
  vValueList := TJSONArray.Create;
  Try
    vJSON := TJSONObject(vJSON.ParseJSONValue(aresult,False,False));
    vValueList := TJSONArray(vJSON.ParseJSONValue(aresult,False,False));
    vCount := vValueList.Size;
    if vCount = 0 then exit;
    shinobiMonitorID := UGCM.GetJSONString(vJSON,'[0].mid'); //獲取第一個JSON序列
    mmLog.Lines.Add('monitorid:'+ shinobiMonitorID);
  Finally
    vJSON.Free;
    vValueList.Free;
  End;  
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Make sure to add code blocks to your code group

⑧btnLive-OnClick事件

點選按鈕以檢視直播。

//JScript
function btnLiveOnClick(sender)
//檢視視訊
{
  UgFlvPlayer01.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/" 
  +shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv")
}

1
2
3
4
5
6
7

//PasScript
procedure btnLiveOnClick(sender: tobject);
//檢視視訊
begin
  UgFlvPlayer01.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/' 
  +shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv')
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑤btnStart-OnClick事件

點選按鈕以開啟監控。

//JScript
function btnStartOnClick(sender)
//開啟監控
{
  restStart.Url = Format(restStart.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStart.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnStartOnClick(sender: tobject);
//開啟監控
begin
  restStart.Url := Format(restStart.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStart.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

④restStart-ResultData事件

當開啟監控時顯示彈窗資訊。

//JScript
function restStartOnResultData(sender,aresult)
//開啟結果 
{
  var vJSON = new TJSONObject();
  var vValue = new TJSONValue();
  Try{
    vValue = vJSON.ParseJSONValue(aresult,False,False);
    var vString = TJSONObject(vValue).GetValue("ok").Value;
    mmLog.Lines.Add(aresult);
    if (vString == "true"){ 
      ShowSweetAlert(atSuccess,"提示","開啟成功！");
    }
    else{
      ShowSweetAlert(atError,"提示","開啟失敗！");
    }
  }
  Finally{
    vJSON.Free;
    vValue.Free;
  }   
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//PasScript
procedure restStartResultData(sender: tobject;aresult: string);
//開啟結果
var
  vJSON: TJSONObject;
  vValue: TJSONValue;
  vString: String;
begin
  vJSON := TJSONObject.Create;
  vValue := TJSONValue.Create;
  Try
    vValue := vJSON.ParseJSONValue(aresult,False,False);
    vString := TJSONObject(vValue).GetValue('ok').Value;
    mmLog.Lines.Add(aresult);
    if vString = 'true' then 
      ShowSweetAlert(atSuccess,'提示','開啟成功！')
    else
      ShowSweetAlert(atError,'提示','開啟失敗！');
  Finally
    vJSON.Free;
    vValue.Free;
  End;   
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Make sure to add code blocks to your code group

⑨btnStop-OnClick事件

點選停止監控按鈕時，發送停止監控的請求。

//JScript
function btnStopOnClick(sender)
//停止開啟
{
  restStop.Url = Format(restStop.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStop.Send;
}

1
2
3
4
5
6
7

//PasScript
procedure btnStopOnClick(sender: tobject);
//停止開啟
begin
  restStop.Url := Format(restStop.Url,[shinobiAuthToken,shinobiGroupKey,shinobiMonitorID]);
  restStop.Send;
end;

1
2
3
4
5
6
7

// Make sure to add code blocks to your code group

⑩restStop-ResultData事件

停止資訊的發送。

//JScript
function restStopOnResultData(sender,aresult)
//關閉結果
{
  var vJSON = new TJSONObject();
  var vValue = TJSONValue();
  Try{
    vValue = vJSON.ParseJSONValue(aresult,False,False);
    var vString = TJSONObject(vValue).GetValue("ok").Value;
    mmLog.Lines.Add(aresult);
    if (vString == "true"){ 
      ShowSweetAlert(atSuccess,"提示","關閉成功！");
    }
    else{
      ShowSweetAlert(atError,"提示","關閉失敗！");
    }
  }
  Finally{
    vJSON.Free;
    vValue.Free;
  }  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//PasScript
procedure restStopResultData(sender: tobject;aresult: string);
//關閉結果
var
  vJSON: TJSONObject;
  vValue: TJSONValue;
  vString: String;
begin
  vJSON := TJSONObject.Create;
  vValue := TJSONValue.Create;
  Try
    vValue := vJSON.ParseJSONValue(aresult,False,False);
    vString := TJSONObject(vValue).GetValue('ok').Value;
    mmLog.Lines.Add(aresult);
    if vString = 'true' then 
      ShowSweetAlert(atSuccess,'提示','關閉成功！')
    else
      ShowSweetAlert(atError,'提示','關閉失敗！');
  Finally
    vJSON.Free;
    vValue.Free;
  End;   
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Make sure to add code blocks to your code group

# 4. 運行結果

使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

首先點選1.登錄按鈕獲取token，然後點選2.監視器獲取監視器資訊，點選檢視視訊檢視視訊直播資訊。

底部的Myrtille登錄點選時打開遠端桌面連線。

← RestAPI應用(WEB) RestAPI綜合運用2(WEB)→