Index

• 概要

• 完成后的样子

• 下载源码，打包，导入

• 制作APP

• 查询企业

• 插件源码的简单介绍

• 注意事项

概要

在商业活动中，我们有时候需要查询对方企业的商业信息。
市面上也有好多提供这方面服务的服务商。
下面我们以【天眼查】和【企查查】为例，一起来制作一款可以实现此功能的插件。

完成后的样子

账号准备

注册

不管是【天眼查】还是【企查查】，我们都需要先注册，才能调用他们的API。打开下面的链接进行注册。
天眼查
企查查

凭证保存

完成注册后,会得到以下信息作为API调用的凭证，查看后请妥善保存。

天眼查

• Token

企查查

• 接口Key

• 接口密钥

下载源码，打包，导入

为了方便之后的自定义开发，建议您下载源代码后自行打包上传。

第一次打包：

1. Run npm install to install dependencies.

2. Run npm run prod:webpack to bundle the code.

3. Run kintone-plugin-packer src --out build/company_info_plugin.zip

4. Rename the ppk file to "company_info_plugin.ppk".

以后的打包：

1. Run npm run build

有关打包和导入的方法，可参见kintone 插件开发流程中的打包导入章节。

制作APP

【天眼查】和【企查查】的查询返回字段名略有不同，下面以【企查查】为例。

创建一个适配插件的APP

我们的思路是用一个企业名查询字段接收用户的输入；用各个情报字段作为反映查询结果。
表单的格式如下

表单完成后大致的样子

插件配置

• 添加上传好的插件（公司信息查询插件）

• 打开插件配置页面配置密钥和相应查询字段

• 点击Save保存

查询企业

APP创建配置完成了，现在来查询一下试试吧。

查询操作步骤

• 在记录添加页面添加一条记录

• 在公司名称（查询用）字段里填上希望查询的公司名

• 保存记录

• 按下【查询公司信息】按钮

• 查询返回的结果会显示在各个字段中
  
  

插件源码的简单介绍

现在我们来介绍一下主要功能是如何实现的吧。
插件的主要逻辑比较单纯，就是使用API访问凭证访问API，传入查询字符串，并把返回信息填入预设字段中。
以下是代码节选。
desktop.js

import {Button, Dialog, Spinner} from '@kintone/kintone-ui-component/esm/js';import './desktop.css';import {ErrorHandler} from '../common/ErrorHandler';import * as tyc from '../api/TianyanchaAPI';import * as qcc from '../api/QichachaAPI';import util from '../common/util';((PLUGIN_ID) => {
  'use strict';

  kintone.events.on('app.record.detail.show', (event) => {
    const config = kintone.plugin.app.getConfig(PLUGIN_ID);
    if (!('apiServer' in config)) {
      return;
    }

    const server = [tyc.SERVER, qcc.SERVER].find(v => v.ID === config.apiServer);
    if (!server) {
      return;
    }

    const record = event.record;

    const companyField = `${server.ID}_companyField` in config ? config[`${server.ID}_companyField`] : '';
    if (util.isEmptyString(companyField)) {
      return;
    }

    const companyName = record[companyField].value;
    if (util.isEmptyString(companyName)) {
      return;
    }

    const errorHandler = new ErrorHandler();
    const spinner = new Spinner();
    kintone.app.record.getHeaderMenuSpaceElement().appendChild(spinner.render());

    // create the search button
    const companyEl = kintone.app.record.getFieldElement(companyField);
    const button = new Button({text: '查询公司信息', type: 'submit'});
    companyEl.appendChild(button.render());
    companyEl.style.cssText = 'display: flex;';
    companyEl.getElementsByClassName('kuc-btn')[0].style.cssText = 'min-width: 130px;margin-left: 20px';
    button.on('click', () => {
      const p = document.createElement('p');
      p.innerHTML = `确定要查询 "${companyName}" 的信息吗？<br><br>`;
      p.innerHTML += `查询会调用${server.NAME}API，并产生一定的费用！`;
      p.innerHTML += `${server.ID}_apiCost` in config && !util.isEmptyString(config[`${server.ID}_apiCost`]) ?
        '<br>单次收费: ' + config[`${server.ID}_apiCost`] + '元' : '';
      confirmDialog.setContent(p);
      confirmDialog.show();
    });


    const setCompanyInfoToKintone = (result) => {
      const body = {
        app: event.appId,
        id: record.$id.value,
        record: {}
      };
      for (const key in result) {
        if (!result.hasOwnProperty(key)
          || !(`${server.ID}_${key}` in config)
          || !config[`${server.ID}_${key}`]
        ) {
          continue;
        }
        body.record[config[`${server.ID}_${key}`]] = {value: result[key]};
      }
      return kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', body);
    };

    const searchButton = new Button({text: '确定', type: 'submit'});
    const cancelButton = new Button({text: '取消', type: 'normal'});
    const confirmDialogFooter = document.createElement('div');
    confirmDialogFooter.appendChild(searchButton.render());
    confirmDialogFooter.appendChild(cancelButton.render());
    confirmDialogFooter.className = 'confirm-dialog-footer';
    const confirmDialog = new Dialog({
      header: '',
      footer: confirmDialogFooter,
      isVisible: false,
      showCloseButton: true
    });
    kintone.app.record.getHeaderMenuSpaceElement().appendChild(confirmDialog.render());
    cancelButton.on('click', () => {
      confirmDialog.hide();
    });
    searchButton.on('click', () => {
      confirmDialog.hide();
      spinner.show();

      const getCompanyInfo = () => {
        let apiServer;
        switch (server.ID) {
          case tyc.SERVER.ID:
            apiServer = new tyc.TianyanchaAPI(PLUGIN_ID);
            return apiServer.getBaseInfo({keyword: companyName});
          case qcc.SERVER.ID:
            apiServer = new qcc.QichachaAPI(PLUGIN_ID, config[`${qcc.SERVER.ID}_authKey`], config[`${qcc.SERVER.ID}_secretKey`]);
            return apiServer.getBasicDetailsByName({keyword: companyName});
          default:
            return kintone.Promise.resolve();
        }
      };

      getCompanyInfo().then(result => {
        return setCompanyInfoToKintone(result);
      }).then(() => {
        spinner.hide();
        window.location.reload();
      }).catch(e => {
        spinner.hide();
        errorHandler.throwError(e, server.NAME);
      });
    });
  });})(kintone.$PLUGIN_ID);

注意事项

• 此插件是用于演示如何开发插件的范例，才望子不予以保证可正常运行。

• 不对此范例提供技术支持。

• kintone的插件功能只可在标准版使用，简易版不可使用这点请大家注意一下。

• 此范例在调试过程中，有可能会产生相应费用，收费规则请用户自行查询相应的服务商，以避免不必要的花费。