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

إستيراد الافلام والمسلسلات بإستخدام TMDB API

منتدى السكربت Nulled سكريبت IPTV بث مباشر إستيراد الافلام والمسلسلات بإستخدام TMDB API انشاء مولد الأوان RainBow Color استخراج ترجمة فيديو يوتيوب YouTube Data API

انشاء سكريبت من أجل البحث عن فيلم أو مسلسل باستخدام TMDB API

يوفر TMDb API واجهة برمجة تطبيقات مجانية تُتيح لك الوصول إلى بيانات حول الأفلام، المسلسلات، الممثلين، وغيرهم.

و اليوم و في هذا الموضوع، سنوضح لك كيفية الحصول على مفتاح API من TMDb واستخدامه في تطبيقاتك لعرض بيانات الأفلام والمسلسلات

بحث عن فيلم أو مسلسل

1. كيفية الحصول على مفتاح API من TMDb

لتتمكن من استخدام API لـ TMDb، عليك أولاً إنشاء حساب على الموقع والحصول على مفتاح API. إليك الخطوات:

انتقل إلى موقع TMDb الرسمي.
قم بالتسجيل على الموقع وإنشاء حساب إذا لم يكن لديك واحد.
بعد التسجيل، انتقل إلى إعدادات API في حسابك.
قم بإنشاء مفتاح API جديد عن طريق ملء النموذج المطلوب، ثم انسخ المفتاح لاستخدامه في تطبيقك.

2. كيفية استخدام TMDb API في تطبيقك

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

const apiKey = 'YOUR_API_KEY';  // استبدل هذا بمفتاح API الخاص بك
const movieName = 'اسم الفيلم أو المسلسل';
const searchUrlMovie = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${movieName}`;
const searchUrlTV = `https://api.themoviedb.org/3/search/tv?api_key=${apiKey}&query=${movieName}`;

3. شرح الكود

في الكود أعلاه، قمنا بتحديد متغير apiKey الذي يحتوي على مفتاح API الخاص بك، ومن ثم أنشأنا رابطين لاستعلامين:

searchUrlMovie: لاستعلام البحث عن الأفلام باستخدام اسم الفيلم.
searchUrlTV: لاستعلام البحث عن المسلسلات باستخدام اسم المسلسل.

بعد إنشاء الروابط، يمكنك إرسال طلبات GET باستخدام دالة fetch() للحصول على البيانات من الـ API وعرضها في واجهة المستخدم.

4. كيفية عرض النتائج على صفحة الويب

بمجرد الحصول على البيانات من TMDb API، يمكنك عرض الأفلام أو المسلسلات في الصفحة باستخدام DOM (Document Object Model). إليك مثال آخر على كيفية عرض نتائج البحث:

const movieResponse = await fetch(searchUrlMovie);
const movieData = await movieResponse.json();
const tvResponse = await fetch(searchUrlTV);
const tvData = await tvResponse.json();
const resultsContainer = document.getElementById('results-container');
resultsContainer.innerHTML = '';  // تفريغ النتائج السابقة
if (movieData.results && movieData.results.length > 0) { ... }
if (tvData.results && tvData.results.length > 0) { ... }

5. المزيد من الموارد

للتعرف على المزيد من التفاصيل حول كيفية استخدام TMDb API، يمكنك زيارة الدليل الرسمي لـ TMDb API.

كما يمكنك تعلم المزيد عن البرمجة مع APIs عبر دورة تعليمية مجانية على Codecademy.

6. نصائح

تأكد من استخدام مفتاح API الخاص بك بشكل آمن ولا تشاركه علنًا.
قم بإعداد معالجة الأخطاء مثل فشل الاتصال أو وجود خطأ في المفتاح.
تجنب إرسال عدد كبير من الطلبات في وقت واحد لتجنب الحظر من خدمة TMDb.

خاتمة

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

بحيث يمكنك الاستفادة من API في العديد من المشاريع الرائعة التي تعتمد على المحتوى السينمائي والتلفزيوني.

Code Html

/* Animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* استعلامات الوسائط لجعل الصفحة responsive */
        @media (max-width:auto) {
            .container {
                width: auto;
            }
            .search-input {
                width: 100%;
            }
            .search-button {
                width: 100%;
                margin-top: 10px;
            }
            .movie-item {
                flex-direction: column;
                align-items: flex-start;
            }
            .movie-item img {
                width: 80px;
                margin-right: 0;
                margin-bottom: 10px;
            }
            .movie-title {
                font-size: 16px;
            }
            .movie-overview {
                font-size: 12px;
            }
        }

@media (max-width: 480px) {
            .search-input {
                font-size: 14px;
                padding: 8px;
            }
            .search-button {
                font-size: 14px;
                padding: 8px;
            }
            .movie-title {
                font-size: 14px;
            }
            .movie-overview {
                font-size: 12px;
            }
        }
    </style>

<div class="container" dir="rtl" style="text-align:right;">
        <h1>بحث عن فيلم أو مسلسل</h1>

<div class="search-box">
            <input type="text" id="movie-name" class="search-input" placeholder="أدخل اسم الفيلم أو المسلسل">
            <button class="search-button" onclick="searchMovie()">بحث</button>
        </div>

<div id="results-container" class="results-container"></div>
    </div>

// إرسال الطلب للحصول على الأفلام
            const movieResponse = await fetch(searchUrlMovie);
            const movieData = await movieResponse.json();

// إرسال الطلب للحصول على المسلسلات
            const tvResponse = await fetch(searchUrlTV);
            const tvData = await tvResponse.json();

const resultsContainer = document.getElementById('results-container');
            resultsContainer.innerHTML = ''; // تفريغ النتائج السابقة

let resultsFound = false;

// التعامل مع نتائج الأفلام
            if (movieData.results && movieData.results.length > 0) {
                resultsFound = true;
                movieData.results.forEach(movie => {
                    resultsContainer.innerHTML += generateMovieItem(movie, 'movie', apiKey);
                });
            }

// التعامل مع نتائج المسلسلات
            if (tvData.results && tvData.results.length > 0) {
                resultsFound = true;
                tvData.results.forEach(tv => {
                    resultsContainer.innerHTML += generateMovieItem(tv, 'tv', apiKey);
                });
            }

if (!resultsFound) {
                resultsContainer.innerHTML = '<p>لم يتم العثور على نتائج.</p>';
            }
        }

function generateMovieItem(item, type, apiKey) {
            const title = type === 'movie' ? item.title : item.name;
            const overview = item.overview;
            const itemId = item.id;
            const itemType = type;
            const itemPoster = `https://image.tmdb.org/t/p/w500${item.poster_path || ''}`;

return `
                <div class="movie-item" onclick="showDetails(${itemId}, '${itemType}', '${apiKey}')">
                    <img src="${itemPoster}" alt="${title}">
                    <div>
                        <div class="movie-title">${title}</div>
                        <div class="movie-overview">${overview.substring(0, 150)}...</div>
                    </div>
                </div>
            `;
        }

async function showDetails(itemId, itemType, apiKey) {
            const detailsUrl = `https://api.themoviedb.org/3/${itemType}/${itemId}?api_key=${apiKey}`;
            const videoUrl = `https://api.themoviedb.org/3/${itemType}/${itemId}/videos?api_key=${apiKey}`;

const detailsResponse = await fetch(detailsUrl);
            const detailsData = await detailsResponse.json();

const videoResponse = await fetch(videoUrl);
            const videoData = await videoResponse.json();

const trailer = videoData.results.find(video => video.type === 'Trailer' && video.site === 'YouTube');
            const trailerEmbed = trailer 
                ? `<iframe width="100%" height="400" src="https://www.youtube.com/embed/${trailer.key}" frameborder="0" allowfullscreen></iframe>` 
                : '<p>لا يتوفر مقطع دعائي.</p>';

const movieDetails = `
                <div class="movie-details">
                    <h2>${itemType === 'movie' ? detailsData.title : detailsData.name}</h2>
                    <p><strong>الوصف:</strong> ${detailsData.overview}</p>
                    ${trailerEmbed}
                </div>
            `;

document.getElementById('results-container').innerHTML = movieDetails;
        }
    </script>

نشرت

1/1/25
مشاهدات الصفحة

16

فيسبوك X (Twitter) Reddit Pinterest Tumblr WhatsApp البريد الإلكتروني الرابط

