تجربتي مع محرر الأكواد المدعوم بالذكاء الاصطناعي: المميزات، العيوب، ونصائح حيوية

منذ ظهور محررات الأكواد التي تعمل بالذكاء الاصطناعي، بدأت في استخدامها والمقارنة بينها لتحديد أيها أكثر فائدة لي ويساعدني في توفير الوقت. لقد عملت على أكثر من مشروع بأحجام مختلفة: كبيرة، صغيرة، ومتوسطة. استخدمت أدوات مثل Cursor، وTrax AI، وWinServ، بالإضافة إلى Visual Studio Code مع GitHub Copilot. جميعها أدوات جيدة وتحتوي على إمكانيات مفيدة تساعد بالفعل في إنجاز بعض العمل وتوفير الجهد. في هذا المقال، سأشاركك تجربتي مع محرر WinServ، وسأوضح لك المميزات والعيوب، مع بعض النصائح التي ستحدث فرقًا معك.

اختيار نموذج الدردشة (Chat Model)

يُعد اختيار نموذج الدردشة المناسب أمرًا بالغ الأهمية، فهو الذي سيكمل معك العمل ويقترب من تحقيق ما تريده. في البداية، عندما يكون لديَّ مُوجِّه (prompt) معين، أفتح عدة صفحات ويب تحتوي على نماذج الدردشة التي أتعامل معها، مثل Grok، وDeepSeek، وChatGPT، وGemini، وأعطيها جميعًا نفس المُوجِّه لأقارن بين استجاباتها.

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

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

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

مثال عملي: طلبت من كل نموذج إنشاء صفحة لعرض “أبرز ميزات الإصدار” (Version Highlights). أردت أن أرى كيف سيتعامل كل منهم مع نفس الطلب.

أحد النماذج أنشأ لي صفحة بتصميم رائع جدًا، لكنني أدركت أنني رأيت تصميمًا مشابهًا له بنسبة 90% على موقع CodePen، وكان مبنيًا بتقنية مختلفة عن التي أستخدمها في مشروعي (أنا أستخدم Vue.js وVuetify). طريقة كتابة المكونات في مشروعي لا تعتمد على div بشكل مباشر، بل على مكونات مثل v-card وv-card-text. النموذج لم يلتزم بذلك، لكن الصفحة ظهرت بشكل جيد.
نموذج آخر، عند نفس الطلب، أنشأ الصفحة بالتقنيات التي أستخدمها بالفعل، لكن التصميم لم يكن بنفس جودة الأول. مع ذلك، يمكنك أن تطلب منه تحسين التصميم وتطويره حتى تصل إلى الشكل المطلوب.
نموذج ثالث قام بالبحث في ملفات المشروع واقترح عليَّ نقاطًا مناسبة لكتابتها في الهايلايتس، مثل “تم الانتهاء من صفحة الأدمن” و”تم الانتهاء من صفحة المستخدم”، وهي أمور كنت سأكتبها على الأرجح لأنني أنجزتها بالفعل.

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

طرق التفاعل مع المحرر

هناك طريقتان للعمل:

Ctrl+K: تفتح لك نافذة لكتابة طلبك.
Ctrl+I: لتعديل الكود مباشرة في مكانه (inline).

لنجرب أن نطلب منه شيئًا. سأطلب منه إنشاء نظام إدارة مهام بسيط.

“Create a to-do list system with HTML, CSS, and JS in a single HTML file.”

كما هو متوقع، سيقوم بإنشاء ملف HTML ويضيف إليه المهام المطلوبة، بل وسيضيف أيضًا خاصية حفظ المهام في التخزين المحلي (Local Storage) دون أن أطلب منه ذلك.

