الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

دليل ترميز الذكاء الاصطناعي للمبتدئين

مرحبًا بك في Tips & Tricks for AI Coder Beginners ، وهو مورد شامل مصمم لمساعدة غير المرئيين على استخدام أدوات الذكاء الاصطناعى بشكل فعال لتطوير مواقع الويب والتطبيقات والمشاريع الأخرى. يعتمد هذا الدليل على خبرة في العالم الحقيقي والمشورة العملية المصممة للمبتدئين المطلقين.

جدول المحتويات

  • مقدمة
  • الفصل 1: الحصول على الذكاء الاصطناعى للقيام بما تريد - قوة المطالبات المدروسة
  • الفصل 2: ​​عندما لا تسير الأمور في طريقك - استكشاف الأخطاء وإصلاحها مع الذكاء الاصطناعي واستعادة الزخم
  • الفصل 3: استخدام لقطات شاشة وتتبع للتعامل مع القضايا المستمرة
  • الفصل 4: توجيه الذكاء الاصطناعي لمعالجة المشكلات والأخطاء والتحديات بفعالية
  • الفصل 5: فهم مكتبات CDN ودورها في مشروعك
  • [الفصل 6: قريبا]
  • [الفصل 7: قريبا]

مقدمة

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

الفصل 1: الحصول على الذكاء الاصطناعى للقيام بما تريد - قوة المطالبات المدروسة

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

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

لماذا تسأل الطريقة الصحيحة مهمة

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

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

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

سحر العبارات الخاصة بالمهمة

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

  1. عندما يتم كسر شيء ما:

    • استخدم هذا: "إصلاح المشكلة مع ..."
    • مثال: "إصلاح المشكلة مع زر تسجيل الدخول لا يفعل أي شيء عند النقر فوق".

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

    نصيحة للمحترفين: إذا كنت تعرف ما الذي كسر الأشياء (مثل سطر معين من التعليمات البرمجية) ، قم بتضمين هذه التفاصيل. وإذا لم تكن متأكدًا؟ لا تقلق - التركيز فقط على وصف أعراض المشكلة بشكل واضح قدر الإمكان.

  2. عند إضافة ميزات جديدة:

    • استخدم هذا: "أضف ميزة إلى الموجود ..."
    • مثال: "أضف ميزة إلى التطبيق الحالي الذي يسمح للمستخدمين بتصفية المنتجات عن طريق السعر دون إزالة أي ميزات أخرى."

    هذه العبارة تستحق ثقلها بالذهب لأنها تخبر AI شيئين حرجين: (1) ما تريد إضافته و (2) ما لا تلمس. ثق بي ، أنت لا تريد أن تكسر الذكاء الاصطناعي شيئًا عن طريق الخطأ أثناء إضافة ميزة جديدة لامعة. هذا هو السبب في أن جزء "دون إزالة أي ميزات أخرى" مهم للغاية - فهو يبقي كل شيء آخر سليم.

  3. عندما تحتاج إلى إصلاح أخطاء المتصفح:

    • استخدم هذا: "إصلاح هذه الأخطاء الموجودة في وحدة التحكم في المتصفح ..."
    • مثال: "إصلاح هذه الأخطاء الموجودة في وحدة التحكم في المتصفح: [لصق رسائل الخطأ هنا]."

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

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

  4. عندما تريد تحسين كيف يبدو تطبيقك:

    • استخدم هذا: "تحسين التطبيق الكلي (أو جزء محدد) واجهة المستخدم مع احترافية وحديثة وجذابة بصريًا ..."
    • على سبيل المثال: "قم بتحسين واجهة المستخدم بشكل عام من خلال الخطوط المهنية والحديثة والجذابة بصريًا وعالي الجودة وأيقونات ولوحة ألوان متماسكة مستوحاة من التصميمات البسيطة."

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

    نصيحة للمحترفين: إذا كان لديك تطبيق أو موقع ويب معين تحب مظهره ، فذكره! على سبيل المثال: "اجعل هذا يشبه تصميم Spotify". سيحاول الذكاء الاصطناعى تقليد هذا النمط وتطبيقه على مشروعك.

  5. عند إزالة الميزات:

    • استخدم هذا: "قم بإزالة [الميزة] وجميع التعليمات البرمجية ذات الصلة دون كسر الميزات الأساسية للتطبيق."
    • مثال: "قم بإزالة شريط البحث وجميع التعليمات البرمجية ذات الصلة دون كسر عربة التسوق أو ميزات ملف تعريف المستخدم."

    يمكن أن تكون إزالة الميزات أمرًا صعبًا لأنك لا ترغب في إخراج شيء مهم. تتيح هذه العبارة أن يعرف الذكاء الاصطناعى إزالة الميزة بشكل نظيف ولكن ترك كل شيء آخر يعمل تمامًا كما ينبغي.

  6. عندما تحذف شيئًا عن طريق الخطأ:

    • استخدم هذا: "لقد فقدت [الملف] ، يرجى استعادته بحيث يبدو المشروع ويعمل تمامًا كما كان."
    • مثال: "لقد فقدت ملف style.css ، يرجى استعادته بحيث يبدو المشروع ووظائفه كما كان من قبل."

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

