التطوير المباشر - شاهد كل حفظ على هاتفك

1ما هو التطوير المباشر#

التطوير المباشر يبني تطبيق تطوير لهاتفك الخاص. بدل تعبئة ملفاتك داخل APK، يحمّلها التطبيق من خادم التطوير على حاسوبك، فكلما حفظت ملفًا ظهر التغيير على الهاتف. بلا إعادة بناء وبلا إعادة تثبيت وبلا نسخ ملفات ZIP.

هذا هو غلاف AppMint الحقيقي وليس تبويب متصفح: الكاميرا والموقع والإشعارات والإعلانات وزر الرجوع والقائمة الجانبية وكل جسور AppMint تعمل تمامًا كما ستعمل في تطبيقك النهائي.

تنشئ التطبيق مرة واحدة. بعد ذلك لا تعود إلى AppMint إلا عندما تغيّر شيئًا أصليًا: إذنًا أو الأيقونة أو شاشة البداية أو معرّفات الإعلانات.

2ابنِ تطبيق التطوير (مرة واحدة)#

1. في الشاشة الرئيسية اضغط «التطوير المباشر» (أو إنشاء APK ← بلاطة «التطوير المباشر»).
2. اختر منفذ خادم التطوير لديك. بنقرة واحدة تختار الأدوات الشائعة: Vite 5173، React / Next 3000، Angular 4200، Vue CLI 8080، Live Server 5500، Python 8000، Astro 4321. يعمل أي منفذ من 1024 فما فوق.
3. اختياري: صفحة بداية مثل /admin/index.html وعنوان حاسوبك. اترك العنوان فارغًا، فالتطبيق يجد حاسوبك بنفسه.
4. أعطه اسم حزمة ينتهي بـ .dev (مثل com.myshop.dev) ليبقى بجانب تطبيقك الحقيقي لاحقًا.
5. في خطوة الوصول، علّم الأذونات التي تريد اختبارها (الكاميرا والموقع والإشعارات…). هذه أصلية، فتُحدَّد وقت البناء.
6. ابنِ ملف APK وثبّته على هاتفك.

بناء التطوير المباشر لا ينتج أبدًا حزمة Play (AAB): يعمل فقط بجانب حاسوبك، لذا يجب ألا يُنشر أبدًا.

3شغّل خادم التطوير ليتمكن الهاتف من الوصول إليه#

افتراضيًا تستمع معظم خوادم التطوير للحاسوب نفسه فقط. أضف مفتاح 'host' لتتمكن الأجهزة الأخرى على شبكة Wi-Fi من الاتصال:

• Vite (React وVue وSvelte وAstro): npm run dev -- --host
• Next.js: npx next dev -H 0.0.0.0
• Angular: ng serve --host 0.0.0.0
• Create React App / Vue CLI: تستمعان على الشبكة بالفعل

لديك مجلد ملفات HTML فقط؟ أي من هذه يحوّله إلى خادم، شغّله داخل المجلد:

• npx serve -l 5500
• python -m http.server 8000
• VS Code: ثبّت 'Live Server' ثم اضغط 'Go Live'

يسأل Windows مرة واحدة عما إذا كان سيسمح للخادم عبر جدار الحماية، فعلّم «الشبكات الخاصة» واسمح. إذا ضغطت إلغاء، لن يتمكن الهاتف من الاتصال حتى تسمح لـ Node (أو Python) في أمان Windows ← جدار الحماية ← السماح لتطبيق.

npm run dev -- --host

4الاتصال عبر Wi-Fi: بدون كابل وبدون تثبيت أي شيء#

1. ضع الهاتف على شبكة Wi-Fi نفسها التي عليها الحاسوب.
2. افتح تطبيق Live Dev الخاص بك.

هذا كل شيء. يبحث التطبيق عن خادم التطوير على المنفذ الذي اخترته، ويجد جهاز الكمبيوتر، ويحمّل الصفحة. ويتذكر الكمبيوتر في المرة القادمة. إذا كان خادمك على منفذ مختلف، أو استجابت عدة أجهزة، يعرضها لك وتضغط على جهازك.

