Hi, welcome to Visual Studio Toolbox. I'm your host Robert Green and joining me today I'm very happy to have you back on the show the one the only James Montemagno. How's it going Robert? Awesome. Yeah I know they gave me my own show here You don't come on my show anymore because you have your own show I remember I went back and watch the videos from like four years ago or so and I first came on I think I was wearing something very similar a cardigan and a C-sharp shirt This did not exist. No, but I wanted to come back on and kind of my traditional classic Cardi action For a little reunion between us. I'm really excited Yeah, we are gonna talk about the mobile side of the smart hotel 360 reference app Yes, so just to bring everybody up to speed Smart hotel 360 was the app that we first showed at Kinect all the way back in November. Yeah And it is a hotel. There's a website. There's a mobile site. There's microservices running in containers As this beautiful diagram shows the previous episode we did the website and the Azure functions We're going to do all these services in the middle booking Searching etc. Those are all running in containers. We'll talk about that later But the website talks to those and the mobile app talks to those correct And we're gonna focus on this mobile app stuff today. You're gonna show us cool stuff Yeah, so if I was to zoom in on here So if I was really zoom on the architecture diagram like I went on stage when I talked about the smart hotel 360 apps We really consider it a suite of products. So it's actually not just one application It's a consumer app that we see here running on iOS Android and Windows 10. Yep We have a smart doorbell essentially, which is this NFC Xamarin Android application And the idea here, and we have it on stage here for VS toolbox is that it would be like an embedded Hardware where you're running a custom application. So we can kind of see here We can zoom in on the little tablet here. This would be embedded into a door Right to unlock the actual door with your phone, which sounds very science fictiony But it's it's it's really not the technology exists. It's there. You can do it. You're watching That's we've got smart toilets. How long until we have smart doorknobs in hotels? Exactly. Yeah Yeah, and then finally the big part here is we have another maintenance application that was written traditionally with Xamarin iOS, so no cross-platform UI, but we actually extended it to Android using some of the new Xamarin forms capability So all of these like you said talk to Azure ADB to see for authentication They talk to all of these Azure container services and we'll see that in the API's and it'll feel real Real good for.net developers because it's just making restful service calls back and forth So that in a high level is the architecture and as we can see it talks Twitter. It talks to the database is everything like that And this is really good architecture because when you're building a large application, you have a lot of moving parts So you never want your mobile apps to talk directly to a database, right? That's a bad idea What happens if something gets dropped in the connection you go through a tunnel you want something really resilient So that is why the mobile apps talk to these API's for all the different services Some are running nodes. Some are running.acore and that's what it is. It's just a web API. Yeah Cool. Yeah. So you want me to kind of run through it a little bit? Yeah, let's see it. Yeah So if you didn't get to see it at Connect I have my actual android device in front of me here Which is what you're seeing on the right hand side being reflected Now we did this run through in the in the very first episode Eric and I did the kind of overview, but it's certainly helpful to see it again Yeah, and then on the left hand side you have our remote ios simulator. So I debugged it and I sent it over here That's uh, that's only an enterprise feature, right? No, it's now available for everything something that we we change that connect actually is We call that in the business. We call that a softball question. Yeah, you just uh, it's available for everyone So I do have yes enterprise, but um, but it works in community edition now Cool and what the remote ios simulator does is I have a connection to my mac Which is down there the floor over here still need a mac still need a mac somewhere Uh, and then you connect with the simulator pops up right in front On your windows machine cool. So here. I've already logged in on the device. That's a good looking app And it's a xamarin forms app. It looks very good looking. I know like early on You know it's kind of like well xamarin forms, you know, it's it's good for good enough internal apps But if you want the best looking apps and the most full features of the platform You would probably go xamarin ios xamarin android. Yeah, but that looks like a pretty good app. So yeah, we have like these days What would the advice be on when to use forms when not to use forms? Yeah, so we built this With xamarin forms crop across platform user interface. So if you're newer to xamarin We have two approaches what robert just described We have our xamarin native like classic approaches is building the ui for each platform But sharing all of your back end codes some models view models wrestle services Then xamarin forms we have extracted tons of common ui controls Now what's great is that we have an amazing community of developers What we'll show in the code is how we've able to leverage a lot of plugins to extend control So like actually this little view that i'm swiping through a carousel view is built by the community We have custom charts and graphs, which I'll show off as well So let's say I book a hotel room here. We'll do that really quick On the different devices so you can get a feel for it here and then we'll talk about when you would use what So let's book something in seattle for instance. I'm going to try to do these both at the same time It's a little bit tricky to do Let's go ahead and do that here with this beautiful Chart and graph or the calendar control. I should say with some nice animations But they're a little bit different on each platform. We're just kind of customize the buttons back and forth We can pick the hotel On here. We get these really nice parallax on each platform, which is cool. And then we can go ahead and book it looks beautiful, right? It does but notice that you still get native dialogue pop-ups. We have these beautiful charts and graphs On here and I will say it's like a great time to be not only just a xamar developer dotnet developer But even a xaml developer because there's this immense amount of open source projects that extend these Controls so that that carousel view on top These custom charts are called micro charts that which are powered by Something that we call ski a sharp Ski a sharp is a cross-platform 2d and 3d graphics library that runs natively on each platform So you can do essentially system dot drawing everywhere, right? So so we're able to take advantage of all those and really build these beautiful applications So if you're kind of laboring or you're under the Older old impression now that you can't use xamarin forms to build really good-looking apps That's that's clearly no longer true. That's what we came out to really prove here is that Things have evolved a lot over time not only has xamarin forms gone through a lot of releases for performance Adding features keeping up with the platforms, you know, we have special features built in for iphone x I just have to say that in the latest builds the person that The team that was responsible for uwp Project creation going from this long to this long Yeah, we've done a lot. Thank you. Yeah, I've been a new hero Yeah, you can go into visual studio say file a new project and you have it all scaffolded out So fast now. Yeah, because we've done we've upgraded to dotnet standard. We use package references So your new gets get downloaded extremely fast, which is really cool Now this app though too is not just on ios and android I kind of gave this example that hey when you get into the hotel room you Kind of change context so the smart hotel 360 has the same experience But the idea that the hotel is tablets inside the room so like a surface book or surface tablet So here I have the actual application Over here, but I have it on my windows 10 imagine this was the surface So I could come in I could take a look at my room If I needed to change the settings. I have all these custom sliders that are in here I mean, it's a really beautiful looking application I can take a look at restaurants nearby it can get my Location Of the device that's going to go and synchronize my location here We've kind of hard-coded it so it gets it from new york, which is what this is what you saw up top But it gets a location comes in you can see all the coffee shops. It's a really beautiful Optimized this is the same app. That's on mobile But notice that it has a really great windows 10 experience on the tablet Yep So we did that but I think what's important too when you ask the question between xamarin native and xamarin forms Is that you can still access the native capabilities no matter what I think that's one thing we want to say We just got geo location We made it so the smart hotel door when you come in you can come in and tap and unlock So if we zoom in on the tablet, there's my face And since I'm logged in with off and the door is synchronized with nfc to look for special codes So you logged in on the phone and that's using the the azure active directory B2c yep business a consumer. Yep. Yep, and then I have this nfc button So if my device has nfc, I can tap it to the door and boom it unlocks it because it knows it's me Cool. So that's how we kind of think of it. So to get back to your question When would you use one versus the other? Well, it kind of depends. I mean for me I'm a huge xamal developer. It's where I feel really comfortable. We've made it Really easy to blend the worlds together And so no matter which way you start you're not locked into that approach We have two different things one thing that we call native forms And another one that we call platform specifics. So let me kind of tell you what that means Let's say you start with a xamarin forms application You're like, I'm all xamarin forms xamal everywhere But you're like, oh man, I really want to use that iOS only kind of control Well, you can do today is you can either create a custom renderer like a custom control if you will access on iOS and then blend it in Or we've added it so you can add a custom namespace for iOS into your xamal Or android or uwp If you're not running on those one of those platforms, it just ignores it So I could do iOS give me a segmented control and it just shows up Because xamarin forms user interfaces are native controls So we made it a way where you can shove it in Right because whether you're using forms or xamarin ios or xamarin android You're still wrapping the underlying apis 100% coverage of the apis You know it's been The feature since day one. So exactly it seems like it wouldn't have been Well, everything is hard, but It wouldn't have been that hard from xamarin forms to call into the api In a different direction because you already wrote that code Exactly the other thing that we did is a lot of developers started with just a xamarin native application So they're doing or they already have a uwp app and like hey, how do I go and out of ios or android? And Or they've created an ios app with storyboards and like man, I love my application. It's perfect I have super performance one to one of all the apis But I notice that some of these screens like the about screen the setting screen those screens are kind of generic I would love to reuse those if I go to android a lot of developers Start with just one platform or maybe two and then they want to go to more So xamarin forms native forms What that does is it allows you to take any xamarin forms page And convert it into an ios android or uwp control that you just put into the xamarin app So for instance, let's say I have an item and I say item I tap on it Well this detail page I'd say new xamarin forms page and then I'd say to fragment and it would create an android fragment That I could then use so that means I can start using reusable you user interface without Blowing away my entire application Because if you spent all this work years building an application why throw it all away Just hey, let me just start blending in some xamal then conceivably have a team of Two people or four people half of them who are xamarin forms half of them who are xamarin native and they all get to play together Yeah, and then all of that back end code right all of your models view models Azure integration since I that's all just dot net code. Sure. You know in general. Yeah, cool Yeah, does that answer your question? Yes I mean I geek out on it because so much has happened in the in the space of Not only does xamarin our integrations individual studio But our wonderful community of developers that are building right plugins custom controls I mean that's why this stuff like this is possible. So yes The the quite the answer is it's a great to with both platforms. Whatever you're most comfortable with Um is definitely the route to go I think it's always great to learn the native platforms though Like definitely learn those because then you'll know Why android works a little bit this way? I think I've always said that ios works a little this way Because when you need to go tap into those functionalities you can yep Yep, cool. Let's see some code. All right, cool. Now now we've talked through it all bunch. Yeah So I can walk through the diagram here. I have both of the apps that I just showed Uh over inside of visual studio So what I want to show you is kind of the architecture here And this will look very familiar to the architecture that I've been You know coming on the show talking about for a lot of years We have our shared code which in this instance is a dot net standard 2.0 library so we can see our our dot net standard library here We have all of our new get packages that we're being pulled in And a lot of these here we'll go and move this over here A lot of these are coming from xamarin forms and our map controls because we saw some maps on there But we're also using some cross-platform libraries So the first thing we'll see is we're using app center visual studio app center That was built CI cd on our application but includes analytics and crash reporting distribution and push notifications For our authentication. We're using our microsoft identity client We have then some cross-platform plugins such as our geolocator plugin settings And then some xamarin form specific things So we have a cool animation library called xam animation And then those micro chart controls so all those charts and graphs in there too But then you're going to see some other things that maybe a lot of dot net developers are familiar with like autofac Which is an ioc container So we have everything is interface based first so we can do proper Testing on the application So the developers here chose to use autofac because they're familiar with it You could use other things too like ninjacked or Roll your own or xamarin forms has its own dependency service as well. Yeah And then of course that's where all of the bulk of the business logic lives. So really this is just dot net stuff with some user interface So we have some models. So here's like a hotel for instance just stuff coming from the server We have our you know, uh, code lens coming in there We have our services. So we have some things like analytic booking charts hotels locations Just like at the booking service code does very quickly. Yeah So that is the code that at some point it goes off and calls The service living somewhere. So it's no doubt under that uri building. There's a booking endpoint Yep, okay, and that is what talks to the booking service, which is Sitting, uh, yeah winds up in that kubernetes cluster, but as the developers don't need to care What that's written in the fact that it's in a kubernetes cluster. What the heck is that? I don't know Here's an api. Here's a url to go talk to the restful endpoint Right, and then I just call it and I understand what to send it. I understand what I get back Yeah, so and how we configure this too is all of these are in our app settings So every single endpoint is customizable So we actually load all of these for development purposes from just a json file So we can actually then test our development or production by just loading a file So we can see that these endpoints are all loaded in and these are stored inside of the App's Setting so it's retained through everything else. So if we need to change something we could push some configuration file to That kind of winds up being the next The next iteration of this whole idea of obfuscating like if you We're used to for calling An app an azure app service, you know, you've got the actual url hard coded in your code Yeah, right. Yeah, of course. It works great. Yeah, but if you think about it That's the next thing that you want to start knowing how to abstract that because somebody might say Oh, that's really nice, but you're going to call this service and it lives over here when it's written this way Here's your restful endpoint. So yeah That's a good example of Of that because that booking endpoint could be sitting in azure. It could be sitting somewhere else. Yeah, totally That way you're not just you're restricting. It's going to have to do a whole app update Just update that. Yes. So what's cool here though is I really like this architecture. So let's say I want to get my latest bookings Notice I have this request service So it's really service based and we have this just really generic thing called get async And it's going to give me a bunch of booking summaries. So if I peek in here, this is like the hotel when it's from So it's cool. And I really like to show I start sort of architect all my applications this way So if I go to definition, we have this idea of even obfuscating out our asynchronous calls to the server Because what are you doing? You're making gets and posts and puts back and forth So what we do is we have ones that require tokens or don't require tokens So these things have get and post and put And we look at the implementation here We can see that I can just send it a t results I can send it anything give me my bookings send me this because it's just returning json And we use json.net to deserialize our object. So here we create an http client with our token We go and get that information We handle the response and that handling of the response needs to be done for every single call Which is seeing if it's successful if it's forbidden and we can Propagate up proper exceptions. And then we just deserialize that object back So that way we don't have to go write 8,000 different deserialization of json. We use the power of c sharpen.net, right To actually use all this cool asynchronous stuff. We do stuff on the background So the ui is super responsive like you saw So for a developer, I could start adding new services easily and say, hey, what is that data look like? Yep, and like pull it back in which I absolutely love And at the high level, I mean that's what this series of services are So as I go through we can talk about authentication later, but we have booking We have the hotel information. We have some mock ones. You see these fake ones for development So hey, I'm offline. I just want to do some development I have things For that request service for my suggestion service. So we have our real one and they all use the same thing So onboarding new services becomes just like a few minutes of development Which is great. And of course, you know, we have our ios android and windows 10 application Just like you would expect and user interface test So we ran a series of uh ui tests up inside of uh app center every single time Have you done a show on building ui tests because I hear it's not that easy No, it's super easy. Is it it's super it's super easy You can come in we have pages and test pages things like that It's really simple. Okay. We have a few shows on the xamarin show But i'm actually going to be having the app center team on for a lot of a lot of that soon So definitely take a look there Yeah, and I mean inside these projects aren't really that much. It's pretty minimal code But this is a real app, right? So we have some custom renderers So here I have some calendar and some custom map stuff that I have because i'm extending the controls So you can take any xamarin forms control and extend it one of those codes Yeah, so if I look at like the count as calendar button here Um, I have some code that's essentially coming in. That's a custom element. So what is it doing actually Yeah, so this one is essentially the calendar button that goes Back and forth when I was going and booking the date So if I want to go to the next or to the other side, okay So what this does is it measures out some specific Properties and updates different colors on android And actually draws a gradient over it So that's something that you really can't do so we leverage this custom render say hey in android I can draw a gradient So i'm just going to go and do that with a few lines of code here And then what's cool is that we can change the image or the background Based on the different state that it may be on to kind of spice it up a little bit And besides that there's really not much else in here We have like an nfc service because this is talking to the nfc controller one more question Would you have to do a different renderer for each os? Yeah, great question. So um, how custom renderers work Our way of spicing up a control. So this control Isn't doing exactly what I want it to do. I want to replace it I want every button to look like a flying bird for some reason I don't know and it flutters whenever you tap on it. I was pretty custom, right? Yeah So you would implement that if it if you can't do it cross-platform you implement on each platform So when you go into the ios application here A bunch of nougats, but we'll also see renderers and a calendar button renderer Okay But a lot of these we didn't have to do too many because a lot of them were done for us with plugins Automatically so a lot of those cross-platform ones were already done And in fact if I was a developer of this app or apps for my company I would probably have an entire suite of just my own UI toolkit that way I once I do it once I can then You know share it through apps. Yeah, and that's it That's essentially the structure of the application Which again is going to look very familiar to what we've showed before The biggest difference here since it's all xamarin forms is all of the user interface is inside of that dot net standard project Anything that's shared cross-platform. So basically everything but those renderers Or accessing that platform specific code like nfc And then you have different views for uwp because the idea is that although you could run it on a When there's a mobile phone and all likelihood you're running it on a surface or a Laptop or something and therefore you're going to do a different UI to take advantage of that Exactly. That's a great observation there. I do this quite often Inside of my applications sometimes on ios I want it I want like the entire navigation to be tabbed to base for instance But on windows and on android I want the flyout navigation just because that's what my designer told me to do Right, so I would have a ios navigation Basically wrapper and then on the other platforms. I would use the same Now the key here is that this suggestion view if I go into it here Isn't very much code because it's going to be using some reusable controls And and it's going to use the same view model So you can see it's actually using this suggestion item template, but it's just using it a little bit different So if I came into The suggestions here On android let me go ahead and tap on it should be able to go into it See what's going to load Forget where exactly I have to tap on this thing should go into oh there we go So in here we have a little bit different of a view because this makes sense on mobile Where I'm coming in and I'm actually swiping left and right for instance here Compared to on UWP I have it this way. Okay, and I can do some customization around how I want it to act You could display more information here take advantage of them of the bigger screen screen Yeah, and the other thing too is that the uwp application is like really responsive to sure So they actually have some code in here. So if you are on a smaller device It'll automatically a smaller tablet or you're in landscape or portrait for instance, it'll automatically Do that for you, which is really cool. We can see it go back and forth and Display different information. Yeah, cool. Yeah, and and all the xaml Is going to be very familiar as well. So what's nice here is that if you look at that Our login view for instance, we have We have a bunch of stuff in here Things like styles. So these are kind of setters. So we want this logo for this image to have aspect this height We can apply styles to controls for instance When I come into this page, these are going to look very familiar. We have things like a grid So this is going to have two rows one. That's 60 percent one. That's 40 percent We're using another plugin That's called ff image loading. So while xamarin.Forms has an image control This is a really cool open source library that optimizes Downloading and caching images, which is really nifty If you if your designer gives you like a 5 meg file, you shouldn't try to download into your app But if you do this library will automatically resize it for you So that's pretty cool And then we have a sign-in form right so inside of here We have There's some images in here. We have a label that is bound to a translation of username Inside of here, we have an entry field, which is the username Area here, we have this really cool Specification in the xaml called on idiom. So this is saying on desktop make this control center, but on phone Fill and expand it. Okay, you can do that for ios android windows 10 As well, so that's a really cool way of specifying right in the xaml And you can do that in code if you wanted to everything that you can do in xaml you can do in c sharp code So again, we have another one that's called password an extended control And then we have a lot of grids All of others grids and then we have like a sign up button things like that Which is really cool. So it's just xaml using your styles. You're using background colors using static resources That are going to be described. So if I go into my app xaml, I have all my colors So I don't have to hard code these values everywhere, right? I'm just reusing the accent color the background color I have converters. So I value converters that are being used on the application on the source code, right? Yeah, so if I come over here, I could definitely look at this check-in time converter That's going to take a date time parse it and return Something back specific for string to display in the user interface and these are just i value converters So yeah, everything kind of feels pretty familiar. Some of the names look different But you know overall it doesn't take very long to deal with the fact that there's no stack pale anymore There's the same thing. What's it called? Exactly. Yeah, so the xaml looks very very Familiar there and I would say even if you're like oh james, how did you do that? You know How do you do this crazy charts and graphs and things like that, right? If I actually look at the home view over here We're actually using that chart to do this temperature. So this line of code here Maps To this chart for the temperature and we have another one for the ambient light and this It's all that cross-platform micro chart drawing So I just give it a series of entries and the type of chart I want And boom it displays everything for me Automatically, so that's why xamarin forms is really powerful Not only does xamarin because you get access to all the the native apis all the native ui But you have access to that cross-platform too By these libraries what's in the box or extensibility. So there's a lot that you can do with it This is the cool thing about this code being available in the github repo. I've already gone in and leveraged Some of the code for things i'm building myself is there's There's a whole bunch of stuff in here. You can just go in and grab that code and use it yourself Yeah, yeah, and I think a lot of people when they're looking to say, oh, how do I architect an app or what's the best Where should I put what where right? When does it make sense to use this or how do I get that really cool chart? How do I get that map thing? How do I do that and you that's just grab right? Yeah, just grab it. Yeah. Yeah, and even this like a common thing that we see time and time again is Authentication right we talked about how I authenticate when I do nfc when I log in Into the application and that's all done with azure B2c So this is like the login page here and I can log in with a username or I can log in with my actual Microsoft account right here. So this is using active directory b2c And I've I've done it. So I have the username password or this login page And it's actually super simple to do it's a cross platform library I simply say acquire token async I call this method login with Microsoft when I click that button And it goes and it grabs everything for me automatically and in fact on top of that it will get the attributes For that user so it'll give me the email the given name and the family. That's how you saw my My information there. Yeah. Yeah, which is super cool So just by doing that even code there to get your avatar. Yeah, which is crazy, right? So a lot of these common things. So here's this gravitar So here this is going to be where's our gravitar? Implementation again, everything's Interface first So here we're using gravitar to create some md5 hash Take that email address go to gravitar pull it down And you see that's how you see that nice banner and on the actual right door Which is cool too or reusing code too. That's a cool part of this kind of suite of products is that we're sharing code between our Authentication here inside of our maintenance application inside of our smart door And we can share user interface between all of our applications styles And reuse all those great libraries that are out there. That's awesome. Yeah There's a lot of code in here. Yeah, it's so good I mean and I think that's what's really cool about it is that you can see how we did it, right? If you're like, oh james, I I understand that nfc is only on a few devices Maybe there's not a plugin for it or what is a plugin? I got that code if you're like, oh, I'm really interested to know How did they do location? So if I go into my location service here in code This is in cross-platform code And you would think well, you know nfci you just showed me that code james, right to go access to nfc stuff Well, that's because there wasn't a plugin for it, but the apis are available But for getting geolocation or settings or media or some of these ui controls we have plugins for xamarin So what this does is it goes and uses our geolocator plugin, uh, which I wrote And this goes and with a single line of code gets our position asynchronously Cool on ios android or windows handles permissions for you does everything and it gives you back a latitude and longitude Nice. Yeah, so I mean one line of code like it's for me getting started It's cool to see all of this, but I just want to get the location. How do they do that? Yeah, you can grab it right here Yeah, which is super simple. You can see how we handle All of our exceptions how we can do everything right inside the code. It's really simple. I mean get geolocation handle exceptions Nothing super simple. Yeah, very very cool. Yeah No, no, that's like there's so I mean, I think like you can just literally dive through so much of the app In general inside of here. I absolutely love it. I mean, I highly recommend that that people do that. Yeah And you can of course, we'll add the links to in the show notes below, right? Yep code see how it works and and reuse as much as as you possibly can. Yeah, absolutely better apps Yeah, any other questions that you have for me on this thing? No, it's so good. All right. Let me show you one more thing all right, so um I was showing in the xaml right on that login page I get this question all the time and I wanted to make sure that I covered it since I had this opportunity Is translations, right? Okay, right now we translated this just for english, but notice when I have sign up here That's not hard coded. I'm using this translate extension Okay, and I'm using resx files just like I always have to actually do the translations So this translate extension Extends that um binding And what it's doing is it's saying inside of this assembly is something called the resources and a resx file And down here sure enough we have all of our resx here Which actually pulls and it gets everything for you Okay Now what's really nice is that you can combine this with something like our multilingual app toolkit Which we have some xamarin shows on and great documentation Which is a service that we provide here at microsoft to take any of your resx files and translate them into anything that being can translate Automagically, wow I did this for the first time a few months ago and it blew my mind I right clicked on the file and I had 20 different languages translated all automatically So this is cool because now if you're familiar with resx You have we have these markup extensions, which says hey translate it Sign up which is in the resx file put it in there Super awesome And if you start that from the beginning because you know you're you might want to add spanish or some other language later on Because the app stores provide all of them right and then you can just change the language on the operating system to test it Right. Yeah, exactly. Yeah In fact, you can set the current culture right remember we have current culture of whatever the thread is and boom You can see the entire app in different things. Cool. Yeah, tell me that the ui test a little bit Yeah, sure And are these the same tests that you could send up to? test cloud Yeah, so app center tests now is now the evolution of test cloud. Okay, right So all the great functionality that you had inside Of it is over there. So this is super simple. We do this thing called page based testing So if you think of an application, it's almost like a website. I'm testing this single page And often I need to get from page one to page five So instead of writing the same functionality over and over again, we put them in these things called pages So zoom in over here and we can see the pages that we have we have a home page a login page a book page a hotel page Things that we literally just tap through so if I look at that login page the idea here is that at any point I can come in and I can then grab Any of the fields so here I'm saying on android These are some different attributes that you may look for so there's an email field There's a password field and these are unique identifiers. So let me show you what this maps to so if I go into the login view up here And I look at that Entry field let me go and find it here automation id So we've optimized zamarin forms So you say automation id so that answers my next question was what happens if it's not displaying this password So you're using the automation id. You don't have to use the string use the automation thing And then all we do here is we say wait for the so enter credentials wait for the uh Wait for the email field to be there tap the email field enter the username that I passed in Dismiss the keyboard do it for password and then make sure that the the Credentials were entered and then we can go on from there and then sign in I tap sign in So when I come over into my tasks And I look at this here We can see my single task is now just a few lines of code to log in I give it some username password hit sign in and then I create a new home page And then make sure that when I create this home page It's looking to make sure that the navigation is set up and everything is good to go But from that point I could open the navigation drawer I could do something a little bit different on ios versus android and we can run all of those If you're still using test cloud or app center test. Okay. Yeah, so it's really surprisingly Easy to get up and running as long as you're following those kind of best practices, right, which guess what this app does Of course. Yeah, it was really cool. Excellent because that didn't look too hard, right? This is no That doesn't look hard. I don't look hard. Cool. You can tap a button Just whatever you're doing right in the app. You're like, oh, I'm going to tap this I'm going to enter this and they align really nice To what what's happening right here in the ui. Are there ui recorders that'll Uh build that script for you based on what you're doing literally on the device Yeah over on the mac we have one and we have an extension that's in was in preview for uh visual studio But we actually have a repel which we really like so when I hit debug on my test It'll pop up a little explorers. I can say Give me tree and it'll output everything and I can say app dot tap and then copy that back in got it We do have a test recorder over on the mac though for ios and android. All right. Yeah, awesome. Cool Yeah, I think that's all I just want to make sure I hit those but I'm glad that you I'm going to talk about ui test. I don't get to talk about it too often and this one is structured really lovely Very cool. Yeah, all right. Thanks for coming on. Absolutely. Thanks for having me. All right I hope you guys enjoyed that and we will see you next time on visual studio toolbox


