AI Assisted Intellisense with Visual Studio Intellicode

I tried Visual Studio Intellicode and am super impressed. If you like saving time, this easy to use Visual Studio add in is the way to go.  This Microsoft explanation gives a great overview:  “IntelliCode saves you time by putting what you’re most likely to use at the top of your completion list. IntelliCode recommendations are based on thousands of open source projects on GitHub each with over 100 stars. When combined with the context of your code, the completion list is tailored to promote common practices.”

Image credit Microsoft

Basically Intellicode saves you time by putting the most likely code autocomplete suggestions at the top of your list as determined by Artificial Intelligence to be the most likely correct choice.  The AI behind the decision logic is from a model trained on thousands of GitHub projects.  Until now, that list has been alphabetical, so in the example image above, you would have to scroll down to the E’s if ‘EndsWith’ was what you wanted.  Sounds like not a big deal, but let me tell you, those couple of seconds add up.  I also find it fascinating and perhaps understated that AI is reaching into our code bases!  While autocomplete suggestion prioritization is an early benefit we can enjoy now, the things that make it possible have huge implications.  If you think about it, since we can now do things like identify that .ToList() is used most commonly in certain places, what other patterns can we learn from a collective code base?  Funny you should ask, this blog post from Microsoft research dives pretty heavily into that topic.   One notable future application is scanning for potential issues in code when you check your source code in.

Intellicode can be trained on your own code.  Open the Intellicode menu by choosing View > Other Windows > IntelliCode Model Management.  Next, click ‘Create New Model’.  Intellicode will train using your code as model data  (without sending your code to Microsoft).  It does so by collecting as Microsoft describes “only those elements of the code that are needed to create a model for recommending completion values. For example, it extracts the names of classes and methods and how often they’re called in different circumstances. The data used to train the model on your code is saved in a file which you can view in the “%TEMP%\Visual Studio IntelliCode” directory.  This data is sent to a service where the model is trained and passed back down to Visual Studio.

Give it a shot and start saving those precious seconds!

 

Azure App Service Deployment Slots Demystified

Have you ever wanted to beta test a feature of your web application to a subset of real production users? How about deploy different versions of the same application to a test environment? With Azure App Service Deployment Slots, you can. In this post, I’ll give you a quick, simplified tour. The key here is to not overthink it, as I admittedly did when first learning about them.

Get Started

Getting started is easy.

1. Navigate to your app Service

2. Select ‘Deployment Slots’ from the App Service Menu

3. Click ‘Add Slot’ to create a new deployment slot.

4. Name the deployment slot, and choose to clone settings from your original web app

5. Done! Well, mostly. You now have two deployment slots. Your original web app is sitting in its own slot called the production slot. Its running just as it always has, except in its own slot. All traffic continues to be routed to your original web application in this slot. The new slot you just created is a full fledged web app, complete with its own URL and its own config, empty and waiting for you to deploy code to it. Click on the new slot link and you’ll be taken to the management page of that slot. Notice it is exactly like a regular App Service management page. Its essentially its own application. From the management page, you can click the link displaying the URL of the app to navigate to the running application.

Swap them slots!

Deploy the code containing the features or version you want to test to the new slot. You can download the deployment profile for the new slot from the management page and use it for deploying from Visual Studio. When you’re ready, you can perform a swap of the two slots. Swapping slots at this point moves the new application into the old application’s slot, accessed at the old slot’s URL. The old application moves to the new slot, accessible at the new URL. Most importantly, there is no traffic interruption during swaps!

Traffic Routing

If you don’t want to full on swap slots, you can specify a percent of traffic routed to a slot under the slots management page. On saving, traffic is routed to the slot you configured according to the percentage you specified. Clients do stay on the slot they’re routed to for their entire session, persisted by cookies set on their initial request.

You can direct a client manually to a specific slot by setting a query parameter in a link provided in your app.
Set the x-ms-routing-name parameter value to ‘self’ to direct to the production slot, and to the name of the desired slot to route to the desired slot. Subsequent requests will be routed to the same specified slot.

Here’s an example as provided in the app service documentation that would route to the production slot:

appname.azurewebsites.net/?x-ms-routing-name=self”

and to a staging slot:

appname.azurewebsites.net/?x-ms-routing-name=beta”

You can use this feature to allow users to opt into certain features, then opt out.

There you have it, a swap knowledge snack.  Now say “How many slots could a wood chuck swap if a wood chuck could swap slots” fast 5 times.

Set a Platform Specific Label Font Size in Xamarin Forms

Here’s a quick post for anyone interested.  I had a hard time figuring out just how to set different font sizes for one or more labels depending on the platform.  Here’s how:

Create a resource dictionary for your page.  It could be at the app level too.

Assign the style to your label

Cheers!

Automated UI Testing with Azure DevOps and Selenium

If you’ve never done automated UI testing of your web apps, you’re in for a real treat!  You can visit your pages, click buttons, verify results, take  image snapshots, all automatically through code.  Your code actually controls a web browser that interacts with your site.  I’ve recently rediscovered its benefits and am vowing to up my UI testing game.  Why?  Better code through testing.  I’m not necessarily all in on Test Driven Development, but I’m after a certain set of results.  I want my tests to eventually do my thinking for me.   I can’t possibly remember all the little things I want to validate in every web app I write (many of them).  All the business logic, widgets, rules,  and customized niche stuff.  Best of all, its super easy in your ASP.NET MVC apps using MS Test and Selenium Webdriver.   This post will walk you through setting up your test code in your web solution, then executing that test as part of a build definition in Azure DevOps (formerly Visual Studio Online/ Visual Studio Team Services).  This last part, executing the tests in the cloud, is the best part.   Its hands free, automatic, all web based.  The results are easy to track for someone who can be a little disorganized at times.  I have a complete history of each test execution stored online all in the same place I live anyway, in Azure DevOps.

