Szybka akcja #2 – AngularJS

W ramach Szybka akcja #1 – Play Framework napisane zostało REST API do aplikacji Hobusu. Mając stworzoną logikę po stronie serwera przyszedł czas na realizację części frontendowej.

Do tej pory wszystkie projekty realizowałem na bardzo podobnym stosie technologicznym – Bootstrap + jQuery + zewnętrzne biblioteki JavaScript. Miałem również chwilową przygodę z MustacheJS. Projekt Hobusu chciałem zrealizować jako Single Page Application, więc pisanie funkcjonalności z wcześniej wspomnianymi technologiami zajęłoby dużo czasu i wymagało sporo rzeźbienia. Wybór padł na framework AngularJS.

Decyzja o użyciu Angulara nie była przypadkowa. Pierwszy raz widziałem go w akcji podczas Pekatonu, gdzie Bartek z prędkością światła dodawał nowe funkcjonalności i zmieniał działanie tych istniejących. Zafascynowany tą technologią zakupiłem książkę „AngularJS. Pierwsze Kroki”. Po jej przeczytaniu moja ekscytacja tym narzędziem sięgnęła jeszcze wyższego poziomu.

Napotkane problemy

Przed realizacją kolejnej części aplikacji Hobusu musiałem przypomnieć sobie podstawowe zasady jego działania oraz sposoby wykonywania najprostszych rzeczy. Na samym początku zaimplementowałem formularz rejestracji oraz logowania. O ile z obsługą formularzy nie miałem problemu, o tyle przechowywanie informacji o zalogowanym użytkowniku okazało się zadaniem nieco bardziej skomplikowanym. Z pomocą przyszła mi oficjalna dokumentacja, a dokładniej rozdział o obiekcie $cookies.

Autoryzacja

API po stronie serwera wymagało, aby każde żądanie, które wymaga autoryzacji posiadało w nagłówku „Authorization” token, który został przypisany użytkownikowi zaraz po zalogowaniu. Po kilku minutach poszukiwań zadanie okazało się bardzo proste, ponieważ wystarczyło zarejestrować AuthorizationFactory, a następnie skonfigurować nowy interceptor w obiekcie $httpProvider.

Niestety podczas wykonywania prostych asynchronicznych zapytań wystąpił problem z CORS. Wymagane było wprowadzenie małych zmian w konfiguracji API aplikacji Hobusu (konfiguracja frameworka Play).

Żądania asynchroniczne

W trakcie realizacji kolejnych funkcjonalności natknąłem się na następny problem związany z przechowywaniem informacji o zalogowanym użytkowniku oraz zapytaniami asynchronicznymi. Mianowicie, jeżeli po stronie serwera token stracił ważność, a nie został zaktualizowany po stronie frontu, to każde zapytanie kończyło się statusem 401. Po zrozumieniu problemu zacząłem szukać odpowiedniego rozwiązania. Okazało się, że wystarczy dodać kilka linijek do wspomnianego wcześniej AuthorizationFactory (sekcja responseError), aby kompleksowo zapewnić obsługę takiej sytuacji – jeżeli odpowiedzią jest kod 401 to token jest usuwany, a użytkownik proszony jest o ponowne zalogowanie.

Wykresy

Aplikacja Hobusu z założenia ma być aplikacją, która bardzo szybko pozwala na analizę wydatków. Jedną z najlepszych metod prezentacji danych, które można agregować są wykresy. Tutaj z pomocą przyszła biblioteka Angular Chart, która działa już od momentu dołączenia wymaganych plików – 0 konfiguracji (poza wstrzyknięciem obiektu). Duża ilość przykładów pozwala na błyskawiczne zrozumienie zasad tworzenia wykresów dzięki czemu jesteśmy w stanie szybko dostarczać gotowe funkcjonalności.

Podsumowanie

AngularJS jest pierwszym frameworkiem dla języka JavaScript, z którym miałem do czynienia. Po kilkunastu godzinach pracy mogę stwierdzić, że jego niewątpliwymi plusami są:

  • szczegółowa dokumentacja
  • szybkość konfiguracji
  • duża ilość bibliotek

W porównaniu do wcześniej stosowanych przeze mnie metod/stosów/narzędzi AngularJS wypada bardzo pozytywnie. Pomimo nieznajomości narzędzia praca była stosunkowo szybka i przyjemna. W przyszłości na pewno będę wykorzystywał AngularJS w swoich projektach.

Kod aplikacji frontendowej dostępny jest pod adresem mateuszbrycki/hobusu-frontend.

Przydatne linki

  1. Dokumentacja AngularJS – https://docs.angularjs.org/api

You may also like