WP-API - teoria i praktyka - WordUp Łódź #4

1. WP-API teoria i praktyka Tomasz Dziuda WordUp Łódź #4 10.VI.2015

2. Idea

3. + WP-API

4. GET/POST/PUT/DELETE + WP-API

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

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

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

8. Struktura URLi wp-json/<zasób>/<id_lub_ﬁltr>/<dodatkowe_zasoby>

9. / /posts /posts/<id>/meta /posts/<id>/revisions /media /users /taxonomies /taxonomies/<taxonomy>/terms

10. Przykłady

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

17. GET / HEAD - odczyt istniejącego elementu POST - tworzenie nowego elementu PUT / PATCH - edycja elementu DELETE - usunięcie elementu

21. GET / HEAD - odczyt istniejącego elementu POST - tworzenie nowego elementu PUT / PATCH - edycja elementu DELETE - usunięcie elementu Wymagają zawsze autoryzacji Wymagają CZASAMI autoryzacji

22. JSON jako nośnik danych

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

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

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

29. Sposoby autoryzacji

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

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

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

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. Własne metody • Wymagają implementacji z użyciem ﬁltra json_authentication_errors  https://apppresser.com/custom-wp-api-authentication/ • Można zaimplementować np. JSON Web Tokens  http://jwt.io/

39. Własne metody • Wymagają implementacji z użyciem ﬁltra json_authentication_errors  https://apppresser.com/custom-wp-api-authentication/ • Można zaimplementować np. JSON Web Tokens  http://jwt.io/

40. Możliwości

41. Nowe kokpity

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

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

44. Panele zarządzania WordPressami

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

46. Motywy jako SPA

47. Łatwa komunikacja z aplikacjami

48. Migrowanie danych

49. Migrowanie danych

50. Migrowanie danych JSON XML SQL YAML RSS Atom

51. Migrowanie danych JSON JSON XML SQL YAML RSS Atom

52. Przetwarzanie danych

53. Przetwarzanie danych

54. JSON Przetwarzanie danych

55. JSON Przetwarzanie danych

56. Rozszerzenia przeglądarek zintegrowane z WordPressem

57. Usługi informacyjne

58. Kalendarz WordUpów

59. Kalendarz WordUpów • Przygotowujemy WordPressa z listą WordUpów • Tworzymy odpowiednie custom ﬁelds opisujące WordUpy • Tworzymy widżet, który pobiera te informacje • Wykorzystujemy HTTP API albo JSON-P    https://codex.wordpress.org/HTTP_API  http://json-p.org/ 

63. Własne end-pointy http://wp-api.org/guides/extending.html http://www.roysivan.com/my-best-practices-to-developing-wp-api/

64. Filtry i akcje

65. Moje dwa ulubione ﬁltry: • json_insert_post - pozwala pozmieniać dane przed dodaniem do bazy • json_prepare_post - może zastąpić własne end- pointy

68. Pamiętajcie jednak, że…

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

70. Szykuje się wersja 2.*

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

72. 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/

73. Do odczytu świetne, do zapisu niekoniecznie ;-)

74. Problemy z protected meta   Nie można ustawić _thumbnail_id

75. Problemy z protected meta   Nie można ustawić _thumbnail_id

76. Problemy z protected meta   Nie można ustawić _thumbnail_id Pomaga: add_filter('is_protected_meta', '__return_false');

77. Brak wsparcia dla dodawania/edycji termsów

78. Brak wsparcia dla dodawania/edycji termsów Własne end-pointy na ratunek

79. Brak wsparcia dla deﬁniowania własnych taksonomii przy tworzeniu wpisów

80. 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);

81. I paru innych rzeczy… http://wp-api.org/misc/comparison.html

82. Wydajność i cache

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

84. Motyw jako SPA

85. Motyw-mapa

86. Motyw-mapa Prawie jak samochód-chłodnia ;-)

90. Co wykorzystać?

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

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

98. Inne

99. 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/

104. Problemy?

105. Wprowadzanie pozycji elementów na mapie

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

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

108. Wprowadzanie pozycji elementów na mapie Advanced Custom Fields  https://wordpress.org/plugins/advanced-custom-fields/ Warto pamiętać o zdefiniowaniu pól w motywie  http://www.advancedcustomfields.com/resources/local-json/

109. Brak publicznego dostępu do post meta

110. Brak publicznego dostępu do post meta json_prepare_post rozwiąże ten problem

111. Duża liczba markerów

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

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

115. Wpis

116. Dane geolokalizacyjne

117. Kategoria Kategoria

118. Tagi

119. Adres

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

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

124. 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 );

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

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

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

132. Wyświetlanie popupu Dodawanie danych geograﬁcznych 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 );

136. Wyświetlanie popupu showPopup: 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); },

146. Co dalej?

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

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

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

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

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

154. Dlaczego Dziudek ❤ WP-API ?

155. • Znam dobrze WordPressowy kokpit… • … umiem go modyﬁkować 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ę :-)

156. • Znam dobrze WordPressowy kokpit… • … umiem go dostosować 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ę :-)

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

160. DEMO

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

163. Tomasz Dziuda Lead Developer @ @dziudek http://dziudek.pl dziudek@gavick.com

164. Pytania?

WP-API - teoria i praktyka - WordUp Łódź #4

More Related Content

What's hot (20)

Similar to WP-API - teoria i praktyka - WordUp Łódź #4 (7)

More from Tomasz Dziuda (12)

WP-API - teoria i praktyka - WordUp Łódź #4