Jak to działa

Starter REST

W tym miejscu przedstawiamy przegląd najważniejszych zagadnień z zakresu tworzenia aplikacji webowych z naciskiem położonym na wymianę danych. Jest to pakiet startowy, który ma za zadanie ugruntować Waszą wiedzę, zanim udacie się w kierunku konkretnych tematów Kursu Aplikacji Web.

REST, czyli Representational State Transfer

REST to styl, którego najważniejszym elementem w tworzeniu aplikacji webowych jest zasób (resource). Co może być zasobem? Tak naprawdę wszystko to, co w rzeczywistości definujemy jako obiekt. Może nim być, np. użytkownik (user), albo wydarzenie (event), albo dowolna inna reprezentacja podmiotu występującego w rzeczywistości. W naszej aplikacji także korzystamy z różnych zasobów, na przykład: element (item), kategoria elementu (item category), typ elementu (item type) oraz wiele innych, które bez problemu rozpoznacie podczas przeglądania kolejnych modułów aplikacji.

Drugim ważnym aspektem formuły REST jest zdefiniowanie sposobu dostępu do wspomnianych zasobów. W tym celu korzystamy z bezstanowego protokołu HTTP, który dostarcza kilka istotnych metod umożliwiających wykonywanie zdalnych operacji na zasobach, m.in GET, POST, PUT, DELETE . Zarówno o tym jak i o kilku dodatkowych sprawach pomówimy szerzej w kolejnym punkcie.

Tworzenie aplikacji webowej w pigułce

Naszym głównym celem jest budowa aplikacji webowej, ale zanim to zrobimy warto abyśmy rozpoczęli od zapoznania się z krótkim wstępem, który umożliwi przyjrzenie się całemu procesowi z "lotu ptaka".

Krok 1  Strona internetowa z kodem HTML w przeglądarce

Proces działania aplikacji rozpoczyna się w przeglądarce. Tak więc, po wpisaniu przez użytkownika adresu strony przeglądarka wysyła żądanie na serwer w celu uruchomieniu procesu przetwarzania danych. URL na jaki wysyłane jest żądanie może być zdefiniowany na różne sposoby:
  • Bezparametrowo:   http://localhost:8080/items
  • Z parametrem typu query param:   http://localhost:8080/items?amount=10
  • Z parametrem type path variable:   http://localhost:8080/items/1

Wysyłanie żądania bardzo często jest wykonywane także już po załadowaniu strony, podczas obsługi zdarzenia użytkownika (np. po kliknięciu w przycisk submit formularza albo podczas kliknięcia w link). W ten sposób punktem wyjścia dla użytkownika jest fragment HTML danego przycisku, formularza czy też innego komponentu, z którego nastąpi wygenerowanie zdarzenia.


Krok 2  Wykorzystanie kodu Javascript do wysłania żądania (requestu HTTP)

Po wykonaniu przez użytkownika akcji na danym komponencie następuje wykonanie kodu Javascript, który zwykle wstępnie przygotowuje dane przesyłane z komponentu HTML oraz uruchamia mechanizmy, których zadaniem jest przygotowanie i wysłanie requesta na serwer.   Krok 3

Wykonanie obsługi żądania HTTP odbywa się za pomocą kilku powszechnie znanych metod:

  • GET - Pobiera zasób
  • HEAD - Pobiera metadane o zasobie

    Metody HEAD posiada specyficzną własność. W trakcie jej użycia niedozwolone jest przekazywanie body żądania.

  • PUT - Przesyła dane w celu modyfikacji zasobu

    Metoda GET posiada pewną własność, co razem z metodą PUT czyni je wyjątkowymi. Obie metody są idempotentne. Oznacza to, że nawet kilkukrotne wykonanie tej samej metody dla identycznych danych przekazywanych w żądaniu doprowadzi do osiągnięcia tego samego rezultatu, np. pobranie zasobu metodą GET zawsze zwróci dokładnie taki sam zasób (o ile się nie zmienił po stronie źródła danych), a kilkukrotne wykonanie metody PUT zawsze pozostawi po sobie zasób z takimi samymi danymi jak po pierwszym wykonaniu.

  • POST - Przesyła dane w celu stworzenia zasobu

    Metoda jest co prawda używana do tworzenia zasobu ale w specyficznych przypadkach nic nie stoi na przeszkodzie aby służyła również do jego modyfikacji. Pamiętajmy jednak, że z założenia metoda ta nie zapewnia nam idempotentności. Stąd jeśli potrzebujemy wykonać modyfikację danych, która po każdym wykonaniu tego samego żądania ma zmienić stan zasobu, to wówczas POST nada się do tego doskonale.

  • DELETE - Umożliwia usunięcie zasobu

    Warto jeszcze wspomnieć słowo na temat metody DELETE. Aby ją wykonać wystarczy przekazać id obiektu, który chcemy usunąć. Nie potrzebuje ona niczego zwracać, a już w szególności informacji o rezultacie operacji, ponieważ w razie niepowodzenia wyrzucamy wyjątek i ustawiamy odpowiedni status odpowiedzi (np. 404 - NOT FOUND).


