DEV Community: Vishnupriya Bhandaram

Hacktoberfest 2021: Let the Contributions Begin!

Vishnupriya Bhandaram — Mon, 27 Sep 2021 08:56:49 +0000

Time indeed does fly because it feels just like yesterday when we hosted our first ever Hacktoberfest last year! And what a year it has been.

We started Appsmith because we wanted to create a developer-first product to make an engineer’s life easy. From being a small, little-known project on Github, we now have 5K stars. This wouldn’t have been possible without our community; apart from giving us incredible feedback, they also contributed immensely to our codebase, from contributing new integrations to helping solve bugs.

We now have over 100 contributors, and we want to expand our community (that means you!), empowering them to contribute to a project that will always remain developer-first. And so, we’re back again this year for an exciting month-long virtual festival supporting open-source projects. We love it because it’s celebratory and community-oriented! At Appsmith, we genuinely believe open-source can take the way we build things to new heights. And our commitment to the community will never waver.

In that spirit, we are kicking off the Hacktoberfest 2021. In the run-up to the actual code-fest, there are going to be many talks! We will be bringing together folks from other awesome projects to talk about Hacktoberfest and Open Source. Be sure to check these out. You will definitely get to learn more about how to get involved in open-source projects. And yes! We’re ready to swag it out, too, for every valid PR! And contributors who submit more than 4 PRs and invite others to contribute to our repository will get a special prize.

You are welcome to contribute to the issues on Appsmith’s repository on Github. Be sure to check contribution guidelines, review, and merge policies. Please note that not all pull requests will count towards Hacktoberfest 2021.

Contributing to open-source projects is an excellent way for users to become contributors. And it’s both a fun and rewarding experience. Sure, it can be scary to begin, and many think that only code that implements significant features matters. Well, I am here to tell you that it’s not true. We believe that no contribution is too small. Bug fixes, documentation updates, submitting articles are all fantastic ways of participating.

Hacktoberfest is open to all: Students, developers, anyone really. Background no bar.

To this end, this year, we’ve included several newbie-friendly issues in the challenge to give a warm welcome to first-timers. If you’ve still got some doubts about participating or need some queries answered, head over to our Hacktoberfest channel on Discord, and we will be happy to help you out! To know more about how you can participate in this event, take a look at our Contributor Guidelines and Code of Conduct.

Happy Hacking! 🐱‍💻

Engineering Diaries: How We Created a Google Sheets Integration for our Product

Vishnupriya Bhandaram — Fri, 24 Sep 2021 11:58:54 +0000

Everything starts with a spreadsheet. Well, almost everything. Spreadsheets are the backbone of all business operations, whether budgeting, people management, expense management, organizing lists, etc. Spreadsheets often become the first choice for fledgling businesses, mainly owing to their versatility and flexibility. Little goes a long way with spreadsheets. For a startup, smart utilization of available funds is critical, and Google Sheets often comes in handy to plan projects, analyze risks, report metrics, generate quotes and predict financial outcomes. Start-ups even use spreadsheets to keep track of client lists, investor lists, and more. So what’s the problem? Things can get messy once you work on it collaboratively or establish strict flows around maintaining a spreadsheet database. Data can get corrupted, and not knowing the latest version, too many changes by too many people who have access to the database and no admin control.

This is where the power of low-code can be melded with the power of spreadsheets. Turning an excel sheet into a web application is a great way to contain errors due to poor data management, allow for granular control, admin and user access, and these applications scale along with your business. Today, it’s pretty easy to make an application from Google Sheets in record time.

There are many low code and no-code tools out there that can help you do this, including Appsmith. In this blog, we will talk a bit about the Google Sheets integration on Appsmith, how we built the integration and all the things you can do with it.

Behind the Scenes

One of our colleagues, Nidhi Nair, worked on making this integration a possibility. Nidhi joined Appsmith a little less than a year ago, and she enjoys the creative liberty to explore her ideas at Appsmith. “It was possible to use Google Sheets on Appsmith even without our integration. Users could do this using the REST API plugin. However, it’s not the most convenient, and I found it to be unwieldy and something that every user couldn’t configure intuitively or easily,” says Nidhi.

