Build and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScript

Introduction

In this tutorial, we will guide you through the process of building and deploying an Artificial Intelligence React News Application using Alan AI. This application will allow users to control the app using voice commands, thanks to Alan AI's speech recognition capabilities. By the end of this tutorial, you will have a fully functional voice-controlled app and the skills to create your own.

Step 1: Set Up Your React Environment

To get started, you need a React environment where you can build your application.

1. Install Node.js: Make sure you have Node.js installed. You can download it from Node.js official website.
2. Create a New React App:
   • Open your terminal or command prompt.
   • Run the following command to create a new React application:

     npx create-react-app news-app
     

3. Navigate to Your Project Directory:
   • Change into your project directory:

     cd news-app
     

Step 2: Install Alan AI SDK

Next, you need to install the Alan AI SDK to enable voice capabilities in your app.

1. Install the SDK using npm:

   npm install @alan-ai/alan-sdk-web
   

Step 3: Create an Alan AI Account and Project

You will need to create an account on Alan AI and set up a new project.

1. Sign Up or Log In: Go to Alan AI and sign up or log in.
2. Create a New Project:
   • Click on "Create Project".
   • Choose a name for your project (e.g., "React News App") and save it.
3. Get Your Project Key:
   • After creating the project, note down your unique Alan AI project key, as you will need it for integration.

Step 4: Integrate Alan AI into Your React App

Now it’s time to integrate the Alan AI SDK into your React application.

1. Open src/App.js in your project.
2. Import the SDK at the top of the file:

   import alanBtn from '@alan-ai/alan-sdk-web';
   

3. Initialize Alan AI within the useEffect hook:

   useEffect(() => {
       alanBtn({
           key: 'YOUR_ALAN_AI_PROJECT_KEY',
           onCommand: (commandData) => {
               // Handle your app's commands here
           }
       });
   }, []);
   

   Replace YOUR_ALAN_AI_PROJECT_KEY with your actual project key from Alan AI.

Step 5: Build Voice Commands

Define the commands that users can use to interact with your app.

1. Add Commands:
   • Inside the onCommand function, you can add logic to handle different commands. For example:

   if (commandData.command === "goBack") {
       // Logic to navigate back
   }
   

Step 6: Deploy Your Application

Finally, deploy your application to make it available online.

1. Install gh-pages:

   npm install gh-pages --save-dev
   

2. Add a Homepage to package.json:

   • Open package.json and add the following line:

   "homepage": "https://{username}.github.io/news-app"
   

   Replace {username} with your GitHub username.

3. Add Deployment Scripts:

   • In package.json, add these scripts:

   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
   

4. Deploy Your App:

   • Run the deployment command:

   npm run deploy
   

Conclusion

You have successfully built and deployed an Artificial Intelligence React News Application using Alan AI. Now you can control the app with your voice. Explore further by customizing commands and enhancing the functionality of your application. Happy coding!