Krok 4  Mapowanie zawartości żądania do obiektu Java

Poza przesyłaniem danych w ramach URL, dane możemy przesyłać również w body żądania. Wówczas są one przesyłane w formacie zgodnym z określonym typem zawartości (content-type). Lista dostępnych typów zawartości jest długa, ale najczęściej używane (w trakcie przesyłania żądania) są:

  • Format JSON:   application/json
  • Format obiektu w wielu częściach, np. plik użytkownika:   multipart

W przypadku aplikacji webowych, na samym końcu po otrzymaniu żądania przez serwer, następuje mapowanie pól z requestu na pola w obiekcie. My korzystamy w tutorialach ze Springa więc w kodzie przygotowanym przez nas wydarzy się to automatycznie dzięki mechanizmom frameworka (piszemy o tym w Kursie Springa w rozdziale Spring MVC - Metody obslugi zadan HTTP (Handler Methods), a dokładniej - w punkcie opisującym adnotację @RequestBody).


Krok 5  Przyjęcie danych przez serwer i rozpoczęcie przetwarzania

Po wykonaniu mapowania danych z żądania serwer rozpoczyna uruchamianie mechanizmów do obsługi tych danych, w szczególności ich przetworzenia (używamy do tego osobnej warstwy kodu Krok 6 ), co zwykle kończy się wykonaniem operacji typu CRUD:
  • Create - zapis danych
  • Read - odczyt danych
  • Update - modyfikacja danych
  • Delete - usunięcie danych


Krok 7  Odczyt lub zapis w źródle danych

Powyższe operacje są wykonywane na dowolnym źródle danych. Najczęściej jest to baza danych ale może to być też zwykły plik bądź usługa danych taka jak webservice (typu REST lub SOAP). Pamiętajmy, że przetwarzanie danych może być także związane tylko pośrednio z operacjami CRUD, np. odczyt danych może nastąpić na początku procesu, a dalej odbędzie się ich przetworzenie za pomocą dowolnego algorytmu i dopiero tak przygotowane dane będą gotowe do wykorzystania. Kombinacje są tutaj dowolne i zależą od wymagań biznesowych.


Krok 8  Zakończenie przetwarzania danych

Wynikiem przetworzenia danych może być tylko finalizacja wykonania konkretnych algorytmów albo też, dodatkowo, zwrócenie danych przez warstwę przetwarzającą do warstwy wyżej, w celu dalszego ich wykorzystania (najczęściej wysłania ich w ramach odpowiedzi).


Krok 9  Wysłanie odpowiedzi do przeglądarki

Po przetworzeniu danych proces wraca ze wspomnianą odpowiedzią (HTTP response) z serwera do przeglądarki. Pamiętajmy, że w zależności od typu operacji (algorytmów przetwarzających) wykonanej na serwerze odpowiedź może zawierać dane lub nie. Przykładowo gdy wykonujemy metodę GET w celu pobrania danych, wówczas w odpowiedzi dostaniemy właśnie te dane. W przypadku gdy tworzymy nowy zasób wykonując metodę POST otrzymamy jego id, a gdy wykonamy metodę DELETE odpowiedź będzie pusta. Jeśli dane są przekazywane, to zostaną one przepisane z obiektu do odpowiedzi HTTP. Krok 10

