Building an Application with the Rscripts API

In this guide, we'll walk through the process of building a simple application that utilizes the Rscripts API to retrieve and display scripts. We'll cover various API endpoints, showcasing how to fetch script data, handle edge cases, and present the information in a user-friendly way.

Prerequisites

Before we begin, ensure that you have the following prerequisites:

Basic understanding of JavaScript (or your preferred programming language)
Access to the Rscripts API (currently free and publicly available)

Setting Up the Project

Create a new directory for your project and navigate to it in your terminal or command prompt.
Initialize a new project by running the appropriate command for your preferred package manager (e.g., npm init for Node.js or yarn init for Yarn).
Install any necessary dependencies for making HTTP requests (e.g., axios or the built-in fetch API for JavaScript).

Fetching Scripts

Let's start by fetching a list of scripts from the Rscripts API using the /api/scripts endpoint.

// Fetch the latest scripts
fetch("https://rscripts.net/api/scripts?page=1&orderBy=date&sort=desc")
  .then((response) => response.json())
  .then((data) => {
    console.log("Current Page:", data.info.currentPage);
    console.log("Max Pages:", data.info.maxPages);
    console.log("Scripts:", data.scripts);
  })
  .catch((error) => {
    console.error("Error fetching scripts:", error);
  });

In this example, we're fetching the latest scripts by ordering them by their creation date in descending order. The response contains an info object with pagination information and an array of scripts objects containing the script details.

Handling Edge Cases

As mentioned in the API Documentation, there are a few edge cases to consider when working with old data from the Rscripts API. Let's handle these cases in our application to be consistent.

// Fetch the latest scripts with edge case handling
fetch("https://rscripts.net/api/scripts?page=1&orderBy=date&sort=desc")
  .then((response) => response.json())
  .then((data) => {
    console.log("Current Page:", data.info.currentPage);
    console.log("Max Pages:", data.info.maxPages);
 
    const scripts = data.scripts.map((script) => {
      // Handle empty user array
      const user =
        script.user.length > 0 ? script.user[0] : { username: script.creator };
 
      // Handle image file format
      const thumbnailUrl = script.image || script.gameThumbnail;
 
      // Handle download links from 2021-2022
      const downloadUrl = isValidUrl(script.download)
        ? script.download
        : `https://s3.rscripts.net/scripts/${script.download}`;
 
      return {
        ...script,
        user,
        thumbnailUrl,
        downloadUrl,
      };
    });
 
    console.log("Scripts:", scripts);
  })
  .catch((error) => {
    console.error("Error fetching scripts:", error);
  });
 
// Helper function to check if a URL is valid
function isValidUrl(url) {
  try {
    new URL(url);
    return true;
  } catch (error) {
    return false;
  }
}

In this updated example, we're handling the following edge cases:

Empty User Array: If the user array is empty, we use the creator field as the username.
Image File Format: If the image field is null, we use the gameThumbnail field as the thumbnail URL.
Download Links from 2021-2022: If the download field contains a valid URL, we use it as is. Otherwise, we construct a URL using the S3 object storage prefix.

Displaying Scripts

Now that we have the script data with edge cases handled, we can display it in our application's user interface. Here's an example of how you might render the scripts using vanilla JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rscripts App</title>
    <style>
      /* Add your custom styles here */
      textarea {
        width: 100%;
        height: 200px;
      }
 
      /* responsive 4 grid cols grid scripts-container */
      #scripts-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
      }
 
      #scripts-container div {
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
 
  <body>
    <h1>Rscripts App</h1>
    <div id="scripts-container"></div>
 
    <script>
      // Fetch and display scripts
      fetch("https://rscripts.net/api/scripts?page=1&orderBy=date&sort=desc")
        .then((response) => response.json())
        .then((data) => {
          const scriptsContainer = document.getElementById("scripts-container");
 
          const scripts = data.scripts.map((script) => {
            const hasUser = script.user.length > 0;
 
            // Handle edge cases as shown in the previous example
            const user =
              hasUser > 0
                ? script.user[0].username
                : { username: script.creator };
 
            // Handle image file format
            const thumbnailUrl = script.image
              ? `https://s3.rscripts.net/images_scripts/${script.image}`
              : script.gameThumbnail;
 
            // Handle profile picture
            const profilePicture = hasUser > 0 ? script.user[0].image : null;
            const profilePictureUrl = profilePicture
              ? `https://s3.rscripts.net/avatars/${script.user[0].image}`
              : `https://i.pravatar.cc/300`;
 
            // Handle download links from 2021-2022
            const downloadUrl = isValidUrl(script.download)
              ? script.download
              : `https://s3.rscripts.net/scripts/${script.download}`;
 
            const scriptElement = document.createElement("div");
            scriptElement.innerHTML = `
              <h2>${script.title}</h2>
              <p>${script.description}</p>
              <img style="width: 40px; height: 40px; border-radius: 50%;" src="${profilePictureUrl}" alt="Profile picture of ${script.user[0].username}">
              <p>Creator: ${user}</p>
              <img src="${thumbnailUrl}" alt="${script.title}">
              <textarea id="script-${script._id}"></textarea>
            `;
 
            // Fetch and display the script content
            fetch(downloadUrl)
              .then((response) => response.text())
              .then((scriptContent) => {
                const textArea = scriptElement.querySelector(
                  `#script-${script._id}`
                );
                textArea.value = scriptContent;
              })
              .catch((error) => {
                console.error(
                  `Error fetching script content for ${script.title}:`,
                  error
                );
              });
 
            return scriptElement;
          });
 
          scripts.forEach((scriptElement) => {
            scriptsContainer.appendChild(scriptElement);
          });
        })
        .catch((error) => {
          console.error("Error fetching scripts:", error);
        });
 
      // Helper function to check if a URL is valid
      function isValidUrl(url) {
        try {
          new URL(url);
          return true;
        } catch (error) {
          return false;
        }
      }
    </script>
  </body>
</html>

Your final result should look like this 🎉

Hello

Exploring Other Endpoints

The Rscripts API offers several other endpoints that you can explore and integrate into your application. Here are a few examples:

Retrieving a Specific Script

// Retrieve a specific script by its ID
fetch(
  "https://rscripts.net/api/script/retrieve?targetId=6422a7b9d8f7e7c4d0d6a9b3"
)
  .then((response) => response.json())
  .then((data) => {
    if (data.success) {
      console.log("Script retrieved successfully:", data.success);
    } else {
      console.error("Error retrieving script:", data.error);
    }
  })
  .catch((error) => {
    console.error("Error retrieving script:", error);
  });

Learn more here

Fetching Trending Scripts

// Fetch trending scripts
fetch("https://rscripts.net/api/trending")
  .then((response) => response.json())
  .then((data) => {
    if (data.success) {
      console.log("Trending Scripts:", data.success);
    } else {
      console.error("Error:", data.error);
    }
  })
  .catch((error) => {
    console.error("Error fetching trending scripts:", error);
  });

Learn more here

Refer to the Rscripts API documentation for more endpoints and their usage details.

Conclusion

In this guide, we explored how to build an application using the Rscripts API, covering various endpoints, handling edge cases, and displaying script data in a user interface. This is just the beginning; you can further enhance your application by incorporating additional features, such as authentication, script execution, and more, based on your specific requirements.

Remember to always refer to the official Rscripts API documentation for the latest updates and best practices. Happy coding!

Introduction Scripts Introduction