czwartek, 26 lipca 2018

Stare, dobre serwlety

Skoro udało mi się na platformie Heroku wdrożyć i uruchomić aplikację typu MEAN Stack, czemu by nie zrobić tego samego z aplikacją Java Servlets? Taka myśl mi zaświtała, gdy platforma OpenShift zmieniła sposób dostępu do swoich usług i starą wersję diabli wzięli. Bo pewnie nie wiecie, ale parę lat temu dokonałem tego karkołomnego czynu i swoją javową apkę uruchomiłem na OpenShift. Działała pięknie, aż pewnego dnia platforma została upgrade-owana i apka poszła się... przestała działać, mówiąc oględnie. Żal było tej całej pracy i włożonego wysiłku, a przede wszystkim praktycznego rozwiązania w tej jakże klarownej i wspaniałej technologii, więc szukałem sposobu na udostępnienie mojego projektu.

Nadzieja pojawiła się w momencie, gdy znalazłem platformę wdrożeniową Heroku. Po sukcesie z aplikacją MEAN Stack postanowiłem powtórzyć scenariusz z apką javową. Jednak zdecydowałem, że nie będę tak po prostu przenosił projektu na nową platformę, a zamiast tego przepiszę go. Dlaczego? Z dwóch powodów. Po pierwsze, gdy będę pisał kod od nowa, odświeżę sobie wiedzę na temat technologii Java Servlets. Bo po tych paru latach sporo już zapomniałem. Nie zajmowałem się tą technologią, aplikacja sobie działała, a ja z niej tylko korzystałem. Kodu nie rozwijałem, nawet w ogóle do niego nie zaglądałem. Po drugie, nie dałoby się tak po prostu wgrać całego projektu, licząc na to, że aplikacja ruszy. Zbyt duża była różnica w infrastrukturze - inne komponenty projektu, inna metoda łączenia się z bazą danych. Trzeba by było dużo przerabiać, a tego bardzo nie lubię - nawet we własnym kodzie. Już wolę napisać projekt od początku, tak aby był dostosowany do nowej platformy i na niej działał.

Okazało się, że wdrożenie na Heroku przebiega o wiele łatwiej i przyjemniej niż na OpenShift. Niemniej jednak stworzyłem prosty instruktaż takiego wdrożenia, aby ktoś mógł z niego skorzystać, a i ja sam mógłbym się nim kiedyś posłużyć, gdy znowu zapomnę, jak i co się robiło... No cóż, pamięć to z pewnością nie jest moja mocna strona. :-)

Póki co, apka działa i można ją znaleźć tu: https://java-blog-cms.herokuapp.com.

sobota, 23 czerwca 2018

Apka Node.JS na platformie Heroku

Zabawy z technologią MEAN Stack ciąg dalszy. Tym razem parę słów na temat wdrożenia. Znalazłem doskonałą platformę stworzoną właśnie do takich zadań - Heroku. Mamy tu możliwość uruchamiania aplikacji różnego typu, w tym Node.JS.

Istnieje kilka metod przesyłania kodu aplikacji na platformę: za pomocą Heroku Gita, za pomocą importu repozytorium z GitHuba, za pomocą importu z Dropboxa oraz za pomocą Container Registry. Ja wybrałem pierwszą metodę. Polega na wysłaniu kodu (git push) ze swego lokalnego repozytorium do repozytorium Gita na platformie Heroku.

Aplikacja, którą napisałem, potrzebuje bazy. Bazę mongoDB tworzę i przechowuję z kolei na platformie mLab. Gdy baza jest gotowa, tworzymy dla niej użytkownika. Dostęp do bazy uzyskujemy poprzez connection string, który zawiera nazwę hosta, numer portu, nazwę bazy, nazwę użytkownika i hasło.

Kod naszej aplikacji musi zatem posługiwać się takim stringiem. Jednak aby tych informacji nie przechowywać wprost w kodzie aplikacji - który jest przecież trzymany i potem przeglądany w repozytorium Gita - zapisałem je w zmiennych systemowych, które się tworzy z poziomu platformy Heroku.

W efekcie mamy w pełni działającą aplikację w chmurze. Wszystko odbywa się prosto, szybko i wygodnie. Do uruchomienia nie potrzebujemy ani serwera, ani hostingu, ani nawet własnej domeny. Opisane powyżej czynności ująłem w prostym tutorialu obrazkowym, który zintegrowałem z działającą aplikacją - zapraszam do zapoznania się: https://mean-stack-web.herokuapp.com.

wtorek, 6 lutego 2018

MEAN Stack

Od jakiegoś czasu interesuje mnie temat MEAN Stack-a, czyli stosu technologicznego MongoDB + Express.js + Angular + Node.js. Chciałem bliżej zapoznać się z tymi groźnie brzmiącymi terminami. Angulara już co prawda poznałem - napisałem nawet za jego pomocą apkę (Projekt Angular) - ale pozostałe elementy były dla mnie obce.

