איך יוצרים אתר או משחק עם קלוד ואיך מעלים אותו ל-GitHub Pages?

שלום לכולם, היום אשתף אתכם במדריך שכתבתי ובו אני מסבירה צעד אחר צעד איך אפשר ליצור אתרי אינטרנט ב-Claude ולאחר מכן להעלות אותם לפלטפורמה החינמית של GitHub Pages. למי זה מתאים? זהו כלי נהדר למורים, מפתחים, או כל מי שמעוניין ליצור אתר ולפרסם אותו לעולם בקלות.

יצירת אפליקציה/ משחק באמצעות בינה מלאכותית

כתיבת פרומפט במודל שפה גדול

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

• טאב העבודה, בו קלוד מבצע בפועל את המשימה המורכבת – במקרה שלנו, כתיבת קוד.
• טאב הפירוויו (Preview), בו ניתן לראות את המוצר המוגמר – במקרה שלנו, האתר או המשחק.

אפשר כמובן לעבוד גם בצ’טבוט ג’נרטיבי אחר שטוב בקידוד, כמו ChatGPT.

להלן פרומפט לדוגמה – יצירת משחק לימודי:

“אני מורה לחשבון לגילאי 6-7 ואני רוצה ליצור משחק בקוד HTML ללימוד חיבור עד 10 ואחר כך עד 30 ואח”כ עד 100. במשחק תחילה התלמיד יכתוב את שמו ויהיה כפתור לחיצה שעליו יהיה כתוב ‘התחל משחק’. בשלב הראשון יש שישה בלונים שצורתם אליפסה עם חוט, והתלמיד יצטרך ללחוץ על כל שני בלונים שיחד סכומם יהיה 10. בשלב השני צור 10 בלונים שכל זוג סכומם יהיה 30. בשלב השלישי צור 12 בלונים שכל זוג סכומם יהיה 100. כל המספרים יהיו שלמים וחיוביים. בכל שלב יהיה על המסך מד זמן ו’ספירת נקודות’. בכל פעם שהתלמיד ימצא זוג בלונים מתאים, הוא יקבל נקודה. בסיום כל שלב, יהיה כפתור ‘עבור לשלב הבא’. בסיום המשחק לאחר כל השלבים תופיע תמונה של גביע עם מספר הנקודות שצבר התלמיד והמילים ‘כל הכבוד’. בתחילת כל שלב כתוב את ההוראה לאותו שלב, למשל: ‘מצא את זוגות הבלונים שסכומם 10’ ובתחילת השלב השלישי כתוב ‘מצא את זוגות הבלונים שסכומם 100’. כל בלון יהיה בצבע חזק ובוהק אחר, למשל: צהוב, טורקיז, ורוד, ירוק דשא, ורוד חזק. מד הזמן יופיע לכל אורך המשחק וימדוד את הזמן מרגע תחילת השלב הראשון ועד סיום השלב השלישי. דאג לכך שהבלונים יהיו מעורבבים ולא כל זוג בלונים מתאים יהיה אחד ליד השני. אני אצור תמונת רקע למשחק ואקרא לה בשם background.png, ותמונת גביע תופיע בסיום השלב האחרון ואקרא לה בשם victory.png. עדכן את הקבצים שאתה יוצר בשמות האלו. בנוסף, אני רוצה להוסיף קובץ שמע בשם sound.mp3, תוסיף גם אותו לקודים שאתה כותב.”

המדריכים תמיד חינמיים, אבל אם בא לכם להתמקצע - יש גם קורס מודלי שפה גדולים (LLM) – “קלוד”, ChatGPT ודאלי3

לפרטים נוספים לחצו כאן >>

פתיחת תיקייה ייעודית במחשב

פתחו תיקייה ייעודית במחשב שלכם ותנו לה שם (שם המשחק).

שמירת הקבצים

• יש להוריד את כל קבצי הקוד שהמחולל נתן. שימו לב לסיומות הקבצים (HTML, CSS, JS).
• יש לשמור את הקבצים בתיקייה הייעודית שפתחנו.
• אם אין כפתור הורדה, העתיקו את הקוד ל-Notepad ושמרו אותו בתיקייה הייעודית באותו שם שכתוב עליו, לרוב: index.html, styles.css, script.js.

