70-480 – Wdrażanie wywołania zwrotnego

70-480

Odbieranie wiadomości z HTML5 WebSocket API; stosowanie kwerendy jQuery w celu realizacji wywołania AJAX; podłączanie zdarzenia; wdrażanie wywołania zwrotnego przy użyciu funkcji anonimowych; obsługa wskaźnika „this”.



Opis zagadnienia zawiera wiele elementów, które na pierwszy rzut oka mogą wydawać się zupełnie różne, ale to co ich łączy, to mechanizm callback. Jest to tak zwana funkcja zwrotna, która rejestrowana jest przez autora kodu do wykonania przez bibliotekę, której używa. Callback wykonywany jest w odpowiednim czasie przez bibliotekę, która nie wie nic o tym co się wydarzy. Wszystko zależy od ciała zarejestrowanej funkcji.

HTML5 WebSocket API

Egzamin 70-480 wymaga od nas znajomości API WebSocket, które pojawiło się wraz z HTML5. Specyfikacja definiuje założenia komunikacji full-duplex, czyli w dwie strony serwer <-> przeglądarka <-> serwer.

Zakładane są cztery typy obsługiwanych callback:

  • onopen – połączenie jest gotowe i można wysyłać wiadomości
  • onmessage – w momencie otrzymania wiadomości z serwera
  • onclose – w momencie zamknięcia połączenia
  • onerror – w momencie wystąpienia błędu

Pierwszym krokiem jest oczywiście utworzenie połączenia:

var connection = new WebSocket('ws://localhost/');

Następnie możemy zdefiniować odpowiednie callback:

connection.onopen = function () {
  connection.send('Ping');
};

connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
};

connection.onclose = function(e) {
  console.log('Closed!');
};

connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

Każdy z callbacków wykona się w ściśle zdefiniowanym momencie. Decyduje o tym API WebSocket oraz komunikacja z serwerem.

Staram się skupiać na podstawach, a zarazem materiale, który w pełni pokrywa założenia egzaminu 70-480. Jeżeli ktoś chce dowiedzieć się nieco więcej na temat HTML5 WebSocket API, to odsyłam do artykułu na html5rocks.com.

jQuery – get, post, ajax

Biblioteki jQuery przedstawiać nikomu nie trzeba. Zyskała ona ogromną popularność społeczności, a to za sprawą wielu ułatwień i funkcji, które zwyczajnie ułatwiają życie. jQuery również świetnie radzi sobie z asynchronicznością oraz obsługą requestów typu AJAX.

Polegają one na wykonywaniu operacji komunikacji z serwerem w tle. Tym samym możemy pobierać dane oraz zmieniać interfejs strony bez przeładowania okna przeglądarki.

Przedstawię niżej trzy najbardziej popularne metody do zapytań typu AJAX, które znajdziemy w bibliotece jQuery.

$.get

Pozwala wykonywać asynchroniczne zapytania typu GET. Sygnatura metody wygląda następująco:

$.get(url [,data] [,success] [,dataType])

, gdzie poszczególne parametry to:

  • url – [String] – url pod jaki ma zostać wysłane zapytanie typu GET
  • data – [PlainObject | String] – obiekt lub string, które wysłane zostają razem z zapytaniem do serwera
  • success – [Function(data, textStatus, jqXHR)] – funkcja i zarazem nasz callback, który wykonany zostanie w momencie poprawnego obsłużenia odpowiedzi. Parametry, które zostaną przekazane do wywołania funkcji to:
    • data – [PlainObject] – zwrócone dane
    • textStatus – [String] – status odpowiedzi
    • jqXHR – [jqXHR] – odpowiednik XMLHTTPRequest
  • dataType – [String] – typ zwracanych danych – xml, json, script, html. Domyślnie ustalany na podstawie zwróconych danych.

Funkcja $.get jest odpowiednikiem (skrótem) dla funkcji $.ajax:

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.post

