 My name is Matt Sokup and I'm a Senior Cloud Advocate here at Microsoft. For the next 30 minutes, I'm going to show you how to build a mobile app using Xamarin, connect it to the Cloud with Azure, and make it amazing with App Center. So let's jump right into it and show you what we're building today. So what I have here is you may have seen this app use a couple of times yesterday, and during the keynote and today, it's the pretty weather app and it looks pretty good. We have the weather conditions, we're in Seattle, we have the temperature, we have the current date, but the world doesn't revolve around Seattle. Don't tell anybody that here but there's more cities involved. So what we're going to do is we're going to make this app fully functional. By that, we're going to hit the three little icons in the bottom, and then we're going to be able to sign in to Chrome, say no thanks, and actually be able to sign into our app. So I'm going to enter my e-mail address and my favorite password of all time, ABCD1234 with an exclamation point, sign in. What this is going to allow me to do then is save cities that I want to be able to view the weather with. Hit a plus button and I can now add other cities other than Seattle around. Enter Honolulu probably has a little bit better weather than Seattle, and now I can be able to see the current weather conditions then in Honolulu. So what I did is in addition to the current weather conditions, added a little magic to be able to sign in and have data follow me around the different locations or different devices. So let's see how we did all of that. We're going to be using to build all this three things. Xamarin for the mobile app functions to be our compute in the Cloud, and then App Center, mobile backend as a service that do auth and data which wraps around Azure B2C and Azure Cosmos DB. So first up, Xamarin. So a quick overview of what Xamarin is. Xamarin is Microsoft's framework for building performant iOS and Android apps, but it's so much more than that. You can build Mac OS apps, you can be able to watch OS apps, you can build TV OS apps, you can even build apps for Samsung's Tizen operating system. So it's much more than just iOS and Android apps. How this is done is that you've used the great power of dotnet and C-Sharp. So we have, let's say an iOS UI, an Android UI and a C-Sharp UI for Windows. So we're going to build a UI for each one of those out separately. We're using C-Sharp, we're using dotnet, we have full access to the platform, but we're building those UI separately. But we're building an app that one app is still going to perform the same thing although we have to build it for each platform. So when we call to that web service, when we go get our weather information, it's going to be done the same way. So we may as well use a shared C-Sharp logic layer, and that's where the power of Xamarin comes in, that we can write our shared logic just once, and have it use across multiple platforms at the same time. But we can do better. And that's where Xamarin Forms pops in. So what Xamarin Forms does, it gives us an abstraction of the user interface layer. So let's say iOS has a button, Android has a button and UWP has a button. So what we're going to do then is Xamarin Forms gives us an API that lets us program against a button, and then Forms takes care of emitting a natural native button for us. So now we're sharing C-Sharp logic for our application logic, we have shared logic for our UI logic, and we have more and more shared code. This is great. So then in the nutshell is what Xamarin is. The next thing I wanted to talk about is the compute layer or Azure functions. And so this is a quick diagram of what we're going to call the cloud native compute, or how we're going to architect our app. So way back in the day, we had the on-premise architecture. And so what that was essentially, that was the old computer underneath your desk, right? Where you had to take care of everything yourself, the machine, make sure the operating system was good, you had to install all the software yourself, but as we moved along, we started moving to the cloud. So you had infrastructure as a service, so you no longer had to take care of the hardware. Then you moved to platform as a service, so you didn't have to really worry about the operating system. And now we're at functions as a service or serverless, we're only worried about writing our code. And so our answer to that is Azure functions, where it's events being tied to code, and then we have functions. And so what are some of the events that we can write, that we functions run off of? Think of having a blob being written to blob storage, or something being written to the Azure queue. So that in itself will actually kick off an Azure function and have our code start running. The secret sauce though comes in with the bindings. And so what a binding means is that we can have something, let's say from Cosmos DB be bound to an Azure function. And then like a document can be sent into our function as a variable. So the same thing can happen with a Azure storage table or a file, it automatically gets sent in or we can write it out as well. So this gives us a really powerful mechanism to write some really cool code with a little bit of lines. So some scenarios to demonstrate this. So let's say we had a timer going off every 15 minutes, that's our event. The function then kicks off, it will then find and maybe clean some invalid data from a table and then we are resulting with a clean table afterwards. Another event could be a file, a CSV file let's say, gets added to blob storage. We have a function then that takes it in, transforms that CSV file into data rows and then from there we can display a Power BI chart graphic. Or our scenario that we're dealing with today is our mobile app, it needs a forecast. It sends off an HTTP get request to a function. That function then is going to call up to a third party weather service, get the data back and then it's going to massage that data into a version that the app can deal with, send it back down to the app and then the app displays the data. So let's see how we can use compute with Azure Functions and add that in to our mobile Xamarin application. So this is what the function looks like. It's called get current conditions and it's running as an HTTP trigger. So that means that as soon as an HTTP get request comes in it's going to trigger off this function and it's going to start running. And then it has various requests, queries that I can get, a latitude and a longitude and then it runs through. So actually let's kick this off and run it. So it's going to compile and I'm going to run this all locally and then as that fires up I'm going to actually call it out through Postman through this local host 7071. And here I have Postman setup and I'm going to be passing in a latitude and a longitude of Seattle. So I send it off and it comes in here and hits. So now what I can do here is step through. So I get my latitude and longitude out of the query string and then these next ones I'm just pulling out of essentially a config file to get my key and my URL for my third-party weather service. And so that's another great thing about putting this up in functions instead of having it in my mobile app. I can have the key to my weather service, not on board my mobile app where it could be possibly compromised. I have it up on functions within the Azure Cloud and it's safer. Eventually I could even put that in the Azure Key Vault and really lock it down if I wanted to. Great. So back to the function then. All I'm doing here is using this client, which happens to be an HTTP client, calling get string async, invoking that third-party weather service, getting my data back, deserializing it. And then finally all I'm doing here is putting it into a version that my mobile app would use. So I continue that off and down here, I just get this little JSON back and this is all my map app needs to display its data. So I've already actually deployed that to Azure, that particular function, and I'm going to run my mobile app now to actually see it in effect. So I'll compile it and run it on the emulator. And as it's going, all I'm going to do here, again, is using the HTTP client. It's called get string async and it's just calling it to prettyweather.azurewebsites.net to get its data back. So as soon as it fires up, still compiling, and then we should have it done in just a second here, hopefully, and then we'll continue on talking. Here we go. So loads up, going to deploy it to the emulator. Then once that's done, it'll go through and the very first thing it's going to do is going to hit this weather service here, get the weather info, and then it's going to deploy, call out to the function. Loading itself up and then it should come in here and that's what it did. Call the get string async and I can see my weather info that came back. It's the same thing as before and now it's just been updated with weather from Honolulu. So there we go. So that's all that's involved with loading up and calling an Azure function from a mobile app. It's just an HTTP get request involved. So that's pretty straightforward as far as creating just a back-end, a web API, but doing it with Azure Functions, a cloud-native way of creating a web API. So now adding the real amazing stuff to Functions or to our mobile app and that's with App Center. And so what App Center is going to do is going to allow us to wrap together Azure, AD, B2C, Active Directory, B2C, Business to Client, and also Azure Cosmos DB on a really nice, easy to use, developer-friendly SDK. And so the way this works is that a lot of y'all may be already familiar with App Center in the DevOps portion where we had build and test and distribution. So what happened is that with build what you would do is that you would connect to your favorite repo and then as soon as you would push to that repo it would build, it would kick off some unit tests, and maybe even some UI tests that would run on real devices. And as soon as that was done, everything would pass, it would kick off to the distribution whether it's distributing to the stores or whether it's to some external beta testers. And then you would have some diagnostics that could run. So what happened if the app crashed maybe, you could get full stack traces, it could hook into App Insights, and then you have analytics where you can track how people are using your app. That was App Center. However, there is this now, this new feature called the mobile backend as a service where there's authentication, data, and push. Now what's great about these features is that they interact really well amongst each other and they are super easy to use. So first we'll take a peek at what the authentication does. And as I mentioned before, Visual Studio App Center's authentication works hand in hand with Azure Active Directory B2C. So AD B2C itself is, I'm going to say it's a little bit involved in getting set up. And so what App Center is going to help you do is going to help you ease that process of getting set up and making calls to it. So its focus is on making everything easy for you. And so the other way, so there's two parts involved in calling and authenticating and signing in your users. There's the B2C portion and then there's the actual signing in portion which is done through Microsoft Authentication Library and Mcell. Now the Mcell is all done on device and that's taken care of displaying the web view and actually communicating the B2C and performing the authentication. Where B2C handles like calling out to Twitter or Facebook or your email to make sure you are who you say you are. So you have these two pieces that need to interplay with each other nicely in order to get your sign in experience. App Center makes this whole layout and this whole journey way easier. This is what it looks like. It's just sign in async. Now if you're familiar with what the Mcell framework was before it's super powerful but it was a lot of ceremony that goes along and setting it up. This is what it looks like now. It's super, it's nice, it's developer friendly and that goes right along with the App Center ethos. Going along with this I mentioned that right now it's just working with Azure Active Directory B2C but in the future they're implementing something called bring your own identity. And so what this means is if you're using Auth0 or if you're using Firebase or if you're using Azure Active Directory already you can just bring those in to App Center and it's going to work for you. So you don't have to be just using B2C you can be using any of those other identity providers. Bring it in and you'll still be able to work behind that beautiful SDK that we had. Then next up is the data portion. So what the data gives us here is a nice wrapper around Azure Cosmos DB. So the way is what I mentioned before is that Auth and Data and Push work together hand in hand. So this is one of the ways that they do. And then user A, user B and user C whenever they do some data information they get their own private partition within Cosmos DB. So when I want to store some data I get my user A partition same with B, same with C but yet we still have some public data. And so there's no I don't have to set up as a developer set up a new partition for anybody App Center's SDK takes care of that for me. Now the thing that we get with the Data SDK is the ability to do offline writing. If I'm connected it writes to the cloud right away. Also writes to an SQL cache on device. However if we're not connected just writes to the cache on device and we keep on going it'll write up to the cloud next time we're connected. Same thing when we're reading always read it from the cache on device. If we're connected reads to the cloud and syncs up. Automatically works you don't have to worry about whether you're online or off the SDK is going to take care of it for you. So some methods here that you have you create your data model new it up and then there's a create method, a delete method passing in the IDs of what you want and then the partitions here are the user documents as opposed to the public and then there's a list async to get them all back a read for a single and then a replace which is like an upsert or an updating. Other cool things that we have with AppCenter is that you can see data metrics from what your Cosmos database looks like all within the AppCenter portal and you can actually go through and view different documents. And the best thing at all is that there is a free tier along. It's not there today but it is coming along soon so it is Cosmos DB free tier with AppCenter and that's pretty really slick. So let's jump in to the last demo that we have going walking on sunshine auth and data with AppCenter. So first thing I want to do is show you how we would set up the portal, the AppCenter portal to work with auth and data. So what I would have here is I have opened up a AppCenter application and I have auth and data here. So just by hitting auth it says welcome to auth, connect my address subscription and I can go through. I have my pretty weather. It's reading what's already in my address subscription user impersonation and then for the policy I have to manually add my user flow which happens to be this. User flow is the how you sign in so it's like which identity providers like if you want to connect the Facebook or if you want to connect the Twitter and then I can just say connect and that's all there is to it. Now my app is set up to use authentication the same with data. All I'm going to say is I want to use an existing database, use my subscription hit next here which database within it, user preferences which collection and that's it. I would hit done. So to show you one that's already set up and ready to go is one of my Android. Auth is already there. It's telling me my tenant name my application ID and the data and you can see here I have overview and then my Explorer and you can see I have both Seattle and Honolulu added. So the next thing what I want to do here is finally go through and show you the methods that I have set up to be able to log in and save data. So I hit the little things below and the sign in right here is just auth sign in async I have tokens that come back and account ID which is my B to C account ID all within it I can get. Listing my cities out is just a data list async sending in a city info which just happens to be a regular class continue on and then when I want to add a new one I will come through here pick a new city and crash the app. So what it would look like if I would pick the new city then is save async which just says create async city info passing in everything that I need. And then what I would have there is some really really funky stuff but if I go over to my real device I can see if I load up the app it should be able to see Madison Seattle and Honolulu come up. Obviously Madison did not save but that's okay. So hopefully it saves here without crashing anything and it comes over. So great that's the quick version of adding everything and then we can go back to the app center with a Xamarin mobile app. So in summary we use Xamarin for creating a cross-platform mobile application Azure functions for a serverless backend for a compute and then app center for a mobile backend as a service data and authentication. So please go out and learn more follow these documentation links for Xamarin app center, auth and data and then we can go on from this session. All right. Thank you so much my friend Matt. How you doing today my friend? I'm doing well Seth. Fantastic. So here's a question that I always get that I thought I would ask you performance with Xamarin versus native is like tell us about that. You get 100% native performance with Xamarin as you would if you were writing something in Java or if you're writing something with Swift you're gonna get the same native level performance so there is no difference. As if anything Seth if you write bad code you can get bad code. He's saying that from experience because we work together and so he's seen some of that. All right. So here's another question. Does Azure App Center Auth work with securing a web API being called from a desktop app? That's a good question. So the Auth Center app works with securing a web API calling from a mobile app. I haven't tried it from a desktop app but they do support WinForms in the other portion of App Center so I'm not going to speculate and get that project team or the development team product team into trouble but it's just a JWT token. Fantastic. Well there's a lot of good links that he put up there so make sure that you follow those and get some of the code so you can try it out yourself. It's pretty amazing. Now as we go along make sure to remember to anticipate in the technical treasure hunt it's still going on. You're going to want to watch all of .NETConf 2019 because .NET partners are sponsoring a technical treasure hunt. There will be fun challenges to solve and you'll be eligible to win a lot of prizes which is critical. So what we're going to do is we're going to throw to a commercial break and right after that we're going to have a tour of what's new for XAML Tools and XAML Islands and Visual Studio 2019 with my good friend Dimitri Lailin but this first.