Descubre la puntuación de positividad de tu Twitter con React

En 2019, me reté a difundir positividad y amabilidad en mi día a día.

Pero enseguida me di cuenta de que ese objetivo me parecía un poco vago y bastante nebuloso. Aunque tenía buenas intenciones, me resultaba difícil juzgar su éxito o impacto.

Así que durante unos meses, reflexioné sobre cómo podría medir mi objetivo y tuve la suerte de descubrir que la API de análisis de texto de Microsoft Azure me ofrece una forma de seguir mi promesa de positividad.

El equipo de Azure ha abierto sus algoritmos de aprendizaje automático, lo que significa que puedo analizar la puntuación de sentimiento de cualquier texto en una escala numérica de 0 a 1 (0 es negativo y 1 positivo).

Esto significa que puedo puntuar mi lenguaje y ver si realmente he estado difundiendo bondad y positividad, ¡especialmente cuando se trata de mis publicaciones en las redes sociales!

Así que pensé en crear una aplicación React que utiliza la API de Twitter para extraer mi tweet más reciente y analizar su sentimiento para luego usar la Messages API de Nexmo para enviarme un informe.

Compruébalo:

Requisitos previos

Para realizar este tutorial, necesitarás una Account de Vonage. Puedes suscribirte ahora de manera gratis si aún no tienes una Account.

Además, también necesitarás:

• a Desarrolladores de Twitter Account

• a API rápida 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.

Cómo descubrir la puntuación de positividad de tu Twitter con React

Vas a realizar las siguientes tareas para crear tu aplicación:

1. Crear un servidor backend con Express

2. Crear una aplicación frontend con React

3. Crear un componente React para recibir un nombre de usuario de Twitter

4. Recuperar el tweet más reciente con la API de Twitter

5. Calcular la puntuación de sentimiento con la API de Microsoft Azure

6. Envía ese informe a tu teléfono con Messages API de Nexmo

Este tutorial te llevará a través del proceso desde cero. Aunque si quieres ver el código terminado, puedes clonar el repositorio repositorio git de este proyecto.

Crear un servidor backend con Express

Para empezar, en el directorio raíz de este proyecto ejecute:

Esto crea un archivo package.json que le permitirá empezar a instalar unas pocas dependencias.
Para ello ejecute:

Para que puedas ejecutar tu servidor y tu cliente utilizando un único comando npm run devabra su archivo package.json y cambia los scripts para que tengan este aspecto:

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

A continuación, crea tres archivos más en la base de tu directorio:.env, server.js y private.key:

Rellene su .env con las credenciales de Nexmo y Twitter. Debería tener este aspecto:

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

Para rellenar la clave y el secreto de la API, visite la página de Nexmo Primeros pasos de tu Panel de control. Y puedes obtener el ID de la Aplicación y la clave privada desde la página Crear una Aplicación Crear una aplicación.
Al crear la aplicación, se le da la opción de vincular la aplicación a su número de teléfono Nexmo. Asegúrate de copiar y pegar ese número de teléfono y ponerlo en tu archivo .env como el archivo NEXMO_NUMBER.

Asegúrate también de generar un par de claves pública/privada. He pegado directamente la clave en el archivo private.key archivo.

Rellenar el consumidor y acceder a claves y secretos, crea una aplicación Twitter y genera las claves y los tokens.

Ahora, en su archivo server.js inicialicemos nuestra aplicación Express y adjuntemos algunos requisitos:

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

Añade también las distintas credenciales que necesitarás para utilizar las API de Nexmo y 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
});

Al final de este archivo server.js añade las dos firmas de los extremos que volveremos a escribir dentro de un rato:

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

Crear una aplicación front-end con React

A continuación, aún dentro de la raíz de tu directorio, crea tu aplicación React ejecutando:

He llamado a la aplicación client pero siéntete libre de ponerle el nombre que quieras. Una vez creada la app React, entra en ella e iníciala para asegurarte de que todo ha funcionado correctamente en tu proceso de instalación:

Para poder ejecutar ambos puertos simultáneamente, en el archivo client/package.json añadir:

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

La ejecución del create-react-app proporciona un montón de repeticiones. Dentro de la carpeta src/ hay un archivo App.js archivo. En ese archivo he añadido una llamada a un componente <TwitterName /> que construiremos a continuación.
Mi archivo App.js tiene este aspecto:

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

A continuación vamos a crear una carpeta components carpeta dentro de src/:

Dentro de esa carpeta cree tres archivos:

Crear un componente para recibir un nombre de usuario de Twitter

Dentro de twitterName.js junto con mi boilerplate, vamos a crear dos funciones senduserName() y 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;

En el render() añade un <input /> para recibir y almacenar el nombre de usuario de Twitter como estado del usuario.

