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

غلاف Back4app ChatGPT

تم إنشاء الصورة بمساعدة DALL-E 2.

لقد اكتسح برنامج ChatGPT من OpenAI العالم. فقدرته الكبيرة على “فهم” الأسئلة والإجابة عليها جعلته مفيداً في عدد من المجالات، خاصة في تطوير البرمجيات.

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

Contents

نظرة عامة على ChatGPT

ChatGPT (المحول التوليدي المُدرَّب مسبقاً) هو روبوت محادثة ذكاء اصطناعي تم تطويره بواسطة OpenAI. تم إصداره في نوفمبر 2022 وسرعان ما أصبح أحد أشهر وكلاء المحادثة المدعوم بالذكاء الاصطناعي.

وقد صُمم لمحاكاة المحادثة البشرية، ولكن استخداماته متعددة. فيمكنه كتابة برامج الكمبيوتر وتصحيحها، وحل المشكلات المنطقية، والتعبير عن الآراء، وحتى كتابة القصائد. وهذا يجعلها مفيدة في مجموعة متنوعة من المجالات مثل تطوير البرمجيات، والتعليم، والصحافة، والأبحاث، والتمويل.

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

نظراً لشعبية ChatGPT، أطلقت الكثير من الشركات روبوتات الدردشة الآلية الخاصة بها التي تعمل بنموذج اللغة الكبيرة (LLM). قدمت جوجل Bard، وقدمت شركة Meta نموذج LLaMA، وهناك ظهور روبوتات دردشة أخرى أصغر حجماً مدعومة بالذكاء الاصطناعي مثل Jasper.ai وClaude.

ما هي مزايا ChatGPT لتطوير البرمجيات؟

تطوير أسرع

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

إنشاء الوثائق

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

المساعدون الافتراضيون

يتمتع روبوت الدردشة الآلي بالذكاء الاصطناعي بقدرات رائعة في معالجة اللغة الطبيعية (NLP). وهذا يجعلها قاعدة رائعة للمساعدين الافتراضيين ووكلاء دعم العملاء. قبل بضعة أشهر أصدرت OpenAI أيضاً واجهة برمجة تطبيقات ChatGPT، والتي تستخدمها بالفعل العديد من شركات التكنولوجيا مثل Snap Inc.

أداة التعلم

شيء آخر رائع في ChatGPT هو أنه يمكن استخدامه كأداة تعليمية. يمكنك أن تطلب منه شرح المفاهيم والعمليات وحتى ترجمة التعليمات البرمجية من لغة/إطار عمل إلى آخر.

تصحيح الأخطاء

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

ما هي قيود ChatGPT؟

الهلوسة

يوفر ChatGPT أحيانًا معلومات تبدو معقولة ولكنها غير صحيحة أو غير منطقية. هذا السلوك شائع في برامج LLMs وقد أكده مطور ChatGPT. تكون الهلوسة مشكلة خاصة عندما يستخدم الأشخاص ChatGPT لتعلم مفاهيم جديدة.

الاستجابات المتحيزة

أثناء عملية التدريب، كان بإمكان OpenAI التحكم في البيانات التي يجب تغذية ChatGPT بها وما لا يجب. أدى ذلك إلى تحيز ChatGPT بشكل كبير. علاوة على ذلك، قرر OpenAI حظر محتوى معين.

المعرفة المحدودة

معرفة ChatGPT 3.5 محدودة للغاية. ليس لدى روبوت الدردشة الآلي أي معرفة بالأحداث التي وقعت بعد سبتمبر 2021. علاوة على ذلك، لا يستطيع ChatGPT 3.5 الوصول إلى الإنترنت.

هذا يعني أنه لا يمكن استخدام ChatGPT 3.5 مع لغات البرمجة وأطر العمل الجديدة.

كيف تحفز ChatGPT بفعالية؟

تحدث إليه كما تتحدث إلى شخص ما

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

كن واضحًا ومحددًا

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

نصيحة: يجب أن تبدأ مطالباتك أو تنتهي بكلمة فعل (مثل اكتب، اشرح، لخص).

