دورة تصميم الواجهات او الجافاسكربت ؟

ما أنت بحاجة إلى تعلمه حاليًا هو جافاسكريبت ومن خلالها تستطيع استخدام 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 

بتاريخ 2 ساعة قال علي العبدالله:

جميل جداً

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

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

بتاريخ 7 ساعة قال علي العبدالله:

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

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

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

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

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

بتاريخ 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 ساعة قال Mustafa Suleiman:

نعم في المسار الخاص بالمشاريع سيتم استخدام Axios 

جميل جداً

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

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

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

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

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