Como criar um plugin com chamadas de API de backend para popular o Composer durante a elaboração

Estou tentando criar um plugin que faz o seguinte:

  1. Ao lado dos campos do compositor, há um novo botão “pesquisar”.
  2. Ao clicar no botão, uma sobreposição aparece com um formulário de pesquisa.
  3. O formulário de pesquisa permite que o usuário insira alguns termos de pesquisa (digamos, o nome de uma cidade) e uma pesquisa em um mecanismo de pesquisa de imagens proprietário (executando em minha própria URL que requer uma chave de API) é acionada para pesquisar imagens dessa cidade.
  4. As 5 melhores imagens são mostradas ao usuário. O usuário seleciona uma imagem, a sobreposição desaparece, a imagem mais a string de pesquisa são adicionadas ao compositor como um rascunho. O usuário pode agora continuar escrevendo o que quer que fosse sua postagem.

Meu caso de uso real é um pouco mais complicado, mas é basicamente isso que quero alcançar. O objetivo é simplesmente ajudar o usuário a criar rascunhos de postagens com imagens de forma muito mais conveniente do que ir ao mecanismo de pesquisa e copiar manualmente uma imagem para o compositor para criar um rascunho.

Já consegui criar um plugin com um novo botão usando o campo do compositor como conector. O botão pode ser clicado e aciona uma ação. Mas agora estou travado.

Algumas perguntas:

  1. Existem plugins que facilitariam minha vida? Pensei talvez no plugin Pavilion wizard, mas vi que fazer chamadas para uma API só vem com a versão paga, e no momento é muito cedo para eu decidir se vale a pena gastar dinheiro com isso.
  2. Qual é a classe CSS / ID de div correta que eu poderia direcionar para ativar uma sobreposição?
  3. Qual seria um bom exemplo para descobrir como fazer uma chamada de API pelo backend? Não quero fornecer a chave de API do mecanismo de pesquisa ao cliente, então isso deve passar pelo backend.
  4. Não tenho certeza do que é a API do plugin e se eu precisaria dela. (Estou lutando um pouco com a documentação que está espalhada.)

Todas as outras dicas e sugestões são bem-vindas.

1 curtida

Enquanto isso, encontrei alguns recursos que achei informativos. Eu realmente gostaria que estes pudessem ser colocados de forma mais proeminente no tutorial “Como escrever um plugin”. Para iniciantes, não é óbvio que eles sequer existam.

  1. A própria API do Discourse (não útil para escrever plugins, mas ainda relevante para iniciantes): https://docs.discourse.org/
  2. API de Plugin do Cliente (não útil para escrever o backend de um plugin, mas definitivamente facilita as coisas para o frontend):
    A versioned API for client side plugins
    discourse/app/assets/javascripts/discourse/app/lib/plugin-api.gjs at main · discourse/discourse · GitHub

Também entendi que a API de Plugin de Backend é essencialmente Rails ou Ruby - mas não está claro como exatamente o frontend e o backend interagem um com o outro, ou onde está o “gancho” inicial para o backend. Claro, há um plugin.rb para ser colocado, mas fico me perguntando se há alguma documentação sobre qual é o ponto de entrada para este arquivo. Talvez isso seja totalmente óbvio para programadores Ruby on Rails, mas eu não sou um deles, então é uma entrada íngreme aqui.

Não parece que você precise de nenhuma alteração no backend. O comportamento que você descreve é muito semelhante a como funciona nosso modal “Inserir Hiperlink” – você pode pesquisar por tópicos, selecionar um deles para adicionar como link, e um link será adicionado ao composer quando você confirmar.

Você pode adicionar o botão a um plugin outlet, ou à barra de ferramentas via um api.onToolbarCreate adicionado a um inicializador, e abrir um modal de forma semelhante a como estamos fazendo para o modal “Inserir Hiperlink”. Ele é capaz de addText ao composer alavancando o objeto toolbarEvent da ação da barra de ferramentas (se você precisar de um outlet, também pode interagir com o composer via gatilhos appEvents).

4 curtidas

Obrigado, isso é muito útil. Sim, um modal realmente parece ser o que estou procurando: ele interrompe o fluxo do usuário e, somente quando o usuário completa o modal, as coisas voltam ao estado anterior. Vou dar uma olhada em como funciona o Modal Inserir Hiperlink.

Pergunta: Onde posso encontrar a documentação para DModal, DButton e outros objetos específicos do Discourse?

Aqui:

Também vale notar:

Você pode olhar em Discourse/plugins/theme components para exemplos.

4 curtidas

Obrigado, senhor!

3 curtidas

Aqui está outra peça que parece bastante importante, pois descreve como o frontend e o backend são conectados por meio de rotas:

1 curtida

Também é importante para o meu caso de uso o FormKit: Discourse toolkit to render forms

1 curtida

Mais algumas peças do quebra-cabeça:

As chaves de API podem ser armazenadas com segurança em /admin/api/keys.

1 curtida

Finalmente encontrei um ótimo tutorial sobre como escrever um plugin.

1 curtida