המטרה
לאפשר ללקוחות עסקיים להזמין בגדי עבודה מודפסים אונליין בעצמם - לבחור פריטים, צבעים, מידות וכמויות, להעלות לוגו, לראות איך ההדפסה תיראה ולשלם - במקום הלוך ושוב בטלפון ובמייל על כל הזמנה.
הפתרון
מערכת Vue 3 + Express + MongoDB עם אשף הזמנה בעברית שבנוי קודם כל למובייל: בחירת קטגוריה ומוצר, מטריצת צבע x מידה x כמות, גרפיקה נפרדת לחזית ולגב לכל פריט עם הסרת רקע חינמית בדפדפן, הדמיה של ההדפסה על כל צבע שנבחר, סיכום הזמנה ותשלום דרך Cardcom v11 LowProfile עם הפקת חשבונית אופציונלית. ללקוחות יש חשבון עם היסטוריית הזמנות, הזמנה חוזרת בלחיצה ושחזור סיסמה. לעסק יש פאנל ניהול להזמנות, לקוחות, מוצרים, קטגוריות, ספריית מיקומי הדפסה עם עורך אזורים אינטראקטיבי, ניהול מלאי עם התראות על מלאי נמוך, הגדרות SMTP וייצוא ל-Excel.
עיקרי הדברים
- הלקוח מעצב, רואה הדמיה ומשלם על הזמנה מודפסת בלי לדבר עם אף אחד
- הסרת רקע ללוגו בדפדפן בחינם - בלי API בתשלום
- הדמיה חיה של ההדפסה על כל צבע שהלקוח בחר
- סליקת Cardcom מוקשחת עם בדיקת מחירים בשרת ו-callback מאומת
- האדמין מנהל קטלוג, מיקומי הדפסה, מלאי והזמנות בלי מפתח
האתגר
לקוחות מעלים לוגו כ-JPG עם רקע לבן או אוף-וייט, שנראה כמו ריבוע לבן כשמדפיסים על בגד כהה - ו-API בתשלום להסרת רקע היה מוסיף עלות לכל הזמנה.
כתבתי הסרת רקע חינמית בדפדפן על Canvas: היא מזהה את הצבע הדומיננטי בכל מסגרת התמונה, מדלגת על תמונות שהמסגרת שלהן לא בצבע אחיד (תמונות צילום), וממלאת לשקוף רק רקע שמחובר לשוליים, כך שאזורים לבנים בתוך הלוגו נשמרים. קבצים וקטוריים (PDF/AI/EPS) עוברים בלי שינוי.
מיקומי ההדפסה (חזה, גב, שרוול וכו') והמידות שלהם משתנים לפי סוג מוצר, והזנה ידנית שלהם בכל מוצר לא מחזיקה כשהקטלוג גדל.
בניתי ספריית מיקומים לשימוש חוזר עם מידות בס"מ וסדר תצוגה, קישרתי קטגוריות למיקומים כך שמוצרים חדשים מתמלאים אוטומטית, הוספתי סנכרון שמעדכן מוצרים קיימים, ועורך אזורים אינטראקטיבי שמציג כל מיקום על תמונת מוצר אמיתית.
קבלת תשלום אמיתי על עגלה שנבנית בדפדפן פירושה שהלקוח יכול לשנות מחירים, וה-callback של הסליקה יכול להיות מזויף או נשלח שוב.
מחירים ומלאי מחושבים ונבדקים מחדש בשרת לפני שנפתח סשן Cardcom, מזהה הסשן נשמר על ההזמנה כך שה-callback מאומת מול אותו סשן בדיוק, ולכל הזמנה יש טוקן גישה נגד IDOR. העלאות מוגבלות לפי סיומת ו-MIME, והעלאת SVG הוסרה כדי לסגור פרצת XSS.
אחרי פגישה עם הלקוח מודל ההזמנה השתנה משמעותית - שורות עם כמה צבעים וגרפיקה נפרדת לחזית ולגב - כשכבר היו הזמנות במבנה הישן.
העברתי את סכמת ההזמנה ל-variants[] ולגרפיקה במבנה {front, back} עם קריאה תואמת לאחור, כך שחשבוניות, הורדת מלאי והאדמין ממשיכים לעבוד גם על הזמנות ישנות וגם על חדשות בלי מיגרציה.
מה נמסר
- אשף הזמנה ללקוח (Vue 3, מובייל קודם, RTL)
- Express REST API עם מודלים ב-MongoDB למוצרים, קטגוריות, מיקומים, הזמנות, לקוחות והגדרות
- אינטגרציית סליקה של Cardcom עם הפקת חשבונית אופציונלית
- פאנל ניהול עם ייצוא ל-Excel והתראות מייל
- הגדרות פריסה serverless עם אחסון קבצים
תוצאות
7
מסכי ניהול
End-to-end
אשף הזמנה
Cardcom
סליקה
Hebrew RTL
תצוגה
מה זה לימד אותי
- בעסק של הדפסות ההדמיה היא המוצר - ההשקעה בשלב התצוגה המקדימה הייתה חשובה יותר מכל פיצ'ר באדמין
- אלגוריתם פשוט וממוקד (צבע מסגרת + מילוי מהשוליים) מכסה את רוב הלוגואים האמיתיים בלי שירות חיצוני
- תכנון סכמת ההזמנה עם קריאה תואמת לאחור הפך שינוי דרישות באמצע הפרויקט לזול