How to build a cryptocurrency dashboard in 10 minutes using ToolJet

Sherfin Shamsudeen — Thu, 18 Nov 2021 11:02:19 +0000

In this tutorial, I will walk you through building a cryptocurrency dashboard in less than 10 minutes, using the ToolJet platform. ToolJet is a free, open-source, low-code platform that allows you to quickly build tools(https://github.com/ToolJet/ToolJet).

Here is the final application that you would have at the end of this tutorial. (This dashboard was created with desktop screens in mind, please make sure you open it from your desktop).

Step 1: Get ToolJet
You can run ToolJet locally or you can create a free ToolJet cloud account (which will be the easiest way to get started).

Step 2: Create an application

Step 2: Create a query to list the major cryptocurrencies
I'm using the API provided by coinstats.app, feel free to use any other API you'd like.
API-URL:
https://api.coinstats.app/public/v1/coins?skip=0&limit=100&currency=USD
And I'm calling it coinList

And make the query run whenever the application is opened:

Step 3: Add a table and list all the coins on it

The data returned by the query can be fed into the table using its inspector panel which opens up when you click on the table component's handle. Make sure that you've run the query by pressing the play button next to its name, otherwise, the query's data wont be available.

Step 4: Create a query to fetch historical price data
The table row which was last clicked by the user is available in the global variable components as components.table1.selectedRow. Therefore the id of the coin that the user clicked last is available as components.table1.selectedRow.id. (Note that table1 is the name of the table, if you change this, the above code fragment will also change accordingly).
The URL for the query shall therefore be: https://api.coinstats.app/public/v1/charts?period=1m&coinId={{components.table1.selectedRow.id}}

Let's call this query monthData.

Click on one of the rows of the table and run the monthData query to ensure that the query has run and therefore that its response is available.

Step 5: Make sure that the query is run whenever a row is clicked

Step 6: Add a chart to visualize price history

The chart takes in data in the format [{x: 1, y: 1}, {x: 2, y: 2},..].
We can use this snippet to convert the response of our monthData API to this format, where x values are day numbers and y values are the price of the coin in US dollars.

{{queries.monthData.data.chart.map((point, day) => ({
  "x": day,
  "y": point[1],
}))}}

OPTIONAL: Step 7: Repeat step 4 to step 6 to visualize weekly price history as well
This time, for step 4, the URL would become https://api.coinstats.app/public/v1/charts?period=1w&coinId={{components.table1.selectedRow.id}} as we need to get data for one week instead of one month.

For step 5, the query to be run will be the newly created weekData query.

For step 6, the code snippet would become the following, as the query name is different as well as, instead of day, this endpoint brings us price per hour of the coin, hence the variable 'day' is renamed to 'hour'.

{{queries.weekData.data.chart.map((point, hour) => ({
  "x": hour,
  "y": point[1],
}))}}

Step 8: Save, deploy and launch the application!

Done!, we now have a fully functional cryptocurrency dashboard!.

Optional: Make the dashboard look a little better

Styling the table
The appearance of the table can be configured from the inspector panel.
Click on the table, on the inspector panel that opened up on the right, make the following changes:

Turn off 'Show search box'
Turn on 'Highlight selected row'
Change 'Table type' to borderless

You may also adjust the width of the columns to make the table look like this:

Loading icons and titles for the charts
To show loading icons on the charts, simply fill in their Loading state field on the inspector with {{queries.monthData.isLoading}} for the month level chart and {{queries.weekData.isLoading}} for the week level chart. The isLoading variable is made available with every query, and it indicates whether the query is loading or not.

You can also type in relevant titles for the charts on their Title field, on the inspector.

Making these changes would finally make our application more interactive:

What would you like to build with ToolJet? I'm eager to listen to your ideas, questions and comments.

Code to Low-code: It’s A Happy Journey

Sherfin Shamsudeen — Mon, 27 Sep 2021 15:01:12 +0000

If you’re anything like me, then you appreciate what a superpower and privilege it is to write code. Coding, to me, is the ability to pour one’s ideas, emotions, and feelings into electronic devices and networks. It is a way to make one’s self manifest in the digital world.

If you’re even more like me, then you also worried when you heard about the rising trend of No-code/Low-code products such as Bubble. Because these are the kind of tools that threatens to make developers like you and me invalid. Or at least that was my first impression of them.
However, it would be arrogant of me to assume without trying it out myself. So I went ahead to work with a company named ToolJet(https://github.com/ToolJet/ToolJet) which is building an open-source low code platform to build internal tools for enterprises.

In addition to building the platform, I was tasked with using the platform to create internal tools for a large enterprise. I ended up delivering them a production-grade application which they now use to record and keep track of their service delivery, all within two weeks.
What should have taken several months of programming effort was done in two weeks, with minimal code. Contrary to what I expected to feel, I now felt even more capable as a developer: developers are now equipped to quickly come up with software products, iterate with several startup ideas without having to write thousands of lines of code. No-code/Low-code tools don’t relegate developers, it empowers us!

What the No-code revolution truly represents is perhaps the solution to a fundamental issue that the software development community has not addressed: It has factionalized into several cultures centred on different technologies that attempt to solve the same problems, making it difficult to abstract and automate features every app would need.
Let me try to draw an example: To develop a web front-end, we have React, Angular, Svelte, Vue, and so forth, all philosophizing the greatness of their fundamental technical decisions, which may very well have been made by some developer while he was drunk or stoned. And this, for instance, makes it difficult to build a universal login/sign-up mechanism that developers can just plugin with minimal configuration.

The bulk of the effort made in building software is currently about finding one’s way through this mesh of technologies, and in making them all work together, instead of writing code just where it matters. And this is precisely the selling point of low-code.
I started this write-up by sharing my experience, but let me happily upgrade it to an invitation to try out a low-code tool. And while you’re at it, ToolJet would be a good place to start.

NB: I use No-code and Low-code interchangeably in this article. However, No-code refers to application development without any code. While it is an ambitious proposition, I’m personally more inclined towards Low-code as it seems to solve a real issue with software development today, as opposed to No-code which focuses on arming non-coders with software development capability.

Forem: Sherfin Shamsudeen

How to build a cryptocurrency dashboard in 10 minutes using ToolJet

Optional: Make the dashboard look a little better

Code to Low-code: It’s A Happy Journey