Oscar Projects Dashboard

🚀

نظرة عامة على جميع المشاريع

خريطة شاملة لمشاريعك السبعة مع المقارنة التقنية بينها

oscarsite

Firebase

بورتفوليو شخصي للمطور مع لوحة تحكم CMS وذكاء اصطناعي (مراجعة أكواد + شات بوت) ولعبة ذاكرة تفاعلية ونظام مصادقة كامل

HTML/CSS/JS Firebase Auth Firestore OpenRouter AI

📁 ملفان رئيسيان 🌐 oscar-2ceea AI

connect4

Firebase

لعبة Connect 4 احترافية بثلاثة أوضاع: محلي، ذكاء اصطناعي بأربع مستويات صعوبة (بعمق بحث 7)، وأونلاين مع مزامنة فورية ودردشة سريعة

HTML/CSS/JS Firestore PWA AI (Negamax)

📁 ملف واحد 328KB 🌐 connect4-76a92 Online

oscarchat

Firebase

تطبيق دردشة فورية آمن يدعم الرسائل النصية والصوتية والصور مع نظام إضافة أصدقاء بالكود وإشعارات فورية وتشفير

HTML/Tailwind CSS Firebase Auth Firestore FCM

📁 ملف + Cloud Functions 🌐 oscarchat-e7903 Online

oscarfarmer

Firebase

لعبة مزرعة احترافية متعددة اللاعبين مع 15 محصول و10 حيوانات و24 مهمة ونظام بناء ودردشة وزيارة مزارع الأصدقاء فوريا

HTML/CSS/JS Canvas Realtime DB PWA

📁 JS منفصل 6700 سطر 🌐 oscarfarmer-41961 Online

pregnancy (وسن)

Firebase

تطبيق تتبع حمل شامل بالتقويمين الميلادي والهجري مع منتدى مجتمعي فوري وتتبع صحة يومي وعداد ركلات ونظام إشعارات

HTML/CSS/JS Firebase Auth Firestore PWA

📁 ملف واحد 4300 سطر 🌐 pregnancy-cf335 Forum

sh-main (Pure Design)

Firebase

متجر إلكتروني لتصاميم رقمية (دعوات، بشارات، معايدات) مع لوحة إدارة للمنتجات والطلبات وأداة مجانية لتوليد بطاقات المعايدة

HTML/CSS/JS Firebase Auth Firestore

📁 4 صفحات HTML 🌐 pure-design-de0f7 Store

OscarSnake

GitHub Pages

لعبة الأفعى الكلاسيكية مبنية بـ Flutter/Dart مع واجهة عربية ولوحة متصدرين وتحكم باللمس والكيبورد وقابلة للتثبيت كـ PWA

Flutter/Dart Material Design CanvasKit PWA

📁 main.dart واحد 🌐 GitHub Flutter

📊 جدول المقارنة التقنية الشامل

المشروع	اللغة	الاستضافة	قاعدة البيانات	المصادقة	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/CSS3 Vanilla JavaScript Firebase SDK 10.7.1 OpenRouter AI API

المكون	التقنية	الاستخدام
الواجهة	Vanilla JS + CSS	بدون أي إطار عمل - كود خام مباشر
قاعدة البيانات	Cloud Firestore	تخزين المشاريع والمقالات والإعدادات والمستخدمين
المصادقة	Firebase Auth	تسجيل دخول بالإيميل + وضع مجهول للزوار
الذكاء الاصطناعي	OpenRouter API	مراجعة أكواد (3 طلبات/يوم) + شات بوت (5 طلبات/يوم)
نموذج AI	Llama 3.3 70B	نموذج مجاني مع fallback لنماذج أخرى
الخطوط	Tajawal + Syne + Space Mono	عربي + عناوين إنجليزية + كود
الأيقونات	Font Awesome 6.5.2	أيقونات الواجهة

📄 وظيفة كل ملف وارتباطه

الملف	الوظيفة	يعتمد على
index.html	الصفحة الرئيسية: عرض المشاريع والمقالات، مراجعة أكواد 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

// مجموعات قاعدة البيانات في oscarsite

settings    -> اسم الموقع، النبذة، روابط التواصل
projects    -> المشاريع (عنوان، وصف، رابط، صورة)
posts       -> المقالات (عنوان، محتوى، تاريخ)
permissions -> صلاحيات المميزات (إظهار/إخفاء كل قسم)
users       -> بيانات المستخدمين المسجلين
aiUsage     -> تتبع استهلاك طلبات AI اليومية لكل جهاز
    

