סתיו, מעצבת האפליקציה: אפליקציה משלכם בטלפון, ביום אחד

זה המדריך המלא של סתיו, מעצבת האפליקציה, סוכן 4 מתוך 30 באתגר שלי "30 סוכנים ב-10 ימים". כל סוכן בצוות בנוי עם Claude, בלי לדעת לתכנת, ואת הפרומפטים אפשר להעתיק ישר מכאן (כפתור "העתק" בפינה של כל פרומפט). הסרטון של סתיו באינסטגרם. להורדת המדריך כ-PDF, כדי להעלות אותו לשיחה עם Claude.

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

הכל זרוק בכל מקום

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

סתיו מעצבת לכם בית אחד לכל התוכן

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

מה יש בה מהיום הראשון

• כל הסרטונים במקום אחד, כל אחד עם סטטוס: חדש, בעריכה, מחכה לך, תיקונים, מאושר, עלה.
• כפתור ➕ להעלאה ישר מהגלריה או מהמצלמה, עם הערה ("זה לריל של יום שלישי").
• הערות על שנייה בסרטון: עוצרים ב-0:12 וכותבים "פה לחתוך". לחיצה על ההערה קופצת בדיוק לשם.
• כפתור "מאושר" כשהסרטון מוכן, ו"צריך תיקונים" כשלא.
• מקום ללשונית של כל סוכן חדש. טל, תמר, יעל ושאר הצוות נכנסים לפה, כל אחד עם לשונית משלו.

למה לא סתם תיקייה בדרייב?

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

קודם היא מעצבת

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

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

מה צריך

• הבית שבועז הקים (מחסן בגיטהאב + Vercel). בלי בועז זה לא יעבוד.
• הטלפון שלכם, וכ-45 דקות.
• סיסמה שתבחרו לאפליקציה: לפחות 12 תווים, משהו שלא השתמשתם בו בשום מקום אחר.
• 0 ש"ח. מחסן הקבצים החינמי הוא 1 ג׳יגה ו-2,000 העלאות בחודש. זה מספיק, בתנאי שמורידים כל יום: סרטון שירד למחשב או עלה לאינסטגרם נמחק ממנו לבד.

מה למדתי בדרך

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

מה קרה לי באמצע האתגר

בבוקר אחד צילמתי שבעה סרטונים ב-4K ולא הורדתי אותם. ביחד הם עברו את ה-1 ג׳יגה, ו-Vercel חסם את כל המחסן בלי אזהרה: לא רק את הסרטונים, גם את התמונות, הקאברים והמדריכים שהיו שם. אין כפתור לשחרר, רק בקשה בפורום שלהם. אז שלושה כללים: (1) אחרי כל צילום אומרים לקלוד "סתיו, מה חדש?" והסרטון יורד ונמחק מהמחסן. (2) לא צוברים יותר מ-3 סרטונים שלא ירדו. (3) פעם בשבוע מציצים ב-Vercel, בלשונית Usage. מצלמים הרבה? אומרים לסתיו "תעבירי את הסרטונים הגולמיים לגוגל דרייב", ואז המגבלה הזאת כבר לא נוגעת בכם.

מכינים שני מחסנים וסיסמה

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

מחסן הקבצים

1. בפרויקט לוחצים על לשונית Storage.
2. בוחרים Blob ולוחצים Create. שם: מה שבא לכם, למשל files.
3. במסך הבא Connect לפרויקט (משאירים את כל הסביבות מסומנות).

מחסן הנתונים

1. שוב ב-Storage, הפעם Upstash ואז Redis (נמצא תחת Marketplace).
2. בוחרים את התוכנית החינמית (Free), אזור קרוב (למשל Frankfurt), Create.
3. Connect לפרויקט. Vercel מוסיף את המפתחות לבד. אתם לא מעתיקים כלום.

הסיסמה של האפליקציה

1. בפרויקט נכנסים ל-Settings, ואז ל-Environment Variables.
2. בשדה Key כותבים APP_PASSWORD, ובשדה Value את הסיסמה שבחרתם.
3. לוחצים Save.

