{"id":281,"date":"2015-02-11T02:00:00","date_gmt":"2015-02-11T02:00:00","guid":{"rendered":"http:\/\/localhost\/?p=281"},"modified":"2015-12-16T19:45:30","modified_gmt":"2015-12-16T19:45:30","slug":"displaying-the-twitter-feed-within-your-ionic-app","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/displaying-the-twitter-feed-within-your-ionic-app","title":{"rendered":"Displaying the Twitter Feed within Your Ionic App"},"content":{"rendered":"

This is a guest post by Simon Reimler, software developer at arvato Bertelsmann, experienced with iOS, Android, AngularJS, Ionic and Python. Simon often writes about Ionic, web and mobile development. Read more on Simon’s Blog, DevDactic<\/a>.<\/em><\/p>\n

Getting the Twitter timeline of a user into your Ionic app can be a challenging task. Lucky for us, we can use the simple ngCordova OAuth wrapper previously described by Nic Raboy<\/a> to solve the basic authentication. But what happens after the token authentication?<\/p>\n

In this post, I will take things one step further and show you how to authenticate with OAuth, make signed calls to the well documented Twitter REST API<\/a>, and parse the home timeline of a user inside your Ionic app.<\/p>\n

<\/p>\n

Set Up a Simple App<\/h3>\n

We’ll start with a simple blank Ionic app, install ngCordova<\/code> and ngResource<\/code> (needed for the REST calls later) via the bower package manager<\/a> and add a Cordova plugin we will need for the OAuth:<\/p>\n

ionic start devdactic-twitterfeed blank --appname \u201cMy Twitter Feed\u201d\ncd devdactic-twitterfeed\nbower install angular-resource ngCordova --save\ncordova plugin add https:\/\/git-wip-us.apache.org\/repos\/asf\/cordova-plugin-inappbrowser.git\n<\/code><\/pre>\n
Additionally, we need the jsSHA Library inside our project, because Twitter requires request signing using HMAC-SHA1. Go to the jsSHA Github project<\/a>, download it, and copy the sha.js<\/code> file from the archive into the www\/lib\/<\/code> folder of your app.<\/p>\n
Now, we need to include all these files inside our index.html<\/code>. Make sure to add the ngCordova file before the cordova.js script tag that is already included! We also already included our services, and later, we will create and add a controller.<\/p>\n
<!-- Before cordova.js -->\n<script src="lib\/sha.js"><\/script>\n<script src="lib\/angular-resource\/angular-resource.js"><\/script>\n<script src="lib\/ngCordova\/dist\/ng-cordova.js"><\/script>\n\n<!-- After cordova.js -->\n<script src="js\/controllers.js"><\/script>\n<script src="js\/services.js"><\/script>\n<\/code><\/pre>\n
Finally, we must add the dependencies to our AngularJS module inside our app.js<\/code> file:<\/p>\n
angular.module('starter', ['ionic', 'ngResource', 'ngCordova'])\n<\/code><\/pre>\n
Our app is now ready to connect with Twitter. The last thing we must do is to create an app on Twitter that will give us the credentials we need. Go to the Twitter Application Management<\/a> page and create a simple app.<\/p>\n
After creation, we need to change the callback URL of our Twitter app to http:\/\/localhost\/callback<\/em>. As this is currently not possible via Twitter, make yourself a tiny URL<\/a>, and insert that one instead.
\nLeave the created app for now; we will need to copy some keys from it in a later step.<\/p>\n
Writing a Twitter Service<\/h3>\n
The heart of our app will be the TwitterService<\/code>, which will handle our calls to the REST API and give us the data we need. Therefore, create a new file named services.js<\/code> next to the app.js<\/code> file, and insert this (I will discuss the functions in detail afterwards):<\/p>\n
.factory('TwitterService', function($cordovaOauth, $cordovaOauthUtility, $http, $resource, $q) {\n    \/\/ 1\n    var twitterKey = "STORAGE.TWITTER.KEY";\n    var clientId = 'TwitterAppConsumerKey';\n    var clientSecret = 'TwitterAppConsumerSecret';\n\n    \/\/ 2\n    function storeUserToken(data) {\n        window.localStorage.setItem(twitterKey, JSON.stringify(data));\n    }\n\n    function getStoredToken() {\n        return window.localStorage.getItem(twitterKey);\n    }\n\n    \/\/ 3\n    function createTwitterSignature(method, url) {\n        var token = angular.fromJson(getStoredToken());\n        var oauthObject = {\n            oauth_consumer_key: clientId,\n            oauth_nonce: $cordovaOauthUtility.createNonce(10),\n            oauth_signature_method: "HMAC-SHA1",\n            oauth_token: token.oauth_token,\n            oauth_timestamp: Math.round((new Date()).getTime() \/ 1000.0),\n            oauth_version: "1.0"\n        };\n        var signatureObj = $cordovaOauthUtility.createSignature(method, url, oauthObject, {}, clientSecret, token.oauth_token_secret);\n        $http.defaults.headers.common.Authorization = signatureObj.authorization_header;\n    }\n\n    return {\n        \/\/ 4\n        initialize: function() {\n            var deferred = $q.defer();\n            var token = getStoredToken();\n\n            if (token !== null) {\n                deferred.resolve(true);\n            } else {\n                $cordovaOauth.twitter(clientId, clientSecret).then(function(result) {\n                    storeUserToken(result);\n                    deferred.resolve(true);\n                }, function(error) {\n                    deferred.reject(false);\n                });\n            }\n            return deferred.promise;\n        },\n        \/\/ 5\n        isAuthenticated: function() {\n            return getStoredToken() !== null;\n        },\n        \/\/ 6\n        getHomeTimeline: function() {\n            var home_tl_url = 'https:\/\/api.twitter.com\/1.1\/statuses\/home_timeline.json';\n            createTwitterSignature('GET', home_tl_url);\n            return $resource(home_tl_url).query();\n        },\n        storeUserToken: storeUserToken,\n        getStoredToken: getStoredToken,\n        createTwitterSignature: createTwitterSignature\n    };\n});\n<\/code><\/pre>\n
    \n
  1. \n
    Insert your personal Consumer<\/code> and Consumer Secret Key<\/code> from the Twitter app you created in the preparation step. The Storage key is just for your localStorage, so change it to whatever you like.<\/p>\n<\/li>\n
  2. \n
    The first two functions are just for storing and retrieving the OAuth Token once the user is successfully authorized; nothing special here.<\/p>\n<\/li>\n
  3. \n
    createTwitterSignature<\/code> is one of the most important functions here, because this function takes care of the correct signing of our requests. When called, we give it the HTTP method, like GET<\/code> or POST<\/code>, and the URL from which we want to get the data. The function will then read the OAuth Token from localStorage and create an object with some more general stuff the Twitter REST API requires, like the Consumer Key and the OAuth Token. This object is then passed to the $cordovaOauthUtility<\/code>of ngCordova to create a correct authorization object, which will be set as the authorization header<\/em> of our request. For more detailed information about OAuth 1.0a, check out Nic Raboy’s blog post<\/a>!<\/p>\n<\/li>\n
  4. \n
    After this function, we come to the returned object of our TwitterService. The initialize<\/code> function will be called on our app startup. This function looks for a stored OAuth token that could be used for signing, but if it is not present, it will try to authorize the user with the help of $cordovaOauth<\/code>, where we again need the Consumer Key and Consumer Secret.
    \nThis ngCordova wrapper will slide up a Twitter authorization form to the user, where the user must enter his\/her credentials. Finally, we return a promise from this function to get informed about a correct\/failed authorization in our controller.<\/p>\n<\/li>\n
  5. \n
    The isAuthenticated<\/code> function is very simple and only checks for a stored token. Keep in mind that users could revoke their permissions for an app, so here you might add a token verification check in a real app.<\/p>\n<\/li>\n
  6. \n
    Finally the getHomeTimeline<\/code> function can be called to retrieve our home timeline feed. Here, we create our signature for the request for the associated URL and return the request as a resource object. To learn more about this, check out my ngResource blog post<\/a>.<\/p>\n<\/li>\n<\/ol>\n
    Accessing the data from our Controller<\/h3>\n
    After we have our service, we need to create the controller for our app, so go ahead and create a controllers.js. Now, open your created file, and insert this:<\/p>\n
    .controller('AppCtrl', function($scope, $ionicPlatform, TwitterService) {\n    \/\/ 1\n    $scope.correctTimestring = function(string) {\n        return new Date(Date.parse(string));\n    };\n    \/\/ 2\n    $scope.showHomeTimeline = function() {\n        $scope.home_timeline = TwitterService.getHomeTimeline();\n    };\n    \/\/ 3\n    $scope.doRefresh = function() {\n        $scope.showHomeTimeline();\n        $scope.$broadcast('scroll.refreshComplete');\n    };\n    \/\/ 4\n    $ionicPlatform.ready(function() {\n        if (TwitterService.isAuthenticated()) {\n            $scope.showHomeTimeline();\n        } else {\n            TwitterService.initialize().then(function(result) {\n                if(result === true) {\n                    $scope.showHomeTimeline();\n                }\n            });\n        }\n    });\n});\n<\/code><\/pre>\n
    Our controller is rather simple now, as we have all our REST interaction logic inside our service. Anyway, let\u2019s take a closer look at our functions:<\/p>\n
      \n
    1. \n
      As our feed object from Twitter returns a quite unformatted date string, we need to convert the string to a more readable date to display.<\/p>\n<\/li>\n
    2. \n
      The showHomeTimeline<\/code> function will fill our home_timeline<\/code> array with the feed data we get from our service.<\/p>\n<\/li>\n
    3. \n
      As we will have a pull-to-refresh inside our view, we need a function to update the feeds array.<\/p>\n<\/li>\n
    4. \n
      When our platform is ready, we check if the user is already authenticated and initially fill the array. If not, we call our initialize<\/code> from the service to show the login view to the user to perform the OAuth authentication.<\/p>\n<\/li>\n<\/ol>\n
      That’s pretty much everything we need for a simple Twitter feed!<\/p>\n
      Showing Feeds Inside Our View<\/h3>\n
      After we have a service to get the data from Twitter and a controller to hold our received data, we need an appropriate view to show the feeds in a Twitter-like style. For this, open the index.html<\/code> and replace the dummy body with this:<\/p>\n
      <body ng-app="starter" ng-controller='AppCtrl'>\n  <ion-pane>\n    <ion-header-bar class="bar-positive">\n      <h1 class="title">My Twitter Feed<\/h1>\n    <\/ion-header-bar>\n    <ion-content class="has-header padding">\n      <ion-refresher on-refresh="doRefresh()"><\/ion-refresher>\n\n    <div ng-show="home_timeline.length == 0">Loading tweets...<\/div>\n\n    <div ng-repeat="entry in home_timeline" class="list card">\n      <div class="item item-avatar">\n        <img ng-src="{{entry.user.profile_image_url}}"\/>\n        <h2>{{entry.user.name}}<\/h2>\n        <p>{{correctTimestring(entry.created_at) | date:'medium'}}<\/p>\n      <\/div>\n\n      <div class="item item-body">\n        <p ng-bind-html="entry.text"><\/p>\n        <img ng-if="entry.extended_entities" ng-src="{{ entry.extended_entities.media[0].media_url }}" style="width: 100%;"\/>\n      <\/div>\n\n    <\/div>\n  <\/ion-content>\n<\/ion-pane>\n<\/body>\n<\/code><\/pre>\n
      Inside our view, we first have the refresher, which allows us to use pull-to-refresh. Next, if our feed’s array is empty, we just display a little dummy text.<\/p>\n
      The main part is the ng-repeat<\/code> to iterate over the feed objects. Here, we make use of the Ionic cards<\/a>, where we have the profile image of the user as an item-avatar, the username, our corrected time string in the top area, and inside the body of our card the text of the tweet. Additionally, if some media inside the feed data is set, we display the posted image below the content.<\/p>\n
      Final Words and Outlook<\/h3>\n
      This tutorial shows a straightforward way to display Twitter feed data in an appropriate way inside your Ionic app. There are many more endpoints in the Twitter REST API, so make use of the newly created TwitterService and get the data you need!
      \nAdditionally, you could parse the feed data a bit more through a filter to make links clickable. Check out       my blog<\/a> for an upcoming post about this topic!<\/p>\n
      If you have any questions, issues, or ideas, please leave a comment below and\/or follow me @schlimmson<\/a> on Twitter.<\/p>\n
      A video version of this article can be seen below.<\/p>\n