CodeStash の Formbricks に対する AI の満足度を調査する
導入
そこで、私は CodeStash に取り組んできました。これは、コード スニペットを共有し議論するためのプラットフォームで、Reddit と Stack Overflow を組み合わせたようなものです。クールな部分は？ Google Gemini を利用して、コード スニペットを説明する AI が組み込まれています。それが厄介な JavaScript コードであっても、Python コードであっても、CodeStash を使用すると、ユーザーはオンデマンドで AI の説明をリクエストできます。しかし… AI の説明には多少の当たり外れがあるかもしれません。この回答が非常に役立つと感じるユーザーもいるでしょうが、他のユーザーもいるでしょうか?それほど多くはありません。そこで Formbricks の出番です。
この投稿では、AI の回答を受け取った後にユーザーにアンケートを実施し、それが有益であるかどうかを確認するために Formbricks を追加した方法を説明します。アプリ内のフィードバックに興味がある場合、または Formbricks がプロジェクトにどのように適合するかを知りたい場合は、しばらくお待ちください!
なぜわざわざアンケートを行う必要があるのでしょうか?
AI は優れていますが、正直に言って、的を外していることもあります。ユーザーに説明が役に立ったかどうかを直接尋ねることで、CodeStash を微調整するために使用できる正直なその場でのフィードバックを得ることができます。また、Formbricks を使用すると、これらの迅速で手間のかからないアンケートをアプリに直接追加することが非常に簡単になります。双方に利益をもたらします。
Formbricks を CodeStash に追加する (Next.js を使用)
Formbricks の追加は簡単で、セットアップには 10 分もかかりませんでした。したがって、「このアンケート内容をすべて追加する時間がない」と考えている場合は、信じてください。思っているよりも早く完了します。内訳は次のとおりです:
ステップ 1: Formbricks アカウントを作成する
このクイックスタート ガイドの手順に従って、Formbricks の使用を開始してください。
ステップ 2: Formbricks をインストールする
最初に Formbricks パッケージが必要です。このコマンドを実行してインストールし、次の手順に従います:
npm install @formbricks/js zod
次に、app/formbricks.tsx ファイルを作成します
"use client";
import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js";
export default function FormbricksProvider() {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
formbricks.init({
environmentId: "<environment-id>",
apiHost: "<api-host>",
userId: "<user-id>", //optional
});
}, []);
useEffect(() => {
formbricks?.registerRouteChange();
}, [pathname, searchParams]);
return null;
}
次に、app/layout.tsx ファイルを更新します。
// other imports
import FormbricksProvider from "./formbricks";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<FormbricksProvider />
<body>{children}</body>
</html>
);
}
ステップ 3: アンケートを埋め込む
AI による説明が提供された後、ユーザーにその説明が気に入ったかどうかを尋ねるアンケートがポップアップ表示されます。アンケート コンポーネントを回答に直接埋め込む方法は次のとおりです。
Formbricks アカウントで新しいアンケートを作成し、設定の下のアンケート トリガーにキー「ai_answer」を持つコード トリガーを追加します。
これで、コード内の任意の場所で formbricks.track("ai_answer") メソッドを使用して、プログラムによってアンケートをトリガーできるようになりました。
たとえば...
import formbricks from "@formbricks/js";
import axios from "axios";
await axios
.get("/ai/explain")
.then((res) => {
formbricks.track("ai_answer");
});
ステップ 4: アンケートの質問をカスタマイズする
Formbricks ダッシュボードで、探している内容に合わせてアンケートを調整します。私は次のような質問をしました:
「この説明は役に立ちましたか?」 (はい、いいえ)
「AI の説明を改善するにはどうすればよいでしょうか?」 (オプション)
ユーザーがアンケートに集中しすぎないように、アンケートは短くシンプルにしました。
一番良かった点は?アンケートが頻繁に表示されるように設定できるため、ユーザーが説明を求めるたびにスパムを送信する必要がなくなります。
スクリーンショット
フィードバックの実際の動作を確認する
応答が受信され始めると、Formbricks はすべて適切で整ったデータを提供します。これで、何が機能し、何が混乱し、何が微調整が必要かを確認できるようになりました。
まとめ
Formbricks を CodeStash に追加すると、ユーザー エクスペリエンスを中断することなく、正直なフィードバックを簡単に取得できるようになりました。ユーザーのフィードバックを念頭に置いて構築している場合は、Formbricks を試してみてください!
読んでいただきありがとうございます。私と同じようにこれらのツールに興味がある方は、Formbricks の GitHub リポジトリにスターを付けることを忘れないでください ⭐—CodeStash が気に入ったら、それにもスターを付けてください!
参考文献
- Formbricks ドキュメント
- Next.js ドキュメント
以上がCodeStash の Formbricks に対する AI の満足度を調査するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1673
14
1429
52
1333
25
1278
29
1257
24
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
JavaScriptとWeb：コア機能とユースケース
Apr 18, 2025 am 12:19 AM
Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。
JavaScript in Action：実際の例とプロジェクト
Apr 19, 2025 am 12:13 AM
現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。
JavaScriptエンジンの理解：実装の詳細
Apr 17, 2025 am 12:05 AM
JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。
Python vs. JavaScript：コミュニティ、ライブラリ、リソース
Apr 15, 2025 am 12:16 AM
PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。
Python vs. JavaScript：開発環境とツール
Apr 26, 2025 am 12:09 AM
開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。
JavaScript通訳者とコンパイラにおけるC/Cの役割
Apr 20, 2025 am 12:01 AM
CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
Python vs. JavaScript：ユースケースとアプリケーションと比較されます
Apr 21, 2025 am 12:01 AM
Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。