مفتاح النجاح: الحصول على محدد

إذا كان هناك شيء واحد تأخذه بعيدًا عن هذا الفصل ، فليكن هذا: الخصوصية هي كل شيء. كلما زادت التفاصيل والوضوح الذي تقدمه في المطالبات الخاصة بك ، كان أداء الذكاء الاصطناعى أفضل. هذا ما تعلمته:

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

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

تذكر ، الطريقة التي تهمها!

الفصل 2: ​​عندما لا تسير الأمور في طريقك - استكشاف الأخطاء وإصلاحها مع الذكاء الاصطناعي واستعادة الزخم

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

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

الخطوة 1: ابدأ Fresh - لماذا يمكن لمحادثة جديدة أن تنقذ اليوم

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

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

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

الإصلاح: ابدأ محادثة جديدة مع الذكاء الاصطناعي.

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

الخطوة 2: احترس من رمز التناقض

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

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

على سبيل المثال:

  • تخيل أنك تقوم بإنشاء زر لتطبيقك. يقول جزء واحد من الكود الخاص بك ، "عند النقر فوق الزر ، أرسل النموذج." جزء آخر يقول ، "عندما يتم النقر فوق الزر ، قم بتحديث الصفحة." الآن يتم الخلط بين التطبيق - هل يقوم الزر بإرسال أو تحديث؟

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

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

الخطوة 3: استخدم الذكاء الاصطناعى كشريك تصحيح الأخطاء دون إجراء تغييرات فورية

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

على سبيل المثال ، يمكنك أن تسأل:

  • "ما الذي قد يتسبب في تعطل تطبيقي عند النقر فوق الزر" إرسال "؟"
  • "كيف يتفاعل هذا القسم من جافا سكريبت مع تصميم CSS أدناه؟"
  • "ما هو تأثير حذف هذا المتغير على بقية الكود؟"

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

الخطوة 4: جرب نموذج أو منصة منظمة العفو الدولية مختلفة

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

  • ChatGPT (وخاصة GPT-4): رائع لنصيحة الترميز للأغراض العامة ، تصحيح الأخطاء ، وتوليد قصاصات رمز قابلة لإعادة الاستخدام.
  • كلود (الإنسان): غالبًا ما يتفوق على فهم التعليمات المعقدة وتلخيص التعليمات البرمجية ولكن يمكن أن تفوت تفاصيل تصحيح الأخطاء الدقيقة.
  • Gemini (Google): قد توفر سياقًا إضافيًا إذا كنت تتعامل مع الأدوات أو التقنيات المتعلقة بـ Google.
  • مساعدو الترميز المتخصصين (على سبيل المثال ، المؤشر ، Github Copilot ، Windsurf): تم دمجها مباشرة في IDEs للحصول على مساعدة الترميز في الوقت الفعلي.

إليك كيفية القيام بذلك:

  1. انسخ رمزك الحالي أو وصف المشكلة.
  2. الصق في نموذج آخر.
  3. اطرح نفس السؤال أو ما شابه.

حتى لو كنت تعمل بشكل حصري مع أداة واحدة ، فإن التحول إلى آخر يمكن أن يوفر وجهات نظر جديدة (وحلول).

الخطوة 5: تمكين changelogs في IDE أو مساعد AI الخاص بك

changelogs هي lifesavers. يسمحون لك:

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

تتيح لك العديد من الأدوات والمعرفات تمكين changelogs أو سجل الإصدار. إذا لم يكن الأمر كذلك ، يمكنك استخدام GIT للتحكم في الإصدار لتحقيق نفس التأثير.

