الأخبار التكنولوجية والاستعراضات والنصائح!

كيفية إنشاء تطبيق ويب باستخدام ChatGPT

ستساعدك المقالة التالية: كيفية إنشاء تطبيق ويب باستخدام ChatGPT

أحد أكبر ادعاءات الضجيج المحيط بـ ChatGPT هو أنه يمكن أن يكون أداة برمجة فعالة. الفكرة هي كما يلي: تصف ما تريده بلغة طبيعية ؛ يقوم برنامج الدردشة الآلي بإنشاء رمز يقوم بذلك بالضبط. ولكن ما مدى جودة ChatGPT بالفعل في القيام بذلك؟

فيديو اليوم

مراجعة متعمقة لآلة صانع Snapmaker Artisan 3 في 1 استثمار جيد للصانعين المتطلبين وورش العمل الصغيرة مع تبديل أداة بسيط.

ما هي أفضل طريقة لمعرفة ذلك من إخضاعها للاختبار؟ طلبنا من ChatGPT إنشاء تطبيق ويب بسيط من البداية. إليك نتيجة الاختبار والخطوات التي يمكنك استخدامها لإنشاء موقع ويب من البداية باستخدام ChatGPT.

الخطوة 1: إنشاء مخطط لتطبيق الويب الخاص بك

تمامًا مثلما تفعل عند إنشاء تطبيق ويب باستخدام أي أداة ، ستحتاج إلى وضع مخطط لما تريد أن يبدو عليه تطبيقك والخطوات التي ستحتاجها لإنشائه قبل السماح لـ ChatGPT بتشغيل العرض.

في مهمتنا الأولى ، طلبنا من ChatGPT تطوير مخطط لتطبيق دردشة بسيط. للقيام بذلك ، وصفنا متطلبات تطبيق الويب الخاص بنا ، ثم طلبنا من الشات بوت تفاصيل خطة لتطوير التطبيق.

بعد استخدام الموجه أعلاه ، ها هي النتيجة التي حصلنا عليها:

ستحتاج إلى تمكين المكوّن الإضافي “Show Me” في حساب ChatGPT الخاص بك لإنشاء مخطط انسيابي مثلنا أعلاه. يمكنك تثبيت واستخدام مكونات ChatGPT الإضافية في بضع خطوات فقط ، على الرغم من أنك ستحتاج إلى اشتراك متميز.

بدون المكون الإضافي ، ستحصل على مخطط نصي أو مخطط انسيابي ASCII-art. لا يزال هذا على ما يرام. حتى بدون المكون الإضافي ، يجب أن يظل 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. بناء مكون تسجيل الدخول

مع خروج مكون التسجيل من الطريق ، أخذنا مكون تسجيل الدخول. والمثير للدهشة أنه كان الأسهل في البناء على الرغم من المنطق الإضافي لإدارة الجلسة.

ها هي صفحة تسجيل الدخول التي تم إنشاؤها. ومن أبرز ما يميزه أنه يستخدم نفس خيارات الألوان مثل صفحة التسجيل.

بعد إنشاء ملف “server.login.php” وفقًا لتعليمات ChatGPT وإضافة نص PHP الذي تم إنشاؤه ، قمنا بأول تسجيل دخول ناجح بدون أي تعديلات أو تصحيح أخطاء.

3. بناء مكون الدردشة

كان بناء مكون الدردشة هو الجزء الأخير – وربما الأصعب – من تجربتنا الصغيرة. في البداية ، طلبنا ببساطة من ChatGPT كتابة رمز مكون الدردشة. وغني عن القول إنه كان فشلاً ذريعاً. للحصول على مكونات أكثر تعقيدًا لأي شيء تريد إنشاءه ، ستحتاج إلى تقسيمه إلى مكونات أصغر ومعالجتها واحدة تلو الأخرى.

طلبنا من ChatGPT اقتراحات حول تقسيم مكون الدردشة ، واقترحنا إنشاء ثلاث صفحات:

  1. Chat.php
  2. إرسال-messages.php
  3. إحضار الرسائل. php

عندما يقترح ChatGPT اسم ملف ، فإن استخدام اسم مختلف في مشروعك قد يتسبب عن غير قصد في حدوث مشكلات لأن chatbot سيشير إلى نفس الاسم في جميع التعليمات البرمجية التي ينشئها خلال المشروع. اكتشفنا الطريق الصعب. لا ترتكب نفس الخطأ.

