מערכת סימניות עם מסד נתונים פולימורפי, Laravel API, React

בעלי אתרי תוכן רבים מתמודדים עם מצב: משתמשים קוראים חומרים באופן פעיל אך אינם יכולים לשמור אותם לצפייה מאוחרת יותר. היעדר מערכת סימניות מפחית את שימור המשתמשים ואת זמן השהייה באתר. יישום פשוט מוביל לעיתים קרובות לכפילויות, לשאילתות איטיות ולחוויית משתמש ירודה. יישמנו עשרות מערכות כאלה — מטוגלים בסיסיים ועד אוספים מורכבים עם סנכרון בין מכשירים. אנו מציעים פתרון מוכח המבוסס על יחס פולימורפי שעובד עבור כל ישות: מאמרים, מוצרים, רשימות משרות, סרטונים.

כיצד היחס הפולימורפי עובד במסד הנתונים

האתגר המרכזי הוא לתכנן את מסד הנתונים כך שלא תצטרכו ליצור טבלאות נפרדות לכל סוג תוכן. היחס הפולימורפי פותר זאת עם טבלת bookmarks אחת:

CREATE TABLE bookmarks (
    id SERIAL PRIMARY KEY,
    user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
    bookmarkable_id INTEGER NOT NULL,
    bookmarkable_type VARCHAR(50) NOT NULL,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
    UNIQUE (user_id, bookmarkable_id, bookmarkable_type)
);
CREATE INDEX ON bookmarks(user_id, bookmarkable_type, created_at DESC);

גישה זו מבטיחה ייחודיות עבור כל זוג משתמש-ישות, והאינדקס מאפשר שליפה מהירה של סימניות המשתמש ממוינות לפי זמן. בפרויקט אמיתי, נתקלנו במקרה שבו שאילתה ללא אינדקס ארכה 2 שניות עבור 10,000 סימניות — לאחר הוספת האינדקס, הזמן ירד ל-10 מילישניות. תיעוד Laravel: יחסים פולימורפיים מאפשרים למודל להשתייך ליותר ממודל אחד על אסוציאציה יחידה.

למה פולימורפי עדיף על טבלאות נפרדות

פולימורפי מפחית את נפח הקוד פי 3–5 ומפשט את התחזוקה. כאשר מופיע סוג תוכן חדש (למשל, וידאו), פשוט מוסיפים רשומה ב-CREATE TABLE bookmarks ( id SERIAL PRIMARY KEY, user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE, bookmarkable_id INTEGER NOT NULL, bookmarkable_type VARCHAR(50) NOT NULL, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(), UNIQUE (user_id, bookmarkable_id, bookmarkable_type) ); CREATE INDEX ON bookmarks(user_id, bookmarkable_type, created_at DESC); — ללא מיגרציות למסד הנתונים.

תוכנית יישום שלב אחר שלב

1. ניתוח ועיצוב מסד נתונים — 0.5 ימים. הגדרת סוגי ישויות, יצירת מיגרציה.
2. יישום API ב-Laravel — 0.5–1 יום. בקר טוגל, ולידציה, תיעוד.
3. יצירת קומפוננטת React — 0.5–1 יום. ממשק משתמש אופטימי, נגישות.
4. אינטגרציה ובדיקות — 0.5 ימים. בדיקות יחידה, בדיקות ידניות.
5. פריסה ותיעוד — 0.5 ימים. הוראות למפתחים, פריסת שרת.

כיצד API הטוגל מיושם ב-Laravel

ה-API משתמש בנקודת קצה אחת שמחליפה את מצב הסימנייה. אנו משתמשים בבקר עם מתודות bookmarkable_type ו-toggle:

class BookmarkController extends Controller {
    public function toggle(Request $request, string $type, int $id): JsonResponse {
        $existing = Bookmark::where([
            'user_id' => auth()->id(),
            'bookmarkable_type' => $type,
            'bookmarkable_id' => $id,
        ])->first();

        if ($existing) {
            $existing->delete();
            return response()->json(['bookmarked' => false]);
        }

        Bookmark::create([
            'user_id' => auth()->id(),
            'bookmarkable_type' => $type,
            'bookmarkable_id' => $id,
        ]);

        return response()->json(['bookmarked' => true], 201);
    }

    public function index(Request $request): JsonResponse {
        $bookmarks = Bookmark::where('user_id', auth()->id())
            ->when($request->type, fn($q) => $q->where('bookmarkable_type', $request->type))
            ->with('bookmarkable')
            ->latest()
            ->paginate(20);

        return response()->json($bookmarks);
    }
}

