Entdecken Sie den Positivitätswert von Twitter mit React

2019 habe ich mir vorgenommen, in meinem täglichen Leben Positivität und Freundlichkeit zu verbreiten.

Ich merkte jedoch schnell, dass dieses Ziel etwas vage und nebulös war. Es hatte zwar gute Absichten, aber ich fand es schwierig, seinen Erfolg oder seine Auswirkungen zu beurteilen.

Also habe ich einige Monate lang darüber nachgedacht, wie ich mein Ziel messen könnte, und hatte das Glück zu entdecken, dass die Microsoft Azure Textanalyse-API mir eine Möglichkeit bietet, mein Positivitätsversprechen zu verfolgen!

Das Azure-Team hat seine Algorithmen für maschinelles Lernen offengelegt, was bedeutet, dass ich die Stimmungsbewertung eines beliebigen Textes auf einer numerischen Skala von 0 bis 1 (0 ist negativ und 1 ist positiv) analysieren kann.

Das bedeutet, dass ich meine Sprache bewerten und sehen kann, ob ich wirklich Freundlichkeit und Positivität verbreitet habe, vor allem, wenn es um meine Beiträge in den sozialen Medien geht!

Also dachte ich, ich erstelle eine React-App, die die Twitter-API nutzt, um meinen letzten Tweet abzurufen und seine Stimmung zu analysieren, um dann die Nexmo's Messages API um mir einen Bericht zu schicken!

Sehen Sie sich das an:

Voraussetzungen

Für diese Anleitung benötigen Sie einen Account bei Vonage. Sie können sich jetzt anmelden für kostenlos wenn Sie noch keinen Account haben.

Darüber hinaus benötigen Sie auch:

• a Twitter-Entwickler Account

• a Schnelles API Account

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Wie man den Positivitätswert von Twitter mit React ermittelt

Sie werden die folgenden Aufgaben durchführen, um Ihre App zu erstellen:

1. Erstellen Sie einen Backend-Server mit Express

2. Erstellen einer Frontend-Anwendung mit React

3. Erstellen einer React-Komponente zum Empfangen eines Twitter-Benutzernamens

4. Abrufen des letzten Tweets mit der Twitter-API

5. Berechnung der Stimmungsbewertung mit der Microsoft Azure API

6. Senden Sie den Bericht mit Nexmo's Messages API an Ihr Telefon

Dieses Tutorial führt Sie von Grund auf durch den Prozess. Wenn Sie jedoch den fertigen Code sehen möchten, können Sie das Git-Repository für dieses Projekt klonen.

Erstellen eines Backend-Servers mit Express

Um zu beginnen, führen Sie im Hauptverzeichnis dieses Projekts aus:

Dadurch wird eine package.json Datei, die es Ihnen ermöglicht, mit der Installation einiger weniger Abhängigkeiten zu beginnen.
Führen Sie dazu aus:

Damit Sie Ihren Server und Ihren Client mit einem einzigen Befehl starten können npm run devzu starten, öffnen Sie Ihre package.json Datei und ändern Sie die Skripte so, dass sie wie folgt aussehen:

// package.json
  "scripts": {
      "start": "node server.js",
      "server": "nodemon server.js",
      "client": "npm start --prefix client",
      "dev": "concurrently \"npm run server\" \"npm run client\""
    },

Als Nächstes erstellen Sie drei weitere Dateien in Ihrem Basisverzeichnis:.env, server.js und private.key:

Füllen Sie Ihre .env Datei mit den Anmeldedaten für Nexmo und Twitter aus. Sie sollte wie folgt aussehen:

# .env

# Nexmo's credentials
API_KEY=*****
API_SECRET=*********
APPLICATION_ID=**********
NEXMO_NUMBER=***********
# Twitter's credentials
CONSUMER_KEY=*******
CONSUMER_SECRET=*******
ACCESS_TOKEN_KEY=**************
ACCESS_TOKEN_SECRET=*************

