تخطَّ إلى المحتوى

الـ JSON والـ Env Vars: البيانات اللي تنتقل

الدرس 10 من 20

الهدف

بنهاية الدرس تقدر تقرأ وتكتب JSON بـ JSON.parse وـ JSON.stringify، وعندك MY_API_KEY ينقرا من .env.local في API route ويرجع في response — وما وصل لـ GitHub.

ليش هذا الحين؟

ترى كل شي في الـ web يتكلم JSON — responses من APIs، config files، بيانات بين services. لو ما تعرف تقراه وتكتبه، ما تقدر تتعامل مع أي API بدون مطور. و env vars؟ كل key سرية تكتبها مباشرة في الكود = خطر. GitHub مو مكان للأسرار.

الفكرة

JSON (JavaScript Object Notation) = أكثر لغة بيانات مستخدمة على الإنترنت.

تركيبته بسيطة وايد — ست أنواع بس:

{
  "name": "محمد",
  "age": 32,
  "active": true,
  "score": null,
  "tags": ["founder", "vibe-coder"],
  "address": {
    "city": "الكويت",
    "country": "KW"
  }
}
  • Object: { "key": value } — مجموعة أزواج key-value
  • Array: [item1, item2] — قائمة
  • String: "نص" — دائما بين double quotes
  • Number: 42 أو 3.14
  • Boolean: true أو false
  • Null: null

في JavaScript:

// من JSON string لـ object
const obj = JSON.parse('{"name": "محمد"}')
console.log(obj.name) // "محمد"

// من object لـ JSON string
const json = JSON.stringify({ city: "الكويت" })
console.log(json) // '{"city":"الكويت"}'

Environment Variables = config يتغير بين البيئات.

البيئة مكان الـ config
Development (جهازك) .env.local
Production (Vercel) Project Settings → Env Vars
CI/CD Secrets في GitHub Actions

القاعدة: لو القيمة تتغير بين بيئة وثانية، أو لو هي سر — env var. مو hardcode في الكود.

MY_API_KEY=sk-abc123      ← في .env.local
process.env.MY_API_KEY    ← في الكود

محتاج مساعدة؟ راسلنا على mj@shakesbeard.net