كيفية استخدام Vue.js وAxios لعرض البيانات من واجهة برمجة التطبيقات

  • 401 المشاهدات
  • قراءة دقيقة واحدة
هادي بهادوري
  • 29 يونيو 2024
0 الأسهم
0
0
0
0
0
الأسهم
0
0
0
0

مقدمة

Vue.js هو إطار عمل جافا سكريبت أمامي لبناء واجهات المستخدم. صُمم من البداية ليكون قابلاً للتطبيق تدريجيًا وللتكامل بسلاسة مع مكتبات أخرى أو مشاريع قائمة. هذا النهج يجعله مناسبًا للمشاريع الصغيرة، بالإضافة إلى تطبيقات الصفحة الواحدة المعقدة، عند استخدامه مع أدوات ومكتبات أخرى.

واجهة برمجة التطبيقات (API) هي واجهة برمجية تتيح لتطبيقين التواصل مع بعضهما البعض. غالبًا ما تعرض واجهة برمجة التطبيقات بيانات يمكن للمطورين الآخرين استخدامها في تطبيقاتهم، دون القلق بشأن قواعد البيانات أو اختلافات لغات البرمجة. غالبًا ما يسترد المطورون البيانات من واجهة برمجة تطبيقات تُرجع البيانات بصيغة JSON، والتي يدمجونها بعد ذلك في تطبيقات الواجهة الأمامية. يُعد Vue.js مثاليًا لاستخدام هذه الأنواع من واجهات برمجة التطبيقات.

في هذا البرنامج التعليمي، ستنشئ تطبيق Vue يستخدم واجهة برمجة تطبيقات Cryptocompare لعرض الأسعار الحالية لعملتين رقميتين رائدتين: بيتكوين وإيثريوم. بالإضافة إلى Vue، ستستخدم مكتبة Axios لإنشاء طلبات واجهة برمجة التطبيقات ومعالجة النتائج المُعادة. تُعد Axios رائعة لأنها تُحوّل بيانات JSON تلقائيًا إلى كائنات JavaScript وتدعم الوعود، مما يُسهّل قراءة الكود وتصحيح أخطائه. ولجعل كل شيء يبدو جيدًا، سنستخدم إطار عمل CSS Foundation.

المتطلبات الأساسية
  • محرر نصوص يدعم تمييز بناء جملة JavaScript، مثل Atom أو Visual Studio Code أو Sublime Text. هذه المحررات متوفرة على أنظمة Windows وmacOS وLinux.
  • تعرف على كيفية استخدام HTML وجافا سكريبت معًا. تعرّف على المزيد في كيفية إضافة جافا سكريبت إلى HTML.
  • التعرف على تنسيق بيانات JSON حيث يمكنك معرفة المزيد حول كيفية العمل مع JSON في JavaScript.
  • للبدء بطلبات واجهة برمجة التطبيقات (API). للحصول على دليل شامل حول العمل مع واجهات برمجة التطبيقات، ألقِ نظرة على كيفية استخدام واجهة برمجة تطبيقات الويب في بايثون 3. مع أن هذا الدليل مُصمم لبايثون، إلا أنه يُساعدك على فهم المفاهيم الأساسية للعمل مع واجهات برمجة التطبيقات.

الخطوة 1 - إنشاء تطبيق Vue أساسي

في هذه الخطوة، ستُنشئ تطبيق Vue أساسيًا. سنُنشئ صفحة HTML واحدة تحتوي على بعض البيانات الوهمية، والتي سنستبدلها لاحقًا ببيانات حية من واجهة برمجة التطبيقات. سنستخدم Vue.js لعرض هذه البيانات الوهمية. في هذه الخطوة الأولى، سنحتفظ بجميع الشيفرة البرمجية في ملف واحد.

باستخدام محرر النصوص الخاص بك، قم بإنشاء ملف جديد يسمى index.html.

