Ето как да създадете персонализиран инструмент за съкращаване на URL адреси с помощта на Node, MongoDB и Express.

Въведение

Инструментът за съкращаване на URL адреси е прост уеб инструмент, който взема дълъг URL адрес и го опростява до по-малки, управляеми връзки, което позволява по-лесно управление на онлайн трафика. Най-често използваните средства за съкращаване на URL адреси са:

  • bitly.com
  • tinyurl.com

В тази история ще създадем наш собствен инструмент за съкращаване на URL адреси с помощта на Node.js и Express, с MongoDB като наша база данни.

Отидете на https://shortify-link.herokuapp.com/, за да проверите версията на живо.

Изисквания

  • NodeJS и NPM
  • MongoDB
  • Postman или подобен инструмент за тестване на API
  • Редактор на код като Visual Studio Code или Atom

Настройка на NodeJS

Създайте вашата директория на проекта и инициализирайте npm пакет. Ще го наречем Shortify.

$ npm init

След това ще инсталираме всички необходими пакети за този проект.

$ npm install express mongoose fs

Освен това инсталирайте nodemon на вашата система, ако все още не сте го инсталирали.

$ npm install -g nodemon

Ще използваме Express.js и Mongoose, за да се свържем с нашата база данни MongoDB. Fs ще се използва за изобразяване на нашата HTML страница.

Вашият файл index.js трябва да изглежда по следния начин.

Включете начален скрипт във вашия файл package.json.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
},

Предна настройка

Ще създадем две уеб страници, една за съкращаване на URL адреса и друга за анализ на връзката.

Създайте папка за изгледи в директорията на проекта. Тук ще създаваме нашите уеб страници в нашата папка с изгледи, home.html и count.html.

Създаване на Backend API

Създадохме нашия Front-end, сега се нуждаем от нашия backend, за да го обслужваме и свързаните API.

Нека първо създадем GET заявки за обслужване на нашите уеб страници.

// GET request to serve home.html
app.get('/', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/html'
  });
  fs.readFile('./views/home.html', null, function (error, data) {
    if (error) {
      res.writeHead(404);
      res.write('Route not found!');
    } else {
      res.write(data);
    }
    res.end();
  });
})
// GET request to redirect the shortened URL to the original URL
app.get('/:route', async (req, res) => {
  const route = req.params.route;
  const instance = await Url.findOne({id: route});
  if(instance) {
    instance.visitors = instance.visitors + 1;
    await instance.save();
    res.redirect(`//${instance.url}`)
  } else {
    res.send("404")
  }
})
// GET request to serve count.html and show analytics
app.get('/analytics/:route', async (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/html'
  });
  fs.readFile('./views/count.html', null, function (error, data) {
    if (error) {
      res.writeHead(404);
      res.write('Route not found!');
    } else {
      res.write(data);
    }
    res.end();
  });
})

Сега стартирайте вашия локален сървър и тествайте началния екран.

$ npm start

Нашата програма за съкращаване на URL адреси все още не работи. За да направим това функционално, трябва да го свържем с нашия бекенд.
Сега ще създадем API, за да свържем нашата база данни с нашето приложение.
Първо ще създадем нашата URL схема в папката models.

Импортирайте модела във вашия файл index.js.

require('./models/Url');
const Url = mongoose.model('Url');

Сега ще създадем API за предоставяне на съдържание на уеб страниците.

Първо, ще създадем API за съкращаване на URL адреса.

// POST request for shortening the URL
app.post('/', async (req, res) => {
  const url = req.body.url;
  const instance = new Url({
    url: url,
    visitors: 0
  });
  short = JSON.stringify(instance._id)
  const id = short.slice(short.length-7, short.length-1)
  instance.id = id;
  await instance.save()
  res.send({
    message: `${id} was created`,
    url: `${id}`,
  });
})

Този API се извиква, когато щракнем върху бутона за съкращаване и връща съкратения URL адрес.

След това ще създадем API за анализ, който да обслужва броя посетители.

// POST request to send the number of visitors to count.html
app.post('/analytics', async (req, res) => {
  const route = req.body.route;
  const instance = await Url.findOne({id: route});
  res.send({
    visitors: instance.visitors,
    message: "Number of visitors sent!"
  })
})

Досега вашият файл index.js трябва да изглежда нещо подобно.

С това нашата програма за съкращаване на URL адреси е готова. Всичко, което трябва да направим сега, е да го хостваме.

Функциониране (по избор)

Ако искате да разберете функционирането на този инструмент за съкращаване на URL адреси, можете да прочетете тази част, в противен случай можете да преминете директно към хостинга.

Нашата програма за съкращаване на URL адреси картографира дадени URL адреси към по-малки URL адреси на API. Ние ще съхраняваме оригиналните URL адреси в нашата база данни MongoDB.

GET заявката „/:route“, която сме създали в нашия index.js, ни пренасочва към оригиналния URL адрес. По този начин ние съпоставяме дългите URL адреси с по-малки URL адреси.

GET заявката „/analytics/:route“ връща страницата, показваща броя посетители за този URL адрес „/:route“.

Хостинг на Heroku

В името на този проект ние ще хостваме нашата програма за съкращаване на URL адреси на Heroku.

Създайте акаунт в Heroku, ако все още нямате акаунт.

Създайте проект на Heroku.

Влезте в акаунта си в Heroku във вашия терминал.

$ heroku login

Инициализирайте git хранилище в директорията на проекта.

$ git init

Добавете отдалечено git хранилище.

$ heroku git:remote -a project-name

Създайте Procfile и запишете това във файла. Procfile е необходим за Heroku, за да внедри вашето приложение.

Добавете и ангажирайте всичките си файлове.

$ git add .
$ git commit -m "heroku deploy"

Изпратете промените си в отдалеченото git хранилище на Heroku.

$ git push heroku master

Изчакайте компилацията да завърши и след това проверете вашата програма за съкращаване на URL адреси!

Обобщавайки

Вашият персонализиран URL съкратител вече е готов. Можете да го тествате, като отворите и използвате вашето приложение Heroku. Това беше много кратък проект и може да бъде подобрен на много места. Няма въведено URL удостоверяване, за да се провери дали е въведен валиден URL. Това може лесно да се поправи чрез въвеждане на прост Regex за валидиране на URL. Могат да бъдат направени подобрения в потребителския интерфейс на уеб приложението.

Поздравления, успешно създадохте своя собствена програма за съкращаване на URL адреси. ✌

Разгледайте хранилището на github за този проект на адрес https://github.com/maw1a/Shortify/tree/master

Ако искате да използвате моя този инструмент, вижте версията на живо на адрес https://shortify-link.herokuapp.com/

Ако има някакви проблеми или предложения относно историята. Оставете бележка и аз ще се обърна към тях.