مقدمه JSON-LD: JSON برای وب معنایی

JSON-LD JSON را گسترش می دهد تا اطلاعات پیوند را در بر بگیرد. در اینجا آمده است که چگونه می تواند JSON را به یک پخش کننده برتر در هایپر رسانه و وب معنایی تبدیل کند.

• JSON-LD چیست؟
• JSON-LD در یک برنامه مشتری-سرور
• فیلدهای @Context و @Type
• بزرگ و فشرده
• نتیجه‌گیری

JSON-LD به نظر می‌رسد که وعده ابررسانه‌ای خودتوصیف‌کننده را با آشنایی ساده با JSON یکی کند. با ترکیب پیوندهای داده، JSON-LD به توسعه دهندگان اجازه می دهد اطلاعات معنایی را به یک API معمولی JSON اضافه کنند. بیایید نگاهی به این افزونه قدرتمند برای JSON بیاندازیم.

JSON-LD چیست؟

JSON-LD (نشان‌گذاری شی جاوا اسکریپت برای داده‌های پیوندی) قالب JSON را گسترش می‌دهد تا اطلاعات پیوند را شامل شود. این افزونه کاربردهای گسترده ای از نمودارهای دانش گرفته تا SEO دارد. یکی از جالب‌ترین موارد استفاده برای JSON-LD، نزدیک‌تر کردن API‌های مبتنی بر JSON به چشم‌انداز اصلی برای REST است، جایی که اسناد ابررسانه‌ای خود توصیف می‌شوند و اتصال آزاد بین سرور و کلاینت را حفظ می‌کنند.

یک مشکل بزرگ با API های معمولی JSON این است که یک جفت قوی بین مشتری و سرور ایجاد می کنند. مشتری محل زندگی دارایی ها و روابط آنها در خدمات را می داند. کدگذاری سخت URL ها، همانطور که JSON انجام می دهد، یک نقطه شکنندگی در مشتریان ایجاد می کند. این با ایده‌آل REST در تضاد است، که در آن دارایی‌ها به مشتری می‌گویند کجا اطلاعات مرتبط را پیدا کند.

در سطح بالایی، JSON-LD JSON را به عضوی از وب معنایی، با نام مستعار وب ۳.۰ تبدیل می‌کند. وب معنایی ایده ای است برای اینکه چگونه وب را معنادارتر کنیم. به نظر می رسد سیستم فعلی مکان های دلخواه را با یک شبکه به هم پیوسته از دارایی های مرتبط جایگزین کند. این یک پروژه بزرگ با جنبه های مختلف است. برای بحث خود در اینجا، با ساختن برنامه‌ای که مفهوم وب معنایی را در راه‌اندازی سرویس گیرنده-سرور نشان می‌دهد، بر تجربه عملی کار با JSON-LD تمرکز می‌کنیم.

JSON-LD و وب معنایی

همانطور که در ایجاد نسل سوم توضیح داده شد APIهای وب با Hydra، JSON-LD ما را به سمت امکان کلاینت‌های واقعاً عمومی سوق می‌دهد که می‌توانند با تفسیر متا اطلاعات موجود در داده‌ها، سرویس‌ها را ارائه کنند و با آنها تعامل داشته باشند.

JSON-LD در برنامه کلاینت-سرور

برای درک نحوه عملکرد JSON-LD، یک برنامه کاربردی سرویس گیرنده-سرور کوچک می سازیم که JSON-LD را از سرور Node.js ارائه می کند، همراه با یک رابط کاربری ساده که به شما امکان می دهد ما ساختار را هدایت می کنیم. ما از مجموعه داده های مرتبط با هم برای توصیف موسیقی استفاده خواهیم کرد. می‌توانیم با فهرستی از آلبوم‌ها شروع کنیم – فقط چند آلبوم برای ساده نگه داشتن کارها – سپس روی نام آلبوم کلیک کنید تا داده‌های ساده درباره آن را ببینید. همچنین می‌توانیم روی نام آهنگ کلیک کنیم و ببینیم که آهنگ‌سرایان چه کسانی بودند.

بیایید با نمایش آلبوم های خود با نام شروع کنیم و به کاربر اجازه دهیم برای اطلاعات بیشتر روی آنها کلیک کند. به جای اینکه URL را که جزئیات آلبوم را در آن ذخیره کرده ایم کدگذاری کنیم، از JSON-LD برای تعریف URL در خود JSON به عنوان شناسه استفاده خواهیم کرد. این تنظیمات ما را از استفاده از شماره برای شناسه و استفاده از مکان واقعی دور می‌کند.

