Tutorial to build a native Typeform responses app using Bravo Studio in 15 minutes #nocode #yesdesign

Toby Oliver
Geek Culture
Published in
5 min readOct 5, 2021

Typeforms are pretty awesome (disclosure I used to work there). But often I find I want to look at how the results are looking when I am away from my computer. Although it was looked at in the past, Typeform has never had a native app, instead relying on a progressive web app — which is pretty slick — but has a lot of stuff I don’t need which slows down getting to the results.

Now as part of Bravo Studio 3.0 we have just added OAUTH2 authentication which finally allows us to make a Typeform responses app possible (you can read about all the new features here https://www.producthunt.com/posts/bravo-studio-3-0). So I though I would create a tutorial to show how it was done.

1. Register OAUTH Application in Typeform

For this tutorial we will need to register an Oauth application in Typeform to as we will use OAuth to authenticate to Typeform. Typeform’s API documentation is really good so I won’t repeat it, but you can follow the steps here: https://developer.typeform.com/get-started/applications/#1-create-an-application-in-the-typeform-admin-panel. From this we need to record the CLIENT_ID and CLIENT_SECRET.

You will need to ensure the REDIRECT_URIs are setup to include:
https://bravostudioapp.page.link
https://projects.bravostudio.app/callbacks/oauth-token

2. Create application in Bravo Studio

Next we need to import the design into Bravo Studio, so log into Bravo Studio (you can create an account here), go to Projects on the left hand menu and then click on New Project. Then import this Figma file:

https://www.figma.com/file/4ZT9mC4o5wtMZlv2gam0AO/Typeform-Responses-App-Test-Free?node-id=0%3A1

3. Setup Typeform OAUTH in Bravo Studio

The next part is adding in the OAUTH configuration. Go into your newly created app, head to settings and then login, choose Typeform as a provider and fill in the CLIENT_ID and CLIENT_SECRET from step 1 and set scopes to accounts:read workspaces:read forms:read responses:read.

This configuration allows your app to connect to Typeform so each user can authenticate themselves to access their own data.

4. Add Typeform APIs to Bravo Studio

In Bravo Studio go to Data Collections on the left hand side menu and then Create a new collection. Then click on Swagger import.

On the swagger import screen set the collection name to Typeform Responses and then upload this file: TypeformResponsesSwagger.json

When the list of APIs appear hit Select All and then Continue to load the APIs we need.

Next click on Edit Collection as we need to make a couple of changes.

Click on the LIST WORKSPACES request and change the end of the URL from ?page_size=${page_size} to ?page_size=200 to make sure we list all the workspaces you have. Also on this request click on the Selected Data tab and change the name of items[] id to workspace_id.

Then click on the LIST FORMS request and change the URL from page_size=${page_size} to ?page_size=200. Also on this request click on the Selected Data tab and change the name of items[] id to form_id.

Finally we have to setup these APIs to authenticate using the Typeform OAuth. Click on the nut icon next to this collections name to bring up the collections settings. Go to Authentication and then set Type to Use settings from application (OAuth2) and the Testing App to Typeform Responses App. Then click Save and the OAuth2 authentication in your App will be ready.

5. Bind APIs to design

Once the APIs have been added go to the Typeform Responses App Test Free project so we can bind the APIs to the design.

5.1. Workspaces

Click on the Workspacesscreen to edit the binding for this screen.

  • In the Select Visual Elements list Click on the WORKSPACE LIST element and connect it the Typeform Responses collection in the binding panel on the right hand side. Next choose the LIST WORKSPACES request and the items [] element to bind the list to this design element. This will repeat this container element for all the items in the list, so we can bind the content for each item.
  • Click on WORKSPACE TITLEelement in the Data Binding and connect it to items[] name in the element binding on the right hand side
  • Click on NUMBER of FORMS element in the Data Binding and connect it to items[] forms count in the element binding.

5.2. Forms

Go back to the project page and click on the Formsscreen to edit the binding for this screen.

  • In the Select Visual Elements list Click on the FORM LISTelement and connect it the Typeform Responses collection in the binding panel on the right hand side. Next choose the LIST FORMS request and the items [] element to bind the list to this design element. This will repeat this container element for all the items in the list, so we can bind the content for each item.
  • Click on LAST UPDATE TIME element in the Data Binding and connect it to items[] last_updated_atin the element binding on the right hand side
  • Click on FORM TITLEelement in the Data Binding and connect it to items[] title in the element binding.

5.3. Summary

Go back to the project page and click on the Summary screen to edit the binding for this screen.

  • In the select visual elements, open up the Form Summarysection and connect the following:
  • AVERAGE TIME VALUE to Typeform Responses -> FORM SUMMARY FREE-> summary average_time
  • COMPLETION RATE VALUEto Typeform Responses -> FORM SUMMARY FREE -> summary completion_rate
  • RESPONSE COUNT VALUE to Typeform Responses -> FORM SUMMARY FREE -> summary responses_count
  • TOTAL VISITS VALUE to Typeform Responses -> FORM SUMMARY FREE -> summary total_visits
  • UNIQUE VISITS VALUE to Typeform Responses -> FORM SUMMARY FREE -> summary unique_visits
  • FORM NAME to Typeform Responses -> Retrieve Form -> title

Your Typeform app is now ready, you can use the Bravo Previewer to login to Typeform and view all your data (https://docs.bravostudio.app/learn-and-create/bravo-vision-previewer).

This is only really the beginning though you can use Bravo Studio to do a lot more with the Typeform APIs. Let us know in the Bravo Studio community what you come up with!

--

--