Einen Slack-Bot mit Zapier und JavaScript erstellen, um aktuelle Reddit-Themen abzurufen

Reddit ist eine gute Anlaufstelle, um bei Neuigkeiten rund um die Webentwicklung auf dem Laufenden zu bleiben. Wenn es Ihnen wie mir geht, folgen Sie wahrscheinlich Subreddits wie r/node oder r/javascript. Kürzlich habe ich eine großartige Möglichkeit entdeckt, mit meinen JavaScript-Kenntnissen eine Zapier-Reddit-Integration zu erstellen – so kann ich aktuelle Reddit-Beiträge im Channel meines Teams teilen.

In diesem Artikel erfahren Sie:

• Wie Sie eine Slack-Bot-Integration erstellen.

• Wie Sie in Zapier Trigger- und Aktions-Workflows einrichten, um Nachrichten in einem Slack-Channel zu posten.

• Wie Sie mit einem Reddit-API-Schlüssel über native Reddit Access Tokens und Refresh Tokens auf Beiträge zugreifen.

• Wie Sie über den anonymen JSON-Endpunkt auf Reddit-Beiträge zugreifen.

• JavaScript-Code schreiben (kompatibel mit Node.js Version 10, beachten Sie: Diese Version hat das Supportende erreicht), um mit dem HTTP-Client node-fetch Reddit-Informationen abzurufen.

Was können Sie mit einem Slack-Bot tun?

In diesem Tutorial erfahren Sie, wie Sie einen Slack-Bot in JavaScript schreiben. Das umfangreiche API-Ökosystem von Zapier ermöglicht es Ihnen jedoch, viele weitere Informationsquellen mit der Slack-Bot-API zu verbinden. Dieses Slack-Bot-Tutorial konzentriert sich zwar auf JavaScript, aber Sie können mit den HTTP-Webhooks von Zapier auch eine Slack-Bot-Node.js-Anwendung schreiben, wenn Sie Ihre Node.js-Anwendungen in der Cloud hosten.

Eine Zapier-Reddit-Integration erstellen, um neue aktuelle Themen zu verarbeiten

Was ist Zapier?

Zapier ist eine Automatisierungsplattform, mit der Sie viele andere Plattformen integrieren können, um sie miteinander zu verbinden und einen Workflow zu erstellen. Zapier wird vor allem für APIs und native Integrationen genutzt, sofern diese im Zapier Marketplace verfügbar sind. Besonders leistungsfähig ist die Plattform jedoch, weil sie Ihnen Rohdaten aus den Integrationspunkten bereitstellt und Sie den Workflow-Prozess mithilfe von Code anpassen können.

Für die Slack-Bot-Integration verwenden wir Zapier. Die Plattform bietet bereits eine native Integration mit Slack. Das bedeutet, dass wir unseren Bot weder auf einem dedizierten Server hosten noch eine weitere separate Slack-Bot-Integration erstellen müssen.

Nachdem wir die Slack-Bot-Integration mit Zapier eingerichtet haben, sind die nächsten Schritte:

1. Einen Zeitplan für die Ausführung der Integration festlegen. Dabei kann es sich um einen wiederkehrenden Zeitplan handeln, nach dem die Zapier-Aufgabe ausgelöst und die Verarbeitung gestartet wird.

2. Eine benutzerdefinierte JavaScript-Code-Aufgabe in Zapier einrichten, um die für uns interessanten aktuellen Themen über den JSON-Endpunkt von Reddit abzurufen.

3. Die aktuellen Themen nach unseren Wünschen formatieren und sie über die integrierte native Slack-Bot-Integration von Zapier an einen Slack-Channel senden.

In der Zapier-Workflow-Oberfläche sieht der gesamte Prozess so aus:

Der Trigger: jede Woche über Schedule by Zapier

Zunächst richten wir den wiederkehrenden Zeitplan für den Zapier-Workflow ein. Ich habe mich dafür entschieden, ihn jeden Montag um 8:00 Uhr UTC auszuführen:

Wie automatisieren Sie Slack-Nachrichten?

