Découvrez le score de positivité de votre Twitter avec React

En 2019, je me suis mis au défi de répandre la positivité et la gentillesse dans ma vie quotidienne.

Mais je me suis rapidement rendu compte que cet objectif était un peu vague et plutôt nébuleux. Même si les intentions étaient bonnes, j'ai eu du mal à juger de son succès ou de son impact.

Pendant quelques mois, j'ai donc réfléchi à la manière de mesurer mon objectif et j'ai eu la chance de découvrir que l'API d'analyse de texte de Microsoft Azure API d'analyse de texte de Microsoft Azure d'analyse de texte de Microsoft Azure me permet de suivre mon engagement de positivité !

L'équipe d'Azure a ouvert ses algorithmes d'apprentissage automatique, ce qui signifie que je peux analyser le score de sentiment de n'importe quel texte sur une échelle numérique de 0 à 1 (0 étant négatif et 1 étant positif).

Cela signifie que je peux évaluer mon langage et voir si j'ai vraiment répandu la gentillesse et la positivité, en particulier lorsqu'il s'agit de mes messages sur les médias sociaux !

J'ai donc pensé créer une application React qui utilise l'API Twitter API pour extraire mon tweet le plus récent et analyser son sentiment, puis utiliser l'API l'API Messages de Nexmo de Nexmo pour m'envoyer un rapport !

A vérifier :

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin d'un Account Vonage. Vous pouvez vous inscrire dès maintenant pour gratuitement si vous n'avez pas encore de compte.

En outre, vous aurez également besoin

• a Twitter Developers Account

• a Rapid API Account

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Comment découvrir le score de positivité de votre Twitter avec React

Vous allez accomplir les tâches suivantes pour créer votre application :

1. Créer un serveur backend avec Express

2. Créer une application frontale avec React

3. Créer un composant React pour recevoir un nom d'utilisateur Twitter

4. Récupérer le tweet le plus récent avec l'API Twitter

5. Calculer le score de sentiment avec l'API Microsoft Azure

6. Envoyez ce rapport à votre téléphone avec l'API Messages de Nexmo

Ce tutoriel vous guidera à travers le processus en partant de zéro. Cependant, si vous souhaitez voir le code fini, vous pouvez cloner le dépôt dépôt git pour ce projet.

Créer un serveur backend avec Express

Pour commencer, dans le répertoire racine de ce projet, exécutez :

Cela crée un fichier package.json vous permettant de commencer à installer quelques dépendances.
Pour ce faire, exécutez :

Pour que vous puissiez faire fonctionner votre serveur et votre client à l'aide d'une seule commande npm run devouvrez votre fichier package.json et modifiez les scripts pour qu'ils ressemblent à ceci :

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

Ensuite, créez trois autres fichiers à la base de votre répertoire :.env, server.js et private.key:

Remplissez votre fichier .env avec les informations d'identification pour Nexmo et Twitter. Il devrait ressembler à ceci :

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

Pour remplir la clé et le secret de l'API, visitez le site de Nexmo à l'adresse suivante Mise en route de votre tableau de bord. Vous pouvez également obtenir l'ID de l'application et la clé privée à partir de la page Créer une application (Créer une application).
Lors de la création de l'application, vous avez la possibilité de lier l'application à votre numéro de téléphone Numbers. Veillez à copier et coller ce numéro de téléphone et à le placer dans votre fichier .env en tant que NEXMO_NUMBER.

Veillez également à générer une paire de clés publique/privée. J'ai directement collé la clé dans le fichier private.key dans le fichier.

Remplir le consommateur et accéder aux clés et secrets, créez une application Twitter et générez les clés et les jetons.

Maintenant, dans votre fichier server.js initialisons notre application Express et attachons-y quelques exigences :

//  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}`));

Ajoutez également les différents identifiants dont vous aurez besoin pour utiliser les API Nexmo et Twitter :

//  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
});

Au bas de ce fichier server.js ajouter les deux signatures des points d'extrémité sur lesquels nous reviendrons un peu plus tard :

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

Créer une application frontale avec React

Ensuite, toujours à la racine de votre répertoire, créez votre application React en exécutant :

J'ai nommé l'application client mais n'hésitez pas à lui donner le nom que vous souhaitez. Une fois l'application React créée, entrez dedans et démarrez-la pour vous assurer que tout a fonctionné correctement lors de votre processus d'installation :

Pour que vous puissiez exécuter les deux ports simultanément, dans le fichier client/package.json ajouter :

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

L'exécution du create-react-app permet d'obtenir un certain nombre d'éléments de base. Dans le dossier src/ il y a un fichier App.js dans le dossier. Dans ce fichier, j'ai ajouté un appel à un composant <TwitterName /> que nous allons développer par la suite.
Mon fichier App.js ressemble à ceci :

// 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;

Créons ensuite un dossier components à l'intérieur de src/:

Dans ce dossier, créez trois fichiers :

Créer un composant pour recevoir un nom d'utilisateur Twitter

A l'intérieur de twitterName.js en plus de mon modèle de base, créons deux fonctions senduserName() et 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;

Dans le render() ajouter un <input /> pour recevoir et stocker le nom d'utilisateur Twitter en tant qu'état de l'utilisateur.

// 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>
    )
  }

