خريطة شاملة لمشاريعك السبعة مع المقارنة التقنية بينها
oscarsite
Firebase
بورتفوليو شخصي للمطور مع لوحة تحكم CMS وذكاء اصطناعي (مراجعة أكواد + شات بوت) ولعبة ذاكرة تفاعلية ونظام مصادقة كامل
HTML/CSS/JSFirebase AuthFirestoreOpenRouter AI
📁 ملفان رئيسيان🌐 oscar-2ceeaAI
connect4
Firebase
لعبة Connect 4 احترافية بثلاثة أوضاع: محلي، ذكاء اصطناعي بأربع مستويات صعوبة (بعمق بحث 7)، وأونلاين مع مزامنة فورية ودردشة سريعة
HTML/CSS/JSFirestorePWAAI (Negamax)
📁 ملف واحد 328KB🌐 connect4-76a92Online
oscarchat
Firebase
تطبيق دردشة فورية آمن يدعم الرسائل النصية والصوتية والصور مع نظام إضافة أصدقاء بالكود وإشعارات فورية وتشفير
HTML/Tailwind CSSFirebase AuthFirestoreFCM
📁 ملف + Cloud Functions🌐 oscarchat-e7903Online
oscarfarmer
Firebase
لعبة مزرعة احترافية متعددة اللاعبين مع 15 محصول و10 حيوانات و24 مهمة ونظام بناء ودردشة وزيارة مزارع الأصدقاء فوريا
HTML/CSS/JSCanvasRealtime DBPWA
📁 JS منفصل 6700 سطر🌐 oscarfarmer-41961Online
pregnancy (وسن)
Firebase
تطبيق تتبع حمل شامل بالتقويمين الميلادي والهجري مع منتدى مجتمعي فوري وتتبع صحة يومي وعداد ركلات ونظام إشعارات
HTML/CSS/JSFirebase AuthFirestorePWA
📁 ملف واحد 4300 سطر🌐 pregnancy-cf335Forum
sh-main (Pure Design)
Firebase
متجر إلكتروني لتصاميم رقمية (دعوات، بشارات، معايدات) مع لوحة إدارة للمنتجات والطلبات وأداة مجانية لتوليد بطاقات المعايدة
HTML/CSS/JSFirebase AuthFirestore
📁 4 صفحات HTML🌐 pure-design-de0f7Store
OscarSnake
GitHub Pages
لعبة الأفعى الكلاسيكية مبنية بـ Flutter/Dart مع واجهة عربية ولوحة متصدرين وتحكم باللمس والكيبورد وقابلة للتثبيت كـ PWA
Flutter/DartMaterial DesignCanvasKitPWA
📁 main.dart واحد🌐 GitHubFlutter
📊 جدول المقارنة التقنية الشامل
المشروع
اللغة
الاستضافة
قاعدة البيانات
المصادقة
PWA
Online
Firebase Project ID
oscarsite
HTML/JS
Firebase
Firestore
Email + Anonymous
-
AI Chat
oscar-2ceea
connect4
HTML/JS
Firebase
Firestore
-
✅
✅ Multiplayer
connect4-76a92
oscarchat
HTML/JS/Tailwind
Firebase
Firestore
Email/Password
✅
✅ Chat
oscarchat-e7903
oscarfarmer
HTML/JS/Canvas
Firebase
Realtime DB
Anonymous
✅
✅ Multiplayer
oscarfarmer-41961
pregnancy
HTML/JS
Firebase
Firestore
Email + Google
✅
✅ Forum
pregnancy-cf335
sh-main
HTML/JS
Firebase
Firestore
Email (Admin)
-
WhatsApp
pure-design-de0f7
OscarSnake
Dart/Flutter
GitHub
In-Memory
-
✅
-
GitHub repo
🏗 النمط المعماري المشترك
جميع مشاريعك تتبع نمط Static SPA + Firebase Backend وهذا يعني:
الواجهة الأمامية (Frontend) كاملة في ملفات HTML/CSS/JS ثابتة - بدون خادم (Server)
Firebase يعمل كـ Backend-as-a-Service: قاعدة بيانات + مصادقة + استضافة
لا يوجد عملية بناء (Build Process) في 6 من 7 مشاريع - الملفات تُرفع مباشرة
OscarSnake هو الاستثناء: يتطلب flutter build web قبل الرفع
جميع المشاريع تدعم اللغة العربية (RTL) بشكل كامل
🌐 هيكل الدومينات والاستضافة
💡
الدومين الرئيسي: khccn.com (مُسجل عبر Namecheap)
يتم إضافة subdomain لكل مشروع مثل: snake.khccn.com ثم ربطه بالاستضافة المناسبة
المشروع
الدومين المقترح
الاستضافة
طريقة الربط
oscarsite
oscar.khccn.com
Firebase Hosting
CNAME + Firebase Console
connect4
connect4.khccn.com
Firebase Hosting
CNAME + Firebase Console
oscarchat
chat.khccn.com
Firebase Hosting
CNAME + Firebase Console
oscarfarmer
farm.khccn.com
Firebase Hosting
CNAME + Firebase Console
pregnancy
wsn.khccn.com
Firebase Hosting
CNAME + Firebase Console
sh-main
pure-des.com
Firebase Hosting
CNAME (دومين مستقل)
OscarSnake
snake.khccn.com
GitHub Pages
CNAME file في الريبو
💻
oscarsite - بورتفوليو المطور
موقع شخصي مع لوحة تحكم ومراجعة أكواد بالذكاء الاصطناعي
📂 هيكل الملفات
oscarsite/
├── public/-- مجلد الاستضافة (يُرفع لـ Firebase)
│ ├── index.html-- الموقع الرئيسي (الواجهة العامة)
│ ├── admin.html-- لوحة التحكم (إدارة المشاريع والمقالات)
│ ├── oscarlogo.png-- شعار الموقع
│ ├── oscarlogo2.png-- شعار بديل
│ └── htaccess-- قواعد أمان Apache
├── firebase.json-- إعدادات Firebase Hosting
├── .firebaserc-- معرف المشروع: oscar-2ceea
└── .gitignore-- ملفات مُستثناة من Git
🔧 التقنيات المستخدمة
HTML5/CSS3Vanilla JavaScriptFirebase SDK 10.7.1OpenRouter AI API
الصفحة الرئيسية: عرض المشاريع والمقالات، مراجعة أكواد AI، شات بوت، لعبة ذاكرة، إحصائيات، تسجيل دخول/تسجيل
Firebase (Firestore + Auth) + OpenRouter API
admin.html
لوحة التحكم: إضافة/تعديل/حذف المشاريع والمقالات، إدارة الصلاحيات، النسخ الاحتياطي، إدارة المستخدمين
Firebase (Firestore + Auth) - يقرأ/يكتب نفس البيانات
firebase.json
يحدد مجلد public/ كمجلد الاستضافة ويستثني ملفات معينة
-
.firebaserc
يربط المجلد المحلي بمشروع Firebase: oscar-2ceea
-
💡
العلاقة: index.html و admin.html يتشاركان نفس قاعدة بيانات Firestore. ما يضيفه الأدمن من مشاريع ومقالات يظهر تلقائيا للزوار في الموقع الرئيسي.
⚡ المميزات الرئيسية
مراجعة أكواد بالـ AI: المستخدم يلصق كود ويحصل على تقييم فوري (3 طلبات/يوم لكل جهاز)
شات بوت ذكي: محادثة مع مساعد AI يعرف مهارات وخدمات المطور (5 طلبات/يوم)
لعبة ذاكرة: لعبة بطاقات تفاعلية متاحة لجميع الزوار
تصميم داكن: ثيم مظلم مع ألوان سيان وبنفسجي ووردي
لوحة إدارة كاملة: CRUD للمشاريع والمقالات + صلاحيات + نسخ احتياطي JSON
حماية AI بالبصمة: يمنع التحايل على الحد اليومي باستخدام بصمة الجهاز (SHA-256)
🗄️ هيكل Firestore (Collections)
settings/← إعدادات الموقعmain/siteName, bio, github, twitter, emailprojects/← المشاريع المعروضة في البورتفوليو{projectId}/title: stringdescription: stringurl: stringimageUrl: stringtags: arrayorder: number← ترتيب العرضposts/← المقالات والتدوينات{postId}/title, content, createdAtpermissions/← تحكم بإظهار/إخفاء أقسام الموقعfeatures/showAI: boolean← إظهار قسم مراجعة الأكوادshowChatbot: booleanshowGame: booleanusers/← المستخدمين المسجلينaiUsage/← عدّاد طلبات AI لكل جهاز (بصمة SHA-256){deviceFingerprint}/codeReviews: number← الحد: 3/يومchatMessages: number← الحد: 5/يومdate: string← يُصفَّر كل يوم
⚙️ أوامر سريعة
# رفع oscarsitecdC:\Users\khccn\Desktop\kh\ONLINE\oscarsitefirebase deploy
# فتح قاعدة البيانات في المتصفحfirebase open firestore
# إضافة مشروع جديد: افتح admin.html في الموقع المباشر
🎲
connect4 - لعبة أربعة بصف
لعبة Connect 4 بثلاثة أوضاع مع AI أسطوري وأونلاين فوري
📂 هيكل الملفات
connect4/
├── public/-- مجلد الاستضافة
│ ├── index.html-- التطبيق الكامل (328KB) HTML+CSS+JS
│ ├── sw.js-- Service Worker للعمل بدون إنترنت
│ ├── manifest.json-- إعدادات PWA (تثبيت كتطبيق)
│ ├── icon-192.png-- أيقونة التطبيق صغيرة
│ ├── icon-512.png-- أيقونة التطبيق كبيرة
│ └── oscarlogo.png-- شعار العلامة
├── firebase.json-- إعدادات Firebase Hosting
├── .firebaserc-- معرف المشروع: connect4-76a92
└── README.md-- توثيق + قواعد الأمان
🎮 أوضاع اللعب الثلاثة
الوضع
الوصف
التقنية
محلي (Local)
لاعبان على نفس الجهاز يتناوبان
JavaScript محلي فقط - بدون إنترنت
ذكاء اصطناعي (AI)
4 مستويات صعوبة - المستوى الأسطوري يبحث بعمق 7 طبقات
خوارزمية Negamax + Alpha-Beta Pruning + Opening Book
أونلاين (Online)
لعب فوري مع شخص آخر عبر كود الغرفة + دردشة وإيموجي
Firestore Real-time Sync + Heartbeat Detection
🚀 كيف يعمل الأونلاين
إنشاء الغرفة (المضيف)
اللاعب الأحمر ينشئ غرفة بكود عشوائي (مثل A1B2C3) ويُخزن في Firestore في games/A1B2C3 مع حالة "waiting"
مشاركة الرابط
يُنسخ رابط يحتوي على الكود: ?room=A1B2C3 ويُرسل للخصم
انضمام الخصم (الأخضر)
يفتح الرابط، يتحقق أن الغرفة بحالة "waiting"، يُحدث الحالة إلى "playing" ويبدأ الاستماع الفوري
مزامنة الحركات
كل حركة تُحدث Firestore فورا (اللوحة + الدور + آخر حركة) والطرف الآخر يستقبلها عبر onSnapshot
كشف انقطاع الاتصال (Heartbeat)
كل 8 ثوان يُرسل نبضة قلب لـ Firestore. إذا غابت لمدة 25 ثانية يُعتبر الخصم منقطعا
🧠 خوارزمية AI الأسطورية
Iterative Deepening: يزيد عمق البحث تدريجيا حتى نفاد الوقت (2 ثانية)
Negamax + Alpha-Beta Pruning: يقطع فروع البحث غير المفيدة لتسريع القرار
إنشاء موضوع: عنوان (200 حرف) + محتوى (5000 حرف) + صورة اختيارية -> يُخزن في topics/{topicId}
الردود: subcollection في topics/{topicId}/replies/ مع إمكانية اقتباس رد سابق
الإشعارات: إشعار لصاحب الموضوع عند الرد + إشعار للمقتبس منه
الإشراف: لوحة إدارة (تثبيت/حذف مواضيع) + نظام بلاغات بأسباب
الأدوار: user (عادي) / leader (مشرف) / admin (مدير كامل)
المزامنة: onSnapshot يُحدث المواضيع فوريا لجميع المستخدمين المتصلين
🔢 التقويم الهجري
💡
ميزة فريدة: التطبيق يحسب تاريخ الولادة المتوقع بالتقويمين الميلادي والهجري باستخدام دوال تحويل مخصصة مبنية داخل الكود (بدون مكتبات خارجية).
🗄️ هيكل Firestore (Collections)
users/← بيانات الحمل الخاصة{userId}/lmpDate: string← تاريخ آخر دورة شهريةdueDate: string← تاريخ الولادة المتوقعbabyName: string← اسم الجنينhealthLogs: array← سجلات الصحة اليوميةappointments: array← مواعيد الطبيبkickCounts: object← عدادات ركلات الجنينprofiles/← الملفات الشخصية للأعضاء في المنتدى{userId}/displayName: string← الاسم الظاهرrole: 'user'|'leader'|'admin'postCount: number← عدد المواضيعjoinedAt: timestamp← تاريخ الانضمامtopics/← مواضيع المنتدى{topicId}/title: string (max 200)content: string (max 5000)authorId: string← uid صاحب الموضوعpinned: boolean← للمدير فقطviewCount: numberreplyCount: numberlastReplyAt: timestampreplies/← sub-collection{replyId}/body: string (max 4000)authorId: stringquotedReplyId: string← اقتباس رد سابقcreatedAt: timestampnotifications/← إشعارات المنتدى{userId}/items/{notifId}/type: 'reply'|'quote'topicId: stringread: booleanreports/← البلاغات (يقرأها المدير فقط)userSaves/← المواضيع المحفوظة لكل مستخدم
👤 نظام الأدوار (Roles)
الدور
الصلاحيات
كيف يُعيَّن
user
ينشئ مواضيع + يرد + يحفظ + يُبلغ
تلقائياً عند إنشاء الحساب
leader
كل صلاحيات user + يحذف مواضيع وردود الآخرين
المدير يُعيّنه من Firebase Console
admin
كل الصلاحيات + يُثبّت مواضيع + يدير الأدوار + يرى البلاغات
بريد admin@wsn.khccn.com أو من Firestore مباشرة
⚙️ أوامر الإدارة الشائعة
# رفع التطبيقcdC:\Users\khccn\Desktop\kh\ONLINE\pregnancyfirebase deploy
# رفع قواعد Firestore فقطfirebase deploy --only firestore:rules# تعيين مستخدم كـ admin من Firebase Console:# 1. Firestore > profiles > {uid} > role: "admin"# معرفة uid مستخدم معين:# Firebase Console > Authentication > Users > انسخ UID
🛒
sh-main - متجر Pure Design
متجر تصاميم رقمية مع لوحة إدارة وأداة بطاقات معايدة مجانية
📂 هيكل الملفات
sh-main/
├── public/-- مجلد الاستضافة
│ ├── index.html-- واجهة المتجر الرئيسية (كتالوج + سلة + شراء)
│ ├── admin.html-- لوحة إدارة المنتجات والطلبات
│ ├── greeting.html-- أداة مجانية: مُولد بطاقات المعايدة
│ ├── 404.html-- صفحة خطأ 404
│ ├── CNAME-- ربط الدومين: pure-des.com
│ ├── robots.txt-- إعدادات SEO لمحركات البحث
│ ├── google*.html-- تحقق Google Search Console
│ ├── fb*.txt-- تحقق Meta/Facebook
│ └── *.png / *.jpg-- شعارات + صور المنتجات
├── firebase.json-- إعدادات Firebase Hosting
└── .firebaserc-- معرف المشروع: pure-design-de0f7
📄 وظيفة كل صفحة
الصفحة
الوظيفة
المميزات
index.html
واجهة المتجر العامة
كتالوج المنتجات + بحث + تصفية بالفئات + سلة تسوق (localStorage) + طلب عبر WhatsApp + وضع داكن/فاتح
admin.html
لوحة إدارة المتجر
إضافة/تعديل/حذف منتجات + إظهار/إخفاء + عرض الطلبات + تحديث حالة الطلب
greeting.html
أداة بطاقات معايدة مجانية
يختار المستخدم قالب + يكتب اسم المُهنأ -> Canvas يولد بطاقة -> تحميل JPG
404.html
صفحة خطأ
تظهر عند زيارة رابط غير موجود
🛒 فئات المنتجات
👜 متاجر إلكترونية💻 خدمات رقمية🎮 ألعاب💍 دعوات👶 بشارات🎁 معايدات
🐍
OscarSnake - لعبة الأفعى بـ Flutter
المشروع الوحيد بـ Flutter/Dart - مُستضاف على GitHub Pages
📂 هيكل الملفات
OscarSnake/
├── lib/
│ └── main.dart-- كل كود اللعبة (466 سطر)
├── web/
│ ├── index.html-- نقطة دخول الويب (template)
│ └── manifest.json-- إعدادات PWA
├── build/web/-- مُخرج البناء (هذا ما يُرفع)
│ ├── index.html-- HTML المُولد
│ ├── main.dart.js-- Dart مترجم إلى JavaScript
│ ├── flutter.js-- محرك Flutter
│ └── canvaskit/-- محرك الرسومات
├── android/-- إعدادات Android
├── ios/-- إعدادات iOS
├── windows/-- إعدادات Windows Desktop
├── pubspec.yaml-- تبعيات Dart/Flutter
├── pubspec.lock-- نسخ التبعيات المقفلة
└── test/-- اختبارات (placeholder)
🐍 شاشات اللعبة
الشاشة
الوظيفة
المميزات
القائمة الرئيسية
إدخال اسم اللاعب + بدء اللعبة
لوحة أفضل 3 لاعبين + زر تثبيت PWA
شاشة اللعب
لوحة 20x20 (400 مربع) + أفعى + طعام
تحكم: أسهم/WASD + سحب على الشاشة + إيقاف مؤقت
شاشة النهاية
انتهاء اللعبة عند اصطدام الأفعى بنفسها
خيار إعادة اللعب أو العودة للقائمة
⚙ ميكانيكيات اللعبة
الشبكة: 20x20 = 400 مربع
النقاط: +10 لكل طعام
السرعة: تزداد كل 50 نقطة (تبدأ 180ms وتقل 15ms حتى الحد الأدنى 60ms)
الحدود: الأفعى تخرج من جانب وتدخل من الجانب المقابل (Wrap-around)
الموت: اصطدام الأفعى بنفسها فقط
🔧 الفرق عن باقي المشاريع
⚠
هذا المشروع مختلف تماما عن الباقي:
- اللغة: Dart بدلا من JavaScript
- الإطار: Flutter بدلا من Vanilla HTML
- البناء: يتطلب أمر بناء (flutter build web) قبل الرفع
- الاستضافة: GitHub Pages بدلا من Firebase
- قاعدة البيانات: لا يوجد - الأرقام محفوظة في الذاكرة فقط
🚀
دليل الرفع والنشر الشامل
كل ما تحتاجه لرفع وتحديث مشاريعك خطوة بخطوة
🔧 المتطلبات الأساسية (مرة واحدة فقط)
تثبيت Node.js
حمل من nodejs.org وثبته. سيُثبت معه أداة npm تلقائيا.
# تأكد من التثبيت:node--versionnpm--version
تثبيت Firebase CLI
npm install -g firebase-tools
تسجيل الدخول لـ Firebase
firebase login
# سيفتح المتصفح لتسجيل الدخول بحساب Google
تثبيت Git
حمل من git-scm.com (مطلوب لـ OscarSnake فقط)
تثبيت Flutter (لـ OscarSnake فقط)
حمل من flutter.dev وأضفه لـ PATH
flutter--versionflutter doctor
🔥 رفع مشاريع Firebase (6 مشاريع)
💡
الأوامر متطابقة لجميع مشاريع Firebase الستة. الفرق فقط هو المجلد الذي تفتح منه Terminal.
# === رفع oscarsite ===cdC:\Users\khccn\Desktop\kh\ONLINE\oscarsitefirebase deploy
# === رفع connect4 ===cdC:\Users\khccn\Desktop\kh\ONLINE\connect4firebase deploy
# === رفع oscarchat ===cdC:\Users\khccn\Desktop\kh\ONLINE\oscarchatfirebase deploy
# === رفع oscarfarmer ===cdC:\Users\khccn\Desktop\kh\ONLINE\oscarfarmerfirebase deploy
# === رفع pregnancy ===cdC:\Users\khccn\Desktop\kh\ONLINE\pregnancyfirebase deploy
# === رفع sh-main ===cdC:\Users\khccn\Desktop\kh\ONLINE\sh-mainfirebase deploy
أوامر رفع جزئي:
# رفع الاستضافة فقط (بدون قواعد DB)firebase deploy --only hosting# رفع قواعد قاعدة البيانات فقط (oscarfarmer)firebase deploy --only database# رفع Cloud Functions فقط (oscarchat)firebase deploy --only functions# رفع كل شيءfirebase deploy
🐙 رفع OscarSnake على GitHub Pages
# 1. ادخل مجلد المشروعcdC:\Users\khccn\Desktop\kh\flutterprojects\OscarSnake# 2. ابنِ نسخة الويبflutter build web --release# 3. انسخ المخرجات أو ارفع مباشرة# الملفات الجاهزة موجودة في: build/web/# 4. ارفع التغييرات لـ GitHubgit add .git commit -m"update build"git push
⚠
مهم: تأكد أن إعدادات GitHub Pages في الريبو تشير إلى المجلد الصحيح (root أو /docs أو gh-pages branch)
هذه الخطوات لمشروع جديد كلياً لم تُعدّ له Firebase بعد. للمشاريع الحالية (oscarsite وغيرها) استخدم firebase deploy مباشرة.
الخطوة 1: جمّع ملفاتك في مجلد
اجمع الملفات التالية في مجلد على سطح المكتب: html - admin - picture and logo
الخطوة 2: افتح Terminal في المجلد
اذهب لشريط العنوان في المجلد، اكتب cmd ثم اضغط Enter.
الخطوة 3: ثبّت Firebase CLI وسجّل الدخول
npm install -g firebase-tools
firebase login
# سيفتح المتصفح لتسجيل الدخول بحساب Google
الخطوة 4: هيّئ المشروع (Firebase Init)
firebase init
# ستظهر أسئلة — الإجابات:# هل أنت جاهز؟ → y ثم Enter# اختر: Hosting: Configure files for Firebase Hosting# اختر: Use an existing project → حدد مشروعك في Firebase# مجلد الملفات (public) → اضغط Enter (الافتراضي)# Single-page app? → No (لصفحات منفصلة) أو Yes (لموقع SPA)# Set up automatic GitHub deploys? → No# Use Agent? → N
الخطوة 5: انقل الملفات لمجلد public ثم ارفع
انقل جميع ملفاتك (html - admin - صور - شعار) إلى المجلد الجديد public، ثم:
firebase deploy
🔐 إعداد Authentication و Firestore بعد إنشاء المشروع
1. تفعيل Authentication
من القائمة الجانبية في Firebase Console:
Build → Authentication → Get started
# تبويب Sign-in method → Email/Password → فعّله → Save
2. تفعيل Firestore Database
Build → Firestore Database → Create database
# اختر: Start in production mode# اختر: أقرب موقع جغرافي → Done
3. ضبط Security Rules (مهم جداً!)
في Firestore → تبويب Rules → الصق القواعد التالية:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
// المستخدم يستطيع قراءة/كتابة بياناته فقطallow read, write: if request.auth != null && request.auth.uid == userId;
// السماح بإنشاء الحساب عند التسجيلallow create: if request.auth != null;
}
}
}
يحتاج هذا: Node.js + Android Studio (محمّل من موقع Google مجاناً)
الخطوة 1: أنشئ مجلداً وضع فيه index.html
أنشئ مجلداً جديداً (مثل OscarApp) وضع فيه ملف index.html الخاص باللعبة أو الموقع.
الخطوة 2: افتح Terminal في المجلد وشغّل الأوامر
# تهيئة المشروعnpm init -y# تثبيت أداة Capacitornpm install @capacitor/core @capacitor/cli
# تهيئة التطبيق (سيسألك عن الاسم والـ ID)npx cap init
# App name: اكتب اسم التطبيق (مثل: Oscar App)# App ID: com.yourname.appname (للجوجل بلاي)
الخطوة 3: أنشئ مجلد www وانقل فيه index.html
أنشئ مجلداً باسم www داخل مجلد مشروعك، ثم انقل index.html إليه.
الخطوة 4: أضف منصة أندرويد ونفّذ البناء
npm install @capacitor/android
# إضافة منصة أندرويدnpx cap add android
# إذا ظهرت رسالة أن المجلد موجود، استخدم:npx cap sync android
# نسخ الملفات لمجلد أندرويدnpx cap copy
# فتح المشروع في Android Studionpx cap open android
الخطوة 5: في Android Studio — استخراج ملف APK
انتظر حتى يكتمل تحميل Gradle (الشريط في الأسفل)
من القائمة العلوية: Build → Build Bundle(s) / APK(s) → Build APK(s)
عند انتهاء البناء، اضغط Locate في الإشعار لإيجاد ملف APK
أرسل الملف لأصدقائك أو ارفعه لمتجر Google Play!
تحديث التطبيق بعد تعديل الكود
npx cap sync android
npx cap open android
# ثم أكمل إجراءات الـ Build من Android Studio
🔄 تحديث Service Worker بعد الرفع
🚨
مشكلة شائعة: بعد الرفع، المستخدمون يرون النسخة القديمة لأن Service Worker يُخدم من الكاش! الحل: غير رقم الإصدار في sw.js قبل كل رفع.
// في sw.js - غير رقم الإصدار:
const CACHE = 'oscar-v6'; // غيره إلى v7 عند التحديث// المشاريع التي تحتاج هذا التغيير:// connect4/public/sw.js (حاليا v6)// oscarfarmer/sw.js (حاليا v4)// oscarchat/sw.js (حاليا v2)
🔴 "Error: No project active" أو "Firebase project not found"▼
السبب: أنت في مجلد خاطئ أو ملف .firebaserc مفقود أو تالف
# الحل 1: تأكد أنك في المجلد الصحيحcdC:\Users\khccn\Desktop\kh\ONLINE\oscarsite# الحل 2: أعد الربط بالمشروعfirebase use oscar-2ceea# أو بشكل تفاعلي:firebase use --add
🔴 الموقع يعرض نسخة قديمة بعد الرفع▼
السبب: Service Worker يُخدم الملفات من الكاش القديم
الحل:
غير رقم إصدار الكاش في sw.js (مثلا v6 -> v7) قبل الرفع
أو: في المتصفح اضغط Ctrl+Shift+Delete لحذف الكاش
أو: افتح DevTools > Application > Service Workers > Unregister
🔴 خطأ CORS أو "Access Denied" عند استخدام Firebase▼
السبب: قواعد أمان Firestore/Realtime DB تمنع القراءة أو الكتابة
// الحل المؤقت للتطوير (Firestore):
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
// تحذير: هذا للتطوير فقط! في الإنتاج استخدم قواعد أمان صحيحة
🔴 "flutter: command not found" عند بناء OscarSnake▼
السبب: Flutter غير مثبت أو غير مُضاف لـ PATH
# تأكد من وجود Flutter:flutter doctor
# إذا لم يُعرف الأمر، أضف Flutter لـ PATH:# 1. اذهب لـ: System > Environment Variables > Path# 2. أضف مسار مجلد bin في Flutter SDK
🔴 DNS لا يعمل بعد ربط الدومين▼
السبب: سجلات DNS تحتاج وقت للانتشار (5 دقائق إلى 48 ساعة)
الحل:
انتظر 15-30 دقيقة على الأقل
تأكد من صحة السجلات في Namecheap (لا مسافات زائدة)
استخدم nslookup connect4.khccn.com للتحقق
جرب ipconfig /flushdns على جهازك
🔴 حجم الملف كبير جدا (index.html 300+ KB)▼
المشاريع المتأثرة: connect4 (328KB), pregnancy (4300 سطر), oscarfarmer (6700 سطر في game.js)
الحلول:
فصل الملفات: مثل ما فعل oscarfarmer (HTML + CSS + JS منفصلين) - هذا هو النمط الأفضل
ضغط الكود: استخدم أداة مثل terser أو cssnano لتصغير الملفات
Firebase Hosting: يضغط الملفات تلقائيا بـ GZIP عند الإرسال
🔴 مفاتيح API ظاهرة في الكود المصدري▼
المشاريع المتأثرة: جميع مشاريع Firebase + oscarsite (OpenRouter API Key)
التوضيح:
مفاتيح Firebase: هذا طبيعي وآمن! مفاتيح Firebase العامة مصممة لتكون في الـ Frontend. الحماية تتم عبر Security Rules في Firebase Console
مفتاح OpenRouter: هذا أكثر حساسية. الأفضل نقله لـ Cloud Function حتى لا يظهر في الكود
✅ أفضل الممارسات والاقتراحات
الاقتراح
الأولوية
التفاصيل
فصل HTML/CSS/JS
عالية
مثل oscarfarmer - يسهل الصيانة والتطوير بشكل كبير. طبقه على connect4 و pregnancy
استخدام Git لكل مشروع
عالية
أنشئ ريبو Git لكل مشروع لتتبع التغييرات والرجوع لأي نسخة سابقة
قواعد أمان Firestore صحيحة
عالية
لا تستخدم allow read, write: if true في الإنتاج! حدد من يقرأ ومن يكتب
نقل API Key لـ Cloud Function
متوسطة
مفتاح OpenRouter في oscarsite يجب نقله لـ Firebase Cloud Function
إضافة GitHub Actions لـ OscarSnake
متوسطة
أتمتة البناء والنشر: كل push يبني ويرفع تلقائيا
ضغط الصور
منخفضة
oscarlogo.png في connect4 حجمها 1.7MB! اضغطها أو حولها لـ WebP
إعداد VAPID Key للإشعارات
منخفضة
oscarchat يحتاج إعداد VAPID Key من Firebase Console لتفعيل Push Notifications
🎓
خطة التعلم لمدة شهر
خطة مُنظمة لفهم واستيعاب كل تقنية مستخدمة في مشاريعك
الأسبوع 1
الأساسيات: HTML/CSS/JS
ادرس هيكل index.html في oscarsite (أبسط مشروع)
افهم CSS Variables و Flexbox و Grid من styles.css في oscarfarmer
تعلم DOM Manipulation من أحداث الأزرار في sh-main
افهم localStorage من سلة التسوق في sh-main
جرب تعديل بسيط في كل مشروع وارفعه
تعلم أمر firebase deploy وافهم firebase.json
الأسبوع 2
Firebase بالتفصيل
افهم Firestore: Collections, Documents, Queries من oscarchat
تعلم Firebase Auth: Email/Password + Google Sign-In من pregnancy
افهم الفرق: Firestore vs Realtime Database (oscarfarmer يستخدم Realtime)
ادرس onSnapshot وكيف تعمل المزامنة الفورية في connect4
تعلم Security Rules وطبقها على مشروع واحد
جرب Firebase Console: اقرأ البيانات وعدلها يدويا
الأسبوع 3
المميزات المتقدمة
ادرس PWA: Service Worker + manifest.json من connect4
افهم Canvas API من game.js في oscarfarmer
تعلم MediaRecorder API (تسجيل صوتي) من oscarchat
ادرس AI Integration: كيف يتصل oscarsite بـ OpenRouter API
افهم خوارزمية Negamax في AI الـ connect4
تعلم Heartbeat pattern لكشف انقطاع الاتصال
الأسبوع 4
Flutter + النشر + التحسين
ادرس أساسيات Dart و Flutter من main.dart في OscarSnake
افهم StatefulWidget و setState ودورة حياة Widget
تعلم flutter build web وكيف يتحول Dart لـ JavaScript
اربط دومين فرعي جديد عبر Namecheap + Firebase
طبق أفضل الممارسات: فصل الملفات + Git + قواعد أمان
أنشئ مشروع صغير جديد يجمع ما تعلمته
🗺 خريطة التقنيات حسب المشروع
كل مشروع يُعلمك تقنيات مختلفة. إليك ما ستتعلمه من كل واحد:
كل مصطلح تقني مستخدم في مشاريعك بشرح واضح وأمثلة من كودك الفعلي
🔥 Firebase وخدماته
Firebase Firebase
منصة تطوير التطبيقات من Google
خدمة سحابية من Google تجمع في مكان واحد: قاعدة بيانات + مصادقة + استضافة + إشعارات + تحليلات. تعمل كـ Backend كامل بدون الحاجة لخادم خاص.
// مثال من كودك: firebase.initializeApp(firebaseConfig)
Cloud Firestore Firebase
قاعدة البيانات الوثائقية
قاعدة بيانات NoSQL تُخزن البيانات كـ "وثائق" داخل "مجموعات". مثل ملفات JSON منظمة. تدعم الاستماع الفوري (onSnapshot). تستخدمها: oscarsite، connect4، oscarchat، pregnancy، sh-main.
// المسار: collection("topics").doc("abc123")
Realtime Database Firebase
قاعدة البيانات الفورية
قاعدة بيانات JSON بسيطة تُزامن البيانات فورياً. أسرع من Firestore للألعاب. يستخدمها فقط: oscarfarmer. الفرق الرئيسي: Firestore للبيانات المعقدة، Realtime للبيانات الفورية البسيطة.
// المسار: ref("farms/" + farmCode + "/tiles")
Firebase Auth Firebase
نظام المصادقة والتحقق من الهوية
خدمة تدير تسجيل الدخول بطرق متعددة: إيميل/كلمة مرور، Google، مجهول (Anonymous). تعطي كل مستخدم UID فريداً يُستخدم في Security Rules لحماية البيانات.
// auth.currentUser.uid — المعرّف الفريد للمستخدم
onSnapshot Firebase
المستمع الفوري للبيانات
دالة Firestore تفتح "قناة مباشرة" مع قاعدة البيانات. أي تغيير يحدث في Firebase يصل للمتصفح فوراً بدون تحديث. هذا هو سر "الفورية" في connect4 و pregnancy و oscarchat.
قواعد تحدد من يحق له قراءة وكتابة البيانات. تُكتب في Firebase Console وتُطبق على الخادم. إذا كانت خاطئة: إما أن البيانات مفتوحة للجميع (خطر) أو مغلقة حتى عن المستخدمين الشرعيين (مشكلة).
// allow read: if request.auth != null;
Cloud Functions Firebase
دوال الخادم السحابي
كود JavaScript يعمل على خوادم Google (ليس في المتصفح). يُستخدم لإخفاء مفاتيح API السرية، إرسال إشعارات، معالجة بيانات. موجود في oscarchat لكن فارغ حالياً.
Firebase يُنشئ حساباً مؤقتاً بدون بريد أو كلمة مرور. يُعطي المستخدم UID كالعادة لاستخدامه في Security Rules. يستخدمها oscarfarmer ليتيح اللعب الفوري بدون تسجيل.
// signInAnonymously(auth) — يُنشئ uid مؤقتاً
FCM / VAPID Key Firebase
مفتاح الإشعارات الفورية
Firebase Cloud Messaging هو نظام إرسال إشعارات Push للمتصفح والجوال. VAPID Key مفتاح تشفير خاص يُثبت أن الإشعار قادم من تطبيقك. oscarchat يحتاجه لكنه غير مُعَدّ بعد.
// getToken(messaging, {vapidKey: "BNJ..."}) في firebase-messaging-sw.js
🌐 تقنيات الويب
PWA ويب
تطبيق ويب تقدمي (Progressive Web App)
موقع ويب يتصرف كتطبيق جوال: قابل للتثبيت على الشاشة الرئيسية، يعمل offline، له أيقونة وشاشة ترحيب. يتطلب: manifest.json + Service Worker + HTTPS. لديك 4 مشاريع PWA.
// manifest.json يحدد اسم التطبيق، الأيقونة، وألوان السبلاش
Service Worker ويب
العامل الخلفي للمتصفح
ملف JavaScript يعمل في خلفية المتصفح منفصلاً عن الصفحة. يعترض طلبات الشبكة ويُقرر: هل يجلب من الإنترنت أم من الكاش؟ هذا ما يجعل التطبيق يعمل offline.
// sw.js: const CACHE = 'oscar-v6'; — رقم الإصدار للتحديث
SPA ويب
تطبيق صفحة واحدة (Single Page Application)
موقع كامل في ملف HTML واحد. التنقل بين "الصفحات" يتم بإخفاء وإظهار أقسام HTML بدون إعادة تحميل الصفحة. جميع مشاريعك تتبع هذا النمط. مثال: الـ tabs في الداشبورد هذا.
// showSection('connect4') — إظهار/إخفاء div بـ display: none
Vanilla JS ويب
جافاسكريبت الخام بدون أُطر عمل
كتابة JavaScript مباشرة بدون React أو Vue أو Angular. جميع مشاريعك (عدا OscarSnake) تستخدم Vanilla JS. ميزته: لا يحتاج بناء، يُرفع مباشرة. عيبه: يصعب إدارته في المشاريع الكبيرة.
تقنية HTML5 تتيح رسم أشكال، صور، ورسوم متحركة مباشرة في المتصفح. oscarfarmer يستخدمها لرسم عالم اللعبة كاملاً (مربعات الأرض، الشخصيات، الحيوانات). OscarSnake يستخدم CanvasKit (Flutter).
// ctx.fillRect(x, y, TILE_SIZE, TILE_SIZE) في game.js
localStorage ويب
التخزين المحلي في المتصفح
مساحة تخزين بسيطة داخل المتصفح (5MB). البيانات تبقى حتى بعد إغلاق المتصفح. sh-main يستخدمه لحفظ سلة التسوق. oscarfarmer يستخدمه للحفظ التلقائي offline.
قاعدة بيانات كاملة داخل المتصفح (مئات MB). أقوى من localStorage، تدعم بيانات معقدة. pregnancy يستخدمها للحفظ الكامل offline عندما لا يوجد إنترنت، ثم تتزامن مع Firebase عند العودة.
// يُستخدم في pregnancy لحفظ بيانات الحمل والمنتدى offline
CDN ويب
شبكة توصيل المحتوى
شبكة خوادم موزعة حول العالم. عند استخدام رابط Tailwind أو Font Awesome من CDN، المستخدم يُحمّل الملف من أقرب خادم إليه. Firebase Hosting نفسه CDN عالمي.
// <link href="https://cdn.tailwindcss.com"> في oscarchat
RTL ويب
الاتجاه من اليمين لليسار
خاصية HTML/CSS للغات العربية. تعكس اتجاه النصوص والعناصر. جميع مشاريعك تستخدمها. يُفعَّل بـ: dir="rtl" في HTML و direction: rtl في CSS.
// <html lang="ar" dir="rtl"> في كل مشاريعك
Base64 ويب
ترميز الملفات كنص
طريقة لتحويل ملفات (صور، صوت) إلى سلسلة نصية يمكن تخزينها في Firestore. oscarchat يحول الصور والصوت إلى Base64 قبل إرسالها. العيب: يزيد الحجم بنسبة 33%.
// canvas.toDataURL('image/jpeg', 0.85) — صورة → Base64
🎮 تقنيات الألعاب والخوارزميات
Negamax لعبة
خوارزمية بحث اللعبة
خوارزمية ذكاء اصطناعي تبحث في جميع الحركات الممكنة وتختار الأفضل. connect4 يستخدمها للمستوى الأسطوري. تبحث بعمق 7 طبقات أمام (7 حركات مستقبلية).
// negamax(board, depth=7, alpha, beta) في index.html
Alpha-Beta Pruning لعبة
تقليم ألفا-بيتا
تحسين لخوارزمية Negamax. يتخطى الفروع التي لن تُغيّر النتيجة. يجعل البحث أسرع بـ 10x مما يُتيح البحث بعمق أعمق في نفس الوقت. ضروري لجعل AI connect4 سريعاً.
// if (score >= beta) return beta; — تخطي الفرع
Transposition Table لعبة
جدول حفظ الأوضاع المُقيَّمة
ذاكرة تُخزن الأوضاع التي قيَّمها AI مسبقاً. إذا وصل لنفس الوضع بطريق مختلف، يستخدم النتيجة المحفوظة بدل إعادة الحساب. يسرّع AI connect4 بشكل كبير.
// const ttable = new Map(); — خريطة: وضع → قيمة
Heartbeat Pattern لعبة
نمط نبضة القلب لكشف الانقطاع
كل لاعب يرسل "نبضة" لقاعدة البيانات كل 8 ثوانٍ. إذا لم تصل نبضة لمدة 25 ثانية، نُعلن أن اللاعب غادر. connect4 يستخدمه لكشف انقطاع خصمك عن الإنترنت.
برنامج تكتب فيه أوامر للتحكم في Firebase من Terminal. أهم الأوامر: firebase deploy (رفع)، firebase login (دخول)، firebase use (اختيار مشروع).
// firebase deploy --only hosting,firestore:rules
Git / GitHub أداة
نظام التحكم بالإصدارات
Git يتتبع التغييرات في الكود ويسمح بالرجوع لأي نقطة. GitHub موقع لحفظ الريبو على الإنترنت. OscarSnake يُستضاف على GitHub Pages (استضافة مجانية من GitHub).
// git add . && git commit -m "رسالة" && git push
Flutter / Dart أداة
إطار تطوير متعدد المنصات
Flutter إطار عمل من Google لبناء تطبيقات للجوال والويب وسطح المكتب من كود واحد. Dart لغة البرمجة الخاصة به. يختلف كلياً عن JavaScript — يحتاج خطوة بناء قبل الرفع.
// flutter build web --release → ينتج build/web/
GitHub Pages أداة
استضافة مجانية من GitHub
خدمة استضافة مجانية لملفات HTML/CSS/JS مباشرة من ريبو GitHub. OscarSnake هو مشروعك الوحيد المستضاف هنا. يختلف عن Firebase Hosting: لا يدعم rewrites أو Cloud Functions.
// ملف CNAME في الريبو يربطه بـ snake.khccn.com
Tailwind CSS أداة
إطار تصميم بالفئات المُعدّة مسبقاً
مكتبة CSS تُوفر آلاف الفئات الجاهزة للتصميم بدل كتابة CSS من الصفر. oscarchat هو مشروعك الوحيد الذي يستخدمه (من CDN). الباقي يستخدم CSS مكتوباً يدوياً.
// class="flex items-center gap-4 p-3 rounded-xl" في oscarchat
🌍 الشبكة والدومينات
DNS / CNAME / A Record شبكة
نظام أسماء النطاقات
DNS يُترجم اسم الدومين (connect4.khccn.com) إلى عنوان IP. CNAME سجل يُوجّه subdomain لدومين آخر. A Record سجل يُوجّه مباشرة لـ IP. Namecheap هو المكان الذي تُضيف فيه هذه السجلات.
// CNAME: snake → ikhaledccn.github.io
HTTPS / SSL أمان
بروتوكول الاتصال الآمن المشفر
تشفير البيانات بين المتصفح والخادم. الرمز 🔒 في شريط العنوان. Firebase Hosting يُضيفه مجاناً تلقائياً. مطلوب لـ PWA و Service Worker و Firebase Auth.
// Firebase Hosting يُصدر شهادة SSL تلقائياً بعد ربط الدومين
CORS أمان
مشاركة الموارد عبر الأصول
حماية المتصفح من طلبات غير مصرح بها بين دومينات مختلفة. إذا ظهر خطأ CORS في oscarsite عند استدعاء OpenRouter API، يعني أن الخادم لا يسمح للدومين بالوصول.
// الحل: Cloud Function تتوسط الطلب بدل إرساله من المتصفح مباشرة
OpenRouter API ويب
بوابة للوصول لنماذج الذكاء الاصطناعي
خدمة توفر وصولاً موحداً لنماذج AI مختلفة (GPT، Llama، Claude...). oscarsite يستخدمها للوصول لـ Llama 3.3 70B مجاناً لمراجعة الأكواد والشات بوت.
المسميات الشائعة في أغلب مشاريع البرمجة (Python، JavaScript، Java، تطبيقات الجوال والمواقع) — احتفظ بهذا كمرجع دائم.
1️⃣ ملفات الجذر (Root Files) — أساس المشروع
.gitignore أداة
ملف استثناءات Git
ملف نصي نخفي فيه أسماء الملفات التي لا نريد رفعها إلى GitHub مثل كلمات المرور أو المجلدات الثقيلة (node_modules).
node_modules/
.env
build/
.env أمان
ملف البيئة (Environment)
نضع فيه المعلومات السرية جداً مثل كلمات المرور وروابط قواعد البيانات ومفاتيح API. هذا الملف لا يُرفع أبداً للإنترنت لحماية المشروع.
API_KEY=your_secret_key
DB_URL=https://...
README.md أداة
واجهة المشروع
ملف نصي نكتب فيه شرحاً للمشروع وكيفية تثبيته واستخدامه ليقرأه المبرمجون الآخرون. يظهر تلقائياً في صفحة GitHub.
## اسم المشروع
وصف مختصر...
## التثبيت: npm install
package.json / requirements.txt أداة
ملف الاعتماديات (Dependencies)
يسجّل المكتبات الخارجية التي يحتاجها المشروع ليعمل. يختلف الاسم حسب اللغة: Node.js/React → package.json | Python → requirements.txt | PHP → composer.json | Java → pom.xml
// package.json في مشاريع Firebase
"dependencies": { "firebase": "^10.0.0" }
2️⃣ مجلدات الأكواد الأساسية (Source & Logic)
src / source ويب
مجلد المصدر
هو المجلد الأهم في أي مشروع. يحتوي على الكود البرمجي الأساسي الذي تكتبه بيدك. كل الأكواد الرئيسية تُوضع هنا.
src/
├── main.js
└── app.html
lib / core ويب
مجلد المكتبات الأساسية
نضع فيه الأكواد أو الأدوات الأساسية والمشتركة التي يعتمد عليها برنامجك وتعمل في الخلفية.
lib/
├── firebase.js
└── auth.js
utils / helpers ويب
مجلد الأدوات المساعدة
يحتوي على دوال (Functions) صغيرة نستخدمها بكثرة في أكثر من مكان مثل كود يحسب التاريخ أو كود ينظم شكل الأرقام.
utils/
├── formatDate.js
└── calcScore.js
components ويب
مجلد المكونات
يستخدم بكثرة في واجهات المستخدم (UI). فيه يتم تقسيم الواجهة إلى قطع صغيرة مثل: زر، بطاقة، قائمة علوية لإعادة استخدامها.
4️⃣ مجلدات قواعد البيانات والاتصال (Backend & Data)
api / services Firebase
مجلد الخدمات
يحتوي على الأكواد المسؤولة عن الاتصال بالإنترنت أو جلب البيانات من الخوادم (Servers). في Firebase يُسمى أحياناً functions/.
api/
├── firestore.js
└── auth.js
config / settings أداة
مجلد الإعدادات
يحتوي على ملفات ضبط المشروع مثل إعدادات الاتصال بقاعدة البيانات أو إعدادات اللغات. في Firebase: firebase.json و .firebaserc.
config/
├── firebase.js
└── constants.js
models Firebase
مجلد النماذج
يحتوي على شكل هيكل البيانات. مثلاً: نموذج "المستخدم" يحتوي على اسم، عمر، وبريد إلكتروني. في Firestore يُمثّل هيكل المجموعات والوثائق.
// نموذج مستخدم في Firestore
{ uid, name, email, role }
controllers ويب
مجلد المتحكمات
العقل المدبر الذي يربط بين شكل البيانات (models) والواجهة (views). يستقبل طلب المستخدم وينفذه. في مشاريعك يُكتب مدمجاً داخل HTML مع JavaScript.
controllers/
└── gameController.js
5️⃣ مجلدات البناء والاختبار (Build & Testing)
tests / __tests__ أداة
مجلد الاختبارات
يحتوي على أكواد وهمية تقوم بتجربة برنامجك تلقائياً للتأكد من أنه يعمل بشكل صحيح قبل نشره.
tests/
└── game.test.js
build / dist / out أداة
مجلد المخرجات النهائية
عندما تطلب من النظام "تجهيز" المشروع للنشر النهائي، يضغط كل أكوادك ويضعها هنا ليكون جاهزاً للرفع. في Flutter: build/web/
// في OscarSnake:
flutter build web → build/web/
docs أداة
مجلد التوثيق
يحتوي على ملفات تشرح تفاصيل المشروع العميقة للمطورين الآخرين الذين سيعملون معك مستقبلاً.
docs/
├── api.md
└── setup.md
🔒
قواعد الأمان — Security Rules
شرح مفصل لقواعد أمان كل مشروع مع تفسير كل سطر
🧠 ما هي Security Rules وكيف تعمل؟
قواعد الأمان هي "حارس البوابة" لقاعدة بياناتك. كل طلب قراءة/كتابة يمر عليها قبل التنفيذ. تُكتب في Firebase Console وتعمل على الخادم — المستخدم لا يستطيع التحايل عليها حتى لو عدّل الكود في متصفحه.
⚠️
قاعدة ذهبية: إذا لم يكن هناك قاعدة تسمح بشيء، فهو ممنوع تلقائياً. Firebase يرفض كل ما ليس مسموحاً صراحةً.
🤰 قواعد pregnancy (وسن) — الأكثر تفصيلاً
هذه القواعد تحمي: بيانات الحمل الخاصة + المنتدى + الإشعارات + نظام الأدوار.
1. دوال المساعدة (Helper Functions)
functionisAuthed() { return request.auth != null; }
// هل المستخدم مسجل دخوله؟ (بأي طريقة: إيميل أو Google)functionisSelf(userId) {
returnisAuthed() && request.auth.uid == userId;
}
// هل معرّف المستخدم الحالي = userId المطلوب؟ (يحمي بيانات كل شخص عن الآخر)functionisAdmin() {
returnisAdminEmail()
|| (isAuthed()
&& get(/profiles/$(request.auth.uid)).data.role == 'admin');
}
// المدير = إما بريد admin@wsn.khccn.com أو من حُدِّد دوره admin في Firestore
لماذا دوال مساعدة؟ لتجنب تكرار نفس الكود في كل قاعدة. بدلاً من كتابة request.auth != null في كل مكان، تكتب isAuthed().
2. قواعد المجموعات الرئيسية
// بيانات الحمل الخاصة — فقط صاحبها يقرأ ويكتبmatch /users/{userId} {
allow read, write: ifisSelf(userId);
}
// الملفات الشخصية — أي عضو يقرأ، لكن الكتابة محدودةmatch /profiles/{userId} {
allow read: ifisAuthed();
allow create: ifisSelf(userId) && (request.resource.data.role == 'user' || isAdmin());
allow update: if (isSelf(userId) && request.resource.data.role == resource.data.role) || isAdmin();
allow delete: ifisAdmin();
}
profiles القاعدة الذكية:
• القراءة: أي عضو مسجل يقرأ (لعرض أسماء الكتّاب في المنتدى)
• الإنشاء: الشخص ينشئ ملفه فقط، ولا يستطيع تعيين نفسه admin
• التحديث: يغيّر اسمه فقط بدون رفع دوره، أو المدير يغيّر أي شيء
• الحذف: المدير فقط
3. قواعد المنتدى (topics + replies)
match /topics/{topicId} {
allow read: ifisAuthed();
allow create: ifisAuthed()
&& request.resource.data.authorId == request.auth.uid // UID صحيح
&& request.resource.data.title.size() > 0
&& request.resource.data.title.size() <= 200; // حد الطول// أي مسجل يزيد عدادات المشاهدات والردود فقطallow update: ifisAuthed() && (
(resource.data.authorId == request.auth.uid && ...)
|| isAdmin()
|| request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['viewCount','replyCount','lastReplyAt'])
);
}
القيد الذكي في update: المستخدم العادي يستطيع فقط تحديث viewCount وreplyCount وlastReplyAt. هذا يمنع أي شخص من تغيير محتوى موضوع شخص آخر، لكن يسمح بتحديث العدادات تلقائياً.
🎮 قواعد connect4 — بسيطة ومرنة
match /games/{gameId} {
allow read: iftrue; // أي شخص يقرأ (مطلوب للانضمام بالكود)allow create: if
request.resource.data.keys().hasAll(['board', 'turn', 'status', 'moves'])
&& request.resource.data.status in ['waiting', 'playing']
&& gameId.size() >= 4 && gameId.size() <= 8// طول الكود 4-8
&& request.resource.data.moves == 0; // لا حركات عند البدايةallow update: if
request.resource.data.diff(resource.data).affectedKeys()
.hasOnly(['board','turn','status','winner',
'lastMove','moves','emoji','chat','lastSeen'])
&& (resource.data.status in ['waiting','playing','finished'])
&& request.resource.data.moves >= resource.data.moves; // لا تراجع في الحركات
}
استراتيجية connect4: القراءة مفتوحة للجميع (بدون مصادقة) لأن اللعبة لا تتطلب حساباً. الحماية تأتي من التحقق من البيانات نفسها: كود الغرفة بطول محدد، عدد الحركات لا ينقص، الحقول المسموح تعديلها محددة.
🌾 قواعد oscarfarmer — Realtime Database
تختلف عن Firestore: تستخدم JSON مباشرة بدلاً من rules_version = '2'
{
"rules": {
"farms": {
"$code": {
".read": true, // أي شخص يقرأ المزرعة (للزوار)
".write": "auth != null", // يكتب فقط المسجلون
"chat": {
"$mid": {
".write": "auth != null",
".validate": "newData.hasChildren(['author','text','time'])"
// رسالة الدردشة يجب أن تحتوي هذه الحقول الثلاثة
}
}
}
},
"leaderboard": {
".read": true,
"$code": { ".write": "auth != null" }
}
}
}
ملاحظة مهمة: قواعد oscarfarmer بسيطة — أي مستخدم مسجل (حتى Anonymous) يكتب. الحماية الحقيقية تأتي من منطق التطبيق في game.js (الـ IIFE) وليس من القواعد. هذا مقبول للألعاب لكن ليس للبيانات الحساسة.
💬 قواعد oscarchat — أبسط قاعدة
match /{document=**} {
allow read, write: if request.auth != null;
}
المعنى: أي مستخدم مسجل (بالإيميل) يقرأ ويكتب أي شيء. هذا كافٍ لأن oscarchat يتطلب تسجيل دخول للوصول. التحسين المقترح: إضافة قيود أكثر (مثل: المستخدم يكتب فقط في محادثاته) للأمان الأفضل.
📋 مقارنة قواعد جميع المشاريع
المشروع
نوع القواعد
المصادقة المطلوبة
مستوى الأمان
pregnancy
Firestore Rules v2
Email + Google
عالي جداً ✅
connect4
Firestore Rules v2
لا يوجد
مناسب للعبة ✅
oscarchat
Firestore Rules v2
Email
متوسط ⚠️
oscarfarmer
Realtime DB Rules
Anonymous
مقبول للعبة ⚠️
oscarsite
Firestore Rules v2
Email + Anonymous
جيد ✅
sh-main
Firestore Rules v2
Email (Admin)
يحتاج مراجعة ⚠️
💡
مقترحات التطوير المستقبلية
أفكار مدروسة لتطوير مشاريعك — كل مقترح مع خطوات تنفيذه التفصيلية
📌
كيف تستخدم هذا القسم: هذه المقترحات مرتبة حسب الأولوية. لا تُنفّذ أي مقترح قبل أن تفهم المشروع المرتبط به جيداً. اقرأ الخطوات وناقشها مع Claude قبل البدء.
🔴 أولوية عالية — مشاكل يجب حلها
🔑
نقل مفتاح OpenRouter لـ Cloud Function
مفتاح AI في oscarsite ظاهر في الكود المصدري — أي شخص يفتح DevTools يراه ويستخدمه. نقله لـ Cloud Function يخفيه تماماً.
افتح مجلد oscarsite/functions/ وأنشئ index.js
اكتب Cloud Function تستقبل النص وترسله لـ OpenRouter
احفظ المفتاح في Firebase Environment Variables
عدّل oscarsite/index.html ليستدعي Function بدل OpenRouter مباشرة
انشر: firebase deploy --only functions
📦
إضافة Git لجميع المشاريع
حالياً لا يوجد Git في معظم مشاريعك. بدونه إذا حذفت ملفاً بالخطأ أو أفسدت الكود لا يمكن الرجوع لنسخة سابقة.