בניתי אפליקציית אימייל עם AI וכך עשיתי זאת

למה בכלל לבנות אפליקציית אימייל כשיש Gmail?

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

הרעיון לא היה לבנות מתחרה ל-Gmail. המטרה הייתה לבנות שכבה מעל ה-API הקיים שמבינה את ההקשר שלי ומציגה את המידע בצורה שמתאימה לאופן שבו אני עובד. AI הפך את זה לאפשרי בלי צוות פיתוח שלם.

הגדרת הדרישות לפני שורת קוד אחת

הטעות הכי נפוצה שאני רואה אצל אנשים שמתחילים לבנות עם AI היא לפתוח את Cursor ולהתחיל לכתוב פרומפטים לפני שהם יודעים מה הם בונים. בניתי רשימה של חמש דרישות ליבה לפני שנגעתי בקוד:

• חיבור ל-Gmail API עם גישה לקריאה ושליחה
• סיווג אוטומטי של אימיילים לפי שולח ונושא
• סיכום שרשורים ארוכים עם AI
• ממשק שמציג רק מה שרלוונטי לפי שעה ביום
• אפשרות לכתוב תגובות עם עזרת AI

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

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

בחירת ה-Stack הטכנולוגי

בחרתי Next.js 14 עם App Router, Supabase לבסיס נתונים ואימות, Gmail API לגישה לאימיילים, ו-OpenAI API עם GPT-4o לפיצ'רים של AI. הדיפלוי על Vercel. הסיבה לבחירות האלה פשוטה: כולן מתועדות היטב, ל-AI יש הרבה דוגמאות קוד עליהן, וניתן לשלב ביניהן בלי חיכוך גדול.

שקלתי להשתמש ב-Electron לאפליקציה דסקטופ, אבל web app נותן גמישות גדולה יותר ומאפשר גישה מכל מקום. Supabase ספציפית הייתה בחירה מצוינת כי היא מטפלת ב-OAuth tokens בצורה מאובטחת ומספקת Row Level Security מהקופסה.

חיבור ל-Gmail API: איפה רוב האנשים נתקעים

Google Cloud Console הוא לא הממשק הכי ידידותי שנבנה אי פעם. הגדרת פרויקט, הפעלת Gmail API, הגדרת OAuth consent screen, ויצירת credentials לוקחת כשעה בפעם הראשונה. ה-AI עזר לי לכתוב את קוד האימות, אבל לא יכול היה לעשות את ההגדרות ב-Google Console בשבילי.

שני דברים שלמדתי בדרך הקשה:

• ה-scope שצריך לבקש הוא https://www.googleapis.com/auth/gmail.modify ולא gmail.readonly אם רוצים גם לסמן אימיילים כנקראים
• Google מגבילה אפליקציות לא מאומתות ל-100 משתמשים בלבד. לשימוש אישי זה מספיק, אבל אם מתכננים להפיץ, צריך לעבור תהליך אימות שלוקח 2-4 שבועות
• Refresh tokens פגים אחרי 7 ימים אם האפליקציה לא עברה אימות. צריך לטפל בזה בקוד
• Rate limits של Gmail API: 250 quota units לשנייה, כאשר קריאת הודעה עולה 5 units. לאפליקציה אישית זה לא בעיה, אבל כדאי לדעת

הקוד לאימות OAuth כתב ה-AI כמעט בשלמותו. נתתי לו את ה-scopes הנדרשים ואת מבנה ה-Supabase שלי, וקיבלתי קוד עובד תוך כמה דקות. הבעיה הייתה שהוא שכח לטפל ב-token refresh. זה דבר שצריך לבדוק ידנית.

איך בנויה שכבת ה-AI בתוך האפליקציה

שלושה פיצ'רים של AI נכנסו לגרסה הראשונה. כל אחד מהם מבוסס על קריאה ל-OpenAI API עם פרומפט שונה:

סיכום שרשורים: כשפותחים שרשור עם יותר מ-5 הודעות, האפליקציה שולחת את כל ההודעות ל-GPT-4o עם פרומפט שמבקש סיכום של 3-4 משפטים שכולל את ההחלטות שהתקבלו ואת הצעד הבא הנדרש. זה הפיצ'ר שאני משתמש בו הכי הרבה.

