Final Project 1 simple RiveScript Chatbot


Inspiration and slight change

To create this chatbot, I was inspired by The Coding Train’s chatbot series on YouTube called “Chatbots – Programming with Text” (https://www.youtube.com/playlist?list=PLRqwX-V7Uu6aDUo_ia-Vq2UZZGaxJ9nRo).

In one of his videos he talks about the open source library RiveScript. Rivescript is a “text-based scripting language meant to aid in the development of interactive chatbots” (https://www.rivescript.com/docs/tutorial), and it is what I am using to create my simple chat bot.

Originally I was going to use p5.js to create my chatbot however, I recently discovered RiveScript and realised that it is much more convenient for making chatbots with.

Creating the chatbot

This is what appears when you first open https://play.rivescript.com/

Telling the chatbot my name and adding more greetings
Adding a few more questions and answers for the chatbot

Testing out the chatbot

Video link: https://youtu.be/nOYLTB3sE4E

Reflection

This chatbot project was only a small scale project as its purpose was to help me learn how chatbots work by experimenting with my own one. If I could redo this project I would probably create a more complex bot that has a specific purpose e.g.

  • A number guessing chatbot
  • A bot that searches websites for the best prices for a product

Final Project 2- Concept for a mobile version of my simple chatbot

Inspiration

Tidio app
Zendesk app
Wati app
Drift app

Source: https://www.tidio.com/blog/chatbot-app/

Making the UI using Figma

Getting a template from https://developer.apple.com/design/resources/
Picked a basic iphone app template
Moved search bar to the bottom and got rid of unessesary parts
Added in keyboard picture (Source: https://www.google.com/url?sa=i&url=https%3A%2F%2Fosxdaily.com%2F2022%2F09%2F19%2Fhow-to-enable-haptic-feedback-on-iphone-keyboard%2F&psig=AOvVaw1CA0LKpT_Cvtwhg0023W2H&ust=1687535684566000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCMCembue1_8CFQAAAAAdAAAAABAH)
Screenshot from my chatbot that I am going to copy into my UI

Final product

Reflection

The final product did not come out as clean as I wanted it to, as this was my first time ever trying out Figma, but it helped me learn how to create simple user interfaces in case I ever want to design on for a real app in the future.


Leave a Reply

Your email address will not be published. Required fields are marked *