توفير السياق

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

نصيحة: ضع في اعتبارك أن المواضيع تحافظ على السياق. إذا كانت مطالبتك التالية غير ذات صلة بالموضوع الحالي تأكد من بدء موضوع جديد.

تنسيق رسائلك

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

مثال على المطالبة:

Explain this code:

for (int i = 0; i < 10; i++) {
  System.out.println("Back4app rocks!");
}

أشر إلى أخطاء ChatGPT

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

نصيحة: قد تؤدي إعادة طرح نفس السؤال أو تعديل السؤال قليلاً إلى الحصول على إجابة أفضل.

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

يتناول هذا القسم من المقال كيفية إنشاء تطبيق قائمة مشاهدة الأفلام باستخدام React Native للواجهة الأمامية و Back4app للواجهة الخلفية. معظم الشيفرة سيتم إنشاؤها بواسطة ChatGPT.

المتطلبات الأساسية

على الرغم من أن الرمز سيتم إنشاؤه في الغالب بواسطة ChatGPT، يجب أن يكون لديك:

  • الفهم الأساسي لتطوير تطبيقات الجوال
  • خبرة في JavaScript ES6
  • خبرة في React Native
  • تثبيت Android Studio وIDE لـ JS على جهازك المحلي

ما هو تطبيق Back4app؟

Back4app عبارة عن واجهة خلفية رائعة كخدمة (BaaS) تقدم مجموعة كبيرة من الميزات. فهو يتيح للمطورين إنشاء تطبيقات الويب والجوال بسرعة دون القلق بشأن الواجهة الخلفية أو البنية التحتية الأساسية.

تشمل الميزات الأساسية للمنصة ما يلي:

  • المصادقة
  • قواعد البيانات في الوقت الحقيقي
  • وظائف الرمز السحابي
  • تخزين الملفات وتخزين البلوك تشين
  • إشعارات الدفع والبريد الإلكتروني
  • GraphQL و REST و SDKs

يتبع Back4app نموذج سعر بسيط يناسب احتياجات الواجهة الخلفية لأي تطبيق. علاوة على ذلك، يقدمون فئة مجانية رائعة للنماذج الأولية واستضافة التطبيقات الصغيرة. وهي تشمل:

  • 25 ألف طلب
  • تخزين البيانات 250 ميغابايت
  • نقل 1 غيغابايت
  • مساحة تخزين الملفات 1 جيجابايت

لمعرفة المزيد عن Back4app، راجع ما هو Back4app؟

مقدمة المشروع

سنقوم بإنشاء تطبيق للهاتف المحمول يعمل كقائمة مشاهدة للأفلام. سيسمح التطبيق للمستخدمين بإضافة الأفلام إلى قائمة المشاهدة ووضع علامة عليها كمشاهدة/غير مشاهدة. سيتم إنشاء الواجهة الخلفية باستخدام Back4app وسنستخدم React Native (مع Expo) للواجهة الأمامية. كما ذكرنا أعلاه، سيتم إنشاء معظم التعليمات البرمجية بواسطة ChatGPT.

معاينة تطبيق Back4app Watchlist معاينة تطبيق Back4app Watchlist

الواجهة الخلفية

قبل العمل على تطبيقنا نحتاج إلى الاهتمام بالواجهة الخلفية. ستكون الواجهة الخلفية بمثابة قاعدة بيانات تسمح لنا بتتبع قائمة مشاهدة الأفلام. سنقوم ببنائها باستخدام Back4app.

هناك طرق متعددة للتفاعل مع Back4app:

  1. لوحة تحكم Back4app Dashboard (مغطاة في هذا البرنامج التعليمي)
  2. مُلحق Back4app ChatGPT (مذكور في هذا البرنامج التعليمي)
  3. Back4app CLI (مذكور هنا)

سنوضح كيفية إنشاء نفس الواجهة الخلفية باستخدام لوحة التحكم وإضافة ChatGPT.

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

سيتطلب كلا النهجين حساب Back4app. إذا كان لديك حساب بالفعل، فقم بتسجيل الدخول وإلا فقم بالتسجيل في الحساب المجاني.

