Overview

Many people believe that programming experience is a necessary skill for building apps. However, according to Gartner, “by 2024, low-code application development will be responsible for more than 65% of application development activity”, which means that the future of app building will be simple interfaces that help people from both technical and non-technical backgrounds to build apps – without requiring programming or code.

AWS recently launched Amazon Honeycode, a user-friendly “no-code” app development platform. Honeycode helps customers build custom productivity apps for mobile and web—without programming. Honeycode is free and available for both iOS and Android.

Benefits of using Honeycode

• Build web and mobile apps that work on desktop, iOS, and Android mobile devices. No programming is needed, so anyone can be an app builder.
• Honeycode apps help teams stay in the loop. That’s because all teammates have access to the same data, updated in real-time.
• Teams stay focused because Honeycode apps can be personalized to show data that’s relevant to each team member.
• With Honeycode, you can automate manual steps. Notify the team about updates or remind people when it’s their turn to take action.

The best way to learn Honeycode is by trying it out. Traditionally, you need the coding skills, good understanding of databases and user interface to develop the application. With Honeycode, you do not need to write any code, also you don’t need to create or maintain any database. In this blog, you will learn how to build an expense tracking app in Honeycode. An expense tracker is a simple but widely used tool. In this tutorial you’ll learn how to build one that can be used on mobile and web— without writing any lines of code. All you need are some basic spreadsheet skills

Sign up for a free Amazon Honeycode account or, if you already have one, sign in.

Prerequisite

You need to have an Honeycode account. You can sign up for a free Amazon Honeycode account

Step-by-step guide

1. Create a workbook and set up your tables
2. Use the wizard to build the app
3. Add app objects and customize
4. Test your app

Step 1: Create a Workbook and set up Tables

1. Open Honeycode and click on Create workbook > Start from scratch

2. In the following window, give the workbook a name. In this case, let’s name it Expense_Tracker.

3. A table is automatically created in the Expenses workbook. This table stores expense records, as entered by your app users. Rename the table as Expense_Records.

Tip: In Honeycode, tables hold the data that powers apps. Tables can be used to filter, sort, summarize, link data, trigger automations, and run calculations.

4. By default, your table is created with three columns. Add two more columns to the table and give them the following headers:

• Submitted by
• Type
• Date
• Description
• Amount

5. Next, let’s delete any extra rows. To do this, select the blank rows, right click, and select Delete Table Rows

6. Now, let’s create a new table to store the expense types. In the left navigation bar, click the table icon and select +Add a blank table.

7. Rename the table as Exp_Type. This table contains one column with two types of expenses, personal and business. These options appear in the app as a dropdown menu. In Honeycode they are called a picklist. Delete any extra columns or rows.

8. To display total expenses by expense type let’s create another table. Name it Total_Exp.
9. Label two columns with the headers Personal and Business. These columns show the corresponding total amounts for each in the Expense_Records table.

In order to calculate the total sum of each expense type, use the SUMIF( ) function. For personal expenses use the following formula:

=SUMIF(Expense_Records[Type],”Personal”,Expense_Records[Amount])

10. To calculate total business expenses, use the formula:

=SUMIF(Expense_Records[Type],”Business”,Expense_Records[Amount])

Step 2: Use the wizard to build your app

1. Now, it’s time to start building the app. From the left navigation bar, click on the Builder icon to open the app builder. Click the + and select Use app wizard.

2. As the data source for your app’s first screen, select the table Expense_Records. Note that all the columns from the Expanse_Records table are in the app preview to the left. These can be rearranged and deleted in the right panel, but for purposes we’ll keep them as is. Change the screen name to Dashboard and then click Next.

3. The next screen we build is for the purpose of displaying individual expense records. This type of screen is also called a detail screen. Click the pencil icon next to each column name to let app users edit these fields. Leave the Submitted by column as is. Go ahead and make the rest of the details editable.

Note that a Delete button has been automatically added. Click Next.

4. This screen is where your app users will add their expense reports. You’ll recognize this type of screen as a form. Rename it as Expense Form.

Note that a Cancel and Done button have automatically been added. Later, we’ll see how to change the button text. Click Apply.

5. In the final step of the app wizard, name your app and add additional screens, if you want. Once you exit the app wizard, make further changes and additions in the builder as necessary. Click View app.

6. Look at your web app, it’s already live and almost ready to share. In the next step we add a few customizations to tweak it to our specific needs.

Step 3: Add Objects and customize

1. Leave the web app and go back to the Builder tab in your browser. From the left navigation click the apps icon and select the Expense Tracker

2. Select the Dashboard This is where we display the totals for business and personal expenses for each person. Click the +Add objects button and select content box. The content box will act as a label for total personal expenses, so type Personal in the box. Next, add a data cell and place it next to the content box.
3. Let’s repeat for businesses expenses. Add a content box and type Business. Next, add a data cell next to it. We want the data cells to display values from the personal and business columns of the Total_Exp table. There are a couple ways you can do this.

