For the past week, two App Academy classmates and I participated in the Hack the Chatbot event put on by Mintbean. The challenge was to create a Botkit chatbot that could converse with a user about your resume using the standard JSON resume schema.

While our bot wasn't the most impressive or professional, I like to think that Spooky Bot was the most fun (hint: there's a 'spooktacular' easter egg in the app. Be warned -- it's loud!). Here are a few takeaways from the experience.

Participating in a hackathon

This was my first hackathon experience as a software engineer: yay 🥳

As a person at the begining of my software engineering journey and looking for work during the COVID-19 pandemic, I've spent most of my time applying for jobs and building small apps for myself ... by myself -- it gets lonely. I'm really looking forward to participating in more hackathons, and if you are new to the industry, like me, I encourage you to do so as well.

A few things that I enjoyed most:

• I got to work with a team of my peers on a green-field project
• I learned a new API that I would never have sought out by myself
• I got a chance to see how my code compared to others in the industry
• I was exposed to other ideas about how to build things with the same tools

Botkit basics

If you've ever been interested in building a chatbot, but don't know where to start, I can wholeheartedly recommend Botkit as a jumping off point.

The starter kit is a Node.js app with a library containing a set of functions that allow developers to listen for specific messages and events to which the bot can respond with reply messages, events, and conversation threads. The starter also provides easy access points for cool plugins for features like a CMS for creating new search terms and even natural language processing APIs. By default, the app does not store any conversational data in a database, but this can be added as a feature later on.

Learning to bot

In many ways, this was an exercise in learning how to learn a new API quickly. And while some may prefer to start with the docs, I began by just playing with the sample code that comes out of the box!

I started simply, by testing out the most basic pair of functions hears and reply. The hears function is, essentially, an event listener that is waiting for a specific line of text to be submitted as input by the user. When the correct text is entered, the function can then reply with some follow up message.

Initially, I tinkered with manually creating a hears function for every single key in the basic contact information of the resume.json file. These keys include information like name, label, image, email, etc. While these ones should be common to all users, it became clear to me that the section for a user's social network profiles would vary from person to person.

Here's an example of the json for network profiles:

  {
    "profiles": [
      {
        "network": "LinkedIn",
        "username": "jared-kaneshiro-9b83322b",
        "url": "https://www.linkedin.com/in/jared-kaneshiro-9b83322b/"
      },
      {
          "network": "Github",
          "username": "jmkaneshiro",
          "url": "https://https://github.com/jmkaneshiro""
      }
    ]
  }

Rather than creating these functions manually, I created a higher order function that automatically generated each listener and used the network name as its search keyword.

  //Generate a bot listener for each contact network profile
  allProfiles.forEach(profile => {
    const query = profile.network.toLowerCase();
    return controller.hears(new RegExp(query, 'i'), ['message'], async (bot, message) => {
      await bot.reply(message, { type: 'typing' });
      setTimeout(async () => {
        // will have to reset context because turn has now ended.
        await bot.changeContext(message.reference);
        await bot.reply(message, `Connect with ${firstName} on ${profile.hyperlink}`);
      }, 1000);
    });
  });

Next steps

I had a great time building this bot, and I hope to eventually implement a version of it into my personal website. A few features I would love to update in the bot:

• natural language processing middleware interpreting a user's intended text
• improved, more conversational dialog flows
• replace CSS with Tailwind CSS
• convert to React or [enter fancy new JS framework here]

If you've come this far -- thank you so much for reading! I know there are a lot of people out there with amazing content and I hope that spending time here on my little space in the web was worth your while. If you have any questions about me, about building an app with botkit, or just wanna be friends, email me at jmkaneshiro@gmail.com or any of the other places you can contact me on the internet.