const express = require('express');
const app = express();

const albumsData = [
  {
    "@id": "/music/albums/1",
    "name": "Abbey Road",
    "songs": [
      {
        "@id": "/music/songs/1",
        "name": "Here Comes the Sun",
        "songwriters": ["George Harrison"]
      }
    ]
  },
  {
    "@id": "/music/albums/2",
    "name": "Let It Be",
    "songs": [
      {
        "@id": "/music/songs/2",
        "name": "Let It Be",
        "songwriters": ["John Lennon", "Paul McCartney"]
      }
    ]
  }
];

// Define a route to serve album data
app.get('/music/albums', (req, res) => {
  res.json(albumsData);
});

app.get('/music/albums/:albumId', (req, res) => {
  const albumId = req.params.albumId;
  const album = albumsData.find(album => album["@id"] === `/music/albums/${albumId}`);

  if (album) {
    res.json(album);
  } else {
    res.status(404).json({ error: "Album not found" });
  }
});

app.use(express.static('public'));

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

داده هایی که نقطه پایانی صادر می کند JSON معمولی است، با این تفاوت که دارای ویژگی @id است. ویژگی هایی که با علامت آدرس (نماد @) شروع می شوند، مختص JSON-LD هستند. در این مورد، ما یک لینک واقعی ارائه می دهیم که مشتری می تواند از آن استفاده کند. توجه داشته باشید که در وب ۳.۰ ایده آل، پیوندها مطلق هستند تا به شکل گیری یک نمودار دانش قابل پیمایش جهانی کمک کنند. ما از URL های مرتبط برای اهداف توسعه استفاده می کنیم.

در یک API معمولی JSON، یک فیلد ID و یک عدد صحیح برای یک مقدار خواهیم داشت. سپس، مشتری یک URL بر اساس آن شناسه تشکیل می دهد. در این حالت، کلاینت در واقع می تواند از فیلد ID همانطور که هست استفاده کند. سرور چنین نشانی‌های اینترنتی را در نقطه پایانی /music/albums/:albumId مدیریت می‌کند. (یک نقطه پایانی در دنیای واقعی به مدیریت پیچیده تری نیاز دارد.)

یک کلاینت ساده برای این API شبیه فهرست ۲ است.

<!DOCTYPE html>
<html>
<head>
    <title>JSON-LD Client</title>
</head>
<body>
  <h1>Albums</h1>
  <ul id="album-list"></ul>
  <div id="album-details"></div>

  <script>
    const albumList = document.getElementById("album-list");
    const albumDetails = document.getElementById("album-details");

    // Function to fetch and display albums
    function fetchAlbums() {
      fetch("/music/albums")
        .then(response => response.json())
        .then(albums => {
           albums.forEach(album => {
             const listItem = document.createElement("li");
             listItem.innerHTML = `<a href="#" data-album-id="${album["@id"]}">${album.name}</a>`;
             albumList.appendChild(listItem);
           });
         });
       }

       // Function to fetch and display album details
       function fetchAlbumDetails(albumId) {
         fetch(albumId)
           .then(response => response.json())
           .then(album => {
              const albumInfo = `
                <h2>${album.name}</h2>
                <h3>Songs</h3>
                <ul>
                  ${album.songs.map(song => `<li><a href="#" data-song-id="${song["@id"]}">${song.name}</a></li>`).join("")}
                </ul>
              `;
            albumDetails.innerHTML = albumInfo;
          });
        }

        // Event listener for album links
        albumList.addEventListener("click", (event) => {
          if (event.target.tagName === "A") {
            const albumId = event.target.getAttribute("data-album-id");
            fetchAlbumDetails(albumId);
          }
        });

        // Event listener for song links
        albumDetails.addEventListener("click", (event) => {
          if (event.target.tagName === "A") {
            const songId = event.target.getAttribute("data-song-id");
            alert("You clicked on song with ID: " + songId);
          }
        });

        // Initialize the client by fetching and displaying albums
        fetchAlbums();
    </script>
</body>
</html>

فهرست ۲ یک مثال بسیار ساده شده است که برای برجسته کردن نکته اصلی طراحی شده است: اینکه مشتری می تواند با پیوندها به روشی عمومی برخورد کند، به سادگی با صدور درخواست های واکشی در برابر فیلدهای @id. این اولین گام برای تعمیم مشتریان است تا از دانستن ساختار API سرویس اجتناب کنند.

