build log: sentiment-chat pt2

#sentiment #node #react #javascript

State of the Thing

I've got basic functionality right now. No communication yet, but I can take text input, submit text, and render / save the results of sentiment analysis.

My frontend is in React. We have a container with two components in it: a "history" display component and an "input" component.

We're keeping state inside of a single hook, useReducer.

Our state looks like this: {text: '', sent: 0, history:[]}. text is the contents of our input box, sent the result of sentiment applied to our string, and history an array of previous text and sentiment results.

I ran into some issues with the useReducer hook, but it all came down to me not properly formatting my actions.

What we've got so far is something like this:

Form component

state is maintained by useReducer and updates onChange
- as one types in the chatbox, the string gets run through sentiment and generates a new rating every time our text updates
has an event listener to confirm a "send" with the Enter key
- stores the message and rating in a "history" array on our state

Messages component

grabs sentiment from message history and builds an array of message components

Message component

displays the sentiment level from each sentiment object in a <p> tag. We'll finesse the display later.

Next Steps to MVP

There are two main things that I need to finish in order to get MVP functionality working.

Websockets

I want to use Websockets to get communication happening
- I'll probably dispatch new messages to useReducer once I get them in and store them in the array

Display

Gotta actually translate numbers into color
- Probably inline styling based on props passed to the Message component?

Right now I don't have the best understanding of how websockets work, so integrating them may be a challenge (friends have recommended socket.io as an alternative, and if any of y'all have opinions as to the advantages/drawbacks, lmk!)

Other Thoughts / Nice to Have

Sentiment isn't an especially exciting library to work with. I appreciate that it exists, but it's a little disappointing that it's essentially a hashmap of words/ -5 to 5 ratings of positivity/negativity that it basically averages to get the final result. If I'm feelin' a little ambitious, I might use NLTK. It doesn't seem too hard to spin up a Node child process to run a python script, at least according to this article, and it'd be nice to have more robust NLP stuff to play with.

If I go with this route, the computation moves from client computers to the server, though. Network requests will probably be too slow to live-update based on text input, especially if I imagine having an actual userbase for this thing (it won't b/c it's mostly an art project). Perhaps I could keep some basic operations on the client, and have a few fancy functions on the server.

Other than that, there are a couple of UI/UX things that I want to implement. I think that one thing key to the experience is that a user not be able to know what sentiment they're sending across, except by intuition/guess.

The messages sent by a user will be displayed as plain text, and the messages received from another user will be in color. Perhaps at the end of the chat, we'll give users a chance to download a chat history, either of just color, or of some combination of message and color.

In order to get the experience right, I'll have to be very particular about styling and transitions. I should probably start with the websockets stuff first. I'm planning to leave the styling for last, since it'll build on top of whatever other frontend scaffolding I do.

Finally, I'll finish it off by deploying to zeit since I'm a cheapskate. (Or I'll containerize w/Docker and launch on AWS to flex some DevOps muscle)

Thoughts on the process so far

Honestly I didn't expect it to take two days to get to this point, between getting webpack to actually transpile stuff correctly (a lot of walkthroughs are outdated or produce errors), working out dataflow on my frontend, planning, and (of course) writing these articles for y'all. It's definitely nice to be working through the process, though!