لوحة معلومات تطبيق Back4app

لا تتردد في الانتقال إلى نهج مُلحق ChatGPT إذا كنت مهتمًا بذلك فقط.

إنشاء تطبيق Back4app

للعمل مع Back4app نحتاج أولاً إلى إنشاء تطبيق. عند تسجيل الدخول إلى لوحة التحكم الخاصة بك سترى قائمة تطبيقاتك. انقر على “إنشاء تطبيق جديد” لبدء عملية إنشاء التطبيق.

Back4app إنشاء تطبيق Back4app Create App

حدد “الخلفية كخدمة (BaaS)” واختر اسم تطبيق مخصص. سأختار “back4app-chatgpt-app”. بعد ذلك، حدد “NoSQL” كقاعدة بيانات، وأخيرًا انقر على “إنشاء”.

سوف يستغرق Back4app بضع لحظات لإعداد كل ما هو مطلوب لتطبيقك مثل طبقة التطبيق، وقاعدة البيانات، والتوسع، والأمان.

بمجرد أن يصبح تطبيقك جاهزاً، ستتم إعادة توجيهك إلى لوحة تحكم تطبيقك.

لوحة تحكم تطبيق Back4app Back4app
قاعدة البيانات

الآن دعنا نحدد فئات قاعدة البيانات.

بما أننا ننشئ تطبيق قائمة مشاهدة أفلام بسيط سنحتاج إلى صنف واحد فقط. يمكننا تسميته فيلم. سيمثل مثيل كائن من فيلم فيلمًا في قائمة المشاهدة.

لإنشاء فئة الأفلام، انقر على “إنشاء فئة”، وتأكد من تمكين “قراءة وكتابة عامة” وأضف الحقول التالية إليها:

+---------------------------+-----------------+---------------+----------+
| Data type                 | Name            | Default value | Required |
+---------------------------+-----------------+---------------+----------+
| String                    | name            | <leave blank> | yes      |
+---------------------------+-----------------+---------------+----------+
| Number                    | releaseYear     | <leave blank> | yes      |
+---------------------------+-----------------+---------------+----------+
| Boolean                   | isWatched       | False         | no       |
+---------------------------+-----------------+---------------+----------+

بعد ذلك، انقر على زر علامة الجمع لملء قاعدة البيانات ببعض الصفوف النموذجية. سأختار ما يلي:

+--------------------+-------------+-----------+
| name               | releaseYear | isWatched |
+--------------------+-------------+-----------+
| A Clockwork Orange | 1971        | False     |
+--------------------+-------------+-----------+
| Fight Club         | 1999        | False     |
+--------------------+-------------+-----------+
| Donnie Darko       | 2001        | True      |
+--------------------+-------------+-----------+

هذا كل شيء بالنسبة للجهة الخلفية.

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

المكون الإضافي Back4app ChatGPT

يتطلب هذا النهج الوصول إلى ChatGPT 4 مع ميزاته التجريبية. في وقت كتابة هذا التقرير، يلزم وجود ChatGPT Plus لاستخدام GPT-4.

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

تثبيت المكون الإضافي Back4app

لا تتردد في تخطي هذا القسم إذا كان لديك مُلحق Back4app ChatGPT مُثبَّتًا بالفعل.

بمجرد تسجيل الدخول إلى حساب ChatGPT Plus الخاص بك، سترى نموذجين في أعلى الصفحة. لاستخدام جميع الميزات المتقدمة سنختار “GPT-4” كنموذجنا. ثم انقر على صورتك الرمزية في أسفل يسار الصفحة واختر “الإعدادات والبيتا”.

ChatGPT Plus تمكين GPT-4

حدِّد “الميزات التجريبية” في الشريط الجانبي للمشروطية ومكِّن خاصية “الإضافات”.

بعد ذلك أغلق المشروطية وانقر على “GPT-4” وقم بتمكين خاصية “الإضافات” لهذا الطراز.

تمكين المكون الإضافي ChatGPT للنموذج

