Build Twitter Into Your 3rd Party Realtime App to Publish and Delete Tweets

Engaging social applications are quite challenging to build and operate on your own; they require substantial effort and engineering resources to create friendly user interfaces, maintain integration points, and operate large-scale services at scale. In the meantime, Twitter APIs make it easy to give your applications a social media “voice.”

Looking closer at the APIs, simple “tweeting” is just the beginning. There are a lot of API methods available for integration across a variety of use cases (such as geolocation). It really is a powerful tool for integrating media communications across the entire mobile landscape. In this article though, we’ll keep it simple and implement a basic “tweet” integration that posts messages from a PubNub channel.

Obtaining your PubNub Developer Keys

You’ll first need your PubNub publish/subscribe keys. If you haven’t already, sign up for PubNub. Once you’ve done so, go to the PubNub Admin Portal to get your unique keys. The publish and subscribe keys look like UUIDs and start with “pub-c-” and “sub-c-” prefixes respectively. Keep those handy – you’ll need to plug them in when initializing the PubNub object in your HTML5 app below.

Getting Started with the Twitter API

Setting up the Function

Paste in the Function code from the next section and update the bot name with the credentials from the previous steps above.

Start the Funcion, and test it using the “publish message” button and payload on the left-hand side of the screen.

That’s all it takes to create your serverless code running in the cloud!

You’ll want to grab the 73 lines of Function JavaScript and save them to a file, say, pubnub_twitter_block.js. It’s available as a Gist on GitHub for your convenience.

First up, we declare our dependency on xhr (for HTTP requests), base64 and crypto (for signing requests), and create a function to handle incoming messages.

const xhr = require('xhr');
const base64Codec = require('codec/base64');
const crypto = require('crypto');
export default (request) => {

Next, we fill in the OAuth credentials to give us publishing permissions, and declare the API URL, method and content type for the request.

// see https://apps.twitter.com
const consumerKey      = "YOUR_CONSUMER_KEY";
const consumerSecret   = "YOUR_CONSUMER_SECRET";
const accessToken      = "YOUR_ACCESS_TOKEN";
const oauthTokenSecret = "YOUR_OAUTH_TOKEN_SECRET";
const httpReqType = "POST";
const contentType = "application/x-www-form-urlencoded";
let url = "https://api.twitter.com/1.1/statuses/update.json";

If there’s no tweet specified in the message, we return an error.

if (!request.message.tweet) {
    return request.abort({ "400": "400: Bad Request" });
}

The tweet content is contained in the message’s tweet attribute. We escape special characters properly and turn it into a URI-encoded string for the body content.

let tweetContent = (request.message.tweet || "");
   let content = (tweetContent ? "status=" + encodeURIComponent(tweetContent).replace(/[!'()*]/g, escape) : "");

Now that we have all the parameters set, we create an object to hold all the relevant OAuth signing data.

let oauth = {
    "oauth_consumer_key": consumerKey,
    "oauth_nonce": base64Codec.btoa(Math.random().toString(36)).replace(/(?!\w)[\x00-\xC0]/g, ""),
    "oauth_signature_method": "HMAC-SHA1",
    "oauth_timestamp": Math.floor(new Date().getTime() / 1000),
    "oauth_token": accessToken,
    "status": tweetContent
};

return getOAuthSignature(oauth, httpReqType, url, consumerSecret, oauthTokenSecret).then((result) => {
    oauth.oauth_signature = result;
    delete oauth.status;
    let authHeaderString = objectToRequestString(oauth, 'OAuth ', '="', '"', ', ');

let http_options = {
    "method": httpReqType,
    "headers": {
        "Content-Type": contentType,
        "Authorization": authHeaderString
    },
    "body": content
};

    return xhr.fetch(url, http_options).then((response) => response.json()).then((response) => {
        request.message.twtr_response = response;
        return request.ok();
    });
})

    .catch((error) => {
        return request.abort({ "500": "500: Internal server error" });
    });
};

function getOAuthSignature(oauth, httpReqType, url, consumerSecret, oauthTokenSecret) {
    let parameterString = objectToRequestString(oauth, '', '=', '', '&');
    let signatureBaseString = httpReqType + "&" + encodeURIComponent(url) + "&" + encodeURIComponent(parameterString);
    let signingKey = base64Codec.btoa(encodeURIComponent(consumerSecret) + "&" + encodeURIComponent(oauthTokenSecret));
    return crypto.hmac(signingKey, signatureBaseString, crypto.ALGORITHM.HMAC_SHA1).then((result) => {
        return result;
    });
}

function objectToRequestString(obj, prepend, head, tail, append) {
    let requestString = prepend || "";
    Object.keys(obj).forEach((key, i) => {
        requestString += key + head + encodeURIComponent(obj[key]).replace(/[!'()*]/g, escape) + tail;
        i < Object.keys(obj).length-1 ? requestString += append : null;
    });
    return requestString;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2</title>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
    <script src="https://unpkg.com/rxjs@5.0.1/bundles/Rx.js"></script>
    <script src="https://unpkg.com/@angular/core/bundles/core.umd.js"></script>
    <script src="https://unpkg.com/@angular/common/bundles/common.umd.js"></script>
    <script src="https://unpkg.com/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="https://unpkg.com/@angular/forms/bundles/forms.umd.js"></script>
    <script src="https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
    <script src="https://unpkg.com/pubnub@4.3.3/dist/web/pubnub.js"></script>
    <script src="https://unpkg.com/pubnub-angular2@1.0.0-beta.8/dist/pubnub-angular2.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  </head>

<body>
  <main-component>
    Loading...
  </main-component>

<div class="container">
    <pre>
    NOTE: make sure to update the PubNub keys below with your keys,
    and ensure that the BLOCK settings are configured properly!
    </pre>
    <h3>MyApp Functions Twitter Integration</h3>
    <br />
    Tweet:
    <br />
    <input type="text" [(ngModel)]="toSend" placeholder="tweet" />
    <input type="button" (click)="publish()" value="Send!" />
    <hr/>
    <br/>
    <br/>
    <ul>
      <li *ngFor="let item of messages.slice().reverse()">
        <div>{{item.message.tweet}} <b>{{item.message.twtr_response.id}}</b></div>
      </li>
    </ul>
</div>

<script>
var app = window.app = {};
app.main_component = ng.core.Component({
    selector: 'main-component',
    template: `...see previous...`

}).Class({
    constructor: [PubNubAngular, function(pubnubService){
        var self = this;
        self.pubnubService = pubnubService;
        self.channelName = 'twitter-channel';
        self.messages = [];
        self.toSend = "";
        pubnubService.init({
            publishKey:   'YOUR_PUB_KEY',
            subscribeKey: 'YOUR_SUB_KEY',
            ssl:true
        });

pubnubService.subscribe({channels: [self.channelName], triggerEvents: true});
self.messages = pubnubService.getMessage(this.channelName,function(msg){
  // no handler necessary, dynamic collection of msg objects
});

    }],
    publish: function(){
        this.pubnubService.publish({ channel: this.channelName, message: {tweet:this.toSend} });
        this.toSend = "";
    }
});

app.main_module = ng.core.NgModule({
    imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
    declarations: [app.main_component],
    providers: [PubNubAngular],
    bootstrap: [app.main_component]
}).Class({
    constructor: function(){}
});

document.addEventListener('DOMContentLoaded', function(){
    ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(app.main_module);
});

});
</script>
</body>
</html>