Create a SaaS using Appsmith, Google Sheets, and SaaSBox

How to create and launch a SaaS using the Appsmith nocode tool, Google sheets, and SaaSBox

Introduction

This tutorial covers how to create and launch a SaaS business using Google Sheets, Appsmith (a nocode tool) and SaaSBox (your SaaS storefront that handles landing page, login and payments)

This tutorial is aimed at non-programmers / non-technical people who have some exposure to nocode tools and want to sell data that they curate in spreadsheets.

The final solution looks as follows:

Appsmith replaces your backend logic by allowing you to build online apps by drag & drop.

Google sheets in this tutorial becomes your database so you can edit and improve your data.

SaaSBox handles payments, user login and sharing user information with Appsmith, as well as an administrative dashboard for your service, landing page, and the application dashboard.

Getting Started

Getting the Google Sheet

Let's start with the Google Sheets. Copy over the Google Sheet that is shared here to your own google spreadsheets folder: https://docs.google.com/spreadsheets/d/1ebGZ6-ivf_3woBGC4Kz_3217DhjGsefoRu_5iP3nuFQ/edit#gid=0

This is a spreadsheet of the VC funds that have raised less than 200M since 2011. It has real data curated by Shai Goldman.

Creating the Appsmith Application

Appsmith is our application component. It serves the purpose of binding data to user interface widgets and creating an application with them.

Sign up to a cloud instance of Appsmith here: https://appsmith.com, click on Try Cloud and follow the steps.

Setting up the Google Sheet Access

  1. Select Datasources > Google Sheets

  2. Authorize Appsmith to access to your Google Sheets. This will register Google Sheets as a new data source

  3. Go to the API created called API1 that has methods to access Google Sheets.

  4. Update the Query fields as follows:

    1. Spreadsheet URL: Add the Spreadsheet URL you have for the copy of the spreadsheet mentioned earlier.

    2. Table Heading Row Index: This shows the row where the column names for your table starts. In the case of our example this is 8. See the below video how this is determined.

    3. Sheet Name: Go to the lower left corner of your Google Sheet to find the tab with the sheet name. Rename the Sheet name to have no spaces. In our example, we use the name VC_Funds_Data_Sheet. Add this name to Appsmith.

  5. That's it! Click "RUN" and you should see the table data returned from your Google Sheet.

Binding Google Sheet Data to Appsmith Table

  1. Go to Widgets > Drag & Drop a Table widget

  2. Delete the Table Data field entries

  3. Go to the API1 field under "Data Sources" - this was generated for the Google Sheet we added.

  4. Rename AP1 as FetchSheetData

  5. Go back to the Widgets and click on the Table1 settings > Table Data. Add the code {{ FetchSheetData.data }}

  6. Expand the table to the right, you should now see the table populated with columns and rows fetched from the Google Sheet we registered.

  7. Drag and Drop a text widget on top of the table and set the label to read "VC Funds Google Sheet Data"

  8. That's it! Now go t o the top right, click Deploy.

  9. In the top right click the "Share" link and make the application "Public"

  10. You can now view the application from a browser window by copy & pasting the application url.

At this point we have a bare minimum widget based application that can fetch its data from a Google Sheet.

Next let's add the details for a subscription and bind the user data to the Appsmith application.

Setting up SaaSBox

SaaSBox serves as the SaaS storefront. It serves the landing page, signs in users, provides subscriptions, and the dashboard where we embed the Appsmith application.

  1. Sign up for one of the plans at https://saasbox.net/pricing and follow the steps to launch an instance.

  2. Click on domains > subdomain tab in the admin dashboard and set up a subdomain. We use my-appsheets-app.saasbox.net in our example

  3. Click on Inbound API Key > Generate API Key

  4. Click on Outbound JWT secret > Generate JWT Secret

Embedding the Appsmith Application

We are now ready to embed the anonymous application in the SaaSBox dashboard area.

  1. Go back to your Appsmith application, click on "Edit App"

  2. Copy the shareable public link

  3. Go back to SaaSBox > Page Templates > Default > Edit > App folder > main page > Edit

  4. Paste the appsmith link in the line after that says "Your Application goes in here"

  5. Wrap the link around with an iframe in Pug syntax, as follows:

    iframe(src="https://www.loom.com/share/9062d9a7e89f459eb7efb6c7dcc27827", width="100%", height="100%")

  6. Save, and click on "Go To App" in the left on the admin dashboard.

  7. You are now successfully able to see the anonymous Appsmith application in the user dashboard area.

Building per-user Application views by binding the User Data from SaaSBox to the Appsmith Application

The interesting next step we will take is that SaaSBox can bundle user data and their subscription information in one structure, and securely share it with your Appsmith application.

This way, your Appsmith application can serve data back to the user according to who they are and what subscription plan they are on. For example, if they purchased an add-on from you, you can find out about this inside Appsmith and display extra information in your Appsmith application.

Let's set this up.

Set up passing of "One Time Code" to Appsmith:

When loading the application we pass a one time code to Appsmith that identifies the user currently logged in to SaaSBox. Appsmith uses this to retrieve the user information.

  1. Go to Page Templates > Default Template > Edit > App > Main > Edit

  2. Modify the iframe code to add the following code at the end of the iframe:

    ?embed=true&otc="+otc

  3. Save. That's it.

A quick recap on query strings: You can pass parameters in a URL using query strings. The start of the query string parameters is identified by the '?' symbol, followed by symbolname=value patterns, seperated by an ampersand '&' character between each parameter.

In our example, the two parameters we are passing at the end are 'embed=true' and 'otc=<otc value>'. Here is a completed example for the iframe line:

iframe(src="https://app.appsmith.com/applications/618b3296da7cd651ee2730ca/pages/618b3296da7cd651ee2730cc?embed=true&otc="+otc, height="100%" width="100%")

Create user profile widget and fetch, and display data from SaaSBox:

Now we are ready to read user data from SaaSBox inside Appsmith, let's create a User profile widget that can read the current user data:

  1. Drag the table and its title you had created earlier to the bottom of the page canvas.

  2. Drag & drop a container, inside it drag and drop 2 text fields, and an image element.

  3. Rename the top text field as "name", bottom element as "email", and name the image element as user_avatar.

  4. If you prefer, style the text components and select "cover" option on the image to make it look more like a user thumbnail. (See the video below).

Fetching the user data

For the first text field add the code, using the API resource we had created earlier for fetching data from SaaSBox. Here we are looking to read the user's full name.

  1. Name field:

{{fetchUser.data.user.firstname + " " + fetchUser.data.user.lastname }}

2. Email field:

{{fetchUser.data.user.email}}

3. Profile image field:

{{fetchUser.data.user.avatarUrl}}

That's it.

4. Deploy the application.

5. Reload your SaaSBox dashboard page to see that user data has been fetched into Appsmith.

That's it! In this tutorial we covered how to build a basic datasheet application in Appsmith and share user data from SaaSBox with Appsmith. You can now build upon this application with form data, and user-specific data shown for each user.

Last updated