في هذا الملف، أضف ترميز HTML التالي، الذي يُعرّف هيكل HTML ويستخرج إطار عمل CSS Foundation ومكتبة Vue.js من شبكة توصيل المحتوى (CDN). باستخدام شبكة توصيل المحتوى، لن تحتاج إلى تنزيل أي كود إضافي لبدء بناء تطبيقك.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<meta charset="utf-8">
<title>Cryptocurrency Pricing Application</title>
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
</body>
</html>

سطر {{ BTCinUSD }} هو عنصر نائب للبيانات التي يوفرها Vue.js، مما يسمح لنا بعرض البيانات بشكل معلن في واجهة المستخدم. لنُعرّف هذه البيانات.

أسفل العلامة مباشرة با Vue، این کد را برای ایجاد یک برنامه جدید Vue اضافه کنید و یک ساختار داده برای نمایش در صفحه تعریف کنید:

...
<script>
const { createApp } = Vue

createApp({
data() {
return {
BTCinUSD: 3759.91
}
}
}).mount('#app')
</script>

يُنشئ هذا الكود مثيل تطبيق Vue جديدًا، ويربطه بالعنصر الذي يحمل مُعرّف التطبيق. يستدعي Vue هذه العملية لتركيب التطبيق. نُعرّف مثيل Vue جديدًا ونُهيئه بتمرير كائن تكوين إليه. نُمرر إلى مثيل createApp كائن بيانات يُرجع القيمة BTCinUSD. بالإضافة إلى ذلك، نُستدعي دالة mount الخاصة بمثيل createApp باستخدام الوسيطة #app، والتي تُحدد مُعرّف العنصر الذي نريد تركيب هذا التطبيق عليه، وخيار بيانات يحتوي على البيانات التي نريد إتاحتها في العرض.

في هذا المثال، يحتوي نموذج البيانات لدينا على زوج واحد من المفاتيح والقيم، يحمل قيمة وهمية لسعر البيتكوين: {BTCinUSD: 3759.91}. تُعرض هذه البيانات في صفحة HTML أو عرضنا، حيث نُحيط المفتاح بأقواس مزدوجة متعرجة، كما يلي:

<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>

سنقوم في النهاية باستبدال هذه القيمة المشفرة ببيانات مباشرة من واجهة برمجة التطبيقات.

افتح هذا الملف في متصفحك. ستظهر لك البيانات الوهمية على الشاشة:

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

<script>
const { createApp } = Vue

createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>

ثم القسم <div class> استبدل الأسطر الموجودة بالأسطر التالية.

<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
<p>{{ BTCinEURO }}</p>
</div>
</div>
</div>
</div>

الآن، احفظ الملف وأعد تحميله في متصفحك. سيعرض التطبيق الآن سعر البيتكوين باليورو والدولار الأمريكي.

في هذه الخطوة، أنشئ تطبيق Vue الخاص بك باستخدام بيانات نموذجية لضمان تحميله. حتى الآن، قمنا بكل شيء في ملف واحد، لذا سنقسّم كل شيء الآن إلى ملفات منفصلة لتحسين قابلية الصيانة.

الخطوة 2 - فصل JavaScript وHTML من أجل الوضوح

لمعرفة كيفية عمله، وضعنا جميع الشيفرة البرمجية في ملف واحد. في هذه الخطوة، ستفصل شيفرة التطبيق إلى ملفين منفصلين: index.html وvueApp.js. يُعنى ملف index.html بالترميز، بينما يحتوي ملف JavaScript على منطق التطبيق. نحتفظ بالملفين في نفس المجلد.

أولاً، قم بتعديل ملف index.html وإزالة كود JavaScript واستبداله برابط إلى ملف vueApp.js.

ابحث عن هذا القسم من الملف:

...
<script src="https://unpkg.com/vue@3"></script>
<script>
const { createApp } = Vue

createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
...

وتغييره ليبدو مثل هذا:

...
<script src="https://unpkg.com/vue@3"></script>
<script src="vueApp.js"></script>
...

ثم قم بإنشاء ملف vueApp.js في نفس المجلد الذي يحتوي على ملف index.html.

