Response to #100daysofcode tweets with random gifs from Giphy

[stephanie56]

The idea is to use giphy translate endpoint to tweet relevant gifs.

[Oxyrus]

To tweet randomly or when someone mentions the bot?

[stephanie56]

@Oxyrus I think it can be both. (e.g. if a user tweet day 1 of #100daysofcode - the bot can response with a gif with the keyword "thumbs up" or "applause")

[spences10]

I'll happily take a look at this, I'm not sure if there will be any overlap with #5

[spences10]

I had a play around with this, I'm guessing there's a better way to serve the gif. I managed it with pulling the gif to ./src then attaching to the tweet.
Example

---

var twit = require('twit')
var ura = require('unique-random-array')
var fs = require('fs')
var config = require('./config')
var strings = require('./helpers/strings')

var T = new twit(config);
var qs = ura(strings.queryString);
var rt = ura(strings.resultType);

// Save gif locally ====================================
var randomGif = function () {
    var Giphy = require('giphy')
    var giphy = new Giphy('dc6zaTOxFJmzC'); // use Giphy public beta key

    var giphySearchString = qs();
    var giphyFile;

    // Search with options using callback
    giphy.search({
        q: giphySearchString,
        rating: 'g'
    }, function (err, res) {
        // Res contains gif data!
        var resData = randIdx(res.data);
        giphyFile = resData.images.original.url;
        // the gif locally ====================================
        var request = require('request');
        request(giphyFile).pipe(fs.createWriteStream('./src/img/archer.gif'));
    });
};

// Tweet with media  ====================================
var postGif = function () {
    var b64content = fs.readFileSync('./src/img/archer.gif', {
        encoding: 'base64'
    });

    // first we must post the media to Twitter 
    T.post('media/upload', {
        media_data: b64content
    }, function (err, data, response) {
        // now we can assign alt text to the media, for use by screen readers and 
        // other text-based presentations and interpreters 
        var mediaIdStr = data.media_id_string;
        var altText = "Alternative text";
        var meta_params = {
            media_id: mediaIdStr,
            alt_text: {
                text: altText
            }
        };

        T.post('media/metadata/create', meta_params, function (err, data, response) {
            if (!err) {
                // now we can reference the media and post a tweet (media will attach to the tweet) 
                var params = {
                    status: 'Random gif via Giphy!',
                    media_ids: [mediaIdStr]
                };

                T.post('statuses/update', params, function (err, data, response) {
                    console.log(data, 'YAY!');
                });
            }
        });
    });
};

---

[spences10]

@stephanie56 you need any help with this?

[amandeepmittal]

If someone's till interested in this feature, than I am okay with it, otherwise I will be closing this issue in 1 week's time from today.

[spences10]

@stephanie56, @amandeepmittal this is pretty long-standing now, is there any interest from anyone tagged in or can we share on Twitter for interest?

the twitter-bot-playground is a good reference for anyone wishing to take it on...

[amandeepmittal]

Let's share on Twitter.

[stephanie56]

Hey @spences10 @amandeepmittal sorry I missed this notification. I haven't checked out the twitter bot code for a while and will look into it. At the same time I agree it's a good idea to share it on twitter anyway.

[EQuimper]

If still need I would be happy to jump on this feature :).

[spences10]

Mr @EQuimper it would be awesome if you could step in for this. I loved the super heros bot and it would be a great learning experience for us all if you could do this.

Out of curiosity, do you know how you would go about doing it?

[spences10]

@stephanie56 do you think you could come up with some more scenarios of the bot responding with a gif?

So, there's:

• Day 1 = respond with thumbs up
• Day 100 = celebrations
• Negative sentiment = hugs gif

It would be helpful for whoever is going to take this on to know the parameters of the feature.

[EQuimper]

@spences10 I'm not quite sure yet, gonna take the time Sunday to check this out.

[amandeepmittal]

@spences10 Can we also have a set of different gifs picked randomly for each tweet-back? This is an enhancement of the feature we are discussing but it will be prove to be interactive IMO.

[spences10]

@amandeepmittal there needs to be some context for the gif IMO.

Can't have the bot replying with random gifs to every reply, say it is replying to someone having a hard time and the sentiment bot tweets back with encouragement but also a gif of people laughing?

[amandeepmittal]

I meant in the context of these three:

