الفرق بين الـ Frontend والـ Backend 💡

تخيل إنك داخل مطعم، أول حاجة بتشوفها هي الديكور، الإضاءة، شكل الترابيزات، المنيو اللي بتختار منه، والشخض اللي بياخد الأوردر منك.. كل ده بيمثل الـ Frontend...

لكن الأكل مش بيطلع لوحده، ورا الكواليس فيه مطبخ شغال، فيه طباخين بيحضروا الأكل، فيه ناس بترتب الطلبات، وفيه كاشير بيحسب الفاتورة.. كل ده بيمثل الـ Backend...

———

🖥 يعني إيه Frontend؟

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


🔹 أشهر التقنيات اللي بيستخدمها الـ Frontend:

- الـ HTML (هيكل الصفحة)
- الـ CSS (التصميم والألوان)
- الـ JavaScript (التفاعل مع محتوى الموقع)
- مكتبات وأُطر عمل زي React, Angular, Vue عشان تسهل الشغل.

———

🔧 يعني إيه Backend؟

هو الجزء اللي بيشتغل ورا الكواليس وبيتأكد إن كل حاجة شغالة تمام، هو المسؤول عن التخزين، الأمان، معالجة البيانات، والاستجابة لطلبات المستخدم. يعني لو دخلت على موقع عشان تسجل دخول، الـ Backend هو اللي بيتحقق من بياناتك ويرد عليك إذا كانت صح ولا غلط.


🔹 أشهر التقنيات اللي بيستخدمها الـ Backend:

- لغات برمجة زي Node.js, Python, Java, PHP, Ruby
- قواعد بيانات زي MySQL, MongoDB, PostgreSQL
- تقنيات زي REST APIs, GraphQL, Authentication

———

🔄 إزاي Frontend و Backend بيشتغلوا مع بعض؟

لما تدخل على موقع، الـ Frontend بيعرضلك صفحة تسجيل الدخول، ولما تكتب بياناتك وتضغط "تسجيل"، الموقع بيبعت البيانات للـ Backend اللي بدوره بيتأكد منها في قاعدة البيانات ويرد عليك. لو البيانات صح، هيدخلك، ولو غلط، هيقولك إن فيه مشكلة.

———

#دقيقة_برمجة

يعني إيه API؟ 🤖

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

دلوقتي، بدل المطعم، تخيل إنك عندك تطبيق موبايل أو موقع، وعاوز تجيب بيانات من سيرفر خارجي، زي مثلاً درجات الحرارة، أخبار اليوم، أو حتى تفاصيل منتج من موقع تسوق. بس زي ما أنت مش هتدخل المطبخ بنفسك، التطبيق بتاعك مش هيقدر يوصل مباشرة لقاعدة البيانات أو الخدمة اللي عند السيرفر. هنا بقى بييجي دور الـ API...

———

الكلمة اختصار لـ Application Programming Interface، وده عبارة عن "وسيط" أو "مترجم" بيسمح لتطبيقين مختلفين إنهم يتواصلوا مع بعض بدون ما يفهموا تفاصيل بعض الداخلية. بمعنى تاني، هو مجموعة من القواعد والتعليمات اللي بتحدد إزاي البرامج تتكلم مع بعض وتتبادل البيانات.

———

إزاي الـ API بيشتغل؟ 🤔

العملية بتتم في 4 خطوات رئيسية:

1️⃣ الطلب (Request): التطبيق بتاعك بيبعت طلب للـ API، بيكون فيه المعلومات اللي عاوزها. الطلب ده غالبًا بيكون باستخدام HTTP Requests زي (GET, POST, PUT, DELETE).

2️⃣ المعالجة (Processing): السيرفر اللي بيشغل الـ API بيستقبل الطلب، يفهمه، ويبدأ يجمع البيانات المطلوبة.

3️⃣ الاستجابة (Response): السيرفر بيرجع البيانات المطلوبة، وغالبًا بتكون بصيغة JSON أو XML.

4️⃣ العرض (Rendering): التطبيق بتاعك بياخد البيانات اللي وصلت له، ويعرضها للمستخدم بشكل مناسب.

———

📌 مثال عملي

لو فتحت تطبيق الطقس على موبايلك، التطبيق بيبعت طلب للـ API بتاع خدمة الطقس (مثلًا OpenWeather API)، بيقول له: "هات درجة الحرارة في القاهرة"

الـ API بيروح للسيرفر، يسحب البيانات، ويرجع لك النتيجة: "درجة الحرارة في القاهرة الآن 25"

———

💡 إيه أنواع الـ API؟

- الـ REST API – الأشهر، بيستخدم HTTP، وبيتعامل غالبًا مع بيانات JSON.
- الـ SOAP API – أقدم شوية، بيعتمد على XML، وغالبًا بيستخدم في الأنظمة البنكية.
- الـ GraphQL API – أحدث وأكثر مرونة، بيسمح لك تطلب البيانات اللي أنت محتاجها بس، بدون تحميل بيانات زيادة.
- الـ WebSockets API – بيستخدم في التطبيقات اللي محتاجة تحديثات في الوقت الفعلي (real-time) زي الشات والألعاب الأونلاين.

———

أمثلة على الـ API في الحياة اليومية 🌍

