کامل کردن بخش نظرات برای React: Replyke V3 جدید و بهبود یافته

ایجاد یک بخش نظرات برای پروژه React شما می‌تواند یک کار دلهره‌آور باشد، به خصوص اگر می‌خواهید ظاهری زیبا داشته باشد، عملکردی روان داشته باشد و به‌طور یکپارچه با باطن شما یکپارچه شود. اینجاست که Replyke وارد می‌شود. Replyke یک کتابخانه قدرتمند و در عین حال آسان برای استفاده است که به شما امکان می‌دهد در عرض چند دقیقه یک بخش نظرات کاملاً دارای ویژگی را به برنامه React خود اضافه کنید.

در این مقاله، آخرین نسخه Replyke را بررسی می‌کنیم که چندین ویژگی جدید و هیجان‌انگیز را معرفی می‌کند که برای ساده‌تر و همه‌کاره‌تر کردن فرآیند طراحی شده‌اند. چه برای اولین بار کاربر هستید یا از زمان انتشار اولیه Replyke را دنبال کرده اید، این راهنما به شما کمک می کند تا از آخرین به روز رسانی ها سرعت بگیرید.

در اینجا چه چیزی جدید است:

• سبک اجتماعی: طراحی جدید و مدرن بخش نظرات با الهام از شبکه های اجتماعی محبوب، پروژه شما را برای کاربران جذاب تر و آشناتر می کند.
• useReplyke قلاب: یک قلاب جدید قدرتمند که اطلاعات ضروری در مورد مقالات یا مواردی که بخش نظرات شما به آنها پیوست شده است را ارائه می دهد و امکان سفارشی سازی و کنترل بیشتر را فراهم می کند.
• راه اندازی ساده شده Backend: زمان پیکربندی دستی باطن شما گذشته است. با کتابخانه جدید Express، اکنون می توانید کل باطن را تنها با یک خط کد پیاده سازی کنید.
• React Native Support: اکنون، می‌توانید بخش نظرات سبک اجتماعی را با کتابخانه جدید Replyke React Native به برنامه‌های تلفن همراه خود بیاورید و از تجربه کاربری یکپارچه و ثابت در هر دو پلتفرم وب و موبایل اطمینان حاصل کنید.

در بخش‌های بعدی، عمیق‌تر به این ویژگی‌ها می‌پردازیم و به شما نشان می‌دهیم که چگونه با Replyke به‌روزرسانی شده شروع کنید. چه در حال ساختن یک وبلاگ، یک سایت بررسی محصول یا هر پلتفرم دیگری باشید که از تعامل با کاربر سود می برد، Replyke شما را تحت پوشش قرار می دهد.

آیا آماده‌اید پروژه خود را با بخش نظرات بصری، شیک و آسان برای اجرا ارتقا دهید؟ بیایید شروع کنیم!

* اگر می خواهید حمایت خود را نشان دهید، من به تازگی (14 اوت) V3 را در ProductHunt راه اندازی کرده ام و از حمایت شما قدردانی می کنم!

برای ادغام Replyke در برنامه React خود، با نصب کتابخانه شروع کنید.

npm install replyke
--- or ---
yarn add replyke

برای ادغام Replyke در برنامه React Native خود، به جای آن کتابخانه React Native را نصب کنید.

npm install replyke-rn
--- or ---
yarn add replyke-rn

مراحل پیاده سازی برای هر دو کتابخانه React و React Native یکسان است.

وارد کردن و راه اندازی Replyke

سبک اجتماعی

مؤلفه سبک اجتماعی به دو مؤلفه اصلی مورد نیاز (CommentsFeed و NewCommentForm) و دو مؤلفه اختیاری (SocialActionsBar و SortByButton) تقسیم می‌شود تا امکان اجرای UI انعطاف‌پذیرتر را فراهم کند.
هر چهار جزء باید توسط بسته بندی شوند SocialContextProvider.

برای پیاده سازی، ابتدا Provider و همه اجزاء را از Replyke در بالای فایل جزء React خود وارد کنید:

