Mini Project: Voice Controlled React News Application

Tech-Stack

React Hooks
Alan AI Voice Assistant - @alan-ai/alan-sdk-web
MaterialUI - @material-ui/core
classnames
words-to-numbers

Introduction

Alan AI is a revolutionary speech recognition software that allows you to add voice capabilities to your applications.
It allows you to control absolutely everything in the app using your voice.
Another huge benefit is that it's extremely easy to integrate it
So Im going to build a Conversational Voice Controlled React News Application.

Deploy

http://alan-ai-voice-assistant-209.surge.sh/

Wire frame:

Function

Using Voice Assistant to choose type of news:
- Latest news.
- News by Categories : Business, Entertainment, General, Health, Science, Sports, Technology in U.S
- News by Terms: Corona, PlayStation 5, Smartphones,...
- News by Sources: CNN, ABC News, BBC News,....
You can choose
- Read news by yourself
- Or Alan AI Voice Assistant can help you to read that
Gives responses to casual conversation

Resources

Alan AI Studio: https://alan.app
API news: https://newsapi.org/

Screenshot

After this project

I have improve for myself about

Material-UI
- Create Card component
- styles component
- Write CSS by makeStyles
- Responsive App with Grid, Grow
Merge different className to one with classnames
Fetch API

I have understand about

Fetch API in Alan Studio
using voice to get data from API
words-to-numbers
- convert words string to number
- guess the word has same sound to the true number (such as: for ~> 4)
Scroll window to article currently reading
Opening the new URL by use Voice Assistant
Make casual conversation that we didn't set up in our original script

Next step:

Update API news that have news in Vietnam

Bugs:

Deploy to surge.sh, but CAN'T use Alan Voice
- getUserMedia is not supported

Set up

npm install
Replace: [API_KEY] and [alanKey]
- [API_KEY] is login in https://newsapi.org/
- [alanKey] is login in https://alan.app
Copy code in alanStudio.js to Alan Studio
Create new script in Alan Studio
- Copy code in alanStudio-SmallTalk.js to new script
npm start