Controlling PowerPoint Slides with Alexa and WebSocket

In the previous post, I have created the NodeJS app with Ngrok (http://ngrok.com/) to control the PowerPoint slides with Alexa.

Controlling PowerPoint SlideShow with Alexa

In this post, let’s use the WebSocket, which I think is more elegant solution to control the PowerPoint slideshow.

Here is the high level diagram.

WebSocket Server

The websocket server will relay the message/command from the Alexa Cloud (Lambda) to the PPTController (acts as a websocket client) as you can see in the above diagram. The PPTController will then interpret the command to control the PowerPoint slide.

I created the ‘heart beat’ function to make sure the Heroku (http://heroku.com) instance (free version) is not getting idle after sometime when is connected to the client.

setInterval(() => {
 wss.clients.forEach((client) => {
 client.send(new Date().toTimeString());
 });
}, 1000);

Here is the complete source code.

Deploy the Server to Heroku

• Install the libraries:

npm init
npm install --save express ws

• Create a file called Procfile and put the below line item. This is to tell Heroku to execute index.js on startup.

web: node index.js

• In the end, your folders and files structure should be similar like this.

• Create a free account on Heroku and execute the following commands to deploy the server to Heroku cloud.

git init
git add .
git commit --message 'Hello'
heroku create
git push heroku master

• Take note of the Heroku URL: https://<yourURL>.herokuapp.com.
  For my case is https://fdwebsocket.herokuapp.com/. We will be using this URL information in Lambda later on.

Creating the Lambda Function

• Follow my post here to create the lambda function under section “Setting Up a Lambda Function Using Amazon Web Services”:

Alexa, Ask Microbit to Turn LED Light

• Once you created the Lambda function. Take note of the Lambda ARN (Amazon Resource Name) which you can find at the top of the menu.

• Now go to Alexa Skills Kit Developer Console (https://developer.amazon.com/alexa/), set the Service Endpoint Type to AWS Lambda ARN.
  Take note of the Skill ID and under Default Region, enter the Lambda ARN.

• Create a folder and type the following commands to install the libraries:

npm init
npm install alexa-sdk lambda-log ws --save

• Copy the below source code index.js to that folder and replace the APP_ID with your Alexa Skills ID.
• Also update websocketserverurl with your WebSocket cloud (Heroku) URL. For websocket we need to use wss:// (secure websocket) instead of https://.
  For my case is wss://fdwebsocket.herokuapp.com/.

• Zip all source codes:

• Upload the .zip file (bot75.zip) to Lambda and click Save.

PowerPoint Controller (WebSocket Client)

The last piece we need to create is the websocket client that has the function to control the slideshow.

Create a folder and install the following libraries:

npm install --save slideshow ws

Create a file called clientPPTController.js and copy the code below.

Replace the wss URL with the websocket server address.

const ws = new WebSocket("wss://fdwebsocket.herokuapp.com/");

Also replace the pptfilename with your PowerPoint file. The file should be in the same folder as clientPPTController.js.

let pptfilename = 'AlexaPPT.pptx';

Run the WebSocket Client

Open Windows command prompt, go to that folder and run the below command

node clientPPTController.js

Once you have triggered that command, the PowerPoint file will be opened and the program will start pinging the websocket server. If you don’t see that, check your webserver setting and make sure it is successfully deployed to Heroku.

And now you are ready to test with Alexa simulator or the Echo device.

That’s all. It is very easy to configure Alexa with WebSocket and you don’t need to install any 3rd party software (like Ngrok) to control PowerPoint slideshow or anything else you wish.