Tip

このドキュメントはAIによって翻訳されました。不正確な情報については、英語版をご参照ください

通知チャネルタイプの拡張

NocoBaseでは、SMS通知やアプリのプッシュ通知など、必要に応じて通知チャネルタイプを拡張できます。

クライアント

チャネルタイプの登録

クライアントのチャネル設定画面とメッセージ設定画面は、通知管理プラグインのクライアントが提供するregisterChannelTypeインターフェースを使って登録します。

import PluginNotificationManagerClient from '@nocobase/plugin-notification-manager/client';

class PluginNotificationExampleClient extends Plugin {
  async afterAdd() {}

  async beforeLoad() {}

  async load() {
    const notification = this.pm.get(PluginNotificationManagerClient);
    notification.registerChannelType({
      title: 'Example SMS', // チャネルタイプ名
      type: 'example-sms', // チャネルタイプ識別子
      components: {
        ChannelConfigForm, // チャネル設定フォーム
        MessageConfigForm, // メッセージ設定フォーム
      },
    });
  }
}

export default PluginNotificationExampleClient;

サーバー

抽象クラスの継承

サーバー開発の核となるのは、抽象クラスBaseNotificationChannelを継承し、sendメソッドを実装することです。sendメソッドの内部には、拡張プラグインが通知を送信するためのビジネスロジックを記述します。

import { BaseNotificationChannel } from '@nocobase/plugin-notification-manager';

export class ExampleSever extends BaseNotificationChannel {
  async send(args): Promise<any> {
    console.log('ExampleSever send', args);
    return { status: 'success', message: args.message };
  }
}

サーバーの登録

次に、通知サーバーのコアが提供するregisterChannelTypeメソッドを呼び出し、開発したサーバー実装クラスをコアに登録します。

import PluginNotificationManagerServer from '@nocobase/plugin-notification-manager';
import { Plugin } from '@nocobase/server';
import { ExampleSever } from './example-server';
export class PluginNotificationExampleServer extends Plugin {
  async load() {
    const notificationServer = this.pm.get(PluginNotificationManagerServer) as PluginNotificationManagerServer;
    notificationServer.registerChannelType({ type: 'example-sms', Channel: ExampleSever });
  }
}

export default PluginNotificationExampleServer;

完全な例

ここでは、通知拡張プラグインの例を挙げて、拡張プラグインの開発方法を詳しく説明します。あるプラットフォームのSMSゲートウェイを利用して、NocoBaseにSMS通知機能を追加することを想定してみましょう。

プラグインの作成

プラグイン作成コマンド yarn pm add @nocobase/plugin-notification-example を実行します。

クライアント開発

クライアント側では、ChannelConfigForm（チャネル設定フォーム）とMessageConfigForm（メッセージ設定フォーム）の2つのフォームコンポーネントを開発する必要があります。

ChannelConfigForm

あるプラットフォームでSMSを送信するにはAPIキーとシークレットが必要なので、チャネルフォームの内容には主にこの2つの項目が含まれます。src/clientディレクトリにChannelConfigForm.tsxという名前のファイルを新規作成し、以下の内容を記述します。

import React from 'react';
import { SchemaComponent } from '@nocobase/client';
import useLocalTranslation from './useLocalTranslation';

const ChannelConfigForm = () => {
  const t = useLocalTranslation();
  return (
    <SchemaComponent
      scope={{ t }}
      schema={{
        type: 'object',
        properties: {
          apiKey: {
            'x-decorator': 'FormItem',
            type: 'string',
            title: '{{t("Transport")}}',
            'x-component': 'Input',
          },
          secret: {
            'x-decorator': 'FormItem',
            type: 'string',
            title: '{{t("Transport")}}',
            'x-component': 'Input',
          },
        },
      }}
    />
  );
};

export default ChannelConfigForm;

MessageConfigForm

メッセージ設定フォームには、主に受信者（receivers）とメッセージ内容（content）の設定が含まれます。src/clientディレクトリにMessageConfigForm.tsxという名前のファイルを新規作成します。このコンポーネントはvariableOptionsを引数として受け取ります。現在、コンテンツフォームはワークフローノードで設定され、通常はワークフローノードの変数を消費する必要があります。具体的なファイル内容は以下の通りです。

import React from 'react';
import { SchemaComponent } from '@nocobase/client';
import useLocalTranslation from './useLocalTranslation';

