💡 Inspiration
When coming up with our idea, we really wanted to make a chatbot that pushed the boundaries and leveraged some unique features of the Messenger platform in a different, interesting way to create an experience that would be engaging and conversational to all of its users.
Call us weird, but our minds quickly went to those 'creepypasta' horror stories that are written as text messages between its characters. There are full-blown mobile apps that take this idea further with interactivity and branching storylines, such as "Sara Is Missing", or "Simulacra", but we liked the idea of such stories playing out in a messaging app that is already familiar to the reader - amongst real conversations they are currently engaged in - to make it a more immersive reading experience.
We then saw this as an opportunity to also spark some creativity and enable Facebook users to use features of the Messenger platform to craft their own interactive story. Users can even expand beyond the horror genre typical to text message stories we see today. Will it be a "Black Mirror"-style dystopian sci-fi, or a fluffy romantic comedy between two strangers who met online? Thus, DMs and Dragons was born!
🤖 What it does
The DMs and Dragons Messenger bot has two main functionalities: it allows users to browse and read interactive stories, in addition to creating their own and sharing it with other users.
Once a user selects a story to read, the bot will take on the Persona of one of the story's characters, and begin the story by sending messages to the reader. There may be multiple Personas, and they may also send attachments. The reader interacts with the characters by responding with messages or Quick Reply options. Different replies can lead to different outcomes in the story, making it a truly interactive and engaging experience.
These stories are also created within the DMs and Dragons bot. This is done through a Webview, where users can create, edit and delete their own stories. Users can add different Personas for their stories, write messages or upload attachments to send to the reader, control typing times, determine how the reader can respond with Quick Replies, and create branches in the storyline.
👩💻 How we built it
Our bot backend is written entirely with Node.js and Typescript, and is hosted on Google Cloud Platform. In it, we make use of the Send API, Webhook Events, Quick Replies, Templates, Messenger Profile API, and Personas API.
The Webview is written in React and Typescript, and is hosted on Google App Engine. It utilises the Messenger Extensions SDK to get the context from the current conversation. The Webview also interacts with the backend to communicate what story the reader has selected.
We use Firestore as our database and Firebase Cloud Storage for keeping images for Personas and attachments. This is accessed by both the bot backend and the Webview.
🤔 Challenges we ran into
We came across a bug where
typing_onandtyping_offSender Actions would not display as the Persona. As we couldn't do much about it, we chose to ignore the issue and carry on, but until its fixed it does take away from the immersion a little bit.We initially used a library in our backend for abstracting the Messenger platform APIs, but ran into issues when implementing Personas, amongst other features, because it was outdated. We ended up needing to implement our own wrapper of the standard API.
We struggled to find an efficient way of developing our webhook and Webview. Initially, we were deploying both in order to test and debug, which increased our development times. We then came across ngrok and used it to tunnel our development servers on localhost.
We were initially quite ambitious with the features we wanted to implement, and realised it wasn't reasonable given the timeframe. We decided on a certain set of features to include for now that we felt were most important.
🌈 Accomplishments that we're proud of
Figuring out how we were going to structure the data for the stories was one of the most challenging parts of brainstorming, but we are proud of finding a solution that worked with our vision for this project and also allows us to expand on it with more features.
Learning something completely new - how to work with the Messenger platform and many of its APIs - and being able to create something with it.
We are proud of the concept and what it enables users to do with their creativity and the Messenger platform.
🎓 What we learned
Like we said above, we both learned the Messenger platform from scratch for this hackathon and are excited to use our knowledge for more projects in the future.
Being open to pivoting when things aren't working out is essential to keep up the drive to finish a hackathon project. Most of the time, there is a sufficient alternative, and some of the time, it is just as good.
Just because you're developing a project for a hackathon does not mean it stops at the submission. We really want to build on it in the future.
Faisha has officially become a Typescript convert.
🔮 What's next for DMs and Dragons
Allow storytellers to use NLP to process replies from the reader.
An expansion of the 'branching' system for stories: e.g. more complicated branching, or adding variables that are tracked throughout the story.
Support sending more attachments: videos, recordings etc.
A more comprehensive search engine for browsing stories.
An easier way to share stories between friends, e.g. a referral 'link' that sends the user to the bot and starts the story immediately.
Log in or sign up for Devpost to join the conversation.