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

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

من الغريب حقًا أن تدخل تيك توك، أو بالأحرى شركتها الأم ByteDance، في هذا المجال. صفحة الهبوط الخاصة بالمحرر تحمل شعار “Ship faster with Trae”.

الانطباع الأولي والواجهة

من النظرة الأولى، يمكن اكتشاف أن المحرر مبني على Visual Studio Code. لكن الأمر الثاني الذي يمكن ملاحظته هو أن واجهة المستخدم تبدو مستوحاة بشكل كبير من محرر الأكواد “Fleet” من شركة JetBrains، والذي يُطرح كمنافس جديد لـ VS Code.

الواجهة بالفعل مشابهة، خصوصًا في طريقة تنظيم اللوحات (Panels)، حيث كل قسم موضوع في لوحة خاصة به مع زوايا دائرية، وهذا التصميم متشابه جدًا.

يحتوي الموقع على عرض تقديمي يوضح الأفكار الرئيسية، وهي مشابهة لما هو موجود في Copilot و Cursor وغيرها من الأدوات. لكن هناك ميزة لافتة تسمى “Upload File”، والتي قد تكون رائعة، فمثلًا يمكن إعطاؤه تصميمًا من Figma ليقوم بتوليد مكون React منه.

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

الإعداد والنموذج المستخدم

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

يحتوي المحرر على قسمين رئيسيين:

Chat: للدردشة مع الذكاء الاصطناعي وطرح أسئلة متعلقة بالكود.
Builder: لإنشاء وتعديل المشاريع.

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

بعد تسجيل الدخول، تبين أن النموذج المستخدم بشكل افتراضي هو Claude Sonnet، مع توفر GPT-4 أيضًا. في مهام البرمجة، يعتبر Claude خيارًا ناجحًا جدًا.

تجربة بناء مشروع: لعبة Tic-Tac-Toe

لنجرب بناء مشروع كامل. سنطلب منه إنشاء لعبة Tic-Tac-Toe باستخدام Vue.js.

توجهنا إلى قسم Builder وكتبنا الطلب التالي:

“Create a Tic-Tac-Toe game using Vue.js and Tailwind CSS”.

بدأ المساعد بوضع خطة عمل:

إنشاء مشروع Vue: اقترح الأمر التالي لإنشاء المشروع.
```
npm create vue@latest
```
مشكلة الصلاحيات: واجه الأمر مشكلة في الصلاحيات (Permission denied). المثير للإعجاب أن المساعد اكتشف الخطأ واقترح حلاً تلقائيًا عبر تعديل الصلاحيات للمجلد الحالي، ثم أعاد تنفيذ الأمر بنجاح.
تثبيت الاعتماديات: بعد إنشاء المشروع، اقترح تشغيل الأمر التالي:
```
npm install
```
تثبيت Tailwind CSS: الخطوة التالية كانت تثبيت Tailwind CSS، لكنها لم تنجح. بدلًا من التوقف، قرر المساعد إنشاء الملفات يدويًا وإضافة الأنماط اللازمة، وهي فكرة ممتازة.
إنشاء المكونات: بدأ المساعد بإنشاء المكونات والملفات اللازمة للتطبيق، وكان يعرض الملفات للموافقة قبل إضافتها للمشروع.

بعد قبول جميع التغييرات وتشغيل خادم التطوير، واجهنا خطأ آخر:

Error: PostCSS plugin postcss-import not found.

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

اللعبة كانت تعمل بشكل كامل، مع منطق الفوز وإعادة اللعب.

نظرة على الكود

الكود الذي تم إنشاؤه كان منظمًا في مكون TicTacToe.vue.

<script setup>
import { ref, computed } from 'vue'

const board = ref(Array(9).fill(null))
const currentPlayer = ref('X')
const winner = ref(null)

const winningCombinations = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
  [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
  [0, 4, 8], [2, 4, 6]             // diagonals
]

const handleClick = (index) => {
  if (board.value[index] || winner.value) return
  board.value[index] = currentPlayer.value
  checkWinner()
  if (!winner.value) {
    currentPlayer.value = currentPlayer.value === 'X' ? 'O' : 'X'
  }
}

const checkWinner = () => {
  for (const combination of winningCombinations) {
    const [a, b, c] = combination
    if (board.value[a] && board.value[a] === board.value[b] && board.value[a] === board.value[c]) {
      winner.value = board.value[a]
      return
    }
  }
  if (board.value.every(cell => cell)) {
    winner.value = 'Draw'
  }
}

const resetGame = () => {
  board.value = Array(9).fill(null)
  currentPlayer.value = 'X'
  winner.value = null
}
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
    <h1 class="text-4xl font-bold mb-4">Tic Tac Toe</h1>
    <div class="grid grid-cols-3 gap-2 w-64">
      <div
        v-for="(cell, index) in board"
        :key="index"
        @click="handleClick(index)"
        class="w-20 h-20 bg-white border-2 border-gray-300 flex items-center justify-center text-4xl font-bold cursor-pointer"
        :class="{ 'text-green-500': cell === 'X', 'text-blue-500': cell === 'O' }"
      >
        
      </div>
    </div>
    <div v-if="winner" class="mt-4 text-2xl font-bold">
      <span v-if="winner === 'Draw'">It's a Draw!</span>
      <span v-else>Winner: </span>
    </div>
    <button @click="resetGame" class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md">
      Reset Game
    </button>
  </div>
</template>

إضافة الذكاء الاصطناعي للعبة

الخطوة التالية كانت إضافة لاعب كمبيوتر. فتحنا محادثة جديدة في Builder وطلبنا “Let’s play against the computer”.

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

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

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

// Inside handleComputerMove
setTimeout(() => {
  // Minimax logic to find the best move
  board.value[bestMove] = 'O';
  checkWinner();
  currentPlayer.value = 'X';
}, 500);

محاولة تحسين الخوارزمية

طلبنا من المساعد تحسين أداء الخوارزمية بإضافة Alpha-Beta Pruning. هذه الخوارزمية تسرّع عملية البحث في شجرة الاحتمالات. قام المساعد بتعديل الكود ليضيف منطق التتبع لـ bestScore، مما يشير إلى أنه حاول تنفيذ المطلوب.

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

الخلاصة

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

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

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