في هذا الملف الجديد، قم بلصق نفس كود JavaScript الذي كان موجودًا في الأصل في ملف index.html، بدون علامة <code>. قرار دهید:

const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')

احفظ الملف وأعد تحميل ملف index.html في المتصفح. ستظهر لك نفس النتيجة السابقة.

هنا، فصلتَ التطبيق عن ترميزه. بعد ذلك، ستضيف بياناتٍ إضافية لدعم عملاتٍ مشفرة أكثر من بيتكوين.

الخطوة 3 - استخدام Vue للتكرار عبر البيانات

في هذه الخطوة، سوف تقوم بإعادة بناء البيانات وتغيير عرضها لإظهار أسعار البيتكوين والإيثريوم.

افتح ملف vueApp.js وقم بتغيير جزء الإرجاع من نموذج البيانات ليبدو بهذا الشكل:

const { createApp } = Vue

createApp({
data() {
return { 
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
}
}
}).mount('#app')

أصبح نموذج بياناتنا أكثر تعقيدًا بفضل بنية بيانات متداخلة. لدينا الآن مفتاح "النتائج" يحتوي على سجلين: أحدهما لسعر البيتكوين والآخر لسعر الإيثريوم. يسمح لنا هذا الهيكل الجديد بتقليل التكرار في عرضنا، كما أنه يُشبه البيانات التي نحصل عليها من واجهة برمجة تطبيقات Cryptocompare.

حفظ الملف.

الآن دعونا نغير علاماتنا لمعالجة البيانات بطريقة أكثر تخطيطًا.

افتح ملف index.html وابحث عن هذا القسم من الملف الذي نعرض فيه سعر البيتكوين:

...
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
{{BTCinUSD}}
</div>
</div>
</div>

<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
{{BTCinEURO}}
</div>
</div>
</div>

</div>
...

استبدله بهذا الكود، الذي يتكرر على مجموعة البيانات التي قمت بتحديدها.

...
<div class="columns medium-4" v-for="(result, index) in results">
<div class="card">
<div class="card-section">
<p> {{ index }} </p>
</div>
<div class="card-divider">
<p>$ {{ result.USD }}</p>
</div>
<div class="card-section">
<p> &#8364 {{ result.EUR }}</p>
</div>
</div>
</div>
...

يستخدم هذا الكود عبارة v-for، التي تعمل كحلقة for. تتكرر هذه العبارة على جميع أزواج المفتاح-القيمة في نموذج البيانات لدينا، وتعرض بيانات كل منها.

عندما تقوم بإعادة تحميل المتصفح، سوف ترى الأسعار السخيفة:

يتيح لنا هذا التعديل إضافة عملة جديدة إلى بيانات النتائج في vueApp.js وعرضها على الشاشة دون تغييرات أخرى.

أضف إدخالاً ساخراً آخر إلى مجموعة البيانات مع معلومات مميزة لتجربة ذلك:

const { createApp } = Vue

createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, 
"ETH": {"USD":281.7,"EUR":236.25},
"NEW Currency":{"USD":5.60,"EUR":4.70}}
}
}
}).mount('#app')

أدخل الفاصلة بعد إدخال الإيثريوم. احفظ الملف.

إذا قمت الآن بتحميل الصفحة في متصفح الويب، فسترى الإدخال الجديد معروضًا:

عندما نقوم بفحص البيانات برمجيًا، لا نحتاج إلى إضافة أعمدة جديدة يدويًا في العلامات.

هنا، استخدمتَ بياناتٍ نموذجيةً لعرض أسعار عدة عملات. الآن، لنحصل على البيانات الفعلية باستخدام واجهة برمجة تطبيقات Cryptocompare.

الخطوة 4 - الحصول على البيانات من واجهة برمجة التطبيقات

في هذه الخطوة، يمكنك استبدال البيانات المحاكاة ببيانات مباشرة من واجهة برمجة تطبيقات Cryptocompare لعرض أسعار Bitcoin وEthereum على صفحة الويب بالدولار الأمريكي واليورو.

