Створюємо наш перший API за допомогою Node.js та Express: Створюємо сервер

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Створення сервера Express для API за допомогою Node.js

У попередньому посібнику ми розглянули, що собою являє архітектура REST, шість головних вимог, що висуваються до REST, значення методів запиту HTTP та кодів стану відповідей та структуру кінцевої точки RESTful API.

У цьому посібнику ми створимо сервер, на якому буде розташовуватися наш API. Ви можете створювати API за допомогою будь-якої мови програмування та будь-якого серверного програмного забезпечення, проте ми будемо використовувати платформу Node.js, що є реалізацією JavaScript для сторони сервера, і Express – популярний фреймворк для Node.js з самим потрібним функціоналом.

Встановлення

Для початку потрібно впевнитися, що Node.js та npm встановлено глобально на нашому комп'ютері. Ми можемо це перевірити за допомогою виконання команди з прапорцем -v, у результаті чого буде показано встановлені версії цих інструментів. Відкрийте вашу консоль та введіть туди наступну команду:

1	node -v && npm -v

1	v10.8.0
2	6.2.0

Версії, встановлені на вашому комп'ютері, можуть трохи відрізнятися від тих, що встановлено у мене, проте якщо обидва інструменти встановлено, то можемо приступати.

Давайте створимо папку проекту під назвою express-api та перейдемо до неї.

1	mkdir express-api && cd express-api

Тепер, коли ми у ній, ми можемо ініціалізувати наш проект, виконавши команду init.

npm init

У результаті вам буде запропоновано ряд питань про проект, на які ви можете як відповідати, так і ні. Після налаштування у вас буде файл package.json, який виглядає наступним чином:

{
  "name": "express-api",
  "version": "1.0.0",
  "description": "Node.js and Express REST API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tania Rascia",
  "license": "MIT"
}

Тепер, коли ми маємо package.json, ми можемо встановити залежності, потрібні для нашого проекту. На щастя, нам потрібні тільки наступні:

body-parser – ПЗ проміжного шару для розбору тіла запитів;
express – веб-фреймворк з самим потрібним функціоналом, який ми будемо використовувати для створення нашого сервера;
mysql – драйвер MySQL;
request (необов'язковий) – легкий спосіб виконання запитів HTTP;

Ми скористаємося командою install, за якою будуть слідкувати всі залежності, для завершення налаштування нашого проекту.

1	npm install body-parser express mysql request

У результаті буде створено файл package-lock.json, папку node_modules, і package.json тепер буде виглядати наступним чином:

{
  "name": "express-api",
  "version": "1.0.0",
  "description": "Node.js and Express REST API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tania Rascia",
  "license": "MIT",
  "dependencies": {
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "mysql": "^2.16.0",
    "request": "^2.88.0"
  }
}

Створення сервера HTTP

Перед тим як створити сервер Express, ми швиденько створимо сервер HTTP за допомогою вбудованого модуля http Node, щоб ви отримали загальне уявлення про те, як працює простенький сервер.

Створіть файл під назвою hello-server.js. Завантажте модуль http, встановіть значення порту (я вибрала 3001) та створіть сервер за допомогою методу createServer().

1	// Build a server with Node's HTTP module
2	const http = require('http');
3	const port = 3001;
4	const server = http.createServer();

У вступному посібнику цієї серії ми розглянули, яку роль виконують запити та відповіді для сервера HTTP. Ми налаштуємо наш сервер таким чином, щоб він міг оброблювати запит та відображувати його URL-адресу на стороні сервера, а також так, щоб на стороні клієнта відображалося повідомлення «Hello, server!».

1	serveron('request' (request, response) => {
2	console.log(`URL: ${request.url}`);
3	response.end('Hello, server!')
4	})

Нарешті, ми вкажемо серверу, який порт прослуховувати та будемо виводити помилки при їх наявності.

// Start the server
server.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);

    console.log(`Server is listening on port ${port}`)
})

