AsyncAPI Logo
On this page

New Tools Dashboard for AsyncAPI

Akshat Nema

Akshat Nema

·7 min read

We already know that the present list of tools used inside AsyncAPI is presented on AsyncAPI Tools Overview and it is manually maintained inside the GitHub repository. All the tools are sorted according to the different categories in which they are used and maintained by the contributors. But we don't have a way to filter the tools according to our interest 🤔, like languages, technologies used in it, open-source tools, etc. Also, what if you want to add your tool to the list, what you will do 🤔? Do you have to create a PR?

What if I say, you don't need to make a mess of PR now 😉. Yep, we're introducing a new way to add tools to our website! Keep reading below to learn all about it👇.

AsyncAPI Tool File

We have introduced a new concept of the .asyncapi-tool file which describes the type and details of a tool related to AsyncAPI. You create such a file with a set of different information that describes your tool and then within a week such information is added to the AsyncAPI website. But the question is, where you should place such a file? Inside AsyncAPI repositories? Definitely not! Here comes the twist, this file will be created and maintained in your Tool's repository, and it won't ask for our approval. This file will follow a certain schema that you have to follow to successfully and appropriately add your tool to our brand new AsyncAPI Tools Dashboard. The proper schema of the file is described here. You can use the tools like the Online JSON Validator to validate your JSON data for Tools against the schema given above. For a more detailed explanation, you can refer to our official .asyncapi-tool file documentation.

Tool File Structure

Here's the sample .asyncapi-tool file structure, which can be used to structurise your tool configuration.

1{
2  "title": "ZenWave Code Generator",
3  "description": "DDD and API-First for Event-Driven Microservices",
4  "links": {
5    "websiteUrl": "https://zenwave360.github.io/",
6    "docsUrl": "https://zenwave360.github.io/zenwave-code-generator/plugins/asyncapi-spring-cloud-streams3/",
7    "repoUrl": "https://github.com/zenwave360/zenwave-code-generator"
8  },
9  "filters": {
10    "language": "Java",
11    "technology": [
12      "Maven",
13      "Spring Cloud Streams"
14    ],
15    "categories": [
16      "code-generator",
17      "dsl",
18      "mocking-and-testing",
19      "cli"
20    ],
21    "hasCommercial": false
22  }
23}

This file structure should be used to insert your tool into the website. The fields specified above are explained below:

  • title - Specifies the title or name of the Tool. Remember this name will be used as the official name of your tool on the website.
  • description - Specify the tool description. It should be precise, up to 30 words only.
  • links - Object which contains important links related to the tool.
    • websiteUrl - This is an optional field that specifies the URL of the tool's website.
    • docsUrl - This is an optional field that specifies the URL of the tool's documentation.
    • repoUrl - This is an optional field that specifies the URL of the tool's GitHub repository.
  • filters - Object that contains various fields like language, technologies, and categories to provide information about the tool.
    • language - Specifies the primary Language in which the tool has been created. There are predefined languages listed in our documentation that are available right now and will be expanded to add new languages if needed.
    • technology - Specifies the list of technologies that are used to create the tool. There are predefined technologies listed in our documentation that are available right now and will be expanded to add new languages if needed.
    • categories - Specifies the list of categories that defines the type of tool. There are predefined categories listed in our documentation that can be used to list down your tool under the proper category.
    • hasCommercial - Specifies whether the tool is a commercial product or is open source.

The predefined list of technologies can be found in our repository and are listed as:

AsyncAPI Tools Dashboard

Ohh! Wait a minute, have I told you about the new AsyncAPI Tools Dashboard? Then, let me present you with a brand new and astonishing AsyncAPI Tools Dashboard, which has a list of Tools presented in the form of cards. Do check it out right now - AsyncAPI Tools Dashboard. The preview of the UI is as follows:

AsyncAPI Dashboard UI

The Dashboard consists of various features like the overall information about the tools inside the ToolCard, filters to sort out the tools according to your needs, and a search bar for finding tools specific to name/type.

Tool Card

Taking the Tools Card under consideration, you have the following sections to detail about a Tool:

AsyncAPI Tools Card

  1. Specifies the Name of the Tool.
  2. Specifies whether the Tool is Free to use or requires commercial access to use it.
  3. Specifies the Description of the Tool. Clicking on the Show More button will open a small box to show full description of the Tool.
  4. Specifies the Primary Language of the Tool in which it is built.
  5. Specifies the list of Technologies used to create the Tool.
  6. View on Github Button that directs the user to the Github repository of the Tool.
  7. Visit Website Button that directs the user to the official website of the Tool.
  8. Visit Docs Button that directs the user to the official Docs of the Tool.

Filters for Tools

The Dashboard also contains various filters to search for a specific Tool according to your needs. You can now search according to the Name, Languages, Technologies, Categories, and more, as provided in respective dropdowns and radio buttons. Filters are mostly divided into 2 sections - Filter Menu and Search bar. The use of each menu is explained below under respective subheadings.

AsyncAPI tool's filters preview

Filter Menu

Taking the Tools Filter Menu under consideration, you have following filters to search a Tool:

AsyncAPI tool's filters menu

  1. This radio filter button allows you to search for either free tools available on the internet or GitHub, or search for Paid Tools.
  2. The slider filter button allows searching for the tools owned or maintained by the AsyncAPI organization.
  3. The Language Filter allows you to select the languages from the dropdown on which you want to search for Tools.
  4. The Technology Filter allows you to select the technologies from the dropdown on which you want to search for Tools.
  5. The Clear Filters button allows you to clear all filters inside the Filters Modal and will show you all the tools of selected categories (or all categories).

Do remember to click on the Apply Filter Button before closing the Filters Modal so that filters will be applied on the Dashboard.

Search Bar

The Search Bar will allow you to search the tools on the basis of their names.

Summary

I completed this project during the 2022 AsyncAPI Mentorship program, mentored by Lukasz Gornicki and Maciej Urbańczyk. It was an amazing experience to work on this project and create an automation for AsyncAPI tools. Quite a good learning experience as I researched GitHub APIs, JSON Schema, GitHub Actions, and a lot more stuff. Moreover, I became a maintainer of the AsyncAPI website repository and started contributing to the organization in lot many ways. My work in the project consists of the following Pull Requests:

You are welcome to review my work in the program and I will love to get your feedback on this. You can contact me via my email or DM me in AsyncAPI Slack. Thank you to AsyncAPI and its community members for providing me with this opportunity and I'll be looking for more such activities to contribute to the organization. Also, we are close to announcing the next AsyncAPI Mentorship Program in the year 2023, so stay tuned with us on AsyncAPI Slack.

Photo by DEWALT hand tools: https://www.dewalt.com/products/hand-tools