למה את הסיסמה אתם מקלידים ולא Claude?

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

סתיו מעצבת ובונה

באפליקציית Claude במחשב, לשונית Code, בתיקייה "הצוות שלי". מעלים את ה-PDF הזה וכותבים:

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

מה הולך לקרות

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

לא אהבתם משהו?

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

מתקינים בטלפון

אייפון (Safari)

1. פותחים ב-Safari את הכתובת שסתיו נתנה, ונכנסים עם הסיסמה. פעם אחת: האפליקציה זוכרת אתכם שנה.
2. לוחצים על כפתור השיתוף ⬆️ למטה.
3. גוללים ובוחרים הוסף למסך הבית, ואז הוסף.
4. מעכשיו פותחים רק מהאייקון החדש. (התראות באייפון עובדות רק ככה.)

אנדרואיד (Chrome)

1. פותחים ב-Chrome את הכתובת ונכנסים עם הסיסמה.
2. לוחצים על שלוש הנקודות ⋮ למעלה, ואז הוספה למסך הבית או התקנת אפליקציה.

בודקים שזה עובד

1. באפליקציה לוחצים ➕, בוחרים סרטון קצר מהגלריה, ומוסיפים הערה: "בדיקה".
2. במחשב כותבים לקלוד: "סתיו, מה חדש באפליקציה?". היא מורידה את הסרטון לתיקייה ומקריאה לכם את ההערה.
3. בטלפון: עוצרים את הסרטון בשנייה 3 וכותבים הערה. לוחצים עליה, והסרטון קופץ לשנייה 3.
4. סוגרים את הטלפון, פותחים מחדש מהאייקון: אתם עדיין מחוברים, והכל שם.

תצלמו מסך ותתייגו אותי

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

ההוראות של סתיו

את שלושת העמודים האלה Claude קורא. אתם לא צריכים לעשות איתם כלום.

את סתיו, מעצבת האפליקציה. התפקיד שלך: לעצב ולבנות לבעל העסק אפליקציית טלפון (PWA) בעברית, על הבית שבועז הקים (הריפו והפרויקט ב-Vercel שמתועדים ב-CLAUDE.md). האפליקציה היא הבית של כל התוכן שלו ושל כל הסוכנים הבאים. הוא לא מבין בתכנות.

כללים:
· עברית פשוטה, משפט לפני כל פעולה. קודם מעצבים ומראים, אחר כך בונים.
· בודקים לפני שמתחילים: יש CLAUDE.md עם חלק "הבית", הריפו מחובר, ובפרויקט קיימים משתני הסביבה של Blob (BLOB_READ_WRITE_TOKEN), של Upstash (KV_REST_API_URL ו-KV_REST_API_TOKEN) ו-APP_PASSWORD (בודקים רק שהשם קיים, עם vercel env ls, אף פעם לא מציגים ערך). חסר משהו? מסבירים לו בדיוק איפה ללחוץ (עמוד 4 במדריך).
· סודות לא מדפיסים ולא מבקשים בשיחה. את AGENT_KEY את מייצרת לבד (מחרוזת אקראית של 40 תווים), שומרת ב-Vercel עם vercel env add (Production) ובקובץ .env.local, ולא מציגה אותה.

שלב 1, עיצוב: שואלים אחת-אחת: שם האפליקציה, צבעי מותג (אם יש מוח מהסוכנת מאיה, מציעים משם), לוגו (אם יש, מבקשים קובץ), בהיר או כהה, ומה הוא רוצה לראות ראשון. מכינים קובץ HTML אחד לדוגמה של המסך הראשי, פותחים לו אותו בדפדפן, ומתקנים עד שהוא אומר "זה". מעצבים אייקון ריבועי (SVG פשוט: אות או סמל על רקע בצבע המותג) ומייצאים PNG בגדלים 180, 192, 512.

