Harry Potter and the Chat Bot

So kids birthday in lockdown - what you gonna do? Can't really go anywhere or do anything - so how to make something exciting and memorable? Well I'll tell you what I did - I created them a chatbot. That sounds like worst idea ever right?

Well I made it a bit more exciting than that - what I built is a 'treasure hunt' powered by a chatbot. I combined some of the easy to use features we get from Azure for chatbots, with a Harry Potter set of Funko miniature figures (using an advent calendar like the below...) 

With Telegram for the front end to the chatbot to make it look nice. All I then needed to do was think of some clever places to hide the figures - and there you have it. Best Birthday Party game ever...

So the basic game idea is you have to guess 22 of the character names from the Harry Potter film - if you enter a correct one into the chatbot you get a picture back with a clue to where the Funko figure is hidden. The aim being to find all the figures. Once you've found all the figures some of them have a letter stuck on them - these need to be rearranged to make a magic word that when entered will reveal a final clue to reveal the treasure location.

The end result looks like the below - this is the Telegram front end to it

So - how did I build this? Well you  might be surprised to know that actually the chatbot part is incredibly easy (and free) - what took the time was coming up with the places to hide the figures and then 'clues' to be able to find them. No point making it too easy right?

So lets walk through step by step how to create the above.
 

First thing to do is go to https://qnamaker.ai - this site will allow you to create a 'knowledge base' - all this contains is just a set of questions (in my case character names) and answers (the picture and the clue). So we navigate to the site and login.

Then we click create a Q+A service in step 1 of the wizard - this will now create something to back the knowledge base.

This then takes us to the Azure portal where we have to fill in some basics about this Q+A service that we will provision - note in the screenshot below I'm using some of the cheapest pay for features as the free ones were already being used - in your case though this is likely not the case and you can just choose free.

Once you've populated all the fields then click create

Wait for a couple of minutes and then you should see that its completed.

Now when we return the the qnamaker website and move to step 2 we should be able to select the qna service we just created in Azure.

You may have to wait a couple of minutes for the service to be full initialised - otherwise you'll get the error below

So after coming back couple of mins later we try again - we can now choose the language we want

Then give the knowledge base a name

Then click create and it will go away and provision it.

A minute or so after this screen

The knowledge base is then created and I can start to add the pairs of questions and answers to power the treasure hunt

I'm adding 2 in the example below to illustrate the point - the rest are then just different characters and clues - so you just work your way through the list you have. So on the left hand side we have the character name and the right the response with the clue.

To make the reply/clue look nice I embed a link to an image of the character as shown below - so I just refer to an internet source of that image. The client program (Telegram) will do the job ok displaying this for me.

The other custom question/answer I need to create is for the initial 'instructions' of what the hunt is all about. To do that I create a special question called /start (this is the message a Telegram chatbot sends as its first communication) - this then triggers the reply with the instructions - including a link to an embedded gif to make it look nice in the display

Once I've create all the KB entries I then want to 'save and train' the qnamaker (for the purpose of this its essentially just a save)

Wait for that to run.

Once that is done we get this screen back confirming all is created.

Now lets do a quick test just to make sure the basics of the question/answer are working - I click the test button at the top right. If I then enter a character name - you can see it replies with the text. In the simple web client the embedded image does not get fully displayed.

So looking good - now to actually create the chatbot service in Azure - to do this we click the create bot button that displays after we click the save/train button again.

This then sends us to the Azure portal again where we fill in some basics about where we want the chatbot created.

After that is created we click on go to resource and we are presented with the following screen. Here we want to click the channels option - this is where we pair the chatbot to the Telegram service. By the way I chose Telegram as it had a native support here - you can no doubt build it in other things - but Telegram was the easy option.

So in the channels screen choose Telegram 

Then on the Telegram page we just need to link it to out Telegram API key - now we didn't create that yet - so lets jump out to my mobile to do that and then come back to the portal in a minute

Now once you have the Telegram app installed you need to add something called the Botfather as a 'contact'. I search for it as shown below.

This is then a chatbot interface to create other chatbots - a slightly odd concept at first - anyway it seems to work well. So i start with the /start option (actually in the app it just does this for you). 

Then i say /newbot

I then follow the prompt to give it a name - the end result of which comes out below including the all important API key (just outside of the screenshot below). This is the 'password' that we configure between the telegram bot and the Azure bot service to allow the two to communicate.

So taking that API key we paste it into the channel screen for Telegram in the chat bot.

Click save - and we should get a nice green bar

If i then connect to the new bot i just configured in Telegram (you'll need to search for the @botnameyoujustcreated and add it) you will see that its already working - initially I see this screen - I then tap start

This then sends the /start question to my bot - which then replies with my instructions and the now working video clip.

I can then send a character name and this too is expanded into the picture and the clue

So looking good so far - we're nearly there - what's left is what happens if they type something that isn't a valid character - well by default you get something like the below 'No QnAMaker answers found' - that doesn't sound great and I want to change that

Now this next bit start to feel a bit like you are actually having to code something (up until now that really hasn't been the case) - this is however pretty simple and you can ignore any of the files and things you see when doing this change. So to get to be able to do this we navigate to the chatbot app screen as shown below (this app was created by the earlier steps - however you won't have had to get to this screen before). We click on app service editor

That then opens this blade in which we click the link

This then takes us into a browser based editor - we need to navigate and find the file QnAMakerBaseDialog.cs and specifically the enter highlighted below - this controls what the default response message will be.

I update the value to something more appropriate and make sure the autosave has kicked in (see saved message at top right)

Now the source code is updated I need to recompile the chatbot - to do that I click on the console icon on the right hand side and type build.cmd into that console window which will trigger that to happen.

After a few seconds that process is completed and the new app deployed

If I now send a message that has no answer i get the new default reply

The final finishing touch is to then add the special key word that the kids will find once they solve the Anagram using the letters stuck to some of the characters. In this case the word is 'Alohamora' - and the reply it sends is a cryptic clue of emojis. I make use of the emoji text keywords that Telegram understands - in my case :golf: and :boot: - revealing that the treasure (their birthday presents) is hidden in the boot (trunk for my American friends) of my car ( a VW Golf).

So the emoji comes out as below

At that point we're good to go - here's a few pics of the treasure hunt in progress - from starting off and reading the instructions.

To finding the initial Harry Potter character

And the more well hidden (frozen in a block of Ice) Severus Snape

The kids really loved it - hopefully with the instructions above its easy to recreate for anyone with some basic IT skills. It can be adapted to work with with different Funko sets - or can be anything that the kids are into - doesn't even have to be something you go out and buy.

Hope this gives someone else inspiration to do something similar!