WebUp is a new website monitoring tool that can also be configured for other endpoints such as web API urls. It is live in the Windows store as a UWP app, which means it can run on mobile, desktop, tablet and Xbox.

image

Why UWP?

The Microsoft ecosphere for app development, although on the mobile side is way behind both iOS and Android, has huge potential with everybody who runs Windows 10 included no matter what device. Here are some of the reasons I chose to publish on the Windows app store.

Auto updating

Any change I wish to make to the app once gone through certification will auto update on the end users machine leaving them with an always up to date version with no user input. Gone are the days when a new version of an application comes out, you got to go to the site, download and then install it.

No credit card information collected

WebUp is free for a trial of 7 days, but some of the features are locked out until upgraded to the full version. This payment process is entirely handled by Microsoft and although there are payment methods out there such as Stripe, as a developer I don’t need to lift a finger, just specify the price.

Runs across multiple devices

UWP apps are compiled once, but each architecture is included which means once a package is uploaded to the Windows Store, it is available for any Windows 10 device. WebUp gives a great experience on a tablet sized machine, but some users are running it on an Xbox with a massive display and using it as an information radiator. The mobile version is great when you need to whip out your phone and just check the status of your web sites.

User can multi install

The Windows Store allows a single user to install the app on up to 10 devices giving them the freedom to run it in multiple locations on different devices. WebUp can be installed on Xbox for an information radiator but you can also have it running elsewhere in an organisation with a different subset of http end points showing. A manager can also have it on their mobile device connected to the local Wi-Fi giving them satisfaction that everything is running fine.

Don’t need to worry about account management

With more traditional web based monitoring solutions, username and passwords need to be configured to log into the service, with a UWP Windows app, the installation is linked to the Microsoft account of the user so no more little yellow notes with credentials stuck to the monitor.

Can be installed inside enterprise and behind corporate firewall

As the app is installed to the device and not hosted by a third party such as SaaS providers, no holes need to be punched through the firewall if all your http end points are internal.

So those are some of the reasons I opted for UWP, it is early days at the moment, but I am already getting some traction and have other features in mind for the app.

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.

Containers on Windows 10

This is part 1 of what will most likely be a series (unless I get totally hacked off with containers like I am right now). Part of the series will be about getting containers up and running on a Windows 10 box to run a Windows based container. Then I will progress onto Windows Server 2016 and get the same configured container to run on that and hopefully discover some kind of work flow for developers along the way. The end game is to develop a website using Visual Studio 2015, test on Nano Server running IIS and deploy using Server 2016.

Pre-requisites.


Apart from Windows 10 professional or Enterprise, you need to be sure you are running at least the Anniversary Update (1607); to check this go to a command line and type:- winver

I am running 1607 build 14393.187 (22nd September 2016)

image

Enable Containers

To get containers installed, you need to enable the feature. This can either be done using PowerShell or the UI. Here is the PowerShell:-

Enable-WindowsOptionalFeature -Online -FeatureName containers -All

Then as Windows 10 will only support Hyper-V containers, enable that feature as well:-

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Hyper-V -All

 

Then restart the computer

 

Installing Docker


As of Docker version 1.12 there is an option to download Docker for Windows, however to natively run Windows containers instead of using MobyLinux as a middle ware virtual machine, opt to install the beta version which can be found here:- https://docs.docker.com/docker-for-windows/

Switch to Windows Containers

Once installed, right click the whale and switch to using Windows Containers.
docker-7

docker-8

docker-9

Now you can get the version of Docker and it should show that both host and client are running windows.

docker version

docker-10

Nano Server

According to this link you can run both Server Core and Nano Server on a Windows 10 Pro machine within a Hyper-V container.

The best way to get Nano Server is from the Docker hub at:-https://hub.docker.com/r/microsoft/nanoserver/

In your command line or PowerShell screen use:-

docker pull microsoft/nanoserver

docker-11

It will take a while to download if it has not already been cached on your host machine.

List the images

To list the images you have on your host use the command:-

docker images

docker-16

 

Run Nano Server

This can be achieved simply by using the docker run command; however if you want to run it interactively you can append the –it flag and get into a command line like this:-

docker run –it microsoft/nanoserver cmd

Once it starts up you will be in the command line of the container; you can check this by using the hostname command.

docker-17

You can get out of this container by typing exit and it will get you back to your host machine. Once there use the command docker ps and it will list all running containers and you will see there are none running now. You can however use the switch –a to get all containers in both running and stopped state.

docker-18

As you can see I have a lot of containers, but thats ok I can delete them all by iterating through them all and remove using the rm command like this:-

FOR /f "tokens=*" %i IN ('docker ps -a -q') DO docker rm %i

docker-19

A nice clean slate to start again.

Happy coding.

I have finally rewritten my MoonPhase app to be a UWP app. This allows me to write the code once and have it on a Windows 10 phone as well as a standard Windows 10 desktop or tablet.

With this app, there are three main interfaces that show you the phases of the moon; a day view, week view and a month view. As the phone interface is somewhat constrained, I decided to only show the day view on these devices and allow the user to move back and forward in time to get to other dates.

Phone view

image

Desktop view

image

So in the code I had to detect the screen size of the current device, this can be done in the app.onactivated event of the WinJS framework.

getCurrentView() will get the device view object where we can then query it for the visibleBounds properties. I am using a device height of 800 which covers phones in the 5inch range such as Lumia 650.

Then a conditional is used to render either the day.html view or the week.html view for all other devices.

Also as I don’t want phone users to see the buttons to navigate to week or month views, I simply use jQuery to get all the buttons from the toolbar that have a certain class and remove them.

The app can be found in the Windows app store here.

Happy coding.