๐ŸŽฏAPI | No-code Budget Expense App

๐ŸŽฏ Purpose of this tutorial

This tutorial will show you how to set up the framework for a no-code/ low-code mobile budget expense app that can leverage your Investecโ€™s Programmable Banking transactions with Google Sheets and Glide.

The idea of doing it as a no-code/low-code challenge in 90 mins is not to get all fancy and technical. But to realise that creating something with real-world implications is fun - who knows - it might spark a cool idea for later! Itโ€™s just for funsies.

Share your progress/ final build in Slack - we would love to see how youโ€™ve built on this further! ๐Ÿคฉ

By the end of this build tutorial, you should be able to:

  1. Explore what Programmable Banking means for you,

  2. Discover different ways to engage with your financial well-being,

  3. Design a low-code budget expense app POC.

๐Ÿ“บ Watch the whole build in realtime:

What you are going to need:

๐Ÿช– The Job To Be Done:

  • Create a mobile app where I can log expenses and track current budgets.

  • Be able to identify which expenses are recurring.

  • I can easily connect it to my Investec account to see expenses at a glance.

๐ŸŒฎ The super short version:

To create a mobile budget expense application using Google Sheets and Glide, follow these steps:\

  1. First, create a Google Sheet to be the backend data storage for your budget expense app. In the sheet, create columns for the different types of expenses that you want to track, such as groceries, transportation, and entertainment.

  2. Next, create a Glide account and sign in to the Glide website.

  3. Click the "Create App" button to create a new app.

  4. In the "Create an App" dialogue box, choose the "Import a Google Sheet" option and select the budget expense sheet you created in step 1.

  5. Glide will automatically generate an app based on the data in your Google Sheets. You can customise the app by clicking on the different elements in the app preview and using the options in the right-side panel to change their appearance and behaviour.

  6. Once satisfied with the app, click the "Publish" button to publish it.

  7. Glide will generate a URL for your app that you can use to access it from any device. You can also download the Glide app from the App Store or Google Play and use it to access your app on your mobile device.\

Share your awesome build with the community in #02_buildspace. โœจ

๐ŸŒˆ The long version:

Step 1: Plan your route

Plan out what screens you want to see and how your data would be structured.

๐Ÿ‘‰ Here is an example on a Miro Board.

Step 2: Grab your gear

  • Go to the Build Something Simple section in the community wiki

  • Copy that Google Sheet for Treasury Management

  • Have a poke around the template. Itโ€™s a cool piece of work!

๐Ÿ‡ We can use the treasury management features in this sheet later when we add more features to our app - for now, we are just setting up the groundwork.

Step 3: Build the (data) structures

  • We are building the framework for a budget expense app, so letโ€™s start thinking about the type of data we would like to use.

  • Letโ€™s start by creating two new sheets in our fancy new Workbook to use as a reference table in our app.

    • App Items (These are budget expense apps weโ€™ll be capturing)

    • App Cat (These are the categories weโ€™ll use in our application)

  • Letโ€™s start putting in some data to work with App Cat.

    • Start with the categories you want to capture

    • Maybe a cool emoji for easier reference?

    • And a budget limit for that category

    • We can add pretty pictures later.

  • In App Items, we can populate it with some dummy data for now.

    • Name

    • Cost

    • Category & Icon (๐Ÿ’กPro Tip: We can copy&paste from the category sheet)

Step 4: Making the data work

  • Got to Glide here

  • Create a new mobile app ๐Ÿ‘‡

  • Connect to your Googe Sheets app

    • Itโ€™s going to pull in all your sheets from the Workbook

    • We only need our _App Ca_t and App Items sheets for now.

You can follow ๐Ÿ“ฝ๏ธ this video to see how to add all the fancy reference tables and maths youโ€™ll need to bring your app to life fully!

Step 5: Making it pretty

  • Awesome! Now that we have all our data the way we want it ๐Ÿ“ฝ๏ธ letโ€™s start making the screens.

    • Remove all the current sections there, and weโ€™ll start to create our own.

  • We planned on creating a couple of basic pages to start;

  • We still have some time, so weโ€™ll throw in;

Step 6: The journey continues

  • Youโ€™ve created a really cool base with Google Sheets & Glide. ๐Ÿ™Œ

  • Drop a screenshot/ link in #02_buildspace. We would love to see it! How far can you take this?

โœจ There are a million and one more things you can do next. โœจ

  • Live data sync with your own Investec account via the Google sheet

  • Trigger transfer between accounts when budget limits are exceeded or below expected.

  • Use GPT-3/ other AI models to hyper-categorise your transactions.

Last updated