import {
  ReplykeSocialProvider,
  CommentsFeed,
  NewCommentForm,
  SocialActionsBar,
  SortByButton,
} from "replyke";

سپس آنها را به دلخواه خود قرار دهید. یک پیاده سازی اولیه چیزی شبیه به این خواهد بود (به عنوان مثال از Tailwind و Shadcn استفاده می کند):

ReplykeSocialProvider
  apiBaseUrl="your-server-url"
  articleId="unique-article-id"
  callbacks={{* object with callbacks *}}
  currentUser={* the current user or undefined *}
>
  div className="flex p-6 items-center gap-1">
    h4 className="font-semibold text-base flex-1">Comments/h4>
    SortByButton
      priority="popular"
      activeView={
        div className="bg-black py-1 px-2 rounded-md text-white text-xs">
          Popular
        /div>
      }
      nonActiveView={
        div className="bg-gray-200 py-1 px-2 rounded-md text-xs">Popular/div>
      }
    />
    SortByButton
      priority="newest"
      activeView={
        div className="bg-black py-1 px-2 rounded-md text-white text-xs">
          Newest
        /div>
      }
      nonActiveView={
        div className="bg-gray-200 py-1 px-2 rounded-md text-xs">Newest/div>
      }
    />
  /div>
  div className="flex-1 flex flex-col overflow-hidden">
    ScrollArea className="flex-1 px-4">
      CommentsFeed />
      div className="w-full h-4" />
    /ScrollArea>
    div className="border-y p-4">
      SocialActionsBar />
    /div>
    div>
      NewCommentForm />
    /div>
  /div>
/ReplykeSocialProvider>

سبک وبلاگ

وارد کنید BlogCommentSection کامپوننت از Replyke در بالای فایل جزء React شما:

import { BlogCommentSection } from "replyke";

سپس کامپوننت را در برنامه خود پیاده سازی کنید:

جایگزین کنید "unique-article-id" با یک شناسه منحصر به فرد برای مقاله یا محتوایی که می خواهید نظرات را در آن نمایش دهید.
در زیر نحوه استفاده از articleId و سایر ابزارها را عمیق تر خواهیم کرد.

این بخش پایه و اساس یکپارچه سازی سیستم نظرات پویا Replyke را در برنامه شما تنظیم می کند. برای شروع تقویت تعامل کاربر در پلتفرم خود، این مراحل را دنبال کنید.

آدرس سرور خود را پیکربندی کنید

apiBaseUrl باید URL ریشه API برنامه شما باشد. اینجا جایی است که برنامه شما تمام فرآیندهای Backend را مدیریت می کند.
باید شبیه https://yourapi.com باشد.
این URL پایه درخواست هایی خواهد بود که Replyke برای رسیدگی به عملیات مربوط به نظر ارسال می کند. مطمئن شوید که به درستی قالب بندی شده است، بدون علامت اسلاید انتهایی.

با مشخص کردن URL پایه API شما، Replyke مستقیماً در زیرساخت باطن موجود شما ادغام می شود. از این نقطه پایانی برای ارسال و بازیابی داده های نظرات استفاده می کند و از ترکیب یکپارچه با سیستم های فعلی شما اطمینان می دهد.

درک ویژگی articleId

این articleId یک ویژگی مهم در Replyke است که به عنوان یک شناسه منحصر به فرد برای هر قسمت از محتوا که در آن بخش نظر یکپارچه شده است عمل می کند. این نظرات را به طور خاص به محتوای مربوطه پیوند می دهد و اطمینان حاصل می کند که در زمینه مناسب نمایش داده می شوند.

مثال های استفاده

• محتوای ثابت: برای یک صفحه ثابت مانند «درباره ما»، می‌توانید آن را کدگذاری کنید articleId:

SocialContextProvider articleId="about-page">
...
/SocialContextProvider>

