Создание Node.js - экспресс-приложение (covid19-updates) | Часть-1

Мозговой штурм

На прошлой неделе Dev.to объявил об акатоне в сотрудничестве с Twilio, чтобы создать веб-приложение с использованием любого из API Twilio, поэтому я решил принять участие и создать что-то в это время карантина, что поможет мне изучить новые технологии и создать проект. для демонстрации.

Итак, я начал мозговой штурм в поисках идеи создать приложение, и именно тогда я услышал, как моя мама сказала, что у нас есть привилегия иметь Интернет-сервис, который помогает нам получать последние новости и обновления в период изоляции Covid-19, но для тех, кто этого не делает. У меня есть такая привилегия, трудно получить информацию о новых случаях в их штате, а также в стране. И бинго !! У меня возникла идея создать свое веб-приложение.

Я решил создать веб-приложение, в котором пользователь может один раз зарегистрироваться по своему номеру телефона и получать ежедневные обновления о новых делах в своем регионе, а также в стране с помощью Программируемого SMS API Twilio.

Выбор Tech-Stack

Пришло время выбрать Tech-Stack, который я буду использовать для создания этого веб-приложения. В прошлом я создавал веб-приложения с использованием Django и Flask (веб-фреймворки Python), и я в значительной степени привык к созданию серверной части в Python, но я хотел изучить новый стек, поэтому я решил использовать Node.JS и [Express Framework] (https://expressjs.com/) для этого веб-приложения и для базы данных, я использовал базы данных SQL ( MySql, PostGreSql) в прошлом, и я хотел изучить базы данных NoSql, поэтому я решил изучить [MongoDB] (https://www.mongodb.com), реализовав его в этом проекте. Вот и все. Я был готов с идеей и технологиями для использования в уме, и я начал искать и изучать основы этих технологий здесь и там.

Некоторые рекомендуемые ресурсы для начала изучения Node.Js, Express и MongoDB (предварительное условие: Vanilla Javascript)

1. Учебник по Node.Js для начинающих | Dev Ed
2. Создайте спокойный API с помощью Node.js Express и MongoDB | Dev Ed
3. Экспресс-руководство - Документы MDN
4. Ускоренный курс MongoDB | Traversy Media

Создание Package.json и установка зависимостей

После прочтения всех руководств и документации пришло время запачкать руки и написать код.

Любое приложение узла обычно запускается с создания файла package.json. В этом файле хранятся все зависимости, используемые в вашем приложении, и вся информация о вашем проекте. Это очень важно, поскольку вы не можете загрузить все установленные вами модули узлов онлайн, скажем, Github или GitLab. Таким образом, с помощью этого файла вы можете установить все зависимости на ходу.

Вы можете создать такой файл, написав следующий код в терминале.

$ npm init

Теперь давайте установим Express и некоторые другие полезные пакеты npm, написав следующую строку в терминале.

$ npm install express nodemon mongoose

Mongoose - это пакет объектного моделирования для node.js, который помогает нам подключиться к нашей базе данных MongoDB и создать модель для нашей базы данных.
А nodemon - это инструмент, который помогает разрабатывать приложения на основе node.js путем автоматического перезапуска приложение узла при обнаружении изменений файла в каталоге.

Как только эти пакеты будут установлены, вы можете проверить свой «package.json», и вы увидите, что в зависимостях хранятся эти пакеты вместе с их установленными версиями.

Создание экспресс-сервера и запись первого маршрута

После установки экспресса я начал писать свой первый маршрут на экспрессе в файле app.js.

// Importing express in our app
const express = require(‘express’); 
// Creating express app instance
const app = express.app();
//First Get Route
app.get(‘/’, (req,res) => {
 res.send(“Hello World. This is my first route in express!”)
});
// Start listening on port 3000.
app.listen(3000, () => console.log(‘Server Up And Running. Listening On Port 3000’) );

Теперь мы можем запустить этот скрипт со следующим кодом в терминале, и он будет работать нормально.

$ node app.js

Но, как я уже упоминал ранее, мы будем использовать nodemon, чтобы нам не приходилось останавливать и перезапускать наш сервер после каждого изменения, поэтому теперь мы добавим сценарий npm в наш файл `package.json`, как показано ниже. .

“start”: “nodemon app.js”

А теперь все, что нам нужно сделать, это написать npm start
, и nodemon будет запускать наш сервер всякий раз, когда мы изменяем любой файл в нашем проекте.

Затем, посетив http://localhost:3000, я мог видеть, что мой сервер работает, с моим ответом на маршрут индекса (‘/’) как есть.

Но мы не хотим просто отправлять однострочные ответы на нашем веб-сайте, мы хотим отправлять стилизованные html-страницы нашим пользователям. Мы можем сделать это путем рендеринга HTML-файлов с использованием множества различных движков шаблонов, таких как Jade, EJS, Pug, Усы и т. Д.

Визуализация HTML-файлов с использованием шаблонизатора EJS

Я решил использовать EJS, потому что в этом приложении мне не понадобится сложный интерфейс. Чтобы использовать EJS, сначала мы должны установить EJS с помощью npm.

$ npm install ejs express-ejs-layouts

Этот пакет express-ejs-layouts помогает нам создавать блоки кода HTML и использовать их в различных файлах HTML для уменьшения избыточности кода. Например, мы можем создать базовый макет, в котором мы можем создать базовую структуру HTML, а затем надеть их. Нет необходимости повторять теги head, title, meta, body снова в каждом файле.

Чтобы использовать EJS и express-ejs-layout, нам нужно добавить следующие строки в наш файл app.js

const expressLayouts = require(‘express-ejs-layouts’);
app.set(‘view engine’, ‘ejs’);
app.use(expressLayouts);

Теперь мы можем отображать HTML-файлы в нашем приложении, а с помощью EJS мы также можем использовать переменные в нашем HTML-коде. Теперь мы можем написать HTML-код в нашем ответе на маршрутизацию, но подождите, нам не следует смешивать интерфейс и серверную часть в одном файле, верно? Потому что это сделает задачу отладки непосильной, и наш код будет нечитаемым.

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

Каталог проектов реструктуризации

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

Ниже представлен реструктурированный каталог проекта.

covid19-updates/
 views/
  index.ejs 
 routes/
  index.js
 app.js
 package.json

Нам также придется внести некоторые изменения в наш файл app.js. Нам нужно будет установить каталог представлений, чтобы наш сервер знал, где искать наши HTML-файлы, которые мы хотим отобразить, а также нам нужно будет импортировать маршрут в файл app.js. Давайте посмотрим, как выглядит наш файл app.js вроде после этих изменений.

// Importing express in our app
const express = require(‘express’); 
// Creating express app instance
const app = express.app();
const expressLayouts = require(‘express-ejs-layouts’);
app.set(‘views’,__dirname + ‘/views’);
app.set(‘view engine’, ‘ejs’);
app.use(‘expressLayouts’);
// To serve Route
require(‘./routes/index’)(app);
// Started listening on port 3000.
app.listen(3000, () => console.log(‘Server Up And Running. Listening On Port 3000’) );

И теперь в routes/index.jsfile нам нужно будет экспортировать модуль, который мы создали для нашего маршрута index ('/'), используя module.exports.
Примечание: в node.js обрабатывается каждый файл как модуль.

Подробнее о модулях в узле читайте здесь.

module.exports = {
 app.get(‘/’(req,res) => {
 res.render(‘index.ejs’);
 });
}

Тем не менее, использование промежуточного программного обеспечения маршрутизатора для обслуживания маршрутов с одним и тем же префиксом является лучшей практикой в ​​экспресс-приложении.
И что такое, черт возьми, Средние товары? Что ж, это уже отдельная статья. На данный момент мы готовы с нашим индексным маршрутом с файлом HTML в качестве ответа !!

Полный код можно найти в этом репозитории:

Спасибо за чтение!! #HappyCoding 👩‍💻 👨‍💻