BlockVigil Developer Jam #2 Updates
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.
If you have not read that yet, please do so for your better understanding. Regardless, we have summarized the first session to help you recap.
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()
Each <li>
element inside the unordered list <ul>
has the following structure
- An
<input type="checkbox"
and atick
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 thetodoItems
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 totrue
(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 classdone
to the<li>
elements
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.
- Create a new “zap” on Zapier and create a webhook that will “catch” a POST request.
Check out this link for more Zapier specific details on how to create a webhook listener
- This should create a unique URL for the webhook listener. Copy the URL and enter it in the webhook integrations in your EthVigil dashboard.
Read: EthVigil Docs: Adding webhook integrations
- Add a test TODO note from the app frontend or EthVigil web UI to catch a sample payload. So you can choose the latest Hook sample as the event data to be parsed.
- 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