W zasadzie od funkcji $.get różni się tym, że tym razem wysyła na serwer asynchroniczne żądanie typu POST. Zestaw parametrów jest tutaj identyczny, a odpowiednikiem funkcji $.ajax jest:

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.ajax

Funkcja, która zawsze wywoływana jest pod spodem. Jest to najbardziej ogólna funkcja pozwalająca na definiowanie asynchronicznych zapytań. Jej pełna specyfikacja znajduje się na stronie jQuery. Posiada pokaźną liczbę parametrów i opisywanie ich wszystkich tutaj byłoby sporym nadmiarem materiału do przyswojenia.

callback i słowo kluczowe this

W zasadzie o czymś podobnym pisałem już we wpisie o wywoływaniu i obsłudze zdarzeń. Chodzi mianowicie o dostęp do kontekstu this wywołanej funkcji. Spójrzmy na przykład funkcji, która wykonuje callback na sam koniec swojego działania:

function callbackFn() {
  console.log(this);
}

function invoke(x, y, callback) {
  var xy = x + y;
  callback();  
}

invoke(1, 2, callbackFn);

Co będzie wynikiem console.log(this)? Na konsoli otrzymamy obiekt window. Jak przekazać kontekst funkcji wywołującej callback? No to kolejny przykład:

function callbackFn() {
  console.log(this);
}

function invoke(x, y, callback) {
  var xy = x + y;
  callback.call(xy);  
}

invoke(1, 2, callbackFn);

Zmiana nastąpiła w linii 6 poprzez użycie call. Tym razem wyliczona wartość xy została przekazana do funkcji callbackFn i stanowi jej kontekst (this).

Google Glass i Google Mirror API na SXSW

Google Glass

Google Glass w 50 minutowej prezentacji na SXSW (The South by Southwest). Timothy Jordan pokazał nam przedsmak tego co da nam możliwość użycia Google Mirror API, które pozwoli na budowę usług w oparciu o projekt Glass.

Wykorzystanie API pokazuje film z prezentacji.

Building New Experiences with Glass

