Workshop given at Spectra Hackathon at YouTube in San Bruno on July 23, 2016.

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