الخطوة 6: فكر في تبديل لغات البرمجة

في بعض الأحيان ، فإن المشكلة ليست أنت أو منظمة العفو الدولية - إنها اللغة التي اخترتها. إذا لم يكن تطبيقك يعمل بشكل جيد أو يشعر بالتعقيد بشكل مفرط ، اسأل الذكاء الاصطناعي: "هل [اللغة الحالية] هو الخيار الأفضل لهذا المشروع؟"

هذا التحول يمكن أن يكون مغير اللعبة.

لا تستسلم ، لكن خذ استراحة!

الفصل 3: استخدام لقطات شاشة وتتبع للتعامل مع القضايا المستمرة

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

استخدام لقطات الشاشة لتوصيل المشكلات

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

أفضل الممارسات لاستخدام لقطات الشاشة

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

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

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

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

    • "تستمر المشكلة - تظهر الصورة المشكلة ، وليس الحل."

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

استكشاف الأخطاء وإصلاحها التغييرات التي لا تنعكس في واجهة المستخدم

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

مثال على استكشاف أخطاء سير العمل:

  1. التقط لقطة شاشة:

    • واحد يوضح حالة واجهة المستخدم قبل تطبيق التغييرات.
    • آخر يوضح واجهة المستخدم بعد تطبيق التغييرات (حيث تبقى المشكلة).

  2. قم بتضمين كلا لقطات في مطالبك مع شرح مثل:

    • "تُظهر هاتان الشاشة واجهة المستخدم قبل وبعد تنفيذ التغييرات المقترحة. واجهة المستخدم لا تعكس التغييرات. تحليل الرمز للعثور على المشكلة وإصلاحها. "

  3. استخدم المطالبات المستهدفة للتعمق:

    • "قم بتحليل الدليل بأكمله وابحث عن المشكلات التي تمنع تغييراتك من تنفيذها."
    • "اكتشف لماذا لا تعكس تغييراتك ما أراه في المشروع."

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

طرق إبداعية لاستخدام لقطات الشاشة في تصحيح الأخطاء

لقطات الشاشة ليست فقط لتحديد مشاكل واجهة المستخدم. فيما يلي بعض الطرق الإضافية التي يمكنك من خلالها استخدام لقطات الشاشة لتحسين التواصل مع مساعد AI الخاص بك:

  1. إظهار رسائل الخطأ أو سجلات:
    إذا أظهر وحدة التحكم في المستعرض أو سجل التطبيق خطأً ، فاستقل لقطة شاشة منه وقم بتضمين مطالبة مثل:

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

  2. التقاط سلوك غير متوقع في البيئات الحية:
    عند تصحيح الأخطاء المنشورة ، قم بتشغيل لقطات من أي سلوك غير متوقع ووصف ما كان ينبغي أن يحدث بدلاً من ذلك:

    • "تُظهر لقطة الشاشة هذه التصميم المحمول حيث يتم كسر قائمة التنقل. يجب أن تنهار في قائمة الهامبرغر ، لكنها تظل موسعة. الرجاء إصلاح هذه المشكلة. "

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

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

  4. مقارنة التصميمات:
    استخدم لقطات من التصميمات من تطبيقات أو مشاريع مماثلة كمصدر إلهام واطلب من الذكاء الاصطناعى تكرار العناصر من تلك التصميمات:

    • "إليك لقطة شاشة لحركة Navbar. اجعل Navbar الخاص بي يبدو هكذا ، مطابقة لأسلوبها واستجابةها. "

اطلب من الذكاء الاصطناعى إنشاء نظام تتبع تغيير مخصص

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

مثال مثال على إنشاء نظام تتبع:

  • "قم بإنشاء نظام داخل المشروع يتتبع تلقائيًا جميع التغييرات التي تم إجراؤها على الكود ، إلى جانب الطوابع الزمنية وأوصاف كل تغيير."