Welcome to Blue Yields Equestrian Estate, right here in the heart of mid-rand.


Thank you and Sometimes all you need is a little nudge from a colleague to achieve amazing things that you've never dreamed about and then a lot of support your from your family and because unexpected things happen and like we just changed the room from Trilism to this big stage and This is how I get involved with WordPress playground. I Stopped working developing a little Application and then started contributing to WordPress playground from time to time So in this talk, I will Talk about WordPress playground what it is what you can do with it and The learnings that I got from Adam who is leading this open-source project So let's see What WordPress playground is and people Will understand better seeing this video. I have a lot of screencast. So it's one click and you can Spin up a WordPress instance running in your browser Without servers no database everything in your browser This is possible. Thanks to WebAssembly and JavaScript. So PHP is running in JavaScript It's Normal WordPress that we already know but you can see how much time we saved You didn't need to set up a local environment. You didn't need to register anywhere You just open the website and it starts running. You are you are already log it in so you can start typing and The cool thing is that as I said WordPress playground runs directly in your browser Doesn't matter which one you prefer but we can improve this description to make it more general and and Actually, what was playground runs on any device with JavaScript, which is maybe no Yes in a server or your laptop Or your mobile phone Tablet, so as I said you can try it now is Playground dot WordPress net and it will spin up the WordPress instance But this is just one of the applications we have more It's kind of an ecosystem of applications that people is developing on top of it the key part is PHP WebAssembly and that's kind of the herd the core that runs the playground around that we have web API written in JavaScript and node and even Ella created a mobile application So I will showcase all these applications and some of those use cases Because playground is not just for developers. Yes, normal users can learn showcase or test and You can develop WordPress sites with the playground and also build and extend the playground itself At the end we will close the talk out talking about some future possible applications that we could do So for the use case of learning WordPress I would like that you go back on time and Remind remind what was the steps you took How excited you were out learning new technology and then maybe the hassle to set up the local environment Installing Docker or my square or whatever the application you are using so With the playground learn It's instant and you can explore all the ecosystem the plugins and themes We have the query API in that URL You can type theme and the name of a theme and it will out install in that instance the same for other variables like Plugging and you can put it multiple plugins. So at the end you will have a long URL That will set up a custom WordPress site with those plugins and themes Yeah, here you can see also we have a settings Button where you can change the PHP and WordPress version By default The playground Runs in a temporary state. So if you refresh all the post and pages you created or plugins if you installed someone Manually it will be gone, but you can set up Permanently the option on the settings to keep it there or even you can run your WordPress from your computer Also, you can export the site and import it to continue later So a little bit how it works under the hood is this is a source code of C program and It's compiled with GCC At the end we have been binary and we can run it in our computer, right? so with weather assemblies the same thing but it will run in JavaScript and The compiler is mscripten So to change the PHP versions we compile we have a dockery image that compiles the source code of PHP Generating all the web assembly files needed each one for each PHP version to accept As I said, we don't need a database because we if we are using mySQL we would need to Compile it to have assembly to use it so Adam decided to use a SQLite and run it Directly in PHP so another use case for learning is Learn through writing code directly in the browser and executing PHP in the browser Here is the this plugin that creates a block Where you can embed in your website and make a tutorial With a predefined PHP that the user can play and change and execute it and see how it changes the result Here is a small demo Let me see So this is the block and the users can run that PHP code Currently it runs only PHP Plain PHP and if you need to run WordPress functions, you need to import it The library so the users can change and see The output of it so it helps people learning from any device tablets iPhones, whatever for showcase Imagine you have a plugin and you can embed it in your Website so the users can try your plugin directly and you are not afraid that they will get in Into the server because there is no server. It's executing in their laptops. So its user has a different instance Here is another demo. This is a real use cases that people is using So you can try just from this from used and See how it works for testing we have the This website where you can put a link or the number of the pull request and try The code executing in your browser no need to download the repository or compile it anything So it would be handy that it It's automatically generated in like about but currently we need to write it in the description But for testing people will click it and test your PR This is another cool application that Alex Kirk created and it's working in core to help Translators to get context. So they will run the plugin that needs to be translated It will be installed it will be localized for that Language and then in the website you can see what's already translated and what's not and Commit all the translations That currently is in yellow and then push it and synchronize it to core So translators will have all the context because they are seeing the real web page Yeah, here is synchronizing to core another use case is WordPress development So this is WP now. This is the tiny tool that we've created From my team in the wordpress.com and it was a six-week project and It runs in the command line interface so You can install it globally in your machine and Then you can spin up go to a blog theme or Plugging and then run WP now start and it will run a WordPress instance with That plug-in or thing installed under the hood In a home directory we have all the WP content folder In a custom directory, so it's persistent in your laptop and a cool application of the same Tool is that you can run it in code spaces and you don't need to set up anything any file like you can go any You'd have repository that it's a plug-in or theme and then Run WP now start Like install it and run it that we now start and you will test that the repository and play with it with you'd have code spaces and We've created this to improve the experience for developers and avoiding installing other third-party tools like Docker that you need some listens and the funny thing is that for example Luis around took that application and Use it in a different way that we've never thought about so in Workshop in work camp Europe this year. He show how creating interactive interactivity Blocks and Define it in the package Jason How we'll run WordPress scripts and also WP now at the same command and start so developers just need to John start and that's it. They don't even need to install it globally WP now Making it much easier any development Daniel that he's around here participated in kind of hackathon this year and created With Adam and more people the extension of visual studio code It was the first development to run it locally and now it's the user interface of WP now So it runs under the hood the same code You can install it. It's if you are using visual studio code go to extension search for WordPress playground install it and you will have a an icon on the left and if you open a plugin theme or a whole's WordPress site You can click on the WordPress icon and then click start server and it will automatically start the WordPress instance So as I said, it's equivalent to running WP now start, but it's the user interface and You can change the PHP version And WordPress version so you can test your plan or theme in different environments For building I won't I mean is extending the playground itself in that different ways So Because you can run it in any JavaScript Device in any device that runs JavaScript You can use playground as a mobile app framework like it would be for example react native or Ionic So Ella created this application It's block notes And it's running a WordPress instance in your mobile phone as a native application the thing is It saves every page or every node As a local file and it synchronized with the iCloud So it's just kind of an iFrame that loads HTML and JavaScript for locally And then out installs some plugin That's what I imagine like I don't have the details, but out installs a plugin That the change the UI of WordPress to look it like hiding all the options the user options and the front end Making showing only the admin side so you can experience the All the blocks and you can move those nodes to different folders Here we can see that the nodes are saved In your local phone and synchronized with iCloud So we can extend it in different ways One of those are using the JavaScript API And it would be like All the playground logic lives in npm packages and you can install it in your project imported But this is like really complicated way to extend but You have all the freedom, right? So a better way is using blueprints and this avoids you The hassle to code in like line by line all the logic and define it as a JSON object And We have steps where you can define installing a plugin installing a theme And run some PHP logic if you need and even you can access the virtual file system These blueprints you can run it using the JavaScript API or In the same website playground warpes.net you can add the hash and the JSON Of the blueprint in the same URL and it will get it and run step by step so the three Ways to extend warpes playground is using the query API just adding the theme or plugin in the URL And it will outload that so it's really easy The blueprints that it's the JSON object defining step by step some predefined logic Or the JavaScript API So warpes playground is powered by web assembly But you don't need to code in web assembly. We've seen that you just need a little maybe changing the URL or Creating some blueprint or using JavaScript So don't be afraid that oh, I'm not a web assembly developer. I will not be able to extend it not at all So the last section is the future and the playground has vision and road maps, but Some of the vision points that I talked before This is my personal view like my experience and What I can see that it's missing or I would like if I would have a magic wand And this is in the future, but already exists because one person developed a chrome extension that changed the URL Allowing people to try any plugin on theme. So if you install this chrome extension Uh, you can go to the plugins or theme directory and try anything So because I wonder how you try plugins. Maybe you install it in production Or maybe you create a staging site, but now you can go to the directory and run it I guess that maybe this will be Incorporated in core and you will not need a chrome extension to do it So for themes the same you pick one And the little button appears click there That's it. You try the theme so everybody's welcome to develop but You can share your feedback and add new ideas or reports and backs so here Elliot added an idea and this week I started to create a kind of prototype To make it easier to write blueprints so I created a text editor kind of Where you can run the json object and it will reload the iframe automatically to represent All you need so you we can see that we have a login step here for example And if you change the username then the iframe is not logged and if you put the right username You are logged in automatically So it's really easy to do like this is like three lines of clean html and javascript. That's it I would like to keep working on this and I imagine this being kind of a scratch thing that you can drag and drop Blocks so people that it's afraid of writing json Can play it and create Things with the world's playground another vision that I have is Probably we will have Kind of a complete idea in the browser where you can write the code access the virtual file system of web assembly and change the php code and That will be your local environment, but it will be running in your local but kind of remote in the browser Another would be like we have the pull requests everywhere for Gutenberg, but I imagine that we will create a bot that you will preview any pull requests or any repository from warpress in your project or one last Application possible application would be running end-to-end testing in Did have actions for example because it's easy And you will not need to run a docker without otherwise. It's Just kind of command and that's it So I see that warpress playground is an emerging ecosystem of new tools and applications And there are a ton of opportunity to create new things so I explained all these different applications that currently exist But this is our just pieces That you can use And I hope that we will have fun building the future playground together If you are interested you can join the slack channel meta playground in the make slack And here are the repositories of warpress playground and playground tools Thank you if anybody Have a question happy to answer here or later In the home So looking at this one of the use cases that jumps out to me most apart from the ease of onboarding folks who contributor days with this to the project is also There's a lot of schools With middle schools students high school students that use chrome bucks that up to this point have been able to do any Sort of local word rest development without installing linux in chrome os And all of a sudden this is going to open up a lot more possibility of learning Wordpress and software development earlier in the cycle instead of other Platform so i'm just really excited to see how This is going to grow and mature and how it's going to integrate with like the core training team Working up lesson plans for this in the educational system No real question just a comment and that sounds super cool Yeah, I totally agree and thank you for your question and comment that uh, yeah, this enable Anybody to run wordpress and you don't need a machine that it's powerful enough to run docker Or any other local environment you can try it instantly just accessing a website So yeah, like you cannot develop right now from your phone or your iPad but with playground you can And that's what's changing and making wordpress more accessible to more people Thanks for all this work. This is awesome. Uh, the blueprints api in particular looks really cool and really powerful I'm curious if you can talk a little bit more about what sort of things you can control through that And like how is that actually implemented? Is that something that we could use those same blueprints on like full standard? provisioned wordpress instances As like a standard format for creating new wordpress sites so the question is about blueprints and Yeah, the idea of blueprints is defining a logic that will be executed Before starting the wordpress site so you can Make it repost reproduce the same behavior each time, right? Um But the possibilities are endless like for example The mobile application that Ella created probably it's running up a blueprint saying hey install this Clugging that it's in this directory And that plugin actually Transform all the wordpress to make it look like a mobile application I can see like it's writing a docker File definition But easier right because it's just json and the thing is the each step is Defined so You can add new steps and create a pull request to wordpress player like I need to change something That it's not already doesn't exist So feel free to create that step and the rest of the community will enjoy it Hi, that's uh, pretty awesome Um, you talked about with the mobile app framework type thing and you compared it to ionic How does that work? Is it like a like a web view with wordpress running in like a browser type instance or How does it compare to like ionic for that? Um, so you mentioned the ionic Which like the mobile app framework? Um, so how does and you showed the example of the app That ella built. Um, how does how does that work? Is that like a web view that's running or is it something else more native? yep, so I I talked this week with ella about the mobile application and thank you for the question and From my understanding the application runs offline So it means it's loading the html like It's loading an iframe and That iframe has html and javascript to run The wordpress playground like you'd be accessing internet, but it's just in the phone And that's the way she loads it and I guess yeah that she's using Blueprints to run the plugin But yeah mainly it loads an html. It's an iframe that loads an html that lives Inside the phone so you can access it offline I answered the question. Yeah, thank you. Okay. There are no more questions. Thank you everyone for coming on your time