In diesem Slack-Bot-Tutorial verwenden wir einen zeitgesteuerten Trigger von Zapier. Die Zapier-API-Plattform bietet jedoch viele weitere Trigger, mit denen sich Slack-Automatisierungen auslösen lassen. Dazu gehören beispielsweise Twitter-Erwähnungen, Google-Sheets-Aktualisierungen, Änderungen an Google-Kalenderterminen und RSS-Feed-Aktualisierungen. Diese und weitere Optionen können Sie in Ihre Slack-Bot-JavaScript-Automatisierung einbinden. Sie können sogar Snyk-Sicherheitsbenachrichtigungen automatisieren, um Schwachstellen in Ihrem Team nachzuverfolgen!

Aktion: JavaScript mit Code by Zapier ausführen

Nachdem wir den zeitbasierten Trigger für den Workflow festgelegt haben, können wir Aktionen erstellen, die bestimmte Aufgaben ausführen. Mit der Zapier-Integration können wir die in diesen Aufgaben verarbeiteten Daten verbinden und an die nächste Aktion in der Kette weitergeben.

Wählen Sie als Aktion den Typ Run JavaScript in Code by Zapier. Wählen Sie in der Konfiguration unter Event die Option Run JavaScript. Die erste Einrichtung sollte so aussehen:

Öffnen Sie anschließend die Konfiguration Setup up action. Hier fügen wir den relevanten JavaScript-Code ein, der Informationen zu unseren aktuellen Themen über den Reddit-API-Endpunkt abruft.

So verwenden Sie einen Reddit-API-Schlüssel

Es gibt verschiedene Möglichkeiten, Reddit-Neuigkeiten abzurufen. Wir stellen Ihnen zwei Möglichkeiten vor, um Updates zu interessanten Reddit-Threads zu erhalten:

1. Einen Reddit-API-Schlüssel verwenden, für den Sie sich mit einem Reddit-Benutzerkonto registrieren müssen.

2. Einen öffentlich zugänglichen Reddit-API-Endpunkt verwenden.

Wenn Sie lediglich Lesezugriff auf Subreddits und aktuelle Beiträge benötigen, verwenden Sie den einfacheren Workflow ohne Reddit-oAuth-API. Springen Sie dazu zum zweiten Teil dieses Kapitels zum Reddit-API-Zugriff.

Einen Reddit-API-Schlüssel registrieren

Rufen Sie zunächst die Reddit API application preferences auf und klicken Sie unten auf dem Bildschirm auf Create an app. Geben Sie anschließend die Informationen zu Ihrem API-Anwendungsfall ein. Legen Sie als Anwendungstyp webapp fest und geben Sie eine Redirect-URI an, über die die Access Tokens verarbeitet werden.

Anschließend erhalten Sie eine ClientID und ein ClientSecret, mit denen Sie API-Aufrufe durchführen können. Falls Sie unsicher sind, wie Sie die Reddit-API abfragen und den Reddit-oAuth-Workflow durchlaufen, lesen Sie weitere Einführungs-Tutorials, zum Beispiel dieses zum Scraping von Reddit.

Beachten Sie, dass Sie die Reddit’s API Access terms lesen sollten, um sich mit den Regeln und Bedingungen für den Zugriff auf die Reddit-API vertraut zu machen.

Reddit-API-JavaScript-Beispiel

Wir konzentrieren uns darauf, interessante Reddit-Threads mit JavaScript abzurufen. Dafür benötigen wir die oben erwähnten Anmeldedaten ClientID und ClientSecret sowie den Wert refresh_token. Dieser ist vorhanden, wenn Sie sich für die Erstellung eines permanenten Reddit-oAuth-Access-Tokens entschieden haben.

Das folgende Beispiel zeigt, wie Sie mit nativem JavaScript-Code und einem Reddit-API-Schlüssel Beiträge eines Subreddits abfragen. Ersetzen Sie den Text ABCD im folgenden Codeausschnitt durch die oben genannten Reddit-Anmeldedaten, damit der Code ordnungsgemäß funktioniert:

1js
2  // start -- get access token
3   const clientId = ‘ABCD’;
4   const clientSecret = ABCD’;
5
6   const dataSecrets = `${clientId}:${clientSecret}`;
7   const text = Buffer.from(dataSecrets).toString("base64");
8
9   var url = new URL('https://www.reddit.com/api/v1/access_token');
10   var params = {grant_type: 'refresh_token', refresh_token: ‘ABCD'};
11
12   url.search = new URLSearchParams(params).toString();
13
14    const settings = {
15        method: 'POST',
16        headers: {
17            'User-Agent': 'query-api 1.0',
18            'Accept': 'application/json',
19            'Authorization': `Basic ${text}`,
20        },
21        credentials: 'omit'
22    };
23
24    const res = await fetch(url.href, settings);
25    const body = await res.json();
26    const accessToken = body.access_token;
27
28    // -----------------------------------------------------
29    // make reddit api request
30    const params2 = {'limit': 3, 't': 'week'};
31    const url2 = new URL('https://oauth.reddit.com/r/node/top');
32    url2.search = new URLSearchParams(params2).toString();
33
34    const settings2 = {
35        method: 'GET',
36        headers: {
37            'User-Agent': 'query-api 1.0',
38            'Accept': 'application/json',
39            'Authorization': `Bearer ${accessToken}`,
40        },
41        credentials: 'omit'
42    };
43
44    const res2 = await fetch(url2.href, settings2);
45    const body2 = await res2.json();
46
47    let data = [];
48    let message = `Top Node.js posts this week:\n\n`;
49
50    const topPosts = body2.data.children;
51    topPosts.forEach((post) => {
52        data.push({
53          link: post.data.url,
54          redditLink: post.data.permalink,
55          text: post.data.title,
56          score: post.data.score,
57          replies: post.data.num_comments
58        });
59
60        const text = post.data.title;
61        const redditLink = post.data.permalink;
62
63        message = message + `<https://reddit.com${redditLink}|${text}> \n`;
64    });
65
66    return {id: 1, message: message};

Dieser Reddit-API-JavaScript-Codeausschnitt verwendet den refresh_token, um die Reddit-API abzufragen und ein access_token anzufordern. Sobald wir das Reddit-API-Access-Token erhalten haben, können wir eine neue HTTP-Anfrage erstellen, die aktuelle Reddit-Beiträge aus dem Subreddit r/node abruft. Zum Schluss durchlaufen wir alle Beitragsdaten und erstellen eine Nachrichtenzeichenfolge, die an die nächste Aktion weitergegeben wird.

Zwei wichtige Anmerkungen zum vorherigen Codeausschnitt:

1. Beachten Sie, dass die korrekte und aktuelle API-Abfrage der Reddit-Daten den in params2 verwendeten Abfrageparameter t nutzt. In einigen veralteten Tutorials und Anleitungen wird jedoch weiterhin time erwähnt.

2. Ein weiterer interessanter Punkt: Da Zapier uns auf eine alte Version von node-fetch beschränkt, die mit einer Node.js-Runtime-Version ohne Support (Node.js v10) ausgeführt wird, können Sie das URL-Objekt direkt für HTTP-Anfragen verwenden:

   js const url2 = new URL('https://oauth.reddit.com/r/node/top'); const res2 = await fetch(url2, settings2);

1js
2    const url2 = new URL('https://oauth.reddit.com/r/node/top');
3    const res2 = await fetch(url2, settings2);

Weitere API-Operationen finden Sie in der vollständigen und aktuellen Reddit-API-Dokumentation. Dort sind alle verfügbaren Endpunkte zu Reddit-Konten, Verlauf, Subreddit-Moderation und weiteren Funktionen aufgeführt.

Reddit-Informationen über den öffentlichen JSON-Endpunkt abfragen

Bevor wir mit der nächsten JavaScript-Zapier-Aktion fortfahren, sehen wir uns kurz an, wie Sie eine Reddit-API abfragen können, ohne sich per oAuth oder mit einem anderen API-Schlüssel zu authentifizieren.

Reddit stellt Informationen zu Subreddit-Threads im JSON-Format über den folgenden öffentlichen Endpunkt bereit, für den keine Authentifizierung erforderlich ist:

1sh
2https://www.reddit.com/r/node/top.json

Sie können auch die Top-Beiträge dieses Subreddits abrufen und einen Zeitraum angeben, indem Sie die folgenden Abfrageparameter hinzufügen:

1sh
2https://www.reddit.com/r/node/top.json?limit=1&t=month

Die JSON-Antwort von Reddit sieht etwa so aus:

1json
2{
3  "kind": "Listing",
4  "data": {
5    "after": "t3_vuyxes",
6    "dist": 1,
7    "modhash": "6v201d03619751a685b19dcf05febbf88ed6d115afa5d16b78",
8    "geo_filter": "",
9    "children": [
10      {
11        "kind": "t3",
12        "data": {
13          "approved_at_utc": null,
14          "subreddit": "node",
15          "selftext": "",
16          "author_fullname": "t2_7eb9a4k5",
17          "saved": false,
18          "mod_reason_title": null,
19          "gilded": 0,
20          "clicked": false,
21          "title": "Deno in 2022",
22          "link_flair_richtext": [],
23          "subreddit_name_prefixed": "r/node",
24          "hidden": false,
25          "pwls": 6,
26          "link_flair_css_class": null,
27          "downs": 0,
28          "top_awarded_type": null,
29          "hide_score": false,
30          "name": "t3_vuyxes",
31          "quarantine": false,
32          "link_flair_text_color": "dark",
33          "upvote_ratio": 0.92,
34          "author_flair_background_color": null,
35          "subreddit_type": "public",
36          "ups": 745,
37          "total_awards_received": 0,
38          "media_embed": {},
39          "author_flair_template_id": null,
40          "is_original_content": false,
41          "user_reports": [],
42          "secure_media": null,
43          "is_reddit_media_domain": true,
44          "is_meta": false,
45          "category": null,
46          "secure_media_embed": {},
47          "link_flair_text": null,
48          "can_mod_post": false,
49          "score": 745,
50          "approved_by": null,
51          "is_created_from_ads_ui": false,
52          "author_premium": false,
53          "thumbnail": "",
54          "edited": false,
55          "author_flair_css_class": null,
56          "author_flair_richtext": [],
57          "gildings": {},
58          "content_categories": null,
59          "is_self": false,
60          "mod_note": null,
61          "created": 1657363081,
62          "link_flair_type": "text",
63          "wls": 6,
64          "removed_by_category": null,
65          "banned_by": null,
66          "author_flair_type": "text",
67          "domain": "i.redd.it",
68          "allow_live_comments": true,
69          "selftext_html": null,
70          "likes": null,
71          "suggested_sort": null,
72          "banned_at_utc": null,
73          "url_overridden_by_dest": "https://i.redd.it/hjv8r84ttia91.jpg",
74          "view_count": null,
75          "archived": false,
76          "no_follow": false,
77          "is_crosspostable": true,
78          "pinned": false,
79          "over_18": false,
80          "all_awardings": [],
81          "awarders": [],
82          "media_only": false,
83          "can_gild": true,
84          "spoiler": false,
85          "locked": false,
86          "author_flair_text": null,
87          "treatment_tags": [],
88          "visited": false,
89          "removed_by": null,
90          "num_reports": null,
91          "distinguished": null,
92          "subreddit_id": "t5_2reca",
93          "author_is_blocked": false,
94          "mod_reason_by": null,
95          "removal_reason": null,
96          "link_flair_background_color": "",
97          "id": "vuyxes",
98          "is_robot_indexable": true,
99          "report_reasons": null,
100          "author": "m_ax__",
101          "discussion_type": null,
102          "num_comments": 184,
103          "send_replies": true,
104          "whitelist_status": "all_ads",
105          "contest_mode": false,
106          "mod_reports": [],
107          "author_patreon_flair": false,
108          "author_flair_text_color": null,
109          "permalink": "/r/node/comments/vuyxes/deno_in_2022/",
110          "parent_whitelist_status": "all_ads",
111          "stickied": false,
112          "url": "https://i.redd.it/hjv8r84ttia91.jpg",
113          "subreddit_subscribers": 215851,
114          "created_utc": 1657363081,
115          "num_crossposts": 0,
116          "media": null,
117          "is_video": false
118        }
119      }
120    ],
121    "before": null
122  }
123}

Die JavaScript-Antwort der Zapier-Aktion formatieren

Unabhängig davon, wie Sie die Reddit-JSON-Daten abgerufen und formatiert haben, müssen wir sie für die nächste Slack-Bot-Integration aufbereiten. Sie können dies vollständig in der vorherigen JavaScript-Zapier-Aktion erledigen oder als eigene Zapier-Aktion ausführen. So können Sie sie wiederverwenden, falls sich die Reddit-Formatierungsmethode ändert.

Der Codeausschnitt ist recht einfach. Er zeigt, wie Sie in einer JavaScript-Zapier-Aktion über die Variable inputData Eingaben entgegennehmen und diese auch als Ausgabe bereitstellen:

1js
2const slackMessage = inputData.message
3output = [{id: 123, message: slackMessage}];

Die Darstellung als Array ist nicht unbedingt erforderlich. So weisen Sie Zapier jedoch an, die nachfolgenden Aktionen nach dieser Aktion für jedes Payload-Element (oder jeden Objektwert) im Array mehrfach auszuführen.

Der folgende Screenshot dient als Referenz:

Eine Channel-Nachricht in Slack senden

Nun sind wir beim letzten Schritt der Reddit-Automatisierung mit einem Slack-Bot angekommen: Wir posten die in den vorherigen Schritten verarbeitete Nachricht in einem Slack-Channel.

Authentifizieren Sie Zapier dazu als allgemeine Integrationsanwendung in Slack und erteilen Sie der Anwendung Zugriff auf Ihre Slack-Channels sowie weitere Berechtigungen, zum Beispiel zum Posten von Nachrichten.

Fügen Sie eine neue Zapier-Aktion hinzu und wählen Sie unter Application die Option Slack. Wählen Sie im Feld Event die Option Send Channel Message. Rufen Sie anschließend die Option Choose Account auf und geben Sie idealerweise Ihr Slack-Konto an, damit die Nachrichten über Ihr Benutzerprofil gesendet werden. Alternativ können Sie das Slack-Box-Integrationskonto als allgemeinen Benutzer verwenden.

An diesem Punkt sollte es etwa so aussehen:

Rufen Sie anschließend Set up action auf und geben Sie die folgenden Informationen ein:

• Den Channel, in dem die Nachricht gepostet werden soll (in der Benutzeroberfläche mit der Option Channel bezeichnet)

• Die Option Message Text, die bereits mit dem Feld Message der vorherigen Zapier-Aktion ausgefüllt sein sollte

Die Einrichtung sollte etwa so aussehen:

Zum Schluss können Sie einen manuellen Testlauf dieses Zapier-Workflows starten. Das Ergebnis sollte etwa so aussehen:

Nachdem Sie den Zapier-Workflow überprüft und getestet haben, klicken Sie auf die Schaltfläche Publish Zap. Dadurch wird der Workflow aktiviert und anhand des von uns festgelegten wiederkehrenden Zeitplans ausgeführt.

Wie verbinden Sie die Slack-API mit anderen APIs?

Mit Zapier können Sie Slack-Bot-APIs erstellen, die weit mehr können, als nur eine Channel-Nachricht zu senden. Hier sind einige Ideen für Slack-Bot-JavaScript-Anwendungen, die Sie mit Zapier umsetzen können: eine Slack-Nachricht senden, wenn eine Zeile in einem Google Sheet aktualisiert wird; bevorstehende Google-Kalendertermine in einem Slack-Channel teilen; neue Twitter-Erwähnungen in Slack teilen oder Ihren Slack-Status während Google-Kalenderterminen oder abhängig von anderen Aktivitäten aktualisieren, die Sie mit Zapier-APIs verbinden können.

Sie haben eine Zapier-Reddit-Integration erstellt!

Heute haben wir gelernt, wie Sie einen Slack-Bot erstellen, der automatisch eine Nachricht mit den aktuell beliebtesten Reddit-News in einem Channel postet – mithilfe eines öffentlich zugänglichen JSON-Endpunkts oder eines Reddit-oAuth-API-Schlüssels.

Abschließend noch ein Hinweis: Wenn Sie eine Slack-Bot-Integration mit JavaScript-Code erstellen, sollten Sie die relevanten JavaScript-Sicherheitspraktiken befolgen und die damit verbundenen Risiken kennen, damit Sicherheitsprobleme Ihr Unternehmen nicht gefährden.