Создаем простое веб приложение при помощи Node.js

 

Вам нужно создать простое веб приложение? Не знаете, что выбрать из многообразия предлагаемых сегодня инструментов и технологий?

Мы объясним, расскажем и покажем на примере, как это сделали бы мы.

Начнем с самого начала:

 

ЧТО ТАКОЕ ПРОСТОЕ ПРИЛОЖЕНИЕ?

Простое приложение предполагает, что:

  • могут использоваться операции CRUD (создать, прочесть, обновить, удалить) без сложной логики endpoint (конечных точек);

Конечная точка (англ. endpoint) – это URL (единый указатель ресурса), а проще говоря, адрес местонахождения ресурса в сети Интернет. Этот адрес использует клиент, чтобы получить доступ к ресурсу.

  • отсутствует разделение на роли;
  • отсутствует система аутентификации;
  • не используется библиотеки, расширяющие язык (babel, typescript).

 

ВЫ ХОТИТЕ СОЗДАТЬ ИМЕННО ТАКОЕ ВЕБ-ПРИЛОЖЕНИЕ?

Тогда наш совет – используйте JavaScript. Node.js. Express.

 

ПОЧЕМУ JAVASCRIPT?

Разберемся:

  • JavaScript изначально задумывался как простой язык, который могли бы использовать не только программисты. Задумка удалась: на данный момент у нас есть несложный  язык для реализации как простых , так и сложных продуктов.
  • JavaScript обеспечивает динамичность страницы. Анимация, интерактивные кнопки и графические элементы: мы уже с трудом представляем себе приложения без всего этого.
  • с одной стороны, JavaScript  – это клиентский язык. Клиентом в этом случае является браузер, которые интерпретирует код приложения и исполняет его. Интерпретатор кода встроен во все популярные браузеры, то есть в плане поддержки никаких ограничений не существует.
  • с другой стороны, JavaScript можно использовать и на стороне сервера благодаря платформе Node.js, о которой мы поговорим позже.

 

Исходя из всего этого, неудивительно, что JavaScript стабильно занимает позицию самого используемого языка программирования

statistics

Источник

 

Согласно результатам опроса Stackoverflow, в котором в 2017г. участвовали более 64 000 разработчиков,  JavaScript уверенно лидирует среди наиболее часто используемых языков программирования (61,9%).

Отметим:

JavaScript сохраняет за собой первое место в течение пяти лет подряд. А это уже о чем-то говорит.

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

Angular, React, jQuery, Vue, Lodash – о них много говорят и спорят, но, главное, их успешно используют, и они выполняют свое предназначение.

 

ЧТО ТАКОЕ NODE.JS?

  • По сути, это среда программирования, в которой созданы условия для применения JavaScript как серверного языка. То есть разработчик может использовать JavaScript и для стороны сервера, и для стороны клиента, и ему не нужно переключаться на специфику другого языка программирования, и при этом сохраняется формат данных.

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

  • Согласно статистике использования Node.js для веб-сайтов, доля применения платформы стабильно увеличивается:

 

statistics 2

Использование Node.js для веб-сайтов, 5 октября 2017г., W3Techs.com

 

  • При помощи Node.js, можно создавать практически любые веб-приложения, кроме, разве, сложных вычислений. Хотя сложные вычисления всегда можно сделать на другом языке, а потом предоставить эти данные для использования и манипулирования ими уже на JavaScript. Но мы сейчас говорим о простом приложении.
  • Специфической областью применения платформы Node.js является микросервисная архитектура. То есть Node.js оптимально использовать для приложений, которые разбиты на небольшие модули (лента новостей, чат, магазин и т.д.). При этом каждый модуль не зависит друг от друга, но все вместе они составляют единую структуру.
  • Дополнительное преимущество заключается в том, что вокруг Node.js образовалось развитое сообщество. Благодаря этому доступна хорошая документация, а также существует большое количество готовых примеров для использования, фреймворков и библиотек, которые позволяют облегчить и ускорить разработку.

 

