Cómo construir un panel de conversaciones en directo con Flask y React

Vonage introdujo recientemente la Conversation API. Esta API te permite tener diferentes estilos de comunicación (voz, mensajería y video) y conectarlos entre sí.

Ahora es posible hacer coincidir varias conversaciones dentro de una aplicación y conservar el contexto en todos esos canales. Poder registrar y trabajar con el historial de una conversación es increíblemente valioso tanto para las empresas como para los clientes, así que, como puedes imaginar, estamos entusiasmados con esta novedad.

Qué hace el cuadro de mandos

Este tutorial cubre cómo construir un tablero de instrumentos con Flask y React que supervisa todas las conversaciones actuales dentro de una aplicación. El objetivo es mostrar datos relevantes de las conversaciones en vivo que están sucediendo en tiempo real.

Cuando una sola conversación se selecciona de la lista de conversaciones actuales, los miembros y eventos conectados. A continuación, se puede seleccionar un miembro individual para revelar aún más información relacionada con ese particular usuario.

dashboard gif

¿Qué hace la Conversation API?

La API de Conversation API te permite crear funciones de conversación en las que la comunicación puede tener lugar a través de múltiples medios, incluidos IP Messaging, PSTN Voice, SMS y WebRTC Audio and Video. El contexto de las conversaciones se mantiene a través de cada evento de comunicación que tiene lugar dentro de una conversación, sin importar el medio.

Piensa en una conversación como un contenedor de comunicaciones intercambiadas entre dos o más Usuarios. Puede tratarse de una sola interacción o del historial completo de todas las interacciones entre ellos.

La API también permite crear Eventos y Tramos para habilitar las comunicaciones de texto, voz y vídeo entre dos Usuarios y almacenarlas en Conversaciones.

Flujo de trabajo de la aplicación

flow of app

Crear una aplicación de Vonage

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.

Este tutorial también asume que estará ejecutando Ngrok para ejecutar su webhook localmente.

Si no está familiarizado con Ngrok, consulte nuestro tutorial de Ngrok antes de continuar.

En primer lugar, deberá crear una Aplicación:

A continuación, suponiendo que ya hayas alquilado un número de Vonage (NEXMO_NUMBER), puedes vincular tu número de Vonage con tu aplicación a través de la línea de comandos:

Clonar repositorio Git

Para poner en marcha esta aplicación en su máquina local, comience por clonar este repositorio:

A continuación, instale las dependencias:

Copie el archivo .env.example con el siguiente comando:

Abra ese nuevo .env y rellene el ID de la aplicación y la ruta a su private.key que acabamos de generar al crear nuestra Aplicación Nexmo.

Flask Backend

El doc importante a inspeccionar dentro de nuestros archivos Flask es el server.py ya que establece todos los diferentes puntos finales del archivo Conversation API.

La función, make_capi_request() se conecta a Vonage y autentica la aplicación:

def make_capi_request(api_uri):
   nexmo_client = nexmo.Client(
       application_id=os.getenv("APPLICATION_ID"), private_key=os.getenv("PRIVATE_KEY")
   )
   try:
       response = nexmo_client._jwt_signed_get(request_uri=api_uri)
   except nexmo.errors.ClientError:
       response = {}

   return jsonify(response)

Debajo, creamos las rutas necesarias:

@app.route("/")
def index():  # Index page structure
   return render_template("index.html")

@app.route("/conversations")
def conversations():  # List of conversations
   return make_capi_request(api_uri="/beta/conversations")


@app.route("/conversation")
def conversation():# Conversation detail
   cid = request.args.get("cid")
   return make_capi_request(api_uri=f"/beta/conversations/{cid}")

@app.route("/user")
def user():  # User detail
   uid = request.args.get("uid")
   return make_capi_request(api_uri=f"/beta/users/{uid}")

@app.route("/events")
def events(): # Event detail
   cid = request.args.get("cid")
   return make_capi_request(api_uri=f"/beta/conversations/{cid}/events")

Una vez autenticada, cada una de estas rutas accede a la Conversation API basándose en el ID de la Application y, eventualmente, en el ID de la Conversation o del usuario.

React Frontend

Haremos uso de la capacidad de React para dividir nuestro código en componentes modularizados y reutilizables. Los componentes que necesitaremos son:

components - react tree

En el nivel App.js observe que el punto final "/conversations" es llamado dentro del constructor. Esto significa que si hay conversaciones en curso dentro de la aplicación, se muestran inmediatamente en la página.

fetch("/conversations").then(response =>
  response.json().then(
    data => {
      this.setState({ conversations: data._embedded.conversations });
    },
    err => console.log(err)
  )
);

El usuario tendrá entonces la opción de seleccionar una de las conversaciones de la lista y se mostrarán los metadetalles de esa conversación, como el nombre y la fecha y hora.

<div>
  <article className="message is-info">
    <div className="message-header">
      <p>{this.props.conversation.uuid}</p>
    </div>
    <div className="message-body">
      <ul>
        <li>Name: {this.props.conversation.name}</li>
        <li>ttl: {this.props.conversation.properties.ttl}</li>
        <li>Timestamp: {this.props.conversation.timestamp.created}</li>
      </ul>
    </div>
  </article>
  <Tabs
    members={this.props.conversation.members}
    events={this.props.events}
    conversation={this.props.conversation}
  />
</div>

Obsérvese que una vez seleccionado un conversation dos pestañas se hacen visibles: Events y Members.

Members se establece como el estado por defecto, lo que significa que se muestra en primer lugar. Es en este momento cuando los botones "/conversation" y "/events" son llamados. Utilizando el cid que se pasa dentro del estado, los detalles de los miembros y eventos actuales están ahora disponibles.

refreshMembers = () => {
  fetch("/conversation?cid=" + this.props.conversation.uuid)
    .then(results => results.json())
    .then(data => {
      this.setState({ members: data.members });
    });
};

refreshEvents = () => {
  fetch("/events?cid=" + this.props.conversation.uuid)
    .then(results => results.json())
    .then(data => {
      this.setState({ events: data });
    });
};

El componente MembersList.js llamará al endpoint /user endpoint para recuperar aún más datos sobre ese usuario en particular, que luego se muestran dentro del componente MemberDetail.js componente.

showMemberDetails = user_id => {
  fetch("/user?uid=" + user_id)
    .then(results => results.json())
    .then(data => {
      this.setState({ member: data });
    });
};

Conéctelo todo

Para iniciar el backend, ejecute el comando Flask:

Y en otra pestaña dentro de tu terminal, ejecuta el comando React:

Abra http://localhost:3000 en un navegador, ¡y tu aplicación estará lista y funcionando!

Todas las conversaciones que se estén ejecutando actualmente en esa aplicación conectada serán ahora visibles en este panel.

¡Felicidades! Ya has creado una aplicación con Flask, React y la Conversation API de Vonage. Ahora puedes monitorear todo tipo de cosas relacionadas con las conversaciones de tu aplicación. Te animamos a seguir jugando y explorando las capacidades de esta API.

Contribuciones y próximos pasos

En Conversation API se encuentra actualmente en fase beta y está en constante evolución en función de sus aportaciones y comentarios. Como siempre, estaremos encantados de ayudarle con cualquier pregunta en nuestra comunidad slack.