دليل المطوّر
كل ما تحتاجه لبناء نسخة المتاجر، ربط الإعلانات، وإضافة تطبيق جديد.
1. بنية المشروع
| المسار | الوظيفة |
|---|---|
| src/registry.js | السجل المركزي لكل التطبيقات (الاسم، التصنيف، الوصف) |
| src/assets/css/app.css | نظام التصميم المشترك (ألوان، مكوّنات، استجابة) |
| src/assets/js/core.js | النواة: السمة، التخزين، الإعلانات، التثبيت، المساعد الذكي |
| src/apps/<slug>.body.html | جسم كل تطبيق (المحتوى فقط) |
| src/apps/<slug>.js | منطق كل تطبيق |
| src/assets/js/icons.js | نظام الأيقونات (SVG) ومصدّر PNG |
| tools/build.mjs | يبني صفحات التطبيقات والنسخة المستقلة |
| tools/export-icons.mjs | يصدّر أيقونات PNG للمتاجر |
| native/ | إعداد Capacitor وبناء Android وiOS |
2. بناء الحزمة
npm run build # يبني dist/ و dist-standalone/
npm run icons # يصدّر أيقونات PNG
npm run qa # يفحص كل الصفحات في متصفح حقيقي
3. ربط الإعلانات
كل معرّفات الإعلانات في ملف واحد: tools/ad-config.js. انسخه إلى src/assets/js/ad-config.js ثم املأ:
window.AD_CONFIG = {
adsenseClient: 'ca-pub-XXXXXXXXXXXXXXXX',
adsenseSlots: { banner: '1234567890', rectangle: '0987654321', interstitial: '1122334455' },
admobAppId: 'ca-app-pub-3940256099942544~XXXXXXX',
admobUnits: { banner: 'ca-app-pub-.../banner', interstitial: 'ca-app-pub-.../interstitial', rewarded: 'ca-app-pub-.../rewarded' }
};
- في نسخة الويب يُحمّل AdSense تلقائياً عند إدخال المعرّف.
- في نسخة التطبيق الأصلي يُستدعى جسر AdMob عبر window.AndroidAdMob.
- أماكن الإعلانات معرّفة في الصفحة عبر data-ad-slot="banner|rectangle|interstitial".
4. إضافة تطبيق جديد
- أنشئ src/apps/<slug>.body.html وsrc/apps/<slug>.js.
- أضف مدخلاً في src/registry.js (الاسم، التصنيف، الوصف، الوسوم).
- أضف أيقونة SVG في src/assets/js/icons.js ضمن APP_ICON_GLYPHS ولونها في APP_ICON_PALETTE.
- نفّذ npm run build ثم npm run qa.
5. النشر على المتاجر
| المتجر | الأمر | الناتج |
|---|---|---|
| Google Play | npm run android:build | app-release.aab |
| App Store | npm run ios:build | App.ipa |
| Amazon Appstore | npm run android:build | app-release.apk |
نصوص الإدراج الجاهزة (العنوان والوصف وكلمات المفتاح) موجودة في مجلد store/.
6. المساعد الذكي
المساعد في core.js يعمل محلياً عبر مطابقة نوايا عربية. لربطه بمحرّك خارجي (مثل واجهة برمجية للذكاء الاصطناعي) أضف في ad-config.js:
window.AI_CONFIG = { endpoint: 'https://your-api/chat', key: 'YOUR_KEY' };