We would like to introduce you to Salvatore Cordiano. He is a full stack web developer with over 6 years of experience in web, mobile and software development. He recently gave a talk at the Chatbots Milano Conference in Milan and he surprised the audience with his slides. He used PubNub to allow the audience to interact in real time with the presentation through a Telegram bot and he takes control of slides using this bot. To make his presentation he used reveal.js, the most famous HTML presentation framework. He wrote a plugin that is listed on reveal.js plugin page to control a reveal.js presentation remotely using a webpage or a Telegram bot. Salvatore kindly offered to write about how he created the app.
Since the beginning of my professional career, I’ve attended many conferences, presentations and talks. Generally, speakers used to make their presentations using PowerPoint or Keynote, but now, some programmers are doing it with HTML code. Using HTML, you can make presentations rich with functionality, similar to that of a web or mobile app. This is very cool.
In the last few years, every time I did a public speech, I tried to do presentations unlike the traditional way. With that, I discovered reveal.js, a framework for creating awesome presentations using HTML and JavaScript. Reveal.js is very powerful: it supports markdown content, nested slides, PDF export and it allows to be extended by developing plugins.
I wrote a very simple reveal.js plugin to remote control slides using PubNub publish-subscribe API. It allows you to advance through your slides, for example, from a webpage, a Telegram bot or a mobile app. This is very useful for me when speaking.
Let’s assume both Node.js and Grunt are already installed on your machine, so we should execute the following list of commands.
git clone https://github.com/hakimel/reveal.js.git cd reveal.js npm install grunt serve
Well, to view the presentation we can navigate using a web browser to http://localhost:8000.
Download from Clicking here pubnub-remote-control.js
and copy it into the plugin folder of your reveal.js presentation, i.e. plugin
.
Next, open index.html
with a text editor and find reveal.js initialization block. Add the plugins to the dependencies in your presentation, as below.
Reveal.initialize({ // ... dependencies: [ // ... { src: 'https://cdn.pubnub.com/pubnub-4.4.0.min.js', async: true }, { src: 'plugin/pubnub-remote-control.js', async: true }, // ... ] });
Now, we must configure our plugin. The pubnub-remote-control.js
plugin has several parameters that you can set for your presentation by providing an pubnubRemoteControl
option in the reveal.js initialization options.
To configure our plugin replace {SUBSCRIBE KEY}
and {PUBLISH KEY}
with PubNub valid keys.
Reveal.initialize({ // ... pubnubRemoteControl: { subscribeKey: '{SUBSCRIBE KEY}', // PubNub subscribe key, publishKey: '{PUBLISH KEY}', // PubNub publish key }, // ... });
To test our plugin we can use PubNub debug console using the following configuration:
Publish Channel: 'input' Subscribe Channel: 'output'
While we are displaying our presentation, we can interact with it sending a message like this:
{'button': 'left'}
or
{'button': 'right'}
Inside the GitHub project is also available a client to interact with slide using a webpage or a Telegram bot.
A demo of the previous clients for this sample presentation is accessible from:
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...
Michael Carroll
How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.
Michael Carroll
How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.
Michael Carroll