Too much “SaaS” on my plate.

Photo by rupixen.com on Unsplash
Cyclon shoe subscription by on-running.

My subscriptions app.

My Subscriptions app

Tools I used to create this app.

App features/logic.

  • Custom input form: The cool thing here is that with Figma you can design your own custom form. In order to make the form actually work, we will make use of a special Bravo Tag. This Bravo Tag will be added to the layer frame so that Bravo understands that this will be an actual text input form. Learn more about Bravo Tags here.
  • Send data (POST request) from app input form to database (airtable): We will have submit button that after the user completes the form, all data in the input form Bravo will send it (with a POST request) to airtable. This will create a new record in our airtable base.
  • List records (subscriptions) from airtable on the list page of the app: For this, we will create a GET request which basically means every time you go to “current subscriptions” you will be able to see a list of all subscriptions the user has submitted through the input form.
  • DELETE subscriptions from the list: Here we will be adding a delete button besides each list item or in this case each subscription. This will allow the user to delete a subscription from the app list after canceling the subscription.

💡 For the non-technical audience:

Design the app in Figma.

My Subscriptions app

Designing the homepage screen.

  • Add Subscription
  • My Subscriptions
My Subscription app Homescreen Figma setup.
  • Add subscription > takes you to input form screen
  • My Subscriptions > takes you to the subscriptions list screen

Designing the subscriptions list screen.

  • Top bar: A top bar in a mobile app is a fixed container that no matter if you scroll it will remain fixed to the top of the screen. For this I have used the following Bravo Tag: [container:top-bar]. This Tag was added to a second level frame as shown below:
  • Search/filter bar: It will allow the user type and search. The app will display any list item that contains that same text within the list item. In this case, this is a list item:
  • Delete icon: The delete icon works as remote action. This we will look into it later on how it is set up in Bravo. However, it must also carry a Bravo Tag. In this case we have used the Bravo Tag [action:remote]. Since I already know that this is the action I want this button to do, i can already add the Tag to that element in my design.
  • List item: One super amazing feature when designing an app for Bravo is creating lists. You have to remember that when you want to create a list of items that live or come from an external database like in our case airtable, you only need to design the list item once. By designing it once, Bravo will know that all other list items must look the same way as that one you have designed. Bravo will automatically replicate the design however populating it with the corresponding data for each list item. The list item you see here is simply the “default” or design example how i want my list items to look.
My Subscriptions app list page

Designing the “Add Subscription” screen.

  • [component:input-text] & [component:input-number]
    These Tags will tell Bravo that the user will be able to type and input text or numbers in the specifically designed fields.
  • [action:submit]
    This Tag will trigger and action. In this case will tell bravo to send the previously input text and numbers in the specifically designed fields into the airtable database. It very much acts like a “send” button.

Designing the custom loading screen.

Setting up your Airtable.

  • Service . (Service name Eg. of service could be “Netflix”)
  • Renewal. (Renewal date)
  • Amount. (Fee amount/cost)
  • Frequency (Whether it is a monthly or yearly subscription)
  • Deviceid.
    Device id field will be populated with the unique device id corresponding to the mobile device that sends/submits a form. Having this device id, will make sure that the list screen will display only your very own subscriptions. This way, this app can be used by multiple users without having to have a login or profile.
  • Created.
    This field will add the date and time when the record has been created. This is added automatically by airtable with every submission. This will help us sorting the airtable records by creation time.
Airtable

Import your Figma design to Bravo Studio.

App screens in Bravo Studio.

Create your data collection.

Create a new data collection.

Airtable API Wizard success!
Data collection for My Subscription app.
  • POST request
  • GET request
  • DELETE request

GET request.

POST request.

{
"records": [
{
"fields": {
"Service": "${service}",
"Amount": ${amount},
"Renewal": "${renewal}",
"Frequency": "${frequency}",
"Deviceid": "${device.id}"
}
}
]
}
Airtable
Sample values

DELETE request.

list item with delete icon.
Select DELETE to make this a DELETE request.
DELETE records from Airtable API documentation

Binding the input form screen.

Data binding panel.

1. Select the request.

  • Select the Data Collection created from the first drop-down. (For this reason that you must give it a unique name that you can easily recognize).
  • Select the POST request from the second drop-down.

2. Select the visual elements.

Binding the subscriptions list screen.

Data binding panel.

1. Select the request.

  • Select the Data Collection created from the first drop-down.
  • Select the GET request from the second drop-down.

2. Select the visual elements.

Binding the DELETE remote action.

My Subscriptions App made with Bravo Studio.

--

--

--

Business Development at Bravo Studio App www.bravostudio.app

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to choose and hire the best React.js developers for your project

Error Handling Strategies

Sets & Tuples

Amazon Inspector — Continuous Security (automated CVE scanning)

7 Lessons for Self-Taught Developers

What is ‘CORS’? What is it used for?

HELP! How to Find the Best Help Center Widget for your SaaS Business

Why interface, why not multiple inheritance?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pedro

Pedro

Business Development at Bravo Studio App www.bravostudio.app

More from Medium

How (not) to kickstart a startup project

The Definitive Guide to B2B Design

B2B definitive website guide

Prototyping: A Startup Founder’s Secret To Success

The search is over. The ultimate tool stack recommendations for designers in 2022 🌈🚀