اذهب إلى المحتوى

السؤال

نشر

مرحباً , انا اتقن مهارات الفرونت اند الاساسية HTML واستطيع بناء واجهات كاملة ومتناسقة ومتجاوبة 

مستواي متوسط 

اريد تطوير نفسي وتعلم التعامل مع Restful API

CRUD 

 

انا مشترك في دورة Laravel وفهمت كيف اقوم ببرمجة api

لكن فرونت اند كيف اتعامل معها عن طريق الـAPI

ماهي الدورة التي تفيدني بذلك ؟

Recommended Posts

  • 1
نشر

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

وكل ذلك يتم من خلال  fetch API والتي كانت في الأصل عبارة عن طلب Ajax  أي أنها تقوم في الخلفية بإرسال طلب AJAX كالتالي:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/users");
xhr.onload = function() {
  if (xhr.status === 200) {
    // Success!
    var users = JSON.parse(xhr.responseText);
  } else {
    // Error!
    console.log("Error: " + xhr.status);
  }
};
xhr.send();

بينما ما تكتبه هو كالتالي:

fetch("https://example.com/api/users")
  .then(response => response.json())
  .then(users => {
    // Success!
  })
  .catch(error => {
    // Error!
    console.log("Error: " + error);
  });

وتستطيع تقليل الكود السابق أيضًا من خلال استخدام Async و Await في جافاسكريبت بمعنى أنه كود غير متزامن، مثال:

async function getUsers() {
  const users = await fetch("https://example.com/api/users").json();
  return users;
}

const users = await getUsers();
console.log(users);

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

وهناك مكتبات خاصة بجافاسكريبت مثل Axios وهي مكتبة شهيرة جدًا وتسهل عليك عملية التعامل مع الـ API بشكل كبير.

مثال لنفس الكود السابق ولكن باستخدام axios:

import axios from "axios";

async function getUsers() {
  const response = await axios.get("https://example.com/api/users");
  const users = response.data;
  return users;
}

const users = await getUsers();
console.log(users);

ولن يتضح لك فائدتها الآن إلا بعد تعلم جافاسكريبت و fetch API و Ajax.

 

  • 0
نشر
بتاريخ 46 دقائق مضت قال Mustafa Suleiman:

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

وكل ذلك يتم من خلال  fetch API والتي كانت في الأصل عبارة عن طلب Ajax  أي أنها تقوم في الخلفية بإرسال طلب AJAX كالتالي:

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/users");
xhr.onload = function() {
  if (xhr.status === 200) {
    // Success!
    var users = JSON.parse(xhr.responseText);
  } else {
    // Error!
    console.log("Error: " + xhr.status);
  }
};
xhr.send();

بينما ما تكتبه هو كالتالي:

fetch("https://example.com/api/users")
  .then(response => response.json())
  .then(users => {
    // Success!
  })
  .catch(error => {
    // Error!
    console.log("Error: " + error);
  });

وتستطيع تقليل الكود السابق أيضًا من خلال استخدام Async و Await في جافاسكريبت بمعنى أنه كود غير متزامن، مثال:

async function getUsers() {
  const users = await fetch("https://example.com/api/users").json();
  return users;
}

const users = await getUsers();
console.log(users);

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

وهناك مكتبات خاصة بجافاسكريبت مثل Axios وهي مكتبة شهيرة جدًا وتسهل عليك عملية التعامل مع الـ API بشكل كبير.

مثال لنفس الكود السابق ولكن باستخدام axios:

import axios from "axios";

async function getUsers() {
  const response = await axios.get("https://example.com/api/users");
  const users = response.data;
  return users;
}

const users = await getUsers();
console.log(users);

ولن يتضح لك فائدتها الآن إلا بعد تعلم جافاسكريبت و fetch API و Ajax.

 

شكراً لك

لدي خلفية بسيطة ل axios 

هل دورة جافاسكربت يوجد بعا شرح شامل لل axios?

  • 1
نشر
بتاريخ 2 ساعة قال علي العبدالله:

جميل جداً

هل سنتعلم التعامل مع الميثود GET & POST & PUT/PATCH/ & DESTROY  ؟

نعم في دورة دورة تطوير تطبيقات الويب باستخدام لغة PHP سوف يتم شرح الأوامر وكيفية استخدامها على نماذج حقيقية وتطبيقها بشكل فعلي وسوف تجد ذلك في أغلبية مسارات الدورة .

  • 0
نشر
بتاريخ 7 ساعة قال أسامة زيادة:

نعم في دورة دورة تطوير تطبيقات الويب باستخدام لغة PHP سوف يتم شرح الأوامر وكيفية استخدامها على نماذج حقيقية وتطبيقها بشكل فعلي وسوف تجد ذلك في أغلبية مسارات الدورة .

انا مشترك مسبقاً في دورة php وتعلمت كيف بناءAPI

انا اقصد في دورة الجافاسكربت هل سنتعلم كيفية التعامل مع هذا الapi بشكل كامل؟

  • 1
نشر
بتاريخ 7 ساعة قال علي العبدالله:

انا مشترك مسبقاً في دورة php وتعلمت كيف بناءAPI

انا اقصد في دورة الجافاسكربت هل سنتعلم كيفية التعامل مع هذا الapi بشكل كامل؟

نعم تم شرح كيفية التعامل مع الapi بشكل كامل في دورة الجافاسكربت كما أن تم التطبيق عليها في هذه الدورة في مسار التخاطب مع الخادم وفي المسارات التي تليه يوجد مشاريع عملية يستخدم بها ال API ومن خلال الإطلاع على المحتويات الخاصة بالدورة يمكنك معرفة ذلك

كما أن دورة  تطوير واجهات المستخدم يوجد بها شرح لهذا الموضوع من خلال ال jquery بحيث يتم شرح هذا الموضوع من خلال الكثير من التقنيات

كما أن هذا الموضوع لا يحتاج لدورة كاملة لتعلمه فإنه يمكنك من خلال عدة مقالات تعلمه ولكن ما توفره دورة الجافاسكربت هو تطبيق عملي على هذا الموضوع

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...