49714 Programming for Online Prototypes
· 9 members
A hands on introduction to building online products and services through code
My personal assistant that navigates visitors to my works & experiences in my portfolio.
My personal assistant embedded in my website that navigates various visitors to different contents of my works & experiences.
The bot would be an additional “navigation” on my website. Once there is a visitor, the bot will initiate a conversation and get to know the visitor’s aim & background in a short casual chat, then provide precise information about me based on that. During the chat, it will either link the visitor to a page of my work at some point of the conversation or keep talking with him and sending out fragment information of my skills by text and images. Besides talking about me and my work, my bot would also be willing to hear from the visitors, such as their positions, their interests, their comments on my work, and other random feedback. To make it more efficient, the button to call the bot will be always floating there so that visitors could provide instant comments whenever they want.
The first version was using "case...when..." structure. The bot could easily mess up the conversation with that for there are similar answers in the process and a lot of follow-up questions. I found it quite essential to make the bot know about the context.
In the final version of the code, there are 4 "topics" of the conversation: projects, skills, resume, and help. The name of the topics is stored in session["block"], and the process in each "topic" is stored in session["next_intent"], so that my assistant would know which question the visitor replies for.
require 'sinatra'
require "sinatra/reloader" if development?
require 'twilio-ruby'
enable :sessions
configure :development do
require 'dotenv'
Dotenv.load
end
def send_message(mess, num)
client = Twilio::REST::Client.new ENV["TWILIO_ACCOUNT_SID"], ENV["TWILIO_AUTH_TOKEN"]
client.api.account.messages.create(
from: ENV["TWILIO_FROM"],
to: num,
body: mess
)
end
# Project
def project_block(body, sender)
if body == 0
messages = ["Sure! I’m excited to talk about those works!"]
send_message(messages.sample(), sender)
messages = ["She was learning industrial design👩🎓 in the last 5 years, and also has a touch on UX design, service design, IoT design and so on."]
send_message(messages.sample(), sender)
messages = ["Do you have any preference?"]
send_message(messages.sample(), sender)
session["next_step"] = "project_link"
# Project --> what kind of project? (-->recommended? -->ID? --> UX?)
elsif session["next_step"] == "project_link"
if body.include? "id" or body.include? "industrial design"
messages = ["Good choice! She has a great passion for that. "]
send_message(messages.sample(), sender)
sleep 1
messages = ["🔍..."]
send_message(messages.sample(), sender)
messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
send_message(messages.sample(), sender)
# need further revision (
elsif body.include? "research"
messages = ["Good choice! She has a great passion for that. "]
send_message(messages.sample(), sender)
sleep 1
messages = ["🔍..."]
send_message(messages.sample(), sender)
messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
send_message(messages.sample(), sender)
elsif body.include? "UX" or body.include? "experience"
messages = ["Good choice! She has a great passion for that. "]
send_message(messages.sample(), sender)
sleep 1
messages = ["🔍..."]
send_message(messages.sample(), sender)
messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
send_message(messages.sample(), sender)
elsif body.include? "recent"
messages = ["Good choice! She has a great passion for that. "]
send_message(messages.sample(), sender)
sleep 1
messages = ["🔍..."]
send_message(messages.sample(), sender)
messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
send_message(messages.sample(), sender)
else
messages = ["No problem! Let me find my favorite one for you👀"]
send_message(messages.sample(), sender)
sleep(1)
messages = ["Here it is! https://wangwanqiao.me/greenexchanger"]
send_message(messages.sample(), sender)
messages = ["This one is a IPD project last Winter, which could reflect her comprehensive skills. "]
send_message(messages.sample(), sender)
end
# )
sleep(3)
messages = ["Enjoy the time😊! Feel free to come back and leave a comment"]
send_message(messages.sample(), sender)
session["next_step"] = "comment"
# Project --> what kind of project? --> leave comments
elsif session["next_step"] == "comment"
messages = ["Gotcha!", "Love to hear that!","Great!"]
send_message(messages.sample(), sender)
messages = ["Anything else are you interested about her?"]
send_message(messages.sample(), sender)
session["block"] = "transition"
end
end
# Skill
def skill_block(body, sender)
if body == 0
messages = ["Sure"]
send_message(messages.sample(), sender)
messages = ["She mostly focuses on Human-Centered-Design"]
send_message(messages.sample(), sender)
messages = ["Any specific skill or software?"]
send_message(messages.sample(), sender)
session["next_step"] = "specific"
# Skill --> What kind of skill?
elsif session["next_step"] == "specific"
if body.include? "yes"
messages = ["which one do you want to know first?"]
send_message(messages.sample(), sender)
return
elsif body.include? "no"
session["skill"] = "ux"
messages = ["She has skills of wireframing, storyboarding, Usability Test, and so on."]
send_message(messages.sample(), sender)
sleep(3)
messages = ["Want to check the project that would best show this skill?"]
send_message(messages.sample(), sender)
session["next_step"] = "check_project"
else
if body.include? "id" or body.include? "..."
session["skill"] = "id"
messages = ["skill 1"]
send_message(messages.sample(), sender)
delay(3)
messages = ["Want to check the project that would best show this skill?"]
send_message(messages.sample(), sender)
session["next_step"] = "check_project"
elsif body.include? "ux"
session["skill"] = "ux"
messages = ["skill 2"]
send_message(messages.sample(), sender)
delay(3)
messages = ["Want to check the project that would best show this skill?"]
send_message(messages.sample(), sender)
session["next_step"] = "check_project"
elsif body.include? "research"
session["skill"] = "research"
messages = ["Good one! That is quite essential in her design work. "]
send_message(messages.sample(), sender)
messages = ["She conducted in-depth interviews, shadowing, co-design sessions to learn more about the users in her projects. "]
send_message(messages.sample(), sender)
messages = ["Also, she was exposed to some new method such as data-enable design in her intern experience."]
send_message(messages.sample(), sender)
delay(3)
messages = ["Want to check the project that would best show this skill?"]
send_message(messages.sample(), sender)
session["next_step"] = "check_project"
else
messages = ["still learning that..."]
send_message(messages.sample(), sender)
messages = ["Maybe...try another one?"]
send_message(messages.sample(), sender)
end
end
# Skill --> What kind of skill? --> check project?
elsif session["next_step"] == "check_project"
if body.include? "yes"
send_project(session["skill"], sender)
sleep(3)
messages = ["enjoy the time, feel free to come back and leave a comment"]
send_message(messages.sample(), sender)
session["block"] = "project"
session["next_step"] = "comment"
elsif body.include? "no"
messages = ["what else are you interested about her?"]
send_message(messages.sample(), sender)
session["block"] = "transition"
else
help_block(sender)
end
end
end
def resume_block(body, sender)
if body == 0
messages = ["Emmmm🤔"]
send_message(messages.sample(), sender)
sleep (1)
messages = ["Not sure if I could help you see that in her portfolio."]
send_message(messages.sample(), sender)
messages = ["Maybe have a quick scan on her resume?"]
send_message(messages.sample(), sender)
link = "https://wangwanqiao.me/resume"
send_message(link, sender)
sleep(3)
messages = ["does it help?"]
send_message(messages.sample(), sender)
session["next_step"] = "helpful"
elsif session["next_step"] == "helpful"
if body.include? "yes" or body.include? "y"
messages = ["do you want to know sth. else about the project or skills?"]
send_message(messages.sample(), sender)
session["block"] = "greeting"
elsif body.include? "no"
messages = ["Please leave a message here! She will check it out and get better with your comment!"]
send_message(messages.sample(), sender)
messages = ["Or you could directly email her to wanqiaow@andrew.cmu.edu"]
send_message(messages.sample(), sender)
session["next_step"] = "email"
else
help_block(sender)
end
elsif session["next_step"] == "email"
messages = ["Do you want to leave your address here. That would be a great connection!"]
send_message(messages.sample(), sender)
session["next_step"] = "check_email"
elsif session["next_step"] == "check_email"
if body.include? "@"
messages = ["got that! She will soon reply! Enjoy your time here☕"]
send_message(messages.sample(), sender)
end
messages = ["Glad talk to you! Enjoy your time here☕"]
send_message(messages.sample(), sender)
session["block"] = "terminated"
end
end
def help_block(sender)
messages = ["sorry i don't know what you're talking about"]
send_message(messages.sample(), sender)
end
get "/" do
"hi, there!"
end
get "/signup/:first_name/:number" do
session["first_name"] = params["first_name"]
session["number"] = params["number"]
session["block"] = "greeting"
client = Twilio::REST::Client.new ENV["TWILIO_ACCOUNT_SID"], ENV["TWILIO_AUTH_TOKEN"]
# TODO: message
# message = "Hi " + params[:first_name] + greetings.sample() + ", welcome to Wanqiao's portfolio! Thanks to your visit! What do you want to take a look first? project or skill?"
message = "Hi👋, welcome to Wanqiao’s portfolio! "
client.api.account.messages.create(
from: ENV["TWILIO_FROM"],
to: params[:number],
body: message
)
message = "I’m your assistant here. I could help you getting to know more about her projects📂, work experience📋 and professional skills⚒."
send_message(message, session["number"])
message = "What do you want to know more about first?"
send_message(message, session["number"])
end
get "/sms/incoming" do
body = params[:Body] || ""
sender = params[:From] || ""
body = body.downcase.strip
session["block"] ||= "greeting"
if session["block"] == "terminated"
session["block"] = "greeting"
end
case session["block"]
when "greeting"
if body.include? "project" or body.include? "..."
session["block"] = "project"
project_block(0, sender)
elsif body.include? "skill"
session["block"] = "skill"
skill_block(0, sender)
elsif body.include? "yes"
messages = ["project or skill?"]
send_message(messages.sample(), sender)
elsif body.include? "no"
messages = ["Hope it is helpful!🙌"]
send_message(messages.sample(), sender)
session["block"] = "resume"
session["next_step"] = "email"
else
send_message("body error", sender)
help_block(sender)
end
when "project"
project_block(body, sender)
when "skill"
skill_block(body, sender)
# What else?
when "transition"
if body.include? "project" or body.include? "..."
session["block"] = "project"
project_block(0, sender)
elsif body.include? "skill"
session["block"] = "skill"
skill_block(0, sender)
elsif body.include? "no"
messages = ["glad to talk to you"]
send_message(messages.sample(), sender)
session["block"] = "terminated"
else
session["block"] = "resume"
resume_block(0, sender)
end
when "resume"
resume_block(body, sender)
when "terminated"
messages = ["please sign in again to restart"]
send_message(messages.sample(), sender)
else
help_block(sender)
end
end
Click to Expand
1. Tag all my projects properly
The main features of my portfolio bot are showing my projects and skills. To match each project/skill to what the visitor texts to the bot, and reply with the most related link to them is the key to successfully sell me to the potential recruiters.
2. Fail-safe response for each step
To make the conversation more natural, I'm using more human-like sentences instead of giving them multiple choices directly. It could happen when the user responds something unexpected, so there should be a fail-safe in each step to provide a clearer instruction on what the bot could help with.
3. Integrate the bot to my website
Obviously this is a bot that is supposed to be seen on my website instead of your message inbox. I'm planning to integrate it with my portfolio in the way of front-end coding or using Google's DialogueFlow
This project is only accessible by signed in users. Be considerate and think twice before sharing.
A hands on introduction to building online products and services through code
My personal assistant that navigates visitors to my works & experiences in my portfolio.
May 11th, 2020