Oriol Fuertes CTO, M2MGO Bernd Mayer Technical Evangelist, Microsoft DX Germany

Transcription

1 M2MGO Innovation Project Microsoft teamed up with M2MGO to build a template for a Xamarin application generator that will extend M2MGO's currently available web-based dashboard configurator for IoT customers. Key technologies Xamarin (Xamarin.Forms) SignalR Power BI Embedded API Apps feature of Azure App Service Web Apps feature of Azure App Service Core team Oriol Fuertes CTO, M2MGO Bernd Mayer Technical Evangelist, Microsoft DX Germany Customer profile Berlin-based M2MGO developed PeopleSystemThings (PST), a platform as a service (PaaS) IoT business framework for agile needs. It currently has 28 customers from a variety of industries that build their own business end-to-end processes within hours by connecting IT and OT data sources. As an IoT as a service framework, PST allows clients to create software as a service (SaaS) products for their customers with total freedom. Problem statement Currently, M2MGO offers its product as a web application. To increase the use cases of the application without compromising performance, M2MGO was looking for a way to generate mobile apps. The current web app is controlled by a standardized configuration file that describes how the app will look and behave (including data sources). A further problem was chart generation on mobile devices to display datapoints over a certain timespan, which is rather easy with a wide range of JavaScript frameworks available for the web application. Solution, steps, and delivery Goal Our goal was to make a Xamarin application that could be generated in the M2MGO dashboard editor. The dashboards would show data and updates from various IoT devices connected to the M2MGO back end. The image shows the configuration of a simple ValueDisplay Control in the solution. Creating a configuration like this will result in a website functioning as a dashboard without the editing features that customers can use to monitor specified devices.

2 In this project, we wanted to extend this solution with a Xamarin app that works from the same configuration files generated by the editor to display the same information. Further data displayed in the application should update automatically from their SignalR hub. Step 1. Baseline architecture To have a Xamarin application that is generated completely by a configuration file (at runtime), we decided to work exclusively in the public class library instead of finding different ways to generate the UI per platform. Further, we decided to rely heavily on dependency injection to provide every element with the data it needs and generation metadata for initialization. The overall architecture combines three elements. The M2MGO web application can be used to create a dashboard with a WYSIWYG editor. The created configuration is stored and then delivered using an API app that also handles authentication and customer identification. Our app will generate pages via the configuration and hook upon a SignalR hub to receive data updates. Step 2. Translating the configuration to Xamarin.Forms The configuration M2MGO uses is built to fit its web page generation engine and includes a lot of plug-in ability. An application is defined by different nodes, pages, and widgets. Widgets can then

