كيفية بناء محرك البحث Instagram الخاص بك باستخدام jQuery و PHP

منذ طرح Google لميزات البحث الفوري ، أصبح اتجاهًا شائعًا في تصميم الويب. هناك بعض الأمثلة الممتعة عبر الإنترنت مثل تطبيق صور Google الخاص بـ Michael Hart. التقنيات كلها واضحة إلى حد ما حيث يمكن لمطور الويب الذي يتمتع بتجربة معتدلة في jQuery التقاط واجهات برمجة التطبيقات والبرمجة وبيانات JSON.

لهذا البرنامج التعليمي أريد أن أشرح كيف يمكننا بناء تطبيق ويب مماثل للبحث الفوري. بدلاً من سحب الصور من Google ، يمكننا استخدام Instagram الذي نما بشكل هائل في بضع سنوات قصيرة.

بدأت هذه الشبكة الاجتماعية كتطبيق جوال لنظام iOS. يمكن للمستخدمين التقاط الصور ومشاركتها مع أصدقائهم ، وترك التعليقات ، وتحميلها على شبكات الجهات الخارجية مثل Flickr. تم الحصول على الفريق مؤخرًا بواسطة Facebook ونشر تطبيقًا جديدًا على Android Market. نمت قاعدة المستخدمين الخاصة بهم بشكل هائل ، والآن يمكن للمطورين إنشاء تطبيقات مصغرة مذهلة مثل عرض instasearch التجريبي هذا.

• عرض تجريبي
• تحميل المصدر

الحصول على بيانات اعتماد API

قبل إنشاء أي ملفات للمشروعات ، يجب أولاً أن ننظر إلى الأفكار الكامنة وراء نظام API الخاص بـ Instagram. ستحتاج إلى حساب للوصول إلى بوابة المطور التي تقدم تعليمات مفيدة للمبتدئين. كل ما نحتاج إليه للاستعلام عن قاعدة بيانات Instagram هو “معرف العميل”.

في شريط الأدوات العلوي ، انقر فوق ارتباط إدارة العملاء ، ثم انقر فوق الزر الأخضر “تسجيل عميل جديد”. ستحتاج إلى إعطاء التطبيق اسمًا ووصفًا قصيرًا وعنوان URL لموقع الويب. يمكن أن يكون عنوان URL و Redirect URI بنفس القيمة في هذه الحالة فقط لأننا لسنا بحاجة إلى مصادقة أي مستخدم. ما عليك سوى ملء جميع القيم وإنشاء تفاصيل التطبيق الجديد.

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

محتوى صفحة الويب الافتراضية

HTML الفعلي ضئيل للغاية بالنسبة لمقدار الوظائف التي نستخدمها. نظرًا لأن معظم بيانات الصورة يتم إلحاقها ديناميكيًا ، فإننا لا نطلب سوى عدد قليل من العناصر الأصغر داخل الصفحة. تم العثور على هذا الرمز داخل index.html و ملف.

           
 
 ملاحظة: لا توجد مسافات أو علامات ترقيم مسموح بها. تقتصر عمليات البحث على كلمة رئيسية واحدة (1).  
 
 
   

أنا أستخدم أحدث مكتبة jQuery 1.7.2 مع اثنين .css وموارد .js الخارجية. لا يحتوي حقل البحث عن مدخلات على نموذج خارجي لأننا لا نريد تقديم النموذج على الإطلاق وتسبب إعادة تحميل الصفحة. لقد قمت بتعطيل بعض ضربات المفاتيح داخل حقل البحث بحيث تكون هناك قيود محدودة أكثر عند قيام المستخدمين بالكتابة.

سنقوم بتعبئة جميع بيانات الصور داخل معرف القسم الأوسط #الصور. إنها تحافظ على لغة HTML الأساسية نظيفة وسهلة القراءة. ستتم إضافة جميع عناصر HTML الداخلية الأخرى عبر jQuery وإزالتها أيضًا قبل كل بحث جديد.

سحب من API

