The inspiration is based on my previous hackathon competition 'HayLingo,' which previously won first place in FB Messaging 2. I want to share this tutorial to encourage developers to create a chatbot messenger. This tutorial creates a mini version of the HayLingo chatbot, focusing on building HayWord features to help users enrich their English vocabulary with gamification of guessing words with various hints provided synonyms types, and definitions, and the translate feature in chat.
What it does
in this tutorial, the readers will learn:
- FB Messenger (create a chatbot application, implement the messenger extension webview, quick replies, generic templates, Get Started Button, Greeting Text)
- Wit.ai (create user intentions, entities, training, integration to the messenger)
- ReactJS (Messenger integration, creating React components, state, and props)
- Firebase (Messenger integration, creating and updating user data)
- API integration (Translate API, WordsAPI)
How I built it
In making this tutorial, I need Messenger technology, ReactJS, Wit.ai, Firebase, Glitch, and third-party APIs (translate API, WordsAPI) to build a chatbot application and GitHub README in writing tutorials.
Challenges I ran into
the challenge that I get is how to make sure what I write in the tutorial is easily understood by readers.
Accomplishments that I'm proud of
I have finished writing this tutorial well.
What I learned
- make good and interesting tutorials
- tutorials are not just writing but also media to share with fellow developers.
What's next for HayWord | Case Study for Making Real Word Chatbot Messenger
- make the tutorial even better
Global Round Update
- Grammar revision
- Tutorial code in .zip file
- Add descriptions on how to run the sample final code and show the final result
- Add explanations, reason, and concept in the tutorial
- move tutorial to Docusaurus Github page (easy to navigate, more interactive, and colorful)