{"id":1238,"date":"2020-11-17T14:03:46","date_gmt":"2020-11-17T14:03:46","guid":{"rendered":"https:\/\/www.juniorjavadeveloper.pl\/?p=1238"},"modified":"2023-06-07T11:41:40","modified_gmt":"2023-06-07T11:41:40","slug":"stop-zanim-zaczniesz-pisac-kod-zastanow-sie-co-chcesz-kodowac-analiza-projekt-i-implementacja","status":"publish","type":"post","link":"https:\/\/www.juniorjavadeveloper.pl\/en\/2020\/11\/17\/stop-zanim-zaczniesz-pisac-kod-zastanow-sie-co-chcesz-kodowac-analiza-projekt-i-implementacja\/","title":{"rendered":"Stop! Zanim zaczniesz pisa\u0107 kod zastan\u00f3w si\u0119, co chcesz kodowa\u0107? Analiza, projekt i implementacja"},"content":{"rendered":"<p class=\"wp-block-paragraph\">W tym artykule postaram si\u0119 pokaza\u0107 jak unika\u0107 b\u0142\u0119du, kt\u00f3ry pope\u0142niaj\u0105 programi\u015bci podczas pisania kodu aplikacji, nawet tego najmniejszego i najprostszego kodu. B\u0142\u0119dem tym jest brak zastanowienia si\u0119, co tak na prawd\u0119 chcemy kodowa\u0107. Samemu nieraz pope\u0142ni\u0142em ten b\u0142\u0105d. Mo\u017cesz mi wierzy\u0107, albo i nie, ale nawet nad jednym, prostym fragmentem kodu mo\u017cna zmarnowa\u0107 wiele godzin, je\u017celi wcze\u015bniej nie zastanowimy si\u0119, co on ma robi\u0107.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wszystko zaczyna si\u0119 od zadania, pomys\u0142u, kt\u00f3ry mamy do wykonania zimplementowania. Poka\u017c\u0119 spos\u00f3b, kt\u00f3ry stosuj\u0119 na co dzie\u0144 podczas tworzenia oprogramowania. Praktyczne zastosowanie poni\u017cszego sposobu mo\u017cna znale\u017a\u0107 w moim artykule <a rel=\"noreferrer noopener\" href=\"https:\/\/www.juniorjavadeveloper.pl\/en\/2023\/02\/01\/od-czego-zaczac-tworzenie-aplikacji-przestan-pisac-kod-zrodlowy-praktyczny-przyklad\/\" data-type=\"post\" data-id=\"2446\" target=\"_blank\">Od czego zacz\u0105\u0107 tworzenie aplikacji? \u2013 Przesta\u0144 pisa\u0107 kod \u017ar\u00f3d\u0142owy \u2013 praktyczny przyk\u0142ad<\/a>.<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Spos\u00f3b, kt\u00f3ry stosuj\u0119 sk\u0142ada si\u0119 z trzech prostych krok\u00f3w:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Analiza<\/strong> &#8211; pozwala g\u0142\u0119biej zastanowi\u0107 si\u0119 nad tym, co zamierzamy kodowa\u0107 oraz spisa\u0107 nasz\u0105 wizj\u0119 tworzonego oprogramowania, aplikacji.<\/li>\n\n\n\n<li><strong>Projekt<\/strong> &#8211; systematyzuje i dokumentuje informacje uzyskane podczas procesu analizy, kt\u00f3re p\u00f3\u017aniej mo\u017cna wykorzysta\u0107 do implementacji.<\/li>\n\n\n\n<li><strong>Implementacja<\/strong> &#8211; poprzedzona analiz\u0105 i projektem nie jest ju\u017c chaotycznym zbiorem kodu oprogramowania, kt\u00f3ry trzeba cz\u0119sto modyfikowa\u0107.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><em>Nie nale\u017cy zra\u017ca\u0107 si\u0119&nbsp;widz\u0105c takie poj\u0119cia jak analiza i projekt, bo pod tymi poj\u0119ciami w moim przypadku kryj\u0105 si\u0119 proste metody i rozwi\u0105zania.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ad. 1. Analiza &#8211; Dlaczego analiza jest taka wa\u017cna?<\/strong> Dzi\u0119ki niej mo\u017cemy spojrze\u0107 na tworzone oprogramowanie z szerszej perspektywy, co pozwoli nam dok\u0142adniej zrozumie\u0107 tworzony kod. Analiza pozwala nam dowiedzie\u0107 si\u0119, co tak naprawd\u0119 ma realizowa\u0107 tworzone oprogramowanie. Przeprowadzam analiz\u0119 tak, aby nie uton\u0105\u0107 w morzu &#8220;dokumentacji&#8221;. Kt\u00f3ra, to z za\u0142o\u017cenia jest nieaktualna w momencie jej tworzenia, bo jedyn\u0105 sta\u0142\u0105 w programowaniu jest zmiana kodu. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dla analizy r\u00f3wnie\u017c mam kilka krok\u00f3w do wykonania:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Opis w formie tekstu, spisanego np. w notatniku.<\/li>\n\n\n\n<li>Wybranie rzeczownik\u00f3w i czasownik\u00f3w z opisu.<\/li>\n\n\n\n<li>Karty CRC &#8211; Class Responsibility Collaborators.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ad. 2. Projekt &#8211; Nawet najprostszy projekt <\/strong>pozwala unikn\u0105\u0107 du\u017cej ilo\u015bci <a rel=\"noreferrer noopener\" href=\"https:\/\/pl.wikipedia.org\/wiki\/Refaktoryzacja\" target=\"_blank\">refaktoryzacji<\/a> kodu. Oczywi\u015bcie wsp\u00f3\u0142czesne <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Integrated_development_environment\" target=\"_blank\">IDE<\/a> (Integrated Development Environment) wspiera i automatyzuje proces refaktoryzacji, ale po, co dodawa\u0107 sobie wi\u0119cej pracy? Dodatkowo projekt poka\u017ce zale\u017cno\u015bci mi\u0119dzy elementami tworzonego oprogramowania, co pozwoli z wyprzedzeniem np. podzieli\u0107 aplikacj\u0119 na warstwy i\/lub modu\u0142y.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dla projektu r\u00f3wnie\u017c mam kilka krok\u00f3w do wykonania:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Diagram klas w UML.<\/li>\n\n\n\n<li>Makiety GUI.<\/li>\n\n\n\n<li>Lista end-point&#8217;\u00f3w REST i\/lub API.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ad. 3. Implementacja &#8211; W trakcie implementacji u\u017cywam<\/strong> <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Test-driven_development\" target=\"_blank\">TDD<\/a> (Test Driven Development) prawie dla ca\u0142ego kodu. Dlaczego TDD? Na pocz\u0105tku, jak zaczynamy implementowa\u0107 metody z naszego diagramu klas UML, to nie wiemy jak dok\u0142adnie b\u0119dzie dzia\u0142a\u0107 dana metoda. Wtedy nale\u017cy zadeklarowa\u0107 metod\u0119, a implementacj\u0119 dodawa\u0107 podczas tworzenia i rozwijania test\u00f3w jednostkowych.<\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><em>To tyle teorii, teraz czas na praktyczne wykorzystanie przedstawionej wiedzy. M\u00f3g\u0142bym napisa\u0107 du\u017co wi\u0119cej teorii, ale chc\u0119 pokaza\u0107, \u017ce proces jest na prawd\u0119&nbsp;bardzo prosty, a jego praktyczne zastosowanie daje bardzo dobre rezultaty.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\" style=\"font-size:24px\"><strong>Praktyczne wykorzystanie trzech krok\u00f3w:<\/strong><br><strong>Analiza, Projekt i Implementacja.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zacznijmy od pocz\u0105tku, dostajemy &#8220;proste&#8221; zadanie, <strong>zaimplementowanie systemu do przechowywania notatek<\/strong>. Nale\u017cy pami\u0119ta\u0107, je\u017celi zadanie by\u0142oby &#8220;proste&#8221;, to mo\u017cna by by\u0142o rozwi\u0105za\u0107 je za pomoc\u0105 kreatora. Ka\u017cde nawet proste zadnie mo\u017cemy sobie skomplikowa\u0107 nie rozk\u0142adaj\u0105c go na czynniki.<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Analiza &#8211; Opis w formie tekstu:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">System umo\u017cliwia przechowywanie notatek, kt\u00f3re u\u017cytkownik tworzy, notatka zawiera informacje o autorze oraz dacie utworzenia i ostatniej modyfikacji. Ka\u017cda notatka posiada tytu\u0142 oraz tre\u015b\u0107, kt\u00f3r\u0105 mo\u017cna modyfikowa\u0107. Je\u017celi u\u017cytkownik ma wi\u0119cej notatek, to mo\u017cna wy\u015bwietli\u0107 je w postaci listy notatek. Notatki mo\u017cna usun\u0105\u0107 oraz wy\u015bwietli\u0107 ich zawarto\u015b\u0107. Autor mo\u017ce poda\u0107 swoje imi\u0119 i nazwisko jak r\u00f3wnie\u017c pseudonim artystyczny.<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Analiza &#8211; Wybranie rzeczownik\u00f3w i czasownik\u00f3w z opisu:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dlaczego z tekstu wybieramy tylko rzeczowniki i czasowniki? Poniewa\u017c, to pozwoli nam zidentyfikowa\u0107 i okre\u015bli\u0107 przysz\u0142e klasy j\u0119zyka Java (rzeczowniki) oraz metody w klasach Java (czasowniki). Docelowo wszystkie nazwy klas i metod b\u0119d\u0105 w kodzie zapisane po angielsku dla u\u0142atwienia na czas analizy pozostawiam polskie wyrazy.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Rzeczowniki (przysz\u0142e klasy Java)<\/th><\/tr><\/thead><tbody><tr><td>System, Notatka, Data utworzenia notatki, Data modyfikacji notatki, Tytu\u0142 notatki, Tre\u015b\u0107 notatki, Autor, Imi\u0119 autora, Nazwisko autora, Pseudonim autora<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Lista rzeczownik\u00f3w zidentyfikowanych w opisie<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Czasowniki (przysz\u0142e metody w klasach Java)<\/th><\/tr><\/thead><tbody><tr><td>Przechowywanie, Tworzenie, Modyfikacja, Wy\u015bwietlenie listy, Wy\u015bwietlenie zawarto\u015bci<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Lista czasownik\u00f3w zidentyfikowanych w opisie<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Powy\u017csza lista mo\u017ce wydawa\u0107 si\u0119 banalnie prosta, ale chodzi o przedstawienie idei, za pomoc\u0105, kt\u00f3rej mo\u017cemy przeanalizowa\u0107 dowolnie du\u017cy, z\u0142o\u017cony system informatyczny.<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Analiza &#8211; Karty CRC &#8211; Class Responsibility Collaborators:<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zanim przyst\u0105pimy do tworzenia kart CRC musz\u0119 powiedzie\u0107 o dw\u00f3ch wa\u017cnych relacjach pomi\u0119dzy klasami. W telegraficznym skr\u00f3cie:<br>&#8211; <strong>Pierwsza relacja, to IS-A (jest)<\/strong> &#8211; dziedziczenie (inheritance) oznacza, to \u017ce Car IS-A Vehicle &#8211; Samoch\u00f3d jest Pojazdem.<br>&#8211; <strong>Druga relacja, to HAS-A (ma)<\/strong> &#8211; kompozycja (composition) oznacza, to \u017ce Car HAS-A Engine &#8211; Samoch\u00f3d ma Silnik.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wi\u0119cej informacji <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3resource.com\/java-tutorial\/inheritance-composition-relationship.php\" target=\"_blank\">Inheritance (IS-A) vs. Composition (HAS-A) Relationship<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dlaczego pisz\u0119 o tych relacjach w\u0142a\u015bnie teraz? Poniewa\u017c pewne rzeczowniki nie b\u0119d\u0105 oddzielnymi klasami, ale ich sk\u0142adowymi, a niekt\u00f3re kasy b\u0119d\u0105 bardziej og\u00f3lnym przypadkiem innych, np.:<br>&#8211; <strong>Autor IS-A (jest) U\u017cytkownik(iem)<\/strong>,<br>&#8211; <strong>Notatka HAS-A (ma) Autor(a), Tre\u015b\u0107, itp<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Karty CRC (Class, Responsibility, Collaborators) s\u0142u\u017c\u0105 do przedstawienia dla klasy (Class) jej odpowiedzialno\u015bci\/zale\u017cno\u015bci (Responsibilities) oraz powi\u0105za\u0144 z innymi klasami w ramach tworzonego systemu.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class:<\/strong><\/td><td><em>Notatka<\/em><\/td><\/tr><tr><td><strong>Responsibility<\/strong><\/td><td><strong>Collaborators<\/strong><\/td><\/tr><tr><td>Przechowuje (HAS-A) dane notatki:<br>&#8211; Tytu\u0142, Tre\u015b\u0107, Autor<\/td><td>Autor (klasa)<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Tabela z kart\u0105 CRC dla klasy Notatka<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Class:<\/strong><\/td><td><em>Autor (U\u017cytkownik)<\/em><\/td><\/tr><tr><td><strong>Responsibility<\/strong><\/td><td><strong>Collaborators<\/strong><\/td><\/tr><tr><td>Przechowuje (HAS-A) dane autora:<br>&#8211; Imi\u0119, Nazwisko, Pseudonim<\/td><td>Notatka (klasa)<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Tabela z kart\u0105 CRC dla klasy Autor<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Projekt &#8211; Diagram klas w UML<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na podstawie analizy, a konkretnie kart CRC stworzymy <a rel=\"noreferrer noopener\" href=\"https:\/\/pl.wikipedia.org\/wiki\/Diagram_klas\" target=\"_blank\">diagram klas<\/a> w j\u0119zyku <a rel=\"noreferrer noopener\" href=\"https:\/\/pl.wikipedia.org\/wiki\/Unified_Modeling_Language\" target=\"_blank\">UML<\/a>. Oczywi\u015bcie w tym przypadku b\u0119dzie, to bardzo prosty diagram, ale tak samo jak na etapie analizy chodzi o przedstawienie idei, za pomoc\u0105, kt\u00f3rej mo\u017cemy stworzy\u0107 diagram klas (projekt) tworzonego systemu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Do tworzenia diagram\u00f3w w j\u0119zyku UML u\u017cywam darmowego narz\u0119dzia &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/www.diagrams.net\" target=\"_blank\">https:\/\/www.diagrams.net<\/a>, dost\u0119pnego online, bez konieczno\u015bci instalacji &#8211; jest r\u00f3wnie\u017c dost\u0119pna aplikacja typu desktop.<\/p>\n\n\n<div class=\"wp-block-image\"><!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Note-Author_Class-Diagram_UML.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"392\" height=\"108\" src=\"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Note-Author_Class-Diagram_UML.png\" alt=\"Note - Author, Class Diagram UML\" class=\"wp-image-1287\" srcset=\"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Note-Author_Class-Diagram_UML.png 392w, https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Note-Author_Class-Diagram_UML-300x83.png 300w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/a><figcaption class=\"wp-element-caption\">Note &#8211; Author, Class Diagram UML<\/figcaption><\/figure>\n<\/body><\/html>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Elementy z diagramu UML w telegraficznym skr\u00f3cie:<br>1. <strong>Note<\/strong> &#8211; nazwa klasy,<br>2. <strong>+ title: String<\/strong> &#8211; znak <strong>+<\/strong> (plus), zmienna publiczna; <strong>title<\/strong> &#8211; nazwa zmiennej; <strong>String<\/strong> &#8211; typ zmiennej,<br>3. Po\u0142\u0105czenie, relacja mi\u0119dzy klasami <strong>&lt;&gt;&#8212;<\/strong> agregacja.<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Projekt &#8211; Makiety GUI<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je\u017celi tworzymy interfejs u\u017cytkownika dla naszej aplikacji, to nale\u017cy stworzy\u0107 makiety GUI nawet, je\u017celi s\u0105, to bardzo proste makiety GUI. Interfejs u\u017cytkownika mo\u017ce by\u0107 dla aplikacji web&#8217;owej i\/lub aplikacji desktop. Przez makiety GUI rozumiem, zobrazowanie w formie graficznej element\u00f3w interfejsu u\u017cytkownika takich jak np.: przyciski, etykiety, pola do wprowadzania danych itp.. Dlaczego warto tworzy\u0107 nawet najprostsze makiety GUI takie, jak poni\u017csze? Takie makiety pozwol\u0105 zrozumie\u0107, przybli\u017cy\u0107 biznesowy aspekt tworzonego systemu oraz b\u0119d\u0105 dobr\u0105 baz\u0105 do tworzenia kolejnych makiet.<\/p>\n\n\n<div class=\"wp-block-image\"><!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"551\" height=\"201\" src=\"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Notes-list-GUI-Mockups-UML__.png\" alt=\"Lista Notatek - Makiety GUI w UML\" class=\"wp-image-1305\" srcset=\"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Notes-list-GUI-Mockups-UML__.png 551w, https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Notes-list-GUI-Mockups-UML__-300x109.png 300w, https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Notes-list-GUI-Mockups-UML__-400x146.png 400w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><figcaption class=\"wp-element-caption\">Lista Notatek &#8211; Makiety GUI w UML<\/figcaption><\/figure>\n<\/body><\/html>\n<\/div>\n\n<div class=\"wp-block-image\"><!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"551\" height=\"361\" src=\"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Add_Edit-Note-GUI-Mockups.png\" alt=\"Dodawanie\/Edycja Notatki - Makiety GUI w UML\" class=\"wp-image-1303\" srcset=\"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Add_Edit-Note-GUI-Mockups.png 551w, https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Add_Edit-Note-GUI-Mockups-300x197.png 300w, https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/Add_Edit-Note-GUI-Mockups-400x262.png 400w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><figcaption class=\"wp-element-caption\">Dodawanie\/Edycja Notatki &#8211; Makiety GUI w UML<\/figcaption><\/figure>\n<\/body><\/html>\n<\/div>\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Projekt &#8211; Lista end-point\u2019\u00f3w REST i\/lub API<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dlaczego przed przyst\u0105pieniem do implementacji\/programowania systemu nale\u017cy ustali\u0107 end-point&#8217;y i\/lub API? Wypisanie takich element\u00f3w pozwoli nam zobaczy\u0107 szerszy kontekst, obraz tworzonego systemu. Co, to jest w og\u00f3le end-point? End-point jest, to punkt styku, komunikacji mi\u0119dzy r\u00f3\u017cnymi elementami oprogramowania i\/lub system\u00f3w.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Uwaga!<\/strong> Poni\u017cszy opis jest niewystarczaj\u0105cy, dodatkowy opis wybiega poza ten artyku\u0142. Nale\u017cy uzupe\u0142ni\u0107 wiedz\u0119 o takie elementy jak: 1. <a rel=\"noreferrer noopener\" href=\"https:\/\/rapidapi.com\/blog\/api-glossary\/endpoint\/\" target=\"_blank\">Nale\u017cy odr\u00f3\u017cni\u0107 end-point od API<\/a>, 2. Co to jest <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Representational_state_transfer\" target=\"_blank\">REST<\/a>? 3. Co to jest <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/API\" target=\"_blank\">API<\/a>? 3. Protok\u00f3\u0142 <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Hypertext_Transfer_Protocol\" target=\"_blank\">HTTP<\/a>. 4. Us\u0142ugi sieciowe &#8211; <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_service\">WebService<\/a>. 5. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_application\">Aplikacja Web<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">End-point powinien by\u0107 udokumentowany i dobrze znany osobom, kt\u00f3re z niego korzystaj\u0105. Jest, to komunikacja typu \u017c\u0105danie\/odpowied\u017a (request\/response), kt\u00f3ra odbywa si\u0119 za po\u015brednictwem adresu URL, pod kt\u00f3rym dost\u0119pna jest funkcjonalno\u015b\u0107 systemu. W wi\u0119kszo\u015bci przypadk\u00f3w jest, to komunikacja typu klient-serwer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dla aplikacji web z interfejsem u\u017cytkownika w postaci stron html b\u0119dzie, to zbi\u00f3r adres\u00f3w URL ze stronami do wy\u015bwietlenia u\u017cytkownikowi. Natomiast dla aplikacji REST b\u0119dzie, to zbi\u00f3r adres\u00f3w URL (konkretnie URI), kt\u00f3re zwracaj\u0105 dane mniej czytelne dla zwyk\u0142ego u\u017cytkownika, np. w formacie JSON. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aplikacja web z GUI s\u0142u\u017cy do komunikacji cz\u0142owiek-komputer, a aplikacja REST s\u0142u\u017cy do komunikacji komputer-komputer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Poni\u017csza tabela prezentuje adresy URL, pod kt\u00f3rymi b\u0119d\u0105 dost\u0119pne strony w ramach aplikacji.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Dzia\u0142anie<\/th><th>Web URL<\/th><th>HTTP Method<\/th><th>HTML Page<\/th><\/tr><\/thead><tbody><tr><td>Lista notatek<\/td><td>\/notes<\/td><td>GET<\/td><td>notes.html<\/td><\/tr><tr><td>Dodaj notatk\u0119<\/td><td>\/notes\/add<\/td><td>POST<\/td><td>manage-note.html<\/td><\/tr><tr><td>Szczeg\u00f3\u0142y notatki<\/td><td>\/notes\/details<\/td><td>GET<\/td><td>manage-note.html<\/td><\/tr><tr><td>Edycja notatki<\/td><td>\/notes\/edit<\/td><td>POST<\/td><td>manage-note.html<\/td><\/tr><tr><td>Usuni\u0119cie notatki<\/td><td>\/notes\/delete<\/td><td>POST<\/td><td>notes.html<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Lista adres\u00f3w URL dla stron HTML.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">    <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dlaczego u\u017cywam tylko metod GET i POST protoko\u0142u HTTP? Poniewa\u017c <a href=\"https:\/\/en.wikipedia.org\/wiki\/Form_(HTML)\" data-type=\"URL\" data-id=\"https:\/\/en.wikipedia.org\/wiki\/Form_(HTML)\" target=\"_blank\" rel=\"noreferrer noopener\">formularz HTML<\/a> obs\u0142uguje w\u0142a\u015bnie tylko te dwie metody GET i POST. Co mam na my\u015bli pisz\u0105c formularz HTML? Wizualnie jest, to zbi\u00f3r element\u00f3w HTML umo\u017cliwiaj\u0105cych wprowadzanie danych takich jak pole tekstowe, przycisk wysy\u0142aj\u0105cy dane, przyk\u0142adem mo\u017ce by\u0107 formularz logowania, zak\u0142adania konta lub umo\u017cliwiaj\u0105cy dodanie postu na Facebook. Technicznie umo\u017cliwia komunikacj\u0119, wysy\u0142anie wprowadzonych danych na serwer celem ich przetworzenia.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Poni\u017csza tabela prezentuje end-point&#8217;y zgodne z architektur\u0105 <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Representational_state_transfer\" target=\"_blank\">REST<\/a>, kt\u00f3ra dzia\u0142a w oparciu o <a rel=\"noreferrer noopener\" href=\"https:\/\/pl.wikipedia.org\/wiki\/Hypertext_Transfer_Protocol#Metody_HTTP\" target=\"_blank\">metody protoko\u0142u HTTP<\/a>, np.: GET, POST.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Dzia\u0142anie<\/th><th>REST<\/th><th>HTTP Method<\/th><\/tr><\/thead><tbody><tr><td>Lista notatek<\/td><td>\/api\/notes<\/td><td>GET<\/td><\/tr><tr><td>Dodaj notatk\u0119<\/td><td>\/api\/notes + (body\/payload)<\/td><td>POST<\/td><\/tr><tr><td>Szczeg\u00f3\u0142y notatki<\/td><td>\/api\/notes\/{id}<\/td><td>GET<\/td><\/tr><tr><td>Edycja notatki<\/td><td>\/api\/notes + (body\/payload)<\/td><td>PUT<\/td><\/tr><tr><td>Usuni\u0119cie notatki<\/td><td>\/api\/notes\/{id}<\/td><td>DELETE<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Lista end-point&#8217;\u00f3w REST API.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\"><strong>Implementacja<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Przyszed\u0142 czas na upragnion\u0105 implementacj\u0119, zanim do tego przejdziemy, kilka s\u0142\u00f3w wyja\u015bnienia. <em>Tak, tak zn\u00f3w odwlekamy implementacj\u0119, ale im wi\u0119cej czasu po\u015bwi\u0119cimy na analiz\u0119 i projekt tym wi\u0119cej b\u0142\u0119d\u00f3w, nieporozumie\u0144 unikniemy podczas implementacji.<\/em> Jak wida\u0107 sam proces implementacji jest poprzedzony s\u0142ownym opisem, kt\u00f3ry w tym przypadku sk\u0142ada si\u0119 z &#8220;tysi\u0105ca s\u0142\u00f3w&#8221;. Moim zdaniem pokazuje, to jak wiele element\u00f3w poprzedza sam proces pisania kodu \u017ar\u00f3d\u0142owego aplikacji.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Zawsze powtarzam, \u017ce zanim przyst\u0105pimy do kodowania musimy zrozumie\u0107, co tak na prawd\u0119 mamy do zakodowania. \u017beby zrozumie\u0107 tworzony system musimy zapyta\u0107, uzgodni\u0107 szczeg\u00f3\u0142y z osob\u0105 i\/lub firm\u0105, kt\u00f3ra zleca nam stworzenie systemu.<\/strong> Pozwoli, to nam unikn\u0105\u0107 wielu nieporozumie\u0144, nieprzyjemnych sytuacji oraz wielu godzin refaktorowania i\/lub przepisywania tworzonego systemu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Implementacj\u0119 wykonujemy w naszym ulubionym \u015brodowisku programistycznym np. <a rel=\"noreferrer noopener\" href=\"https:\/\/www.jetbrains.com\/idea\/\" target=\"_blank\">IntelliJ IDEA<\/a>. Maj\u0105c przygotowany diagram klas, po prostu tworzymy klasy oraz ich zawarto\u015b\u0107 zgodnie z elementami na diagramie. Dodajemy pola w klasie oraz metody. <em>W tym miejscu gor\u0105co zach\u0119cam do skorzystania z techniki <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Test-driven_development\" target=\"_blank\">TDD<\/a>, czyli najpierw piszemy klas\u0119 testow\u0105, a potem implementacj\u0119 tworzonej metody.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podsumowuj\u0105c, implementacja nawet najprostszego systemu polecam rozpocz\u0105\u0107 od analizy, nast\u0119pnie stworzy\u0107 projekt, a dopiero na samym ko\u0144cu zabra\u0107 si\u0119 za kodowanie, najlepiej zgodnie z <a rel=\"noreferrer noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Test-driven_development\" target=\"_blank\">TDD<\/a>. Powy\u017cszy przyk\u0142ad pozwala wyrobi\u0107 nam dobry nawyk, kt\u00f3ry zaowocuje w przysz\u0142o\u015bci.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zapraszam do regularnego odwiedzania mojej strony, b\u0119d\u0105 pojawia\u0107 si\u0119 kolejne artyku\u0142y oraz do kontaktu przez email kontakt(at)juniorjavadeveloper.pl.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aktualna oferta dost\u0119pna na <a rel=\"noreferrer noopener\" href=\"https:\/\/www.juniorjavadeveloper.pl\/en\/oferta\/\" target=\"_blank\">https:\/\/www.juniorjavadeveloper.pl\/oferta\/<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>W tym artykule postaram si\u0119 pokaza\u0107 jak unika\u0107 b\u0142\u0119du, kt\u00f3ry pope\u0142niaj\u0105 programi\u015bci podczas pisania kodu aplikacji, nawet tego najmniejszego i najprostszego kodu. B\u0142\u0119dem tym jest brak zastanowienia si\u0119, co tak na prawd\u0119 chcemy kodowa\u0107. Samemu nieraz pope\u0142ni\u0142em ten b\u0142\u0105d. Mo\u017cesz mi wierzy\u0107, albo i nie, ale nawet nad jednym, prostym fragmentem kodu mo\u017cna zmarnowa\u0107 wiele [&hellip;]<\/p>","protected":false},"author":1,"featured_media":1332,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_ppp_document_settings_meta":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[4,7],"tags":[],"class_list":["post-1238","post","type-post","status-publish","format-standard","has-post-thumbnail","category-bez-kategorii","category-poradnik"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.juniorjavadeveloper.pl\/wp-content\/uploads\/2020\/11\/stop_zanim-zaczniesz-pisac-kod_naglowek.jpg","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/posts\/1238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/comments?post=1238"}],"version-history":[{"count":62,"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/posts\/1238\/revisions"}],"predecessor-version":[{"id":3103,"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/posts\/1238\/revisions\/3103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/media\/1332"}],"wp:attachment":[{"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/media?parent=1238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/categories?post=1238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.juniorjavadeveloper.pl\/en\/wp-json\/wp\/v2\/tags?post=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}