> ## 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.

# Top.gg-Webhook auf Square Cloud konfigurieren

> Eine ausführliche Anleitung zur Einrichtung des Top.gg-Webhooks auf Square Cloud.

## Einführung

* Diese Anleitung setzt voraus, dass du einen genehmigten Bot auf [top.gg](https://top.gg/) hast und für dein Projekt entweder Node.js oder Python verwendest.
* Als Nächstes musst du ein Konto bei Square Cloud erstellen, was über die [Registrierungsseite](https://squarecloud.app/signup) möglich ist. Du kannst deine E-Mail-Adresse verwenden, um ein Konto zu erstellen.
* Schließlich musst du einen aktiven kostenpflichtigen Plan in deinem Konto haben. Du kannst unsere Pläne ansehen und einen nach deinen Bedürfnissen [hier](https://squarecloud.app/de/pricing) erwerben.

## Einrichtung der Umgebung

<Tabs>
  <Tab title="Node.js">
    1. Bevor du beginnst, stelle sicher, dass Node.js und npm auf deinem System installiert sind. Falls du sie noch nicht hast, kannst du sie von der [offiziellen Node.js-Website](https://nodejs.org/) herunterladen.
    2. Starte ein neues Node.js-Projekt mit dem folgenden Befehl:

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

    Dieser Befehl erstellt eine package.json-Datei im aktuellen Verzeichnis.

    2. Installiere die notwendigen Bibliotheken:

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

  <Tab title="Python">
    1. Stelle sicher, dass Python und Pip (ein Paketmanager für Python) auf deinem System installiert sind. Falls nicht, kannst du sie von der [offiziellen Python-Website](https://www.python.org/) und der [offiziellen Pip-Website](https://pypi.org/) herunterladen.
    2. Installiere die Bibliotheken `flask` und `waitress` mit pip:

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

## Einrichtung des Projekts

**1. Hole dir deine Webhook-Authentifizierung:**

* Gehe zu deinem Top.gg-Profil [hier](https://top.gg/user/me).
* Klicke auf "edit" bei dem Bot, für den du Benachrichtigungen über Votes erhalten möchtest.
* Wähle unter "GENERAL" die Option "webhook".
* Lege die Webhook-Authentifizierung unter "Authorization" fest. In diesem Beispiel haben wir "myappsquare" verwendet.

**2. Implementiere den Webhook-Listener:**

Die folgenden Abschnitte enthalten Codebeispiele für Javascript und Python:

<Tabs>
  <Tab title="Node.js">
    Wir verwenden das von der Top.gg-Dokumentation [hier](https://docs.top.gg/docs/Libraries/javascript) bereitgestellte Beispiel mit einigen Änderungen.

    ```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">
    Für Python kannst du den folgenden Code verwenden:

    ```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>

## Erstellen der squarecloud-Konfigurationsdatei

<Card title="Mehr erfahren: Wie man die Konfigurationsdatei für Square Cloud erstellt." icon="link" href="https://docs.squarecloud.app/de/getting-started/config-file">
  Die squarecloud.app-Datei ist eine Konfigurationsdatei, die zur Konfiguration deiner Anwendung verwendet wird; sie dient dazu, unter anderem den Namen, die Beschreibung, die Version und die Hauptdatei festzulegen.
</Card>

## Deine Anwendung auf Square Cloud hochladen

Nachdem du alle Schritte befolgt hast, packe deine Anwendungsdateien in eine `.zip`-Datei, einschließlich der Konfigurationsdatei.

Wenn deine Anwendung ein Node.js-Projekt ist, wirf einen Blick auf unseren Artikel zu [Node.js](/de/articles/getting-started-with-nodejs).

Wenn deine Anwendung ein Python-Projekt ist, wirf einen Blick auf unseren Artikel zu [Python](/de/articles/getting-started-with-python).

<Tabs>
  <Tab title="Dashboard-Upload">
    Rufe das [Square Cloud
    Dashboard](https://squarecloud.app/de/dashboard/new) auf und lade deine Projektdateien
    hoch.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading.gif" alt="Anwendung wird auf Square Cloud hochgeladen" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Tab>

  <Tab title="CLI-Upload">
    <Steps>
      <Step title="Erster Schritt">
        Zuerst musst du die CLI in deiner Umgebung installiert haben. Falls du sie
        noch nicht hast, führe den folgenden Befehl in deinem Terminal aus:

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

        Falls du sie bereits hast, empfehlen wir, sie zu aktualisieren. Führe dazu den folgenden Befehl in deinem Terminal aus:

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

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

      <Step title="Zweiter Schritt">
        Um dich nun zu authentifizieren und andere CLI-Befehle zu verwenden, findest du deinen
        Autorisierungsschlüssel [hier](https://squarecloud.app/de/account), indem du auf
        "Request API Key" klickst. Nachdem du deinen Autorisierungsschlüssel erhalten hast, führe den
        folgenden Befehl aus:

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

      <Step title="Dritter Schritt">
        Um deine Anwendung schließlich mit der CLI auf Square Cloud zu deployen, musst du den folgenden Befehl ausführen und dabei den Pfad deiner ZIP-Datei übergeben:

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

## Tests starten

Wenn du alles richtig gemacht hast, versuche, auf deine Website über die in der Konfigurationsdatei definierte Subdomain zuzugreifen. Wenn du sie als "mysite" definiert hast, lautet der Zugriff `mysite.squareweb.app`. Wenn nach dem Zugriff nur "Cannot GET /" oder "Method Not Allowed" erscheint, ist alles in Ordnung.

Nun musst du zur vorherigen Seite zurückkehren, auf der die Autorisierung definiert wurde. Im Feld Webhook URL solltest du die URL deiner Website zusammen mit der Route eintragen, die die Votes empfängt.

* Für den JavaScript-Code, den wir mit `app.post("/topgg", webhook.listener((vote) => {...})` erstellt haben, ist die Route, die die Votes empfängt, "/topgg". Wenn deine Website also "mysite.squareweb.app" ist, solltest du "mysite.squareweb.app/topgg" als Webhook URL eintragen.

* Für den Python-Code, den wir mit `@app.route("/topgg", methods=["POST"])` erstellt haben, ist die Route, die die Votes empfängt, ebenfalls "/topgg". Die Webhook URL wäre also dieselbe "mysite.squareweb.app/topgg".

<Frame>
  <img src="https://cdn.squarecloud.app/docs/articles/topgg/example-url.png" alt="Beispiel für die Konfiguration der Top.gg-Webhook-URL" style={{ borderRadius: "0.2rem" }} />
</Frame>

Klicke abschließend auf die Schaltfläche "Send Test". Überprüfe danach das Terminal. Wenn alles gut gelaufen ist, sollte die Nachricht, die du in `console.log` oder `print` definiert hast, im Terminal erscheinen.

<Frame>
  <img src="https://cdn.squarecloud.app/docs/articles/topgg/example-send.png" alt="Beispiel für den Top.gg-Webhook-Testversand" style={{ borderRadius: "0.2rem" }} />
</Frame>

Und damit ist dein Webhook, sofern alles korrekt konfiguriert wurde, bereit, Benachrichtigungen zu senden, wenn dein Bot einen Vote auf top.gg erhält.

## Fehlerbehebung

<CardGroup cols={1}>
  ### Eigene Domain

  <Card horizontal>
    Um eine eigene Domain (z. B. `mysite.com`) anstelle der Standard-URL `mysite.squareweb.app` zu verwenden, benötigst du den **Standard-Plan oder höher**. Die Subdomain wird über das Feld **SUBDOMAIN** in der Konfigurationsdatei festgelegt.
  </Card>

  ### Mindestanforderungen an den Arbeitsspeicher

  <Card horizontal>
    **Minimum: 512MB RAM** für einfache Websites/APIs. Für Seiten mit Frameworks (Next.JS, React, Vue, Angular usw.) empfehlen wir stets **mindestens 1GB RAM**. Für größere Anwendungen solltest du mehr RAM zuweisen, damit der Anwendung nicht der Speicher ausgeht und sie abstürzt.
  </Card>

  ### Diese Seite konnte nicht gefunden werden.

  <Card horizontal>
    Prüfe, ob die **Subdomain/Domain** mit dem übereinstimmt, was im Feld **SUBDOMAIN** oder in den **Einstellungen der eigenen Domain** konfiguriert ist. Wenn du die Seite gerade erst hochgeladen hast, warte bis zu **60 Sekunden**, bis Square den **ersten Zugriff** aktiviert.
  </Card>

  ### Die Seite hat zu lange zum Antworten gebraucht...

  <Card horizontal>
    Prüfe, ob du in der Anwendung **Port 80** und **Host 0.0.0.0** korrekt konfiguriert hast. Wir empfehlen die Verwendung der von Square erzwungenen Umgebungsvariablen: **PORT** und **HOST** aus der `.env`-Datei.
  </Card>
</CardGroup>

## Kontaktiere uns

Falls du weiterhin **technische Schwierigkeiten** hast, steht dir unser **spezialisiertes Support-Team** zur Verfügung. [**Kontaktiere uns**](https://squarecloud.app/de/support) und wir helfen dir gerne, jedes Problem zu lösen.