Add Comment Widgets to Your React Native App

זו הספרייה הרשמית של React Native עבור FastComments.

הטמעו ווידג'טים של תגובות בזמן אמת, צ'אט וביקורות באפליקציית React Native שלכם.

מאגר

הדגמה חיה

כדי לראות כל ווידג'ט וכל זרימה שרצים באופן מקומי מול ה־tenant הציבורי demo, שיבטו את המאגר והריצו:

yarn bootstrap
cd example
yarn ios       # או: yarn android, yarn web

נקודת הכניסה של תצוגת ההדגמה היא example/src/ShowcaseApp.tsx — אפליקציה אחת שמציגה את כל הווידג'טים, ערכות הנושא והזרימות.

היעד yarn web משתמש ב־react-native-web + react-native-web-webview (שמציג את ה־WebView כ־iframe). שימושי לבדיקות חזותיות מהירות בדפדפן; ממשקי ה־WebView המיועדים לנייטיב בלבד כמו injectJavaScript ו־onShouldStartLoadWithRequest לא יתפקדו במלואם בגרסת ה־web.

התקנה

npm install react-native-webview --save
npm install fastcomments-react-native --save

שקול את ה-SDK הנייטיב

ספרייה זו משתמשת ב-webview שמקיף את ספריית VanillaJS.

FastComments כעת תומכת במימוש מקומי מלא של הלקוח שלנו כחלק מ-fastcomments-react-native-sdk.

אם ברצונך במימוש מקומי מלא, כדאי לבדוק שם.

ממשק ה-API שונה במעט בהשוואה ל-fastcomments-react. ב-native, אנו מעבירים אובייקט config שעוקב אחרי המבנה הזה.

import { FastCommentsCommentWidget } from 'fastcomments-react-native';

// ...

  const myTenantId = 'demo'; // מזהה ה-tenant שלך. ניתן לאחזר אותו מ-https://fastcomments.com/auth/my-account/api-secret
  const myAppPageId = 'native-test'; // מזהה או כתובת URL של שרשור התגובות באפליקציה שלך.
  const myAppPageUrl = 'https://example.com/external-page'; // באפשרותך לבחור להגדיר כתובת URL לעמוד חיצוני
  const myAppPageTitle = 'Example Title'; // ... ובגלל זה כנראה תרצה כותרת לתוכן זה
  const [config, setConfig] = useState({
    tenantId: myTenantId,
    urlId: myAppPageId,
    url: myAppPageUrl,
    pageTitle: myAppPageTitle
  });

  // על-ידי קריאה ל-setConfig() אנחנו יכולים לבצע פעולות כמו שינוי הדף הנוכחי, או המשתמש המחובר כעת
  // ראה example/src/App.tsx

  return (
      <FastCommentsCommentWidget config={config}/>
  );

import { FastCommentsLiveChatWidget } from 'fastcomments-react-native';

// ...

  const myTenantId = 'demo'; // מזהה השוכר שלך. ניתן להשיג אותו מ https://fastcomments.com/auth/my-account/api-secret
  const myAppPageId = 'native-test'; // ה-ID או ה-URL של שרשור התגובות באפליקציה שלך.
  const myAppPageUrl = 'https://example.com/external-page'; // ניתן באופן אופציונלי להגדיר URL לדף חיצוני
  const myAppPageTitle = 'Example Title'; // ... ואולי תרצה כותרת לתוכן זה
  const config = {
    tenantId: myTenantId,
    urlId: myAppPageId,
    url: myAppPageUrl,
    pageTitle: myAppPageTitle
  };

  return (
      <FastCommentsLiveChatWidget config={config}/>
  );

שימוש - SSO (כניסה יחידה)

FastComments משתמש ב־HMAC עבור SSO מאובטח. כדי להשתמש, בקצה השרת שלך צור את אובייקט ה‑SSO (תכונת התצורה sso) ושלח אותו לוווידג'ט התגובות.

ניתן למצוא דוגמאות עבור מגוון backend-ים, כאן: https://github.com/FastComments/fastcomments-code-examples/tree/master/sso

תלויות עמיתים

fastcomments-react-native דורש את react-native-webview. לכן עליך לעקוב אחרי שלבי ההתקנה של react-native-webview.

אזור חשבון (תשומת לב: לקוחות מהאיחוד האירופי)

אם החשבון שלך ממוקם באיחוד האירופי, הגדר region = 'eu' בתצורת הווידג'ט.

אחרת, אינך צריך להגדיר את `region`.

מצב תחזוקה

מרכיבים אלה הם עטיפות סביב רכיבי ה-VanillaJS המרכזיים שלנו. אנו יכולים לעדכן אוטומטית את המרכיבים האלה (לתקן באגים, להוסיף תכונות) ללא פרסום של ספריה זו, לכן למרות שייתכן שלא תתפרסם בתקופה מסוימת — זה לא אומר ש‑FastComments אינה בפיתוח פעיל! אתם מוזמנים לבדוק את הבלוג שלנו לעדכונים. שינויים מהותיים ב-API או תכונות שישברו תאימות לא ישולבו בספריית הליבה הבסיסית מבלי העלאת גרסה בספריה הזו.

זקוק לעזרה?

במידה ונתקלתם בבעיות או יש לכם שאלות לגבי ספריית React Native, אנא:

תרומה

תרומות מתקבלות בברכה! בקרו במאגר ה-GitHub לקבלת הנחיות לתרומה.

תיעוד

התחלה

שימוש

Add Comment Widgets to Your React Native App

מאגר

הדגמה חיה

התקנה

שקול את ה-SDK הנייטיב

אם ברצונך במימוש מקומי מלא, כדאי לבדוק שם.

שימוש - ווידג'ט תגובות בזמן אמת

שימוש - ווידג'ט צ'אט בזמן אמת

שימוש - SSO (כניסה יחידה)

תלויות עמיתים

אזור חשבון (תשומת לב: לקוחות מהאיחוד האירופי)

אחרת, אינך צריך להגדיר את `region`.

מצב תחזוקה

זקוק לעזרה?

תרומה

שפה 🇮🇱 עברית

תיעוד

התחלה

שימוש

Add Comment Widgets to Your React Native App

מאגר

הדגמה חיה

התקנה

שקול את ה-SDK הנייטיב

אם ברצונך במימוש מקומי מלא, כדאי לבדוק שם.

שימוש - ווידג'ט תגובות בזמן אמת

שימוש - ווידג'ט צ'אט בזמן אמת

שימוש - SSO (כניסה יחידה)

תלויות עמיתים

אזור חשבון (תשומת לב: לקוחות מהאיחוד האירופי)

אחרת, אינך צריך להגדיר את region.

מצב תחזוקה

זקוק לעזרה?

תרומה

אחרת, אינך צריך להגדיר את `region`.