私は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 を扱う必要もなかった —— 最初から彼を「ナビゲーター」として使っておくべきだった！

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

自分が開発したプラグインをテストしているときに、プラグインのロードメカニズムに関するバグを発見し、ついでに修正して 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 公式アカウント