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: https://master.d1zjxkgl40pyw5.amplifyapp.com

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ą.

sobota, 28 stycznia 2017

Nowy slajder

Zwykle na swoich stronach pokazuję zrzuty ekranu gotowej aplikacji. Można to zrobić w najprostszy sposób - umieszczając obrazki na stronie. Można też użyć innej metody, pozwalającej na uzyskanie przyjemnego dla oka efektu - wykorzystać gotowy slajder, jakich jest pełno w internecie. Z kilku takich slajderów sam już korzystałem. Ale ostatnio coś mnie naszło, usiadłem do komputera i napisałem własny slajder - tak dla sportu. A może z nudów... W każdym razie wyszło coś takiego:

No i czy nie fajny? :-)

środa, 23 listopada 2016

System zarządzania treścią i nie tylko...

... bo także układem strony, wyglądem i zachowaniem. Otóż mój CMS umożliwia nie tylko szybką aktualizację treści na stronach - a więc tworzenie nowych stron i ich edycję, ale również modyfikację szablonu (szkieletu strony), ostylowania (CSS), a ostatnio nawet działania (JS). A to wszystko dzięki dodaniu edytora skryptów.

Możemy z poziomu panelu administratora pisać dowolne skrypty, które już w momencie zapisania zaczynają działać. O ile nie mają błędów. :) A gdy pójdzie coś nie tak, zawsze można przywrócić skrypty "fabryczne".

URL: http://swoja-strona.eu

piątek, 23 września 2016

Gra jako podstrona serwisu

A dlaczego nie?! Co się będziemy ograniczać! Tak więc jedną z podstron mojego najnowszego CMS-a jest gra zręcznościowa "Snake". Wystarczy wejść i można od razu grać. Grę można obsługiwać zarówno myszką (dotykowo na tabletach), jak i klawiaturą (na stacjonarnych kompach).

Pomysł był taki, aby przepisać grę, którą kiedyś napisałem w wersji desktopowej (na Windows), na wersję webową, tak aby nie trzeba jej było do uruchomienia ściągać. Ale w praktyce napisałem ją od nowa - tak było łatwiej. I przyjemniej!

Gra jest dostępna pod adresem: http://angular-cms.pl/page/13

wtorek, 31 maja 2016

Projekt Angular

Przyszedł czas na zaprzyjaźnienie się z front-endem. Dotychczas cały wysiłek wkładałem w backend, bo tam leżała cała logika aplikacji. Niezależnie, w jakim języku apka została napisana - czy to PHP, czy Python, czy Java. To serwer obsługiwał żądania użytkownika i generował widok. Tworzenie przyjemnych dla oka efektów wizualnych na stronie nie było możliwe za pomocą backendu. Mając na uwadze to ograniczenie, postanowiłem przyjrzeć się bliżej "drugiej stronie medalu", czyli front-endowi. Zacząłem bawić się Javascriptem, potem wziąłem na warsztat jQuery, który w połączeniu z AJAX-em i JSON-em bardzo mnie zachwycił swoją prostotą, a jednocześnie potęgą działania. Zrobiłem mały projekt, który wykorzystuje wspomniane technologie. Wyszło całkiem zgrabnie.

Ale wciąż nie dawał mi spokoju pewien zamysł, który chodził za mną od kilku lat. Chciałem zrobić apkę webową, która by działała podobnie jak apka desktopowa. To znaczy taką apkę, która miałaby jeden niezmienny szablon, a w nim pojawiałyby się dynamicznie różne, zależne od kontekstu, dane. W praktyce oznacza to brak przeładowywania całej strony przy zmianie kontekstu. Na przykład, gdy chcemy wyświetlić inną podstronę, nie odbywa się wczytywanie jej od nowa, a jedynie następuje podmiana danych w stale wyświetlanym szablonie. Takie zachowanie jest cechą tzw. Single Page Applications, czyli aplikacji jednostronnych.

Aby taką aplikację napisać, wystarczy HTML, Javascript i źródło danych (baza danych na serwerze, plik na dysku itp.). Można to zrobić ręcznie, ale wymaga to mnóstwa wysiłku. I tu z pomocą przychodzą przeznaczone do tego frontendowe frameworki. Ja wybrałem AngularJS, bo mi najbardziej odpowiada. Dzięki niemu można szybko i sprawnie napisać aplikację webową tego typu. Chcąc więc poznać Angulara, poczytałem trochę teorii, liznąłem trochę dokumentacji i zacząłem pisać swoją apkę.

Angular CMS

Ponieważ chciałem w niej mieć system zarządzania oparty na autoryzacji, czy jak kto woli autentykacji, musiałem rozwiązać problem przydzielania dostępu - i to zarówno w części frontendowej, jak i backendowej. Autoryzacja po stronie serwera jest konieczna, ponieważ logikę autoryzacji po stronie klienta można podejrzeć i złamać (po stronie serwera nie jest już tak łatwo). Tak więc, mając zrobioną podwójną autoryzację, mogłem wykonać system zarządzania stroną. W efekcie powstał projekt Angular CMS, prosty CMS, którego teraz będę wypełniał treścią.