{"id":229522,"date":"2022-11-22T15:27:00","date_gmt":"2022-11-22T12:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229522"},"modified":"2022-11-09T08:18:29","modified_gmt":"2022-11-09T05:18:29","slug":"iterowanie-na-projektach-ekranu-administracyjnego-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/iterowanie-na-projektach-ekranu-administracyjnego-wordpress\/","title":{"rendered":"Iterowanie na projektach ekranu administracyjnego WordPress"},"content":{"rendered":"\n<p>Pomys\u0142 \u201eprocesu iteracyjnego&quot; nie jest niczym nowym w tworzeniu oprogramowania. Jest obecny w wielu r\u00f3\u017cnych metodologiach i prawdopodobnie dlatego, \u017ce sprawdza si\u0119 dobrze, zw\u0142aszcza podczas uzyskiwania informacji zwrotnych od klient\u00f3w.<\/p>\n<p>Jednym z miejsc, kt\u00f3re r\u00f3wnie\u017c uwa\u017cam za przydatne, jest budowanie interfejs\u00f3w administracyjnych dla wtyczek WordPress.<\/p>\n<p>\u017beby by\u0142o jasne, nie jestem projektantem, wi\u0119c je\u015bli chodzi o prace front-endowe, zawsze odwo\u0142uj\u0119 si\u0119 do style guide i makiet, kt\u00f3re projektant dostarcza mi od samego pocz\u0105tku projektu. (Wspominam o tym tylko dlatego, \u017ce uwa\u017cam, \u017ce jest to praktyka, kt\u00f3r\u0105 powinien stosowa\u0107 ka\u017cdy, kto nie jest projektantem, ale robi\u0119 dygresj\u0119).<\/p>\n<p>Ale je\u015bli chodzi o prac\u0119 nad ekranami administracyjnymi lub ekranami zaplecza dla WordPressa, kieruj\u0119 si\u0119 \u015bcis\u0142\u0105 zasad\u0105: upewnij si\u0119, \u017ce wygl\u0105da to tak naturalnie, jak to tylko mo\u017cliwe.<\/p>\n<p>Jak zatem iteracyjny rozw\u00f3j i interfejs ekran\u00f3w administracyjnych WordPressa maj\u0105 ze sob\u0105 co\u015b wsp\u00f3lnego?<\/p>\n<h2>Projekt ekranu administracyjnego WordPress<\/h2>\n<p>W tym konkretnym artykule zrezygnowano z m\u00f3wienia o rzeczach, kt\u00f3re s\u0105 oczekiwane w przypadku zapisywania informacji. Oznacza to, \u017ce zak\u0142adam wszystkie:<\/p>\n<ul>\n<li>sanityzacja,<\/li>\n<li>walidacja,<\/li>\n<li>czeki jednorazowe,<\/li>\n<li>kontrole uprawnie\u0144,<\/li>\n<\/ul>\n<p>I podobne s\u0105 rozumiane i obs\u0142ugiwane.<\/p>\n<p>W tym po\u015bcie zachowam prostot\u0119. Powiedzmy, \u017ce chcemy mie\u0107:<\/p>\n<ul>\n<li>kilka p\u00f3l tekstowych,<\/li>\n<li>przycisk zapisu,<\/li>\n<li>przycisk resetowania,<\/li>\n<li>a na koniec mo\u017ce co\u015b ekstra.<\/li>\n<\/ul>\n<p>Jak mo\u017ce to rozegra\u0107 si\u0119 w iteracyjnym procesie projektowania?<\/p>\n<h3>1 Szkicowanie<\/h3>\n<p>Za\u0142\u00f3\u017cmy, \u017ce nad czym\u015b pracujesz i planujesz wygl\u0105d ekranu administracyjnego. Bior\u0105c pod uwag\u0119 to, co mieli\u015bmy powy\u017cej, by\u0107 mo\u017ce wst\u0119pny szkic mo\u017ce wygl\u0105da\u0107 tak:<\/p>\n<p>Wystarczaj\u0105co \u0142atwe, prawda? Reprezentuje to, co projekt musi utrzyma\u0107, i wy\u015bwietla wszystko, czego potrzebujemy do tego konkretnego ekranu administracyjnego.<\/p>\n<h3>2 Budowanie tego<\/h3>\n<p>Raz z\u0142o\u017cony powinien wygl\u0105da\u0107 tak natywnie, jak to tylko mo\u017cliwe. Bior\u0105c pod uwag\u0119 style, kt\u00f3re mamy dost\u0119pne w WordPress, stosunkowo \u0142atwo jest to zbudowa\u0107 za pomoc\u0105 dost\u0119pnych interfejs\u00f3w API i znacznik\u00f3w:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164847-61e76fc6c5f0d.jpg\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164847-61e76fc6c5f0d.jpg\" alt=\"Iterowanie na projektach ekranu administracyjnego WordPress\" ><\/a><\/p>\n<p>A co robi ka\u017cde pole i przycisk?<\/p>\n<h3>3 Udoskonalanie go<\/h3>\n<p>W tym miejscu w gr\u0119 wchodzi udoskonalanie funkcjonalno\u015bci. Na przyk\u0142ad:<\/p>\n<ul>\n<li>Uwa\u017cam, \u017ce przycisk <strong>Zapisz<\/strong> nie powinien by\u0107 w\u0142\u0105czony, dop\u00f3ki wymagane pola nie zostan\u0105 wype\u0142nione,<\/li>\n<li>My\u015bl\u0119, \u017ce przycisk <strong>Reset<\/strong> powinien wyczy\u015bci\u0107 to, co jest obecne,<\/li>\n<li>Powinna istnie\u0107 pewna ilo\u015b\u0107 komunikat\u00f3w o b\u0142\u0119dach, z kt\u00f3rych wszystkie reprezentuj\u0105 to, co musimy zrobi\u0107, gdy co\u015b si\u0119 nie powiedzie, gdy co\u015b mo\u017ce by\u0107 nie w porz\u0105dku lub co\u015b jest ca\u0142kowicie nie tak.<\/li>\n<\/ul>\n<p>Oczywi\u015bcie du\u017co \u0142atwiej o tym m\u00f3wi\u0107, gdy nie odnosi si\u0119 to do konkretnego projektu, ale by\u0107 mo\u017ce niekt\u00f3re z pomys\u0142\u00f3w maj\u0105 zastosowanie w tym, co si\u0119 dzieje.<\/p>\n<h2>Ulepszenia asynchroniczne?<\/h2>\n<p>Jedn\u0105 z rzeczy, do kt\u00f3rych przyzwyczaili\u015bmy si\u0119 z urz\u0105dzeniami takimi jak nasze telefony i niekt\u00f3re cz\u0119\u015bci naszych system\u00f3w operacyjnych, jest to, \u017ce gdy prze\u0142\u0105czamy prze\u0142\u0105cznik lub wprowadzamy niewielk\u0105 zmian\u0119, dane s\u0105 zapisywane.<\/p>\n<p>Oznacza to, \u017ce nie jest wymagane \u017cadne dzia\u0142anie potwierdzaj\u0105ce (poza czym\u015b destrukcyjnym, takim jak usuni\u0119cie pliku, oczywi\u015bcie). Dane s\u0105 po prostu zapisywane, a opcja dzia\u0142a.<\/p>\n<p>Jednak wci\u0105\u017c widzimy wiele przycisk\u00f3w <strong>Zapisz<\/strong> w WordPressie, prawda? A co z zapisywaniem danych wej\u015bciowych za pomoc\u0105 Ajax lub innej metody asynchronicznej? To jest co\u015b, czego jeszcze nie zaimplementowa\u0142em, ale z pewno\u015bci\u0105 to rozwa\u017ca\u0142em.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Podczas pracy nad projektem ekranu administracyjnego WordPress istnieje iteracyjny proces, kt\u00f3ry mo\u017cemy \u015bledzi\u0107 w celu zapewnienia jako\u015bci.<\/p>\n","protected":false},"author":1,"featured_media":223984,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[845,866],"tags":[1169],"class_list":["post-229522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229522"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229522\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}