🎲

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: يقطع فروع البحث غير المفيدة لتسريع القرار
Opening Book: حركات افتتاحية مُعدة مسبقا للحركة 1-2
Transposition Table: يحفظ الأوضاع المُقيمة سابقا لتجنب التكرار

💬

oscarchat - تطبيق الدردشة الفورية

دردشة آمنة فورية مع رسائل نصية وصوتية وصور وإشعارات

📂 هيكل الملفات

oscarchat/ ├── index.html -- التطبيق الكامل (940 سطر) SPA ├── sw.js -- Service Worker (تخزين مؤقت) ├── firebase-messaging-sw.js -- إشعارات Firebase في الخلفية ├── manifest.json -- إعدادات PWA ├── firebase.json -- إعدادات الاستضافة + Functions ├── .firebaserc -- معرف المشروع: oscarchat-e7903 └── functions/ -- Cloud Functions (جاهز لكن فارغ) ├── package.json -- تبعيات Node.js └── index.js -- ملف الدوال (placeholder)

💬 كيف تعمل الدردشة الفورية

إنشاء حساب وكود صداقة

كل مستخدم يحصل على كود رقمي فريد من 5 أرقام يُشاركه مع أصدقائه (بدلا من رقم الجوال)

إضافة صديق

أدخل كود صديقك -> يُرسل طلب صداقة -> الطرف الآخر يقبل أو يرفض

بدء المحادثة

Chat ID = ترتيب أبجدي لـ UID الطرفين مدموجين (مثال: abc123_xyz789)

إرسال الرسائل فوريا

كل رسالة تُخزن في messages_{chatId} وتظهر فورا عند الطرفين عبر onSnapshot

🎤 أنواع الرسائل المدعومة

النوع	الوصف	التقنية
💬 نص	رسائل نصية عادية مع رد على رسالة سابقة	Firestore document
📷 صورة	تُضغط إلى 1200px بجودة 85% JPEG ثم تُحفظ كـ Base64	Canvas compression + Base64
🎙 صوت	تسجيل صوتي عبر MediaRecorder API (MP4 fallback لـ Safari)	MediaRecorder + Base64 blob

🔔 نظام الحالات والإشعارات

حالة الاتصال: يتم تحديث حالة Online/Offline في مجلد userDirectory فوريا
مؤشر الكتابة: عندما يكتب المستخدم يُعين typing: true في وثيقة جهة الاتصال (تنتهي بعد 1.5 ثانية)
إشعارات صوتية: صوت عند وصول رسالة جديدة
Push Notifications: إشعارات المتصفح عبر Firebase Cloud Messaging (تحتاج إعداد VAPID Key)

🌱

oscarfarmer - لعبة المزرعة الأونلاين

لعبة مزرعة احترافية متعددة اللاعبين مع عالم غني ومتكامل

📂 هيكل الملفات

oscarfarmer/ ├── index.html -- واجهة HTML (قوائم، شاشات، HUD) ├── css/ │ └── styles.css -- التصميم كامل (331 سطر) CSS Variables ├── js/ │ ├── firebase-config.js -- إعدادات Firebase (يُحمل أولا) │ └── game.js -- كل منطق اللعبة (6,700+ سطر) ├── docs/ │ └── firebase-rules.json -- قواعد أمان Realtime Database ├── sw.js -- Service Worker v4 (تخزين للعمل offline) ├── manifest.json -- إعدادات PWA (تثبيت كتطبيق) ├── icon-192.png -- أيقونة Android ├── icon-512.png -- أيقونة Splash Screen ├── firebase.json -- إعدادات Hosting + DB rules └── .firebaserc -- معرف المشروع: oscarfarmer-41961

✅

هذا المشروع الوحيد الذي يفصل الكود إلى ملفات منظمة (HTML + CSS + JS). هذا هو النمط الأفضل والأسهل في الصيانة!

🌱 محتوى اللعبة

🌽 الزراعة

15 محصول (قمح، جزر، بطاطس، طماطم...) + 6 أشجار فاكهة + دورة: حرث > زراعة > سقي > انتظار > حصاد

🐮 الحيوانات

10 حيوانات أليفة (دجاج، بقر، حصان، نحل...) + 7 مفترسات (ثعلب، ذئب...) + 4 حراس (كلب، صقر...)

🏗 البناء

10 مباني (سياج، بئر، حظيرة، دفيئة، سوق...) مع تأثيرات خاصة (طاحونة +20 ذهب/يوم)

📜 المهام

24 مهمة عبر 5 فصول قصة + نظام مستشار ذكي يقدم نصائح حسب المستوى

🌐 كيف يعمل الأونلاين (Multiplayer)

