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

Paweł Ziółkowski

Napisz aplikację webową

W naszym cyklu poznaliśmy już podstawy języka JavaScript oraz oparte na nim technologie programowania. Teraz wykorzystamy tę wiedzę i stworzymy aplikację webową z zastosowaniem frameworka AngularJS i bazy MongoDB.

itwa.pl/extra

Do naszego projektu (od strony serwera) potrzebujemy środowiska Node.js oraz instalowanego razem z nim menedżera pakietów NPM, za pomocą którego będziemy dodawali paczki do projektu. Na początek utwórzmy nowy katalog. Będziemy w nim trzymać wszystkie pliki aplikacji. Po przejściu do folderu /var/www wykonujemy polecenie mkdir msgs, które utworzy odpowiedni katalog. Po jego otwarciu (cd msgs) inicjujemy projekt poleceniem npm init (w ten sposób powstanie plik package.json). Dodajemy wymagane zależności (właściwość dependencies: express, body-parser, mongodb). Plikiem wejściowym, uruchamianym przez serwer, będzie domyślnie wskazany index.js. Część serwerową oprzemy na frameworku Express.js, który będzie odpowiadać na żądania HTTP. Dla przejrzystości umieścimy część konfiguracyjną (config) oraz obsługę ścieżek (router) poza plikiem index.js. W konfiguracji zapisujemy port, na którym będzie dostępna aplikacja oraz dane bazy.

Obsługa żądań

Wszystkie żądania HTTP, które przyjdą do serwera, będziemy obsługiwać w pliku routes/router.js. Wykorzystując wbudowany w Express.js obiekt Router (expressjs.com/en/4x/api.html #router), zdefiniujemy, jak będą obsłużone zapytania. W pliku routes.js umieszczamy kod:

const express = require('express');
const app = express();
const router = express.Router();
router.get('/', (req, res)=> {
res.send('Obsługa GET dla ścieżki /');
});
module.exports = router;

Aby uzyskać obiekt Router, musimy zaimportować (re­quire) moduł express, na którym następnie wywołujemy metodę Rou­ter(). Zwrócony obiekt daje nam możliwość wywołania metod HTTP (np. get, post, put, delete), których pierwszy parametr to ścieżka, a drugi wywołanie zwrotne (callback), wykorzystywane wtedy, gdy nadejdzie takie żądanie. Na koniec należy pamiętać o wyeksportowaniu obiektu (identycznie jak w pliku konfiguracyjnym). Tak utworzony plik należy teraz zaimportować do pliku index.js, podając ścieżkę z nazwą (może być bez rozszerzenia js):

const routes = require('./routes/router');
app.use('/', routes);

Następnie wywołujemy metodę use, w której deklarujemy, że dla wszystkiego, co przyjdzie pod główny adres (root /), należy użyć zaimportowanego routera. Obiekt Router zachowuje się jak funkcja middleware (ma trzy parametry), dlatego możemy użyć go w naszym przykładzie w funkcji use, która wymaga takiego typu parametru. Po uruchomieniu polecenia nodemon index.js (czasem wymagane jest uruchomienie przez użytkownika root) możemy otworzyć przeglądarkę i wyświetlić stronę, na której zobaczymy napis „Obsługa GET dla ścieżki /”.

Podobnie jak w przypadku routing, rozdzielimy katalogi z plikami widoków, stylów, dodatków i skryptów. Wykorzystamy do tego również funkcję use, do której przekażemy ścieżki do katalogów z zasobami i wbudowany middleware z metody static. Żądania o zasoby np. z katalogu css będą przekierowane do katalogu /utils/css na serwerze i tam też będą wyszukiwane odpowiednie pliki:

app.use('/css', express.static('utils/css/'));
app.use('/js', express.static('utils/js/'));

Do obsługi stylów wykorzystamy bibliotekę Bootstrap; jej katalogi css oraz js po rozpakowaniu należy umieścić na serwerze w folderze utils.

Baza danych

Wszystkie informacje z naszej strony będziemy przechowywać w systemie MongoDB w bazie msgs. Dostęp do bazy należy skonfigurować w pliku config – zdefiniujemy w nim adres URL oraz nazwę bazy, w której będziemy przechowywać dokumenty:

config.dbName = 'msgs';
config.dbUrl = 'mongodb://localhost:27017/msgs';

W pliku router.js, w którym będziemy obsługiwali zapytania do bazy, należy zaimportować klienta mongodb (dodany wcześniej do zależności projektu w package.json) oraz plik konfiguracyjny.

[...]

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

Materiały dodatkowe (1990 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