Zacznijmy od bazy danych. Przez całe życie - no, może przez pół - używałem relacyjnych baz danych, a konkretnie SQL Server, MySQL. Natura tych baz zapewniała mi z jednej strony elastyczność w projektowaniu modelu aplikacji, a z drugiej dawała możliwość tworzenia złożonych zapytań, dzięki którym dostawałem potrzebne dane. Te cechy sprawiały, że nie wyobrażałem sobie stosowania w aplikacji bazy NoSQL. Ale czy na pewno? Może baza nierelacyjna podoła takiemu zadaniu? No i chciałem to sprawdzić w praktyce.

Stworzyłem projekt aplikacji opartej na bazie MongoDB. Potrzebowałem jeszcze hostingu, platformy, na której to wdrożę. Skorzystałem z OpenShift, który oferuje postawienie aplikacji Node.js na darmowym koncie. A dlaczego Node.js? Bo chciałem pobawić się JavaScriptem na backendzie. Chciałem zobaczyć, jak JavaScript sprawdza się nie tylko w przeglądarkach, ale również na serwerach. No i jak dla mnie bomba! Rewelacja! Mam ulubiony język programowania w każdej warstwie aplikacji! A jeśli dodam, że w całej aplikacji używamy genialnego formatu przesyłania danych JSON, zaczynam czuć się jak w domu!

Ogromnym ułatwieniem przy tworzeniu aplikacji są frameworki. Część serwerową bierze na siebie Express.js. Zapewnia routing, obsługę requestów, komunikację z bazą danych, wysyłanie danych i komunikatów do przeglądarki użytkownika. A wszystko w JavaScript i JSON! Część kliencką bierze na siebie Angular. Zapewnia powiązanie danych z elementami interfejsu, manipulację na widokach, zarządzanie szablonami HTML.

Gdy zebrałem to wszystko do kupy, powstała zgrabna aplikacja-demo typu ToDoList, którą możecie obejrzeć pod linkiem MEAN Stack Auth App, i której kod znajdziecie na GitHubie pod linkiem MEAN Stack App.

czwartek, 27 kwietnia 2017

Edytor map

W poprzednim artykule (I znowu gierka) napisałem, że do gry można dodawać własne figury. Należy w tym celu napisać w konsoli coś takiego:

shapes.push({ 
  map: [[0, 1, 1], [0, 1, 0], [1, 1, 0]], 
  color: '#0080c0' 
});
Jest to bardzo niewygodny sposób, więc pomyślałem sobie, że warto by było stworzyć narzędzie ułatwiające tworzenie nowych figur. Wynikiem tych przemyśleń stał się tzw. Edytor map, w którym definiowanie własnych figur odbywa się w sposób wizualny.

W edytorze widzimy mapy wszystkich figur gry, co jest ogromnym ułatwieniem dla gracza-projektanta. Już na pierwszy rzut oka widać, że największą zaletą edytora jest wygoda obsługi. Ale chyba najważniejszą jego cechą jest sprawdzanie, czy figura, którą stworzyliśmy, nie występuje już w kolekcji, i w takiej sytuacji poinformowanie nas o tym i niedopuszczenie do jej dodania. Również podczas edytowania map z kolekcji odbywa się takie sprawdzanie. A ponieważ figury mogą się podczas gry obracać, kontrola powtarzalności uwzględnia położenie mapy w każdym z czterech kierunków.

Oczywiście poza dodawaniem figur do kolekcji możemy je też usuwać. Co prawda możliwe to było również z konsoli poprzez wpisanie polecenia:

shapes.splice(3, 1);
gdzie pierwszy parametr oznacza indeks w kolekcji liczony od zera, a drugi - ilość usuwanych elementów. Ale działając w ten sposób nie wiedzieliśmy, która figura zostanie usunięta. A posługując się edytorem, widzimy dokładnie, którą figurę usuwamy.

Kolejną możliwością, już bardziej estetyczną, jest zmiana kolorów naszych figur - zarówno tych z kolekcji, jak i dodawanej.

Bawiąc się w ten sposób figurami możemy dojść do wniosku, że warto by było zachować naszą pracę, tak aby przy kolejnym uruchomieniu gry zestaw pieczołowicie przygotowanych przez nas figur nie przepadł. Użyłem do tego mechanizmu LocalStorage. Podczas uruchamiania gra sprawdza, czy w LocalStorage istnieje zapisany przez nas zestaw, i jeśli istnieje, ładuje go zastępując zestaw "fabryczny".

Oceńcie zresztą sami, czy warto było trudzić się nad takim rozwiązaniem. A przy okazji rozerwijcie się, grając w Tetrisa własnymi klockami. Zapraszam serdecznie: http://angular-cms.pl/page/21

poniedziałek, 24 kwietnia 2017

