> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurar el Webhook de Top.gg en Square Cloud

> Una guía detallada para configurar el webhook de Top.gg en Square Cloud.

## Introducción

* Esta guía asume que tienes un bot aprobado en [top.gg](https://top.gg/) y que estás usando Node.js o Python para tu proyecto.
* A continuación, necesitarás crear una cuenta en Square Cloud, lo cual puede hacerse a través de la [página de registro](https://squarecloud.app/signup). Puedes usar tu correo electrónico para crear una cuenta.
* Finalmente, necesitas tener un plan de pago activo en tu cuenta. Puedes ver nuestros planes y comprar uno según tus necesidades [aquí](https://squarecloud.app/es/pricing).

## Configurando el entorno

<Tabs>
  <Tab title="Node.js">
    1. Antes de empezar, asegúrate de tener Node.js y npm instalados en tu sistema. Si aún no los tienes, puedes descargarlos desde el [sitio web oficial de Node.js](https://nodejs.org/).
    2. Inicia un nuevo proyecto de Node.js con el siguiente comando:

    ```bash Terminal theme={null}
    npm init -y
    ```

    Este comando crea un archivo package.json en el directorio actual.

    2. Instala las bibliotecas necesarias:

    ```bash Terminal theme={null}
    npm install @top-gg/sdk express
    ```
  </Tab>

  <Tab title="Python">
    1. Asegúrate de tener Python y Pip (un gestor de paquetes para Python) instalados en tu sistema. Si no, puedes descargarlos desde el [sitio web oficial de Python](https://www.python.org/) y el [sitio web oficial de Pip](https://pypi.org/).
    2. Instala las bibliotecas `flask` y `waitress` usando pip:

    ```bash theme={null}
    pip install flask
    pip install waitress
    ```
  </Tab>
</Tabs>

## Configurando el proyecto

**1. Obtén la autenticación de tu webhook:**

* Ve a tu perfil de Top.gg [aquí](https://top.gg/user/me).
* Haz clic en "edit" en el bot para el que quieres recibir notificaciones de votos.
* En "GENERAL", elige la opción "webhook".
* Establece la autenticación del webhook en "Authorization". En este ejemplo, usamos "myappsquare".

**2. Implementa el listener del webhook:**

Las siguientes secciones proporcionan ejemplos de código tanto para Javascript como para Python:

<Tabs>
  <Tab title="Node.js">
    Usaremos el ejemplo proporcionado por la documentación de top.gg [aquí](https://docs.top.gg/docs/Libraries/javascript), con algunas modificaciones.

    ```javascript index.js theme={null}
    // Import libraries
    const Topgg = require("@top-gg/sdk");
    const express = require("express");

    // Create Express app and Top.gg webhook instances
    const app = express();
    const webhook = new Topgg.Webhook("YOUR_AUTHORIZATION_TOKEN");

    // Define route for '/topgg' endpoint (POST requests)
    app.post("/topgg", webhook.listener((vote) => {
      // Log vote received message with user ID
      console.log(`Vote received successfully! User ID: ${vote.user}`);
    }));

    // Start server on port 80 (default HTTP)
    app.listen(80);
    ```
  </Tab>

  <Tab title="Python">
    Para Python, puedes usar el siguiente código:

    ```python app.py theme={null}
    # Import the necessary libraries
    import logging
    import json
    from waitress import serve
    from flask import Flask, request, abort

    # Create an instance of the Flask app
    app = Flask(__name__)

    # Define your authorization token
    AUTH_TOKEN = 'YOUR_AUTHORIZATION'

    # Define a route for the '/topgg' endpoint that accepts POST requests
    @app.route("/topgg", methods=["POST"])
    def hook():
        # Check the authorization header
        auth = request.headers.get('Authorization')
        if auth != AUTH_TOKEN:
            logging.error('Access denied')
            abort(401)  # Unauthorized

        # Convert the request data from bytes to a JSON dictionary
        data = json.loads(request.data)
        # Print the ID of the user who voted
        print(f'Vote received successfully! User ID: {data["user"]}')
        # Return a response with the string "Data received" and status 200 to indicate that the request was processed successfully
        return "Data received"

    # Check if this script is being run directly and not imported as a module
    if __name__ == "__main__":
        # Set the log message format to exclude the log level
        logging.basicConfig(format='%(message)s', level=logging.INFO)
        # Serve our Flask app on port 80 and listen on all network interfaces
        serve(app, host="0.0.0.0", port=80)
    ```
  </Tab>
</Tabs>

## Creando el archivo de configuración de squarecloud

<Card title="Aprende sobre: cómo crear el archivo de configuración para Square Cloud." icon="link" href="https://docs.squarecloud.app/es/getting-started/config-file">
  El archivo squarecloud.app es un archivo de configuración que se usará para configurar tu aplicación; se usará para definir el nombre, la descripción, la versión, el archivo principal, entre otras cosas.
</Card>

## Subiendo tu aplicación a Square Cloud

Después de seguir todos los pasos, coloca los archivos de tu aplicación en un archivo `.zip`, incluyendo el archivo de configuración.

Si tu aplicación es un proyecto de Node.js, echa un vistazo a nuestro artículo sobre [Node.js](/es/articles/getting-started-with-nodejs).

Si tu aplicación es un proyecto de Python, echa un vistazo a nuestro artículo sobre [Python](/es/articles/getting-started-with-python).

<Tabs>
  <Tab title="Subida por el Dashboard">
    Accede al [Dashboard de Square
    Cloud](https://squarecloud.app/es/dashboard/new) y sube los archivos de tu
    proyecto.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Subiendo aplicación a Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Tab>

  <Tab title="Subida por la CLI">
    <Steps>
      <Step title="Primer paso">
        Primero, necesitas tener la CLI instalada en tu entorno. Si
        aún no la tienes, ejecuta el siguiente comando en tu terminal:

        ```
        npm install -g @squarecloud/cli
        ```

        Si ya la tienes, te recomendamos actualizarla. Para ello, ejecuta el siguiente comando en tu terminal:

        <Tabs>
          <Tab title="Windows">
            ```bash theme={null}
            squarecloud update
            ```
          </Tab>

          <Tab title="Linux, macOS y WSL">
            ```bash theme={null}
            curl -fsSL https://cli.squarecloud.app/install | bash
            ```
          </Tab>
        </Tabs>
      </Step>

      <Step title="Segundo paso">
        Ahora, para autenticarte y usar otros comandos de la CLI, encontrarás tu
        clave de autorización [aquí](https://squarecloud.app/es/account) haciendo clic en
        "Request API Key". Después de obtener tu clave de autorización, ejecuta el
        siguiente comando:

        ```bash theme={null}
        squarecloud auth login 
        ```
      </Step>

      <Step title="Tercer paso">
        Finalmente, para desplegar tu aplicación en Square Cloud usando la CLI, necesitas ejecutar el siguiente comando, pasando la ruta de tu archivo zip:

        ```bash theme={null}
        squarecloud upload zip
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Iniciando las pruebas

Si has hecho todo correctamente, intenta acceder a tu sitio usando el subdominio definido en el archivo de configuración. Si lo definiste como "mysite", para acceder será `mysite.squareweb.app`. Después de acceder y de que solo aparezca "Cannot GET /" o "Method Not Allowed", todo está bien.

Ahora, necesitas volver a la página anterior donde se definió la autorización. En el campo Webhook URL, debes poner la URL de tu sitio con la ruta que recibirá los votos.

* Para el código JavaScript que creamos con `app.post("/topgg", webhook.listener((vote) => {...})`, la ruta que recibirá los votos es "/topgg". Entonces, si tu sitio web es "mysite.squareweb.app", debes poner "mysite.squareweb.app/topgg" como la Webhook URL.

* Para el código Python que creamos con `@app.route("/topgg", methods=["POST"])`, la ruta que recibirá los votos también es "/topgg". Entonces, la Webhook URL sería la misma "mysite.squareweb.app/topgg".

<Frame>
  <img src="https://cdn.squarecloud.app/docs/articles/topgg/example-url.png" alt="Ejemplo de configuración de la URL del webhook de Top.gg" style={{ borderRadius: "0.2rem" }} />
</Frame>

Finalmente, haz clic en el botón "Send Test". Después de eso, revisa la terminal. Si todo salió bien, el mensaje que definiste en `console.log` o `print` debería aparecer en la terminal.

<Frame>
  <img src="https://cdn.squarecloud.app/docs/articles/topgg/example-send.png" alt="Ejemplo de prueba de envío del webhook de Top.gg" style={{ borderRadius: "0.2rem" }} />
</Frame>

Y con eso, si todo se ha configurado correctamente, tu webhook estará listo para enviar notificaciones cuando tu bot reciba un voto en top.gg.

## Solución de problemas

<CardGroup cols={1}>
  ### Dominio personalizado

  <Card horizontal>
    Para usar un dominio personalizado (por ejemplo, `mysite.com`) en lugar de la URL predeterminada `mysite.squareweb.app`, necesitas el **plan Standard o superior**. El subdominio se define mediante el campo **SUBDOMAIN** en el archivo de configuración.
  </Card>

  ### Requisitos mínimos de RAM

  <Card horizontal>
    **Mínimo: 512MB de RAM** para sitios web/APIs sencillos. Para sitios con frameworks (Next.JS, React, Vue, Angular, etc.), siempre recomendamos **al menos 1GB de RAM**. Para aplicaciones más grandes, asigna más RAM para evitar que la aplicación se quede sin memoria y falle.
  </Card>

  ### No se pudo encontrar este sitio.

  <Card horizontal>
    Verifica que el **subdominio/dominio** coincida con lo configurado en el campo **SUBDOMAIN** o en la **configuración del dominio personalizado**. Si acabas de subir el sitio, espera hasta **60 segundos** para que Square habilite el **primer acceso**.
  </Card>

  ### El sitio tardó demasiado en responder...

  <Card horizontal>
    Verifica que hayas configurado correctamente el **puerto 80** y el **host 0.0.0.0** en la aplicación. Recomendamos usar las variables de entorno forzadas de Square: **PORT** y **HOST** del archivo `.env`.
  </Card>
</CardGroup>

## Contáctanos

Si continúas enfrentando **dificultades técnicas**, nuestro **equipo de soporte especializado** está disponible para ayudarte. [**Contáctanos**](https://squarecloud.app/es/support) y estaremos encantados de ayudarte a resolver cualquier problema.