بناء أداة توقعات الطقس الاحترافية الخاصة بك: دليل عملي باستخدام واجهة برمجة تطبيقات الطقس (API)

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

لماذا أصبحت تطبيقات الطقس ضرورة عصرية؟

تُقدم تطبيقات توقعات الطقس الغنية بالميزات قيمة هائلة للعديد من القطاعات والصناعات. فيما يلي بعض الفوائد البارزة التي توفرها هذه التطبيقات:

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

المتطلبات الأساسية لبناء تطبيق توقعات الطقس

لتحقيق النجاح في بناء تطبيق توقعات الطقس الخاص بك، ستحتاج إلى توفر بعض الأدوات والمعارف الأساسية. إليك قائمة بما يلزمك:

• إلمام جيد بلغة JavaScript وبيئة التشغيل Node.js.
• محرر نصوص مثل Notepad أو بيئة تطوير متكاملة (IDE)؛ يُفضل استخدام Visual Studio Code لتجربة تطوير أفضل.
• الوصول إلى واجهة برمجة تطبيقات (API) موثوقة للطقس، مثل ClimaCell.
• الوصول إلى خدمة خرائط لدمج الخرائط التفاعلية.
• معرفة أساسية بلغات HTML و CSS وإطار عمل Bootstrap لتصميم واجهة المستخدم.

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

نظرة عامة على واجهة برمجة تطبيقات الطقس ClimaCell

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

عملية بناء أداة توقعات الطقس

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

تثبيت Node.js وإنشاء مشروع جديد

لهذا المشروع، سنعتمد على Node.js، وهي إحدى بيئات التشغيل الأكثر شعبية للغة JavaScript. تُمكّن Node.js المطورين من بناء تطبيقات ويب سريعة وفعالة، وتوفر مجموعة واسعة من المكتبات والوحدات النمطية لإنشاء تطبيقات ويب متقدمة. إذا لم تكن Node.js مثبتة على جهازك، يمكنك تنزيلها وتثبيتها من الموقع الرسمي.

بعد التثبيت، سنستخدم الأمر التالي لتهيئة npm، وهو مدير الحزم الافتراضي المستخدم في Node.js:

$ npm init

سيؤدي هذا الأمر إلى إنشاء مشروعنا، وسيُطلب منك إدخال بعض التفاصيل مثل اسم الحزمة، الوصف، مستودع Git، وغيرها.

بعد ذلك، سنقوم بتثبيت الوحدات النمطية (modules) اللازمة لتشغيل مشروعنا. لإنشاء هيكل (skeleton) تطبيق Node.js، سنستخدم Express، وهو إطار عمل قوي لبناء تطبيقات الويب باستخدام Node.js:

$ npm install express

يساعد تثبيت إطار عمل Express في تشغيل الخادم، ومعالجة طلبات العميل، وربط قالب HTML الصحيح بالاستجابة. بعد ذلك، سنقوم أيضًا بتثبيت Unirest، وهو حل بسيط ولكنه قوي يسمح لك بإنشاء طلبات (requests) برمجية. سيساعدنا هذا في إرسال الطلبات إلى واجهة برمجة تطبيقات ClimaCell والتعامل مع الاستجابات. استخدم هذا الأمر:

npm install unirest

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

express --view=pug weather-app-nodejs

يجب أن ترى الآن مخرجات مشابهة لما يلي في سطر الأوامر، مما يؤكد إنشاء هيكل التطبيق:

الحصول على مفتاح واجهة برمجة تطبيقات ClimaCell للطقس

للوصول إلى واجهة برمجة تطبيقات ClimaCell API، ستحتاج أولاً إلى التسجيل للحصول على حساب على صفحتهم الرسمية.

بمجرد إنشاء حسابك، قم بتسجيل الدخول إلى لوحة تحكم Microweather API الخاصة بهم، والتي تبدو كالتالي:

في لوحة التحكم، انقر على قسم “المراجع” (references) للتحقق من نقاط نهاية (API endpoints) الواجهة. كما ترى، تحتوي واجهة برمجة تطبيقات ClimaCell على عدد من نقاط النهاية التي توفر توقعات قصيرة الأجل، وتوقعات كل ساعة، وبيانات في الوقت الفعلي، والمزيد.

تجدر الإشارة إلى أن كل نقطة نهاية تحتوي على مقتطف الكود الخاص بها. على سبيل المثال، إليك مقتطف كود Node.js للحصول على بيانات الطقس في الوقت الفعلي:

الكود الأولي (Raw Code) لهذا المقتطف:

router.post('/weather', function(req, res, next){

  let city = req.body.city;

  url = url+city+"&"+appId;

  request(url, function (error, response, body) {

    body = JSON.parse(body);

    if(error && response.statusCode != 200){

        throw error;

    }

    let country = (body.sys.country) ? body.sys.country : '';

    let var request = require("request");

var options = {
  method: 'GET',
  url: 'https://api.climacell.co/v3/weather/realtime',
  qs: {apikey: '9efRx8KrGKa6ME0ORWIJz7TaNjuRQAvb'}
};

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
}); = "For city "+city+', country '+country;

    res.render('index', {body : body, forecast: forecast});

  })

});

تعديل التطبيق وتصميم الواجهة

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

سنبدأ بتعديل ملفاتنا عن طريق إضافة إطار عمل Bootstrap إلى ملف layout.pug. افتح دليل views وأدرج مقتطف الكود التالي في الملف:

الكود الأولي (Raw Code) لهذا المقتطف:

doctype html
html(lang="en")
  head
    title Weather Forecast Tool using Climacell API
    meta(charset="utf-8")
    meta(name="viewport" content="width=device-width, initial-scale=1")
    link(rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")
    script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js")
    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js")
  body
    block content

بعد ذلك، سنقوم بإنشاء نموذج (form) عن طريق إضافة المقتطف أدناه إلى ملف index.pug.

لاحظ كيف نستخدم طريقة HTTP POST لإرسال البيانات إلى الخادم. يقوم الكود أعلاه أيضًا بتعيين المعامل action إلى مسار weather route ويضيف حقل إدخال النص باسم “city“. كما يتم إضافة زر إدخال لجلب بيانات الطقس.

الآن، سنقوم بإنشاء جدول HTML أسفل النموذج مباشرة لعرض سجلات الطقس المسترجعة.

الكود الأولي (Raw Code) لهذا المقتطف:

.row
    .col-md-12
        p
            br
            br
            strong Weather Forecast #{forecast}
        table.table
            thead
                tr
                    th Longitude / Latitude

                    th Pressure
                    th Temprature
                    th Humidty
            tbody
                if body
                    tr
                        td
                            #{body.coord.lon} / #{body.coord.lon}
                        td
                            #{body.main.pressure}
                        td
                            #{body.main.temp}
                        td
                            #{body.main.humidity}
                else
                    tr
                        td(colspan="6")
                            | Enter city name and click Fetch Weather button

يؤدي إدراج مقتطف الكود أعلاه إلى إنشاء جدول يبدو كالتالي، جاهزًا لعرض بيانات الطقس:

استدعاء واجهة برمجة تطبيقات ClimaCell

لإرسال الطلبات إلى واجهة برمجة تطبيقات ClimaCell API، يجب علينا أولاً تثبيت الوحدة النمطية request. استخدم الأمر التالي:

npm i request --save

بعد ذلك، سنضيف بيانات اعتماد ClimaCell API في ملف index.js. افتح الملف الموجود في دليل routes وأضف مفتاح API الذي حصلت عليه من لوحة تحكم ClimaCell:

إليك الكود اللازم لإضافة بيانات اعتماد API:

الكود الأولي (Raw Code) لهذا المقتطف:

let url    = 'https://climacell-microweather-v1.p.rapidapi.com/weather/realtime'
let appId  = 'appid=YOUR API KEY';
let units  = '&units=metric';
var request = require('request');

بعد إضافة بيانات اعتماد API، سنقوم بتحديث مسار index. يتم ذلك عن طريق استبدال قسم الكود في مسار “/” داخل ملف index.js.

الكود الأولي (Raw Code) لهذا المقتطف:

// GET home page.
router.get('/', function(req, res, next) {
  res.render('index', {'body':'', forecast: ''});
});

ننهي هذه الخطوة بإنشاء مسار weather في ملف index.js.

الكود الأولي (Raw Code) لهذا المقتطف:

router.post('/weather', function(req, res, next){

  let city = req.body.city;

  url = url+city+"&"+appId;

  request(url, function (error, response, body) {

    body = JSON.parse(body);

    if(error && response.statusCode != 200){

        throw error;

    }

    let country = (body.sys.country) ? body.sys.country : '';

    let forecast = "For city "+city+', country '+country;

    res.render('index', {body : body, forecast: forecast});

  })

});

يمكّن مقتطف الكود هذا من نشر البيانات من نموذج الإدخال إلى مسار index. بمجرد أن يدخل المستخدم اسم المدينة، يتم تعيينه للمتغير city باستخدام كائن request. بعد ذلك، يتم إلحاق عنوان URL باسم المدينة ومعرف appId، ويتم إرسال الطلب إلى واجهة برمجة تطبيقات ClimaCell API. يتم إرجاع استجابة خادم ClimaCell API كملف JSON، والذي يتم تحليله بعد ذلك وتغذيته إلى قالب الإخراج.

على سبيل المثال، إذا كان المستخدم يبحث عن توقعات الطقس لمدينة بوسطن (Boston)، فسيعرض التطبيق ما يلي:

ملاحظة: درجة الحرارة في هذا المثال معروضة بوحدة كلفن (Kelvin) وتساوي تقريبًا 50 درجة فهرنهايت (°F) أو 10 درجات مئوية (°C).

إضافة الخرائط لتصور البيانات

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

لاستخدام Mapbox، قم بالتسجيل في موقعهم الإلكتروني واطلع على واجهة برمجة التطبيقات (API) الخاصة بهم. تتوفر تكاملات لأنظمة Android و iOS والويب و Unity. في حالتنا هذه، سنختار تكامل الويب (Web integration) لأداتنا. يمكننا إما تثبيت Mapbox CDN أو استخدام حزمة الوحدات النمطية (module bundler). دعنا نستخدم حزمة الوحدات النمطية.

الخطوة الأولى هي تثبيت الحزمة باستخدام الأمر التالي:

npm install Mapbox-gl –save

بعد ذلك، نضيف ملف GL JS CSS في ملف HTML عن طريق تضمين مقتطف الكود هذا في قسم <head>:

<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />

يمكننا الآن إضافة الخريطة إلى تطبيقنا. للقيام بذلك، استخدم مقتطف الكود أدناه:

الكود الأولي (Raw Code) لهذا المقتطف:

var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

mapboxgl.accessToken = 'pk.eyJ1IjoiZGlja3Nvbi1tIiwiYSI6ImNrOXphd3MzZDBlMXYzbHFwM2kwbmlvbmkifQ.VE3RRbb8l78w9kxfmh_9ew';
var map = new mapboxgl.Map({
container: 'CONTAINER_ELEMENT ID',
style: 'mapbox://styles/mapbox/streets-v11'
});

يمكنك اختيار مكان وضع الخريطة عن طريق استبدال “CONTAINER_ELEMENT_ID” بمعرف العنصر الذي تريد وضع الخريطة فيه. إليك مثال لخريطة تم إنشاؤها باستخدام Mapbox:

الخطوات المستقبلية لتعزيز التطبيق

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

• إضافة وظيفة بحث متقدمة لتحسين تجربة المستخدم.
• تحسين مظهر واجهة المستخدم (UI) وتصميمها لتكون أكثر جاذبية وسهولة في الاستخدام.
• إمكانية الاستعلام عن بيانات الطقس باستخدام المعرف (ID) أو الاسم.
• عرض قائمة بالمدن المستهدفة ومعرفاتها (IDs) لتسهيل الاختيار.
• إضافة معلمات (parameters) لعرض بيانات طقس إضافية ومفصلة (مثل سرعة الرياح، مؤشر الأشعة فوق البنفسجية، إلخ).
• دمج إشعارات في الوقت الفعلي وإشارات تحذيرية للظروف الجوية القاسية.

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

الخلاصة التقنية

يُظهر هذا الدليل العملي مدى سهولة وفعالية دمج واجهات برمجة تطبيقات الطقس (Weather APIs) مثل ClimaCell في تطبيقات الويب باستخدام Node.js وإطار عمل Express. من خلال بضع خطوات بسيطة، يمكن للمطورين بناء أدوات قادرة على جلب وعرض بيانات الطقس في الوقت الفعلي، مما يوفر قيمة كبيرة للمستخدمين في مختلف المجالات. إن القدرة على تخصيص هذه الأدوات وإضافة ميزات متقدمة مثل الخرائط التفاعلية من Mapbox والإشعارات تفتح آفاقًا واسعة لإنشاء تطبيقات طقس متكاملة تلبي احتياجات المستخدمين المتزايدة في عالم يتسم بتقلبات مناخية سريعة.