• محتوای پویا: اگر Replyke را در صفحه ای با محتوای پویا پیاده سازی کنید، به عنوان مثال، در یک صفحه پست وبلاگ در یک سایت وبلاگ، articleId باید به صورت پویا با شناسه پست وبلاگ مطابقت داشته باشد:

SocialContextProvider articleId={blogPost.id}>
...
/SocialContextProvider>

بهترین شیوه ها

• اطمینان از منحصر به فرد بودن: هر کدام articleId باید در سراسر برنامه شما منحصر به فرد باشد.
• سازگاری: همان را حفظ کنید articleId برای یک قطعه محتوا برای حفظ نظرات سازگار و مرتبط.

با مدیریت صحیح articleId، می توانید به طور مؤثر نظرات مربوط به محتوای خاص را سازماندهی و نمایش دهید و تعامل و تعامل کاربر را در پلت فرم خود افزایش دهید.

مدیریت کاربران

این user prop in Replyke برای ادغام سیستم نظرات با مدیریت کاربر وب سایت شما بسیار مهم است. این تضمین می کند که تعامل در بخش نظرات با هویت کاربر در پلتفرم شما مطابقت دارد.

جزئیات پیاده سازی

• ارسال اطلاعات کاربر: یک شی کاربر را با جزئیات برای شناسایی کاربران وارد شده ارائه دهید. برای شی کاربر، ویژگی “_id” اجباری است، “name” و “img” اختیاری هستند.

  SocialContextProvider
    currentUser={
      user
        ? { _id: "user-id", name: "User Name", img: "user-image-url" }
        : undefined
    }
  />

این ادغام اعتبار تعاملات کاربر را حفظ می کند، زیرا Replyke از پروفایل های کاربر موجود در پلت فرم شما استفاده می کند.

Callbacks در Replyke – چرا پاسخ به تماس ضروری است

در Replyke، callback برای ایجاد یک تجربه کاربری منسجم که به طور یکپارچه با سیستم کاربری موجود وب سایت شما یکپارچه می شود، ضروری است. این تماس‌ها تضمین می‌کنند که تعاملات درون مؤلفه نظرات Replyke به جای یک افزونه خارجی، بخشی جدایی‌ناپذیر از وب‌سایت شما است.

سفارشی سازی و یکپارچه سازی

• طراحی کاربر محور: Callbacks به سیستم نظر اجازه می دهد تا با مدیریت کاربر خود کار کند و از نیاز کاربران به ایجاد حساب های جداگانه برای اظهار نظر اجتناب کند.
• تجربه یکپارچه: با استفاده از این تماس‌ها، اقدامات درون مولفه Replyke با جریان کاربر و فرآیندهای احراز هویت سایت شما همسو می‌شوند.

با این تماس‌ها، Replyke با رابط کاربری و عملکرد وب‌سایت شما سازگار می‌شود و تعامل کاربر را افزایش می‌دهد و در عین حال یکپارچگی و تداوم تجربه کاربر را حفظ می‌کند. هر تغییر بخش نظر به تماس های خاصی نیاز دارد. لطفاً برای مشاهده تماس های مورد نیاز و اختیاری، به مستندات مربوط به تغییر بخش نظرات انتخابی خود مراجعه کنید.
برای تماس های موجود در بخش سبک اجتماعی اینجا را کلیک کنید.
برای تماس های موجود در بخش سبک وبلاگ اینجا را کلیک کنید.

این useRepyke هوک برای پروژه‌هایی با دسترسی عالی برای واکشی داده‌های ضروری مقاله بدون جزئیات غیر ضروری مانند نظرات یا اجزای رندر طراحی شده است. این قلاب برای به دست آوردن داده هایی ایده آل است که می توان از آنها برای ساخت اجزای رابط کاربری سفارشی متناسب با نیازهای خاص استفاده کرد.

برای استفاده از useRepyke در پروژه خود قلاب کنید، اطمینان حاصل کنید که به آن دسترسی عالی دارید replyke بسته بندی

استفاده

