ecodata-saudi

🚀 دليل نشر صندوق البيئة مجاناً (Free Deployment Guide)

نشر التطبيق Full-Stack مجانياً عبر MongoDB Atlas + Render + Vercel — كل الخدمات مجانية ولا تحتاج بطاقة ائتمان.

---

📋 ما تحتاجه قبل البدء

1. حساب على GitHub (مجاني) — لرفع الكود
2. حساب على MongoDB Atlas (مجاني) — لقاعدة البيانات
3. حساب على Render (مجاني) — للـ Backend
4. حساب على Vercel (مجاني) — للـ Frontend

---

1️⃣ MongoDB Atlas — قاعدة البيانات (5 دقائق)

1. ادخل: https://www.mongodb.com/cloud/atlas/register
2. أنشئ حساباً (يكفي بريد إلكتروني)
3. اضغط Build a Database → اختر M0 FREE
4. اختر مزوّد (AWS) ومنطقة قريبة (مثلاً eu-west-1 أيرلندا)
5. اضغط Create Cluster (يأخذ ~3 دقائق)
6. Database Access: أضف مستخدماً جديداً (مثلاً ecoadmin / كلمة مرور قوية) — احفظها!
7. Network Access: اضغط Add IP Address → اختر Allow Access from Anywhere (0.0.0.0/0)
8. Connect → Drivers → انسخ رابط الاتصال (Connection String):

   mongodb+srv://ecoadmin:<password>@cluster0.xxxxx.mongodb.net/?retryWrites=true&w=majority
   

9. ضع كلمة المرور بدل <password> — هذا هو MONGO_URL

---

2️⃣ ارفع الكود على GitHub

من داخل Emergent:

1. اضغط زر GitHub في الأعلى → Connect GitHub → امنح الصلاحيات
2. اختر اسم المستودع (مثلاً ecodata-saudi) → Save to GitHub
3. ستجد الكود الآن على: https://github.com/USERNAME/ecodata-saudi

---

3️⃣ Render — نشر Backend (10 دقائق)

1. ادخل: https://render.com → Sign in with GitHub
2. اضغط New + → Web Service
3. اربط المستودع ecodata-saudi
4. املأ الحقول:
   • Name: ecodata-backend
   • Region: قريبة منك (مثلاً Frankfurt)
   • Branch: main
   • Root Directory: backend
   • Runtime: Python 3
   • Build Command: pip install -r requirements.txt
   • Start Command: uvicorn server:app --host 0.0.0.0 --port $PORT
   • Instance Type: Free

5. Environment Variables — أضف: | المفتاح | القيمة | |———|——–| | MONGO_URL | رابط Atlas من الخطوة 1 | | DB_NAME | ecodata_saudi | | JWT_SECRET | سلسلة عشوائية طويلة (64 حرف) — استخدم: https://generate-random.org/api-token-generator | | ADMIN_EMAIL | admin@bef.gov.sa | | ADMIN_PASSWORD | اختر كلمة مرور قوية | | CORS_ORIGINS | * (مؤقتاً، نُحدّثها بعد نشر Frontend) |

6. اضغط Create Web Service
7. انتظر حتى يكتمل النشر (~5 دقائق) — ستحصل على رابط مثل:

   https://ecodata-backend.onrender.com
   

8. اختبر بفتح: https://ecodata-backend.onrender.com/api/programs — يجب أن يرد JSON.

⚠️ ملاحظة: Render Free تنام الخدمة بعد 15 دقيقة عدم استخدام، وتستيقظ في 30-60 ثانية عند أول طلب.

---

4️⃣ Vercel — نشر Frontend (5 دقائق)

1. ادخل: https://vercel.com → Sign up with GitHub
2. اضغط Add New → Project
3. اختر المستودع ecodata-saudi → Import
4. املأ الإعدادات:
   • Framework Preset: Create React App
   • Root Directory: اضغط Edit → اختر frontend
   • Build Command: yarn build (افتراضي)
   • Output Directory: build
   • Install Command: yarn install

5. Environment Variables — أضف: | المفتاح | القيمة | |———|——–| | REACT_APP_BACKEND_URL | https://ecodata-backend.onrender.com (رابطك من Render) |

6. اضغط Deploy — يأخذ ~2 دقيقة
7. ستحصل على رابطك المجاني الدائم:

   https://ecodata-saudi.vercel.app
   

---

5️⃣ تحديث CORS للأمان (دقيقة)

ارجع لـ Render → خدمتك → Environment → عدّل:

• CORS_ORIGINS = https://ecodata-saudi.vercel.app (رابطك من Vercel)

اضغط Save Changes → سيُعاد التشغيل تلقائياً.

---

✅ تم! شارك الرابط

https://ecodata-saudi.vercel.app

افتحه على الجوال، الكمبيوتر، شاركه مع أي شخص — الكل يستخدم نفس قاعدة البيانات الحقيقية.

حسابات للتجربة:

• أدمن: admin@bef.gov.sa / ADMIN_PASSWORD اللي حددتها في Render
• مستخدم عام: أي شخص يقدر يسجّل من زر “حساب جديد”

---

🔧 حل المشاكل الشائعة

“Network Error” عند تسجيل الدخول

• تأكد أن CORS_ORIGINS في Render = رابط Vercel بالضبط (بدون / في النهاية).
• تأكد أن REACT_APP_BACKEND_URL في Vercel صحيح (بدون /api).

الـBackend يأخذ وقت في الاستجابة

• طبيعي مع Render Free بعد فترة خمول. للتسريع: استخدم خدمة مجانية تُبقيه مستيقظاً مثل https://uptimerobot.com (تطلب الـAPI كل 5 دقائق).

“MongoServerError: bad auth”

• تأكد من استبدال <password> بكلمة المرور الفعلية في MONGO_URL.
• تأكد من تفعيل 0.0.0.0/0 في Network Access في Atlas.

غيّر admin password

• في Render → Environment → عدّل ADMIN_PASSWORD → Save — التطبيق يعيد تهيئة كلمة مرور الأدمن تلقائياً عند التشغيل.

---

💡 ميزات هذا الإعداد

• مجاني 100% — بدون بطاقة
• قاعدة بيانات حقيقية — 512MB في Atlas
• Auto-deploy — كل git push ينشر تلقائياً على Render و Vercel
• HTTPS مجاني — على كل الروابط
• دومين مخصص — تقدر تربط دومينك الخاص لاحقاً (Vercel و Render يدعمونه مجاناً)

---

موفقين! 🌿