שימו לב: מתודת ה-index תומכת בסינון לפי סוג ובפאג'ינציה — חשוב לדף 'הסימניות שלי'. ללא class BookmarkController extends Controller { public function toggle(Request $request, string $type, int $id): JsonResponse { $existing = Bookmark::where([ 'user_id' => auth()->id(), 'bookmarkable_type' => $type, 'bookmarkable_id' => $id, ])->first(); if ($existing) { $existing->delete(); return response()->json(['bookmarked' => false]); } Bookmark::create([ 'user_id' => auth()->id(), 'bookmarkable_type' => $type, 'bookmarkable_id' => $id, ]); return response()->json(['bookmarked' => true], 201); } public function index(Request $request): JsonResponse { $bookmarks = Bookmark::where('user_id', auth()->id()) ->when($request->type, fn($q) => $q->where('bookmarkable_type', $request->type)) ->with('bookmarkable') ->latest() ->paginate(20); return response()->json($bookmarks); } } , הייתם מקבלים שאילתות N+1, שאינן מקובלות בקנה מידה גדול.

אם אתם זקוקים למערכת כזו, הזמינו יישום סוהר.

function BookmarkButton({ type, id, initialBookmarked }: BookmarkProps) {
  const [bookmarked, setBookmarked] = useState(initialBookmarked);
  const toggle = async () => {
    setBookmarked(!bookmarked);
    try {
      await api.post(`/api/bookmarks/${type}/${id}/toggle`);
    } catch {
      setBookmarked(bookmarked);
    }
  };
  return (
    <button
      onClick={toggle}
      aria-label={bookmarked ? 'Удалить из закладок' : 'Добавить в закладки'}
      aria-pressed={bookmarked}
      className={`bookmark-btn ${bookmarked ? 'bookmark-btn--active' : ''}`}
    >
      {bookmarked ? '🔖' : '🏷️'}
    </button>
  );
}

ממשק משתמש אופטימי: כיצד להימנע מעיכובים?

עדכון אופטימי נותן משוב תוך 0 אלפיות השנייה, אך דורש טיפול בשגיאות. בפרויקט לחנות מקוונת, יישמנו 5 כפתורי סימניות בעמוד — משתמשים ציינו שהאתר הפך ל"מהיר" לאחר יישום גישה זו. החלופה היא ממשק פסימי עם אינדיקטור טעינה, אך במכשירים ניידים זה מגביר את התחושה של השהיה ב-300–500 אלפיות השנייה. השתמשו ב-index כדי למנוע מצבי מרוץ בלחיצות מהירות.

תהליך ולוח זמנים

סה"כ: 1 עד 2 ימים ליישום בסיסי. לוח הזמנים עשוי להתארך אם נדרשים סנכרון בין מכשירים או ייצוא סימניות. בפרויקט אחד, נדרשנו להוסיף תמיכה ב-WebSocket לסנכרון מיידי בין טאבים — זה לקח יום נוסף.

מה כלול

• תיעוד API (OpenAPI/Swagger)
• קוד מקור עם הערות (Laravel + React)
• הוראות פריסה (Docker + CI/CD)
• אחריות לתפקוד באחסון שלכם
• שבועיים של תמיכה לאחר היישום

טעויות נפוצות ביישום סימניות

• חוסר באילוץ ייחודיות — משתמש יכול להוסיף את אותו עמוד מספר פעמים, מה ששובר את לוגיקת הטוגל.
• התעלמות מממשק משתמש אופטימי — השהיה של 0.5–1 שנייה הורגת את תחושת ההיענות.
• שאילתת N+1 בעת שליפת with('bookmarkable') — השתמשו תמיד ב-function BookmarkButton({ type, id, initialBookmarked }: BookmarkProps) { const [bookmarked, setBookmarked] = useState(initialBookmarked); const toggle = async () => { setBookmarked(!bookmarked); try { await api.post(`/api/bookmarks/${type}/${id}/toggle`); } catch { setBookmarked(bookmarked); } }; return ( <button onClick={toggle} aria-label={bookmarked ? 'Удалить из закладок' : 'Добавить в закладки'} aria-pressed={bookmarked} className={`bookmark-btn ${bookmarked ? 'bookmark-btn--active' : ''}`} > {bookmarked ? '🔖' : '🏷️'} </button> ); } .
• סוג נתונים שגוי עבור AbortController — השתמשו ב-bookmarkable עם קבועים כדי למנוע שגיאות כתיב.

קבלו ייעוץ ליישום סימניות באתר שלכם — נעריך את הפרויקט שלכם ביום אחד ונציע את הארכיטקטורה האופטימלית. צרו קשר כדי לחשב את עלות הפרויקט. לצוות שלנו ניסיון של למעלה מ-5 שנים בפיתוח יישומי ווב והוא השלים למעלה מ-50 פרויקטים עם מערכות סימניות ואוספים.