Um den API-Schlüssel und das Geheimnis einzugeben, besuchen Sie Nexmo's Erste Schritte Seite in Ihrem Dashboard. Und die Anwendungs-ID und den privaten Schlüssel erhalten Sie auf der Seite Eine Anwendung erstellen Seite.
Bei der Erstellung der App haben Sie die Möglichkeit, die App mit Ihrer Nexmo-Telefonnummer zu verknüpfen. Kopieren Sie diese Telefonnummer und fügen Sie sie in Ihre .env Datei als die NEXMO_NUMBER.

Stellen Sie sicher, dass Sie auch ein öffentliches/privates Schlüsselpaar erzeugen. Ich habe den Schlüssel direkt in die private.key Datei eingefügt.

Zum Ausfüllen der Verbraucher- und Zugangsschlüssel und Geheimnisse, eine Twitter-App erstellen und erzeugen Sie die Schlüssel und Token.

Jetzt in Ihrer server.js Datei unsere Express-Anwendung initialisieren und ein paar Anforderungen anhängen:

//  server.js  
const dotenv = require('dotenv');
const express = require('express');
const bodyParser = require('body-parser');
const Nexmo = require('nexmo');
const Twitter = require('twitter');

dotenv.config();
const app = express();
app.use(bodyParser.json());

const port = 5000;

app.listen(port, () => console.log(`server started on port ${port}`));

Fügen Sie auch die verschiedenen Anmeldeinformationen hinzu, die Sie für die Nutzung der Nexmo und Twitter APIs benötigen:

//  server.js  continued:

// Nexmo credentials
const nexmo = new Nexmo({
  apiKey: process.env.API_KEY,
  apiSecret: process.env.API_SECRET,
  applicationId: process.env.APPLICATION_ID,
  privateKey: './private.key'
}, {debug: true});

// Twitter credentials
const client = new Twitter({
  consumer_key: process.env.CONSUMER_KEY,
  consumer_secret: process.env.CONSUMER_SECRET,
  access_token_key: process.env.ACCESS_TOKEN_KEY,
  access_token_secret: process.env.ACCESS_TOKEN_SECRET
});

Am Ende dieser Datei server.js fügen Sie die beiden Signaturen der Endpunkte hinzu, auf die wir gleich noch zurückkommen werden, um sie zu schreiben:

//  server.js  continued:
app.post('/userName', function(req, res) {});
app.post('/sendSMS', function(req, res) {});

Erstellen einer Frontend-App mit React

Als Nächstes erstellen Sie, immer noch im Stammverzeichnis, Ihre React-App, indem Sie sie ausführen:

Ich habe der App einen Namen gegeben client benannt, aber Sie können sie nennen, wie Sie wollen. Sobald die React-App erstellt wurde, rufen Sie sie auf und starten sie, um sicherzustellen, dass bei der Installation alles korrekt funktioniert hat:

Damit Sie beide Ports gleichzeitig ausführen können, fügen Sie in der client/package.json Datei hinzufügen:

// package.json
 "proxy": "http://localhost:5000",

Das Ausführen der create-react-app liefert eine Reihe von Textbausteinen. Innerhalb des src/ Ordner befindet sich eine App.js Datei. In dieser Datei habe ich einen Aufruf zu einer <TwitterName /> Komponente hinzugefügt, die wir als nächstes aufbauen werden.
Meine App.js Datei sieht wie folgt aus:

// client/src/App.js
import React from 'react';
import TwitterName from './components/twitterName';

class App extends React.Component {
  render() {
    return (
      <div>
        <TwitterName />
      </div>
    );
  }
}

export default App;

Als nächstes erstellen wir einen components Ordner innerhalb von src/:

In diesem Ordner erstellen Sie drei Dateien:

Erstellen einer Komponente zum Empfangen eines Twitter-Benutzernamens

Innerhalb von twitterName.js zusammen mit meinem Boilerplate, erstellen wir zwei Funktionen senduserName() und getTweet():

// client/src/components/twitterName.js

import React from 'react';
import SentimentCalculate from './sentimentCalculate';

class TwitterName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      tweetContent: '',
    };
  }
  senduserName();
  getTweet();
  render();
}

