رفع عدة صور عبر واجهة ووردبريس REST API من تطبيق فلاتر

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

التحضير لتحميل الصور

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

if (_image.length > 6) {
  Toasts.show("Upload a max of 6 IMAGES");
  return;
}

إعداد البيانات للتحميل

بعد التحقق من عدد الصور، يجب إعداد البيانات التي سيتم إرسالها إلى واجهة REST API الخاصة بووردبريس. يتم استخدام كائن FormData لتجميع البيانات والملفات.

final formData = FormData.fromMap({
  'name': 'dio',
  'date': DateTime.now().toIso8601String(),
});

ثم، نقوم بإضافة كل صورة إلى البيانات:

for (var imageFile in _image) {
  formData.files.addAll([
    MapEntry("images[]", await MultipartFile.fromFile(imageFile.path)),
  ]);
}

إرسال الطلب إلى REST API

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

dynamic headers = {
  "Accept": "application/json",
  "Content-type": "application/json"
};

ثم قم بإرسال الطلب ويتم التعامل مع الاستجابة كما يلي:

try {
  var response = await dio.post(
    "${Constants.baseUrl}/clients/checkin",
    options: Options(headers: headers),
    data: formData,
  );
} catch (e) {
  Toasts.show("Error: $e");
}

استقبال الصور في ووردبريس

على جانب ووردبريس، قم بتسجيل نقطة نهاية جديدة في واجهة REST API:

add_action('rest_api_init', 'wpmam_rest_user_endpoints');
function wpmam_rest_user_endpoints($request) {
    register_rest_route('wp-mobile-app-manager/v2', "clients/checkin", array(
        "methods" => array("POST", "GET", "PUT", "DELETE", "PATCH"),
        "callback" => "wpmam_mobile_app_checkin_clients"
    ));
}

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

$images = $parameters['files']['images']; // تحقق من الصيغة الصحيحة لهذا السطر.

رفع الصور إلى المكتبة

لرفع الصور، يمكنك استخدام دالة مخصصة تتعامل مع الملفات:

foreach ($images as $key => $value) {
    // رمز لتحميل الصورة باستخدام wp_upload_bits أو دالة مشابهة
}
wpmap_upload_files($request = null, $user_id = 0);

بهذا الشكل، ستتمكن من إنشاء واجهة REST API تقوم بتحميل عدة صور من تطبيق Flutter إلى موقع ووردبريس بكل سهولة.

الخلاصة

يمكن أن تكون عملية تحميل الصور إلى موقع ووردبريس من خلال واجهة REST API عبر تطبيق Flutter تحديًا، لكن بإتباع الخطوات الموضحة أعلاه، يمكنك تحقيق ذلك بسهولة. لا تتردد في تجربة الأساليب المختلفة لتحسين وزيادة كفاءة استخدامك لREST API. في النهاية، يتوجب عليك التأكد من أن الصور تم تحميلها بنجاح داخل مكتبة ووردبريس الخاصة بك.