[youtube_sc url=”https://www.youtube.com/watch?v=JpWmGX55a40″ fs=”1″]

Osobiście nie mogę się doczekać. W głowie pojawia się mnóstwo pomysłów. Chyba właśnie po to powstała ta prezentacja – by wzbudzić emocje, uruchomić wyobraźnię i inspirować. Zbliżająca się technologia wywołuje coraz więcej dyskusji na temat innowacji oraz pomysłów na to jak wykorzystać Google Glass.

Helping to educate people on the power of its Mirror API is important because not only are wearable devices a different form of communication that people have not become comfortable with, but also that there are some services that could work best with Glass. Google says that its Glass project is not complete or ready for distribution yet, but it says that it’s hoping to help developers find ways to pass data from Google’s servers to third-party applications.
thenextweb.com

Chcę Google Glass!

Google pierwszy udostępniło internautom okulary do testów. Niestety, Google Glass mogą zamówić tylko osoby mieszkające w USA. Wystarczy, że do 27 lutego zamieszczą oni na Twitterze post z tagiem #ifihadglass. Okulary dla mas dostępne mają być dopiero w 2014. Pozostaje czekać, choć pewnie początkowa cena będzie zabójcza.

Czekacie?

Autoryzacja API – HMAC PHP

Autoryzacja API

Autoryzacja REST API jest czymś nieco innym niżeli autoryzacja użytkownika na stronie internetowej. Mechanizm  HTTP Basic Auth także tutaj nie pasuje. W przypadku naszego API nie tworzy się żadna sesja, która pozwalałaby na identyfikację konkretnego użytkownika / klienta korzystającego z dostępnych metod. Wykorzystujemy przecież protokół bezstanowy REST.

W minionym tygodniu zmierzyłem się z podobnym problemem w przypadku API, które piszę na potrzeby aplikacji mobilnej. Rozważane były tak naprawdę dwa rozwiązania: OAuth oraz wykorzystanie kluczy publicznych i prywatnych. Otwarty protokół OAuth wydawałby się idealnym rozwiązaniem. Okazuje się jednak, że jest kilka ALE, które komplikują jego implementację:

  • brak standaryzacji – Facebook i Twitter implementują w swoich API OAuth, ale jedno i drugie rozwiązanie różni się od siebie
  • skomplikowana implementacja po stronie serwera oraz aplikacji
  • spory narzut wydajnościowy

Finalne rozwiązanie oparte zostało o zasadę kluczy publicznych i prywatnych, ale zostało ono dostosowane do wymogów aplikacji mobilnej oraz możliwości jakie daje wewnętrzny framework. Chciałbym Wam dzisiaj jednak pokazać rozwiązanie oparte o metodę HMAC, która została zaimplementowana w języku PHP (>= 5.1.2) pod postacią funkcji hash_hmac.

Działanie HMAC

  1. stworzenie tak zwanego content hash przy użyciu private key, który znany jest tylko użytkownikowi (oraz systemowi)
  2. content hash przesyłany jest na serwer razem z public key
  3. serwer odczytuje public key i na jego podstawie szuka użytkownika, który pasuje do owego klucza , a następnie pobiera jego private key
  4. serwer używa pobranego private key do wykonania funkcji hash_hmac, która hashuje treść przesłaną w żądaniu HTTP i porównuje ją z content hash

Klucz publiczny i prywatny

By wygenerować public key i private key można posłużyć się kilkoma metodami. Poniżej pokażę dwie, chyba najprostsze, a zarazem skuteczne sposoby.

  1. Wykorzystanie OpenSSL
    $hash = hash('sha256', openssl_random_pseudo_bytes(32));

    OpenSSL nie jest domyślnym rozszerzeniem w PHP, dlatego też poniższa metoda powinna zastąpić wykorzystanie tej biblioteki.

  2. Wykorzystanie funkcji mt_rand:
    $hash = hash('sha256', mt_rand());

Oba przypadki jako funkcję hashującą wykosztują sha256, której obce są kolizje znane chociażby z funkcji skrótu jaką jest MD5.

Przykład wykorzystania HMAC w PHP

Czas na zabawę, czyli przejście do praktyki. Poniżej kod klienta i serwera, który może posłużyć jako przykład REST API.

Przykład wykorzystuje mechanizm cURL, który dostępny jest raczej w większości instalacji PHP. Zawsze można jednak użyć bardziej niskopoziomowej implementacji z socketami.

Kod klienta

<?php
	$publicKey  = '3441df0babc2a2dda551d7cd39fb235bc4e09cd1e4556bf261bb49188f548348';
	$privateKey = 'e249c439ed7697df2a4b045d97d4b9b7e1854c3ff8dd668c779013653913572e';
	$content    = json_encode(array(
		'test' => 'content'
	));

	$hash = hash_hmac('sha256', $content, $privateKey);

	$headers = array(
		'X-Public: '.$publicKey,
		'X-Hash: '.$hash
	);

	$ch = curl_init('http://test.localhost:8080/api-test/');
	curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_POSTFIELDS, $content);

	$result = curl_exec($ch);
	curl_close($ch);

	echo "RESULT\\n======\\n".print_r($result, true)."\\n\\n";
?>

Kod serwera

Po stronie serwera wykorzystam Slim Framework, który jest tak naprawdę mikroframeworkiem. Idealnie nadaje się on do małych aplikacji, które nie wymagają super mocy. Instalujemy Slim poprzez dodanie do swojego composer.json poniższych linijek:

{
    "require": {
        "slim/slim":"2.*"
    }
}

Composer zainstaluje nam cały framework w katalogu vendor/.

Więcej o Composer znajdziesz na: getcomposer.org

