דילוג לתוכן

בניית כלי אדמין פנימי

מתחילים~12 דק׳0/4 שלבים

משחררים כלי פנימי בדקות

לכל צוות מוצר יש תור של בקשות בסגנון "שמישהו כבר יבנה לנו מסך אדמין מהיר". כמנהלי מוצר, אתם כבר לא צריכים לחכות בתור. עם AI וקצת Tailwind, אתם יכולים לבנות אב-טיפוס של בדיוק הכלי הפנימי שצוות התפעול שלכם צריך.

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

תישארו פרגמטיים. כלים פנימיים לא חייבים להיות יפים — הם חייבים להיות ברורים, מהירים ושמישים לצוות שלכם.

הוראות

1

הוסיפו כותרת עמוד (h1) בשם "פאנל ניהול משתמשים" בתוך div ממורכז

רמז: השתמשו ב: `<div class="max-w-4xl mx-auto p-8"><h1 class="text-3xl font-bold mb-6">פאנל ניהול משתמשים</h1></div>`

איפה כותבים את זה?

<!-- בנו כאן את פאנל האדמין שלכם -->

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

2

הוסיפו טבלת נתונים עם עמודות כותרת (שם, תפקיד, פעולות) ולפחות שורת נתונים אחת

3

הוסיפו כפתורי פעולה של עריכה ומחיקה בתוך שורות הטבלה

4

הוסיפו טופס "הוספת פריט" עם שדות טקסט וכפתור שליחה

הקוד שלכם

html
13 שורות
1
2
3
4
5
6
7
8
9
10
11
12
13

תצוגה חיה

תצוגה חיה