Wprowadzenie do WP-API

1. Wprowadzenie do WP-API Tomasz Dziuda

2. Tomasz Dziuda Lead Developer @ @dziudek http://dziudek.pl http://dziudek.github.io/wp-links http://dziudek.github.io/dev-links

3. Disclaimer Będę mówił o WP-API w wersji v.2.* obecnie w wersji beta, ale to najbliższa przyszłość WP-API

4. Idea

5. Źródło: https://wordpress.org/plugins/rest-api/

6. + WP-API

7. + WP-API GET/POST/PUT/DELETE Opcjonalnie: {“json”: “data”}

8. GET/POST/PUT/DELETE {“json”: “data”} + WP-API Opcjonalnie: {“json”: “data”}

9. {“json”: “data”} wp_ajax_{action} wp_ajax_nopriv_{action} + WP-API GET/POST/PUT/DELETE Opcjonalnie: {“json”: “data”}

10. {“json”: “data”} wp_ajax_{action} wp_ajax_nopriv_{action} + WP-API GET/POST/PUT/DELETE Opcjonalnie: {“json”: “data”}

11. JSON jako nośnik danych

12. Wtyczka JSON Viewer: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnﬂgajpaliibnhdgobh/

13. Struktura URLi wp-json/

14. Struktura URLi wp-json/<namespace> wp/v2

15. Struktura URLi wp-json/<namespace>/<zasób> wp/v2 posts

16. Struktura URLi wp-json/<namespace>/<zasób>/<id_lub_filtr> wp/v2 posts 128

17. Struktura URLi wp-json/<namespace>/<zasób>/<id_lub_filtr>/<dodatkowe_zasoby> wp/v2 posts 128 terms/tag

18. ! " { }Wymaga autoryzacji Nie wymaga autoryzacji Wymaga przesłania danych JSON

19. GET wp-json/wp/v2/posts/"! ! " { }Wymaga autoryzacji Nie wymaga autoryzacji Wymaga przesłania danych JSON

20. GET wp-json/wp/v2/posts/ GET wp-json/wp/v2/posts/128 "! "! ! " { }Wymaga autoryzacji Nie wymaga autoryzacji Wymaga przesłania danych JSON

21. GET wp-json/wp/v2/posts/ GET wp-json/wp/v2/posts/128 POST wp-json/wp/v2/posts/ "! { } "! ! ! " { }Wymaga autoryzacji Nie wymaga autoryzacji Wymaga przesłania danych JSON

22. GET wp-json/wp/v2/posts/ GET wp-json/wp/v2/posts/128 POST wp-json/wp/v2/posts/ PUT wp-json/wp/v2/posts/128 "! { } "! ! { }! ! " { }Wymaga autoryzacji Nie wymaga autoryzacji Wymaga przesłania danych JSON

23. GET wp-json/wp/v2/posts/ GET wp-json/wp/v2/posts/128 POST wp-json/wp/v2/posts/ PUT wp-json/wp/v2/posts/128 DELETE wp-json/wp/v2/posts/128 "! { } "! ! { }! ! ! " { }Wymaga autoryzacji Nie wymaga autoryzacji Wymaga przesłania danych JSON

24. Przykłady

25. Przykłady wp-json/wp/v2/posts/303 wp-json/wp/v2/posts?filter[cat]=1,2,3 wp-json/wp/v2/posts?filter[posts_per_page]=20 wp-json/terms/category wp-json/users/me

28. Przykłady wp-json/wp/v2/posts/303 wp-json/wp/v2/posts?filter[cat]=1,2,3 wp-json/wp/v2/posts?filter[posts_per_page]=20 wp-json/wp/v2/terms/category wp-json/wp/v2/users/me

29. Przykłady wp-json/wp/v2/posts/303 wp-json/wp/v2/posts?filter[cat]=1,2,3 wp-json/wp/v2/posts?filter[posts_per_page]=20 wp-json/wp/v2/terms/category wp-json/wp/v2/users/me

30. Sposoby autoryzacji

31. 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

32. Cookie Auth • Standardowa metoda autoryzacji dla wtyczek i motywów • Wymaga przesłania w zapytaniu AJAX-owym dodatkowego nagłówka X-WP-Nonce  http://v2.wp-api.org/guide/authentication/

33. 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

