While designing a gorgeous frontend for your mobile app certainly takes effort, building a mobile-ready backend can prove to be a major challenge. Are there easy-to-use tools out there that can simplify this process? (Hint: Yes!)

Dropsource is a “bring your own backend” platform, so to use external data you need a REST API that’s documented using the Open API (formerly Swagger) specification. For our members who come to Dropsource without an existing backend for their app data, and want an option that is quick and easy to set up, we often recommend Bubble.

Like Dropsource, Bubble a visual development platform that doesn’t require any coding, allowing you to visually build web applications, and to model your data and connect it to your app with a minimal time commitment. Bubble provides a great way to build your Dropsource-ready mobile backend without having to code it from scratch.

Backend Setup in Bubble

Bubble provides a visual user interface in which you define the data items your app needs, like this example “Note” data type for a note-taking app, with a field for the note content text and some other fields automatically created and managed by the Bubble platform.

how to bubble dropsource 1

Bubble automatically creates REST API endpoints to retrieve your data items via GET requests, and you can specify POST endpoints to create and update data within the same visual environment.

how to bubble dropsource 2

You can handle user management to carry out tasks such as signing up and logging in using the same technique.

When you’re ready, you can access your Open API / Swagger specification at a fixed URL for your project. This is a real advantage to using Bubble, as many platforms don’t automatically generate a spec file, in which case you have to author it manually – if you are doing that, we find Stoplight can save a lot of time.

Connecting Bubble Backend to Dropsource

Once you have your spec file downloaded, you can connect to your Bubble data from inside the Dropsource editor in a few steps. Upload the spec file in the API tab and Dropsource will present the available endpoints for use within your app.

how to bubble dropsource 3

Dropsource uses the information in your specification to build requests to the API, sending parameters from your app, receiving response data for display and further processing, and detecting request events that you can handle in your app logic.

You can build pages with Text Fields, Buttons, and other interactive Elements, for example to capture the user’s login credentials, using Actions to send them to the Bubble API via requests.

how to bubble dropsource 4

When you use GET requests to retrieve data, your app can display the content of individual items and whole tables in your Bubble backend using dynamic Elements such as Tables, Lists, and this Collection View we used in our Photo Saver app:

how to bubble dropsource 5

Dropsource is able to send data values using a variety of API request parameter types, including body data, form data, values in the query string and in the endpoint path. You can send a range of data types to your API including text, numerical data, and even images. Similarly, you can receive different types from the API and display or process them in your app.

Putting the Pieces Together

Check out our overview of using a Bubble backend in Dropsource, which covers setting up your Bubble data, defining your API endpoints, importing the spec, building the app user interface, and defining your functionality in Dropsource.

For a more complete example of what you can do using Bubble and Dropsource, see our Photo Saver app walkthrough, which uses Bubble to save photos along with their location, managing user login, and presenting the user’s existing photo collection along with the locations marked on a map.

If you’re using Bubble, or another backend platform, and would like some guidance on integrating it with Dropsource, get in touch via the comments below, our live chat in the editor, or by emailing us at help@dropsource.com and our team will be glad to help!