chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf4
|
||||
title: Ланцюгове підпрограмне забезпечення для створення сервера часу
|
||||
challengeType: 2
|
||||
forumTopicId: 301510
|
||||
dashedName: chain-middleware-to-create-a-time-server
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Програмне забезпечення можна підключити за певним маршрутом за допомогою `app.METHOD(path, middlewareFunction)`. Підрограмне забезпечення також може бути поєднане всередині визначення маршруту.
|
||||
|
||||
Розглянемо наступний приклад:
|
||||
|
||||
```js
|
||||
app.get('/user', function(req, res, next) {
|
||||
req.user = getTheUserSync(); // Hypothetical synchronous operation
|
||||
next();
|
||||
}, function(req, res) {
|
||||
res.send(req.user);
|
||||
});
|
||||
```
|
||||
|
||||
Цей підхід корисний для поділу серверних операцій на менші одиниці. Це призводить до кращої структури додатків, та можливості повторного використання коду в різних місцях. Цей підхід також може бути використаний для проведення деякої перевірки даних. У кожній точці стеку підпрограмного забезпечення ви можете заблокувати виконання поточного ланцюга та передати управління функціями, спеціально розробленими для обробки помилок. Або ви можете передати контроль до наступних відповідних маршрутів, щоб впоратися з особливими випадками. Ми побачимо як у розділі розширений Експрес.
|
||||
|
||||
# --instructions--
|
||||
|
||||
У маршруті `app.get('/now', ...)` об'єднайте підппрограмне забезпечення та остаточний обробник. У функції підпрограмне забезпечення ви повинні додати поточний час до об’єкта запиту в `req.time` ключі. Ви можете використати `new Date().toString()`. В обробнику, відповідайте на об'єкт JSON, використовуючи структуру `{time: req.time}`.
|
||||
|
||||
**Примітка:** Тест не пройде, якщо ви не об'єднаєте підпрограмне забезпечення. Якщо ви встановите функцію десь в іншому місці, тест зазнає невдачі, навіть якщо результат виводу правильний.
|
||||
|
||||
# --hints--
|
||||
|
||||
Кінцева точка /now повинна бути підключена до проміжного програмного забезпечення
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/chain-middleware-time').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.stackLength,
|
||||
2,
|
||||
'"/now" route has no mounted middleware'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
/now кінцева точка повинна повернути час, який відтепер складає +/-20 сек
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/chain-middleware-time').then(
|
||||
(data) => {
|
||||
var now = new Date();
|
||||
assert.isAtMost(
|
||||
Math.abs(new Date(data.time) - now),
|
||||
20000,
|
||||
'the returned time is not between +- 20 secs from now'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf8
|
||||
title: Отримання даних з POST запитів
|
||||
challengeType: 2
|
||||
forumTopicId: 301511
|
||||
dashedName: get-data-from-post-requests
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Встановіть POST обробник за шляхом `/name`. Це той самий шлях, що і раніше. Ми підготували форму на головній сторінці html. Вона надсилатиме такі ж дані, як і у вправі 10 (рядок запиту). Якщо body-parser налаштований правильно, ви повинні знайти параметри в об’єкті `req.body`. Подивіться на простий приклад з бібліотеки:
|
||||
|
||||
<blockquote>маршрут: POST '/library'<br>urlencoded_body: userId=546&bookId=6754 <br>req.body: {userId: '546', bookId: '6754'}</blockquote>
|
||||
|
||||
Дайте відповідь тим же об’єктом JSON, як і раніше: `{name: 'firstname lastname'}`. Перевірте, чи ваша кінцева точка працює з використанням Html-форми, яку ми надали на головній сторінці додатку.
|
||||
|
||||
Порада: є кілька інших способів, крім GET та POST. І за загальноприйнятим правилом існує відповідність між дієсловом http та операцією, яку ви будете виконувати на сервері. Стандартна відповідність наступна:
|
||||
|
||||
POST (іноді PUT) - Створити новий ресурс, використовуючи інформацію, що надсилається з запитом,
|
||||
|
||||
GET - Прочитати існуючий ресурс не змінюючи його,
|
||||
|
||||
PUT або PATCH (іноді POST) - Оновити ресурс за допомогою відправлених даних,
|
||||
|
||||
DELETE => Видалити ресурс.
|
||||
|
||||
Є також кілька інших методів, які використовуються для узгодження зв'язку з сервером. За винятком GET, всі інші перераховані вище методи, можуть мати корисне навантаження (тобто дані на вміст запиту). Проміжне програмне забезпечення Body-parser також працює з цими методами.
|
||||
|
||||
# --hints--
|
||||
|
||||
Тест 1: Ваша кінцева точка API повинна співпадати з правильним іменем
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.post(getUserInput('url') + '/name', { first: 'Mick', last: 'Jagger' }).then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.name,
|
||||
'Mick Jagger',
|
||||
'Test 1: "POST /name" route does not behave as expected'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
Тест 2: Ваша кінцева точка API повинна співпадати з правильним іменем
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.post(getUserInput('url') + '/name', {
|
||||
first: 'Keith',
|
||||
last: 'Richards'
|
||||
}).then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.name,
|
||||
'Keith Richards',
|
||||
'Test 2: "POST /name" route does not behave as expected'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf6
|
||||
title: Отримання вхідних даних параметра запиту від клієнта
|
||||
challengeType: 2
|
||||
forumTopicId: 301512
|
||||
dashedName: get-query-parameter-input-from-the-client
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Інший поширений шлях отримати вхідні дані від клієнта - це кодування даних шляхом маршруту, використовуючи рядок запиту. Рядок запиту обмежений знаком питання (?), і включає в себе поле=пари значення. Кожна пара розділена амперсандами (&). Експрес може проаналізувати дані з рядка запиту і заповнити об’єкт `req.query`. Деякі символи, як-от відсотки (%), не можуть бути в URL-адресі і повинні бути закодовані в іншому форматі перед їх відправкою. Якщо ви використовуєте API з JavaScript, ви можете використовувати певні методи для кодування/декодування цих символів.
|
||||
|
||||
<blockquote>маршрут: '/library'<br>actual_request_URL: '/library?userId=546&bookId=6754' <br>req.query: {userId: '546', bookId: '6754'}</blockquote>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть кінцеву точку API, монтовану в `GET /name`. Відреагуйте JSON документом, використовуючи структуру `{ name: 'firstname lastname'}`. Перший і останній параметри імені повинні бути закодовані в рядку запиту, наприклад `?first=firstname&last=lastname`.
|
||||
|
||||
**Примітка:** У цьому завданні ви будете отримувати дані з POST-запиту, з того ж `/name` маршруту. За бажанням, можете використовувати `app.route(path).get(handler).post(handler)`. Цей синтаксис дозволяє об'єднувати різні обробники дієслів на тому ж шляху. Вам не знадобиться багато друкувати і ви матимете чистіший код.
|
||||
|
||||
# --hints--
|
||||
|
||||
Тест 1: Ваша кінцева точка API повинна співпадати з правильним іменем
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/name?first=Mick&last=Jagger').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.name,
|
||||
'Mick Jagger',
|
||||
'Test 1: "GET /name" route does not behave as expected'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
Тест 2: Ваша кінцева точка API повинна співпадати з правильним іменем
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/name?last=Richards&first=Keith').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.name,
|
||||
'Keith Richards',
|
||||
'Test 2: "GET /name" route does not behave as expected'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,65 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf5
|
||||
title: Отримати ввід параметру маршруту від Клієнта
|
||||
challengeType: 2
|
||||
forumTopicId: 301513
|
||||
dashedName: get-route-parameter-input-from-the-client
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Створюючи API, ми повинні дозволити користувачам спілкуватися з нами, на тему того, що вони хочуть отримати від наших послуг. Наприклад, якщо клієнт запитує інформацію про користувача, збереженого в базі даних, їм потрібно мати шлях повідомити нам, який саме користувач їх цікавить. Одним із можливих способів досягнення цього результату є використання параметрів маршруту. Параметри маршруту мають назву сегментів URL, розділені косою рискою (/). Кожен сегмент фіксує значення частини URL, який відповідає його позиції. Збережені значення можна знайти в об’єкті `req.params`.
|
||||
|
||||
<blockquote>маршрут: '/user/:userId/book/:bookId'<br>actual_request_URL: '/user/546/book/6754' <br>req.params: {userId: '546', bookId: '6754'}</blockquote>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Побудуйте ехо-сервер, вмонтований у маршрут `GET /:word/echo`. Відреагуйте JSON об'єктом, використовуючи структуру `{echo: word}`. Ви можете знайти слово, яке потрібно повторити у `req.params.word`. Ви можете перевірити свій маршрут з адресної стрічки вашого браузера, відвідавши деякі відповідні маршрути, наприклад `your-app-rootpath/freecodecamp/echo`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Тест 1: Ваш ехо сервер повинен коректно повторити слова
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/eChOtEsT/echo').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.echo,
|
||||
'eChOtEsT',
|
||||
'Test 1: the echo server is not working as expected'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
Тест 2: Ваш ехо сервер повинен коректно повторити слова
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/ech0-t3st/echo').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.echo,
|
||||
'ech0-t3st',
|
||||
'Test 2: the echo server is not working as expected'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf3
|
||||
title: Реалізація підпрограмного забезпечення з журналу запитів кореневого рівня
|
||||
challengeType: 2
|
||||
forumTopicId: 301514
|
||||
dashedName: implement-a-root-level-request-logger-middleware
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Раніше ви ознайомились з функцією підпрограмного забезпечення `express.static()`. А зараз саме час більш детально розглянути, що таке підпрограмне забезпечення. Функції підпрограмного забезпечення – це функції, які мають 3 аргументи: об'єкт запиту, об'єкт відповіді й наступна функція циклу запиту-відповіді додатку. Ці функції виконують певний код, який може мати побічний ефект на додаток і зазвичай додає інформацію до об'єктів запиту й відповіді. Ще вони можуть закінчити цикл, надіславши відповідь, коли стикаються з певними умовами. Якщо після завершення вони не надсилають відповідь, вони починають виконувати наступну функцію в стеку. Це запускає третій аргумент – `next()`.
|
||||
|
||||
Розглянемо наступний приклад:
|
||||
|
||||
```js
|
||||
function(req, res, next) {
|
||||
console.log("I'm a middleware...");
|
||||
next();
|
||||
}
|
||||
```
|
||||
|
||||
Припустімо, ви підключили цю функцію до маршруту. Коли запит збігається з маршрутом, відображається рядок “I’m a middleware…“, потім виконується наступна функція в стеку. У цій вправі ви створите підпрограмне забезпечення кореневого рівня. Як ви бачили в завданні 4, щоб встановити функцію підпрограмного забезпечення на кореневий рівень, ви можете скористатись методом `app.use(<mware-function>)`. У такому випадку ця функція виконається для всіх запитів, але ви також можете встановити конкретніші умови. Наприклад, якщо ви хочете виконати функцію лише для запитів POST, можна скористатись `app.post(<mware-function>)`. Аналогічні методи існують для всіх дієслів HTTP (GET, DELETE, PUT, …).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Створіть простий журнал. Для кожного запиту в консолі має записуватись рядок в наступному форматі: `method path - ip`. Приклад виглядатиме так: `GET /json - ::ffff:127.0.0.1`. Зверніть увагу, що між `method` і `path` є пробіл, і що дефіс, який розділяє `path` і `ip`, виділено пробілами з обох сторін. Ви можете дізнатись метод запиту (дієслово http), відносний шлях маршруту й ip абонента з об'єкта запиту, скориставшись `req.method`, `req.path` і `req.ip`. Коли закінчите, не забудьте запустити `next()`, бо інакше ваш сервер заблокується назавжди. Обов'язково відкрийте “Журнал“ і подивіться, що відбувається, коли надходять певні запити.
|
||||
|
||||
**Note:** Вираз оцінює функції в тому ж порядку, в якому вони з'являються в коді. Це стосується й підпрограмного забезпечення. Якщо ви хочете, щоб це працювало для всіх маршрутів, встановіть його перед ними.
|
||||
|
||||
# --hints--
|
||||
|
||||
Підпрограмне забезпечення журналу кореневого рівня має бути активним
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/root-middleware-logger').then(
|
||||
(data) => {
|
||||
assert.isTrue(
|
||||
data.passed,
|
||||
'root-level logger is not working as expected'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bed
|
||||
title: Знайомство з консоллю Node
|
||||
challengeType: 2
|
||||
forumTopicId: 301515
|
||||
dashedName: meet-the-node-console
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Робота над цими завданнями передбачає написання коду одним із таких методів:
|
||||
|
||||
- Клонуйте [ цей репозиторій](https://github.com/freeCodeCamp/boilerplate-express/) та виконайте ці завдання локально.
|
||||
- Використовуйте [ наш стартовий проєкт Replit](https://replit.com/github/freeCodeCamp/boilerplate-express) для виконання цих завдань.
|
||||
- Для виконання проєкту скористуйтеся будь-яким конструктором сайтів на ваш розсуд. Впевніться, що ви маєте усі файли з нашого GitHub репозиторію.
|
||||
|
||||
Коли ви завершили, переконайтеся, що демоверсія вашого проєкту розміщена у відкритому доступі. Потім введіть URL-адресу проєкту у поле `Solution Link`.
|
||||
|
||||
Під час процесу розробки важливо перевіряти, що відбувається у коді.
|
||||
|
||||
Node - це всього лише середовище JavaScript. Як у клієнтському JavaScript, ви можете використовувати консоль для відображення корисної інформації для налагодження недоліків. На вашому локальному комп'ютері ви побачите вивід консолі в терміналі. На Replit термінал відкритий на правій панелі за замовчуванням.
|
||||
|
||||
Ми рекомендуємо тримати термінал відкритим під час роботи над цими завданнями. Читаючи вивід в терміналі, ви можете побачити будь-які помилки, що можуть виникнути.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Модифікуйте `myApp.js` для виводу "Hello World" на консоль.
|
||||
|
||||
# --hints--
|
||||
|
||||
`"Hello World"` має бути в консолі
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/hello-console').then(
|
||||
(data) => {
|
||||
assert.isTrue(data.passed, '"Hello World" is not in the server console');
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bef
|
||||
title: Робота з файлами у форматі HTML
|
||||
challengeType: 2
|
||||
forumTopicId: 301516
|
||||
dashedName: serve-an-html-file
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ви можете відповідати на запити файлом, використовуючи метод `res.sendFile(path)`. Ви можете додати його до обробника маршрутів `app.get('/', ...)`. Насправді цей метод встановлює відповідні заголовки, які вказуватимуть вашому браузеру, як обробляти файл, який потрібно надіслати, відповідно до його типу. Потім він (метод) файл буде прочитаний та надісланий. Для цього методу потрібен абсолютний шлях до файлу. Ми рекомендуємо вам використовувати глобальну змінну Node `__dirname` для обчислення шляху, як вказано нижче:
|
||||
|
||||
```js
|
||||
absolutePath = __dirname + relativePath/file.ext
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Надішліть файл `/views/index.html` у відповідь на запит GET шляхом `/`. Якщо ви переглядаєте свій додаток у реальному часі, ви можете побачити великий заголовок HTML (і форму, яку ми будемо використовувати пізніше…), без стилю.
|
||||
|
||||
**Примітка:** Ви можете редагувати результат попереднього завдання або створити нове. Якщо ви створюєте нове рішення, майте на увазі, що Express оцінює маршрути зверху вниз і запускає обробник для першого збігу. Ви повинні прокоментувати попереднє рішення, інакше сервер буде продовжувати відповідати за допомогою рядку.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш додаток повинен використовувати файл views/index.html
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url')).then(
|
||||
(data) => {
|
||||
assert.match(
|
||||
data,
|
||||
/<h1>.*<\/h1>/,
|
||||
'Your app does not serve the expected HTML'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf1
|
||||
title: Передавання JSON за певним маршрутом
|
||||
challengeType: 2
|
||||
forumTopicId: 301517
|
||||
dashedName: serve-json-on-a-specific-route
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У той час як HTML сервер передає HTML, API передає дані. <dfn>REST</dfn> (REpresentational State Transfer) API дозволяє обмінюватися даними простим способом, без необхідності, щоб клієнти знали будь-які деталі про сервер. Клієнту лише потрібно знати, де знаходиться ресурс (URL-адреса), та дію, яку він хоче на ньому виконати (дієслово). Дієслово GET використовується, коли ви отримуєте деяку інформацію, нічого не змінюючи. У наші часи JSON є найкращим форматом даних для переміщення інформації через інтернет. Простіше кажучи, JSON - це зручний спосіб представити об’єкт JavaScript у вигляді рядка, тому його можна легко передати.
|
||||
|
||||
Створімо простий API, створивши маршрут, який відповідає JSON на шляху `/json`. Ви можете це зробити, як зазвичай, за допомогою метода `app.get()`. Усередині обробника маршруту використовуйте метод `res.json()`, передаючи об'єкт як аргумент. Це метод закриває цикл запит-відповідь, повертаючи дані. По суті, він перетворює дійсний об’єкт JavaScript object у рядок, потім встановлює відповідні заголовки, щоб повідомити браузеру, що ви використовуєте JSON, і надсилає дані назад. Допустимий об'єкт має звичайну структуру `{key: data}`. `data` може бути числом, рядком, вкладеним об'єктом або масивом. `data` також може бути змінною або результатом виклику функції, в цьому випадку вони будуть оцінені перед перетворенням у рядок.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Передайте об'єкт `{"message": "Hello json"}` у форматі JSON як відповідь на GET-запити до маршруту `/json`. Потім вказуючи вашому браузері `your-app-url/json`, ви повинні побачити повідомлення на екрані.
|
||||
|
||||
# --hints--
|
||||
|
||||
Кінцева точка `/json` має використовувати json-об'єкт `{"message": "Hello json"}`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/json').then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data.message,
|
||||
'Hello json',
|
||||
"The '/json' endpoint does not serve the right data"
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bf0
|
||||
title: Обслуговування статичного контенту
|
||||
challengeType: 2
|
||||
forumTopicId: 301518
|
||||
dashedName: serve-static-assets
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Як правило, HTML-сервер має один чи кілька каталогів, доступних для користувача. Туди можна помістити статичний контент, необхідних для Вашого застосунку (таблиці стилів, скрипти, зображення).
|
||||
|
||||
В Express цю функцію можна підключити за допомогою проміжного програмного забезпечення `express.static(path)`, де параметр `path` - це абсолютний шлях до файлу з цим контентом.
|
||||
|
||||
Якщо Ви ніколи не чули про підпрограмне забезпечення, не хвилюйтеся. Пізніше ми детально його розглянемо. Загалом, підпрограмне забезпечення — це функції, що перехоплюють маршрутизатори, прикріплюючи певну інформацію. Підпрограмне забезпечення підключається за допомогою методу `app.use(path, middlewareFunction)`. Перший аргумент `path` є необов'язковим. Якщо цей аргумент не передається, підпрограмне забезпечення буде виконуватися для всіх запитів.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Підключіть підпрограмне забезпечення `express.static()` до `/public` шляху з `app.use()`. Абсолютним шляхом до папки assets є `__dirname + /public`.
|
||||
|
||||
Тепер Ваш застосунок зможе обслуговувати CSS таблиці стилів. Зверніть увагу, що посилання на файл `/public/style.css` знаходиться у папці `/views/index.html` шаблону проєктування. Тепер Ваша головна сторінка виглядатиме краще!
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш застосунок обслуговуватиме файли з каталогу `/public` до шляху `/public`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/public/style.css').then(
|
||||
(data) => {
|
||||
assert.match(
|
||||
data,
|
||||
/body\s*\{[^\}]*\}/,
|
||||
'Your app does not serve static assets'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 587d7fb0367417b2b2512bee
|
||||
title: Запуск робочого експрес-серверу
|
||||
challengeType: 2
|
||||
forumTopicId: 301519
|
||||
dashedName: start-a-working-express-server
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У перших двох рядках файлу `myApp.js`, ви можете побачити, як легко створити об’єкт програми Express. Цей об’єкт має кілька методів, і ви багато із них вивчите за допомогою цих завдань. Одним із фундаментальних методів є `app.listen(port)`. Він повідомляє вашому серверу прослуховувати певний порт, переводячи його в робочий стан. З міркувань тестування нам потрібно, щоб програма працювала у фоновому режимі, тому ми для вас додали цей метод у файл `server.js`.
|
||||
|
||||
Давайте обслужимо наш перший рядок! В Express маршрути мають наступну структуру:`app.METHOD(PATH, HANDLER)`. METHOD - це метод http у нижньому регістрі. PATH - це відносний шлях на сервері (це може бути рядок або навіть регулярний вираз). HANDLER - це функція, яка викликає Express при узгодженні маршруту. Обробники приймають форму `function(req, res) {...}`, де req - об'єкт запиту, а res - об'єкт відповіді. Наприклад, обробник
|
||||
|
||||
```js
|
||||
function(req, res) {
|
||||
res.send('Response String');
|
||||
}
|
||||
```
|
||||
|
||||
буде обслуговувати рядок 'Рядок відповіді'.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Використовуйте метод `app.get()`, щоб обслужити рядок "Hello Express" для GET запитів, які відповідають шляху `/` (root). Переконайтеся, що ваш код працює, переглянувши журнали, а потім перегляньте результати у попередньому перегляді, якщо ви використовуєте Replit.
|
||||
|
||||
**Примітка:** Весь код для цих уроків слід додати між кількома рядками коду, з яких ми починали.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш додаток має обслуговувати рядок "Hello Express"
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url')).then(
|
||||
(data) => {
|
||||
assert.equal(
|
||||
data,
|
||||
'Hello Express',
|
||||
'Your app does not serve the text "Hello Express"'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 587d7fb2367417b2b2512bf7
|
||||
title: Обробка POST запитів за допомогою body-parser
|
||||
challengeType: 2
|
||||
forumTopicId: 301520
|
||||
dashedName: use-body-parser-to-parse-post-requests
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Крім GET, є ще одне спільне дієслово HTTP, це POST. POST - це типовий метод для надсилання даних клієнта з HTML формами. У методі REST, POST використовується для відправки даних, щоб створити нові елементи в базі даних (новий користувач або новий допис). Ви не зобов'язані мати базу даних у цьому проєкті, але ви все-таки дізнаєтесь, як опрацьовувати запити POST.
|
||||
|
||||
У таких запитах дані не з'являються в URL, він прихований у тілі запиту. Тіло є частиною HTTP-запиту, а також називається корисним навантаженням. Незважаючи на те, що дані не видимі в URL, це не означає, що вони приватні. Щоб зрозуміти чому, подивіться на необроблений вміст HTTP-запиту POST:
|
||||
|
||||
```http
|
||||
POST /path/subpath HTTP/1.0
|
||||
From: john@example.com
|
||||
User-Agent: someBrowser/1.0
|
||||
Content-Type: application/x-www-form-urlencoded
|
||||
Content-Length: 20
|
||||
|
||||
name=John+Doe&age=25
|
||||
```
|
||||
|
||||
Як ви можете побачити, тіло закодоване як рядок запиту. Це типовий формат, який використовується у HTML-формах. За допомогою Ajax, ви також можете використати JSON для обробки даних, що мають більш складну структуру. Існує також інший тип кодування: multipart/form-data. Цей файл використовується для завантаження бінарних файлів. У цій вправі ви будете використовувати тіло, кодоване посиланням. Щоб аналізувати дані, отримані з POST-запитів, необхідно встановити пакет `body-parser`. Цей пакет дозволяє використовувати низку підпрограмного забезпечення, який може декодувати дані в різних форматах.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Встановіть модуль `body-parser` до вашого `package.json`. Тоді `require` його у верхній частині файлу. Збережіть його у змінній під назвою `bodyParser`. Проміжне програмне забезпечення, що має обробити Url-закодовані дані, повертається за допомогою `bodyParser.urlencoded({extended: false})`. Передайте функцію, повернуту попереднім викликом типу `app.use()`. Зазвичай підпрограмне забезпечення потрібно встановити перед маршрутами, які залежать від нього.
|
||||
|
||||
**Note:** `extended` це опція конфігурації, яка вказує `body-parser`, який парсинг необхідно використати. Коли `extended=false` він використовує класичне кодування `querystring` бібліотеки. Коли `extended=true` він використовує `qs` бібліотеку для парсингу.
|
||||
|
||||
При використанні `extended=false`, значення можуть бути тільки рядками або масивами. Об'єкт повертається, коли використання `querystring` не успадковується прототипно від `Object` JavaScript за замовчування, і означає, що функції `hasOwnProperty` та `toString` не будуть доступні. Розширена версія дозволяє підвищити гнучкість даних, але вона перевершує JSON.
|
||||
|
||||
# --hints--
|
||||
|
||||
Проміжне програмне забезпечення 'body-parser' має бути встановлено
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/add-body-parser').then(
|
||||
(data) => {
|
||||
assert.isAbove(
|
||||
data.mountedAt,
|
||||
0,
|
||||
'"body-parser" is not mounted correctly'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 587d7fb1367417b2b2512bf2
|
||||
title: Використання .env-файлу
|
||||
challengeType: 2
|
||||
forumTopicId: 301521
|
||||
dashedName: use-the--env-file
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Файл `.env` - це прихований файл, який використовується для передачі змінних оточень у вашому додатку. Цей файл є таємним, ніхто, крім вас, не може отримати до нього доступ, та він може використовуватися для зберігання даних, які ви хочете залишити конфіденційними або прихованими. Наприклад, ви можете зберігати API-ключі з зовнішніх сервісів або URI вашої бази даних. Ви також можете використовувати його для зберігання параметрів конфігурації. Налаштовуючи параметри конфігурації, ви можете змінити поведінку вашої програми без необхідності переписувати код.
|
||||
|
||||
Змінні оточення доступні з додатку як `process.env.VAR_NAME`. Об'єкт `process.env` є глобальним об'єктом Node, а змінні передаються у вигляді рядків. Згідно з правилами, ідентифікатори змінних пишуться у верхньому регістрі, а слова поділяються знаком підкресленням. `.env` - це файл оболонки, тому вам не потрібно укладати імена або значення в лапки. Також важливо відзначити, що не має бути пробілу навколо знаку рівності, коли ви привласнюєте значення змінним, наприклад, `VAR_NAME=value`. Зазвичай ви ставите визначення кожної змінної в окремий рядок.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додаймо змінну оточення в якості параметра конфігурації.
|
||||
|
||||
Створіть файл `.env` в основі каталогу вашого проєкту та збережіть в ньому змінну `MESSAGE_STYLE=uppercase`.
|
||||
|
||||
Потім, в обробнику маршруту `/json` GET, який ви створили в останній задачі, перетворіть повідомлення об'єкта-відповіді у верхній регістр, якщо `process.env.MESSAGE_STYLE` дорівнює `uppercase`. Об'єкт відповіді має бути `{"message": "Hello json"}` або `{"message": "HELLO JSON"}`, в залежності від значення `MESSAGE_STYLE`.
|
||||
|
||||
**Примітка:** Якщо ви використовуєте Replit, ви не можете створити файл `.env`. Замість цього використовуйте вбудовану вкладку <dfn>SECRETS</dfn> для додавання змінної.
|
||||
|
||||
При локальній роботі вам знадобиться пакет `dotenv`. Він завантажує змінні середовища з вашого `.env` файлу в `process.env`. Встановіть його з `npm install dotenv`. Тоді, зверху вашого `myApp.js` файлу, оберіть імпортувати та завантажити змінні з `require('dotenv').config()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Відповідь кінцевої точки `/json` має змінюватися відповідно до змінної оточення `MESSAGE_STYLE`
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
$.get(getUserInput('url') + '/_api/use-env-vars').then(
|
||||
(data) => {
|
||||
assert.isTrue(
|
||||
data.passed,
|
||||
'The response of "/json" does not change according to MESSAGE_STYLE'
|
||||
);
|
||||
},
|
||||
(xhr) => {
|
||||
throw new Error(xhr.responseText);
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
/**
|
||||
Backend challenges don't need solutions,
|
||||
because they would need to be tested against a full working project.
|
||||
Please check our contributing guidelines to learn more.
|
||||
*/
|
||||
```
|
||||
Reference in New Issue
Block a user