The Google Sheets integration was created to simplify the interaction for end users. “We identified a set of actions that users would want to use Google Sheets for and optimized the way they interact with data in their sheets,” adds Nidhi. This meant not having to deal with cells and columns, but just arrays. “We defined the scope of the integration to be similar to that of a database. A single sheet was understood to be a table that we wanted to manipulate with the integration. We identified the relevant actions for this,” she says. Implementing this integration meant doing considerable research around how users interact with sheets. For us, reducing the friction for users was a key priority. “We introduced something called RowObjects in the integrations that makes sure that users don’t necessarily have to tinker with the data themselves,” says Nidhi.

Key Challenges

“We wanted to be able to support the DB integration style interaction and also allow users that want to work on it as an excel sheet to be able to continue to do so. This was a relatively easy solution because of how flexible our logic for these integrations is,” says Nidhi, adding that a user could say ‘get me rows 1-10’ and for the next page, ‘get me rows 11-20.’ But they can also do something like: ‘Get me cells D3:J8, and on the next page, get me D11:J16’ (or whatever other logic they would like to use).

While this may sound trivial, having the liberty to navigate across the sheet at will means that they can organize their data separately from how it is consumed in Appsmith. The biggest challenge in creating this integration was to use Appsmith credentials as a provider for all instances to make it easy. With this, users don't have to set up configuration on Google; Appsmith has already done that for them. Setting up the configuration on Google comes with painful scrutiny, and it’s not for everyone, especially for people who do not deal with tech. “Appsmith’s one-click approval makes it easier,” says Nidhi.

However, this has a downside; Google Sheets on self-hosted instances cannot be used unless they connect to Appsmith’s cloud API.

The engineering team is working on and hopes to solve shortly for storing authentication on a per-user basis. This will allow users to access the part of the sheets they have access to and limit access to those they don't. To read more about the roadmap for features, follow this link.

How to Use Google Sheets Integration on Appsmith

With Appsmith's inbuilt Google Sheet Integration Plugin, you can use any Google Sheet as a data source or a backend to build robust applications.
1 Set-up Google Sheets PluginCreate a new account on Appsmith (it’s free!), if you are already an existing login 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 Widgets, APIs, and DB Queries.
4 Click on the + icon next to the APIs section and choose the Google Sheets option. Next, click on the New Datasource button, set the scope to Read and Write, and click Authorise.
5 This will ask us to log in from our Google Account, choose the account we want to access Google Sheets, and log in. After successful authorization, this will redirect back to your Appsmith account.
6 Now, you’ll find your Google Sheets Datasource under your APIs, and you can create the necessary queries by choosing this data source.

Excellent; now that you’ve completed the set-up, follow the instructions in our docs and get started on your app!

Learn How to Make an App with Google Sheets

Are you interested in learning more about our engineering processes? Follow us on Twitter and Linkedin to stay tuned!

Write to me, vishnupriya@appsmith.com, and I’d love to get to know what you’re building with Appsmith!

We're launching the Appsmith Writers Program!

Vishnupriya Bhandaram — Wed, 22 Sep 2021 01:38:30 +0000

Are you an engineer who enjoys creating content and sharing your knowledge with the world? We'd love to talk to you!

We've been creating a lot of content at Appsmith over the last few months for our growing audience of developers to educate them and share our knowledge with them. You can check it out on our Youtube or our blog. As an open-source project, we don't just want to share our codebase with our community but also our collective knowledge.

What is the Appsmith Writers Program?

At Appsmith, we want to work with engineers who love writing or creating videos. Whether you're a veteran of the trade or a young student just starting out, we'd love to hear from you.

And of course, pay you for the work you do.

Topics that excite us are internal tools, low code, open-source, databases, application performance, engineering best practices, JavaScript. And needless to say, newer ways to use Appsmith.

All that we care about is whether you can write in-depth and in detail. We're looking for long-form pieces which help educate our community (1500 words and up).

We don't care about your style and grammar. We've got a great editorial team to help with that.

Is it paid?

Yes! We pay anywhere between $200-$400 for content created (video, templates, blog posts, tutorials).

What kind of content should I send in?**

Below are the types of content we're most excited about:

Blog Post / Templates

