Building Power Apps with .NET & Azure API Management - End-to-End

I'm very excited to be here very happy to be talking uh with you today uh my name is Marcel fajeda I am a senior product manager in the Power Platform developer tools team okay so what we do it is we build tools for developers to work with Power Platform and with me I have Linda here today Linda will also help me to introduce herself we split the presentation in two parts I will start talking about Power Platform I will introduce Power Platform if you never heard before and I will I will say why is relevant for Developers for traditional developers or net developers specifically in the API context that's the main scenario that I will focus to introduce the platform and then Linda will show how you can mix and match and do more advanced scenarios and innovate with Power Platform okay so let's go to it please uh take the survey for the session that helps us to make better events and this is the agenda that I just summarized to you okay so in the party I will talk uh is like Power Platform 101 for pro developers and in the part building that we go to more advanced scenarios so let me set the context about Power Platform what is Power Platform and why is relevant for net developers or any developer Power Platform it is uh it is a low code extensibility model for azure okay in other words it is a suite of tools and services that any individual can use to solve business problems in the market is known as no code low code tools I kind of don't like the name but I have to follow the flow and the main reason it is I think there is a misconcept people think that a developer only writes code but that's not how I see a developer a developer actually solves problems right we have problems we have to solve and Power Platform is a great tool that you can add to your tool set it's not only for non-technical users actually is a great tool that you can use and there are several tools the tools that we will focus today is in the powerapps powerapps is a tool for you to create applications in a low code manner you can create front-end applications we have several connectors with the public services but you can also add your own services and that's the beauty of our platform it is low code but you can fully extend with code as you need the main point for developers additional developers it is you can use to be efficient and that's one of that's the scenario that I would like to start with so putting the context that's the whole ecosystem as I said powerapps is just one of the tools that you can use right and you can mix and match there is no one-size-fits-all and that's exactly why we have developer tools for Power Platform that's what I do that's what my team does uh what we do it is we provide some tools like uh command line interfaces Visual Studio extensions vs code extension all these tools to help uh traditional developer to interact with the platform and not only that but also control whatever less technical users are doing with the platform so there are lots of people who they don't know what is coding they want to play with the platform you can put some guard rails and make a safe to fail environment in that way it will not add overhead towards developers right this is one of the reasons why we have developer tools and another reason it is to help developers to be more efficient right so the scenario that I will highlight today I will take the role of an API developer uh I will go and show the architecture of the first scenario and uh today is a very very demo focused session so we show lots of code and I will show a solution from start to end and that's where we are starting so I will take the role of an API developer uh the business scenario that I have it is I am a HVAC company okay and we have several warehouses in each Warehouse we have a Legacy Management Systems like we have systems where we can go and see how many items we have available what items are available or not in each Warehouse but these are Legacy applications I don't have mobile or web capability so what happens today is I have a field officers few technicians every time they are in the field if they want to know if a given part is available they need to call the warehouse they don't have a way to check on the mobile or to check in the website okay uh again I am a back-end developer and I have this system I have an API which provides this information already although I'm not Savvy in UI and actually I I'm I'm not interested in learning a new UI framework I'm not interested interested in managing all dependency or complexity of UI work I'm very comfortable I'm very happy with the API development that's where I want to focus so that's a perfect scenario for me to use powerapps because with powerapps I can quickly create a front-end which will provide more mobile capabilities I can make my existing API available for a few services so they can check the inventor in their mobile and the way we do that as I said our platform you can fully extend with code if you have systems if you have data available external data you can use what we call Custom connector to get this data and this is one experience that we focus to help professional developers or traditional developers to make it easier to make very natural for you to make your existing API available so you can consume in Power Platform you can either make available for other users to consume or you can consume yourself and what I will do today it is starting from this API I will create a phone app in about five minutes and let's see how it is right so I will jump to code I will stop here and first before I get started I talk about per platform how I get it started how do I get a Power Platform environment you can get three up to three environments for free we have what we call power apps developer plan uh all the links it will be in the end all the source code were being named as well so don't worry uh let me just close here I open the wrong browser okay so first thing that I have to do it is I need to sign up for the plan to get a Power Platform environment if I don't have is a very simple process uh you just put your email you have to have an AAG account if you don't have their workarounds but that's the easiest way once you do this process in a couple of minutes you will get to this screen where this is Power Platform basically okay you have one developer environment here in the top corner you can see I am in my developer environment uh you are ready to go but as a pro developer I recommend one step I recommend create a Power Platform solution Power Platform solution is a way for you to group all the artifacts that you will generate you don't have to but if you start using Power Platform Solutions it will make your life easier okay promise you okay I already have my environment I already have Power Platform let me go to my visual studio here I have my API I will quickly run my API to see I am in the Inner Loop I am in my local environment it is warming up okay nothing fancies just this API I have three operations here one to retrieve the list of our houses in order to retrieve the list of items in order to get how many items are available I will pass an item ID and then I will get how many items are available in each Warehouse this is the API that I already have I will create a front end from it so let's get to it I will close I will be back to my visual studio so the way we connected it is through the connected services so this is a web API project here in my solution my visual studio solution in Connected Services I will just right click oops [Music] add Microsoft Power Platform okay once I do that I will get a new screen and here I will need to put the account that I use to create my Power Platform environment okay here I am logged in already so it will retrieve the list of environments that I have as you can see here I am in the dev environment I can have up to three environments with the developer plan and here I will select the solution if you don't have a solution that's fine I did create a solution so while we use inventory on hand uh to to generate all the artifacts right and then I will create the custom connector and as I said before this is a wrapper around your web API uh I will create a new one I could update an existing one so I will create one called invent API connector go ahead and create a visual studio will generate an open API specification for me I will talk about it in a second another step it is I have to create a Dev tunnel I will talk about this feature in a minute so I will create a new Dev tunnel I will just hit OK and then I will hit finish and visual studio generate over me so what it's doing here it is it is generating an open API spec from my API in a way that Power Platform will extend is just a normal web API uh open API spec if you want to extend if you want to customize you can provide yourself in my scenario Visual Studio will generate fine for me and also will create a Dev tunnel why is that my API is running my local machine and Power Platform is a cloud service so I need to provide the public endpoint so Power Platform can connect with my API and this is what I'm doing here actually it is done so I will close and I will run my API and then it is warming up and then you will see the depth owner right away there you go here is telling me that it is using adapt tunnel hit continue and you can see by the URL here is no longer a local host now it's using a public URL okay just explaining what is happening under the hood and here my API is running already and I will go ahead and create my power app so here from Visual Studio I can open the power app I could just go to the website as well whatever is easier and here uh visual City will take me to the custom connector screen in my environment so I am in the dev environment he will show all the custom connectors that I have this is the the one that I just created invent API and I will create an app from it as I mentioned I'm using a solution I want to show that the solution is empty it should have only the custom connector that I just created here it is and now I will go ahead and create my app so let's go ahead and create a new canvas app this will be a phone app and I will call intent on hand okay it is warming up and this is the what we call powerapps Studio this is where you create is a drag and drop kind of altering experience uh I will use some templates as again my proposal it is I will build in five minutes I will try to be very quick so let's see how can I do I will add two strings here I will use some templates so I will go ahead and use a list template my app I will have two lists one list with all the items that I have when I select an item I will see how many of these items are available in each Warehouse okay so I will need two screens with lists let me add another screen all right and let me delete the first screen I don't need anymore is blank let me actually rename this one to screen one this one to screen two name screen two okay now that I have kind of my UI I will add data from the custom connector that I just created right so I'll add data I will just type the name invent API connector and clicking connect and this uh this is making my API available for my ad now that I have the data I will select the control this is what we call a vertical Gallery is a very popular control I will connect to my connector so first thing I will select the connector then I need to call my API so let's first get the list of hyphens my operation is get items right so that you go um okay now we will quickly adjust the layout let me get title subtitlement buddy and let me select the fields I want to show I want to show my Item ID I want to show my name and my description and that's it okay I have a starting point this is a list of items now when I select an item what I want to do it is I want to navigate to the next screen navigate screen two right and then in my screen too I want also to connect this control to my data so let's use the connector and let's call another operation let's get the inventor hand and I need to pass an item so I will call the order control the vertical Gallery the name is browse Gallery as you can see here okay here's the name of the control let's call the control here browse Gallery one and I will use the selected item and the field that I want is item ID okay and oh I had a break point in my app so you can see the API is actually running my machine if I want to debug in real time that will work and I can even see what is the value of the iPhone ID is item one so I can use powerapps to develop in real time this is really the inner loop right so I will remove the break point and hit continue and I will finish my app so let me just change the layout to Titan subtitle and here I want to show the city which is my warehouse and I want to show how many items are available in stock okay uh let me just about my final touch let me just update this UI I will put a back button here and what this button will do it is if you navigate back to the screen one right okay there you go my app is ready so I will run here this is basically my app I have a list of items and when I select an item I will see how many are available in each Warehouse right and this item this if you're working any device you have you can create Advanced uis there is a way of doing fully responsive apps here I'm using the templates I'm doing as quickly as possible but that's what the final app looks like okay once I'm done with my app I can save and I can publish and this would be available in any device at this point for my few technicians right in the real world it's not that simple like I mean the dev environment I need to move across different environments and not only that this app is actually connected to my local API I need to connect to a publish endpoint right so there are multiple options you can do here from Visual Studio I will stop my API I could use publish profiles to publish my API and also to update the custom connector so in this scenario here my API is already published as an app service in azure what I can do once I already have here a endpoint I can just go ahead and update my custom connector to use that endpoint okay this is one way so let me just quickly update here I will use the same environment I could select different environment I could create a new custom connector if I wanted in my scenario just update the existing one and here is the URL that it will use and I will go ahead and hit finish and then it will update for me but then you say okay but that's not the real world like I have cicg in my environment how do I do that yes you can do you can you use either Azure devops or you can use GitHub actions as well in my scenario I do have this in GitHub actions so I will quickly open my GitHub and uh what I can do another question that lots of developers do it is okay but where is the artifacts where is the code because stuff are in the developer environment that's not how I work I want stuff in my source code in my repo right yes you can do that that's why what I'm doing here I have a GitHub action that I set up to export all the artifacts from that solution and store in the source code okay so this is the example I have this action here which is called the export and commit if I run this workflow I can select one Power Platform solution okay this is the inventory on hand I already run this uh I will run again that's fine but I will show the artifacts right now okay this will take about one minute to run what we will do it is to export everything from my Dev environment for a platform Dev environment and put here in the source code let me show you how the service code looks like okay so this is my API and here is the folder for my solution invent on hand here I will have my connectors let's see the connector how what it looks like the custom connector so I have the open API definition here as you can see is a standard Swagger uh I have the host here this is the host that I updated my public endpoint I can extend if I want I can customize this uh this connector that's fine we have also specific options for Power Platform if you want uh let's keep standard here let me show you the canvas app now the source code of the canvas app the app that I created so it's basically the it is at what we call Ms app okay msf is kind of a packed app if you want to see the source code you need to unpack that's what I did in this GitHub action and if I go here to Source you will see I have all these screens for my app is in yaml format and all the elements that I have on the properties and for example here I have my the call to my API invent API connector get items okay and the language that we use here in Power Platform we call power effects okay it's very similar to uh Excel style you write functions is very straight to the point and uh here is the fact that you can see the source code okay uh uh and from here I am in GitHub I could create workflows I could export from developer environment to test environment I could do full cicg and the source code would be my source of true so this way I could leave a less technical users to play with their environment once they are done I can just create a new one you can create environments using GitHub actions as well it is really good for products okay and all of these just to finish all of this is backed up by what we call Power Platform CLI is a command line interface uh which you can run in Visual Studio or Visual Studio code as well let me quickly show you the extension that we have in Visual Studio code so this is our extension we have the list of environments here and the two that I mentioned is back you can see we have several operations uh to to do anything you want with the platform you can create environments you can delete environments you can create connectors you can create canvas apps from the connectors as well which I will not have time to show but uh all what I show in the GitHub it is using uh Pax CLI under the hood okay let me quickly review what I showed here okay and why it makes sense for our platform so basically I start from a API that I had and I had a business need I needed to create a mobile app for my Field Oxford my field technicians right with powerapps I could create a quick app uh easily I don't have to manage different dependencies of UI Frameworks I can do CI CD I can create continuous integration continuous deployment and I can still concentrate in my API development so that's what we call digital modernization scenario it's a simple way for you to add new and good looking view for your users there are more advanced scenarios and more opportunities for you to innovate with Power Platform and my colleague will tell you how to do so Linda is okay article to do a little laptop switch can everyone hear me yeah so before Marcel gave this overview how many of you had knew about Power Platform or maybe worked with Power Platform before okay all right so like a few people okay what about um API Management in azure how many of you okay a few okay how about just general like API management platforms like apogee or other similar service cloud services yeah okay cool awesome so I'm Linda Nichols I'm a global black belt here at Microsoft in app Innovation my team covers the Americas so my background is uh traditional development Pro development um but I really enjoy low code I have a passion for it and so um understanding that connection between these two worlds and sort of how I think my hair is covering my microphone um how we can use external apis and code we've already written and taking Legacy systems and then connecting to a low code front end it's something I really enjoy um so I'm going to talk a little bit I'm gonna I'm gonna talk about so Marcel gave me all the fun stuff so like the fun like really is going to start here thanks for laying the foundation for the fun Marcel so I'm gonna talk a little bit first about um you know I guess why we care about API management and API Gateway pattern and why these things are important when we're talking about low code because for many low code apps you might think okay I'm building a low code app my back end is going to be Excel they're going to connect to each other and this is just sort of like a playtime app and so Marcel and I are showing you that you know these are these are real Enterprise applications and um you know he had a use case of the inventory system and that's a real system and those are sorts of problems that we have customers come to us to help with so um you know so I could my team covers Azure so you know I love Azure and I'm going to talk about kind of how to use Azure and power together with external services so the um the bottom tier here we have data Factory functions logic app spent grid API management this is all our this is our suite of integration services within Azure and these are kind of the Gateway between our low code platform and Azure and then also external platforms and even other Cloud platforms on-prem I've got a couple little mainframes hiding there at the bottom but not just apis but also events too so you can create event driven systems that have a low code front end and and also you know if you're not familiar with Power Platform just think of it as another front-end framework in your toolbox so you might have reactor view or or Blazer but then also you have this low code platform and maybe this is you know something you're using for prototypes and demos maybe this is the front end for your internal application but the great thing about low code is you fail fast so this should really be your first stop before you say okay I'm gonna I'm gonna take these two or three weeks and I'm going to learn vue.js this is what we're using for our new front end maybe try low code because you might build it in two hours and then you might determine okay this isn't a great fit for my application that's fine you didn't waste a whole lot of time then you move on to something else so from this point on we're going to think about this top row here is just like our art just another front-end tool but this is a front-end tool that anyone can use because you don't necessarily have to know JavaScript or any code to be able to write it whereas underneath the arrows here is kind of more of what we're used to as kind of like traditional or Pro Developers and so um powerapps and API management um you know our teams all work together and these products are they have kind of tooling built in to be able to work together and that's kind of getting more and more and better kind of as time goes on um and so here we have kind of have this handshake between the professional developer and the low code developer in this diagram so the professional developer is creating those traditional apps and apis and perhaps the custom connector as Marcel showed and then maybe you have another developer a low code developer that's creating the front end and then the two are kind of working together or maybe this is all one person maybe this is all me like I created the apis and then I also need a front end so I can actually see what I what I did so why use an API Gateway um or you know API Management in Azure is what we're going to talk about today why why would you why would you do that and and it's the same reason why you would do that with a traditional app really and I mean the number one is decoupling and I like to talk about decoupling all day long that's just sort of like the hill that I will die on um and yes you can write a power up you can create connectors you can connect directly to data but I really want you to use apis I really want you to use an API management system and API management Azure is is a really really good service and so it really gives you also this extra layer of governance um we do have a center of excellence uh toolkit that's available for powerapps and so you you do have governance built into low code so you're so your low code users can only do as much as you want them to do as an admin but also now with that API Gateway there we've got another layer of governance because now you need an API key or you need oauth or you know whatever security you decide now your custom connector is going to have to connect through that API management system and then to your backend apis also debugging monitoring you know change management you know so that you can um work with your low code developers you have a new version that you publish they can still use the old version until they're ready um and really this this API Gateway is just a facade so you know I'm going to show kind of how I'm wrapping some external systems with API management and and the large purpose there not just for the security handshake or you know throttle throttling rate limiting it's also because I don't want my low code apps to have to know what's really happening behind the scenes what's happening in in app service was happening in containers what's happening in these external apis it really just needs to know that there's an API Gateway there and also the integration with Power Platform which I'll show which is kind of built in so this is um just a really super simple diagram of what I'm going to show it's going to similar to what Marcel showed but I'm going to show an app that has an external API but it's also going to use Azure open AI so how many people are familiar with openai Azure open AI okay all right it's gonna be really cool this will be a great intro so uh open AI is an open service but Azure open AI is essentially um like our instance of that service and so we have um our AI playground that you might be used to if you used our cognitive services and now we can use open AI within that playground and essentially it's a it's a set of apis um so it's going to be very familiar like you're hitting an external Epi but there is AI there and so you can you know send it information and get some really interesting stuff back in return but by using our Azure open AI system you can um you can help with your performance you can do better toggles you're not using like some random nightly build you you know you have some you you know what you're going to get basically if you're using the service within Azure that's what I'm going to show today so my app is not a traditional Enterprise app my app is for the Star Wars fan club so the story behind this app is we have the premiere worldwide Star Wars fan club which was previously built on Excel and so all the members of this fan club all their data was stored in Excel and so the club decided okay we need a better way to manage this data we need to update it when members change also the members want to see their own information and they also just want to do some cool stuff because they're they're basically like Star Wars Geeks and so I'm going to show today how the app sort of evolved to use an external API which I'm showing here which is actually the swappy API it's this open Star Wars API that has all the latest information based on Canon so if I if one of the members says that their favorite character is Luke Skywalker um then that data is shown in their account based on Excel but what if the Canon sort of changes about Luke Skywalker because there's a new show right like we have Mandalorian and you know he does something new in Mandalorian and now he has a new um the Canon slightly changed we want that data to update so what we did is we're using external Star Wars data so that every time I click on a member I can then see the updated info so I go over here first to um Azure AI studio so in the Star Wars app I added some information about Suave but also I added in some AI because the members want to add like some cool stuff basically they want to generate avatars they want to do fan fiction they want to um to really do some interesting things and they kind of want to geek out so um since not a lot of people know about Azure open AI I'm going to kind of start here in the playground so this is azure this is the Azure open AI service this is the playground and this is where you kind of figure out what you want to do with this so there's three endpoints essentially in here and these are just API endpoints the chat which is kind of the power behind like chat GPT and then the completions endpoint just kind of like the the summarizing the you know you can generate an email you can you know generate quizzes you can I'll show some examples of that one and then Dali is generating images so I can say you know generate a photo of um Marilyn Monroe and the style of Picasso or something like that so this is what this looks like if I go to the completions endpoint so first of all um this is a list of models that I have access to regenerative AI and then I've deployed a couple of these for for chat text DaVinci is for um completions then when I go to completions here I can choose my deployment and then here it also gives me some examples of some things I can do because this is this is truly a playground like you this is where you learn prompt engineering like okay what do I really need to send to AI so I can get back the information in the way I want it and so here I'm going to generate an email is this large enough do you try to zoom in people in the back yes um so here we have some parameters here um temperature is is really sort of an important toggle so temperature is the creativity so one it's not very creative as I as I increase this it's going to get more creative and it's actually going to at some point um hallucinate where it's going to be just like maybe possibly too creative and so this so right here this is great because I can kind of play around with this I can ask the same prompt over and over again I can increase this and get a feel for it and each one of these little parameters in here has a little info so if I don't remember what any of these are I can say like oh okay all right stop sequences what's top probabilities okay this is similar to temperature this is also going to control kind of my my Randomness and my creativity here and then also you can add like a pre-response text and post response text that's going to then come back from the API endpoint so these are all just parameters to an API so I'll go ahead and generate this email so this is the prompt that gets into the API it's coming back in green is what gets returned now if I want to use this in an application then okay how do I hit that API well I just come here to sample code and it's got python it's got C sharp and it's got Json which is what I care about because I'm going to connect this to a power app but here it just has everything I would need to plug this into Postman and essentially get back the same result we just saw on the screen but here also we have all these parameters so you can change these parameters right here to get the results back the way that you want them to and then of course here's my key and here's the actual endpoint and so there's a whole list here of of things you can do um now the other one here is Dolly where I'm going to you can generate images so for this one I can say like um I'll say like um I'm just doing this live so you know we'll we'll see we'll we'll uh get back I'm saying I want a Picasso style painting of Luke Skywalker I machine this might be kind of small so it's going to take a second too to generate everyone in here is up early but open AI is going to take a minute to wake up and so there's this Picasso's version of Luke Skywalker and so same thing here now I can generate code I can go to Json and I have an example here with an endpoint and a key and so that's what I need to now connect an app to this and so I could connect any app to this but because this is a low code presentation we're going to connect low code to this now I could create a custom connector to connect to this these endpoints directly but I don't want to do that because I've already talked about decoupling in the API Gateway pattern I feel very passionate about so we would never do that we would always have an API Gateway in the middle and so here in this tab I've kind of got just got the swappy API if you're not familiar with it that's swappy Dev um and now I'm going to zoom in a little bit here too so this is now now I'm in Azure in my Azure portal and this is Now API management this is what this looks like I'm gonna hide this so that we can see this a little bit better and basically I've already created some apis in here for Azure open AI API I have one for just the external open Ai and then Star Wars which is essentially just a wrapper around that star wars API and how you get started with API management is I can go here to http and I can manually create all these all these endpoints essentially like from that view code information I just got from the playground um or if I have an open API spec I have a Swagger spec which we do have those open source for all of our cognitive services so if you want to wrap open AI you don't have to do this from scratch you can just use a Swagger file or if I have something in an Azure resource already so if you have a.net app a swashbuckle and you've got that opening API spec you can do this here a lot you know same thing with the logic app get an HTTP HTTP triggered logic app you can do that here same with the function app um and so really it's it's pretty easy to kind of get that started and I'll start with the Star Wars one here um so by default this is protected by an API key that you can turn on and off but also one of the really powerful things is if I want to protect that backend API with um like oauth and I can also do that here anything I need to do with like the token exchange I can do that in these policies in here in API management so I'm not going to hover over that because it's going to show my special sauce but here I've got uh I'm I have a validate job policy here where I'm protecting this Star Wars backend from my power app um and and here for Star Wars I'm really just creating a facade for this backend API I'm adding some security I've got two endpoints here um this is also sort of the power of this management system is that I can aggregate all these apis in one spot but also it the Star Wars API has a hundred endpoints I don't really want to deal with 100 endpoints especially in a custom connector because that's going to be kind of a lot for a power up to deal with so I just I only need these two endpoints so those are the only two I I created in here and so I can kind of filter out the API to only get what I need like one exact great example is GitHub GitHub actually has so many endpoints that it exceeds the character limit for open AI open API and so I definitely would want to if I want to just filter down like the GitHub API to just what I want that I might use API management as a wrapper here now for for AI Services since they can get kind of pricey depending on how many tokens you're sending over like how many hits and you you know you don't really know especially in the beginning like how much trap is going to be used how often people are going to hit this then like rate limiting is going to be very important and so that's something you can also do in a policy here um and so like for completions for example which I showed before I've got set header and I've got set query parameters here because one of the query parameters is a uh a date for the version of the API and so I just set that automatically in the query here I've got a header that's got my token in it here and and that is all done here so I don't have to worry about that in a power up and that's really important because it's a little easier to debug here but also if you have true low code developers that are not developers and you just want to give them an API and say okay here here's your data go build then you don't want them to have to worry about authentication you want that to already be built in um so now also final thing here in API management is now I have these wrappers in here that I want to then use in powerapps and so I can just click the three dots next to any one of these and do manage power connector and then here I can actually create a custom connector from within azure do create and this will then create this custom connector in my power environment so really if I'm the pro Dev and I never want to touch power apps I just want to set up the infrastructure for a loco Dev I can do this All In Azure and then I don't even ever have to really go to powerapps but since I love powerapps we're going to go there um so this is the powerapps studio which Marcel was showing earlier and this is my custom connector area these are the custom connectors that I exported so what does this actually look like so there's a wizard here so you can step through the wizard if you want to go through manually and change things or or um create these from scratch that's fine also if you're in open API wizard you just want to go through and edit they open a you know open API I'm struggling with open AI versus open API today but then you can go through and change it here too and this is this is really helpful for debugging but basically all that's in here is just the code that I generated from that playground and so this is now the magic to connect to these two services so let me go to my app and this is where we'll it will get kind of fun so now this is the Star Wars fan club app I'm going to go and edit mode for this um and I generated this app really similarly to how Marcel did his the actual backing data for the members is just in Excel just sort of for ease of demo but that could be if it was real life could be like a SQL Server database or something so these are all the members and when you click on them you can get some details about them but I'll show you the the code here this is all this is where it pulls from Excel but on I have an on select event here if anybody ever you know is an old like vv6 developer you might be looking at this and be like I'm having some flashbacks it's really similar to the old VB6 interface where you had sort of the events up here that you could assign code to so what I'm doing here is I'm doing clear collect which a collection is just a cache and powerapps and it's essentially saved in the backing data database and our cell didn't really you don't really talk about dataverse too much but dataverse is is the the database that's behind all the things in powerapps and so everything is is sort of stored there and so these collections are just basically arrays that are stored in in dataverse and so what I'm doing is I'm hitting the Star Wars API here I'm getting people I'm searching based on each individual person's favorite character I'm getting back some information on them so if I play this you know I go down I select any one of these members and here's their general information in white they came from Excel and then here in this link you know salmon color is what's coming from the API so this is all now the latest information that we know about Luke Skywalker and so that was sort of like the first requirement for the fan club is okay I want Dynamic information about each one of the Star Wars characters then we needed to have some fun and we need to include gen AI because that's sort of the coolest thing so we decided okay we want the members to be able to create an avatar and so we want their own personal Avatar based on their favorite character but also um maybe like a little bit of fun so someone give me an action like what Luke Skywalker could be doing anything juggling riding a bike jump rope and what somebody give me a planet a star Star Wars planet I knew you're gonna say that because I am unsure how to spell it all right let's see what happens Jenny I will be able to fix the spelling it can do everything all right so there's my avatar this is Luke Skywalker jumping rope on the desert planet all right let's do another one somebody another action this is the fun part of the presentation skateboarding okay and a different planet do you know how to spell Alderaan maybe we will know we'll see if it knows it's not it and it never returns an error like I don't know what Alderaan is it will just dig a guess okay all right so I think that's Alderaan we don't know right because it was blown up in like the first movie we saw but um okay so then there's another eight uh Avatar here so now again more requirements like how do we make this even cooler all right well we're gonna have Jen AI generate some fan fiction about this Avatar of Luke Skywalker skateboarding in Alderaan and so now it generates this story and this is all just data coming back from that API and so you know this young Jedi who loves to skateboard and he'd heard about Alderaan now we know that this isn't really true because Alderaan had already been like blown up I don't think he made it there you know because he was still on on Tatooine but anyway um but yeah there's a whole like long story here of uh and I think to I'm defaulting a lot of the parameters in this custom connector but I I think I expanded it to be as long long as I wanted it to be and so anyway there's a nice sweet little story here um okay so how did I make this work so more kind of low code powerfx code so it's the same thing like I did with the external API I'm just making an API call here so this is the dolly and point create image and all I'm doing is sending this text there and I added on planet and so really here I it doesn't have to be a Star Wars Planet but it just knows that these fake planets we've been in there are real planets in this in the Star Wars universe and so same thing here now for fan fiction this is now the completions endpoint and this is all coming through that custom connector that I had and I'm just sending data to an API and it comes back and so you know the idea of the connector is a little interesting if you're Pro Dev but but if you think of it as just this wrapper and this basically this common interface or low code developers and everything behind the scenes sort of works the same way great and I have one more fun thing here which is a quiz so this is another this is one of the examples from the playground so but we'll do a different character since we really did a lot with Luke Skywalker so Darth Vader and we're gonna generate a quiz about him this is going to be different every time I generate it too so you can sort of stump yourself like you know what was his birth name that's an easy one right you know what species is he okay human-ish also pretty robotic and so anyway I never so yeah every time I generate this it's going to generate me a new quiz and that's that's pretty fun I'll show you the code behind this one too who was the father of Luke Skywalker well I think we gave away the answer here so same thing completions in point and I'm just sending far prompt which is just the variable that I assigned to that text box so pretty easily here I mean this this all of these took me a matter of of hours to put together and so I did some pretty pretty fun stuff really quickly here um okay great so I'm gonna now go back to PowerPoints or talk about just go back to Arc and talk about some architecture any like questions thoughts yeah great handle sorry oh web accessibility that's you do you have any specific point uh I I'm not expert on okay okay yeah I believe we do cover those uh I will need to check with the writing but yes I believe we covered those yeah we have quite a few universities using powerapps also so yeah maybe if you can give us some specifics after yes absolutely anything else before I move on okay yeah both yeah it's it's using it's using data that it has about everything Star Wars um but then yeah the only data it got for me was the name basically all I'm sending it is generate me a quiz about Darth Vader and then it's using all its its information from that point yeah so it's it's only right or wrong as it's models anyone else all right cool all right so I'll go back to to go through some slides really quick and then maybe we'll answer some questions and then um and we'll go get some more coffee so I showed that one really simple pattern before and uh Marcel showed his diagram too that's that's kind of azure and power together but kind of over the last few years we've been kind of gathering um just you know use cases from from customers and um about how people use low code but use low code also with Pro code as well and so these patterns are sort of some some repeatable things that we've seen and so this is the most simple pattern and I love to draw a diagrams so this is this is my favorite my favorite after API management that's my like most favorite but um all of these like have a family Management in there somewhere so here I have basically this is just my front end which is power amps and a custom connector and then API management API management has a developer portal which is essentially just like a a front-end like static web page that shows all the information about your apis and so this is really nice for a business developer a local developer if they say well what's available I want to build some apps but like what do we even have out there then you can say okay here's the collection of API endpoints that I have in API management and you can see them in a nice like pretty way that's branded for your company um and then we have the API here which is in Azure uh web apps here and then I have an on-prem SQL database and this is just a this is probably our most basic pattern zero um and so we see all kinds of variations of this but then it gets like a little bit more complicated because then it's like okay well I have on-prem data but then I also have a v-net and then I also need to connect to these back-end services using oauth and so then we think about okay well this PowerApp is now going to connect to API management using Azure ID and then API management is then going to do this handshake with the back end oauth um to help us then connect to these back-end services and I have AKs even back here powering this data but my front end app is still low code then I can replace this with any web app here um this just happens to be powerapps in a custom connector in this situation and I've got some on-prem data here this is really a pretty common use case really to kind of make sure that you know everything's still protected within Azure but then you have you know public access to for uh for end users this one is kind of similar to what I just showed um we we see a lot of powerapps using AI on the back end not just open AI but lots of cognitive services so form recognizer custom Vision computer vision translate all of these things are apis and as long as it's an API then great we can create a custom connector for it or I might even have a built-in connector for some of the AI services and so in this example this is just a user uploading a file maybe it is a document maybe it's an image that we you know want to classify and so same thing custom connector we've got our API Gateway here which I'm just going to keep like Drilling in here and then on the back end we've got AI services and we're calling this Fusion development I don't think that we I don't think we talked about that earlier but the idea of fusion development is kind of the pro Code and low code together and a fusion team can even be a pro code team working with an entirely low code team it can or or I am the fusion team and I'm doing both that's also another option um okay so this is sort of an outlier but this is also kind of an interesting pattern which is I can have a Mainframe and I can have green screens on a Mainframe and I want to write a low code app that accesses Mainframe data well that's bananas no it's not you can do this and so here we've actually got an event driven architecture and an API here where you know we've got a virtualization layer here on the Mainframe we're ingesting data we have an API but also maybe we have some Telemetry coming from the Mainframe we're also capturing those events we're putting it into a power automate flow which we didn't talk about power automate that's low code work workflows and also we have low code Bots and so now we have a bot that's getting Telemetry data from the Mainframe um so it's like sending you messages in teams saying the Mainframe is unhappy the Mainframe finish this batch report it's been running for 15 years you know whatever your notification is that's sort of interesting and also event driven architectures this is an iot architecture but it's really any event driven architecture um this is also kind of interesting that I could have iot devices with a low code front end so one example here would be um a sports arena and you have lots of employees that are walking around the sports arena and they have their mobile devices they have a low code app running on the mobile devices and they need to know when they need to get out umbrellas or take towels to wipe down seats or put up an awning or cover the field and so they have iot weather devices that are that are then sending weather alerts and now the employees immediately know when to do something and then this is sort of the goodness under the covers that that does that whole system and then we could also have teams here on the other side too everyone could be in teams and be getting alerts this is all fun um there's no API Management in this diagram this is the only one great so any I went through those kind of quickly you've actually got like 10 10 minutes left so questions numerously yes uh they are they are different right use power apps to create apps like front-end apps you use power automate to automate flows so basically you want to automate repetitive tasks or or you want to take actions based in something that happened like the Mainframe pattern is a great one that that Linda just showed that's one example for power automate okay I'm just I'm bringing up power automate while we're here and uh the the link on the slide is a link for the repo of the solution that I did so it's available for you to get and play with it we have links there as well for the powerapps developer plan if you want to get a Power Platform environment if you don't have this for free and yeah yes uh on the developer environment you it is you can share up to 10 users but it's for test and build okay in a you have different kinds of environment basically you have sandbox or production in sandbox or production environment you can share with many users as you want as you need and you can Group by you can uh you can control by user access like I only only a given group of users who have access to this environment so you have the full control on the environment and you can add as many people as you want them usually it's a collaborative environment okay just the developer environment which is more think as an inner loop is really like in your machine is a developer environment where you can play with it you share to test but usually it's more for develop okay I'm creating this flow that gets the weather every five minutes ah there you go so this yeah basically just flows that are triggered by something so the trigger is is anything you put data in the database the weather changed every you know every 10 minutes do something but they're automated flows and so they can be flows that are just running completely independent or maybe a power app triggers them like you click a button and a power app and then it's at the flow and you can get really complicated with them like you can actually create like State machines with these flows um so that they're sort of like the backbone I think of yeah and you can be very creative for example you can monitor emails and use AI to see if anybody if you are getting angry males then you will notify your mobile you can do that there are very creative examples on flow to automate stuff yes oh good great mm-hmm well it kind of depends on what you're I have so many opinions but it kind of depends on what you're doing if you're staying entirely in in Power Platform then it would be power on some power automate flows if mm-hmm well you could also have some event sourcing behind that too so you could set some variables in the workflow or you could save some of that state to the database we were talking about this yesterday because we because dataverse is the backing database behind Power Platform so you could use tables and dataverse for event sourcing and save that state in a table and then it's I think it's going to be a little more stable than having those variables yeah yeah so having that data someplace yeah as Anita mentioned data versus interesting you can explore that uh data versus kind is not only the database but also provides uh a security layer it's kind of a way for you to create model driven apps but also if you if you have external system or things you need to caching that's another use for that over so there are there are so many ways of solving the same problem and there is always a trade-off really depends on on your requirements right my uh my flow finished running if you want to know how wonderful it is to live in two three five one seven which is Southeastern Virginia it is uh rain humidity 93 temperature 88 so miserable what was that planet that like Darth Vader and uh Han Solo had to fight on with the lava that's Norfolk Virginia any other questions all right uh do you want to put the link back on there yes yep so that this is the link for the repo if you want to go ahead and explore or you can just search for powerapps developer plan as well we have a specific documentation for pro developers AKA dot Ms slash power Dev is linked here as well so that's my ask please go ahead and try let us know your thoughts on Power Platform I will be here around I will be I will be Keen to hear your scenario if you are curious if you've tried what works but it doesn't uh as I said I work with Pro devs I love coding I love code so there is nothing wrong in using a local 2 for solve problems right um yeah I think thank you very much thank you

Channel: Microsoft Visual Studio

Views: 2,265

Keywords:

Id: fPurmWtILCw

Length: 67min 25sec (4045 seconds)

Published: Thu Aug 03 2023