إنشاء صفحة Chat.php

للبدء ، قدمنا ​​تعليمات تفصيلية لـ ChatGPT حول كيف أردنا أن تبدو واجهة الدردشة.

بعد تشغيل كود HTML الذي تم إنشاؤه ، أصبح لدينا واجهة دردشة بدون مربع إدخال رسالة. لإصلاح ذلك ، طلبنا ببساطة ChatGPT إلى “أعد كتابة الكود لتضمين مربع إدخال رسالة وزر إرسال.“إليك كيفية ظهور الشفرة التي تم إنشاؤها على المتصفح في الإصدار التجريبي الثاني.

عندما يفشل الرمز الذي تم إنشاؤه في إعطاء النتائج المرجوة أو حذف مكون مهم ، ما عليك سوى مطالبة ChatGPT بإعادة كتابة الرمز الأخير. اطلب منه تضمين المكون أو القيام بأي شيء لم يتم القيام به في الكود الأولي. فيما يلي بعض النصائح حول كيفية استخدام ChatGPT في البرمجة.

إنشاء صفحتي “send-messages.php” و “Fetch-messages”

راضيًا عن الواجهة ، شرعنا في بناء البرنامج النصي للتعامل مع منطق الدردشة. لتتمكن من إرسال الرسائل وجلبها من قاعدة البيانات ، أبرز ChatGPT حقًا أننا سنحتاج إلى جدول “رسائل”. طلبنا من chatbot إنشاء SQL لجدول الرسائل.

بعد إنشاء كود SQL ، طلبنا من chatbot إنشاء نص PHP للتعامل مع منطق المراسلة.

أنشأ ChatGPT البرنامج النصي لكل من صفحتي “send-messages.php” و “fetch-messages.php”. عند تشغيل كلا النصين ، كان لدينا أخيرًا الخطأ الأول (والذي كان مرضيًا بشكل غريب). يبدو أن الوصول إلى هذا الحد في المشروع دون تصحيح سطر واحد من التعليمات البرمجية أمر جيد جدًا لدرجة يصعب تصديقها ، على الرغم من بساطته النسبية.

اتضح أن الخطأ ناتج عن قيام ChatGPT بتقديم فحص لمتغير جلسة غير معروف (_SESSION دولار[‘user_id’]) في نصنا. نشك في أن هذا كان نتيجة لأخذ استراحة طويلة من المشروع مما أدى إلى نسيان ChatGPT بعض سياقات وأسماء المتغيرات المستخدمة في المشروع.

عند استخدام ChatGPT لإنشاء تطبيق ، تأكد من استخدام نفس سلسلة الدردشة وحاول إكمال المكونات ذات الصلة في أقرب وقت ممكن. قد يؤدي استخدام سلسلة محادثات جديدة أو أخذ استراحة طويلة إلى حدوث تناقضات. يميل ChatGPT إلى نسيان بعض تفاصيل المشروع الحالي (مثل نظام الألوان) إذا كنت تأخذ فترات راحة طويلة بين جلسات البرمجة.

ومع ذلك ، أصلحنا الخطأ ونشرنا الكود. قمنا بالتسجيل وتسجيل الدخول وجربنا ميزة الدردشة. بينما كنا قادرين على إرسال رسائل من مستخدم مسجل إلى آخر ، كان لون وترتيب فقاعات الرسائل متوقفين قليلاً. ومع ذلك ، بالنسبة إلى تطبيق استغرق ساعة و 23 دقيقة لإكماله ، فلن نحكم عليه بقسوة.

ChatGPT: مساعد ترميز ممتاز

من الواضح أن ChatGPT هو مساعد ترميز قوي. إن قدرة روبوت المحادثة على إصدار تعليمات برمجية مثيرة للإعجاب من تعليمات بسيطة ، وأحيانًا غير واضحة تمامًا ، هي شهادة على براعتها في الترميز.

بالتأكيد ، لا يزال هناك الكثير من العيوب. تعد مشكلة نافذة السياق المحدودة وقدرتها على ربط المنطق من عدة مكونات تم إنشاؤها بشكل مستقل معًا مشكلة رئيسية. ومع ذلك ، يمكن أن يساعدك chatbot في إنشاء تطبيقات ويب معقدة إلى حد ما بسرعة إذا كنت تعرف طريقك.