La fonction senduserName() est appelée une fois que l'utilisateur a saisi son nom d'utilisateur et appuyé sur le bouton find most recent tweet et qu'il a appuyé sur le bouton Cette fonction envoie des informations au server.js et ressemble à ceci :

//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()
  }

Cette fonction appelle ensuite la fonction getTweet() qui se présente comme suit :

// client/src/components/twitterName.js

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

Cette fonction reçoit les données du serveur et affiche ensuite le tweet le plus récent sur notre page React.

La seule chose qu'il reste à faire sur cette page est d'appeler le composant suivant, <SentimentCalculate /> et donc au bas de la page render() ajouter cela et passer l'état (tweetContent et userName) à ce composant :

// 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>
    )
  }

Récupérer le tweet le plus récent avec l'API Twitter

Revenons au fichier server.js à la racine de notre projet et remplissons la fonction app.post('/userName'); fonction :

//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)
      }
    });
  });
});

Ici, le userName est transmis par le client et envoyé à l'API de Twitter. Le tweet le plus récent est alors renvoyé au client pour être affiché dans notre code React.

Calculer la note de sentiment avec l'API Microsoft Azure

Construisons maintenant notre fichier sentimentCalculate.js avec deux fonctions différentes calculateSentiment() et 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;

Remarquez que j'initialise l'état et que je charge les éléments tweetContent et userName en tant que props à partir du composant <TwitterName /> en tant qu'accessoires.

La fonction showTweet() sera assez simple et affichera le tweet s'il existe. Elle affichera également un bouton pour appeler la calculateSentiment() fonction :

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

Cette fonction calculateSentiment() ressemblera à ceci :

//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 })
    });
  }

Cette fonction fait appel à l'analyse de texte de Microsoft Azure via l'API Rapid API. J'aime utiliser Rapid API car cela me permet de me connecter à un grand nombre d'API différentes à partir d'une seule connexion.
Je conserve la clé dans un fichier .env dans le dossier client dans le dossier Veillez donc à créer un nouveau fichier .env pour protéger vos informations d'identification :

La fonction calculateSentiment() envoie le tweetContent à l'API et renvoie un score.
Ajoutez à la fonction render() un endroit pour afficher ce nouvel état :

//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>
    )
  }

Remarquez qu'en dessous de la partition, le composant final s'appelle : <PhoneNumber />. Veillez également à transmettre l'état à ce composant par l'intermédiaire d'accessoires.

Envoyez votre rapport de sentiment par SMS avec l'API Messages de Nexmo

Construisons maintenant notre fichier final phoneNumber.js avec les fonctions sendSMS(), renderPhoneInput(), et renderSendButton() pour construire la fonctionnalité d'envoi de notre SMS via l'API Messages de Nexmo :

//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;

La première méthode appelée est renderPhoneInput(). Construisons-la maintenant :

//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>
      );
    }
  }

Si le composant a reçu un score du dernier composant, cette fonction affichera une entrée pour que l'utilisateur fournisse son numéro de téléphone afin d'envoyer le rapport d'analyse des sentiments. Une fois que l'utilisateur a fourni un numéro valide, la fonction renderSendButton() sera activée :

//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>
        );
      }
  }

Ce bouton appelle ensuite la fonction finale, sendSMS()qui se présente comme suit :

//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)});
  }

Cette fonction envoie au serveur l'ensemble des données collectées auprès de l'utilisateur. Enfin, elle alerte l'utilisateur une fois que la fonction s'est achevée avec succès.

Notre dernière étape consiste à revenir au server.js et d'écrire la fonction app.post('/sendSMS') fonction :

//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);
      }
    }
  );
});

Il y a un peu de logique en haut pour faire une analyse de sentiment basée sur le score. Vous pouvez certainement l'enlever si vous préférez envoyer le numéro exact plutôt que des émojis.
Le rapport est ensuite envoyé sous forme de SMS depuis votre numéro Numbers vers le numéro que l'utilisateur a indiqué.

Exécutez votre application

Voici à quoi ressemble la structure de mon application finale :

Structure of folders and files

La dernière étape consiste à tester le code et à voir comment les choses fonctionnent ! Retournez dans le répertoire racine et exécutez la commande qui lancera le serveur et le client simultanément :

Visiter localhost:3000 affichera notre composant React qui demande à l'utilisateur d'indiquer un identifiant Twitter.
Le tweet le plus récent de cet utilisateur sera alors récupéré et affiché sur la page.
Cliquez sur le bouton calculate the sentiment pour appeler l'API Microsoft Azure Text Analytics et afficher le score du tweet.
Saisissez votre numéro de téléphone personnel et le rapport SMS vous sera envoyé via l'API de messages de Nexmo.

🎉Voila!🎉 Vous avez réussi à créer une app React pour analyser le sentiment de votre Twitter qui est capable d'envoyer un rapport par SMS à n'importe qui !

Prochaines étapes

Si cela vous a donné envie d'en faire plus avec les messages et l'analyse des sentiments, voici quelques idées pour la suite :

• L'API Dispatch de Nexmo vous permet de rediriger votre message en fonction de son statut de livraison. Jouez avec cela et essayez d'envoyer votre rapport de sentiment à Viber ou WhatsApp également !

• Jouez avec les capacités de Twitter et envisagez d'envoyer un rapport chaque fois qu'un nom d'utilisateur tweete. /streaming et envisagez d'envoyer un rapport chaque fois qu'un nom d'utilisateur tweete.