Тепер ми можемо запустити наш сервер за допомогою команди node, за якої йде ім'я файлу.

1	node hello-server.js

Ви побачите відповідь у консолі.

1	Server is listening on port 3001

Для того щоб перевірити, чи дійсно запустився сервер, перейдіть у вашому браузері за адресою https://localhost:3001/. Якщо все нормально, то ви побачите «Hello, server!» на сторінці. У нашій консолі ви побачите запитану URL-адресу.

1	URL: /
2	URL: /favicon.ico

Якщо би ви перейшли за адресою http://localhost:3001/hello, то побачили би URL: /hello.

Також ми можемо використовувати інструмент cURL на нашому локальному сервері, завдяки чому нам будуть показані точні повернуті заголовки та тіло відповіді.

1	curl -i http://localhost:3001

HTTP/1.1 200 OK
Date: Wed, 15 Aug 2018 22:14:23 GMT
Connection: keep-alive
Content-Length: 14

Hello, server!

Якщо ви закриєте консоль, коли захочете, то сервер перестане працювати.

Тепер, коли ми отримали загальне уявлення про те, як працює сервер, запит та відповідь разом, ми можемо переписати цей код для Express, інтерфейс якого ще простіший та можливості якого більш широкі.

Створюємо сервер Express

Ми створимо новий файл, app.js, який буде виступати у ролі точки входу (* файл для запуску застосування) для власне нашого проекту. Таким же чином як і у випадку з оригінальним сервером http, ми запитаємо модуль та вкажемо порт для запуску сервера.

Створіть файл app.js та додайте туди наступний код:

1	// Require packages and set the port
2	const express = require('express');
3	const port = 3002;
4	const app = express();

Тепер, замість того щоб прослуховувати всі запити, ми явно вкажемо серверу, що нам потрібні тільки запити, виконані за методом GET до кореневої папки сервера (/). При отриманні кінцевою точкою запиту «/» ми відобразимо запитану URL-адресу та виведемо повідомлення «Hello, Server!».

1	app.get('/', (request, response) => {
2	console.log(`URL: ${request.url}`);
3	response.send('Hello, Server!');
4	});

Нарешті, ми запустимо сервер, який буде прослуховувати запити, виконані за 3002 портом, за допомогою методу listen().

// Start the server
const server = app.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);

    console.log(`Server listening on port ${server.address().port}`);
});

Ми можемо запустити сервер за допомогою команди node app.js як раніше, проте ми можемо змінити властивість scripts у файлі package.json для автоматичного запуску цієї конкретної команди.

1	"scripts": {
2	"start": "node app.js"
3	},

Тепер ми можемо використовувати команду npm start для запуску сервера, і після запуску ми побачимо повідомлення у консолі.

1	Server listening on port 3002

Якщо ми виконаємо команду curl -i для обговорюваної URL-адреси, то побачимо, що сервер у цьому випадку працює на базі Express і що є деякі додаткові заголовки на зразок Content-Type.

1	curl -i http://localhost:3002

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 14
ETag: W/"e-gaHDsc0MZK+LfDiTM4ruVL4pUqI"
Date: Wed, 15 Aug 2018 22:38:45 GMT
Connection: keep-alive

Hello, Server!

Додаємо ПЗ проміжного шару для розбору тіла запитів

Для того щоб полегшити роботу з запитами за методами POST та PUT до нашого API, ми додамо ПЗ проміжного шару для розбору тіла запиту. Тут нам і стає у пригоді модуль body-parser. Завдяки цьому модулю буде витягнуто все тіло надійшовшого запиту, а його дані перетворено у JSON-об'єкт, з яким ми можемо працювати.

Ми просто запитаємо модуль у верхній частині коду нашого файлу. Додайте наступну інструкцію require у верхню частину вашого файлу app.js.

1	const bodyParser = require('body-parser');
2	...

Потім ми вкажемо нашому додатку Express, що потрібно використовувати body-parser та перетворювати дані у формат JSON.

