Meteor Talk: Building Mitter

Building a Twitter-like search with Meteor and Appbase

Transcript

1. Building a Twitter-like Search with Meteor and Appbase Siddharth Kothari (@siddharthlatest)
2. 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”]
3. What is Meteor
4. Hands-on Demo $ curl https://install.meteor.com/ | sh Install Meteor Step 0
5. Hands-on Demo $ meteor create <app_name> $ cd <app_name> Create App Step 0 $ meteor
6. Hands-on Demo $ meteor add appbaseio:appbase $ meteor add manuel:reactivearray Install Packages $ meteor add mizzao:bootstrap-3 Step 0
7. Appbase.io JS Library for building realtime feeds and search. Step 1 Create an app from the dashboard
8. 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
9. Hands-on Demo if (Meteor.isClient) { /* things we do once */ var renderedTweets = new ReactiveArray(); var requestObject = {...}; ... Step 1 <app_name>.js
10. 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
11. Hands-on Demo <app_name>.js /* define all the template helpers */ Template.body.helpers({ tweets: function() { return renderedTweets.list(); } }) Step 1
12. Step 1
13. 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
14. Hands-on Demo $ meteor deploy flyingkittens Deploy App Step 1 Your app should be live at http://flyingkittens.meteor.com.
15. Hands-on Demo $ meteor add mrt:twit Get a Twitter Dev Account Step 2 Go to https://apps.twitter.com
16. Hands-on Demo { "consumer": { "key": ". . .", "secret": ". . ." }, "access_token": { "key": ". . .", "secret": ". . ." } } Private Files (for secure data) Step 2
17. 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
18. Step 2
19. Hands-on Demo Get Mitter#step2 Step 2 $ git checkout tags/step2 -b step2
20. Hands-on Demo <template name="search_box"> <input class="searchBox" type = "text" placeholder="Search the tweets" autofocus="autofocus"/> </template> Adding Search Step 3
21. Hands-on Demo Template.search_box.events({ 'keyup input, click input': function(e, template) {
 … Detect Key Inputs Step 3
22. Step 3
23. Hands-on Demo Get Mitter#step3 Step 2 $ git checkout tags/step3 -b step3
24. Building a Twitter-like Search with Meteor and Appbase Thank You! @siddharthlatest