В этом уроке мы напишем и запустим наш первый и простой веб-сервис. Это будет простое CRUD-приложение для создания меню и заказа мороженого в магазине. Более подробное объяснение этого урока можно найти в предыдущей части.

Полный код этой части можно найти здесь.

Давайте начнем!

Есть несколько инструментов, которые необходимо загрузить и установить заранее. Я также буду использовать эти инструменты при написании кода для этого урока.

NodeJS

Чтобы установить NodeJS, перейдите на официальную страницу NodeJS и загрузите стабильную версию NodeJS в разделе загрузок. Если вы используете, я буду использовать NodeJS версии 16.13.2, и я рекомендую вам загрузить и установить точно такую ​​же версию, чтобы не было проблем с несовместимостью на вашем собственном устройстве. Чтобы проверить, завершена ли установка, выполните следующую команду в терминале или командной строке.

node -v

Код Visual Studio

Чтобы установить код VS, перейдите на https://code.visualstudio.com и загрузите программное обеспечение для своего устройства. Ничего особенного, можно использовать любые другие редакторы кода. Однако, если вы используете код Visual Studio, я рекомендую вам также установить расширение Prettier, включить форматирование при сохранении и обязательно выбрать Prettier в качестве средства форматирования по умолчанию в настройках.

Кроме того, если вы используете Windows, как и я, и планируете использовать встроенный терминал VSCode, измените терминал по умолчанию в настройках на командную строку вместо powershell, чтобы избежать будущих проблем или несовместимости.

MongoDB + Компас MongoDB

Мы будем использовать MongoDB в последующих частях этого руководства, но не мешало бы установить его сейчас. Чтобы установить MongoDB, мы можем установить MongoDB Compass (приложение с графическим интерфейсом для простого управления MongoDB). Скачать стабильную версию можно здесь. При установке MongoDB Compass сама MongoDB также будет установлена ​​на вашем устройстве.

Почтальон

Я буду использовать Postman для тестирования наших API. Вы также можете использовать curl для тестирования API, но я действительно рекомендую Postman, так как нам проще управлять и сохранять наши запросы и ответы API. Инсталлятор можно найти здесь.

Git (необязательно)

Я буду использовать git только для того, чтобы сохранять версии моих обучающих кодов. Вам не обязательно использовать его, но приятно иметь. Я также не буду подробно рассказывать о том, как работает git. Просто подумайте об этом как об инструменте для экономии. Инсталлятор можно найти здесь.

Давайте уже перейдем к коду!

Сначала создайте папку для этого руководства в любом месте на своем компьютере. Я назову свою папку icecream-store, но вы также можете назвать папку как хотите. Назовем эту папку «папка приложения». Теперь откройте код Visual Studio и откройте папку приложения (Файл › Открыть папку…). Чтобы инициализировать приложение NodeJS, по умолчанию вы можете использовать следующую команду в своем терминале или командной строке.

npm init

Заполните необходимые поля значениями по умолчанию, и мы можем двигаться дальше. Теперь создайте новый файл в папке приложения и назовите его index.js. Внутри файла введите наши самые первые коды, как показано ниже.

index.js

console.log('Hello, World!');

Сохраните файл index.js. Что ж, это само собой разумеется, но как напоминание на будущее, каждый раз, когда мы вносим изменения в файл, просто сохраняйте его! Спамите эти кнопки CTRL+S. Теперь давайте запустим наш самый первый код, используя следующую команду в вашем терминале.

node index.js

И он должен вывести Hello, World! на консоль. Поздравляем! У вас есть код, и вы запускаете свое первое бесполезное приложение NodeJS! (Шучу, это не бесполезно, привет мировые программы — самые первые основы в любом учебнике по программированию).

Теперь давайте создадим наш первый веб-сервер, для этого нам нужно сначала установить Express. Используя NPM (менеджер пакетов узлов), просто запустите следующую команду в своем терминале.

npm install --save express

NPM загрузит экспресс из веб-репозитория NPM и установит его в папку node_modules внутри папки вашего приложения. Флаг «--save» сохранит экспресс как зависимость приложения внутри package.json. Теперь давайте изменим наш код в файле index.js для обслуживания веб-сервера.

index.js

const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res, next) => {
    res.send('Hello, World!');
});
app.listen(port, () => {
    console.log('listening to port', port);
});

Пояснение. В первой строке мы импортируем экспресс-библиотеку, используя ключевое слово require. Во 2-й и 3-й строке мы определили наше приложение и переменные порта. В четвертой строке мы определили нашу самую первую конечную точку API с путем «/» и методом GET, который отправляет «Hello, World!» текст в качестве ответа. И в последней строке мы запускаем приложение и заставляем его слушать переменную порта, которую мы определили.

Теперь перезапустите приложение снова. Советы. Чтобы остановить ранее запущенное приложение NodeJS, перейдите в терминал и нажмите кнопку CTRL+C. Затем снова запустите приложение с помощью команды node index.js.

Откройте приложение Почтальон. Создайте новый запрос методом GET и введите URL-адрес http://localhost:3000. Затем нажмите кнопку Отправить, чтобы получить ответ. Если все пойдет правильно, вы должны получить «Hello, World!» текст в качестве ответа.

Поздравляем еще раз! Вы только что создали свой первый hello world API. Я полагаю, что это все, что мы пройдем в этой части 1 руководства по NodeJS. Тем не менее, я хотел бы немного изменить настройки нашего проекта, чтобы мы могли легко развивать приложение дальше.