// 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 función senduserName() se ejecuta una vez que el usuario ha introducido su nombre de usuario y ha pulsado el botón find most recent tweet botón . Esa función envía información al server.js backend y se parece a esto:

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

Esa función llama entonces a la función getTweet() que tiene el siguiente aspecto:

// client/src/components/twitterName.js

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

Esta función recibe los datos del servidor y luego muestra el tweet más reciente en nuestra página React.

Lo único que queda por hacer en esta página es llamar al siguiente componente, <SentimentCalculate /> así que al final de la página render() añadimos eso y pasamos el estado (tweetContent y userName) a ese componente:

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

Recuperar el Tweet más reciente con la API de Twitter

Volvamos al archivo server.js en la raíz de nuestro proyecto y rellenemos la función app.post('/userName'); función:

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

Aquí, el userName se pasa desde el cliente y luego se envía a la API de Twitter. El tuit más reciente se devuelve al cliente para mostrarlo en nuestro código React.

Calcular la puntuación del sentimiento con la API de Microsoft Azure

Vamos a crear nuestro archivo sentimentCalculate.js con dos funciones diferentes calculateSentiment() y 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;

Fíjate en que estoy inicializando el estado y cargando los archivos tweetContent y userName como props del componente <TwitterName /> componente.

La función showTweet() será bastante simple y mostrará el tweet si existe. También mostrará un botón para llamar a la función calculateSentiment() función:

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

La función calculateSentiment() tendrá este aspecto:

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

Esta función llama a Microsoft Azure's Text Analytics vía API rápida. Me gusta usar Rapid API, ya que me permite conectarme a un montón de diferentes APIs desde un único inicio de sesión.
Guardo la clave dentro de un archivo .env en la carpeta client carpeta. Así que asegúrese de crear un nuevo .env para proteger tus credenciales:

La función calculateSentiment() envía el tweetContent a la API y devuelve una puntuación.
Añade a la función render() función un lugar para mostrar ese nuevo estado:

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

Observe que debajo de la partitura, el componente final se llama: <PhoneNumber />. Asegúrese también de pasar el estado a través de props a ese componente.

Envíe su Informe de Sentimiento SMS con Messages API de Nexmo

Vamos a crear nuestro archivo phoneNumber.js con las funciones sendSMS(), renderPhoneInput()y renderSendButton() para construir la funcionalidad para enviar nuestro mensaje SMS a través de Nexmo Messages API:

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

El primer método llamado es renderPhoneInput(). Vamos a construirlo ahora:

//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 el componente ha recibido una puntuación del último componente, esta función mostrará una entrada para que el usuario proporcione su número de teléfono para enviar el informe de análisis de sentimiento. Una vez que el usuario haya proporcionado un número válido, se activará la función renderSendButton() se activará:

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

Este botón llama a la función final, sendSMS()que se parece a esto:

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

Esta función envía todo el estado que hemos recogido del usuario al servidor. Y finalmente alerta al usuario una vez que esa función se ha completado con éxito.

Nuestro paso final es volver al server.js y escribir la función app.post('/sendSMS') función:

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

Hay un poco de lógica en la parte superior para hacer algún análisis de sentimiento basado en la puntuación. Puedes eliminarla si prefieres enviar el número exacto en lugar de emojis.
A continuación, envía el informe como un SMS desde su número Nexmo a cualquier número que el usuario ha proporcionado.

Ejecute su aplicación

Esta es la estructura de mi aplicación final:

Structure of folders and files

El último paso es probar el código y ver cómo funciona. Vuelve al directorio raíz y ejecuta el comando que iniciará el servidor y el cliente simultáneamente:

Visitando localhost:3000 se mostrará nuestro componente React que solicita al usuario una cuenta de Twitter.
El tweet más reciente de ese usuario se recuperará y se mostrará en la página.
Haz clic en el botón calculate the sentiment para llamar a la API de análisis de texto de Microsoft Azure y mostrar la puntuación del tuit.
Introduce tu número de teléfono personal y se te enviará el informe por SMS a través de la API de mensajes de Nexmo.

¡🎉Voila!🎉 ¡Has creado con éxito una app React para analizar el sentimiento de tu Twitter que es capaz de enviar un informe por SMS a quien quieras!

Próximos pasos

Si esto ha despertado tu interés por hacer más cosas con los mensajes y el análisis de sentimientos, aquí tienes algunas ideas para probar a continuación:

• Dispatch API de Nexmo le permite redirigir su mensaje en función de su estado de entrega. Juega con ello y prueba también a enviar tu informe de sentimiento a Viber o WhatsApp.

• Juega con la capacidad de Twitter /streaming y considera la posibilidad de enviar un informe cada vez que un nombre de usuario tuitee.