WP-API - teoria i praktyka - WordUp Trójmiasto #2

WP-API teoria i praktyka

Tomasz Dziuda

WordUp Trójmiasto 23.V.2015

+WP-API

GET/POST/PUT/DELETE

+WP-API

GET/POST/PUT/DELETE

{“json”: “data”}

+WP-API

GET/POST/PUT/DELETE

wp_ajax_{action} wp_ajax_nopriv_{action}

+WP-API

GET/POST/PUT/DELETE

wp_ajax_{action} wp_ajax_nopriv_{action}

+WP-API

Struktura URLi

wp-json/<zasób>/<id_lub_filtr>/<dodatkowe_zasoby>

/posts

/posts/<id>/meta

/posts/<id>/revisions

/media

/users

/taxonomies

/taxonomies/<taxonomy>/terms

Przykłady

Przykłady• wp-json/posts/303

• wp-json/posts?filter[cat]=1,2,3

• wp-json/posts?filter[posts_per_page]=20

• Więcej filtrów: http://wp-api.org/#posts_retrieve-posts

• wp-json/taxonomies/category/terms

• wp-json/users/me

GET / HEAD - odczyt istniejącego elementu

POST - tworzenie nowego elementu

PUT / PATCH - edycja elementu

DELETE - usunięcie elementu

Wymagają zawsze autoryzacji

Wymagają CZASAMI autoryzacji

JSON jako nośnik danych

• Zajmuje mniej miejsca niż XML

• Można go łatwiej przetwarzać z użyciem JavaScript

• http://www.json.org/xml.html

Wtyczka JSON Viewer: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh/

Akcje wymagające autoryzacji

• Tworzenie i modyfikacja postów

• Odczyt rewizji postów

• Tworzenie załączników

• Tworzenie, modyfikacja, odczyt post meta

• Tworzenie, modyfikacja, odczyt użytkowników

Sposoby autoryzacji

Cookie Auth

• Standardowa metoda autoryzacji dla wtyczek i motywów

• Wymaga przesłania w zapytaniu AJAX-owym dodatkowego nagłówka X-WP-Nonce http://wp-api.org/guides/authentication.html#cookie-authentication

Cookie Auth

• Standardowa metoda autoryzacji dla wtyczek i motywów

• Wymaga przesłania w zapytaniu AJAX-owym dodatkowego nagłówka X-WP-Nonce http://wp-api.org/guides/authentication.html#cookie-authentication

OAuth• Dla aplikacji zewnętrznych - webowych, mobilnych,

desktopowych

• Wymaga dodatkowego pluginu - OAuth Server https://github.com/WP-API/OAuth1

• Wsparcie tylko dla OAuth 1.*

• Niestety obecnie nie ma UI do zarządzania kluczami

desktopowych

Basic Auth

• Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania

• Wymaga dodatkowej wtyczki: Basic Authhttps://github.com/WP-API/Basic-Auth

Basic Auth

• Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania

• Wymaga dodatkowej wtyczki: Basic Authhttps://github.com/WP-API/Basic-Auth

Własne metody

• Wymagają implementacji z użyciem filtra json_authentication_errors https://apppresser.com/custom-wp-api-authentication/

• Można zaimplementować np. JSON Web Tokens http://jwt.io/

Własne metody

• Wymagają implementacji z użyciem filtra json_authentication_errors https://apppresser.com/custom-wp-api-authentication/

• Można zaimplementować np. JSON Web Tokens http://jwt.io/

Możliwości

Nowe kokpity

Źródło: https://pickle.pub/

Źródło: https://dribbble.com/shots/2056289-WordPress-Dashboard/attachments/367241

Panele zarządzania WordPressami

Źródło: https://wordpress.com/sites

Motywy jako SPA

Łatwa komunikacja z aplikacjami

Migrowanie danych

JSON XML SQL

YAML RSS Atom

Migrowanie danych

JSON XML SQL

YAML RSS Atom

Rozszerzenia przeglądarek zintegrowane z WordPressem

Usługi informacyjne

Kalendarz WordUpów

Kalendarz WordUpów• Przygotowujemy WordPressa z listą WordUpów

• Tworzymy odpowiednie custom fields opisujące WordUpy

