jQuery와 PHP로 당신 자신의 Instagram 검색 엔진을 만드는 법

Google은 즉시 검색 기능을 출시 한 이래로 웹 디자인에서 인기있는 트렌드가되었습니다. Michael Hart의 Google 이미지 앱과 같은 재미있는 온라인 예가 몇 가지 있습니다. 이 기술은 모두 알기 쉬운 jQuery 경험을 가진 웹 개발자조차도 프로그래밍 API와 JSON 데이터를 가져올 수있는 매우 간단합니다..

이 튜토리얼에서는 설명하고 싶습니다. 유사한 즉석 검색 웹 응용 프로그램을 구축하는 방법. Google에서 이미지를 가져 오는 대신 몇 년 만에 엄청나게 성장한 Instagram을 사용할 수 있습니다..

이 소셜 네트워크는 iOS 용 모바일 앱으로 시작되었습니다. 사용자는 사진을 찍어 친구와 공유하고, 댓글을 남기며, Flickr와 같은 타사 네트워크에 업로드 할 수 있습니다. 이 팀은 최근에 Facebook에 인수되어 Android 마켓을위한 새로운 앱을 게시했습니다. 그들의 사용자 기반은 엄청나게 성장했으며, 이제 개발자는이 instasearch 데모처럼 놀라운 미니 응용 프로그램을 만들 수 있습니다..

데모보기
소스 다운로드

API 자격증 취득

프로젝트 파일을 만들기 전에 먼저 Instagram의 API 시스템에 대한 아이디어를 조사해야합니다. 초보자에게 유용한 지침을 제공하는 개발자 포털에 액세스하려면 계정이 필요합니다. Instagram 데이터베이스를 쿼리하기 위해 필요한 것은 “클라이언트 ID”.

상단 툴바에서 클라이언트 관리 링크를 클릭 한 다음 녹색 버튼을 클릭하십시오. “새 클라이언트 등록”. 신청서에 이름, 간단한 설명 및 웹 사이트 URL을 제공해야합니다. URL 및 리디렉션 URI는 사용자를 인증 할 필요가 없기 때문에이 인스턴스에서 동일한 값일 수 있습니다. 모든 값을 채우고 새로운 애플리케이션 세부 정보를 생성하기 만하면됩니다..

긴 문자열이 표시됩니다. 고객 ID. 백엔드 스크립트를 작성할 때 나중에이 키가 필요하므로이 섹션으로 돌아갑니다. 지금은 jQuery 인스턴트 검색 응용 프로그램의 구축을 시작할 수 있습니다..

기본 웹 페이지 콘텐츠

실제 HTML은 사용하는 기능의 양이 매우 적습니다. 대부분의 이미지 데이터는 동적으로 추가되므로 페이지 내에 몇 개의 작은 요소 만 있으면됩니다. 이 코드는 index.html 파일.

    jQuery와 함께하는 Instagram Photo Instant Search 앱         참고 : 공백이나 문장 부호는 허용되지 않습니다. 검색은 하나의 키워드로 제한됩니다..

저는 최신 jQuery 1.7.2 라이브러리와 두 개의 외부 .css 및 .js 리소스를 사용하고 있습니다. 입력 검색 필드에는 외부 양식 래퍼가 없습니다. 양식을 제출하고 페이지를 다시로드하지 않기를 원하기 때문입니다. 검색 필드에서 몇 번의 키 입력을 사용 중지하여 사용자가 타이핑 할 때 제한이 더 많습니다..

중간 섹션 ID 안에 모든 사진 데이터를 채 웁니다. #photos. 기본 HTML을 깨끗하고 읽기 쉽게 유지합니다. 다른 모든 내부 HTML 요소는 jQuery를 통해 추가되며 각 새 검색 전에 제거됩니다..

API에서 가져 오기