Согласитесь, неразумно отказываться от предлагаемых возможностей в виде готовых решений и писать код полностью вручную. Это сложно, долго, нерационально. Тем более, что мы говорим о простом приложении, а не о чем-то сложном и уникальном.

В сети предлагается множество пошаговых инструкций, которые подробно описывают создание веб-приложения при помощи Node.js. Какие-то из них рассчитаны на подготовленных разработчиков, мы же предлагаем рассмотреть простой пример разработки на Node.js для начинающих программистов и для тех, кто не силен в программировании, но кому интересна логика процесса.

 

ПОДГОТОВКА

Чтобы начать работу с Node.js, нужно, как минимум, установить Node.js.

Процедура несложная и не отнимет много времени. Используйте один из вариантов установки, предлагаемых на официальном сайте Node.js.

Вместе с Node.js автоматически устанавливается менеджер пакетов npm.

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

В нашем примере мы будем использовать систему управления базами данных (СУБД) MongoDB. Так же как и в случае с Node.js, на официальном сайте продукта есть подробная документация и инструкция по установке.

 

Для создания простого приложения нам понадобятся:

  • фреймворк для создания каркаса приложения (Express);
  • драйвер для системы управления базами данных MongoDB;
  • инструмент (пере-) запуска веб-сервера (nodemon).

Примечание:

Благодаря сервисной программе nodemon, сервер будет автоматически перезапускаться при каждом изменении кода.

 

EXPRESS

Почему именно этот фреймворк?

При своей минималистичности и легкости он предлагает весь необходимый набор функций для веб-приложения.

 

Чтобы создать каркас приложения при помощи этого фреймворка, можно использовать генератор приложений Express.

Перейдите по ссылке и вы увидите, насколько все просто.

В документации описана последовательность действий и команд и показаны результаты их выполнения.

 

Генератор Express – это одна из возможностей создания приложения с использованием Express.

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

Никто не даст вам конкретных указаний о том, что и как именно нужно сделать. Структура директории, количество файлов, подключаемые внешние модули: выбор остается за вами.

 

Теперь посмотрим, как все описанное выше реализуется на примере.

 

ПРИМЕР

  • Создаем папку с будущим проектом, переходим в нее и выполняем инициализацию проекта, отвечая на вопросы установщика.

Для этого используем следующие команды:

mkdir simple-api && cd simple-api && npm init

 

  • Потом устанавливаем необходимые модули:

npm i express mongodb body-parser

 

  • Устанавливаем инструмент для автоматического перезапуска сервера, который существенно облегчит процесс разработки:

npm i nodemon –save-dev

 

  • Когда все нужные нам модули установлены, создаем файл index.js.

