Microsoft has published a learning path for fusion dev teams. In addition to that, they also published an e-book for it. We can see how an organisation can build up a fusion team and deliver services through this fusion development approach.
Gartner defines the fusion team as a "cross-functional team that uses data and technology to achieve business outcomes". Because of this nature, the fusion team's leader often comes from the business side rather than the IT side and makes decisions from the perspective outside of IT. In other words, the fusion team pursues the business achievement from the broader organisational aspects, although they use technologies. What can the fusion team deliver a service or product for their customers, then?
Mallee Bulls Fitness Centre is a fictitious company that provides health and fitness services for their members. They are about to build a mobile app using Power Apps. Throughout this post, I'm going to observe how they cope with it within the fusion team.
- Developing Power Apps in Fusion Teams
- Tracing End-to-End Data from Power Apps to Azure Cosmos DB
- Putting DevOps and Power Apps Together
You can find the sample code used in this post at this GitHub repository.
Scenario
Ji Min is a team leader for personal trainers at Mallee Bulls Fitness Centre. The centre has built a system that the trainers put the workout logs for their members through a system. For their customer experiences, they at the same time also write the records to their members' journal by hand. Ji Min wonders whether it's efficient for both trainers and members because it seems they write the same log twice. Fortunately, she's willing to build a Power Apps app for those workout logs. When a trainer or member logs the workout details through the app, the centre stores the data to their data storage (Azure Cosmos DB) through their backend (Azure Functions and Azure Service Bus).
As the backend API has already been up and running, all she needs to do is to use the API within Power Apps via a custom connector. The end-to-end application architecture looks like:
- Azure Functions used as the backend API adds the OpenAPI extension, which increases discoverability.
- A custom connector is generated by the OpenAPI document.
- Through the custom connector, the Power Apps app sends the workout data to the backend system.
- The backend system implements the Pub/Sub pattern that handles data asynchronously.
- At the publisher's end, data from the Power Apps app keeps accumulated. Then it is aggregated when a workout routine ends and sent to Azure Service Bus.
- At the subscriber's end, another Azure Functions takes the message from Azure Service Bus and finally stores it to Azure Cosmos DB.
Improving Backend API
As Ji Min is a part of the fusion team representing the personal trainers' team, she contributes many ideas to the team to achieve more business outcomes. Su Bin is a pro dev in the same fusion team who is responsible for the backend APIs. Ji Min asked Su Bin to make the API discoverable so that Ji Min can do something on her side. Therefore, Su Bin added the OpenAPI extension to the Azure Functions app by installing the NuGet package.
dotnet add package Microsoft.Azure.WebJobs.Extensions.OpenApi --prerelease
By adding minimal efforts, Su Bin added a few OpenAPI-related decorators to the function endpoints. The following code snippets are just an example API for creating a routine when a workout begins. As it's over-simplified codes for brevity, you can check out the full codes at this link.
| // Decorators for OpenAPI | |
| [OpenApiOperation(operationId: "CreateRoutine", tags: new[] { "publisher", "routine" }, Summary = "Create a new routine", Description = "This creates a new routine", Visibility = OpenApiVisibilityType.Important)] | |
| [OpenApiSecurity("function_key", SecuritySchemeType.ApiKey, Name = "x-functions-key", In = OpenApiSecurityLocationType.Header, Description = "API key to execute this endpoint")] | |
| [OpenApiRequestBody(contentType: ContentTypes.ApplicationJson, bodyType: typeof(RoutineRequestMessage), Required = true, Example = typeof(RoutineRequestMessageExample), Description = "The request message payload for a routine")] | |
| [OpenApiResponseWithBody(statusCode: HttpStatusCode.OK, contentType: ContentTypes.ApplicationJson, bodyType: typeof(RoutineResponseMessage), Example = typeof(RoutineResponseMessageExample), Summary = "200 response", Description = "This returns the response of 'OK'")] | |
| [OpenApiResponseWithBody(statusCode: HttpStatusCode.InternalServerError, contentType: ContentTypes.ApplicationJson, bodyType: typeof(ErrorResponseMessage), Example = typeof(ErrorResponseMessageExample), Summary = "500 response", Description = "This returns the response of 'Internal Server Error'")] | |
| // Decorators for OpenAPI | |
| [FunctionName(nameof(RoutineHttpTrigger.CreateRoutineAsync))] | |
| public async Task<IActionResult> CreateRoutineAsync( | |
| [HttpTrigger(AuthorizationLevel.Function, HttpVerbs.Post, Route = "routines")] HttpRequest req, | |
| ExecutionContext context, | |
| ILogger log) | |
| { | |
| ... | |
| } |
After the decorators being added, deploy the function app, and you will see the Swagger UI screen like:
As the OpenAPI extension supports both V2 (Swagger) and V3, you'll see either V2 or V3 doc depending on your configurations when you visit https://<function_app_name>.azurewebsites.net/api/swagger.json. The screenshot above renders the V3 doc.
Create Custom Connector
The serverless API has now got better discoverability. Now it's time to create a custom connector for Power Apps to access the API. As Power Apps is a low-code app maker platform, Ji Min, as a citizen dev, can easily make the custom connector. Click the Custom Connector menu at the left-hand side, click the ➕ New custom connector button and select the Import an OpenAPI from URL menu.
Put the OpenAPI document URL to the field of Paste in the URL for the OpenAPI. Currently, the custom connector only supports the OpenAPI spec v2. Therefore, use the URL, https://<function_app_name>.azurewebsites.net/api/openapi/v2.json for import.
Sometimes, you'll have the following error during the import. It's because the CORS setting is missing between the Power Apps Studio and Azure Functions app instance.
To figure this out, add the URL, https://flow.microsoft.com, to the Azure Function's CORS settings.
After the CORS configuration, go back to Power Apps Studio and create the custom connector again. It's now OK without an error. As the rest of creating the custom connector process is the same as this process, I won't repeat it here. Finally, you've got the custom connector for the Gym Logs.
Connecting Custom Connector via Authentication
In order for Ji Min to use the custom connector within her Power Apps app, a new connection must be created beforehand by providing authentication details. As API keys protect Azure Functions API endpoints, give the key for the authentication. Click the ➕ button.
Enter the API key to the field and click the Create button.
Now, you've got the connection and can use the custom connector within the Power Apps app.
Accessing Custom Connector in Power Apps
Ji Min is now able to enter her members' workout logs through the Power Apps app instead of hand-writing them. Add the custom connector on your Canvas app.
It's all done! Ji Min finally can manage all the workout logs through the mobile app! Here are a couple of screenshots while using the app.
All members' workout logs are stored into Azure Cosmos DB asynchronously.
Now, Ji Min is happy, her trainer crews are happy, and all members are happy because they can easily record their workout histories.
You can download the GymLogs app directly from the GitHub repository and import it to your Power Apps environment.
So far, we've walked through how both citizen developer and pro developer can work together within a fusion team –
- a citizen dev makes a Power Apps app, and
- pro devs provide discoverable APIs by adding an extension to the existing application.
After this collaboration practice, Mallee Bulls Fitness Centre can provide better customer experiences with the workout log apps, resulting in their business growth.
- Members can freely record their exercises, and
- trainers can analyse the data and provide more personalised workout schedules.
In the next post, let's trace the end-to-end data flow through Azure Monitoring.