Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms
12
November
2021
Tutorial

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms

Want to Automate Your Apps? Use Zapier to Connect Specialized Platforms
Vihar Kurama
0
 minutes ↗
#
applications
#
code
#
announcement
#
automation
#
community
Tutorial

Automation has become the ‘it’ thing in the world of business. The need for organizations to cut costs has forced them to improve internal processes to provide improved service while also conserving time. Unfortunately, it's not always easy for teams to streamline everything internally because they often seem like complicated processes - but there are ways around this. Using Appsmith, developing internal tools can cut costs, time and even improve your workflow by connecting services across specialized platforms with Zapier.

Zapier has thousands of apps and services that can meet almost all your business automation needs. Integrating Appsmith into the mix opens up a whole new dimension. In this way, you'll have a more efficient system in which you can connect anything from, say, a MailChimp email campaign to a Google form with data from your ERP or CRM systems delivered within the app!

In this blog, we will be looking at adding automation to Appsmith applications using Zapier.

Let’s get started!

Building Internal Tools with Appsmith

Appsmith is a powerful platform to build admin panels, dashboards, crud apps, and internal tools. It allows us to create these applications with little to no coding required. We can build apps that integrate with just about any service you can think of. Today, Appsmith has more than 15+ data source integrations; a few popular ones include Postgres, MongoDB, Google Sheets. That's one of the best things about Appsmith -- it's completely customizable. But if you want to build apps with Appsmith, you will likely be doing some coding in JavaScript. Yes, we can use JS anywhere across the Appsmith applications to bind, transform and create actions to the data. In terms of UI, Appsmith provides more than 25 widgets with a wide range of styling options. While it's not hard to use Appsmith to build apps, you will need to start building them to get to the next level with Appsmith.

Now, let’s build a simple newsletter application that can help collect contacts from Appsmith and send Emails using Sendinblue via Zapier.

Building UI on Appsmith

The idea of our newsletter is to collect emails from users and to maintain campaigns on Appsmith. Let’s get started by following the below steps:

  1. Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  2. Create a new application by clicking on the Create New button under the Appsmith dashboard.
  3. We’ll now see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources and Widgets.
  4. Click on the + icon next to the widgets section and drag and drop a container widget onto the canvas.
  5. Next, bring in a form widget inside the container and two input widgets inside the form.
  6. We can configure widgets and their properties by clicking on the cog icon on the top right. This will open a property pane where we can update all the widgets settings.
  7. Now set the form labels to name and email.
  8. Additionally, you can add a text widget to add aesthetics to our application; the following is how the UI looks like:
CleanShot 2021-11-09 at 16.21.52@2x.png

Excellent, our UI is now ready; let’s create a new Zapier workflow to connect to SendInBlue and manage our newsletter.

Set Up Zapier with Appsmith

Excellent, our UI is now ready; let’s create a new Zapier workflow that can connect to SendInBlue and manage our newsletter.

  • First, create a free account on Zapier and select create custom workflow option from the dashboard.
  • On Zapier, every action on the workflow is named on Zap; to establish a connection between Zapier and Appsmith, let’s create a Webhook.
Webhooks are essentially a way to create a communication channel. It allows you to listen to an event and run a command or take any action you want. Here, the event will be triggered by an API call from Appsmith.
  • Now open the Appsmith app, click on the + icon next to the Datasource section from the sidebar, and choose Create New API.
  • Copy the webhook URL from Zapier and set the request type to POST. For ease, let’s also rename the query to addContact.
  • Here, we also need to send the data from the Form widget we had created earlier; now, let’s use their names to collect data and pass them in the Webhook.
  • Navigate to the Body tab on the API and paste the following code snippet:
{
"name":"{{Input1.text}}",
"email":"{{Input2.text}}"
}
  • This code snippet will send the information from the Input widgets to Appsmith.
  • Lastly, set the button onClick property to execute a query and set it to addContact.
  • Now, on Zapier, hit the test button and send a request by filling the form on Appsmith and hitting the API. We should see the successful response on Zapier.
CleanShot 2021-11-09 at 16.38.03@2x.png
  • Next, click on the + icon beneath the zap to add a new workflow. Select the SendInBlue Zap from the list.
  • We will need to authenticate with SendInBlue from Zapier to access the workflow; for this, you can either create a new account or log in with your existing credentials.
  • Next, set the Action type to Add or Update in Sendinblue and fill in the details related to Email; here, we can also use the data sent from the Webhook. In the following screenshot, we select the EMail field data to be the email received from the webhook.
CleanShot 2021-11-09 at 17.16.35@2x.png
  • Similarly, you can add a Send Transactional Email in Sendinblue action to the workflow using the Seninblue Zap.