هذا يمكن أن يشمل:

  1. ملف سجل مركزي:
    يمكن لـ AI إنشاء ملف (على سبيل المثال ، changelog.txt ) حيث يقوم تلقائيًا بإلحاق وصف لكل تغيير يجعله:

    • تنسيق مثال لإدخالات changelog: 
       Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.

  2. تعليقات رمز مضمنة:
    اطلب من الذكاء الاصطناعي شرح تغييراته مباشرة في الكود:

    • مثال: 
       // Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);

  3. أرقام الإصدار أو العلامات:
    اطلب من أرقام أو علامات الإصدار AI تضمين من الذكاء الاصطناعي داخل الرمز حتى تتمكن من العودة إلى نقاط محددة إذا لزم الأمر:

    • مثال مثال: "أضف علامات الإصدار في التعليقات في الجزء العلوي من كل ملف ، وتحديثها في كل مرة يتم فيها تغيير."

لماذا يساعد:

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

تتبع العرض التوضيحي باستخدام ميزة وكيل المؤشر:

https://github.com/techcow2/cursor-agent-tracking

الفصل 4: توجيه الذكاء الاصطناعي لمعالجة المشكلات والأخطاء والتحديات بفعالية

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

المشكلة: تجنب الأخطاء المتكررة

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

الحل: مطالبات كتابة السياق

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

تعليمات خطوة بخطوة:

  1. العودة إلى حالة مستقرة (إذا لزم الأمر):

    • قبل إجراء التغييرات ، تأكد من أن مشروعك في حالة مستقرة حيث يعمل بشكل صحيح دون الإضافات أو التعديلات الإشكالية.

  2. تحديد وتوثيق المشكلة:

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

  3. صياغة المطالبة الخاصة بك:

    • استخدم هذا القالب لتوجيه الذكاء الاصطناعي: 
       Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
    • أمثلة:
      • "أضف ميزة تتيح للمستخدمين تصفية المنتجات حسب الفئة على الصفحة الرئيسية. قم بتنفيذ هذه الميزة بعناية وتجنب التسبب في هذا الخطأ: Typeerror: لا يمكن قراءة خاصية "خريطة" غير محددة. "
      • "إصلاح المشكلة باستخدام زر تسجيل الدخول لا يعيد توجيه المستخدمين بعد التقديم. تأكد من عدم تعطيل أي ميزات أخرى خلال هذه العملية. "

  4. توفير السياق (إن أمكن):

    • إذا كنت تشك في أن أجزاء معينة من الكود الخاص بك مرتبطة بالمشكلة ، فقم بتضمين تلك التفاصيل في مطالبك: 
       The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.

  5. مراجعة واختبار الإخراج:

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

لماذا هذا يعمل

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

الفصل 5: فهم مكتبات CDN ودورها في مشروعك

عند بناء أو تعزيز موقع ويب أو تطبيق قائم على الويب ، يعد الكفاءة والأداء عاملين هامين. إحدى الطرق الفعالة لتحقيق هذه الأهداف هي استخدام مكتبات شبكة توصيل المحتوى (CDN) . سوف يرشدك هذا الفصل من خلال مكتبة CDN ، وكيف تستفيد من مشروعك ، وتقديم بعض المكتبات الأكثر شعبية مثل CSS Tailwind و Bootstrap و Material UI والمزيد. سيوفر أيضًا أمثلة مفيدة حول كيفية المطالبة بمساعد الذكاء الاصطناعي لدمج هذه المكتبات واستخدامها - خاصةً مفيدًا إذا كنت جديدًا في الترميز والاعتماد على AI لتبسيط مهام التطوير.

ما هي مكتبة CDN؟

شبكة توصيل المحتوى (CDN) عبارة عن شبكة موزعة جغرافياً من الخوادم التي توفر محتوى الويب - مثل مكتبات JavaScript أو أطر CSS أو الخطوط - بشكل مباشر للمستخدمين بناءً على موقعهم. تشير مكتبة CDN إلى إصدار من إطار أو أداة شائعة (مثل Bootstrap أو jQuery) التي يتم استضافتها على هذه الشبكات. بدلاً من تنزيل الملفات على الخادم الخاص بك أو جهاز التطوير ، يمكنك الرجوع إليها مباشرة من CDN.

لماذا تستخدم مكتبات CDN؟

  1. أوقات تحميل أسرع
    تقدم CDNs ملفات من الخوادم الموجودة الأقرب إلى المستخدمين ، مما يقلل من الوقت الذي يستغرقه موقعك.

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

  3. سهولة التنفيذ
    يمكنك إضافة مكتبات قوية بسرعة - غالبًا مع سطر أو سطر رمز واحد فقط.

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

  5. مزايا التخزين المؤقت
    إذا كان المستخدم قد قام بالفعل بتحميل نفس المكتبة أو الإطار من CDN على موقع آخر ، فقد يستخدم متصفحه الإصدار المخزن مؤقتًا ، مما يزيد من أوقات التحميل.