먼저 동적 PHP 스크립트를 작성한 다음 jQuery로 이동하여 시작하겠습니다. 내 새 파일의 이름이 지정되었습니다. instasearch.php 모든 중요한 백엔드 후크가 API에 포함됩니다..

 첫 번째 줄은 반환 데이터가 일반 텍스트 또는 HTML 대신 JSON 형식으로되어 있음을 나타냅니다. 이는 JavaScript 함수가 데이터를 올바르게 읽는 데 필요합니다. 그런 다음 애플리케이션 클라이언트 ID, 사용자 검색 값 및 최종 API URL을 포함하는 몇 가지 변수 설정이 있습니다. 업데이트를 확인하십시오. $ 고객 자신의 응용 프로그램과 일치하는 문자열 값.
 이 URL 데이터에 액세스하려면 파일 내용을 구문 분석하거나 cURL 함수를 사용해야합니다. 커스텀 함수 get_curl () 현재 PHP 설정을 검사하는 코드입니다..
 cURL을 활성화하지 않은 경우이 기능을 활성화하고 자체 함수 라이브러리를 통해 데이터를 가져 오려고 시도합니다. 그렇지 않으면 단순히 느린 경향이 있지만 여전히 잘 작동하는 file_get_contents ()를 사용할 수 있습니다. 그런 다음 실제로이 데이터를 다음과 같은 변수로 가져올 수 있습니다.
 $ 응답 = get_curl ($ api); 
 데이터 정리 및 반환
 모든 정보가로드 된 Instagram의 원래 JSON 응답 만 반환 할 수 있습니다. 그러나 너무 많은 추가 데이터가 있으며 모든 것을 반복하는 것은 매우 짜증납니다. 필자는 Ajax 응답을 구성하고 필요한 데이터를 정확히 추출하는 것을 선호합니다..
 먼저 모든 이미지에 대해 빈 배열을 설정할 수 있습니다. 그런 다음 내부 각각() 우리는 JSON 데이터 객체를 하나 하나 뽑을 것이다. 우리는 단지 세 가지 (3) 특정 값이 필요합니다. $ src(풀 사이즈 이미지 URL), $ 엄지 손가락(미리보기 이미지 URL) 및 $ url(고유 한 사진 permalink).
 $ images = array (); if ($ response) foreach (json_decode ($ response) -> 데이터를 $ item로) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ 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 주요 이벤트
 문서를 처음 열 때 준비된() 이벤트 몇 가지 변수를 설정하고 있습니다. 처음 두 개는 검색 필드와 사진 컨테이너에 대한 직접 대상 선택기로 작동합니다. 또한 자바 스크립트 타이머를 사용하여 사용자가 타이핑을 마친 후 900 밀리 초가 될 때까지 검색 쿼리를 일시 중지합니다..
 var container = $ ( "# photos"); var timer; var container = $ ( "# s"); 
 우리가 작업하고있는 주요 기능 블록은 두 가지뿐입니다. 기본 처리기는 검색 필드에 포커스가있을 때 .keydown () 이벤트에 의해 트리거됩니다. 먼저 키 코드가 금지 된 키와 일치하는지 확인한 다음 키 이벤트를 무효화합니다. 그렇지 않으면 기본 타이머를 지우고 전화하기 전에 900ms 기다립니다. instaSearch ().
 / ** * 키 코드 용어집 * 32 = 스페이스 * 188 = 콤마 * 189 = 대시 * 190 = 마침표 * 191 = 백 슬래시 * 13 = ENTER * 219 = 왼쪽 브래킷 * 220 = 앞뒤 슬래시 * 221 = 오른쪽 브래킷 * / $ (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') 타이머 = setTimeout (함수 () instaSearch ();, 900);)); 
 값을 업데이트 할 때마다 자동으로 새 검색 결과를 가져옵니다. Ajax 함수를 트리거하지 못하도록 차단할 수있는 많은 다른 키 코드가 있지만이 자습서의 목록에는 너무 많습니다..
 Ajax instaSearch () 함수
 내 새로운 사용자 정의 함수 안에 먼저 “로딩” 클래스를 검색 필드에 추가하십시오. 이 클래스는 새로로드되는 gif 이미지에 대한 카메라 아이콘을 업데이트합니다. 사진 섹션에서 남아있는 가능한 모든 데이터를 비우고 싶습니다. 검색어 변수는 검색 입력란에 입력 된 현재 값에서 동적으로 가져옵니다..
 function instaSearch () $ (sfield) .addClass ( "loading"); $ (container) .empty (); var q = $ (sfield) .val (); $ .ajax (type : 'POST', url : 'instasearch.php', data : "q ="+ q, 성공 : 함수 (데이터) $ (sfield) .removeClass ( "loading"); $. (data, function (i, item) var ncode = ' 
'; $ (container) .append (ncode); ); , 오류 : function (xhr, type, exception) $ (sfield) .removeClass ( "loading"); $ (container) .html ( "Error :"+ type); ));  
 .ajax () 함수에 익숙하다면이 모든 매개 변수는 익숙 할 것입니다. 사용자 검색 매개 변수를 전달 중입니다. “큐” POST 데이터로. 성공과 실패시 Google은 “로딩” 수업에 응답을 추가하십시오. #photos 싸개.
 success 함수 내에서 우리는 최종 JSON 응답을 반복하면서 개별 div 요소를 추출합니다. $ .each () 함수를 사용하고 응답 데이터 배열을 대상으로이 루핑을 수행 할 수 있습니다. 그렇지 않으면 failure 메소드가 Instagram API로부터 응답 오류 메시지를 직접 출력합니다. 그리고 그게 전부입니다.!
  
 데모보기
 소스 다운로드
 
마지막 생각들
 Instagram 팀은 엄청난 규모의 응용 프로그램을 훌륭하게 처리했습니다. API는 때때로 속도가 느릴 수 있지만 응답 데이터는 항상 올바르게 형식화되며 작업하기가 쉽습니다. 이 튜토리얼에서 제 3 자 애플리케이션을 작동시키는 많은 힘이 있음을 보여줄 수 있기를 바랍니다..
 불행히도 현재 Instagram 검색 쿼리는 한 번에 두 개 이상의 태그를 허용하지 않습니다. 이것은 우리의 데모에 국한되지만, 확실히 그 매력을 제거하지는 못합니다. 위의 라이브 예제를 확인하고 내 소스 코드 사본을 다운로드하여 함께 플레이해야합니다. 또한 아래의 토론 영역에서 의견을 보내주십시오..