Learn Glitch and Algolia with this app for searching your tweets

Recently in Algolia land, we released We Rate Tweets, an app that runs on Glitch and combines the Algolia and Twitter API’s.

We wanted a more powerful search for our Twitter timelines, what better way than to send data to Algolia and throw some InstantSearch on it? With Algolia we can not only see our results instantly, but we can help optimize the results for what we want the user to see, like their top rated tweets.

DEMO

UNDER THE HOOD
This app uses the Twitter API to authenticate the user, then calls the GET statuses/user_timeline which can fetch up to 3,200 of the user’s records, 200 per call.

However, Tweet objects contain many properties that we don’t need, and we want to avoid sending those to Algolia because it can increase the size of our index and slow down our future searches. Instead, we iterate over the response we get and create objects with only the data that is needed for the custom ranking or displaying search results. Once that is completed, we send the objects we created to the index we initiated with Algolia along with the settings we have configured.

The setSettings method of the Algolia API is used to configure display and relevance settings. It’s important to think about these settings early on as you’re thinking through how you want the search to behave. Going with the theme of rating tweets, we wanted to show someone’s top tweets when they searched a keyword. We do this with each setting here:

  • searchableAttributes : we chose unordered() with text rather than ordered() so that regardless of where the words match, they are returned. If we have ordered specified, matching words at the beginning of that attribute will be considered more important than words that occur later in the attribute.
  • attributesToHighlight: when our user is searching, we want to indicate back to the user what their search is returning.
  • customRanking: we want the first results to be the “top rated” tweets, so we use a desc() with total_count(retweet_count plus favorite_count), retweet_count and the the created_at date. We can do desc() or asc(), but we want to show the more recent tweets rather than the older ones.
  • attributesToReceive: this specifies which attributes of the records that we want to be sent within the answer to a search.
  • ignorePlurals: this setting enables Algolia to consider “tweet” and “tweets” equivalent and will return an exact match.

We can do this via code or through the dashboard, whatever your preference is.

For this project, we are setting it via the API:

    // algolia index settings can be set via the API
    function configureIndex(username, algoliaClient) {
      return new Promise((resolve, reject) => {

      // the algolia index name contains the user's twitter handle,
      // so that tweets from different users remain separate
      var algoliaIndexName = indexName(username);
      var algoliaIndex = algoliaClient.initIndex(algoliaIndexName);

      algoliaIndex.setSettings({
        // only the text of the tweet should be searchable
        searchableAttributes: ['unordered(text)'],
        // only highlight results in the text field
        attributesToHighlight: ['text'],
        // tweets will be ranked by total count with retweets
        // counting more that other interactions, falling back to date
        customRanking: ['desc(total_count)', 'desc(retweet_count)', 'desc(created_at)'],
        // return these attributes for dislaying in search results
        attributesToRetrieve: ['id_str', 'text', 'created_at',
          'retweet_count', 'favorite_count', 'total_count',
          'user.name', 'user.screen_name', 'user.profile_image_url'],
        // make plural and singular matches count the same for these langs
        ignorePlurals: ['en', 'fr']
      }, (err, content) => {
        if (err) {
          reject(err);
        } else {
          resolve(content);
        }
      });
     });
    }

Alternatively, within your dashboard you can set your settings for your application under the Indices tab.


We are doing a bit behind the scenes with our code, but to the user, it looks quite simple. Upon successful authentication with Twitter, we bring the user to a waiting page while we create the index.

Once this is ready, we let the user know they are ready to start searching their tweets and direct them to the search page. Here we instantiate instant search and violà! We have sweet sweet tweet rating success.

This code lives on GitHub, but the application runs on Glitch, giving people a chance to see under the hood, make their own live changes and see how Algolia works. We’re looking to get even more apps on here, so stay tuned!

FEEDBACK
We had fun building this, but the best projects also get feedback from users and iterate. With that in mind… we would love some feedback! If you are able, go through the app with a few things in mind:

  • Did you get stuck anywhere? If so, where?
  • Do you feel like you learned something about Algolia?
  • Will you keep using this? Why or why not?
  • How could we make it better?

Please feel free to open an issue on our GitHub repo, a PR with any enhancements, leave us comments here or feel free to email us at community@algolia.com.

Thanks and enjoy rating your tweets!

3 Likes

Cool @jessica.west!

I made a remix that lives here:

I made a few changes to the remix by tweaking the environment variables. First, this remix goes farther back to fetch all 3,200 recent tweets, and I also enabled the flag that lets me index and search any timeline.

Because of that, I could index one of my favorite timelines, the hilarious @iamdevloper account!

Now I can search for funny @iamdevloper tweets about ruby, like this one:

Funny because it’s true! :sweat_smile: I’ve done a lot of Ruby, so I can say that right? :see_no_evil:

Keep up the great work with this app!

2 Likes

Really nice @dzello. Any plan to support media?

2 Likes

Very cool! @dzello! I love that account too, reading the ruby tweets is bringing back some good memories! :sweat_smile:

@kevin.granger, that’s definitely been an idea we have been toying with; do you think that makes a difference for the user experience?

1 Like

With iamdevloper account some tweets don’t have any sens without the images/gif. So I’d yes it could be better for the experience. If it’s too complex to integrate maybe a label that shows that a content was linked to the tweet (with a link) would be enough.

1 Like

Totally agree with you @kevin.granger! An issue is open here from @pixelastic, I gave it a +1.