With this, whenever a new user subscribes to the Newsletter, he receives a confirmation Email and will be added to the contact list on Sendinblue.

And just like that, we could configure and build an entire Newsletter manager without writing code. This application can be extended in multiple ways, such as creating new email campaigns, filtering contacts, blocking users, and many more! The entire demo app of this tutorial can be found here. This is just one example of how you can automate your apps on Appsmith!

We hope that you will have a better idea of how to leverage automation in your Appsmith applications. For more information on automating your Appsmith applications, please contact me anytime at vihar@appsmith.com.

Why You Should be Using Low-Code Apps to Build Internal Tools
30
March
2021

Why You Should be Using Low-Code Apps to Build Internal Tools

Why You Should be Using Low-Code Apps to Build Internal Tools
James Konik
0
 minutes ↗
#
javascript
#
code
#
tools
#
apps

You’ve probably heard the story of the enthusiastic developer who worked night and day for two weeks on a shiny new internal tool, only to find Bob in accounts had built pretty much the same thing in thirty minutes with a no-code app builder or a massive, macro-filled Excel spreadsheet. Bob’s software may not have been as stable, scalable, or pretty, but it was delivered quickly and cheaply.

Situations like these leave developers asking some important questions like, when is the best time to actually build software?

Today you’re going to find out why you should be using low-code apps to build internal tools. By leveraging the speed and cost benefits of the new range of low and no-code tools available, you can use your expertise to deliver applications faster than ever before.

As a developer, low-code apps may seem to take away a lot of the legwork and ownership of your applications. After all, you can’t beat the feeling of building an app from scratch, crafting every feature yourself.

But, the positive side of that is that they can handle the repetitive coding you don’t like, enabling you to focus entirely on refining and delivering your vision as quickly as possible.

Understanding these tools and knowing when to use them will help you to deliver value to your clients and co-workers. It will level up your game.

Today, I’ll tell you what “low-code platforms” are and discuss the pros and cons of using them for internal application development. After reading, I hope you are inspired to try some of them and learn for yourself what they have to offer.

What is a Low-Code Platform (LCP)?

You may have heard the terms low-code and no-code floating around and pictured them as something similar. That’s a mistake. Low-code is not the same as no-code.

No-code apps let you develop applications with no coding whatsoever. That’s great for people with no development skills at all, but it means you’re strictly limited to the features provided for you, usually in the form of a drag and drop interface.

Low-code development still requires code but handles the bulk of the application for you, enabling you to concentrate on implementing the task-specific logic you need. With low-code, you can rely on the platform to deal with common tasks that you don’t need to customize and focus your efforts on the core functionality or differentiated business logic.

What are Internal Applications?

Internal applications are the apps you use within your organization for everyday business. There are all kinds of these. You may have apps for planning your office schedule, tallying marketing costs, or tracking leads and sales.

Studies suggest an average of eight apps are used by a typical enterprise employee every day. In larger organizations, there can be hundreds of internal tools used by various departments.

In the US alone, companies spend around $300 billion per year on internal apps. Building and maintaining those is a lot of work, so anything you can do to make it quicker is a plus.

Reasons to use Low-Code in Internal Applications

There are many advantages to using low-code apps for your internal tools and applications.

Speed

First, it’s typically faster to develop low-code applications than traditional software. With much of the application built quickly using visual tools, and common features added at the touch of a button, it takes much less time to get up and running. Research suggests a 50-90% decrease in development time compared to traditional applications.

Tools like UI Bakery have a whole set of templates you can use to get started, so your app gets some structure from the beginning. You just have to adjust it according to your specific needs.

Cost

Since low-code apps are quicker to develop, they are usually cheaper because the biggest cost of a software project is developer time. While you may pay a monthly fee to the toolmaker, it rarely eclipses the thousands of dollars per month that each developer on your team is paid. This cost argument is especially helpful if your management team needs persuading. Show them the figures and see their faces light up.

An Appsmith screenshot, showing a database query and some code guidance

Maintenance

The built-in features that low-code apps include will be updated along with the platform. That saves you from having to do maintenance. If you need a security fix or need to accommodate an API change, you can just build your app using the latest iteration of the software, and all should be good.

Being able to integrate quickly with other platforms is also a big plus. Many low-code apps let you quickly share data with other software. This could include Zapier, Airtable, Discord, or a whole host of other applications. Integrating with these yourself can take time, so being able to do it with a few clicks can save you a lot of headaches.

Rapid Iteration

Returning to the speed point, if you’re not sure which service to work with, low-code apps can let you make changes so quickly it becomes cost-effective to experiment until you find a service that fits what you are trying to build.

This rapid iteration allows you to take risks and improve your app through trial and error on a scale that would be much more expensive with traditional development.

