La création d'un service de raccourcissement d'URL est un excellent moyen de se plonger dans le développement full-stack avec Node.js et MongoDB. Dans ce blog, nous expliquerons le processus de création d'une application de raccourcissement d'URL, qui permet aux utilisateurs de convertir des URL longues en versions raccourcies et de suivre leur utilisation.

Conditions préalables

Pour suivre ce tutoriel, vous devez avoir :

• Node.js installé
• Connaissance de base de JavaScript et d'Express.js
• Une base de données MongoDB (vous pouvez utiliser MongoDB Atlas pour une solution cloud)

Configuration du projet

Étape 1 : initialiser le projet

Tout d'abord, créez un nouveau répertoire pour votre projet et initialisez-le avec npm :

mkdir url-shortener-app
cd url-shortener-app
npm init -y

Étape 2 : Installer les dépendances

Ensuite, installez les dépendances nécessaires :

npm install express mongoose cors dotenv
npm install --save-dev nodemon

Étape 3 : Structure du projet

Créez la structure de dossiers suivante :

url-shortener-app/
├── controllers/
│   └── urlController.js
├── models/
│   └── urlModel.js
├── routes/
│   └── urlRoutes.js
├── .env
├── index.js
├── package.json

Construire le back-end

Étape 4 : configurer le serveur Express

Dans le fichier index.js, configurez le serveur Express et connectez-vous à MongoDB :

const express = require('express');
const mongoose = require('mongoose');
const urlRoutes = require('./routes/urlRoutes');
const cors = require('cors');

const app = express();
app.use(express.json());

require("dotenv").config();

const dbUser = process.env.MONGODB_USER;
const dbPassword = process.env.MONGODB_PASSWORD;

// Connect to MongoDB
mongoose
    .connect(
        `mongodb srv://${dbUser}:${dbPassword}@cluster0.re3ha3x.mongodb.net/url-shortener-app`,
        { useNewUrlParser: true, useUnifiedTopology: true }
    )
    .then(() => {
        console.log("Connected to MongoDB database!");
    })
    .catch((error) => {
        console.error("Connection failed!", error);
    });

app.use(cors({
    origin: "*",
}));

app.get('/', (req, res) => {
    res.send('Welcome to URL Shortener API');
});

app.use('/api', urlRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Créez un fichier .env dans le répertoire racine pour stocker les variables d'environnement :

MONGODB_USER=yourMongoDBUsername
MONGODB_PASSWORD=yourMongoDBPassword

Étape 5 : Définir le modèle d'URL

Dans le fichier models/urlModel.js, définissez le schéma des URL :

const mongoose = require('mongoose');

const urlSchema = new mongoose.Schema({
    originalUrl: { type: String, required: true },
    shortUrl: { type: String, required: true, unique: true },
    clicks: { type: Number, default: 0 },
    expirationDate: { type: Date },
    createdAt: { type: Date, default: Date.now },
});

module.exports = mongoose.model('Url', urlSchema);

Étape 6 : Créer des itinéraires

Dans le fichier routes/urlRoutes.js, définissez les routes pour l'API :

const express = require('express');
const { createShortUrl, redirectUrl, getUrls, getDetails, deleteUrl } = require('../controllers/urlController');
const router = express.Router();

router.post('/shorten', createShortUrl);
router.get('/urls', getUrls);
router.get('/:shortUrl', redirectUrl);
router.get('/details/:shortUrl', getDetails);
router.delete('/delete/:shortUrl', deleteUrl);

module.exports = router;

Étape 7 : Implémenter les contrôleurs

Dans le fichier controllers/urlController.js, implémentez les fonctions du contrôleur :

const Url = require('../models/urlModel');

function generateUniqueId(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    for (let i = 0; i  {
    const { originalUrl } = req.body;
    const shortUrl = generateUniqueId(5);
    const urlRegex = new RegExp(/^(http|https):\/\/[^ "] $/);
    if (!urlRegex.test(originalUrl))
        return res.status(400).json('Invalid URL');
    const url = await Url.findOne({ originalUrl });
    if (url) {
        res.json(url);
        return;
    }
    const expirationDate = new Date();
    expirationDate.setDate(expirationDate.getDate()   7);
    const newUrl = new Url({ originalUrl, shortUrl, expirationDate });
    await newUrl.save();
    res.json(newUrl);
};

const redirectUrl = async (req, res) => {
    const { shortUrl } = req.params;
    const url = await Url.findOne({ shortUrl });
    if (!url || (url.expirationDate && url.expirationDate  {
    try {
        const urls = await Url.find({}).sort({ _id: -1 });
        res.json(urls);
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const getDetails = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        const url = await Url.findOne({ shortUrl });
        if (url) {
            res.json(url);
        } else {
            res.status(404).json('URL not found');
        }
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

const deleteUrl = async (req, res) => {
    try {
        const { shortUrl } = req.params;
        await Url.findOneAndDelete({ shortUrl });
        res.json('URL deleted');
    } catch (error) {
        res.status(500).json({ message: 'Server Error' });
    }
};

module.exports = { createShortUrl, redirectUrl, getDetails, getUrls, deleteUrl };

Exécution de l'application

Démarrez le serveur à l'aide de la commande suivante :

npm run dev

Cette commande démarrera votre serveur avec Nodemon, qui redémarrera automatiquement le serveur lorsque vous apporterez des modifications à votre code.

Conclusion

Dans ce blog, nous avons créé une application simple de raccourcissement d'URL à l'aide de Node.js et MongoDB. Cette application permet aux utilisateurs de raccourcir les URL, de suivre leur utilisation et de les gérer avec des dates d'expiration. Ce projet est un excellent point de départ pour en apprendre davantage sur le développement full-stack et peut être étendu avec des fonctionnalités supplémentaires telles que l'authentification des utilisateurs, des alias d'URL personnalisés, etc.

Explorer le code

Visitez le référentiel GitHub pour explorer le code en détail.

N'hésitez pas à personnaliser le blog selon vos préférences et à fournir plus de détails ou d'explications si nécessaire.