如何在 NocoBase 中开发插件发送 WhatsApp 消息？

yarn pm create @my-project/plugin-whatsapp

yarn pm enable @my-project/plugin-hello

##File: ProvideConfigimport { defineCollection } from '@nocobase/database';
export default defineCollection({  name: 'ProvideConfig',  fields: [    { type: 'string', name: 'api_key' },    { type: 'string', name: 'url' },    { type: 'string', name: 'cell_phone_from' },  ],},);
##File: MessageQueueimport { defineCollection } from '@nocobase/database';
export default defineCollection({  name: 'MessageQueue',  fields: [    { type: 'string', name: 'content' },    { type: 'string', name: 'status' }  ],},);

import { Plugin } from '@nocobase/server';
export class PluginHelloServer extends Plugin {
  async afterAdd() {}
  async beforeLoad() {}
  async load() {    this.app.acl.allow('whatsapp', '*', 'public');
    this.app.resourceManager.define({      name: 'whatsapp',      actions: {        async sendMessage(ctx, next) {
          //Save message in the queu status: pending
          //Recovery API Whataap paramters in database;
          //Try send message whats using API
          // If OK, update status: done Else: update status: error        }      }    });
  }
...

##File: index.tsximport { Plugin } from '@nocobase/client';import { Alert, Button, Form, Input, Table, Tabs, TabsProps } from 'antd';import React, { useState } from 'react';
/** * */export class PluginWhatsappClient extends Plugin {
  async afterAdd() {    // await this.app.pm.add()  }
  async beforeLoad() {  }
  async load() {
    // this.app.addComponents({})    // this.app.addScopes({})    // this.app.addProvider()    // this.app.addProviders()    // this.app.router.add()
    const PluginWhatsAppTabs = () => {
      const [apiKey, setApiKey] = useState();      const [url, setUrl] = useState();      const [cellPhoneFrom, setCellPhoneFrom] = useState();
      const onChange = async (key: string) => {
        //Retrive the data from api and set in inputs.        const { data } = await this.app.apiClient.request({ url: 'ProvideConfig:get', params: { filterByTk: 1 } });        setApiKey(data.data.api_key);        setUrl(data.data.url);        setCellPhoneFrom(data.data.celular_from);      };
      const onClickSubmit = () => {
        //Action for update input in DB using API.        console.log('Ok');      }
      //Mock data with messages      const dataSource = [        {          key: '1',          content: 'Olá bem vindo',          date: '24/12/2024',          status: 'Pendente',        },        {          key: '2',          content: 'Olá bem vindo',          date: '23/12/2024',          status: 'Enviado',        }      ];
      const columns = [        {          title: 'Content',          dataIndex: 'content',          key: 'content',        },        {          title: 'Date',          dataIndex: 'date',          key: 'date',        },        {          title: 'Status',          dataIndex: 'status',          key: 'status',        },      ];
      const instructions = (<><p>Instructions:</p>        <ul>          <li>The settings below are from Meta's messaging provider, and must be filled in with correct information to send messages automatically. For more details, visit: https://developers.facebook.com/docs/whatsapp/cloud-api</li>          <li>After configuring the settings below, to send messages, simply use the /api/sendMessage:post endpoint</li>        </ul>      </>);
      const itemsTabs: TabsProps['items'] = [        {          key: '1',          label: 'Messages',          children: (<Table dataSource={dataSource} columns={columns} />),        },        {          key: '2',          label: 'Configurations',          children: (<>            <p><Alert message={instructions} type="error" /></p>            <Form layout="vertical">              <Form.Item label="* API Key Meta:" style={{ fontWeight: 'bold' }}>                <Input placeholder="xxxxxxxxxx" value={apiKey} />              </Form.Item>              <Form.Item label="* URL API Meta:" style={{ fontWeight: 'bold' }}>                <Input placeholder="domain.com..." value={url} />              </Form.Item>              <Form.Item label="* Cell phone from:" style={{ fontWeight: 'bold' }}>                <Input placeholder="5554899991234" value={cellPhoneFrom} />              </Form.Item>              <Form.Item>                <Button type="primary" onClick={onClickSubmit}>Submit</Button>              </Form.Item>            </Form></>          ),        }      ];
      return (<Tabs defaultActiveKey="1" items={itemsTabs} onChange={onChange}/>)
    }
    this.app.pluginSettingsManager.add('whatsapp', {      title: 'WhatsApp',      icon: 'WhatsAppOutlined',      Component: PluginWhatsAppTabs,      sort: 100,    });  }}
export default PluginWhatsappClient;

yarn build @my-project/plugin-helloyarn nocobase tar @my-project/plugin-hello