Każda odpowiedź HTTP zawiera status odpowiedzi. Jest to uniwersalny kod, który zawsze oznacza coś konkretnego. Kodów jest wiele, ale najpopularniejsze i najczęściej używane to:
  • 200 (OK) - operacja na zasobie przebiegła pomyślnie
  • 201 (Created) - utworzono nowy zasób (np. po wywołaniu metody POST)
  • 204 (No content) - serwer wykonał operacje pomyślnie, ale nie zwraca danych
  • 304 (Not modified) - zasób nie podlegał zmianie według warunku określonego w żądaniu
  • 400 (Bad Request) - zapytanie o zasób zostało błędnie skonfigurowane (np. błędnie podano parametru w URL)
  • 401 (Unauthorized) - nieautoryzowany dostęp do zasobu (wymaga uwierzytelnienia)
  • 404 (Not Found) - zasób nie został odnaleziony
  • 405 (Method Not Allowed) - podana metoda (GET, POST, etc.) nie jest dozwolna dla danego zasobu
  • 500 (Internal Server Error) - wewnętrzny błąd serwera, niespodziewane zachwianie poprawnego wykonania procesu

Podobnie jak w przypadku żądania, tak samo w przypadku odpowiedzi ustawiamy typ zawartości. Najczęściej spotykanymi typami są:
  • Format JSON:   application/json
  • Format danych graficznych:   image/png , image/jpeg
  • Format HTML:   text/html
  • Format tekstu:   text/plain
  • Format arkusza stylów:   text/css

Krok 11  Odebranie odpowiedzi w przeglądarce

Kolejnym etapem po przesłaniu odpowiedzi jest jej odebranie w przeglądarce za pomocą kodu Javascript (w dedykowanej warstwie), a następnie udostępnienie tej odpowiedzi w celu przygotowania widoku.


Krok 12  Formatowanie i prezentacja

Na samym końcu, po odebraniu danych, są one odpowiednio formatowanie i pokazywane użytkownikowi w przeglądarce przy pomocy zdefiniowanego layoutu.

Do tej pory pokazaliśmy w jaki sposób wygląda przepływ danych w typowym procesie w stylu REST, działającym w ramach aplikacji webowej. Doskonale widać tutaj, że wszystkie operacje są ukierunkowane przede wszystkich na zasób, który można dowolnie tworzyć, modyfikować oraz usuwać i to w prosty sposób, przy użyciu powszechnie znanych metod HTTP.

Tworzenie aplikacji webowej na bazie Springa i AngularJS

W tym miejscu pójdźmy jeszcze dalej i zobaczmy jak powyższy proces będzie wyglądał w przypadku użycia frameworków Spring i AngularJS. Kolejno przedstawione kroki mają swoje numery odpowiadające przedstawionym wyżej informacjom i są uzupełnione o nazwy plików, których konwencja nazewnicza opiera się o słowo klucz appa (appa.html, appa-controller.js, appa-factory.js itd). Dodatkowo opisy są tak przygotowane aby określić dwa miejsca: rozpoczęcie funkcji/metody oraz wywołanie funkcji/metody z kolejnego kroku. Między innymi w taki właśnie sposób wspieramy opis zagadnień w tutorialach. Z tą różnicą, że w ich przypadku zamiast wspomnianego słowa appa, wprowadzone są faktycznie istniejące nazwy plików oraz metod, a zamiast teoretycznej zawartości pojawiają się fragmenty kodu.

Instrukcja uruchomienia i obsługi

Każdy moduł Kursu Aplikacji Web zawiera tutorial wraz z kodem, które razem są spakowane do pliku zip. Po pobraniu tak przygotowanej paczki wystarczy uruchomić skrypt runIt.bat (windows) lub runIt.sh (linux). Wtedy moduł uruchomi się w postaci niezależnie działającej aplikacji webowej, do której dostęp można uzyskać z poziomu przeglądarki pod adresem http://localhost:8080. Aby wszystko poszło zgodnie z planem prosimy o zapoznanie się najpierw z instrukcją:



To już wszystko co chcieliśmy dla Was przygotować w ramach tego startera. Gorąco zapraszamy do korzystania z naszej aplikacji oraz do pobierania tutoriali dedykowanych zagadnieniom, dzięki którym nauczycie się programować profesjonalne aplikacje webowe.


Stale się rozwijamy, a więc bądź na bieżąco!
Na ten adres będziemy przesyłać informacje o ważniejszych aktualizacjach, a także o nowych materiałach pojawiających się na stronie.
Polub nas na Facebooku:
Nasi partnerzy:
Javappa to również profesjonalne usługi programistyczne oparte o technologie JAVA. Jeśli chesz nawiązać z nami kontakt w celu uzyskania doradztwa bądź stworzenia aplikacji webowej powinieneś poznać nasze doświadczenia.
Kliknij O nas .