Nasz klient przesyłał do serwera nagłówki X-Public oraz X-Hash, które musimy pobrać po stronie serwera. Private key jest oczywiście hard-coded bezpośrednio w kodzie. W rzeczywistym systemie należałoby odpytać bazę danych i pobrać taką wartość z obiektu użytkownika.

<?php
require_once 'vendor/autoload.php';

$app = new \\Slim\\Slim();
$app->post('/', function() use ($app) {

    $request = $app->request();

    $publicHash  = $request->headers('X-Public');
    $contentHash = $request->headers('X-Hash');
    $privateKey  = 'e249c439ed7697df2a4b045d97d4b9b7e1854c3ff8dd668c779013653913572e';
    $content     = $request->getBody();

    $hash = hash_hmac('sha256', $content, $privateKey);

    if ($hash == $contentHash){
        echo "match!\n";
    }
});
?>

PS. Staram się by wpis miał przyjemną formę i był łatwy do czytania. Udało mi się? Okaże się tym samym kto dotarł do końca.

Dane geograficzne na podstawie adresu IP w PHP

geolocation

Dzisiejszym wpisem chciałbym Wam pokazać, w jaki sposób uzyskać można dane geograficzne na podstawie adresu IP.

Wykorzystam w tym celu serwis locatorhq.com, który udostępnia API pozwalające na identyfikację danych geograficznych.  Usługa jest darmowa i może z niej skorzystać każdy po założeniu konta.

Początek

Pierwszym krokiem jest rejestracja w serwisie: http://www.locatorhq.com/ip-to-location-api/signup.php poprzez podanie kilku podstawowych danych. Po chwili – na podany adres email przyjdzie wiadomość, której zawarte będą dane – API_KEY i nazwa użytkownika, które będą potrzebne podczas wysyłania zapytań do API.

Użycie

Jeżeli posiadasz już swój API_KEY i nazwę użytkownika, to jesteś w stanie wykonać swoje pierwsze zapytanie do API serwisu.

http://api.locatorhq.com/?user={YOURUSERNAME}
  &key={YOURAPIKEY}&ip={IPADDRESSTOLOOKUP}

, gdzie podać musimy następujące parametry:

  • YOURUSERNAME – nazwa użytkownika
  • YOURAPIKEY – API_KEY otrzymane w email z serwisu po rejestracji
  • IPADDRESSTOLOOKUP – adres IP, który chcemy “sprawdzić”

Istnieje jeszcze 4 parametr, a mianowicie format danych, który ma nam zostać zwrócony po wykonaniu zapytania.

  • &format=text
  • &format=xml
  • &format=json – dostępne wkrótce

Domyślna wartość parametru to: text.

Przykład

Czas na prosty przykład wykorzystania. Sprawdzę w ten sposób adres IP jednego z serwerów Google: 74.125.236.196.

Wykonując:

http://api.locatorhq.com/?user=Username&key=APIKEY&ip=74.125.236.196

otrzymamy taką oto odpowiedź:

US,United States,California,Mountain View,34.305,-86.2981
Kod krajuUS
KrajUnited States
StanCalifornia
MiejscowośćMountain View
Szerokość geograficzna34.305
Długość geograficzna-86.2981 

Parsowanie surowego tekstu nie jest zbyt wygodne, dlatego też wykorzystam format XML do pobrania danych i sparsowania ich po stronie kodu PHP.

Url zapytania będzie miał teraz postać:

http://api.locatorhq.com/?user=Username&key=APIKEY
  &ip=74.125.236.196&format=xml

Otrzymamy w ten sposób odpowiedź o treści:

<ip2locationapi>
  <countryCode>US</countryCode>
  <countryName>United States</countryName>
  <region>California</region>
  <city>Mountain View</city>
  <lattitude>34.305</lattitude
  <longitude>-86.2981</longitude>
</ip2locationapi>

Mając już strukturę XML mogę przejść do właściwego kodu, który będzie w stanie pobrać i sparsować wszystkie dane.