שדרוג המשחק

• נמשיך ליצירת תמונת רקע ותמונת גביע לסיום המשחק.
• בקשו מקלוד ליצור את התמונות ותנו להן את השם בהתאמה למה שכתבנו לו, למשל background.png.
• כך גם לתמונת הניצחון בסיום המשחק, victory.png.
• יש לשמור את הקבצים בתיקייה הייעודית.

יצירת קובץ קול

• ניתן ליצור קובץ שמע למשחק ב”סונו” (Suno).
• זה פרומפט שאני אוהבת ושלדעתי שמתאים למשחקים מקוונים שכאלה – כתבו את התיאור: groovy, electronic, upbeat, fun.
• לאחר מכן שמרו את הקובץ בתיקייה הייעודית תחת השם: sound.mp3.

בדיקת המשחק

• לחצו קליק ימני עם העכבר על קובץ ה-html ובחרו ב”פתח באמצעות דפדפן גוגל כרום”, או לחלופין – גררו את קובץ ה-html ישירות מהתיקייה במחשב ושחררו אותו בתוך הדפדפן שלך.
• בשלב זה המשחק יפתח בתוך הדפדפן שלכם.
• אבל איך אפשר לשתף אותו, כך שגם אנשים אחרים יוכלו לשחק בו ברשת? לשם כך יש צורך לאחסן את המשחק באתר חיצוני.

אחסון, העלאת ושיתוף המשחק/אתר בלרשת

ישנן אופציות שונות לאחסון המשחק ברשת – אני בחרתי בגיטהאב (אתר חינמי וקל לתפעול).

הרשמה לגיטהאב

יש להיכנס לאתר GitHub ולבצע הרשמה.

פתיחת תיקיית משחק בגיטהאב

לחצו על על הפלוס בפינה הימנית העליונה ובחרו ב-New Repository.

בחירת שם לתיקייה

• תנו שם לתיקייה, למשל Balloon-Game.
• באותו עמוד לוודא שאופציית ה-Public מסומנת.
• יש לגלול כלפי מטה ולבחור ב-Create repository.

העלאת קבצים

• בחרו באפשרות Upload an existing file וגררו את כל הקבצים מהתיקייה שלנו במחשב אל תוך המלבן הייעודי (קבצי הקוד, התמונות וקובץ השמע).
• גללו מטה ולחצו על Commit changes.

העלאת התיקייה לאוויר

• יש ללחוץ על לשונית ה-Settings, ואז לבחור ב-Pages (צד שמאל ברשימה).
• תחת Build and deployment יש לבחור ב-Deploy from a branch.
• תחת Branch יש לבחור ב-Main וב-Root וללחוץ על Save.

קבלת הקישור לאתר

• לאחר כדקה יש לחזור לעמוד ה-Settings וללחוץ על Pages.
• שם נראה את כתובת האתר שלנו בצורה: http://username.github.io/balloon-game
• הערה: Username זה השם שלנו, והוא יופיע מתחת לכותרת: Your site is published at

שיתוף הקישור

זהו – מרגע זה הקישור למשחק שלכם פומבי וניתן לשתף אותו עם כל העולם.

כדאי לדעת

• ניתן לבנות באותה דרך משחקים, אפליקציות, אתרים ורכיבים אינטראקטיביים או מקוונים. הקפידו שלכל משחק או אתר שאתם יוצרים, יש קישור/תיקייה נפרדת בהתאם לשמו.
• רוצים להרחיב את הידע וללמוד לעומק איך לבנות פרומפטים מורכבים בקלוד? עומר הררי הכין לכם מדריך מפורט, בו הוא אף מדגים איך אפשר לבנות אפליקציית זיהוי אובייקטים בעזרת פרומפט בודד. עומר משתף במאמר את כל הפרומפטים שלו, לשימושכם החופשי.

הנדסת פרומפטים: ליצור הוראות מדויקות למודלי AI – כשאומנות ומדע נפגשים

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

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