كيفية مطالبة AI باستخدام مكتبات CDN

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

  • دمج إطار عمل CSS
    مثال موجه:

    "استخدم Bootstrap CDN في ملف HTML الحالي الخاص بي. تأكد من انهيار Navbar على الهاتف المحمول. ضع تذييل في الأسفل مع إشعار بحقوق الطبع والنشر البسيط. "

  • الهجرة من إطار إلى آخر
    مثال موجه:

    "استبدل CSS Tailwind مع bootstrap عبر CDN في مشروعي. قم بتحويل فئات Tailwind الحالية بعناية إلى معادل Bootstrap للحفاظ على نفس التصميم العام. "

  • إضافة أداة JavaScript
    مثال موجه:

    "قم بتضمين Lodash من CDN في INDEX.HTML. ثم ، في ملف Main.js الخاص بي ، أوضح كيفية استخدام وظيفة Debounce الخاصة بـ Lodash لإدخال نص. "

تعطي هذه المطالبات وضوح AI على المكتبة التي يجب استخدامها ، وكيفية استخدامها (عبر CDN) ، وأي مهام أو ميزات محددة تريد تنفيذها.

مكتبات CDN الشهيرة لتطوير الويب

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

1. Tailwind CSS

  • وصف:
    إطار عمل CSS الأول الذي يساعدك على بناء تصميمات مخصصة بسرعة باستخدام فئات محددة مسبقًا في HTML.

  • الأفضل لـ:
    المطورين الذين يريدون التحكم الحبيبي في التصميم دون كتابة الكثير من CSS المخصصة.

  • تنفيذ العينة: 

     <link 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
  rel="stylesheet"
>

  • مثال موجه منظمة العفو الدولية:

    "أضف CSS Tailwind إلى مشروعي عبر CDN. قم بإنشاء صفحة منزلية برأس وقسم بطل بسيط وتذييل. استخدم فصول Tailwind لضمان تصميم نظيف وحديث. "

2. bootstrap

  • وصف:
    واحدة من أكثر أطر عمل CSS المستخدمة على نطاق واسع لبناء مواقع الويب المستجيبة للهواتف المحمولة. إنه يأتي مع مكونات مصممة مسبقًا مثل Navbars و Forms و Midals والمزيد.

  • الأفضل لـ:
    المبتدئون الذين يريدون تصميم سريع ومتسق مع الحد الأدنى من الإعداد.

  • تنفيذ العينة: 

     <link 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
>
<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>

  • مثال موجه منظمة العفو الدولية:

    "أضف أحدث روابط Bootstrap CDN إلى موقع الويب الخاص بي. قم بإنشاء شريط نافي سريع الاستجابة مع منسدلة لـ "الخدمات" وشريط بحث على اليمين. تأكد من أنها تبدو جيدة على الأجهزة المحمولة. "

3. واجهة المستخدم المادية (MUI)

  • وصف:
    مكتبة قائمة على رد الفعل التي تنفذ نظام تصميم المواد من Google ، تقدم مكونات جاهزة للاستخدام مثل الأزرار والبطاقات وحوار الحوار.

  • الأفضل لـ:
    رد فعل المشاريع التي تتطلب تصميمًا أنيقًا وحديثًا ومهنيًا.

  • تنفيذ العينة:

    • CDN لأيقونات المواد: 
       <link 
  href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet"
>
    • تكامل رد الفعل (عبر NPM): 
       npm install @mui/material @emotion/react @emotion/styled

    (بينما توصي UI Material في المقام الأول NPM ، لا يزال بإمكانك الرجوع إلى خطوط الأيقونات الخاصة بهم عبر CDN.)

  • مثال موجه منظمة العفو الدولية:

    "دمج أيقونات المواد من CDN واستخدامها في تطبيق React الخاص بي. قم بإنشاء مكون بطاقة بسيط لعرض المنتجات باستخدام زر "إضافة إلى CART" على غرار المواد. "

