json , ajax , api بيتعلمها ال front end ولا ال back end
وامتى ابدا اتعلمها
6 Likes
هذه الأشياء يجب عليك كمطور Frontend أن تكوني ملمة بها، راح اختصر لك فائدة كل واحدة:
- الـ json هي إختصار لـ (JavaScript Object Notation) والتي هي ببساطة لغة لتبادل البيانات.
ما المقصود بذلك؟
تخيلي أنك تتكلمي العربية وفي شخص يتكلم الصينية وتحتاجوا تتواصلوا مع بعض! بيكون تواصلكم غير ممكن فأنتوا لا تستطيعوا فهم بعضكم البعض.
لذا تحتاجوا إلى لغة وسيطة تستطيعوا الإثنين فهمها ومن خلالها تبادل المعلومات و لنقل أنها اللغة الإنجليزية مثلاً.
في هذه الحالة لم يعد يهم ما إن كانت لغتك الأم هي العربية او غيرها ولغة الشخص الأخر كذلك لا تهم طالما وأنه هناك لغة تستطيعوا الإثنين فهمها.
في مثالنا هذا نستطيع نقول بأن اللغة الإنجليزية تلعب نفس دور الـ json فهي لغة وسيطة بين اللغات.
مثال:
لنفترض بأنك تستخدمي لغة php في الـ backend وتريدي إرسال بيانات لجانب الـ client الي هي الواجهة بحيث تستقبلها لغة الـ Javascript.
في هذه الحالة إحنا نتكلم عن لغتين مختلفتين الي هما الـ php و الـ Javascript. فما هو الحل لتبادل البيانات بين هذين الجانبين؟
ببساطة سنقوم بإرسال البيانات بصيغة الـ json من الـ backend إلى الـ Frontend وبدورها لغة الـ javascript ستكون قادرة على فهم تلك اللغة والحصول على البيانات المطلوبة.
تعلم الـ JSON:
ليست صعبة وهي مبنية بما يشبة الـ objects في لغة الجافاسكربت الفرق هو أنه كل النصوص تكون بداخل علامات تنصيص.
مثلاً التالي عبارة عن cats object بصيغة الـ JSON، لنفترض بأنه وصلنا من السيرفر ويحتوي على بيانات قطط نريد عرضها على الواجهة:
{
"cats":[
{"name":"Simba", "age":"3"},
{"name":"Luna", "age":"5"},
{"name":"Stella", "age":"10"}
]
}
في الكود اعلاة عندنا Object للقطط يحتوي على مصفوفة من الـ objects كل واحد منها يحتوي على إسم القطة وعمرها.
هذه البيانات وصلتنا من السيرفر بغض النظر عن اللغة المستخدمة هناك سوا كانت php او python وما خلافة في الأخير لدينا البيانات بصيغة الـ json.
في الواجهة سنستقبل هذه البيانات بلغة الجافاسكربت ومن ثم سنقوم بتحويل هذه الصيغة التي تشبة الـ Objects والتي في الحقيقة هي عبارة عن نص (text) إلى Object جافاسكربت.
مثلاً سنستخدم الدالة التالية لتحويل البيانات التي وصلتنا إلى object وتخزينها بداخل المتغير catsObject
var catsObject = JSON.parse(cats);
الأن أصبحت لدينا البيانات مخزنة بداخل المتغير catsObject ونستطيع الوصول لأي عنصر فيها وعرضة على الواجهة. فمثلاً أستطيع الوصول لإسم أول قطة كالتالي:
catsObject.cats[0].name
إذا ما قمت بطباعة ذلك على المتصفح سأحصل على الإسم Simba.
هذه نبذة بسيطة عن الـ JSON لن تواجهي أي صعوبة في فهمها إذا كنت فاهمة الـ Objects في الجافاسكربت
إطلعي على هذه المصادر لتعرفي المزيد:
https://www.w3schools.com/js/js_json_intro.asp
إذا فهمتي الـ JSON نستطيع الإنتقال للـ ajax و الـ api
وإذا عندك أي سؤال أطرحية لي.
8 Likes
اه تمام كدة فهمتها
3 Likes
شرح ممتاز شكرا أستاذ
3 Likes
بعض ما عندك من طريقة شرح رائعة 
2 Likes
عشان ما نتأخر على 
شكرا أستاذ، بكل سرور 
، سأحاول أن أشرح لها API بطريقة مبسطة
أكيد لن تكون بنفس طريقة شرحك المميز ولكن سأحاول.
2 Likes
الـ API هي إختصار لـ (Application Programming Interface) أي واجهة برمجة التطبيقات، والتي هي ببساطة نقطة وصل بين تطبيق أو بيئة تطويرية أو نظام معين، وبينك أنت كمبرمجة تريدين الاستفادة من خدمات هذا التطبيق أو هذه البيئة في موقعك أو تطبيقك الخاص دون الحاجة إلى إعادة بنائه من جديد.
ما المقصود بذلك؟
تخيلي أنك تريدين تحضير السوشي، ستلتزمين بإعداده طبقا لوصفته المعروفة وأردتي أن تضيفي له صلصة الصويا هنا لا يتوجب عليك إعداد صلصة الصويا بمكوناتها وطريقة تحضيرها المعقدة، والمدة الزمنية التي تستغرق لطهيها، بل ستشترين الجاهزة. وستوفر عليك عناء كل هذا ولا يهمك معرفة مكونات الصلصة أو طريقة تحضيرها.
من سيقوم باعداد السوشي هو المبرمج والسوشي هو الموقع أو التطبيق الذي يبنيه المبرمج والصلصة الجاهزة هي API
يستطيع المبرمجون من مختلف المجالات الإستفادة من خدماته واستخدامه سواءا في الويب، برامج الموبايل أو برامج سطح المكتب …الخ
مصدر الصورة
فمثلا عندما تقومين بشراء شيء من الأنترنات من موقع أمازون كمثال، فإن هذا الموقع يستخدم API خاص بفيزا أو PayPal، فالمبرمج الذي قام بانشاء هذا الموقع لم يكلفه عناء تكويد كيفية تسديد المستخدم المنتجات التي قام بشرائها، و إنما قام بواسطة خطوات بسيطة إستخدام تطبيق الفيزا أوPayPal التي تحتوي على بيانات ووظائف جاهزة ومغلفة (Encapsulated) تقوم بذات الغرض.
وكمثال آخر، إذا كنت تريدين تحديد موقع شركة أو مكان معين في موقعك، تحتاجين إلى خدمة Google Map لتحديد هذا المكان في الخارطة، وعرضه في صفحة موقعك. فلا يلزم عليك القيام بتكويد كل هذا، ستحتاجين فقط إلى إستدعاء Google Map API وتدخلين الاحداثيات والمفتاح الخاص بك API key الذي يسمح لك باستعمال هذه الخدمة والاستفادة منها، وسيتكفل هو بالباقي.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644}, //إحداثيات المكان على الخريطة
zoom: 8
});
}
</script>
<!-- هنا تقومين باستدعاء Google map API -->
<script src="https://maps.googleapis.com/maps/api/js?key=هنا تضعين API key الخاص بك&callback=initMap"
async defer></script>
</body>
</html>
كيفية عمل API :
كمثال عندما يقوم المستخدم بادخال بياناته المصرفية في الـ Form الخاص بالفيزا، فإن المتصفح يرسل طلب البيانات (send request)، سيقوم الـ API بجلب البيانات (fetch data) ويستقبل إجابة تحتوي على بيانات محددة على شكل معين، مثل JSON. يقوم المتصفح بعرضها عن طريق الجافاسكريبت مثلا بترجمتها وتحويلها لكي يعرض النتيجة على الصفحة .
9 Likes
تمام كدة شكرا جدا 
4 Likes
شرح رائع ي لارا، شكراً لك
2 Likes
الـ AJAX إختصار لـ Asynchronous JavaScript And XML.
هي ليست لغة برمجة وإنما تقنية نستطيع من خلالها إرسال وجلب الـ Data من السيرفر بدون الحاجة لعمل تحديث وإعادة تحميل لصفحة الويب.
أين نجد هذه التقنية؟
في الحقيقة أنتي تتعاملي معها بشكل دوري كل يوم فمثلاً في الفيسبوك قد تجدي أن عند كتابة أحد لتعليق على منشور يظهر لديك التعليق مباشرة وأيضاً كما يحصل هنا بالمنتدى بدون ان تحتاجي لأن تقومي بعمل تحديث للصفحة.
بدون إستخدام تقنية كهذه سيكون عليك في كل مرة الضغط على زر تحديث ليصلك كل جديد.
الرابط بين الـ api، json و ajax
لنقم بعمل هذه التجربة:
سأقوم بفتح أحد المواضيع بالمنتدى ومن ثم سأقوم بفتح أدوات المطورين وإختيار التبويب Network ومنه سأختار XHR كالتالي:
الأن راح اقوم بكتابة تعليق في الموضوع بينما نافذة الـ Network مفتوحة حتى نستطيع مشاهدة الـ Activities التي ستحصل.
بعد كتابة التعليق في الموضوع سيظهر هذا الـ request حسب ما بالصورة:
هذا الطلب تم إرسالة إلى الـ api بمجرد ضغطي على زر إضافة التعليق، وبالجانب الأيمن من الصورة تجدي الرقم 1 و 2 توضح الـ endpoint التي تم إرسال التعليق اليها والتي هي /posts ونوع الطلب POST.
هذا كان دور الـ api فهو يعمل كالرسول بين الواجهة والسيرفر فهو يأخذ الطلب الذي قمتي به للسيرفر ويقوم بإرجاع إستجابة او رد على ذلك الطلب.
الأن تم إرسال التعليق للسيرفر بنجاح وحصلنا أيضاً على إستجابة من السيرفر، لنشاهدها تحت التبويب Response
كما تلاحظي تلك هي الإستجابة، راح اقوم بنقلها لك لهنا:
{
"action":"create_post",
"post":{
"id":12514,
"name":"Mohammed Alhakem",
"username":"Alhakem",
"avatar_template":"/user_avatar/forums.coretabs.net/alhakem/{size}/522_2.png",
"created_at":"2019-07-06T11:31:01.089Z",
"cooked":"\u003cp\u003etest\u003c/p\u003e",
"post_number":6,
"post_type":1,
"updated_at":"2019-07-06T11:31:01.089Z",
"reply_count":0,
"reply_to_post_number":null,
"quote_count":0,
"incoming_link_count":0,
"reads":0,
"score":0,
"yours":true,
"topic_id":3,
"topic_slug":"about-the-staff-category",
"display_username":"Mohammed Alhakem",
"primary_group_name":null,
"primary_group_flair_url":null,
"primary_group_flair_bg_color":null,
"primary_group_flair_color":null,
"version":1,
"can_edit":true,
"can_delete":true,
"can_recover":null,
"can_wiki":true,
"user_title":"Tutor",
"actions_summary":[
{
"id":3,
"can_act":true
},
{
"id":4,
"can_act":true
},
{
"id":8,
"can_act":true
},
{
"id":7,
"can_act":true
}
],
"moderator":false,
"admin":true,
"staff":true,
"user_id":3,
"draft_sequence":5,
"hidden":false,
"trust_level":4,
"deleted_at":null,
"user_deleted":false,
"edit_reason":null,
"can_view_edit_history":true,
"wiki":false,
"reviewable_id":null,
"reviewable_score_count":0,
"reviewable_score_pending_count":0,
"can_accept_answer":true,
"can_unaccept_answer":false,
"accepted_answer":false
},
"success":true
}
تحتوي على الكثير من المعلومات والبيانات وحتى تحتوي على التعليق الذي قمنا بكتابته وكل ذلك بصيغة الـ JSON.
إذا فهنا نجد دور الـ JSON وكيف أنها تعمل كلغة وسيطة بين الواجهة والسيرفر.
وهل لاحظتي كذلك أننا قمنا بكتابة تعليق وأرسلناه للسيرفر وظهر التعليق لدينا في الواجهة وكل ذلك تم بدون الحاجة لعمل تحديث للصفحة!
هنا يأتي دور تقنية الـ AJAX.
بدونها كان بمجرد ان تضغطي على زر إضافة الرد سيتم تحديث الصفحة وتحميلها من جديد.
إذا فكل شئ مترابط بطريقة تسهل علينا العمل كمطورين وتعطي المستخدمين تجربة ممتازة.
أرجوا ان يكون قد إتضح كل شئ، في حال مازال لديك أي إستفسار أخبريني
10 Likes
شكرا جدا ياباشمهندس محمد
2 Likes
اتمنى تنزل دروس فيديوهات على الnode
2 Likes
الـJSON سهلت علينا كثيرا 
كلام زين أستاذ محمد
1 Like
بصراحة السوشي يأخذ وقت في الاعداد لكن له مذاق خاص في النهاية 
انا جعت 
1 Like
إطلاقا كل ما عليك فعله غسل الأرز وطهوه، غسل الخضار وتقطيعها و باقي المكونات كلها تباع جاهزة. حتى السمك نيء في بعض أصناف السوشي.
وجبة السوشي المتكونة من 40 حبة بمختلف النكهات سعرها في بلدي $58،36 ( أعتقد تعادل ربع دخل المواطن المتوسط الشهري عندنا).
هناك طبعا الأقل ثمنا على حسب المكونات. وصعوبة تناولها من مختلف الشرائح، ليس السعر وحده بل مكان تواجدها، فهي غير متوفرة في جميع الولايات يجب أن تنتقل من ولاية لولاية أخرى.
لن أستطيع الحكم على ذوقها حتى أتذوق السوشي الأصلي الياباني. أشك فيما تذوقته في بلدي.
2 Likes
ممتاز وجميل جداً
1 Like