Published by Marco on 11. Mar 2016 08:29:05
------------------------------------------------------------------------


"[image]" 
"[image]" 

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.

"Watch 7--minute video of the presentation"


[The Use Cases]

[Football Club Treasurer]

[image]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.

[Chore & Goal Tracker]

[image][image]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.

[The Plan]

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.

  * 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

[The Lamp]

[image][image]
We looked at two lamps:

  * "Philips Hue" 
  * "Lifx" 

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, a light-bulb, 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).

[The Button]

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.

[image]There's a KickStarter project called "Flic"  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 button.

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.

[image]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. [1]

[The Spreadsheet]

[image][image]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.

[The Glue]

[image]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:

  * Transfer was made to a bank account
  * Button was pressed

and the following actions:

  * Insert data into Google Spreadsheet
  * Set color of lamp

[The Crealogix API and UI]

[image][image][image]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 Bank2Things screen shown above and to the left is a
mockup.

[Wrapup]

So what did Encodo actually contribute?

  * 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)

As last year -- when we helped Crealogix create the prototype for their
"BankClip for Finovate 2015"
 -- we had a lot of
fun investigating all of these cutting-edge technologies and putting together a
custom solution in time for Finovate 2016.

--------------------------------------------------------------------------------


[1] As it turns out, if you watch the "7--minute video of the presentation"
    , nowhere do you
    actually see a button. Maybe they could see them from the audience.