jira云端插件开发01-初步创建插件以及调用 Confluence API

Posted 2021-08-31 火腿肠烧烤大赛冠军

安装镜像

参考链接按步骤安装即可：
DOCKER安装
WSL安装教程

安装@forge/api

npm install @forge/api

创建一个confluence插件

forge create

cd hello-world-app

发布与安装插件

forge deploy

forge install

使用docker运行插件

forge tunnel

额外信息

modules:
  macro:
    - key: hello-hello-world
      function: main
      title: hello
      description: Inserts Hello world!
  function:
    - key: main
      handler: index.run
app:
  //appId
  id: ari:cloud:ecosystem::app/722f6c9b-05ad-44e5-927d-b750b49f52d1
  //appName
  name: hello
  //需要的权限列表
permissions:
  scopes:
    - read:confluence-content.summary

至此就可以在编辑页面中查看刚刚创建好的app了

使用Confluence API

安装api模块：

npm install @forge/api @forge/ui

引入api及route模块：

import api, { route } from "@forge/api";

api的使用：

const fetchCommentsForContent = async (contentId) => {
  const res = await api
    .asUser()
    .requestConfluence(route`/rest/api/content/${contentId}/child/comment`);

  const data = await res.json();
  return data.results;
};

获取当前博文id：

import ForgeUI, { render, Fragment, Text, useProductContext } from "@forge/ui";

const context = useProductContext();

获取当前文章评论数：

const [comments] = useState(async () => await fetchCommentsForContent(context.contentId));

console.log(`Number of comments on this page: ${comments.length}`);

更新插件：(由于调用了api)

forge install --upgrade

tips：
由于涉及到用户权限，所以需要配置用户权限，使用官方的forge lint --fix并不会生效
需要手动在manifest.yml文件中改动以实现调用REST API

最终index.jsx文件

import api, { route } from "@forge/api";
import ForgeUI, { render, Fragment, Text, Macro, useProductContext, useState } from '@forge/ui';

const fetchCommentsForContent = async (contentId) => {
  const res = await api
    .asUser()
    .requestConfluence(route`/rest/api/content/${contentId}/child/comment`);

  const data = await res.json();
  return data.results;
};

const App = () => {
  const context = useProductContext();
  const [comments] = useState(async () => await fetchCommentsForContent(context.contentId));

  console.log(`Number of comments on this page: ${comments.length}`);

  return (
    <Fragment>
      <Text>Hello world!</Text>
      <Text>
        Number of comments on this page: {comments.length}
      </Text>
    </Fragment>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);