작성 중 컴포저를 채우기 위해 백엔드 API 호출을 사용하는 플러그인을 만드는 방법?

다음과 같은 기능을 구현하는 플러그인을 만들어 보고 있습니다:

  1. composer 필드 옆에 "검색"이라는 새 버튼이 있습니다.
  2. 버튼을 클릭하면 검색 폼이 포함된 오버레이가 팝업으로 나타납니다.
  3. 검색 폼을 통해 사용자가 검색어(예: 도시 이름)를 입력할 수 있으며, 자체적인 이미지 검색 엔진(자체 URL에서 실행되며 API 키가 필요함)을 통해 해당 도시의 이미지를 검색하도록 트리거가 발동됩니다.
  4. 상위 5개 이미지가 사용자에게 표시됩니다. 사용자가 이미지를 하나 선택하면 오버레이가 사라지고, 해당 이미지와 검색어가 초안(draft)으로 composer 안에 추가됩니다. 사용자는 이제 게시글 초안을 계속 작성할 수 있습니다.

실제 사용 사례는 좀 더 복잡하지만, 대략적으로 이루고 싶은 목표는 이렇습니다. 목표는 사용자가 검색 엔진에 가서 이미지를 수동으로 복사하여 composer에 붙여넣어 초안을 만드는 것보다 훨씬 편리하게 이미지와 함께 게시글 초안을 작성할 수 있도록 돕는 것입니다.

이미 composer-field를 커넥터로 사용하여 새 버튼이 있는 플러그인을 만드는 데 성공했습니다. 버튼을 클릭하면 액션이 트리거됩니다. 하지만 이제 막혀 있습니다.

몇 가지 질문이 있습니다:

  1. 제 일을 더 쉽게 만들어 줄 플러그인이 있을까요? Pavilion wizard 플러그인을 고려해 봤는데, API 호출은 유료 버전에서만 가능하다는 것을 보았습니다. 그리고 지금은 이 돈 쓰는 것이 가치가 있는지 결정하기엔 너무 이르다고 생각합니다.
  2. 오버레이를 활성화하기 위해 대상(target)으로 지정할 수 있는 올바른 CSS 클래스나 div ID가 무엇인가요?
  3. 백엔드를 통해 API 호출을 하는 방법에 대해 파악하기 좋은 예시가 있을까요? 검색 엔진의 API 키를 클라이언트에 제공하기 원하지 않으므로, 반드시 백엔드를 통해 처리되어야 합니다.
  4. 플러그인 API가 실제로 무엇인지, 그리고 제가 그것을 필요로 하는지 확실하지 않습니다. (문서가 여기저기 흩어져 있어서 조금 고생하고 있습니다.)

기타 모든 팁과 조언은 환영합니다.

그동안 유용한 자료를 몇 가지 찾았습니다. 이 자료들이 “플러그인 작성하기” 튜토리얼에 더 눈에 띄게 배치되었으면 좋겠습니다. 초보자에게는 이런 자료들이 존재한다는 것조차 쉽게 알 수 없기 때문입니다.

  1. Discourse 자체 API (플러그인 작성에는 도움이 되지 않지만, 초보자에게는 여전히 관련이 있음): https://docs.discourse.org/
  2. 클라이언트 플러그인 API (플러그인 백엔드 작성에는 도움이 되지 않지만, 프론트엔드 작업은 확실히 쉬워짐):
    A versioned API for client side plugins
    https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs

또한 백엔드 플러그인 API가 기본적으로 Rails 또는 Ruby라는 점도 이해했습니다. 하지만 프론트엔드와 백엔드가 정확히 어떻게 상호작용하는지, 또는 백엔드의 초기 "훅(hook)"이 어디에 있는지 명확하지 않습니다. 물론 plugin.rb 파일을 배치해야 하지만, 이 파일의 진입점이 무엇인지에 대한 문서가 있는지 궁금합니다. Ruby on Rails 개발자에게는 전혀 당연한 것일 수 있지만, 저는 그런 개발자가 아니므로 진입 장벽이 매우 높게 느껴집니다.

백엔드 변경이 필요하지 않을 것 같습니다. 설명하신 동작은 우리의 “하이퍼링크 삽입” 모달의 작동 방식과 매우 유사합니다 – 토픽을 검색하고 링크로 추가할 하나를 선택하면 확인 시 컴포저에 링크가 추가됩니다.

버튼은 플러그인 아웃렛에, 또는 초기화자에 추가된 api.onToolbarCreate를 통해 툴바에 추가할 수 있습니다. 그리고 “하이퍼링크 삽입” 모달에서처럼 유사한 방식으로 모달을 열 수 있습니다. 툴바 액션에서 toolbarEvent 객체를 활용하여 컴포저에 addText를 추가할 수 있습니다 (아웃렛이 필요하면 appEvents 트리거를 통해 컴포저와 상호작용할 수도 있습니다).

고맙습니다. 정말 도움이 됩니다. 네, 모달이 제가 찾고 있는 것인 것 같습니다. 사용자의 흐름을 중단시키고, 사용자가 모달을 완료한 후에야 이전 상태로 돌아가지요. 하이퍼링크 삽입 모달이 어떻게 작동하는지 살펴보겠습니다.

질문: DModal, DButton, 그리고 기타 Discourse 전용 객체에 대한 문서를 어디서 찾을 수 있을까요?

여기서 확인해 보세요:

또한 참고할 가치가 있는 문서:

예제를 보려면 Discourse/plugins/theme components를 살펴볼 수 있습니다.

감사합니다, 시니어!

다음은 프론트엔드와 백엔드가 라우트를 통해 어떻게 연결되는지를 설명하므로 꽤 중요해 보입니다:

내 사용 사례에서 또한 중요한 것은 FormKit입니다: Discourse toolkit to render forms

더 몇 가지 조각을 더 소개합니다:

API 키는 /admin/api/keys 아래에 안전하게 저장할 수 있습니다.

드디어 플러그인 작성 방법에 대한 훌륭한 튜토리얼을 찾았습니다.