<?php

$ipAddress = $_SERVER['REMOTE_ADDR']; // adres IP
$user = MYUSERNAME;
$apiKey = MYAPIKEY;
$locationUrl = "http://api.locatorhq.com/?user={$user}&key={$apiKey}&ip={$ipAddress}&format=xml";

// pobieramy xml zwrocony przez API LocatorHQ
$xml = simplexml_load_file($locationUrl); 

$countryCode = $xml->countryCode; // kod kraju
$countryName = $xml->countryName; // kraj
$region = $xml->region;           // stan
$city = $xml->city;               // miejscowosc
$lattitude = $xml->lattitude;     // szerokosc geograficzna
$longitude = $xml->longitude;     // dlugosc geograficzna

?>

Już od Was zależy co zrobicie z tym dalej. Możliwości jest jednak wiele.

  • personalizacja naszej strony pod konkretny język
  • analiza wejść na naszą stronę – analiza demograficzna
  • geotargetowanie reklam
  • automatyczne wypełnianie formularzy na podstawie danych geograficznych

To tylko kilka przykładów.

Sama usługa LocatorHQ nie jest idealna. Czasami zwraca ona niepoprawne wyniki. Wszystko zależy tak naprawdę od ustawień sieci, w której znajduje się dany adres IP. API nadaje się jednak świetnie do eksperymentowania z usługami GEO.

Parsowanie XML z SimpleXML w PHP

XML SimpleXML PHP

Parsowanie składni XML oznacza zwykle nawigowanie po całej strukturze dokumentu XML. Duża liczba dzisiejszych serwisów zwraca dane w formacie JSON, ale jest jeszcze sporo takich, które używają do tego celu XML.

W dzisiejszym HowTo wykorzystam rozszerzenie SimpleXML, które wprowadzone zostało do PHP 5.0. Pozwala ono na łatwe nawigowanie po dokumencie XML.

Przejdźmy do pierwszego przykładu wykorzystania. Mamy do dyspozycji plik languages.xml:

<?xml version="1.0" encoding="utf-8"?>
<languages>
 <lang name="C">
  <appeared>1972</appeared>
  <creator>Dennis Ritchie</creator>
 </lang>
 <lang name="PHP">
  <appeared>1995</appeared>
  <creator>Rasmus Lerdorf</creator>
 </lang>
 <lang name="Java">
  <appeared>1995</appeared>
  <creator>James Gosling</creator>
 </lang>
</languages>

Powyższy dokument opisuje w pewien sposób trzy języki programowania i podaje ich kilka charakterystyk.

Do odczytania tego dokumentu wykorzystam funkcję simple_load_file().

<?php
$languages = simplexml_load_file("languages.xml");

Istnieje jeszcze funkcja simplexml_load_string(), która jak nie trudno się domyślić, ładuje do pamięci łańcuch znaków, który jest poprawną składnią dokumentu XML. Obie funkcje wczytują dokument DOM do pamięci tworząc tym samym obiekt SimpleXMLElement.

Wykonując var_dump($languages) lub print_r($languages) otrzymamy:

SimpleXMLElement Object
(
    [lang] => Array
        (
            [0] => SimpleXMLElement Object
                (
                    [@attributes] => Array
                        (
                            [name] => C
                        )
                    [appeared] => 1972
                    [creator] => Dennis Ritchie
                )
            [1] => SimpleXMLElement Object
                (
                    [@attributes] => Array
                        (
                            [name] => PHP
                        )
                    [appeared] => 1995
                    [creator] => Rasmus Lerdorf
                )
            [2] => SimpleXMLElement Object
                (
                    [@attributes] => Array
                        (
                            [name] => Java
                        )
                    [appeared] => 1995
                    [creator] => James Gosling
                )
        )
)

Widać tutaj główny, publiczny element lang (SimpleXMLElement), który jest tablicą i zawiera trzy elementy.

