Bobur UmurzokovApache APISIX API Gateway enables professional developers to publish their backend service as APIs, monitor the usage and easily expose these APIs to the Power Platform (Power Apps and Power Automate) as custom connectors for discovery and integrate API Gateway endpoints into custom apps without having to write code from scratch.
In this article, we will show you how to create a custom connector for the open-source Apache APISIX API Gateway in Power Platform as an alternative to Azure API Management in case you are building up additional components to an existing system with usable APIs and your system's infrastructure is hosted on-premises or on other cloud services provider rather than Azure.
Learning objectives
You will learn the following throughout the article:
- Benefits of integrating Power Apps with Apache APISIX.
- What's a customer connector?
- Set up a new custom connector for Apache APISIX API Gateway in Power Platform.
- Create a Canvas Mobile App in PowerApps that uses the new custom connector.
Benefits of integrating Power Apps with Apache APISIX
Integrating Power Apps with Apache APISIX provides several benefits to organizations. Your Power Apps can access your APIs via API Gateway and you can configure additional settings on APISIX.
Here are a few of them:
Enhanced security: It offers "advanced request throttling" to avoid the unexpected error caused by massive requests to backend systems and setup rate-limit policy for your backend APIs, authentication, and encryption that can be applied to custom applications.
Scalability: It handles high volumes of traffic and can scale up or down based on demand. This means that custom applications built on Power Apps can handle increasing volumes of traffic as the business grows.
Performance: It provides features such as load balancing and caching that can improve the performance of custom applications built on Power Apps.
What's a customer connector?
A custom connector in Power Apps is a tool that allows users to create a connection between their app and an external data source or API that is not natively supported by Power Apps in our case, it is Apache APISIX. Custom connectors provide a way for users to access data and services from external systems within their app without having to write complex code or perform complex configurations.
Custom connectors are created by defining the API endpoints, methods, and authentication requirements of the external system, along with any necessary parameters and response formats. Once the custom connector is created and authenticated, it can be used in Power Apps to perform operations such as retrieving data, creating records, updating records, and deleting records.
Setup a new custom connector
Let's look at an example of configuring a custom connector for Apache APISIX.
For the demo case, we will leverage the sample project built on ASP.NET Core WEB API with a single GET endpoint (retrieves all products list) and Apache APISIX Docker sample project. You can find in README file all instructions on how to run the sample app.
Prerequisites
- Must be familiar with fundamental API concepts.
- Basic knowledge about a couple of APISIX core concepts such as Route, Upstream and Plugin.
- Docker installed on your machine to run APISIX.
- Install APISIX and the Product backend API with
docker compose. - Configure the necessary settings such as the API endpoint, upstream, and routing rules. You can follow this tutorial to setup APISIX API Gateway. Make sure that you create the Route and upstream and APISIX should forward the request to our target API
/api/products. - This exercise requires access to Power Apps Premium connectors. Sign up for a free Developer Plan.
Step 1: Start the custom connector wizard
To get started, log in to the Power Apps portal and navigate to the "Connectors" section. Click on the "New custom connector" button, then choose to "Create new from black" and provide a name for the new connector.
Step 2: Provide basic details for your connector
In the "General" tab, enter the following details for your connector:
- Connector name: Give your connector a name, such as "APISIX API Gateway".
- Description: Provide a brief description of your connector.
- Scheme: Ensure that you also select the correct scheme, for this instance, we should be using HTTP, as we haven't configured our API to use HTTPS.
- Put a check mark on the option "Connect via on-premises data gateway". You will need to install an on-premise data gateway on a machine inside your network. Because Custom connector cannot have localhost as a hostname without using on-premises data gateway.
- Base URL: Enter the base URL of your Apache APISIX API Gateway. For example,
http://localhost:9080.
Step 3: Choose an authentication type
Next, switch to the "Security" tab and provide the necessary authentication details based on the authentication type your custom connector is going to use. For example, Basic, OAuth2, or API Key.
Step 4: Define your API endpoints
In the "Definition" tab, you can define the API endpoints that you want to expose in your custom connector. For example, you might define an endpoint for retrieving all the products list from the API Gateway.
To define an endpoint, follow these steps:
- Name: Enter a name for your endpoint, such as "Get Product List".
- Summary: Provide a brief summary of what the endpoint does.
- Operation ID: Enter a unique operation ID for the endpoint, such as "GetProducts".
- Method: Choose the HTTP method that your endpoint uses, such as GET.
- URL: Enter the API endpoint URL for your endpoint, such as
/api/products. - Request: Specify the request parameters and headers that your endpoint requires.
- Response: Specify the response schema that your endpoint returns.
You can define as many endpoints as you need for your custom connector.
Step 5: Test your custom connector
Once you have defined your endpoints, you can test your custom connector by clicking on the "Test" tab. Here, you can enter sample data for your requests and see the responses that your API Gateway returns.
Step 6: Save your custom connector
After you have defined all the endpoints and tested your connector, click on the "Create connector" button to save your changes.
Your custom connector for Apache APISIX API Gateway is now ready to use in your Power Apps. You can use it to build a custom app in the next section that interacts with your API Gateway endpoint.
Create a new Power App
Now we build a new mobile app with a single page that fetches the product list from the APISIX API Gateway endpoint using the custom connector we created in the previous section.
Step 1: Create a new app for Products
To get started, log in to the Power Apps portal and create a new app by selecting "Create an app". Choose the "Phone layout" option to create a mobile app and provide a name for your app.
Step 2: Add a data source
In the "Data" tab, add your Apache APISIX API Gateway custom connector as a data source. This will enable your app to interact with the API Gateway endpoints defined in your custom connector.
Step 3: Design your user interface
In the "Canvas" tab, design the user interface for your app. You can add various UI controls such as buttons, labels, galleries, and forms to create a user-friendly and interactive interface. In this example, we show a list of products with their names and prices.
Step 4: Define actions and logic
In the "Action" tab, define the actions that your app should perform when the user interacts with the UI controls. For example, you might define an action to retrieve all the products from your API Gateway, display them in a gallery, and add the search functionality.
Step 5: Test your app
Once you have defined the actions and logic for your app, you can test it by clicking on the "Preview" button. Here, you can interact with the UI controls and see the data retrieved from your API Gateway.
Step 6: Publish your app
After you have tested your app, you can publish it to make it available to your users. You can publish your app to various platforms such as iOS, Android, and Windows.
Next steps
In this article, you learned how to describe the API and define the Apache APISIX custom connector. Also, we created the mobile app with Power Apps that uses the API Gateway with its custom connector. Our custom connector is used the same way Microsoft-managed connectors are used. This means you can leverage the connector in a Logic App, Power Automate as well. So go ahead and give it a try, and see how much you can accomplish with Power Platform and Apache APISIX.
Related resources
Recommended content
Community
🙋 Join the Apache APISIX Community
🐦 Follow us on Twitter
📝 Find us on Slack
About the author
Visit my personal blog: www.iambobur.com
