Ever wished you had noted down all services you subscribe to?
I am guessing it also happened to you that you subscribed to a service you knew from the moment you hit the subscribe button that you wouldn't be renewing it after the free trial ends. Yet, you forgot to cancel the renewal simply because you didn’t note down you had subscribed to it in the first place nor actually even remembered that you had subscribed. Finally, you woke up to that unwanted bank charge notification.
Well, that happened to me and thought of doing something about it.
It is nothing new that more and more brands/companies will offer their products/services/softwares as a service (aka SaaS).
Even running shoes have started offering Shoes as a Service! Check this from on-running:
My subscriptions app.
A simple app that will help me track all my subscriptions. It allows me to add new subscriptions including service name, renewal date, monthly/yearly fee. For this, I created a simple input form. All data would then be listed on a list page where I added a search/filter bar in case I want to search something quick. I knew this app would be useful for me but, this time I also wanted to make sure others could use the same app by publishing it in App Store and Google Play store. I will explain you step by step how I did in case you get inspired in creating your very own app.
Don’t worry if you don’t have technical knowledge, programming skills or designer background. I don’t either!
Tools I used to create this app.
- Figma. Designed the app. You can check the actual figma file here. You can use figma for free!
- Airtable. Store the data for each subscription.You can use airtable for free.
- Bravo Studio. Convert the figma design into a real native iOS and Android /app. You can use Bravo for free.
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:
What are GET, POST, DELETE requests?
A RESTful API is an architectural style for an application program interface (API) that uses HTTP requests to access and use data. That data can be used to GET, PUT, POST and DELETE data types, which refers to the reading, updating, creating and deleting of operations concerning resources.
In human language: Basically this requests or calls will help as transfer data and actions from one place to another. E.g. from our app to airtable and from airtable back to our app. Also we will tell the delete button to DELETE a specific record from the airtable.
Design the app in Figma.
Like I said, I am not a designer. But, this cannot stop me from using Figma to design an app. To make it easier for myself, i didn’t design the app from scratch. Instead, I duplicated an existing app design from my colleague. This was a similar looking app I wanted for My Subscriptions so i just had to adjusted a bit. You can also duplicate my figma file here and use it as a base for your app idea.
Designing the homepage screen.
For the homepage, I added two main buttons:
- Add Subscription
- My Subscriptions
Inters of design, I also added a lottie to add some animation. Lottiefiles are a really easy way of adding animations. The best part is that you can install the lottiefiles Figma plugin which will allow you to search for a lottie and insert it into your design without having to leave figma. Whenever you add a Lottie to your design, this one will automatically have the Bravo Tag therefore once you finish the design you will be able to see it working on your phone with Bravo Vision (Bravo’s preview app).
Lets take a look at the homescreen:
As you can see highlighted on the left panel, i have selected:
[component:lottie:https://assets2.lottiefiles.com/private_files/lf30_GjhcdO.json]
This is the Lottie URL which has the corresponding component Bravo Tag.
In addition, I added some services logos to further represent what the app is about.
As for the two buttons, these are then connected to the corresponding pages. This is called prototyping in Figma. You will find the prototype button on the top right panel. Once in prototyping mode, you will be able to connect any element to any other app screen. In this case:
- Add subscription > takes you to input form screen
- My Subscriptions > takes you to the subscriptions list screen
Designing the subscriptions list screen.
A few things to highlight here:
- 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:
You could design this any way you want. In the search bar, you could type e.g “Yearly” and the app will display any list item that contains the text/word “yearly” (same would happen if you typed “monthly” or even by service name). In order to make the search bar actually work, you must add the following Bravo Tag: [component:input-text][action:filter]. This Bravo Tag has a double function. It allows the user to type in the text that wants to search as well as actually tell Bravo to actually display any list item containing that text.
- 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.
I recommend you to add the Bravo Tags while you are designing so that later once you import your figma design to Bravo your app will be functional.
- 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.
Lets take a look:
You will also be able to see a few Text elements within the “Subscription Card” frame with a “*”. These elements: Amount, Renewal Date, Frequency, and Service name are the elements that we will bind/connect with data from the airtable.
Designing the “Add Subscription” screen.
Design wise, this screen is fairly simple. It’s a very normal form with example text to guide the user what data they must input.
Whats important here however, is once again the usage of the Bravo Tags.
Just like the list screen, we will continue having a fixed Top bar using the [container:top-bar] Bravo Tag.
Additionally, we will be using three other Bravo Tags:
- [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.
Lets take a look:
💡 Browse around the actual figma file to see how all frames are designed and how and where I have added the Bravo Tags.
Designing the custom loading screen.
This isn’t necessary however you can also create a custom loading screen which will show whenever the app is “thinking” or making an API request. For example. If you don’t add a custom loading screen, Bravo will add a default loading screen. Should you want to add a custom loading, again you can use a cool animated lottie.
Add Lottiefiles figma plugin here.
Lets take a look:
Setting up your Airtable.
This table will be where all the data is sent to host and store the data that is submitted from the “Add Subscription” screen.
Every time a form is submitted, It will automatically create a new record in our airtable base.
For this we will need to set up the airtable in a specific way and must include a few important fields besides the ones you have seen in the input form:
Fields required:
- 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)
The above covers the same fields as we have added to our input form in our design.
However, we will add two additional very important fields to our airtable:
- 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.
Lets take a look:
Import your Figma design to Bravo Studio.
Now that we have our design ready including the necessary Bravo Tags, we can import our project in Bravo Studio. To do this, you simply need to copy the URL of your figma file, open Bravo Studio and hit import. Paste the figma project url and send. You will then see your figma project in Bravo Studio.
Lets take a look:
Create your data collection.
In Bravo, you can create as many data collections as you want. This will help you organize your API requests by creating a collection for each data source. In this case we will create a Data collection for our Airtable previously created.
Create a new data collection.
Click on create New Collection and select “Airtable”. Follow the steps of the airtable API wizard.
Once completed you will be prompted with something like this:
Press continue to proceed editing your Data Collection.
Give your Data Collection a unique name so that you can easily recognize it. in this case I called mine “My Subscriptions app” since I will only use it for this particular app.
💡 Note: You can use one same Data Collection for multiple apps.
Select your newly created Data Collection. In it, we will set up our three API requests:
- POST request
- GET request
- DELETE request
Again, the POST request will make sure that Bravo sends whatever data we input in the form app screen to our airtable.
Whats important here is that we will also configure this request in a way that each user will only see its very own data or list of subscriptions in the app. While all subscriptions data will live in one same database users will only be able to see their own subscriptions. For this, we will be adding another field to our body in our POST request but don’t be scared, its very easy and we will see this process in detail here.
Next, go to Advanced view on the top right corner.
GET request.
You will find two requests already created. Lets start by the Subscription-List which will be our GET request. Meaning, the request that will make the app call and retrieve data from our airtable.
Make sure to add some sample data in your airtable by creating one record manually.
Click send to make the request and check that we receive results back.
✅ Check the fields that we want to later show in our app just like in the image above. In this case we want to select: fields.Renewal, fields.Amount, fields.service, fields.Frequency.
One more thing, we will be adding additional parameters to the URL for your GET request. Add the following:
?maxRecords=Time&filterByFormula=%7BDeviceid%7D%20%3D%20%27${device.id}%27
(Make sure you add the “?” after the name of your table name just like this:)
Basically what this extension we added to the URL will ask airtable to respond with the data sorted by time as well as per device id.
Now that the POST request has been created, it is time to create our POST request.
POST request.
Since the API wizard had generated two requests, let’s use and edit this other request and turn it into our POST request.
Click on it and change it from GET to POST request (in blue).
Since we are changing it into a POST request, we must also change the URL we are calling. Specifically, we will change it with a URL that will enable us to create a new record in our airtable.
To do this, lets go to airtable, click on Help and select <> API documentation.
In the left panel within the API documentation select your table and then “crate records”:
On the top right corner, check ✅ to show API Key.
Copy the URL as the one highlighted in the picture above and paste it into the URL field of your POST request in Bravo.
Next, add the Headers key and value.
For the key: Authorization
For the value: Bearer (your API KEY)
Just like the image above. Now, before hitting send, we have a few more things to configure our POST request.
Lets move to the Body:
Here we have added a small sample request that we are also getting from the airtable API documentation. I have selected what we need, copy this text.
We will paste into the Body in our POST request in Bravo:
You will notice that i have cut down the actual text since we only need one sample and in the previous image and in airtable we had the same twice.
You can copy paste exactly what we need from here:
{
"records": [
{
"fields": {
"Service": "${service}",
"Amount": ${amount},
"Renewal": "${renewal}",
"Frequency": "${frequency}",
"Deviceid": "${device.id}"
}
}
]
}🚨 This body or piece of “code” is extremely sensitive.
Very important factors: The field names must be written exactly the same way as you have labeled your airtable columns. E.g. “Service”. As you can see its with capital “S” the same way as we have in our airtable.
Remember how we had labeled the columns:
The values however, can be really anything. However whats important here is that we make proper use of the “”.
E.g. “${service}” we know it will be a text value, therefore this value will be within “”.
If we look at the value of the field “Amount”, we know that this value will be a number, therefore in this case we will have the value without “”, just like this: ${amount}.
Now, another important little detail is that after each line we must add a “,”. However, not after the last value.
Last but not least, the last field (“Deviceid”: “${device.id}”) has been added manually since it is not provided by the airtable sample request.
Again very important, “Deviceid” is with capital “D” just like in our airtable.
The value however, it must be just like this: “${device.id}”.
Moving on and to finish setting up the POST request, we will add the parameters:
This step will help us verify if the POST request that we have set up is actually working.
For this, we will add all values from the Body under the Key column. Of course if you create an app that has less or more values you will add as many as you have in your Body for your specific app case.
These are the Keys I used to fill the parameters:
Again, Keys must be written and added exactly as we have them in the Body.
As for the values, here we can actually write anything we want. They are just sample values we want to use to test the POST request and if its all working correctly, they will appear in our airtable!
As highlighted above, this are random sample values. Once you entered a sample values you can press send!
Yeah! Now we can see the response after hitting send and we can see that the sample values we entered in the parameters have been successfully sent to our airtable!
It is a detailed process but once you have practiced this process a few times you will be able to do it really fast.
Now that we have completed setting up the GET and POST requests, we will create the DELETE request.
DELETE request.
As mentioned earlier, the user will be able to delete any list item from the subscriptions list. It will be able to do so by just tapping on the “trash” icon we have added to our list item design:
Lets add a new request to our Data Collection by tapping the plus + icon.
By default you Bravo will add in a new GET request but just like we did before with de POST, we can change this to a DELETE request.
Now just like we did before for both GET and DELETE requests, we need to copy the URL for DELETE records from our airtable API documentation:
Make sure you have selected the Delete records from the left panel.
Again, you must ✅ the show API key on the top right corner for your API key to show up.
Now copy the URL as highlighted in the image above and paste it into the URL of your DELETE request in Bravo.
Once you have added the URL, you also have. to add the headers:
Now we will just need to add additional information at the end of the URL. in this case we will be adding:
/${id}
Your URL should then look like this:
Adding this to the URL will basically make sure when we delete a record from our subscription list it will actually delete that unique record that was created by the same mobile device, meaning the by the “id” of the device that initially created that record.
Congrats! We have now created all the necessary API requests for our Data Collection.
Finally, we can now bind or map each element from our design with that one of the airtable.
To do this we will go back to our project screens in Bravo:
As you can see above, I have highlighted the screens that we need to bind the data. For the input form screen we will use the POST request. For the List screen or subscriptions list page we will bind the GET and DELETE requests.
Binding the input form screen.
The input form like we said before will send whatever data the user types in the form and submits it to airtable by tapping the “Add Subscription” button.
To bind the data, click on the input form screen:
Once on the Data Binding page you must:
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.
In the “Select Visual Elements”, expand the “Form” drop-down. Select the first item to be bind. In this case its “service name”, select it.
On the right side panel, you must connect the selected visual element with the desired destination, in this case we we want to send it to the “service” labeled column in our airtable.
You want to to this with the rest of visual elements in our input form, that is “renewal date”, “amount” and “frequency”.
In case you are wondering why is there a “*” before each visual element that we are binding, it is because i have added them in my figma design:
💡 You absolutely do not have to add this “*”. Is just a way of making it easier for me to find the visual elements I need to bind in this last process.
Binding the subscriptions list screen.
The subscriptions list screen will list/display all subscriptions a user has submitted via the input form. For this, we will use the GET request so that every time the user opens the list screen it will call the airtable and get all the subscriptions entered by that particular user.
Same steps as before. But, in this case, select the subscriptions list screen.
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.
In the “Select Visual Elements”, expand the “Subscription Card” (again the name of the frame is the name that I use to label this frame/container in figma) drop-down. Select the first item to be bind. In this case its “service name”, select it.
On the right side panel, you must connect the selected visual element with the desired content record from airtable, in this case we want to GET the “service” labeled column record field from our airtable.
You want to to this with the rest of visual elements in our subscriptions list screen, that is “renewal date”, “amount” and “frequency”.
And like Steve Jobs used to say: but there is one more thing…
Binding the DELETE remote action.
Within the same GET request, find the delete visual element. Bind this one with the remote action by selecting our DELETE request.
Just below you will also find the option that will prompt an “Are you sure?” message before actually deleting the list item.
And that is how I did My Subscriptions app with multiuser functionality:
Download here for iOS
Download here for Android
I hope you enjoyed this tutorial and that it helps you create your app ideas with Bravo Studio. Please do share any app you create after this tutorial and please do get in touch with me or the Bravo community here if you need help building your app.
