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

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

نظرة عامة على التقنيات

• ChatGPT: ChatGPT هو نموذج لغوي قوي تم تطويره بواسطة OpenAI. وهو مبني على بنية GPT-4 ويمكن استخدامه لإنشاء التعليمات البرمجية والإجابة عن الأسئلة وتقديم المساعدة في مختلف المهام.
• Back4App: Back4App هو عبارة عن منصة خلفية مُدارة بالكامل تعمل على تبسيط عملية إنشاء تطبيقات الويب والهاتف المحمول واستضافتها وإدارتها. وهي مبنية على أساس Parse، وهو إطار عمل مفتوح المصدر يقدم خدمات متنوعة مثل تخزين البيانات، ومصادقة المستخدم، ووظائف السحابة.
• React: React هي مكتبة JavaScript شائعة لبناء واجهات المستخدم. تجعل من السهل إنشاء وإدارة مكونات واجهة المستخدم المعقدة وحالتها.
• Material-UI: Material-UI هي مكتبة مكوِّنات React الشهيرة التي تطبِّق مبادئ التصميم متعدد الأبعاد من Google، وتوفر مكونات مبنية مسبقًا وإمكانيات تصميمية لبناء تطبيقات ويب جميلة وعملية.

إعداد Back4App

لبدء استخدام Back4App، ستحتاج إلى إنشاء حساب وتطبيق جديد على المنصة. اتبع هذه الخطوات:

1. قم بالتسجيل للحصول على حساب مجاني على https://www.back4app.com/.
2. سجّل الدخول إلى حسابك وأنشئ تطبيقاً جديداً.
3. بعد إنشاء التطبيق، انتقل إلى “لوحة التحكم” ودوِّن مُعرِّف التطبيق ومفتاح JavaScript ومفتاح REST API، حيث ستحتاج إليها لاحقًا.

إنشاء نموذج البيانات

لقد بدأت في عمل مقدمة لـ chatGPT لما أردته. لم أعطه الكثير من التفاصيل حول نموذج البيانات لأنني كنت أشعر بالفضول لمعرفة ما سينتج عنه. كانت مطالبتي لدردشة GPT

اسأل ChatGPT: “أحتاج إلى مساعدتك لإنشاء تطبيق قائمة مهام كامل باستخدام ChatGPT و Back4app. لنبدأ بإنشاء نموذج البيانات. هل يمكنك من فضلك إنشاء التعليمات البرمجية لإنشاء نموذج البيانات هذا باستخدام أوامر cURL المتوفرة على Back4app؟ استخدم طلب إنشاء الكائن الأول لإنشاء الفئة بأكملها.”

كان هذا هو الناتج:

كيرل -X POST \
  -H "X-Parse-Application-Id: zGWTprmiOpsOVVuVCVuVCPRpRfT9hmyML3ahOSF5BL5RhcaT" \" \
  -H "X-Parse-REST-API-Key: gk8Zy2Zy2uCWriTWWWMYRTYRTFCe7oobLDTKBihBihF0WMlFFnu" \
  -H "نوع المحتوى: تطبيق/json" \
  -d '{
        "العنوان": "نموذج المهمة",
        "الوصف": "هذا نموذج لوصف مهمة".",
        "dueDate": {
          "__نوع": "التاريخ",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "مكتمل": خطأ
      }' \
  https://parseapi.back4app.com/classes/Task

بعد ذلك راجعت Back4app وتم إنشاء نموذج البيانات الخاص بي بنجاح:

استخدام cURL لإضافة بيانات العينة

لقد طلبت الآن من برنامج الدردشةGPT لإعطاء بعض البيانات النموذجية لملء فصلي:

اسأل ChatGPT: “الآن أعطني 5 مهام جديدة كعينة بيانات لملء فصلي.”

# المهمة 1
كيرل -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsOVuVCVuVCPRpRfT9hmyML3ahOSF5BL5RhcaT" \" \
  -H "X-Parse-REST-API-Key: gk8Zy2Zy2uCWriTWWWMYRTYRTFCe7oobLDTKBihBihF0WMlFFnu" \
  -H "نوع المحتوى: تطبيق/json" \
  -d '{
        "العنوان": "شراء البقالة",
        "الوصف": "شراء البقالة للأسبوع",
        "dueDate": {
          "__نوع": "التاريخ",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "مكتمل": خطأ
      }' \
  https://parseapi.back4app.com/classes/Task

