أمثلة وتطبيقات EID CLOUD - CDN hub

دليل كامل باللغة العربية يشرح كيفية دمج واستخدام خدمات معالجة الصور، تحويل الفيديو، وترحيل البريد الإلكتروني في موقعك مباشرة وبكل سهولة.

🚀 تحميل ملف Postman Collection
🖼️

1. خدمة معالجة وتصغير الصور (Image CDN)

تعمل هذه الخدمة عن طريق إرسال طلب GET بسيط يحتوي على رابط الصورة الأساسية مع المقاسات المطلوبة. ستقوم الخدمة بتحميل الصورة ومعالجتها وضغطها بصيغة WebP الحديثة بدقة 81%، وحفظها في التخزين المؤقت (Cache) لتعرض فوراً في المرات القادمة بدون أي استهلاك لموارد الخادم.

المعاملات المقبولة (Query Parameters):

المعامل الحالة الوصف القيم المقبولة
service إجباري يحدد اسم الخدمة المستدعاة image
url إجباري رابط الصورة الأصلية المراد معالجتها رابط ويب مباشر (URL)
w اختياري العرض المطلوب للصورة بالبكسل أرقام (مثال: 400)
h اختياري الارتفاع المطلوب للصورة بالبكسل أرقام (مثال: 300)
fit اختياري طريقة مطابقة الصورة للمقاسات الجديدة cover (قص من المركز لتعبئة الأبعاد)
contain (الملاءمة مع الحفاظ على الأبعاد الافتراضية)
fill (شد الصورة لتعبئة الأبعاد تماماً)
📌 ميزة ذكية: إذا حددت العرض (w) فقط أو الارتفاع (h) فقط، فستقوم الخدمة تلقائياً بحساب البعد الآخر للحفاظ على نسبة التناسب الأصلية للصورة دون تشويهها!
مثال لاستخدام الخدمة في وسم الصورة HTML:
<!-- تضمين صورة مع تصغير العرض إلى 500 بكسل والمحافظة على التناسب وبصيغة WebP -->
<img src="http://localhost/index.php?service=image&url=https://images.unsplash.com/photo-1506744038136-46273834b3fb&w=500&fit=contain" alt="صورة معالجة بالـ CDN">

<!-- تضمين صورة مقصوصة بقياس 300x300 بكسل مربعة تماماً -->
<img src="http://localhost/index.php?service=image&url=https://images.unsplash.com/photo-1506744038136-46273834b3fb&w=300&h=300&fit=cover" alt="صورة مربعة مقصوصة">
🎬

2. خدمة تحويل الفيديوهات لـ WebM (Video Converter)

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

المعاملات المقبولة (Query Parameters):

المعامل الحالة الوصف القيم المقبولة
service إجباري يحدد اسم الخدمة المستدعاة video
url إجباري رابط ملف الفيديو الأصلي المراد تحويله رابط ويب مباشر للفيديو
w اختياري العرض المطلوب للفيديو المخرَج بالبكسل أرقام (مثال: 640)
h اختياري الارتفاع المطلوب للفيديو المخرَج بالبكسل أرقام (مثال: 360)
json اختياري تغيير شكل الاستجابة من بث مباشر إلى ملف JSON true
💡 ملاحظة تقنية: عند إرسال طلب عادي، سيقوم الرابط ببث ملف الفيديو مباشرة كـ Media Stream جاهز للعرض. أما إذا تم إرسال json=true، فسيعيد السيرفر كائن JSON يحتوي على رابط مسار التخزين المؤقت وحجم الملف المولد.
مثال لتضمين الفيديو المعالج في موقعك مباشرة:
<!-- تشغيل فيديو MP4 خارجي بعد تحويله تلقائياً لـ WebM مضغوط وتصغير العرض لـ 640 بكسل -->
<video controls width="640" poster="thumbnail.jpg">
  <source src="http://localhost/index.php?service=video&url=https://www.w3schools.com/html/mov_bbb.mp4&w=640" type="video/webm">
  متصفحك لا يدعم تشغيل فيديو WebM.
</video>
✉️

3. سيرفر ترحيل البريد الإلكتروني (Mail Relay)

هذا الجزء يستقبل البيانات عبر طلب POST (سواء كنموذج Form URL-Encoded أو كـ JSON). يبحث عن المعاملات البريدية الأساسية (المستلم والموضوع) ويرسل رسالة تحتوي على جدول HTML منسق بكل الحقول الأخرى المرسلة في الطلب أياً كان محتواها وتسميتها.

المعاملات البريدية الأساسية (يتم قراءتها واستثناؤها من الجدول):

المعامل الحالة الوصف أمثلة على الاستخدام
to إجباري البريد الإلكتروني للشخص الذي سيتلقى الرسالة [email protected]
title اختياري عنوان/موضوع الرسالة البريدية طلب حجز جديد أو رسالة تواصل
1. تطبيق عملي لنموذج HTML (اتصل بنا) يرسل مباشرة للـ CDN:
<form action="http://localhost/index.php?service=mail" method="POST">
    <!-- كود الـ API المصرح به للتوثيق والتحقق -->
    <input type="hidden" name="api_key" value="cdn_key_secret_123456">

    <!-- الحقول البريدية الأساسية -->
    <input type="hidden" name="to" value="[email protected]">
    <input type="hidden" name="title" value="رسالة جديدة من الموقع">

    <!-- الحقول المخصصة (ستظهر تلقائياً داخل جدول الرسالة) -->
    <label>الاسم الكريم:</label>
    <input type="text" name="اسم_العميل" required>

    <label>رقم الجوال:</label>
    <input type="tel" name="رقم_الهاتف" required>

    <label>الرسالة:</label>
    <textarea name="نص_الرسالة" required></textarea>

    <button type="submit">إرسال الرسالة الآن</button>
</form>
2. تطبيق عملي باستخدام JavaScript AJAX (مناسب لواجهات React / Vue / JS):
<script>
async function submitContactForm() {
    // تجهيز البيانات بالكامل
    const formData = {
        // حقول التحكم والتوثيق البريدية
        api_key: "cdn_key_secret_123456",
        to: "[email protected]",
        title: "تسجيل مشترك جديد",
        
        // الحقول الخاصة التي سيجمعها السيرفر داخل جسم البريد
        username: "سليم اليماني",
        plan_selected: "باقة الأعمال المميزة",
        signup_date: new Date().toLocaleDateString('ar-EG'),
        browser_used: navigator.userAgent
    };

    try {
        const response = await fetch("http://localhost/index.php?service=mail", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-API-Key": "cdn_key_secret_123456"
            },
            body: JSON.stringify(formData)
        });

        const result = await response.json();
        
        if (result.success) {
            alert("تم إرسال رسالتك بنجاح وسيتصل بك فريق الدعم!");
            console.log("الاستجابة:", result);
        } else {
            alert("حدث خطأ أثناء الإرسال: " + result.message);
        }
    } catch (error) {
        console.error("فشل الاتصال بالخادم:", error);
    }
}
</script>