محتوى مميز

الموضوع 'البرنامج الاكثر استخداما فى تصميم اللوجو والشعارات Summitsoft Logo Design Studio Pro Vector Edition 2.0.4.0'
- xenfamily
- منذ 19 دقيقة
الردود: 0
الموضوع 'عينة جامدة لتجربتها بالتشغيل بتاريخ اليوم 11-1-2025'
- xenfamily
- منذ 19 دقيقة
الردود: 0
الموضوع 'CorelDRAW Graphics Suite X7 17.5.0.907 Special Edition (x86/x64).'
- xenfamily
- اليوم في 01:05
الردود: 0
الموضوع 'مساعدة حل مشكلة usb firmware'
- xenfamily
- اليوم في 01:05
الردود: 0
الموضوع '‏•.ღ.•خربشات قلم متمرد ..."مدونتي"...•.ღ.•'
- fouad
- الأمس في 23:52
الردود: 0

أحدث المواضيع

البرنامج الاكثر استخداما فى تصميم اللوجو والشعارات Summitsoft Logo Design Studio Pro Vector Edition 2.0.4.0
- بُدأت بواسطة xenfamily
- منذ 19 دقيقة
- الردود: 0
منتدى السكربت Nulled
عينة جامدة لتجربتها بالتشغيل بتاريخ اليوم 11-1-2025
- بُدأت بواسطة xenfamily
- منذ 19 دقيقة
- الردود: 0
منتدى السكربت Nulled
CorelDRAW Graphics Suite X7 17.5.0.907 Special Edition (x86/x64).
- بُدأت بواسطة xenfamily
- اليوم في 01:05
- الردود: 0
منتدى السكربت Nulled
مساعدة حل مشكلة usb firmware
- بُدأت بواسطة xenfamily
- اليوم في 01:05
- الردود: 0
منتدى السكربت Nulled
‏•.ღ.•خربشات قلم متمرد ..."مدونتي"...•.ღ.•
- بُدأت بواسطة fouad
- الأمس في 23:52
- الردود: 0
منتدى السكربت Nulled

إحصائيات المنتدى

المواضيع: 5,540

المشاركات: 5,571

الأعضاء: 4,873

آخر عضو مسجل: freexen

محتوى رائج

الموضوع 'أكبر مكتبة لجميع دامبات الأجهزة الرقمية الفضائية'
- gpldroid
- الأحد في 22:00
الردود: 7
الموضوع 'صفحة خاصة لملفات القنوات لاجهزة السات فيندر SATFINDER'
- gpldroid
- 4/1/25
الردود: 7
الموضوع 'تجميعية اكواد داونلودر Apk لاهم التطبيقات DOWNLOADER APK'
- gpldroid
- الأربعاء في 12:15
الردود: 3
الموضوع 'طلب ملف تعريب زين فورو v2.1.11'
- عماد الدين
- الأربعاء في 22:42
الردود: 1
الموضوع 'اكواد MAC STALKER PORTAL متجدد'
- gpldroid
- الثلاثاء في 08:18
الردود: 1

آخر المشاركات

شراقي: هناك تعنت إثيوبي كبير في التوصل لاتفاق حول تشغيل "سد النهضة"
- الأحدث: عماد الدين الفلسطيني
- منذ 19 دقيقة
منتدى الأخبار
سيناتور روسي يعلق على تصريحات زوكربيرغ: الدكتاتورية الليبرالية تحكم الولايات المتحدة
- الأحدث: عماد الدين الفلسطيني
- منذ 19 دقيقة
منتدى الأخبار
نتنياهو يبحث مع مسؤولين أمنيين إسرائيليين مفاوضات وقف إطلاق النار في غزة
- الأحدث: عماد الدين الفلسطيني
- منذ 19 دقيقة
منتدى الأخبار
بايدن يلقي خطاب الوداع من المكتب البيضاوي يوم الأربعاء
- الأحدث: عماد الدين الفلسطيني
- منذ 19 دقيقة
منتدى الأخبار
وزير الخارجية الفرنسي: باريس سوف ترد إذا واصلت الجزائر التصعيد
- الأحدث: عماد الدين الفلسطيني
- منذ 19 دقيقة
منتدى الأخبار