الخطوة 1 في تطبيق الجوال: إعداد المشروع

أعدّ مشروع React Native (Expo) الخاص بتطبيق الدردشة.

ما ستتعلمه

• إنشاء مشروع Expo
• تشغيل التطبيق على جهازك
• فهم بنية المشروع

الخطوة 1: تثبيت Expo CLI

npm install -g expo-cli

أو استخدم الطريقة الأحدث:

npx create-expo-app@latest

الخطوة 2: إنشاء المشروع

إذا كنت تبدأ من الصفر:

cd aiproject
npx create-expo-app@latest mobile --template blank-typescript
cd mobile

إذا كنت تستخدم الكود المرفق، فمجلد mobile/ يحتوي على ملفات المشروع بالفعل. كل ما عليك فعله هو تثبيت التبعيات:

cd aiproject/mobile
npm install

الخطوة 3: تثبيت التبعيات المطلوبة

npx expo install react-native-safe-area-context

الخطوة 4: تشغيل خادم تطوير Expo

npx expo start

ينبغي أن ترى رمز QR في الطرفية.

الخطوة 5: تشغيل التطبيق

ما ستراه

شاشة بيضاء فارغة لا تحتوي على شيء. في الخطوات التالية، ستبني واجهة الدردشة.

فهم المشروع

mobile/
├── App.tsx          # مكوّن التطبيق الرئيسي (ستعدّله)
├── package.json     # التبعيات
├── tsconfig.json    # إعداد TypeScript
├── app.json         # إعداد Expo (اسم التطبيق، الأيقونات، إلخ)
└── node_modules/    # الحزم المثبّتة

في React Native، يُعدّ App.tsx نقطة الدخول — فكل شيء يبدأ من هنا.

التحقق

• خادم تطوير Expo يعمل
• رمز QR معروض
• يمكنك رؤية التطبيق الفارغ على هاتفك أو المحاكي
• التغييرات التي تُجريها على App.tsx تُعاد تحميلها تلقائيًا (إعادة التحميل المباشر)