// Use Node.js body parsing middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true,
}));

Також давайте змінимо наше повідомлення таким чином, щоб замість простого тексту в якості відповіді відправлявся JSON-об'єкт.

1	response.send({message: 'Node.js and Express REST API'});

Далі йде код нашого файлу app.json, що маємо на цей час:

// Require packages and set the port
const express = require('express');
const port = 3002;
const bodyParser = require('body-parser');
const app = express();

// Use Node.js body parsing middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true,
}));

app.get('/', (request, response) => {
    response.send({
        message: 'Node.js and Express REST API'}
    );
});

// Start the server
const server = app.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);

    console.log(`Server listening on port ${server.address().port}`);
});

Якщо ви відправите запит за допомогою curl -i на сервер, то ви побачите, що у заголовку Content-Type тепер вказано значення application/json; charset=utf-8.

Налаштовуємо маршрути

Поки ми маємо тільки маршрут для оброблення запитів за методом GET до кореня додатка (/), проте наш API також повинен бути спроможним оброблювати запити HTTP за всіма методами до різних URL. Ми налаштуємо маршрутизатор (* надає функціональні можливості для оброблення відповідей) та додамо деякі вигадані дані для відправлення користувачеві.

Давайте створимо нову папку під назвою routes та файл routes.js. Ми підключимо його у верхній частині app.js.

1	const routes = require('./routes/routes');

Зверніть увагу на те, що розширення .js у require вказувати необов'язково. Тепер ми перемістимо маршрут для оброблення запитів GET у routes.js. Додайте наступний код у routes.js:

const router = app => {
    app.get('/', (request, response) => {
        response.send({
            message: 'Node.js and Express REST API'
        });
    });
}

Нарешті, експортуйте маршрутизатор, щоб ми могли їм скористатися у нашому файлі app.js

1	// Export the router
2	module.exports = router;

В app.js замініть наявний код app.get() викликом routes():

1	routes(app);

Тепер ви могли би перейти за http://localhost:3002 та побачити те саме, що й раніше. (Не забудьте перезапустити сервер)

Після вдалого налаштування вищезазначеного ми надамо деякі дані у форматі JSON за допомогою іншого маршруту. Поки що ми скористаємося просто вигаданими даними, оскільки нашу база даних ще не створено.

Давайте створимо змінну users у routes.js з деякими вигаданими користувальницькими даними у форматі JSON.

const users = [{
        id: 1,
        name: "Richard Hendricks",
        email: "richard@piedpiper.com",
    },
    {
        id: 2,
        name: "Bertram Gilfoyle",
        email: "gilfoyle@piedpiper.com",
    },
];

Ми додамо ще один маршруту для оброблення запитів за адресою /users та методом GET до нашого маршрутизатора та будемо відправляти з його допомогою користувацькі дані.

1	app.get('/users', (request, response) => {
2	response.send(users);
3	});

Після перезапуску сервера тепер ви можете перейти за http://localhost:3002/users та побачити всі наші дані.

Зверніть увагу: якщо у вас не встановлено у браузері розширення для перегляду файлів у форматі JSON, то я вам дуже рекомендую завантажити його, наприклад JSONView для Chrome. Завдяки цьому вам буде набагато простіше читати дані!

Відвідайте репозиторій GitHub, щоб ознайомитися з кінцевим кодом для цього поста та порівняйте його зі своїм.

Завершення

У цьому посібнику ми розглянули, як створити сервер за допомогою вбудованого модуля Node HTTP та за допомогою Express, як назначити маршрути для запитів, виконуваних за різними URL-адресами, і як отримати надійшовші у запитах за методом GET дані у форматі JSON.

В останньому посібнику цієї серії ми підключимо наш сервер Express до MySQL для створення, перегляду, оновлення та видалення користувачів з нашої бази даних, завершуючи реалізацію функціональних можливостей нашого API.