How to build a simple meme bot in 30 minutes using Meteor
We are going to build a simple meme bot. It responds with memes according to the sentiment of the topic. Get the source code here. If you are interested in making cloud apps. Do checkout my book Cloud Is a Piece of Cake . Get the free chapters here.
Install Meteor
If you are using OSX/Linux
curl https://install.meteor.com/ | shIf your are using Windows
Download the installer here
Now in your terminal
meteor create simplebot
cd simplebot
meteor npm install
meteorNow visit http://localhost:3000/
We need six gifs, three for positive and the other for negative sentiment. One of the three gifs is randomly picked and shown.
The six memes must be in gif format with filenames 1.gif,2.gif,….,6.gif and one more with the filename “angry.gif”. We will use the first three for negative and the other three for positive sentiment. (You can use the gifs I used , get them here)
Create a folder named public. Inside that create a folder called gifs. Place the gifs inside it.
For styling let’s add twitter bootstrap. Go to terminal and type the following (Stop meteor using CTRL + C, then execute the following command)
meteor add twbs:bootstrapAdd this package for sentiment analysis
meteor add art1sec8:sentimentLet us start meteor by typing
meteorThe following code will give us the sentiment of the text written.
sentiment(“I am so Happy”, function( e, result ) {console.log(result.score);});
This will calculate the sentiment for the words “I am so Happy “. Since it’s a positive sentence we get a score above zero. Otherwise we get a score below zero.
Now here’s the code to select random gifs based on positive and negative sentiment . (Read through the code , don’t use it in your files yet.)
var responses = [“God , help us.”,”Let’s scoot”,”Just through it away”,”Danda nakka …”, “Like that huh? ;) “,”Because am happy …”];sentiment($(“#text”).val(), function( e, result ) { if(result.score < 0){ pos = getRandom(1,3); prepareResponse(“/gifs/”+pos+”.gif”,responses[pos-1]); }else{ pos = getRandom(4,6); prepareResponse(“/gifs/”+pos+”.gif”,responses[pos-1]);
}});
In case users don’t input anything or types less words we will show him the angry gif. Here’s the code for that. (Read through the code , don’t use it in your files yet.)
function checkIfBlank(){ if($(“#text”).val() == “”){ $(“#answer”).attr(“src”, “gifs/angry.gif”); $(“#response”).html(“<p class=’lead’> <i> Can’t you type something ?</i></p>”); showResponses(); return false;
} return true;}function checkIfLessWords(){ if($(“#text”).val().split(“ “).length<=5){ $(“#answer”).attr(“src”, “gifs/angry.gif”); $(“#response”).html(“<p class=’lead’> <i> Seriously? Type at least six words! </i></p>”); showResponses(); return false;
} return true;}
Now, let’s integrate the above code inside a html file . Replace your main.html with the following lines of code
<head><title>A Simple Bot</title><meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1"></head><body>{{> info}}</body><template name=”info”><center><br/><br/><br/><form><div class=”form-group” style=”width:80%”><br/><br/><p><i> Ashu is a simple meme bot. He responds with memes according to the sentiment of the topic. </i></p><br/><p class=”lead” >What’s up ?</p><input style=”height:40px;display:inline” type=”text” class=”form-control” id=”text” placeholder=”What’s up ?” /><br/><br/><button class=”btn btn-lg btn-success” id=”tell” >Tell Ashu</button><br/><br/><p id=”response”> </p><img id=”answer” src=”gifs/happy.gif”/><br/><br/></div><script type=”text/javascript”>function hideResponses(){$(“#answer”).hide();
$(“#response”).hide();}function showResponses(){$(“#answer”).show();
$(“#response”).show();}function checkIfBlank(){ if($(“#text”).val() == “”){ $(“#answer”).attr(“src”, “gifs/angry.gif”); $(“#response”).html(“<p class=’lead’> <i> Can’t you type something ?</i></p>”); showResponses(); return false;
} return true;}function checkIfLessWords(){ if($(“#text”).val().split(“ “).length<=5){ $(“#answer”).attr(“src”, “gifs/angry.gif”); $(“#response”).html(“<p class=’lead’> <i> Seriously? Type at least six words! </i></p>”); showResponses(); return false;
} return true;}function prepareResponse(filename,response){ $(“#answer”).attr(“src”, filename); $(“#response”).html(“<p class=’lead’> “ + response + “ </p>”); showResponses();}function getRandom(min, max) { return Math.round(Math.random() * (max — min) + min);}$(“document”).ready(function(){ $( “#text” ).on(‘input’,function(e){ hideResponses();
// Hide the gif if user is inputing text }); hideResponses();var responses = [“God , help us.”,”Let’s scoot”,”Just through it away”,”Danda nakka …”, “Like that huh? ;) “,”Because am happy …”];$(“#tell”).click(function(e){ e.preventDefault(); if(!checkIfBlank()) return; if(!checkIfLessWords()) return ; sentiment($(“#text”).val(), function( e, result ) { if(result.score < 0){ pos = getRandom(1,3); prepareResponse(“/gifs/”+pos+”.gif”,responses[pos-1]); }else{ pos = getRandom(4,6); prepareResponse(“/gifs/”+pos+”.gif”,responses[pos-1]); } });});});</script><br/></form></center></template>
Now visit http://localhost:3000
Congrats, you have made a meme bot :D
Interested in making cloud apps ? Do checkout my book Cloud Is a Piece of Cake . Get the free chapters here.
If you want help with any topic on programming, please fill up this form. I will get back to you soon.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
