परिचय

इसलिए, मैं कोडस्टैश पर काम कर रहा हूं, यह कोड स्निपेट्स को साझा करने और चर्चा करने के लिए मंच है, जो रेडिट और स्टैक ओवरफ़्लो के बीच एक मिश्रण है। बढ़िया हिस्सा? इसमें एक अंतर्निहित AI है जो Google जेमिनी द्वारा संचालित कोड स्निपेट की व्याख्या करता है। चाहे वह कुछ ख़राब जावास्क्रिप्ट या पायथन कोड हो, कोडस्टैश उपयोगकर्ताओं को मांग पर एआई स्पष्टीकरण का अनुरोध करने देता है। लेकिन... एआई स्पष्टीकरण थोड़ा सफल या असफल हो सकता है। कुछ उपयोगकर्ताओं को प्रतिक्रिया अत्यधिक उपयोगी लग सकती है, जबकि अन्य को? इतना नहीं। यहीं पर फॉर्मब्रिक्स आती है।

इस पोस्ट में, मैं आपको दिखाऊंगा कि कैसे मैंने उपयोगकर्ताओं को एआई उत्तर मिलने के बाद सर्वेक्षण करने के लिए फॉर्मब्रिक्स जोड़ा, यह जांचते हुए कि क्या उन्हें यह उपयोगी लगा। यदि आप इन-ऐप फीडबैक के बारे में उत्सुक हैं या बस यह देखना चाहते हैं कि फॉर्मब्रिक्स आपके प्रोजेक्ट में कैसे फिट हो सकता है, तो बने रहें!

सर्वेक्षणों से परेशान क्यों?

एआई प्रभावशाली है, लेकिन आइए इसका सामना करें-कभी-कभी यह लक्ष्य से चूक जाता है। उपयोगकर्ताओं से सीधे पूछने पर कि क्या स्पष्टीकरण से मदद मिली, मुझे ईमानदार, पल-पल की प्रतिक्रिया मिलती है जिसका उपयोग मैं कोडस्टैश को ठीक करने के लिए कर सकता हूं। और फॉर्मब्रिक्स इन त्वरित, बिना झंझट वाले सर्वेक्षणों को सीधे ऐप में जोड़ना बेहद आसान बना देता है। जीत-जीत।

कोडस्टैश में फॉर्मब्रिक्स जोड़ना (w/ Next.js)

फॉर्मब्रिक्स जोड़ना सीधा था, और सेटअप में 10 मिनट से भी कम समय लगा। इसलिए यदि आप सोच रहे हैं, "मेरे पास सर्वेक्षण की ये सारी चीज़ें जोड़ने का समय नहीं है," मुझ पर विश्वास करें, यह आपके विचार से कहीं अधिक तेज़ है। यहाँ एक विश्लेषण है:

चरण 1: फॉर्मब्रिक्स खाता बनाएं

फॉर्मब्रिक्स के साथ शुरुआत करने के लिए इस क्विकस्टार्ट गाइड में दिए गए चरणों का पालन करें।

चरण 2: फॉर्मब्रिक्स स्थापित करें

आपको सबसे पहले फॉर्मब्रिक्स पैकेज की आवश्यकता होगी। इसे इंस्टॉल करने के लिए यह कमांड चलाएँ, फिर यहां दिए गए चरणों का पालन करें:

npm install @formbricks/js zod

अब, एक ऐप/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: "",
      apiHost: "",
      userId: "", //optional
    });
  }, []);

  useEffect(() => {
    formbricks?.registerRouteChange();
  }, [pathname, searchParams]);

  return null;
}

अब, अपनी ऐप/लेआउट.tsx फ़ाइल को अपडेट करें।

// other imports
import FormbricksProvider from "./formbricks";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
      {children}
    
  );
}

चरण 3: सर्वेक्षण एम्बेड करें

एआई स्पष्टीकरण दिए जाने के बाद, एक सर्वेक्षण सामने आता है जो उपयोगकर्ताओं से पूछता है कि उन्हें यह कैसा लगा। यहां बताया गया है कि सर्वेक्षण घटक को सीधे प्रतिक्रिया में कैसे एम्बेड किया जाए।

अपने फॉर्मब्रिक्स खाते में, एक नया सर्वेक्षण बनाएं और सेटिंग्स के तहत सर्वेक्षण ट्रिगर में "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: सर्वेक्षण प्रश्नों को अनुकूलित करें

फ़ॉर्मब्रिक्स डैशबोर्ड में, आप जो खोज रहे हैं उसके अनुरूप सर्वेक्षण में बदलाव करें। मैं ऐसे प्रश्नों के साथ गया:

"क्या यह स्पष्टीकरण सहायक था?" (हां नहीं)
"हम एआई स्पष्टीकरणों को कैसे सुधार सकते हैं?" (वैकल्पिक)

मैंने सर्वेक्षण को छोटा और सरल रखा ताकि उपयोगकर्ता सर्वेक्षण से अधिक विचलित न हों।

श्रेष्ठ भाग? आप सर्वेक्षण को समय-समय पर प्रदर्शित होने के लिए सेट कर सकते हैं, ताकि जब भी उपयोगकर्ता स्पष्टीकरण मांगें तो आप उन्हें स्पैम न करें।

स्क्रीनशॉट

प्रतिक्रिया को क्रियान्वित होते देखना

एक बार जब प्रतिक्रियाएं आना शुरू हो जाती हैं, तो फॉर्मब्रिक्स आपको अच्छा और साफ-सुथरा डेटा देता है। अब मैं देख सकता हूं कि क्या काम कर रहा है, क्या भ्रमित करने वाला है और किसमें एक या दो बदलाव की जरूरत है।

इसे लपेट रहा है

कोडस्टैश में फॉर्मब्रिक्स जोड़ने से उपयोगकर्ता अनुभव को बाधित किए बिना ईमानदार प्रतिक्रिया प्राप्त करना आसान हो गया है। इसलिए यदि आप उपयोगकर्ता के फीडबैक को ध्यान में रखकर निर्माण कर रहे हैं, तो फॉर्मब्रिक्स को आज़माएं!

पढ़ने के लिए धन्यवाद, और यदि आप भी मेरी तरह इन उपकरणों में रुचि रखते हैं, तो फॉर्मब्रिक्स के गिटहब रेपो को तारांकित करना न भूलें ⭐—और यदि आपको कोडस्टैश पसंद है, तो उसे भी एक तारा दें!

संदर्भ

1. फॉर्मब्रिक्स दस्तावेज़
2. Next.js डॉक्स