export default TwitterName;

In die render() einfügen <input /> um den Twitter-Benutzernamen als Status vom Benutzer zu erhalten und zu speichern.

// client/src/components/twitterName.js

 render() {
    return (
      <div>
      <label>
        Enter a Twitter Handle and find the most recent tweet:
        <input
          placeholder="twitter name"
          type="text"
          value={this.state.userName}
          onChange={(e) => this.setState({ userName: e.target.value})}
        />
      </label>
        <button onClick={this.senduserName}>
          find most recent tweet
        </button>
      </div>
    )
  }

Die senduserName() wird aufgerufen, sobald ein Benutzer seinen Benutzernamen eingegeben und die find most recent tweet Schaltfläche gedrückt hat. Diese Funktion sendet Informationen an das server.js Backend und sieht wie folgt aus:

//client/src/components/ twitterName.js

senduserName = (event) => {
    event.preventDefault();
    fetch('/userName', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({userName: this.state.userName})
    })
    this.getTweet()
  }

Diese Funktion ruft dann die getTweet() Funktion auf, die wie folgt aussieht:

// client/src/components/twitterName.js

  getTweet = (event) => {
    fetch('/twitter')
    .then(res => res.json())
    .then(tweetContent => this.setState({tweetContent}, () => console.log('tweet fetched: ', tweetContent)))
  }

Diese Funktion empfängt die Daten vom Server und zeigt dann den neuesten Tweet auf unserer React-Seite an.

Das einzige, was auf dieser Seite noch zu tun ist, ist der Aufruf der nächsten Komponente, <SentimentCalculate /> aufzurufen und daher am Ende der Seite render() hinzufügen und den Status übergeben (tweetContent und userName) an diese Komponente:

// client/src/components/twitterName.js
  render() {
    return (
      <div>
        <input
          placeholder="twitter name"
          type="text"
          value={this.state.userName}
          onChange={(e) => this.setState({ userName: e.target.value})}
        />
        <button onClick={this.senduserName}>
          find most recent tweet
        </button>

        <SentimentCalculate tweetContent={this.state.tweetContent} userName={this.state.userName} />
      </div>
    )
  }

Abrufen des letzten Tweets mit der Twitter-API

Gehen wir zurück zur Datei server.js Datei in der Wurzel unseres Projekts und füllen die app.post('/userName'); Funktion:

//server.js

// Receive input and call Twitter API
app.post('/userName', function(req, res) {
  userName = req.body.userName;
  app.get('/twitter', (req, res) => {
    // read most recent tweet
    var username = {screen_name: userName };
    client.get('statuses/user_timeline', username, function(error, tweets, response) {
      if (!error) {
        console.log(`most recent tweet: `, tweets[0].text);
        res.json(tweets[0].text)
      }
    });
  });
});

Hier wird die userName vom Client übergeben und dann an die Twitter-API gesendet. Der aktuellste Tweet wird dann an den Client zurückgesendet, um in unserem React-Code angezeigt zu werden.

Berechnung des Sentiment Score mit der Microsoft Azure API

Bauen wir nun unsere sentimentCalculate.js Datei nun mit zwei verschiedenen Funktionen calculateSentiment() und showTweet():

//client/src/components/sentimentCalculate.js

import React from 'react';
import unirest from 'unirest';
import PhoneNumber from './phoneNumber';
require('dotenv').config()

class SentimentCalculate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tweetContent: props.tweetContent,
      userName: props.userName,
      score: ''
    };
  }
  calculateSentiment();
  showTweet();
  render();
}
export default SentimentCalculate;

Beachten Sie, dass ich den Zustand initialisiere und in den tweetContent und userName als Requisiten aus der <TwitterName /> Komponente.

Die Funktion showTweet() Funktion ist recht einfach und zeigt den Tweet an, wenn er existiert. Außerdem zeigt sie eine Schaltfläche zum Aufrufen der calculateSentiment() Funktion aufzurufen:

//client/src/components/sentimentCalculate.js
  showTweet() {
    if (this.props.tweetContent) {
      return (
        <div>
          {this.props.tweetContent}
          <button onClick={this.calculateSentiment}>
            Calculate sentiment score
          </button>
        </div>
      )
    }
  }

Die calculateSentiment() Funktion wird wie folgt aussehen:

//client/src/components/sentimentCalculate.js

  calculateSentiment = (event) => {
    console.log("calculating sentiment for: ", this.props.tweetContent)
    event.preventDefault();
    unirest.post("https://microsoft-azure-text-analytics-v1.p.rapidapi.com/sentiment")
    .header("X-RapidAPI-Host", "microsoft-azure-text-analytics-v1.p.rapidapi.com")
    .header("X-RapidAPI-Key", process.env.REACT_APP_RAPIDAPI_KEY)
    .header("Content-Type", "application/json")
    .send({"documents":[{"language":"en","id":"string","text":this.props.tweetContent}]})
    .end((result) => {
      const newScore = result.body.documents[0].score
      console.log("The score is:", newScore)
      this.setState({ score: newScore })
    });
  }

Diese Funktion ruft die Textanalyse von Microsoft Azure über die schnelle API. Ich verwende Rapid API gerne, da es mir erlaubt, von einem einzigen Login aus eine Verbindung zu einer Reihe von verschiedenen APIs herzustellen.
Ich bewahre den Schlüssel in einer .env Datei im Ordner client Ordner. Stellen Sie also sicher, dass Sie eine neue .env Datei zu erstellen, um Ihre Anmeldedaten ebenfalls zu schützen:

Die Funktion calculateSentiment() Funktion sendet die tweetContent an die API und gibt eine Punktzahl zurück.
Fügen Sie der render() Funktion eine Stelle hinzu, an der der neue Status angezeigt wird:

//client/src/components/sentimentCalculate.js

  render() {
    return (
      <div>
        {this.showTweet()}
        {this.state.score && `Tweet's sentiment score: ${this.state.score}`}
        <PhoneNumber score={this.state.score} tweetContent={this.props.tweetContent} userName={this.props.userName} />
      </div>
    )
  }

Beachten Sie, dass unter der Partitur die letzte Komponente genannt wird: <PhoneNumber />. Vergewissern Sie sich, dass Sie auch den Status über props an diese Komponente übergeben.

Senden Sie Ihren SMS Sentiment Report mit Nexmos Messages API

Bauen wir nun unsere endgültige phoneNumber.js Datei jetzt mit den Funktionen sendSMS(), renderPhoneInput(), und renderSendButton() um die Funktionalität für den Versand unserer SMS-Nachricht über die Nexmo Messages API zu erstellen:

//client/src/components/phoneNumber.js  

import React from 'react';

class PhoneNumber extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      score: props.score,
      tweetContent: props.tweetContent,
      userName: props.userName,
      number: ''
    };
    this.sendSMS = this.sendSMS.bind(this);
  }
  sendSMS();
  renderPhoneInput();
  renderSendButton();
  render() {
    return (
      <div>
        {this.renderPhoneInput()}
        {this.renderSendButton()}
      </div>
    )
  }

}
export default PhoneNumber;

Die erste aufgerufene Methode ist renderPhoneInput(). Lassen Sie uns das jetzt ausbauen:

//client/src/components/phoneNumber.js  

  renderPhoneInput() {
    if (this.props.score) {
      return (
        <div>
          Phone number:
          <input
            placeholder="18005554444"
            type="tel"
            value={this.state.number}
            onChange={(e) => this.setState({ number: e.target.value})}
          />
        </div>
      );
    }
  }

Wenn die Komponente eine Bewertung von der letzten Komponente erhalten hat, zeigt diese Funktion eine Eingabe an, bei der der Benutzer seine Telefonnummer angeben kann, um den Stimmungsanalysebericht zu senden. Sobald der Benutzer eine gültige Nummer angegeben hat, wird die Funktion renderSendButton() Funktion aktiviert werden:

//client/src/components/phoneNumber.js  

  renderSendButton() {
    if (this.state.number && this.state.number.match(/\d/g).length===11) {
        return (
          <div>
            <button onClick={this.sendSMS}>
            Send the tweet’s score to my phone
            </button>
          </div>
        );
      }
  }

Diese Schaltfläche ruft dann die letzte Funktion auf, sendSMS()auf, die wie folgt aussieht:

//client/src/components/phoneNumber.js  

  sendSMS() {
    fetch('/sendSMS', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        number: this.state.number,
        score: this.props.score,
        tweetContent: this.props.tweetContent,
        userName: this.props.userName
      })
    })
   .then(res => {
      alert('Your text was successfully sent!')
    })
    .catch(function(error){ console.log(error)});
  }

Diese Funktion sendet alle Daten, die wir vom Benutzer gesammelt haben, an den Server. Und schließlich benachrichtigt sie den Benutzer, sobald die Funktion erfolgreich abgeschlossen ist.

Unser letzter Schritt ist die Rückkehr zum server.js und schreiben die app.post('/sendSMS') Funktion:

//server.js  

// send SMS via Nexmo
app.post('/sendSMS', (req, res) => {
  res.send(req.body);
  let score = req.body.score;
  let scoreSign = '';

  // analyze the sentiment and assign emoji
  if (score > '.5') {
    scoreSign = '✅'
  } else if (score == '.5') {
    scoreSign = '😐'
  } else {
    scoreSign = '👿'
  }

  //  Nexmo Messages API
  nexmo.channel.send(
    { type: 'sms', number: req.body.number }, // To
    { type: 'sms', number: process.env.NEXMO_NUMBER }, // From
    {
      content: {
        type: 'text',
        text: `${req.body.userName}'s most recent tweet was: \"\ ${req.body.tweetContent}\"\ and the sentiment score is: ${scoreSign}`,
      }
    },
    (err, data) => {
      if (err) {
        console.log(err);
      } else {
        console.log(data);
      }
    }
  );
});

Oben gibt es eine kleine Logik, um eine Stimmungsanalyse auf der Grundlage der Punktzahl durchzuführen. Sie können das natürlich entfernen, wenn Sie lieber die genaue Nummer als Emojis senden möchten.
Der Bericht wird dann als SMS von Ihrer Nexmo-Nummer an die Nummer gesendet, die der Nutzer angegeben hat.

Ihre Anwendung ausführen

So sieht die Struktur meiner endgültigen Anwendung aus:

Structure of folders and files

Der letzte Schritt besteht darin, den Code auszuprobieren und zu sehen, wie die Dinge funktionieren! Gehen Sie zurück in das Stammverzeichnis und führen Sie den Befehl aus, der den Server und den Client gleichzeitig startet:

Der Besuch von localhost:3000 wird unsere React-Komponente angezeigt, die den Benutzer zur Eingabe eines Twitter-Handles auffordert.
Der letzte Tweet dieses Nutzers wird dann abgerufen und auf der Seite angezeigt.
Klicken Sie auf die calculate the sentiment um die Microsoft Azure Text Analytics API aufzurufen und die Bewertung des Tweets anzuzeigen.
Geben Sie Ihre persönliche Telefonnummer ein und der SMS-Bericht wird Ihnen über die Nexmo Message API zugesandt.

🎉Voila!🎉 Du hast erfolgreich eine React-App erstellt, um die Stimmung auf Twitter zu analysieren, die in der Lage ist, einen SMS-Bericht an jeden zu senden!

Nächste Schritte

Wenn dies Ihr Interesse geweckt hat, mehr mit Nachrichten und Stimmungsanalysen zu tun, finden Sie hier einige Ideen, was Sie als nächstes ausprobieren können:

• Nexmo's Dispatch API ermöglicht es Ihnen, Ihre Nachricht je nach Zustellungsstatus umzuleiten. Spielen Sie damit herum und versuchen Sie, Ihren Stimmungsbericht auch an Viber oder WhatsApp zu senden!

• Spielen Sie mit Twitters /streaming und erwägen Sie, jedes Mal einen Bericht zu senden, wenn ein Nutzername twittert.