15 October 2016.
It was two days before my FYP report submission. That whole day was spent on proofreading my report. It was very tedious and boring task. To recharge myself, I decided to went up to “the spot” and did a lot of self-talk. “The spot” is basically a laundry drying spot at level 5 in my block where almost no one was ever here.
This time I started to think to myself about my studies in NTU. I stumbled upon the time where I joined NTU Mozilla bootcamp and it was one of my best learning time. This bootcamp inspired me to create a side project called “c4”, basically a connect four game in HTML5, and this project received 50+ stars after I posted it on Hacker News.
Then I thought to myself. What open source contributions have I done? I also remembered about chat bots that Microsoft introduced during Build 2016. FYI, I opened a bug ticket (issue) at their GitHub repo just minutes after the announcement (not even till the keynote ended).
I think to myself. What if, there is a chat bot that plays connect four game with the user? I remembered that when I checked the Bot Directory, there were no bot yet that plays connect four game (I do find out that there were Poker Bot and UNO Bot).
I came back to my room, but did not directly coded this. I did some research first. Since it require converting canvas to image at Node.js, I searched around and found “node-canvas” project, which was just what I need, with only one catch: difficult to set up on Windows. This might be a problem, so I saved the link and paused the research. I then resumed my work on my FYP report.
The next day, a Sunday, I decided that the “itch” of the c4bot idea was too great and I was already quite exhausted with my FYP report. I decided to stop my work on FYP and did some post-processing to convert it to PDF of different sections for easier printing. Then I go on full speed for developing the chat bot.
First, I continued my research on node-canvas, seeing whether I can find other canvas library has better Windows support. I do find “node-canvas-win” project, but it seemed to be unmaintained and not working on current Node version anymore. So I was back at node-canvas project.
Installing it require quite some effort, but luckily the installation process was well-documented. For a very minimum time, finally the dependencies were installed.
Then, since it was a chat bot, I copied over my other chat bot project’s code, strip all codes off to minimum and replace it to c4bot specific code. Since I have the original c4 codes, I also copied that over. I made it to export the whole “Game” class so that the game can be imported by the chat bot, i.e. decoupling chat bot logic and main game logic. Whew, this exporting process was much easier that I initially thought.
Few minutes of testing with Microsoft Bot Framework Channel Emulator seems to get me few bugs that I quickly fixed. After that, I wondered on deployment. I chose Azure because on its free tier, I could deploy a Node.js application, with only one catch: it was a Windows 32-bit machine. (32-bit was crucial later on). After setting up a blank Webapp project on Azure and connecting it to GitHub, the initial code import & deployment began. As expected deployment failed due to failure of installing the dependencies.
Stack Overflow has rescued me again this time. This vaguely worded answer has the key to my issue: push my contents of node_modules to GitHub and include the DLL files from gtk/bin to node_modules/canvas/build/Release directory. Since if Azure found node_modules folder, it will not try to rebuild the packages. Now the issue resurfaced: Azure runs on 32-bit machine, and hence 32-bit Node.js. But my node-canvas was built on 64-bit node.js. So what I need to do is that for compilation of node-canvas, I should put in extra parameter telling that I want it to be compiled in 32-bit flavour. After I did this, the next deployment went well.
Then I configured Microsoft Bot Directory and make an extra simple logo of Connect Four (which was derivative of my assets that I submitted to Windows Store). At the Bot Directory, I activated Web Chat, Facebook Messenger, Skype, Telegram.
I also set up a Facebook Page and Facebook Apps that replies messages sent to this page. After making sure that it was working well on the channels, I tried submit this “app” to Microsoft for approval on its Bot Directory. Wow, it only took around 1 working day. Meanwhile, I had bad experience with Facebook. Facebook declined my “app” two times before finally approving it. I saw the chat log that when Facebook tested it, the bot took few seconds to wake up from sleep, but Facebook reviewer was impatient and just declined my chat bot because it didn’t reply anything and told me to make sure it was working. Of course I gave the most negative feedback when possible and straight away resubmit it for review. Each review process took around 1 working day, so that was few days of lost productivity due to Facebook’s wrong review. But when everything’s done, I shared the page to my friends and the reactions was nice :) Many started the game, many finished the game, few beat the game 3:)
So, that’s the story of building c4bot. Be sure to check it out at different channels:
And the project is freely licensed and open sourced at GitHub. Do star the project if you like it, contribute to improve the project, and leave a feedback here! Thank you.
Oh, and this time I was so eager to share it because of the following quote that I recently held dear.
Do things, tell people.
I think I received it during that Mozilla Bootcamp, told by one of the Mozillians there (either Nick Desaulniers or Michael Henretty); or might as well I received it from somewhere else ._.. There are two parts of building stuff, actually building it and sharing it with the public. Without sharing it eagerly, you won’t know people’s reaction.