Febin John James

@heyfebin

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/ | sh

If your are using Windows

Download the installer here

Now in your terminal

meteor create simplebot
cd simplebot
meteor npm install
meteor

Now 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:bootstrap

Add this package for sentiment analysis

meteor add art1sec8:sentiment

Let us start meteor by typing

meteor

The 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.

More by Febin John James

Topics of interest

More Related Stories