Nowości

Twitter API – pobieramy wpisy z jQuery!

[demo url=”http://edu3.home.pl/blog/pliki/twitter_api/” files=”http://edu3.home.pl/blog/pliki/twitter_api/twitter_api.zip”] W poprzednim artykule traktującym o bibliotece Handlebars.js zapowiedziałem, że już wkrótce ukaże się jego kontynuacja, w której poznaną wiedzę wykorzystamy do…

[demo url=”http://edu3.home.pl/blog/pliki/twitter_api/” files=”http://edu3.home.pl/blog/pliki/twitter_api/twitter_api.zip”]

W poprzednim artykule traktującym o bibliotece Handlebars.js zapowiedziałem, że już wkrótce ukaże się jego kontynuacja, w której poznaną wiedzę wykorzystamy do stworzenia prawdziwej aplikacji. Zgodnie z obietnicą, w tutorialu, który masz przed sobą pokażę, jak z pomocą jQuery pobrać wpisy z Twittera na podstawie wybranych kryteriów oraz zaprezentować je na stronie przy użyciu Handlebars.js. Jeśli nie jesteś jeszcze zaznajomiony z dynamicznymi szablonami w JavaScripcie, polecam zapoznanie się z poprzednim wpisem. Nie wszystkie opisywane w nim zagadnienia będą potrzebne do zrozumienia tego, czym zajmiemy się dzisiaj, dlatego wystarczy, że poznasz podstawy Handlebars.js.

Do dzieła!

Na początek, jak zwykle, będziemy potrzebowali pliku HTML, w którym umieścimy warstwę prezentacyjną aplikacji:

Jak zatem widzisz, w kodzie umieszczone zostały odnośniki do biblioteki jQuery, Handlebars.js oraz do pliku twitter.js, w którym powstanie nasz kod. Prócz tego, na stronie znajduje się również div, do którego zostanie dynamicznie dodana treść pobrana wcześniej z Twittera i sformatowana. Jak zapewne już wiesz, do tego będziemy potrzebowali szablonu Handlebars, który zamieniony zostanie na wynikowy kod HTML. Zanim jednak pokażę Ci jak wygląda szablon, powinniśmy poznać sposób na pobranie treści z Twittera oraz przyjrzeć się jej strukturze.

jQuery.getJSON() na ratunek!

Chyba każdy kto korzysta z biblioteki jQuery wie, jak niesamowicie przyspiesza ona i upraszcza wykonywanie często skomplikowanych czynności. Nie inaczej jest również i w tym przypadku, gdy pobierając wpisy korzystać będziemy z technologii AJAX.

Dane odbierane z serwerów Twittera zapakowane są w formacie JSON (JavaScript Object Notation), czyli wyglądają jak obiekt z JavaScriptu lub jak kto woli – tablica asocjacyjna z wieloma elementami, zagnieżdżonymi na wielu poziomach.

Do pobrania interesujących nas danych wykorzystamy jedną z funkcji jQuery o nazwie getJSON. Funkcja ta jako pierwszy parametr przyjmuje adres URL, pod którym szukamy danych, a jako drugi funkcji wykonywanej po otrzymaniu informacji z serwera. Nadszedł zatem czas, aby przyjrzeć się bliżej wspomnianemu adresowi URL, czyli inaczej mówiąc ścieżce z zapytaniami. Najprostsza jej postać wygląda następująco:

"http://search.twitter.com/search.json?q=poszukiwana_fraza"

Stałą owej ścieżki jest adres http://search.twitter.com/search.json?q=, natomiast wszystko co występuje później, tworzy ciąg zapytań do serwera, dzięki któremu dopasujemy otrzymywane informacje do naszych potrzeb. Wiedząc już jak wygląda ścieżka, spróbujmy wywołać funkcję getJSON z frazą np. css3, a jej rezultaty wypisać w konsoli (konsola dostępna jest zazwyczaj pod przyciskiem F12; polecam używanie Firebuga w Firefoxie, lub konsoli dostępnej w Google Chrome).

Kod JavaScript wygląda w tej chwili następująco:

$(document).ready(function() {

	// Zmienna ze ścieżką
	var zapytanie = "http://search.twitter.com/search.json?q=css3";

	$.getJSON(zapytanie, function(dane) {

		console.log(dane);

	});

});

czyli po załadowaniu się strony (dokładniej elementów drzewa DOM), uruchamiamy naszą funkcję z podaną ścieżką, w której szukamy frazy css3. Otwierając konsolę nie ujrzymy jednak spodziewanego wyniku w postaci danych JSON. Zamiast tego otrzymamy błąd, który w przeglądarce Chrome wygląda następująco:

getJSON błąd

Przyczyną takiego zachowania przeglądarki jest jej wbudowany mechanizm, który zabrania wykonywania asynchronicznych żądań do domen innych niż ta, z której żądanie wysyłamy. Swego rodzaju obejściem tego problemu jest technika zwana JSONP, której dokładnego działania nie będę jednak opisywał. Wystarczy, że w bardzo łatwy sposób możemy jej użyć w naszym skrypcie. Aby to zrobić, do naszej ścieżki musimy dopisać &callback=?, a wszystko w magiczny sposób zacznie działać. Poprawiona wersja ścieżki wygląda teraz następująco:

var zapytanie = "http://search.twitter.com/search.json?q=css3&callback=?";

a otrzymane dane wyświetlone w konsoli tak:

Dane JSON z Twittera

Większość widocznych tu elementów obiektu nie jest nam w tym momencie w ogóle potrzebna, istotna jest natomiast rubryka o nazwie results, czyli tablica przechowująca wszystkie przysłane do nas tweety z przydatnymi informacjami. Przykładowy element tej tablicy wygląda w ten sposób:

Tablica results

Informacje, które będą nam potrzebne przy naszej aplikacji to:
created_at – czyli data wpisu, którą będziemy musieli sformatować,
from_user – czyli nazwa użytkownika,
id_str – czyli ID wpisu, które przyda nam się do stworzenia odnośnika,
profile_image_url – czyli adres obrazka z avatarem oraz
text – czyli treść samego wpisu.

Skoro wiesz już jakich danych użyjemy w stworzonym kodzie HTML, czas bym pokazał Ci przygotowany szablon Handlebars.js, który prezentuje się następująco:

Najpierw wywołujemy instrukcję #each, która wykona blok kodu dla każdego z elementów tablicy, którą podamy do funkcji szablonu. Wewnątrz instrukcji widzimy element a, który oplata cały wpis, tworząc jego odnośnik (użycie elementu a w ten sposób jest w pełni poprawne w specyfikacji języka HTML5), obraz, który wyświetli nam avatar użytkownika oraz div z informacjami o autorze, treścią oraz datą.

Jeśli poznałeś już działanie Handlebars, to wiesz, że aby szablon ten zadziałał, potrzebujemy tablicy z obiektami, których właściwości odzwierciedlają dokładnie nazwy zastosowane w szablonie. Jak mogłeś zauważyć wyżej, kod zwrócony przez serwer bardzo od tego schematu odbiega, dlatego musimy sami stworzyć sobie wspomnianą tablicę.

jQuer.map()

Do tego celu użyjemy funkcji jQuery o nazwie .map(), która jako pierwszy parametr przyjmuje tablicę, z której pobierzemy dane, a jako drugi funkcję, w której będziemy stosowne dane zwracać i zapisywać w nowo stworzonej tablicy. Jeśli nie rozumiesz działania tej metody, przedstawię prosty przykład. Załóżmy, że mamy tablicę, a w niej 3 obiekty posiadające po 2 właściwości. Niech całość wygląda tak:

var tablica = [
	{
		imie: "Maciej",
		nazwisko: "Nowak"
	},
	{
		imie: "Piotr",
		nazwisko: "Kowalski"
	},
	{
		imie: "Anna",
		nazwisko: "Pawłowska"
	}
];

Teraz załóżmy, że chcemy stworzyć nową tablicę z tymi samymi trzema obiektami, lecz posiadającymi jedynie właściwość imie. Zastosujmy więc funkcję .map() w ten sposób:

var nowaTablica = $.map(tablica, function(element) {
	return {
		imie: element.imie
	}
});

W ten sposób przefiltrowaliśmy tablicę pierwszą i dla każdego jej elementu zwróciliśmy nowy element do tablicy nowaTablica, a dokładnie obiekt z właściwością imie.

Mam nadzieję, że rozumiesz już działanie tej funkcji, a zatem spójrz w jaki sposób wykorzystana została w naszym projekcie:

var tweety = $.map(dane.results, function(tweet) {
	return {
		autor: tweet.from_user,
		obraz: tweet.profile_image_url,
		tresc: tweet.text,
		link: "http://twitter.com/" + tweet.from_user + "/status/" + tweet.id_str,
		data: stworzDate(tweet.created_at) // konwertujemy datę na własny format
	};
});

Stworzyliśmy zatem tablicę o nazwie tweety, która przechowuje gotowe informacje w czytelnej formie. Zauważyłeś zapewne, że coś ciekawego dzieje się przy właściwościach link i data. Już spieszę z wyjaśnieniem. Otóż, jak już wspomniałem wyżej, do stworzenia odnośnika do wpisu na Twitterze potrzebowaliśmy właściwości id_str, a także nazwy użytkownika czyli from_user. Link może wyglądać następująco:

http://twitter.com/eduweb_pl/status/248844871467663360

Czyli jak widzimy, po nazwie domeny występuje nazwa użytkownika, następnie słowo status i ID wpisu. W ten właśnie sposób dynamicznie tworzymy odnośniki w naszej funkcji.

Kolejną rzeczą jest stworzenie ładnie wyglądającej daty, do czego posłużyła nam funkcja stworzDate, którą również umieściłem w kodzie. Zwracana przez Twitter data wyglądać może w ten sposób:

created_at: "Fri, 21 Sep 2012 12:20:47 +0000"

zatem chcemy ją ładnie sformatować. Aby niepotrzebnie nie posługiwać się skomplikowanymi wyrażeniami regularnymi, wystarczy, że odebrany ciąg znaków przekażemy do wbudowanego konstruktora JavaScriptu o nazwie Date(), a następnie z otrzymanego obiektu odczytamy właściwości takie jak dzień, miesiąc czy rok. Stworzona funkcja strzorzDate() wygląda zatem następująco:

function stworzDate(data) {

	// Zwracamy datę w czytelnym formacie
	var data = new Date(data);
	return data.getDate() + "/" + (data.getMonth() + 1) + "/" + data.getFullYear();

}

i zwraca nam czytelną datę w postaci dd/mm/rrrr.

Skoro mamy już tablicę z tweetami, możemy ją przekazać do szablonu Handlebars wykonując stworzoną wcześniej, prostą funkcję:

// Wyświetlanie tweetów
function wyswietlTweety(dane) {

	// Pobieramy kod szablonu
	var zrodlo = $("#tpl").html();
	// i kompilujemy go
	var szablon = Handlebars.compile(zrodlo);
	// oraz wstawiamy kod na stronę
	tweetBox.html(szablon(dane));

}

Działania tej funkcji nie będę tłumaczył, gdyż zakładam, że przerobiłeś poprzedni artykuł. Krótko mówiąc wrzuca ona sformatowany kod do diva z identyfikatorem #twitterBox, którego referencję przechowywaliśmy w zmiennej tweetBox (var tweetBox = $("#twitterBox")).

Nasza aplikacja już działa i ładuje na stronę otrzymane wpisy, które przy odrobinie stylów CSS mogą naprawdę świetnie wyglądać. Póki co szukaną frazą było wyłącznie słowo css3, jednak możemy znacznie zmodyfikować zapytanie.

Query String, czyli argumenty zapytania

Pełną listę argumentów, jakie przekazać możemy do zapytania, znajdziesz na stronie API Twittera. Natomiast samą formę query czyli q= można dostosować używając konstrukcji opisanych tutaj. Ja przytoczę tylko te najciekawsze.

Według mnie na uwagę zasługuje parametr from:nazwa_uzytkownika, który pozwala nam określić, z którego profilu chcemy pobierać wpisy. Jak mogłeś zauważyć w prezentowanym na górze strony DEMO, wyświetlane były tylko i wyłącznie tweety z profilu eduweb_pl. Aby tego dokonać, ścieżka jest następująca:

"http://search.twitter.com/search.json?q=from:eduweb_pl&rpp=5&callback=?"

Warto jednak zaznaczyć, że jeśli Twój profil nie jest zbyt popularny i często aktualizowany, możesz w ogóle nie figurować w wynikach wyszukiwania Twittera, a tablica results w zwracanych wynikach będzie pusta, mimo iż na Twoim koncie są wpisy.

Drugim parametrem, który możesz zauważyć w powyższej ścieżce jest rpp, czyli results per page (rezultatów na stronę) ustawionym na 5 wpisów.

Ciekawym dla nas, Polaków, parametrem jest również lang, czyli język poszukiwanych wpisów, podany w standardzie ISO 639-1, w którym równy jest on „pl„. Możemy zatem dodać do ścieżki &lang=pl, a wyświetlane wpisy będą pochodziły z Polski. Nie jest to jednak w 100% skuteczne, gdyż na niektóre frazy zwracane będą wyniki w różnych językach.

Ostatnim z ciekawszych parametrem jest result_type, który przyjmuje 3 postaci (mixed, recent lub popular). Pobiera on wpisy mieszane (czyli popularne i najnowsze) lub tylko najnowsze, albo wyłącznie popularne.

UWAGA! Warto również wiedzieć, że pobierane tweety pochodzą z ostatnich 6 do 9 dni, a także nie są 100-procentowym odzwierciedleniem wyszukiwarki na stronie Twittera.

Tytułem zakończenia

Nasza aplikacja działa, lecz nie jest jeszcze skończona. Mam na myśli to, że nadszedł czas, abyś sam ją zmodyfikował i dostosował do swoich potrzeb, poznając w ten sposób tajniki Twitter API. Zdaję sobie sprawę, że kod, który przedstawiłem, można dużo lepiej zorganizować, dając możliwości prostszego ustawiania zapytań czy przekazywania obiektu z konfiguracją do naszej funkcji. Nie chciałem jednak przeładowywać Cię zbędnymi z tym momencie informacjami, a skupić się jedynie na tym, co istotne. Kod JS stworzonej w tym poradniku aplikacji prezentuje się następująco:

$(document).ready(function() {

	// Div, do którego wrzucimy HTML
	var tweetBox = $("#twitterBox");

	// Wyświetlanie tweetów
	function wyswietlTweety(dane) {

		// Pobieramy kod szablonu
		var zrodlo = $("#tpl").html();
		// i kompilujemy go
		var szablon = Handlebars.compile(zrodlo);
		// oraz wstawiamy kod na stronę
		tweetBox.html(szablon(dane));

	}

	// Konwertowanie daty na czytelniejszą
	function stworzDate(data) {

		// Zwracamy datę w czytelnym formacie
		var data = new Date(data);
		return data.getDate() + "/" + (data.getMonth() + 1) + "/" + data.getFullYear();

	}

	// Tworzymy zapytanie do Twitter'a
	var zapytanie = "http://search.twitter.com/search.json?q=from:eduweb_pl&rpp=5&callback=?";

	// Wysyłamy zapytanie do serwera
	$.getJSON(zapytanie, function(dane) {

		// Jeśli brak wyników:
		if(!dane.results.length) {
			tweetBox.html("

Niestety nic nie znaleziono!

");
			return; // Zakończ działanie funkcji!
		}

		// Tworzymy tablicę (array) z wybranymi elementami
		var tweety = $.map(dane.results, function(tweet) {
			return {
				autor: tweet.from_user,
				obraz: tweet.profile_image_url,
				tresc: tweet.text,
				link: "http://twitter.com/" + tweet.from_user + "/status/" + tweet.id_str,
				data: stworzDate(tweet.created_at) // konwertujemy datę na własny format
			};
		});

		// Używamy funkcji wyswietlTweety
		wyswietlTweety(tweety);

	});

}); // koniec document.ready

Zauważyć możesz jeszcze jedną, nie najważniejszą, ale jednak istotną rzecz, mianowicie sprawdzenie, czy w otrzymanych danych znajdują się jakiekolwiek tweety. Jeśli tablica results jest pusta (length == 0), wyświetlamy w divie #twitterBox stosowną informację i kończymy działanie funkcji. Dzięki temu nasz kod będzie generował nieco lepsze wrażenia użytkownika.

Mam nadzieję, że przedstawiłem temat jasno, zarówno w poprzednim artykule o Handlebars.js, jak i w tym, który właśnie czytasz, lecz jeśli masz jakiekolwiek pytania odnośnie którejkolwiek z omawianych technik, nie wahaj się ich zadać w komentarzach. Jeśli jesteś już wprawiony w programowanie w JavaScripcie i chcesz podzielić się swoimi przemyśleniami z pracą z Twitter API, również zapraszam!

UDOSTĘPNIJ ARTYKUŁ:

Powiązane artykuły

Nowości

[PREMIERA] Kurs React od Podstaw już na eduweb.pl!

Programowanie i WWW

eduweb na ngPoland!

Webdevelopment

eduweb.pl partnerem ConFront JS 2018!

Pozostań na bieżąco!

Już nigdy nie przegapisz ważnych informacji, promocji oraz nowych kursów. Zapisz się na newsletter już teraz!

Zapisując się do newslettera akceptujesz naszą politykę prywatności