By dostać się do konkretnych elementów trzeba wykorzystać operator ->

<?php
$languages->lang[0]->appeared;
$languages->lang[0]->creator;

Można także iterować po liście za pomocą metody foreach

<?php
foreach ($languages->ang as $lang) {
    echo "Language: ".$lang["name"];
    echo "Appeared: ".$lang->appeared;
    echo "Creator: ".$lang->creator;
}

Należy zwrócić uwagę, że do wartości atrybutu lang docieramy za pomocą parametru w tablicy, a do publicznych elementów appeared i creator za pomocą operatora ->.

Wszystko fajnie, pięknie, ale co jeżeli trzeba sobie poradzić z przestrzenią nazw, która zdefiniowana została dla poszczególnych elementów? Jest i na to sposób!

Zmodyfikuję teraz plik languages.xml do postaci:

<?xml version="1.0" encoding="utf-8"?>
<languages
 xmlns:dc="http://purl.org/dc/elements/1.1/">
 <lang name="C">
  <appeared>1972</appeared>
  <dc:creator>Dennis Ritchie</dc:creator>
 </lang>
 <lang name="PHP">
  <appeared>1995</appeared>
  <dc:creator>Rasmus Lerdorf</dc:creator>
 </lang>
 <lang name="Java">
  <appeared>1995</appeared>
  <dc:creator>James Gosling</dc:creator>
 </lang>
</languages>

Element creator posiada teraz namespace, który kieruje na http://purl.org/dc/elements/1.1/. Dostęp do tego elementu poprzez wykorzystanie operatora -> nie jest już możliwy.

By poradzić sobie z tym problemem trzeba zrobić coś takiego:

<?php
$dc = $languages->lang[1]- >children("http://purl.org/dc/elements/1.1/");
echo $dc->creator;

Metoda children() pobiera namespace i zwraca wartość elementu dla którego dc jest prefixem.

Istnieje inna możliwość odczytania wartości elementu creator:

<?php
$namespaces = $languages->getNamespaces(true);
$dc = $languages->lang[1]->children($namespaces["dc"]);

echo $dc->creator;

Pobieramy w tym celu wszystkie namespace użyte w dokumencie XML i za pomocą elementu w tablicy odwołujemy się do konkretnego namespace i pobieramy wartość dla którego jest on prefixem.

I podobnie jak wcześniej – przykład iterowania po wszystkich elementach:

<?php
$languages = simplexml_load_file("languages.xml");
$ns = $languages->getNamespaces(true);

foreach ($languages->lang as $lang) {
    $dc = $lang->children($ns["dc"]);
    echo "Language: ".$lang["name"];
    echo "Appeared: ".$lang->appeared;
    echo "Creator: ".$dc->creator;
}

Czas na praktyczny przykład. Parsowanie kanału YouTube.

W tym celu należy wykorzystać API dostępne pod adresem: http://gdata.youtube.com/feeds/api/users/{channel}/uploads, gdzie w miejscu {channel} podana zostanie nazwa konkretnego użytkownika.

W danych, które zostaną zwrócone w przypadku podania poprawnej nazwy użytkownika, dla każdego filmu zdefiniowane będą:

  • jego URL
  • miniatura
  • tytuł
<?php
$channel = "channelName";
$url = "http://gdata.youtube.com/feeds/api/users/".$channel."/uploads";
$xml = file_get_contents($url);

$feed = simplexml_load_string($xml);
$ns = $feed->getNameSpaces(true);

Spoglądając w strukturę otrzymanego XML możemy zauważyć, że ważne dla nas dane znajdują się w elemencie group, który poprzedzony jest namespace media.

<entry>
   …
   <media:group>
      …
      <media:player url="video url"/>
      <media:thumbnail url="image url" height="height" width="width"/>
      <media:title type="plain">Title…</media:title>
      …
   </media:group>
   …
</entry>