# المهمة 2
كيرل -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsOVuVCVuVCPRpRfT9hmyML3ahOSF5BL5RhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2Zy2uCWriTWWWMYRTYRTFCe7oobLDTKBihBihF0WMlFFnu" \
  -H "نوع المحتوى: تطبيق/json" \
  -d '{
        "العنوان": "واجب منزلي كامل",
        "الوصف": "إنهاء واجبات الرياضيات والتاريخ",
        "dueDate": {
          "__نوع": "التاريخ",
          "iso": "2023-04-12T00:00:00.000Z"
        },
        "مكتمل": خطأ
      }' \
  https://parseapi.back4app.com/classes/Task


# المهمة 3
كيرل -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsOVuVCVuVCPRpRfT9hmyML3ahOSF5BL5RhcaT" \" \
  -H "X-Parse-REST-API-Key: gk8Zy2Zy2uCWriTWWWMYRTYRTFCe7oobLDTKBihBihF0WMlFFnu" \
  -H "نوع المحتوى: تطبيق/json" \
  -d '{
        "العنوان": "حضور موعد مع الطبيب",
        "الوصف": "الفحص السنوي لدى طبيب العائلة",
        "dueDate": {
          "__نوع": "التاريخ",
          "iso": "2023-04-13T00:00:00.000Z"
        },
        "مكتمل": خطأ
      }' \
  https://parseapi.back4app.com/classes/Task

# المهمة 4
كيرل -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsOVuVCVuVCPRpRfT9hmyML3ahOSF5BL5RhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2Zy2uCWriTWWWMYRTYRTFCe7oobLDTKBihBihF0WMlFFnu" \
  -H "نوع المحتوى: تطبيق/json" \
  -d '{
        "العنوان": "اتصل بالبنك",
        "الوصف": "الاستعلام عن خيارات حساب التوفير الجديد",
        "تاريخ الاستحقاق": {
          "__نوع": "التاريخ",
          "iso": "2023-04-14T00:00:00.000Z"
        },
        "مكتمل": خطأ
      }' \
  https://parseapi.back4app.com/classes/Task

# المهمة 5
كيرل -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsOVuVCVuVCPRpRfT9hmyML3ahOSF5BL5RhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2Zy2uCWriTWWWMYRTYRTFCe7oobLDTKBihBihF0WMlFFnu" \
  -H "نوع المحتوى: تطبيق/json" \
  -d '{
        "العنوان": "التخطيط لعطلة نهاية الأسبوع",
        "الوصف": "البحث وحجز أماكن الإقامة لرحلة قصيرة",
        "dueDate": {
          "__نوع": "التاريخ",
          "iso": "2023-04-15T00:00:00.000Z"
        },
        "مكتمل": خطأ
      }' \
  https://parseapi.back4app.com/classes/Task

لقد قمت بتنفيذ الأوامر على طرفي. الآن تم ملء فصلي على Back4app:

بناء واجهة React الأمامية

والآن بعد أن انتهينا من إعداد الواجهة الخلفية، دعنا ننشئ واجهة أمامية لتطبيق ToDo الخاص بنا باستخدام React. لم أكن متأكدًا من واجهة React التي سأستخدمها لمساعدتي في إنشاء واجهة مستخدم أفضل، لذا طلبت توصيته:

اسأل ChatGPT: “الآن دعنا نبني الواجهة الأمامية. أحتاج إلى واجهة أمامية جميلة ومفيدة في React. هل تنصحني باستخدام أي مكتبة مكونات محددة لذلك؟

هذه هي الإجابة:

لقد اخترت استخدام Material-UI ثم طلبت إنشاء الكود.

بما أنه كان لدي عقدة مثبتة بالفعل على جهاز الكمبيوتر الخاص بي، كان من السهل تشغيل الأوامر وإنشاء المشروع. إذا لم يكن لديك عقدة مثبتة، يمكنك تنزيلها وتثبيتها هنا: https://nodejs.org/en/download

أولًا لقد أنشأت مشروع React:

npx إنشاء-تطبيق-تفاعل-تطبيق-تودو-التطبيق
cd todo-app

