Microsoft 365 Community Microsoft Teams, 28 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Remotely debug your Microsoft Teams apps from any device using Vorlon.js

Description

In this 13-minute Maker/Developer focused demo, David Rousset runs through how to develop and remotely debug (and make live updates) apps on Android or iPhone from a Windows PC using Vorlon.js. Requires adding only a script to Teams web app running on these surfaces. The script monitors calls to console log that’s connected to PC via WiFi. See functionality in demo today. What can we build for you tomorrow? Envision a VS Code extension for Teams Toolkit.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 28, 2023.

Demo Presenter
• David Rousset (Microsoft) | @davrous

Supporting materials
• Tool - INTRODUCING VORLON.JS | https://vorlonjs.io/

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

A

A

Manager working on the team's toolkit, so thank you Gary to show what we are working on and the easiest way to contact me is to discuss with me on Twitter at Dave Rose, which is also my Microsoft. Are yes um so I'm working on the toolkit on my side um and I was thinking about the next step to help you building application for mobile. So I don't know if you follow the recent news, but we announced that we are officially supporting.

A

You know apps on Android, for instance, so you can build a tab, app, a personal app for instance, and view it on your Android smartphone, but also it it. You know it's it comes on iPhones and on and maybe in the future. In many devices you can now build using the Microsoft toolkit or any other way to build it you're a teamwork, whatever you can build for teams, but you can also deploy it for Outlook office.com, so many different environment, but also many different devices and also form factor.

A

So I was trying to think you know as a PM for the next stage to help you on how to improve the debugging of those apps on like an iPhone, for instance, from a Windows PC, and we know that they're building an iPhone is probably the most painful one, because normally you need a Mac to do it, plus. The fact that you cannot today debug attach the debugger on the team's apps on the iPhone.

A

So you have really no ways to remote debug, an app on on an iPhone, so I'm going to present you a project I've been working on in the past, its name valen.gs, which was an open source project. I, was working a couple years ago and I'm currently updating it with a teams in in India working on the team's mobile platform. So they are doing an amazing work to take the source code that was seven eight years old and fix it, improve it so I'm going to show you like the existing version of volun GS.

A

So what it does is pretty simple in a way if he sees uh not GS application, that is using socket IO, so web sockets, and what we're going to do is we're going to reference the script at the beginning of our team's application, which is a web app. You know, and then this specific package is going to monitor every call to the console.log it's going to enable like a basic Dom inspector, a remote inspector and it's going to send back all events from the the client. So it could be an iPhone.

A

It could be another, it could be whatever we've been able, even to the debug a Tesla, because you know you got a web browser on a Tesla and it's going to send that back to the developer machine, and then you will be able to do some basic inspection. So let's see that together. So the first step um is I defined a specific Android configuration file, one for the local us, where my teams app is going to be hosted, so it's being uh defined by the team's toolkit and one for volun.

A

Yes, that I have been installed on my machine, so violin is running there.

A

So I, you know, I've launched volunteer, so I've done an npm install of volume and install that in in the global uh space of my machine, and it's running on this specific Port that now being exporting on this public URL thanks to engrock and the other other URL is my team's app being exposed on the second public URL thanks to ngrok, so I'm, using the next version of the toolkit that we we release in in the preview States and using a new architecture that is simpler for you to really check everything being done by the toolkit and and remove or upload your own logic.

A

While you like to, and now it's really easy to control. You know the various endpoints so I've injected the public on point of end clock, and last but not least, this is what I was explaining. You I've got the specific script at the beginning, which is volunteers, the client side of volunteers.

A

That once is going to be load first and then it will monitor everything being done on the client to be able to send all the event back to to your developer machine, so I already pressed F5 and try to be sure that I will be in time. um Let's check the application. The application is there.

A

So it's running for now on my PC and I'm, going to show how it works, look fully locally in a way and I've got also the volume dashboard being there going to snap it on the right, so I'm going to load the app and you're going to see that normally a new client is is being connected there. So, thanks to the script that was at the beginning, websocket was used with socket IO to send events back to the volunteers. Dashboard.

A

To tell me, like a new client join uh the volunteer server, and now you can remote debug in a way. What's going on so like uh having a Dom inspector, so you're going to tell me like okay David. This is not that impressive, because I can do that with F12. You know locally on my machine, so the next step now uh is to do the same, but on the first Android device, so I'm going to enable this Android device, which is a Surface phone, so I'm going to uh open the same app, which is there.

A