أغلق القائمة المنسدلة “GPT-4” وستظهر لك رسالة تقول “لا توجد ملحقات ممكّنة”. انقر عليها لفتح سوق مُلحقات ChatGPT.

دردشةGPT بدون ملحقات

ابحث عن “Back4app” وقم بتثبيته وتأكد من ربط حساب Back4app الخاص بك به.

ملحق تثبيت ChatGPT الإضافي

رائع، لقد قمت بتثبيت المكون الإضافي Back4app بنجاح. يجب أن يكون لدى ChatGPT الخاص بك الآن القوى الخارقة للتواصل مع Back4app.

استخدام البرنامج المساعد Back4app

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

ابدأ بإخبار ChatGPT بإنشاء تطبيق Back4app جديد:

Create a Back4app application called "back4app-watchlist".
Back4app ChatGPT إنشاء تطبيق Back4app ChatGPT

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

بعد ذلك، دعنا نطلب من ChatGPT إنشاء فئة قاعدة بيانات “الفيلم”:

Create a "Movie" database class that will have the following properties:
- name (String, required)
- releaseYear (Integer, required)
- isWatched (Boolean, required, default False)
Back4app ChatGPT إنشاء فئة قاعدة بيانات Back4app ChatGPT

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

بعد ذلك، اطلب من ChatGPT ملء قاعدة البيانات ببعض نماذج الأفلام:

Populate the database with 10 sample movies.
Back4app ChatGPT تعبئة قاعدة بيانات Back4app ChatGPT

أخيرًا، اطلب من ChatGPT رابط عرض قاعدة البيانات حتى نتمكن من التحقق مما إذا كان كل شيء ناجحًا:

Provide me the link to the "Movie" class.
رابط قاعدة بيانات Back4app ChatGPT

يجب أن يؤدي النقر على الرابط إلى فتح علامة تبويب جديدة مع عرض قاعدة البيانات.

قاعدة بيانات Back4app المأهولة بالسكان

كما ترى أن فئة “الفيلم” تحتوي على جميع الحقول المطلوبة، وقد نجح ChatGPT في ملء قاعدة البيانات بنجاح.

هذا كل شيء.

الواجهة الأمامية (مع ChatGPT)

في هذا القسم من المقالة، سنطالب ChatGPT بكتابة كود الواجهة الأمامية لنا.

عملية إنشاء التطبيق

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

Describe the steps of building a mobile app for a movie watchlist. I want the app to be 
written in React Native using Expo. My backend is hosted on Back4app. I only have one 
database model named Movie and its structure is the following:

{
   "results":[
      {
         "objectId": "bAhUu5SFZo",
         "name": "Donnie Darko",
         "releaseYear": 2001,
         "isWatched": false,
         "createdAt": "2023-04-11T16:10:44.281Z",
         "updatedAt": "2023-04-11T16:10:44.281Z"
      },
   ]
}

للحصول على مخطط / تفريغ قاعدة البيانات، يمكنك استخدام النقاط الثلاث في أعلى يمين الشاشة والنقر على “تصدير > جميع الصفوف بصيغة JSON”. سيرسل لك Back4app التصدير عبر البريد الإلكتروني.

خطوات إنشاء تطبيق ChatGPT

كما ترى زوّدنا ChatGPT بالمعلومات الصحيحة لإنشاء تطبيق React Native. يمكننا الآن طلب معلومات إضافية لكل خطوة.

تهيئة المشروع

ابدأ بطلب المزيد من المعلومات حول الخطوتين الأوليين:

How to create a React Native project?
ChatGPT إنشاء تطبيق React Native App

تبدو استجابة ChatGPT جيدة. انطلق وقم بتثبيت Node.js و Expo CLI وأنشئ مشروعًا جديدًا. فيما يتعلق بالقالب، أقترح عليك استخدام علامات التبويب (TypeScript) لأنه يقوم تلقائيًا بتهيئة React Router، والذي ستستخدمه على الأرجح في المستقبل.

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

بعد ذلك، اتبع تعليمات ChatGPT لبدء تشغيل خادم Expo:

