วิธีการสร้างเครื่องมือค้นหา Instagram ของคุณเองด้วย jQuery และ PHP

นับตั้งแต่ Google เปิดตัวคุณลักษณะการค้นหาแบบทันทีมันกลายเป็นเทรนด์ยอดนิยมในการออกแบบเว็บ มีตัวอย่างความสนุกออนไลน์เช่นแอป Google รูปภาพของ Michael Hart เทคนิคต่าง ๆ นั้นค่อนข้างตรงไปตรงมาแม้แต่นักพัฒนาเว็บที่มีประสบการณ์ jQuery ในระดับปานกลางก็สามารถรับ API การเขียนโปรแกรมและข้อมูล JSON ได้.

สำหรับบทช่วยสอนนี้ฉันต้องการอธิบาย วิธีที่เราสามารถสร้างแอปพลิเคชันการค้นหาเว็บแบบทันทีที่คล้ายกัน. แทนที่จะดึงภาพจาก Google เราสามารถใช้ Instagram ซึ่งเติบโตขึ้นอย่างมากในเวลาไม่กี่ปี.

เครือข่ายโซเชียลนี้เริ่มต้นจากการเป็นแอพมือถือสำหรับ iOS ผู้ใช้สามารถถ่ายรูปและแบ่งปันกับเพื่อนฝากความคิดเห็นและอัปโหลดไปยังเครือข่ายบุคคลที่สามเช่น Flickr ทีมเพิ่งได้มาจาก Facebook และได้เผยแพร่แอพใหม่สำหรับ Android Market ฐานผู้ใช้ของพวกเขาเติบโตขึ้นอย่างมากและตอนนี้นักพัฒนาสามารถสร้างมินิแอพที่น่าทึ่งเหมือนกับการสาธิตใน instasearch นี้.

ดูการสาธิต
แหล่งดาวน์โหลด

การรับข้อมูลรับรอง API

ก่อนที่จะสร้างไฟล์โครงการใด ๆ เราควรพิจารณาแนวคิดที่อยู่เบื้องหลังระบบ API ของ Instagram ก่อน คุณจะต้องมีบัญชีเพื่อเข้าถึงพอร์ทัลของผู้พัฒนาซึ่งมีคำแนะนำที่เป็นประโยชน์สำหรับผู้เริ่มต้น ทั้งหมดที่เราต้องสืบค้นฐานข้อมูล Instagram คือ “รหัสลูกค้า”.

ในแถบเครื่องมือด้านบนคลิกลิงก์จัดการลูกค้าจากนั้นคลิกปุ่มสีเขียว “ลงทะเบียนลูกค้าใหม่”. คุณจะต้องให้ชื่อคำอธิบายสั้น ๆ และ URL ของแอปพลิเคชัน URL และ Redirect URI สามารถเป็นค่าเดียวกันในอินสแตนซ์นี้เท่านั้นเนื่องจากเราไม่จำเป็นต้องตรวจสอบสิทธิ์ผู้ใช้ เพียงกรอกค่าทั้งหมดและสร้างรายละเอียดแอปพลิเคชันใหม่.

คุณจะเห็นสตริงอักขระยาวชื่อ รหัสลูกค้า. เราจะต้องใช้รหัสนี้ในภายหลังเมื่อสร้างสคริปต์ส่วนหลังดังนั้นเราจะกลับไปที่ส่วนนี้ สำหรับตอนนี้เราสามารถเริ่มต้นสร้างแอพพลิเคชั่นค้นหา jQuery ได้ทันที.

เนื้อหาหน้าเว็บเริ่มต้น

HTML ที่แท้จริงนั้นบางมากสำหรับปริมาณการใช้งานที่เราใช้ เนื่องจากข้อมูลรูปภาพส่วนใหญ่ถูกผนวกเข้ากับไดนามิกเราจึงต้องการองค์ประกอบขนาดเล็กเพียงเล็กน้อยในหน้า รหัสนี้อยู่ภายใน index.html ไฟล์.

    แอพค้นหารูปภาพ Instagram Instagram พร้อม jQuery         หมายเหตุ: ไม่อนุญาตให้เว้นวรรคหรือเครื่องหมายวรรคตอน การค้นหา จำกัด เพียงหนึ่งคำหลัก (1) คำ.

ฉันใช้ไลบรารี jQuery 1.7.2 ล่าสุดพร้อมกับ. css และ. js สองแหล่งข้อมูลภายนอก ฟิลด์ค้นหาอินพุตไม่มี wrapper แบบฟอร์มด้านนอกเนื่องจากเราไม่ต้องการส่งฟอร์มและทำให้เกิดการโหลดหน้าซ้ำ ฉันปิดการใช้งานการกดแป้นบางอย่างภายในช่องค้นหาเพื่อให้มีข้อ จำกัด มากขึ้นเมื่อผู้ใช้พิมพ์.

