قاموس المطور: مصطلحات تخيفك… حتى تعرفها

أنت تدخل مبنى → الحارس يتحقق من هويتك → يعطيك بطاقة دخول
في اليوم التالي → تُري البطاقة فقط → لا تحتاج إثبات هوية من جديد

المستخدم يُدخل بريده وكلمته → السيرفر يتحقق → يُعطيه JWT
في كل طلب تالٍ → يُرسل المستخدم الـ JWT معه → السيرفر يُصدّق عليه

eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyMTIzIn0.SflKxwRJSMeKKF2QT4fwpMeJf36
      ↑                      ↑                          ↑
   Header               Payload                    Signature
  (نوع التشفير)        (البيانات)              (التوقيع للتحقق)

{
  "sub": "user_abc123",
  "aud": "my-mobile-app",
  "exp": 1748952000,
  "iat": 1748865600,
  "email": "abdullah@example.com",
  "role": "admin"
}

عبدالله  → uid: 1
محمد     → uid: 2
سارة     → uid: 3

نموذج UUID:
550e8400-e29b-41d4-a716-446655440000

الأرقام التسلسلية:
المستخدم يرى: /users/1, /users/2, /users/3
→ يمكنه تخمين: /users/4 وصولاً لبيانات شخص آخر!

UUID:
المستخدم يرى: /users/550e8400-e29b-41d4-a716-446655440000
→ مستحيل تخمين UUID آخر

أنت في مطعم (التطبيق)
القائمة هي الـ API (ما يمكنك طلبه)
المطبخ هو السيرفر (من ينفّذ الطلب)
الجرسون هو HTTP (وسيلة النقل)

// طلب بيانات المستخدم من API
const response = await fetch('https://api.myapp.com/users/123');
const user = await response.json();
// user = { id: 123, name: "عبدالله", email: "..." }

-- اجلب كل المستخدمين
SELECT * FROM users;

-- اجلب مستخدمين أعمارهم فوق ١٨
SELECT name, email FROM users WHERE age > 18;

-- أضف مستخدماً جديداً
INSERT INTO users (name, email) VALUES ('عبدالله', 'a@example.com');

-- حدّث البريد الإلكتروني
UPDATE users SET email = 'new@example.com' WHERE id = 1;

-- احذف مستخدماً
DELETE FROM users WHERE id = 5;

SQL           = اللغة (الإنجليزية)
PostgreSQL    = النظام الذي يفهم هذه اللغة (محرك القواعد)

{
  "dependencies": {
    "react": "^18.2.0",
    "axios": "^1.6.0",
    "supabase": "^2.0.0"
  },
  "devDependencies": {
    "eslint": "^8.0.0",
    "typescript": "^5.0.0"
  }
}

الأسبوع ١: أنشأت جدول users
الأسبوع ٣: أردت إضافة عمود phone_number
→ تعدّل قاعدة البيانات مباشرة
→ زميلك على جهاز آخر لا يعلم بالتغيير
→ مشاكل ومزامنة يدوية مؤلمة

كل تغيير = ملف migration جديد مرقّم

001_create_users.sql        ← إنشاء جدول users
002_add_phone_to_users.sql  ← إضافة عمود phone
003_create_posts.sql        ← إنشاء جدول posts

أي شخص يسحب المشروع يُشغّل: migrate
→ قاعدة بياناته تصبح مطابقة تماماً

ALTER TABLE users
ADD COLUMN phone_number TEXT;

صورة فوتوغرافية:
  المحتوى     = الصورة نفسها (البيانات)
  Metadata    = التاريخ، الكاميرا، الموقع، الحجم، الدقة

مقطع صوتي:
  المحتوى     = الصوت
  Metadata    = الفنان، الألبوم، السنة، المدة، الصنف

ملف في قاعدة البيانات:
  المحتوى     = النص المكتوب
  Metadata    = تاريخ الإنشاء، من كتبه، آخر تعديل، عدد الكلمات

id          → معرّف المقال
content     → محتوى المقال (البيانات)
created_at  → متى أُنشئ    ┐
updated_at  → متى عُدِّل   ├── Metadata
author_id   → من كتبه     │
word_count  → عدد الكلمات ┘

تسأل UX:
- هل المستخدم يجد ما يريده بسهولة؟
- هل تسلسل الخطوات منطقي؟
- هل يعرف دائماً أين هو في التطبيق؟
- هل يحقق هدفه بدون إحباط؟

تسأل UI:
- ما الألوان المستخدمة؟
- ما حجم الأزرار وشكلها؟
- ما الخطوط؟
- أين يقع كل عنصر على الشاشة؟

موقع قبيح لكن سهل الاستخدام = UX جيد + UI سيئ
موقع جميل لكن محيّر = UI جيد + UX سيئ
الهدف: الاثنان معاً ✅

# تثبيت Wrangler
npm install -g wrangler

# تسجيل الدخول
wrangler login

# نشر Worker على Cloudflare
wrangler deploy

# تشغيل محلي للاختبار
wrangler dev

# رفع ملف لـ R2
wrangler r2 object put my-bucket/file.pdf --file ./file.pdf

- صور ومقاطع فيديو
- ملفات PDF والمرفقات
- نسخ احتياطية
- أي ملف لا تريد تخزينه في قاعدة البيانات

S3:
رفع ملف              = مجاني
تحميله من المستخدمين = رسوم على كل GB صادر 💸

R2:
رفع ملف              = مجاني
تحميله من المستخدمين = مجاني تماماً ✅

المشروع يُقسّم إلى:
Issues     ← مهام أو أخطاء محددة
Cycles     ← دورات عمل (مثل Sprint في Agile)
Projects   ← مجموعة Issues مترابطة
Teams      ← فرق العمل المختلفة

SUPABASE_URL=https://xxx.supabase.co
SUPABASE_KEY=eyJhbGciOiJIUzI1...
API_SECRET=super-secret-key-123

Access to fetch blocked by CORS policy

REST:
  /users         ← جميع المستخدمين
  /users/123     ← مستخدم محدد
  /users/123/posts ← منشوراته

GraphQL:
  طلب واحد يُحدد فيه ما تريده بالضبط:
  { user(id: 123) { name, posts { title } } }

{
  "name": "عبدالله",
  "email": "a@example.com",
  "role": "admin"
}

API عادي:  أنت تسأل كل دقيقة "هل وصل دفع جديد؟"
Webhook:   Stripe يرسل لك مباشرةً حين يصل الدفع

Session: السيرفر يحفظ "أنت مسجّل دخول" في قاعدة بياناته
Token (JWT): أنت تحمل "بطاقة تثبت أنك مسجّل" بدون حفظ في السيرفر

بدون Cache: كل طلب → استعلام DB → نتيجة (بطيء)
مع Cache:   أول طلب → استعلام DB → حفظ النتيجة → التالي من Cache (سريع جداً)

// بدون async: الكود لا ينتظر النتيجة
const data = fetch('/api/users');  // data = Promise، ليس البيانات!

// مع async/await: الكود ينتظر حتى تأتي النتيجة
const data = await fetch('/api/users');  // data = البيانات الفعلية ✅

طلب قادم → [Middleware: تحقق من JWT] → [Middleware: سجّل الطلب] → Handler