Wystarczy, że ponownie wykorzystana zostanie metoda foreach, dzięki której będziemy w stanie wyświetlić odpowiednie dla nas dane.

<?php
foreach ($feed->entry as $entry) {
	$group = $entry->children($ns["media"]);
	$group = $group->group;
	$thumbnailAttrs = $group->thumbnail[1]->attributes();
	$image = $thumbnailAttrs["url"];
	$player = $group->player->attributes();
	$link = $player["url"];
	$title = $group->title;
	
	echo "<p><a href=".$link."><img src=".$image." alt=".$title."></a></p>";
}

Podsumowując. Operowanie na dokumentach XML jest bardzo proste. Dzięki wykorzystaniu rozszerzenia SimpleXML, drzewo DOM nie jest już dla nas problemem.

Pełną dokumentację SimpleXML znajdziecie pod adresem: http://php.net/manual/en/book.simplexml.php

Autopost Facebook w PHP

FacebookWall

W dobie wszechobecnych serwisów społecznościowych jesteśmy w stanie wykorzystywać ich potencjał i zwiększać tym samym ruch na naszych stronach poprzez prowadzenie Fan Page lub tworzenie dedykowanych aplikacji. Największym beneficjentem takich działań jest oczywiście Facebook. Udostępnia on API, które przykładowo pozwala zarządzać naszymi Fan Page. Publikacja informacji oraz dzielenie się nią ze swoimi “fanami” (mam tutaj na myśli oczywiście lubiących naszą stronę) może odbywać się w sposób automatyczny.

Przykładowo – tworzymy wpis na naszej stronie, który zaraz po publikacji ląduje na Fan Page naszej strony na Facebooku. Nie musimy tym samym powtarzać tej czynności ręcznie, a na pewno nie zapomnimy jej wykonać w późniejszym terminie. Tak działa to na przykład u mnie. Publikując nowy wpis na blogu, wysyłany jest on automatycznie na Fan Page na Facebooku: https://www.facebook.com/mrzepinskipl

Dodatkowo – wykorzystując tagi Open Graph umieszczone w kodzie HTML  naszej strony, jesteśmy w stanie sprawić, by publikacja ta miała zakładaną przez nas formę.

  1. Pierwszym krokiem w realizacji naszego zadania będzie utworzenie aplikacji na stronie Facebook Developers (Apps -> Utwórz aplikację). Otrzymamy w ten sposób wymagane dane (app_id oraz app_secret), które wykorzystamy dalej.
  2. Następnie wchodzimy w opcję edycji naszej aplikacji (Edit app) i na stronie, która nam się załaduje musimy uzupełnić wszystkie wymagane dane,  a w szczególności parametr Canvas URL, którym musi być URL naszej strony, która obsługiwać będzie żądania HTTP wysyłane do Facebook.
  3. Wysyłamy pierwszy request do Facebook, w którym podajemy jakie uprawnienia chcielibyśmy uzyskać:
    https://www.facebook.com/dialog/oauth?client_id={app_id}&redirect_uri={redirect_url}&
    scope=manage_pages,offline_access,publish_stream

    , gdzie jako parametry podajemy:

    • app_id = Application ID -> z ustawień aplikacji
    • redirect_url = Canvas URL -> ten sam URL, który podawaliśmy wyżej

    Jeżeli całość przebiegnie poprawnie, to Facebook zwróci nam callback pod wskazany Canvas URL i za pomocą zmiennej $_GET będziemy mogli pobrać parametr code_string, który posłuży nam do wykonania kolejnego requestu.

  4. Kolejny krok, to wysłanie następnego requestu w ramach którego otrzymamy specjalny token. Posłuży on już finalnie do wysłania publikacji na nasz Fan Page wall.
    https://graph.facebook.com/oauth/access_token?client_id={app_id}&redirect_uri={redirect_url}&
    client_secret={app_secret}&code={code_string}
    • app_id = Application ID -> z ustawień aplikacji
    • redirect_url = Canvas URL -> ten sam URL, który podawaliśmy wyżej
    • app_secret = App Secret -> z ustawień aplikacji
    • code_string -> parametr code_string otrzymany w poprzednim requestcie

    W ten właśnie sposób powinniśmy otrzymać od Facebook parametr token.

  5. Pobieramy Facebook PHP SDK.
  6. Możemy w końcu zrealizować nasze zadanie i wysłać POST na nasz Fan Page wall:
    <?php
    require_once("path/to/facebooksdk/src/facebook.php");
    
    $facebook = new Facebook(array(
      'appId' => '{app_id}', // app_id -> z ustawien aplikacji
      'secret' => '{app_secret}', // app_secret -> z ustawien aplikacji
      'cookie' => true,
    ));
    
    // $token - otrzymany w poprzednim zadaniu HTTP
    $post = array(
      'access_token' => $token,
      'message' =>'wiadomosc',
      'name' => 'imieNazwisko',
      'description'=> 'opis',
      'picture' => 'http://static.obrazek.url/',
      'link' => 'http://link.pl/',
      'caption' =>'podpis'
    );
    try {
      $res = $this->tasks->api('/me/feed','POST', $post);
    } catch (Exception $e) {
      echo $e->getMessage();
    }
    ?>

