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):
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!
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.
