BlockVigil Developer Jam #2 Updates

Anomit Ghosh
BlockVigil
Published in
6 min readMar 2, 2020
Seamless integration of Ethereum events with Airtable entries. Achieved by EthVigil webhooks that trigger a Zapier zap.

This post continues from the last one where we laid down our approach to coding a dynamic, reactive TODO app on Ethereum via EthVigil API gateway services.

Developer Jam #1: A recap

The agenda of this series of developer jams is to take a collaborative, problem-solving approach to building an app that would follow the traditional web application paradigm of

  • (C)reate
  • (R)etrieve
  • (U)pdate
  • (D)elete

i.e. a CRUD application, but running on a programmable blockchain, Ethereum in this case. All of this, with a dynamic UI that should change state according to transactions being confirmed and events being emitted by the smart contract.

In our first session, we implemented the parts related to

  • creation of a new note
  • retrieving notes stored on the contract
  • deleting notes stored on the contract

The above actions were coded by calling HTTP GET and POST from javascript functions on EthVigil API endpoints corresponding to the smart contract functions: addTodo , removeTodo , getAllTodo and getTodoById .

The create and delete actions reactively update the UI only after receiving websocket updates corresponding to the events

  • TodoItemAdded
  • TodoItemRemoved

Developer Jam #2: Finishing the good work

We had a major feature pending implementation: Toggle a TODO item as `done` or `not done`.

We also decided to add a demonstration of integration with a third party service, Airtable in this example. This would be achieved by

* pushing the TodoItemAdded event payload to a Zapier webhook listener

* that would in turn create a new record entry in an Airtable base

1. Toggle status of a TODO item

The storage structure of a TODO item in the smart contract holds the status of the note as `done` or `not done`

struct TodoItem {
uint256 id;
string note;
bool status;
}

When status == true , the note is treated as done, else it is not. Simple.

The Solidity smart contract function corresponding to the toggle feature is

function toggleTodo(uint256 itemId) public {
items[itemId].status = !items[itemId].status;
emit TodoItemUpdated(itemId, items[itemId].status);
}

As you can observe, it emits a TodoItemUpdated event with the itemId and the toggled items[itemId].status .

1(a). Handle the click on…

the checkbox next to the TODO item and send out an API call totoggleTodo()

Check the <label class=”tick js-tick”> element that corresponds to the circle on which you will click to get a toggle functionality

Each <li> element inside the unordered list <ul> has the following structure

  • An <input type="checkbox" and a tick next to it
  • The actual text of the TODO item
  • A delete buton

The CSS theme in use automatically renders a list item as struck through and checked once you add the CSS class: done to the <li> element. Observe the completed elements in the above example: <li class="todo-item done" ...>

Recall, in Part 1, we added a click handler on the parent <li> element for handling the click on the delete button and wrote the code

  • to check whether the delete button indeed was clicked
  • then send a call to removeTodo() via the EthVigil API
  • wait for the websocket update on TodoItemRemoved event to come through and update the UI accordingly by filtering the todoItems array in javascript.

So we extend the handleListClick event handler to now ensure the checkbox click is handled and transmitted to the smart contract

1(b). Update the UI after receiving websocket confirmation of the event `TodoItemUpdated`

We extended the websocket payload store subscriber to

  • handle a new event payload with the event name TodoItemUpdated
  • change the status of the TODO item in the todoItems array to true (this is achieved with a local copy-and-update on the array. This causes the Svelte rendering logic to be re-triggered.
  • Change the rendering logic written in Svelte to account for a status == true case for these TODO items and in such cases, add a CSS class done to the <li> elements
In wsTxStore.subscribe() callback, we set the `checked` field in the updated TODO item by index to the toggled value as served by the event emission

Notice we check for the condition {#if !item.checked} (this is from the Svelte template syntax, do check out their docs and get to learning about their powerful approach to reactive javascript programming)

… and render a different <li> block in its entirety. We would have liked to only put the opening definition of the <li>block against the {#if} conditional, but unfortunately we were limited by Svelte updates requiring the entire element block to be defined.

2. Integration with Airtable

This was definitely a piece of cake requiring almost no code to be written.

  • In the next step inside the Zapier builder interface, choose Airtable from the list of apps and sign in to give permissions to Zapier to modify Airtable entries. Choose the base and the table where you want to create these new records.
  • Then from the event data payload sample chosen in step 1, go ahead and use the note field in the event data to create a new entry in Airtable.

And Voila! You have a seamless integration enabled from your TODO app to automatically add records to Airtable.

Further work and enhancements

  • There should be a transition effect or at least a marker on the list element on which a toggle action has been recorded, and lock it against further toggling until the previous update comes through.
  • There should be a way to update the text in the note of a TODO item.

There are surely more enhancements and bug fixes that would have skipped our attention.

Interested in learning more?

There are more such meetups lined up in the city of Bangalore 🇮🇳 and we would love to see you take part in one. The use cases will progressively get more RealWorldy™️

If you wish to get started right away, go ahead and sign up on our platform at https://beta.ethvigil.com

Feel free to go through our tutorials as well as docs at https://ethvigil.com/docs

Join our discord chat room if you wish to have your queries answered right away, or just have a discussion with our devs.

If you are willing to discover what happens under the hood of the Ethereum blockchain, we have a live-loading, interactive tutorial that will help you on the journey. Do check it out at https://tutorials.ethvigil.com.

Feedback/criticism/appreciation? We would be happy to hear from you!

Email us hello [at] blockvigil[dot]com

--

--