This blog post is intended to demonstrate the integration between API Gateway powered APIs and the Dropsource mobile app development platform through Swagger or OAS (Open API Spec). API Gateway provides features for documenting your API and exporting Swagger files, which you can upload to Dropsource and have your API ready to use for your new app.

We’ll demonstrate this using the example “Pets API” in API Gateway. Follow the directions below to set up an example API and use it to make a simple app in Dropsource.

Create Your API

Sign in to your AWS account and open the API Gateway Console.

Click the Create API button

Create API

Select Example API radio button

Click Import


Unfortunately there’s a small error in the Pets model that the example API provides. The model claims that the id field of a Pet is a string, but it’s actually an integer. So we need to navigate to Models in the API Gateway menu and find the Pets model, modify the type of the id property to be “integer” instead of “string”, like this:

ID Property     Update Model

Deploy the API by clicking the Actions dropdown and selecting Deploy API

Actions dropdown Deploy API


Export API

  • From Stages in the left menu
  • Select Export tab
  • Hover over Export as Swagger
  • Click JSON

Export API


Sign Up for Dropsource

Sign up for Dropsource and follow the directions to confirm your account.

Create A Project

Once you’ve confirmed your email you’ll be logged in and taken to the Dashboard where you can create a new project.

This tutorial will use an iOS project to demo the functionality, but you can do the same thing in Android. You will be prompted to start the initial Dropsource tutorial, but can skip that tutorial and follow this one instead.

Create a Page With Elements

Once you’ve skipped the tutorial, you can create a page by selecting Pages on the left, and clicking the + button.

Create a page

  • Don’t select any page type
  • Select Elements in the left side-bar (it’s underneath Pages)
  • Drag out a Table View from left onto the page
  • Move it so the edges align with the edges of the page
  • On the right bar, under Styles change the Content dropdown to Dynamic

Dynamic content

Drag out a Table View Cell onto the table, we only need one because it’ll be cloned for each item in the table

Drag out three new Label elements onto the Table View Cell you just dragged out.

Table view cell

Arrange them horizontally, each cell in the table will now have three labels when the app Runs

Label elements

Import the Pet Store .json file into Dropsource

In the right bar click the API Tab, it’s the rightmost tab, click the + button


Click the Choose button and select the .json file you exported from API Gateway, let it import and then close the API Import modal.

Select the GET /pets endpoint from the dropdown and click the Add button, then click the box for the new endpoint that appears.

Add Endpoints

We’ll use the endpoint to just get a list of pets returned from the mock API,

To do this, click the Responses tab

Click and drag the Data Source box onto the table, this binds the response for the endpoint to the table.

Choose data source

Next, we want to set the type, id, and price of each pet returned to the labels, do this using the same drag and drop method we used for Data Source.

Drag type onto the first label, id onto the second, and price onto the third

When this is complete, you should see green dots next to each item

Now that we’ve configured where the response data should display in our app we just need to define when this request runs. The best spot for this when the page loads.

Select the page by clicking the Element Tree tab in the right bar, then clicking the top level element

Element tree

Next, click the left tab to see the properties of the page, and click the Events tab where you’ll see the Page Loaded event.

Page properties

Click the Add button

Click the + button to add a new action, and use the search box to search for “Run API Request” and select it from the search results

Run API Request

Click the Edit button, select the GET /pets request using the menu, click DONE, and then Save, this will set the request to run when this page loads.

Set Request to Run


Test Your App

Click the blue TEST button in the top right of the editor, this will launch

Once the build finishes, click the notification that appears to open the build history list and then click Test in Web Simulator for Build 1 to open the in-browser mobile simulator.

Build App          Test App

Click Tap to Play in the simulator to launch your app.

Because we’ve only created one page, that page will load automatically and display a list of pets returned by the API.



That’s it! You now have a simple app returning data from your API. Dropsource can do the same for POST, PUT, and DELETE API endpoints, enabling much more complex apps to be built. Combining this with our flexible (but native focused) UI builder can yield polished and production-ready apps.

With your free trial you can also test the app on a physical mobile device or download the native source code. I encourage you to see what you can build with your own API-Gateway powered API or any API you have a Swagger (Open API Spec) file for, you can even combine them and work with multiple services.