وضع المضيف: المزارع يبث حالة مزرعته إلى farms/{farmCode} كل 60 ثانية
وضع الزائر: الزائر يحمل مزرعة المضيف ويرسل موقعه فوريا
صلاحيات: المضيف يتحكم بما يمكن للزائر فعله (حرث، سقي، زراعة، حصاد، صيد...)
دردشة: رسائل فورية داخل المزرعة
لوحة المتصدرين: أغنى 5 مزارع بالذهب
Fallback: إذا انقطع الإنترنت يُحفظ في localStorage ويتزامن عند العودة

⚠

ملاحظة مهمة: هذا المشروع الوحيد الذي يستخدم Realtime Database بدلا من Firestore. السبب: سرعة المزامنة أعلى للألعاب الفورية.

🤰

pregnancy (وسن) - تطبيق تتبع الحمل

دليل شامل للحمل مع منتدى مجتمعي وتتبع صحة يومي

📂 هيكل الملفات

pregnancy/ ├── public/ -- مجلد الاستضافة │ ├── index.html -- التطبيق الكامل (4,300+ سطر) SPA │ ├── wasanlogo.png -- شعار التطبيق │ ├── wasanfav.png -- أيقونة المتصفح والـ PWA │ └── mawthoq.png -- شهادة الموثوقية ├── firebase.json -- إعدادات Firebase Hosting ├── .firebaserc -- معرف المشروع: pregnancy-cf335 └── README.md -- توثيق بالعربية

📄 صفحات التطبيق الست

الصفحة	الوظيفة	المميزات
🏠 الرئيسية	عرض الأسبوع الحالي والعد التنازلي	تاريخ الولادة (ميلادي + هجري) + حجم الجنين + تطورات الأسبوع
📅 الأسابيع	شبكة 40 أسبوع مقسمة بالأثلاث	ملاحظات لكل أسبوع + معلومات تفصيلية
📆 التقويم	عرض شهري مع المواعيد	تحديد مواعيد الطبيب + تمييز تاريخ الولادة
💊 الصحة	تتبع يومي شامل	ماء + فيتامينات + مشي + نوم + وزن + عداد ركلات + عداد انقباضات
📚 المعلومات	قاعدة بيانات طبية	أعراض + علامات خطر + أطعمة آمنة/غير آمنة + تمارين + قائمة تحقق
💬 المنتدى	مجتمع نقاش فوري	مواضيع + ردود + اقتباس + إشعارات + إبلاغ + إشراف + حفظ

💬 كيف يعمل المنتدى

إنشاء موضوع: عنوان (200 حرف) + محتوى (5000 حرف) + صورة اختيارية -> يُخزن في topics/{topicId}
الردود: subcollection في topics/{topicId}/replies/ مع إمكانية اقتباس رد سابق
الإشعارات: إشعار لصاحب الموضوع عند الرد + إشعار للمقتبس منه
الإشراف: لوحة إدارة (تثبيت/حذف مواضيع) + نظام بلاغات بأسباب
الأدوار: user (عادي) / leader (مشرف) / admin (مدير كامل)
المزامنة: onSnapshot يُحدث المواضيع فوريا لجميع المستخدمين المتصلين

🔢 التقويم الهجري

💡

ميزة فريدة: التطبيق يحسب تاريخ الولادة المتوقع بالتقويمين الميلادي والهجري باستخدام دوال تحويل مخصصة مبنية داخل الكود (بدون مكتبات خارجية).

🛒

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 --version
npm --version
          

تثبيت Firebase CLI

npm install -g firebase-tools

تسجيل الدخول لـ Firebase

firebase login
# سيفتح المتصفح لتسجيل الدخول بحساب Google
          

تثبيت Git

حمل من git-scm.com (مطلوب لـ OscarSnake فقط)

تثبيت Flutter (لـ OscarSnake فقط)

حمل من flutter.dev وأضفه لـ PATH

flutter --version
flutter doctor
          

🔥 رفع مشاريع Firebase (6 مشاريع)

💡

الأوامر متطابقة لجميع مشاريع Firebase الستة. الفرق فقط هو المجلد الذي تفتح منه Terminal.

# === رفع oscarsite ===
cd C:\Users\khccn\Desktop\kh\ONLINE\oscarsite
firebase deploy

# === رفع connect4 ===
cd C:\Users\khccn\Desktop\kh\ONLINE\connect4
firebase deploy

# === رفع oscarchat ===
cd C:\Users\khccn\Desktop\kh\ONLINE\oscarchat
firebase deploy

# === رفع oscarfarmer ===
cd C:\Users\khccn\Desktop\kh\ONLINE\oscarfarmer
firebase deploy

