Come creare un plugin con chiamate API backend per popolare Composer durante la stesura

Sto cercando di creare un plugin che realizzi quanto segue:

  1. Accanto ai campi del compositore c’è un nuovo pulsante “cerca”.
  2. Facendo clic sul pulsante, viene visualizzato un overlay con un modulo di ricerca.
  3. Il modulo di ricerca consente all’utente di inserire alcuni termini di ricerca (diciamo, il nome di una città) e viene attivata una ricerca con un motore di ricerca di immagini proprietario (in esecuzione sul mio URL che richiede una chiave API) per cercare immagini di quella città.
  4. Vengono mostrate all’utente le prime 5 immagini. L’utente seleziona un’immagine, l’overlay scompare, l’immagine più la stringa di ricerca vengono quindi aggiunte all’interno del compositore come bozza. L’utente può ora continuare a scrivere ciò che era il suo post.

Il mio caso d’uso effettivo è un po’ più complicato, ma questo è all’incirca ciò che voglio ottenere. L’obiettivo è semplicemente aiutare l’utente a creare bozze di post con immagini in modo molto più conveniente rispetto ad andare al motore di ricerca e copiare manualmente un’immagine nel compositore per creare una bozza.

Sono già riuscito a creare un plugin con un nuovo pulsante utilizzando il campo del compositore come connettore. Il pulsante può essere cliccato e attiva un’azione. Ma ora sono bloccato.

Alcune domande:

  1. Ci sono plugin che potrebbero semplificarmi la vita? Stavo pensando forse al plugin Pavilion wizard, ma ho visto che effettuare chiamate a un’API è disponibile solo nella versione a pagamento e al momento è troppo presto per me per decidere se vale la pena spendere soldi per questo.
  2. Qual è la classe CSS / ID div corretto che potrei targettizzare per attivare un overlay?
  3. Quale sarebbe un buon esempio per capire come effettuare una chiamata API tramite backend? Non voglio fornire la chiave API del motore di ricerca al client, quindi deve passare tramite backend.
  4. Non sono sicuro di quale sia l’API del plugin e se ne avrei bisogno. (Sto lottando un po’ con la documentazione che è sparsa ovunque.)

Tutti gli altri suggerimenti e indicazioni sono benvenuti.

1 Mi Piace

Nel frattempo ho trovato alcune risorse che ho trovato informative. Vorrei davvero che queste potessero essere messe in modo più evidente nel tutorial “Come scrivere un plugin”. Per i principianti non è ovvio che esistano nemmeno.

  1. La API di Discourse (non utile per scrivere plugin, ma comunque rilevante per i principianti): https://docs.discourse.org/
  2. API dei Plugin Client (non utile per scrivere il backend di un plugin, ma rende le cose decisamente più facili per il frontend):
    A versioned API for client side plugins
    discourse/app/assets/javascripts/discourse/app/lib/plugin-api.gjs at main · discourse/discourse · GitHub

Ho anche capito che la API dei Plugin Backend è essenzialmente Rails o Ruby, ma non è chiaro come esattamente frontend e backend interagiscano tra loro, o dove sia l’“aggancio” iniziale per il backend. Certo, c’è un plugin.rb da posizionare, ma mi chiedo se ci siano documentazione su quale sia il punto di ingresso in questo file. Forse è del tutto ovvio per i programmatori Ruby on Rails, ma non lo sono, quindi è un ingresso ripido qui.

Non sembra che tu abbia bisogno di modifiche al backend. Il comportamento che descrivi è molto simile a come funziona la nostra modale “Inserisci collegamento” – puoi cercare argomenti, selezionarne uno da aggiungere come collegamento e verrà aggiunto un collegamento al compositore quando confermi.
Puoi aggiungere il pulsante a un plugin outlet, o alla barra degli strumenti tramite un api.onToolbarCreate aggiunto a un inizializzatore, e aprire una modale in modo simile a come stiamo facendo per la modale “Inserisci collegamento”. È in grado di addText al compositore sfruttando l’oggetto toolbarEvent dall’azione della barra degli strumenti (se hai bisogno di un outlet, puoi anche interagire con il compositore tramite i trigger di appEvents).

4 Mi Piace

Grazie, è molto utile Sì, una modale sembra effettivamente quello che sto cercando: interrompe il flusso dell’utente e solo quando l’utente ha completato la modale, le cose tornano allo stato precedente. Darò un’occhiata a come funziona la modale Inserisci collegamento ipertestuale.

Domanda: Dove posso trovare la documentazione per DModal, DButton e altri oggetti specifici di Discourse?

Qui:

Vale anche la pena notare:

Puoi consultare Discourse/plugins/theme components per esempi.

4 Mi Piace

Grazie, signore!

3 Mi Piace

Ecco un altro articolo che sembra piuttosto importante, poiché descrive come frontend e backend sono collegati tramite le route:

1 Mi Piace

È importante anche per il mio caso d’uso il FormKit: Discourse toolkit to render forms

1 Mi Piace

Altri pezzi del puzzle:

Le chiavi API possono essere archiviate in modo sicuro su /admin/api/keys.

1 Mi Piace

Finalmente ho trovato un ottimo tutorial su come scrivere un plugin.

1 Mi Piace