כיצד לבנות משלך מנוע חיפוש Instagram עם jQuery ו - PHP

מאז גוגל גלגל את תכונות החיפוש המיידי, זה הפך להיות מגמה פופולרי עיצוב אתרים. יש כמה דוגמאות מעניינות באינטרנט כגון האפליקציה 'תמונות Google' של מייקל הארט. הטכניקות הן פשוט למדי שבו אפילו מפתח אינטרנט עם ניסיון jQuery מתון יכול להרים תכנות APIs ונתונים JSON.

עבור הדרכה זו אני רוצה להסביר איך אנחנו יכולים לבנות חיפוש מיידי דומה יישום אינטרנט. במקום למשוך תמונות מ- Google אנו יכולים להשתמש ב- Instagram אשר גדלה מאוד בתוך שנים ספורות בלבד.

רשת חברתית זו התחילה כיישום לנייד עבור iOS. משתמשים יכולים לצלם ולשתף אותם עם החברים שלהם, להשאיר הערות ולהעלות אותם לרשתות של צד שלישי כגון Flickr. הצוות נרכש לאחרונה על ידי פייסבוק ופורסם אפליקציה חדשה עבור Android Market. Userbase שלהם גדלה מאוד, ועכשיו מפתחים יכולים לבנות מיני Apps מדהים בדיוק כמו הדגמה זו instasearch.

הצג הדגמה
הורד מקור

קבלת אישורי ממשק API

לפני יצירת כל פרוייקט קבצים אנחנו צריכים קודם להסתכל לתוך הרעיונות מאחורי מערכת ה- API של Instagram. תזדקק לחשבון כדי לגשת לפורטל המפתחים אשר מציע הוראות שימושיות למתחילים. כל מה שאנחנו צריכים לשאוב את מסד הנתונים Instagram הוא “מזהה לקוח”.

בסרגל הכלים העליון לחץ על הקישור נהל לקוחות ולאחר מכן לחץ על הלחצן הירוק “רישום לקוח חדש”. יהיה עליך לתת ליישום שם, תיאור קצר וכתובת אתר. כתובת האתר והכתובת אתר להפניה מחדש יכולים להיות בעלי אותו ערך במופע זה רק משום שאיננו צריכים לאמת משתמשים. רק למלא את כל הערכים וליצור את פרטי היישום החדש.

תראה שורה ארוכה של תווים בשם מזהה לקוח. אנו נזדקק למפתח זה מאוחר יותר בעת בניית הסקריפט backend, לכן נחזור לקטע זה. לעת עתה אנו יכולים להתחיל את הבנייה של החיפוש שלנו jQuery מיידיות היישום.

ברירת מחדל של תוכן דף אינטרנט

HTML בפועל הוא דק מאוד עבור כמות הפונקציונליות שאנו משתמשים. מאחר שרוב נתוני התמונה מצורפים באופן דינמי, אנו דורשים רק כמה אלמנטים קטנים יותר בתוך הדף. קוד זה נמצא בתוך index.html קובץ.

    חיפוש מיידי App עם jQuery         הערה: אין צורך ברווחים או בפיסוק. החיפושים מוגבלים למילת מפתח אחת (1).

אני משתמש האחרונה jQuery 1.7.2 הספרייה יחד עם שני .sss חיצוני. משאבים Jjs. השדה חיפוש קלט אין עטיפה טופס חיצוני כי אנחנו לא רוצים אי פעם להגיש את הטופס ולגרום דף טען מחדש. השביתתי כמה הקשות בתוך שדה החיפוש, כך שיש הגבלות מוגבלות יותר כאשר משתמשים מקלידים.

אנו נאכלס את כל נתוני הצילום בתוך המזהה האמצעית #photos. זה שומר על HTML הבסיסי שלנו נקי וקל לקריאה. כל רכיבי HTML הפנימיים האחרים יתווספו דרך jQuery, ויוסרו גם לפני כל חיפוש חדש.

משיכת ה- API

