SETTING UP A BASIC API: PART 1

 

Do you have an awesome idea for a chat bot command? Told that you will need to make your own API? At first this may seem impossible or be costly but this guide will walk you through how to make your own for free.

Some experience with JavaScript will certainly help, but isn't required for doing the basic setup and responses.


What is an API?

In basic terms, it is an URL link that we can access that returns a value. For this project we want to get that value back and use it in a chat command.


Setting up a server

The first thing we need to do is create a free server using https://replit.com/. There is a good chance that you don't already have an account 😀 so go ahead a create one.

Then we need to click on the create + to start a new project.

Our project or repl type is going to be Node.js. It can be named here or it will set a random name.

We are now in the repl code editor. On the right side, switch over to shell.

In the shell type or copy (using right-click paste) the following:

npm i express

"npm" is a package manager that "i" installs the server code "express" that we will be using.
Press ENTER

 Now we can start adding some code. In the middle (index.js); add these lines of code:

  1. const express = require("express"), //Express server
  app = express();

importing the express server and calling it app. Then we need to start the server, add a few empty lines of code and add:

  1. app.listen(process.env.PORT, () => { //start server
  console.log('API Server Started.');
});

Press the green RUN button at top and the repl will build the server and start it! This will take a minute or two as it builds. When it is complete, the CONSOLE tab on the right will show "API Server Started."


Congratulations, you just made a server!



Adding routes to the server

Right now our server doesn't do anything. On the right widow pane above the console will have your server address, similar to  https://bouncyartisticportablesoftware.pjonp.repl.co, and say "Cannot GET /". This is because we don't have a "route" set up. A route is, in simple terms, where on the server we want to look. So we are going to add "/api/test" of our server url and have it respond with a "Hey!".

A quick note here; the first code block we added above should always be at the top of index.js and the second block should always be at the bottom.

Between those two blocks we are going to add our first route with this code:
  1. app.get("/api/test", (req, res) => { // add "/api/hello"
  const message = `Hey!`; 
  res.send(message);
});


The first line here is telling app (our server) to get information from our server link /api/test/. When we go to this route we want the request (req) and response (res), for now not needed but will be explained more in part 2. For now we just want to make a message const message and set it "Hey!". Then the final line is taking our message and sending it to the website to display.

The server is probably still running so press the STOP button then press RUN again to restart the server with the changes. Now go to your website: https://bouncyartisticportablesoftware.pjonp.repl.co

There is also a popout button in the preview pane (upper right) next to the server URL.

/Cannot GET / should be in the browser screen. We want it to be /api/test so add that in and press enter.

You should get Hey! back!

And that is it, you've created a route. Now it's time to use your API and send information to Twitch* chat.


Setting up a chat command using StreamElements

You should be using StreamElements for a Twitch chatbot, but if not set one up at https://streamelements.com/

*Note: This will work for Trovo, Youtube and Twitch. 

First we want to go to the custom commands, under chat bot -> chat commands -> custom commands. (https://streamelements.com/dashboard/bot/commands/custom)

From here, click the Add New Command button and set the command name to apitest
Use this for the response for now:
  1. ${sender} says $(customapi.https://bouncyartisticportablesoftware.pjonp.repl.co/api/test)


Click the SAVE button then load up your stream chat (https://www.twitch.tv/popout/USERNAME/chat) and give it a try!

You've created a custom API server!

In the next part we will go a little deeper and send information from the chat to the API.

Comments

Post a Comment