أود أن أبدأ أولاً بإنشاء نص PHP الديناميكي لدينا ثم الانتقال إلى مسج. ملفي الجديد اسمه instasearch.php والتي سوف تحتوي على جميع السنانير الخلفية الهامة في API.

 
يشير السطر الأول إلى أن بيانات الإرجاع الخاصة بنا منسقة كـ JSON بدلاً من النص العادي أو HTML. يعد ذلك ضروريًا لقيام وظائف JavaScript بقراءة البيانات بشكل صحيح. بعد ذلك ، حصلت على إعداد للمتغيرات القليلة التي تحتوي على معرف عميل التطبيق وقيمة بحث المستخدم وعنوان URL النهائي لواجهة برمجة التطبيقات. تأكد من تحديث $ عميل قيمة السلسلة لتتناسب مع التطبيق الخاص بك.
 
للوصول إلى بيانات عنوان URL هذا ، نحتاج إلى تحليل محتويات الملف أو استخدام وظائف cURL. وظيفة مخصصة get_curl () هو مجرد القليل من التعليمات البرمجية التي تتحقق من التكوين الحالي PHP.
 
إذا لم تقم بتنشيط cURL ، فسيحاول تنشيط الميزة وسحب البيانات عبر مكتبة الوظائف الخاصة بها. وإلا ، يمكننا ببساطة استخدام file_get_contents () والذي يميل إلى أن يكون أبطأ ، لكنه لا يزال يعمل أيضًا. ثم يمكننا بالفعل سحب هذه البيانات إلى متغير مثل ذلك:
 
استجابة $ = get_curl ($ api) ؛ 
 
تنظيم وإرجاع البيانات
 
يمكننا فقط إرجاع استجابة JSON الأصلية هذه من Instagram مع تحميل جميع المعلومات. ولكن هناك الكثير من البيانات الإضافية ومن المزعج للغاية أن ندور في كل شيء. أفضل تنظيم استجابات Ajax وسحب البيانات التي نحتاجها بالضبط.
 
أولاً ، يمكننا إعداد مجموعة فارغة لجميع الصور. ثم داخل أ foreach () حلقة سنقوم بسحب كائنات بيانات JSON واحدة تلو الأخرى. نحن بحاجة فقط ثلاثة (3) القيم المحددة التي هي $ SRC(عنوان URL للصورة بالحجم الكامل), $ الإبهام(عنوان URL للصورة المصغرة) ، و $ رابط(الرابط الثابت للصور الفريدة).
 
$ $ = array () ؛ if ($ response) foreach (json_decode ($ response) -> data as $ item) $ src = $ item-> images-> standard_resolution-> url؛ $ thumb = $ item-> images-> thumbnail-> url؛ رابط $ url = $ item-> $ images [] = array ("src" => htmlspecialchars ($ src) ، "thumb" => htmlspecialchars ($ thumb)، "url" => htmlspecialchars ($ url))؛  
 
أولئك الذين ليسوا على دراية بحلقات PHP قد يضيعون في هذه العملية. لا تركز كثيرًا على مقتطفات الشفرة هذه إذا كنت لا تفهم بناء الجملة. ستحتوي مجموعة الصور الخاصة بنا على 16 إلى 20 إدخالًا فريدًا من الصور التي تم سحبها من أحدث تاريخ للنشر. ثم يمكننا إخراج كل هذا الكود على الصفحة كرد فعل jQuery Ajax.
 
print_r (str_replace ('\\ /'، '/'، json_encode ($ images)))؛ موت()؛ 
 
ولكن الآن بعد أن ألقينا نظرة وراء الكواليس ، يمكننا القفز إلى نصوص الواجهة الأمامية. لقد قمت بإنشاء ملف ajax.js الذي يحتوي على معالجات الأحداث زوجين مرتبطة إلى حقل البحث. إذا كنت لا تزال متابعًا حتى الآن ، فأنت متحمس ، فنحن على وشك الانتهاء!
 
الأحداث مسج الرئيسية
 
عند فتح المستند أولاً جاهز() الحدث أنا إعداد متغيرات زوجين. يتصرف الأولان كمحددات مستهدفة مباشرة لحقل البحث وحاوية الصور. أستخدم أيضًا مؤقت JavaScript لإيقاف استعلام البحث مؤقتًا حتى 900 مللي ثانية بعد انتهاء المستخدم من الكتابة.
 