אני רוצה להתחיל תחילה על ידי יצירת סקריפט PHP דינמי שלנו ולאחר מכן לעבור jQuery. הקובץ החדש שלי נקרא instasearch.php אשר יכיל את כל hooks backend חשוב לתוך ה- API.

 השורה הראשונה מציינת כי נתוני ההחזרה שלנו מעוצבים כ- JSON במקום ב- HTML או ב- HTML. זה הכרחי עבור פונקציות JavaScript לקרוא את הנתונים כראוי. לאחר מכן יש לי כמה הגדרות משתנים המכילות את מזהה הלקוח של היישום, את ערך החיפוש של המשתמש ואת כתובת ה- API הסופית. הקפד לעדכן את $ לקוח ערך מחרוזת שתתאים ליישום שלך.
 כדי לגשת לנתוני כתובת אתר אלה, עלינו לנתח את תוכן הקובץ או להשתמש בפונקציות cURL. הפונקציה המותאמת אישית get_curl () הוא רק קצת קוד אשר בודק נגד תצורת PHP הנוכחית.
 אם אין לך cURL מופעל זה ינסה להפעיל את התכונה ולמשוך נתונים באמצעות ספריית הפונקציות שלהם. אחרת אנחנו יכולים פשוט להשתמש file_get_contents () אשר נוטה להיות איטי יותר, אבל עדיין עובד בדיוק באותה מידה. אז אנחנו יכולים למעשה למשוך את הנתונים למשתנה כזה:
 $ response = get_curl ($ api); 
 ארגון וחזרה נתונים
 אנחנו יכולים פשוט להחזיר את התגובה JSON המקורי מ Instagram עם כל המידע טעון. אבל יש כל כך הרבה נתונים וזה מאוד מעצבן לולאה דרך הכל. אני מעדיף לארגן תגובות Ajax ולשלוח בדיוק אילו פיסות נתונים שאנחנו צריכים.
 ראשית אנו יכולים להגדיר מערך ריק עבור כל התמונות. ואז בתוך לכל אחד() לולאה נוכל לשלוף את הנתונים JSON אובייקטים בזה אחר זה. אנחנו צריכים רק שלושה (3) ערכים ספציפיים שהם $ src(כתובת אתר בגודל מלא), $ thumb(כתובת אתר של תמונה ממוזערת) ו $ url(קישור לתמונה ייחודית).
 $ images = array (); אם התשובה ($ $) foreach (json_decode ($ response) -> נתונים כפריט $) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> כתובת אתר; $ url = $ item-> link; $ images [] = מערך ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 אלה שאינם מכירים עם לולאות PHP עלול ללכת לאיבוד בתהליך. אל תתמקד כל כך בקטעי קוד אלה אם אינך מבין את התחביר. מערך התמונות שלנו יכיל לכל היותר 16-20 ערכים ייחודיים שנלקחו מתאריך הפרסום האחרון. אז אנחנו יכולים פלט כל קוד זה על הדף כתגובה jQuery אייאקס.
 print_r (str_replace ('\\ /', '/', json_encode ($ images))); die (); 
 אבל עכשיו שיש לנו מבט מאחורי הקלעים אנחנו יכולים לקפוץ לתוך scripting מלפנים. יצרתי קובץ ajax.js אשר מכיל כמה אירועים handlers קשור לשדה החיפוש. אם אתה עדיין עוקב עד עכשיו ואז להתרגש אנחנו כל כך קרוב להשלמה!
 אירועים מפתח jQuery
 בעת פתיחת המסמך בפעם הראשונה מוכן () אירוע אני הגדרת כמה משתנים. שני הראשונים מתנהגים כמו בוררים היעד הישיר עבור שדה החיפוש ואת מיכל תמונות. אני גם משתמש בשעון JavaScript כדי להשהות את שאילתת החיפוש עד 900 אלפיות השנייה לאחר שהמשתמש סיים להקליד.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); טיימר var; 
 יש רק שני בלוקים פונקציה העיקרית אנחנו עובדים עם. המטפל הראשי מופעל על ידי אירוע .keydown () כאשר מתמקדים בשדה החיפוש. תחילה אנו בודקים אם קוד המפתח תואם לאחד מהמפתחות האסורים שלנו, ואם כן, שלל את האירוע המרכזי. אחרת, נקה את טיימר ברירת המחדל והמתן 900ms לפני השיחה instaSearch ().
 / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * = = * * = * * .) ekeykey == '189' | e.keyCode == '189' || e.keyCode == '13' | | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') e.preventDefault (); אחר clearTimeout (טיימר), טיימר = setTimeout (פונקציה () instaSearch ();, 900);; 
 בכל פעם שתעדכן את הערך, הוא יביא באופן אוטומטי תוצאות חיפוש חדשות. ישנם גם רבים אחרים קודי מפתח היינו יכולים לחסום מ מפעילה את הפונקציה אייאקס - אבל יותר מדי עבור הרישום במדריך זה.
 אייאקס instaSearch () פונקציה
 בתוך הפונקציה המותאמת אישית החדשה שלי אנחנו קודם הוספת “טעינה” בכיתה אל שדה החיפוש. מחלקה זו תעדכן את סמל המצלמה עבור תמונת GIF חדשה. כמו כן, אנו רוצים לרוקן את כל הנתונים האפשריים שנותרו בקטע 'תמונות'. משתנה השאילתה נמשך באופן דינמי מהערך הנוכחי שהוזן בשדה החיפוש.
 פונקציה instaSearch () $ (sfield) .addClass ("טעינה"); $ (container) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', נתונים: "q =" + q, הצלחה: function (data) $ (sfield) .removeClass ("loading"); $ .each (נתונים, פונקציה (i, פריט) var ncode = ' 
' $ (מיכל). apend (ncode); ); , error: function (xhr, type, exclud) $ (sfield) .removeClass ("loading"); $ (container) .html ("שגיאה:" + type); );  
 אם אתה מכיר את הפונקציה .ajax () אז כל הפרמטרים האלה צריכים להיראות מוכרים. אני מעביר את פרמטר החיפוש של המשתמש “q” כמו נתוני POST. עם הצלחה וכישלון אנו מסירים את “טעינה” בכיתה ולצרף כל תגובה חזרה #photos עטיפה.
 בתוך פונקציית ההצלחה אנחנו looping דרך התגובה JSON הסופי לשלוף אלמנטים div הפרט. אנחנו יכולים להשיג את זה looping עם $ .each () פונקציה ומיקוד מערך הנתונים התגובה שלנו. אחרת את שיטת הכישלון יהיה ישירות פלט כל הודעת שגיאה התגובה של Instagram API. וזה באמת כל מה שיש!
  
 הצג הדגמה
 הורד מקור
 
סופי מחשבות
 צוות Instagram עשה עבודה נהדרת קנה מידה כזה יישום עצום. ה- API יכול להיות איטי לפעמים, אבל נתוני התגובה תמיד מעוצבים כראוי וקל מאוד לעבוד איתו. אני מקווה שמדריך זה יכול להוכיח כי יש הרבה כוח עבודה מחוץ 3rd יישומים צד.
 למרבה הצער שאילתות החיפוש הנוכחי Instagram אינם מאפשרים יותר מ 1 תג בכל פעם. זה מגביל את ההדגמה שלנו, אבל זה בהחלט לא להסיר כל הקסם שלה. אתה צריך לבדוק את הדוגמה חיה לעיל ולהוריד עותק של קוד המקור שלי כדי לשחק עם. בנוסף, הודע לנו על מחשבותיך באזור הדיון הבא.