37. Basic Auth • Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania • Wymaga dodatkowej wtyczki: Basic Auth  https://github.com/WP-API/Basic-Auth

38. Basic Auth • Tylko do środowisk testowych, istnieje duże ryzyko wycieku hasła wskutek braku szyfrowania • Wymaga dodatkowej wtyczki: Basic Auth  https://github.com/WP-API/Basic-Auth

39. Istotne zmiany pomiędzy REST API v.1.* i v.2.*

40. Przestrzenie nazw

41. Przestrzenie nazw Nasz motyw lub wtyczka może korzystać z własnej przestrzeni nazw w REST API. Tworzenie nowych endpointów API poprzez register_rest_route wymaga zdeﬁniowania przestrzeni nazw. Domyślna przestrzeń nazw to wp/v2

44. Implementacja HAL Źródło: http://stateless.co/hal_speciﬁcation.html

45. Implementacja HAL HAL - Hypertext Application Language Źródło: http://stateless.co/hal_speciﬁcation.html

46. Implementacja HAL HAL - Hypertext Application Language Wprowadza dla zasobów kolekcje _links i _embedded Źródło: http://stateless.co/hal_speciﬁcation.html

47. Implementacja HAL HAL - Hypertext Application Language Wprowadza dla zasobów kolekcje _links i _embedded _links zawiera adresy powiązanych zasobów _embedded zawiera dane powiązanych zasobów gdy dodamy w URLu &_embed Źródło: http://stateless.co/hal_speciﬁcation.html

48. Nowe endpointy wp/v2/comments wp/v2/pages wp/v2/terms wp/v2/types wp/v2/statuses

49. Możliwości

50. Motywy jako SPA

51. Łatwa komunikacja z aplikacjami

52. Migrowanie danych

53. Migrowanie danych

54. Migrowanie danych JSON XML SQL YAML RSS Atom

55. Migrowanie danych JSON JSON XML SQL YAML RSS Atom

56. Przetwarzanie danych

57. Przetwarzanie danych

58. JSON Przetwarzanie danych

59. JSON Przetwarzanie danych

60. Własne endpointy http://v2.wp-api.org/extending/adding/

61. Filtry i akcje

62. • Akcja rest_insert_post - pozwala zmodyﬁkować dane przed dodaniem do bazy • Filtr rest_prepare_{POST_TYPE} - może w niektórych wypadkach zastąpić własne endpointy • Akcja rest_api_init - pozwala dodawać pola i nowe endpointy oraz np. ograniczyć zapytania do określonej puli IP lub zarejestrowanych kluczy

65. Kilka ciekawostek

66. Zmiana URLa REST API Możemy zmienić URL do API (domyślnie wp-json) poprzez ﬁltr: rest_url_preﬁx

67. Podstawowe informacje o stronie Pod adresem wp-json/ znajdują się podstawowe dane witryny: • nazwa, • opis, • dostępne przestrzenie nazw, • lista endpointów

68. Własne metody autoryzacji • Wymagają implementacji z użyciem ﬁltra rest_authentication_errors • Można zaimplementować np. JSON Web Tokens  http://jwt.io/

69. Własne metody autoryzacji • Wymagają implementacji z użyciem ﬁltra rest_authentication_errors • Można zaimplementować np. JSON Web Tokens  http://jwt.io/

70. Zmiana klasy obsługującej API Korzystając z ﬁltra wp_rest_server_class możemy podmienić klasę WP_REST_Server na własną klasę

71. REST API a mobilna agenda WordCampa

74. + Raw JSON data

75. + Raw JSON data

76. + Raw JSON data speakers.json presentations.json

77. + Raw JSON data speakers.json presentations.json

78. JSON ~320kB JSON ~60kB

79. Motyw jako SPA

80. Motyw-mapa

84. Co wykorzystać?

85. REST API Adresy URL, które wykorzystamy: • wp-json/wp/v2/terms/category/ • wp-json/wp/v2/posts?filter[posts_per_page]=200 • wp-json/wp/v2posts?filter[posts_per_page]=200&filter[cat]=1,2,3

89. Handlebars http://handlebarsjs.com/ <script id="stats-popup-tmpl" type="text/x-handlebars-template"> <h3 class="stats__header"><?php _e('Znaleziono {{total}} odwiedzonych miejsc', 'theme-map'); ?></h3> <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>

92. Inne

