He3 - 一款免费的开发者工具箱_json

关于 He3

He3 是一款为开发者打造的小工具合集桌面应用，中文名为氦三工具箱，这款软件包含了前后端编程开发所需的各类工具，打开就行用，能大大地提高我们的开发效率。

He3 目前支持 Mac 和 Windows ，当然 Linux 也同样支持。

He3 是一款开发者工具箱，有500+ 以上工具并且在持续增长。

Windows (x64)           Windows (x86)

或者下载通过 

scoop install "https://raw.githubusercontent.com/he3-app/he3-scoop/main/bucket/he3.json"

He3 - 一款免费的开发者工具箱_json_02

Step 1: 安装客户端

如果你已经安装了最新的 He3 客户端，请忽略。如果没有，请前往 https://he3app.com 下载。

Step 2: 登录客户端

打开 He3 客户端，在右上角选择登录账户。

He3 - 一款免费的开发者工具箱_json_03

Step 3: 创建工具

注意

工具的开发依赖 node 和 npm 环境，安装请点击 nodejs

有两种方法可以创建工具：

  • Fork 示例仓库
  • 通过 Portal 表单创建

Option1: Fork 示例仓库

Fork https://github.com/he3-app/he3-tool-demo 仓库，并将其克隆到本地。

修改 package.json 中的工具元信息

  • name 定义工具的名称，请定义为英文
  • id 定义工具的唯一标识符，全局唯一的，如果是重复的将无法发布，推荐定义一个语义化的id，比如： json-diff
  • isPublic: 定义工具的可见性，如果是私有的，只有开发者可以看到，如果是公开的，经过官方审核后任何用户都可用
  • description: 工具的描述信息，尽可能一句话简短的描述工具的功能，定义为英文
  • version: 工具的版本，每次publish需要升级版本，否则无法发布
  • category：工具的分类，目前支持： json、yaml、datetime、text、image、color、encode、cryptography、network、programming、web、math、miscellaneous、media、ai
  • keywords：工具的关键字，用于方便搜索工具，定义为英文

工具元信息定义好后，执行 npm install 下载依赖，执行 npm run i18，在根目录生成 mate.lodal.json，这是工具的元信息的国际化文件，可以根据需要修改。

Option2: 通过 Portal 表单创建

打开： https://portal.he3app.com/createTool，在表单中填写工具信息，然后点击 "Download Tool Template" 下载工具模板。

He3 - 一款免费的开发者工具箱_json_04

同时，我们准备了一部分开源工具供你参考：tools-example

Step 4: 开发工具

进入在步骤 3 下载的工具目录，安装依赖项并开发工具。

npm run dev

打开 He3 客户端并查看正在开发中的工具。

He3 - 一款免费的开发者工具箱_ico_05

Step 5: 发布工具

完成工具开发后，通过运行以下命令发布该工具

npm run publish

发布后，您将获得工具的 URL 链接，可以通过打开它使用工具或分享。

此外，您可以在 My tools 菜单栏以及 He3 Store 找到你发布的工具。


快速构建文本转换工具

本文将用简单的官方示例 unicode 解码来讲解如何如何快速编写构建一个文本转换类工具。你可以点击上面链接 fork 相关代码进行本地开发调试。

示例

本示例使用 @he3-kit/ui 中的 TextTransform 组件进行开发，为了方便我们对其进行二次封装，你可以直接使用我们封装好的函数 textTransformTool 进行开发。该函数在 @he3-kit/utils 中，运行 npm i @he3-kit/utils 添加到您的本地项目中。

import { textTransformTool } from '@he3-kit/utils';
import { decode, encode, likeUnicode } from './unicode';

const sampleData = '\\u6c26\\u4e09\\u79d1\\u6280';

// unicode 解码函数
export const decode = (str: string): string => {
  // unicode 编码范围为 \u000 - \ufffff
  const unicodeReg = /\\u([0-9a-fA-F]{3,5})/g;
  return str.replaceAll(unicodeReg, (match, dec) => {
    // 循环判断输出，如果不存在自动减位
    for (let i = dec.length; i > 2; i--) {
      const string = String.fromCodePoint(Number.parseInt(dec.slice(0, i), 16));
      if (string) {
        return string + dec.slice(i, dec.length);
      }
    }
    return match;
  });
};
// unicode 编码函数
export const encode = (str: string): string => {
  let result = '';
  for (const char of str) {
    const code = char.charCodeAt(0);
    if (code < 128) {
      result += char;
      continue;
    }
    result += `\\u${String(code.toString(16)).padStart(4, '0')}`;
  }
  return result;
};
// 推断当前剪切板数据是否为 unicode 或者和 unicode 类似
export function likeUnicode(text: string) {
  return text.split('\\u').length >= 5;
}

export default textTransformTool({
  inputHandler: decode, // 转换函数
  resultHandler: encode, // 逆转换函数
  sampleData, // 示例
  autoFillInputCondition: likeUnicode, // 自动回填函数，判断当前剪切板中的文本是否符合正则函数的判断，返回true则自动填入
});

展示

这样一个工具就大功告成了！！！

He3 - 一款免费的开发者工具箱_客户端_06

如果你不希望工具进行逆转换，也可以将 resultHandler 字段置空，这样你会得到一个纯输入输出工具

工具开发配置文件

package.json

阅读本文你可以了解到工具模板文件中的 package.json 相关字段，以便你更好地进行工具开发调试

scripts

npm run dev

在保证 He3 app 底座启动的前提下运行 dev 命令，可以构建你的工具并运行在底座上。当你更改 src 下的工具代码时，该命令会进行热重载并更新底座上的工具视图。

npm run publish

在工具开发完成之后，你可以运行 publish 命令将你的工具推送至我们的服务器上供其他用户安装使用，推送成功的前提是你的底座成功登录账号。

npm run version

在工具发布之后，如果涉及到版本更新或是补丁修复，你可以使用该命令来更新你的版本号，以便工具能够成功推送更新

-p：补丁 -i：小版本更新 -a：大版本更新

he3

he3 字段为 he3 工具的一个信息的具体配置

{
  "id": "sql-to-json-query", // 工具id
  "name": "SQL to JSON Query", // 工具名称
  "icon": "thunderbolt-outlined", // 工具Icon
  "version": "1.0.0", // 版本号
  "isPublic": true, // 是否公开
  "repository": "", // 仓库地址
  "category": [
    "programming"
  ], // 工具分类
  "description": "SQL to ES Query", // 工具描述
  "keywords": [
    "query",
    "sql",
    "json"
  ], // 关键词，设置关键词能够提高搜索准确度
  "relatedToolId": [] // 关联工具，被关联到的工具会出现在工具右侧关联工具列表中
}