$ expo start

بمجرد تشغيل خادم Expo افتح Android Studio واستخدم VDM لبدء تشغيل المحاكي. بعد ذلك، عد إلى وحدة تحكم Expo واضغط على “A” على لوحة المفاتيح لفتح التطبيق في المحاكي. يجب أن ترى الشاشة التالية:

تطبيق Back4app Back4App Watchlist Bootstrap

ربط React Native مع Back4app

للمضي قدمًا، دعنا نطلب من ChatGPT شرح كيفية ربط مشروع React Native مع Back4app.

How can I configure my Expo app to work with Back4app? I've chosen "tabs (TypeScript)"
as my project template.
تهيئة تشاتGPT Back4app Parse Parse

للوهلة الأولى، تبدو الخطوات والشيفرة التي تم إنشاؤها صالحة. ولكن إذا ألقيت نظرة فاحصة ستلاحظ أن مشروعك لا يحتوي حتى على ملف App.js أو App.ts. هذا لأننا اخترنا علامات التبويب (TypeScript) بدلاً من القالب الفارغ. علاوة على ذلك فإن ChatGPT يخبرنا بتثبيت التبعيات الخاطئة.

عندما كنت أعمل على هذه المقالة حاولت شرح هذا الأمر لـ ChatGPT ولكن لم ينجح الأمر. عند هذه النقطة، كنت عالقًا واضطررت إلى الرجوع إلى وثائق Back4app الرسمية. إذا اتبعت المستندات الرسمية ستلاحظ أنه عليك أولاً تثبيت الحزم التالية:

yarn add parse @react-native-async-storage/async-storage

ثم انتقل إلى index.ts لتهيئة Parse :

// index.ts

import 'expo-router/entry';

import Parse from 'parse/react-native.js';
import AsyncStorage from '@react-native-async-storage/async-storage';

Parse.setAsyncStorage(AsyncStorage);
// Make sure to replace the 'APPLICATION_ID' and 'JAVASCRIPT_KEY' with your own keys.
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com/';

تأكد من استبدال معرّفك_APPLICATION_ID ومفتاحك_JAVASCRIPT_KEY بمفاتيح واجهة برمجة التطبيقات الفعلية من لوحة تحكم Back4app “إعدادات التطبيق > الأمان والمفاتيح”.

للتحقق من نجاح الاتصال حاول إدراج الأفلام عن طريق إضافة الرمز التالي في أسفل index.ts:

// index.ts

// ...

const Movie = Parse.Object.extend('Movie');
const query = new Parse.Query(Movie);

query.find().then((results) => {
  console.log('Query results:', results);
}).catch((error) => {
  console.error('Error querying database:', error);
});

قم بتحديث التطبيق، وافتح وحدة التحكم وسترى قائمة الأفلام.

عرض قائمة المراقبة

بعد ذلك، اطلب من ChatGPT كتابة شيفرة React التي تعرض الأفلام في قائمة المراقبة.

Write me the code that I can use in my TabOneScreen to display the list of movies
in the watchlist. I want a tick emoji in front of watched movies and a cross emoji 
in front of not yet watched movies.
رمز عرض ChatGPT

أرجع ChatGPT شيفرة ذات مظهر صالح. واستخدمت useState() للتعامل مع الحالة وأنشأت واجهة TypeScript لنموذج الفيلم الخاص بنا. حتى أنها أعدت خطاف التحديث الذي سيسمح لنا بتحديث قائمة الأفلام. المشكلتان الوحيدتان اللتان أراهما هما أن الشاشة تحمل اسم WatchlistScreen بدلًا من TabOneScreen وأن واجهة الفيلم غير مكتملة. ولكن يمكن إصلاح ذلك بسهولة!

انطلق واستبدل تطبيقك/(علامات التبويب)/index.tsx برمز ChatGPT. ثم:

  1. استبدل WatchlistScreen ب TabOneScreen.
  2. قم بتغيير واجهة الفيلم هكذا:
interface Movie extends Parse.Object { 
  objectId: string;
  name: string; 
  releaseYear: number; 
  isWatched: boolean; 
  createdAt: Date; 
  updatedAt: Date; 
}

قم بتحديث التطبيق وتأكد من إمكانية مشاهدة قائمة الأفلام.

تبديل قائمة المراقبة

آخر شيء علينا القيام به هو أن نطلب من ChatGPT أن يكتب لنا دالة toggleWatched، والتي تقوم بتبديل خاصية isWatched لفيلم معين.

Write me a function that toggles specific movie's "isWatched" property.
رمز تبديل التبديل ChatGPT isWatched

انسخ الدالة إلى شاشة TabOneScreen واجعل الدالة قابلة للمس وتشغيلها هكذا:

// app/(tabs)/index.tsx

export default function TabOneScreen() {

  // ...

  const toggleWatched = async (id: string) => {
    const Movie = Parse.Object.extend('Movie');
    const query = new Parse.Query(Movie);

    try {
      const movie = await query.get(id);
      movie.set('isWatched', !movie.get('isWatched'));
      await movie.save();
      setRefresh(true);
    } catch (error) {
      console.error('Error toggling watched status:', error);
    }
  };

  // ...

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Watchlist</Text>
      <View style={styles.separator} lightColor='#eee' darkColor='rgba(255,255,255,0.1)'/>
      <FlatList
        data={movies}
        keyExtractor={(item) => item.id}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => toggleWatched(item.id)}>
            <Text>{item.get('isWatched') ? '✔️' : '❌'} {item.get('name')}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

// ...

عظيم، يجب أن يكون هذا كل شيء.

افتح المحاكي مرة أخرى واختبر التطبيق. يجب أن تشاهد قائمة بجميع الأفلام والنقر على فيلم معين يجب أن يؤدي النقر على فيلم معين إلى تبديل isWatched (المشار إليه بالرموز التعبيرية).

معاينة تطبيق Back4app Watchlist معاينة تطبيق Back4app Watchlist

لقد نجحنا في استخدام ChatGPT لإنشاء تطبيق بسيط للهاتف المحمول. لا تتردد في استخدام ChatGPT لإضافة وظائف إضافية مثل:

  • إضافة الأفلام عبر التطبيق
  • حذف الأفلام عبر التطبيق
  • قائمة المراقبة لكل مستخدم

الخاتمة

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

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

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

الكود المصدري النهائي متاح على GitHub.

الأسئلة الشائعة

ما هو ChatGPT؟

ChatGPT هو روبوت دردشة يعمل بالذكاء الاصطناعي (AI) تم تطويره بواسطة OpenAI. يمكن لـ ChatGPT كتابة برامج الكمبيوتر، وحل المشكلات المنطقية، وحتى إنشاء محتوى فني.

ما هي فوائد ChatGPT في تطوير البرمجيات؟

– تطوير أسرع
– قدرات ممتازة في معالجة اللغة الطبيعية (NLP)
– إنشاء التوثيق
– توفير مقتطفات من الشيفرة

ما هي قيود ChatGPT؟

– الهلوسات
– معرفة محدودة
– ردود متحيزة
– الإسهاب في الشرح

كيف يمكن توجيه ChatGPT بفعالية؟

– ابدأ أو أنهِ الكلمة بفعل (مثل: اكتب، اشرح).
– تحدث إلى ChatGPT كما لو كنت تتحدث إلى شخص حقيقي.
– قدم السياق اللازم فقط.
– إعادة طرح السؤال قد يؤدي إلى إجابات مختلفة.
– استخدم سلاسل المحادثة لصالحك.

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

1. أنشئ الواجهة الخلفية للتطبيق باستخدام حل BaaS مثل Back4app.
2. اشرح فكرة التطبيق لـ ChatGPT واطلب منه شرح خطوات إنشاء التطبيق.
3. اطلب من ChatGPT توضيح كل خطوة.
4. اطلب من ChatGPT توفير الشيفرة المطلوبة للوظائف.
5. اختبر الشيفرة وقم بإزالة الأخطاء منها.


Leave a reply

Your email address will not be published.