๐ฏ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:
Explore what Programmable Banking means for you,
Discover different ways to engage with your financial well-being,
Design a low-code budget expense app POC.
๐บ Watch the whole build in realtime:
What you are going to need:
Access to Google Sheets
About 90(ish) min of your time
Access to your Investec API (for later)
A free account on Glide
๐ช 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:\
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.
Next, create a Glide account and sign in to the Glide website.
Click the "Create App" button to create a new app.
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.
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.
Once satisfied with the app, click the "Publish" button to publish it.
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!
We need a ๐ฝ๏ธ smart overview screen with more maths to bring everything together. ๐๏ธ
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;
Awesome! Now thatโs done. ๐ฝ๏ธ Letโs publish this!
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