News Application Using React JS & Integrated with Voice Assistant
As a Part of curriculum of 5th semester of B.Tech Degree, We are supposed to make one Project. For that I have tried Implemented One React JS based news application (OnlyNews) with integration of voice assistant.
OnlyNews is conversational React JS based news application. For that Alan Platform is used which can help us to get Top Headlines, News from different Sources, different categories etc. This voice assistant also can able to read news for us and open specific articles for more details.
OnlyNews is not limited to displaying News only. It is able to do a small talk which many voice assistant are used to do for casual conversation. It is also able to do some Calculator Operation by saying ‘Twelve plus five’ etc. It can also able to give Calendar Information like date, day, current time, time zone etc. Weather information like weather, temperature, humidity, pressure in any area is also provided by this application.
By opening the application, It show some Instruction how We can interact with Alan to get necessary information. By providing some voice or intent Application responds according to that.
As application is developed using React JS Framework it is fully Responsive.
What is Voice Assistant?
A voice assistant is a digital assistant that listens to specific voice commands and responds relevant information or performs specific functions as requested by the user. Based on specific commands(intents), spoken by the user, voice assistants can return relevant information by listening for specific keywords.
Voice Artificial Intelligence is now a significant part of the future of all industries and enterprises. There are going to be 200 billion connected devices by 2022, with voice as the primary interface.
Humans have a natural tendency to be more comfortable when someone speaks to them. which is one reason why we thought Alan was a good addition to our app.
A1lan Platform provides an AI backend for application to create conversational experiences. It works as Voice assistant for application. By adding voice AI to the app through Alan, we want to make our app more accessible and easy to use for everyone.
React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. React also allows us to create reusable UI components.
Features Of Application
1. Alan AI
Here’s how I handle these commands in react:
2. Landing Page
Here is the landing page of my application which contains 4 cards of instruction of how Alan show news by different ways.
- News By Headlines : Give me the Latest News
- News By Categories: Tell me the recent news on Technology
- News By Terms: What’s up with Bitcoin
- News By Sources: Give me the news from CNN
- Getting Instruction: Give me the Instruction / Go Back
- Small Talk: How are you?, Can you help me?, What can I do here?
- Calculator: Square root of 16
- Calendar: What day is tomorrow?, What is Time zone?
- Weather: What is weather in Mumbai?, What is the Temperature?, Is it going to rain?
3. Search By Voice
Using This Application you can get news by interact with voice button placed at bottom right.
4. Search By typing
We can Search news by typing keyword in search box and we are able to get all news articles.
Here is the how we can interact with Alan.
Here is the Result of our input(‘Give me the News from Google News’)
OnlyNews is developed using React JS and integrated with Voice assistant and it provides useful and interactive User Interface to search and read News article by keywords or different Sources.