Das Erstellen eines URL-Shortener-Dienstes ist eine großartige Möglichkeit, in die Full-Stack-Entwicklung mit Node.js und MongoDB einzutauchen. In diesem Blog gehen wir durch den Prozess der Erstellung einer URL-Shortener-Anwendung, die es Benutzern ermöglicht, lange URLs in verkürzte Versionen umzuwandeln und deren Nutzung zu verfolgen.

Voraussetzungen

Um diesem Tutorial folgen zu können, sollten Sie Folgendes haben:

• Node.js installiert
• Grundkenntnisse in JavaScript und Express.js
• Eine MongoDB-Datenbank (Sie können MongoDB Atlas für eine Cloud-Lösung verwenden)

Projektaufbau

Schritt 1: Initialisieren Sie das Projekt

Erstellen Sie zunächst ein neues Verzeichnis für Ihr Projekt und initialisieren Sie es mit npm:

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

Schritt 2: Abhängigkeiten installieren

Als nächstes installieren Sie die erforderlichen Abhängigkeiten:

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

Schritt 3: Projektstruktur

Erstellen Sie die folgende Ordnerstruktur:

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

Aufbau des Backends

Schritt 4: Express-Server einrichten

Richten Sie in der Datei index.js den Express-Server ein und stellen Sie eine Verbindung zu MongoDB her:

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}`);
});

Erstellen Sie eine .env-Datei im Stammverzeichnis, um Umgebungsvariablen zu speichern:

MONGODB_USER=yourMongoDBUsername
MONGODB_PASSWORD=yourMongoDBPassword

Schritt 5: Definieren Sie das URL-Modell

Definieren Sie in der Datei models/urlModel.js das Schema für URLs:

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);

Schritt 6: Routen erstellen

Definieren Sie in der Datei „routes/urlRoutes.js“ die Routen für die 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;

Schritt 7: Controller implementieren

Implementieren Sie in der Datei „controllers/urlController.js“ die Controller-Funktionen:

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 };

Ausführen der Anwendung

Starten Sie den Server mit dem folgenden Befehl:

npm run dev

Dieser Befehl startet Ihren Server mit Nodemon, der den Server automatisch neu startet, wenn Sie Änderungen an Ihrem Code vornehmen.

Abschluss

In diesem Blog haben wir eine einfache URL-Shortener-Anwendung mit Node.js und MongoDB erstellt. Mit dieser Anwendung können Benutzer URLs kürzen, ihre Nutzung verfolgen und sie mit Ablaufdaten verwalten. Dieses Projekt ist ein guter Ausgangspunkt, um etwas über die Full-Stack-Entwicklung zu lernen und kann um zusätzliche Funktionen wie Benutzerauthentifizierung, benutzerdefinierte URL-Aliase und mehr erweitert werden.

Den Code erkunden

Besuchen Sie das GitHub-Repository, um den Code im Detail zu erkunden.

Sie können den Blog gerne nach Ihren Wünschen anpassen und bei Bedarf weitere Details oder Erklärungen bereitstellen.