Get Started Writing Your UI Tests

UI testing is a vast universe of many wonders of which I’m not going to cover for this post.  You will see the most basic of unit tests here.   First, in Visual Studio, add a new project to your web app solution.  In the left menu, select .Net Core if you’re building a .Net Core web app, select Test if you’re building for .Net Framework.  In the middle pane, select the Unit Test Project option.  You’re unit test project will be added.

In your unit test project, add the Selenium Web Driver, and Selenium Web Driver Chrome Driver (or Firefox) Nuget packages.  The Selenium main package is responsible for core UI testing while the browser driver packages interface with the browser of your choice.

Your first test class is added automatically to the project.   The test class itself is decorated with the TestClass attribute.  You also get an automatically created test method decorated with the TestMethod attribute.  Both are required to trigger the MSTest framework.  Some other handy attributes you can use will help you set up and tear down your tests.  These are the TestInitialize and TestCleanup attributes respectively.  Methods decorated with the TestInitialize attribute run before any tests are executed, whereas methods decorated with the TestCleanup attribute run after all tests are executed.

Initialize Selenium Webdriver with your app URL in your TestInitialize method, and dispose of it in your TestCleanup method, as shown below. You’ll need a class level variable of type IWebDriver named driver.  Super important: when running these UI tests in Azure DevOps you have to init the driver with Environment.GetEnvironmentVariable(“ChromeWebDriver”) so the hosted agent can load it.

The Login method instructs the web driver how to log into my web app. I simply reference the html elements by id and tell it what values to enter.

After your init method, all the test methods labeled with the TestMethod attribute will be run and tracked individually in Azure DevOps.  My test method simply shows how to navigate to a URL and take a snapshot.   This one of the coolest features.  I can look back in my test history to see when a page broke.   The snapshots are saved to the cloud under each test result.

I recommend running the tests locally first (remove the environment variable parameter passed to the Chrome Driver constructor). Which brings us to our next part.

Run Your Tests in the Cloud

To get started, you’ll need a build pipeline or a build and deployment pipeline, depending on how you want to configure things.  Most times I just have a build pipeline that also releases to at least staging.  Creating one is beyond the scope of this article.  Add a test assemblies step to your pipeline after whatever step deploys your site.  Its under the tests tab in the add step pane.

When added, the step looks like this.

The great thing about it is that the step is configured correctly with the defaults.  Make sure the upload test attachments option is checked, and that the select tests using step has test assemblies selected.

View Your Results

Run your pipeline.  Your tests will run.  The hosted Crome webdrdiver will go out and test your URL (if its publicly accessible).  There are two places to view your test results.  The first place is the test summary result, under the main left hand side menu :  Pipelines > Builds > click a build result > click the tests tab.  You’ll get a summary view like below.

The next is under the left hand side menu > Test Plans >  the sub menu Test Runs > click a test run.  You’ll get a run summary and a test results tab.  Under the test results tab is where you can view your screenshots.  Under the test results tab, you’ll have to double click a test result to view the details.

Hopefully now you’re off and running building your own UI tests.  Enjoy!

Calling the Visual Studio App Center API from Postman

Visual Studio App Center has a great API exposing most if not all of its functionality.  This is useful for a ton of reasons, whether you want to integrate its app management functionality into your workflow in a custom way, or as in my case, use it to access analytics and display custom dashboards.  You can of course export App Center Analytics data to blob storage or App Insights.  For my purposes, I only needed access to a few aspects of data and also a more fine grained control, so chose to just call the API.  The API is documented using Open API here.   This post will take you through getting all of the API endpoints imported into Postman and even generate code to start calling them. The tooling has certainly come a long way since building API clients by hand!

Get the API Swagger

In order to get the App Center raw Swagger, head on over to https://openapi.appcenter.ms.  Here you can view the interactive, nicely formatted UI where you can easily navigate and even issue test calls.  To get the actual raw swagger from this page, I had to view the page source, upon which I discovered a JavaScript function called on page load to go fetch it.  The URL looks to be https://api.appcenter.ms/preview/swagger.json.

Import the Swagger into Postman

You can import Swagger into Postman by clicking the Import button at the top of the app. From here you choose the source of the Swagger via file, folder, link or raw text. This is how I discovered that simply pasting the App Center Swagger URL did not work, so I posted the raw json from the link above and it created a new collection containing all of the endpoints. Most of the endpoints do not have a general description so they end up having no title in Postman, making it difficult to tell one from another. The good thing is you can add your own title to your favorite endpoints and save them in the collection.

Make your first call

To authenticate your call to the API from Postman, you need to obtain a token and (I had to dig around online for this one) add a key named X-API-Token to the header of the call with a value of the token you obtained from App Center.  Postman has a neat feature where you can store preset headers and add them to your calls, so I stored the token header as a preset so I can easily add them to new calls.

Generate client code

Now that you’re authenticated you can have Postman generate sample code for each endpoint. In my case I used the RestSharp code gen feature. To do that, click the code link (shown in the image above) while you’re in edit mode of a call and select your language. That’s it, you’re off and running!