.jpg)
Why use Low-Code Software development?
In the rapidly changing tech world, we must create our applications quickly and efficiently to stay ahead. Low-code software development, an innovative approach that allows developers to build applications with minimal manual coding, eliminates the hassle of writing extensive lines of code by offering easy-to-use drag-and-drop interfaces, pre-built components, and visual development tools, streamlining the app development process significantly. Ultimately providing users with the unique advantage of rapid development through pre-built components and visual tools.
This reduction in complexity empowers both professional and citizen developers to create applications without extensive coding knowledge. This cost-effective approach enhances productivity, encourages collaboration, and enables iterative development for agility. With seamless integration, mobile and cross-platform support, and scalability, low-code platforms align with modern technological advancements, making them an enticing choice for diverse application development projects.
Now that ToolJet seamlessly integrates with HarperDB, let’s explore the benefits of using these two technologies together.
What is ToolJet?
ToolJet presents a game-changing solution for app development, utilizing a low-code approach to create applications rapidly while retaining full functionality. Its user-friendly drag-and-drop interface and an array of pre-built components provide developers with the tools to bring their ideas to life effortlessly. The platform's flexibility caters to a wide range of business needs and seamlessly integrates with databases, ensuring real-time data synchronization for powerful data-driven applications.
With ToolJet's robust and scalable infrastructure, developers can easily scale their applications to accommodate growing user bases and increasing data demands. Additionally, ToolJet's active community and comprehensive documentation provide invaluable support and resources, enabling developers to overcome challenges and unlock the platform's full potential. Having said that, ToolJet emerges as the preferred choice for efficient and innovative app development, offering time-saving features that foster creativity.
Why use HarperDB as the Database of choice?
In the ever-evolving landscape of technology, choosing the right database solution is crucial. HarperDB is a standout solution that unifies streaming, database, and application server in one. It emphasizes simplicity and speed, enabling swift app development with a single API that combines NoSQL and SQL operations for developers of all levels.
Its schemaless architecture allows easy data storage without complex schema definitions, fostering adaptability to changing requirements. Real-time data streaming ensures seamless synchronization, making it suitable for data-intensive apps.
Scalability is a key advantage, accommodating app growth through horizontal scaling. Built-in authentication and authorization ensure robust data security and controlled access for resource-constrained environments.
Step-by-Step Guide for Building Your First App Using ToolJet and HarperDB
In this hands-on section of the article, we will harness the power of ToolJet and HarperDB to create a fully functional CRM application as shown below.
Our goal is to craft a user-friendly e-commerce page where customers can effortlessly browse through a curated list of available products. The page will showcase crucial product details such as the name, image, price, and category. To achieve this, we will leverage the capabilities of HarperDB to establish a robust backend for our application.
The underlying intention of this tutorial is to demonstrate the seamless synergy between ToolJet and HarperDB, enabling you to construct your very own app from scratch with remarkable ease and efficiency. By the end of this section, you will gain valuable insights into the potential of these powerful tools and how they can empower you to bring your app ideas to life effortlessly. So, without further ado, let's dive.
Step 1: Preparation Step
To set up your accounts on ToolJet and HarperDB, head over to their official websites and simply follow the straightforward registration process provided.
Step 2: Building your App using ToolJet
To get started, go to the official ToolJet website and log in using your existing credentials. If you don't have an account, you can sign up to create one.
After logging in, you can create a new app by clicking on "Create New App."
In this example, we will insert a table of products while complementing it with a side component that showcases each product's name, image, and price in a visually appealing manner.
To begin, we'll use the search bar on the right to locate the table component.
Once selected, we'll drag the table to our preferred location, which for this demonstration is the left side of the app.
Next, for displaying the product image, we'll need an Image component. Following the same approach as with the table, we'll search for "Image" in the search bar.
Moving on, we'll drag and drop the Image component positioning it to the right of our table, resulting in the structure depicted below.
Step 3: Build your HarperDB instance
Once you click on the "Create New HarperDB Cloud Instance" button, a new window will open, presenting you with three different options for creating your instance. In this tutorial, we will opt for the AWS instance creation method.
When setting up your HarperDB instance on AWS, you'll be asked to give your instance a unique name, making it easier to manage within the AWS environment. Additionally, you'll create a personalized username and password for accessing your database securely.
Go through and finish the creation process. Just remember to choose a strong password and keep it safe. For a smooth setup experience, you can refer to the official documentation and support resources provided by HarperDB.
Now, let's move forward by creating a custom schema and defining the desired tables. Once you open your new HarperDB instance, the first page you will encounter is the schema page. Here, you have the flexibility to select the schema and table names that align with your application's requirements and logic.
Subsequently, we'll proceed to insert our carefully chosen dataset, specifically curating the first 100 rows from the extensive Amazon Product dataset. This thoughtful selection ensures that we have sufficient data to work with while also keeping the process streamlined for demonstration purposes.
To upload the data into your database, simply click on the file emoji located on the upper right side of the screen. A new page will appear, enabling you to effortlessly upload the dataset either through a file URL or directly from your PC.
Please be patient during the data uploading process, as it may take some time to complete in case of large data sets.
With this straightforward process, you'll be all set to manage and explore your data in no time.
Step 4: Integrate HarperDB into your Tooljet application
With your fully prepared app and HarperDB instance at your disposal, it's time to seamlessly link these powerful tools together to unleash their combined potential.
By establishing a smooth connection between your app and the HarperDB backend, you'll be able to leverage the best of both worlds, enabling efficient data management and seamless user interactions.
Step 1: Installing the HarperDB Plugin
To begin the integration process, simply click on the "Add new global datasource" option.
Moving on, click on the "Add new datasource" button. This step will allow you to connect and access additional data sources for your app.
Proceed to install the HarperDB plugin.
Step 2: Creating a new Database Connection
In this step, we will seamlessly integrate our HarperDB instance as a new data source for our app. By establishing a smooth connection between the app and HarperDB backend, we can easily retrieve and insert data into our database.
Click on the "Add new datasource" button to proceed. This will enable you to connect and access various data sources for your app seamlessly.
To ensure a successful connection, remove the "http://" extension from the domain name and input it as your Host.
Leave the Port field empty, and enable the SSL option for added security, don't forget to provide your HarperDB instance's Username and Password.
After that, perform a connection test to validate the setup, and once everything checks out, save the data source settings. With these simple steps, your app will seamlessly integrate with the chosen HarperDB instance.
Step 3: Checking Database Connection
Having set up the data source, let's return to our application. Simply click the "Dashboard" button located on the top left corner of the screen.
This will direct you to the "All apps" page. From there, click the blue "Edit" button beneath the selected app.
If done correctly, a new HarperDB button will appear in the "Available Datasources" section. To set up our query, select the HarperDB data source.
Opt for the SQL mode and craft a straightforward query to retrieve all data from the "products" table. When ready, simply click the run button to save and execute the query.
Once the query is executed, it will be saved on the left-hand side of the screen. To review the data returned, simply click on the preview button. This convenient action will give you a comprehensive view of the queried data, allowing you to validate the results and make informed decisions based on the retrieved information.
Step 4: Retrieving data from the Database
In this next section, we'll put our previously created query to use. Let's proceed by clicking on the ToolJet table that we created in Step 2. As you do this, a new tab will open on the right side of the screen.
To begin, clear the existing static data in the Table data field, making way for the dynamic and real-time data that will be fetched through our query.
Within the field, enter the keyword "query" followed by the name of the specific query from which you wish to retrieve the data. If you aim to fetch all the data, simply add the ".data" extension, as demonstrated below. By doing so, you'll effortlessly access the desired data, putting you in control of the information flow and empowering your app with real-time insights.
Next, streamline your data by eliminating unnecessary fields. To achieve this, click on the remove button located to the right of each unwanted field. Embrace the simplicity of customization as you curate the perfect dataset tailored to your app's specific needs. With unnecessary clutter removed, your app will run efficiently and offer a delightful user experience.
Let's focus on the essential information and retain only the Product Name, Selling Price, and Category fields. By doing so, we ensure a clean and concise dataset perfectly tailored to meet your app's specific requirements.
Let's enhance your app by adding a dynamic image that changes based on the selected product in the table. This delightful feature will bring your app to life, providing users with a visual representation that perfectly complements their product choices.
Click on the newly added image item. Moving on, replace the predefined URL field with {{components.table1.selectedRow.Image}}. By doing so, your app will dynamically display the image corresponding to the selected product in the table that we have just created. Consider it as a cohesive linking process where the table and image work simultaneously.
With that, our simple app is complete.
Tips for Building and Customizing Your App
Congratulations on successfully building your first app using ToolJet and HarperDB! With ToolJet's intuitive interface and HarperDB's seamless database integration, you now have endless possibilities for further enhancements. Here are some notes that you may find useful when building and customizing your app.
First, you may consider implementing data insertion functionality to allow users to add new products or customer information. With ToolJet's user-friendly forms and input fields, data entry becomes smooth and efficient.
Don't forget that for enhanced user engagement, developers should integrate interactive elements like charts and graphs from ToolJet's widget library, presenting data in visually appealing formats.
Lastly, prioritize user security by incorporating authentication and authorization features. ToolJet's backend services and HarperDB's built-in authentication options make implementation seamless.
Don’t forget that you can always leverage the comprehensive documentation and support resources provided by ToolJet and HarperDB to overcome challenges and unlock new possibilities.
With your creativity and these robust tools, you're on your way to crafting remarkable applications that delight users and drive business success.
Conclusion
In the fast-paced world of technology, low-code software development emerges as a transformative solution, empowering developers to build applications faster and more efficiently. With pre-built components and visual tools, this approach reduces complexity, encourages collaboration, and enables agile development. Seamlessly integrating with modern advancements, low-code platforms offer mobile and cross-platform support, scaling effortlessly to meet diverse project needs.
When choosing an optimal database solution, HarperDB stands out as an exceptional choice. It reduces complexity, increases performance, and lowers costs by combining user-defined applications, a high-performance database, and an enterprise-grade message queue into a single package.
The combination of ToolJet and HarperDB allows developers to create fully functional CRM applications with ease. By harnessing pre-built components, real-time data integration, and dynamic visual elements, developers can craft user-friendly e-commerce pages that elevate user experiences and drive business growth. Embrace these powerful tools, and experience the joy of rapid app development, where creativity knows no bounds and innovation becomes second nature. Happy app building!