A tutorial involving Appsmith. Some examples here, here, and here.
A how-to guide explaining some of Appsmith's features. An example here.
A forkable template (for example, here's a template of a standup app). The ideal template will include a database (check out all databases supported here)+ some API integration. We connect to most REST APIs.

If you want to write an engineering post that could be relevant for Appsmith's audience of backend developers but not directly about Appsmith (for example, this), we'd be very excited to discuss those too.

If your proposal is accepted, we’ll feature it on our website with your name and share it with our rapidly growing open-source community.

Video

These videos can fall into different categories:

A Tutorial where you show how you built something using Appsmith.
A How-to guide explaining some of Appsmith's features.

If you want to have an ongoing engagement with Appsmith, where you want to create Youtube videos on broader engineering topics (not directly related to Appsmith) on the Appsmith Youtube channel, please do reach out as well; we can figure something out.

Great, how do I get started?

The best way is to fill our form to share an outline, and we can take it from there. (Note: We're going to only consider previously unpublished content)

If you're keen on exploring this opportunity but don't have a clear idea of what you'd like to write, we're happy to help! Just mention this in the form, and we will get back to you ASAP!

Building a Shopify Admin Panel: A Step by Step Guide

Vishnupriya Bhandaram — Thu, 16 Sep 2021 08:45:14 +0000

This post has been written by one of Appsmith's contributors, Joseph Petty. This was previously published here.

Hey everyone! Joseph here from GreenFlux, LLC. I'm a Shopify Partner Developer and a HUGE fan of Appsmith! 😻

In fact, I've written several blog posts on Appsmith integrations already, but today will be my first post officially written for Appsmith! I'm super excited to be working with the Appsmith team and sharing my API integration experience with the community.

I've done a lot of work with the Shopify API over the last few years, but only recently discovered Appsmith. So I wanted to put together this guide with some specific use-cases that help solve some common business problems.

but before I get to those specific use-cases...

This guide is written for the Shopify API, but the build process can easily be applied to any API.

The Authentication steps may be different, but most of this guide will work with any API to:

Perform CRUD (Create/Read/Update/Delete) operations with the API directly
Download/sync API-GET request to Google Sheets
Find/Modify/Delete a row in Google Sheets based on API data
Send data from Google Sheets to Shopify (Create, or Update existing)

Now for the specific use-cases

Most shops only take orders for products that they have in inventory, then ship them out as the orders come in. But some businesses wait to begin 'creating' the product until an order has been placed. Think T-shirt printing, custom-built bikes/skateboards, and even wholesale produce and flowers that are only harvested after an order is placed.

That creation/ harvest process can have several steps and require multiple employees, and even have an approval process with different access levels. Lots of industries are creating products to-order, and need a way to track this process without sharing the Shopify admin login to all users.

☝️ So let's say you have a Shopify store that sells high-tech vehicle upgrades! 🛸

And you have a team of workers in three departments:

[Assembly, Quality Control, Shipping]

Use Case	Description
Case 1	Track production with Google Sheets data linked to each order
Case 2	Safely enable workers to edit orders (mark shipped) without sharing Shopify login

Let's get to building! 🛠

Start by creating a Google Sheet for Workers and another for Assignments.
Or you can copy this public sample sheet .

Next, you'll want to enable the Shopify API.

Login to Shopify and click Apps on the left sidebar
Scroll down and click manage private apps
Create a new private app
Click Show inactive Admin API permissions to expand
Select: Orders = Read and write
Save and note the new API Key and Password

Ok, on to Appsmith

Add Shopify Datasource

Create a new App (from Drag & Drop)
Under Datasources, create a new Authenticated API
Set the URL to https://YOUR_STORE_NAME.myshopify.com/admin/api/API_VERSION/

https://greenfluxtest.myshopify.com/admin/api/2021-07/

Set Authentication Type to Basic
Enter the API Key (as the username) and the password, and SAVE.

Add Query

Next let's create our first query to GET orders.

Under the Shopify datasource, add a new Query named get_orders
Append the URL with orders.json
Click RUN.

Awesome! Our new app is now making authenticated API calls to Shopify and returning data.

Note the response format; All orders are nested inside the "orders" property.

{
  "orders":
    [
      // ARRAY OF JSON OBJECTS
      {Order1},
      {Order2},
      {Order3}...
    ]
}

Copy the API and rename get_products, then change orders to products in the endpoint URL.

Next, let's add a few widgets to display the data

Add Table Widget

Click the Widgets + on the left sidebar, and drag in a new table widget
In the table's settings panel, click the / (Slash) command
Select the get_orders API.
Add .orders to bind the Table Widget to the order array from response body.

Alright, now to connect the Google Sheet data.

Add Google Sheets APIs

If this is your first time connecting Google Sheets to Appsmith, start out by adding a new datasource:

Datasources + > Create New > Google Sheets

Appsmith Docs

Then follow the prompts and authorize Appsmith to connect to your Google account.

Add new Query under Google Sheets datasource, named get_workers
Enter URL for your spreadsheet
Enter worker for the sheet name
Set Row offset to 0 and Row Limit to 50.
RUN.

Next, copy the get_workers API, rename get_assignments and change the sheet name.

Ok, so far we have GET requests working to Shopify and Google Sheets.

Go ahead and add a few more Table Widgets for Workers and Assignments using the same method above.

Now we need a way to feed the get_orders request to the orders sheet.

Add a POST (Create) API for Google Sheets

Appsmith has a full list of methods available for performing CRUD operations with Google Sheets. We could use Insert sheet row to add orders one at a time, but the get_orders API returns an array of orders.

Now, the Bulk Insert Rows method expects an array of objects, with keys that match the the sheet's column names:

[
  {
    header1:value,
    header2:value,
    header3:value
  },
  ...{more objects},
]

And the map() method returns an array.

So we can map()! over the get_orders data and build our rows.

Detailed explanation here:
https://blog.greenflux.us/saving-api-response-data-to-google-sheets-with-appsmith

Copy the get_assignments API and rename create_assignments
Change the method to Bulk insert rows
In the Row Object, enter:

{{
get_orders.data.orders.map(
o => {
 return {'id':o.id, 'email':o.email, 'products':o.line_items.map(l => l.name).join()};
}
)
}}

RUN 🚀

SWEET!

All open orders are saved to Google Sheets with a single click!

*But what happens when we run it again? *

Uhhh... now I have two copies of every order.

Hmm... we need a way to tell Shopify what orders we already have, and only download new ones!

Passing values from an API response to a new request

Here's where things get interesting. First we have to get_assignments, then find the max order number that's already in our sheet, and finally, send a new request to Shopify to get new orders after that order number.

Shopify API docs

We can use the since_id parameter to filter the orders that are returned and then save only new orders back to the sheet.

First we need to know the last order number from our sheet. I like to store these values into a separate widget, so I can reference just the name, instead of trying to insert a whole function in place of the ID in the URL.

Add a Text Widget named maxId
Set the Text value to:

{{
get_assignments.data.map(
    o =>{ return o.id}
  )
  .sort().reverse()[0]
}}

Update the get_orders API endpoint

This will produce an array of all order ids, and then sort them in case any of the rows are stored out of order in the sheet. The default sort order is low to high, so reversing and taking the first (zero index [0]) item returns the max value.

Now we're getting somewhere. We can continuously download orders to the order sheet, but what about updating individual rows?

First let's add a few Widgets to view/edit the selected assignment. I've added a Container Widget to the right of the table_assignments, Text Widgets to display the Order# and Products, and Input Widgets for the Worker and Instructions.

Now we can reference the table_assignments.selectedRow properties to populate the default values for our Widgets. This will update the Widgets automatically when the selected row is changed.

Next, let's add a few Widgets to set values in the assignment sheet.

First we want to add a Select Widget (dropdown menu) with all the workers. The Options should contain an array of objects with label and value properties. (literal array, or expression that returns an array).

So you could hard-code the Select Widget's Options:

[
  {
    'label': 'Worker1',
    'value': W00001'
  },
  {...
  }
}

...but wouldn't it be cool if our dropdown could automatically show all the current workers from our workers sheet?!

{{
  get_workers.data.map(
    w =>  {return {label:w.name,value:w.id}
    }
  )
}}

EXCELLENT!

Time to test out these new input fields!

Update a row in Google Sheets

Copy the get_assignments API and rename update_assignment
Change the method to Update a sheet row
Copy a single object from the get_assignments response to the update_assignment Row Object
Add commas between properties
Add references to the new Widgets' text values

NOTE: I removed the id and products because these should not be edited once downloaded. Our template is only for updating the worker_id and associated timestamps/ instructions.

Fulfill an Order in Shopify

Ok, we're almost there! The last piece we need is a way to fulfill an order in Shopify.

NOTE: Orders can have multiple fulfillments per line item and different status for each fulfillment.
To keep this example simple, our app is going to create a single fulfillment per order and ignore partial fulfillments.

This step will be using the /fulfillments.json endpoint, and we need the location id. You can get this through the API, but the easiest way is to view the location and get the id from the URL.

In Shopify, click Settings on left sidebar
Click Locations
Click the location you want to use for fulfillments
Copy the id from the URL

We want the employees to be able to select a row in the app and click 'Fulfill Order' without giving them full access to the Shopify admin account.

In other words, we want to use data from the selectedRow of the table_assignments to send a POST request to Shopify.

Under the Shopify datasource, add a new Query named create_fulfillment
Set the URL to orders/{{Number(table_assignments.selectedRow.id)}}/fulfillments.json
Set the body to:

{
  "fulfillment": {
    "location_id": YOUR_LOCATION_ID,
    "notify_customer": true
  }
}

Add a button to run the create_fulfillment API
MAKE IT SO! 🛸

WHEW! What an adventure!

Thanks for taking this journey with me on my first official Appsmith post!

This is just a small sample of the awesome power of Appsmith. There's so much more we could do from here, like connecting another API and sending Slack messages or emails to each worker when an order is assigned, emailing customers pictures of the products during production, or calculating average processing times per worker or product.

How We Made Connecting Data to Widgets Much Easier

Vishnupriya Bhandaram — Tue, 14 Sep 2021 06:55:03 +0000

What do we want our users to do on Appsmith? The obvious answer is that we want them to build fantastic internal apps for their organizations super fast. But what we're doing solves a more significant and perhaps intangible problem: avoiding repetitive and tedious grunt work. Developers don't want to do this, and we want to enable them to get to solutions faster. For this, Appsmith needs to be smarter and better too. The first step is to have a smooth onboarding experience — it's good for our users and great for us!

However, we noticed that users couldn't easily find critical elements essential to understanding how Appsmith works.

Our data connectors were hidden, and there were no obvious means of accessing them. There were a few more glaring pain points; for example, we felt that our widgets with pre-filled data, discouraged users from playing around with the platform. And even if our users were landing on the queries section, the flow was confusing and switching between data queries and widgets was non-intuitive. The product was not hitting the intended direction; to address all this confusion and more, we changed the navigation experience.

Simply put, our overarching goal with this update was to get people to connect their data to the UI.

Widget ➡️ Datasources ➡️ Querying Data ➡️ Connecting Widget
With this flow in mind, we made several changes to the navigation experience.

Users can now:

Connect data sources faster
Find the right widget for available data
See relationships between UI and Data clearly

In this blog, we will talk about Appsmith's new navigation experience and how our design and platform pods went about the production process. Hopefully, you'll also get an inside look into the collaborative engineering and design practices here at Appsmith!

Merging APIs and DB Queries under Datasources

When a user is in an exploratory stage, what do they do first? Build UI or connect data sources? For us, it was a little bit of a chicken and an egg situation. We wanted to limit the fields to not overwhelm users with too many options and manage the flow into smaller edible nuggets.

Having APIs as a separate entity was counterintuitive. Merging it under data sources makes it easier for discovery and helps the user understand that all data comes from a data source — whether it's an API or a database query.

Along with this, we've also added subtle nudges and prompts such as this:

This reinforces the importance of connecting data sources to get apps working. ‍

The Right Widget for Your Data ‍

If you're confused about finding the best way to represent available data (a chart or a table?), the Appsmith platform can now predict the best widget based on your data.

This feature helps users narrow down options based on the type of data they have, speeding up the process of building an app. Earlier, users had to add the data source, write the query, go back to the canvas, scout for the right widget, (deep breath), drop it, and then bind it. With the new and improved flow, users can add data sources, write queries, select recommended widgets. Appsmith does everything else!‍

Clarity on Entity Relationships‍

Once you're inside a widget, it's essential to see how your data is linked to each other. We realized that when there are multiple data sources and queries on your application, sometimes it might be hard to navigate between data sources. So, we’ve added a way to be able to see entity relationships more clearly. With the upgraded new navigation experience, all the defined queries are listed on the widgets under incoming entities; you can directly choose (what) without writing JS bindings. When the widget performs any actions, for example, when a button is clicked, or a row is selected, these queries can now be seen under the outgoing entities section.

Make things more obvious

If there's one thing we've come to believe in after spending almost two months on this update, it's that keeping things simple tends to go a long way. This reflects even in the copy

Bind Data — Connect Data

APIs and DB Queries — Datasources

We introduced slash commands as a quicker and simpler way to connect widgets to a data source. Now you can trigger commands by typing "/" and use it anywhere you're writing Javascript (within moustache bindings) on Appsmith.

Slash commands also give a heads up for developers to start from somewhere. They become the way to initiate writing custom code and our auto-complete feature speeds up the process!

Our efforts with this new navigation experience were to make things simple and enable our users to find and understand features easily. As an open-source organization, we will always be a work in progress powered by our incredible community. We will strive to keep improving Appsmith!

‍If this new navigation experience helped you do let us know! As always, we would love to learn more about you and what you're building using Appsmith; please feel free to email me (vishnupriya@appsmith.com).

Become a Betasmith

Have a say in shaping Appsmith's future!‍

Join our community‍
Contribute or generally hang out with us!‍

Sign up for Events‍
Stay up to date on new features, live demos, etc.

How Tiger Global funded Fyle Empowered Their Customer Success Team with Appsmith

Vishnupriya Bhandaram — Tue, 14 Sep 2021 06:49:53 +0000

Fyle is a software product that helps management and finance teams eliminate manual work. Fyle’s global expense management system integrates accounting software and credit card reconciliation, among other features. With Fyle, employees can track their business expenses, apply for reimbursements on the go, etc. Fyle has over 300 customers in more than 80 countries and is backed by marquee investors like Tiger Global.

They are a team of 80 employees (and counting) who believe that business expenses should be the least complicated thing about businesses. We spoke to Jatin Sharma, a software engineer, and Gokul Kathiresan (Engineering Manager) in Fyle’s Operations Engineering team about how they automated some of their crucial internal processes with Appsmith.

Key Successes for Fyle with Appsmith:

Automated 30% of Service Requests in a quarter
Reduced Engineering Workload by 30%; freeing up their time to focus on core goals

Solid Internal Processes Lead to Great External Success

Streamlining internal processes is crucial to any company, and it reflects on your deliverables and overall company performance. If you’re able to manage those micro-processes, it improves the entire working environment, believes Jatin. “We know that when we build something in-house, we have to divert our attention and focus on maintaining that particular product and also scaling that product over time, and it can become a problem,” he adds.

When companies scale — especially a fast-growing next-generation expense management software like Fyle — some operations become redundant, which employees have to perform manually and frequently. These activities are crucial for the flow of information in an organization, and a chink in the internal system can have severe repercussions for the end product. From an organizational perspective, the customer side of the product takes up a bulk of the engineering team’s efforts. Then there’s the internal platform engineering, dev-ops, etc., which is essential and also needs due attention. Effective internal tools/applications can help manage organizations like Fyle manage their engineering resources better.

Fyle’s Internal Challenges

Fyle’s key focus internally is on resolving redundant operations, which are performed manually and frequently. And a part of this vision is to reduce pressure on the engineering team in catering to customer requests or completing operations required by the non-engineering team—avoiding maintaining in-house internal tools that place serious time and effort crunch on the engineering team. More specially, ensuring the smooth functioning of the customer success department. Whenever customers raise queries and requests, a customer success team member would create a “task” on Click Up (a project management application) and assign it to a member from the engineering team. “The scaling problem is real. Earlier it was a once-a-day activity, where two engineers would look over the requests, but now after going remote, and with the increasing volume of requests, it was affecting the productivity of our engineers,” says Gokul.

When the volume grows, ad-hoc tasks can no longer be possible, and in fact, can be detrimental to the functioning of an organization. At Fyle, the increased volume of requests put pressure on the engineering teams leading to backlogs and delays. It became urgent to resolve this issue for both the engineering and customer success teams. This is where Appsmith entered the picture by being the platform that could help the customer success team self-serve the requests without the intervention of the engineering team.

Why Fyle Chose Appsmith

Jatin’s team at Fyle was already looking for a robust internal tool that could solve their problem of reducing engineering dependencies for day-to-day internal operations. They also tried Retool, Internal, among others, and chose to go with Appsmith for the following reasons:

Easy to evaluate

“We were able to do a hands-on demo quickly, and it made us understand what we were getting and what we could do with Appsmith.”

Documentation

“The developer’s documentation was great, and it provided easy steps to try out Appsmith. This was really helpful. It also has simple curl scripts for installing the platform via Docker, Kubernetes, etc.” ‍

Easy to Build‍

“It’s so easy to build an app on Appsmith, that too in just less than 10 minutes.‍
Deploy on Private Instance

“We loved that we could deploy Appsmith on our local/private instance and build an app. For us, it was an important concern because it would involve our production database credentials which we were unwilling to share.”‍

*Open-Source *

“Appsmith is an open-source product with all the basic features similar to other paid products in the market. It has been a great problem solver for us.”

Helpful Community

“Appmsith has a great and helpful community on Discord, and getting quick responses there helped us a lot!”

What did Fyle Build with Appsmith? ‍

Fyle created an internal service request management system for the customer success team. With this app, they could validate requests from organizations and resolve those requests with just a click of a button. This process has ensured that such requests get resolved in seconds. This application, built on Appsmith, provides Fyle’s customer success team basic information about a customer to help debug and exclude PII data. It allows them to enable/disable some features and settings of the product for a specific set of customers. This enabled the team to self-serve customers’ service requests without depending on the engineering team. This automation has reduced the turnaround time (TAT) of serving a customer’s service request from a few days to just a few seconds.

See the app in action:

%[https://www.youtube.com/watch?v=0c0C-6ygC2Y&ab_channel=Appsmith]

According to Gokul, out of the 300 service requests received after deploying the app built on Appsmith, customer success team members could resolve 100 by themselves! Earlier, a customer would raise a request, following which the customer success personnel would add and flag it to the engineering team, who would then add it to their list of tasks, resolve the issue, indulge in back and forth. Then it would finally get resolved in approximately two to three days! Phew! Picture more than ten people following up with engineers who have workloads filled to the brim; such requests would invariably fall through the cracks.

With Appsmith, Fyle has automated 30% of the total SRs created in this quarter alone by using Appsmith, saving valuable time and bandwidth for their engineering team to focus on growth.

An organization with the right idea about scaling up has a good understanding of the right foundations. Fyle is one such example. The 300 service requests, in all likelihood, will become 1000, 10000, and counting. At Fyle, by investing early on in an operations engineering team and relying on products that automate this, they are fully prepared for future growth and ensuring that their end customer is served better—at the same time, not burdening the wider engineering teams.

We can’t wait to hear about what they build next!

Liked what you read? Why not take Appsmith for a spin?

Build Tools for Your Fitness Start-up with Appsmith

Vishnupriya Bhandaram — Tue, 14 Sep 2021 06:46:29 +0000

This week, we’re back to feature apps made by Appsmith’s newest team members! Each new team member has to make an app on Appsmith as part of the hazing welcoming ritual! 😬 We’re a fully remote distributed organization with colleagues in more than five countries, and this is a fun and educational way of onboarding new members onto the team. And of course, it makes sense for people working on making Appsmith better to use it, understand it, and know the framework’s shortcomings. These apps made during the onboarding process can range from functional to fun or straight-up silly!

This week, we’re featuring our colleague Ashit Rath’s app. Ashit is a Sr. Frontend Engineer from Bhubaneswar in India. He has experience in building scalable web applications, and he loves to travel. You can follow his work here.

Ashit decided to make a simple food nutrition app to list items, and it would show you the nutrition details. Ashit’s recipe analyzer is an excellent example of the range of applications you can make on Appsmith.

During the app-making process, Ashit found the following things great about Appsmith:

Composing UI widgets was very intuitive
Adding API data source was super easy
Good performance overall

In the next part of the blog, Ashit has listed the steps to build the recipe analyzer.

Getting Started

This short tutorial uses the cloud version of Appsmith. However, you can always export and import Appsmith apps to different environments (cloud, self-hosted, local). The recommended way to use Appsmith is via Docker; follow the documentation here for detailed instructions if you want to build locally.

Create a new account or sign in with an existing account, redirecting it to our dashboard.
Click on Create New under your organization, and this will create a new Appsmith application.
Rename the application to GitHub Organisation Dashboard (or any name you’d like) by simply double-clicking on the existing one.
On the left, find the entity explorer; this is where you can manage all the widgets and data sources of the entire application.

There are three parts to building this Recipe Analyzer app:

API for nutritional data
Connecting the form to get the data from API
Crunching numbers to show the nutrition

API for nutritional data

‍
The API that we have used here comes from Edamam. They have a robust API for any kind of food/recipe/ingredient level search.

Sign up for their Nutrition Analysis API as a Developer account to try out without a subscription. The Developer account might give out less information than it should, but it should be fine for our use case.

Once signed up, we need to generate the API key from here.

Click the "Create New Application",
Select "Nutrition Analysis API"
Fill out the form and hit "Create Application"
Once the application has been created; you would be greeted with the application API details page. Keep "Application Keys" and "Application ID" in place. We would need it in the next step.

Connecting the form to get the data from API

‍
We have the API key from the previous step, so now we will use that to make API calls to Edamam for our searches.

Now head over to Appsmith to create a data source.

Create a new Datasource by clicking the + button on the sidebar.
Click "Create new" for a new data source
Click "Create new API"
Change the API Name to nutrition_api, it would be "Api1" by default.
Click on the "GET", a dropdown should open up and select "POST".
Add the following to the URL bar; replace with the "Application ID" and with the "Application Keys" that we got from the previous step

https://api.edamam.com/api/nutrition-details?app_id=<application id>&app_key=<application key>

This should create our data source for fetching the nutrition data.

Let's create a new input and connect it to the data source to fetch.

Add a new text widget and name it as FoodInput
Resize the text widget according to need and add the following to the Placeholder property


1 cup rice

1/2 cup dal

100gm chicken

Now add a new button widget; on clicking this, we need to trigger an API request (to the API we added in the previous section).
Open the button widget properties and scroll down to Actions section; there would be an onClick property. Click the JS and a blank text box should open up
Add the following lines to the text box opened in the previous step


{{

(function () {

        if (FoodInput.text.trim()) {

            const foodInputArray = FoodInput.text.split("\\n")

            storeValue('foodInputArray', foodInputArray)

            const onSuccess = () => {}

            const onFailure = (response) => {

                showAlert('Invalid quantity or name.', 'warning')

            }

            nutrition_api.run(onSuccess, onFailure)

        } else {

            showAlert('Please enter something to analyze', 'warning')

        }

})()

}}

This code basically takes the FoodInput text, modifies into proper API request format (array of string), stores the value in global storage using (setValue) and triggers the nutrition_api (nutrition_api.run)

That's it; we have connected our API and our form to send requests and get our awesome nutrition data!.

‍

Crunching numbers to show nutrition values

‍

Now we create the part where we display the data from Edamam and show it in a neat format.

All of the data points are calculated in a similar fashion, so we will demonstrate the only one just to get the idea behind it.

Let's consider Total Fat, the value for it can be derived by having the following code in the text property.


{{(function() {

    if (!nutrition_api.data.totalNutrients?.FAT?.quantity) return "-";



    return parseFloat(nutrition_api.data.totalNutrients.FAT.quantity).toFixed(2) + nutrition_api.data.totalNutrients.FAT.unit

})()}}

This first checks if totalNutrients.FAT.quantity exists or not; if not, then we display "-.” If it exists, then parse the value and append the unit to it

So "10.12520" becomes 10.12 gm (gm comes from nutrition_api.data.totalNutrients.FAT.unit)

Similarly, the Total Fat Daily Percentage can be displayed using the same logic.


{{(function() {

    if (!Api1.data?.totalDaily?.FAT?.quantity) return "-";



    return parseInt(Api1.data.totalDaily.FAT.quantity) + "%"

})()}}

We build the whole UI by adding similar code but changing the key from FAT to whatever macro/micronutrient is required to be shown.

Wasn’t that simple?

This recipe analyzer can be used as part of the many tools a fitness company/studio can give its members. We took the recipe analyzer a few steps further and envisioned the various other things to help a fledgling fitness studio tech up.

See the screenshots below to get a better idea:

You can make a fully automated system to keep track of progress for clients, with our modal widget, you can automate payment collections etc. Just connect your data source to get started!

Connect your database from Airtable or Google Sheets and start building!

For a detailed tutorial on how to build dashboards and admin panels, follow this link.

Have you made something using Appsmith? Write to me (vishnupriya@appsmith.com), and I would love to feature you on our blog! If you’re interested in building an app on Appsmith, sign up today . We have docs, tutorials, and live help on our vibrant Discord community to help you along the way. So go ahead, put your ideas out there!