تجاوز أخطاء بناء تطبيقات ريبيكت نيفيتي وتشغيل التطبيق في غضون 5 دقائق
TuBrief 편집팀
2026년 3월 16일
0
Computing/Software원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
عندما يبدأ مطور مبتدئ معتاد على تطوير الويب في تطوير تطبيقات الهاتف المحمول، فإن الصعوبة الأولى التي يواجهها هي أخطاء البناء المعقدة التي تحدث أثناء عملية إعداد أدوات التطوير المحلية الأصلية. تتطلب الطريقة التقليدية لـ ريبيكت نيفيتي تثبيت أدوات مثل أندرويد ستوديو، وإكس كود، وGradle، وCocoaPods يدويًا، مما يتسبب في ضياع ساعات أو أيام قبل حتى كتابة أي كود بسبب تعارض الإصدارات. لحل هذه المشكلة، من خلال الاستفادة من تدفق عمل إكسبو المُدار (Expo Managed Workflow)، يمكنك البدء في التطوير في غضون 5 دقائق دون أي إعدادات أصلية.
لتكوين بيئة اختبار حية على جهاز محمول فعلي في 5 دقائق، اتبع الخطوات الثلاث التالية: أولاً، افتح الطرفية (Terminal) وأدخل الأمر لإنشاء مشروع قالب إكسبو الأحدث، ثم انتقل إلى الدليل (Directory) المقابل وقم بتشغيل خادم التطوير. الأمر المراد إدخاله في الطرفية هو كالتالي:
`bash
npx create-expo-app@latest my-mobile-app --template default
cd my-mobile-app
npx expo start
`
ثانيًا، بدلاً من استخدام المحاكي (Emulator) الذي يستهلك موارد نظام الكمبيوتر، قم بتثبيت تطبيق إكسبو غو (Expo Go) على هاتفك الذكي الفعلي. ثالثًا، قم مسح رمز الاستجابة السريعة (QR Code) المُنشأ في الطرفية باستخدام تطبيق الكاميرا الأساسي في نظام iOS أو الماسح الضوئي المدمج في إكسبو غو على أندرويد، ليتم تجميع الحزمة الرئيسية (Main Bundle) في غضون ثوانٍ وتشغيلها على الجهاز على الفور. من خلال هذه الطريقة، يمكن للمطورين الاستفادة من إعادة التحميل الفوري (Hot Reloading) دون إجهاد البناء المحلي وتقليل وقت التطوير بأكثر من ساعتين.
إن الطريقة المتمثلة في تقسيم المجلدات عشوائيًا حسب المكونات، والخطافات (Hooks)، وأنواع الشاشات وفقًا لعادات مشاريع الويب الصغيرة، تؤدي إلى تقليل تماسك الكود كلما كجم حجم تطبيق الهاتف المحمول. نظرًا لأن إكسبو روتر (Expo Router) يدعم التوجيه القائم على الملفات (File-based Routing)، يجب عزل جميع التعليمات البرمجية المصدرية في الدليل src، ويجب قصر مسارات توجيه الشاشة على src/app/ فقط. لتصميم هيكل تطبيق محمول قابل للتوسيع، قم بتنفيذ الخطوات الثلاث التالية بالترتيب: أولاً، قم بتعديل ملف tsconfig.json في جذر المشروع لمنع المراجع ذات المسار النسبي وتعيين اسم مستعار للمسار. الكود المراد إضافته للإعداد هو كالتالي:
`json
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"baseUrl": ".",
"paths": {
"@/": ["./src/"]
}
}
}
`
ثانيًا، قم بإنشاء ملف تخطيط الجذر الأعلى src/app/_layout.tsx لتحديد مكدس التنقل بأكمله وتعيين خيارات الرأس (Header Options) لكل شاشة. ثالثًا، قم بفصل ووضع وحدات الأعمال الخاصة بوحدة المعالجة ومكونات واجهة المستخدم الشائعة في دليلي src/features/ و src/components/ لفصل التوجيه عن منطق الأعمال. يؤدي إدخال هذا الهيكل إلى القضاء تمامًا على أخطاء مرجع المسار النسبي المعقدة وتقليل الآثار الجانبية التي تحدث عند إضافة ميزات جديدة.
تتسبب بيئة الهاتف المحمول في حدوث انقطاعات متكررة في الشبكة أثناء الاتصال غير المتزامن بسبب التبديل المتكرر بين شبكات الخلايا (Cellular) والواي فاي (Wi-Fi)، كما أن واجهة الجلب الأساسية (Fetch API) لا تحتوي على مهلة زمنية مما يتسبب في تجميد التطبيق. لمنع هذه المشكلة، يجب دمج تانستاك كويري (TanStack Query) مع التخزين المحلي لتنفيذ التخزين المؤقت دون اتصال، وتطبيق حدود الخطأ على مستوى المسار (Route-level Error Boundary). لمنع إنهاء التطبيق قسريًا بسبب أخطاء وقت التشغيل وضمان الاستقرار، قم بتنفيذ الخطوات الثلاث التالية: أولاً، اكتب دالة مساعدة لغلاف الجلب (Fetch Wrapper) تقطع الطلب قسريًا في حالة تجاوز وقت طلب الشبكة باستخدام AbortController والمؤقتات. ثانيًا، قم بالتكوين في إعدادات عميل تانستاك كويري للحفاظ على التخزين المؤقت دون اتصال لمدة 24 ساعة وربط أداة حفظ التخزين الدائم غير المتزامن. الكود المراد استخدامه للإعداد هو كالتالي:
`typescript
import AsyncStorage from '@react-native-async-storage/async-storage';
import { QueryClient } from '@tanstack/react-query';
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24,
staleTime: 1000 * 60 * 5,
retry: 2,
},
},
});
const asyncStoragePersister = createAsyncStoragePersister({
storage: AsyncStorage,
key: 'APP_OFFLINE_CACHE',
});
`
ثالثًا، قم بتصدير حدود الخطأ ومكونات بديل التعليق (Suspense Fallback) مباشرة على مستوى المسار في إكسبو روتر لتزويد المستخدم ب زر إعادة محاولة واجهة مستعر تغذية واضحة عند حدوث خطأ في العرض. من خلال تطبيق نظام معالجة الاستثناءات متعدد الطبقات هذا، يمكنك منع ظاهرة تعطل التطبيق وتوقفها على شاشة بيضاء عند انقطاع الشبكة.