私はAnswerに2つのPRを提出しました。

有个 OpenBuild のコミュニティエコシステムプロジェクトが少し長い間放置されているようで、発起者は迅速に進めたいと思っているが、なかなか進展がなく、他に適切な人も見つからない —— 仕方がないので、私が引き受けることにした。

このプロジェクトがやるべきことは、オープンソースの Q&A プラットフォーム Answer に Web3 ウォレットログインをサポートするプラグインを開発することだ；実現する機能から見ると、これは非常に小さなプロジェクトで、開発とフロントエンドとバックエンドの調整を合わせて 1.5～3 人日程度だろう。

しかし、現実は私に一撃を与えた……

需求分析#

初歩的に公式のプラグイン開発文書を見ると、やるべきことは「コネクタ - バックエンドプラグイン」だ。

これを前提に、いくつかの既存のコネクタのコードをざっと見てみると、各プラグインは一種類のタイプしか指定できず、バックエンドプラグインは直接 UI をサポートできないことがわかった。彼らはすべて外部の認可用 URL にリダイレクトされる。

しかし、Web3 ウォレットログインには現成の外部認可用 URL がないため、要件を実現するには別途「ルーター - スタンダード UI プラグイン」を作成し、ページを開発する必要がある：

ウォレット接続ボタンを表示；
ウォレット接続後、ユーザーが署名；
1. バックエンドから nonce を取得、フロントエンドがウォレットアドレスを渡す；
2. フロントエンドがウォレットを呼び出してユーザーに署名させる；
署名後にバックエンドの認可インターフェースを呼び出す、フロントエンドがユーザーの署名情報、ウォレットアドレスなどを渡す；
リクエスト成功後、メイン画面に戻る。

上記の太字部分はバックエンドとデータをやり取りする必要がある、つまり 2 つのバックエンドインターフェースが必要だ。

プロセスはとてもシンプルに見えるだろう？確かにとてもシンプルだ！

開発過程#

バックエンド部分は数ヶ月前に大体開発が完了しており、基本的にフロントエンドのインターフェースと調整が残っているだけだ。

このプロジェクトはフロントエンドとバックエンドが分離されていないため、私が完全に実行するには、公式文書の情報によれば、Docker やデータベースなどをインストールする必要がある。

しかし、私は以前にこれらをローカルにインストールしておらず、現在もこれらを使用する他のプロジェクトの計画はないため、これのためだけにほとんど使わないソフトウェアをインストールして貴重なコンピュータのストレージスペースを占有するわけにはいかない。

そこで、私はまず純粋なフロントエンドの方法でインターフェースのレイアウト、スタイル、機能を開発することにした。たとえバックエンドインターフェースのリクエストがすべて失敗したとしても；文書を読む時間やプラグインの基本メカニズムに慣れる時間を含めて、約 1 人日で完成した。

バックエンド担当者と週末の 1 日を集中して調整することにしたが、挫折が続いた……

私のローカルにバックエンド環境がインストールされておらず、正常なプラグインの読み込み実行プロセスを進めることができず、開発段階では遭遇しなかった問題がいくつかあった；バックエンドの仲間に私のコードをダウンロードしてもらい、全プロセスを実行してもらうと、さまざまな「奇妙な」問題が浮上してきた……

最初は、基本的にフロントエンドの問題が発生するたびにビデオ会議を開き、彼がどのように操作しているかを見て、私が彼を指導して解決させていた —— 何度かやっているうちに、これが伝説の「ペアプログラミング」ではないかと気づいた。😂😂😂

その後、私は「このままではいけない、あまりにも非効率だ！」と思った。

最終的に、私は心の中のわだかまりを捨て、彼にバックエンドを動かす方法を指導してもらうことにした。そうすれば、自分でテストしてフロントエンドのコードを調整できる。

指導を受けた後、実際には Go を追加でインストールするだけでよく、データベースは macOS に付属の SQLite をそのまま使えばよく、Docker を使う必要もなかった —— 最初から彼を「ナビゲーター」として使っておけばよかった！

その後、順調に進まなかったが、私たちはもうビデオ会議を開く必要がなくなり、問題があれば WeChat でスクリーンショットを送って簡単に説明すればよく、効率が大幅に向上した！

自分が開発したプラグインをテストしているとき、プラグインの読み込みメカニズムにバグを発見し、ついでに修正して PR を提出した、追加の成果を得た！😁😁😁

