Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Meteor Talk: Building Mitter

Meteor Talk: Building Mitter

Building a Twitter-like search with Meteor and Appbase

Avatar for Siddharth Kothari

Siddharth Kothari

January 31, 2016
Tweet

More Decks by Siddharth Kothari

Other Decks in Technology

Transcript

  1. Siddarth, sith in making Co-founder and CEO, appbase.io Give me

    a shout at @siddharthlatest GET /programming/stacktrace 
 [“Games”, “C”, “Python”, “Java (sigh)”, “AI”, “JS”, “Databases”]
  2. Hands-on Demo $ meteor add appbaseio:appbase $ meteor add manuel:reactivearray

    Install Packages $ meteor add mizzao:bootstrap-3 Step 0
  3. Hands-on Demo var appbaseRef = new Appbase({ url: "https://scalr.api.appbase.io/", username:

    "UaV93rU9p", password: "28bf943d-42f2-4861-a751-31d17b49c184", appname: "mitter" }) Step 1 <app_name>.js
  4. Hands-on Demo if (Meteor.isClient) { /* things we do once

    */ var renderedTweets = new ReactiveArray(); var requestObject = {...}; ... Step 1 <app_name>.js
  5. Hands-on Demo <app_name>.js appbaseRef.search(requestObject) .on('data', function(result) { renderedTweets = result.hits.hits

    appbaseRef.searchStream(requestObject) .on('data', function(stream) { renderedTweets.push(stream._source) }) } Step 1
  6. Hands-on Demo <app_name>.js /* define all the template helpers */

    Template.body.helpers({ tweets: function() { return renderedTweets.list(); } }) Step 1
  7. Hands-on Demo $ git remote add origin https://github.com/appbaseio/mitter Get Mitter

    Step 1 $ rm -rf * && git fetch $ git checkout tags/step1 -b step1
  8. Hands-on Demo $ meteor deploy flyingkittens Deploy App Step 1

    Your app should be live at http://flyingkittens.meteor.com.
  9. Hands-on Demo $ meteor add mrt:twit Get a Twitter Dev

    Account Step 2 Go to https://apps.twitter.com
  10. Hands-on Demo { "consumer": { "key": ". . .", "secret":

    ". . ." }, "access_token": { "key": ". . .", "secret": ". . ." } } Private Files (for secure data) Step 2
  11. Hands-on Demo if (Meteor.isServer) { Meteor.startup(function() { // code to

    run on server at startup var conf = JSON.parse(Assets.getText('twitter.json'));
 … Server side Code Step 2
  12. Hands-on Demo <template name="search_box"> <input class="searchBox" type = "text" placeholder="Search

    the tweets" autofocus="autofocus"/> </template> Adding Search Step 3