3 be extended with data from a pool of customer-created data sources. Our first step is to connect to the web service and receive the configuration, which comes as a JSON file. In a recursive method, we iterate over all child elements in the configuration and create the corresponding UI elements. foreach (var mainpagechild in mainpagechildren) switch (mainpagechild.widgettypeid) case "57562e4a-8d89-47d1-94ae-a0a1feb206f1": SingleValue sv = new SingleValue(mainpageChild.ID, mainpagechild.model.settings); if (hasgrid) var gridinfo = CheckGrid(mainpageChild.ID, griddefinitions); if (gridinfo!= null) Grid grid = (Grid) root; Grid.SetColumn(sv, gridinfo.offset); Grid.SetColumnSpan(sv, gridinfo.span); grid.children.add(sv); break; The example shows the identification of a SingleValue widget, which in XAML terms is equal to a label that is showing one data value from an M2MGO data source. The code also shows how layout is handled. The M2MGO application generally orders elements in a StackPanel layout, but users have the option to choose a bootstrap-like grid layout within their configuration. To fulfill this functionality, a grid is generated in XAML that will be provisioned with the right amount of column definitions and when a child, such as the SingleValue above, has to be inside the grid, it will be placed correctly during generation. For our UI elements, we decided to implement our own, which extend the Xamarin.Forms ContentView class and contain the original Xamarin.Forms element (for example, label). This way we are able to make a lot of adaptions during element initialization, such as adapting the background color, images, and font settings. Step 3. Data connections The configuration for the application contains information about the data sources used by the elements. "Bindings": [ "DataSource": "9ac6ddec-019a-874e-bc12-bec019a14bf4", "Expression": "/SensorData/light/Series/Value", "Widget": "c967d98b-f5fd-4fe0-893a-a3ffbce0d060", "BindingTarget": " " As shown, the data-binding configuration includes the identifiers for the data source as well as the identifier for the corresponding UI widget. Additionally, the expression shows the data path to which data should be consumed. In the app, we built a collection of data binding and created a connection to the SignalR hub in the Azure back end. The SignalR hub will inform the app about data changes that will then get routed to the right UI element using the index provided by the collection. Step 4. Adding Power BI

4 To display more complex data visualizations, we chose Power BI as a back-end-controlled control that works in both worlds that M2MGO operates in. Devices communicating with the M2MGO back end communicate with their web API report data changes. When changes happen, these will be stored in an Azure SQL database. To ensure customers can access only their own devices, we added row-level security to the database. To keep complexity out of the Xamarin app, we opted for a back-end abstraction to ensure data security. We accessed the data from Power BI using DirectQuery and designed the reports in Power BI Desktop. The Xamarin app uses an ASP.NET Authentication provider to authenticate to the back end using a user name and password to receive an authorization token. With this token, the app can embed a WebView consuming a website that embedded the report using the C# Power BI framework. The M2MGO solution already implements roles and users. In Power BI, we introduced one role per customer named after the role GUID in M2MGO (for example, 700b8d03-519a-4dce-96dcc92613f14955 for Power BI user in the Microsoft domain). Devices and data attached to this customer will be allowed in row security to access the specific data and relationships. var role = GetRoleForCurrentUser(); // 700b8d03-519a-4dce-96dc-c92613f14955 var embedtoken = PowerBIToken.CreateReportEmbedToken(this.workspaceCollection, this.workspaceid, report.id, [role]);' The Power BI report is then embedded into an ASP.NET website using the PowerBI-CSharp SDK. This website is then rendered with a WebView in our Xamarin application. Based on the HybridWebView documentation, we built a custom renderer for Android and Windows in which we could disable scrolling by the user, so the WebView in the app would not interrupt normal scrolling. To call the website, including the Power BI Frame, we used JavaScript on an HTMLSource we included in the project, which we triggered with WebView.Eval(): <!DOCTYPE html> <html> <head> <title>pb</title>

5 </head> <body> <script src=" <iframe id="displayframe"></iframe>... <script type="text/javascript"> function callpowerbi(token, page, deviceid) var xmlrequest = new XMLHttpRequest(); xmlrequest.open('get', page + '/api/pb/' + deviceid); xmlrequest.responsetype = 'blob'; xmlrequest.onreadystatechange = handler; xmlrequest.setrequestheader('authorization', 'Bearer ' + token); xmlrequest.send(); function handler() if (this.readystate === this.done) if (this.status === 200) var data_url = URL.createObjectURL(this.response); document.queryselector('displayframe').src = data_url; else console.error('something went wrong'); </script> </body> </html> With some WebView resizing, the final result looks like this:

6

7 To make the chart seem like part of the app, the partner developed a solution to scale and zoom the WebView and the website to a predefined position of the chart. Conclusion It was possible for us to lay the groundwork for an on-the-fly extendable Xamarin application that will expand the offerings of M2MGO in a significant way. We faced many challenges translating a pure web product into a native mobile application the configuration was built in a way to extend HTML and CSS in a different working order than we could use in Xamarin, which resulted in some reordering and special-case handling of our code. Generating a Xamarin.Forms application from scratch is exceedingly fast for the amount of recursive operation required, though. M2MGO will be going forward with the product we built and adding further widgets until the web application and the mobile application offer the same features. "As CTO from M2MGO, I have been working in web technologies for some years. So far, for me, there was a big wall between web application development and mobile application development. Because of the business needs, M2MGO needed this wall to disappear. "After working for a few weeks with Bernd Mayer, learning from his great architecture and Xamarin developing skills, we managed to destroy this wall. Now we are capable of using a WYSIWYG HTML5 editor to also deliver native mobile applications. I want to thank Microsoft and the whole Evangelist team for the great time working together, and the big technology jump we made in cooperation." Oriol Fuertes, CTO, M2MGO