סיווג אוטומטי: כל אימייל חדש עובר דרך פרומפט שמסווג אותו לאחת מ-6 קטגוריות שהגדרתי מראש. הדיוק עומד על כ-85%, שזה טוב מספיק לשימוש יומיומי.

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

ניהול עלויות ה-API בפועל

זה משהו שמעט מדריכים מדברים עליו בכנות. OpenAI API עולה כסף, ואם לא מתכננים נכון, החשבון יכול להפתיע. בחודש הראשון שילמתי 4.20 דולר על שימוש אישי. הנה הפירוט:

• סיכום שרשורים: כ-2,000 tokens לשרשור ממוצע, כ-15 שרשורים ביום
• סיווג אימיילים: כ-300 tokens לאימייל, כ-80 אימיילים ביום
• עזרת כתיבה: כ-500 tokens לשימוש, כ-10 פעמים ביום

הוספתי rate limiting פשוט שמגביל את מספר הקריאות ל-API לשעה. זה מונע מצב שבו לולאה שגויה שולחת אלפי בקשות. כלל אצבע: תמיד הגדירו spending limit ב-OpenAI לפני שמתחילים לפתח.

שגיאות שעשיתי ומה למדתי מהן

שלוש שגיאות בלטו במיוחד לאורך הפרויקט.

הראשונה: שמרתי את ה-OAuth tokens ב-localStorage של הדפדפן. זה נוח לפיתוח אבל מסוכן לפרודקשן. מישהו עם גישה לדפדפן יכול לגנוב את הטוקן ולקרוא את כל האימיילים שלך. העברתי את כל הטוקנים ל-Supabase עם הצפנה.

השנייה: ביקשתי מה-AI לכתוב את כל הקוד בבת אחת. קיבלתי 400 שורות שעבדו בחלקן. עבדתי הרבה יותר טוב כשפירקתי כל פיצ'ר לחלקים קטנים ובדקתי כל חלק לפני שעברתי לבא.

השלישית: לא תכננתי את מבנה הנתונים ב-Supabase מראש. אחרי שבוע של פיתוח, הבנתי שהמבנה לא מאפשר לי לבצע queries יעילים. נאלצתי לעשות migration שלקח חצי יום. שווה להשקיע שעה בתכנון הסכמה לפני שמתחילים.

לתיעוד מעמיק של שימוש בכלי AI לפיתוח, כולל GitHub ו-Git, כדאי לעיין במדריך GitHub ו-Git למייסדים ללא רקע טכני.

מה ה-AI עשה טוב ומה עשה גרוע

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

מה עבד מצוין: כתיבת קוד boilerplate, הסבר שגיאות, המרת מבנה נתונים, כתיבת פרומפטים ל-OpenAI, ויצירת קומפוננטות UI בסיסיות. Cursor IDE עם Claude Sonnet חסך לי בין 60 ל-70 אחוז מזמן הכתיבה.

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

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

הממשק: מה שינה הכל

הגרסה הראשונה של הממשק הייתה רשימה פשוטה של אימיילים עם כפתורי פעולה. עבדה, אבל לא הייתה שונה מספיק מ-Gmail כדי להצדיק את הבנייה. השינוי שהפך את האפליקציה לשימושית באמת היה תצוגת "Focus Mode".

Focus Mode מציג רק אימיילים שה-AI סיווג כדחופים או כדורשים תגובה, מסודרים לפי שולח ולא לפי זמן. במקום לגלול דרך 80 אימיילים בוקר, רואים 12 שדורשים תשומת לב. זה שינה את האופן שבו אני מתחיל את יום העבודה.

v0 של Vercel עזר לי לבנות את הממשק הראשוני. נתתי לו תיאור טקסטואלי של מה שאני רוצה וקיבלתי קומפוננטות React שעבדו כנקודת התחלה. לא כל מה שיצא היה שמיש, אבל זה חסך לי כמה שעות של כתיבת CSS.

מה הצעד הבא אחרי גרסה ראשונה עובדת

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

• חיבור ל-Calendar API כדי לזהות אימיילים שמכילים בקשות לפגישות ולהציע זמנים פנויים אוטומטית
• תמיכה ב-Outlook בנוסף ל-Gmail, דרך Microsoft Graph API
• מצב "Snooze חכם" שה-AI מחליט מתי להחזיר אימייל לתצוגה על בסיס תוכן ולא רק זמן

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

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