Во-первых, нам нужно изменить наш package.json. Package.json — это файл, который описывает наше приложение NodeJS, определяет сценарии для запуска NPM и список зависимостей. А пока просто скопируйте мой следующий package.json и просто перезапишите содержимое package.json в папке приложения.

пакет.json

{
    "name": "icecream-store",
    "version": "1.0.0",
    "description": "A RESTful web service app for ice cream store ordering",
    "main": "src/index.js",
    "scripts": {
            "build": "rimraf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files",
            "start": "npm run build && node dist/index.js",
            "start:dev": "nodemon"
    },
    "keywords": [
        "NodeJS"
    ],
    "author": "yourname",
    "license": "ISC",
    "devDependencies": {
        "@babel/cli": "^7.16.8",
        "@babel/core": "^7.16.10",
        "@babel/node": "^7.16.8",
        "@babel/preset-env": "^7.16.11",
        "nodemon": "^2.0.15",
        "rimraf": "^3.0.2"
    },
    "dependencies": {
        "express": "^4.17.3"
    }
}

Пояснение. Мы добавили несколько новых скриптов для запуска этого приложения. Мы также добавили несколько новых зависимостей для разработчиков. Раньше, когда мы изменяли файл index.js, нам приходилось вручную перезапускать наше приложение NodeJS с помощью кнопки CTRL+C для завершения. Это так неудобно. Вместо этого мы будем использовать nodemon для перезапуска приложения каждый раз, когда будут какие-либо изменения в файлах в папке нашего приложения. Чтобы сделать nodemon функциональным, нам нужно добавить файл nodemon.json в папку нашего приложения. Поэтому создайте файл с именем nodemon.json и скопируйте следующее.

nodemon.json

{
  "restartable": "rs",
  "verbose": true,
  "execMap": {
    "js": "node_modules/.bin/babel-node"
  },
  "watch": ["src/"],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "js,json"
}

Пояснение. Файл nodemon.json — это, по сути, конфигурация того, как должен работать nodemon. В этом файле мы указываем nodemon следить за папкой src/ внутри папки нашего приложения (которую мы еще не создали) и выполнять babel-node для запуска нашего приложения NodeJS. Babel-node — наше следующее обсуждение.

Babel — это компилятор JavaScript. Зачем использовать Бабель? Разве раньше мы не запускали javascript только с помощью команды node index.js? NodeJS поставляется со встроенным компилятором commonjs (это старый стиль javascript). С другой стороны, Babel поддерживает последние версии синтаксиса javascript.

Зачем использовать новейший синтаксис javascript?
Почему бы и нет?
Почему мы должны ограничивать себя старым синтаксисом?
Информационные технологии в настоящее время развиваются так быстро, что наши нынешние технологии скоро устареют. Можно также идти в ногу с новыми технологиями.

Чтобы заставить Babel работать, нам также нужно определить аналогичный файл конфигурации. Эта конфигурация определена в файле .babelrc. Итак, теперь нам нужно создать файл с именем .babelrc(обратите внимание на точку .символвпереди)внутри app и скопируйте следующий код.

.babelrc

{
  "presets": ["@babel/preset-env"]
}

Предустановка @babel/preset-env позволит нам использовать последний доступный в настоящее время синтаксис javascript.

Теперь, чтобы связать все воедино, нам нужно установить nodemon и babel. Ранее мы определили nodemon и babel как зависимости в нашем файле package.json. Теперь нам просто нужен NPM для установки этих зависимостей. Чтобы установить определенные зависимости, используйте следующую команду в терминале.

npm install

Наконец, рекомендуется переместить исходный код в папку src. Создайте новую папку в папке нашего приложения с именем src и переместите наш файл index.js в папку src. Структура папок вашего приложения теперь должна выглядеть примерно так, как показано в следующем блоке кода.

+---src
|   \---index.js
+---.babelrc
+---nodemon.json
+---package-lock.json
+---package.json

Чтобы немного продемонстрировать так называемый «последний синтаксис javascript», давайте изменим наш экспресс-код require в файле index.js. В синтаксисе JavaScript ES6 мы используем ключевое слово import вместо require для импорта библиотеки. Измените первую строку на следующий код.

источник/index.js

import express from 'express';

Давайте попробуем запустить его снова, на этот раз с помощью nodemon. Чтобы запустить скрипт, который мы определили для разработки, используйте следующую команду.

npm run start:dev

Эта команда запустит скрипт start:dev, который мы определили в нашем package.json, который запускает nodemon. Если все работает хорошо, вы должны увидеть что-то вроде следующего снимка экрана в консоли терминала.

Давайте подтвердим, что все работает. Попробуйте отправить тот же запрос GET http://localhost:3000 еще раз в вашем почтальоне и убедитесь, что вы получаете Hello, World! как ответ.

Вот и все, это обертка! В следующей части мы продолжим разработку нашего приложения с реальными полезными API. Нажмите здесь!

Вы можете увидеть полный код первой части в моем общедоступном репозитории на github.
Нажмите здесь!

Спасибо и надеюсь, вам понравится читать. Есть ли какие-либо ошибки или части, которые я не объяснил должным образом? Есть ли что-то, что я должен улучшить?

Если хотите, оставьте заметку для автора и похлопайте, чтобы помочь развитию канала. :)