Staatus: Exploring the Slack API

Back in April, Slack released a cool new feature that allows you to set a status message on your account. Some of the examples they provide are:

  • In a meeting
  • Commuting
  • Out sick
  • Vacationing
  • Working remotely

"This is awesome!," I thought. "Now I can do what did on AIM in 1997!"

Slack did sprinkle this status in various places in the UI, but it's still a pain to go searching for it, especially if you haven't chatted with a person in a while. Plus, there doesn't seem to be an easy way to see a compiled status for a group (e.g. @engineering-team).

Enter: Staatus

I built Staatus on a PHP framework called Silex. It's a microframework based on Symfony that provides the guts for building simple single-file apps. Here's an example:

require_once __DIR__.'/../vendor/autoload.php';

$app = new Silex\Application();

$app->get('/hello/{name}', function($name) use($app) {
    return 'Hello '.$app->escape($name);
});

$app->run();

Staatus allows you to see a compiled status of an individual, a particular team, or everyone in a channel. The code is over on our Github.

I have to hand it to the devs at Slack. The API was super-easy to work with. I made use of these REST commands:

With that, I was able to display both status emojis/messages, but also a blue diamond if the person is online:

The Code

Coding this up was very straightforward. I'd say the only quirk I ran into is that the calls take too long, and Slack does not like that. If your plugin doesn't return within a few seconds, you get an error message. My plugin is hosted on Heroku, so between the lag of Heroku waking up instances and the time it takes to run all the API calls (which can amount to many, especially when Staatus is run against a team name), I needed to figure out a way to return a delayed response. Normally, in a single-threaded language like PHP, that's not easy. Most frameworks follow a very "serial" manner of generating a response:

  1. A request comes in (possibly with parameters).
  2. A response is generated.
  3. The response is returned and the request dies.

So if step 2 was taking too long, how was I going to work around Slack's request time limits? The answer comes in Silex's $app->finish() method. It is documented as:

A finish application middleware allows you to execute tasks after the Response has been sent to the client (like sending emails or logging)

Here's how I used it:

$process = function(Request $request) use($app) {

// first, validate token
 $token = $request->get('token');
 if (empty($token) || $token !== VERIFY_TOKEN) {
 $app->abort(403, "Invalid token.");
 }

$response = [
 'response_type' => 'ephemeral',
 'text' => 'Gathering staatus...'];

// just return; the rest of the processing will happen in finish()

return $app->json($response);
};

$app->get('/', $process); // for testing
$app->post('/', $process);

$app->finish(function (Request $request, Response $response) use($app) {
...
}

As you can see, my $process method returns immediately and I do the rest of the processing in a finish() method. This allows me to take as long as I'd like (give or take) to return a response back to Slack using a one-time response URL they provide. (Technically, you can't take as long as you'd like to respond. Slack has a hard limit of "up to 5 times within 30 minutes"):

$response = [
 'response_type' => 'ephemeral',
 'text' => $text];

$client2 = new Client(['base_uri' => $responseUrl]);
 $response2 = $client2->post('', [
 'json' => $response,
 'verify' => false
 ]);

And that's all, folks. So, go ahead and download Staatus, deploy it on Heroku, and you'll be partying like it's 1997 all over again. BOOYAH!


Traackr :hearts: Instagram

As we continue to support the influencer marketing programs of our clients, we have found it imperative to consume and dig as much as we can out of influencer content created on Instagram. Adding to the consumption of post captions and metrics for engagement reports, Traackr also gives users the ability to harvest the photo tags on influencer posts and make them searchable !!! :)  

Ready? Check it out.
Let’s look at the Traackr profile of the most decorated olympian in history:

Michael Phelps' Traackr influencer profile.

Now, let’s find a post that has photo tags on it.   Oh look...here’s a good one (they seem to be having a lot of fun eh?):

Michael Phelps' instagram post viewed from his Traackr influencer profile.

Now let’s search for one of those tags. I like @casamigos too… read my mind :wink:wink:  Voilà!

Searching photo tags through Traackr.

But … I thought keyword queries only matched the actual content of the post. All I see is ‘Boys will be boys!!! #meldman’. How did you do it?”  

Well… here’s an oversimplified explanation of how it works.

Making photo tags searchable at Traackr.

So, at step (1) we get the post from Instagram’s public API. At step (2), we store it in our search engine and at step (3) we query for “@casamigos”.  And yea...you guessed it! The real magic happens at step (2).

When we’re indexing content, we append the photo tags to a secret field that keyword queries are executed against. But what we surface in the UI is a field that contains the original post “Boys will be boys!!! #meldman”.

Since you’re such a curious cat, here’s an excerpt of what the record looks like in our search engine:

{
  "_type": "post",
  "_source": {
    "postUrl": "http:\/\/instagram.com\/p\/BTIKhMygox-",
    "rootDomain": "instagram",
    "author": "m_phelps00",  
    "postContent": "Boys will be boys!!! #meldman @randegerber @makenagbc @jjd7007 @stuttsydlc @casamigos @romanstutts",
    "postDisplay": "Boys will be boys!!! #meldman"
  }
}

Hint: See the difference between postContent and postDisplay?

So why do we do this?

We want to do more than just track Instagram content to compute the metrics that allow us to analyze an influencer’s reach and resonance. We believe that with Instagram’s ever growing outreach and business impact, the more value we derive from its content, the more meaningful will be the insights we provide to organizations that invest in the practice of influencer marketing.

As it pertains to this particular feature, our customers are able to get more insights on brand mentions by using our platform to match mentions on photo tags and get further analytics and reports on them :)


Git Driven Release Management

Like many engineering teams, here at Traackr we like to streamline our workflow to spend as much time as possible building cool features. We also like to release early and often. And our product team likes being able to answer pesky questions like "has feature X been deployed?" or "there was a regression with feature Y, what release was that included in?". At times, these requirements can be a give and take. Using an issue tracker helps answer questions about when things were released, but navigating an application like Jira is a context switch. Plus, it's easy to click the wrong buttons. Releasing often means these context switches and mistakes happen frequently. Can we do better?

Some of our teams release more often than others.
Some of our teams release more often than others.

We think so, which led us to look at what we like about our tooling. One great thing about using Jira and Bitbucket is the way they seamlessly links commits to issues by including a ticket ID in your commit message. Because of this, we've standardized on a "<Ticket ID> <Message>" commit message format. We enforce this standard using a commit hook. This got us thinking... If we can link Jira tickets to commit messages, can we also map our git tags to Jira fix versions? It turns out the answer is yes!

Out of the box integration is nice, but sometimes you need to do it yourself.
Out of the box integration is nice, but sometimes you need to do it yourself.

The prototype

There were two main problems to solve. How do you identify a range of commits associated with a release? How do you interact with Jira to tag the issues with a new fix version? Enter release_fix_versioner.py.

At Traackr, we use a git-flow tagging and branching strategy; this is very convenient because for every release we already have a tag to reference. By providing our script with a new git tag, we can grab all commits between this tag and the previous tag to represent all of the commits to create a new release. With startTag and endTag, git has a handy command "git log --format=%s startTag...endTag" to print a list of commit messages in an easy to parse format. From there, it's a simple matter of parsing the commits to come up with a unique set of issue IDs. In order to support a variety of commit formats across different teams in our organization, the parsing is done using a regular expression with named groups to identify the key and message: "(?P<key>[\w]*-[\d]*)[ :-](?P<value>.*)".

Interacting with Jira turns out to be simple as well; the interface is extensive and does anything you could ask for. To start with, we decided to add some validation to each ticket prior to dealing with tags. We check things like making sure the work is finished by verifying the state equals "Done". This method is really all there is to it:

After creating two more similar methods to create a new fix version and add that fix version to each ticket, we've got ourselves a prototype:

Next Steps

Now that we have this script, we can start using it to simplify the manual issue management. If it works out, we'll include it as an automated step in our one button deploy job, and we'll never have to worry about Jira being out of date again. This could even be used to generate release notes for our public facing applications.

All the code for this hackweek project is available on github. Give it a try and let us know how it went!


Great Scott! HackWeek 5/1 Recap

Prologue

It’s 6am on a Thursday morning, and I’m realizing the feature I had built last night to demonstrate Vue.js’s double-binding capabilities has regressed due to some code-reorganization I decided to do last-minute.  I thought I had done a good thing, but I ignored my sensibilities to quit while I was ahead and just do that “one last thing”.

So I put on a pot of coffee, and I spent the next few hours not only fixing what I had broken, (in order to make sure my demo doesn’t fall flat on its face in front of my esteemed colleagues), but I also tried to strategize the best way to communicate the week-long and tearful journey towards carving out a path to refactoring an important yet 3-year old feature on our app, in a way that employs the best that VueJS has to offer without throwing the jQuery baby out with the bathwater, all in 360 seconds. Why? because it’s our Hack Week Demo Day!

Hack Weeks @ Traackr

Once a quarter, we take a collective pause from roadmap-focused development, and carve out an entire week for the engineering team to work on projects of their own. What started out as a monthly hack day, we quickly realized that a single day was not enough for any of us to really flesh out let alone implement our ideas. Experimentation needs time and iteration if it would materialize into something solid; we needed more than a day to experiment, fail, retry, and repeat!  So, we decided to have our hacks less frequently but for a much longer period of time, and thus Quarterly Hackathon was born.

The 5/1 Hackweek Recap

