مقدمة

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

في هذا المنشور، سأرشدك عبر تضمين الروابط في تطبيق React، أثناء جلب البيانات الوصفية لـ Open Graph (مثل العنوان والصورة والوصف) باستخدام axios وcherio لاستخراج HTML للصفحة المستهدفة.

سنقوم بإنشاء مكون EmbeddedLink بسيط يقوم بجلب البيانات الوصفية لـ Open Graph وعرضها لأي عنوان URL متوفر.

المتطلبات الأساسية

قبل أن نبدأ، تأكد من تثبيت ما يلي:

1. React – قم بإعداد مشروع React باستخدام إنشاء تطبيق React أو أي طريقة تفضلها.
2. أكسيوس – لتقديم طلبات HTTP.
3. Cheerio – لتحليل وتجميع HTML (مكتبة شبيهة بـ jQuery من جانب الخادم تُستخدم عادةً للتجريد).

يمكنك تثبيت Axios وCheerio باستخدام الأوامر التالية:

npm install axios cheerio

الخطوة 1: إنشاء مكون EmbeddedLink

سنقوم بإنشاء مكون EmbeddedLink جديد يأخذ عنوان url كدعم ويجلب البيانات الوصفية لـ Open Graph من هذا الارتباط والتي سنستخدمها لاحقًا. إليك الكود الكامل:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import cheerio from 'cheerio';

const EmbeddedLink = ({ url }) => {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [imageUrl, setImageUrl] = useState('');
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');

    useEffect(() => {
        const fetchOGData = async () => {
            try {
                const response = await axios.get(url, {
                    headers: {
                        'origin': 'https://mysite.com'
                    }
                });
                const html = response.data;

                // Parse HTML content using Cheerio
                const $ = cheerio.load(html);
                const ogImage = $('meta[property="og:image"]').attr('content');
                const ogTitle = $('meta[property="og:title"]').attr('content');
                const ogDesc = $('meta[property="og:description"]').attr('content');

                setImageUrl(ogImage || '');
                setTitle(ogTitle || '');
                setDescription(ogDesc || '');
                setLoading(false);
            } catch (error) {
                setError(error);
                setLoading(false);
            }
        };

        fetchOGData();
    }, [url]);

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            {imageUrl && }
            
                {title && 
{title}
}
            
            {!imageUrl && !title && 
No preview available
}
            
{description}
            
{url}
        
    );
};

export default EmbeddedLink;

الخطوة 2: استخدام مكون EmbeddedLink

يمكنك الآن استخدام مكون EmbeddedLink في تطبيق React الخاص بك مثل هذا:

import React from 'react';
import EmbeddedLink from './EmbeddedLink';

function App() {
    return (
        

            
Link Preview Example
            
        
    );
}

export default App;

سيؤدي هذا إلى عرض معاينة لعنوان URL المقدم، مع صورته وعنوانه ووصفه.

معالجة الأخطاء وتحميل الحالات

نتعامل مع الأخطاء المحتملة وحالات التحميل من خلال إظهار الرسائل المناسبة للمستخدم:

• أثناء جلب البيانات التعريفية، تظهر رسالة بسيطة "جارٍ التحميل..." أو يمكنك استخدام بعض الرسوم المتحركة الدوارة أو أي شيء آخر.
• إذا حدث خطأ ما أثناء عملية الجلب (على سبيل المثال، مشكلة في الشبكة)، فسيتم عرض رسالة الخطأ.

خاتمة

عند الانتهاء، يجب أن تكون قادرًا على رؤية النتيجة كما في الصورة أدناه.

أفضّل هذا النمط من الرابط المضمن، ولكن يمكنك تصميمه حسب ما تريد وتفضل.