تعال نعرف الفرق بين الـ Horizontal Scaling والـ Vertical Scaling 💡
.
.
تخيل إنك عندك مطعم، والمكان بقى زحمة جدًا والطلبات مش ملاحق عليها، أكيد هتفكر توسّع علشان تقدر تخدم عدد أكبر من الناس. ولكن عندك حلّين:
1- إنك توسّع المطعم نفسه وتزوّد عدد الترابيزات والكراسي.
2- إنك تفتح فروع جديدة في أماكن مختلفة علشان تستوعب عدد الزباين المتزايد.
الحل الأول هو Vertical Scaling، والتاني هو Horizontal Scaling، وده بالضبط اللي بيحصل في عالم البرمجة لما السيرفرات بتبدأ تتعامل مع ضغط عالي من ال requests.
———
https://www.linkedin.com/posts/dev-alisamir_softwaredevelopment-backenddevelopment-devabrguide-activity-7308475605694537728-WTWQ
https://qabilah.com/posts/6TpiPuWH6nc
———
متنساش تشارك البوست وتفيد غيرك.
وفقكم الله لكل خير 🌿
.
.
تخيل إنك عندك مطعم، والمكان بقى زحمة جدًا والطلبات مش ملاحق عليها، أكيد هتفكر توسّع علشان تقدر تخدم عدد أكبر من الناس. ولكن عندك حلّين:
1- إنك توسّع المطعم نفسه وتزوّد عدد الترابيزات والكراسي.
2- إنك تفتح فروع جديدة في أماكن مختلفة علشان تستوعب عدد الزباين المتزايد.
الحل الأول هو Vertical Scaling، والتاني هو Horizontal Scaling، وده بالضبط اللي بيحصل في عالم البرمجة لما السيرفرات بتبدأ تتعامل مع ضغط عالي من ال requests.
———
https://www.linkedin.com/posts/dev-alisamir_softwaredevelopment-backenddevelopment-devabrguide-activity-7308475605694537728-WTWQ
📍 Qabilah
https://qabilah.com/posts/6TpiPuWH6nc
———
متنساش تشارك البوست وتفيد غيرك.
وفقكم الله لكل خير 🌿
❤4👍3
DevGuide 🇵🇸
بفضل الله، تم نشر أول مقال في In Plain English 🔥 المقال بيتكلم عن أهم 10 أخطاء في الفرونت إند ممكن تقع فيها لو لسه مبتدئ، وكمان فيه حلول عملية لكل خطأ علشان تتجنبه. 💡 ——— The 10 Front-End Mistakes I Wish I Knew as a Beginner With Fixes 💡 Front-end development…
تم نشر المقال في مدونة Level Up Coding على منصة Medium ⚡️
https://levelup.gitconnected.com/the-10-front-end-mistakes-i-wish-i-knew-as-a-beginner-with-fixes-cec0f6430455
https://levelup.gitconnected.com/the-10-front-end-mistakes-i-wish-i-knew-as-a-beginner-with-fixes-cec0f6430455
❤4👏4👍2
دردشة سريعة عن الـ Accessibility Tree ⚡️
.
.
الأشخاص أصحاب القدرات الخاصة بتتعامل مع الويب بطريقة مختلفة تمامًا عن اللي احنا متعودين عليها. وده اللي بيخلينا نسأل السؤال المهم: إزاي المتصفحات بتفهم صفحات الويب وتخليها قابلة للوصول؟ 🤔
.
.
هنا بييجي دور الـ The Accessibility Tree 🌳
———
ببساطة، هو تمثيل هيكلي (Tree Structure) موازي للـ DOM Tree، لكنه بيحتوي بس على العناصر اللي ممكن تكون مفهومة وقابلة للوصول بواسطة تقنيات المساعدة زي الـ Screen Readers.
يعني لو فيه عنصر على الصفحة مش مهم أو ملوش دور واضح للمستخدم من ناحية الوصول (زي <div> عادي بدون معنى)، مش هيكون موجود داخل الـ Accessibility Tree.
———
الموضوع بيمر بأكثر من خطوة:
1️⃣ المتصفح بيبني الـ DOM Tree
أي موقع أو صفحة بتبدأ كـ HTML، والمتصفح بيحول الـ HTML ده لـ DOM Tree، اللي بيكون عبارة عن كل عناصر الصفحة، حتى الفاضية منها.
2️⃣ المتصفح بيبني الـ Render Tree
هنا بيبدأ المتصفح يفلتر العناصر اللي بتأثر على المظهر النهائي للصفحة. يعني أي حاجة مش بيتعملها Render (زي العناصر المخفية بـ display: none) مش بتكون موجودة في الـ Render Tree.
3️⃣ المتصفح بيبني الـ Accessibility Tree
في المرحلة دي، المتصفح بياخد الـ DOM Tree ويبدأ يشوف إيه العناصر اللي محتاجة تكون موجودة عشان تقنيات المساعدة تقدر تفهم الصفحة. أي عنصر ملوش دور واضح أو مش مؤثر في التفاعل بيتم تجاهله.
ملحوظة: الـ Accessibility Tree بتعتمد على الـ DOM Tree أكتر من الـ Render Tree، يعني ممكن عنصر يكون موجود فيها حتى لو مش مرئي في الصفحة.
———
لأن لو عنصر معين مش موجود في الـ Accessibility Tree، فهو ببساطة مش موجود بالنسبة للي بيعتمد على الـ Screen Reader!
يعني لو عندك زرار (button) شكله حلو في الـ UI بس مفيهوش role="button" أو aria-label واضح، المستخدم مش هيعرف إنه زرار أصلًا.
———
✅ 1. نوع العنصر نفسه
العناصر الـ HTML Semantics زي <button>، <input>، <h1>، <p> بتكون جزء من الـ Accessibility Tree بشكل تلقائي، لكن العناصر زي <div> و <span> مش بتكون موجودة إلا لو لها دور محدد.
✅ 2. الـ ARIA Attributes
لو عاوز عنصر يكون متاح في الـ Accessibility Tree بس مش جزء من الـ HTML Semantics، تقدر تستخدم ARIA attributes زي:
- الـ role="button": لو عندك <div> مستخدمه كأنه زرار، لازم تضيف ليه الدور المناسب.
- الـ aria-hidden="true": لو عاوز تخفي عنصر من الـ Accessibility Tree بدون ما تخفيه من الـ UI.
✅ 3. الـ CSS Properties
بعض الـ CSS Properties ممكن تأثر على وجود عنصر جوه الـ Accessibility Tree:
- الـ display: none أو visibility: hidden: بتشيل العنصر من الـ Tree بالكامل.
- الـ opacity: 0: بيخلي العنصر مش مرئي، بس يفضل موجود جوه الـ Accessibility Tree.
- الـ position: absolute مع left: -9999: العنصر بيفضل موجود لو كان له دور واضح (زي زرار)، لكن لو بدون معنى ممكن يتم تجاهله.
✅ 4. إدارة الـ Focus
موضوع الـ Focus (زي استخدام tabindex) بيأثر على إزاي المستخدم بيتفاعل مع العناصر في الـ Accessibility Tree.
.
.
الأشخاص أصحاب القدرات الخاصة بتتعامل مع الويب بطريقة مختلفة تمامًا عن اللي احنا متعودين عليها. وده اللي بيخلينا نسأل السؤال المهم: إزاي المتصفحات بتفهم صفحات الويب وتخليها قابلة للوصول؟ 🤔
.
.
هنا بييجي دور الـ The Accessibility Tree 🌳
———
📌 يعني إيه Accessibility Tree؟
ببساطة، هو تمثيل هيكلي (Tree Structure) موازي للـ DOM Tree، لكنه بيحتوي بس على العناصر اللي ممكن تكون مفهومة وقابلة للوصول بواسطة تقنيات المساعدة زي الـ Screen Readers.
يعني لو فيه عنصر على الصفحة مش مهم أو ملوش دور واضح للمستخدم من ناحية الوصول (زي <div> عادي بدون معنى)، مش هيكون موجود داخل الـ Accessibility Tree.
———
📌 إزاي الـ Accessibility Tree بتتكون؟
الموضوع بيمر بأكثر من خطوة:
1️⃣ المتصفح بيبني الـ DOM Tree
أي موقع أو صفحة بتبدأ كـ HTML، والمتصفح بيحول الـ HTML ده لـ DOM Tree، اللي بيكون عبارة عن كل عناصر الصفحة، حتى الفاضية منها.
2️⃣ المتصفح بيبني الـ Render Tree
هنا بيبدأ المتصفح يفلتر العناصر اللي بتأثر على المظهر النهائي للصفحة. يعني أي حاجة مش بيتعملها Render (زي العناصر المخفية بـ display: none) مش بتكون موجودة في الـ Render Tree.
3️⃣ المتصفح بيبني الـ Accessibility Tree
في المرحلة دي، المتصفح بياخد الـ DOM Tree ويبدأ يشوف إيه العناصر اللي محتاجة تكون موجودة عشان تقنيات المساعدة تقدر تفهم الصفحة. أي عنصر ملوش دور واضح أو مش مؤثر في التفاعل بيتم تجاهله.
ملحوظة: الـ Accessibility Tree بتعتمد على الـ DOM Tree أكتر من الـ Render Tree، يعني ممكن عنصر يكون موجود فيها حتى لو مش مرئي في الصفحة.
———
طب ليه الموضوع ده مهم؟ 🤔
لأن لو عنصر معين مش موجود في الـ Accessibility Tree، فهو ببساطة مش موجود بالنسبة للي بيعتمد على الـ Screen Reader!
يعني لو عندك زرار (button) شكله حلو في الـ UI بس مفيهوش role="button" أو aria-label واضح، المستخدم مش هيعرف إنه زرار أصلًا.
———
📌 إيه اللي بيأثر على الـ Accessibility Tree؟
✅ 1. نوع العنصر نفسه
العناصر الـ HTML Semantics زي <button>، <input>، <h1>، <p> بتكون جزء من الـ Accessibility Tree بشكل تلقائي، لكن العناصر زي <div> و <span> مش بتكون موجودة إلا لو لها دور محدد.
✅ 2. الـ ARIA Attributes
لو عاوز عنصر يكون متاح في الـ Accessibility Tree بس مش جزء من الـ HTML Semantics، تقدر تستخدم ARIA attributes زي:
- الـ role="button": لو عندك <div> مستخدمه كأنه زرار، لازم تضيف ليه الدور المناسب.
- الـ aria-hidden="true": لو عاوز تخفي عنصر من الـ Accessibility Tree بدون ما تخفيه من الـ UI.
✅ 3. الـ CSS Properties
بعض الـ CSS Properties ممكن تأثر على وجود عنصر جوه الـ Accessibility Tree:
- الـ display: none أو visibility: hidden: بتشيل العنصر من الـ Tree بالكامل.
- الـ opacity: 0: بيخلي العنصر مش مرئي، بس يفضل موجود جوه الـ Accessibility Tree.
- الـ position: absolute مع left: -9999: العنصر بيفضل موجود لو كان له دور واضح (زي زرار)، لكن لو بدون معنى ممكن يتم تجاهله.
✅ 4. إدارة الـ Focus
موضوع الـ Focus (زي استخدام tabindex) بيأثر على إزاي المستخدم بيتفاعل مع العناصر في الـ Accessibility Tree.
👍4❤2
سمعت قبل كده عن الـ Microservices بس مش فاهمها كويس؟ أو حاسس إنها موضوع معقد ومحتاج خبرة كبيرة؟ 🤯
الموضوع ببساطة إن بدل ما يكون عندك تطبيق ضخم (Monolith) كله متشابك مع بعضه، تقدر تقسّمه لعدة خدمات صغيرة (Microservices)، وكل خدمة بتشتغل لوحدها وتقدر تتحدث مع باقي الخدمات بطريقة منظمة.
الفكرة دي بتساعد الشركات الكبيرة زي Netflix و Amazon إنها تقدر تطوّر وتحدّث الأنظمة بتاعتها بسهولة وسرعة.
———
🎯 تخيل إن عندك تطبيق لمطعم أونلاين:
- خدمة مسؤولة عن الطلبات 🛒
- خدمة مسؤولة عن الدفع 💳
- خدمة مسؤولة عن إدارة العملاء 👥
كل خدمة تشتغل لوحدها، ولو حصل مشكلة في الدفع، الطلبات تفضل شغالة عادي بدون ما تتأثر.
———
في المقال ده، هتفهم الفكرة بأسلوب بسيط، مع مثال عملي يوضح لك كل حاجة خطوة بخطوة ✅👇
Imagine you’re building a house. You could construct it as one giant, unchangeable block with everything fused or use a modular approach, with separate rooms you can tweak, replace, or upgrade without tearing the whole thing down.
https://differ.blog/p/microservices-made-simple-a-beginner-s-guide-with-a-real-example-47c171
الموضوع ببساطة إن بدل ما يكون عندك تطبيق ضخم (Monolith) كله متشابك مع بعضه، تقدر تقسّمه لعدة خدمات صغيرة (Microservices)، وكل خدمة بتشتغل لوحدها وتقدر تتحدث مع باقي الخدمات بطريقة منظمة.
الفكرة دي بتساعد الشركات الكبيرة زي Netflix و Amazon إنها تقدر تطوّر وتحدّث الأنظمة بتاعتها بسهولة وسرعة.
———
🎯 تخيل إن عندك تطبيق لمطعم أونلاين:
- خدمة مسؤولة عن الطلبات 🛒
- خدمة مسؤولة عن الدفع 💳
- خدمة مسؤولة عن إدارة العملاء 👥
كل خدمة تشتغل لوحدها، ولو حصل مشكلة في الدفع، الطلبات تفضل شغالة عادي بدون ما تتأثر.
———
في المقال ده، هتفهم الفكرة بأسلوب بسيط، مع مثال عملي يوضح لك كل حاجة خطوة بخطوة ✅👇
Microservices Made Simple: A Beginner’s Guide with a Real Example 💯
Imagine you’re building a house. You could construct it as one giant, unchangeable block with everything fused or use a modular approach, with separate rooms you can tweak, replace, or upgrade without tearing the whole thing down.
https://differ.blog/p/microservices-made-simple-a-beginner-s-guide-with-a-real-example-47c171
👏5❤4
العلاقات بين الجداول في الـ Database 💡
.
.
خليني أسألك سؤال بسيط: لو عندك تطبيق بيسجل بيانات المستخدمين وطلبات الشراء بتاعتهم، هتخزن البيانات دي إزاي؟ هتحط كل حاجة في Table واحد؟ طب لما المستخدم يطلب 10 طلبات، هتكرر بياناته 10 مرات؟ ولا هتعمل إيه؟ 🤔
هنا بتيجي أهمية العلاقات بين الجداول (Database Relationships) في الـ Relational Databases زي MySQL وPostgreSQL. العلاقات دي هي اللي بتساعدك تخلّي الـ Database منظمة، مرنة، وكمان أسرع في الاستعلامات (Queries).
ولو استخدمتها غلط، ممكن تلاقي نفسك غرقان في Data Duplication، Inconsistent Data، والأداء هيكون في الضياع.
في البوست ده، هنتكلم عن أنواع العلاقات بين الجداول، امتى تستخدم كل نوع، وهنشوف أمثلة عملية عليها...🔥
———
https://www.linkedin.com/posts/dev-alisamir_database-backenddeveloper-backend-activity-7309651943797198851-tXvC
https://qabilah.com/posts/MMsQVPppIwA
———
متنساش تشارك البوست وتفيد غيرك 💡
.
.
خليني أسألك سؤال بسيط: لو عندك تطبيق بيسجل بيانات المستخدمين وطلبات الشراء بتاعتهم، هتخزن البيانات دي إزاي؟ هتحط كل حاجة في Table واحد؟ طب لما المستخدم يطلب 10 طلبات، هتكرر بياناته 10 مرات؟ ولا هتعمل إيه؟ 🤔
هنا بتيجي أهمية العلاقات بين الجداول (Database Relationships) في الـ Relational Databases زي MySQL وPostgreSQL. العلاقات دي هي اللي بتساعدك تخلّي الـ Database منظمة، مرنة، وكمان أسرع في الاستعلامات (Queries).
ولو استخدمتها غلط، ممكن تلاقي نفسك غرقان في Data Duplication، Inconsistent Data، والأداء هيكون في الضياع.
في البوست ده، هنتكلم عن أنواع العلاقات بين الجداول، امتى تستخدم كل نوع، وهنشوف أمثلة عملية عليها...🔥
———
https://www.linkedin.com/posts/dev-alisamir_database-backenddeveloper-backend-activity-7309651943797198851-tXvC
📍 Qabilah
https://qabilah.com/posts/MMsQVPppIwA
———
متنساش تشارك البوست وتفيد غيرك 💡
❤8🔥1👏1
Roadmap To Learn Generative AI 🚀
1. Python Programming Language -1 Month
2. Basic Machine Learning Natural Language Processing
3. Basic Deep Learning Concepts
4. Advanced NLP Concepts
5. Starting the Journey Towards Generative AI (GPT4,Mistral 7B, LLAMA, Hugging Face Open Source LLM Models,Google Palm Model)
6. Vector Databases And Vector Stores
7. Deployment Of LLM Projects
https://github.com/krishnaik06/Roadmap-To-Learn-Generative-AI-In-2024
❤3🔥1
ليه تكتب نفس الكود مرتين وتوجع دماغك؟ 🤔
.
.
فاكر آخر مرة كنت بتعمل فيها Copy-Paste في الكود بتاعك؟ غالبًا كنت مستعجل وعايز تخلص بسرعة، بس اللي حصل بعدها؟ اكتشفت إن فيه Bug في الكود، وبدل ما تصلحه في مكان واحد، لقيت نفسك بتدور عليه في كذا مكان عشان تعدله! 🤦♂️
هنا بقى بييجي دور مبدأ DRY – Don’t Repeat Yourself، واللي ببساطة معناه "اكتب الكود مرة واحدة وخليه قابل لإعادة الاستخدام بدل ما تكرره في كل حتة".
———
https://www.linkedin.com/posts/dev-alisamir_devabrguide-softwaredevelopment-dry-activity-7310021758386954241-TTQ1
https://qabilah.com/posts/OoYj4HCbkxM
———
متنساش تشارك البوست وتفيد غيرك. 💡
.
.
فاكر آخر مرة كنت بتعمل فيها Copy-Paste في الكود بتاعك؟ غالبًا كنت مستعجل وعايز تخلص بسرعة، بس اللي حصل بعدها؟ اكتشفت إن فيه Bug في الكود، وبدل ما تصلحه في مكان واحد، لقيت نفسك بتدور عليه في كذا مكان عشان تعدله! 🤦♂️
هنا بقى بييجي دور مبدأ DRY – Don’t Repeat Yourself، واللي ببساطة معناه "اكتب الكود مرة واحدة وخليه قابل لإعادة الاستخدام بدل ما تكرره في كل حتة".
———
https://www.linkedin.com/posts/dev-alisamir_devabrguide-softwaredevelopment-dry-activity-7310021758386954241-TTQ1
📍 Qabilah
https://qabilah.com/posts/OoYj4HCbkxM
———
متنساش تشارك البوست وتفيد غيرك. 💡
❤5🔥1
الفرق بين الـ Frontend والـ Backend 💡
تخيل إنك داخل مطعم، أول حاجة بتشوفها هي الديكور، الإضاءة، شكل الترابيزات، المنيو اللي بتختار منه، والشخض اللي بياخد الأوردر منك.. كل ده بيمثل الـ Frontend...
لكن الأكل مش بيطلع لوحده، ورا الكواليس فيه مطبخ شغال، فيه طباخين بيحضروا الأكل، فيه ناس بترتب الطلبات، وفيه كاشير بيحسب الفاتورة.. كل ده بيمثل الـ Backend...
———
هو كل حاجة المستخدم بيشوفها ويتفاعل معاها على الموقع أو التطبيق، زي الأزرار، الألوان، الصور، القوائم، والتصميم بشكل عام.
🔹 أشهر التقنيات اللي بيستخدمها الـ Frontend:
- الـ HTML (هيكل الصفحة)
- الـ CSS (التصميم والألوان)
- الـ JavaScript (التفاعل مع محتوى الموقع)
- مكتبات وأُطر عمل زي React, Angular, Vue عشان تسهل الشغل.
———
هو الجزء اللي بيشتغل ورا الكواليس وبيتأكد إن كل حاجة شغالة تمام، هو المسؤول عن التخزين، الأمان، معالجة البيانات، والاستجابة لطلبات المستخدم. يعني لو دخلت على موقع عشان تسجل دخول، الـ Backend هو اللي بيتحقق من بياناتك ويرد عليك إذا كانت صح ولا غلط.
🔹 أشهر التقنيات اللي بيستخدمها الـ Backend:
- لغات برمجة زي Node.js, Python, Java, PHP, Ruby
- قواعد بيانات زي MySQL, MongoDB, PostgreSQL
- تقنيات زي REST APIs, GraphQL, Authentication
———
لما تدخل على موقع، الـ 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 اللي بدوره بيتأكد منها في قاعدة البيانات ويرد عليك. لو البيانات صح، هيدخلك، ولو غلط، هيقولك إن فيه مشكلة.
———
#دقيقة_برمجة
❤6👏2👍1
يعني إيه 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 عشان يجيب لك آخر التغريدات.
———
#دقيقة_برمجة
❤9