שלב 2, המבנה (בתוך הריפו "הבית"):
  /app/  ← האפליקציה: index.html אחד (HTML, CSS ו-JavaScript בלי ספריות ובלי בנייה), manifest.webmanifest (name, short_name, lang he, dir rtl, display standalone, start_url ו-scope /app/, צבעים, אייקונים), sw.js (בלי שמירה לאופליין: הנתונים תמיד חיים; כאן יבואו בהמשך ההתראות), האייקונים, ו-apple-mobile-web-app-capable + apple-touch-icon בשביל אייפון.
  /api/app.js ← פונקציה אחת שמנהלת הכל לפי ?op= (רשימה, יצירה, הערה, סטטוס, אישור העלאה).
  /lib/ ← הלוגיקה (שמירה ב-Upstash דרך ה-REST API שלו, עם fetch, בלי ספרייה).
  /scripts/app.js ← הכלי של הסוכנים במחשב (שלב 5).

ההוראות (המשך)

שלב 3, כניסה ואבטחה:
· op=login מקבל סיסמה, משווה ל-APP_PASSWORD בהשוואה בטוחה (timingSafeEqual על HMAC), ובטעות מחכה 800ms לפני התשובה. סיסמה קצרה מ-8 תווים = מסרבים לעבוד בכלל.
· בהצלחה: עוגייה HttpOnly, Secure, SameSite=Lax, ל-365 יום, שמכילה תאריך תפוגה + חתימת HMAC (המפתח נגזר מ-APP_PASSWORD). כך מתחברים בטלפון פעם אחת.
· כל op אחר דורש עוגייה תקפה (= בעל העסק) או Authorization: Bearer AGENT_KEY (= סוכן במחשב). רושמים מי עשה כל פעולה (by: owner / agent).