4. الخط رائع

  • وصف:
    مكتبة رمز شاملة تقدم أيقونات متجه قابلة للتطوير يمكن تصميمها بسهولة مع CSS.

  • الأفضل لـ:
    إضافة بسرعة أيقونات وسائل التواصل الاجتماعي أو أيقونات البحرية أو أي أيقونات أخرى دون إنشاء SVGs مخصصة.

  • تنفيذ العينة: 

     <link 
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
  rel="stylesheet"
>

  • مثال موجه منظمة العفو الدولية:

    "أضف خطًا رائعًا إلى HTML عبر CDN. استبدل جميع أيقونات العناصر النائمة في Navbar برموز Font Awesome لـ "Home" و "Profile" و "Cart". تأكد من توسيع نطاقها بشكل صحيح على الهاتف المحمول. "

5. jQuery

  • وصف:
    مكتبة JavaScript الكلاسيكية المعروفة بتبسيط معالجة DOM ، ومعالجة الأحداث ، وعمليات AJAX.

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

  • تنفيذ العينة: 

     <script 
  src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>

  • مثال موجه منظمة العفو الدولية:

    "أضف jQuery عبر CDN إلى INDEX.HTML. أرني كيفية إخفاء Div عندما ينقر المستخدم على زر ، وتسجيل رسالة نجاح إلى وحدة التحكم. "

6. لوداش

  • وصف:
    مكتبة JavaScript Utility التي توفر مجموعة واسعة من الوظائف لمعالجة البيانات ، بما في ذلك الاستنساخ العميق ، والتعبير ، وأكثر من ذلك.

  • الأفضل لـ:
    تبسيط العمليات المعقدة على المصفوفات والأشياء والسلاسل.

  • تنفيذ العينة: 

     <script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>

  • مثال موجه منظمة العفو الدولية:

    "أضف Lodash من CDN. قم بتحويل حلقاتي الحالية إلى الأساليب ، وتوضيح كيفية ترميم حقل البحث. "

7

  • وصف:
    مكتبة CSS التي تقدم رسوم متحركة مسبقًا (PLAND ، LED ، SLIDE ، إلخ) يمكنك تطبيقها على العناصر عن طريق إضافة فصول محددة.

  • الأفضل لـ:
    إضافة الرسوم المتحركة بسرعة إلى عناصر دون كتابة الرسوم المتحركة CSS مخصصة.

  • تنفيذ العينة: 

     <link 
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
  rel="stylesheet"
>

  • مثال موجه منظمة العفو الدولية:

    "قم بتضمين ANIMATE.CSS عبر CDN وتطبيق رسوم متحركة تتلاشى على قسم HERO الخاص بي في تحميل الصفحة. قم أيضًا بتطبيق تأثير ترتد على زر "التسجيل الآن".

8. Chart.JS

  • وصف:
    مكتبة JavaScript متعددة الاستخدامات لإنشاء الرسوم البيانية التفاعلية والرسوم البيانية.

  • الأفضل لـ:
    المبتدئون الذين يريدون طريقة مباشرة لتصور البيانات دون الغوص في مكتبات أكثر تعقيدًا.

  • تنفيذ العينة: 

     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

     const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: ['red', 'blue', 'yellow']
    }]
  }
});

  • مثال موجه منظمة العفو الدولية:

    "أضف chart.js عبر CDN وقم بإنشاء مخطط شريط يوضح بيانات المبيعات الشهرية. قم بتسمية المحور y على أنه "مبيعات" ومحور X مع أشهر السنة. "

اختيار المكتبة المناسبة لمشروعك

  1. حدد احتياجاتك
    حدد ما إذا كنت بحاجة إلى مساعدة في المقام الأول مع التصميم (CSS) أو مع وظيفة JavaScript. تركز بعض المكتبات (مثل Bootstrap أو Tailwind) على التصميم ، بينما تركز البعض الآخر (مثل jQuery أو Lodash) على المساعدة في مهام JavaScript.

  2. تحقق من التوافق
    تأكد من أن المكتبة التي تختارها تعمل بشكل جيد مع الأدوات أو الأطر التي لديك بالفعل.

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

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

    "أي مكتبة هي الأفضل لمستخدم واجهة مستخدم صديقة للمبتدئين ، قابلة للتخصيص للغاية: Tailwind أو Bootstrap أو واجهة المستخدم المادية؟"

    يمكن لمنظمة العفو الدولية شرح إيجابيات وسلبيات لكل خيار في سياق مشروعك.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل