Microsoft 365 Community Community Demos, 24 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Turn that ‘Power Apps’ app into a Mobile app!

Description

The “Wrap” feature in Power Apps enables you to package your canvas apps as custom-branded Android and iOS apps for native distribution to mobile users. In this 14-minute developer-focused demo, Sabbika Siddiq shows how you can leverage Azure AD, Visual Studio App Center, Power Platform solutions for this objective. Install Wrap, create App Center container for mobile app, use PowerShell for registration, and then step through the build process executed in the Apple Developer portal. Helpful tips throughout presentation.

This PnP Community demo is taken from the Microsoft 365 & Power Platform Development Community call recorded on February 2, 2023.

Demo Presenter
• Sabbika Siddiq (AIS) | @sabbika

Community Call Conversation
• aka.ms/Feb2-Demo1

Supporting materials
• Article - Turn that ‘Power Apps’ App into a Mobile App! | https://www.ais.com/turn-that-power-apps-app-into-a-mobile-app/
• Documentation - Overview of wrap | https://learn.microsoft.com/power-apps/maker/common/wrap/overview
• Tool - App Center is mission control for apps. | https://appcenter.ms/apps
• Documentation - Tutorial: Register an app with Azure Active Directory | https://learn.microsoft.com/power-apps/developer/data-platform/walkthrough-register-app-azure-active-directory
• Tools – Apple Developer | https://developer.apple.com/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

Specialist at AIS, with experience in commercial and GCC tenants and my education is in architation planning, but not the software kind. However, I found my calling here: I developed, Microsoft 365 Solutions, with a focus on Power Platform outside of Business and Technology. I am a painter and a mural maker.

A

So today I'm pleased to speak about this really cool feature of Power Platform called raps. The feature went GA last year in June. This allows us to package our canvas apps as custom branded Android and iOS apps for Native distribution to mobile users. So you don't have to anymore search for the for your apps in the generic power apps.

A

So I did a capacity building exercise at AIS to demonstrate wrap capabilities.

A

So that's a little agenda here for today's talk going over the documentation discussing benefits and what is needed to a companions project followed by a short demo. uh Let's talk about the capabilities of this feature, so it can package together, multiple canvas apps in the same mobile app and we can manage these apps with Microsoft InTune. It allows code signing for both IOS and Android for both platforms.

A

The steps to achieve are pretty much the same with only a few differences uh we'll take the iOS route for this demo, as most corporations use iPhones as the as mobile devices. It's a popular choice, and so, depending on your business scenario, uh you can manage these apps with Microsoft InTune and distribute them through Microsoft App, Center, Google, Play Store, just like regular mobile apps to end users.

A

So proceeding forward to accomplish this project, you'll be working with Azure ad app registrations and we'll be installing our wrap solution in our Power Platform environment.

A

You need to have admin privileges to accomplish this step, we'll be having definitely our power flat platform Solutions, where our apps and other uh necessary things will live in and we'll have The Branding assets like how will our app look like and what will be the landing page or the splash screen and the whole nine yards, and when the build is complete, we'll be using the visual studio app center to store the builds upper mobile app to keep it succinct and to the point, I'll not go into the details of this, but these are the high level overviews of what components we'll be using so the solution when we when it will be installed, it will look like this and we are going to create our own solution with our canvas apps and we are going to then we'll have the available option wrap and if you are packaging, multiple apps use the one with the landing screen and start populating.

A

The information, uh let me go to my environment and I can show you that uh yeah. That was the plan. So these are the uh these are the information that needs to be filled. I'm going to briefly go over over all of it, the general will be we'll getting we'll be selecting our platform. The iOS is going to create an IDI file. Android will be the APK package. uh We are going to get the bundle ID and the app ID from the Azure portal.

A

I'm gonna go over that then we are going to put the display options. It's going to be splash screen or whatever the customization. It will all go here. It does have some requirements that it needs to be something like uh some specific pixels. There are online tools to achieve that, and- uh and the third step would be the publishing details like where are built.

A

Apps package will live in and we are going to do that uh and we for that we'll be needing the URL for the container in our app center visual studio app center and we are going to create an API token. That's that's going to be populated here, and then there will be the build option. That's going to take some time, usually one hour and more and the the green signs tells the uh it is successful.

A

Otherwise, it does shows that what happened so first step would be registering our soon to be mobile, app in the Azure portal to allow it to connect to our company's resources under Essentials app registrations. I've already done that, because this is a very quite a long process.

A

We are going to get the application ID, just like the regular registration we do and then we are going to generate the bundle ID. That is what is bundle ID. So it's a unique identity of the output mobile app and it follows a reverse domain pattern.

A

For example, this conduct on Microsoft that I use and I'm going to select the tenant type right now. Microsoft only supports the multi-tenant account type. So we have to be mindful that we are choosing this one and we are going to just choose our platform and we are going to configure the bundle ID. Those two things are going to be filled over there and while we are here, we are going to configure some API permissions too. For us mobile app.

A

We are going to uh I, have added these API permissions. I have used Dynamic, CRM Azure, API connections, PowerApp service. It depends on your scenario that uh what data connections you are using, you can always add those, and if there are any missing API connections again, it is swiftly added uh installed by running commands in the Azure Cloud shell using the tenant ID.

A

So these are the ones I used.

A

Okay, so for this we have actually so uh we we have got our information from uh for the general, uh all the all of it from the Azure portal, and now we are going to go towards the publishing details for that. We need the URL.

A

You have to log into the visual studio app center, and if your organization doesn't have an app center, you can always sign up for one and it's a storage location to store our builds of our mobile app.

A

This is the container that I made and it's a pretty easy, easier steps, and um here the app when it's all built, it will look like this and it will be here and if you are going to go to the settings, we can generate the API tokens from here and we have to give it full access when we are doing it and some tips around it.

A

You should always copy and keep it with you, because, as it will be gone forever and and while building this, there should be separate containers for different operating systems, and if you delete your app from the App Center, this one is important.

A

You'll lose all your data for the app permanently, so you have to be careful around that and uh and after transferring an app into an organization, you can transfer it back to your personal account so container in the App Center stores the build outputs and it differ depending on the target platform that you selected. It will create the IPA Apple IPA package for the iOS and the Android.

A

It will be the APK package, and so we are going to take the URL from I think till the until the app and the API token from here, and when the build is done, we are going to download it and take it to the other side for the second process, and the next is allowing the registered app in your environment using Powershell modules, for that I have already run it already. It should be a version 5.1 or below remote site and we'll import the necessary modules.

A

Just like we have the the power powerapps Administration, allowing clobber for to override warning messages about installation conflicts about existing commands in your computer. Already, then, we are going to add the user account and it's going to pop up the window, and you are going to do that and we are going to allow our app in our environment allowing the third party app and the status 200 is a good sign, and this step would be done too going back.

A

So after all of this, we are going to start the build process and later download it from the App Center. The builds can take more than an hour so account for that.

A

So after the build package, it's going to be the second half is code signing process. So I'll quickly walk you through that it is uh so we'll need two things for signing for iOS a MacBook with xcode installed enrollment in apple developer program. It's uh it's 99 per annum and uh to distribute your apps within your organization. You need to sign up for Apple Enterprise developer program.

A

It gives you the option to create an Enterprise distribution certificate and we'll be using um and we'll be needing the device udids, uh and it's just for the development and testing purposes that it's do a producing our desired app or not. So now, all the rest of the magic happens in the Apple developer portal, so we are going to sign on with the same account and we'll be using and one more good tip at this point. Is you sign on with the same account that you'll use for xcode, because it can mess things up?

A

The first thing would be creating an app ID. We are going to go to the uh app ID and we are going to provide some basic description and bundle ID, and we are going to select capabilities what we need our app to have. So it is a long list of capabilities here like, for example, it has a uh iCloud capability, Associated domains. Nfc tagging push notifications, then we are going to review and register the app over there.

A

Second step in the Apple developer portal is uh creating a distribution certificate and we we are going to create a new certificate. Signing request MacBook has the keychain access. We are going to use that to request a certificate and then going back to the portal. We are going to create that request by uploading it and using, uh and we are going to download it so keychain access is. It contains various types of data like passwords, private, key certificates and secure notes.

A

So staying in the portal uh uh we are going to register our devices, there's another tab where we can register our device. We just need the udids uh uh that that's the unique identifier that you get from their Hardware values and then proceeding forward.

A

We are going to generate an iOS provisioning profile and we are going to add all the devices where the IP needs to be installed and it's going to prompt and there's going to be of all process where we are going to be prompted and we are going to fill the information and and at the very end, after selecting all the certificates and everything the uh the app profile. Er will look something like this and for production users there are going to be different, like app store, would be the distribution method and different right now.

A

I have used ad hoc and for testing purposes and later we are going to download and unzip the file from the App Center. This will create a folder named after the bundle ID. This is I got it from the my visual studio, app center and I'm, going to open it with the xcode and we'll go through the visit process for the distribution of the app and, at the very end, you'll get the required IPA file. Next, we are going to side load the IPA packaging onto your device. It's just a simple step.

A

You just plug in and drag your file over there and it will start the um installation process.

A

I did record some videos, but I, don't think we'll have so much time for that, so the app icon on the phone will be there to greet you sign in opt-in out of the form, the notification just like regular apps. Now you can easily access your app from the device without having to search in the generic power app I hope everyone will have fun working with it as much as I had and some parting notes. This feature is not yet available in GCC or high tenants.

A

The last time I checked and Rap Only supports multi-tenant account types. Just like I stated earlier and publish changes to the included canvas apps are downloaded automatically. However, it is recommended that you re-wrap and redistribute your mobile app on a monthly basis to benefit from the frequent platform bug, fixes, updates and new features, and if you are making any bigger changes like updating, icons, colors and adding or removing some canvas apps into your mobile app, that will require you to re-wrap or redistribute your mobile package.

A

These are some helpful links. I wrote a Blog on most of the things I we discussed today and you can find it on the AIS blog website and questions are welcome thanks everyone for your time, yeah.

B

Awesome so because it's super super powerful functionality here to be able to share all of that. So thank you for walking us through that. We look forward and hope. Everybody's able to take advantage of that links are in the chat, some questions and we'll have more opportunities here, as we wrap the call for others to get involved in collaborating with you.