Inspiration

The inspiration for TweetMySlides originally came from a tweet by Stewart Brand:

"Slide deck as Tweet thread!"

I liked the idea of using Twitter to share a presentation, but the mechanics of taking screenshots of each slide, then uploading each one to Twitter and making sure each reply was properly linked to the previous one seemed like more hassle than it was worth.

So I started thinking about how the process could be automated to make life easier, and decided it would make for an interesting side-project. The technologies involved were also a good match for the work I'm doing on a SaaS app called Plumage.

Plumage is an innovative application for creating and publishing digital signage, leveraging the power of PowerPoint and Office 365. Plumage is currently in development.

What it does

TweetMySlides works as either a standalone website or as an integrated add-in for PowerPoint (desktop or Office 365).

In standalone mode the user chooses a PowerPoint file to upload, whereas as an add-in, it uses the currently opened presentation.

Once the presentation is uploaded to the backend API, the server splits it into individual slides then generates images for each one, as well as extracting any text and notes. A response containing this information is then returned to the client, which uses it to show a list of each slide image and the associated text.

The user can then edit the text for any slide, and choose to use the text extracted from the slide, or the slides notes, or just start from scratch. They can also choose text to add to the start or end of each tweet (such as the number of the slide / total number of slides, or a #hashtag).

Once they're happy, they submit their changes. The next step is to authorize the app to have access to their Twitter account, so it can create tweets on their behalf.

After they've authorized the app with Twitter, the server then generates a tweet for each slide, using the image and the text. Each tweet is a reply to the previous, which means they show up as a linked 'thread' inside of Twitter.

When that's finished, the resulting tweets are previewed to the user so they can then view them on Twitter in turn, and share the link with their audience, or they can choose to start again if they wish.

How I built it

Front-end

The front-end uses Vue 2, and is built with Webpack. I used Bulma as a CSS framework (similar to Bootstrap). I started using Office Fabric for styling the Office add-in, but ran out of time so had to abandon that for now.

Back-end

The back-end was a chance for me to investigate a new technology - Azure Functions. They seemed like a good fit for the app as I didn't want to worry about scaling or paying for a server that wasn't being used much initially. The images and some data is stored using Azure Blob Storage. And it uses the Twitter API of course.

There is a full list of attributions on the website on the About page.

Challenges I ran into

The biggest challenge I ran into was trying to get Twitter authorization working inside the Office add-in.

Twitter does a weird thing on the webpage you visit to allow your application to access Twitter on your behalf, and returns a 403 HTTP status for the page.

And from what I can work out, if the Office add-in receives a 403 result for a page you try to navigate to, then it shows an error message and forces you to reload the add-in.

This makes it impossible to authenticate the usual way from the add-in, which would be to launch a pop-up dialog which redirects to the Twitter auth page, and then closes itself once the user has authorized the app.

I detailed this in a question on StackOverflow, but am yet to receive any response on it from the Office team unfortunately.

To work around this issue, I've implemented Twitter PIN Code authorization instead, which opens the Twitter auth page in a new browser window outside of the Office add-in. The user then receives a 7 digit PIN Code that they can paste into a form back in the add-in, and submit that to the server which completes the authorization process and generates a token for the user.

It's a little clunkier than it should be, but at least it works! The auth works as normal in the web app version.

Accomplishments that I'm proud of

Completing the hackathon in time!

Getting the application to generate images and extract text from uploaded slides was a big milestone, as was generating the first tweets.

Additionally, working around issues like the Twitter auth problem was satisfying.

Overall, the best part was the first time the I used the application end-to-end and it worked without crashing!

What I learned

I learned a lot about working with Azure Functions and some of the other Azure APIs like table storage which I'd not used before. It's nice to be a completely Cloud based application. I found Pluralsight a good resource for in-depth learning about Azure.

I also learned more than I wanted to about the Twitter API and OAuth in general...

What's next for TweetMySlides

The application still needs a bit of polishing and more detailed information on the homepage about what it does and why people might be interested in it.

Then once any bugs are ironed out after usage by some early adopters I'll submit it to ProductHunt and some other sites like that to get the word out about it, and hopefully it'll start getting some usage.

Then I'll look into re-styling the Office add-in using Fabric to make it more 'Officey' feeling.

Built With

Share this project:
×

Updates