一、二日の仕上げを経て、私たちが開発したプラグインも納品され、公式のレビュアーの指導と提案のもと、元々の 2 つのプラグインを 1 つに統合した—— 表面上は「ルーター - スタンダード UI プラグイン」、実際には「コネクタ - バックエンドプラグイン」でもある。

これで、私たちはこの三、五日間で「便秘」問題を解決した。花火を上げよう！🎉🎉🎉

踩坑经验#

今回は主プロジェクトのバージョン 1.4.0 に基づいて開発し、公式文書やプラグインシステムの不完全さ、そして自分の少しぎこちない心態が原因でいくつかの落とし穴にはまった。以下はフロントエンド開発者向けにローカルデバッグの要点を共有し、無駄な道を避けるためのものだ！

まず、私のように気にする人に再度強調しておく ——追加で Go をインストールするだけで、データベースは macOS に付属の SQLite を使える！

私たちが開発したプラグインを例にとると、プラグイン名を connector-wallet と仮定しよう ——

バックエンド環境#

主プロジェクトの cmd/answer/main.go にプラグインパッケージをインポートしていることを確認する。たとえ現在存在しなくても：

import (
  answercmd "github.com/apache/incubator-answer/cmd"

  _ "github.com/apache/incubator-answer-plugins/connector-wallet"
)

純粋なフロントエンドプラグインでも「表面上はフロントエンドプラグイン」のプラグインでも、デバッグ時にはテンプレート生成されたコードを ui/src/plugins フォルダに置き、ルートフォルダに go.work ファイルを作成する：

go 1.22.0

toolchain go1.23.2

use (
    .
    ./ui/src/plugins/connector-wallet
)

make ui を実行してフロントエンドコードをビルドし、次に go build -o answer ./cmd/answer/main.go でバックエンドコードをコンパイルすると、answer ファイルが生成され、以降の操作はこれを使用する。

./answer init -C ./answer-data/ を実行してシステムを初期化し、ブラウザで http://localhost にアクセスして情報を入力する。データベースは SQLite を選択し、ファイル保存パスの /data を answer-data フォルダの絶対パスに置き換える必要がある。

./answer run -C ./answer-data/ を実行してバックエンドサービスを起動し、再度 http://localhost にアクセスすれば初期アカウントでログインし、デバッグするプラグインをバックエンドで有効にできる。

最後に ui/.env.development の REACT_APP_API_URL を http://localhost:80/ に変更すれば、フロントエンド開発サーバーを起動してバックエンドインターフェースにアクセスできる。

フロントエンド環境#

依存関係をインストールした後、プラグインフォルダ内のいくつかのフォルダを削除する必要がある。そうしないと問題が発生する：

dist フォルダと package.json の main、module、types、exports フィールドを削除する。そうしないと、ページがコンパイルされたファイルをレンダリングし、ソースファイルの変更が反映されない；
node_modules を削除する。そうしないと、プラグインで読み込まれる i18n 設定が主プロジェクトのものではなく、react-i18next の底層がシングルトンモードを使用していないために実際に 2 つの設定が生成される可能性がある。

プラグインの公開#

フロントエンドプラグインに追加の依存関係を加えた場合、プラグインパッケージ内の vite.config.ts の設定を変更する必要がある：

import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';

export default defineConfig({
  plugins: [
    ...,
    cssInjectedByJsPlugin(),    // スタイルファイルをインポートする際は必須、さもなければスタイルが乱れる
    ...,
  ],
  build: {
    ...,
    rollupOptions: {
      external: [
        ...,    // 自分の追加依存関係を宣言する
      ],
      output: {
        globals: {
          ...,    // 自分の追加依存関係を宣言する
        },
      },
    },
  },
});

結語#

OpenBuild に感謝する、この機会を提供してくれて、最初は私がより重要で優先すべきことがあると思っていたため、あまり引き受けたくなかった…… しかし、時間を無理に絞り出せば、やはり時間はあるものだ！

バックエンドの仲間の積極的な協力に感謝し、私たちが数ヶ月間遅延していた「便秘」問題を一緒に解決できたことに感謝する！

Answer の公式レビュアーに感謝し、PR の中で英語を練習させてもらい、私の国際化の発展に良いスタートを切ってもらった！

以前、他のいくつかのオープンソースプロジェクトに PR を提出したこともあったが、基本的には小さな修正ばかりで、毎回あまり交流もなく直接合流されていた；今回は Answer に貢献することで、本当にオープンソースをやっているという感覚を得た！

全てのオープンソースの人々に敬意を表します！！！

この記事の他の読書アドレス：個人サイト｜WeChat 公式アカウント