# === رفع pregnancy ===
cd C:\Users\khccn\Desktop\kh\ONLINE\pregnancy
firebase deploy

# === رفع sh-main ===
cd C:\Users\khccn\Desktop\kh\ONLINE\sh-main
firebase deploy
    

أوامر رفع جزئي:

# رفع الاستضافة فقط (بدون قواعد DB)
firebase deploy --only hosting

# رفع قواعد قاعدة البيانات فقط (oscarfarmer)
firebase deploy --only database

# رفع Cloud Functions فقط (oscarchat)
firebase deploy --only functions

# رفع كل شيء
firebase deploy
    

🐙 رفع OscarSnake على GitHub Pages

# 1. ادخل مجلد المشروع
cd C:\Users\khccn\Desktop\kh\flutterprojects\OscarSnake

# 2. ابنِ نسخة الويب
flutter build web --release

# 3. انسخ المخرجات أو ارفع مباشرة
# الملفات الجاهزة موجودة في: build/web/

# 4. ارفع التغييرات لـ GitHub
git add .
git commit -m "update build"
git push
    

⚠

مهم: تأكد أن إعدادات GitHub Pages في الريبو تشير إلى المجلد الصحيح (root أو /docs أو gh-pages branch)

🌐 ربط الدومين (Namecheap + Firebase)

Firebase Console: إضافة دومين مخصص

افتح Firebase Console > Hosting > Add custom domain وأدخل الدومين المطلوب مثل connect4.khccn.com

Firebase يعطيك سجلات DNS

سيعطيك سجل TXT للتحقق + سجلات A records (عادة عنوانين IP)

Namecheap: أضف سجلات DNS

ادخل Namecheap > Domain List > Manage > Advanced DNS وأضف:

# للتحقق من الملكية:
Type: TXT    Host: _acme-challenge.connect4    Value: [القيمة من Firebase]

# لتوجيه الدومين:
Type: A      Host: connect4                   Value: 151.101.1.195
Type: A      Host: connect4                   Value: 151.101.65.195
          

انتظر انتشار DNS (5 دقائق - 48 ساعة)

Firebase سيُصدر شهادة SSL تلقائيا بعد التحقق

ربط GitHub Pages بـ Subdomain:

في الريبو: أنشئ ملف CNAME

ملف باسم CNAME في جذر الريبو يحتوي فقط على: snake.khccn.com

في Namecheap: أضف سجل CNAME

Type: CNAME Host: snake Value: username.github.io

🔄 تحديث 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)
    

🚧

المشاكل المتوقعة والحلول

أكثر المشاكل شيوعا وكيف تتعامل معها

🔴 "firebase: command not found" عند محاولة الرفع ▼

السبب: Firebase CLI غير مثبت أو غير مُضاف لـ PATH

# الحل: أعد التثبيت
npm install -g firebase-tools

# تأكد من التثبيت:
firebase --version
      

🔴 "Error: No project active" أو "Firebase project not found" ▼

السبب: أنت في مجلد خاطئ أو ملف .firebaserc مفقود أو تالف

# الحل 1: تأكد أنك في المجلد الصحيح
cd C:\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 + قواعد أمان
أنشئ مشروع صغير جديد يجمع ما تعلمته

🗺 خريطة التقنيات حسب المشروع

كل مشروع يُعلمك تقنيات مختلفة. إليك ما ستتعلمه من كل واحد:

المشروع	ستتعلم منه
oscarsite	API Integration (AI) + Firebase Auth + Admin Panel + Rate Limiting + Device Fingerprinting
connect4	Game AI (Negamax) + Real-time Multiplayer + Heartbeat Detection + PWA + CSS Grid Games
oscarchat	Real-time Chat + Media Handling (Images/Audio) + Friend System + Push Notifications + Tailwind CSS
oscarfarmer	Canvas Rendering + Complex Game State + Visitor Permissions + File Organization + Offline Sync
pregnancy	Complex SPA + Forum System + Hijri Calendar + Health Tracking + IndexedDB + Google Auth
sh-main	E-commerce Basics + Cart System + WhatsApp Integration + Admin CRUD + SEO + Dark/Light Theme
OscarSnake	Flutter/Dart + Cross-platform + Material Design + Build Process + GitHub Pages

📚 مصادر تعلم مقترحة

التقنية	المصدر
HTML/CSS/JS	MDN Web Docs (developer.mozilla.org)
Firebase	firebase.google.com/docs
Flutter	flutter.dev/learn + Dart: dart.dev/guides
Git	learngitbranching.js.org (تفاعلي)
PWA	web.dev/progressive-web-apps
Canvas API	developer.mozilla.org/en-US/docs/Web/API/Canvas_API