I znowu gierka

Tak mi się spodobało pisanie w Java Scripcie, że trzasnąłem następną gierkę. Jest to znana wszystkim układanka Tetris. Gra jest osadzona na podstronie mojego CMS-a, podobnie zresztą jak poprzednia gra, Snake. Udało mi się uzyskać w miarę zgrabny kod, z którego jestem całkiem zadowolony. Aczkolwiek jest jedna rzecz, do której bym mógł się przyczepić - algorytm obracania figur. Bazuje on na 2-wymiarowych macierzach 3x3 i gdybym chciał w przyszłości dodać figury o większych rozmiarach, algorytm należałoby przerobić na bardziej uniwersalny, obsługujący figury dowolnej wielkości. Dało mi to do myślenia i właśnie się nad tym głęboko zastanawiam... Może coś wymyślę, a tymczasem zapraszam do zagrania on-line: http://angular-cms.pl/page/21

PS: Już wymyśliłem - wystarczy zwykła transpozycja kolumn i wierszy w odpowiedniej kolejności.

Obrót w lewo:

for (i = 0; i < this.size; i++) {
  for (j = 0; j < this.size; j++) {
    this.shape.map[i][j] = map[this.size - j - 1][i];
  }
}
Obrót w prawo:
for (i = 0; i < this.size; i++) {
  for (j = 0; j < this.size; j++) {
    this.shape.map[i][j] = map[j][this.size - i - 1];
  }
}
gdzie map[][] jest mapą figury przed transformacją.

PS: Można tworzyć własne figury i je dodawać do puli klocków - wystarczy wpisać w konsoli coś takiego, jak na przykład:

shapes.push({ map: [[1, 1, 1, 1, 0], 
                    [1, 0, 0, 0, 0], 
                    [1, 1, 1, 0, 0], 
                    [1, 0, 0, 0, 0], 
                    [1, 1, 1, 1, 1]], 
              color: 'brown' 
});

środa, 12 kwietnia 2017

Wykresy w Angularze

Apka w Angularze aż się prosiła, aby dodać do niej wykresy. Sprawdziłyby się idealnie jako prezentacja statystyk odwiedzin. Należało więc rozejrzeć się za odpowiednim komponentem. Wybór był oczywisty - Angular Chart. W końcu nie na darmo ktoś napisał bibliotekę przeznaczoną do takich rzeczy. Pobrałem, dołączyłem do projektu, przetworzyłem dane o statystykach apki odpowiednio do wymagań komponentu, osadziłem w widoku i wyszło bardzo zgrabnie.

piątek, 24 lutego 2017

Paginator

Wreszcie zrobiłem paginację w Angularze. A nie było łatwo. Stworzyłem komponent "Paginator", z którego mogłyby korzystać wszystkie moduły aplikacji. Wystarczyło w nich załadować ów komponent metodą wstrzyknięcia zależności (fachowo nazywa się to "Dependency Injection"). No i działało, nie było z tym problemu. Do zainicjowania komponent potrzebował pewnych informacji - liczebności tabeli, z której pobierał wiersze, stałej wartości ilości wierszy na stronę, stałej ilości maksymalnej ilości przycisków z numeracją (po przekroczeniu której pojawia się wielokropek w środku paginatora). Tych wszystkich inicjalizacyjnych danych dostarczał serwis komponentu. Lista się wyświetlała, pod nią paginator i wszystko działało jak należy.

Ale szybko zauważyłem, że liczba wierszy na stronę nie może być jednakowa dla wszystkich modułów. Należało uzależnić ją od modułu. Wobec tego do ustawień aplikacji dołożyłem klucz w postaci obiektu JSON, w którym podaję, ile linii ma przypadać na który moduł. Inicjalizator paginatora odczytywał klucz, odnajdywał wartość dla aktualnie uruchamianego modułu i gotowe. Prosto i elegancko.

Prawdziwy jednak problem pojawił się, gdy uświadomiłem sobie, że nie wystarczy odpowiednio zainicjować paginator na początku. Podczas działania modułu trzeba jeszcze nim dynamicznie zarządzać! No bo przecież wyświetlane listy też są dynamiczne - może na nich przybywać pozycji, gdy tworzymy nowe elementy, np. strony, obrazki galerii. Może też ubywać, gdy kasujemy. Paginator musi za każdym razem uwzględniać zmieniającą się liczebność list! Ktoś powie: co za problem? Dopisać do komponentu metodę, która aktualizuje paginator. Tak, to oczywiste. Ale trzeba jeszcze zaktualizować tzw. $scope paginatora, który jest powiązany z wyświetlanymi pod listą kontrolkami. A to już nie takie proste. Ale znalazłem rozwiązanie - genialna metoda $watch, którą dostarcza framework. No i problem rozwiązany! Pozostaje tylko cieszyć się nową kontrolką.