מה צריך לפני שמתחילים

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

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

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

לחיצה על Create פותחת צ׳אט חדש שכבר ממתין עם תחילת פרומפט מוכנה - "Make me a @Sites about ..." - ונשאר רק להשלים. הדרך השנייה, המהירה: בצ׳אט חדש מעבירים את המתג בראש המסך מ-Chat ל-Work ומקלידים @Sites בעצמכם - ההקלדה של @ פותחת תפריט עם הכלים המחוברים.

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

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

לפני שמפרסמים, עוברים על חמישה דברים: מובייל, כפתורים, טופס, RTL ו-SEO. את המובייל בדקתי ברוחב 390 פיקסלים - וקיבלתי בדיוק את מה שביקשתי בפרומפט, כולל כפתור ההרשמה הדביק בתחתית.

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

בדיקת הטופס: מילאתי נרשמת בדיקה בדויה ("נועה כהן") ושלחתי. הודעת ההצלחה הופיעה באותו עמוד, בדיוק כפי שהוגדר בפרומפט - וי ירוק, "קיבלנו את ההרשמה!", בלי מעבר לעמוד אחר.

גם ה-SEO שביקשתי בפרומפט נכנס: כותרת הדף היא "פול פנימי | סדנאות קפה בתל אביב", ותיאור ה-meta הוא בדיוק 155 תווים בעברית. אפשר לוודא בלשונית הדפדפן או בקוד המקור של הדף.

פרטי או פומבי? כך עובד הפרסום

אתר חדש נוצר במצב "Only you" - רק אתם. ניסיתי לפתוח את הכתובת בטאב רגיל וקיבלתי חומת התחברות: "This site uses ChatGPT to securely sign you in". זה מצוין לאתרים פנימיים, אבל דף נחיתה צריך להיות פתוח לכולם.

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

שלב 1: מחברים את Google (פעם אחת)

כדי ש-ChatGPT יוכל ליצור גיליון ולבדוק מיילים, הוא משתמש בקונקטורים של Google. אצלי חיבור ה-Gmail פג תוקף, אז קיבלתי כרטיס "Reconnect Gmail" - לוחצים Reconnect, בוחרים חשבון, מסמנים את תיבת ההרשאה ולוחצים המשך. זה תהליך OAuth רגיל של Google, אותו אחד שאתם עושים בכל אפליקציה.

שלב 2: ChatGPT יוצר את הגיליון לבד

שלב 3: Apps Script - הגשר בין האתר לגיליון ולמיילים

נקודה חשובה שכדאי להבין: אתר ציבורי לא יכול לכתוב ישירות לגיליון שלכם או לשלוח מייל בשמכם - Google דורשת שתאשרו זאת פעם אחת מתוך החשבון, באמצעות פריסה של Apps Script. ChatGPT הסביר את זה בעצמו, נתן לי קוד מלא מוכן להדבקה והנחיות שלב-אחר-שלב. ככה זה נראה בשיחה:

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

var CONFIG = {
  SPREADSHEET_ID: "YOUR_SHEET_ID",   // המזהה מכתובת הגיליון
  SHEET_NAME: "הרשמות",
  OWNER_EMAIL: "you@example.com",    // לאן נשלחת ההתראה
  BUSINESS_NAME: "שם העסק",
  SECRET_TOKEN: "CHOOSE_A_LONG_RANDOM_TOKEN"
};

function doGet() {
  return jsonOut({ ok: true, message: "service is up" });
}

