My First No-Code App with Bravo Studio
Disclaimer: This article contains no tutorials, but I’ve listed several video’s and articles that helped me get started at the bottom of this post, if that’s what you’re looking for. The focus for now it to show you what it enabled us to do, by using my first app as an example.
The Goal
I came across Bravo Studio at some point, promising me things like “From Design to native iOS and Android app. No-code.”. Yea right… was my first thought. On the other hand I was tempted to say: challenge accepted.
Part 1 - The Design
I first needed a design. Since that’s my day to day job this was the easy part. I needed a look & feel that was content focussed. Helvetica, a super minimalistic look to keep focus on the content, combined with primary colours were soon born.
Part 2 - Making the prototype
Bravo Studio comes with an app, that enables you to preview your app before publishing. It requires you to mark certain elements, in order for their software to recognise elements correctly. Such as a form or a search field for example. This is rather straight forward and easily documented in a nice overview.
Part 3 - Connecting API's
A clickable app can also be made with Figma, so where is the awesomeness? Remember I wanted to build a list of words? And that each word would have a ‘backside’ with its meaning? And of course I wanted the ability to add new words and delete learned stuff. This all works via a simple spread sheet like Airtable or Google sheets.
You can set up a Google Sheets or Airtable list with these items (I used the latter since their tutorials are focussed on it), and connect your UI to it using some API mumbo jumbo. When the connection between Bravo Studio is setup correctly, every time you submit something to the app (a new word you learned for example 😉 ) it appears instantly in your Airtable sheet. This is somewhat complex for a designer with little to no coding experience. But luckily Bravo Studio created a section called “connecting to API’s” in their awesome Notion environment. And when you do figure it out, it’s pretty darn awesome. You’re basically creating your own simple backend environment.
Below some screenshots of my app, with a short description of what it does.
Next Steps
I’ve probably just discovered the tip of the iceberg of what is possible with their tool, and they are constantly adding new things. They even made their Trello roadmap publicly available.
I’ve also published my app under the name Vocube, but recently discovered the bug that items appear in random order in the list….
To reflect back on the title, we are used to talk about prototypes in terms of low or high fidelity. Sometimes a Figma prototype just doesn’t cut it when you want some quality feedback on your work. In these occasions Bravo Studio can also serve as a prototyping tool to get feedback before building your app outside of Bravo Studio.
Overall I thing it’s pretty darn amazing that this is possible since 2020/2021. Like I said, we’ve probably only seen the tip of the iceberg of what is possible. And wether we will use it as a hyper fidelity prototyping tool or as a means to bring app’s into the real world, it’s a nice blink into the future.
Useful Links
- Their Youtube playlist with the basics. Easy stuff and enables you to do all kinds fo awesome stuff.
- Their official Help Center.
- Written extended tutorial on how to create something similar as above. Also available in video.
- Bravo Get Started page.
Leave a Reply