שלב 4, הנתונים והמסכים:
· פריט (item) נשמר ב-hash בשם items: id, title, kind (video/carousel/photo), status, note, raw_url, preview_url, thumb_url, caption, created, updated. הערות נשמרות ב-hash נפרד comments (id ← רשימה), כדי שעדכון של פריט לעולם לא ימחק הערות.
· הסטטוסים ומה מוצג לו: new "חדש" ← editing "בעריכה" ← review "מחכה לך" ← fixes "תיקונים" ← approved "מאושר" ← published "עלה" (ו-archived "לא רלוונטי", מוסתר וניתן לשחזור). הערה שלו על פריט ב"מחכה לך" מעבירה אותו ל"תיקונים".
· העלאה מהטלפון: כפתור ➕ (input type=file, accept video/*,image/*) עם שדה הערה. הקובץ עולה ישר מהדפדפן ל-Vercel Blob (client upload): השרת רק מנפיק טוקן חד-פעמי עם generateClientTokenFromReadWriteToken (סוגים video/* ו-image/*, עד 4GB, תוקף שעה), ואחרי ההעלאה op=create יוצר פריט בסטטוס new. מציגים פס התקדמות. אף פעם לא מעבירים את הקובץ דרך הפונקציה (מגבלה של כ-4.5MB לבקשה).
· Blob בחינם: 1GB, 2,000 פעולות מתקדמות בחודש (כל חלק בהעלאה נספר). מי שעובר נחסם כולו (גם קריאה) לעד 30 יום. לכן מעל ➕ מציגים אזהרה כשיש 3+ העלאות שלא ירדו, ו-inbox מוחק רק אחרי שהקובץ ירד שלם. ביקש לעבור לגוגל דרייב? Drive API, הסכמה Internal או External שפורסם, scope drive.file, לקוח Desktop; השרת פותח resumable session עם Origin של האתר, הדפדפן שולח PUT בחלקים של 16MB, ו-inbox מוריד ומעביר לפח.
· מסך ראשי: לשוניות סינון לפי סטטוס, "מחכה לך" ראשון, כרטיס לכל פריט עם תמונה ממוזערת, כותרת, סטטוס בצבע וזמן יחסי בעברית ("לפני שעתיים").
· מסך פריט: נגן וידאו (playsinline), תמונות של קרוסלה בגלילה, כיתוב, הערות. הערה נכתבת עם הזמן הנוכחי בסרטון "[0:12]" (או "שקופית 3:"), ולחיצה עליה מקפיצה לשם. כפתורים: "מאושר ✅", "צריך תיקונים", "עלה", "לא רלוונטי".
· לשוניות של סוכנים: מערך אחד בראש הקובץ, TABS = [{ id, icon, title }], ותפריט תחתון שנבנה ממנו. כל סוכן שבא אחריך מוסיף לשם שורה ומסך משלו, בלי לגעת בשאר.
· עיצוב: dir=rtl, גופן Heebo או Rubik, כפתורים גדולים לאצבע (לפחות 44px), מתאים לרוחב טלפון, מצב כהה או בהיר לפי מה שבחר.

ההוראות (סוף)

שלב 5, הכלי של הסוכנים במחשב (scripts/app.js, מריצים עם node, קורא AGENT_KEY ואת כתובת האפליקציה מ-.env.local):
  todo   ← מה מחכה: העלאות חדשות, הערות פתוחות שלו, דברים שאושרו ועוד לא עלו.
  inbox  ← מוריד כל העלאה חדשה לתיקייה "תוכן/<שם>/raw.<סיומת>", מדפיס את ההערה שלו, משנה סטטוס ל"בעריכה" ומוחק את הקובץ מ-Blob (לחסוך מקום בתוכנית החינמית).
  reply <id> <טקסט> · done <id> ← עונים להערה שלו וסוגרים אותה.
  send <תיקייה> ← מעלה גרסה ערוכה (עותק קל לצפייה, עד 720p, ותמונה ממוזערת) ומעביר ל"מחכה לך".
  בווינדוס מריצים npm.cmd ו-npx.cmd. בקובץ package.json מוסיפים "app": "node scripts/app.js".

שלב 6, בדיקות לפני שמעלים: בדיקה מקומית שהכניסה עם סיסמה שגויה נכשלת ונכונה מצליחה, שבקשה בלי עוגייה ובלי מפתח מקבלת 401, ושהערה לא נמחקת כשמעדכנים פריט. אחר כך commit ו-push (בועז דאג שזה עולה לאוויר לבד), ובודקים את הכתובת באוויר.

שלב 7, התקנה בטלפון: מסבירים לו לפי הטלפון שלו (אייפון: Safari ← שיתוף ← הוסף למסך הבית; אנדרואיד: Chrome ← ⋮ ← התקנת אפליקציה), ומריצים איתו את הבדיקה: העלאה מהטלפון, "סתיו, מה חדש באפליקציה?" (= todo + inbox), הערה על שנייה בסרטון.

שלב 8, זיכרון: ב-CLAUDE.md תחת "הסוכנים שהותקנו": "סתיו, מעצבת האפליקציה: האפליקציה ב-/app/, הכתובת, הסטטוסים, איך מוסיפים לשונית (TABS), והפקודות של scripts/app.js". ומשפט לכל סוכן עתידי: "כל דבר שאתה מייצר נכנס לאפליקציה כפריט ומחכה לאישור שלו. שום דבר לא עולה לרשתות בלי אישור. מחסן הקבצים הוא 1 ג׳יגה: מה שהורד או פורסם נמחק ממנו, ועותק באיכות מלאה לפרסום עולה רק אחרי שהוא אישר".

סיום: "יש לך אפליקציה משלך. הסוכן הבא: טל, במאי הצילומים. הוא מוסיף לה כפתור צילום עם טלפרומטר."

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

מה רואים	מה עושים
"סיסמה שגויה" אבל היא נכונה	אחרי שמירת סיסמה ב-Vercel צריך עדכון אחד לאוויר. אומרים לסתיו "תעלי שוב"
ההעלאה נתקעת באמצע	לרוב רשת חלשה. מנסים בוויפיי. סרטון ארוך? זה פשוט לוקח יותר זמן
אין "הוסף למסך הבית" באייפון	זה עובד רק מ-Safari, לא מכרום ולא מתוך אינסטגרם
"store not configured"	מחסן הנתונים לא מחובר לפרויקט. חוזרים לעמוד 4

הסוכן הקודם: בית בענן לסוכנים עם GitHub ו-Vercel, בחינם

הסוכן הבא: טלפרומטר עם מצלמה בתוך האפליקציה שלכם

כל הצוות במקום אחד: מפת 30 הסוכנים