function doPost(e) {
  var lock = LockService.getScriptLock();
  try {
    lock.waitLock(15000);
    var data = readBody(e);
    if (data.token !== CONFIG.SECRET_TOKEN) {
      return jsonOut({ ok: false, error: "Unauthorized" });
    }
    var reg = {
      fullName: clean(data.fullName),
      phone: clean(data.phone),
      email: clean(data.email).toLowerCase(),
      workshopType: clean(data.workshopType),
      preferredDate: clean(data.preferredDate),
      notes: clean(data.notes)
    };
    if (!reg.fullName || !reg.phone || !reg.email) {
      return jsonOut({ ok: false, error: "missing fields" });
    }
    var sheet = SpreadsheetApp.openById(CONFIG.SPREADSHEET_ID)
      .getSheetByName(CONFIG.SHEET_NAME);
    var now = Utilities.formatDate(new Date(), "Asia/Jerusalem", "dd/MM/yyyy HH:mm:ss");
    sheet.appendRow([now, reg.fullName, reg.phone, reg.email,
      reg.workshopType, reg.preferredDate, reg.notes]);

    MailApp.sendEmail({
      to: CONFIG.OWNER_EMAIL,
      replyTo: reg.email,
      name: CONFIG.BUSINESS_NAME,
      subject: "הרשמה חדשה - " + reg.fullName,
      htmlBody: "<div dir=\"rtl\"><h2>הרשמה חדשה מהאתר</h2>" +
        "<p><b>שם:</b> " + esc(reg.fullName) + "</p>" +
        "<p><b>טלפון:</b> " + esc(reg.phone) + "</p>" +
        "<p><b>אימייל:</b> " + esc(reg.email) + "</p>" +
        "<p><b>סוג סדנה:</b> " + esc(reg.workshopType) + "</p>" +
        "<p><b>תאריך מועדף:</b> " + esc(reg.preferredDate) + "</p>" +
        "<p><b>הערות:</b> " + esc(reg.notes) + "</p></div>"
    });

    MailApp.sendEmail({
      to: reg.email,
      replyTo: CONFIG.OWNER_EMAIL,
      name: CONFIG.BUSINESS_NAME,
      subject: "קיבלנו את ההרשמה שלך - " + CONFIG.BUSINESS_NAME,
      htmlBody: "<div dir=\"rtl\"><p>היי " + esc(reg.fullName.split(" ")[0]) + ",</p>" +
        "<p>תודה שנרשמת. קיבלנו את הפנייה שלך ונחזור אליך תוך יום עסקים.</p>" +
        "<p>" + CONFIG.BUSINESS_NAME + "</p></div>"
    });

    return jsonOut({ ok: true });
  } catch (err) {
    console.error(err);
    return jsonOut({ ok: false, error: String(err) });
  } finally {
    try { lock.releaseLock(); } catch (e2) {}
  }
}

function readBody(e) {
  if (e && e.postData && e.postData.contents) {
    try { return JSON.parse(e.postData.contents); } catch (err) {}
  }
  return (e && e.parameter) ? e.parameter : {};
}
function clean(v) { return String(v || "").trim(); }
function esc(v) {
  return String(v || "").replace(/&/g, "&amp;").replace(/</g, "&lt;")
    .replace(/>/g, "&gt;").replace(/"/g, "&quot;");
}
function jsonOut(data) {
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

פותחים את הגיליון, בוחרים בתפריט תוספים ואז Apps Script, מוחקים את הקוד הריק שבעורך ומדביקים. שומרים (Ctrl+S), בוחרים את הפונקציה doGet ליד כפתור ההפעלה, ולוחצים הפעלה - זה מדליק את תהליך ההרשאות:

שלב 4: פורסים כאפליקציית אינטרנט ומחברים את האתר

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

את הכתובת הזאת שולחים ל-ChatGPT בצ׳אט של האתר ("זו כתובת ה-Web app: ... חבר את האתר החי ובדוק"). כאן קרה הדבר האלגנטי באמת: הוא חיבר את הטופס דרך צד השרת של האתר - כך שהטוקן הסודי לא נחשף לאף גולש - ואז הריץ בעצמו הרשמת בדיקה מלאה ואימת את כל השרשרת:

לא סומכים על אף אחד, כולל על ChatGPT - בודקים לבד, ודווקא באתר הציבורי (לא בתצוגה המקדימה!). פתחתי את האתר החי בדפדפן, נרשמתי בתור "נועה כהן", וקיבלתי את הודעת ההצלחה:

כשמשהו לא עובד: תקלות נפוצות

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

שאלות נפוצות

זהו. מרעיון בצ׳אט ועד עסק שמקבל לידים למייל - בערך שעתיים של עבודה נטו, שרובן היה לצפות ב-Sites עובד. האתר של פול פנימי נשאר חי בכתובת pol-pnimi-coffee.roit87.chatgpt.site - מוזמנים להיכנס, ואפילו להירשם לסדנה שלא קיימת. המייל שיישלח אליכם בחזרה הוא בדיוק החיבור שבניתם עכשיו במדריך. ואם דף הנחיתה היה בשבילכם רק ההתחלה - קחו את אותו התהליך בדיוק ונסו אותו על דאשבורד, מעקב פרויקט או מסלול לטיול הבא שלכם.