Здесь мы подключаем необходимые зависимости (сторонние коды, которые будет использовать наше приложение).

 

  • Теперь указываем порт прослушивания (цифровое обозначение процесса получателя запроса), чтобы сервер начал слушать  HTTP-запросы (запросы к серверу на какое-либо действие, которые поступают от клиента (браузера) по протоколу HTTP.

// index.js
const express = require(‘express’);
const app = express();
app.listen(3333, () => {
 console.log(‘server started!’);
});

 

  • Запускаем сервер при помощи следующей команды:

nodemon index.js

 

  • Наш сервер запущен. Проверяем его работу и для этого обращаемся к нему с запросом из любого браузера.

Для этого вводим URL: http://localhost:3333.

 

Вторая возможность проверить работу сервера: использование программы Postman.

Postman – это специальная программа, которая облегчает разработчикам создание, тестирование и мониторинг API. С ее помощью можно направлять на сервер запросы, а также настраивать параметры запросов и тестировать работу приложения.

 

postman get

 

В нашем случае нет зарегистрированных endpoints, поэтому сервер пока возвращает статус 404 и HTML страницу с ошибкой. Но, главное, что мы выяснили – сервер запущен.

Сейчас настал момент вернуться к типам  HTTP-запросов: изначально (когда протокол HTTP только появился) в отношениях между клиентом и сервером подразумевалось только то, что клиент хочет получить ресурс (GET).

По мере того, как система отношений клиент-сервис усложнялась, появился подход REST (REpresentational State Transfer). Он предусматривает использование разных HTTP-методов для разных действий: POST, GET, PUT, PATCH, DELETE.

В зависимости от того, что именно будет делать приложение, настраиваем endpoint для выполнения нужных нам запросов.

 

  • Cоздадим первую endpoint в папке app/. Логика в данном случае простая: мы хотим обратиться к серверу по адресу /books и получить от него определенный ответ:

// api/books.js
module.exports = function(app) {
 app.get(‘/books’, (req, res) => {
   res.send(‘Response’)
 });
};

 

  • Допустим, мы не хотим в нашем приложении ограничиваться одной endpoint, а хотим использовать несколько (хотим создавать, читать, обновлять и удалять данные), тогда подключаем все обработчики, которые помогут реализовать эти действия, в одном файле api/index.js:

// api/index.js
const apiBooks = require(‘./books’);
module.exports = function(app) {
 apiBooks(app);
 // other routes
};

 

  • Когда первая endpoint написана, мы ее регистрируем и проверяем:

// index.js
const express = require(‘express’);
const app = express();
// register endpoint
require(‘./api/index’)(app);
app.listen(3333, () => {
 console.log(‘server started!’);
});

 

GET RESPONSE

 

  • Перед тем как перейти к другим endpoints, подключаем модуль body-parser (который будет отвечать за обработку запросов) и указываем формат входных и выходных данных endpoints – JSON:

// index.js
const express = require(‘express’);
const app = express();
// parse application/json
app.use(require(‘body-parser’).json());
// register endpoints
require(‘./api/index’)(app);
app.listen(3333, () => {
 console.log(‘server started!’);
});

 

  • Теперь устанавливаем соединение с базой данных “test”, используя заранее установленный драйвер mongodb. После того как соединение с БД установлено – передадим объект database вторым параметром в регистрируемые роуты:

// index.js
const express = require(‘express’);
const MongoClient    = require(‘mongodb’).MongoClient;
const app = express();
// parse application/json
app.use(require(‘body-parser’).json());
// register endpoints
require(‘./api/index’)(app, database);
MongoClient.connect(‘mongodb://localhost:27017/test’, (err, database) => {
 if (err) return console.log(err)
 app.listen(3333, () => {
   console.log(‘server started!’);
 });
})

 

  • Дальше мы можем писать endpoint для создания (CREATE) новой записи в БД. Запись имеет поля author, title, text.

Логика создания такой endpoint тоже очень простая:

  • получаем данные в формате JSON и формируем объект book;
  • вставляем объект в коллекцию books;
  • получаем результат: либо произошла ошибка, либо создан документ;
  • отправляем результат пользователю.

// api/books.js
module.exports = function(app, database) {
 …
 app.post(‘/books’, (req, res) => {
   const book = {
     author: req.body.author,
     title: req.body.title,
     text: req.body.text
   };
   database.collection(‘books’).insert(book, (err, result) => {
     if (err) {
       res.send(err);
     } else {
       res.send(result.ops[0]);
     }
   });
 })
};

 

postman post

 

  • Создаем endpoint для получения (READ) записи из БД.

Логику вы уже можете предположить самостоятельно:

  • используем id из параметров запроса и формируем запрос;
  • отправляем запрос в БД;
  • обрабатываем результат: либо произошла ошибка, либо получаем документ с данными;
  • отправляем результат пользователю.

// api/books.js
module.exports = function(app, database) {
 …
 app.get(‘/books/:id’, (req, res) => {
   const ObjectID = require(‘mongodb’).ObjectID;
   const id = req.params.id;
   const query = { ‘_id’: new ObjectID(id) };
   database.collection(‘books’).findOne(query, (err, result) => {
     if (err) {
       res.send(err);
     } else {
       res.send(result);
     }
   });
 });
};

 

