كيفية نشر دوال سحابية ديناميكية في React وReact Native باستخدام Easybase

مقدمة إلى الدوال السحابية في تطبيقات الواجهة الحديثة

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

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

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

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

إعداد مشروع React أو React Native من البداية

سنبدأ بإنشاء مشروع جديد. أسهل طريقة هي استخدام الأداة npx، والتي تأتي عادةً مع تثبيت Node.js.

إنشاء مشروع React

npx create-react-app my-cloud-app

إنشاء مشروع React Native

npx create-react-native-app

بعد انتهاء التثبيت، انتقل إلى مجلد المشروع ثم شغّل التطبيق:

npm run start

هذا سيمنحك مشروعاً أولياً جاهزاً للبدء في التطوير.

بناء واجهة تجريبية لجلب سعر عملة رقمية

سننشئ مثالاً بسيطاً: واجهة تسمح للمستخدم بإدخال رمز عملة رقمية مثل BTC أو ETH، ثم يتم استدعاء دالة سحابية تعيد السعر الحالي بالدولار الأمريكي.

افتح الملف src/App.js واحذف المحتوى الموجود داخل العنصر الجذري المناسب، ثم أضف العناصر التالية:

• حقل إدخال نصي.
• نص يوجه المستخدم لإدخال رمز العملة.
• زر لتنفيذ الطلب.
• نص لعرض النتيجة لاحقاً.

يمكن أن تصبح الدالة App() بالشكل التالي:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Enter Cryptocurrency symbol:</p>
        <input placeholder="BTC, ETH, etc." type="text" />
        <button>Go</button>
        <p>Result:</p>
      </header>
    </div>
  );
}

بعد حفظ الملف، ستظهر لك واجهة بسيطة تحتوي على حقل الإدخال والزر.

إضافة الحالة التفاعلية باستخدام React

لكي يتعامل التطبيق مع إدخال المستخدم ويُنفّذ إجراءً عند النقر على الزر، نحتاج إلى تحويل الواجهة إلى واجهة تفاعلية تعتمد على الحالة. سنستخدم الخطاف useState لتخزين قيمة الإدخال، ثم ننشئ دالة غير متزامنة باسم buttonCallback().

في البداية، يمكن أن تكتفي هذه الدالة بطباعة القيمة المُدخلة داخل وحدة التحكم:

import { useState } from 'react';
import './App.css';

function App() {
  const [inputVal, setInputVal] = useState("");

  async function buttonCallback() {
    console.log(inputVal);
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>Enter Cryptocurrency symbol:</p>
        <input
          placeholder="BTC, ETH, etc."
          type="text"
          value={inputVal}
          onChange={e => setInputVal(e.target.value)}
        />
        <button onClick={buttonCallback}>Go</button>
        <p>Result:</p>
      </header>
    </div>
  );
}

export default App;

كيفية نشر الدالة السحابية عبر Easybase

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

اختر قالب Hello World وأكمل الخطوات. سيؤدي ذلك إلى إنشاء دالة أولية تعيد قيمة message القادمة من جسم الطلب.

توفّر المنصة محرر أكواد مدمجاً من نوع Monaco، ما يسمح لك بتعديل الدالة مباشرة من داخل المتصفح.

إضافة مكتبة لاستدعاء واجهة برمجية خارجية

سنحتاج إلى مكتبة لإرسال طلبات HTTP إلى خدمة خارجية. افتح ملف package.json وأضف الحزمة cross-fetch بالإصدار المناسب. عند حفظ الدالة، ستقوم المنصة بتثبيت الحزمة تلقائياً.

بعد ذلك، افتح الملف handler.js وأضف السطر التالي في أعلاه:

var fetch = require('cross-fetch');

قراءة رمز العملة من جسم الطلب

عند استدعاء الدالة من الواجهة الأمامية، سنمرر كائناً يحتوي على المفتاح cryptoSymbol. داخل الدالة، يمكن الوصول إلى هذه القيمة عبر event.body:

const cryptoSymbol = event.body.cryptoSymbol;

إنشاء رابط الطلب إلى واجهة الأسعار

سنستخدم واجهة Cryptonator API للحصول على السعر الحالي. نمط الرابط يكون كالتالي:

https://api.cryptonator.com/api/ticker/PAIR_NAME

حيث يتم استبدال PAIR_NAME بالقيمة المناسبة مثل btc-usd أو eth-usd. وبما أننا نريد السعر بالدولار، سنضيف اللاحقة -usd إلى رمز العملة.

const nexchangeUrl = `https://api.cryptonator.com/api/ticker/${cryptoSymbol}-usd`;

الكود الكامل للدالة السحابية

فيما يلي قالب عملي كامل للدالة:

var fetch = require('cross-fetch');

module.exports = async (event, context) => {
  const cryptoSymbol = event.body.cryptoSymbol;
  const nexchangeUrl = `https://api.cryptonator.com/api/ticker/${cryptoSymbol}-usd`;

  const res = await fetch(nexchangeUrl);
  const resJson = await res.json();

  if (resJson.success) {
    return context.succeed(resJson.ticker.price);
  } else {
    return context.fail("Symbol does not exist");
  }
};

