This document summarizes a hackathon event focused on building a realtime voting web application using PubNub and other technologies. It provides an agenda that includes using PubNub to publish and stream data, working with realtime data visualization libraries, integrating Twitter and Facebook APIs, and hosting the application on a local server. The document outlines the key components of the PubNub platform and teaches how to set up a basic publish/subscribe system to power a realtime poll using JavaScript.

1. SPECTRA Hackathon 7/23/16
Realtime Voting
web app w/
PubNub +
@lizziepika

2. Bryan,
mentor
@lizziepika

3. What you will Do/Learn Today
● Publish data w/ PubNub JS SDK
● JavaScript
● Realtime Data Visualization
● Twitter widget
● Facebook API + local servers
@lizziepika

4. What is PubNub?
● Realtime Global Data Stream Network
(DSN)
● Provides back-end for many apps
● SAAS
● Supports > 70 SDKs
@lizziepika

5. What can be streamed?
● Data
● no images or other media
● On other hand….
● YouTube = continuous streaming
media
● No downloading@lizziepika

6. Ways to Communicate
● Unicast
● Broadcast
● Multicast
@lizziepika

7. Data Delivery Types
● Content Delivery Network (CDN)
● Data Stream Network (DSN)
● Both send data based on location
● CDN = static, DSN = realtime data
@lizziepika

8. Publish/Subscribe
● Senders characterize messages into classes
● Don’t know receiver
● Indirect receivers = subscribers
● Subscribers choose
● Common in software architecture
@lizziepika

9. PubNub pub/sub
● Message contains
● Channel
● Data payload
● Pub. client channel sub. client
@lizziepika

10. PubNub use cases
● Chat
● Multi-player games
● Geolocation
● Financial data
● Collaborative developer tools
● Internet of Things (IoT)
@lizziepika

11. History API
● Retrieve old data
● Populate chat, chart
onload
@lizziepika

12. EON.js data visualization
● Realtime maps
@lizziepika

13. EON realtime chart
@lizziepika

14. Twitter Stream
● Realtime stream of tweets
● Max. 50 tweets/second.

15. Take it further
● Other platforms ie.
●iOS
●Android
●…
@lizziepika

16. Workshop
@lizziepika

17. Setup
● Git clone repo || download zip
● Incomplete + full versions
● Some HTML, CSS done for you
● https://github.com/pubnub/javascript-realtime-
voting-app-workshop
@lizziepika

18. JS SDK
●Install from CDN
● <script src=”http//cdn.pubnub.com/pubnub-3.x.x.js">
</script>
● At the moment, 3.4.4
● OR Install via Node.JS
● $ npm install pubnub
@lizziepika

19. Required Variables
● var pub_key = "your-pub-key";
● var sub_key = "your-sub-key";
● var chan = "Spectra";
@lizziepika

20. Poll Options + Votes
● Dictionary:
● key = name
● value = count
var pollOptions = {
eon: {
"Mushu": 0, "Stephen": 0,"Tomomi": 0,"Erlich":0, “Ian”:0
}
};
@lizziepika

21. Create instance of object
● init() creates instance of PubNub object
● Need this to invoke PubNub operations,
methods
var pb = PUBNUB.init({
publish_key: pub_key,
subscribe_key: sub_key
});
@lizziepika

22. HTML buttons via JS
● In function setupButtons()
● Create array of buttons
function setupButtons() {
for(key in pollOptions.eon) {
var b = document.createElement('BUTTON');
b.setAttribute('id', 'button' + key);
b.setAttribute('width', '30%');
b.innerHTML = key;
@lizziepika

23. Button actions
b.addEventListener("click", voteUp(key));
document.body.appendChild(b);
} //for
} //setup
@lizziepika

