הטמעת רכיב בחירת תאריך ושעה להזמנות

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

בעיות שאנחנו פותרים

המרת אזור זמן

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

function TimeSlotPicker({ resourceId, date, onSelect }: Props) { const { data: slots, isLoading } = useQuery({ queryKey: ['slots', resourceId, format(date, 'yyyy-MM-dd')], queryFn: () => fetchTimeSlots(resourceId, date), }); if (isLoading) return <SlotsSkeleton />; const grouped = groupBy(slots, slot => slot.datetime.getHours() < 13 ? 'morning' : 'afternoon' ); return ( <div className="space-y-4"> {grouped.morning && ( <div> <p className="text-sm text-gray-500 mb-2">Утро</p> <div className="grid grid-cols-4 gap-2"> {grouped.morning.map(slot => ( <button key={slot.id} disabled={!slot.available} onClick={() => onSelect(slot)} className={cn( 'py-2 rounded-lg text-sm border transition', slot.available ? 'border-blue-200 hover:bg-blue-50 hover:border-blue-500' : 'border-gray-100 text-gray-300 cursor-not-allowed' )} > {format(slot.datetime, 'HH:mm')} </button> ))} </div> </div> )} </div> ); } 

לפרויקטים רב-אזוריים, אנו מאפשרים למשתמשים לבחור במפורש אזור זמן—זה מפחית שגיאות משמעותית. בפרויקט אחד עם 10 אזורי זמן, תלונות על זמנים שגויים ירדו ב-80% לאחר הוספת בורר מפורש.

כפילויות הזמנות

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

למשאבים קריטיים (למשל, רופאים, חדרי מלון) אנו בוחרים נעילה פסימית; לאירועים המוניים שבהם התנגשויות מזדמנות נסבלות, אנו משתמשים בנעילה אופטימית.

יישום נעילה בצד השרת עם Redis ו-TTL:

// Конвертация серверного UTC в локальное время пользователя const localSlot = utcToZonedTime(slot.datetime_utc, userTimezone); const displayTime = format(localSlot, 'HH:mm', { timeZone: userTimezone }); 

טעויות יישום טיפוסיות:

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

איך אנחנו עושים את זה (מקרה בוחן)

בפרויקט מרפאות רפואיות, אבחנו ש-95% מהכשלים בהזמנות נבעו מבאגים בהמרת אזור זמן. עיצבנו מחדש את השרת כך שיאחסן את כל התאריכים אך ורק ב-UTC והוספנו שדה function TimeSlotPicker({ resourceId, date, onSelect }: Props) { const { data: slots, isLoading } = useQuery({ queryKey: ['slots', resourceId, format(date, 'yyyy-MM-dd')], queryFn: () => fetchTimeSlots(resourceId, date), }); if (isLoading) return <SlotsSkeleton />; const grouped = groupBy(slots, slot => slot.datetime.getHours() < 13 ? 'morning' : 'afternoon' ); return ( <div className="space-y-4"> {grouped.morning && ( <div> <p className="text-sm text-gray-500 mb-2">Утро</p> <div className="grid grid-cols-4 gap-2"> {grouped.morning.map(slot => ( <button key={slot.id} disabled={!slot.available} onClick={() => onSelect(slot)} className={cn( 'py-2 rounded-lg text-sm border transition', slot.available ? 'border-blue-200 hover:bg-blue-50 hover:border-blue-500' : 'border-gray-100 text-gray-300 cursor-not-allowed' )} > {format(slot.datetime, 'HH:mm')} </button> ))} </div> </div> )} </div> ); } לכל משבצת. בפרונטאנד, השתמשנו ב-// Конвертация серверного UTC в локальное время пользователя const localSlot = utcToZonedTime(slot.datetime_utc, userTimezone); const displayTime = format(localSlot, 'HH:mm', { timeZone: userTimezone }); כדי להמיר לזמן המקומי של המשתמש. להגנה מפני כפילויות הזמנות, יישמנו נעילה פסימית עם Redis (TTL של 10 דקות). לאחר הפריסה, אובדן ההזמנות ירד לכמעט אפס. הפתרון כולו נבנה תוך שבועיים.

מחסן הטכנולוגיות שלנו

פרונטאנד: React 18 / Next.js, TypeScript, date-fns-tz. בקאנד: Laravel 11 או Django 4, PostgreSQL, Redis. תשתית: קונטיינרים של Docker, צינור CI/CD.

השוואה של ספריות תאריכים פופולריות:

מה כלול בעבודה שלנו

• פיתוח רכיב לוח שנה עם בחירת טווח וטיפול בחריגים
• לוגיקת בקאנד למשבצות זמן עם מטמון Redis
• API להזמנות עם אימות בצד השרת (זמינות, אזורי זמן)
• תיעוד רכיב וסכמת נתונים
• כיסוי קוד עם בדיקות יחידה ואינטגרציה
• הוראות פריסה

הניסיון שלנו: למעלה מ-10 שנים ו-40+ פרויקטים שיושמו בהצלחה. לקוחות בדרך כלל מפחיתים תקלות תמיכה בעד 25%.

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

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

1. איסוף נתונים וניתוח דרישות
2. עיצוב ארכיטקטורת פרונטאנד ובקאנד
3. פיתוח ובדיקת הרכיב
4. פריסה ואימות על התשתית שלכם

הערכות זמן:

• רכיב בסיסי למשאב אחד: 2–3 ימי עסקים
• תמיכה רב-אזורית, לוגיקת חזרות מורכבת, אינטגרציה עם מערכות חיצוניות (CRM): עד שבועיים

העלות נקבעת לאחר ייעוץ חינם. צרו קשר כדי להתחיל.

שלב אחר שלב: המרת אזור זמן (הגישה שלנו)

1. השרת מאחסן את כל התאריכים ב-UTC—ללא יוצאים מן הכלל.
2. הלקוח מקבל רשימת משבצות עם שדה import redis r = redis.Redis() def reserve_slot(slot_id, user_id, ttl=600): key = f"slot:{slot_id}:reserved" if r.setnx(key, user_id): r.expire(key, ttl) return True return False ואזור הזמן של המשתמש (מפרופיל או ממיקום גיאוגרפי).
3. באמצעות datetime_utc בפרונטאנד, המירו כל תאריך לזמן מקומי לפני הצגתו.
4. בעת שליחת הזמנה, שלחו date-fns-tz בלבד—השרת קובע את ה-UTC לפי מזהה המשבצת.

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