 So welcome everyone to the session, Nurture Your Epic Flow State with APM and VS Code by Christopher Hiller. We are glad they can join us today. Without further delay, over to you Christopher. Hi, thanks. So I'm gonna start and share some awesome slides that I made for this and let's do it here. All right, so this is actually kind of ugly on purpose, but this talk is Nurture Your Epic Flow State with APM and VS Code. My name is Christopher Hiller. I'm a staff engineer at Sauce Labs in the open source program office. I'm pretty new to APM. I started working on it back when I started at Sauce Labs in April of this year. So I am, yes, I'm on the Apium Core team. I also have experience maintaining a testing framework, which is Mocha for JavaScript. And also I'm on the Node.js Core team, though I haven't really contributed anything in a while. And of course there's a podcast. I'm on a podcast called JS Party, which is a lot of fun. Please check it out. And if you see this orange skull or the name Bone Skull on the internet, that's probably me. So what I wanted to, let me jump out of here real quick, but what I wanted to do was kind of what are we talking about? We're talking about a Visual Studio Code extension. And so why did I make this? Well, the idea is developers. So I am a developer, I've been a developer. And from what I can tell, developers don't often reach for Apium. And I think there's a lot of places where developers could be reaching for Apium, especially when you need to develop for mobile web or when you need to build cross-platform mobile apps, say like a React Native thing. You know, QA aren't the only people who need to do test automation. Developers need to do it too. But developers who are doing these cross-platform things like in React Native or what have you, they're writing in TypeScript, they're writing in JavaScript. And developers who are writing in TypeScript or JavaScript generally use VS Code. And so I got to thinking, well, what if we made this easier in the IDE of choice for so many people in this area? And so this project is sort of a part of a larger effort and that effort is let's make Apium better for a developer used. Let's make Apium something that developer wants to pick up. And this is a part of that. When you have the ease of use and you have the ability to work with a tool like Apium in your IDE, that's where you keep your epic flow state going, right? You don't wanna have to context switch out and jump around to various different apps and command line interfaces to get things running. You wanna be able to do it all from your IDE with your key binings and your fancy dark theme and whatnot. So that's the idea here. And so what I wanna show is this extension I've been working on. I published it today on the marketplace. And so it should be considered an early alpha. It's not feature complete, but the sky's kind of the limit. I think there's a lot of opportunity to kind of, I don't know, expand and move more deeply in certain directions. I'm not sure exactly what that's going to be. And I'm hoping to get some feedback from the user, the user base, anyone who wants to check this out. But I have a lovely demo I recorded earlier today and I want to play it for you now. So I'm gonna do that. All right, so now I'm gonna show you how to install the extension Apium Toolbox for VS Code. What we see right here is a pretty empty project. And we wanna click over here to the left where it says, this is extensions. And this is where you're gonna install any plugin or extension that's available in VS Code. And there is all sorts of stuff I've already installed, but we wanna install the Apium one. And so I'm gonna go in here and search for Apium. And there it is. And we can see here there's a readme, lots of information about it. And considering I just published it today, we're already five versions in, having a few problems with bundling, but just growing pains. So I'm gonna click install. And this might take a minute because this extension actually bundles Apium too. We can change that so it might download it on the fly later. But right now it bundles Apium too. It will also allow you to use an Apium installed locally to your project or an Apium installed globally on your system if it can find one. So it is installed now. Yay. I want to show you next the settings that this thing provides. And so if I wanna go to the settings, here I am at settings command comma for me. These are all your settings for VS Code. Each extension, most extensions have their own settings and they're listed down here in extensions. And ours is the first one because it starts with A. So Apium and there are two kind of main areas of this configuration. One is the server defaults and this corresponds to flags or settings for a local server. The next one is session defaults which is defaults for connecting to servers. And we can see how these things will kind of come into play later. But the next thing I wanna see is the output. So if you're ever having problems with this extension and you probably will, then you want to open up a terminal and you can show the output. So let's see, how do we do that? I'm just going to show output. So Apium show extension output. There are other ways you can get here. But that is the command that just, it just opens up this little debug log. And it'll show you what it's doing. I believe it's set to only show info. Maybe I could change it so it would allow you to see the debug messages. But for now, it's gonna tell you a little bit about what it's doing. And so that's just there in case you need it. The next thing would be starting a local server. And the way you're gonna start a local server with this extension is to use a task. And a task in VS code is much like a custom script that you would have in a different IDE. But they are tasks in VS code and task definitions when you create one, they're stored in this .vscode directory in a file called tasks.json. So to configure a new task to start the server, I'm going to press for me, this is F1, but this is a command palette and you can do any command that is available in VS code just from right here, which is pretty handy. And if I type apium, what can we do here? No, that's not it. We want to configure a task. Okay, so this will show you the types of tasks you can configure and this depends on your extension. So for example, the ESLint extension provides one that you can use. These are kind of like pre-made extension or pre-made tasks, lent the whole folder. Okay, great, that's just a task you can run. For us, that's the start apium server task. And so we click that and it creates a tasks.json file and in this file, it will put a task definition. In a type of our task is apium server. This is basically every extension, every type of task will have its own special name there. So if I took this out, for example, I could change all these different things of, I don't know what kind of type we want, like NPM or something. And if I use NPM, that's a whole separate way of defining it. But so we have apium server and the address. This will be the address that the server binds to and the port and we're just telling you to use bundled apium for now and you can change that if you want. And this is the label or the name. So when you want to run this task, you will refer to this name, you'll see it in the list. The problem matcher is a setting we're not using right now, but that essentially tells VS Code that when running the task, if there's some output that matches the problem matcher, then it can communicate to VS Code that, hey, there was a problem and you can take actions based on that problem like, hey, there was an error, let's pop up the thing. So you can look at the log. So we're not using that right now, but we might. So we've defined this task and we can run it. And again, this in the command palette run task is what I want. And it'll show us a list of things we wanna do. And so there's all these other ones that just are, this is contributed. So they're essentially just tasks that will automatically get created based on what's in your project. But for us, we've defined one in that Start Appium server. And so we'll run that. And so we can see a terminal pops up below and we're gonna make this a little bigger. So this is executing task, Start Appium server. And this is not really a terminal, so it's a pseudo-terminal. But it basically just runs the bundled Appium in the pseudo-terminal and it passes the arguments from the task into it. And we can see that we're running Appium version two and it's got UI Automator installed because I've installed that evidently locally in my machine. But now we got the server running, which is cool. So if we wanna kill the server, we can trash it. Boom, it's gone. So you may have noticed this little thing down here and this appears in the Explorer view. I may move it to its own panel because there's a lot of crap installed here I probably should get rid of. But anyway, there is this loading Appium servers and this little tree will help you look at your sessions and we'll see. So let me close that out. We don't need this task right now. But hey, here's a little button that's, what is that gonna do? That's going to add a server. So let's click that. All right, and so it gives me a editor and this is a custom editor for a file and this file is called new server dot Appium server and an Appium server file, which is, as far as I know, unique to this extension is just a JSON file, okay? But this is a kind of easy view into the data and we can see that there's some stuff populated already. It pulls that out of our settings, our session defaults and for example, the remote Appium version. Well, if we're gonna run the local bundled server that's gonna be version two and these all look fine. Nickname, let's give it a nice nickname like nurturing flow. Okay, and that's my nickname. And so let me see, there's some other settings here but let's just save that. All right, so I saved it and maybe I can rename the file, save nurturing or how about like Epic flow or something. And so this is Epic flow dot Appium server. Now over here, it doesn't know about this server yet. I'll probably change it so it automatically recognizes when one of these gets added to the workspace but we can refresh the servers and what is this? Wow, it's already in the tree and says, hmm, no sessions, it's offline. Well, what can we do about that? Well, we can run our task again, let's start it. So run task, start Appium server and it should be online and if we wait a second, it should. There it is, it's online, yay. And we can see that the extension is actually calling the server and it's trying to hit a couple endpoints like status and sessions and stuff like that. But we don't have any active sessions so that's still empty. But say we wanna kill this and take it back offline and this is gonna pull every, I don't know what it is, 10 seconds or something like that and it should switch from online back to off, there it goes, offline. Okay, but we can do a little better than that. Let's actually start a session and see what happens. So I have an Android emulator running in the background and an Appium inspector pointed at it and let me start the session and then we will wait for it to refresh and so that's set to do it every 10 seconds. So there it is, so it sees a session and in the lieu of anything else, the session ID is the name. It does mention that it happens to be Android. There are capabilities and other information that I'm not showing right now but you will notice this little camera which says take screenshot, let's take a screenshot. Wow, it got a screenshot of my session and so yeah, I'm using the Sauselabs mobile app, sample mobile app. But yeah, pretty cool, huh? All right, so that was the demo and I'm gonna switch back over to the slides. So, whoa, I want this button. Right, so here is some information about this thing and you can take a look at that if you like but I just kind of wanted to say there's a lot of things we could do with this extension. It's obviously it's pretty new and raw but there's a lot of directions we could go with it and I'll pop this right back up in a second here but for example, maybe with Appium 2 we have that whole command line interface of driver and plugin management. Well, it would be cool to have a thing in there where you could just add a driver in the UI or look at the install drivers, add and remove and stuff like that package management type tasks and that would be neat. You know, cloud vendors, specific stuff much like an Appium inspector would have settings and capabilities I'll pre-configured for you for the various cloud providers. If you're running servers locally maybe you wanna grab the logs from the servers or I can certainly see a use case where you're running your tests and you're hitting Appium and something's going wrong and you don't know what's going on you just you could slap a breakpoint in there and when the breakpoints hit press the screenshot button you know, stuff like that and certainly porting to other IDEs is a possibility. You know, I would like to kind of focus on this one first but certainly I think most of the people using Appium are not actually using VS Code and so this is not necessarily for the people who are not using VS Code, right? Because it's a VS Code extension. But you know, if it does get traction and people do like it well it makes sense to put that into other IDEs maybe your X codes or your Android Studio or your JetBrains, that sort of thing. If you wanna get really fancy, you know, Appium Inspector is an Electron app VS Code is an Electron app we could run Appium Inspector in VS Code somehow I don't know. Maybe there is some vendor specific stuff like I know you could get video from Sauce Labs or something like that right there in your IDE and that would be awesome. You could even go as far as managing your emulators or starting an emulator, that sort of thing. So there's a whole lot we can do with it then. So I'm interested in feedback from the community and I would love your ideas and thoughts and yeah. So again, here are these links that you can probably still see. Check it out in the video, in the Visual Studio Marketplace which is where you would go to download this sort of thing it's up there on GitHub. Right now it is under my account but might move to like, I don't know, the Appium one or someplace else. And I am bone skull, but my name is Chris actually not bone skull, anyhoo, that's what I got. So thank you very much, Appium Conf and thanks for having me. Thank you Christopher for demoing the extension you developed and that just went live today. We have one question from the audience that's from Omka. How to configure the app path to this plugin? I think I'm gonna need some more information. I'm not sure what you mean by app path. Oh, so you mean the path to your, the thing that you're right. No, you wouldn't do that in this. You would use whatever, you have your client and your client is gonna go and do that sort of thing. Whatever is creating a session is going to put in the capability and say what app that you wanna test. And so that's not this. This is more for at least right now. It's more for interacting directly with the server. Yeah, we don't have any more questions as of now. Thank you once again, Christopher. Thank you.