YOU HACKED
BACKEND / FRONTEND / HOSTING

وش يصير خلف الشاشة؟

كل مرة تفتح موقع وتضغط زر، فيه رحلة كاملة تصير خلف الكواليس بأجزاء من الثانية. هذي الصفحة تشرحها — بمثال حقيقي شغال، ومشاكل حقيقية واجهتها فعلاً.

أنت تضغط الزر
الباك إند يعالج الطلب
قاعدة البيانات يجيب الجواب
اضغط الزر عشان تشوف الرحلة كاملة
guest@tarteelfm — bash
اضغط أي أمر بالأعلى...
01 — المفاهيم

موقعين بموقع وحد

أي موقع فعليًا مكوّن من جزئين منفصلين، يشتغلون مع بعض بس كل وحد له شغلة مختلفة تمامًا.

FRONTEND

الواجهة

كل شي تشوفه وتلمسه: الألوان، الأزرار، الخط. يشتغل داخل متصفحك أنت، على جهازك.

  • HTML — الهيكل
  • CSS — الشكل والألوان
  • JavaScript — الحركة والتفاعل
BACKEND

الباك إند

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

  • Python / Node.js — منطق المعالجة
  • MySQL — تخزين البيانات
  • API — لغة التفاهم بين الطرفين
02 — الاستضافة

وين يعيش كل هذا؟

"الاستضافة" (Hosting) يعني إنك تأجّر جهاز كمبيوتر شغال 24 ساعة بمركز بيانات، عشان الباك إند وقاعدة البيانات يبقون شغالين حتى وانت نايم.

STEP 1 سيرفر (VPS)
STEP 2 اسم نطاق (Domain)
STEP 3 شهادة أمان (SSL)
STEP 4 الموقع يصير حي 🌐
03 — مثال حقيقي

ترتيل إف إم

مو مثال افتراضي — موقع وبوت ديسكورد حقيقيين شغالين الحين، يبثّون القرآن والحديث لآلاف المستخدمين مباشرة، بدون ما يخزّنون أي ملف صوت على أي سيرفر.

21لغة مدعومة بالموقع
229قارئ قرآن متاح فوري
188إذاعة قرآن مباشرة
0MBمساحة تخزين مستخدمة للصوتيات
WebsiteReact + Vite (PWA)
Audio Sourcemp3quran.net API
Discord BotPython
Bot StorageSQLite (إعدادات فقط)
04 — من الميدان

مشاكل حقيقية، وحلولها

هذي مو أمثلة نظرية — كل وحدة منها صارت فعليًا أثناء تطوير ترتيل إف إم. اضغط على أي مشكلة لتشوف وش صار.