It also makes low-code solutions ideal for prototyping. You can test out the basic functionality of a new idea, then shift to building a full application if you like it, and want to take full control.

Building things, using them, and improving them is a virtuous circle and participating in it is its own reward. If you like making things, you can do so quicker with low-code applications.

Support

If you do get stuck while building a low-code application, you can take advantage of their support offerings. While these vary depending on which tool you choose, most platforms will at least offer support forums that are more focused and friendlier than Stack Overflow.

The level of guidance can also make low-code perfect for newer developers. If your senior developers are all working on customer-facing products, you might be able to deploy some of your more junior engineers to work on low-code apps meant for internal applications.

Fun

Finally, developing low-code apps quickly is a lot of fun. Most developers look forward to building and crafting their ideas and are less keen on the accompanying drudge work involved in many long-term software projects.

"I'm having a lot of fun playing with @roamhacker's smartblocks

A low-code tool in my second brain 🥳
— Samuel Bars 𐃏 (@samuelbars) December 11, 2020

Low-code applications let you focus on the core experience. If you really want to customize the rest, there’s nothing stopping you from using what you’ve built as a starting point for a full project in another language.

Happy developers can realize their ideas quickly and can learn more in the process. The big picture experience that comes through working on multiple projects can also be acquired faster.

Limitations of Low-Code Platforms

So, how about the drawbacks? There are a few, and you need to be aware of them when picking a technology to use.

Limited Scope

The key limitation with low-code platforms is that they can’t do everything you can with regular code. Having things done for you is great, but if you want to deviate from what’s offered, you might not always be able to.

You’re effectively working in a box. It may be a nice box, but there’s only so much you can do inside it. As low-code tools improve though, the boxes are getting bigger and better.

Generic Feel

Drag and drop components might look great but have a cookie-cutter feel. If you want to make your UI look distinct or offer functionality that is tailored to your needs, not all low-code tools will work.

The same goes for integrations with other tools and platforms. You’ll get a fixed set of available options, which can be added quickly and easily. When you want to move beyond those, you might not have the option, or you might have to build the integration yourself.

Cost

The cost was in the positives too, but you also need to check the cost before making a decision. The goal is to save money, after all.

That can add up quickly if you have a large team and could start to outweigh the cost of building a small app yourself.

Just because low-code is potentially cheaper doesn’t mean you can ignore the business side of things altogether, so weigh your options carefully. Don’t assume it’s cheaper in every situation.

Final Notes

The creativity and problem-solving abilities developers possess can be turbocharged by using low-code apps effectively. If you’re new to this booming area, take a look. You might find yourself hooked. You might also find yourself delivering value to your customers at a rate you didn’t previously think possible.

Appsmith screenshot showing visual controls and colourful animated shapes

A great option if you want to dip your toe in the water is Appsmith. You can sign up in a few seconds, and the tutorial will show you the ropes in a few minutes. After that, you have a drag and drop interface letting you add UI elements quickly, and, of course, you can alter the core behaviour via its code.

Play around with it and see for yourself what these tools can do. The gap between an idea and its realization is getting smaller every day. Take your first steps on the journey. Who knows where it will take you?


Author Bio: James Konik, Uncertain if he's a coder who writes or a writer who codes, James tries to funnel as much of this existential tension as possible into both of his passions but finds it of more benefit to his writing than his software. When occasionally hopping out from behind his keyboard, he can be found jogging and cycling around suburban Japan.

Cover Photo by Luke Chesser on Unsplash

Building an Admin Panel with MongoDB using Appsmith
24
March
2021
Tutorial

Building an Admin Panel with MongoDB using Appsmith

Building an Admin Panel with MongoDB using Appsmith
Vihar Kurama
0
 minutes ↗
#
javascript
#
dashboard
#
mongodb
#
tools
#
code
Tutorial

Many companies and organizations rely on internal dashboards or admin panels that are connected with different data sources. In this guide, you’ll learn how to integrate a MongoDB data source with Appsmith and build creative dashboards.

Building an Admin Panel with MongoDB

Usually, building an admin interface over MongoDB is a time taking process and a lot of configuration has to be made. Also, for database management, schemas and queries have to be maintained on a different platform. While the UI client would be needing one more server. But with Appsmith, you can have everything under one roof and you can build UI within no time. Let’s see how by connecting to MongoDB on Appsmith. Below is a screenshot of how our dashboard is going to look like:

Screenshot

If you prefer a video tutorial, check out our video on How to Build a MongoDB Admin Panel in 5 Minutes!

Connecting to a MongoDB Data Source

Usually, MongoDB clusters are hosted on the cloud. Now let’s connect to one of the example clusters that’s on MongoDB cloud and list out all the data that’s present inside the database.