$ (document) .ready (function () var sfield = $ ("# s")؛ var container = $ ("# photos")؛ var timer؛ 
 
لا يوجد سوى اثنين من كتل الوظائف الرئيسية التي نعمل معها. يتم تشغيل المعالج الأساسي بواسطة حدث .keydown () عند التركيز على حقل البحث. نتحقق أولاً مما إذا كان رمز المفتاح يطابق أيًا من مفاتيحنا الممنوعة ، وإذا كان الأمر كذلك ينفي الحدث الرئيسي. قم بإلغاء تحديد الموقت الافتراضي وانتظر 900 مللي ثانية قبل الاتصال instaSearch ().
 
/ ** * مسرد رمز المفتاح * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = الفترة الزمنية * 191 = BACKSLASH * 13 = ENTER * 219 = LEFT BRACKET * 220 = FORWARD SLASH * 221 = RIGHT BRIGHT * * / $ (sfield ) .keydown (function (e) if (e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' | | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') e.preventDefault ()؛ آخر clearTimeout (timer) ؛ timer = setTimeout (function () instaSearch ()؛، 900)؛)؛ 
 
في كل مرة تقوم فيها بتحديث القيمة ، ستحصل تلقائيًا على نتائج بحث جديدة. هناك أيضًا العديد من الرموز الأساسية الأخرى التي كان من الممكن أن نمنعها من تشغيل وظيفة Ajax - لكن الكثير منها لإدراجها في هذا البرنامج التعليمي.
 
اياكس instaSearch () وظيفة
 
داخل وظيفتي المخصصة الجديدة نضيف أولاً “جار التحميل” الطبقة في مجال البحث. سيقوم هذا الفصل بتحديث رمز الكاميرا لصورة gif جديدة للتحميل. نريد أيضًا تفريغ أي بيانات محتملة في قسم الصور. يتم سحب متغير الاستعلام ديناميكيًا من القيمة الحالية المدخلة في مجال البحث.
 
function instaSearch () $ (sfield) .addClass ("loading")؛ $ (حاوية) .empty ()؛ var q = $ (sfield) .val ()؛ $ .ajax (type: 'POST'، url: 'instasearch.php'، data: "q =" + q، success: function (data) $ (sfield) .removeClass ("loading")؛ $ .each (البيانات ، الوظيفة (i ، item) var ncode = '
 
'؛ $ (حاوية) .append (ncode)؛ )؛  ، خطأ: function (xhr ، type ، استثناء) $ (sfield) .removeClass ("loading")؛ $ (حاوية) .html ("خطأ:" + نوع) ؛ ) ؛  
 
إذا كنت معتادًا على وظيفة .ajax () فيجب أن تبدو جميع هذه المعلمات مألوفة. أنا أتجاوز معلمة بحث المستخدم “ف” كما بيانات POST. عند النجاح والفشل نزيل “جار التحميل” الطبقة وإلحاق أي استجابة مرة أخرى إلى #الصور غلاف.
 
ضمن وظيفة النجاح ، نقوم بتنفيذ استجابة JSON النهائية لسحب عناصر div الفردية. يمكننا تحقيق هذا التكرار باستخدام دالة $ .each () واستهداف صفيف بيانات الاستجابة الخاصة بنا. وإلا فإن طريقة الفشل ستقوم بإخراج أي رسالة خطأ استجابة مباشرة من Instagram API. وهذا كل ما في الأمر حقًا!
 
 
 
عرض تجريبي
 
تحميل المصدر
 
افكار اخيرة
 
قام فريق Instagram بعمل رائع في توسيع نطاق هذا التطبيق الهائل. يمكن أن تكون واجهة برمجة التطبيقات بطيئة في بعض الأحيان ، لكن بيانات الاستجابة دائمًا تكون منسقة بشكل صحيح وسهل الاستخدام للغاية. آمل أن يوضح هذا البرنامج التعليمي أن هناك الكثير من القوة التي تعمل على إيقاف تشغيل تطبيقات الطرف الثالث.
 
لسوء الحظ ، لا تسمح استعلامات بحث Instagram الحالية بأكثر من علامة واحدة في المرة الواحدة. هذا يقتصر على العرض التوضيحي الخاص بنا ، لكنه بالتأكيد لا يزيل أي من سحره. يجب عليك التحقق من المثال المباشر أعلاه وتنزيل نسخة من الكود المصدري الخاص بي للعب بها. بالإضافة إلى ذلك ، أخبرنا بأفكارك في مجال مناقشة المنشورات أدناه.