CodeStash의 Formbricks에 대한 AI 만족도 조사-JS 튜토리얼-php.cn

CodeStash의 Formbricks에 대한 AI 만족도 조사

Barbara Streisand

풀어 주다： 2024-10-31 06:05:30

원래의

735명이 탐색했습니다.

소개

그래서 저는 코드 조각을 공유하고 토론하기 위한 Reddit과 Stack Overflow의 중간 형태인 플랫폼인 CodeStash를 작업해 왔습니다. 멋진 부분? Google Gemini에서 제공하는 코드 조각을 설명하는 AI가 내장되어 있습니다. 형편없는 JavaScript이든 Python 코드이든 CodeStash를 사용하면 사용자가 필요에 따라 AI 설명을 요청할 수 있습니다. 하지만… AI 설명은 약간 의외일 수 있습니다. 일부 사용자는 응답이 매우 유용하다고 생각할 수도 있고 다른 사용자는 어떻게 될까요? 그다지 많지는 않습니다. 이것이 Formbricks가 등장하는 곳입니다.

이번 게시물에서는 사용자가 AI 답변을 얻은 후 설문조사에 Formbricks를 추가하여 유용하다고 생각하는지 확인하는 방법을 보여 드리겠습니다. 앱 내 피드백이 궁금하거나 Formbricks가 귀하의 프로젝트에 어떻게 적용될 수 있는지 알고 싶다면 계속 기다려주세요!

왜 설문조사에 신경쓰나요?

AI는 인상적이지만 현실을 직시하면 때로는 목표를 놓치기도 합니다. 설명이 도움이 되었는지 사용자에게 직접 물어봄으로써 CodeStash를 미세 조정하는 데 사용할 수 있는 정직하고 즉각적인 피드백을 얻을 수 있습니다. 그리고 Formbricks를 사용하면 빠르고 번거롭지 않은 설문조사를 앱에 직접 추가하는 것이 매우 간단해졌습니다. 윈윈.

CodeStash에 Formbrick 추가(Next.js 포함)

Formbricks 추가는 간단했고 설정에는 10분도 채 걸리지 않았습니다. 따라서 "이 설문조사 내용을 모두 추가할 시간이 없습니다"라고 생각하신다면 저를 믿으세요. 생각보다 빠릅니다. 분석 내용은 다음과 같습니다.

1단계: Formricks 계정 만들기

Formbricks를 시작하려면 이 빠른 시작 가이드의 단계를 따르세요.

2단계: Formbrick 설치

먼저 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" 키를 사용하여 코드 트리거를 추가하세요.

이제 코드 어디에서나 formricks.track("ai_answer") 메소드를 사용하여 프로그래밍 방식으로 설문조사를 시작할 수 있습니다.

예를 들어...

import formbricks from "@formbricks/js";
import axios from "axios";

await axios
  .get("/ai/explain")
  .then((res) => {
      formbricks.track("ai_answer");
});

로그인 후 복사