5 Key Technical Concepts To Build Any Tool
Note: This short guide is recommended for anyone starting to build internal tools using Superblocks. The estimated reading time is 5 minutes.
In this short guide, you'll learn about the 5 key technical concepts to build any internal tool in Superblocks. The key technical concepts are:
1 - Set up "Integrations" to connect to your data sources
To build any internal tool with Superblocks, start by creating at least one Integration. An Integration is simply a link between your Superblocks account and a database or API (the API could be internal or external to your company, and both REST and GraphQL are supported).
After setting up an integration, you can begin to build internal tools using that data. For example, if you set up a Zendesk integration in Superblocks, you can build a Zendesk dashboard to help with customer support. Similarly, if you set up a Slack integration, you can start sending custom messages to your Slack channels. Check out the Use Cases page for more ideas on what kinds of tools you can build with Superblocks.
2 - Drag and drop "Components" to the frontend
Superblocks comes with a large library of ready-to-use pre-built components, making the development of your application's frontend easy and fast.
Components can simply be dragged and dropped onto the application's canvas, allowing anyone, even those with minimal frontend expertise, to contribute to the development of full-stack internal tools in Superblocks.
3 - Call the backend using frontend "Event Handlers"
Now that you have a frontend, you'll want to enable user interactions, such as clicking a button to load table data. When a user clicks the button, the application will execute business logic in the backend to fetch the data to be displayed in the table from a data source.
To achieve this, you will use an Event Handler, one of the two methods to connect the frontend of your Superblocks Applications to the backend (the other method is Bindings, which we will explore later).
Most components come with event handlers. For instance, the Button component includes an onClick event handler. When a user clicks the button in the frontend, the event handler is triggered and you can define the action that gets executed by it.
4 - Execute business logic using "Backend APIs"
The backend in Superblocks is made up of Backend APIs. A Backend API is composed of various Steps required to execute the business logic. Each step could be a Control Block, an Integration step, or a language step (JavaScript or Python).
This is the stage where you utilize the Integrations to access the data sources you configured in Step 1.
5 - Use "Bindings" to display your data in the frontend
In the fifth and final step, you'll connect the frontend of your app to the backend once again. This time, you won't be calling the backend from the frontend using Event Handlers. Instead, you'll use Bindings to take the data returned by the backend and use it to populate your frontend components for display on the screen.
Bindings, represented by double curly brackets {{...}}, allow you to access the state of your app, including the output of backend APIs, and "bind" the data to frontend components, such as the Table component you have created earlier.
Bindings are a powerful feature in Superblocks. They not only enable you to pass data from your backend APIs to your frontend components but also allow you to reference data from anywhere within Superblocks.
Congrats! You've successfully built a full-stack application in Superblocks in under five minutes. Every subsequent step to tailor the app to your specific use case is just a repetition of the steps you've already gone through:
- Drag and drop Components to the frontend
- Use Event Handlers to run Backend APIs when a user interacts with a component
- Run a series of Backend API steps to load and process your data
- And finally, use Bindings to link your components to the backend's response and display your data on the screen
Conclusion
Building internal tools with Superblocks is straightforward and, most importantly, fast.
Now that you've grasped the five fundamentals of every Superblocks Application, you're ready to delve into the various other features the Superblocks platform offers, enabling you to create custom internal tools for any use case:
- State Management: Frontend Variables allow users to create Temporary and Local Storage variables for their Superblocks Applications.
- Source Control with Git: Collaborate on apps, workflows, and jobs seamlessly using branches while effortlessly managing and tracking changes in GitHub or GitLab.
- Layouts and Themes: Build any dynamic layout while having zero frontend expertise due to the native layout controls in Superblocks.
- Custom Components: Bring any React component from the web or your codebase into Superblocks. Customize your internal apps without limits.
- On-Premise Agent: Keep customer data in your VPC for internal tools, while keeping Superblocks always up-to-date from our cloud
...and many more!
It's important to note that an Application, like the one you've just built, is just one type of tool you can build with Superblocks. If your use case doesn't require a frontend for end-user interaction and you're aiming to automate a workflow instead, be sure to explore:
- Workflows: A Workflow is an internal tool that executes a set of steps across your systems: APIs, databases, and business logic in code.
- Scheduled Jobs: Execute a set of steps on a schedule every minute, hour, day, week, or month.
Finally, if you have any questions, don't hesitate to reach out to us at any time. Our team is here to help you succeed in building Applications, Workflows, and Scheduled Jobs with Superblocks. Happy building!
Next steps
Proceed to the 5-minute Quickstart Guide to apply what you've learned to a slightly more complex app.