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

1. WP-API teoria i praktyka Tomasz Dziuda WordUp Trójmiasto 23.V.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. Rozszerzenia przeglądarek zintegrowane z WordPressem

53. Usługi informacyjne

54. Kalendarz WordUpów

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

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

60. Filtry i akcje

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

64. Pamiętajcie jednak, że…

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

66. Szykuje się wersja 2.*

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

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

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

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

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

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

73. Brak wsparcia dla dodawania/edycji termsów

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

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

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

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

78. Wydajność i cache

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

80. Motyw jako SPA

81. Motyw-mapa

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

86. Co wykorzystać?

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

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

94. Google Maps API https://developers.google.com/maps/documentation/ javascript/tutorial

95. Inne

96. Inne • 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/

100. Problemy?

101. Wprowadzanie pozycji elementów na mapie

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

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

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

105. Brak publicznego dostępu do post meta

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

107. Duża liczba markerów

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

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

111. Wpis

112. Dane geolokalizacyjne

113. Kategoria Kategoria

114. Tagi

115. Adres

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

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

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

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

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

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

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

132. 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); },

142. Co dalej?

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

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

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

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

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

150. Dlaczego Dziudek ❤ WP-API ?

151. • 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ę :-)

152. • 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ę :-)

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

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

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

158. Pytania?

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (6)

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

Similaire à WP-API - teoria i praktyka - WordUp Trójmiasto #2 (20)

Plus de Tomasz Dziuda

Plus de Tomasz Dziuda (15)

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