This particular Hack Week arrived shortly after we completed a project that the entire Engineering team had been working on for the good part of 6 months. The project was a set of tremendous improvements and new functionality added to the Analytics Suite of the Traackr App, altogether has been named Integrated Influencer Intelligence (or I3).

The temptation after such a sizable release, is to use this unstructured time to make all those small improvements to what we just released vs. spending the time looking at new problems with fresh eyes. This time around, most of the team spent time on fairy new ideas, with some folks improving on existing ones.  By the time the week ended we a whole collection of demos and proof of concepts ranging from: Devops dashboards, to Slack integrations, to enhancements to security, just to name a few.  But like most Hack Weeks at Traackr, it was a great time to shift gears, recharge, and inspire new ideas not just for our team, but for the company as a whole.

So, without further ado, let’s dig into some of the Traackr team’s Hack Week projects, in the gallery below:

Our 5/1 Hackweek Projects Gallery

The gallery below only describes high level info on the projects.  More in-depth articles about our Hack Week is still to come!


Boston ElasticSearch Meetup, 3.27.13 - Language Search presentation

External link: http://www.slideshare.net/bwarner77/language-search


The Simpsons Love Traackr

The Simpsons are very impressed with Traackr (@ SF office)


Just Dave: How to use Traackr influencers monitor as your screen saver.

Just Dave: How to use Traackr influencers monitor as your screen saver.

8 Reasons To Choose A Startup Over A Corporate Job

8 Reasons To Choose A Startup Over A Corporate Job

Using Traackr API

Today Engage121 announced they are launching a new version of their product that integrates with Traackr: Engage121 Launches Version 2.1

How do they do that you might ask? Well, very easy, they are using our awesome API. I thought I would show you how you can do it to. We are going to build a little Traackr widget from one of our alpha lists, Cloud Computing. The widget will display random posts from the list on a web page.

First of, the HTML for the page. Let’s keep it simple. We load JQuery because we will need it later to load the A-List via the API and display the posts.

The body contains a simple DIV and TABLE where we will display the image for the influencer and the text of the post.

<!DOCTYPE html>
<html>
    <head>
        <title>AList Widget</title>
        <script type=“text/javascript”
            src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”>
        </script>
    </head>
    <body>
        <h1>A-List Widget</h1>
        
        <!– alist title –>
        <div id=“alist-title”><i>Loading</i></div>
        
        <!– random post to display –>
        <div id=“alist-post" style="display: none; margin-top: 15px;”>
            <table><tr>
                <td>
                    <!– author's image –>
                    <img id=“author" src=”“/>    
                </td>
                <td>
                    <!– post text –>
                    <div id="post”></div>
                </td>
            </tr></table>
        </div>
        
    </body>
</html>

Now, the fun part. The trick it load to load the A-List via our API, here is the link for it. If you are a Traackr customer, this link is accessible from your campaign’s setting.

Once we have loaded the A-List, we can simply call the Javascript function show_post() every 5 seconds to load a new post. We select each post by randomly selecting 1 influencer from the list, then randomly select 1 channel from this influencer and finally 1 random post. Here is what it looks like:

<script type=“text/javascript”>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://alist.traackr.com/influencers/all/4233.json’,
                    data: {sec: '2728ea00020714632aa811e6f4a89e3a’},
                    dataType: 'jsonp’,
                    jsonp: 'jsonpcallback’,
                    success: function(data) { show_alist(data); }
                });
            });
            
            alist = null;

            var show_alist = function(data) {
                // read list and display title
                alist = data;
                $(’#alist-title’).html(alist.name);
                setTimeout(show_post, 5000);
            } // End function show_alist()
            
            var show_post = function() {
                // Find random influencer
                current_influencer = Math.floor(Math.random() * (alist.list.length - 1));
                influencer = alist.list[current_influencer];
                // Find random channel
                current_channel = Math.floor(Math.random() * (influencer.channels.length - 1));
                channel = influencer.channels[current_channel];
                // Find channel has posts
                if ( channel.posts.length > 0 ) {
                    // FInd random post
                    current_post = Math.floor(Math.random() * (channel.posts.length - 1));
                    // get data
                    img  = influencer.pics.small;
                    post = channel.posts[current_post].title;
                    url  = channel.posts[current_post].url;
                    // display
                    $(’#alist-post’).hide();
                    $(’#author’).attr(‘src’, img);
                    $(’#post’).html(’<a target=“_blank" href=”' + url + ’“>' + post + ’</a>’);
                    $(’#alist-post’).fadeIn(750);
                    setTimeout(show_post, 5000);
                }
                else {
                    setTimeout(show_post, 100);
                }
            }
        </script>

15 min in the oven at 350 and we are done. Check out the final result

And the best part about it? Traackr’s A-Lists refresh automatically weekly, so without having to do anything, just come back every week and discover new content.

That’s all folks!