เราจะเติมข้อมูลภาพถ่ายทั้งหมดใน ID ส่วนตรงกลาง #photos. มันทำให้ HTML พื้นฐานของเราสะอาดและอ่านง่าย องค์ประกอบ HTML ภายในอื่น ๆ ทั้งหมดจะถูกเพิ่มผ่าน jQuery และจะถูกลบออกก่อนการค้นหาใหม่แต่ละครั้ง.

การดึงจาก API

ฉันต้องการเริ่มต้นด้วยการสร้างสคริปต์ PHP แบบไดนามิกของเราแล้วย้ายไปยัง jQuery ไฟล์ใหม่ของฉันชื่อ instasearch.php ซึ่งจะมีตะขอแบ็คเอนด์ที่สำคัญทั้งหมดลงใน API.

บรรทัดแรกแสดงว่าข้อมูลส่งคืนของเราถูกจัดรูปแบบเป็น JSON แทนข้อความธรรมดาหรือ HTML นี่เป็นสิ่งจำเป็นสำหรับฟังก์ชั่น JavaScript ในการอ่านข้อมูลอย่างถูกต้อง หลังจากนั้นฉันมีการตั้งค่าตัวแปรบางอย่างที่มี ID ไคลเอ็นต์แอปพลิเคชันค่าการค้นหาผู้ใช้และ URL API สุดท้าย ตรวจสอบให้แน่ใจว่าคุณอัปเดต ลูกค้า $ ค่าสตริงเพื่อให้ตรงกับแอปพลิเคชันของคุณเอง.

ในการเข้าถึงข้อมูล URL นี้เราจำเป็นต้องวิเคราะห์เนื้อหาไฟล์หรือใช้ฟังก์ชั่น cURL ฟังก์ชั่นที่กำหนดเอง get_curl () เป็นโค้ดเพียงเล็กน้อยที่ตรวจสอบกับการกำหนดค่า PHP ปัจจุบัน.

หากคุณไม่ได้เปิดใช้งาน cURL สิ่งนี้จะพยายามเปิดใช้งานคุณลักษณะและดึงข้อมูลผ่านไลบรารีฟังก์ชั่นของตัวเอง มิฉะนั้นเราสามารถใช้ file_get_contents () ซึ่งมีแนวโน้มที่จะช้ากว่า แต่ก็ยังใช้งานได้เช่นกัน จากนั้นเราก็สามารถดึงข้อมูลนี้ไปเป็นตัวแปรเช่น:

$ response = get_curl ($ api);

การจัดระเบียบและการส่งคืนข้อมูล

เราสามารถส่งคืนการตอบสนอง JSON ดั้งเดิมนี้จาก Instagram ด้วยข้อมูลทั้งหมดที่โหลดไว้ แต่มีข้อมูลเพิ่มเติมมากมายและมันน่ารำคาญมากที่จะวนซ้ำทุกสิ่ง ฉันชอบจัดระเบียบคำตอบของอาแจ็กซ์และดึงข้อมูลที่เราต้องการ.

ก่อนอื่นเราสามารถตั้งค่าอาร์เรย์ว่างสำหรับภาพทั้งหมด จากนั้นภายใน แต่ละ() วนรอบเราจะดึงวัตถุข้อมูล JSON ออกหนึ่งต่อหนึ่ง เราต้องการค่าเฉพาะสาม (3) ค่าซึ่งก็คือ $ src(URL รูปภาพขนาดเต็ม), $ นิ้วหัวแม่มือ(URL รูปภาพขนาดย่อ) และ $ URL(ลิงก์รูปภาพที่ไม่ซ้ำ).

