رحلتي لإنشاء مكون WordPress الإضافي باستخدام ChatGPT: 120 ساعة من العمل، بدون خبرة سابقة
نشرت: 2024-08-28سأكون صادقًا: اعتقدت بالفعل أنه يمكنني إنشاء مكون إضافي لـ WordPress باستخدام ChatGPT في بضع ساعات فقط. أو على الأقل هذا ما قادتني جميع البرامج التعليمية على YouTube وخيوط Twitter إلى تصديقه.
لكن دعوني أخبركم، أن تلك القصص أهملت بعض التفاصيل المهمة - حوالي 120 ساعة من التفاصيل، على وجه الدقة. نعم، هذا هو الوقت الذي استغرقته بالفعل في إنشاء البرنامج الإضافي من البداية إلى النهاية: 120 ساعة!
للسياق، لم تكن لدي أي خبرة سابقة في تطوير المكونات الإضافية أو WordPress، لكنني قررت التعمق في الأمر على أي حال. وعلى الرغم من أنني أحببت التحدي، إلا أنه كان أصعب بكثير مما توقعت. في كل خطوة على الطريق، كنت أصطدم بحاجز تلو الآخر، والكثير منها لم أكن أعلم بوجودها. لقد كان الأمر محبطًا، ولكنه كان أيضًا تجربة تعليمية ضخمة جدًا (!).
على افتراض أنك تخطط للسير على خطاي، فإنني أحثك بشدة على قراءة هذه المقالة بالكامل مسبقًا. أنا لا أقول ذلك كنوع من الترويج للذات. أنا أقول ذلك لأنه سيوفر لك ساعات – بل أيام – من العمل الإضافي. هناك الكثير من الأشياء التي عثرت عليها في هذه العملية ولم يكن لدي أدنى فكرة عن أهميتها إلا بعد وقوعها. ولسوء الحظ، أدى ذلك إلى مراجعات لا تعد ولا تحصى للتعليمات البرمجية (مليئة بالكثير من الإحباط) والتي كان من الممكن منعها. من خلال قراءة هذا، لن يكون لديك هذه المشكلة.
من هو ومن ليس من أجله 🙋♂️
اعتمادًا على خلفيتك ومهاراتك، قد تتساءل عما إذا كنت "مؤهلاً بدرجة كافية" للقيام بذلك. سأقول هذا كثيرًا:
على الرغم من أنك لا تحتاج إلى أي معرفة مسبقة بالبرمجة، إلا أنك تحتاج إلى أن تكون متحمسًا لتعلم بعض التعليمات البرمجية والعملية العامة لتطوير البرنامج الإضافي. هناك الكثير من المراحل التي يتعين عليك اجتيازها، وفي كثير من الأحيان، لا علاقة لمرحلة واحدة بالأخرى من حيث المهارات (أو حتى الأدوات) التي تحتاجها لإكمالها. باختصار، كن مستعدًا للتعلم – كثيرًا .
اعتمادًا على طبيعة مكونك الإضافي وأهدافك النهائية، قد يستغرق الأمر شهرًا أو أكثر للتوصل إلى منتج نهائي.
سيساعدك الاهتمام القوي بالتفاصيل والتعرف على الأنماط كثيرًا، وكذلك معرفة ما تفعله PHP وJavaScript وCSS. لا تحتاج إلى معرفة كيفية البرمجة باستخدامها، ولكن فهم الغرض منها وكيفية استخدامها سيكون بمثابة ميزة.
إذا لم يكن أي مما سبق يصفك - وخاصة الرغبة في التعلم - وكنت تبحث عن حل سريع وسهل، فهذا ليس مناسبًا لك. إنها ليست سريعة ولا سهلة. لكن هذا ممكن إذا بذلت الجهد.
إذا كنت موافقًا على ذلك، فلنبدأ.
المرحلة الأولى: قم بتخطيط المكون الإضافي الخاص بك بالتفصيل 📝
السؤال الأول الذي عليك أن تطرحه على نفسك – وتجيب عليه – هو ما نوع المكون الإضافي الذي أرغب في إنشائه وماذا أريد أن يفعل؟
قد تميل إلى الإسراع في تنفيذ هذا الأمر حتى تتمكن من البدء فعليًا في البناء والبرمجة، لكنني أحثك على أخذ وقتك في ذلك. ما تفعله هنا سيضع الأساس لمطالباتك وسيسمح لك بالبناء بطريقة منظمة، بدلاً من إضافة أشياء بسرعة. لتجاوز هذه المرحلة بفعالية، ضع في اعتبارك ما يلي:
- ما هي الوظائف التي تريد أن يتمتع بها البرنامج المساعد الخاص بك؟
- كيف تريد أن يبدو الجانب wp-admin منه؟
- قم بإنشاء إطارات سلكية أو مخططات انسيابية لتصور سير عمل البرنامج الإضافي.
- قم بتخطيطها ووصفها بأدق التفاصيل.
- قرر ما إذا كنت تريده للاستخدام الخاص أو إذا كنت تريد إتاحته في مستودع WordPress للوصول العام.
وظائف
المشرف wp
بعد ذلك، فكر في الطريقة التي تريد أن يظهر بها المكون الإضافي الخاص بك ويعمل في منطقة إدارة WordPress. وهذا يشمل:
- صفحات الإعدادات : ما الخيارات التي تريد توفيرها؟ كيف ستنظمهم؟
- القوائم : أين سيظهر المكون الإضافي الخاص بك في قائمة الإدارة؟ هل سيكون بها قوائم فرعية؟
- Metaboxes : إذا كان المكون الإضافي الخاص بك يتفاعل مع المنشورات أو الصفحات، فهل سيحتاج إلى Metaboxes مخصصة؟
- الجداول : إذا كنت تقوم بتخزين البيانات، فكيف ستعرضها ليراجعها المسؤول؟
في حالتي، قررت إنشاء صفحة إعدادات رئيسية تحتوي على علامات تبويب لكل رمز من الرموز القصيرة الخاصة بي، وصفحة منفصلة للتوثيق، وأيضًا صفحة تحتوي على نموذج اتصال في حالة رغبة المستخدمين في الاتصال بي. هذا ما توصلت إليه:
لسوء الحظ بالنسبة لي - ولكن ليس بالنسبة لك لأنك تقرأ هذا - هو أنني كنت أركز بشدة على وظيفة الواجهة الأمامية للمكون الإضافي الخاص بي أثناء مرحلة التخطيط، لدرجة أنني أهملت الجانب wp-admin من الأشياء تمامًا.
هذا جعل الأمر يستغرق وقتًا أطول مما كان سيستغرقه إذا خططت له مسبقًا لأنني ظللت مضطرًا إلى مراجعة الكود عندما أدركت أن ما لدي كان غير مكتمل أو كان لدي تجربة مستخدم سيئة. إذا قمت بتخطيطها مسبقًا، أو الأفضل من ذلك، إذا استخدمت الإطارات السلكية، فستكون هذه المرحلة أكثر سلاسة - وهي سلسلة مثالية للنقطة التالية.
الإطارات السلكية أو المخططات الانسيابية
الجمع بين كل شيء ووصفه بالتفصيل
الاستخدام الخاص مقابل الوصول العام عبر مستودع WordPress
هناك قرار آخر يجب عليك اتخاذه قبل الانتقال إلى المرحلة الثانية. يتعلق هذا القرار بمن ستقوم بإنشاء هذا البرنامج الإضافي له.
هل تريد أن تفعل ذلك لنفسك فقط (أو للعميل)؟ أو هل تريد إرساله إلى مستودع WordPress للموافقة عليه بحيث يكون متاحًا لعامة الناس؟
من الناحية الفنية، لا تحتاج إلى اتخاذ هذا القرار مطلقًا بعد. ومع ذلك، بعد فوات الأوان، كنت أتمنى لو فعلت ذلك في وقت سابق من هذه العملية. ولهذا السبب أوصي بأن تفعل ذلك الآن.
السبب هو أن هدفي منذ البداية كان إرسال المكون الإضافي الخاص بي إلى المستودع، لكنني في البداية قمت ببناء المكون الإضافي الخاص بي دون اتباع معايير ترميز WordPress. لقد ركزت فقط على الوظيفة والوصول بها إلى النقطة التي تعمل فيها بدون أخطاء.
ونتيجة لذلك، انتهى بي الأمر إلى إجراء الكثير من التعديلات الإضافية على التعليمات البرمجية لجعل التعليمات البرمجية الخاصة بي متوافقة مع المعايير. وغني عن القول أن هذا استغرق الكثير من الوقت، وكان من الممكن تجنبه.
ومع ذلك، حتى لو كنت تخطط لإنشاء مكون إضافي للاستخدام الخاص فقط، فإنني ما زلت أوصي بالالتزام بمعايير البرمجة. سيؤدي هذا إلى تقليل احتمالية تعطل المكون الإضافي الخاص بك مع إصدارات WordPress اللاحقة. من ناحية العملية، فإن الاختلاف الرئيسي هو أنك لن تحتاج إلى أن تكون شرجيًا فيما يتعلق بالجوانب غير الوظيفية للمعايير.
على سبيل المثال، عند إجراء تعليقات مضمنة مثل // Use global default. مطلوب منك وضع فترة في النهاية. ليس لهذه الفترة أي غرض وظيفي، ولكن إذا كانت مفقودة، فسيتم وضع علامة عليها على أنها "خطأ" وفقًا للمعايير. بالنسبة للإصدار الخاص، يمكنك تجاهل هذا النوع من "الخطأ".
المرحلة الثانية: أعط ChatGPT مطالبة تفصيلية لبدء التطوير 🗣️
الفكرة الرئيسية هنا هي إعطاء GPT نظرة عامة على مكونك الإضافي مع تعليمات واضحة. كاقتراح عام، أنصحك بتجنب محاولة بناء المنزل بأكمله مرة واحدة. من الأفضل اتباع نهج لبنة تلو الأخرى.
لنفترض أنك ستقوم ببناء البرنامج المساعد الخاص بي كمثال.
على الرغم من أنه يحتوي على ثمانية تأثيرات، فإنني أوصي بإخبار GPT أنك تريد البدء بتأثير واحد. تقريبًا كما لو كنت تقوم بإنشاء مكون إضافي ذو تأثير واحد بدلاً من مكون إضافي ذو ثمانية تأثيرات . ثم تحقق للتأكد من أن التأثير يعمل - بما في ذلك منطقة إعدادات الواجهة الخلفية. أصلح أي أخطاء، وبمجرد أن يبدو كل شيء جيدًا، أضف التأثير التالي. ثم فقط اتبع هذه العملية، واحدة تلو الأخرى.
السبب وراء القيام بذلك بهذه الطريقة هو أنه يسهل إصلاح أي أخطاء قد يتم إدخالها في التعليمات البرمجية الخاصة بك مع زيادة تعقيد التعليمات البرمجية الخاصة بك. إذا قامت GPT بإنشاء كل التعليمات البرمجية الخاصة بك مرة واحدة ولم تعمل الكثير من الأشياء، فسيكون إصلاحها أكثر صعوبة.
لا تزال ترغب في إعطاء GPT نظرة عامة شاملة عن رؤيتك الشاملة للمكون الإضافي، ولكن قم بإنهاء الموجه من خلال التركيز على شيء محدد أولاً.
لتوفير بعض الوقت، قمت بإنشاء نموذج نموذجي يمكنك تقديمه إلى ChatGPT للبدء.
تتطلب الأقسام الموجودة بين قوسين [X] إدخالك لإكمالها. قد تضطر أو لا تحتاج إلى تعديله بشكل أكبر، اعتمادًا على نوع المكون الإضافي الذي تخطط لبنائه.
إذا لم تفهم كل شيء في المطالبة، فلا تقلق، فأنا لم أفهم أيضًا. سوف تتعلم أثناء المضي في هذه العملية.
مطالبتي 🤖
I want to build a WordPress plugin called [name] that does the following: [General overview but don't give GPT the specifics yet] I'd like it to work via [Refer back to the section "combine everything and describe it in detail" from phase one; think about how you want your plugin to function - if you're not sure, then you can delete this part] . I would also like to create a settings menu in wp-admin so that users can [Explain what you want your settings menu to look like and do, including any specific UI/UX considerations; if you create any wireframes, upload those as well] I plan on using the following tools for this process: - Docker and/or Local by Flywheel {Choose one or use both} - Terminal (MAC) {if you're using a PC, substitute with Command Prompt} - Sublime Text - Chrome and Chrome inspector tool Also, I want to use GitHub for version control to track changes and collaborate effectively. I will use the default WordPress template provided by GitHub to generate the code for the .gitignore file. However, I will need your help to walk me through how to set up a repository and how to commit my files to it. For the main PHP file, the author name should be [your name] and the author URI should be [your website if you have one] . For any code you generate, please use tabs for indentation and not spaces. {important if you plan on submitting your plugin to the WordPress repository} If you need to enqueue any scripts, please ask me questions to help me figure out whether we should use conditional loading or if we should enqueue globally. In addition, when generating CSS, please follow BEM (Block Element Modifier) methodology. Let's begin with [insert which feature you'd like to build first] Please [Optional: help me setup Local by Flywheel and then] generate the initial PHP file and advise on next steps after that.بعد أن تقوم بتزويد ChatGPT بالمطالبة الخاصة بك، فسوف يرشدك خلال بقية الخطوات، والتي أوضحتها أدناه. تجدر الإشارة إلى أنه اعتمادًا على مزاج ChatGPT أو رغبتك في متابعة العملية كما أوضحتها، فإن الطريقة التي أدرج بها كل شيء قد لا تكون خطية كما تم تقديمها.
لإعطائك فكرة عما أعنيه، قمت باختبار الموجه بنفسي ثلاث مرات مختلفة. وبصرف النظر عن مساعدتي في إعداد Local by Flywheel وإنشاء ملف PHP الأولي، فقد اختار تنفيذ الخطوات الأخرى بطريقة مختلفة في كل مرة.
المحاولة الأولى
في محاولتي الأولى، لم يتجاوز ChatGPT مجرد إنشاء ملف PHP وقدم لي خيارين حول الطريقة التي أرغب في المتابعة بها بعد ذلك. والجدير بالذكر أنه اتبع الإرشادات المتعلقة بوضع البرامج النصية في قائمة الانتظار مع التحميل المشروط وذكرها أيضًا.
المحاولة الثانية
أسفرت المحاولة الثانية عن أبسط ملف PHP، ولكن الاستجابة الشاملة الأكثر شمولاً من حيث العمل من خلال الخطوات. لقد قفز مباشرة إلى استخدام Terminal لإعداد أدلة المشروع وتهيئة Sublime. لقد ذهب الأمر إلى حد تدريبي على كيفية إعداد مستودع Git.
المحاولة الثالثة
وكانت المحاولة الثالثة مشابهة إلى حد ما للمحاولة الأولى. على الرغم من أنه، على عكس المحاولة الأولى، لم يقم ChatGPT بإعداد التحميل المشروط للنصوص البرمجية، ولم يسألني عن ذلك. لقد أنشأتها على أنها عالمية بشكل افتراضي.
الوجبات الجاهزة
السبب الذي جعلني أشارككم هذه المحاولات الثلاث لفترة وجيزة ليس فقط تعزيز ما قلته سابقًا حول كيف أن سير العمل لن يكون بالضرورة موحدًا، ولكن أيضًا للإشارة إلى أن الموجه مناسب لك تمامًا كما هو الحال بالنسبة لـ GPT .
ما أعنيه هو أن الأمر متروك لك للانتباه إلى ما يفعله ChatGPT - وما لا يفعله - وإعادته إلى المسار الصحيح في حالة فشله. لذا، أثناء تقدمك في هذه الرحلة، لا تنس الرجوع مرة أخرى إلى الموجه وأيضًا إلى المؤشرات التي سأشاركها لاحقًا في قسم تصحيح الأخطاء. قم بتذكير ChatGPT وإعادة توجيهه للقيام بما تريد أن يفعله بقدر ما تحتاج إليه.
قم بتنزيل المكون الإضافي الخاص بي واختبره 📥
إذا كنت ترغب في تجربة "الإصدار العملي" من المكون الإضافي الخاص بي، فالملف المضغوط موجود أدناه. سأقوم بتحديث هذا في المستقبل القريب ليشمل إصدار مستودع WP، لكن هذا سيتيح لك استخدامه في الوقت الحالي.
المرحلة الثالثة: الأدوات والبرامج النصية والأدلة وGit 👩💻
في هذه المرحلة، ستقوم بوضع الأساس لبناء المكون الإضافي الخاص بك. إنه أيضًا المكان الذي سيزداد فيه منحنى التعلم بسرعة، خاصة عندما تبدأ في تثبيت البرامج النصية واستخدام الوحدة الطرفية (أو موجه الأوامر إذا كنت تستخدم جهاز كمبيوتر). وهنا الانهيار:
- حدد أداة البيئة المحلية التي تريد استخدامها (على سبيل المثال، Local by Flywheel، أو Docker).
- قم بإعداد أدلة المشروع الخاص بك.
- قم بتثبيت البرامج النصية الخاصة بك (على سبيل المثال، npm، Composer).
- قم بإعداد مستودع Git ("repo") وقم بتحميل (تحميل) ملفات المكونات الإضافية إليه
بناء البيئة المحلية
إعداد أدلة المشروع
تثبيت البرامج النصية
أنشئ مستودع Git ("repo") وأرسل ملفاتك
بعد الانتهاء من جميع الخطوات السابقة، حان الوقت لإنشاء مستودع Git وإلزام ملفاتك الأولية به. تقوم هذه الخطوة بإنشاء لقطة لنقطة بداية مشروعك.
لقد استخدمت GitHub شخصيًا لأن هذا هو ما نستخدمه هنا في Themeisle لذا كان لدي حساب هناك بالفعل، ولكن هناك منصات أخرى (على سبيل المثال، GitLab وBitbucket) أيضًا. إذا انتهى بك الأمر إلى استخدام منصة أخرى غير GitHub، فلا تنس ضبط قالب المطالبة في المرحلة الثالثة .
حرصًا على الإيجاز، لن أشرح لك كيفية القيام بذلك. بمجرد وصولك إلى هذه الخطوة، يمكن لـ ChatGPT إرشادك خلال العملية خطوة بخطوة، بما في ذلك الأوامر التي ستحتاج إلى كتابتها في الوحدة الطرفية / موجه الأوامر.
عند تنفيذ ملفاتك الأولية، ضع هذه النقاط في الاعتبار:
- راجع ما تلتزم به: تأكد من تضمين الملفات الضرورية فقط. استخدم ملف
.gitignoreالخاص بك لاستبعاد أي ملفات مؤقتة أو تم إنشاؤها. - اكتب رسالة التزام واضحة: شيء مثل "الالتزام الأولي: بنية المشروع الأساسية وتكويناته" يعمل بشكل جيد.
- لا تقلق بشأن الكمال: فهذه مجرد نقطة البداية. ستجري المزيد من الالتزامات أثناء تطوير المكون الإضافي الخاص بك.
مرة أخرى، من المرجح أن يقدم لك ChatGPT إرشادات حول الأوامر المحددة التي يجب استخدامها لهذا الالتزام الأولي. إذا لم يحدث ذلك، فقط أطلب منه ذلك. تأكد من كتابة أنك بحاجة إلى الخطوات الدقيقة بناءً على الإعداد الخاص بك ومنصة Git.
بإكمال هذه الخطوة، ستبدأ رسميًا مشروع تطوير المكونات الإضافية الخاص بك بأساس متين للتحكم في الإصدار. من الآن فصاعدًا، ستتمكن من تتبع كل تغيير تجريه، وتجربة الميزات الجديدة بأمان، والتعاون مع الآخرين إذا اخترت القيام بذلك.
المرحلة الرابعة: وقت تشغيل البرنامج المساعد 🖱️
من بين جميع المراحل، أود أن أقول أن هذه المرحلة والمرحلة التالية ربما تكونان الأكثر متعة لأنها عندما تبدأ حقًا في رؤية كل شيء معًا. للبدء، ستحتاج إلى تسجيل الدخول إلى تثبيت WordPress المحلي لديك. إذا انتهى بك الأمر إلى استخدام Local by Flywheel، فالأمر بسيط للغاية، ما عليك سوى النقر فوق الزر WP Admin بالقرب من أعلى اليمين:
إذا انتهى بك الأمر إلى استخدام Docker أو أداة تطوير محلية أخرى ولم تكن متأكدًا من كيفية الوصول إلى موقعك، فما عليك سوى سؤال ChatGPT.
بمجرد تسجيل الدخول، قم بتنشيط المكون الإضافي الخاص بك بالانتقال إلى المكونات الإضافية → المكونات الإضافية المثبتة . ثم ابحث عن المكون الإضافي الخاص بك في القائمة وانقر على "تنشيط" :
⚠️ هام : إذا كنت لا ترى المكون الإضافي الخاص بك هنا، فلا داعي للذعر. من المرجح أن يكون هناك عدم تطابق في الدليل، ولكن بغض النظر عن ذلك، يمكنك النقر فوق ChatGPT لمساعدتك في اكتشاف ذلك. إذا وجدت نفسك لا تزال عالقًا بعد المحاولات المتكررة ولم يقترح عليك ChatGPT تجربة وضع تصحيح WordPress، فاطلب منه أن يعطيك مقتطفات التعليمات البرمجية الخاصة به. سوف تبدو شيئا من هذا القبيل:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );بعد تنشيط المكون الإضافي الخاص بك، ابدأ في استخدامه وقم بتدوين الملاحظات:
- هل كل شيء يعمل كما يفترض به؟ من غير المرجح للغاية .
- ما الذي لا يعمل؟ بأي طريقة لا يعمل؟
- ما هي بعض الأشياء البسيطة التي تجاهلتها تمامًا في الوصف الأولي السريع الذي لا يعمل بشكل صحيح؟
بمجرد قيامك بتدوين ملاحظاتك، تصبح جاهزًا للانتقال إلى المرحلة التالية: تصحيح الأخطاء والفحص.
المرحلة الخامسة: التصحيح والمسح 💻
هناك علاقة ارتباطية بين تعقيد المكونات الإضافية والأخطاء: فكلما زاد تعقيد المكونات الإضافية الخاصة بك، زادت احتمالية وجود أخطاء . ولكن حتى المكونات الإضافية الأبسط ستتطلب فحصًا وتصحيحًا للأخطاء.
فحص
إذا كانت هذه المقالة هي المرة الأولى التي ترى فيها كلمة "فحص" ولم تكن متأكدًا مما تعنيه، فهي بكل بساطة تتحقق من كود المكون الإضافي الخاص بك مقابل مجموعة من القواعد والمعايير لهذا النوع من التعليمات البرمجية. ثم يخبرك إذا وجد أي أخطاء أو تناقضات، وما هي الخطوط الموجودة عليها، وكيفية حلها.
عملية التصفية واضحة إلى حد ما. فقط تأكد من أنك تستخدم أدوات الفحص المناسبة لأنواع التعليمات البرمجية/الملفات التي ستعمل عليها:
- PHP_CodeSniffer مع معايير ترميز WordPress لفحص PHP.
- ESLint لفحص جافا سكريبت.
- StyleLint لفحص CSS.
بالنسبة لجافا سكريبت، قد ترغب أيضًا في إضافة:
- ESLint Unicorn: أكثر من 100 قاعدة ESLint قوية.
- وعد ESLint: مفيد لإدارة المهام غير المتزامنة مثل استدعاءات API أو استعلامات قاعدة البيانات أو معالجة الملفات أو أي عملية تستغرق وقتًا حتى تكتمل.
تصحيح الأخطاء
على عكس الفحص، فإن تصحيح الأخطاء يشبه إلى حد كبير ما فعلته في المرحلة السابقة، وهو أنك تستخدم المكون الإضافي بنفسك، وتحدد المشكلات التي تحتاج إلى إصلاح، ثم تقوم إما بإصلاحها بنفسك أو تطلب من ChatGPT مساعدتك.
أنا شخصيا وجدت تصحيح الأخطاء أكثر تعقيدا من الفحص. أحد الأسباب الكبيرة هو أنه عندما تقوم بالفحص، فإن مخرجات عملية الفحص تخبرك بالضبط ما هي المشكلات، ومكان وجودها في التعليمات البرمجية الخاصة بك. مع تصحيح الأخطاء، لن تحصل على هذا الرفاهية. الأمر متروك لك ولChatGPT لمعرفة ذلك.
ومع ذلك، فإن ChatGPT يواجه صعوبة في التركيز على سطور التعليمات البرمجية التي بها مشاكل، مما يعني أنك بحاجة إلى الاهتمام بـ "الجاهزية والإعداد" قبل أن تسمح له "بالبدء".
لتسهيل الأمور عليك، قمت بتجميع قائمة بجميع النصائح المتنوعة التي كنت سأقدمها لنفسي قبل البدء في مرحلة تصحيح الأخطاء.
لا تكن غامضًا ولا تترك الأمر لـ ChatGPT
إذا لم تعط ChatGPT تعليمات محددة للغاية، فسوف يبدأ في إصدار سطور لا نهاية لها من التعليمات البرمجية إليك وفي كثير من الأحيان لن يكون الرمز مختلفًا عما قدمه لك بالفعل. سيطلب منك "التحقق مرة أخرى" من صحته، ولكن كل ما يفعله هو إضاعة الوقت. ليس هناك ما هو أكثر إحباطا من هذا:
ما يجب عليك فعله بدلاً من ذلك، هو إعطاء ChatGPT تعليمات محددة للغاية ليس فقط لإنشاء التعليمات البرمجية، ولكن لعزل سطور التعليمات البرمجية التي يعتقد أنها تسبب المشكلة على وجه التحديد وإظهارها لك. اطلب منه أن يشرح كيف يخطط لتغيير تلك السطور ولماذا يعتقد أن هذه التغييرات ستحل المشكلة. وأخيرًا، اطلب منه أن يخبرك بالنتيجة المتوقعة بعد تنفيذ هذه التغييرات.
ستساعدك هذه الإرشادات في الاستمرار في التركيز على المشكلة وستعمل على تقليل الأخطاء غير المباشرة حيث قد تؤدي إلى حل مشكلتك الوحيدة ولكنها تسبب مشاكل جديدة في العملية.
CSS العادي مقابل BEM CSS
فيما يتعلق بما سبق ولكنه خاص بـ CSS، يجب أن تضع في اعتبارك أنه بالنسبة لأي مقتطفات CSS، سيقوم ChatGPT بإنشاء CSS قياسي، أو ما أسميه "classroom CSS" افتراضيًا.
هذه هي لغة CSS الأساسية التي ستتعلمها عند حضور دورة تدريبية للمبتدئين حول هذا الموضوع. من السهل فهمه، ولا يوجد أي خطأ تقني به في حد ذاته، ولكن عند تطوير مكونات WordPress الإضافية، يمكن أن يؤدي ذلك إلى تعارض مع المكونات الإضافية أو السمات الأخرى.
بدلاً من ذلك، من الأفضل إخبار GPT باستخدام منهجية BEM (Block Element Modifier). يساعد BEM على تقليل مخاطر تعارضات CSS من خلال توفير اتفاقية تسمية واضحة ومنظمة. فهو يضمن أن أنماطك أكثر قابلية للتنبؤ بها وأسهل في إدارتها، حيث أن كل كتلة وعنصر ومعدل له اسم فئة وصفي مميز يقلل من فرصة تأثيرات التصميم غير المقصودة. بالإضافة إلى ذلك، يعمل BEM على تحسين إمكانية الصيانة من خلال تسهيل تحديد أنماط معينة وتحديثها دون التأثير على الأنماط الأخرى.
لقد قمت بالفعل بتضمين إشارة إلى هذا في المثال الموجه في المرحلة الثانية، لكنني أسلط الضوء عليه هنا حتى تتذكر دائمًا إعطاء هذه التعليمات إلى ChatGPT لمقتطفات CSS الخاصة بك.
التحميل المشروط مقابل قائمة الانتظار العالمية
السلوك الافتراضي الآخر لـ ChatGPT يتعلق بوضع البرامج النصية في قائمة الانتظار. لا تقلق إذا كنت لا تعرف ماذا تعني هذه العبارة حتى الآن. ما يهم هو أن تتعرف عليه في التعليمات البرمجية الخاصة بك عندما تراه. سيبدو الأمر كالتالي:
function enqueue_my_scripts() { wp_enqueue_script('my-plugin-script', plugin_dir_url( FILE ) . 'js/my-script.js', array('jquery'), '1.0.0', true); } add_action('admin_enqueue_scripts', 'enqueue_my_scripts');في المثال أعلاه، ستقوم التعليمات البرمجية بإدراج برنامج نصي عالميًا لجميع صفحات الإدارة، وهو أمر غالبًا ما يكون غير ضروري ويمكن أن يؤدي إلى مشكلات في الأداء. لسوء الحظ، هذا ما سيقدمه لك ChatGPT إلا إذا تحدثت وقلت له ألا يفعل ذلك. لكي نكون واضحين، في بعض الحالات، يكون هذا مناسبًا تمامًا، ولكن في كثير من الحالات، ليس كذلك.
لذلك، بمجرد ملاحظة إنشاء ChatGPT لأي رمز بكلمة "enqueue"، تأكد من إجراء محادثة حول هذا الموضوع. اسأل ChatGPT عما إذا كان من المنطقي إدراج نصوصك البرمجية في قائمة الانتظار عالميًا، أو فقط على الصفحات المحددة التي تحتاج إلى نصوص برمجية - وهو ما يُعرف باسم "التحميل المشروط".
التذكير والتذكير بشكل متكرر
يميل ChatGPT إلى النسيان، ويزداد الأمر سوءًا عند استخدامه للبرمجة. لذلك، على الرغم من أنك قد تعطيه تعليمات محددة، فإن احتمال اتباعه لتلك التعليمات طوال مدة مشروعك هو صفر .
في بعض الأحيان سوف يتجاهل تمامًا ما تطلب منه القيام به. إذا حدث هذا، فكن أكثر صرامة وأخبره أنه لا يفعل ما تريد:
علاوة على ذلك، في غضون عدد قليل من التفاعلات، سيعود بسرعة إلى سلوكه القياسي المتمثل في محاولة إغراقك بكميات هائلة من التعليمات البرمجية التي لا علاقة لها بقسم التعليمات البرمجية الذي تحاول تصحيحه.
عندما يحدث ذلك، ما عليك سوى الضغط على زر الإيقاف الموجود على مخرج GPT وتذكيره باتباع تعليماتك. من المفيد أيضًا نسخها ولصقها في نافذة الدردشة عند تقديم التذكير.
والحديث عن إنشاء سطور طويلة من التعليمات البرمجية ...
تجنب قيام ChatGPT بإعادة إنشاء الملفات بأكملها لك
عندما لا تكون معتادًا على التعامل مع التعليمات البرمجية وتشعر بالخوف منها، فإن مطالبة ChatGPT بإعادة إنشاء الملف بالكامل لك بعد كل تعديل على التعليمات البرمجية قد يبدو جذابًا في البداية.
كل ما عليك فعله هو "النسخ واللصق"، أليس كذلك؟
على الرغم من أن الأمر قد يبدو مغريًا، إلا أنه في الواقع فكرة سيئة . على المدى الطويل سوف يسبب لك المزيد من المتاعب. لن تضيع الكثير من الوقت في القيام بذلك فحسب - خاصة إذا كنت تقوم بتصحيح أخطاء ملف PHP الخاص بك، والذي يمكن أن يصبح طويلًا جدًا، ولكن ChatGPT قد يقدم أخطاء جديدة في التعليمات البرمجية الموجودة لديك في هذه العملية. سيؤدي هذا إلى حل المشكلة التي تعمل عليها، ولكنه بعد ذلك سيقوم عن طريق الخطأ بتعديل جزء آخر من الملف وتعطل شيء ما.
من الأفضل عزل الأجزاء المحددة من الكود التي تسبب المشكلة والعمل عليها فقط.
أعتبر علة واحدة في وقت واحد
على غرار ما سبق، حتى لو كان لديك العديد من الأخطاء – إلا إذا كانت بسيطة جدًا – أخبر ChatGPT فقط عن واحدة منها في كل مرة. أصلح كل خطأ قبل الانتقال إلى الخطأ التالي.
انتبه جيدًا للسطور العليا والسفلى من مقتطفات التعليمات البرمجية
عندما يمنحك ChatGPT مقتطفات من التعليمات البرمجية، فإنه أحيانًا - ولكن ليس دائمًا - يقوم بتغليفها من خلال إظهار السطر العلوي من الملف الإجمالي الذي تعمل معه، وكذلك السطر الأخير. لذلك، يجب أن تكون حريصًا على عدم نسخ ولصق المقتطف بأكمله دائمًا لأن ذلك سيؤدي إلى تعطل التعليمات البرمجية الخاصة بك.
⚠️ انتبه جيدًا للسطر العلوي:
إذا لم يكن الأمر ذا صلة بمقتطف الشفرة المحدد الذي تحاول تصحيحه، فتجاهله.
وينطبق الشيء نفسه على النتيجة النهائية، على الرغم من أن هذا قد يكون من الصعب اكتشافه. يمكن أن يكون الأمر بسيطًا في بعض الأحيان مثل }); مما يتسبب في تعطل التعليمات البرمجية الخاصة بك لأنه يغلق مقتطفًا أصليًا لم يكن من المفترض إغلاقه بعد.
بعد فترة من الوقت سوف تتحسن في اكتشاف ذلك، ولكن عندما تبدأ رحلة تطوير المكونات الإضافية، إذا لاحظت أن الكثير من الأشياء تتعطل بعد إضافة مقتطف، فحاول حذف هذا السطر الأخير لمعرفة ما إذا كان "بطريقة سحرية" "يصلح كل شيء.
وحدة التحكم هي أفضل صديق لك
إذا حاول ChatGPT تصحيح نفس المشكلة دون نجاح ووجدت نفسك في دائرة مفرغة، فاطلب منه إضافة أسطر console.log إلى أقسام التعليمات البرمجية التي يعتقد أنها تسبب المشكلة. ثم افتح وحدة التحكم أثناء إعادة إنشاء الخطأ. وسوف يفسر ما حدث. يمكنك بعد ذلك التقاط لقطة شاشة لهذا الشرح وإعطائه إلى ChatGPT حتى يتمكن من معرفة كيفية إصلاحه.
للوصول إلى وحدة التحكم في Google Chrome، انقر بزر الماوس الأيمن على الصفحة وحدد فحص :
عندما لا تعطيك وحدة التحكم إجابات، تحقق من قاعدة البيانات الخاصة بك
وحدة التحكم ممتازة وستعطيك غالبًا الإجابات التي تحتاجها. ومع ذلك، في بعض المناسبات، سيؤكد فقط ما تواجهه، ولكن دون إعطائك أي نوع من التوجيه حول كيفية إصلاحه.
على سبيل المثال، عندما كنت أحاول إضافة تأثير كتابة إلى المكون الإضافي الخاص بي، تم ضبط سرعة المعاينة الافتراضية للتأثير في wp-admin على 23 مللي ثانية. لقد أمضيت وقتًا طويلاً في مراجعة ملفات PHP وJavaScript لمحاولة حل المشكلة، ولكن دون جدوى.
أكدت وحدة التحكم أنه تم التحميل عند الساعة 23، ولكن بعد ذلك، لم تعطني أي معلومات قيمة أخرى:
في النهاية، قمت بفحص قاعدة البيانات، وأدركت أن القيمة الخاطئة تأتي من هناك:
لقد حولت ذلك من 23 إلى 60، وهو ما أردته، وقد حلت المشكلة.
إذا انتهى بك الأمر إلى استخدام Local by Flywheel، فيمكنك الوصول إلى قاعدة البيانات الخاصة بك بسهولة من خلال الواجهة عن طريق النقر فوق علامة التبويب "قاعدة البيانات":
بمجرد حصولك على حق الوصول، المكان الجيد لبدء البحث هو نفس المكان الذي رأيتني أبحث فيه في لقطة الشاشة أعلاه: wp_options. في أغلب الأحيان، سيتم العثور على إعدادات المكونات الإضافية الخاصة بك هناك.
⚠️ ومع ذلك، من المهم أيضًا الإشارة إلى أن المشكلة الأساسية الأكبر هنا هي أن الكود الخاص بي كان يفتقد تعليمات التنشيط بالفعل. عند تنشيط المكون الإضافي الخاص بك لأول مرة، يجب التحقق من وجود إعدادات معينة في قاعدة البيانات. إذا لم يحدث ذلك، فيجب على المكون الإضافي الخاص بك إضافتها بالقيم الافتراضية المقصودة. وهذا يضمن أن كل تثبيت جديد للمكون الإضافي الخاص بك يبدأ بالإعدادات الصحيحة. لقد تعلمت هذا بالطريقة الصعبة حتى لا تضطر إلى ذلك.
الخيط الجديد يمكن أن يمنحك اختراقات
مع نمو التعليمات البرمجية الخاصة بك وطول سلسلة محادثاتك مع ChatGPT، ستكون عرضة لارتكاب الأخطاء أو نسيان الأشياء. عند نقطة معينة، من الجيد أن تبدأ موضوعًا جديدًا. قم بتحميل ملفات المكونات الإضافية الرئيسية الخاصة بك إلى الموضوع الجديد واشرح لـ ChatGPT ما تفعله والمكان الذي توقفت عنده.
فيما يلي مثال للمطالبة التي يمكنك استخدامها:
كنت أعمل على تصحيح أخطاء مكون WordPress الإضافي معك في موضوع آخر ولكن أعتقد أن الموضوع أصبح طويلًا جدًا وبدأت تشعر بالارتباك. لنبدأ من جديد.
ألقِ نظرة على ملفات المكونات الإضافية هنا ودعنا نحاول استكشاف الأخطاء وإصلاحها [وصف الخطأ الخاص بك] .
وأيضًا، وهذا أمر مهم للغاية، عند إنشاء إصدارات جديدة من مقتطفات التعليمات البرمجية في محاولة لاستكشاف الأخطاء وإصلاحها، يرجى عدم إنشاء المقتطف فحسب، بل تقديم توضيح حول الأسطر التي قمت بتغييرها عما هو موجود بالفعل. اشرح أيضًا الأساس المنطقي وراء تغيير تلك الخطوط، وما يمكن أن نتوقع رؤيته من خلال التغييرات التي أجريتها.
[في حالة إنشاء CSS، لا تنس تذكير ChatGPT باتباع منهجية BEM (معدل عناصر الكتلة).]
لا تخف من استخدام عقلك
كلما كان المكون الإضافي الخاص بك أكثر تعقيدًا، زادت احتمالية قيام GPT بإفساد التعليمات البرمجية الخاصة بك. على الرغم من أنه يساعدك على تصحيح الأخطاء، إلا أنه في بعض الأحيان ستجد أنه من الأفضل اكتشاف الحل بنفسك. لأكون صادقًا، حدث هذا معي كثيرًا، خاصة في المراحل اللاحقة من بنائي حيث زاد حجم ملف PHP الرئيسي الخاص بي إلى أكثر من 500 سطر (مع تجاوز الإصدارات الأحدث 1000 سطر).
اعتمادًا على معرفتك وارتياحك لقراءة التعليمات البرمجية، قد يكون هذا رادعًا، ولكن إذا كنت جيدًا في التعرف على الأنماط واكتشاف التناقضات، فيمكنك تدبر الأمر.
أنا بالتأكيد لست مبرمجًا ماهرًا، على الرغم من أن لدي فهمًا لما تفعله لغات البرمجة المختلفة وبعض الإلمام بالأكواد، وهو ما ساعدني.
ومع ذلك، حتى لو كنت مبتدئًا تمامًا، يمكنك إلقاء نظرة على سطور التعليمات البرمجية التي تعتقد GPT أنها قد تسبب المشكلة. ثم ابحث عن عنصر مماثل في التعليمات البرمجية الخاصة بك والذي يعمل بشكل صحيح. قارن الكود الخاص به بكود العنصر المعطل وحاول معرفة ما هو المختلف فيه. في كثير من الأحيان هذا سوف يحل المشكلة:
احتفظ بنسخ احتياطية من ملفات المكونات الإضافية (اختياري في حالة استخدام Git)
على الرغم من أن استخدام Git يوفر طريقة قوية لإدارة التغييرات التي تم إجراؤها على التعليمات البرمجية الخاصة بك والرجوع إليها، فليس من الجيد أبدًا الاحتفاظ بنسخ احتياطية يدوية أيضًا. عندما تصل إلى مرحلة مهمة في التعليمات البرمجية الخاصة بك، أقترح عليك حفظ نسخة من ملفات التعليمات البرمجية الرئيسية الخاصة بك في مجلد آخر:
يمكن أن يكون هذا بمثابة شبكة أمان إضافية، مما يسمح لك بالعودة بسهولة إلى الإصدار السابق الأفضل إذا واجهت أخطاء خطيرة أثناء الاستمرار في الإنشاء.
لا تستسلم بسهولة، ولكن اعرف حدودك
قد تكون هناك بعض الوظائف أو التعديلات التي لن تتمكن من تنفيذها بغض النظر عن مدى صعوبة محاولتك. كن مستعدًا لضبط توقعاتك والعمل على تجاوزها . هذا لا يعني الاستسلام إذا اصطدمت بالحائط. ومع ذلك، فهذا يعني أنه إذا قمت بـ 100 محاولة وأمضيت ساعات (أو أيام) في محاولة تحقيق شيء ما دون نجاح، فمن المحتمل أن يكون ذلك غير ممكن أو خارج نطاق قدراتك أنت وChatGPT.
أخيرًا، إذا كنت تتساءل عما إذا كان يجب عليك تصحيح الأخطاء أو فحصها أولاً، حسب فهمي، لا توجد إجابة واضحة. لقد قمت بتصحيح الأخطاء قبل أن أقوم بالفحص، ولكن يمكنك إما اختيار الخيار الافتراضي لـ ChatGPT أثناء تنفيذ العملية، أو إخباره بالخيار الذي تريد القيام به أولاً.
المرحلة السادسة (اختيارية): الاختبار 🔬
إذا كنت تقوم بإنشاء مكون إضافي بسيط نسبيًا وكنت واثقًا من وظائفه بناءً على الاختبار اليدوي الخاص بك، فلن تحتاج بالضرورة إلى اتخاذ هذه الخطوة. أقول ذلك لأنه لا يزال يتطلب الكثير من العمل لترميز هذه الاختبارات، وبنفس الطريقة التي لن تحصل بها على مكون إضافي يعمل خارج البوابة مع ChatGPT، فمن غير المرجح أيضًا أن تحصل على اختبار وظيفي بدون وجود أخطاء.
ببساطة، هناك مقايضة هنا بين استثمار الوقت والقيمة العملية .
في تجربتي الخاصة، تمكنت من إنشاء اختبار واحد بنجاح للتحقق مما إذا كانت المكونات الإضافية الخاصة بي قادرة على أداء وظائفها الرئيسية عندما يتفاعل معها المستخدم أم لا - لكن الأمر استغرق مني يومًا كاملاً من تصحيح الأخطاء!
من الناحية العملية، لقد قمت بالفعل بفحص وظائف المكون الإضافي الخاص بي يدويًا، ولكن كان من الجيد أن أرى أن الاختبار أكد أن كل شيء يعمل.
إذا كنت ستحاول إنشاء مكون إضافي أكثر تعقيدًا مما فعلت، أو إذا كانت وظائف المكون الإضافي الخاص بك ستركز على النهاية الخلفية (حيث لا يمكنك التحقق يدويًا مما إذا كانت تعمل أم لا)، فخصص وقتًا لـ إن إجراء الاختبارات بشكل صحيح يستحق العمل اليدوي.
أنواع الاختبارات
الأدوات التي يجب مراعاتها
المرحلة السابعة (اختيارية): قم بإرسال المكون الإضافي الخاص بك إلى مستودع WordPress 🥳
إذا كنت قد وصلت إلى هذه النقطة، فقد صعدت إلى جبل البرنامج المساعد الذي يضرب به المثل بنجاح. كل ما عليك فعله هو زرع علمك بحيث ينضم إلى 59,650 مكونًا إضافيًا آخر في مستودع WordPress.
يحتوي هذا على عملية منفصلة خاصة به، والتي تكون مصحوبة بقائمة مرجعية في صفحة إضافة المكون الإضافي الخاص بك:
- اقرأ الأسئلة المتداولة.
- الامتثال لجميع إرشادات مطوري المكونات الإضافية.
- تأكد من حصولك على إذن لتحميل المكون الإضافي الخاص بك على WordPress.org ليستخدمه الآخرون ويشاركوه.
- البرنامج الإضافي الخاص بك، بما في ذلك جميع مكتباته وأي أصول أخرى مضمنة، مرخص كـ GPL أو متوافق مع GPL.
- يمكنك إجراء جولة أخيرة من الاختبارات باستخدام البرنامج المساعد Plugin Check ، وتقوم بحل أي مشكلات محددة (باستثناء ما تعتقد أنها نتائج إيجابية كاذبة).
فحص البرنامج المساعد (PCP)الإصدار الحالي: 1.1.0
آخر تحديث: 28 أغسطس 2024
البرنامج المساعد check.1.1.0.zip
قد تعتقد أنه بعد كل ما قمت به من تصحيح الأخطاء والفحص والاختبار، فإن المكون الإضافي الذي يطلبون منك استخدامه لن يلتقط أي شيء. ومع ذلك، باعتبارك مطورًا للمكونات الإضافية لأول مرة، فمن المحتمل أن يكون لديك بعض المشكلات المعلقة التي يتعين عليك حلها - خاصة إذا لم تقم بإزالة ملفات الاختبار من الإصدار الخاص بك قبل تشغيل الفحص.
للمتابعة، انتقل إلى الأدوات → التحقق من البرنامج المساعد :
ثم قم بتحديد جميع الفئات الخمس وقم بإجراء الفحص:
يمكنك بعد ذلك تغذية تلك المشكلات المعلقة إلى ChatGPT وحلها. عند الانتهاء، قم بإجراء الفحص مرة أخرى لضمان الحصول على نتيجة نظيفة. افعل ذلك عدة مرات حسب حاجتك. بمجرد حصولك على فحص نظيف تمامًا (باستثناء النتائج الإيجابية الخاطئة)، يمكنك إرسال المكون الإضافي الخاص بك إلى فريق تطوير WordPress. ثم انتظر بصبر حتى يقوموا بمراجعته.
الأفكار النهائية 🧠
على الرغم من أن إنشاء مكون إضافي باستخدام ChatGPT يعد عملية ممتعة ومجزية، إلا أنها ليست عملية سريعة بأي حال من الأحوال. أنت بحاجة إلى بذل الكثير من الجهد لإنتاج منتج نهائي يعمل بشكل لائق. وفي النهاية، ستقدر كل المهارات الجديدة التي سيعلمك إياها هذا المشروع.
إليك بعض الأشياء التي تعلمتها (وربما تعلمتها أيضًا):
- لقد تعلمت كيفية التنقل عبر محرك الأقراص الثابتة باستخدام أوامر الوحدة الطرفية وتعلمت أيضًا أوامر أخرى تتعلق بعملية إنشاء مكون إضافي.
- أنا الآن مرتاح إلى حد ما مع كل من Docker و Local by Flywheel، وكلاهما لم أستخدمهما مطلقًا قبل هذه التجربة.
- أنا أيضًا على دراية بالكثير من أدوات المطورين والبرامج النصية التي لم أكن أعلم بوجودها قبل ذلك.
- لقد أخذت بعض الفصول الدراسية في الماضي مع Free Code Camp وCodecademy، وعلى الرغم من أن كلاهما كانا رائعين، إلا أنني أشعر أنني حصلت على الكثير من المعرفة العملية من خلال إكمال هذا المشروع.
- فيما يتعلق بما سبق، لدي الآن الكثير من المعلومات العشوائية التي ستكون مفيدة إذا عملت على شيء مماثل مرة أخرى.
- الفجوة بين الصفر والمكون الإضافي العامل أصغر بكثير من الفجوة بين المكون الإضافي العامل والمكون الإضافي الجاهز للتقديم. لقد حصلت على نسخة صالحة للعمل من المكون الإضافي الخاص بي في غضون أيام قليلة، لكن الأمر استغرق بضعة أسابيع أخرى قبل أن أقوم بإجراء جميع التعديلات لجعله جيدًا بما يكفي لتقديمه إلى مستودع WordPress.
بشكل عام، كان هذا واحدًا من أروع الأنشطة التي قمت بها منذ وقت طويل. شكرا لأخذ الوقت الكافي للقراءة. إذا انتهى بك الأمر إلى استخدام أي من هذه المعلومات لإنشاء مكونك الإضافي الأول، فيرجى ترك تعليق لي أدناه. أحب أن أتحقق من النتيجة النهائية الخاصة بك.