כיצד לבנות אפליקציית אינטרנט עם ChatGPT

אחת הטענות הגדולות ביותר של ההייפ סביב ChatGPT היא שזה יכול להיות כלי תכנות יעיל. הרעיון הולך כדלקמן: אתה מתאר את מה שאתה רוצה בשפה טבעית; הצ'אט בוט מייצר קוד שעושה בדיוק את זה. אבל עד כמה ChatGPT באמת טוב לעשות את זה?

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

שלב 1: יצירת התוכנית עבור אפליקציית האינטרנט שלך

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

למשימה הראשונה שלנו, ביקשנו מ-ChatGPT לפתח תוכנית לאפליקציית צ'אט פשוטה. לשם כך, תיארנו את הדרישות לאפליקציית האינטרנט שלנו ולאחר מכן ביקשנו מהצ'אטבוט לפרט תוכנית לפיתוח האפליקציה.

לאחר השימוש בהנחיה למעלה, הנה התוצאה שקיבלנו:

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

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

שלב 2: פיצול השרטוט למודולים קטנים יותר

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

1. מודול רישום
2. מודול כניסה
3. מודול צ'אט

היו לנו רעיונות אחרים, אבל המטרה כאן היא לתת ל-ChatGPT להחליט.

1. בניית רכיב הרישום

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

והנה התוצאה:

בשלב הבא, ביקשנו מ-ChatGPT לבנות את רכיב הרישום.

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

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

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

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

בשלב הבא ביקשנו מ-ChatGPT "כתוב קוד SQL כדי ליצור מסד נתונים עבור הנתונים שנלכדו בסקריפט PHP."הנה קוד ה-SQL שנוצר:

והנה הטבלה שנוצרה על ידי ביצוע ה-SQL:

עם הגדרת מסד הנתונים, ניסינו את הרישום הראשון שלנו, וזה עבד ללא שגיאות.

2. בניית רכיב הכניסה

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

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

לאחר יצירת קובץ "server.login.php" לפי ההנחיות של ChatGPT והוספת סקריפט ה-PHP שנוצר, ביצענו את הכניסה המוצלחת הראשונה שלנו ללא כל שינויים או ניפוי באגים.

3. בניית רכיב הצ'אט

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

ביקשנו מ-ChatGPT הצעות לפיצול רכיב הצ'אט, והוא הציע לנו ליצור שלושה עמודים:

1. Chat.php
2. Send-messages.php
3. Fetch-messages.php

כאשר ChatGPT מציע שם קובץ, שימוש בשם אחר בפרויקט שלך עלול לגרום בטעות בעיות מכיוון שהצ'אטבוט יפנה לאותו שם בכל הקוד שהוא יוצר לאורך כל הקוד פּרוֹיֶקט. גילינו בדרך הקשה. אל תעשה את אותה טעות.

יצירת דף Chat.php

כדי להתחיל, נתנו ל-ChatGPT הנחיות מפורטות כיצד רצינו שממשק הצ'אט ייראה.

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

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

יצירת העמוד "send-messages.php" ו-"Fetch-messages".

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

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

ChatGPT יצר את הסקריפט גם עבור הדפים "send-messages.php" וגם עבור "fetch-messages.php". בהרצת שני הסקריפטים, לבסוף הייתה לנו השגיאה הראשונה שלנו (שהייתה מספקת באופן מוזר). להגיע כל כך רחוק לתוך הפרויקט מבלי לנפות באגים בשורה אחת של קוד נראה קצת טוב מכדי להיות אמיתי, למרות הפשטות היחסית שלו.

מסתבר שהשגיאה נגרמה על ידי ChatGPT שהציג בדיקה עבור משתנה הפעלה לא מוצהר ($_SESSION['user_id']) לתוך התסריט שלנו. אנו חושדים שזו הייתה תוצאה של הפסקה די ארוכה מהפרויקט וכתוצאה מכך ChatGPT שוכח חלק מההקשרים והשמות של המשתנים המשמשים בפרויקט.

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

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

ChatGPT: עוזר קידוד מעולה

ChatGPT הוא ללא ספק עוזר קידוד רב עוצמה. זה שהצ'טבוט יכול להעלות קוד מרשים מהוראות פשוטות, ולפעמים לא כל כך ברורות, היא עדות ליכולת הקידוד שלו.

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