Skip to content

Latest commit

 

History

History
145 lines (100 loc) · 7.5 KB

api-or-no-code-budget-expense-app.md

File metadata and controls

145 lines (100 loc) · 7.5 KB
Raw

🎯 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.

{% hint style="info" %} 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! 🤩 {% endhint %}

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:

{% embed url="https://www.loom.com/share/b1c73f42d5b041d599daa9a265f0eaf6" %} 🌈 Pro Tip: Speed up the vid to get to the good bits. {% endembed %}

What you are going to need:

🪖 The Job To Be Done:

{% hint style="success" %}

  • 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. {% endhint %}

🌮 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!

{% hint style="success" %} 🐇 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. {% endhint %}

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)

🗂️ Create your sheets for Categories and Items

  • 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 (:bulb:Pro Tip: We can copy&paste from the category sheet)

Step 4: Making the data work

👍 Give your new app a name and select Glide 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.

{% hint style="info" %} 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! {% endhint %}

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;
  • An Expense screen (To see a running list of all expenses)
  • A Categories screen (To see what’s been spent in each category and what’s my budget)
  • An Overview screen (To see everything at a glance)
  • We still have some time, so we’ll throw in;
  • A list of expenses per user (So we can see who the big spenders in the household are)
  • A quick form to log expenses on the go (‘cause that’s the point of this app, right?)

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?

{% hint style="info" %} :sparkles: 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. {% endhint %}