24. History
function initOlderVotes() {
pb.history({
channel: chan,
count:1,
@lizziepika

25. History Callback
callback: function(msg) {
var vote_history = msg[0];
if(vote_history.length) {
pollOptions=vote_history[0];
} //if
} //callback
}); //history

26. Publish method
function publishResults() {
pb.publish({
channel: chan,
message: pollOptions,
@lizziepika

27. Callback in Publish
callback: function(m) {
console.log(m);
}
});
} //publishResults()
@lizziepika

28. Actual Voting!
function voteUp(pollKey) {
return function() {
pollOptions.eon[pollKey] += 1;
publishResults();
} //return closure
} //voteUp

29. Draw the chart
function drawChart() {
eon.chart({
channel: chan,
history: true,
pubnub: pb,
generate: {
bindto: '#chart',
@lizziepika

30. Decorate data with D3
data: {
labels: true,
type: 'bar',
colors: {
'Mushu': '#cc6699',
'Hamilton': '#0099cc',
}, //colors
@lizziepika

31. Decorate bars
}, //data
bar: {
width: {
ratio: 0.5
} //width
}, //bar
tooltip: {
show: false
@lizziepika

32. Generate your own API keys
● http://www.pubnub.com
● ->Get started
● ->Enter new app name
● -> create new app
● Get keys
● ->Enable Storage and Playback
●(history)
@lizziepika

33. @lizziepika

34. Twitter Script
@lizziepika
Uncomment this line in HTML:
<script type="text/javascript" async
src="https://platform.twitter.com/widget
s.js"></script>

35. Web intent
● Intent = compose + post Tweet from webpage
● Text
● hashtags
● via
@lizziepika

36. Link to tweet
<a
href="https://twitter.com/intent/tweet?text=makin
g+a+realtime+web+voting+app+with+@pubnub+
at+@sospectra+at+@youtube&hashtags=sospect
ra&via=lizziepika">Tweet</a>
@lizziepika

37. @lizziepika

38. Facebook API
@lizziepika

39. Get Facebook app Keys
● Go to My apps then Add a new app
● Create new app, get keys
● Uncomment in your opening HTML tag:
...lang="pt"
xmlns:fb="http://www.facebook.com/2008/fbml">
@lizziepika

40. init. Facebook API
After drawChart() in JS file...
● window.fbAsyncInit = function() {
● FB.init({
● appId : 'your-app-id',
● xfbml : true,
● version : 'v2.7'
● });
● };
@lizziepika

41. Share + Like buttons
Uncomment, but find the difference
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
@lizziepika

42. Auto post status
function myFacebookLogin() {
FB.login(function(){
FB.api('/me/feed', 'post', {message: 'Hello, world!
Having fun building a realtime voting app with
#PubNub and #Twitter and #Facebook APIs
#sospectra'});
}, {scope: 'publish_actions'});
}
@lizziepika

43. FB API in HTML file
<button onclick="myFacebookLogin()">Post prev-composed
status</button>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
@lizziepika

44. Try running…?
To run with Facebook API...
@lizziepika

45. Local Server
Terminal -> $python -m
SimpleHTTPServer
Visit http://localhost:8000/ (or
the # it says)
@lizziepika

46. Try running again…
Post a status….
@lizziepika

47. To kill server: ctrl-c
sudo lsof -i :8000
sudo kill -9 PID
@lizziepika

48. Images
● https://66.media.tumblr.com/9c2fa31fc5b7a8fa09d350616c114bfe/tumblr_o05psk8cPL1qzxjq9o1_500.gif
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj1s8OqzvPNAhUO02MKHZBuA_kQjRwIBw&url=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F129619295496727517%2F&bvm=bv.127178174,d.cGc&psig=AFQjCNG4i436VVJIwpzjjY_RqKrYm1SyuA&ust=1468608274134481
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=&url=http%3A%2F%2Fxaharts.org%2Ffunny%2Foctopuss.html&bvm=bv.127178174,d.cGc&psig=AFQjCNG4i436VVJIwpzjjY_RqKrYm1SyuA&ust=1468608274134481
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj6x7rXzvPNAhVE2mMKHX2-DFIQjRwIBw&url=http%3A%2F%2Fwenasanchezedteca.weebly.com%2Fgallery.html&bvm=bv.127178174,d.cGc&psig=AFQjCNH9ILfkSMN9uY9XZKXfSdFSTBiidQ&ust=1468608376519029
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=0ahUKEwj7vpv3zPPNAhVU8mMKHQmJAB0QjRwIBw&url=https%3A%2F%2Fwww.pubnub.com%2Fcompany%2Fpress-releases%2F&psig=AFQjCNFMyJGjnpLglzXgJ9tj7EzY6K3fBg&ust=1468607908252462
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiEz7i3zfPNAhUG7WMKHcSWBjgQjRwIBw&url=https%3A%2F%2Fwww.google.com%2Fsupport%2Fforum%2Fp%2Fyoutube%3Fhl%3Den&bvm=bv.127178174,d.cGc&psig=AFQjCNGGQpl-
QWz7Bwp0pH8VR3GJelxTIA&ust=1468608041067678
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=0ahUKEwjprsX9zvPNAhVCwGMKHe0fCTEQjRwIBw&url=https%3A%2F%2Fwww.pubnub.com%2Fdocs%2Fweb-javascript%2Fdata-streams-publish-and-subscribe&bvm=bv.127178174,d.cGc&psig=AFQjCNEFQyP1FEmrxMjSs51dezTNh-
YkEA&ust=1468608456490572
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjtjpfIz_PNAhVN6GMKHSIlAxEQjRwIBw&url=http%3A%2F%2Fspeedrak.com%2Fblog%2Fwhy-use-a-content-delivery-network-cdn%2F&psig=AFQjCNFg3T8LWw5oTtV8rKj0FoG98nu_ug&ust=1468608605932834
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjXpK270fPNAhUE-mMKHQyNB-gQjRwIBw&url=http%3A%2F%2Fbrianmahoney.ca%2F2015%2F04%2Fthe-ultimate-social-media-guide-part-1%2F&psig=AFQjCNGqhMxt-9vNS7PghVYIBLN2TJ8bpA&ust=1468609124748593
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwi7-ZDJ0fPNAhVK1WMKHZUCBucQjRwIBw&url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dme.lyft.android&bvm=bv.127178174,d.cGc&psig=AFQjCNECpLppbw4kt-
qxXmK6YvJvEF4KbA&ust=1468609152654750
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwi27PCx0vPNAhUKxGMKHbfMB1wQjRwIBw&url=http%3A%2F%2Fgiphy.com%2Fsearch%2Fstephen-king-should-publish-my-check-
book&bvm=bv.127178174,d.cGc&psig=AFQjCNEW7YxePsrmKQsj9Zwhq4nqjeOAaw&ust=1468609345184907
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwi4otrb0vPNAhVW_WMKHRveBy0QjRwIBw&url=http%3A%2F%2Fnomadmystic.com%2Fwp-
content%2Fassets%2Fschoolprojects%2Fcas222%2FdevelopmentMidterm%2F_%2Fimages%2F&bvm=bv.127178174,d.cGc&psig=AFQjCNEENVHwppr3rf_8MjF9dD3ctZDFgw&ust=1468609457471978
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjb_6CM0_PNAhUDz2MKHff4D9YQjRwIBw&url=https%3A%2F%2Fwww.firebase.com%2Fdocs%2Fweb%2Fquickstart.html&bvm=bv.127178174,d.cGc&psig=AFQjCNFenCT1of79js8sN749eP1HNfHBtg&ust=1468609559861537
● https://media2.giphy.com/media/wtHolvfjB1ToI/200_s.gif
● http://dev-wordpress-storage.s3-website-us-west-2.amazonaws.com/wp-content/uploads/let-it-begin-gif.gif
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiIyKXk1_PNAhUT22MKHdtGB5sQjRwIBw&url=http%3A%2F%2Fgiphy.com%2Fsearch%2Fcute-unicorn&bvm=bv.127178174,d.cGc&psig=AFQjCNEdm74JfRwFRy2DtfH2Y6vHcOj2aw&ust=1468610815720270
● https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwj1sJvR2vPNAhUDxWMKHdL4AG0QjRwIBw&url=http%3A%2F%2Fwww.clipartbest.com%2Fairplane-gif&psig=AFQjCNEaFTwCrUcYIyNyd84e0P7weJ5lvQ&ust=1468611586600314
http://www.broadwaybox.com/daily-scoop/15-hamilton-broadway-gifsjust-cause/
https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiAxJKwg_bNAhVGxWMKHdJ6BGwQjRwIBw&url=http%3A%2F%2Fgiphy.com%2Fsearch%2Fdog-running&psig=AFQjCNH6W01A3AQ7eWfL--Aqda6kFFotFA&ust=1468691231691243
http://static.giantbomb.com/uploads/original/0/1371/195121-creatures___hatching_egg.jpg
@lizziepika

49. Images
http://static.fjcdn.com/gifs/How+do+i+computer+i+decided+to+try+my+hands_81418e_4707807.gif
https://uploads.disquscdn.com/images/4bea608a1ed5e0538de0736445d323be10b3e405303968cd01f6116a3f7b711b.gif
http://bridgefordtrust.com/wp-content/uploads/2016/03/YouTube-Subscribe.png
https://media.giphy.com/media/gukffO22XcjcY/giphy.gif
https://a.dilcdn.com/bl/wp-content/uploads/sites/25/2014/10/Rapunzel-Painting-S.gif
http://www.trishtech.com/img_art/youtube_speed_history_0.jpg
https://media.giphy.com/media/26tPd54CXOVnXhipy/giphy.gif
https://media.giphy.com/media/d0NNySHSk3lDi/giphy.gif
https://media.giphy.com/media/xT1XGLSb5E1VjIUw4E/giphy.gif
https://media4.giphy.com/media/l41lQKzFg8T8p7oas/200.gif
https://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3.png
https://media.giphy.com/media/11ekLnmYXtdnj2/giphy.gif
@lizziepika