Miesięcznik informatyków i menedżerów IT sektora publicznego

Paweł Ziółkowski

Ulepszamy aplikację webową

W poprzednim artykule stworzyliśmy aplikację wyświetlającą komunikaty. Rozbudujmy ją o kilka rozwiązań, które ułatwią korzystanie ze strony i ulepszą nasz serwis.

itwa.pl/extra

Samo wyświetlanie wiadomości na stronie nie jest zbyt atrakcyjne. Do wzbogacenia naszego serwisu wykorzystamy Angulara, bibliotekę socket.io oraz Bootstrapa. Na początek zmienimy sposób wyświetlania komunikatów i umożliwimy przeglądanie archiwalnych postów, a następnie dodamy animacje i powiadomienia.

Ograniczenie pobierania

W miarę upływu czasu do naszej tablicy będą dodawane kolejne wiadomości, a pobieranie i wyświetlanie ich wszystkich na stronie głównej niepotrzebnie obciąża serwer, który wykonuje zapytanie do bazy, łącza i przeglądarki podczas przetwarzania odebranych danych. Przy okazji warto nadmienić, że szczegóły dotyczące czasu pobierania i ilości przesyłanych danych możemy sprawdzać w przeglądarce w narzędziach dewelopera – zakładka Sieć (Network).

Dodajemy do pliku z konfiguracją nową właściwość, która będzie określała liczbę pobieranych komunikatów w momencie startu strony. Do pliku config.js dopisujemy linię:

config.INIT_MSGS_LIMIT = 10;

Wartość ta zostanie wykorzystana w pliku routera, gdzie obsługujemy żądanie GET getInitMsgs. Teraz sięgamy po API klienta bazy MongoDB, które udostępnia metodę limit. Przekazujemy do niej liczbę dokumentów do pobrania:

let data = db.collection('msgs').find({}).\
sort({time:-1}).limit(config.INIT_MSGS_LIMIT);

Wielkość limitu pobieramy z obiektu config, który został wcześniej zaimportowany do pliku router.js.

Pobieranie starszych wiadomości

Zastosowana metoda limit pomogła nam ograniczyć ilość danych, ale teraz nie mamy możliwości podglądu więcej niż dziesięciu ostatnich postów. Dodajmy do strony przycisk, który będzie pobierał i wyświetlał kolejnych dziesięć komunikatów.

Zmianę rozpocznijmy od strony serwera, dodając obsługę żądania GET dla ścieżki /getNextOlder. Żądanie powinno zwracać 10 kolejnych wierszy, ale starszych od ostatniego wyświetlanego na stronie. Musimy odczytać przesłany parametr, który będzie ostatnim identyfikatorem komunikatu na stronie, i na jego podstawie pobrać kolejne dane. W pliku router.js wprowadźmy kod:

.get('/getNextOlder/:_last', (req,res)=>{

let _lastID = ObjectId(req.params._lastID);
let data = db.collection('msgs').find({_id : \
{$lt:_lastID}}).sort({time: 1}).limit(config.INIT_MSGS_LIMIT);

Podobnie jak w żądaniu DELETE, musimy obsłużyć zmienną ścieżkę, wykorzystując parametr _lastID, w którym będzie wartość identyfikatora ostatniego komunikatu ze strony. Nie jest to stała wartość, dlatego należy zapisać ją z dwukropkiem, a następnie pobrać z obiektu req.params. Dalsza obsługa wygląda podobnie, jak przy pobieraniu pierwszych postów, ale z wykorzystaniem query operator w metodzie find. Argumentem metody jest obiekt z nazwą pola, którą chcemy testować_– id, oraz warunkiem $lt, mniejszy niż (less than), od przesłanego parametru _lastID. Po stronie użytkownika dodajmy przycisk, który będzie wysyłał żądanie do serwera:

<button type="button" class="btn btn-info" ng-click=\
"$ctrl.getOlderPosts()">Pobierz starsze komunikaty</button>

Kliknięcie przycisku spowoduje uruchomienie funkcji get­OlderPosts, którą definiujemy w kontrolerze komponentu msgs-list:

if (ctrl.list.length > 0) {
let _lastID = ctrl.list[ctrl.list.length-1]['_id'];
$http.get(`/getNextOlder/${_lastID}`)
.then(data => {
if (data.data.length == 0) {
alert(`Brak wiadomości do pobrania.`);
return; }
ctrl.list = ctrl.list.concat(data.data)
})
.catch(err => alert(`Wystąpił błąd: ${err}`));
}}

W metodzie tej sprawdzamy, czy nasza lista nie jest pusta (właściwość length), następnie pobieramy ostatnią pozycję z pobranych wcześniej postów i odczytujemy jej pole _id, które przesyłamy z żądaniem do serwera. Po otrzymaniu odpowiedzi i przekonaniu się, że otrzymaliśmy dane z postami, dołączamy je do istniejącej tablicy. Wykorzystaliśmy metodę concat, łączącą dwie tablice przez dodanie pozycji z data.data na końcu tablicy list i zwracającą nową tablicę, którą zapisujemy w naszej zmiennej.

[...]

Autor jest absolwentem Uniwersytetu Ekonomicznego we Wrocławiu, pracuje jako informatyk w Urzędzie Gminy w Miękini.

Materiały dodatkowe (2018 KB)

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma. Zapraszamy do składania zamówień na prenumeratę i numery archiwalne.
 
 

Polecamy

Biblioteka Informacja Publiczna

Specjalistyczne publikacje książkowe dla pracowników administracji publicznej

więcej