Cách xây dựng công cụ tìm kiếm Instagram của riêng bạn với jQuery và PHP
Kể từ khi Google tung ra các tính năng tìm kiếm tức thì, nó đã trở thành một xu hướng phổ biến trong thiết kế web. Có một số ví dụ thú vị trực tuyến như ứng dụng Google Images của Michael Hart. Các kỹ thuật này khá đơn giản trong đó ngay cả một nhà phát triển web có kinh nghiệm jQuery vừa phải cũng có thể nhận các API lập trình và dữ liệu JSON.
Đối với hướng dẫn này, tôi muốn giải thích làm thế nào chúng ta có thể xây dựng một ứng dụng web tìm kiếm tức thì tương tự. Thay vì lấy hình ảnh từ Google, chúng ta có thể sử dụng Instagram đã phát triển vượt bậc chỉ trong vài năm ngắn ngủi.
Mạng xã hội này bắt đầu như một ứng dụng di động cho iOS. Người dùng có thể chụp ảnh và chia sẻ chúng với bạn bè của họ, để lại nhận xét và tải lên các mạng của bên thứ 3 như Flickr. Nhóm gần đây đã được Facebook mua lại và đã xuất bản một ứng dụng hoàn toàn mới cho Android Market. Lượng người dùng của họ đã tăng lên rất nhiều và giờ đây, các nhà phát triển có thể xây dựng các ứng dụng nhỏ tuyệt vời giống như bản demo tìm kiếm này.
- Xem bản demo
- Tải xuống nguồn
Lấy thông tin xác thực API
Trước khi tạo bất kỳ tệp dự án nào, trước tiên chúng ta nên xem xét các ý tưởng đằng sau hệ thống API của Instagram. Bạn sẽ cần một tài khoản để truy cập cổng thông tin của nhà phát triển cung cấp các hướng dẫn hữu ích cho người mới bắt đầu. Tất cả những gì chúng ta cần để truy vấn cơ sở dữ liệu Instagram là một “ID khách hàng”.
Trong thanh công cụ trên cùng, nhấp vào liên kết Quản lý khách hàng, sau đó nhấp vào nút màu lục “Đăng ký một khách hàng mới”. Bạn sẽ cần cung cấp cho ứng dụng một tên, mô tả ngắn và URL trang web. URL và URI chuyển hướng có thể là cùng một giá trị trong trường hợp này chỉ vì chúng tôi không cần xác thực bất kỳ người dùng nào. Chỉ cần điền vào tất cả các giá trị và tạo chi tiết ứng dụng mới.
Bạn sẽ thấy một chuỗi dài các ký tự được đặt tên ID khách hàng. Chúng ta sẽ cần khóa này sau này khi xây dựng tập lệnh phụ trợ, vì vậy chúng ta sẽ quay lại phần này. Bây giờ chúng ta có thể bắt đầu xây dựng ứng dụng tìm kiếm tức thì của jQuery.
Nội dung trang web mặc định
HTML thực tế rất mỏng đối với số lượng chức năng chúng tôi đang sử dụng. Vì hầu hết dữ liệu hình ảnh được nối động, chúng tôi chỉ yêu cầu một vài yếu tố nhỏ hơn trong trang. Mã này được tìm thấy bên trong index.html tập tin.
Ứng dụng tìm kiếm tức thì trên Instagram với jQuery Lưu ý: Không cho phép dấu cách hoặc dấu chấm câu. Tìm kiếm được giới hạn trong một (1) từ khóa.
Tôi đang sử dụng thư viện jQuery 1.7.2 mới nhất cùng với hai tài nguyên .css và .js bên ngoài. Trường tìm kiếm đầu vào không có trình bao bọc biểu mẫu bên ngoài vì chúng tôi không muốn gửi biểu mẫu và gây ra tải lại trang. Tôi đã tắt một vài tổ hợp phím bên trong trường tìm kiếm để có nhiều hạn chế hơn khi người dùng đang nhập.
Chúng tôi sẽ điền tất cả dữ liệu ảnh bên trong ID phần giữa # hình ảnh. Nó giữ cho HTML cơ bản của chúng ta sạch sẽ và dễ đọc. Tất cả các yếu tố HTML nội bộ khác sẽ được thêm thông qua jQuery và cũng bị xóa trước mỗi tìm kiếm mới.
Kéo từ API
Trước tiên tôi muốn bắt đầu bằng cách tạo tập lệnh PHP động của chúng tôi và sau đó chuyển sang jQuery. Tập tin mới của tôi được đặt tên instasearch.php sẽ chứa tất cả các hook phụ trợ quan trọng vào API.
Dòng đầu tiên biểu thị rằng dữ liệu trả về của chúng tôi được định dạng là JSON thay vì văn bản gốc hoặc HTML. Điều này là cần thiết cho các hàm JavaScript để đọc dữ liệu đúng cách. Sau đó, tôi đã có một vài thiết lập biến chứa ID ứng dụng khách, giá trị tìm kiếm của người dùng và URL API cuối cùng. Hãy chắc chắn rằng bạn cập nhật
$ khách hàngchuỗi giá trị để phù hợp với ứng dụng của riêng bạn.Để truy cập dữ liệu URL này, chúng tôi cần phân tích nội dung tệp hoặc sử dụng các hàm cURL. Chức năng tùy chỉnh
get_curl ()chỉ là một đoạn mã nhỏ kiểm tra cấu hình PHP hiện tại.Nếu bạn chưa kích hoạt cURL, điều này sẽ cố gắng kích hoạt tính năng và kéo dữ liệu qua thư viện chức năng của riêng họ. Mặt khác, chúng ta có thể chỉ cần sử dụng file_get_contents () có xu hướng chậm hơn, nhưng vẫn hoạt động tốt. Sau đó, chúng ta thực sự có thể kéo dữ liệu này vào một biến như vậy:
$ reply = get_curl ($ api);Sắp xếp và trả lại dữ liệu
Chúng tôi chỉ có thể trả lại phản hồi JSON gốc này từ Instagram với tất cả thông tin được tải lên. Nhưng có quá nhiều dữ liệu và thật khó chịu khi lặp đi lặp lại mọi thứ. Tôi thích tổ chức các phản hồi Ajax và rút ra chính xác những phần dữ liệu chúng ta cần.
Đầu tiên chúng ta có thể thiết lập một mảng trống cho tất cả các hình ảnh. Sau đó, bên trong một
cho mỗi()vòng lặp chúng ta sẽ lần lượt rút ra các đối tượng dữ liệu JSON. Chúng ta chỉ cần ba (3) giá trị cụ thể là $ src(URL hình ảnh kích thước đầy đủ), $ ngón tay cái(URL hình ảnh thu nhỏ) và $ url(permalink ảnh độc đáo).$ hình ảnh = mảng (); if ($ reply) foreach (json_decode ($ reply) -> dữ liệu dưới dạng $ item) $ src = $ item-> hình ảnh-> standard_resolution-> url; $ thumb = $ item-> hình ảnh-> hình thu nhỏ-> url; $ url = $ item-> liên kết; $ hình ảnh [] = mảng ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));Những người không quen thuộc với các vòng lặp PHP có thể bị lạc trong quá trình này. Đừng tập trung quá nhiều vào các đoạn mã này nếu bạn không hiểu cú pháp. Mảng hình ảnh của chúng tôi sẽ chứa tối đa 16-20 mục ảnh độc đáo được lấy từ ngày xuất bản gần đây nhất. Sau đó, chúng ta có thể xuất tất cả mã này lên trang dưới dạng phản hồi jQuery Ajax.
print_r (str numplace ('\\ /', '/', json_encode ($ hình ảnh))); chết();Nhưng bây giờ chúng ta đã có một cái nhìn phía sau hậu trường, chúng ta có thể nhảy vào kịch bản frontend. Tôi đã tạo một tập tin ajax.js trong đó có một vài trình xử lý sự kiện gắn liền với trường tìm kiếm. Nếu bạn vẫn theo dõi cho đến bây giờ thì hãy phấn khích, chúng ta sắp hoàn thành!
Sự kiện chính của jQuery
Khi lần đầu tiên mở tài liệu
sẳn sàng()sự kiện tôi đang thiết lập một vài biến. Hai cái đầu tiên hoạt động như các bộ chọn mục tiêu trực tiếp cho trường tìm kiếm và bộ chứa ảnh. Tôi cũng đang sử dụng bộ đếm thời gian JavaScript để tạm dừng truy vấn tìm kiếm cho đến 900 mili giây sau khi người dùng nhập xong.$ (tài liệu). yet (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer;Chỉ có hai khối chức năng chính mà chúng tôi đang làm việc. Trình xử lý chính được kích hoạt bởi một sự kiện .keydown () khi tập trung vào trường tìm kiếm. Trước tiên, chúng tôi kiểm tra xem mã khóa có khớp với bất kỳ khóa bị cấm nào không và nếu có thì phủ nhận sự kiện khóa đó. Nếu không, hãy xóa bộ hẹn giờ mặc định và đợi 900ms trước khi gọi
Tìm kiếm ()./ ** * Bảng chú giải mã khóa * 32 = KHÔNG GIAN * 188 = COMMA * 189 = DASH * 190 = PERIOD * 191 = BACKSLASH * 13 = ENTER * 219 = TRÁI PHIẾU TRÁI * * ) .keydown (hàm (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 (); other clearTimeout (timer); timer = setTimeout (function () instaSearch ();, 900););Mỗi khi bạn cập nhật giá trị, nó sẽ tự động tìm nạp kết quả tìm kiếm mới. Ngoài ra còn có nhiều mã khóa khác mà chúng tôi có thể đã chặn kích hoạt chức năng Ajax - nhưng quá nhiều để liệt kê trong hướng dẫn này.
Hàm Ajax instaSearch ()
Bên trong chức năng tùy chỉnh mới của chúng tôi, trước tiên chúng tôi thêm một “tải” lớp vào trường tìm kiếm. Lớp này sẽ cập nhật biểu tượng camera cho hình ảnh gif tải mới. Chúng tôi cũng muốn làm trống mọi dữ liệu có thể còn lại trong phần ảnh. Biến truy vấn được kéo tự động từ giá trị hiện tại được nhập vào trường tìm kiếm.
hàm instaSearch () $ (sfield) .addClass ("đang tải"); $ (container) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', dữ liệu: "q =" + q, thành công: function (data) $ (sfield) (dữ liệu, chức năng (i, mục) var ncode = ''; $ (container) .append (ncode); ); , error: function (xhr, type, ngoại lệ) $ (sfield) .removeClass ("load"); $ (container) .html ("Lỗi:" + loại); );
Nếu bạn quen thuộc với hàm .ajax () thì tất cả các tham số này sẽ trông quen thuộc. Tôi đang chuyển tham số tìm kiếm người dùng “q” làm dữ liệu POST. Khi thành công và thất bại, chúng tôi loại bỏ “tải” lớp và nối bất kỳ phản hồi nào trở lại # hình ảnh vỏ bánh.
Trong hàm thành công, chúng tôi đang lặp qua phản hồi JSON cuối cùng để lấy ra các phần tử div riêng lẻ. Chúng ta có thể thực hiện việc lặp này với hàm $ .each () và nhắm mục tiêu mảng dữ liệu phản hồi của chúng ta. Nếu không, phương thức thất bại sẽ trực tiếp xuất ra bất kỳ thông báo lỗi phản hồi nào từ API Instagram. Và đó thực sự là tất cả những gì có!
- Xem bản demo
- Tải xuống nguồn
Suy nghĩ cuối cùng
Nhóm Instagram đã thực hiện một công việc tuyệt vời nhân rộng một ứng dụng tuyệt vời như vậy. API có thể chậm đôi khi, nhưng dữ liệu phản hồi luôn được định dạng đúng và rất dễ làm việc. Tôi hy vọng hướng dẫn này có thể chứng minh rằng có rất nhiều sức mạnh hoạt động từ các ứng dụng của bên thứ 3.
Thật không may, các truy vấn tìm kiếm Instagram hiện tại không cho phép nhiều hơn 1 thẻ cùng một lúc. Điều này giới hạn trong bản demo của chúng tôi, nhưng chắc chắn nó không loại bỏ bất kỳ sự quyến rũ nào của nó. Bạn nên xem ví dụ trực tiếp ở trên và tải xuống một bản sao mã nguồn của tôi để chơi xung quanh. Ngoài ra, hãy cho chúng tôi biết suy nghĩ của bạn trong khu vực thảo luận dưới đây.
