البدء السريع

تشغيل IBM Bob

شغّل تطبيق IBM Bob على حاسوبك.

فتح واجهة دردشة Bob

إذا لم تكن واجهة دردشة Bob مرئية، افتحها بالنقر على أيقونة Bob بجانب شريط التنقل أو باستخدام الاختصار Option + Command + B (Mac) أو Ctrl + Alt + B (Windows).

تتفاعل مع Bob بكتابة طلبات باللغة الطبيعية في حقل الإدخال.

استنساخ مستودع الدرس

استنسخ المستودع الذي يحتوي على التطبيق المثال باتباع الخطوات التالية:

1. انقر أيقونة الملفات في الزاوية العلوية اليسرى من لوحة Bob IDE.
2. انقر Clone Repository والصق URL المستودع التالي.
3. عندما يسأل Bob أين تريد حفظ المستودع، اختر أي موقع تريده.

https://github.com/IBM/bob-demo.git

فتح المستودع

عندما يسألك Bob إذا كنت تريد فتح المستودع المستنسخ انقر Open. إذا سأل Bob "Do you trust the authors of the files in the folder?"، انقر Yes, I trust the authors.

يعرض المستكشف ملفات المشروع، وتفتح لوحة دردشة Bob على الجانب. تعمل من مجلد bob-get-started/express-todo-api-modern.

التبديل إلى وضع Agent

اختر Agent في محدد الوضع، أو اكتب /agent في الدردشة. يتيح وضع Agent لـ Bob كتابة الكود وتعديله وإعادة هيكلته. لا يزال Bob يطلب الإذن قبل كل عملية.

إعداد الموافقة التلقائية

ابحث عن مبدّل الموافقة التلقائية في الزاوية السفلية اليمنى من النافذة تحت قائمة Permissions. تأكد من تحديد Read فقط للموافقة التلقائية. يُشغّل Bob الأوامر للقراءة فقط تلقائيًا، لكنه يطلب الموافقة لأي أمر يُعدّل الملفات أو يعمل في الطرفية.

تهيئة Bob في مشروعك

شغّل /init في لوحة دردشة Bob ليُنشئ Bob ملف AGENTS.md الجذري وملفات قواعد AGENTS.md.

يُخبر ملف AGENTS.md الجذري Bob بالبنية العامة للمشروع واتفاقياته وأهدافه حتى يتمكن Bob من كتابة كود يناسب مشروعك. بدونه، يبدأ Bob من الصفر في كل مرة لأن Bob عديم الذاكرة.

ملفات القواعد في .bob هي المكان الذي يُنشئ فيه Bob ملفات AGENTS.md لكل من أوضاعه: Agent وPlan وAsk. لكل وضع مجموعة مختلفة من القواعد التي توجّه سلوك Bob في ذلك الوضع.

/init

سيطلب Bob الإذن لإنشاء ملفات AGENTS.md. انقر Approve todo tools for task لإنشاء الملفات. بمجرد إنشاء Bob لجميع ملفات AGENTS.md، سترى الملفات التالية:

بناء وتشغيل الـ API في Docker

اطلب من Bob إنشاء Dockerfile وتشغيل الحاوية:

Create a Dockerfile for this API using Node 22 and run it on port 3000.
Don't install dependencies locally.
The Dockerfile handles all installations.

Once you create the Dockerfile, build the image and start the container.

سيطلب Bob منك الموافقة على بناء الصورة وتشغيل الحاوية. انقر Approve todo tools for task وApprove edit tools for task.

لأنك فعّلت الموافقة التلقائية للقراءة فقط، سيطلب Bob إذنك لتشغيل أوامر Execute. انقر I understand the risks ثم Approve للسماح لـ Bob بتنفيذ الأوامر نيابةً عنك.

قد يجد Bob مشكلة في NPM كما يلي. وافق على الإصلاحات التي يقترحها Bob:

The build failed because there's no package-lock.json file.
I need to update the Dockerfile to use npm install instead of npm ci:

الـ API الآن يعمل ومتاح.

إضافة مهمة إلى قائمة المهام

لاختبار الـ API، الصق الأمر التالي مباشرةً في لوحة دردشة Bob. يضيف هذا الأمر مهمة إلى قائمة المهام بإرسال طلب POST إلى الـ API:

curl -X POST http://localhost:3000/api/todos \
  -H "Content-Type: application/json" \
  -d '{"title": "Build a web UI"}'

  Give me the response in a table format with two columns: Field and Value

يعرض لك Bob الاستجابة التي تؤكد إمكانية إضافة مهام إلى قائمة المهام عبر الـ API. يعرض Bob استجابةً مشابهة لما يلي:

إيقاف وإزالة الحاوية

اطلب من Bob إيقاف الحاوية وإزالتها. ستبني حاوية جديدة مع واجهة الويب في القسم التالي:

Stop and remove the running container and Docker image.

بدء محادثة جديدة

انقر علامة الزائد في أعلى واجهة الدردشة لبدء محادثة جديدة ومسح نافذة السياق.

بدء محادثة جديدة يمسح نافذة السياق، مما:

• يمنع نقاش التخطيط السابق من استهلاك ميزانية token.
• يُبقي سياق التنفيذ مُركّزًا على الخطة المعتمدة.
• يقلل خطر تشابك تعليمات التخطيط والتنفيذ لدى Bob.

التخطيط لواجهة الويب

قبل تعديل الكود، انتقل إلى وضع Plan حتى يتمكن Bob من وضع خطة لكيفية بناء واجهة الويب. انقر قائمة الوضع المنسدلة واختر Plan، أو اكتب /plan في الدردشة.

اطلب من Bob التخطيط لواجهة الويب ui-plan.md في مجلد مشروع express-todo-api-modern. سيطلب Bob استخدام أدوات الـ skill والـ subagents لإنشاء الخطة. انقر Approve skill tools for task للسماح لـ Bob باستخدام أدوات الـ skill، وApprove subagent tools for task للسماح لـ Bob باستخدام subagents، وApprove edit tools for task لحفظ الخطة.

Make a plan to add a React TypeScript web UI to this todo app using Vite.

The UI needs to:
- Display all existing tasks fetched from GET /api/todos
- Add new tasks using POST /api/todos
- Mark tasks as complete or incomplete using PUT /api/todos/:id

Constraints:
- Do not modify the existing Express API or its endpoints
- Serve both the API and React frontend from a single Docker container using a multi-stage build
- Keep the implementation simple: no authentication, no client-side routing, no external state management library
- run `npm install` inside the Dockerfile

Save the plan to a file named `ui-plan.md` in the express-todo-api-modern project directory.

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

راجع الخطة قبل إخبار Bob بتنفيذها. انقر ui-plan.md في المستكشف لفتحها.

طلب من Bob بناء واجهة الويب

انتقل إلى وضع Agent بالنقر على قائمة الوضع المنسدلة واختيار Agent، أو اكتب /agent في الدردشة.

اطلب من Bob بناء واجهة المستخدم ووضعها في حاوية وتشغيلها:

Implement the plan `ui-plan.md` you outlined to build the web UI
containerize the application with Docker, and run it.
Don't install dependencies locally. The Dockerfile handles all installations.

سيقرأ Bob ui-plan.md، ويعرض الملفات التي سيُنشئها أو يعدّلها، ثم يبني الحاوية ويشغّلها. انقر Approve من طلبات أدوات Bob.

لأنك فعّلت الموافقة التلقائية للقراءة فقط، سيطلب Bob إذنك لتشغيل أوامر Execute. انقر I understand the risks ثم Approve للسماح لـ Bob بتنفيذ الأوامر نيابةً عنك.

إصلاح فشل الإنشاء

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

فيما يلي بعض الأخطاء والإصلاحات المحتملة التي قد تواجهها:

The build failed because `npm ci` requires a package-lock.json file.
Let me update the Dockerfile to use `npm install` instead.

Vite can't find index.html. The issue is that index.html is in the `public` directory
but Vite expects it in the root. Let me move it to the correct location.

فتح واجهة الويب في متصفحك

بمجرد تشغيل الحاوية، يعطيك Bob ملخصًا لما أنجزه.

افتح http://localhost:3000/index.html في متصفحك. جرّب إضافة مهمة جديدة باستخدام حقل الإدخال للتأكد من أن الـ API يعمل بشكل صحيح.

طلب من Bob تحديث الأنماط

خصّص واجهة المستخدم بإخبار Bob ما هو الخط ولون الخط ولون الخلفية الذي تريده. فيما يلي بعض الخطوط التي يمكنك الاختيار منها:

• Inter: اختيار شائع لتطبيقات الويب
• Georgia: خط serif كلاسيكي، دافئ وسهل القراءة
• JetBrains Mono: خط monospace بإحساس أداة المطوّر

اختر لون خط ولون خلفية. في لوحة دردشة Bob، صِف اختياراتك باللغة الطبيعية. فيما يلي مثال على التخصيص:

Update the styles of the web UI.
Use the Inter font.
Dark navy background.
White text.

يقترح Bob تعديلات على أنماط مكوّن React. راجع الفرق وانقر Save لقبول التغييرات.

إعادة بناء الحاوية وعرض تغييراتك

الحاوية الجارية لا تزال تخدم الأنماط القديمة. اطلب من Bob إعادة البناء وإعادة التشغيل حتى ترى تغييراتك:

Rebuild the Docker image and restart the container with the updated styles.

حدّث http://localhost:3000/index.html في متصفحك لرؤية التصميم المحدّث.