تجدر الإشارة إلى أن context.succeed() وcontext.fail() تقومان بإرجاع النتيجة إلى العميل الذي استدعى الدالة.

اختبار الدالة السحابية قبل ربطها بالتطبيق

بعد حفظ الدالة، يمكنك فتح قسم Deploy وتجربتها مباشرة. أرسل في جسم الطلب قيمة مثل:

{
  "cryptoSymbol": "BTC"
}

إذا ظهرت النتيجة بشكل صحيح، فهذا يعني أن الدالة تعمل كما ينبغي.

قد تلاحظ أن أول استدعاء يستغرق وقتاً أطول قليلاً، وهذا طبيعي بسبب ما يُعرف باسم cold start. يحدث ذلك عندما تكون الدالة غير مستخدمة منذ فترة، فيتم تحميلها من جديد عند أول طلب.

ربط التطبيق بمكتبة Easybase في React

انتقل الآن إلى مشروع React أو React Native وثبّت مكتبة easybase-react:

cd my-cloud-app
npm install easybase-react

بعد التثبيت، افتح الملف src/App.js واستورد الدالة callFunction:

import { callFunction } from 'easybase-react';

تستقبل هذه الدالة عادةً معاملين:

1. مسار الدالة أو route، ويمكن الحصول عليه من قسم Deploy.
2. كائن يمثل جسم الطلب، ويمكن قراءته داخل الدالة من خلال event.body.

استدعاء الدالة السحابية من الواجهة

يمكنك استخدام callFunction() بطريقتين: إما باستخدام await أو عبر then().

const result = await callFunction('YOUR-CUSTOM-ROUTE', {
  cryptoSymbol: 'BTC'
});
console.log(result);

// OR
callFunction('YOUR-CUSTOM-ROUTE', {
  cryptoSymbol: 'BTC'
}).then(result => console.log(result));

عرض النتيجة داخل واجهة المستخدم

لعرض السعر المسترجع، سنضيف حالة جديدة عبر useState لتخزين قيمة النتيجة داخل المتغير resultVal. ثم نُحدّثه داخل الدالة buttonCallback().

async function buttonCallback() {
  const result = await callFunction('YOUR-CUSTOM-ROUTE', {
    cryptoSymbol: inputVal
  });

  setResultVal(`${inputVal} currently costs $${result}`);
}

وسيتحول عنصر العرض إلى:

<p>Result: {resultVal}</p>

الكود الكامل للتطبيق بعد الربط مع الدالة السحابية

فيما يلي نسخة مكتملة من التطبيق بعد ربطه مع Easybase:

import { useState } from 'react';
import './App.css';
import { callFunction } from 'easybase-react';

function App() {
  const [inputVal, setInputVal] = useState("");
  const [resultVal, setResultVal] = useState("");

  async function buttonCallback() {
    const result = await callFunction('YOUR-CUSTOM-ROUTE', {
      cryptoSymbol: inputVal
    });

    setResultVal(`${inputVal} currently costs $${result}`);
  }

  return (
    <div className="App">
      <header className="App-header">
        <p>Enter Cryptocurrency symbol:</p>
        <input
          placeholder="BTC, ETH, etc."
          type="text"
          value={inputVal}
          onChange={e => setInputVal(e.target.value)}
        />
        <button onClick={buttonCallback}>Go</button>
        <p>Result: {resultVal}</p>
      </header>
    </div>
  );
}

export default App;

مزايا هذا الأسلوب في بناء التطبيقات

الاعتماد على الدوال السحابية في تطبيقات React وReact Native يوفر عدداً من الفوائد العملية:

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

كما أن مكتبة easybase-react لا تقتصر على استدعاء الدوال فقط، بل يمكن استخدامها أيضاً في بعض المهام الأخرى مثل المصادقة وإدارة مكونات إضافية داخل التطبيق.

أفضل ممارسات لتحسين الجودة والاعتمادية

التحقق من صحة المدخلات

قبل إرسال رمز العملة إلى الدالة السحابية، يُفضّل تنظيف المدخلات والتأكد من أنها تتكون من أحرف متوقعة فقط، مثل تحويلها إلى أحرف كبيرة باستخدام toUpperCase().

إضافة معالجة للأخطاء

من الأفضل إحاطة استدعاء callFunction() بكتلة try...catch حتى يتم عرض رسالة واضحة للمستخدم إذا تعذر الوصول إلى الخدمة أو إذا كان الرمز غير صحيح.

تحسين تجربة المستخدم

يمكن إضافة حالة تحميل مثل loading لتعطيل الزر مؤقتاً أثناء تنفيذ الطلب، مع عرض رسالة مثل: جارٍ جلب السعر الآن.

مراعاة تغيّر الواجهات البرمجية

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

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

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