"The database we’ve worked on is a collection of product and sales information. You can find the finished admin panel app here."
  • First, you’ll have to create a new application on Appsmith.
  • A new application opens up an application titled Untitled Application 1; you can rename it by double-clicking on the existing one.
  • Now click on the DB Queries and create a New Data Source button. Since we’ll be using MongoDB, select the MongoDB option listed there. Below is a screenshot of how the settings look like:
mondog.png
  • You’ll also have to white-list Appsmith on the Mongo Server if you had any IP restrictions on your Mongo instance.
  • Next, set the Connection mode to Read/Write, Connection Type to Replica set.
  • Now you can add the host address, you can find this under your MongoDB cluster settings. In this guide, we’ll be using cluster0.d8mtn.mongodb.net
  • Next, click on the Test button to verify if the credentials are configured correctly or not. Once verified you can save the data source and then start working on your queries.
  • Finally, we’ll create a new query to fetch items from the product collections by clicking on Create Query. Use the following code snippet to fetch products from the products collection:
{
"find": "products",
}
  • Let’s name this query get_products and hit run to view the query response.

Displaying the Data onto UI

You have your data-source connected, and also a query that can fetch all the product items for you. Now, let’s put these on a table and render all the data. To do this, you’ll have to navigate to the Page, find the Table Component under the Widgets section, drag and drop it to the canvas. Next, open the table’s property pane by clicking on the cog-wheel on the table. Now under the Table Data property, add the following snippet:

{{get_products.data}}

Here, you’re using the get_products DB query and rendering the data from it onto a table.

"Appsmith allows us to parse javascript using the moustache syntax {{ }}."

Update an Item on MongoDB with Appsmith

Not just reading data, with Appsith you can perform all CRUD operations on the MongoDB. Now on our dashboard/page let’s create a form that allows us to update any selected value on the table.

  1. First, search for a Form widget that will house the input fields.
  2. Next, add some Text fields to visually indicate the product being updated (we can optionally display product image).
  3. A Number input to update product quantity.
  4. A Date input to update the product expiry date.

To build this form, we’ll need to drag over a form widget, a bunch of text widgets, an input widget, and a date picker widget to the canvas. The form should look like this after setting up the UI:

2.png

Once we have the form setup, we would need to link the form to the table so that when a product is clicked on the table, the corresponding information is pre-filled on the form.

Appsmith provides us with an easy way to hook into a widget’s state. You can configure the text widget to show the name of the product selected on the table by setting its Text property to:

{{Table1.selectedRow.name}}

You can do the same for the date picker and input widget so that the default text is set based on the item clicked on the products table. For example:

{{Table1.selectedRow.quantity}}

Also, don’t forget to set the Data Type of the input widget to Number.

Lastly, you’ll need to write a query that grabs data from the form and updates the product selected on the table when the submit button is clicked. To set this up, click on the cogwheel on the submit button. Then set the onClick to execute a DB query and then click on create a query:

Let’s call this query update_product and configure it this way:

{
{
  "update": "products",
  "updates": [
    {
      "q": {
        "_id": ObjectId("{{Table1.selectedRow._id}}")
      },
      "u": {
        "$set": {
          "quantity": "{{Input1.text}}",
          "expires_at": "{{DatePicker1.selectedDate}}"
        }
      }
    }
  ]
}

The update_product query shown above updates the item with _id selected on the table with quantity and expires_at gotten from the input and date picker widgets. Clicking the submit button on the form triggers this query.

You’ll now have a functional dashboard that displays product information with a form that allows us to update an individual product.

Displaying Data in a Chart Widget

Additionally, you can display data using charts. We have a sales collection that lists sales data of a particular product. It’s a good idea to display this data in a chart.

To build this functionality, we need to go back to the table widget and configure the onRowSelected action to execute a DB query and then, click on create a new query.

Let’s name this query get_product_sales and configure it like this:

{
  "find": "sales",
    "filter": {
    "product": ObjectId("{{Table1.selectedRow._id}}")
  },
}

The above query filters sales information on the sales collection for the product with the _id selected on the table. Also, this query will run whenever a row is selected on the table.

Lastly, we need to display the data from this query in a chart widget. So drag in a chart widget and configure the Chart Data to be:

{{ 
getproductsales.data.map(s => ({y: s.quantity, x: moment(s.date).format("MMM Do")}))
}}

And we can see the chart widget re-rendered with the sales data for the selected product on the table. You can go ahead and tweak the widget as you see fit.

Deploying the MongoDB Admin Panel

To deploy the admin panel, hit the deploy button at the top right corner. You can share the admin panel by clicking the share button and toggling the switch to make it public or only invite people you want to have access to the app (i.e people in your organization) via email.

Kudos! Your admin panel is now up and running!

with inputs from Confidence Okoghenun