للحصول على بيانات صفحتنا، نطلب الرابط https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR الذي يطلب بيتكوين وإيثريوم بالدولار الأمريكي واليورو. تُرجع هذه الواجهة استجابة JSON.

استخدم curl لإرسال طلب إلى واجهة برمجة التطبيقات لعرض الاستجابة في جلسة المحطة الطرفية:

curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'

سوف ترى النتيجة مثل هذا:

Output
{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}

هذه النتيجة مشابهة لنموذج البيانات المُرمَّز الذي استخدمته في الخطوة السابقة، ولكن بالقيم الحالية لعملتي بيتكوين وإيثريوم. كل ما علينا فعله الآن هو تعديل البيانات بطلب هذا الرابط من تطبيقنا.

للطلب، نستخدم دالة mount() في Vue مع دالة GET في مكتبة Axios لجلب البيانات وتخزينها في مصفوفة النتائج في نموذج البيانات. تُستدعى دالة mount عند تثبيت تطبيق Vue على عنصر. بعد تثبيت تطبيق Vue، نُرسل الطلب إلى واجهة برمجة التطبيقات (API) ونُخزّن النتائج. تُخطر صفحة الويب بالتغيير، وتظهر القيم على الصفحة.

أولاً، افتح index.html وقم بتحميل مكتبة Axios عن طريق إضافة نص برمجي أسفل السطر الذي وضعت فيه Vue:

...
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vueApp.js"></script>
...

احفظ الملف، ثم افتح vueApp.js.

قم بتعديل وتحديث vueApp.js لطلب واجهة برمجة التطبيقات وملء نموذج البيانات بالنتائج.

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue

createApp({ 
data() {
return {
results:[]
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
}).mount('#app')

لاحظ أننا حذفنا القيمة الافتراضية للنتائج واستبدلناها بمصفوفة فارغة. عند تحميل تطبيقنا لأول مرة، لن يكون لدينا أي بيانات، لكن عرض HTML يتوقع تكرار بعض البيانات عند إعادة تحميله.

تستخدم دالة axios.get وعدًا. عندما تُرجع واجهة برمجة التطبيقات البيانات بنجاح، يُنفَّذ الكود داخل الكتلة، وتُخزَّن البيانات في متغير النتائج.

احفظ الملف وأعد تحميل صفحة index.html في متصفحك. هذه المرة، سترى السعر الحالي للعملات المشفرة.

إذا لم تجد شيئًا، يمكنك مراجعة كيفية استخدام وحدة تحكم مطوري جافا سكريبت واستخدامها لتصحيح أخطاء الكود. قد يستغرق تحديث الصفحة ببيانات واجهة برمجة التطبيقات (API) دقيقة واحدة.

يمكنك أيضًا زيارة مستودع Github هذا الذي يحتوي على ملفات HTML وJS التي يمكنك تنزيلها للتحقق المتبادل. كما يمكنك استنساخ المستودع.

في هذه المرحلة، قمت بتعديل تطبيقك لاستدعاء البيانات المباشرة للمراجعة.

نتيجة

في أقل من خمسين سطرًا، أنشأتَ تطبيقًا مستهلكًا لواجهة برمجة التطبيقات (API) باستخدام ثلاث أدوات فقط: Vue.js، وAxios، وواجهة برمجة تطبيقات Cryptocompare. تعلّمتَ كيفية عرض البيانات على الصفحة، وتكرار النتائج، واستبدال البيانات الثابتة بنتائج واجهة برمجة التطبيقات.

بعد أن فهمت الأساسيات، يمكنك إضافة وظائف إضافية إلى تطبيقك. عدّل هذا التطبيق لعرض عملات إضافية، أو استخدم التقنيات التي تعلمتها في هذا البرنامج التعليمي لإنشاء تطبيقات ويب أخرى باستخدام واجهة برمجة تطبيقات مختلفة.

في هذه المقالة:
,,
تم كتابة التدوينة بواسطة:
يتبع
اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

المقال السابق
المقال التالي
قد يعجبك أيضاً