این useRepyke hook به یک شیء پیکربندی نیاز دارد و مقادیر و مؤلفه‌های مختلفی را برمی‌گرداند که می‌توان از آنها برای تعامل و نمایش داده‌های مقاله استفاده کرد.

شیء پیکربندی

شیء پیکربندی به آن منتقل شد useRepyke باید شامل ویژگی های زیر باشد:

• AccessKey: کلید دسترسی ممتاز منحصر به فرد پروژه.
• apiBaseUrl: URL پایه سرور.
• شناسه مقاله: شناسه مقاله برای واکشی داده ها.
• فعلی کاربر: شی کاربر فعلی حاوی _id، name، و img، یا undefined اگر هیچ کاربری وارد نشده باشد

ارزش های برگشتی

قلاب یک شی را با ویژگی های زیر برمی گرداند:

• userLikedArticle: یک بولی که نشان می دهد آیا کاربر فعلی مقاله را پسندیده است (به شرطی که یک شی کاربر ارسال شود).
• تعداد نظرات: عددی که نشان دهنده تعداد کل نظرات در مورد مقاله است.
• تعداد لایک ها: عددی که نشان دهنده تعداد کل لایک های مقاله است.
• مانند مقاله: تابعی که یک لایک از کاربر فعلی به مقاله اضافه می کند (به شرطی که یک شی کاربر ارسال شود).
• برخلاف مقاله: تابعی که لایک کاربر فعلی را از مقاله حذف می کند (به شرطی که یک شی کاربر ارسال شده باشد و قبلاً مقاله را دوست داشته باشد).
• topComment: یک شی حاوی جزئیات در مورد نظر برتر در مقاله، از جمله content، likes، author (با _id، name، و img) و createdAt (زمانی که نظر ایجاد شد).

اجزاء

قلاب همچنین چندین مؤلفه نماد قابل تنظیم را برمی‌گرداند (iconSize، iconColor و onClick می‌توانند به نمادها منتقل شوند):

• دکمه قلب: مؤلفه نماد قلب برای لایک/عدم دوست داشتن مقاله. این خارج از جعبه کاربردی است
• دکمه نظر: یک جزء نماد نظر.
• دکمه اشتراک گذاری: جزء نماد اشتراک گذاری.
• دکمه نشانک: جزء نماد نشانک.

مثال استفاده

import { useRepyke } from "replyke";

const ArticleComponent = ({
  accessKey,
  apiBaseUrl,
  articleId,
  currentUser,
}) => {
  const {
    userLikedArticle,
    commentCount,
    likesCount,
    likeArticle, // we could use this instead of the heart button
    unlikeArticle, // we could use this instead of the heart button
    topComment,
    HeartButton,
    CommentButton,
    ShareButton,
    BookmarkButton,
  } = useRepyke({
    accessKey,
    apiBaseUrl,
    articleId,
    currentUser,
  });

  return (
    div>
      h1>Article Details/h1>
      p>Likes: {likesCount}/p>
      p>Comments: {commentCount}/p>
      p>Top Comment: {topComment?.content}/p>

      HeartButton
        iconSize="24px"
        emptyColor="gray"
        fullColor="red" />
      CommentButton
        iconSize="24px"
        iconColor="blue"
        onClick={() => console.log("Comment clicked")}
      />
      ShareButton
        iconSize="24px"
        iconColor="green"
        onClick={() => console.log("Share clicked")}
      />
      BookmarkButton
        iconSize="24px"
        iconColor="orange"
        onClick={() => console.log("Bookmark clicked")}
      />
    /div>
  );
};

برای ادغام آسان با برنامه‌های Node.js + Express + Mongoose، Replyke کتابخانه‌ای برای ساده‌سازی فرآیند برای شما فراهم می‌کند. این مراحل ساده را دنبال کنید تا ویژگی های باطن Replyke را به طور یکپارچه در برنامه Express خود ادغام کنید.

نصب و راه اندازی

ابتدا، نصب کنید replyke-express بسته از طریق npm:

npm install replyke-express