• Day 1 = respond with thumbs up
• Day 100 = celebrations
• Negative sentiment = hugs gif

Not every reply. I am sorry if I was not clear before.

[spences10]

Gotcha 👍

[stephanie56]

Hey folks! I was overthinking about it... I thought we will need to upload the gif first then tweet it - but it seems like we can display the gif on twitter timeline simply by sharing the gif link https://giphy.com/posts/how-to-share-giphy-gifs-on-twitter

So my idea is:
(1) get the keyword we need for the gif (either hard coding keywords such as thumbs up or generated using sentiment;
(2) call giphy api using the keyword using the /search endpoint (of course filter the gif with rating too) and select the animated url of first result
(3) add the gif url to a tweet :D

What do you think about this approach? I'm going to have some extra time this month to work on it. Let me know!

[stephanie56]

Example:

const giphyQuery = `http://api.giphy.com/v1/gifs/search?api_key=${API_KEY}&q=${keyWord}&limit=1&rating=g`; 
const gifUrl = keyWord => {
 fetch(giphyQuery)
  .then(res => res.json())
  .then(result => result.url); 
}

Then we can append the gifUrl to a tweet that needs a gif.

[EQuimper]

@stephanie56 I was checking the docs and the example you show that will work, but I think the best should be to have some gif url save somewhere inside an object who go with the type of message we want to sent. This way we know than this gif are those we want and also they don't do show bad stuff. When I use the giphy api sometime you get gif who are kind of offending etc.

I think if we save url of those who we know are ok + they gonna be easier to filter if they are already below an object who match the message we want to send.

This is just my opinion :)

[stephanie56]

I agree! @EQuimper - it's easier to control the content if we pre-select those gifs. I'm imagining the object can structure like this:

const gifReactions = {
  thumbUp: ['https://gph.is/1R12OUI', 'https://gph.is/2tzoYc9', 'something else...'], 
  clap: ['https://gph.is/1R12OUI', 'https://gph.is/2tzoYc9', 'something else...'], 
  motivation: ['https://gph.is/1R12OUI', 'https://gph.is/2tzoYc9', 'something else...'], 
}

And we can write a helper function that is similar to the current random emoji module. Use it in the reply.js? What do you think @spences10 @amandeepmittal?

[EQuimper]

yes, I can do it this weekend, I got some time :) @stephanie56 if everyone is ok with that.

[spences10]

Ok, so we're going to have a predefined list of 'approved/curated' gifs to use, right?

[EQuimper]

@spences10 yes this is ok for you ? I can do the logic, but I would like someone else to handle the choice of the gif :)

[EQuimper]

@spences10 I see some code who can be delete and some structure improvement. I can do this in a pull request. You want it or you want to keep it like it ? I was thinking also about adding eslint. You have prettier who is really nice but prettier can help the dx :)

[spences10]

Sure, put it in a PR @EQuimper, same with ESLint 👍

w/ regard to the curated list of gifs shall we have them in a .env file or in a .json object on now maybe?

For now maybe go with @stephanie56 suggestions?

thumbUp: ['https://gph.is/1R12OUI', 'https://gph.is/2tzoYc9', 'something else...'], 
clap: ['https://gph.is/1R12OUI', 'https://gph.is/2tzoYc9', 'something else...'], 
motivation: ['https://gph.is/1R12OUI', 'https://gph.is/2tzoYc9', 'something else...'],

☝️ not sure on how the sentiment is going to work with the three categories...

[spences10]

Thinking about it actually, it may be a better idea to have the images object somewhere other users can access and load new images to.

If we add the files to now then there'll either need to be a team account set up or an individual dealing with any updates, neither being a very reliable method.

[EQuimper]

@spences10 perfect I change some logic for the promote and add test. I mock also the bot so we can run test without pushing to twitter. Hope you gonna like it

[EQuimper]

Json file would be better

[fancylettuce]

Maybe this will lead us in the right direction.

const tweet = (keyword) => {
getGifs(keyword)
.then(gifs => {
const randomGif = gifs[Math.floor(Math.random() * gifs.length)];
const tweet = ${keyword} ${randomGif.url};
return tweet;
}).then(tweet => {
const tweetUrl = https://twitter.com/intent/tweet?text=${tweet};
window.open(tweetUrl, '_blank');
}).catch(error => console.log(error));
}