One way is to enter the shared source value as a formula. To display values from the personal column of the Total_Exp table you enter =Total_Exp[Personal]. To show values from the business column, enter the formula =Total_Exp[Business].

Another way to do this is to activate the data view by clicking the expand icon in the lower right corner. Click on the data cell and then select the table and column that you want to use as your data source. In this case the data cell representing personal expenses is bound to cell A2 in the Total_Exp table. Using this method, you’d repeat the step for total business expenses.

Whichever method you chose, the value displayed will show as zero because no expenses have been submitted yet.

4. When someone is using the app we want that person’s name to auto-populate whenever they open the expense form. We do this by using the system variable $[SYS_USER]. This variable refers to the person using the app at a given time.

Click on the data cell $[Submitted By]. In the properties panel set the source type as Variable, and enter the formula =$[SYS_USER]. We don’t want this field to be edited by users, so uncheck the Editable box.

5. Next, we want our users to be able to select the expense type from a picklist menu. To create the dropdown UI in the app, we’ll format the data cell to select Exp_Type as the source table.

Tip: The rowlink format accesses an entire row of data from a single cell. In apps, rowlink formats are rendered as a picklist menu, also known as a dropdown.

6. Let’s edit the text for the Done button. Double click the button, or right-click and select Edit. Change it from Done to Submit.

7. We don’t want app users to submit partially filled-out forms. Use conditional visibility by adding another Submit button that appears inactive until the form has been completely filled. From the +Add objects menu, add a third button and change the text to Submit. Go to the toolbar and use the color fill tool to select the color gray.

7. Select the new button and under the Display tab, enter the formula:

=OR($[Type]=””$[Date]=””,$[Description]=””,$[Amount]=””)

This visibility condition keeps the Submit button in an inactive gray state until all the form fields are filled. It prevents users from submitting any blank entries.

9. For the active-state submit button select the blue Submit button and enter the formula: =AND($[Type]<>””,$[Date]<>””,$[Description]<>””,$[Amount]<>””).

This visibility condition will display the Submit button in its active state only when all fields are filled.

10. Since we’re only displaying the user’s own expense record, we don’t need to display their name in the Expense Detail screen. Select the block at the top and set the visibility to =FALSE().

Nice work! Now we’re ready to do some testing.

Step 4: Test the app

In the next few screenshots, we’ve added some styling to the app. Feel free to experiment with font and color until you find a combo you like.

1. Open the app on web or mobile. The first screen you’ll see is the home screen, which we named as Dashbaord. Below screenshot is what it looks like without any expense reports submitted. Click +Add to go to the form screen and submit an entry.

2. When you get to the form screen, the user’s name is automatically populated. The next field, expense type, is powered by a data cell formatted as a rowlink. But, to the app user it just looks like a picklist menu. Fill out the form.

3. Note that once the form is all filled out, the Submit button is activated. Click the Submit On the back end, data is immediately pushed to your Expense_Records table, and the app navigates back to the dashboard.

4. On the back end, data is immediately pushed to your Expense_Records table.

5. In the app, you’re navigated back to the dashboard. Check it out! Our new record is immediately visible in the app, too.

6. Here we added a couple more records. As you can see, the dashboard shows the total expense by type.

7. Go into the expense detail page by clicking on any of the expenses. It shows the expense details with the option to edit or delete.
8. Once edited or deleted, the app navigates to the home screen and the expense gets removed from the dashboard and records table. The total is adjusted accordingly.

API Integration

Honeycode provides APIs that would allow experienced developers to pull in data programmatically using AWS CLI or Python SDK. GetScreenData and InvokeScreenAutomation allows users to programmatically interact with Honeycode apps. The APIs can be used to read, write, update or delete data stored in Honeycode workbooks as users interact with Honeycode apps. External applications also use the APIs to interact with Honeycode-built apps.

WORKBOOK AND APPLICATION SHARING

With Honeycode, it is very easy to share your workbook and the app with your colleagues.

1. To share the workbook, you can select a workbook and click on Share button.

2. Next, you need to provide the email address of your team member in the ‘Share with’ field and click on Update

Cost of running the application

Traditionally you’d manage an infrastructure to create and host the application. Amazon Honeycode is free to use for teams with up to 20 members and 2,500 rows per workbook. You can upgrade to a paid plan when you need additional capacity, please refer to the pricing page for more information.

Cleanup

If you want to remove this workbook and its associated apps, you can do so by deleting as below:

Conclusion

We witnessed how no-code apps can be developed within a short time without having any app development skills. You can customize these apps at any time, and the changes will be deployed immediately. Visit the Honeycode community to post your questions, find Honeycode announcements, access Honeycode courses, read and watch how-to articles and videos, and find other resources.