Catchy title, but it explains exactly what is in this post.

I have just released an update to one of my UWP apps called WebUp. The additional functionality I added was email notifications when a http end point went offline. There are different ways you can message from a UWP app, but I wanted to use SendGrid to manage all messaging, so in this post I will cover adding this functionality from a UWP app written using WinJS. So yes it is possible to consume C# functionality from JavaScript and it is easier than you think. Why SendGrid you may ask, simply that they allow you to send 12 thousand emails per month for free, can’t grumble with that.

Windows Runtime Component

This is a dll that can produce winmd metadata that can then be consumed by UWP app written in any supported language such as C#, C++ and even JavaScript. Although the functionality can be limited somewhat, they can be used to create wrappers around libraries that cannot usually be accessed in a UWP app.

What is WinJS?

This is a JavaScript framework from Microsoft that can allow the developer to quickly add functionality to UWP apps. Although originally developed just for creating Windows Store apps, more recently this library has been open sourced and can be used as a framework to create web applications. It can still be used however to create UWP apps using the JavaScript template in Visual Studio.

Creating the app

Firstly create an app using the basic WinJS template in Visual Studio.

image

Choose the target and minimum versions.

image

Now a new project is needed to be added to the solution, so right click the solution.

image

Choose Windows Runtime Component under the C# collection.

image

Right click the references of your main UWP project and add this component.

image

To use SendGrid for messaging, the best component to use is called LightBuzz and can be found here:- https://github.com/LightBuzz/SMTP-WinRT

Although it’s easy to add references via NuGet, for some reason with UWP apps created this way, the library was not copied locally, so I cloned the repo from GitHub and built the project locally giving me a nice shiny library I can then reference old school.

image

Just make sure it is set to copy local in its properties.

Now for some code.

In the class code auto generated when you created the Runtime Component, make sure you have the using statement for LightBuzz.SMTP and add this code:-

When using SendGrid, you can add extra credentials to your account that helps separate out different usage scenarios. I have credentials set up for my WebUp app and I have used it here, just swap out with your credentials.

While in the Component code, have a look at the project.json file, it will list all the runtimes that are available for the component. When running this app,, you will need to change the environment to one of these as ‘Any CPU’ does not work.

image

Now back in the UWP code, add something like this to the app.onactivated function; obviously you will want to put it somewhere else, but for this example it will work.

Enter your email address and run the app. With any luck you should start to receive emails direct from your app via SendGrid.

When doing Continuous Integration and Continuous Deployment, sometimes its great to get your code into production but hidden from any end user actions. In this post I will outline what I have been using with great success on my SaaS application ObsPlanner. There are however loads of libraries and other tools that will do the same thing, but I opted for the more simple, home grown approach.

My application is an MVC application that uses Angular JS in the views to give a better end user experience by acting as a mini SPA, so C#, Razor and Angular need to know about what features are available and what is not.

The database structure is simple, a table with one column for the toggle name and another for if it is enabled like this:-

 

I am using Entity Framework for all my database work, so I have a FeatureToggleRepository that retrieves the data like this:-

Each of my MVC controllers inherit from a BaseController which has methods used throughout the site including the getting of toggles:-

Now each of my controllers can easily get the toggle list:-

Where the toggle list is added to a view model, in this case it includes the logged in user details as well as the toggles. So in the view I can use Razor to run a conditional against it like this:-

So that works great for the View, what about the Angular stuff, couldn't that break if certain elements are not present in the view? Well yes it could so in the JavaScript I simply have all my toggle code nicely wrapped in functions that only get called if an element with the correct id is present in the view like this:-

The setup for this site is a development, staging and live server all with their own copies of the database. So this method allows me to push code through the whole life cycle and simply switch on the feature on the live server when I am happy with it.

Happy coding

HTTP Endpoint Monitoring for both Windows and Android
WebUp App