• Tworzymy widżet, który pobiera te informacje

• Wykorzystujemy HTTP API albo JSON-Phttps://codex.wordpress.org/HTTP_API

http://json-p.org/

Własne end-pointyhttp://wp-api.org/guides/extending.html

http://www.roysivan.com/my-best-practices-to-developing-wp-api/

Filtry i akcje

Moje dwa ulubione filtry:

• json_insert_post - pozwala pozmieniać dane przed dodaniem do bazy

• json_prepare_post - może zastąpić własne end-pointy

Pamiętajcie jednak, że…

v.1.* jako numer wersji JSON-API jest zdecydowanie zawyżone ;-)

Szykuje się wersja 2.*

Szykuje się wersja 2.*Niekompatybilna wstecz ;)

https://make.wordpress.org/core/2015/04/29/wp-rest-api-version-2-0-beta-1/

Szykuje się wersja 2.*

Dokumentacja: http://v2.wp-api.org/

Niekompatybilna wstecz ;) https://make.wordpress.org/core/2015/04/29/wp-rest-api-version-2-0-beta-1/

Do odczytu świetne, do zapisu niekoniecznie ;-)

Problemy z protected meta

Nie można ustawić _thumbnail_id

Pomaga:

add_filter('is_protected_meta', '__return_false');

Brak wsparcia dla dodawania/edycji termsów

Własne end-pointy na ratunek

Brak wsparcia dla definiowania własnych taksonomii przy

tworzeniu wpisów