لم يُعثر على شيء؟ شاشة الاتصال تواصل المحاولة كل ثانيتين وتفتح الصفحة تلقائيًا فور أن يصبح خادمك قابلًا للوصول، ابدأ الخادم وراقب. «ابحث عن حاسوبي» يفحص أيضًا المنافذ الشائعة الأخرى. يمكنك دائمًا كتابة العنوان الذي يطبعه Vite تحت 'Network:' في «أدخله بنفسك».

لماذا هذا أفضل من كتابة http://192.168.1.5:5173 في تطبيق موقع ويب: تعمل الصفحة على الهاتف بالعنوان http://localhost:PORT (يوصّله التطبيق بنفق إلى الكمبيوتر). وlocalhost سياق آمن، لذلك تعمل الكاميرا والميكروفون والموقع والحافظة وservice workers ومفاتيح المرور. أما على عنوان عادي مثل 192.168… فيحجب محرك المتصفح كل ذلك.

5الاتصال عبر USB: يعمل بدون Wi-Fi إطلاقًا#

استخدم هذا عندما يكون الكمبيوتر والهاتف على شبكتين مختلفتين، أو على Wi-Fi للضيوف يمنع الأجهزة من رؤية بعضها، أو بدون أي شبكة.

1. على الهاتف: الإعدادات ← حول الهاتف ← اضغط على "رقم الإصدار" سبع مرات، ثم خيارات المطور ← فعّل "تصحيح أخطاء USB".
2. وصّل الهاتف بالحاسوب واقبل رسالة «السماح بتصحيح USB».
3. على الحاسوب شغّل الأمر أدناه (باستخدام منفذك). يأتي adb مع Android Studio، أو نزّل «SDK Platform-Tools» من Google، وهو ملف ZIP صغير.
4. افتح تطبيق التطوير المباشر. يلاحظ وصلة USB ويستخدمها قبل تجربة Wi-Fi.

شغّل الأمر مرة أخرى بعد فصل الكابل أو إعادة تشغيل الهاتف. مع USB لا تحتاج إلى مفتاح 'host' من الخطوة 3.

إذا ظهرت في شاشة الاتصال عبارة "رابط USB يعمل، لكن لا شيء يستجيب على منفذ الكمبيوتر" ← فجزء الكابل سليم، وخادم التطوير لديك غير قيد التشغيل ببساطة.

adb reverse tcp:5173 tcp:5173

نزّل SDK Platform-Tools (adb) ←

6زر DEV#

يظهر زر صغير باسم DEV عائمًا على حافة التطبيق، ويمكنك سحبه إلى أي مكان. يتحول إلى اللون الأحمر مع رقم عندما تسجّل صفحتك خطأ. اضغط عليه للوصول إلى:

• إعادة التحميل: يجلب دائمًا نسخة جديدة من كل ملف، ولا يستخدم نسخة مخزّنة مؤقتًا أبدًا.
• وحدة التحكم - كل ما تسجله صفحتك من رسائل وأخطاء وتحذيرات ملوّنة، مع الملف والسطر (src/App.tsx:42). «الأخطاء» تفلتر، و«نسخ» يضع السجل كله في الحافظة، الصقه في دردشة أو تقرير خطأ.
• تشغيل JavaScript - سطر في أسفل وحدة التحكم. اكتب أي تعبير وشاهد النتيجة، مباشرة على الهاتف. تُنتظر الوعود (Promises) وتُسجَّل.
• التحديث عند الحفظ - انظر الخطوة التالية.
• تغيير الخادم: جهاز كمبيوتر آخر أو منفذ آخر، بدون إعادة إنشاء التطبيق.
• مسح بيانات الموقع وإعادة التحميل: يحذف ملفات تعريف الارتباط وlocalStorage وIndexedDB لاختبار تشغيل أول نظيف.
• معلومات الاتصال: العنوان، وUSB أو Wi-Fi، وعنوان IP لهذا الهاتف.

لأدوات المطور الكاملة (العناصر والشبكة ونقاط التوقف) وصّل الكابل وافتح chrome://inspect في Chrome على الحاسوب واختر تطبيقك.

7التحديث عند الحفظ، حتى لـ HTML العادي#

