TLDR: How does it work!? Review Flow (1-5 Stars)

What if we take the user experience up one level and help them suggest stars based on the sentiments in their review texts?

• For each keystroke or set of keystrokes, we will analyze what the customer is typing, generate a score based on the sentiment of the customer’s input, then star the product.
• The customer can also click on the star to rate directly before writing the feedback or if they don’t agree on the suggestion

1. A serverless function that handles the requests and analysis
2. A React app for the UI

Serverless function for our server Getting started with Cognitive Services (CogS)

1. Which celebrity is in this picture?
2. How sad is the text I sent?
3. What is the license number of the cars that visited my hotel today?
4. How happy is my grandmother this morning?
5. Is this customer old enough to order a beer?
6. Who said that?

1. Go to Try Cognitive Service.
2. Choose the Language APIs tab
3. Click Get API Key.
4. Pick one of the signup options that works for you. You can pick something very temporary just for learning and fun sake.
5. Copy your Endpoint and Keys. You can only use one of the keys at a given request.

Requesting for text (sentiment) analysis

const fetch = require('node-fetch');

module.exports = async function(context, req) {
  const accessKey = '<KEY>';
  const baseUri = 'https://<center>.api.cognitive.microsoft.com';
  const sentimentPath = '/text/analytics/v2.0/sentiment';

  const feedback = req.query.feedback || (req.body && req.body.feedback);

  if (feedback) {
    const documents = {
      documents: [{ id: 1, language: 'en', text: feedback }]
    };
    const params = {
      method: 'post',
      body: JSON.stringify(documents),
      headers: {
        'Content-Type': 'application/json',
        'Ocp-Apim-Subscription-Key': accessKey
      }
    };
    const res = await fetch(baseUri + sentimentPath, params);
    const json = await res.json();
    context.res = { body: json };
  } else {
    context.res = {
      status: 400,
      body: {
        error:
          'Please pass a feedback text on the query string or in the request body'
      }
    };
  }
};

Rating and submitting feedback with React

npx create-react-app auto-star-ui

npm install --save react-rater lodash.throttle

import React from 'react';
import Rater from 'react-rater';
import throttle from 'lodash.throttle'; 
import 'react-rater/lib/react-rater.css';
import './App.css';

export const FeedbackForm = ({
  handleFormSubmit,
  handleFeedbackChange,
  setRating,
  curRating = 0
}) => {
  // ...
}

1. handleFormSubmit to be called when the form is submitted.
2. handleFeedbackChange This is where the real thing happens. It’s called at keystrokes (customer is typing) and it also sends the request to our serverless function.
3. setRating is used to update the stars.
4. curRating is the current rating at any given time.

export const FeedbackForm = ({
 //...
}) => {
 const [feedback, setFeedback] = React.useState('');
}

const [feedback, setFeedback] = React.useState('');

const throttledChangeHandler = React.useRef(
  throttle(feedback => handleFeedbackChange(feedback), 1500)
);

React.useEffect(() => {
  if (!!feedback) {
    return throttledChangeHandler.current(feedback);
  }
}, [feedback]);

export const FeedbackForm = ({
 // ...
}) => {
  //...
  return (
    <form>
      <div className="label-stars">
        <label htmlFor="feedback">What do you think?</label>
        <Rater
          total={5}
          rating={curRating}
          onRate={({ rating }) => {
            setRating(rating);
          }}
        />
      </div>
      <textarea
        value={feedback}
        onKeyPress={e => {
          if (e.which === 13 && !e.shiftKey) {
            e.preventDefault();
            handleFormSubmit(feedback, curRating);
            setFeedback('');
          }
        }}
        onChange={e => {
          setFeedback(e.target.value);
        }}
        placeholder="Love or hate? No hard feelings!"
      />
    </form>
  );
};

1. onChange calls setFeedback which updates the state. When the state is updated, the component re-renders and calls useEffect which we saw previously. When useEffect is called, it runs throttledChangeHandler and then handleFeedbackChange is called.
2. onKeyPress just checks if we hit enter without holding shift. If we held shit, it would move to a new line. If we didn’t, it would submit the feedback.

Sending requests from React

import React, { Component } from 'react';
import { FeedbackForm } from './FeedbackForm';
import './App.css';

class App extends Component {
  state = {
    curRating: 0,
  };

  // ...
  render() {
    return (
      <div className="App">
        <FeedbackForm
          curRating={this.state.curRating}
          handleFeedbackChange={this.handleFeedbackChange}
          handleFormSubmit={this.handleFormSubmit}
          setRating={this.setRating}
        />
      </div>
    );
  }
}
export default App;

setRating = (rating) => {
  this.setState({ curRating: rating });
}
handleFeedbackChange = feedback => {
  fetch('http://localhost:7071/api/autoStar', {
    method: 'post',
    body: JSON.stringify({ feedback }), 
    headers: {
      'Content-Type': 'application/json'
    }
  })
    .then(res => res.json())
    .then(json => {
      const sentimentScore = json.documents && json.documents[0] ? json.documents[0].score : 0;
      this.setState({
        curRating: Math.round((sentimentScore * 10) / 2)
      });
    });
};

What’s Next?