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

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

وإليك أفضل جزء: يمكنك إرفاق الصور والملفات المرجعية وإعطاء تعليمات اللغة الطبيعية ، وسيقوم Copilot بإنشاء وتعديل التعليمات البرمجية مباشرة في مشروعك!

في هذا المنشور ، سأمشي لك من خلال كيفية بنائي صفحة مقصودة تركز على المطور-من متطلبات المنتج إلى التعليمات البرمجية – استخدام وضع وكيل Github Copilot ونموذج Claude 3.5 Sonnet. هذا النوع من البناء يمكن أن يستغرق بسهولة بضع ساعات إذا فعلت كل شيء بنفسي. ولكن مع CoPilot ، كان لدي نموذج أولي يعمل في أقل من 30 دقيقة! سترى كيف استخدمت القطع الأثرية للتصميم ، والدردشة المضمنة ، ووعي Copilot بالسياق للانتقال من Idea → Design → Code ، مع الحد الأدنى من الاحتكاك.

يمكنك أيضًا مشاهدة البناء الكامل في الفيديو أعلاه!

التصميم مع الذكاء الاصطناعي: من PRD إلى واجهة المستخدم

قبل أن أكتب سطرًا واحد من التعليمات البرمجية ، كنت بحاجة إلى رؤية منتج أساسية. لقد بدأت باستخدام github copilot على github.com لإنشاء مستند متطلبات المنتج خفيفة الوزن (PRD) باستخدام GPT-4O. كان هنا موجه:

> “صف صفحة مقصودة للمطورين بعبارات بسيطة.”

أعاد Copilot منظمة ولكن بسيطة الخطوط العريضة لـ PRD لصفحة مقصودة يركز على المطور. بعد ذلك ، مررت بهذا PRD إلى Claude 3.5 Sonnet وطلبت ذلك لإنشاء تصميم بناءً على هذه المطالبة.

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

يمكنك استكشاف التصميم الكامل الذي كلود بنيت هنا؛ إنه رائع.

إعداد المشروع

لمكدس التكنولوجيا ، اخترت Astro بسبب أدائها ومرونته. لقد ربطته مع CSS Tailwind وتفاعل لتصميم البنية والمكون. لقد بدأت في دليل فارغ وقمت بتشغيل الأوامر التالية:

npm create astro@latest
npx astro add react
npx astro add tailwind

قمت بتهيئة المشروع ، وتكوين الريح الخلفية ، وفتحته في VS Code مع تمكين وضع Agent Github Copilot (تعلم كيفية تمكينها بمستنداتنا!). بمجرد أن يعمل الخادم ، كنت مستعدًا للبدء في البناء.

قسم بناء قسم مع وضع وكيل Copilot

إنشاء قسم البطل والملاحة

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

الالتزام مبكرًا وغالبًا

تحسين الدقة مع تعليمات مخصصة Copilot

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

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

لإعطاء سياق Copilot أفضل ، قمت بإنشاء ملف CopilotInstructions.md ملف يصف مكدس التكنولوجيا الخاص بي:

• Astro v5
• Tailwind CSS V4
• رد فعل
• TypeScript

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

إليك شكل بعض الملفات:

# GitHub Copilot Project Instructions

## Project Overview
This is an Astro project that uses React components and Tailwind CSS for styling. When making suggestions, please consider the following framework-specific details and conventions.

## Tech Stack
- Astro v5.x
- React as UI library
- Tailwind CSS for styling (v4.x)
- TypeScript for type safety

## Project Structure
```
├── src/
│   ├── components/     # React and Astro components
│   ├── layouts/        # Astro layout components
│   ├── pages/          # Astro pages and routes
│   ├── styles/         # Global styles
│   └── utils/          # Utility functions
├── public/             # Static assets
└── astro.config.mjs    # Astro configuration
```

## Component Conventions

### Astro Components
- Use `.astro` extension
- Follow kebab-case for filenames
- Example structure:

```astro
---
// Imports and props
interface Props {
  title: string;
}

const { title } = Astro.props;
---




```

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

التكرار على تصاميمك من خلال دفع Copilot

قسم “بني من قبل المطورين”

قسم “تطوير API”

قسم “معاينة لوحة القيادة”

اقتراحات ذكية ، نتائج سريعة

اختتام:

ماذا بعد؟

خذ هذا معك

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

إذا كنت تفكر في البناء مع Github Copilot ، فحصل على سير العمل هذا:

1. ابدأ مع PRD باستخدام Copilot على github.com
2. قم بإنشاء تصميم من PRD الخاص بك مع كلود
3. استخدم وكيل Copilot في IDE الخاص بك لترميزه ، خطوة بخطوة.

حتى في المرة القادمة ، ترميز سعيد!

---

كتبه

Kedasha هي داعية مطور في Github حيث تستمتع بمشاركة الدروس التي تعلمتها مع مجتمع المطورين الأوسع. تجد الفرح في مساعدة الآخرين على التعرف على صناعة التكنولوجيا وتحب مشاركة تجربتها كمطور برامج. ابحث عنها عبر الإنترنت itsthatladydev.