function wp_api_add_tax($post, $data, $update){ if( !empty($data['custom_tax']) && is_array($data['custom_tax']) ) {

foreach( $data['custom_tax'] as $tax => $val ){ wp_set_post_terms( $post['ID'], $val, $tax ); }

add_action('json_insert_post', 'wp_api_add_tax', 10, 3);

I paru innych rzeczy…

http://wp-api.org/misc/comparison.html

Wydajność i cache

Porady jak przygotować WordPressa pod wykorzystanie motywów SPA:

http://torquemag.io/preparing-wordpress-site-power-single-page-web-app/

Wtyczka cache dla WP-API:

https://github.com/Shelob9/jp-rest-cache

Motyw jako SPA

Motyw-mapa

Motyw-mapaPrawie jak samochód-chłodnia ;-)

Co wykorzystać?

REST API

Adresy URL, które wykorzystamy:

• wp-json/posts?filter[posts_per_page]=200&filter[cat]=1,2,3

REST API

Handlebarshttp://handlebarsjs.com/

<ul class="stats__list"> {{#each stats}} <li class="stats__item"> <strong class="stats__counter{{#if count}} stats__counter--active{{/if}}">{{count}}</strong> <img src="{{iconsUrl}}{{slug}}.svg" alt="" class="stats__icon" /> {{name}} </li> {{/each}} </ul> </script>

Google Maps API

https://developers.google.com/maps/documentation/javascript/tutorial

Inne• LocalStorage - do przechowywania filtrów

• History API - aby mieć dostęp poprzez URL do konkretnych miejsc

• Snazzy mapshttps://snazzymaps.com/

• Travel icon set http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons-png-svg/

Problemy?

Wprowadzanie pozycji elementów na mapie

Wtyczka Pronamic Google Mapshttps://wordpress.org/plugins/pronamic-google-maps/

Advanced Custom Fieldshttps://wordpress.org/plugins/advanced-custom-fields/

Warto pamiętać o zdefiniowaniu pól w motywie http://www.advancedcustomfields.com/resources/local-json/

Brak publicznego dostępu do post meta

json_prepare_post rozwiąże ten problem

Duża liczba markerów

• Marker Clustererhttps://googlemaps.github.io/js-marker-clusterer/docs/examples.html

• Gorsze przypadki omówimy później ;)

Duża liczba markerów

• Marker Clustererhttps://googlemaps.github.io/js-marker-clusterer/docs/examples.html

• Gorsze przypadki omówimy później ;)

Dane geolokalizacyjne

Kategoria

Najważniejsze pliki motywu

• index.php - jedyny plik wyświetlający szablon

• index-templates.php - przechowuje szablony Handlebars

• functions.php - konfiguracja wstępna i wczytywanie plików JS/CSS

• tgm.php - do ułatwienia/wymuszenia instalacji potrzebnych wtyczek

Wczytywanie konfiguracji wstępnej z ekranu personalizacji motywu

wp_register_script( 'tm-app', get_template_directory_uri() . '/js/app.js', array('jquery', ‘tm-handlebars’));

$app_config = array( 'URL' => home_url(), 'mapLatitude' => get_theme_mod('map_latitude', '51.919438'), 'mapLongitude' => get_theme_mod('map_longitude', '19.145135'), 'mapZoom' => get_theme_mod('map_zoom', '6'),);

wp_localize_script( 'tm-app', 'appConfig', $app_config );

Pobieranie danych$.ajax({

url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) {// przetwarzanie danych

url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) { // przetwarzanie danych});

Pobieranie danych$.ajax({ method: ‘GET’,

url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) { // przetwarzanie danych});

Pobieranie danych$.ajax({ method: ‘GET’,

cache: false, url: apiUrl + “posts?filter[posts_per_page]=200"}).done(function( data ) { // przetwarzanie danych});

Wyświetlanie popupuDodawanie danych geograficznych do posta

if( ! function_exists( 'tm_geodata' ) ) :function tm_geodata($data, $post, $context) {

$data['geodata'] = array( 'latitude' => get_post_meta(

$post['ID'], '_pronamic_google_maps_latitude', true ), 'longitude' => get_post_meta(

$post['ID'], '_pronamic_google_maps_longitude', true ), 'address' => get_post_meta(

$post['ID'], '_pronamic_google_maps_address', true ));return $data;

}endif; // tm_geodata

add_filter( 'json_prepare_post', 'tm_geodata', 10, 3 );

Wyświetlanie popupushowPopup: function(data) {

$('.popup__wrap--data').html(templatePopup({"title": data.title, "address": data.geodata.address,"body": data.content,"rating": data.terms.post_tag ? parseInt(data.terms.post_tag[0].slug, 10) :

null,"image": data.featured_image ? data.featured_image.source : null,"categorySlug": data.terms.category[0].slug

uiPopup.show('--data'); history.pushState(null, null, baseUrl + data.slug);},

Co dalej?

1 wpis = 2-5kB 100 wpisów = ~200-500kB

Dla większej liczby markerów

• Utworzenie własnych end-pointów do serwowania danych markerów:

• ID,

• Dane geolokalizacyjne

• Kategoria

• Reszta danych wczytywana po kliknięciu popupa poprzez wp-json/posts/<id>

• ID,

• Kategoria

• ID,

• Kategoria

Gdy mamy bardzo dużo markerów

• Wczytywanie markerów zależnie od widocznego obszaru mapy

• Przygotowanie end-pointu, który na bazie zakresu szerokości i długości geograficznej zwróci listę markerów na danym obszarze

Gdy mamy bardzo dużo markerów

• Wczytywanie markerów zależnie od widocznego obszaru mapy

• Przygotowanie end-pointu, który na bazie zakresu szerokości i długości geograficznej zwróci listę markerów na danym obszarze

DlaczegoDziudek ❤ WP-API ?

• Znam dobrze WordPressowy kokpit…

• … umiem go modyfikować do swoich potrzeb …

• … i zaoszczędzić sobie sporo czasu poprzez wykorzystanie gotowych wtyczek …

• … dzięki WP-API mogę ten kokpit połączyć na front-endzie z czymkolwiek zechcę :-)

• … umiem go dostosować do swoich potrzeb …

Kod przykładu:

https://github.com/dziudek/theme-map

Lektura

• Wykorzystanie taksonomii w WP-API http://torquemag.io/working-taxonomies-using-json-rest-api/

• Tworzenie widżetów z użyciem WP-API http://webdevstudios.com/2015/03/26/how-to-create-an-auto-updating-widget-using-wp-api/

• Postęp łączenia WP-API z WordPressem https://github.com/WP-API/WP-API/issues/571

Tomasz Dziuda

Lead Developer @

@dziudek

http://dziudek.pl

[email protected]

Pytania?

WP-API - teoria i praktyka - WordUp Trójmiasto #2

Technology

Transcript of WP-API - teoria i praktyka - WordUp Trójmiasto #2