על מה הקורס הזה
יש לכם קובץ אקסל שעובד מצוין. מחשבון, טבלת לקוחות, משהו שבניתם ושיפצתם לאורך זמן. ואז מישהו שואל: “אפשר לקבל את זה כקישור?”
בקורס הזה נעבור, שלב אחרי שלב, מקובץ אקסל שיושב אצלכם במחשב לאפליקציית ווב שעובדת באינטרנט. ולא, זה לא יהיה רק “לחצו כאן, לחצו שם”. חשוב לי שתבינו מה קורה מאחורי הקלעים: מה זה דאטאבייס, איך עובדת הזדהות משתמשים, ולמה אבטחת מידע היא לא משהו ש"נסדר אחר כך".
בשיעור הראשון מתחילים בקטן. מחשבון אקסל פשוט הופך לעמוד אינטרנט. בדרך נדבר על סיומות קבצים, נבין למה קובץ שיושב אצלכם במחשב הוא עוד לא אתר, נעלה אותו ל-Cloudflare בגרירה, ונבדוק איך הוא נראה בטלפון.
מחשבון ROI הופך לעמוד אינטרנט
נקודת ההתחלה: מחשבון החזר השקעה (ROI) באקסל. מזינים עלות חומרי גלם, שעות עבודה ומחיר לשעה, ומקבלים רווח והחזר השקעה. שום דבר מתוחכם.
מעלים את הקובץ לצ’אט של Claude וכותבים לו בדיוק מה רוצים:
“please create a website from this excel file. I need it as a downloadable file”
שימו לב לחלק השני של ההנחיה. קלוד ייצור בצ’אט Artifact, רכיב ויזואלי שאפשר לשחק בו ישירות בממשק. נחמד, אבל אנחנו צריכים קובץ אמיתי ששמור אצלנו במחשב, ובשביל זה ביקשנו downloadable.
כדי להוריד, גוללים למטה בחלונית ה-Artifact שנפתחה מימין ולוחצים Download as HTML. אם ההורדה הישירה לא עובדת (קורה), מתחתיה יש קישור הורדה חלופי.
עכשיו פותחים את תיקיית ההורדות ופותחים את הקובץ בכרום. תשחקו קצת עם המספרים: תשנו את שעות העבודה, את עלות החומרים, ותראו שהתוצאה מתעדכנת מיד, בדיוק כמו באקסל. אני ממליץ לא לדלג על הבדיקה הזו. אם משהו בחישוב לא מסתדר, עדיף לגלות את זה עכשיו ולא אחרי שהאתר כבר באוויר.
אז יש לנו אתר? לא בדיוק
תסתכלו על שורת הכתובת בדפדפן. היא מתחילה ב-file:// ומצביעה על תיקייה אצלכם במחשב (My Own Downloads). במילים אחרות, האתר קיים רק אצלכם. תשלחו את הקישור הזה למישהו אחר והוא פשוט לא ייפתח לו.
“אז למה לא להריץ את האתר מהמחשב שלי?” שאלה לגיטימית. יש שתי סיבות טובות לא לעשות את זה:
- אבטחה. לפתוח את המחשב האישי לגישה מבחוץ זה להזמין צרות. כל הקבצים הפרטיים שלכם יושבים שם.
- משאבים. כל גולש שנכנס לאתר אוכל לכם זיכרון (RAM), כוח עיבוד ושטח אחסון. במחשב שאתם גם עובדים עליו.
הפתרון נקרא אירוח (Hosting): שרת חיצוני שמחזיק את הקובץ ומגיש אותו לכל מי שנכנס, בכתובת אינטרנט ציבורית.
העשרה קטנה: סיומות קבצים בווינדוס
אפשר לדלג, אבל אני לא ממליץ. לכל קובץ יש סיומת, מעין “שם משפחה” שמופיע אחרי הנקודה ואומר למחשב איזה סוג קובץ זה. ווינדוס מסתיר את הסיומות כברירת מחדל, ולדעתי זה מבלבל יותר ממה שזה עוזר.
כדי להציג אותן:
- בתיקיית הקבצים לוחצים על View (תצוגה) בסרגל העליון.
- עוברים ל-Show (הצג).
- מסמנים V ליד File name extensions (סיומות שמות קבצים).
עכשיו רואים שקובץ האקסל המקורי נגמר ב-.xlsx, והקובץ שהורדנו מקלוד נגמר ב-.html. HTML היא השפה שבה בנויים אתרי אינטרנט, וזה בדיוק מה שקיבלנו.
מעלים את האתר לאוויר עם Cloudflare
נרשמים ל-Cloudflare, מאשרים את המייל ונכנסים ל-Dashboard. יש להם מסלול חינמי נדיב מאוד לאירוח (למה בחרתי דווקא בהם, אסביר בשיעור הבא).
ההעלאה עצמה לוקחת בערך דקה:
- יוצרים במחשב תיקייה חדשה, נגיד בשם
Website, ומעבירים אליה את קובץ ה-HTML. - משנים את שם הקובץ ל-
index.html(F2, ובלי לגעת בסיומת). למה דווקא index? כי זה השם ששרתים מחפשים כברירת מחדל כשנכנסים לתיקייה. זה העמוד הראשי. - ב-Dashboard מחפשים Workers & Pages ולוחצים Create Application.
- בוחרים Upload static files.
- בוחרים את התיקייה
Website(או פשוט גוררים אותה פנימה), מאשרים את ההודעה על העלאת תיקייה ולוחצים Deploy. - כמה שניות וזהו. Cloudflare נותנת לכם סאב-דומיין חינמי, לוחצים Visit והאתר באוויר.
זה הרגע שמותר לחייך. יש לכם אתר אמיתי באינטרנט, שנבנה מקובץ אקסל, בלי לכתוב שורת קוד אחת.
רגע לפני שמתלהבים יותר מדי
האתר עובד, אבל בואו נהיה כנים לגבי מה שעוד חסר. על כל אחד מהדברים האלה נעבוד בשיעורים הבאים:
- הכתובת. קיבלנו משהו כמו
random-name.username.workers.dev. לא בדיוק מה ששולחים ללקוח. - אין שמירת נתונים. אין דאטאבייס מאחורי הקלעים, אז ברגע שמרעננים את הדף (F5), כל מה שהזנתם חוזר לערכים המקוריים מהאקסל.
- אין אבטחה. כל מי שיש לו את הקישור נכנס. בלי שם משתמש, בלי סיסמה, והנוסחאות העסקיות שלכם חשופות לכולם.
איך זה נראה בטלפון?
הרבה מהמשתמשים שלכם ייכנסו מהנייד, אז שווה לבדוק. ולא צריך בשביל זה טלפון, אפשר לעשות הכל מהמחשב:
- פותחים את האתר בכרום ולוחצים F12. נפתחים כלי המפתחים (Developer Tools).
- בחלק העליון של החלון יש אייקון של מחשב וטלפון ביחד (Toggle device toolbar). לוחצים עליו.
- במצב Responsive אפשר לגרור את שולי המסך ולראות איך התאים והאלמנטים מסתדרים מחדש. אפשר גם לבחור מהרשימה מכשיר ספציפי, נגיד iPhone.
מה שראינו כאן זה בדיוק עיצוב רספונסיבי (Responsive): למדנו שזה עיצוב שיודע להתאים את עצמו לכל גודל מסך ולכל מכשיר.
בשיעור הבא נכין את המחשב לעבודה רצינית יותר. מבטיח שזה פחות מפחיד ממה שזה נשמע.