فیلدهای @Context و @Type

JSON-LD چیزهای بیشتری وجود دارد، و فیلدهای @context و @type بخش بزرگی از نحوه کمک به شکل‌گیری اسناد معنایی هستند. چندین مخزن عمومی برای اطلاعات زمینه و نوع وجود دارد که می توانید از آنها استفاده کنید، از جمله schema.org، فضاهای نام XML، و زمینه های JSON-LD.

Schema.org کنسرسیومی از موتورهای جستجو است و بسیار وسیع است. فضاهای نام XML قدیمی و آشنا هستند و همچنین گسترده تر هستند. در نظر گرفته شده است که زمینه‌های JSON-LD ساده‌تر و جامع‌تر باشند. یک برنامه همچنین می تواند انواع خود را تعریف کند و از ترکیبی از منابع تعریف استفاده کند.

ایده اصلی فیلدهای @context و @type این است که به سند JSON اجازه دهید محتوای آن را در قالبی (بیشتر) قابل کشف جهانی توصیف کند.

• ویژگی @context فضای نام سند را تعریف می‌کند. این به عنوان یک نقشه بین اصطلاحات استفاده شده در سند و تعاریف آنها عمل می کند و معنای داده ها را برای انسان ها و ماشین ها واضح تر می کند.
• ویژگی type@ به ما امکان می‌دهد نوع موجودیت‌ها یا عناصر داده را تعریف کنیم. این نوع به دسته بندی داده ها کمک می کند و تفسیر آن را آسان تر می کند.

در فهرست ۳، نحوه استفاده از @context schema.org و تعاریفی مانند را می‌بینیم. MusicComposition @type.

const albumsData = [
  {
    "@context": {
      "music": "http://schema.org/",
    },
    "@type": "music:MusicAlbum",
    "@id": "/music/albums/1",
    "name": "Abbey Road",
    "songs": [
      {
        "@type": "music:MusicComposition",
        "@id": "/music/songs/1",
        "name": "Here Comes the Sun",
        "songwriters": [
          {
            "@type": "music:MusicGroup",
            "name": "The Beatles",
          }
        ]
      }
    ]
  },
  {
    "@context": {
      "music": "http://schema.org/",
    },
    "@type": "music:MusicAlbum",
    "@id": "/music/albums/2",
    "name": "Let It Be",
    "songs": [
      {
        "@type": "music:MusicComposition",
        "@id": "/music/songs/2",
        "name": "Let It Be",
        "songwriters": [
          {
            "@type": "music:MusicGroup",
            "name": "The Beatles",
          }
        ]
      }
    ]
  }
];

ما از تعریف میزبانی شده در schema.org استفاده کرده‌ایم و نام آن را «موسیقی» گذاشته‌ایم. وقتی به عناصر داده خود انواع می دهیم، تعریف به عنوان فضای نام عمل می کند. در این مورد، music:MusicComposition و music:MusicGroup.

کاربر اکنون می تواند از داده های @context و @type استفاده کند. به عنوان مثال ساده، در برنامه ما، می‌توانیم درباره نحوه نمایش داده‌ها بر اساس این فیلدها تصمیم بگیریم. توجه داشته باشید که برنامه در واقع چیزی از schema.org دریافت نمی کند. فقط از آن به عنوان یک فضای نام منحصر به فرد و به عنوان مرجعی برای ساختاردهی داده های خود استفاده می کند.

بسط و فشرده

با توجه به @type، لازم است به مفهوم بسط و فشرده اشاره شود. گسترش اجازه می دهد تا یک نمای پرمخاطب تر داشته باشید، در حالی که فشرده باعث ایجاد یک نحو فشرده تر می شود. Expand type@ را مانند music:MusicAlbum ما می گیرد و آن را به http://schema.org/MusicAlbum. Compact برعکس را انجام می دهد.

کتابخانه‌هایی مانند jsonls.js از این عملیات پشتیبانی می‌کنند و موارد دیگر، مانند تبدیل به قالب RDF.

نتیجه گیری

JSON-LD نقش مهمی در تحقق ایده‌آل‌های وب معنایی برای توسعه‌دهندگان خواهد داشت. JSON زبان فرمت های API است و JSON-LD یک نقطه ورودی آسان برای افزودن ابرداده معنایی به آن فراهم می کند.