RestAPI綜合運用2(WEB)
# FastWeb之RestAPI綜合運用2
- 適用平臺：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設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
本示例與FastWebRestAPI綜合運用1相同，故在此僅對新增以及有修改的部分控制元件進行說明。
①：TUniTabSheet元件，控制元件名稱為UniTabSheet01、UniTabSheet02。
②：TUgPageControl元件，控制元件名稱為UgPageControl01。
③：TUgFlvPlayer元件，控制元件名稱為UgFlvPlayer02。
④：TUgFlvPlayer元件，控制元件名稱為UgFlvPlayer03。
⑤：TUgComboBox元件，控制元件名稱為ShinobiMonitorList。
⑥：TUgFlvPlayer元件，控制元件名稱為UgFlvPlayer04。
⑦：TUgFlvPlayer元件，控制元件名稱為UgFlvPlayer05。
UgWebRunFrame屬性設定
Height：設定頁面高度=600。Width：設定頁面寬度=1280。AlignmentControl：設定對齊的控制元件模式，設定為uniAlignmentClient。
②UgPageControl01屬性設定
需新增兩個頁面，分別設定其
Caption屬性為遠端桌面、監控。Align：設定對齊方式alClient。
UniTabSheet02屬性設定
Caption：設定字幕顯示內容：監控。Layout：設計佈局，設定為vbox。
UgContainerPanel03屬性設定
此控制元件位於
監控面板下。Layout：設計佈局，設定為hbox。LayoutConfig.Flex：設計佈局的佔比，設定為1。LayoutConfig.Width：設計佈局佔用的寬度，設定為100%。
UgContainerPanel04屬性設定
此控制元件位於
監控面板下。Layout：設計佈局，設定為hbox。LayoutConfig.Flex：設計佈局的佔比，設定為1。LayoutConfig.Width：設計佈局佔用的寬度，設定為100%。
③UgFlvPlayer02屬性設定
此控制元件位於
UgContainerPanel03面板下。LayoutConfig.Flex：設計佈局的佔比，設定為1。LayoutConfig.Height：設計佈局佔用的寬度，設定為100%。
④UgFlvPlayer03屬性設定
此控制元件位於
UgContainerPanel03面板下。LayoutConfig.Flex：設計佈局的佔比，設定為1。LayoutConfig.Height：設計佈局佔用的寬度，設定為100%。
⑥UgFlvPlayer04屬性設定
此控制元件位於
UgContainerPanel04面板下。LayoutConfig.Flex：設計佈局的佔比，設定為1。LayoutConfig.Height：設計佈局佔用的寬度，設定為100%。
⑦UgFlvPlayer05屬性設定
此控制元件位於
UgContainerPanel04面板下。LayoutConfig.Flex：設計佈局的佔比，設定為1。LayoutConfig.Height：設計佈局佔用的寬度，設定為100%。
restlogin設定
雙擊控制元件，打開API選擇器，選擇Shinobi登錄的API。
- restMonitor設定
雙擊控制元件，打開API選擇器，選擇獲取監視器的API。
- restStart設定
雙擊控制元件，打開API選擇器，選擇開啟監控的API。
- restStop設定
雙擊控制元件，打開API選擇器，選擇停止監控的API。
- restMyrtilleLogin設定
雙擊控制元件，打開API選擇器，選擇Myrtille登錄的API。
- restMyrtilleLogout設定
雙擊控制元件，打開API選擇器，選擇Myrtille登出的API。
# 3. 程式設計
點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式需要引用MessageInfo單元。
# 3.1. 程式初始設定
設定全域性變數。
//JScript
var shinobiURL,shinobiAuthToken,shinobiGroupKey,shinobiMonitorID,myrtilleAuthToken;
1
2
2
//PasScript
Var
shinobiURL: String;
shinobiAuthToken: String;
shinobiGroupKey: String;
shinobiMonitorID: String;
myrtilleAuthToken: String;
...
Begin
End.
1
2
3
4
5
6
7
8
9
10
11
12
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事件
點選按鈕以登錄。
//JScript
function btnLoginOnClick(sender)
//登錄按鈕
{
restLogin.Send;
//UGCM.NetHttpPost(,,,,)
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure btnLoginOnClick(sender: tobject);
//登錄按鈕
Var
vString: String;
begin
restLogin.Send;
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
- restLogin-ResultData事件
獲取登錄資訊並解析變數。
//JScript
function restLoginOnResultData(sender,aresult)
//登陸獲取token
{
var vJSON = new TJSONObject();
var vValue = new TJSONValue();
Try{
vJSON = TJSONObject(vJSON.ParseJSONValue(aresult,False,False));
shinobiAuthToken = UGCM.GetJSONString(vJSON,"$user.auth_token");
shinobiGroupKey = UGCM.GetJSONString(vJSON,"$user.ke");
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PasScript
procedure restLoginResultData(sender: tobject;aresult: string);
//登陸獲取token
var
vJSON: TJSONObject;
vValue: TJSONValue;
begin
vJSON := TJSONObject.Create;
vValue := TJSONValue.Create;
Try
vJSON := TJSONObject(vJSON.ParseJSONValue(aresult,False,False));
shinobiAuthToken := UGCM.GetJSONString(vJSON,'$user.auth_token');
shinobiGroupKey := UGCM.GetJSONString(vJSON,'$user.ke');
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Make sure to add code blocks to your code group
- btnMyrtilleLogin-OnClick事件
Myrtille登錄。
//JScript
function btnMyrtilleLoginOnClick(sender)
//Myrtille登錄
{
restMyrtilleLogin.Send;
UgPageControl01.ActivePageIndex = 0;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure btnMyrtilleLoginOnClick(sender: tobject);
//Myrtille登錄
begin
restMyrtilleLogin.Send;
UgPageControl01.ActivePageIndex := 0;
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- restMyrtilleLogin-ResultData事件
登錄發送相關訊息。
//JScript
function restMyrtilleLoginOnResultData(sender,aresult)
//登錄
{
myrtilleAuthToken = StringReplace(aresult,""","");
mmLog.Lines.Add("auth_token:" + myrtilleAuthToken);
UgURLFrame.URL = "http://{MyrtilleServer}/Myrtille/?__EVENTTARGET=&cid="+ myrtilleAuthToken + "&connect=Connect%21";
}
1
2
3
4
5
6
7
8
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://{MyrtilleServer}/Myrtille/?__EVENTTARGET=&cid='+ myrtilleAuthToken + '&connect=Connect%21';
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
- btnMyrtilleLogout-OnClick事件
Myrtille登出按鈕點選，發送登出的API請求。
//JScript
function btnMtrtilleLogoutOnClick(sender)
//Myrtille登出
{
restMyrtillelogout.Params.Text = Format(restMyrtillelogout.Params.Text,[myrtilleAuthToken]);
restMyrtillelogout.Send;
}
1
2
3
4
5
6
7
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
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
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
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- restMonitor-ResultData事件
獲取到的資訊進行組合放入覈取方塊中。
//JScript
//獲取結果
{
var vValueList = new TJSONArray();
Try{
vValueList = TJSONObject.ParseJSONValue(aresult,False,False) as TJSONArray;
var vCount = vValueList.Size;
if (vCount == 0) return;
for (i = 0; i <= (vCount - 1); i++)
{
shinobiMonitorID = UGCM.GetJSONString(vValueList,"["+ IntToStr(i) + "].mid"); //獲取JSON序列
shinobiMonitorList.Items.Add(shinobiMonitorID);
mmLog.Lines.Add("monitorid:"+ shinobiMonitorID);
}
shinobiMonitorList.ItemIndex = 0;
}
Finally{
//vJSON.Free;
vValueList.Free;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//PasScript
procedure restMonitorResultData(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;
for i := 0 to (vCount - 1) Do
begin
shinobiMonitorID := UGCM.GetJSONString(vJSON,'['+ IntToStr(i) + '].mid'); //獲取JSON序列
shinobiMonitorList.Items.Add(shinobiMonitorID);
mmLog.Lines.Add('monitorid:'+ shinobiMonitorID);
End;
shinobiMonitorList.ItemIndex := 0;
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
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Make sure to add code blocks to your code group
- btnLive-OnClick事件
選擇視訊進行檢視。
//JScript
function btnLiveOnClick(sender)
//檢視視訊
{
UgPageControl01.ActivePageIndex = 1;
shinobiURL = restLogin.Server;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer01.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer02.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer03.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer04.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
shinobiMonitorList.ItemIndex = 0;
shinobiMonitorID = shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer05.SetSource(shinobiURL+ "/"+ shinobiAuthToken + "/flv/"
+shinobiGroupKey + "/"+ shinobiMonitorID + "/s.flv","flv");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//PasScript
procedure btnLiveOnClick(sender: tobject);
//檢視視訊
Var
shinobiURL:String;
begin
UgPageControl01.ActivePageIndex := 1;
shinobiURL := restLogin.Server;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer01.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer02.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer03.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer04.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
shinobiMonitorList.ItemIndex := 0;
shinobiMonitorID := shinobiMonitorList.Items.Strings[shinobiMonitorList.ItemIndex];
UgFlvPlayer05.SetSource(shinobiURL+ '/'+ shinobiAuthToken + '/flv/'
+shinobiGroupKey + '/'+ shinobiMonitorID + '/s.flv','flv');
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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
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
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,UGMM.LT("提示"),UGMM.LT("開啟成功！"));
}
else{
ShowSweetAlert(atError,UGMM.LT("提示"),UGMM.LT("開啟失敗！"));
}
}
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
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
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
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
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 = 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,UGMM.LT("提示"),UGMM.LT("關閉成功！"));
}
else{
ShowSweetAlert(atError,UGMM.LT("提示"),UGMM.LT("關閉失敗！"));
}
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
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
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登錄點選時打開遠端桌面連線。