إنشاء محرك بحث على Youtube باستخدام JQuery(Youtube Data API 3)
لديك كل شيء, يجتمع معي مرة أخرى رجل وسيم من سوندا :), أنا آسف لأنني لم أقم بعمل برنامج تعليمي لفترة طويلة لأنني مشغول. في هذا الوقت ، سأقوم بعمل برنامج تعليمي حول إنشاء محرك بحث youtube باستخدام Youtube Data API 3 من جوجل. قبل بدء البرنامج التعليمي ، يجب أن يكون لديك مفتاح API من google, للحصول عليه يمكنك التحقق من هنا https://console.developers.google.com, بعد ذلك يمكنك أن ترى في الزاوية اليمنى العليا هناك مشروع ثم انقر فوق مشروع جديد كما هو موضح أدناه
انقر فوق الزر "إنشاء" ثم يظهر كما هو موضح أدناه, ثم حدد youtube Data API
بعد النقر ، ستظهر صفحة مثل الصفحة أدناه, ثم انقر فوق تنشيط 
بعد النقر فوق تنشيط ، سيتم نقلك إلى صفحة مثل الصفحة أدناه ثم انقر فوق الزر إنشاء بيانات الاعتماد
بعد النقر عليه يبدو مثل هذا
حدد واجهة برمجة التطبيقات المستخدمة Youtube DATA API v3, ثم حدد الإعدادات متصفح الويب والبيانات التي سيتم الوصول إليها حدد البيانات العامة, بعد ذلك انقر فوق الزر ما هي أوراق الاعتماد التي أحتاجها?
ثم سيظهر كما هو موضح أدناه
الآن ما أحظره باللون الأحمر هو مفتاح API الذي سنستخدمه لاحقًا, أنا آسف لأنني حظرت اللون الأحمر لأسباب تتعلق بالخصوصية.
بعد أن يظهر هذا ثم انقر فوق إنهاء.
سنقوم الآن بإنشاء صفحة html بالاسم index.html, في السابق قمنا بتضمين jquery,fancybox وغيرها مثل المثال أدناه
<النصي src="https://use.fontawesome.com/567fc88304.js"></النصي>
<النصي src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></النصي>
<النصي src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></النصي>
<النصي src="script.js"></النصي>
<حلقة الوصل rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?الخامس = 2.1.5">
<حلقة الوصل rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">بعد ذلك نقوم بإنشاء المحتوى في الجسم كما هو موضح أدناه
<h5>AndezNET.مع</h5>
<ساعة />
<شعبة صف دراسي="content">
<h2>إنشاء محرك بحث على Youtube باستخدام JQuery(Youtube Data API 3)</h2>
h2><أنا صف دراسي="fa fa-youtube" الأغنية-مخفي="true"></أنا>محرك بحث يوتيوب</h2>
<معرف شعبة="custom-search-input">
<شعبة صف دراسي="input-group col-md-12">
<معرف النموذج="search-form" اسم="search-form" عند تقديم="return cariYoutube();">
<نوع الإدخال="text" صف دراسي="form-control" نائب="Pencarian...." هوية شخصية="search" />
<امتداد صف دراسي="input-group-btn">
<زر صف دراسي="btn btn-primary btn-lg" نوع="submit" هوية شخصية="findNow">
<أنا صف دراسي="glyphicon glyphicon-search"></أنا>
</زر>
</امتداد>
</شكل>
</شعبة>
</شعبة>
<ر><ر>
<معرف شعبة="hasil"></شعبة>
<ر><ر>
<معرف شعبة="buttons"></شعبة>
</شعبة>بعد ذلك نجعل CSS لتجميل المحتوى على النحو التالي
<أسلوب>
#إدخال البحث المخصص{
حشوة: 3مقصف;
الحدود: صلبة 1 بكسل #E4E4E4;
الحدود-نصف القطر: 6مقصف;
خلفية-اللون: #FF0000;
}
#إدخال إدخال البحث المخصص{
الحدود: 0;
صندوق-ظل: لا شيء;
عرض: 93%;
}
#زر إدخال البحث المخصص{
حافة: 2مقصف 0 0 0;
خلفية: لا شيء;
صندوق-ظل: لا شيء;
الحدود: 0;
اللون: #666666;
حشوة: 0 8مقصف 0 10مقصف;
الحدود-اليسار: صلبة 1 بكسل #ccc;
}
#زر إدخال البحث المخصص:يحوم{
الحدود: 0;
صندوق-ظل: لا شيء;
الحدود-اليسار: صلبة 1 بكسل #ccc;
}
#إدخال البحث المخصص. glyphicon-search{
الخط-بحجم: 23مقصف;
}
مقالة - سلعة {
حافة: 10مقصف 0;
خلفية: rgba(0,0,0,0.7);
حشوة: 4بكسل 20 بكسل;
}
.فيديو-غلاف {
وضع: مثبت;
أعلى: 0;
حق: 0;
الأسفل: 0;
اليسار: 0;
تجاوز: مخفي;
مع-فهرس:-1;
}
.فيديو-المجمع الفيديو {
وضع: مثبت;
أعلى: 0;
حق: 0;
دقيقة-عرض: 100%;
دقيقة-ارتفاع: 100%;
عرض: تلقاءي;
ارتفاع: تلقاءي;
}
.المحتوى {
وضع: نسبيا;
حافة: 60بكسل تلقائي;
عرض: 100%;
ماكس-عرض: 800مقصف;
مع-فهرس: 1;
}
.clearfix{
الحدود-الأسفل: 1بكسل منقط #ccc;
حافة-الأسفل: 5مقصف;
}
.قناة
{
الخط-وزن: 700;
اللون: أحمر;
}
.كتلة أ:يحوم{
اللون: فضة;
}
.كتلة أ{
اللون: #وما يليها;
}
.منع {
وضع: مثبت;
خلفية: #2184قرص مضغوط;
حشوة: 20مقصف;
مع-فهرس: 1;
أعلى: 240مقصف;
}
</أسلوب>نعم. المحتوى بالفعل, العرض الآن نقوم بإنشاء الوظيفة, قم بإنشاء ملف جديد باسم الملف script.js
أولاً ، نقوم بإنشاء متغير باسم gapikey في script.js والذي سيأخذ لاحقًا مفتاح API الذي أنشأناه سابقًا.
أين غابيكي = "مفاتيح API الخاصة بك";ثانيًا ، قم بإنشاء دالة لعرض إطار iframe من francybox مثل هذا
$(وظيفة() {
// ميمانجيل البرنامج المساعد fancybox
$(".fancyboxIframe").صندوق فاخر({
أقصى عرض : 900,
اقصى ارتفاع : 600,
fitToView : خاطئة,
عرض : "90٪",
ارتفاع : "90٪",
حجم تلقائي : خاطئة,
اغلاق : خاطئة,
openEffect : 'لا أحد',
قريب : 'لا أحد',
iframe: {
التمرير : 'تلقاءي',
التحميل المسبق : صحيح
}
});
$('#نموذج بحث').إرسال( وظيفة(ه) {
ه.منع افتراضي();
});
});ثالثًا ، نقوم بإنشاء وظيفة البحث على النحو التالي
وظيفة البحث() {
$('#نتيجة').لغة البرمجة("<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></أنا><span class="sr-only">أرجو الإنتظار...</امتداد>");
$('#أزرار').لغة البرمجة(");
// للحصول على نموذج الإدخال
ف = $('#بحث').فال();
// بالنسبة إلى YouTube GET API
$.احصل على(
"https://www.googleapis.com/youtube/v3/search", {
جزء: مقتطف, هوية شخصية',
ف: ف,
نوع: 'فيديو',
مفتاح: غابيكي
}, وظيفة(البيانات) {
أين التالي = البيانات.التالي;
أين prevPageToken = البيانات.prevPageToken;
// لتسجيل البيانات
وحدة التحكم.سجل(البيانات);
$('#نتيجة').لغة البرمجة(");
$.كل(البيانات.العناصر, وظيفة(أنا, العنصر) {
// احصل على الإخراج
أين انتاج = getOutput(العنصر);
// عرض النتائج
$('#نتيجة').ألحق(انتاج);
});
أين أزرار = getButtons(prevPageToken, التالي);
// أزرار العرض
$('#أزرار').ألحق(أزرار);
});
}رابعًا ، نقوم بإنشاء وظيفة NextPage على النحو التالي,
وظيفة البحث() {
$('#نتيجة').لغة البرمجة("<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></أنا><span class="sr-only">أرجو الإنتظار...</امتداد>");
$('#أزرار').لغة البرمجة(");
// للحصول على نموذج الإدخال
ف = $('#بحث').فال();
// بالنسبة إلى YouTube GET API
$.احصل على(
"https://www.googleapis.com/youtube/v3/search", {
جزء: مقتطف, هوية شخصية',
ف: ف,
نوع: 'فيديو',
مفتاح: غابيكي
}, وظيفة(البيانات) {
أين التالي = البيانات.التالي;
أين prevPageToken = البيانات.prevPageToken;
// لتسجيل البيانات
وحدة التحكم.سجل(البيانات);
$('#نتيجة').لغة البرمجة(");
$.كل(البيانات.العناصر, وظيفة(أنا, العنصر) {
// احصل على الإخراج
أين انتاج = getOutput(العنصر);
// عرض النتائج
$('#نتيجة').ألحق(انتاج);
});
أين أزرار = getButtons(prevPageToken, التالي);
// أزرار العرض
$('#أزرار').ألحق(أزرار);
});
}خامسا ، نجعل الصفحة السابقة على النحو التالي
وظيفة الصفحة السابقة() {
أين رمز = $("# زر السابق").البيانات("رمز");
أين ف = $("# زر السابق").البيانات('استفسار');
$('#نتيجة').لغة البرمجة("<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></أنا><span class="sr-only">أرجو الإنتظار...</امتداد>");
$('#أزرار').لغة البرمجة(");
// الحصول على إدخال النموذج
ف = $('#بحث').فال();
// بالنسبة إلى YouTube GET API
$.احصل على(
"https://www.googleapis.com/youtube/v3/search", {
جزء: مقتطف, هوية شخصية',
ف: ف,
pageToken: رمز,
نوع: 'فيديو',
مفتاح: غابيكي
}, وظيفة(البيانات) {
أين التالي = البيانات.التالي;
أين prevPageToken = البيانات.prevPageToken;
// تسجيل البيانات
وحدة التحكم.سجل(البيانات);
$('#نتيجة').لغة البرمجة(");
$.كل(البيانات.العناصر, وظيفة(أنا, العنصر) {
// احصل على الإخراج
أين انتاج = getOutput(العنصر);
// عرض
$('#نتيجة').ألحق(انتاج);
});
أين أزرار = getButtons(prevPageToken, التالي);
// أزرار العرض
$('#أزرار').ألحق(أزرار);
});
}سادسا ، نجعل مخرجات نتائج البحث على النحو التالي
وظيفة getOutput(العنصر) {
أين معرف الفيديو = العنصر.هوية شخصية.معرف الفيديو;
أين عنوان = العنصر.مقتطف.عنوان;
أين وصف = العنصر.مقتطف.وصف;
أين الإبهام = العنصر.مقتطف.الصور المصغرة.عالي.عنوان url;
أين عنوان القناة = العنصر.مقتطف.عنوان القناة;
أين تاريخ = العنصر.مقتطف.نشرت في;
أين انتاج = "<div class="col-md-6">" +
"<img src="' + الإبهام + "" class="img-responsive thumbnail" >" +
"</شعبة>" +
"<div class="input-group col-md-6">" +
"<h3><a data-fancybox-type="iframe" class="fancyboxIframe" href="http://youtube.com/embed/ ' + معرف الفيديو + "?rel=0">" + عنوان + "</أ></h3>" +
"<صغير>بواسطة <span class="channel">" + عنوان القناة + "</امتداد> على ' + تاريخ + "</صغير>" +
"<ص>" + وصف + "</ص>" +
"</شعبة>" +
"<div class="clearfix"></شعبة>";
إرجاع انتاج;
}سابعًا ، نقوم أيضًا بعمل مخرجات عند الانتقال إلى الصفحة التالية على النحو التالي
وظيفة getOutput(العنصر) {
أين معرف الفيديو = العنصر.هوية شخصية.معرف الفيديو;
أين عنوان = العنصر.مقتطف.عنوان;
أين وصف = العنصر.مقتطف.وصف;
أين الإبهام = العنصر.مقتطف.الصور المصغرة.عالي.عنوان url;
أين عنوان القناة = العنصر.مقتطف.عنوان القناة;
أين تاريخ = العنصر.مقتطف.نشرت في;
أين انتاج = "<div class="col-md-6">" +
"<img src="' + الإبهام + "" class="img-responsive thumbnail" >" +
"</شعبة>" +
"<div class="input-group col-md-6">" +
"<h3><a data-fancybox-type="iframe" class="fancyboxIframe" href="http://youtube.com/embed/ ' + معرف الفيديو + "?rel=0">" + عنوان + "</أ></h3>" +
"<صغير>بواسطة <span class="channel">" + عنوان القناة + "</امتداد> على ' + تاريخ + "</صغير>" +
"<ص>" + وصف + "</ص>" +
"</شعبة>" +
"<div class="clearfix"></شعبة>";
إرجاع انتاج;
}
منجز, إنه سهل ، أليس كذلك ? ههههه , لا تنس إدخال مفتاح API الذي أنشأناه سابقًا في المتغير غابيكي. حسنًا ، يمكن تنزيل هذا البرنامج التعليمي للبرنامج النصي الكامل هنا تحميل ويمكن التحقق من العرض هنا تجريبي.
