Iteration 1 - Happy days…
If you are familiar with the nuances of the Twitter Search API you’ll know everything needs authenticated access. In Remy’s example he got around this by proxying the calls via a local NodeJS server. I don’t have a Node server so my initial thought was to use the TwtrService Apps Script library to make the calls and host the files on Google Drive (if you are unfamiliar with Google Drive Hosting you can publish a folder with HTML/JS and it’ll render as a webpage … but see the ‘but’ below). This is basically the same recipe for the solution for keeping your official Twitter archive fresh on Google Drive. For this solution I could have created a Google Apps Script Web App (Ref: read more) to expose the data but as we were planning on multiple walls and with Apps Script quotas to bear in mind it looked better to use Remy’s debug option which reads copies of the data. Actually getting Remy’s code to work hosted on Google Drive takes very little modification (I’m claiming 4 lines), to write the data to Drive takes a bit more.
The result of this iteration can be seen at:
… and all the files for this are in this Google Drive folder:
Before I go into the details of setting this up there is a ‘but’. I initially did all this work in August in advance of our event planning to publish my work for others to use. But then Google announced they were Deprecating web hosting support in Google Drive. As per Google policy this means web hosting will be available until August 31st, 2016 so if you have an event running before then here’s how you can set this up.
- Create a new folder in Google Drive and note the folder id from the url:
- Download my fork of the Twitterwall, extract the .zip archive
- Open config.js and edit the baseUrl so that it ends with your folder ID from step 1 Important: keep the rest of the baseUrl e.g. baseUrl: 'https://googledrive.com/host/YOUR-FOLDER-ID/' and your search term.
- Upload all the folders and files to the Google Drive folder you created maintaining the structure
At this point visiting your baseUrl should render the wall, next setting up the Twitter data collection.
- Open this Apps Script file and File > Make a copy
- In your copy edit the FOLDERID in the script to match the folder id of the hosted twitterwall files (part 1, step 1).
- If you’ve never used TAGS/TwtrService enable Twitter API access via this web app.
- Back in the Apps Script Editor window Run > getSearchResults and authenticate to test.
- To setup regular collection of data from the Script Editor select Resources > Current project’s triggers and add a time-driven trigger to updated every 5 minutes:
Now every 5 minutes this script will get new data from the Twitter Search API and dump in the the /history/data folder. Also every 5 minutes Remy's script will check this folder for new data and if it's there render the tweets. You can also modify the index.html file in your folder to add your schedule and notices as per Remy’s README.md.
If you are not familiar with Google Apps Script you are probably wondering ‘what magic is this’ and you might want to have a wee peek at the documentation to see what else is possible.
In my next post I’ll explain how we can enhance the Twitterwall to use a Google Sheet for the notice and schedule information as well as how this application can be run without Google Drive web hosting. In the meantime please use the comments if you get stuck or need part of this explained more.