So it's going to load it and if it works well, you see now I see an Android device, that's connected, which is this one so um I'm going to if I'm lost, for instance, you've got too many devices. I've got to identify a client button which is going to tell me, which is one so number one is Android. So I only have one Android device for not connected so now, I can first I can see the remote console.

A

So what we're seeing that is the console of this device, meaning that you see that I don't have any USB cable I'm running over Wi-Fi on my local machine, it's going to connect when Rock and come back to my machine. So there is a big loop, but then I can now check the console of My Remote device, which could be already super useful because sometimes it's not running on your device. But you have no clue what's going on thanks to valence.

A

Yes, you have the remote Network being available and once again now uh I can't have some basic. You know debugging capabilities, so we are still fixed trying to fix Verlin. uh But let's imagine I'm clicking there and I would like to have access to the layout.

A

uh You see that I can already see some properties of this current HTML and CSS, rendering on my device and I can modify some stuff that I'm going to do that now on the second device, which is my iPhone, and this one normally um you you shouldn't be able to debugger that because there's no real way outside of this technology to do it, um and obviously it has disconnected from my DC so I'm, going to reconnect.

A

So now I've got the iPhone still in Wireless in Wi-Fi I'm, going to open the same app for teams is in French. So that's pretend is also to test the localization, and you see this time, and this is something we're going to tell to my team working on a new dashboard sample that we're going to ship for you in the next version of the toolkit. We have an issue there um so to potentially debug it. You see now.

A

I've got an iOS device connected, so I'm going to connect on this device and what I will be able to do now is um to update some stuff. So let's imagine I like to um update this part, for instance, and the first div you see that uh where is the content itself.

A

There your list going to HTML and I'm going to update it live so, let's type your list to saving and I, don't know if you've seen that, but now it's being updated on my iPhone, which is cool I, can even uh remote execute some code because I can send some instruction back to my device. So let's do something very simple, like we see the beauty of JavaScript in a way that I can execute the a good life.

A

So if I'm pressing enter so you see on my device, it managed to receive the code execution and do something so I can really have some basic, remote debugging capabilities thanks to volunteers, that you've seen that you just have to reference it at the beginning and be able to do many things. So, for instance, I can go to the other object Explorer and go to I. Don't know the Navigator object, for instance, I should be there uh going on the Prototype, and we see that I'm currently running an iPhone oops uh with the OS version.

A

So I can have a lot of information on my Remote device from this dashboard. So what we are planning to do is to try to integrate that um as a vs code, extension and probably also in the toolkit. So we are working in our team with a in in India to to do that. We would love to have your feedback of what you would love to see in this product. uh If this is it, is it still enough or do you do you need more?

A

So, for instance, today I cannot live edit, the style because it's broken in Violin, but we're going to update it. So you will be able to live the edit, the style on the Remote device that should gain give you a lot of productivity boost, rather than trying to guess what's going wrong and, for instance, you see that I've got an issue on my graphs there, so I I will be able to use myself one to fix our sample for the toolkit. So this is something very useful for us to to application.

A

I know we have a little bit of more time, I like to do a test. So last time I broken the the meeting, but this time I shouldn't block the the meeting. So let's I'm going to share this URL with you in the chat and if you go on it, it's it's the uh application running on my local machine on and grog, but you will see that if you click on it and open that in your browser, I should see people connecting uh uh in my dashboard um and I.

A

Can the remote debug, for instance, enemy an application so I see that the windows, uh Windows machine or Linux machine, um so Linux machine should be fun. um So who is the Linux machine? Can you please share like it's number five, so I'm going to click on identify your clients, so Linux I, don't know who you are but I'm going to try to connect to your machine.

A

Who is running on Linux, but you see that I can remote, so everything is being hosted on my machine. So if you would like to do more, you know connection I should probably have a public server in Asia or something else in the cloud to be able to remember debug it. But you see we can basically a remote debug anything thanks to Valen, because it's pure web technology, it's socket uh using node.js app, so I can basically uh remote debug something of student outlook.com in Outlook. The page clients are in teams itself.

A

So really it was trying to share you some fun with you. If you're interested in knowing more please contact me on Twitter or or to the team and and share any feedback you may have. That may be something useful for you, and this is it. This is the end of uh of My Demo. So I can stop sharing my screen somewhere excellent.

B

Thank you, David really, really cool stuff um and that's gonna be really helpful for sure and I'm gonna improve a lot on the debugging side. It's it's always so hard to do debugging on the desktop experiences. So this will be really really cool, so awesome stuff and a lot of positive feedback on the chat as well. So please, please, please, contact David uh for your feedback um and and let's give input, was that fun or not. Let us know.