get postman

 

  • Аналогичным путем создаем endpoint  для обновления (UPDATE) записи в БД:
  • используем id из параметров запроса и формируем запрос;
  • получаем данные в формате JSON и формируем
    объект book;
  • обновляем документ в БД;
  • обрабатываем результат: либо произошла ошибка, либо получаем статус операции;
  • отправляем результат пользователю.

// api/books.js
module.exports = function(app, database) {
 …
 app.put(‘/books/:id’, (req, res) => {
   const ObjectID = require(‘mongodb’).ObjectID;
   const id = req.params.id;
   const query = { ‘_id’: new ObjectID(id) };
   const body = {
     author: req.body.author,
     title: req.body.title,
     text: req.body.text
   };
database.collection(‘books’).update(query, body, (err, result) => {
     if (err) {
       res.send(err);
     } else {
       res.send(result);
     }
   });
 });
};

 

postman ok

 

А также создаем endpoint для удаления (DELETE) записи:

  • используем id из параметров запроса и формируем запрос;
  • удаляем документ из БД;
  • обрабатываем результат: либо произошла ошибка, либо получаем статус операции;
  • отправляем результат пользователю.

// api/books.js
module.exports = function(app, database) {
 …
 app.delete(‘/books/:id’, (req, res) => {
   const ObjectID = require(‘mongodb’).ObjectID;
   const id = req.params.id;
   const query = { ‘_id’: new ObjectID(id) };
   database.collection(‘books’).remove(query, (err, result) => {
     if (err) {
       res.send(err);
     } else {
       res.send(result);
     }
   });
 });
};

 

postman delete

 

Мы рассказали о том, как создать простое приложение с использованием Node.js. Используя это приложение, как основу, можно расширять его функционал за счет дополнительных модулей. Но это уже зависит от того, для чего вы планируете использовать будущий проект.

 

Остались вопросы? Нужна помощь в разработке? Чем быстрее вы свяжитесь c Umbrella, тем быстрее ваши идеи будут воплощены в реальность.

 

Фото: Shutterstock.com

 

 


Ещё

  • Выбирай, но проверяй: нанимайте топовых Angular разработчиков
    Выбирай, но проверяй: нанимайте топовых Angular разработчиков
      Выбирая разработчиков, вы выбираете не только технологии и скиллы, но инструменты и процессы, которые они используют. В этой статье вы узнаете о том, на какие моменты стоит обращать внимание при найме AngularJS и Angular специалистов, чтобы они соответствовали конкретным задачам вашего проекта и вывели ваш продукт на топовый уровень.   Проекты на Angular: от нуля …
  • Грядут перемены: новые возможности мобильных приложений в эпоху 5G
    Грядут перемены: новые возможности мобильных приложений в эпоху 5G
      Люди всегда стремились передавать информацию на большие расстояния. В древности это были сигнальные костры и почтовые голуби. В век технологий появились более совершенные способы: интернет и мобильная связь, которые постоянно эволюционируют. Одним из таких витков эволюции стали разработки в области 5G. 5G – новое поколение мобильной связи, открывающее неизведанные ранее горизонты как для пользователей, …
  • Мобильные платежи и безопасность: как избежать рисков
    Мобильные платежи и безопасность: как избежать рисков
      Электронная коммерция активно применяет мобильные приложения для платежей. Это гораздо удобнее и безопаснее, чем оплата наличными. Технологии, делающие акцент на удобстве пользователей, всегда будут привлекать к себе внимание клиентов. Безопасные мобильные платежи значительно улучшат качество обслуживания клиентов вашего бизнеса, оптимизируют процессы и сократят затраты. Несомненно, мобильные платежи будут продолжать эволюционировать. У них есть все предпосылки …