تدفع Vite وNext وAngular وwebpack تغييراتك إلى الصفحة تلقائيًا (إعادة تحميل فورية). يكتشف التطبيق ذلك ولا يتدخل.

مجلد عادي يخدمه python أو 'npx serve' أو أي خادم ثابت ليس فيه إعادة تحميل فورية، وعادةً ستحفظ ثم تسحب للتحديث في كل مرة. التطوير المباشر يفعل ذلك عنك: يتذكر الملفات التي حمّلتها الصفحة، ويسأل خادمك مرة كل ثانية إن تغير أي منها، ويحدّث عندما يتغير. ملف .css المتغير يُستبدل في مكانه دون إعادة تحميل، فتحتفظ بموضع التمرير وما أدخلته في النماذج أثناء التنسيق.

لا شيء لتثبيته على الكمبيوتر. أوقفه من زر DEV إذا أردت التحكم يدويًا في أي وقت. وتبقى الشاشة مضاءة أيضًا ما دام تطبيق Live Dev مفتوحًا.

8عندما تنتهي: ابنِ التطبيق الحقيقي#

تطبيق التطوير المباشر لا يعمل إلا بجانب حاسوبك، فلا تعطه للمستخدمين أبدًا. عندما يصبح المشروع جاهزًا:

• مشروع إطار عمل (Vite وReact وVue…): شغّل 'npm run build'، واضغط مجلد dist (أو اضغط مشروع المصدر كاملًا) في ZIP، وابنه في إنشاء APK ← ZIP دون اتصال.
• مجلد HTML عادي: اضغطه في ملف ZIP مع index.html في المستوى الأعلى ← Offline ZIP. ملف واحد فقط؟ استخدم بطاقة HTML.
• منشور بالفعل على عنوان https:// حقيقي: إنشاء APK ← موقع.

استخدم اسم الحزمة الحقيقي لذلك البناء. لأن حزمة تطبيق التطوير تنتهي بـ .dev، يمكن أن يبقى الاثنان مثبّتين جنبًا إلى جنب.

9إذا لم يتصل#

• Wi-Fi: «في انتظار خادم التطوير» إلى الأبد ← الخادم يستمع للحاسوب فقط. أعد تشغيله بمفتاح المضيف من الخطوة 3 (يطبع Vite سطر 'Network:' عندما يكون صحيحًا).

• Wi-Fi: ما زال لا شيء ← جدار حماية Windows يحجبه (الخطوة 3)، أو أن الراوتر يعزل الأجهزة (شائع في شبكات الضيوف والمكاتب والفنادق). استخدم USB، أو شغّل نقطة اتصال الهاتف ووصّل الحاسوب بها.

• USB: إذا ظهر أن 'adb' غير معروف ← ثبّت Platform-Tools ونفّذ الأمر من ذلك المجلد. وإذا ظهر 'no devices' ← اقبل طلب تصحيح أخطاء USB على الهاتف، أو جرّب كابلًا آخر (كثير من الكابلات للشحن فقط).

• «المنفذ … مشغول على هذا الهاتف» ← تطبيق آخر على الهاتف يستخدم ذلك المنفذ. شغّل خادم التطوير على منفذ آخر وأدخله تحت «أدخله بنفسك».

• يعرض Vite «Blocked request. This host is not allowed» ← فتحت عنوان الحاسوب في متصفح عادي أو تطبيق موقع. تطبيق التطوير المباشر لا يتسبب في هذا أبدًا، لأنه يطلب دائمًا localhost.

• إذا تُحمَّل الصفحة لكن استدعاءات API تفشل ← يجب أن تسمح قائمة CORS في الخادم الخلفي بـ http://localhost:PORT (معظم بيئات التطوير تفعل ذلك مسبقًا)، وعنوان API المكتوب بالشكل http://localhost:4000 يعني الهاتف نفسه. أعد توجيه هذا المنفذ أيضًا (adb reverse tcp:4000 tcp:4000) أو استخدم عنوان الكمبيوتر للـ API.

• صفحة فارغة بعد التبديل بين مشروعين على المنفذ نفسه ← DEV ← مسح بيانات الموقع وإعادة التحميل (هناك service worker قديم يستجيب).