const MessageConfigForm = ({ variableOptions }) => {
  const { t } = useLocalTranslation();
  return (
    <SchemaComponent
      scope={{ t }}
      schema={{
        type: 'object',
        properties: {
          to: {
            type: 'array',
            required: true,
            title: `{{t("Receivers")}}`,
            'x-decorator': 'FormItem',
            'x-component': 'ArrayItems',
            items: {
              type: 'void',
              'x-component': 'Space',
              properties: {
                sort: {
                  type: 'void',
                  'x-decorator': 'FormItem',
                  'x-component': 'ArrayItems.SortHandle',
                },
                input: {
                  type: 'string',
                  'x-decorator': 'FormItem',
                  'x-component': 'Variable.Input',
                  'x-component-props': {
                    scope: variableOptions,
                    useTypedConstant: ['string'],
                    placeholder: `{{t("Phone number")}}`,
                  },
                },
                remove: {
                  type: 'void',
                  'x-decorator': 'FormItem',
                  'x-component': 'ArrayItems.Remove',
                },
              },
            },
            properties: {
              add: {
                type: 'void',
                title: `{{t("Add phone number")}}`,
                'x-component': 'ArrayItems.Addition',
              },
            },
          },
          content: {
            type: 'string',
            required: true,
            title: `{{t("Content")}}`,
            'x-decorator': 'FormItem',
            'x-component': 'Variable.RawTextArea',
            'x-component-props': {
              scope: variableOptions,
              placeholder: 'Hi,',
              autoSize: {
                minRows: 10,
              },
            },
          },
        },
      }}
    />
  );
};

export default MessageConfigForm

クライアントコンポーネントの登録

フォーム設定コンポーネントの開発が完了したら、通知管理コアに登録する必要があります。プラットフォーム名をExampleと仮定すると、編集後のsrc/client/index.tsxファイルの内容は以下のようになります。

import { Plugin } from '@nocobase/client';
import PluginNotificationManagerClient from '@nocobase/plugin-notification-manager/client';
import { tval } from '@nocobase/utils/client';
import ChannelConfigForm from './ChannelConfigForm';
import MessageConfigForm from './MessageConfigForm';

class PluginNotificationExampleClient extends Plugin {
  async afterAdd() {}

  async beforeLoad() {}

  async load() {
    const notification = this.pm.get(PluginNotificationManagerClient);
    notification.registerChannelType({
      title: tval('Example SMS', { ns: '@nocobase/plugin-notification-example' }),
      type: 'example-sms',
      components: {
        ChannelConfigForm,
        MessageConfigForm,
      },
    });
  }
}

export default PluginNotificationExampleClient;

これで、クライアント側の開発は完了です。

サーバー開発

サーバー開発の核となるのは、抽象クラスBaseNotificationChannelを継承し、sendメソッドを実装することです。sendメソッドの内部には、拡張プラグインが通知を送信するためのビジネスロジックを記述します。ここでは例として、受け取った引数をシンプルにコンソールに出力します。src/serverディレクトリにexample-server.tsという名前のファイルを新規作成し、以下の内容を記述します。

import { BaseNotificationChannel } from '@nocobase/plugin-notification-manager';

export class ExampleSever extends BaseNotificationChannel {
  async send(args): Promise<any> {
    console.log('ExampleSever send', args);
    return { status: 'success', message: args.message };
  }
}

次に、通知サーバーのコアが提供するregisterChannelTypeメソッドを呼び出して、サーバー拡張プラグインを登録します。編集後のsrc/server/plugin.tsファイルの内容は以下のようになります。

import PluginNotificationManagerServer from '@nocobase/plugin-notification-manager';
import { Plugin } from '@nocobase/server';
import { ExampleSever } from './example-server';
export class PluginNotificationExampleServer extends Plugin {
  async load() {
    const notificationServer = this.pm.get(PluginNotificationManagerServer) as PluginNotificationManagerServer;
    notificationServer.registerChannelType({ type: 'example-sms', Channel: ExampleSever });
  }
}

export default PluginNotificationExampleServer;

プラグインの登録と起動

登録コマンド yarn pm add @nocobase/plugin-notification-example を実行します。
有効化コマンド yarn pm enable @nocobase/plugin-notification-example を実行します。

チャネル設定

ここで通知管理のチャネルページにアクセスすると、Example SMSが有効になっていることが確認できます。 20241009164207-2024-10-09-16-42-08

新しいサンプルチャネルを追加します。 20250418074409-2025-04-18-07-44-09

新しいワークフローを作成し、通知ノードを設定します。 20250418074832-2025-04-18-07-48-32

ワークフローの実行をトリガーすると、コンソールに以下の情報が出力されるのが確認できます。 20250418081746-2025-04-18-08-17-48

#通知チャネルタイプの拡張

#クライアント

#チャネルタイプの登録

#サーバー

#抽象クラスの継承

#サーバーの登録

#完全な例

#プラグインの作成

#クライアント開発

#ChannelConfigForm

#MessageConfigForm

#クライアントコンポーネントの登録

#サーバー開発

#プラグインの登録と起動

#チャネル設定