Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Meteor Talk: Building Mitter
Search
Siddharth Kothari
January 31, 2016
Technology
1
99
Meteor Talk: Building Mitter
Building a Twitter-like search with Meteor and Appbase
Siddharth Kothari
January 31, 2016
Tweet
Share
More Decks by Siddharth Kothari
See All by Siddharth Kothari
Data Streams with Elasticsearch
siddharthlatest
0
130
Appbase.io - Customer Deck
siddharthlatest
0
140
Appbase.io - Investor Deck
siddharthlatest
0
330
Data Streams on ElasticSearch
siddharthlatest
0
160
Building a streaming database service
siddharthlatest
1
220
Appbase - A realtime events-based document store
siddharthlatest
1
810
Scalability Best Practices
siddharthlatest
0
180
Other Decks in Technology
See All in Technology
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
160
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
240
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
390
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
270
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
110
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
RailsConf 2023
tenderlove
30
1.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
The Cult of Friendly URLs
andyhume
79
6.6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Visualization
eitanlees
148
16k
GitHub's CSS Performance
jonrohan
1032
460k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Music & Morning Musume
bryan
46
6.8k
Transcript
Building a Twitter-like Search with Meteor and Appbase Siddharth Kothari
(@siddharthlatest)
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”]
What is Meteor
Hands-on Demo $ curl https://install.meteor.com/ | sh Install Meteor Step
0
Hands-on Demo $ meteor create <app_name> $ cd <app_name> Create
App Step 0 $ meteor
Hands-on Demo $ meteor add appbaseio:appbase $ meteor add manuel:reactivearray
Install Packages $ meteor add mizzao:bootstrap-3 Step 0
Appbase.io JS Library for building realtime feeds and search. Step
1 Create an app from the dashboard
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
Hands-on Demo if (Meteor.isClient) { /* things we do once
*/ var renderedTweets = new ReactiveArray(); var requestObject = {...}; ... Step 1 <app_name>.js
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
Hands-on Demo <app_name>.js /* define all the template helpers */
Template.body.helpers({ tweets: function() { return renderedTweets.list(); } }) Step 1
Step 1
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
Hands-on Demo $ meteor deploy flyingkittens Deploy App Step 1
Your app should be live at http://flyingkittens.meteor.com.
Hands-on Demo $ meteor add mrt:twit Get a Twitter Dev
Account Step 2 Go to https://apps.twitter.com
Hands-on Demo { "consumer": { "key": ". . .", "secret":
". . ." }, "access_token": { "key": ". . .", "secret": ". . ." } } Private Files (for secure data) Step 2
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
Step 2
Hands-on Demo Get Mitter#step2 Step 2 $ git checkout tags/step2
-b step2
Hands-on Demo <template name="search_box"> <input class="searchBox" type = "text" placeholder="Search
the tweets" autofocus="autofocus"/> </template> Adding Search Step 3
Hands-on Demo Template.search_box.events({ 'keyup input, click input': function(e, template) {
… Detect Key Inputs Step 3
Step 3
Hands-on Demo Get Mitter#step3 Step 2 $ git checkout tags/step3
-b step3
Building a Twitter-like Search with Meteor and Appbase Thank You!
@siddharthlatest