<div align="right"> <a href="http://finovate.com/videos/finovateeurope-2016-crealogix/"><img src="{att_thumb}finovate-logo-mobile.png"></a> <a href="http://finovate.com/videos/finovateeurope-2016-crealogix/"><img src="{att_thumb}finovate_2016_spreadsheet.png"></a> </div>At the beginning of the year, we worked on an interesting project that dipped into IOT (Internet of Things). The project was to create use cases for Crealogix's banking APIs in the real world. Concretely, we wanted to show how a customer could use these APIs in their own workflows. The use cases were to provide proof of the promise of flexibility and integrability offered by well-designed APIs. <a href="http://finovate.com/videos/finovateeurope-2016-crealogix/">Watch 7--minute video of the presentation</a> <clear><h>The Use Cases</h> <h level="3">Football Club Treasurer</h> <img attachment="app_activity_stream.png" align="right" caption="Activity Stream in the App">The first use case is for the treasurer of a local football club. The treasurer wants to be notified whenever an annual club fee is transferred from a member. The club currently uses a Google Spreadsheet to track everything, but it's updated manually. It would be really nice if the banking API could connected---via some scripting "glue"---to update the spreadsheet directly, without user intervention. The treasurer would just see the most current numbers whenever he opened the spreadsheet. The spreadsheet is in addition to the up-to-date view of payments in the banking app. The information is also available there, but not necessarily in the form that he or she would like. Linking automatically to the spreadsheet is the added value. <clear><h level="3">Chore & Goal Tracker</h> <img attachment="red_lamp.png" align="left" caption="Red Lamp!"><img attachment="green_lamp.png" align="right" caption="Green Lamp!">Imagine a family with a young son who wants to buy a drone. He would have to earn it by doing chores. Instead of tracking this manually, the boy's chores would be tabulated automatically, moving money from the parents' account to his own as he did chores. Additionally, a lamp in the boy's room would glow a color indicating how close he was to his goal. The parents wanted to track the boy's progress in a spreadsheet, tracking the transfers as they would have had they not had any APIs. The idea is to provided added value to the boy, who can record his chores by pressing a button and see his progress by looking at a lamp's color. The parents get to stay in their comfort zone, working with a spreadsheet as usual, but having the data automatically entered in the spreadsheet. <h>The Plan</h> It's a bit of a stretch, but it sufficed to ground the relatively abstract concept of banking APIs in an example that non-technical people could follow. So we needed to pull quite a few things together to implement these scenarios. <ul> A lamp that can be controlled via API A button that can trigger an API A spreadsheet accessibly via API An API that can transfer money between accounts "Glue" logic that binds these APIs together </ul> <h>The Lamp</h> <img attachment="lifx-color-1000-a19-b22-solo-front-view_2.jpg" align="left" caption="Lifx Bulb"><img attachment="lifxapp.png" align="right" caption="Lifx Smartphone App"> We looked at two lamps: <div style="margin-left: 195px"><ul> <a href="http://www2.meethue.com/en-us/">Philips Hue</a> <a href="http://www.lifx.com">Lifx</a> </ul></div> Either of these---just judging from their websites---would be sufficient to utterly and completely change our lives. The Hue looked like it was going to turn us into musicians, so we went with Lifx, which only threatened to give us horn-rimmed glasses and a beard (and probably skinny jeans and Chuck Taylor knockoffs). Yeah, we think the marketing for what is, essentially, <i>a light-bulb</i>, is just a touch overblown. Still, you can change the color of the light bulb with a SmartPhone app, or control it via API (which is what we wanted to do). <clear><h>The Button</h> The button sounds simple. You'd think that, in 2016, these things would be as ubiquitous as AOL CDs were in the 1990s. You'd be wrong. <img attachment="flic_usage.png" align="right" caption="Flic Functionality">There's a KickStarter project called <a href="https://flic.io">Flic</a> that purports to have buttons that send signals over a wireless connection. They cost about CHF20. Though we ordered some, we never saw any because of manufacturing problems. If you thought the hype and marketing for a light bulb were overblown, then you're sure to enjoy how Flic presents a <i>button</i>. We quickly moved along a parallel track to get buttons that can be pressed in real life rather than just viewed from several different angles and in several different colors online. <img attachment="cottonelle.jpg" align="left" caption="Amazon Dash Button">Amazon has what they have called "Dash" buttons that customers can press to add predefined orders to their one-click shopping lists. The buttons are bound to certain household products that you tend to purchase cyclically: toilet paper, baby wipes, etc. They sell them dirt-cheap---$5---but only to Amazon Prime customers---and only to customers in the U.S. Luckily, we knew someone in the States willing to let us use his Amazon Prime account to deliver them, naturally only to a domestic address, from which they would have to be forwarded to us here in Switzerland. That we couldn't use them to order toilet paper in the States didn't bother us---we were planning to hack them anyway. These buttons showed up after a long journey and we started trapping them in our own mini-network so that we could capture the signal they send and interpret it as a trigger. This was not ground-breaking stuff, but we really wanted the demonstrator to be able to press a physical button on stage to trigger the API that would cascade other APIs and so on. Of course we could have just hacked the whole thing so that someone presses a button on a screen somewhere---and we programmed this as a backup plan---but the physicality of pressing a button was the part of the demonstration that was intended to ground the whole idea for non-technical users.<fn> <h>The Spreadsheet</h> <img attachment="google_docs_club.png" align="left" caption="Football Club Payment Spreadsheet"><img attachment="google_docs.png" align="right" caption="Drone Payment Spreadsheet">If you're going to use an API to modify a spreadsheet, then that spreadsheet has to be available online somewhere. The spreadsheet application in Google Docs is a good candidate. The API allows you to add or modify existing data, but that's pretty much it. When you make changes, they show up immediately, with no ceremony. That, unfortunately, doesn't make for a very nice-looking demo. Google Docs also offers a Javascript-like scripting language that let's you do more. We wanted to not only insert rows, we wanted charts to automatically update and move down the page to accommodate the new row. All animated, thank you very much. This took a couple pages of scripting and a good amount of time. It's also no longer a solution that an everyday user is likely to make themselves. And, even though we pushed as hard as we could, we also didn't get everything we wanted. The animation is very jerky (watch the video linked above) but gets the job done. <clear><h>The Glue</h> <img attachment="app_connector_selection.png" align="right" caption="Connection Selection in the App">So we've got a bunch of pieces that are all capable of communicating in very similar ways. The final step is to glue everything together with a bit of script. There are several services available online, like IFTTT---If This Then That---that allow you to code simple logic to connect signals to actions. In our system, we had the following signals: <ul> Transfer was made to a bank account Button was pressed </ul> and the following actions: <ul> Insert data into Google Spreadsheet Set color of lamp </ul> <clear><h>The Crealogix API and UI</h> <img attachment="crealogix_app_2_things.png" align="left" caption="Bank 2 Things"><img attachment="app_post_transfer.png" align="right" caption="Small Transfer in the Activity Stream"><img attachment="app_login.png" align="right" caption="Logging in to the App">So we're going to betray a tiny secret here. Although the product demonstrated on-stage did actually do what it said, it didn't do it using the Crealogix API to actually transfer money. That's the part that we were actually selling and it's the part we ended up faking/mocking out because the actual transfer is beside the point. Setting up bank accounts is not so easy, and the banks take umbrage at creating them for fake purposes. Crealogix could have let us use fake testing accounts, but even that would have been more work than it was worth: if we're already faking, why not just fake in the easiest way possible by skipping the API call to Crealogix and only updating the spreadsheet? Likewise, the entire UI that we included in the product was mocked up to include only the functionality required by the demonstration. You can see an example here---of the login screen---but other screens are linked throughout this article. Likewise, the <i>Bank2Things</i> screen shown above and to the left is a mockup. <h>Wrapup</h> So what did Encodo actually contribute? <ul> We used the Crealogix UX and VSG to mock up all of the app screens that you seen linked in this article. We did all of the animation and logic and styling. We built two Google Spreadsheets and hooked them up to everything else We hooked up the Lifx lamp API into our system We hacked the Amazon Dash buttons to communicate in our own network instead of beaming home to the mothership We built a web site to handle any mocking/faking that needed to be done for the demo and through which the devices communicated We provided a VM (Virtual Machine) on which everything ran (other than the Google Spreadsheets) </ul> As last year---when we helped Crealogix create the prototype for their <a href="http://finovate.com/videos/finovateeurope-2015-crealogix/">BankClip for Finovate 2015</a>---we had a lot of fun investigating all of these cutting-edge technologies and putting together a custom solution in time for Finovate 2016. <hr> <ft>As it turns out, if you watch the <a href="http://finovate.com/videos/finovateeurope-2016-crealogix/">7--minute video of the presentation</a>, nowhere do you actually see a button. Maybe they could see them from the audience.</ft>