Stworzenie części frontendowej poszło mi zaskakująco gładko. Link do źródła projektu :)

Google mało pomocne

Niestety szukając pomocy w google natrafiałem często na odpowiedzi dotyczące AngularaJS, który z Angularem 2/4 nie ma praktycznie nic wspólnego. Nie do końca rozumiem twórców którzy całkowicie przebudowując framework jedyne co zrobili z nazwą to usunęli z niej "JS". Dwójka sugeruje kontynuację a to jednak całkiem co innego. Możliwe, że chodziło o rozpoznawalność marki, AngularJS był bardzo popularny z tego co czytałem w internecie. Zazwyczaj wpisanie "angular 2 {problem}" pomagało, ale czasami, generalnie bardzo rzadko, rozwiązania z dwójki nie działały w wersji czwartej. Wsparcie społeczności dla najnowszej wersji z racji młodego wieku jest słabe.

Typescript

Typescript to całkiem fajny język programowania, który jest nadzbiorem JavaScriptu i to do niego się kompiluje. Ma opcjonalne typy, normalne klasy i interfejsy (chociaż czytałem, że to tylko lukier składniowy). Tak czy inaczej przejście z JavaScriptu na TypeScript to duży powiew normalności. Zwłaszcza dla ludzi, którzy wcześniej programowali w Javie czy C#. W idealnym świecie JavaScript pełniłby role pseudo bytecodu do którego kompilują się inne języki programowania, ale wiem, że to tylko czcze marzenia. Na szczęście JS ostatnimi czasy mocno się ogarnia, jego ekosystem bardzo dynamicznie się rozwija a jakość narzędzi jest coraz wyższa. Ciężko jednak za tym wszystkim nadążyć. Zwłaszcza dla mnie, świeżaka, który wcześniej miał do czynienia z przestarzałym JSem oraz JQuery i nagle wskakuje do nowoczesnego ekosystemu oraz stara się wykorzystać możliwości, które dają nowe edycje ECMAScriptu (JS jest implementacją ECMAScripu). Po początkowym negatywnym szoku wywołanym przytłoczeniem powoli oswajam się z sytuacją.

Angular

Na początku trochę się uczyłem Vue.js którego do teraz wspominam bardzo dobrze. To prosty, przyjemny i minimalistyczny framework, który łatwo wstrzyknąć do istniejącego projektu. Jednak patrząc na jego popularność na naszym rynku i po argumentach kolegi z byłej pracy zdecydowałem się na naukę Angulara. Początki były ciężkie ponieważ Angular to kompleksowy framework z własnymi mocno abstrakcyjnymi rozwiązaniami. Trzeba się do niego przyzwyczaić i oswoić z pewnymi rzeczami, ale coraz bardziej go doceniam.

Generalnie idea polega na rozbiciu całej logiki aplikacji na reużywalne komponenty, które powinno się traktować trochę jak klocki lego. Do komunikacji między nimi, najczęściej ojcem i dzieckiem wykorzystuje się 'propsy' ( z góry na dół ) oraz wysyłanie sygnałów ( przekazywanie danych z dziecka do rodzica ). Co ciekawe można też wykorzystać 'Serwisy' czyli obiekty które zostają wstrzyknięte do komponentów i współdzielą dane między nimi. Z mojego nikłego doświadczenia wynika, że Serwisy są przyjemniejsze i prostsze do zaimplementowania, ale jestem dopiero na początku drogi i ciężko mi wyrokować.

Implementacja

Rozbiłem wszystko na dwa komponenty. Admin zajmuje się obsługą logowania, dodawaniem oraz usuwaniem tagów. Tagger łączy się regularnie z backendem w celu pobrania aktualnych danych oraz prezentuje je w formie responsywnej tabeli. Dodane przez admina tagi można ukrywać/pokazywać klikając w przyciski z odpowiednią nazwą.

Napotkałem tak naprawdę dwa problemy w trakcie programowania. Pierwszy polegał na znalezieniu natywnego sposobu by ustawić regularne interwały w których zostaną pobrane dane z backendu, tutaj po prostu pomogło google. Drugi problem polegał na tym, że czasami Angular nie aktualizował DOMu w przypadku zmiany zawartości listy. Tutaj pomogła mi poniższa składnia:

this.tagNameList = this.tagNameList.filter(item => item !== value);

AJAX

Przykładowa metoda:

authSubmit() {
    this.http.post(AppSettings.API + 'admin/', { 'pass': this.passInput }).map(
      response => response.json()
    ).subscribe(data => {
      if (data === true) {
        localStorage.setItem('pass', this.passInput);
        this.isAuthorized = true;
        this.getTagNameList();
      } else {
        alert('Złe hasło');
      }
    });
  }

Wykorzystuję angularową klasę Http w której definiuję metodę zapytania (POST), podaję adres do API (AppSettings.API + 'admin/') oraz dane do przekazania w postaci słownika. Potem informuję framework, że odpowiedź będzie podana w postaci JSONa i należy ją odpowiednio przekonwertować na typ natywny (response => response.json()). subscribe to odpowiednik wykonaj w angularze i to w niej definiuje zachowanie po otrzymaniu zapytania, zmienna data przechowuje odpowiedź.

Wyświetlanie tabeli

Wykonuję regularne zapytania do API a w odpowiedzi dostaję słownik, którego kluczami są nazwy tagów a wartościami listy liczników. Oprócz tego definiuję trzy listy - pierwsza z nazwami wykluczonych tagów, druga z nazwami aktualnych tagów, a trzecia zawierająca wykluczone oraz aktualne tagi (stworzona w celu wyświetlania przycisków do aktywacji/dezaktywacji). W templatkach robię podwójnego fora, pierwszy wyświetla nazwę tagów, drugi wartości. To tyle.

Podsumowanie

Frajda! Jednak to dopiero początek mojej drogi w opanowaniu nowoczesnych technologi frontendowch. Nie było aż tak źle jak myślałem.. Aktualnie przerabiam kompleksowy kurs Angulara i już widzę wiele rzeczy które mogłem zrobić inaczej, lepiej. Ten projekt to już zamknięta księga, miał być jednostrzałem, rozgrzewką i taką rolę doskonale wypełnił. Mam w głowie masę pomysłów jak wykorzystać nowo zdobyte umiejętności do zrealizowania ambitniejszych i bardziej użytecznych projektów :)

---

Jeśli ci się podobało i chcesz więcej to upvote i dodanie mnie do obserwowanych zawsze będzie dodatkową zachętą do pracy 😉