ثم قمت بتركيب المكونات التي أوصاني بها في مشروعي:

npm install @mui/material @emui/material @emotion/react @emotion/react @emotion/styled parse

لاحظ أنه إذا توقفت chatGPT في أي لحظة عن كتابة الإجابة في أي لحظة، يمكنك أن تطلب المتابعة فقط بكتابة “يمكنك المتابعة”.

الآن مع إنشاء المشروع قمتُ باستبدال كود App.js وفقًا لطلب chatGPT وقمتُ أيضًا بتحديث المفاتيح: AppID ومفتاح جافا سكريبت.

هذا هو الرمز الكامل:

استورد React، و { حالة الاستخدام، واستخدام التأثير } من 'react';
استيراد Parse من 'Parse';
استيراد { حاوية، طباعة، حقل نص، زر، زر، قائمة، عنصر قائمة، نص عنصر قائمة، خانة اختيار، زر أيقونة } من '@mui/material';
استيراد { حذف كأيقونة الحذف } من '@mui/أيقونات-مادة';

// تهيئة Parse بمعرف تطبيق Back4App الخاص بك ومفتاح Javascript
Parse.Initize('Your_APP_ID_HERE'، 'YOUR_JAVASCRIPT_KEY_HERE');
Parse.serverURL = 'https://parseapi.back4app.com/';

const TodoItem = Parse.Object.extend('TodoItem');

دالة التطبيق() {
  const [todoInput, setTodoTodoInput] = حالة الاستخدام('');
  const [todos, setTodos] = useState([]);

  استخدام التأثير(()() => {
    fetchTodos();
  }, []);

  const fetchTodos = غير متزامن () => { {
    const query = جديد Parse.Query(TodoItem);
    استعلام.تنازلي('createAt');
    محاولة {
      كون النتائج = انتظر quaitery.find();
      تعيينTodos(النتائج);
    } التقاط (خطأ) {
      console.error('خطأ أثناء جلب التودوس:'، خطأ);
    }
  };

  const createTodo = async () => { { 
    إذا كان (todoInput === ''') العودة;

    يشكل todoItem = جديد TodoItem();
    todoItem.set('title', todoInput);
    todoItem.set('مكتمل'، خطأ);

    محاولة {
      انتظر todoItem.save();
      setTodoTodoInput('');
      fetchTodos();
    } التقاط (خطأ) {
      console.error('خطأ أثناء إنشاء todo:'، خطأ);
    }
  };

  يشكل toggleTodo = غير متزامن (todo) => { {
    todo.set('مكتمل'، !'todo.get.get('مكتمل'));
    محاولة {
      انتظر todo.save();
      fetchTodos();
    } التقاط (خطأ) {
      console.error('خطأ أثناء تحديث todo:'، خطأ);
    }
  };

  const deleteTodo = غير متزامن (todo) => { { {
    محاولة {
      انتظر todo.destroy();
      fetchTodos();
    } التقاط (خطأ) {
      console.error('خطأ أثناء حذف todo:'، خطأ);
    }
  };

  إرجاع (
   
     
        قائمة المهام
     
       setTodoInput (e.target.value)}
        onKeyDown={(e) => {
          إذا (المفتاح e.key === 'Enter') {{
            createTodo();
          }
        }}
      />
     
        إضافة مهمة
     
     
        {todos.map((todo)) => (
         
             toggleTodleTodo(todo)}
            />
           
             حذف(تودو(تودو)}>>
             
           
         
        ))}
     
   
  );
}

تصدير التطبيق الافتراضي;

عند تشغيل الكود البرمجي استطعت أن أرى، لدهشتي، تطبيقاً كاملاً يعمل على جهازي المحلي ومتصل بـ Back4app Backend:

الخاتمة

أوضحنا في هذا البرنامج التعليمي كيفية الاستفادة من قوة ChatGPT لإنشاء تطبيق قائمة مهام بسيط باستخدام Back4App و React و Material-UI. لقد غطينا إعداد الواجهة الخلفية باستخدام Back4App، وإنشاء نموذج بيانات، وإضافة بيانات نموذجية باستخدام أوامر cURL، وبناء واجهة أمامية جميلة وعملية باستخدام React و Material-UI.

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

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