كيف تطور تطبيق ويب لمقارنة العملات

من الشائع جدا الحاجة الى تطوير موقع او تطبيق لمقارنة العملات المحلية والعالمية

في هذه المساهمة سنتحدث كيف يمكن تطوير موقع بسيط للمقارنة بين اربع عملات

بداية دعونا نلقي نظرة للنتيجة المتوقعة لهذا المشروع :

طبعا باعتبار ان لديك ملفات بدئية لتطوير مشروع html ,css ,javascript

الخطوة الأولى :تصميم الواجهة

نبدأ باضافة عنصر h1

<h1>Currency Exchange</h1>

ثم نقوم باضافة جدول table يحتوي على اربعة صفوف حيث الصف الاول العنوان (العملة المقارن بها) وفي حالتنا اخترت الدولار الامريكي

<table>
  <tr>
    <th>US Dollar</th>
    <th>1.000</th>
    <th>USD</th>
 
  </tr>
  <tr>
    <td>Euro</td>
    <td id="eur">1.000</td>
 <td>EUR</td>
  </tr>
  <tr>
    <td>Canadian Dollar</td>
    <td id="cad">1.000</td>
   <td>CAD</td>
  </tr>
    <tr>
    <td>Swiss Franc</td>
    <td id="chf">1.000</td>
   <td>CHF</td>
  </tr>
  
</table>

بعد ذلك نقوم باضافة div لاحتواء المخطط البياني لاحقا

<div  id="container" class="container">
  <canvas id="myChart"></canvas>
</div>

وبذلك نكون قد انتهينا من اضافة كود الhtml ولكنه بحاجة لبعض الstyling

html {
  height: 100%;
  width: 100%;
}




table,  td {
  border:1px solid black;
  margin:auto;
}


.container{
  width:500px;
  height:500px;
  margin:auto;
  margin-top:30px;
}
*{
  font-family: Arial, Helvetica, sans-serif;
}
h1{
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

الخطوة 2 :جلب المعلومات data من الAPI :

يوجد عدة خيارات فيما يتعلق بال API :

ولكن وجدت هذا الAPI خيار بسيط وسهل ولكن مشكلته هي عدم دعمه لبعض العملات العربية ولكنني ساستخدمه لغاية تعليمية :

كمثال على استخدام هذا ال API لجلب مقدار 1 يورور وما يعادلها بالدولار الامريكي نقوم بارسال معاملات الرابط API queries باستخدام الدالة fetch built-in

async function fetchData(){
const host = 'api.frankfurter.app';
let resp=await fetch(`https://$%7Bhost%7D/latest?amount=1&from=EUR&to=USD%60)
const data=await resp.json()
console.log(data.rates.USD)//هنا يطبع مقارنة النسبة بين الدولار واليورو
} 
fetchData()

وهنا نلاحظ أننا استخدمنا الكملة المفتاحية async وذلك لان عملية جلب البيانات هي عملية asynchronised

وقد قمنا باستخدام الكلمة المفتاحية await من اجل انتظار اتمام العملية

بعد الحصول على الاستجابة قمنا بتحويل الاستجابة الى كائن جافا سكريبت باستخدام الدالة json

والان كل ما علينا هو القيام بنفس العملية ولكن لعدة عملات وهنا يجب حفظ النتيجة ضمن مصفوفة data

async function fetchData(){
let data=[1]
const host = 'api.frankfurter.app';
let resp=await fetch(`https://$%7Bhost%7D/latest?amount=1&from=EUR&to=USD%60)
const data1=await resp.json()
data.push(data1.rates.USD)
 resp=await fetch(`https://$%7Bhost%7D/latest?amount=1&from=CAD&to=USD%60)
const data2=await resp.json()
data.push(data2.rates.USD)
 resp=await fetch(`https://$%7Bhost%7D/latest?amount=1&from=CHF&to=USD%60)
const data3=await resp.json()
data.push(data3.rates.USD)
}
fetchData()

بعد ذلك يجب علينا تعديل الواجهة data binding حسب المعلومات :

  document.getElementById("eur").innerHTML=data[1]
  document.getElementById("cad").innerHTML=data[2]
  document.getElementById("chf").innerHTML=data[3]

وبذلك تكون النتيجة التي حصلنا عليها حتى الان :

الخطوة التالتة :رسم المخطط البياني chart :

للقيام بالعملية يوجد عدة خيارات وعدة مكتبات وهنا سوف نغطي مكتبة chartjs

الخطوة الاولى اضافة رابط cdn الخاص بالمكتبة ضمن كود ال html وهنا يجب اضافته قبل الtag script حصرا حتى تعمل المكتبة ضمن السكريبت

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="script.js"></script>

بعدها كل ما علينا اضافة الكود المقدم من مكتبة شارت مع تعديل الlabels

const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['USD', 'EUR', 'CAD', 'CHF'],
      datasets: [{
        label: 'Exchange ratio',
        data: data,
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

وبذلك نكون حصلنا على النتيجة المطلوبة

أتمنى أن تكون المساهمة مفيدة بالنسبة لك

قد يعجبك ايضا :https://javascriptmistakes.com