GATEOFAI
تسجيل الدخول English

بناء مساعد ذكاء اصطناعي استباقي باستخدام TypeScript

May 13, 2026 | 5 دقائق قراءة
Share:
درس تقني
متوسط
⏱ ٤٥ دقيقة قراءة
© بوابة الذكاء الاصطناعي ٢٠٢٦-٠٥-١٣

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

المتطلبات الأساسية

  • Node.js إصدار ١٦ أو أعلى
  • مفتاح API من OpenAI
  • معرفة متوسطة بـ TypeScript و JavaScript

ما الذي نبنيه

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

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

الإعداد والتثبيت

لبدء العمل، نحتاج إلى إعداد بيئة TypeScript وتثبيت الحزم الضرورية. سنستخدم Node.js للمنطق على جانب الخادم وAPI الخاص بـ OpenAI للوظائف الذكية.

npm init -y
npm install typescript ts-node @types/node express openai dotenv

بعد ذلك، نحتاج إلى تكوين متغيرات البيئة لتخزين مفتاح API الخاص بـ OpenAI بأمان. قم بإنشاء ملف جديد باسم .env في الدليل الجذري لمشروعك.

OPENAI_API_KEY=your-openai-api-key-here

الخطوة ١: إعداد الخادم

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

import express from 'express';
import OpenAI from 'openai';
import dotenv from 'dotenv';

dotenv.config();

const app = express();
const port = 3000;

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.use(express.json());

app.post('/suggest', async (req, res) => {
  try {
    const { code } = req.body;
    const response = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: [
        { role: "system", content: "You are a helpful coding assistant." },
        { role: "user", content: `Improve the following TypeScript code:nn${code}` }
      ],
      max_tokens: 150,
    });

    res.json({ suggestion: response.choices[0].message.content });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

يقوم هذا الكود بإعداد خادم Express يستمع على المنفذ ٣٠٠٠. يتضمن نقطة نهاية POST /suggest التي تأخذ كود TypeScript كمدخل وتعيد اقتراحات مولدة بواسطة الذكاء الاصطناعي. يتم استخدام API الخاص بـ OpenAI لإنشاء هذه الاقتراحات.

الخطوة ٢: دمج اقتراحات الذكاء الاصطناعي في المحرر

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Code Assistant</title>
</head>
<body>
    <textarea id="code-editor" rows="10" cols="50"></textarea>
    <button id="get-suggestion">Get Suggestion</button>
    <pre id="suggestion-output"></pre>

    <script>
        document.getElementById('get-suggestion').addEventListener('click', async () => {
            const code = document.getElementById('code-editor').value;
            const response = await fetch('http://localhost:3000/suggest', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ code })
            });

            const data = await response.json();
            document.getElementById('suggestion-output').textContent = data.suggestion;
        });
    </script>
</body>
</html>

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

الخطوة ٣: تحسين تفاعلات الذكاء الاصطناعي

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

app.post('/suggest', async (req, res) => {
  try {
    const { code, context } = req.body;
    
    const response = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: [
        { role: "system", content: "You are a helpful coding assistant." },
        { role: "user", content: `Consider the following TypeScript code with the context: "${context}". Improve and suggest corrections:nn${code}` }
      ],
      max_tokens: 150,
    });

    res.json({ suggestion: response.choices[0].message.content });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

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

⚠️ خطأ شائع: تأكد من أن مفتاح API الخاص بـ OpenAI مضبوط بشكل صحيح في متغيرات البيئة لديك، حيث أن المفتاح المفقود أو غير الصحيح سيتسبب في أخطاء المصادقة.

اختبار التنفيذ الخاص بك

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

node ./server.js

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

ما الذي يمكن بناؤه بعد ذلك

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

Share:

هل كان هذا الشرح مفيداً؟