تحديات الجوال

جرّب هذه التحديات بعد إتمام خطوات الجوال الخمس كلها.

اختبار المعرفة

ماذا تُرجع useState؟ وما هما القيمتان اللتان تُرجعهما؟
ما الفرق بين استدعاء fetchMessages داخل useEffect وبين استدعائه يدويًا؟
لماذا نستخدم FlatList بدلًا من ScrollView في قائمة الرسائل؟
ماذا تفعل response.json()؟
ماذا يعني التعبير Platform.OS === "ios" ? "padding" : "height" في KeyboardAvoidingView؟

تحديات برمجية

التحدي 1: زر مسح المحادثة

أضف زرًا في الترويسة يمسح جميع الرسائل من التطبيق ومن الواجهة الخلفية معًا.

تلميح: ستحتاج إلى استدعاء DELETE /api/messages ثم مسح الحالة المحلية.

التحدي 2: الصور الرمزية للرسائل

أضف دائرة صغيرة تحمل الحرف الأول من اسم المرسل بجوار كل فقاعة رسالة: - رسائل المستخدم: دائرة زرقاء تحمل الحرف «U» - رسائل الذكاء الاصطناعي: دائرة رمادية تحمل الحرف «A»

تلميح: استخدم <View> مع borderRadius: width/2 لصنع دائرة.

التحدي 3: زر «الانتقال إلى الأسفل»

عندما يمرّر المستخدم للأعلى في سجل المحادثة، اعرض زرًا عائمًا يحمل السهم «↓» للعودة فورًا إلى الأسفل، وأخفِه حين يكون المستخدم في الأسفل أصلًا.

تلميح: استخدم onScroll في FlatList وافحص contentOffset.y.

مشروع مفتوح: محادثة متعددة المزوّدين

ابنِ شاشة إعدادات يستطيع المستخدمون التبديل منها بين مزوّدي الذكاء الاصطناعي:

المتطلبات: - أضف أيقونة ترس «الإعدادات» في الترويسة - عند النقر عليها تظهر نافذة منبثقة أو شاشة جديدة تعرض الخيارات - يستطيع المستخدم اختيار مزوّد: OpenAI أو Anthropic أو DeepSeek - يستطيع المستخدم إدخال مفتاح API الخاص به - تتغير نقطة نهاية المحادثة بحسب المزوّد المحدد

أفكار التنفيذ: - خزّن المزوّد المحدد ومفتاح API في حالة المكوّن (أو في AsyncStorage) - مرّرهما إلى الواجهة الخلفية كترويسات في الطلب - أو أنشئ نقاط نهاية منفصلة (/api/chat/openai، /api/chat/anthropic) - أضف حقل نص لموجه النظام

أهداف إضافية: - أضف شريط تمرير لدرجة «الحرارة» (0-2) يتحكم في درجة الإبداع - أضف قائمة منسدلة لاختيار «النموذج» (مثل gpt-4o مقابل gpt-4o-mini) - اعرض استهلاك الرموز في كل رسالة