NO.005-如何从网页唤起影刀客户端，并运行应用——By.杭州组

作者：南吕、奶茶

关键词：影刀客户端、html、JavaScript

一、业务背景

问题：某品牌客户想要在全公司范围内推广影刀使用；it部门为业务同学开发了一批高价值需求，计划通过统一调度执行的方式运行应用。
业务同学只需打开影刀客户端，切换为调度模式，再从控制台调度运行应用。
但在门店的实践过程中发现，许多员工是兼职或临时承接任务，难以同时掌握运行应用的步骤。

解法：借用影刀的自动化插件，在网页上通过点击按钮实现：
1.自动登录本地的影刀客户端，自动进入调度模式
2.运行调度任务等调度操作

二、解决思路

1. 安装插件“浏览器唤起影刀”【路径：工具—自动化插件—拓展—浏览器唤起影刀】
   
   
   
2. 勾选“启动后自动登录”，以及“登录后切换至调度模式”【路径：设置—常规—登录】
   
   
   
3. 构建一个前端按钮，点击按钮实现：唤起影刀客户端，自动登录，自动切换调度模式
   

       <button class="container1">
           <a href="shadowbot:None">启动影刀客户端，并进入调度模式</a>
       </button>
   （感谢颜劫提供的方法）

4. 构建一个前端按钮，点击按钮实现：调度运行应用

    <button id="submit-btn" class="container2" >调度指定账号，运行测试应用</button>

    以下JS代码基于影刀API调度的接口，实现了发起一个GET请求获取accessToken，然后将获取到的数发起POST请求调度运行应用的过程。这个代码作为一个简单的示例代码，用于演示前端中如何使用Fetch API发送请求，并利用Promise处理请求响应结果。大家可以尝试调用其他影刀调度接口。

• 影刀调度API接口说明：https://www.winrobot360.com/yddoc/management/3b9d810233baf0b1d10a09105f2de8db.html?

• fetch函数是浏览器提供的一种简单、强大的网络请求API。fetch函数接收至少一个参数，即要发起请求的URL。除此之外，还可以提供一个可选的init对象，其中包含一些附加参数，例如请求方法、请求头、请求体等。

    <script>

	// 找到按钮元素
      const submitBtn = document.getElementById("submit-btn");

	// 为按钮添加点击事件
      submitBtn.addEventListener("click", function() {

	  // 定义调用的接口网址
        const getAccessToken = "https://api.winrobot360.com/oapi/token/v2/token/create?accessKeyId=[替换你的accessKeyId]&accessKeySecret=[替换你的accessKeySecret]";
        const startJob = "https://api.winrobot360.com/oapi/dispatch/v2/job/start";    

	  // 获取accessToken
        fetch(getAccessToken, {
          method: "GET",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
        })
        .then(response => response.json())
        .then(data => {
          console.log(data);
          const accesstoken = data.data.accessToken;

         // 发起post请求，启动应用
          fetch(startJob, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "Authorization": `Bearer ${accesstoken}`,
            },
            body: JSON.stringify({
              "accountName" : "[机器人账号名称]",
          	  "robotUuid" : "[应用uuid]"
		          //这里可以添加应用传参
        	}),
          })
          .then(response => response.json())
          .then(data => {
            console.log(data);
            const jobUuid = data.data.jobUuid;
            // 这里可以添加查询应用运行结果、将响应内容显示到页面上等操作
          })
          .catch(error => {
            console.error(error);
            // 这里可以处理请求失败的情况
          })
        })
        .catch(error => {
          console.error(error);
          // 这里可以处理请求失败的情况
        });
      });
    </script>

三、效果展示

四、业务价值

1.客户反馈:

2.某客户根据自身业务实际，结合类似思路，开发出业务工具箱（基于影刀API接口，实现调度执行业务应用）