Tym samym publikacja powinna pojawić się na waszym wallu.

Roundup #13 – VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

Roundup #13 - VintageJS, Bonsai, Bourbon, ImageMapster, Base, responsive-carousel, Jarallax

VintageJS

vintageJS is a tool where you can upload your images and apply a custom retro, vintage look to them for free. Just try it out: upload your photo, apply the vintage effect and share the retro image it with your friends via Facebook or Twitter.

Vintage Effect for Photos with VintageJS jQuery Plugin


Bonsai

Bonsai is a JavaScript graphics library.
Bonsai’s main features include:

  • Architecturally separated runner and renderer
  • iFrame, Worker and Node running contexts
  • Paths
  • Assets (Videos, Images, Fonts, SubMovies)
  • Keyframe and time based animations (easing functions too)
  • Path morphing
  • and much more…
Bonsai – A Powerful JavaScript Graphics Library

Bourbon

Bourbon is a comprehensive library of sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.
The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties. Bourbon uses SCSS syntax.

Bourbon – A comprehensive library of sass mixins


ImageMapster

ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids.

ImageMapster – A jQuery plugin that activates HTML imagemaps


Base

A super simple, responsive framework built to work on mobile devices, tablets, netbooks and desktop computers.

A Simple, Responsive CSS Framework – Base


responsive-carousel

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard.

responsive-carousel – A jQuery-based script for responsive carousels


Jarallax

Jarallax is an open-source JavaScript library which makes adjusting css based on interaction easy. With Jarallax it’s easy to create a parallax scrolling website.

Parallax Scrolling Made Easy – Jarallax


[1], [2], [3]

Roundup #9 – gridster, Avgrund Modal, Sequence, BigScreen, D3 Charts, Toast, SlabText

Roundup #9 - gridster, Avgrund Modal, Sequence, D3 Charts, Toast, SlabText

gridster

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

gridster.js – a jQuery plugin for building intuitive draggable layouts


Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Avgrund Modal


Sequence

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

Sequence.js – The jQuery slider plugin with infinite style


BigScreen

BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you’re working with is inside of an <iframe>. It will also intelligently fall back to the older video full screen API if the element contains a <video> and the older API is available.

Full Screen Mode for Images & Videos in Web Apps


D3 Charts

In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.

MULTIPLE AREA CHARTS WITH D3.JS


Toast

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Toast – A simple responsive CSS framework


SlabText

SlabText is a jQuery plugin for producing big, bold and responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.

jQuery Plugin for Producing Bold Responsive Headlines


[1], [2], [3], [4]