راه اندازی

برای استفاده از مسیرهای ارائه شده توسط replyke-express، آنها را در برنامه Express خود وارد و پیکربندی کنید.

راه اندازی اولیه

1. واردات و مقداردهی اولیه: با وارد کردن ماژول های لازم و مقداردهی اولیه برنامه Express خود شروع کنید.
2. پیکربندی میان افزار: از میان افزار JSON استفاده کنید و مسیرهای Replyke را پیکربندی کنید.
3. سرور را راه اندازی کنید: در نهایت سرور Express خود را راه اندازی کنید.

یکپارچه سازی مثال

در زیر یک مثال کامل از نحوه ادغام آورده شده است replyke-express در یک برنامه Express، از جمله راه اندازی اتصال MongoDB.

const express = require('express');
const mongoose = require('mongoose');
const { replykeRoutes } = require('replyke-express');

const app = express();

// Connect to MongoDB
mongoose.connect('your-mongodb-uri');

app.use(express.json());

// Use the Replyke routes
app.use(replykeRoutes);

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

مجموعه ها

اسناد در مجموعه های MongoDB زیر ذخیره می شوند:

• replyke-articles: مقالات را به همراه لایک ها، نظرات و پاسخ های مرتبط با آنها ذخیره می کند.
• replyke-comments: نظرات مربوط به مقالات را ذخیره می کند.

Replyke Studio یک رابط بصری برای سفارشی کردن ظاهر بخش نظرات شما ارائه می دهد. با تمرکز بر عناصر بصری، به شما امکان می دهد کنترل کنید:

• رنگ ها: رنگ بندی را مطابق با برند سایت خود تنظیم کنید.
• اندازه فونت: اندازه متن را برای خوانایی و تاکید تنظیم کنید.
• حاشیه ها و بالشتک ها: فاصله را برای یک چیدمان تمیز به خوبی تنظیم کنید.
• مرزها و بیشتر: با سبک های حاشیه و سایر عناصر طراحی، کارهای تکمیلی را اضافه کنید.

پیاده سازی استودیو استایل

هنگامی که طراحی شما کامل شد، یک شناسه سبک منحصر به فرد دریافت خواهید کرد. این را در مؤلفه Replyke خود اعمال کنید:

BlogCommentSection styleId="your-generated-style-id" />

این رویکرد باعث می شود که زیبایی شناسی بخش نظرات با طراحی برنامه شما هماهنگ شود و تجربه کاربر افزایش یابد.

به طور خلاصه، آخرین نسخه Replyke طیف وسیعی از ویژگی‌های قدرتمند جدید را ارائه می‌دهد که افزودن بخش نظرات به پروژه‌های React شما را آسان‌تر و همه‌کاره‌تر از همیشه می‌کند.
با معرفی سبک اجتماعی، بخش نظرات شما اکنون می تواند طراحی مدرن و الهام گرفته از شبکه های اجتماعی داشته باشد.
قلاب useReplyke اطلاعات مهم مقاله را برای کنترل بیشتر فراهم می‌کند و کتابخانه Express جدید راه‌اندازی backend را به یک خط کد ساده می‌کند. علاوه بر این، با کتابخانه جدید React Native، می‌توانید این ویژگی‌ها را به برنامه‌های تلفن همراه خود بیاورید و از تجربه کاربری سازگار و جذاب در همه پلتفرم‌ها اطمینان حاصل کنید.

چه یک توسعه‌دهنده باتجربه باشید و چه تازه وارد Replyke، این به‌روزرسانی‌ها همه چیزهایی را که برای ایجاد یک بخش نظرات یکپارچه و شیک در عرض چند دقیقه نیاز دارید، فراهم می‌کنند.

اگر از این مقاله لذت برده‌اید و Replyke را مفید می‌دانید – لطفاً حتماً من را در X/Twitter (حساب: yantsab) دنبال کنید، جایی که من به‌روزرسانی‌ها را پست می‌کنم تا Replyke را حتی بهتر کنم.