93. Inne • Google Maps API - bo musimy mieć jakieś mapy ;)  https://developers.google.com/maps/documentation/javascript/tutorial • LocalStorage - do przechowywania ﬁltrów • History API - aby mieć dostęp poprzez URL do konkretnych miejsc • Snazzy maps  https://snazzymaps.com/ • Travel icon set  http://www.smashingmagazine.com/2014/12/23/freebie-tourism-travel-icon-set-100-icons- png-svg/

98. Problemy?

99. Wprowadzanie pozycji elementów na mapie

100. Wprowadzanie pozycji elementów na mapie Wtyczka Pronamic Google Maps  https://wordpress.org/plugins/pronamic-google-maps/

101. Wprowadzanie pozycji elementów na mapie Advanced Custom Fields  https://wordpress.org/plugins/advanced-custom-ﬁelds/

102. Duża liczba markerów

103. Duża liczba markerów • Marker Clusterer  https://googlemaps.github.io/js-marker-clusterer/docs/examples.html • Gorsze przypadki omówimy później ;)

105. Wpis

106. Dane geolokalizacyjne

107. Kategoria Kategoria

108. Tagi

109. Adres

110. Najważniejsze pliki motywu • index.php - jedyny plik wyświetlający szablon • index-templates.php - przechowuje szablony Handlebars • functions.php - konﬁguracja wstępna i wczytywanie plików JS/CSS

113. Najważniejsze pliki motywu • index.php - jedyny plik wyświetlający szablon • index-templates.php - przechowuje szablony Handlebars • functions.php - konﬁguracja wstępna i wczytywanie plików JS/CSS • tgm.php - do ułatwienia/wymuszenia instalacji potrzebnych wtyczek

114. Wczytywanie konﬁguracji 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 );

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

120. Pobieranie danych $.ajax({ method: ‘GET’, url: apiUrl + “posts?filter[posts_per_page]=200" }).done(function( data ) { // przetwarzanie danych });

121. Pobieranie danych $.ajax({ method: ‘GET’, cache: false, url: apiUrl + “posts?filter[posts_per_page]=200" }).done(function( data ) { // przetwarzanie danych });

122. Usuwanie/modyﬁkowanie pól z odpowiedzi REST API jest NIEBEZPIECZNE Lepiej stworzyć własne zoptymalizowane endpointy w przestrzeni nazw motywu lub dodać brakujące pola

123. W wypadku dodawana własnych pól, warto dodać im prefiksy celem uniknięcia konfliktów z innymi wtyczkami i motywami modyfikującymi odpowiedzi API np. tm_geodata

124. Dodawanie danych do wpisu function PREFIX_register_FIELD_NAME() { register_api_field('TYPE', ‘PREFIX_FIELD_NAME', array( 'get_callback' => 'PREFIX_get_FIELD_NAME', 'update_callback' => null, 'schema' => null ) ); } add_action('rest_api_init', ‘PREFIX_register_FIELD_NAME');

128. Dodawanie danych do wpisu function tm_register_category() { register_api_field( 'post', 'tm_category', array( 'get_callback' => 'tm_get_category', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'tm_register_category');

129. function tm_get_category( $object, $field_name, $request ) { $category_slug = null; $categories = get_the_category($object['id']); if(count($categories)) { $category_slug = $categories[0]->slug; } return $category_slug; } Dodawanie danych do wpisu

130. Co dalej?

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

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

133. 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>

134. 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>

135. 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/wp/v2/posts/<id>

136. 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 geograﬁcznej zwróci listę markerów na danym obszarze

137. Gdy mamy bardzo dużo markerów • Wczytywanie markerów zależnie od widocznego obszaru mapy • Przygotowanie endpointu, który na bazie zakresu szerokości i długości geograﬁcznej zwróci listę markerów na danym obszarze

138. Kod przykładu: https://github.com/dziudek/theme-map

139. Podsumowanie

140. Podsumowanie • REST API tworzy zupełnie nowe obszary wykorzystania wtyczek i motywów • REST API jest bardzo skalowalne i edytowalne • Trzeba pamiętać, że nie tylko my będziemy korzystać z REST API na danej instalacji WP

143. Pytania?

Wprowadzenie do WP-API

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Wprowadzenie do WP-API (20)

More from Tomasz Dziuda (9)

Wprowadzenie do WP-API