Building WhatsApp Anime Bot With Whatspie and NodeJS

Hi there, in this article we are going to create WhatsApp Bot to finding anime by name using Open API from https://jikan.moe/

So to create a bot, first make sure you have a paired device on Whatspie and then we can start creating a super basic anime bot.

“Some people ask me, WHY YOU CREATE AN ANIME BOT?“, so i reply to them, because anime is Sick!,”

Let’s started, first you need to read documentation about webhook here https://documenter.getpostman.com/view/1396768/SzKWvdgs?version=latest#2834cbf0-9666-46d2-9765-fb04131f0aeb

Once your device received a new message, whatspie will sending HTTP POST Request to Webhook URL with following JSON body format

{
  "message": "!anime naruto",
  "from": "6285603051722",
  "timestamp": 1581651709,
  "is_forwarded": false,
  "is_broadcast": false
}

To reply this message, you need to return json response from your webhook url with following format

{
    'type': 'chat',
    'body': 'Your message reply here !'
}

that’s it. let creating own super amazing cool anime bot, currently im using ExpressJs to handle request, take a look this source code:

const express = require('express')
const app = express()
const port = process.env.PORT || 5000
const bodyParser = require('body-parser')
const axios = require('axios')

// To Parsing a Json
app.use(bodyParser.json())

app.post('/', (req, res) => {
    // Read incoming message from webhook
    const msg = req.body.message

    // if message come with following format ' !anime naruto ', then reply with list of anime with name naruto
    if(msg.startsWith('!anime')) {

        // Get anime name
        const animeName = msg.split(' ')[1]
        
        // Request to API
        axios.get(`https://api.jikan.moe/v3/search/anime?q=${animeName}&limit=5`)
        .then(response => {
           
            let reply = ""
            /**
             * We will reply this message wil following format
             * Anime : Naruto
             * Score : 9.0
             * Members : 1000
             * -------------------------------
             */
            response.data.results.forEach((item, key) => {
                reply += `Anime: ${item.title}\n`
                reply += `Score: ${item.score}\n`
                reply += `Members: ${item.members}\n`
                reply += `-----------------------------------\n`
            })

            // Fire response to JSON
            res.send({
                type: 'chat',
                body: reply
            })

        }).catch(error => {

            // Send error response
            res.send({
                type: 'chat',
                body: "Error when fetching from API"
            })
        })
    }else{
        // if not using !anime, return empty json
        res.send({})
    }

    // Cool thats it!
})

app.listen(port, () => console.log(`app listening on port ${port}!`))

don’t forget to test this webhook url with postman or etc

cool, lets deploy our api to heroku, WHY HEROKU? BECAUSE YOU KNOW? I LOVE HEROKU (because it’s free) .

currently i have pushed this code to https://github.com/tarikhagustia/animbot and already deployed to https://animebot-cool.herokuapp.com/ to deploy into heroku please read official heroku documentation here https://devcenter.heroku.com/articles/getting-started-with-nodejs

After that set webhook url to device configuration and Tadaaaa!, you can test by sending message to your device with following message format

!anime naruto

That’s it !