Building a Mobile App with Your API Gateway Backend

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

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:

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

Export API

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

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.

• 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
  

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.

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

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.

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.

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

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.

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

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.

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.

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.