- لما تطلب أوبر، التطبيق بيتواصل مع Google Maps API عشان يحدد موقعك.
- لما تدفع أونلاين، الموقع بيتواصل مع Payment Gateway API زي PayPal أو Stripe عشان يتم الدفع.
- لما تستخدم موقع زي تويتر، التطبيق بيستخدم Twitter API عشان يجيب لك آخر التغريدات.

———

#دقيقة_برمجة

🔰 CSS: How to Truncate text

Old but useful

الفرق بين SQL و NoSQL؟ 🤔

خلال رحلتك في عالم البرمجة، أكيد سمعت عن قواعد البيانات (Database) وعرفت إن فيه نوعين مشهورين: SQL و NoSQL، بس إيه الفرق بينهم؟

📌 الـ SQL - قواعد بيانات علائقية (Relational Databases)

- بتستخدم جداول (Tables) زي الإكسل كده، كل جدول فيه أعمدة وصفوف، وبيكون فيه علاقات بين الجداول.

- بتستخدم لغة SQL (Structured Query Language) عشان تعمل استعلامات على البيانات (SELECT, INSERT, UPDATE, DELETE).

- مثالية للبيانات المنظمة والمترابطة، زي الحسابات البنكية، بيانات الموظفين، والمخازن.

- أمثلة عليها: MySQL, PostgreSQL, SQL Server, Oracle.

———

📍 مثال سريع:

لو عندك جدول اسمه Users، ممكن تجيب كل المستخدمين اللي أعمارهم فوق 25 سنة بكود زي ده:

SELECT * FROM Users WHERE age > 25;

———

📌 الـ NoSQL - قواعد بيانات غير علائقية (Non-Relational Databases)

- ملهاش جداول ثابتة زي SQL، بتستخدم طرق تخزين مختلفة زي المستندات (Documents)، الـ (Key-Value)، الـ (Wide-Column)، أو الرسوم البيانية (Graph).

- مش بتحتاج مخطط ثابت (Schema-less)، يعني ممكن تخزن بيانات غير متناسقة بدون مشاكل.

- مناسبة للبيانات اللي بتتغير باستمرار والأنظمة اللي بتحتاج سرعة عالية وقابلية توسع كبيرة، زي مواقع التواصل الاجتماعي وأنظمة التحليل الفوري.

- أمثلة عليها: MongoDB (بتستخدم الـ Documents)، Redis (بتستخدم Key-Value)، Cassandra (بتستخدم Wide-Column).

———

📍 مثال سريع:

في MongoDB، لو عندك مجموعة (Collection) اسمها Users، وعاوز تجيب المستخدمين اللي أعمارهم فوق 25 سنة، هتستخدم استعلام زي ده:

db.Users.find({ "age": { $gt: 25 } })

———

أستخدم أي واحد في المشروع؟ 🤔

✅ الـ SQL مناسب لو عندك بيانات مترابطة وعاوز تضمن التكامل بينها.

✅ الـ NoSQL مناسب لو عندك بيانات غير منظمة، أو بتحتاج تتوسع بسرعة، أو عندك عمليات قراءة وكتابة ضخمة.

———

#دقيقة_برمجة

الفرق بين GET و POST في HTTP 🤔

لما تيجي تتعامل مع الـ APIs، هتقابل نوعين من الـ HTTP Requests مهمين جدًا: GET و POST. طيب إيه الفرق بينهم؟

📌 الـ GET Request

- بيستخدم لما تحب تجيب بيانات من السيرفر، زي لما تفتح موقع وتشوف البيانات اللي عليه.

- البيانات اللي بتبعتها للسيرفر بتكون في الـ URL نفسه كـ Query Parameters، يعني لو عندك حاجة زي:

https://example.com/users?id=5

ده معناه إنك بتطلب بيانات المستخدم اللي الـ ID بتاعه 5.

- مش آمن لو بتبعت بيانات حساسة زي الباسورد، لأن البيانات بتظهر في الرابط.

- ممكن يتخزن في الكاش (Cache)، فلو عملت نفس الطلب تاني ممكن السيرفر يرد بنفس النتيجة من غير ما يعالج الطلب من جديد.

———

📌 الـ POST Request

- بيستخدم لما تحب تبعت بيانات للسيرفر عشان تسجّل مستخدم، تبعت بيانات من Form، أو تضيف حاجة جديدة في قواعد البيانات (Database).

- البيانات بتتبعت داخل الـ (Body)، مش في الـ URL، فده بيكون أكثر أمانًا مقارنةً بـ GET.

- مش بيتخزن في الكاش، لأن كل مرة بتبعت فيها بيانات جديدة بيتم معالجتها.

- ممكن يبعت بيانات ضخمة، عكس GET اللي بيكون محدود بحجم الـ URL.

———

💡 امتى تستخدم كل واحد فيهم؟

- لو عايز تجيب بيانات بس بدون ما تغير أي حاجة في السيرفر استخدم GET

- لو عايز تبعت بيانات أو تعمل تعديل أو تضيف حاجة جديدة استخدم POST

———

يعني مثلًا:

🔹 لو بتبحث في جوجل، ده GET لأنك بتطلب بيانات بس.
🔹 لو بتسجّل دخول في موقع، ده POST لأنك بتبعت بيانات حساسة (الإيميل والباسورد).

———

#دقيقة_برمجة