Echo Dot (3rd Gen) - Smart speaker with Alexa - Charcoal

Use your voice to play a song, artist, or genre through Amazon Music, Apple Music, Spotify, Pandora, and others. With compatible Echo devices in different rooms, you can fill your whole home with music.

Buy Now

Wireless Rechargeable Battery Powered WiFi Camera.

Wireless Rechargeable Battery Powered WiFi Camera is home security camera system lets you listen in and talk back through the built in speaker and microphone that work directly through your iPhone or Android Mic.

Buy Now

Creating a Pokédex Chatbot in Discord (Part 1)

0
294


Brandon Rauthana Him

Hello there! Welcome to the world of Pokémon! My name is Brandon! People call me the chatbot professor! This world is inhabited by intelligent creatures called chatbots! For some people, chatbots are tools. Others use them for fun. Myself…I study chatbots as a profession.

Now before we get started with even coding the project, we must go over the simple features of a Pokédex and decide which features we want to include in our project. This will help limit the scope of our project and have a vision of what the first iteration of our project is going to look like.

This process is generally skipped for developers when starting a side project, but it can save so much time in the long run. Honestly, I will be first to admit that everyone tends to do this differently, but my primary goals are to simply establish what we can and will create.

First Step: Researching

In the show, there are many moments when Ash uses his Pokédex, here’s a video of what happens (also one of my favorite episodes):

Watch what happens when Ash points the Pokedex at the Squirtle Squad

During this scene we learn that the Pokédex does a few things:

  • Pokemon Recognition (Image Recognition)
  • Shows a Pokemon Avatar
  • Speaks to You (Text-To-Speech)

But for many of us, a Pokédex wouldn’t truly be complete without drawing some inspiration from our childhood past time, Pokemon on the Gameboy!

A gif displaying the infamous Pokedex from Pokemon Green (found in Blue and Red variants)

In the Pokédex screen we notice the following:

  • Pokemon Number — (No. XXX)
  • Name
  • Sprite/Avatar
  • Category
  • Height — Ft’ Inches”
  • Weight — lbs

With that being said, we can see that the Pokédex is filled with features, and we could spend months on development. So, let’s focus on narrowing what our definition of a Pokédex will look like.

Second Step: Limit Project Scope

Since Discord has a strong text and voice functionality built-in, let’s focus on displaying the avatar, relevant information, and supporting speech output 0 — for the cool factor of course.

Now if we gather all of our initial research, we can finalize the scope of our Pokédex to only include the following set of features/functionalities:

  • Give Pokemon Information
  • Display
  • Pokemon Number — (No. XXX)n
  • Name
  • Sprite/Avatar
  • Category
  • Height — Ft’ Inches”
  • Weight — lbs
  • Speak (Voice Functionality)
  • Not Found Error Handling

It’s good to think about a minimum “default” action that occurs when users try to perform unsupported actions or unrecognizable intents.

Fortunately, the Pokedex defaults to a “No Data” action when Ash attempts to point to something the Pokedex doesn’t understand!

Alrighty! Now we can begin to code!

wait, wait… hold your ponyta.

Let’s take a bit of time to mock out what our bot is going to output to the users. This is going to save us tremendous time and help give us an idea of what the bot is going to “feel” like.

Traditionally, this is when we would start to create a simple wireframe on the user flow. Unfortunately, I couldn’t find any Discord mock-up generators to create a preview of our conversation flow, so I’ll just follow a simple trigger to output format to lay out all the potential interactions:

Trigger Message -> Outcome

Interactions / Triggers

  • !pokedex <pokemon name> → Return Pokemon Information
  • !pokedex <pokemon #> → Return Pokemon Information
  • !pokedex <random input>→ Display Error Message

Simple, but more than suitable for our needs, now let’s establish what our “Display Pokemon Information” is going to look like.

Return Pokemon Information

Since this is the most “visual” piece of our interaction, it’s a good idea to create a visual representation to display what we intend to show our user.

In this tutorial, we will be using the Discord embed visualizer created by Github user, leovoel, and take the gif from above try to translate it in the visualizer. Typically sketching works fine, but our chat platform has innate visual constraints, which the visualizer helps us work within.

In traditional app or web development, we would call this a high-fidelity mock-up. A highly detailed mock-up that gives us a near-production representation.

In addition to knowing our constraints, we have a quicker feedback loop without having to do code changes and testing on our application end.

After coming up with several variations, this is the final design that I’ve come up with:

Splendid! Now that we know what features are going to be included, and what our bot is going to look like, we have enough to finally begin coding towards our Pokédex in Discord.

Move on to the second part of the tutorial.



Read More

LEAVE A REPLY

Please enter your comment!
Please enter your name here