مثال على الكود الذي تم إنشاؤه:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <style>
        body { font-family: sans-serif; background: #f7f7f7; }
        .container { max-width: 600px; margin: 2rem auto; background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h1 { text-align: center; }
        .task-input { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
        input[type="text"] { flex-grow: 1; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; }
        button { padding: 0.5rem 1rem; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
        ul { list-style: none; padding: 0; }
        li { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border-bottom: 1px solid #eee; }
        li.completed { text-decoration: line-through; color: #888; }
        .delete-btn { background: #dc3545; color: white; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <div class="task-input">
            <input type="text" id="taskInput" placeholder="Add a new task...">
            <button onclick="addTask()">Add Task</button>
        </div>
        <ul id="taskList"></ul>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', loadTasks);

        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const taskText = taskInput.value.trim();
            if (taskText === '') return;

            const taskList = document.getElementById('taskList');
            const li = document.createElement('li');
            li.textContent = taskText;

            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = 'Delete';
            deleteBtn.className = 'delete-btn';
            deleteBtn.onclick = function() {
                taskList.removeChild(li);
                saveTasks();
            };

            li.appendChild(deleteBtn);
            li.onclick = function() {
                li.classList.toggle('completed');
                saveTasks();
            };
            
            taskList.appendChild(li);
            taskInput.value = '';
            saveTasks();
        }

        function saveTasks() {
            const tasks = [];
            document.querySelectorAll('#taskList li').forEach(li => {
                tasks.push({ text: li.childNodes[0].textContent, completed: li.classList.contains('completed') });
            });
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }

        function loadTasks() {
            const tasks = JSON.parse(localStorage.getItem('tasks'));
            if (!tasks) return;

            const taskList = document.getElementById('taskList');
            tasks.forEach(task => {
                const li = document.createElement('li');
                li.textContent = task.text;
                if (task.completed) {
                    li.classList.add('completed');
                }

                const deleteBtn = document.createElement('button');
                deleteBtn.textContent = 'Delete';
                deleteBtn.className = 'delete-btn';
                deleteBtn.onclick = function() {
                    taskList.removeChild(li);
                    saveTasks();
                };

                li.appendChild(deleteBtn);
                li.onclick = function() {
                    li.classList.toggle('completed');
                    saveTasks();
                };

                taskList.appendChild(li);
            });
        }
    </script>
</body>
</html>

بعدها، يمكنني تعديل أي شيء في مكانه. على سبيل المثال، يمكنني تحديد العنوان <h1>To-Do List</h1> والضغط على Ctrl+I ثم أطلب:

“Make the title uppercase.”

فيقوم بتغييره إلى <h1>TO-DO LIST</h1>. يمكنك قبول (Accept) التعديل أو رفضه (Reject).

مشاكل شائعة ونصائح لتجنبها

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

المشكلة الأولى: تعديلات ذات آثار جانبية غير متوقعة

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

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

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

المشكلة الثانية: تعديل شامل للمشروع

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

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

الحل: كن منتبهًا. أي تعديل يجريه يفتح الملف المعدل في تبويب جديد. راجع هذه الملفات، وستجد خياري “Accept” و”Reject” هناك أيضًا. ارفض التعديلات غير المرغوب فيها، ثم اكتب له في الدردشة: “لقد عدلت ملفًا معينًا، ولكن لا يفترض بك تعديل المشروع بأكمله”. أنت بحاجة لتعليمه وتوجيهه أثناء العمل معه.

المشكلة الثالثة: التنفيذ الفوري للطلبات

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

استهلاك الرصيد (Credits): أنت تستهلك رصيدك على طلب ربما لم تكن تريده أن يُنفذ بعد.
التنفيذ الخاطئ: قد يبدأ في تنفيذ شيء قمت أنت بتنفيذه بالفعل.

مثال: كنت أناقشه حول أفضل الممارسات لإنشاء نظام أوسمة (Badges)، هل يجب أن يكون تلقائيًا (يُمنح بناءً على إنجازات المستخدم) أم يدويًا (يمنحه المدير). بمجرد أن بدأت النقاش، انطلق مباشرة إلى الكود، وأنشأ ترحيل البيانات (Migration)، وبدأ في تنفيذ الفكرة. لكنني كنت قد أنشأت بالفعل الترحيل وأضفت الحقل في قاعدة البيانات وحدّثت السجلات القديمة. كنت فقط أناقشه.

الحل: قبل البدء في التنفيذ، ناقشه أولًا. قل له: “كيف يمكن تنفيذ هذه الفكرة؟ اكتب لي الخطوات قبل أن نبدأ في الكود الفعلي”. عندها، سيبدأ في عرض الخطوات، مثل: “يجب أن نفعل 1، 2، 3. هناك عدة طرق، الأولى كذا والثانية كذا. أي نهج تفضل؟”. وبعد أن تختار النهج المناسب، يمكنك أن تقول له: “لنبدأ الآن”.

نصيحة إضافية: اطلب منه أن يعمل خطوة بخطوة (step-by-step). لا تدعه ينشئ 5 متحكمات و5 واجهات دفعة واحدة، لأن ذلك قد يربكك ويتسبب في تعليق المحرر. اطلب الخطوة الأولى، تأكد من أنها صحيحة، ثم انتقل إلى التالية.

المشكلة الرابعة: نسيان السياق في المشاريع الكبيرة

عندما يكبر المشروع، قد ينسى المحرر السياق القديم ولا يتمكن من ربطه بما تعمل عليه حاليًا.

الحل: تحتاج إلى إعطائه مُوجِّهات مفصلة وواضحة لتذكيره بالسياق القديم وربطه بالجديد.

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

الحل:

كن دقيقًا في أوامرك: اكتب الأمر بنفسك بدلًا من الاعتماد عليه.
علّمه: بدأت أقول له: “عندما أكتب rebuild، فأنا أقصد بناء المشروع. إذا أردت استعادة الصفحة، سأستخدم أمرًا مثل restore the page”. ورغم أنه قد يدعي أنه تعلم، لا تعتمد على ذلك كليًا.

الاستخدام الأمثل لأدوات الذكاء الاصطناعي

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

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

آمل أن يكون هذا المقال قد نال إعجابكم، وأن أكون قد نجحت في نقل تجربة مفيدة لكم.