$ images = array (); if ($ response) foreach (json_decode ($ response) -> data เป็น $ 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 ซึ่งมีตัวจัดการเหตุการณ์คู่เชื่อมโยงกับช่องค้นหา หากคุณยังคงติดตามจนถึงตอนนี้ขอให้คุณรู้สึกตื่นเต้นที่เราใกล้จะเสร็จสมบูรณ์!

jQuery Key Events

เมื่อเปิดเอกสารครั้งแรก พร้อม () เหตุการณ์ฉันกำลังตั้งค่าตัวแปรคู่ สองตัวแรกทำงานเป็นตัวเลือกเป้าหมายโดยตรงสำหรับช่องค้นหาและที่เก็บภาพถ่าย ฉันยังใช้ตัวจับเวลา JavaScript เพื่อหยุดการค้นหาชั่วคราวจนกว่า 900 มิลลิวินาทีหลังจากผู้ใช้พิมพ์เสร็จแล้ว.

$ (เอกสาร). ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer;

มีฟังก์ชั่นบล็อกหลักเพียงสองบล็อกเท่านั้นที่เราทำงานด้วย ตัวจัดการหลักจะถูกเรียกใช้โดยเหตุการณ์. keydown () เมื่อเน้นไปที่ช่องค้นหา ก่อนอื่นเราตรวจสอบว่ารหัสกุญแจตรงกับกุญแจที่ต้องห้ามของเราหรือไม่และหากคัดค้านเหตุการณ์สำคัญ มิฉะนั้นจะล้างตัวจับเวลาเริ่มต้นและรอ 900 มิลลิวินาทีก่อนที่จะโทร instaSearch ().

/ ** * คำศัพท์ keycode * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = ระยะเวลา * 191 = BACKSLASH * 13 = ENTER * 219 = BRACKET ด้านซ้าย * 220 = ฟอร์เวิร์ดแบ็ค * 221 = RACK BRACKET * / $ (sfield ) .keydown (ฟังก์ชัน (e) ถ้า (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 (); else clearTimeout (ตัวจับเวลา); timer = setTimeout (ฟังก์ชั่น () instaSearch ();, 900);;

ทุกครั้งที่คุณอัปเดตค่ามันจะไปดึงผลการค้นหาใหม่โดยอัตโนมัติ นอกจากนี้ยังมีรหัสคีย์อื่น ๆ อีกมากมายที่เราอาจบล็อกไม่ให้เรียกใช้ฟังก์ชัน Ajax แต่มีมากเกินไปสำหรับการแสดงรายการในบทช่วยสอนนี้.

ฟังก์ชัน Ajax instaSearch ()

ภายในฟังก์ชั่นที่กำหนดเองใหม่ของฉันเราจะเพิ่มเป็นครั้งแรก “โหลด” ชั้นเรียนลงในช่องค้นหา คลาสนี้จะอัปเดตไอคอนกล้องสำหรับรูปภาพ gif ที่กำลังโหลดใหม่ เราต้องการลบข้อมูลที่เป็นไปได้ที่เหลืออยู่ในส่วนภาพถ่าย ตัวแปรคิวรี่จะถูกดึงแบบไดนามิกจากค่าปัจจุบันที่ป้อนในช่องค้นหา.

ฟังก์ชั่น instaSearch () $ (sfield) .addClass ("กำลังโหลด"); $ (คอนเทนเนอร์) .empty (); var q = $ (sfield) .val (); $ .ajax (ประเภท: 'POST', url: 'instasearch.php', ข้อมูล: "q =" + q, ความสำเร็จ: ฟังก์ชัน (ข้อมูล) $ (sfield) .removeClass ("กำลังโหลด"); $ .each (data, function (i, item) var ncode = ' 
'; $ (คอนเทนเนอร์) .append (nCode); ); , ข้อผิดพลาด: ฟังก์ชัน (xhr, type, exception) $ (sfield) .removeClass ("loading"); $ (คอนเทนเนอร์) .html ("ข้อผิดพลาด:" + ประเภท); );

หากคุณคุ้นเคยกับฟังก์ชัน. jax () แล้วพารามิเตอร์เหล่านี้ทั้งหมดควรดูคุ้นเคย ฉันผ่านพารามิเตอร์การค้นหาผู้ใช้ “Q” เป็นข้อมูล POST เมื่อประสบความสำเร็จและล้มเหลวเราจะลบ “โหลด” ชั้นเรียนและต่อท้ายคำตอบใด ๆ กลับเข้ามา #photos เสื้อคลุม.

ภายในฟังก์ชั่นความสำเร็จเราจะวนลูปผ่านการตอบสนอง JSON สุดท้ายเพื่อดึงองค์ประกอบ div แต่ละตัวออกมา เราสามารถบรรลุลูปนี้ได้ด้วยฟังก์ชัน $ .each () และกำหนดเป้าหมายอาเรย์ข้อมูลการตอบกลับของเรา มิฉะนั้นวิธีการที่ล้มเหลวจะส่งข้อความแสดงข้อผิดพลาดการตอบสนองโดยตรงจาก Instagram API โดยตรง และนั่นคือทั้งหมดที่มีให้!

ดูการสาธิต
แหล่งดาวน์โหลด

ความคิดสุดท้าย

ทีมงาน Instagram ได้ทำการปรับขนาดงานที่ยอดเยี่ยมเช่นแอปพลิเคชันอันยิ่งใหญ่ API อาจช้าในบางครั้ง แต่ข้อมูลการตอบสนองจะถูกจัดรูปแบบอย่างเหมาะสมและใช้งานได้ง่ายมาก ฉันหวังว่าบทช่วยสอนนี้สามารถแสดงให้เห็นว่ามีพลังมากมายในการทำงานกับแอปพลิเคชันบุคคลที่สาม.

น่าเสียดายที่คำค้นหา Instagram ปัจจุบันไม่อนุญาตให้มากกว่า 1 แท็กในแต่ละครั้ง นี่เป็นการ จำกัด การสาธิตของเรา แต่แน่นอนไม่ได้ลบเสน่ห์ใด ๆ คุณควรตรวจสอบตัวอย่างสดด้านบนและดาวน์โหลดสำเนาซอร์สโค้ดของฉันเพื่อเล่นกับ นอกจากนี้แจ้งให้เราทราบความคิดของคุณในส่วนการสนทนาโพสต์ด้านล่าง.