الانتقال إلى المحتوى الرئيسي
يشرح هذا الدليل كيفية تصدير طواقم CrewAI AMP كمكونات React ودمجها في تطبيقاتك.

​
تصدير مكون React

1

تصدير المكون

انقر على القائمة (ثلاث نقاط على يمين طاقمك المنشور) واختر خيار التصدير واحفظ الملف محلياً. سنستخدم CrewLead.jsx في مثالنا.
تصدير مكون React

​
إعداد بيئة React

لتشغيل مكون React هذا محلياً، ستحتاج لإعداد بيئة تطوير React ودمج هذا المكون في مشروع React.
1

تثبيت Node.js

  • حمّل وثبّت Node.js من الموقع الرسمي: https://nodejs.org/
  • اختر إصدار LTS (الدعم طويل المدى) للاستقرار.
2

إنشاء مشروع React جديد

  • افتح Command Prompt أو PowerShell
  • انتقل إلى المجلد الذي تريد إنشاء مشروعك فيه
  • شغّل الأمر التالي لإنشاء مشروع React جديد: 
    npx create-react-app my-crew-app
  • انتقل إلى مجلد المشروع: 
    cd my-crew-app
3

تثبيت الاعتماديات اللازمة

npm install react-dom
4

إنشاء مكون CrewLead

  • انقل الملف المُحمّل CrewLead.jsx إلى مجلد src في مشروعك.
5

تعديل App.js لاستخدام مكون CrewLead

  • افتح src/App.js
  • استبدل محتوياته بشيء مثل هذا:
import React from 'react';
import CrewLead from './CrewLead';

function App() {
    return (
        <div className="App">
            <CrewLead baseUrl="YOUR_API_BASE_URL" bearerToken="YOUR_BEARER_TOKEN" />
        </div>
    );
}

export default App;
  • استبدل YOUR_API_BASE_URL وYOUR_BEARER_TOKEN بالقيم الفعلية لـ API.
6

بدء خادم التطوير

  • في مجلد مشروعك، شغّل: 
    npm start
  • سيبدأ خادم التطوير، ويجب أن يفتح متصفح الويب الافتراضي تلقائياً على http://localhost:3000، حيث سترى تطبيق React يعمل.

​
التخصيص

يمكنك بعد ذلك تخصيص CrewLead.jsx لإضافة اللون والعنوان وغيرها.
تخصيص مكون React
تخصيص مكون React

​
الخطوات التالية

  • خصّص تنسيق المكون ليتوافق مع تصميم تطبيقك
  • أضف خصائص إضافية للتهيئة
  • ادمج مع إدارة حالة تطبيقك
  • أضف معالجة الأخطاء وحالات التحميل