مقدمة

لذا، كنت أعمل على CodeStash، هذه المنصة لمشاركة مقتطفات التعليمات البرمجية ومناقشتها، وهو نوع من التقاطع بين Reddit وStack Overflow. الجزء الرائع؟ يوجد ذكاء اصطناعي مدمج يشرح مقتطفات التعليمات البرمجية، مدعوم من Google Gemini. سواء أكان ذلك عبارة عن كود JavaScript أو Python، فإن CodeStash يتيح للمستخدمين طلب تفسير للذكاء الاصطناعي عند الطلب. لكن... قد تكون تفسيرات الذكاء الاصطناعي ناجحة أو فاشلة بعض الشيء. قد يجد بعض المستخدمين أن الاستجابة مفيدة للغاية، بينما يجد البعض الآخر؟ ليس كثيرا. وهنا يأتي دور Formbricks.

في هذا المنشور، سأوضح لك كيف أضفت Formbricks لاستطلاع رأي المستخدمين بعد حصولهم على إجابة الذكاء الاصطناعي، والتحقق مما إذا كانوا يجدونها مفيدة. إذا كنت مهتمًا بالتعليقات داخل التطبيق أو كنت ترغب فقط في معرفة كيف يمكن أن تتناسب Formbricks مع مشاريعك، فاستمر!

لماذا تهتم بالاستطلاعات؟

الذكاء الاصطناعي مثير للإعجاب، ولكن دعونا نواجه الأمر، فهو في بعض الأحيان يخطئ الهدف. من خلال سؤال المستخدمين مباشرة عما إذا كان التفسير قد ساعدني، أحصل على تعليقات صادقة وفورية يمكنني استخدامها لضبط CodeStash. ويجعل Formbricks من السهل جدًا إضافة هذه الاستطلاعات السريعة والبسيطة مباشرةً إلى التطبيق. الفوز.

إضافة Formbricks إلى CodeStash (w/ 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: "",
      apiHost: "",
      userId: "", //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 (
    
      
      {children}
    
  );
}

الخطوة 3: تضمين الاستطلاع

بعد تقديم شرح الذكاء الاصطناعي، يظهر استطلاع يسأل المستخدمين عن مدى إعجابهم به. فيما يلي كيفية تضمين مكون الاستطلاع مباشرة في الرد.

في حساب 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، قم بتعديل الاستبيان ليناسب ما تبحث عنه. ذهبت بأسئلة مثل:

"هل كان هذا التفسير مفيدًا؟" (نعم، لا)
"كيف يمكننا تحسين تفسيرات الذكاء الاصطناعي؟" (خياري)

لقد أبقيت الاستطلاع قصيرًا وبسيطًا حتى لا يشتت انتباه المستخدمين كثيرًا بسبب الاستطلاع.

الجزء الأفضل؟ يمكنك ضبط الاستطلاع ليظهر بين الحين والآخر، حتى لا ترسل بريدًا عشوائيًا للمستخدمين في كل مرة يطلبون فيها تفسيراً.

لقطات الشاشة

رؤية ردود الفعل في العمل

بمجرد بدء ظهور الردود، يمنحك Formbricks البيانات بشكل جميل وأنيق. الآن أستطيع أن أرى ما الذي ينجح، وما هو المربك، وما الذي يحتاج إلى تعديل أو اثنين.

التفاف عليه

أدت إضافة Formbricks إلى CodeStash إلى تسهيل الحصول على التعليقات الصادقة دون مقاطعة تجربة المستخدم. لذا، إذا كنت تقوم بالبناء مع أخذ تعليقات المستخدمين في الاعتبار، فجرّب Formbricks!

شكرًا على القراءة، وإذا كنت مهتمًا بهذه الأدوات مثلي، فلا تنسَ وضع نجمة على GitHub repo من Formbricks ⭐— وإذا كنت تحب CodeStash، فامنحها نجمة أيضًا!

مراجع

1. مستندات الفورمبريكس
2. مستندات Next.js