Создание средства сокращения URL-адресов с помощью ReactJS + Typescript + NodeJS + MongoDB + Docker с нуля

В этой статье будет 2 части:

ЧАСТЬ ПЕРВАЯ: Создание внутренней части с использованием NodeJS, Express, Typescript и MongoDB.
ЧАСТЬ ВТОРАЯ:Создание внешней стороны с использованием ReactJS с хуками и Typescript.

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

Это небольшое приложение будет состоять из создания сокращателя URL-адресов, преобразующего простой URL-адрес в короткий URL-адрес.

Вот так, народ!

Краткое уведомление из определения поиска Google

Узел. js (Node) — это платформа разработки с открытым исходным кодом для выполнения кода JavaScript на стороне сервера. Node полезен для разработки приложений, требующих постоянного подключения браузера к серверу, и часто используется для приложений реального времени, таких как чат, новостные ленты и веб-push-уведомления.

Express.js — это модульная веб-инфраструктура для Node.js. Он используется для упрощения создания веб-приложений и служб. Express.js упрощает разработку и упрощает написание безопасных, модульных и быстрых приложений.

TypeScript — это строго типизированный, объектно-ориентированный компилируемый язык. Он был разработан Андерсом Хейлсбергом (дизайнером C#) в Microsoft. … TypeScript — это надмножество типов JavaScript, скомпилированное в JavaScript. Другими словами, TypeScript — это JavaScript плюс некоторые дополнительные функции.

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

Настройте свою среду

NODEJS
Если вы не установили NodeJS на свой компьютер, установите последнюю стабильную версию NodeJS ЗДЕСЬ.

После этого откройте консоль и проверьте правильность установки NodeJS. С помощью команды node -v

YARN
Я настоятельно рекомендую использовать Yarn в качестве менеджера зависимостей, поэтому вы можете скачать его по следующим ссылкам:

Windows
MacOS
Linux (Debian и Ubuntu)

DOCKER
Загрузите и установите последнюю версию Docker ЗДЕСЬ.

Запуск проекта

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

В консоли перейдите в папку urlshortener-backend и запустите yarn init, чтобы создать исходный файл package.json.

Теперь мы можем установить некоторые зависимости:
yarn add typescript -D

Пожалуйста, после этого вам нужно создать два файла src/index.ts, docker-compose.yml
Ваша структура папки должна быть такой:

urlshortener-backend
├── src
   ├── index.ts
├── docker-compose.yml
├── package.json

Теперь приступим к работе с экспрессом, далее нужно установить экспресс: yarn add express

Пожалуйста, установите также пакет для добавления набора текста в экспресс:
yarn add @types/express -D

Теперь нам нужно установить конфигурации для компиляции кода из typescript в javascript, затем мы можем установить это с помощью команды yarn tsc --init . После этого был создан новый файл с именем tsconfig.json

Найдите «outDir» и укажите путь “outDir”: “./dist” . Таким образом, скомпилированные файлы javascript попадают в папку dist. По завершении запустите yarn tsc, чтобы создать папку с индексным файлом, транспилированным в javascript.

Давайте теперь установим зависимость yarn add ts-node-dev -D в качестве зависимости разработки. Таким образом, мы можем скомпилировать наше приложение TS и перезапустить его при изменении файлов.

Чтобы упростить приложение, давайте создадим скрипт на package.json для быстрого запуска и переноса кода. Вставьте "dev:server": "ts-node-dev --respawn --transpileOnly"

Внутри ofsrc/index.ts вы можете создать начальный маршрут для тестирования:

import express from "express";
const app = express();
app.get("/", (req, res) => {
  return res.send("First route");
});
app.listen(3001);

После этого попробуйте запустить команду yarn dev:server . После этого мы можем получить доступ к вашему маршруту на http://localhost:3001.

Организация папок

Создадим несколько файлов и папок:

urlshortener-backend
├── src
   ├── index.ts
   ├── app (Folder)
      ├── controllers (Folder)
      ├── models (Folder)
   ├── routes.ts (File)
   ├── database.ts (File)
├── docker-compose.yml
├── package.json

Создание и запуск контейнера Docker для предоставления базы данных MongoDB.

Я попытался оставить файл docker-compose.yml как можно более плавным.

Пожалуйста, используйте это docker-compose.yml

После этого сохраните файлы и запустите на своем терминале или консоли docker-compose up, чтобы запустить сервер. Убедитесь, что ваш докер установлен в соответствии с предыдущим подходом.

Создание вашей базы данных

Я настоятельно рекомендую использовать Robo 3T для управления вашей базой данных Mongo.
Нажмите здесь, чтобы загрузить. В этом примере нам не понадобится полная версия, называемая студией, достаточно одной.

После этого установите Robo 3T и откройте его.

В первом окне нажмите на опцию Создать. После этого вы можете заполнить поля, как на изображении ниже.

Name = имя вашей базы данных
Address = адрес базы данных, в нашем случае мы используем docker на локальном хосте
Port = 27017 (оно было определено в docker-compose)

После того, как вы нажмете «Сохранить», вы будете перенаправлены на экран, и, пожалуйста, обратите внимание на левую сторону, там есть такой каталог:

Итак, щелкните правой кнопкой мыши и выберите «Создать базу данных» и дайте ей имя. В нашем случае я предлагаю использовать название сокращатель URL.

Хорошо, мы заканчиваем эту часть здесь, в этом простом руководстве мы не будем подробно изучать Robo 3T как инструмент, но вы можете найти очень хорошее содержание, если хотите погрузиться в него.

Установка Мангуста

Mongoose — это библиотека моделирования объектных данных (ODM) для MongoDB и Node.js. Он управляет отношениями между данными, обеспечивает проверку схемы и используется для перевода между объектами в коде и представлением этих объектов в MongoDB.

ИСТОЧНИК: https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/

Давайте установим мангуст. Перейдите в свой терминал в папке вашего проекта и напишите yarn add mongoose

Теперь нам нужно добавить тип машинописного текста yarn add @types/mongoose -D в качестве зависимости разработки.

Настройка мангуста

Внутри файла database.ts давайте настроим Mongoose для подключения к MongoDB.

import mongoose from "mongoose";
export default () =>   
  mongoose.connect("mongodb://localhost:27017/urlshortener", {
    useUnifiedTopology: true,
    useCreateIndex: true,
    useNewUrlParser: true
  });

В основном мы импортируем мангуста и устанавливаем URL-адрес базы данных.

Модели, контроллеры и маршруты

Мы можем создать нашу модель models/Url.js

Нам потребуется установить другую библиотеку с именем shortId.
yarn add shortid

Эта библиотека будет использоваться для создания уникальных идентификаторов, которые будут служить ссылкой для создания нашего urlCode.

В этом случае у нас есть исходный URL-адрес, код URL-адреса и количество просмотров.
По умолчанию очень важно сохранить дату регистрации, тогда мы будем использовать createdAt.

Давайте создадим наш контроллер, затем создадим файл /controllers/UrlController.ts

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

С этим материалом мы можем начать создавать наши маршруты на routes.ts.

В основном у нас есть 3 маршрута:

POST /url этот маршрут зарегистрирует новый URL.
GET /list этот маршрут перечисляет все URL-адреса.
GET /:urlCode этот маршрут отвечает за поиск более короткого URL-адреса на основе его идентификатора.

Доработка бэкенда

Внутри нашего index.ts теперь мы показываем

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

Итак, пожалуйста, установите:
yarn add cors
yarn add @types/cors -D

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

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

Мы продолжим работу с сокращателем URL во внешнем интерфейсе в следующей статье.

Спасибо за ваше время, ребята, увидимся в следующих статьях.

ИСТОЧНИК: https://github.com/vitoraguila/urlshortener-backend

Создание средства сокращения URL-адресов с помощью ReactJS + Typescript + NodeJS + MongoDB + Docker с нуля — «Часть…