feed.rss

<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
	<channel>
		<title>Ian Bebbington</title>
		<link>http://ian.bebbs.co.uk/</link>
		<description>IObservable&lt;Opinion&gt;</description>
		<copyright>2021</copyright>
		<pubDate>Mon, 12 Jul 2021 13:01:25 GMT</pubDate>
		<lastBuildDate>Mon, 12 Jul 2021 13:01:25 GMT</lastBuildDate>
		<item>
			<title>State-Of-The-Art Natural Language Processing in .NET on the Edge</title>
			<link>http://ian.bebbs.co.uk/posts/Unoonnx</link>
			<description>&lt;p&gt;In this post I show how .NET can be used to run state-of-the-art Natural Language Processing (NLP) models on "the edge". I provide a simple means for downloading and converting 'transformer' models from &lt;a href="https://huggingface.co/"&gt;HuggingFace&lt;/a&gt; into models that can perform inference from managed .NET code on resource constrained devices. Finally I use &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; to implement a cross-platform user-interface that allows real-time inference using these models.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/Unoonnx</guid>
			<pubDate>Thu, 06 May 2021 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;In this post I show how .NET can be used to run state-of-the-art Natural Language Processing (NLP) models on &amp;quot;the edge&amp;quot;. I provide a simple means for downloading and converting 'transformer' models from &lt;a href="https://huggingface.co/"&gt;HuggingFace&lt;/a&gt; into models that can perform inference from managed .NET code on resource constrained devices. Finally I use &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; to implement a cross-platform user-interface that allows real-time inference using these models.&lt;/p&gt;
&lt;h2 id="bitizen"&gt;Bitizen&lt;/h2&gt;
&lt;p&gt;At &lt;a href="https://www.bitizen.uk/"&gt;Bitizen&lt;/a&gt; we are working to revitalize democracy by promoting understanding of - and engagement with - politics in the UK. As a first step towards this goal, we have built a platform which is able to ingest hundreds of forms of data from across the political landscape and present this data to users as meaningful information. Much of this data is unstructured text so we use state-of-the-art machine learning models to help us analyse, categorise and summarise the data in a manner which facilitates downstream processing (i.e. cataloging, searching, presentation, etc).&lt;/p&gt;
&lt;p&gt;Given that we are a .NET shop and that most research around ML and AI takes place using either R or Python, we usually deploy models by containerizing them in their native environment accompanied by an HTTP API. This allows us to call the model from .NET and works beautifully in our containerized, event-driven architecture.&lt;/p&gt;
&lt;p&gt;However, as we move towards promoting engagement, we wanted our smartphone app to be... well... smart. For example, while users were interacting with the app (i.e. contributing to a discussion, searching for additional information, etc) we wanted to be able to perform inferences similar to those we run on the backend on the device itself. Privacy and latency considerations meant calling a hosted endpoint wasn't really a great solution so we started looking round for alternatives.&lt;/p&gt;
&lt;p&gt;This is what we came up with...&lt;/p&gt;
&lt;h3 id="a-quick-call-to-arms"&gt;A quick call-to-arms&lt;/h3&gt;
&lt;p&gt;Bitizen is currently looking for a web-developer and/or designer to help improve our online presence and bring some of our app smarts to the web. If you have an interest in UK politics and like the idea of working with a intrepid, young, bootstrapped start-up, please do &lt;a href="mailto:ian&amp;#64;bitizen.uk"&gt;drop us a line&lt;/a&gt; as we'd love to hear from you.&lt;/p&gt;
&lt;h2 id="ml.net-vs-nlp"&gt;ML.NET vs NLP&lt;/h2&gt;
&lt;p&gt;Microsoft has a fairly strong ML offering for .NET developers in &lt;a href="https://dotnet.microsoft.com/apps/machinelearning-ai/ml-dotnet"&gt;ML.NET&lt;/a&gt;. Indeed, I illustrated ML.NET's capabilities in a blog post last year titled &lt;a href="https://ian.bebbs.co.uk/posts/MLinUWP"&gt;'State-of-the-art ML in UWP'&lt;/a&gt; which used a recent (at the time) ML model to perform salient object detection and image segmentation; a process very much suited to ML.NET strengths. Unfortunately the story around using ML.NET for NLP wasn't so strong and there were very few examples of how to use modern, &lt;a href="https://en.wikipedia.org/wiki/Transformer_(machine_learning_model)"&gt;'transformer'&lt;/a&gt; based models from within ML.NET.&lt;/p&gt;
&lt;p&gt;Until, that is, &lt;a href="https://github.com/GerjanVlot"&gt;Gjeran Vlot&lt;/a&gt; published his &lt;a href="https://github.com/GerjanVlot/BERT-ML.NET"&gt;BERT-ML.NET repository on GitHub&lt;/a&gt;. In an incredibly concise and simple implementation, he illustrated how a &lt;a href="https://en.wikipedia.org/wiki/BERT_(language_model)"&gt;BERT based&lt;/a&gt; ONNX model could be used within ML.NET to perform 'Question Answering' (aka machine comprehension) based inference. This was fantastic and exactly what we had been looking for... except... we didn't want to perform (just) 'Question Answering' based inference. BERT - and related transformers - can be used for a broad variety of tasks including (but certainly not limited to) sentiment analysis, text classification and named entity recognition.&lt;/p&gt;
&lt;p&gt;Given the other prepared models available in the &lt;a href="https://github.com/onnx/models"&gt;ONNX Model Zoo&lt;/a&gt; - from which Gjeran sourced his model - seemed fairly limited, we decided to go model hunting...&lt;/p&gt;
&lt;h2 id="hugging-face"&gt;Hugging Face&lt;/h2&gt;
&lt;p&gt;If you've not been to &lt;a href="https://huggingface.co/"&gt;Hugging Face&lt;/a&gt; before, I would certainly recommend checking it out. Through the provision of excellent tooling and the formation of a vibrant, open community of users, Hugging Face have established themselves as the de-facto source for NLP models. On a single site you can explore, test and download models (with accompanying parameters and code) from a huge variety of sources (including Microsoft, Google and Elastic), pretrained (but with &lt;a href="https://huggingface.co/transformers/training.html"&gt;fine-tuning recommended&lt;/a&gt;) for a huge variety of use cases.&lt;/p&gt;
&lt;p&gt;I decided that I wanted to initially try something that would give me quantifiable results (i.e. something more than just a probability) and knew that I wanted to try to run a model on an 'edge' (i.e. resource constrained) device. This meant finding an alternative to the BERT based models which are typically in excess of 400Mb.&lt;/p&gt;
&lt;p&gt;Fortunately Hugging Face had me covered and, in short order, I had decided to use a &lt;a href="https://huggingface.co/distilbert-base-uncased"&gt;DistilBERT&lt;/a&gt; based model trained for Token Classification (aka Named Entity Recognition). After quickly experimenting with a few, I found &lt;a href="https://huggingface.co/elastic/distilbert-base-cased-finetuned-conll03-english"&gt;a model by Elastic&lt;/a&gt; that provided pretty good results and, at less than half the size of a comparable BERT model, seemed like it might be usable on an edge device.&lt;/p&gt;
&lt;h2 id="open-neural-network-exchange"&gt;Open Neural Network Exchange&lt;/h2&gt;
&lt;p&gt;However, Hugging Face provides models for ease of consumption from it's own toolkit which usually means they're made available in either PyTorch or Tensorflow based formats. ML.NET, on the other hand, is only able to load models in the Open Neural Network Exchange (ONNX) format. This meant I needed to convert the models before I could use them.&lt;/p&gt;
&lt;p&gt;Yet again, Hugging Face came to the rescue through the provision of &lt;a href="https://huggingface.co/transformers/serialization.html"&gt;an API&lt;/a&gt; which allows export of their models to ONNX. Knowing I would likely want to use multiple models in this manner (and not wanting to install various versions of Python on my workstation) I decided to build a docker container which would run the conversion and save the converted ONNX model to a mapped location. This proved to be shockingly easy with the image built using just a single Dockerfile containing:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;FROM python:latest

RUN pip install tensorflow
RUN pip install torch
RUN pip install transformers
RUN pip install keras2onnx
RUN pip install onnxruntime

ENTRYPOINT [ &amp;quot;python&amp;quot;, &amp;quot;/usr/local/lib/python3.9/site-packages/transformers/convert_graph_to_onnx.py&amp;quot; ]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This could then be run from Powershell like this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;docker run --rm -v ${PWD}/Output:/Output ibebbs/huggingfacetoonnx:latest --framework pt --opset 12 --pipeline ner --model elastic/distilbert-base-cased-finetuned-conll03-english /Output/elastic/distilbert-base-cased-finetuned-conll03-english.onnx
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Whereupon the script will download the specified model (in this case 'elastic/distilbert-base-cased-finetuned-conll03-english') using the specified framework ('pt' for PyTorch, 'tf' for Tensorflow), convert it to ONNX (using opset 12) including layers for the specific pipeline (in this case 'ner' for named entity recognition) and finally write the converted model to the 'Output/elastic' subdirectory of the current folder.&lt;/p&gt;
&lt;p&gt;Should you wish to use this docker image, it is available - accompanied by full usage instructions - on &lt;a href="https://hub.docker.com/r/ibebbs/huggingfacetoonnx"&gt;Docker Hub&lt;/a&gt; including a link to the &lt;a href="https://github.com/ibebbs/HuggingFaceToOnnx"&gt;source repository&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="netron"&gt;Netron&lt;/h2&gt;
&lt;p&gt;After downloading and converting the model, we need to examine it to determine the shape of the input and output layers. This is very easily done with &lt;a href="https://netron.app/"&gt;Netron&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Shown below is (a small section of) the DistilBERT model. By clicking on the 'input_ids' node a side-pane is shown which includes all the information we need.&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="Netron" href="/Content/Unoonnx/Netron - Full.png"&gt;&lt;img src="/Content/Unoonnx/Netron - Full.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Neutron"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;As can be seen, Netron shows us the two inputs to the model: &lt;code&gt;input_ids&lt;/code&gt; and &lt;code&gt;attention_mask&lt;/code&gt;, both of which being two dimensional arrays of &lt;code&gt;Int64&lt;/code&gt; values. It also shows us the output from the model: &lt;code&gt;output_0&lt;/code&gt;, a three dimensional array of &lt;code&gt;float&lt;/code&gt;.&lt;/p&gt;
&lt;h3 id="model-input"&gt;Model Input&lt;/h3&gt;
&lt;p&gt;While using this model for inference, the &lt;code&gt;attention_mask&lt;/code&gt; input is simply filled with 1s (each token has equal attention) so we will not discuss this input any further. Equally we will not be using multiple batches in this project so the &lt;code&gt;batch&lt;/code&gt; dimension can be ignored leaving us with a single, &lt;code&gt;sequence&lt;/code&gt; dimension of values to fill for &lt;code&gt;input_ids&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;In this model, the size of the &lt;code&gt;sequence&lt;/code&gt; dimension is not specified illustrating that this model can accept dynamically sized input. As such, should we wanted to perform NLP on the sentence &amp;quot;Sarah lives in London and works for Acme Corporation&amp;quot;, we might expect to provide something like this to the &lt;code&gt;input_ids&lt;/code&gt; input:&lt;/p&gt;
&lt;table class="table"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style="text-align: right;"&gt;Sequence&lt;/th&gt;
&lt;th&gt;Word&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;0&lt;/td&gt;
&lt;td&gt;Sarah&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;1&lt;/td&gt;
&lt;td&gt;lives&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;2&lt;/td&gt;
&lt;td&gt;in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;3&lt;/td&gt;
&lt;td&gt;London&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;4&lt;/td&gt;
&lt;td&gt;and&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;5&lt;/td&gt;
&lt;td&gt;works&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;6&lt;/td&gt;
&lt;td&gt;for&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;7&lt;/td&gt;
&lt;td&gt;Acme&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;8&lt;/td&gt;
&lt;td&gt;Corporation.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;But, as can be seen above, the model accepts integers, not strings, so we must first 'tokenize' the input using a vocabulary specific to this model. This is done by downloading the vocabulary for the model from Hugging Face (available &lt;a href="https://huggingface.co/elastic/distilbert-base-cased-finetuned-conll03-english/blob/main/vocab.txt"&gt;here&lt;/a&gt;) then using a specific tokenizer to convert the input text into a series of tokens in a format the model expects; for BERT based models, a &lt;a href="https://machinelearnit.com/2018/08/19/wordpiece-tokenisation/"&gt;&amp;quot;WordPiece Tokenizer&amp;quot;&lt;/a&gt; is used.&lt;/p&gt;
&lt;p&gt;Fortunately for us, we're able to use the &amp;quot;WordPieceTokenizer&amp;quot; provided in Gjeran's &lt;a href="https://github.com/GerjanVlot/BERT-ML.NET/blob/master/Microsoft.ML.Models.BERT/Tokenizers/WordPieceTokenizer.cs"&gt;BERT-ML.NET repository&lt;/a&gt;. Running the above input through this tokenizer would give use the following &lt;code&gt;input_ids&lt;/code&gt; value:&lt;/p&gt;
&lt;table class="table"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style="text-align: right;"&gt;Sequence&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Token Id&lt;/th&gt;
&lt;th&gt;Token&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;0&lt;/td&gt;
&lt;td style="text-align: right;"&gt;101&lt;/td&gt;
&lt;td&gt;[CLS]&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;1&lt;/td&gt;
&lt;td style="text-align: right;"&gt;21718&lt;/td&gt;
&lt;td&gt;sa&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;2&lt;/td&gt;
&lt;td style="text-align: right;"&gt;10659&lt;/td&gt;
&lt;td&gt;##rah&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;3&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2491&lt;/td&gt;
&lt;td&gt;lives&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;4&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1107&lt;/td&gt;
&lt;td&gt;in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;5&lt;/td&gt;
&lt;td style="text-align: right;"&gt;25338&lt;/td&gt;
&lt;td&gt;lo&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;6&lt;/td&gt;
&lt;td style="text-align: right;"&gt;17996&lt;/td&gt;
&lt;td&gt;##ndon&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;7&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1105&lt;/td&gt;
&lt;td&gt;and&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;8&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1759&lt;/td&gt;
&lt;td&gt;works&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;9&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1111&lt;/td&gt;
&lt;td&gt;for&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;10&lt;/td&gt;
&lt;td style="text-align: right;"&gt;170&lt;/td&gt;
&lt;td&gt;a&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;11&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1665&lt;/td&gt;
&lt;td&gt;##c&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;12&lt;/td&gt;
&lt;td style="text-align: right;"&gt;3263&lt;/td&gt;
&lt;td&gt;##me&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;13&lt;/td&gt;
&lt;td style="text-align: right;"&gt;9715&lt;/td&gt;
&lt;td&gt;corporation&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;14&lt;/td&gt;
&lt;td style="text-align: right;"&gt;119&lt;/td&gt;
&lt;td&gt;.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: right;"&gt;15&lt;/td&gt;
&lt;td style="text-align: right;"&gt;102&lt;/td&gt;
&lt;td&gt;[SEP]&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;And it's these 'Token Ids' that are the input to our model.&lt;/p&gt;
&lt;h3 id="model-output"&gt;Model Output&lt;/h3&gt;
&lt;p&gt;As we can see, the &lt;code&gt;output_0&lt;/code&gt; layer consists of the same &lt;code&gt;batch&lt;/code&gt; and &lt;code&gt;sequence&lt;/code&gt; dimensions but adds an additional dimension with 9 elements. This additional dimension contains the probability of the token at &lt;code&gt;[batch,sequence]&lt;/code&gt; belonging to a specific classification. The labels for each classifications are provided by the model's &lt;a href="https://huggingface.co/elastic/distilbert-base-cased-finetuned-conll03-english/blob/main/config.json"&gt;'config.json' file on Hugging Face&lt;/a&gt; as shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-json"&gt;{
  ...

  &amp;quot;id2label&amp;quot;: {
    &amp;quot;0&amp;quot;: &amp;quot;O&amp;quot;,
    &amp;quot;1&amp;quot;: &amp;quot;B-PER&amp;quot;,
    &amp;quot;2&amp;quot;: &amp;quot;I-PER&amp;quot;,
    &amp;quot;3&amp;quot;: &amp;quot;B-ORG&amp;quot;,
    &amp;quot;4&amp;quot;: &amp;quot;I-ORG&amp;quot;,
    &amp;quot;5&amp;quot;: &amp;quot;B-LOC&amp;quot;,
    &amp;quot;6&amp;quot;: &amp;quot;I-LOC&amp;quot;,
    &amp;quot;7&amp;quot;: &amp;quot;B-MISC&amp;quot;,
    &amp;quot;8&amp;quot;: &amp;quot;I-MISC&amp;quot;
  },
  ...
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;As can be seen, this model uses &lt;a href="https://en.wikipedia.org/wiki/Inside%E2%80%93outside%E2%80%93beginning_(tagging)"&gt;&lt;code&gt;Inside-outside-beginning&lt;/code&gt; tagging&lt;/a&gt; to delineate the beginning and inside of a specific classification from other classifications but, for the most part we can just treat this as 5 classifications:&lt;/p&gt;
&lt;ol start="0"&gt;
&lt;li&gt;Other&lt;/li&gt;
&lt;li&gt;Person&lt;/li&gt;
&lt;li&gt;Organisation&lt;/li&gt;
&lt;li&gt;Location&lt;/li&gt;
&lt;li&gt;Misc&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="bertonnx"&gt;BertONNX&lt;/h2&gt;
&lt;p&gt;Armed with the model and an understanding of how to provide input/interpret output, I spiked out a quick .NET Core test project. Looking to simplify Gjeran's implementation even further I ended up with end-to-end, command line based inference engine in just 7 classes (including Gjeran's WordPieceTokenizer along with a Hugging Face configuration deserializer).&lt;/p&gt;
&lt;p&gt;Should you wish to take a look, the source for this spike can be found in my &lt;a href="https://github.com/ibebbs/BertOnnx"&gt;BertOnnx repository on Github&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;By far the biggest headache was working out how to shape the input (&lt;code&gt;Feature&lt;/code&gt;) and output (&lt;code&gt;Result&lt;/code&gt;) types to match the expected model shapes. ML.NET uses &lt;code&gt;[ColumnName([name])]&lt;/code&gt; and &lt;code&gt;[VectorType([x,y])]&lt;/code&gt; property attributes to bind properties to the model but, given the model was capable of processing dynamically sized input, I wasn't sure what values to use for the &lt;code&gt;VectorType&lt;/code&gt; attribute.&lt;/p&gt;
&lt;p&gt;Initially I tried omitting shape information from the attribute (&lt;code&gt;[VectorType]&lt;/code&gt;) whereupon the app unceremoniously crashed with the error &amp;quot;Variable length input columns not supported&amp;quot;. A little searching revealed that this error meant exactly what it said and we couldn't use dynamically sized input with ML.NET!&lt;/p&gt;
&lt;p&gt;So, instead I elected to use try a different approach and pad all input to a specific size (256 elements). This gave me &lt;code&gt;Feature&lt;/code&gt; and &lt;code&gt;Result&lt;/code&gt; types that looked like this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;public class Feature
{
    [VectorType(1, 256)]
    [ColumnName(&amp;quot;input_ids&amp;quot;)]
    public long[] Tokens { get; set; }

    [VectorType(1, 256)]
    [ColumnName(&amp;quot;attention_mask&amp;quot;)]
    public long[] Attention { get; set; }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;public class Result
{
    [VectorType(1,256,9)]
    [ColumnName(&amp;quot;output_0&amp;quot;)]
    public float[] Output { get; set; }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;After this it was fairly plain sailing and in short order I had this:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="BertONNX - Full" href="/Content/Unoonnx/BertONNX - Full.gif"&gt;&lt;img src="/Content/Unoonnx/BertONNX - Full.gif" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="BertONNX"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;As you can see, the DistilBERT model correct identifies 'Sarah' as a 'B-PER' (person), 'London' as a 'B-LOC' (location) and 'Acme' as a 'B-ORG' (organisation) in just 202ms. Perfect!&lt;/p&gt;
&lt;h2 id="quantization"&gt;Quantization&lt;/h2&gt;
&lt;p&gt;While having a custom built inference engine was pretty cool, I was a little concerned about memory consumption if I wanted to use the model on edge devices. Despite the DistilBERT model being significantly smaller than full BERT, memory consumption during inference hit around 1Gb. This would almost certainly be a stretch for many of the devices I'd like to run this model on.&lt;/p&gt;
&lt;p&gt;Fortunately, ONNX has a little trick up it's sleeve called &lt;a href="https://www.onnxruntime.ai/docs/how-to/quantization.html"&gt;'Quantization'&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Quoting &lt;a href="https://medium.com/microsoftazure/faster-and-smaller-quantized-nlp-with-hugging-face-and-onnx-runtime-ec5525473bb7"&gt;this article&lt;/a&gt; on the matter:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Quantization approximates floating-point numbers with lower bit width numbers, dramatically reducing memory footprint and accelerating performance. Quantization can introduce accuracy loss since fewer bits limit the precision and range of values. However, researchers have extensively demonstrated that weights and activations can be represented using 8-bit integers (INT8) without incurring significant loss in accuracy.&lt;/p&gt;
&lt;p&gt;Compared to FP32, INT8 representation reduces data storage and bandwidth by 4x, which also reduces energy consumed. In terms of inference performance, integer computation is more efficient than floating-point math.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Incredibly, quantizing a model using Hugging Face's ONNX export is as simple as specifying a &lt;code&gt;--quantize&lt;/code&gt; flag. This meant generating a quantized version of the model took no more than effort than just running the following command:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;docker run --rm -v ${PWD}/Output:/Output ibebbs/huggingfacetoonnx:latest --framework pt --opset 12 --pipeline ner --model elastic/distilbert-base-cased-finetuned-conll03-english --quantize /Output/quantized-distilbert-base-cased-finetuned-conll03-english/model.onnx
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The quantized version of the model was just 64Mb (75% smaller) and, due to it's input and output layers remaining unchanged, it was a drop in replacement for the unquantized model. Running with the quantized version resulted in:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="BertONNX - Quantized" href="/Content/Unoonnx/BertONNX - Quantized.gif"&gt;&lt;img src="/Content/Unoonnx/BertONNX - Quantized.gif" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="BertONNX"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;As you can see, the model loaded significantly faster and inference speed also got a boost. Best of all, memory consumption during inference was reduced to just 265Mb, definitely within the realms of possibility for an edge device.&lt;/p&gt;
&lt;p&gt;Buoyed by this success, I pushed on to...&lt;/p&gt;
&lt;h2 id="unoonnx"&gt;UnoOnnx&lt;/h2&gt;
&lt;p&gt;As per the initial driver for this exploration, I wanted an app on an edge device that would allow me to perform interactive inference. Knowing that &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; could easily create apps that run across a variety of devices, I decided to whip up an app to do just this.&lt;/p&gt;
&lt;p&gt;And so was born UnoOnnx ('Oo-noo-nx'?):&lt;/p&gt;
&lt;video class="img-responsive" style="margin: auto; width:66%; margin-top: 6px; margin-bottom: 6px;" controls&gt;
  &lt;source src="/Content/Unoonnx/UnoOnnx - Windows.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;p&gt;As you can see, the first inference is quite slow as it (lazily) loads the model but subsequent inferences are more than fast enough for an interactive app.&lt;/p&gt;
&lt;p&gt;Then, with a little Uno Platform magic, I ran exactly the same code under Linux ('Oo-noo-nux'?):&lt;/p&gt;
&lt;video class="img-responsive" style="margin: auto; width:66%; margin-top: 6px; margin-bottom: 6px;" controls&gt;
  &lt;source src="/Content/Unoonnx/UnoOnnx - Linux.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;p&gt;(BTW, Loading the model isn't usually that slow - my machine was busy doing something else while I recorded this video).&lt;/p&gt;
&lt;p&gt;Pretty Neat!&lt;/p&gt;
&lt;p&gt;As with BertOnnx, the source for UnoOnnx is &lt;a href="https://github.com/ibebbs/UnoOnnx"&gt;available on GitHub&lt;/a&gt; if you want to take a look.&lt;/p&gt;
&lt;h2 id="moving-forward"&gt;Moving Forward&lt;/h2&gt;
&lt;p&gt;In a subsequent post - and assuming there's sufficient interest - I hope to illustrate how to run these models on mobile devices (i.e. Android &amp;amp; iOS). If this is of interest to you, please drop me a tweet and/or star the repositories above to let me know.&lt;/p&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;As you can see, with the right toolset and a little bit of knowledge, it is fairly straight forward to use state-of-the-art machine learning models from .NET even within the resource constrained environment of an 'edge' device. While some use-cases that depend on sequence length (i.e. sentiment analysis) might be tricky to implement effectively in ML.NET, many other uses (text generation/classification, machine comprehension, translation, etc) should be pretty much pattern part.&lt;/p&gt;
&lt;p&gt;However, working through the above has left me extremely concerned about Microsoft's strategy towards desktop (i.e. non-web) development. It seems to me that many of Microsoft's frameworks and SDKs for .NET desktop development are suffering from a distinct lack of resourcing/focus meaning development is slow and the frameworks are getting left behind by other languages/platforms. For example, here is the commit chart of ML.NET comparer to Hugging Face's native API:&lt;/p&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;a data-fancybox="CommitComparison" href="/Content/Unoonnx/ML Commits.png"&gt;&lt;img src="/Content/Unoonnx/ML Commits.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="ML.NET"/&gt;&lt;/a&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;a data-fancybox="CommitComparison" href="/Content/Unoonnx/Huggingface Commits.png"&gt;&lt;img src="/Content/Unoonnx/Huggingface Commits.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="HuggingFace"/&gt;&lt;/a&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;I think you'll agree, one of these projects looks significantly healthier than the other.&lt;/p&gt;
&lt;p&gt;Furthermore, Microsoft's strategy/execution around UWP/WinUI/Project Reunion is an &lt;strong&gt;utter shambles&lt;/strong&gt;. While I understand WinUI 3.0 is very new and Project Reunion still in preview, I honestly couldn't believe how poor the development experience was with these technologies.&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;&amp;#64;Microsoft, were it not for Uno Platform providing at least a modicum of continuity through the disastrous landscape that is Windows UI development, I - and I believe many others - would have jumped ship to other UI platforms a long time ago.&lt;/strong&gt;&lt;/em&gt;
&lt;em&gt;&lt;strong&gt;Please step up your game here. Many of us who have stuck with Windows UI technologies despite its fragmented and frustrating history really are getting to the end of our tether.&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally&lt;/h2&gt;
&lt;p&gt;If you're interested in deploying state-of-the-art machine learning models within .NET or using the Uno Platform to deliver cross-platform apps, then please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. As a freelance software developer and .NET consultant I'm always interested in hearing from potential new clients or ideas for new collaborations.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Using GMail To Send  Email From A Custom Domain</title>
			<link>http://ian.bebbs.co.uk/posts/UsingGMailForCustomDomainEmail</link>
			<description>&lt;p&gt;Do you use a domain registrar that provides email forwarding facilities? Then read this post to see how to set up Gmail to ensure the correct "From" address when replying to emails sent to your domains.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UsingGMailForCustomDomainEmail</guid>
			<pubDate>Mon, 04 Jan 2021 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;Do you use a domain registrar that provides email forwarding facilities? Then read this post to see how to set up Gmail to ensure the correct &amp;quot;From&amp;quot; address when replying to emails sent to your domains.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;I am currently working with a couple of co-founders on an early stage start-up about which I hope to share more information shortly. Part of the prep work for this start-up has been registering a domain name and establishing communications channels.&lt;/p&gt;
&lt;p&gt;To do this, I use a domain registrar that provides free email forwarding facilities. This is great as it allows you to receive email sent to '[person]&amp;#64;[yourdomain.com]' as part of your regular email account. However, if you subsequently reply to email you received this way, your reply will be &amp;quot;From&amp;quot; your regular email account, not '[person]&amp;#64;[yourdomain.com]'.&lt;/p&gt;
&lt;p&gt;In this post I detail how to establish a completely free façade for email communication via your domain using a personal GMail account to receive and reply to email using a custom domain email addresses.&lt;/p&gt;
&lt;h2 id="prerequisites"&gt;Prerequisites&lt;/h2&gt;
&lt;p&gt;Prior to following the steps below, you should ensure that you've enabled Two-Factor Authentication (2FA) on your GMail account. While it is possible to follow these steps without 2FA, this is not recommended as 2FA is basic practice for good security.&lt;/p&gt;
&lt;p&gt;You should also ensure you're able to receive email forwarded by your domain registrar in your GMail account. As each domain registrar will provide different mechanisms for setting up and maintaining email forwarding rules, it will not be covered as part of this post. So, before following the steps below, you should ensure you're able to send an email to '[person]&amp;#64;[yourdomain.com]' and receive it in your GMail account.&lt;/p&gt;
&lt;h2 id="app-password"&gt;App Password&lt;/h2&gt;
&lt;p&gt;Before being able to set up &amp;quot;Send mail as&amp;quot; functionality, you'll need an 'App Password'. An 'App Password' allows software/authentication flows that aren't compatible with 2FA to successfully authenticate with Google Services and is essentially just a 'special' password that is a) highly complex - to prevent brute-force attacks, and b) can be revoked should it ever be compromised.&lt;/p&gt;
&lt;p&gt;To set up an 'App Password', from your GMail inbox click your account icon in the top right hand corner, then click &amp;quot;Manage your Google Account&amp;quot; as shown below:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/ManageGMailAccount.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/ManageGMailAccount.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Manage GMail Account"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This will open a new tab for managing your Google Account. Select the &amp;quot;Security&amp;quot; category from the menu on the left (or across the top on smaller devices) and scroll down to the &amp;quot;Signing in to Google&amp;quot; section. Here, you should see that 2-Step verification has been turned on (if it isn't, turn it on now before continuing) and an &amp;quot;App passwords&amp;quot; option as shown below:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/SigningInToGoogle.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/SigningInToGoogle.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Signing In To Google"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Click the &amp;quot;App passwords&amp;quot; option to create a new App password. In the &amp;quot;Select app&amp;quot; drop-down select &amp;quot;Other (Custom name)&amp;quot; and enter a name for the app password (I tend to use the domain name). Once this is entered click the Generate button as shown below:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/AddAppPassword.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/AddAppPassword.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Add App Password"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Clicking &amp;quot;Generate&amp;quot; will display a dialog containing your new app password as shown below. Copy this password and keep it safe (I would recommend adding it to your password manager).&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/NewAppPassword.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/NewAppPassword.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="New App Password"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;You can now close the &amp;quot;Google Account&amp;quot; tab and return to Gmail.&lt;/p&gt;
&lt;h2 id="send-mail-as"&gt;Send Mail As&lt;/h2&gt;
&lt;p&gt;Back in GMail, click the 'cog' icon in the top right to display &amp;quot;Quick Settings&amp;quot; and, from there, click the &amp;quot;See all settings&amp;quot; button as shown below:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/SeeAllGmailSettings.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/SeeAllGmailSettings.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="See All Gmail Settings"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;This will take you to the Settings page where you should see an &amp;quot;Accounts and Import&amp;quot; category. Click this category to reveal the &amp;quot;Send mail as&amp;quot; options as shown below:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/SendMailAs.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/SendMailAs.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Send Mail As"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Click the &amp;quot;Add another email address&amp;quot; link which will display a new window allowing you to &amp;quot;Enter information about your other email address&amp;quot;. In the &amp;quot;Email Address&amp;quot; text box, enter the email address of the domain account set up to forward email to your Gmail account as shown below:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/EnterEMailAddress.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/EnterEMailAddress.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Enter EMail Address"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Click &amp;quot;Next Step &amp;gt;&amp;gt;&amp;quot; to reveal the &amp;quot;Send emails through your SMTP server&amp;quot; page. This is where we get clever and, instead of entering the details of our own SMTP server (which used to work until Google changed requirements a while back) we're instead going to send through GMails own servers. In the 'SMTP Server' text box enter 'smtp.gmail.com' then in the 'Username' text box enter your GMail username (i.e. me&amp;#64;gmail.com). Finally, in the 'Password' box, enter the App Password we generated in the previous section. Once everything is entered the dialog should look similar to this:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/SMTPServerConfiguration.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/SMTPServerConfiguration.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="SMTP Server Configuration"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Click &amp;quot;Add Account &amp;gt;&amp;gt;&amp;quot; button which, if everything was entered correctly, should take you to the &amp;quot;Confirm verification and add your email address&amp;quot; screen. Here you are prompted for a confirmation code as shown below:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="gmail" href="/Content/UsingGMailForCustomDomainEmail/VerifyEmailAddress.png"&gt;&lt;img src="/Content/UsingGMailForCustomDomainEmail/VerifyEmailAddress.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Verify Email Address"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Leaving the dialog window open, return to your GMail inbox where you should have received an email from &amp;quot;Gmail Team&amp;quot; titled &amp;quot;Gmail Confirmation - Send Mail as [person]&amp;#64;[yourdomain.com]&amp;quot;. In this email you should see a confirmation code which you can copy and paste into the &amp;quot;Confirm verification and add your email address&amp;quot; dialog window.&lt;/p&gt;
&lt;p&gt;If you don't receive this email then you should double check your email forwarding rules to ensure the account your entered in the dialog above is configured to forward to your Gmail account. Also bear in mind that some domain registrars can take quite a while to forward email for new accounts (I've seen up to 24 hours previously) so, if you've confirmed that your settings are correct, you may simply need to be a little patient here.&lt;/p&gt;
&lt;p&gt;Anyway, assuming your received the confirmation code email and pasted it into the &amp;quot;Enter and verify the confirmation code&amp;quot; text box, you should be able to click Verify, at which point the dialog will disappear. Congratulations, you're now able to send email using your domain email address!&lt;/p&gt;
&lt;h2 id="sending-email"&gt;Sending Email&lt;/h2&gt;
&lt;p&gt;Now, when composing a new email, you're able to click the &amp;quot;From&amp;quot; name and select the email address you want the recipient to see. Furthermore, when you receive email sent to the domain email address, GMail will automatically use this address as the &amp;quot;From&amp;quot; account when replying.&lt;/p&gt;
&lt;p&gt;Enjoy!&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Cross-Platform App Authentication with Azure AD B2C And The Uno Platform</title>
			<link>http://ian.bebbs.co.uk/posts/UnoB2C</link>
			<description>&lt;p&gt;In this post I comprehensively show how apps written using the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; can leverage &lt;a href="https://azure.microsoft.com/en-us/services/active-directory/external-identities/b2c/"&gt;Azure AD B2C&lt;/a&gt; &amp;amp; &lt;a href="https://github.com/AzureAD/microsoft-authentication-library-for-dotnet"&gt;MSAL.Net&lt;/a&gt; to provide Identity and Access Management services across platforms as diverse as Windows, Android, iOS and the web. As you will see, this combination of technologies provides extremely cheap, simple and flexible identity management functionality that runs from a single code base.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UnoB2C</guid>
			<pubDate>Wed, 11 Nov 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;In this post I comprehensively show how apps written using the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; can leverage &lt;a href="https://azure.microsoft.com/en-us/services/active-directory/external-identities/b2c/"&gt;Azure AD B2C&lt;/a&gt; &amp;amp; &lt;a href="https://github.com/AzureAD/microsoft-authentication-library-for-dotnet"&gt;MSAL.Net&lt;/a&gt; to provide Identity and Access Management services across platforms as diverse as Windows, Android, iOS and the web. As you will see, this combination of technologies provides extremely cheap, simple and flexible identity management functionality that runs from a single code base.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;Seamless identity management in client-facing apps is critically important to customer engagement yet extremely difficult to implement correctly. In recent years, numerous IDentity as a Service (IDaaS) providers have emerged to help developers address this challenge yet somehow secure authentication and authorization remain one of the most arduous parts of app development.&lt;/p&gt;
&lt;p&gt;In this article I present a suite of technologies that can be leveraged to provide identity management in a simple and affordable yet flexible and scalable manner. I show how recent changes to these technologies allow you to leverage the most recent and secure authentication flows (i.e. &lt;a href="https://romikoderbynew.com/2019/09/20/oauth-2-0-authorization-code-with-pkce-vs-implicit-grant/#:%7E:text=Does%20your%20Authorization%20Server%20supprot%20CORS%3F%20Can,your%20clients%20use%20modern%20browsers%20that%20support%20CORS%3F"&gt;&amp;quot;Authorization Code with PKCE&amp;quot; instead of  &amp;quot;Implicit Grant&amp;quot;&lt;/a&gt;) and I illustrate how this technology stack can be used to implement apps that run across all major platforms - including the web - without the need for the developer to maintain onerous platform-specific code.&lt;/p&gt;
&lt;p&gt;Finally, much of this post is composed of information from - and links to - other articles from around the web. I have aggregated and annotated these posts below such that the reader is provided a comprehensive guide to using these technologies within a cross-platform Uno application. While I specifically discuss only the major platforms (UWP, Android, iOS and Web) the approaches used below should be pertinent to any platform supported by Uno.&lt;/p&gt;
&lt;h2 id="technologies"&gt;Technologies&lt;/h2&gt;
&lt;p&gt;The suite of technologies used in this article is comprised of: &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt;, &lt;a href="https://azure.microsoft.com/en-us/services/active-directory/external-identities/b2c/"&gt;Azure AD B2C&lt;/a&gt; and &lt;a href="https://github.com/AzureAD/microsoft-authentication-library-for-dotnet"&gt;MSAL.Net&lt;/a&gt;. I provide a brief introduction to these technologies below before proceeding to show how they can be combined to provide a holistic cloud-based user-management solution.&lt;/p&gt;
&lt;h3 id="uno-platform"&gt;Uno Platform&lt;/h3&gt;
&lt;p&gt;Regular readers of my blog will be well aware of the Uno Platform by now but, for new readers, the Uno Platform allows UWP apps to run &lt;em&gt;natively&lt;/em&gt; on every major platform including desktop (Windows, Mac, Linux), mobile (Android &amp;amp; iOS) and the web (in pretty much any browser). It achieves this by implementing WinRT APIs on top of Xamarin (for desktop/mobile) and WASM (for the web) which allows the developer to write a single code-base which can be transparently shared across each of these platforms.&lt;/p&gt;
&lt;p&gt;I have &lt;a href="https://ian.bebbs.co.uk/tags/uno-platform"&gt;blogged about Uno Platform extensively over the past year&lt;/a&gt; as, in my opinion, it represents the best platform for cross-platform UI develop and empowers developers to utilise a &lt;a href="https://ian.bebbs.co.uk/posts/UnoValue"&gt;&amp;quot;one-stack&amp;quot; solution architecture&lt;/a&gt;. My consultancy - &lt;a href="https://www.cogenity.com/"&gt;Cogenity&lt;/a&gt; - specialise in providing support for, and bespoke development of, cross-platform applications written using the Uno Platform. Should you have any questions regarding this article or the Uno Platform in general, please feel free to &lt;a href="https://www.cogenity.com/#three"&gt;drop us a line&lt;/a&gt; - we love to hear about applications being built with Uno and help our clients deliver on the promise of this amazing technology.&lt;/p&gt;
&lt;h3 id="azure-ad-b2c"&gt;Azure AD B2C&lt;/h3&gt;
&lt;p&gt;Azure Active Directory B2C (AAD B2C) is Microsoft's Azure based Identity and Access Management (IAM) offering for business-to-consumer (B2C) applications. Unlike regular &lt;a href="https://azure.microsoft.com/en-us/services/active-directory/"&gt;Azure Active Directory&lt;/a&gt; which is very much aimed at B2B and LoB applications, AAD B2C has been designed from the ground up for providing seamless IAM for customer-facing apps. As such it allows the developer to easily leverage advanced scenarios such as social login and multi-factor authentication while simultaneous providing the means to customise &amp;quot;every pixel of the registration and sign-in experience&amp;quot;.&lt;/p&gt;
&lt;p&gt;Amazingly, this service is offered at an incredibly low price-point. The first 50,000 monthly actives users are free and subsequent users cost just £0.002423p/m! This is easily enough to bootstrap an application and gain market traction prior to being faced with a significant bill for IDaaS and, in any event, these costs will almost certainly be less than the cost of writing and hosting a bespoke solution.&lt;/p&gt;
&lt;h3 id="msal.net"&gt;MSAL.Net&lt;/h3&gt;
&lt;p&gt;Microsoft Authentication Library for .NET (MSAL.NET) is Microsoft's successor to Active Directory Authentication Library for .NET (ADAL.NET). It is part of the &lt;a href="https://docs.microsoft.com/en-gb/azure/active-directory/develop/v2-overview"&gt;Microsoft Identify Platform for Developers&lt;/a&gt; and represents current best practise for Azure AD authentication from .NET applications.&lt;/p&gt;
&lt;p&gt;As we will see below, authentication with MSAL.NET is really very simple and works beautifully in cross-platform scenarios on the Uno Platform.&lt;/p&gt;
&lt;h2 id="getting-started-with-azure-ad-b2c"&gt;Getting started with Azure AD B2C&lt;/h2&gt;
&lt;p&gt;So, with introductions out the way, let get started with Azure AD B2C by creating a new tenant. This is by far the most complicated part of the process and covering it in detail could easily balloon this post to an unmanageable size. Fortunately &lt;a href="https://twitter.com/CodeMillMatt"&gt;Matthew Soucoup&lt;/a&gt; has covered all the steps for creating a Azure AD B2C tenant on his &lt;a href="https://codemilltech.com/"&gt;blog&lt;/a&gt;. In the steps below I will be pointing you to Matt's blog posts which I very much encourage you to read and follow before continuing.&lt;/p&gt;
&lt;h3 id="step-1-understanding-terminology"&gt;Step 1 - Understanding terminology&lt;/h3&gt;
&lt;p&gt;One of the most confusing parts of authentication is understanding the various terminology. In his &lt;a href="https://codemilltech.com/xamarin-authentication-with-azure-active-directory-b2c/"&gt;first post about Azure AD B2C&lt;/a&gt; Matt digs into the various terminology you'll need to understand in order to correctly setup and use Azure AD B2C. If you're at all unsure about terms such as Tenant, Providers or Policies, I'd very much recommend a read of this post before continuing.&lt;/p&gt;
&lt;h3 id="step-2-creating-a-tenant"&gt;Step 2 - Creating A Tenant&lt;/h3&gt;
&lt;p&gt;Now we understand the terminology used, we can go ahead and create an Azure AD B2C Tenant. Again, Matt covers this fantastically well in a &lt;a href="https://codemilltech.com/creating-an-ad-b2c-tenant/"&gt;blog post&lt;/a&gt;. He also covers the process in a &lt;a href="https://www.youtube.com/watch?v=zfyHwD9sJJ4&amp;amp;feature=youtu.be"&gt;YouTube&lt;/a&gt; video which helps convey some of the &amp;quot;tricky&amp;quot; behaviour of Azure Directories. Read or view either of these links and follow the steps therein. Once complete you should have a new &amp;quot;[tenant].onmicrosoft.com&amp;quot; directory with an Azure AD B2C service as shown here:&lt;/p&gt;
&lt;img src="/Content/UnoB2C/New B2C Tenant.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="New B2C Tenant"/&gt;
&lt;h3 id="step-3-adding-a-policy"&gt;Step 3 - Adding A Policy&lt;/h3&gt;
&lt;p&gt;While the Azure AD B2C Tenant provides the infrastructure for cloud-based IDaaS, policies dictate who can use this service and how. In order for users of your app to be able to register and/or log in, you need to create a &amp;quot;User flow&amp;quot; policy in your tenant. Matt covers this process in the &amp;quot;Creating A Policy&amp;quot; section of this &lt;a href="https://codemilltech.com/adding-authentication-and-authorization-with-azure-ad-b2c/#creatingapolicy"&gt;blog post&lt;/a&gt; however the post is slightly out of date as the Azure Portal has changed significantly since he authored it. I would suggest reading Matt's blog post so you understand the process then following the screen shots shown below (tap to enlarge):&lt;/p&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a data-fancybox="addingapolicy" href="/Content/UnoB2C/New User Flow.png"&gt;&lt;img src="/Content/UnoB2C/New User Flow.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="New User Flow"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a data-fancybox="addingapolicy" href="/Content/UnoB2C/Sign Up and sign in flow.png"&gt;&lt;img src="/Content/UnoB2C/Sign Up and sign in flow.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Sign Up and sign in flow"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;1. Create a new user flow&lt;/h5&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;2. Select recommended sign up and sign in flow&lt;/h5&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a data-fancybox="addingapolicy" href="/Content/UnoB2C/New User Flow Name.png"&gt;&lt;img src="/Content/UnoB2C/New User Flow Name.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="New User Flow Name"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a id="newuserflowclaims" data-fancybox="addingapolicy" href="/Content/UnoB2C/New User Flow Claims.png"&gt;&lt;img src="/Content/UnoB2C/New User Flow Claims.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="New User Flow Claims"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;3. Name the user flow&lt;/h5&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;4. Select registration attributes and token claims&lt;/h5&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;Make sure you take note of your sign-up and sign-in flow name as you'll need this later.&lt;/p&gt;
&lt;h3 id="step-4-add-app-registration"&gt;Step 4 - Add App Registration&lt;/h3&gt;
&lt;p&gt;The last step is to add an app registration. This controls how your app is expected to interact with Azure AD B2C and it's credentials for doing so. Again &lt;a href="https://codemilltech.com/adding-authentication-and-authorization-with-azure-ad-b2c/#step2settinguptheazureadb2capplication"&gt;Matt has us covered&lt;/a&gt; but again, his descriptions and screenshots are a little out of date. Furthermore we need to add a couple of &amp;quot;platforms&amp;quot; to the app registration in order to support the variety of operating systems and devices available to Uno applications.&lt;/p&gt;
&lt;p&gt;The screen shots below show how to set up an app registration that leverages Authorization Code Flow with PKCE for UWP/WASM authentication and protocol activation for Android / iOS:&lt;/p&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/App Registrations.png"&gt;&lt;img src="/Content/UnoB2C/App Registrations.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="App Registrations"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/New App Registration.png"&gt;&lt;img src="/Content/UnoB2C/New App Registration.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Add App Registration"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;1. Navigate to app registration&lt;/h5&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;2. Add a new registration&lt;/h5&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/Register an Application.png"&gt;&lt;img src="/Content/UnoB2C/Register an Application.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Register the Application"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/Note Application Id.png"&gt;&lt;img src="/Content/UnoB2C/Note Application Id.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Note Application Id"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;3. Name the application and change Redirect URI&lt;/h5&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;4. Note the application id and click Redirect URIs&lt;/h5&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/Confirm Authorization Code Flow with PKCE.png"&gt;&lt;img src="/Content/UnoB2C/Confirm Authorization Code Flow with PKCE.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Confirm Authorization Code Flow with PKCE"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/Add a platform.png"&gt;&lt;img src="/Content/UnoB2C/Add a platform.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Add a platform"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;5. Confirm Authorization Code Flow with PKCE&lt;/h5&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;6. Click 'Add a platform'&lt;/h5&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/Select Mobile and desktop applications.png"&gt;&lt;img src="/Content/UnoB2C/Select Mobile and desktop applications.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Select Mobile and desktop applications"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/Add msal redirect uri.png"&gt;&lt;img src="/Content/UnoB2C/Add msal redirect uri.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Add msal redirect uri"/&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;7. Select 'Mobile and desktop applications'&lt;/h5&gt;&lt;/td&gt;
&lt;td style="text-align: center"&gt;&lt;h5&gt;8. Add MSAL Redirect URI then click Configure&lt;/h5&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;And there we go. We now have an Azure AD B2C tenant set up that is able to authenticate users using best practices across a variety of platforms. If everything is set up correctly, your tenant should look similar to this:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="addappregistration" href="/Content/UnoB2C/SPA and desktop Redirect URIs.png"&gt;&lt;img src="/Content/UnoB2C/SPA and desktop Redirect URIs.png" class="img-responsive" style="margin: auto; max-width:50%; margin-top: 6px; margin-bottom: 6px;" alt="SPA and desktop Redirect URIs"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 id="create-an-uno-application"&gt;Create an Uno Application&lt;/h2&gt;
&lt;p&gt;We'll now use Visual Studio to create a cross-platform Uno Platform application which is able to authenticate users using the Azure AD B2C tenant we set up above. If you're not sure how to create a new Uno Platform application then follow the steps &lt;a href="https://platform.uno/docs/articles/getting-started-tutorial-1.html"&gt;here&lt;/a&gt;. I'm going to name my project &lt;code&gt;UnoAuth&lt;/code&gt;.&lt;/p&gt;
&lt;h3 id="install-dependencies"&gt;Install Dependencies&lt;/h3&gt;
&lt;p&gt;We're going to need to install the following packages to all projects in the solution:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="https://www.nuget.org/packages/Microsoft.Identity.Client"&gt;Microsoft.Identity.Client&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.nuget.org/packages/Uno.UI.MSAL"&gt;Uno.UI.MSAL&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.nuget.org/packages/System.IdentityModel.Tokens.Jwt"&gt;System.IdentityModel.Tokens.Jwt&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The easiest way to do this is the &amp;quot;Manage Packages for Solution&amp;quot; (via right-clicking on the solution in Solution Explorer) as shown here:&lt;/p&gt;
&lt;img src="/Content/UnoB2C/Manage Packages for Solution.png" class="img-responsive" style="margin: auto; max-width:66%; margin-top: 6px; margin-bottom: 6px;" alt="Manage Packages for Solution"/&gt;
&lt;h3 id="authentication-configuration"&gt;Authentication Configuration&lt;/h3&gt;
&lt;p&gt;With the prerequisite dependencies installed we're going to provide the authentication settings required by Azure AD B2C. As some of these settings should be considered sensitive (i.e. the ClientId) we're going to use a partial class (&lt;code&gt;Authentication&lt;/code&gt;) split between two files (&lt;code&gt;Authentication.cs&lt;/code&gt; and &lt;code&gt;Authentication.Secrets.cs&lt;/code&gt;) so that we can put access logic in one and sensitive values in the other. We can then ensure the second file doesn't get committed to source control (via &lt;code&gt;.gitignore&lt;/code&gt;).&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;Authentication.cs&lt;/code&gt; should look like this:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using System.Collections.Generic;

namespace UnoAuth
{
    public static partial class Authentication
    {
        // ClientIdSecret should be provided in `Authentication.Secrets.cs` as part of the 
        // partial class
        public static string Tenant =&amp;gt; TenantSecret;

        // ClientIdSecret should be provided in `Authentication.Secrets.cs` as part of the 
        // partial class
        public static string ClientId =&amp;gt; ClientIdSecret;

        // PolicySecret should be provided in `Authentication.Secrets.cs` as part of the 
        // partial class
        public static string Policy =&amp;gt; PolicySecret;

        // RedirectUriSecret should be provided in `Authentication.Secrets.cs` as part of the 
        // partial class
#if __ANDROID__ || __IOS__
        public static string RedirectUri =&amp;gt; RedirectUriSecretDesktop;
#else
        public static string RedirectUri =&amp;gt; RedirectUriSecret;
#endif

#if __IOS__
        // BundleNameSecret should be provided in `Authentication.Secrets.cs` as part of the 
        // partial class
        public static string BundleName =&amp;gt; BundleNameSecret;
#endif

        // ScopesSecret should be provided in `Authentication.Secrets.cs` as part of the 
        // partial class
        public static IEnumerable&amp;lt;string&amp;gt; Scopes =&amp;gt; ScopesSecret;

        public static string AuthorityBase =&amp;gt; $&amp;quot;https://{Tenant}.b2clogin.com/tfp/{Tenant}.onmicrosoft.com/&amp;quot;;

        public static string Authority =&amp;gt; $&amp;quot;{AuthorityBase}{Policy}&amp;quot;;

        public static string GivenNameClaimType =&amp;gt; &amp;quot;given_name&amp;quot;;
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note the &lt;code&gt;#if ... #else ... #endif&lt;/code&gt; compiler directives. These directives allows us to use &lt;a href="https://platform.uno/docs/articles/platform-specific-csharp.html"&gt;platform specific code&lt;/a&gt; such that the correct redirect URI is used on each platform and platform specific values can be provided only only the platforms that require them.&lt;/p&gt;
&lt;p&gt;Next, &lt;code&gt;Authentication.Secrets.cs&lt;/code&gt; should look like this (but with the appropriate values):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using System.Collections.Generic;

namespace UnoAuth
{
    public static partial class Authentication
    {
        // In this sample, this value will be &amp;quot;bebbsauthspike&amp;quot;
        private static readonly string TenantSecret = &amp;quot;[REPLACE THIS VALUE]&amp;quot;;

        // This is the ClientId value from the app registration. 
        // It will be in the form of &amp;quot;aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee&amp;quot;
        private static readonly string ClientIdSecret = &amp;quot;[REPLACE THIS VALUE]&amp;quot;;

        // In this sample, this value will be &amp;quot;B2C_1_signup-signin&amp;quot;
        private static readonly string PolicySecret = &amp;quot;[REPLACE THIS VALUE]&amp;quot;;

        // In this sample, this value will be &amp;quot;http://localhost:5000&amp;quot;
        private static readonly string RedirectUriSecret = &amp;quot;[REPLACE THIS VALUE]&amp;quot;;

        private static readonly string RedirectUriSecretDesktop = $&amp;quot;msal{ClientIdSecret}://auth&amp;quot;;

        // In this sample, this value will be &amp;quot;com.companyname.UnoAuth&amp;quot;
        private static readonly string BundleNameSecret = &amp;quot;[REPLACE THIS VALUE]&amp;quot;;

        // Note, we're currently only interested in authenticating, not defining any additional scopes which a
        // user may or may not have access to. As such, we only request access to the `openid` scope.
        private static readonly IEnumerable&amp;lt;string&amp;gt; ScopesSecret = new[] { &amp;quot;https://graph.microsoft.com/openid&amp;quot; };
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="create-the-ui"&gt;Create the UI&lt;/h3&gt;
&lt;p&gt;Finally we're going to create the UI. Given our app will have three distinct states - Unauthenticated, Authenticating &amp;amp; Authenticated - we're going to use &lt;a href="https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.VisualState?view=winrt-19041"&gt;visual states&lt;/a&gt; to directly reflect these states in the UI. So, in &lt;code&gt;Main.xaml&lt;/code&gt;, update the Xaml to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xaml"&gt;&amp;lt;Page
    x:Class=&amp;quot;UnoAuth.MainPage&amp;quot;
    xmlns=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&amp;quot;
    xmlns:x=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml&amp;quot;
    xmlns:d=&amp;quot;http://schemas.microsoft.com/expression/blend/2008&amp;quot;
    xmlns:mc=&amp;quot;http://schemas.openxmlformats.org/markup-compatibility/2006&amp;quot;
    mc:Ignorable=&amp;quot;d&amp;quot;&amp;gt;

    &amp;lt;Grid x:Name=&amp;quot;StateGrid&amp;quot; Background=&amp;quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&amp;quot;&amp;gt;
        &amp;lt;VisualStateManager.VisualStateGroups&amp;gt;
            &amp;lt;VisualStateGroup x:Name=&amp;quot;AuthenticationStates&amp;quot;&amp;gt;
                &amp;lt;VisualState x:Name=&amp;quot;Unauthenticated&amp;quot;/&amp;gt;
                &amp;lt;VisualState x:Name=&amp;quot;Authenticating&amp;quot;&amp;gt;
                    &amp;lt;VisualState.Setters&amp;gt;
                        &amp;lt;Setter Target=&amp;quot;AuthenticatingGrid.(UIElement.Visibility)&amp;quot; Value=&amp;quot;Visible&amp;quot;/&amp;gt;
                        &amp;lt;Setter Target=&amp;quot;AuthenticatedGrid.(UIElement.Visibility)&amp;quot; Value=&amp;quot;Collapsed&amp;quot;/&amp;gt;
                        &amp;lt;Setter Target=&amp;quot;UnauthenticatedGrid.(UIElement.Visibility)&amp;quot; Value=&amp;quot;Collapsed&amp;quot;/&amp;gt;
                    &amp;lt;/VisualState.Setters&amp;gt;
                &amp;lt;/VisualState&amp;gt;
                &amp;lt;VisualState x:Name=&amp;quot;Authenticated&amp;quot;&amp;gt;
                    &amp;lt;VisualState.Setters&amp;gt;
                        &amp;lt;Setter Target=&amp;quot;AuthenticatedGrid.(UIElement.Visibility)&amp;quot; Value=&amp;quot;Visible&amp;quot;/&amp;gt;
                        &amp;lt;Setter Target=&amp;quot;AuthenticatingGrid.(UIElement.Visibility)&amp;quot; Value=&amp;quot;Collapsed&amp;quot;/&amp;gt;
                        &amp;lt;Setter Target=&amp;quot;UnauthenticatedGrid.(UIElement.Visibility)&amp;quot; Value=&amp;quot;Collapsed&amp;quot;/&amp;gt;
                    &amp;lt;/VisualState.Setters&amp;gt;
                &amp;lt;/VisualState&amp;gt;
            &amp;lt;/VisualStateGroup&amp;gt;
        &amp;lt;/VisualStateManager.VisualStateGroups&amp;gt;
        &amp;lt;Grid x:Name=&amp;quot;UnauthenticatedGrid&amp;quot; Visibility=&amp;quot;Visible&amp;quot; Background=&amp;quot;#FF1D437C&amp;quot;&amp;gt;
            &amp;lt;StackPanel HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot;&amp;gt;
                &amp;lt;TextBlock Text=&amp;quot;Click 'Sign In' To Authenticate&amp;quot; TextWrapping=&amp;quot;Wrap&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; Style=&amp;quot;{ThemeResource TitleTextBlockStyle}&amp;quot; Margin=&amp;quot;32,32,32,32&amp;quot; Foreground=&amp;quot;White&amp;quot;/&amp;gt;
                &amp;lt;Button x:Name=&amp;quot;SignInButton&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; Padding=&amp;quot;32,16,32,16&amp;quot; Margin=&amp;quot;32,32,32,32&amp;quot; Click=&amp;quot;SignInButton_Click&amp;quot; Background=&amp;quot;#FF412663&amp;quot;&amp;gt;
                    &amp;lt;TextBlock Text=&amp;quot;Sign In&amp;quot; TextWrapping=&amp;quot;Wrap&amp;quot; Style=&amp;quot;{ThemeResource SubtitleTextBlockStyle}&amp;quot; Foreground=&amp;quot;White&amp;quot;/&amp;gt;
                &amp;lt;/Button&amp;gt;
            &amp;lt;/StackPanel&amp;gt;
        &amp;lt;/Grid&amp;gt;
        &amp;lt;Grid x:Name=&amp;quot;AuthenticatingGrid&amp;quot; Visibility=&amp;quot;Collapsed&amp;quot; Background=&amp;quot;#FFC07000&amp;quot;&amp;gt;
            &amp;lt;StackPanel Orientation=&amp;quot;Vertical&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot;&amp;gt;
                &amp;lt;TextBlock HorizontalAlignment=&amp;quot;Center&amp;quot; Text=&amp;quot;Authenticating&amp;quot; Style=&amp;quot;{ThemeResource TitleTextBlockStyle}&amp;quot; Margin=&amp;quot;32&amp;quot; Foreground=&amp;quot;White&amp;quot;/&amp;gt;
                &amp;lt;TextBlock HorizontalAlignment=&amp;quot;Center&amp;quot; Text=&amp;quot;One Sec...&amp;quot; Style=&amp;quot;{ThemeResource SubtitleTextBlockStyle}&amp;quot; Margin=&amp;quot;32&amp;quot; Foreground=&amp;quot;White&amp;quot;/&amp;gt;
            &amp;lt;/StackPanel&amp;gt;
        &amp;lt;/Grid&amp;gt;
        &amp;lt;Grid x:Name=&amp;quot;AuthenticatedGrid&amp;quot; Visibility=&amp;quot;Collapsed&amp;quot; Background=&amp;quot;#FF1F6900&amp;quot;&amp;gt;
            &amp;lt;StackPanel Orientation=&amp;quot;Vertical&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot;&amp;gt;
                &amp;lt;TextBlock HorizontalAlignment=&amp;quot;Center&amp;quot; Style=&amp;quot;{ThemeResource TitleTextBlockStyle}&amp;quot; Margin=&amp;quot;32&amp;quot; Foreground=&amp;quot;White&amp;quot;&amp;gt;
                    &amp;lt;Run Text=&amp;quot;Hi &amp;quot;/&amp;gt;&amp;lt;Run Text=&amp;quot;{x:Bind Path=GivenName, Mode=OneWay}&amp;quot;/&amp;gt;&amp;lt;Run Text=&amp;quot;!&amp;quot;/&amp;gt;
                &amp;lt;/TextBlock&amp;gt;
                &amp;lt;TextBlock HorizontalAlignment=&amp;quot;Center&amp;quot; Text=&amp;quot;How are you?&amp;quot; Style=&amp;quot;{ThemeResource SubtitleTextBlockStyle}&amp;quot; Margin=&amp;quot;32&amp;quot; Foreground=&amp;quot;White&amp;quot;/&amp;gt;
                &amp;lt;Button x:Name=&amp;quot;SignOutButton&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; Padding=&amp;quot;32,16,32,16&amp;quot; Margin=&amp;quot;32,32,32,32&amp;quot; Click=&amp;quot;SignOutButton_Click&amp;quot; Background=&amp;quot;#FF412663&amp;quot;&amp;gt;
                    &amp;lt;TextBlock Text=&amp;quot;Sign Out&amp;quot; TextWrapping=&amp;quot;Wrap&amp;quot; Style=&amp;quot;{ThemeResource SubtitleTextBlockStyle}&amp;quot; Foreground=&amp;quot;White&amp;quot;/&amp;gt;
                &amp;lt;/Button&amp;gt;
            &amp;lt;/StackPanel&amp;gt;
        &amp;lt;/Grid&amp;gt;
    &amp;lt;/Grid&amp;gt;
&amp;lt;/Page&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Here you can see the three visual states named: &lt;code&gt;Unauthenticated&lt;/code&gt;, &lt;code&gt;Authenticating&lt;/code&gt; &amp;amp; &lt;code&gt;Authenticated&lt;/code&gt;. In the &lt;code&gt;Unauthenticated&lt;/code&gt; state the &lt;code&gt;UnauthenticatedGrid&lt;/code&gt; will be visible while both the &lt;code&gt;AuthenticatingGrid&lt;/code&gt; and &lt;code&gt;AuthenticatedGrid&lt;/code&gt; will be collapsed. This pattern is repeated in the other states (&lt;code&gt;Authenticating&lt;/code&gt; only showing &lt;code&gt;AuthenticatingGrid&lt;/code&gt; &amp;amp; &lt;code&gt;Authenticated&lt;/code&gt; only showing &lt;code&gt;AuthenticatedGrid&lt;/code&gt;) such that only elements pertinent to the current state are displayed.&lt;/p&gt;
&lt;p&gt;In the &lt;code&gt;UnauthenticatedGrid&lt;/code&gt; we have a &lt;code&gt;SignInButton&lt;/code&gt; from which we use the Click event handler to invoke the authentication process. While authentication is taking place, the &lt;code&gt;AuthenticatingGrid&lt;/code&gt; will be shown which asks the user to wait. Finally in the &lt;code&gt;AuthenticatedGrid&lt;/code&gt; we have a &lt;code&gt;TextBlock&lt;/code&gt; which will shown the given name of the authenticated user and a &lt;code&gt;SignOutButton&lt;/code&gt; which allows the user to sign-out.&lt;/p&gt;
&lt;h3 id="implement-the-code"&gt;Implement the Code&lt;/h3&gt;
&lt;p&gt;In the &lt;code&gt;MainPage.xaml.cs&lt;/code&gt; code-behind file we implement the &lt;code&gt;SignInButton_Click&lt;/code&gt; method to perform authentication using Azure AD B2C and the &lt;code&gt;SignOutButton_Click&lt;/code&gt; method to remove the cached authentication tokens. Here's the code:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using Microsoft.Identity.Client;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using Uno.UI.MSAL;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace UnoAuth
{
    [TemplateVisualState(GroupName = AuthenticationStatesGroupName, Name = UnauthenticatedStateName)]
    [TemplateVisualState(GroupName = AuthenticationStatesGroupName, Name = AuthenticatingStateName)]
    [TemplateVisualState(GroupName = AuthenticationStatesGroupName, Name = AuthenticatedStateName)]
    public sealed partial class MainPage : Page
    {
        private const string AuthenticationStatesGroupName = &amp;quot;AuthenticationStates&amp;quot;;
        private const string UnauthenticatedStateName = &amp;quot;Unauthenticated&amp;quot;;
        private const string AuthenticatingStateName = &amp;quot;Authenticating&amp;quot;;
        private const string AuthenticatedStateName = &amp;quot;Authenticated&amp;quot;;

        public static readonly DependencyProperty GivenNameProperty = DependencyProperty.Register(&amp;quot;GivenName&amp;quot;, typeof(string), typeof(MainPage), new PropertyMetadata(string.Empty));

        private readonly IPublicClientApplication _authenticationClient;

        public MainPage()
        {
            this.InitializeComponent();

            _authenticationClient = PublicClientApplicationBuilder
                .Create(Authentication.ClientId)
#if __IOS__
                .WithIosKeychainSecurityGroup(Authentication.BundleName)
#endif
                .WithB2CAuthority(Authentication.Authority)
                .WithRedirectUri(Authentication.RedirectUri)
                .WithUnoHelpers()
                .Build();
        }

        private void TransitionToAuthenticated(AuthenticationResult authResult)
        {
            var token = new JwtSecurityToken(authResult.IdToken);

            GivenName = token.Claims
                .Where(claim =&amp;gt; Authentication.GivenNameClaimType.Equals(claim.Type))
                .Select(claim =&amp;gt; claim.Value)
                .First();

            VisualStateManager.GoToState(this, AuthenticatedStateName, true);
        }

        private async void SignInButton_Click(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, AuthenticatingStateName, true);

            try
            {
                var accounts = await _authenticationClient.GetAccountsAsync();

                var result = await _authenticationClient
                    .AcquireTokenSilent(Authentication.Scopes, accounts.FirstOrDefault())
                    .ExecuteAsync();

                TransitionToAuthenticated(result);
            }
            catch (MsalUiRequiredException)
            {
                try
                {
                    var result = await _authenticationClient
                        .AcquireTokenInteractive(Authentication.Scopes)
                        .WithPrompt(Prompt.ForceLogin)
                        .WithUnoHelpers()
                        .ExecuteAsync();

                    TransitionToAuthenticated(result);
                }
                catch
                {
                    // Something went wrong, the the user try again
                    VisualStateManager.GoToState(this, UnauthenticatedStateName, true);
                }
            }
        }

        private async void SignOutButton_Click(object sender, RoutedEventArgs e)
        {
            IEnumerable&amp;lt;IAccount&amp;gt; accounts = await _authenticationClient.GetAccountsAsync();

            while (accounts.Any())
            {
                await _authenticationClient.RemoveAsync(accounts.First());
                accounts = await _authenticationClient.GetAccountsAsync();
            }

            VisualStateManager.GoToState(this, UnauthenticatedStateName, true);
        }

        public string GivenName
        {
            get { return (string)GetValue(GivenNameProperty); }
            set { SetValue(GivenNameProperty, value); }
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;There's a lot here so lets break it down:&lt;/p&gt;
&lt;h4 id="publicclientapplicationbuilder"&gt;PublicClientApplicationBuilder&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;_authenticationClient = PublicClientApplicationBuilder
    .Create(Authentication.ClientId)
#if __IOS__
    .WithIosKeychainSecurityGroup(Authentication.BundleName)
#endif
    .WithB2CAuthority(Authentication.Authority)
    .WithRedirectUri(Authentication.RedirectUri)
    .WithUnoHelpers()
    .Build();
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The &lt;code&gt;PublicClientApplicationBuilder&lt;/code&gt; class is used to configure and build a &lt;code&gt;PublicClientApplication&lt;/code&gt; instance. This class is used to:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;acquire tokens in desktop or mobile applications (Desktop / UWP / Xamarin.iOS / Xamarin.Android). Public client applications are not trusted to safely keep application secrets, and therefore they only access Web APIs in the name of the user only&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;To rephrase, because apps that get installed on desktop or mobile devices can be relatively easily decompiled, they can't effectively keep secrets in the way apps that run on a remote machine (i.e. server rendered web-apps) can. As such, this class is able to invoke an authentication flow using only a ClientId and RedirectUri which, while sensitive, do not directly grant the app any authentication rights and are therefore not considered secret. Equally, while this application is running in a browser (via WASM) as an SPA, we need to ensure no secrets are held in the JavaScript VM instance as these can also be retrieved by malicious actors.&lt;/p&gt;
&lt;p&gt;To build a &lt;code&gt;PublicClientApplication&lt;/code&gt; instance we need to provide the &lt;code&gt;PublicClientApplicationBuilder&lt;/code&gt; with the ClientId, Authority and RedirectUri values we encountered while &lt;a href="http://localhost:5080/posts/UnoB2C#step-2-creating-a-tenant"&gt;creating our tenant&lt;/a&gt;. For iOS we also need to provide the 'IosKeychainSecurityGroup' value which we enclose in a compiler directive so that it is only used on that platform. We provide these values via the &lt;code&gt;Authentication&lt;/code&gt; class which will read the values from &lt;code&gt;Authentication.Secret.cs&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Of particular note here is the &lt;code&gt;.WithUnoHelpers()&lt;/code&gt; line. This extension method provides a custom implementation of &lt;a href="https://docs.microsoft.com/en-us/dotnet/api/microsoft.identity.client.extensibility.icustomwebui?view=azure-dotnet"&gt;&lt;code&gt;ICustomWebUI&lt;/code&gt;&lt;/a&gt; and &lt;a href="https://docs.microsoft.com/en-us/dotnet/api/microsoft.identity.client.imsalhttpclientfactory?view=azure-dotnet"&gt;&lt;code&gt;IMsalHttpClientFactory&lt;/code&gt;&lt;/a&gt; to MSAL.NET which allows it to perform authentication in WASM in &lt;em&gt;exactly the same way&lt;/em&gt; as it would for an app running on a desktop or mobile device. This is just fantastic and both the MSAL.NET team and Uno Platform deserve kudos for creating and exploiting hooks that allow this use-case to function with so little friction.&lt;/p&gt;
&lt;h4 id="acquiretokensilent"&gt;AcquireTokenSilent&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;var accounts = await _authenticationClient.GetAccountsAsync();

var result = await _authenticationClient
    .AcquireTokenSilent(Authentication.Scopes, accounts.FirstOrDefault())
    .ExecuteAsync();
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;When a user successfully authenticates with Azure AD B2C, they are provided both an &lt;a href="https://auth0.com/docs/tokens/access-tokens"&gt;access token&lt;/a&gt; and a &lt;a href="https://auth0.com/docs/tokens/refresh-tokens"&gt;refresh token&lt;/a&gt;. Both these tokens are stored in a local cache associated with the application. These cached tokens can be used across/between sessions to ensure a user isn't constantly being prompted to authenticate with a service.&lt;/p&gt;
&lt;p&gt;As such, the first thing we endeavour to do when starting the authentication process is to check to see if there is a valid access token or refresh token (which will be automatically exchanged for a new access token) in the local cache. If there is, then the user has already authenticated and we should use the current tokens to avoid prompting the user to authenticate a second time.&lt;/p&gt;
&lt;p&gt;And this is what &lt;code&gt;AcquireTokenSilent&lt;/code&gt; silent does. We first get a list of accounts in the token cache and (for simplicity) use the first account we find to check for the presence of a valid token. If one is found, authentication succeeds and no further action is required. If a valid token is not found, then the &lt;code&gt;MsalUiRequiredException&lt;/code&gt; is thrown which we handle to perform authentication interactively.&lt;/p&gt;
&lt;h4 id="acquiretokeninteractive"&gt;AcquireTokenInteractive&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;var result = await _authenticationClient
    .AcquireTokenInteractive(Authentication.Scopes)
    .WithPrompt(Prompt.ForceLogin)
    .WithUnoHelpers()
    .ExecuteAsync();
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If a cached token was not available, we need to prompt the user to authenticate using an interactive process. This process involves opening a browser window and navigating to the authentication page for your Azure AD B2C tenant. Once authentication is complete, an authorization code is returned via the RedirectUri that MSAL is able to exchange for access and refresh tokens which are then stored in the local cache.&lt;/p&gt;
&lt;p&gt;Again, note the call to &lt;code&gt;.WithUnoHelpers()&lt;/code&gt;. This call performs platform dependent set-up such that the browser/device is able to correctly display a browser and return to the calling application once authentication is complete.&lt;/p&gt;
&lt;p&gt;Finally, you may be wondering about the &lt;code&gt;.WithPrompt(Prompt.ForceLogin)&lt;/code&gt;. Well, currently MSAL.NET doesn't &lt;a href="https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/issues/589"&gt;support a unified means to &amp;quot;sign out&amp;quot; of an account&lt;/a&gt;. While you are able to remove cached tokens (see the &amp;quot;sign out&amp;quot; code below) it doesn't clear cookies in the browser used to sign in to an account. This would result in a subsequent call to &lt;code&gt;AcquireTokenInteractive&lt;/code&gt; simply logging the user in to the previously used account without prompting them for credentials. To prevent this the &lt;code&gt;.WithPrompt(Prompt.ForceLogin)&lt;/code&gt; line is used to ensure the user is prompted for credentials regardless of cookie state.&lt;/p&gt;
&lt;h4 id="transitiontoauthenticated"&gt;TransitionToAuthenticated&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private void TransitionToAuthenticated(AuthenticationResult authResult)
{
    var token = new JwtSecurityToken(authResult.IdToken);

    GivenName = token.Claims
        .Where(claim =&amp;gt; Authentication.GivenNameClaimType.Equals(claim.Type))
        .Select(claim =&amp;gt; claim.Value)
        .First();

    VisualStateManager.GoToState(this, AuthenticatedStateName, true);
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Once a user has been authenticated (either silently or interactively) we transition to the &lt;code&gt;Authenticated&lt;/code&gt; state. Before doing so however, we use the access token returned from the authentication process to determine the name of the person who authenticated. As Azure AD B2C returns the access token as a &lt;a href="https://auth0.com/docs/tokens/json-web-tokens"&gt;JSON Web Token (JWT)&lt;/a&gt; we use the &lt;code&gt;JwtSecurityToken&lt;/code&gt; class from the &lt;code&gt;System.IdentityModel.Tokens.Jwt&lt;/code&gt; package to parse the token. The token will contain many claims many determined by the registration attributes and tokens claims &lt;a href="#newuserflowclaims"&gt;we selected while setting up the policy for our Azure AD B2C tenant&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;In this instance, we're interested in the &lt;code&gt;given_name&lt;/code&gt; claim so we enumerate through the claims and set the &lt;code&gt;GivenName&lt;/code&gt; property to the value of the first claim of this type.&lt;/p&gt;
&lt;p&gt;Finally we use the &lt;code&gt;VisualStateManager&lt;/code&gt; to transition the UI to the &lt;code&gt;Authenticated&lt;/code&gt; state which will greet the user by name.&lt;/p&gt;
&lt;h4 id="sign-out"&gt;Sign Out&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;IEnumerable&amp;lt;IAccount&amp;gt; accounts = await _authenticationClient.GetAccountsAsync();

while (accounts.Any())
{
    await _authenticationClient.RemoveAsync(accounts.First());
    accounts = await _authenticationClient.GetAccountsAsync();
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If we're able to sign-in then we need to be able to sign-out. Unfortunately this process is not quite a slick as the fluent, async methods we used for sign-in and, as described above, doesn't do anything to remove browser cookies which can be used to transparently re-authenticate. This does seem to be the subject of &lt;a href="https://stackoverflow.com/questions/47517434/how-to-sign-out-from-azure-ad-2-0-msal-in-a-desktop-application"&gt;much&lt;/a&gt; &lt;a href="https://stackoverflow.com/questions/37792244/logout-does-not-work-when-using-microsoft-authentication-library-msal"&gt;confusion&lt;/a&gt; on both StackOverflow and Github where many of the &lt;a href="https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/issues/589"&gt;associated&lt;/a&gt; &lt;a href="https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/issues/425"&gt;issues&lt;/a&gt; have been closed without a satisfactory solution. Any mention of improving the sign-out experience even seems to have disappeared from the &lt;a href="https://github.com/AzureAD/microsoft-authentication-library-for-dotnet/projects/1"&gt;MSAL.NET project boards&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Still, the &lt;code&gt;.WithPrompt(Prompt.ForceLogin)&lt;/code&gt; workaround resolves the primary issue for now so we're able to just rely on the code above to remove cached tokens.&lt;/p&gt;
&lt;h3 id="android-changes"&gt;Android Changes&lt;/h3&gt;
&lt;p&gt;In order for authentication to succeed on Android we need to modify both &lt;code&gt;AndroidManifest.xml&lt;/code&gt; and the &lt;code&gt;MainActivity.cs&lt;/code&gt;&lt;/p&gt;
&lt;h4 id="androidmanifest.xml"&gt;AndroidManifest.xml&lt;/h4&gt;
&lt;p&gt;In the 'UnoAuth.Droid' project, expand 'Properties' to show the &amp;quot;AndroidManifest.xml&amp;quot; file. Double-click this file to edit it such that it looks similar to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xml"&gt;&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;utf-8&amp;quot;?&amp;gt;
&amp;lt;manifest xmlns:android=&amp;quot;http://schemas.android.com/apk/res/android&amp;quot; package=&amp;quot;UnoAuth&amp;quot; android:versionCode=&amp;quot;1&amp;quot; android:versionName=&amp;quot;1.0&amp;quot;&amp;gt;
  &amp;lt;uses-sdk android:minSdkVersion=&amp;quot;16&amp;quot; android:targetSdkVersion=&amp;quot;29&amp;quot; /&amp;gt;
  &amp;lt;application android:label=&amp;quot;UnoAuth&amp;quot;&amp;gt;
    &amp;lt;activity android:name=&amp;quot;microsoft.identity.client.BrowserTabActivity&amp;quot;&amp;gt;
      &amp;lt;intent-filter&amp;gt;
        &amp;lt;action android:name=&amp;quot;android.intent.action.VIEW&amp;quot; /&amp;gt;
        &amp;lt;category android:name=&amp;quot;android.intent.category.DEFAULT&amp;quot; /&amp;gt;
        &amp;lt;category android:name=&amp;quot;android.intent.category.BROWSABLE&amp;quot; /&amp;gt;
        &amp;lt;data android:scheme=&amp;quot;msal[ClientId]&amp;quot; android:host=&amp;quot;auth&amp;quot; /&amp;gt;
      &amp;lt;/intent-filter&amp;gt;
    &amp;lt;/activity&amp;gt;
  &amp;lt;/application&amp;gt;
&amp;lt;/manifest&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Make sure you amend the &lt;code&gt;android:scheme&lt;/code&gt; value to use the ClientId from your App Registration then save changes and close the file.&lt;/p&gt;
&lt;h4 id="mainactivity"&gt;MainActivity&lt;/h4&gt;
&lt;p&gt;Open the 'MainActivity.cs' file and amend it to include the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using Android.App;
using Android.Content;
using Android.Views;
using Microsoft.Identity.Client;

namespace UnoAuth.Droid
{
  [Activity(
    MainLauncher = true, 
    ConfigurationChanges = global::Uno.UI.ActivityHelper.AllConfigChanges, 
    WindowSoftInputMode = SoftInput.AdjustPan | SoftInput.StateHidden)]
  public class MainActivity : Windows.UI.Xaml.ApplicationActivity
  {
    protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
    {
      base.OnActivityResult(requestCode, resultCode, data);
      AuthenticationContinuationHelper.SetAuthenticationContinuationEventArgs(requestCode, resultCode, data);
    }
  }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="ios-changes"&gt;iOS Changes&lt;/h3&gt;
&lt;p&gt;As with most everything on iOS, the changes to make authentication work are a little more tricky. We need to change the iOS project properties and both the 'Info.plist' and 'Entitlements.plist' files.&lt;/p&gt;
&lt;h4 id="project-properties"&gt;Project Properties&lt;/h4&gt;
&lt;p&gt;Right click on the iOS project properties, navigate to &amp;quot;iOS Bundle Signing&amp;quot; and select &amp;quot;Manual Provisioning&amp;quot;. Next, under Additional Resources, make sure the Custom Entitlements setting is set to &amp;quot;Entitlements.plist&amp;quot;.&lt;/p&gt;
&lt;p&gt;Your iOS Bundle Signing page should now look like this:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="iosbundlesigning" href="/Content/UnoB2C/iOS Bundle Signing.png"&gt;&lt;img src="/Content/UnoB2C/iOS Bundle Signing.png" class="img-responsive" style="margin: auto; max-width:66%; margin-top: 6px; margin-bottom: 6px;" alt="iOS Bundle Signing"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h4 id="info.plist"&gt;Info.plist&lt;/h4&gt;
&lt;p&gt;Right click on the 'Info.plist' file in the iOS project and select &lt;code&gt;View Code&lt;/code&gt;. At the end of the root &lt;code&gt;&amp;lt;dict&amp;gt;&lt;/code&gt; element add the &lt;code&gt;CFBundleURLTypes&lt;/code&gt; key and value shown below (amending the &lt;code&gt;CFBundleURLSchemes&lt;/code&gt; value to use the ClientId for your app registration):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xml"&gt;&amp;lt;?xml version=&amp;quot;1.0&amp;quot; encoding=&amp;quot;UTF-8&amp;quot;?&amp;gt;
&amp;lt;!DOCTYPE plist PUBLIC &amp;quot;-//Apple//DTD PLIST 1.0//EN&amp;quot; &amp;quot;http://www.apple.com/DTDs/PropertyList-1.0.dtd&amp;quot;&amp;gt;
&amp;lt;plist version=&amp;quot;1.0&amp;quot;&amp;gt;
&amp;lt;dict&amp;gt;
	&amp;lt;key&amp;gt;CFBundleDisplayName&amp;lt;/key&amp;gt;
	&amp;lt;string&amp;gt;UnoAuth&amp;lt;/string&amp;gt;
	&amp;lt;key&amp;gt;CFBundleIdentifier&amp;lt;/key&amp;gt;
	&amp;lt;string&amp;gt;com.companyname.UnoAuth&amp;lt;/string&amp;gt;

  ...

	&amp;lt;key&amp;gt;CFBundleURLTypes&amp;lt;/key&amp;gt;
	&amp;lt;array&amp;gt;
		&amp;lt;dict&amp;gt;
			&amp;lt;key&amp;gt;CFBundleURLName&amp;lt;/key&amp;gt;
			&amp;lt;string&amp;gt;MSAL&amp;lt;/string&amp;gt;
			&amp;lt;key&amp;gt;CFBundleURLSchemes&amp;lt;/key&amp;gt;
			&amp;lt;array&amp;gt;
				&amp;lt;string&amp;gt;msal[ClientID]&amp;lt;/string&amp;gt;
			&amp;lt;/array&amp;gt;
			&amp;lt;key&amp;gt;CFBundleTypeRole&amp;lt;/key&amp;gt;
			&amp;lt;string&amp;gt;None&amp;lt;/string&amp;gt;
		&amp;lt;/dict&amp;gt;
	&amp;lt;/array&amp;gt;
&amp;lt;/dict&amp;gt;
&amp;lt;/plist&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Finally copy the &lt;code&gt;CFBundleIdentifier&lt;/code&gt; value (in this case &lt;code&gt;com.companyname.UnoAuth&lt;/code&gt;) then save and close the file.&lt;/p&gt;
&lt;h4 id="entitlements.plist"&gt;Entitlements.plist&lt;/h4&gt;
&lt;p&gt;Double click on the 'Entitlements.plist' file in the iOS project to open the visual editor. In the 'Entitlements' list select &amp;quot;Keychain&amp;quot; and then tick &amp;quot;Enable Keychain&amp;quot; in the 'Description' section. Finally, paste the bundle identifier you copied from 'Info.plist' into the 'Keychain Groups' text box so it looks like this:&lt;/p&gt;
&lt;p&gt;&lt;a data-fancybox="entitlementsplist" href="/Content/UnoB2C/Entitlements plist.png"&gt;&lt;img src="/Content/UnoB2C/Entitlements plist.png" class="img-responsive" style="margin: auto; max-width:66%; margin-top: 6px; margin-bottom: 6px;" alt="Entitlements plist"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Finally save the changes and close the file.&lt;/p&gt;
&lt;h2 id="testing"&gt;Testing&lt;/h2&gt;
&lt;p&gt;Now, if everything is set up correctly, you should be able to use Azure AD B2C and MSAL.NET to authenticate users. Here is UnoAuth running on...&lt;/p&gt;
&lt;h3 id="uwp"&gt;UWP&lt;/h3&gt;
&lt;video class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" controls&gt;
  &lt;source src="/Content/UnoB2C/UWP Authentication.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;h3 id="wasm"&gt;WASM&lt;/h3&gt;
&lt;video class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" controls&gt;
  &lt;source src="/Content/UnoB2C/WASM Authentication.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;h3 id="android"&gt;Android&lt;/h3&gt;
&lt;video class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" controls&gt;
  &lt;source src="/Content/UnoB2C/Droid Authentication.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;h3 id="ios"&gt;iOS&lt;/h3&gt;
&lt;video class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" controls&gt;
  &lt;source src="/Content/UnoB2C/iOS Authentication.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;As we can see, it is now possible to use Azure AD B2C and MSAL.NET to perform client-side authentication, across multiple platforms, using a single code-base. Furthermore, while a few platform specific tweaks are required in a couple of the head projects, the code to perform authentication is both concise, understandable and shared by all platforms.&lt;/p&gt;
&lt;p&gt;While IAM remains a complicated subject (as attested to by the length of this post!) I hope the above provides sufficient information that a reader is able to quickly get these technologies working together and allow them to move on to more engaging parts of their app.&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally&lt;/h2&gt;
&lt;p&gt;If you're interested in using the Uno Platform to deliver cross-platform apps or have an upcoming project for which you'd like evaluate Uno Platform's fit, then please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. As a freelance software developer and remote contractor I'm always interested in hearing from potential new clients or ideas for new collaborations.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>A Blogging Milestone</title>
			<link>http://ian.bebbs.co.uk/posts/BlogMilestone</link>
			<description>&lt;p&gt;Today my blog hit a minor milestone: over 12,000 page views in the last 365 days. That's over two-thousand page views a month! While a long way short of other notable tech bloggers (yes, I'm looking at you &lt;a href="https://www.hanselman.com/blog/"&gt;Hanselman&lt;/a&gt;), I think it's a pretty decent number, particularly when considering the somewhat limited audience for my very targeted content. In this post I provide insights into my "Top 20" posts and my plans for the coming months.&lt;/p&gt;</description>
			<enclosure url="http://ian.bebbs.co.uk/Content/BlogMilestone/Weighted%20Posts%20-%20Background.png" length="0" type="image" />
			<guid>http://ian.bebbs.co.uk/posts/BlogMilestone</guid>
			<pubDate>Fri, 04 Sep 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;Today my blog hit a minor milestone: over 12,000 page views in the last 365 days. That's over two-thousand page views a month! While a long way short of other notable tech bloggers (yes, I'm looking at you &lt;a href="https://www.hanselman.com/blog/"&gt;Hanselman&lt;/a&gt;), I think it's a pretty decent number, particularly when considering the somewhat limited audience for my very targeted content. In this post I provide insights into my &amp;quot;Top 20&amp;quot; posts and my plans for the coming months.&lt;/p&gt;
&lt;h2 id="top-20"&gt;Top 20&lt;/h2&gt;
&lt;h3 id="posts-by-weighted-page-view"&gt;Posts By Weighted Page View&lt;/h3&gt;
&lt;p&gt;While looking over the blog statistics for the past year, I was very interested to understand which were my &amp;quot;top&amp;quot; posts. Initially I thought total page views for each post would be a good metric but, given older posts will naturally have more hits, I decided to weight total page views by publication date. This gave me the following:&lt;/p&gt;
&lt;img src="/Content/BlogMilestone/Weighted Posts.png" class="img-responsive" style="margin: auto; max-width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Weighted Posts"/&gt;
&lt;p&gt;In this chart the outer ring is the Top 20 blog posts based on weighted total page views and the inner ring is the same 20 blog posts based on actual total page views.&lt;/p&gt;
&lt;p&gt;The Top 20 are as follows:&lt;/p&gt;
&lt;table class="table"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Post&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Weighted Views&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Total Views&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UnoValue"&gt;On the incredible value proposition of .NET &amp;amp; the Uno Platform&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;152.19&lt;/td&gt;
&lt;td style="text-align: right;"&gt;739&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/LessReSTMoreHotChocolate"&gt;Less ReST, more Hot Chocolate&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;112.25&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1741&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UnoLinux"&gt;Running UWP on Linux With Uno&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;100.57&lt;/td&gt;
&lt;td style="text-align: right;"&gt;445&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UnoPi"&gt;Running UWP on a Raspberry Pi Using Uno Platform&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;88.17&lt;/td&gt;
&lt;td style="text-align: right;"&gt;348&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/MLinUWP"&gt;State-of-the-art ML in UWP&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;87.87&lt;/td&gt;
&lt;td style="text-align: right;"&gt;299&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/BuildingDotNetCore3WithAzurePipelines"&gt;Building .NET Core 3.0 With Azure Pipelines&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;62.03&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1138&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UnoChat"&gt;Cross-Platform Real-Time Communication with Uno &amp;amp; SignalR&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;56.38&lt;/td&gt;
&lt;td style="text-align: right;"&gt;401&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/Uno"&gt;The Seven GUIs of Christmas&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;53.81&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1028&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/AugmentingTheGenericHost"&gt;Augmenting the .NET Core 3.0 Generic Host&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;47.2&lt;/td&gt;
&lt;td style="text-align: right;"&gt;806&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/COduo-Part4"&gt;Many platforms, one world - Part 4&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;31.36&lt;/td&gt;
&lt;td style="text-align: right;"&gt;340&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/LightweightRuntimeCompositionForGenericHost"&gt;Light-weight run-time composition for the .NET Core 3.0 Generic Host&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;28.24&lt;/td&gt;
&lt;td style="text-align: right;"&gt;488&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UnoWasmDocker"&gt;Uno WebAssembly Containerization&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;25.47&lt;/td&gt;
&lt;td style="text-align: right;"&gt;220&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/NetworkBootingManyRaspberryPis"&gt;Network Booting Many Raspberry Pis&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;22.61&lt;/td&gt;
&lt;td style="text-align: right;"&gt;355&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/COduo-Part1"&gt;Many platforms, one world - Part 1&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;19.54&lt;/td&gt;
&lt;td style="text-align: right;"&gt;230&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/COduo-Part3"&gt;Many platforms, one world - Part 3&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;12.12&lt;/td&gt;
&lt;td style="text-align: right;"&gt;138&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/ReactiveStateMachines"&gt;Reactive State Machines&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;11.83&lt;/td&gt;
&lt;td style="text-align: right;"&gt;442&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UnoWithSwagger"&gt;Giving Uno Some Swagger&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;11.63&lt;/td&gt;
&lt;td style="text-align: right;"&gt;105&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UsingHyperlinkInMVVM"&gt;Using a Hyperlink in MVVM&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;11.44&lt;/td&gt;
&lt;td style="text-align: right;"&gt;440&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/COduo-Part2"&gt;Many platforms, one world - Part 2&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;10.69&lt;/td&gt;
&lt;td style="text-align: right;"&gt;124&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/Codewars"&gt;A Kata for Katas&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;10.47&lt;/td&gt;
&lt;td style="text-align: right;"&gt;98&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;This Top 20 by weighted total page views accounts for almost 90% of the page views this year and, interestingly, aligns pretty well with my (hypothetical) favourite blog post list.&lt;/p&gt;
&lt;h3 id="posts-by-weighted-engagement"&gt;Posts By Weighted Engagement&lt;/h3&gt;
&lt;p&gt;Next I was interested to see if there was a close correlation between page views and &amp;quot;engagement&amp;quot;. In this instance I deemed engagement to be based on the average time spent reading a given page but, given readers will naturally take longer to read lengthier posts, I weighted time spent on the page by word count (excluding posts with less than 500 words). Here's what I ended up with:&lt;/p&gt;
&lt;table class="table"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Post&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Word Count&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Average Reading Time&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Weighted Engagement&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/HomeNetworkMonitoring-PartIII"&gt;Home Network Monitoring - Part III&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;849&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:08:08&lt;/td&gt;
&lt;td style="text-align: right;"&gt;16748&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/ReactiveReadModels"&gt;Reactive ReadModels&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1069&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:09:02&lt;/td&gt;
&lt;td style="text-align: right;"&gt;16577&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UsingSVGInUWP"&gt;The absolute easiest way to use SVG icons in UWP apps&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;663&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:05:59&lt;/td&gt;
&lt;td style="text-align: right;"&gt;13942&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/DartInVisualStudioCode"&gt;Dart web development with Visual Studio Code&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1538&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:07:25&lt;/td&gt;
&lt;td style="text-align: right;"&gt;11347&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/Nano2Docker"&gt;Nano2Docker&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1870&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:07:33&lt;/td&gt;
&lt;td style="text-align: right;"&gt;10476&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/TechAdventuresInSustainability-PartI"&gt;Tech Adventures in Sustainability&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1364&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:05:54&lt;/td&gt;
&lt;td style="text-align: right;"&gt;9585&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/Codewars"&gt;A Kata for Katas&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1979&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:07:05&lt;/td&gt;
&lt;td style="text-align: right;"&gt;9554&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/HomeNetworkMonitoring-PartII"&gt;Home Network Monitoring - Part II&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1384&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:05:19&lt;/td&gt;
&lt;td style="text-align: right;"&gt;8575&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/ASmartHome-Part2"&gt;A SmartHome... NoT - Part II&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1883&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:05:52&lt;/td&gt;
&lt;td style="text-align: right;"&gt;8112&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/CqrsEsMvvmRxEfSqlUwpPcl"&gt;CQRS/ES &amp;amp; MVVM using RX, EF &amp;amp; SQL in UWP &amp;amp; PCL&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1081&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:04:24&lt;/td&gt;
&lt;td style="text-align: right;"&gt;8030&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UsingATouchOverlayInPortrainOnRaspbian"&gt;Using A Touch Overlay, In Portrait, On Raspbian Buster&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;620&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:03:16&lt;/td&gt;
&lt;td style="text-align: right;"&gt;7872&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/FluentNamespacing"&gt;Fluent Namespacing&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1165&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:04:14&lt;/td&gt;
&lt;td style="text-align: right;"&gt;7442&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/ReactiveBehaviors"&gt;Reactive Behaviors&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;926&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:03:43&lt;/td&gt;
&lt;td style="text-align: right;"&gt;7328&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/UnoPi"&gt;Running UWP on a Raspberry Pi Using Uno Platform&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1808&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:04:56&lt;/td&gt;
&lt;td style="text-align: right;"&gt;6961&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/COduo-Part1"&gt;Many platforms, one world - Part 1&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2037&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:05:05&lt;/td&gt;
&lt;td style="text-align: right;"&gt;6769&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/CombiningUwpSpeechSynthesizerWithAudioGraph"&gt;Combining the UWP SpeechSynthesizer and AudioGraph APIs&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;965&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:03:21&lt;/td&gt;
&lt;td style="text-align: right;"&gt;6470&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/HomeNetworkMonitoring-PartI"&gt;Home Network Monitoring - Part I&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2183&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:04:58&lt;/td&gt;
&lt;td style="text-align: right;"&gt;6378&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://ian.bebbs.co.uk/posts/ASmartHome-Part1"&gt;A SmartHome... NoT - Part I&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2187&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:04:21&lt;/td&gt;
&lt;td style="text-align: right;"&gt;5581&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;Interestingly this bares little resemblance to the &amp;quot;Top 20 Posts By Weighted Page View&amp;quot; and contains many of my older posts. My guess here is that these are posts that people have come across these posts by actively searching for related keywords. As such, they're likely to have spent longer reading the page in more depth or interactively following steps therein as they're related to what they were searching for. In contrast to this, I imagine a large number of posts in the &amp;quot;Top 20 Posts By Weighted Page View&amp;quot; list are encountered via social media (Twitter) or news aggregator (The Morning Brew, Dotnet Kicks, Dew Drop, etc) and, as such, are read out of idle curiosity rather than specific interest which might explain the lower &amp;quot;engagement&amp;quot;.&lt;/p&gt;
&lt;h3 id="tags-by-total-time"&gt;Tags By Total Time&lt;/h3&gt;
&lt;p&gt;Lastly I was interested to see just how much of the internet's time I've occupied with my myriad ramblings. The chart below shows the total time the internet has spent reading articles on my blog by tag (calculated as &lt;code&gt;average time on page * total views&lt;/code&gt;):&lt;/p&gt;
&lt;img src="/Content/BlogMilestone/Tags By Total Time.png" class="img-responsive" style="margin: auto; max-width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Tags By Total Time"/&gt;
&lt;p&gt;Somewhat amazingly, over 6 person-days (!!!) has been spent reading articles on my blog about XAML and over 5 person-days reading articles about &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt;. That's pretty cool - although I very much hope this time has helped developers achieve goals rather than just killing time at work.&lt;/p&gt;
&lt;p&gt;Anyway, here's the full Top 20 (apologies if some of the tag links don't work, I've been a bit inconsistent with casing):&lt;/p&gt;
&lt;table class="table"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th style="text-align: left;"&gt;Tag&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Total Views&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Average Time On Page&lt;/th&gt;
&lt;th style="text-align: right;"&gt;Total Time On Page&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/xaml"&gt;xaml&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;3018&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:03:04.4648148&lt;/td&gt;
&lt;td style="text-align: right;"&gt;6.00:27:37&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/uwp"&gt;uwp&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;3784&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:18.4156249&lt;/td&gt;
&lt;td style="text-align: right;"&gt;5.20:28:43&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/uno-platform"&gt;uno platform&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;4271&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:05.8527777&lt;/td&gt;
&lt;td style="text-align: right;"&gt;5.13:24:03&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/net-core"&gt;.net core&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;6184&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:01:36.6097803&lt;/td&gt;
&lt;td style="text-align: right;"&gt;4.10:16:13&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/android"&gt;android&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2414&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:01.3119047&lt;/td&gt;
&lt;td style="text-align: right;"&gt;3.00:51:41&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/raspberry-pi"&gt;raspberry pi&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1263&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:18.9000000&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2.13:32:44&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/mvvm"&gt;mvvm&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;440&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:07:32&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2.07:14:40&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/rx"&gt;rx&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;684&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:03:11.2500000&lt;/td&gt;
&lt;td style="text-align: right;"&gt;2.05:01:45&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/ios"&gt;ios&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1233&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:16.9366666&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.23:31:10&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/reactive"&gt;reactive&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;522&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:45&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.21:19:07&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/patterns"&gt;patterns&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;481&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:03:57.6666666&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.17:36:22&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/state-machines"&gt;state machines&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;442&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:05:24&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.15:46:48&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/linux"&gt;linux&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;793&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:57.9000000&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.12:00:19&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/rest"&gt;rest&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1852&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:01:28.7192982&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.10:04:10&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/nswag"&gt;nswag&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1846&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:02.5789473&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.10:02:04&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/surface"&gt;surface&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;832&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:12.0208333&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.06:04:33&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/graphql"&gt;graphql&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1741&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:00:59.1578947&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.04:36:34&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/dual"&gt;dual&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;492&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:43.2500000&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.02:27:20&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/gui"&gt;gui&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1181&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:01:22.2500000&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.01:20:31&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: left;"&gt;&lt;a href="https://ian.bebbs.co.uk/tags/webassembly"&gt;webassembly&lt;/a&gt;&lt;/td&gt;
&lt;td style="text-align: right;"&gt;726&lt;/td&gt;
&lt;td style="text-align: right;"&gt;00:02:06.6166666&lt;/td&gt;
&lt;td style="text-align: right;"&gt;1.01:08:42&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h2 id="still-being-brave"&gt;Still Being Brave&lt;/h2&gt;
&lt;p&gt;Just under a year ago I wrote &lt;a href="https://ian.bebbs.co.uk/posts/BeBraveLikeBATMan.html"&gt;&amp;quot;Be Brave. Like BAT, man!&amp;quot;&lt;/a&gt; about my transition to using the &lt;a href="https://brave.com/beb095"&gt;Brave browser&lt;/a&gt; and signing up to the &lt;a href="https://publishers.basicattentiontoken.org/"&gt;Brave Rewards Creators Program&lt;/a&gt;. I'm pleased to say that I'm still using Brave as my default browser on Android (additional browser on PC) and have yet to find a website that didn't work correctly (or at least no worse than Chrome) despite having lots of ads/trackers blocked.&lt;/p&gt;
&lt;p&gt;Furthermore the Brave Rewards Creators Program has proven to be &lt;em&gt;relatively&lt;/em&gt; lucrative. Here's my current Uphold wallet:&lt;/p&gt;
&lt;img src="/Content/BlogMilestone/Uphold.png" class="img-responsive" style="margin: auto; max-width:33%; margin-top: 6px; margin-bottom: 6px;" alt="Uphold"/&gt;
&lt;p&gt;While earnings of £50 (it was actually &amp;gt; £60 just a few days back) certainly aren't going to see me retire any time soon, it's still a decent amount for doing &lt;em&gt;nothing&lt;/em&gt;. Indeed, I'd have written these blog posts anyway so any earnings from them are a bonus. Moreover, it's got me into the &amp;quot;crypto game&amp;quot; - effectively for free - and I'm very much enjoying speculating on relative rise and fall of BAT and BTC using just my Brave Rewards earnings.&lt;/p&gt;
&lt;p&gt;Should you be a privacy conscious person - &lt;a href="https://locusmag.com/2016/09/cory-doctorowthe-privacy-wars-are-about-to-get-a-whole-lot-worse/"&gt;and you really ought to be&lt;/a&gt; - then I'd definitely recommend dumping Chrome ASAP and moving to a browser not created by a company that makes most of it's money from selling data about you. Firefox is a great choice for PC, especially with their &lt;a href="https://addons.mozilla.org/en-US/firefox/addon/multi-account-containers/"&gt;Multi-Account Container&lt;/a&gt; extension. On mobile though I would definitely recommend Brave due to it's additional privacy features which save you time and money.&lt;/p&gt;
&lt;p&gt;If you'd like to try Brave browser, then please use my referral link &lt;a href="https://brave.com/beb095"&gt;here&lt;/a&gt; as it'll net me a few additional BAT.&lt;/p&gt;
&lt;h2 id="the-future"&gt;The Future&lt;/h2&gt;
&lt;p&gt;Writing this blog has been - and continues to be - a fantastic experience. Not only has it put me in contact with loads of brilliant people but it has also fundamentally improved my understanding of many of the technologies I've written about. Or, to quote one of my personal heroes:&lt;/p&gt;
&lt;blockquote class="twitter-tweet tw-align-center"&gt;&lt;p lang="en" dir="ltr"&gt;If you want to master something, teach it. The more you teach, the better you learn. Teaching is a powerful tool to learning. - Richard Feynman &lt;a href="https://twitter.com/hashtag/Math?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#Math&lt;/a&gt; &lt;a href="https://twitter.com/hashtag/STEM?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#STEM&lt;/a&gt; &lt;a href="https://t.co/xY3AdtW5EL"&gt;pic.twitter.com/xY3AdtW5EL&lt;/a&gt;&lt;/p&gt;&amp;mdash; Math Meaning 🧠🚀 (&amp;#64;MathMeaning) &lt;a href="https://twitter.com/MathMeaning/status/1299006155268685824?ref_src=twsrc%5Etfw"&gt;August 27, 2020&lt;/a&gt;&lt;/blockquote&gt; &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt; 
&lt;p&gt;Moving forwards my hope is to publish at least a couple of new posts each month. I've got loads of interesting projects afoot which should afford me the opportunity to expand on some of the technologies I've already covered (i.e. &lt;a href="https://ian.bebbs.co.uk/tags/uno-platform"&gt;Uno platform&lt;/a&gt;, &lt;a href="https://ian.bebbs.co.uk/tags/ML"&gt;ML&lt;/a&gt;, etc) and a whole new bunch of technologies I'm currently interested in (Azure AD B2C Authentication and RDF stores/ SparQL queries to name just a couple). I'm also considering migrating my blog from &lt;a href="https://wyam.io/"&gt;Wyam&lt;/a&gt; to &lt;a href="https://statiq.dev/"&gt;Statiq&lt;/a&gt; (both written by the amazing &lt;a href="https://twitter.com/daveaglick"&gt;Dave Glick&lt;/a&gt;) and will certainly write about the migration if/when it happens.&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally...&lt;/h2&gt;
&lt;p&gt;... a huge thank-you to my readers! I sincerely hope you've all enjoyed reading my blog as much as I've enjoyed writing it. If there's something in particular you'd like me to write about (either expanding on a previous post or something new you feel I might be interested in) then just drop me a line using the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;; I'm always happy to make new acquaintances and always interested in new collaborations.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>State-of-the-art ML in UWP</title>
			<link>http://ian.bebbs.co.uk/posts/MLinUWP</link>
			<description>&lt;p&gt;In this post I show how to use a state-of-the-art machine learning model to implement Salient Object Detection and Image Segmentation. I then show how this model can be used to provide local inference capabilities entirely within a UWP app.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/MLinUWP</guid>
			<pubDate>Mon, 24 Aug 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;In this post I show how to use a state-of-the-art machine learning model to implement Salient Object Detection and Image Segmentation. I then show how this model can be used to provide local inference capabilities entirely within a UWP app.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;A while ago I found myself prototyping a UI in which I wanted to show portrait images of people. However, I wanted to remove the background from these portrait images so that they appeared integrated into the UI rather than layered on top of it. For example, something like this Premier League Player of the Month card:&lt;/p&gt;
&lt;img src="/Content/MLinUWP/Pukki.png" class="img-responsive" style="margin: auto; max-width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Premier League Player of the Month card"/&gt;
&lt;p&gt;Looking around I came across &lt;a href="https://www.remove.bg/"&gt;this website&lt;/a&gt; which purported to use &amp;quot;sophisticated AI technology to detect foreground layers and separate them from the background&amp;quot;. Intrigued I gave it a go and was shocked at how good the results were. Here's an image of my little girl (endeavouring to learn how to go cross-eyed) followed by the image produced by &lt;a href="https://www.remove.bg/"&gt;Remove.bg&lt;/a&gt;:&lt;/p&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img src="/Content/MLinUWP/CrossEyed-Original.png" class="img-responsive" style="margin: auto; max-width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Original"/&gt;&lt;/td&gt;
&lt;td&gt;&lt;img src="/Content/MLinUWP/CrossEyed-removebg-preview.png" class="img-responsive" style="margin: auto; max-width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Background Removed"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;Original&lt;/td&gt;
&lt;td style="text-align: center"&gt;Background Removed&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;Very cool and easily integrated using their API.&lt;/p&gt;
&lt;p&gt;Unfortunately my use-case required background removal from user supplied content and the project costing probably wouldn't extend to paying for (potentially) thousands of calls a month.&lt;/p&gt;
&lt;p&gt;So, like any good hacker, I hit the books to learn how this &amp;quot;sophisticated AI&amp;quot; worked...&lt;/p&gt;
&lt;h2 id="salient-object-detection-image-segmentation"&gt;Salient Object Detection &amp;amp; Image Segmentation&lt;/h2&gt;
&lt;p&gt;A thoroughly enjoyable couple of hours study commenced whereupon I learned of the wonders of &lt;a href="https://paperswithcode.com/task/salient-object-detection"&gt;Salient Object Detection&lt;/a&gt; and &lt;a href="https://towardsdatascience.com/image-segmentation-in-2020-756b77fa88fc"&gt;Image Segmentation&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;During this research I happened upon &lt;a href="https://github.com/NathanUA/U-2-Net"&gt;U²-Net&lt;/a&gt;, a very recently published (May 2020) &amp;quot;deep network architecture&amp;quot; for salient object detection. In this repository they provided everything needed to start using their model including all weights and even sample code for inference. Moreover this model had already been used to great effect in the &amp;quot;AR Cut &amp;amp; Paste&amp;quot; demo shown below (&lt;a href="https://twitter.com/cyrildiagne/status/1256916982764646402"&gt;link here for Firefox users (like me) who don't see the tweet embedded correctly&lt;/a&gt;):&lt;/p&gt;
&lt;blockquote class="twitter-tweet tw-align-center"&gt;&lt;p lang="en" dir="ltr"&gt;4/10 - Cut &amp;amp; paste your surroundings to Photoshop&lt;br&gt;&lt;br&gt;Code: &lt;a href="https://t.co/cVddH3u3ik"&gt;https://t.co/cVddH3u3ik&lt;/a&gt;&lt;br&gt;&lt;br&gt;Book: &lt;a href="https://twitter.com/HOLOmagazine?ref_src=twsrc%5Etfw"&gt;&amp;#64;HOLOmagazine&lt;/a&gt;&lt;br&gt;Garment: SS17 by &lt;a href="https://twitter.com/thekarentopacio?ref_src=twsrc%5Etfw"&gt;&amp;#64;thekarentopacio&lt;/a&gt; &lt;br&gt;Type: Sainte Colombe by &lt;a href="https://twitter.com/MinetYoann?ref_src=twsrc%5Etfw"&gt;&amp;#64;MinetYoann&lt;/a&gt; &lt;a href="https://twitter.com/ProductionType?ref_src=twsrc%5Etfw"&gt;&amp;#64;ProductionType&lt;/a&gt;&lt;br&gt;Technical Insights: ↓&lt;a href="https://twitter.com/hashtag/ML?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#ML&lt;/a&gt; &lt;a href="https://twitter.com/hashtag/AR?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#AR&lt;/a&gt; &lt;a href="https://twitter.com/hashtag/AI?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#AI&lt;/a&gt; &lt;a href="https://twitter.com/hashtag/AIUX?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#AIUX&lt;/a&gt; &lt;a href="https://twitter.com/hashtag/Adobe?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#Adobe&lt;/a&gt; &lt;a href="https://twitter.com/hashtag/Photoshop?src=hash&amp;amp;ref_src=twsrc%5Etfw"&gt;#Photoshop&lt;/a&gt; &lt;a href="https://t.co/LkTBe0t0rF"&gt;pic.twitter.com/LkTBe0t0rF&lt;/a&gt;&lt;/p&gt;&amp;mdash; Cyril Diagne (&amp;#64;cyrildiagne) &lt;a href="https://twitter.com/cyrildiagne/status/1256916982764646402?ref_src=twsrc%5Etfw"&gt;May 3, 2020&lt;/a&gt;&lt;/blockquote&gt; &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;
&lt;p&gt;I was inspired. I wanted that tech in my product. But how?&lt;/p&gt;
&lt;h2 id="the-easy-way"&gt;The &amp;quot;Easy&amp;quot; Way&lt;/h2&gt;
&lt;p&gt;In this day and age we, as developers, are somewhat spoiled. Once you understand enough about what it is you need to be able to ask the right questions, you can almost guarantee that someone out there has already posted the answers. This is very much why I endeavour to document my continued learnings on this blog; a sort of &amp;quot;pay-it-forward&amp;quot; thank-you for all the myriad blogs and SO answers I've benefitted from across the years.&lt;/p&gt;
&lt;p&gt;Anyway, once I knew I wanted to use U²-Net, it didn't take me long to find &lt;a href="https://hub.docker.com/r/luukio/u2net-bg-removal"&gt;a docker image&lt;/a&gt; which provided an Http endpoint for performing U²-Net inference on a supplied image and which returned the supplied image with the background removed. Perfecto!&lt;/p&gt;
&lt;p&gt;Unfortunately, trying to run this docker image caused an error. Looking at the &lt;a href="https://github.com/ideo/bg-removal-with-u2net/blob/master/Dockerfile"&gt;Dockerfile&lt;/a&gt; in the associated &lt;a href="https://github.com/ideo/bg-removal-with-u2net"&gt;Github repository&lt;/a&gt; explained why: the &lt;a href="https://pytorch.org/"&gt;PyTorch&lt;/a&gt; image on which this docker image was based expected to have CUDA hardware available to it. As I was running on Windows, with the docker container running within WSL2 (&lt;a href="https://docs.microsoft.com/en-us/windows/win32/direct3d12/gpu-cuda-in-wsl"&gt;and didn't want to go back to running a Fast Ring build&lt;/a&gt;) this docker image was of little direct use.&lt;/p&gt;
&lt;p&gt;However, given the Dockerfile provided a good breakdown of all the software required to get U²-Net running, it wasn't rocket science (but perhaps artificial brain surgery?) to write a new Dockerfile which limited PyTorch to only using cpu inference. Spinning this up provided me a local (and free!) endpoint which could take my original sample image and return one with the background removed as shown below:&lt;/p&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img src="/Content/MLinUWP/CrossEyed-Original.png" class="img-responsive" style="margin: auto; max-width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Original"/&gt;&lt;/td&gt;
&lt;td&gt;&lt;img src="/Content/MLinUWP/CrossEyed-u2net-local.png" class="img-responsive" style="margin: auto; max-width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Background Removed"/&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;Original&lt;/td&gt;
&lt;td style="text-align: center"&gt;U²-Net Result&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;For some this would be enough and, accordingly, I pushed the &lt;a href="https://hub.docker.com/r/ibebbs/u2net-http"&gt;docker image&lt;/a&gt; and &lt;a href="https://github.com/ibebbs/U2Net-cpu-HTTP"&gt;associated repository&lt;/a&gt; for others to use (please star them should you find them useful/helpful).&lt;/p&gt;
&lt;p&gt;But... why pay for docker instance hosting when my users could perform the inference on their own machines from within a UWP app?&lt;/p&gt;
&lt;h2 id="the-hard-way"&gt;The &amp;quot;Hard&amp;quot; Way&lt;/h2&gt;
&lt;p&gt;For those that are unaware, Windows actually ships with strong support for machine learning in UWP via the &lt;a href="https://docs.microsoft.com/en-us/uwp/api/windows.ai.machinelearning?view=winrt-19041"&gt;Windows.AI.MachineLearning&lt;/a&gt; namespace. Using the types provided here, a developer is able to load and perform inference using ONNX (Open Neural Network eXchange) models (up to version 1.4 -opset 9) in a (relatively) straight forward manner.&lt;/p&gt;
&lt;p&gt;However, in accordance with their strategy of decoupling core technologies from releases of the OS, Microsoft have recently shifted development toward the &lt;a href="https://github.com/Microsoft/onnxruntime"&gt;open-source&lt;/a&gt; &lt;a href="https://www.nuget.org/packages/Microsoft.AI.MachineLearning"&gt;Microsoft.AI.MachineLearning&lt;/a&gt; nuget package. This package can can be installed on any recent build of windows (I believe back to 18362) and provides compatibility for the very latest ONNX models (versiol 1.7 - opset 12).&lt;/p&gt;
&lt;p&gt;Given, PyTorch (the ML framework used for U²-Net) has strong support for exporting to ONNX, my challenge was clear:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Export a fully weighted U²-Net model from PyTorch to ONNX.&lt;/li&gt;
&lt;li&gt;Use the Microsoft.AI.MachineLearning package to load the ONNX model.&lt;/li&gt;
&lt;li&gt;Write code to process a source image into U²-Net's input tensor.&lt;/li&gt;
&lt;li&gt;Use the ONNX model to perform inference on the input image.&lt;/li&gt;
&lt;li&gt;Write code to process a result image using U²-Net's output tensor as an alpha channel.&lt;/li&gt;
&lt;li&gt;Test&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Now, while none of these tasks are super-difficult, you will need to be fairly analytical as they involve interpreting Python code (along with lots of Python packages) and byte bashing pixel data to/from 4 dimensional arrays.&lt;/p&gt;
&lt;h3 id="exporting-from-pytorch-to-onnx"&gt;Exporting from PyTorch to ONNX&lt;/h3&gt;
&lt;p&gt;Given we already have a docker image that has everything needed to perform inference using U²-Net, I am going to use this image to export the ONNX model. This can be achieved by running the docker image and overriding the entry-point such that we get access to a command prompt; like so:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;docker run -it --entrypoint /bin/bash ibebbs/u2net-http
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Once we have access to a command prompt within the container, we can use Python interactively to load and export the ONNX model. So, from the container's command prompt, start Python (in the &lt;code&gt;U-2-Net&lt;/code&gt; directory) by running:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;cd U-2-Net
python3
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This will land you at the Python command prompt &lt;code&gt;&amp;gt;&amp;gt;&amp;gt;&lt;/code&gt; from which we can follow the steps in &lt;a href="https://github.com/ibebbs/U2Net-cpu-HTTP/blob/master/u2net.py"&gt;&lt;code&gt;u2net.py&lt;/code&gt;&lt;/a&gt; to load the model as shown below (many of these imports are unnessary but it was just easier to include them all):&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;import sys
sys.path.insert(0, 'U-2-Net')

from skimage import io, transform
import torch
import torchvision
from torch.autograd import Variable
import torch.nn as nn
import torch.nn.functional as F
from torch.utils.data import Dataset, DataLoader
from torchvision import transforms

from torch.utils.data import Dataset, DataLoader

import numpy as np
from PIL import Image

from data_loader import RescaleT
from data_loader import ToTensorLab

from model import U2NET

model_dir = './saved_models/u2net/u2net.pth'
net = U2NET(3, 1)
net.load_state_dict(torch.load(model_dir, map_location=torch.device('cpu')))
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;At this point we have the &lt;code&gt;net&lt;/code&gt; variable loaded with the U²-Net architecture and weights from &amp;quot;u2net.pth&amp;quot;. Now we need to export this variable as an ONNX model.&lt;/p&gt;
&lt;p&gt;Fortunately, PyTorch has some excellent documentation for exporting ONNX (for example &lt;a href="https://pytorch.org/tutorials/advanced/super_resolution_with_onnxruntime.html?highlight=onnx"&gt;here&lt;/a&gt; and &lt;a href="https://pytorch.org/docs/master/onnx.html"&gt;here&lt;/a&gt;) which made exporting the model fairly trivial:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;import torch.onnx
dummy_input = torch.randn(1, 3, 320, 320, device='cpu')
input_names = [ &amp;quot;input&amp;quot; ]
output_names = [ &amp;quot;o0&amp;quot;, &amp;quot;o1&amp;quot;, &amp;quot;o2&amp;quot;, &amp;quot;o3&amp;quot;, &amp;quot;o4&amp;quot;, &amp;quot;o5&amp;quot;, &amp;quot;o6&amp;quot; ]
torch.onnx.export(net, dummy_input, &amp;quot;u2net.onnx&amp;quot;, export_params=True, opset_version=12, input_names=input_names, output_names=output_names)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Here we create a random dummy input, name the input and output tensors and then export the model to ONNX using the latest operator set (&lt;code&gt;opset_version=12&lt;/code&gt;).&lt;/p&gt;
&lt;p&gt;This will take a few seconds and you might see a few warnings about various functions having been deprecated but, once complete, if you exit interactive Python (using &lt;code&gt;exit()&lt;/code&gt;) and return to the container's command prompt, you should be able to see a &amp;quot;u2net.onnx&amp;quot; file in the directory as shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;gt;&amp;gt;&amp;gt; exit()
root&amp;#64;88fa6881c8ea:/app/U-2-Net# dir
LICENSE    __pycache__     figures  saved_models  u2net.onnx     u2net_train.py
README.md  data_loader.py  model    test_data     u2net_test.py
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You now need to extract the &amp;quot;u2net.onnx&amp;quot; from the container. There are many ways to do this, for me the easiest was to use &lt;a href="https://en.wikipedia.org/wiki/Secure_copy_protocol"&gt;&amp;quot;secure copy&amp;quot;&lt;/a&gt; to transfer the file to my machine, but do whatever is easiest for you.&lt;/p&gt;
&lt;h3 id="load-the-onnx-model-from-a-uwp-app"&gt;Load the ONNX model from a UWP app&lt;/h3&gt;
&lt;p&gt;With the &amp;quot;u2net.onnx&amp;quot; model in hand, we're now going to use the &lt;code&gt;Microsoft.AI.MachineLearning&lt;/code&gt; package to load the model in preparation for running inference.&lt;/p&gt;
&lt;p&gt;Before we create the UWP app though, we're going to install the &lt;a href="https://marketplace.visualstudio.com/items?itemName=WinML.mlgenv2"&gt;&amp;quot;Windows Machine Learning Code Generator&amp;quot;&lt;/a&gt; extension which automatically scaffolds code for interacting with an ONNX model and makes getting started with ML super-easy. So, start VS and install the extension before continuing to the next step (if you're not using VS or would prefer not to install the extension, you can simply copy the file generated in the next step from &lt;a href="https://github.com/ibebbs/UwpMl/blob/master/UwpMl/u2net.cs%5D"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Now, from Visual Studio and with the extension installed, create a new UWP project - I named mine &amp;quot;UwpMl&amp;quot; - and add the &amp;quot;u2net.onnx&amp;quot; model to the Assets folder. As you do so, you should see that a &amp;quot;u2net.cs&amp;quot; file is also added to the project thanks to the &amp;quot;Windows Machine Learning Code Generator&amp;quot; extension. Opening this file should show class definitions similar to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;// This file was automatically generated by VS extension Windows Machine Learning Code Generator v3
// from model file u2net.onnx
// Warning: This file may get overwritten if you add add an onnx file with the same name
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Windows.Media;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.AI.MachineLearning;
namespace UwpMl
{
    
    public sealed class u2netInput
    {
        public TensorFloat input; // shape(1,3,320,320)
    }
    
    public sealed class u2netOutput
    {
        public TensorFloat o0; // shape(1,1,320,320)
        public TensorFloat o1; // shape(1,1,320,320)
        public TensorFloat o2; // shape(1,1,320,320)
        public TensorFloat o3; // shape(1,1,320,320)
        public TensorFloat o4; // shape(1,1,320,320)
        public TensorFloat o5; // shape(1,1,320,320)
        public TensorFloat o6; // shape(1,1,320,320)
    }
    
    public sealed class u2netModel
    {
        private LearningModel model;
        private LearningModelSession session;
        private LearningModelBinding binding;
        public static async Task&amp;lt;u2netModel&amp;gt; CreateFromStreamAsync(IRandomAccessStreamReference stream)
        {
            u2netModel learningModel = new u2netModel();
            learningModel.model = await LearningModel.LoadFromStreamAsync(stream);
            learningModel.session = new LearningModelSession(learningModel.model);
            learningModel.binding = new LearningModelBinding(learningModel.session);
            return learningModel;
        }
        public async Task&amp;lt;u2netOutput&amp;gt; EvaluateAsync(u2netInput input)
        {
            binding.Bind(&amp;quot;input&amp;quot;, input.input);
            var result = await session.EvaluateAsync(binding, &amp;quot;0&amp;quot;);
            var output = new u2netOutput();
            output.o0 = result.Outputs[&amp;quot;o0&amp;quot;] as TensorFloat;
            output.o1 = result.Outputs[&amp;quot;o1&amp;quot;] as TensorFloat;
            output.o2 = result.Outputs[&amp;quot;o2&amp;quot;] as TensorFloat;
            output.o3 = result.Outputs[&amp;quot;o3&amp;quot;] as TensorFloat;
            output.o4 = result.Outputs[&amp;quot;o4&amp;quot;] as TensorFloat;
            output.o5 = result.Outputs[&amp;quot;o5&amp;quot;] as TensorFloat;
            output.o6 = result.Outputs[&amp;quot;o6&amp;quot;] as TensorFloat;
            return output;
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Well, there you go. By just adding the &amp;quot;onnx&amp;quot; file to the project, we now have a &amp;quot;u2netModel&amp;quot; which is able to load the model (&lt;code&gt;CreateFromStreamAsync&lt;/code&gt;) and use it to perform inference (&lt;code&gt;EvaluateAsync&lt;/code&gt;).&lt;/p&gt;
&lt;p&gt;However, we should note the &lt;code&gt;using Windows.AI.MachineLearning;&lt;/code&gt; line. As discussed earlier, the &amp;quot;Windows.AI.MachineLearning&amp;quot; namespace is included as part of recent builds of Windows and, while it allows us to use ONNX models without any additional packages, it only supports ONNX models up to version 1.4 (opset 9). Given we exported the ONNX model for U²-Net using opset 12 we need to migrate to using the more recent &amp;quot;Microsoft.AI.MachineLearning&amp;quot; package. Fortunately this is very straight forward and simply involves installing the &lt;a href="https://www.nuget.org/packages/Microsoft.AI.MachineLearning/"&gt;&amp;quot;Microsoft.AI.MachineLearning&amp;quot; nuget package&lt;/a&gt; into the project then changing the above &lt;code&gt;using&lt;/code&gt; clause to &lt;code&gt;using Microsoft.AI.MachineLearning&lt;/code&gt;. Everything else remains the same.&lt;/p&gt;
&lt;p&gt;Next we'll implement a UI which will allow us to load the image on which we want to perform inference and which will display both input and output images. For simplicity, we'll eschew MVVM and use the code-behind file for &amp;quot;MainPage&amp;quot; to implement this functionality.&lt;/p&gt;
&lt;p&gt;So, in &amp;quot;MainPage.xaml&amp;quot;, add the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xaml"&gt;&amp;lt;Page
    x:Class=&amp;quot;UwpMl.MainPage&amp;quot;
    xmlns=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&amp;quot;
    xmlns:x=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml&amp;quot;
    xmlns:local=&amp;quot;using:UwpMl&amp;quot;
    xmlns:d=&amp;quot;http://schemas.microsoft.com/expression/blend/2008&amp;quot;
    xmlns:mc=&amp;quot;http://schemas.openxmlformats.org/markup-compatibility/2006&amp;quot;
    mc:Ignorable=&amp;quot;d&amp;quot;
    Background=&amp;quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&amp;quot;&amp;gt;

    &amp;lt;Grid&amp;gt;
        &amp;lt;Grid.RowDefinitions&amp;gt;
            &amp;lt;RowDefinition Height=&amp;quot;0.6*&amp;quot;/&amp;gt;
            &amp;lt;RowDefinition Height=&amp;quot;0.3*&amp;quot;/&amp;gt;
            &amp;lt;RowDefinition Height=&amp;quot;Auto&amp;quot;/&amp;gt;
        &amp;lt;/Grid.RowDefinitions&amp;gt;
        &amp;lt;Grid.ColumnDefinitions&amp;gt;
            &amp;lt;ColumnDefinition Width=&amp;quot;0.5*&amp;quot;/&amp;gt;
            &amp;lt;ColumnDefinition Width=&amp;quot;0.5*&amp;quot;/&amp;gt;
        &amp;lt;/Grid.ColumnDefinitions&amp;gt;
        &amp;lt;Image Grid.Column=&amp;quot;0&amp;quot; Source=&amp;quot;/Assets/Checkerboard.png&amp;quot; Width=&amp;quot;320&amp;quot; Height=&amp;quot;320&amp;quot; Stretch=&amp;quot;UniformToFill&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
        &amp;lt;Image Grid.Column=&amp;quot;0&amp;quot; x:Name=&amp;quot;sourceImage&amp;quot; Stretch=&amp;quot;None&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
        &amp;lt;Image Grid.Column=&amp;quot;1&amp;quot; Source=&amp;quot;/Assets/Checkerboard.png&amp;quot; Width=&amp;quot;320&amp;quot; Height=&amp;quot;320&amp;quot; Stretch=&amp;quot;UniformToFill&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
        &amp;lt;Image Grid.Column=&amp;quot;1&amp;quot;  x:Name=&amp;quot;targetImage&amp;quot; Stretch=&amp;quot;None&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
        &amp;lt;ScrollViewer Grid.Row=&amp;quot;1&amp;quot; Grid.ColumnSpan=&amp;quot;2&amp;quot; HorizontalScrollMode=&amp;quot;Auto&amp;quot; HorizontalScrollBarVisibility=&amp;quot;Auto&amp;quot; VerticalScrollMode=&amp;quot;Disabled&amp;quot; VerticalScrollBarVisibility=&amp;quot;Hidden&amp;quot;&amp;gt;
            &amp;lt;StackPanel Orientation=&amp;quot;Horizontal&amp;quot;&amp;gt;
                &amp;lt;Image x:Name=&amp;quot;o6&amp;quot; Grid.Row=&amp;quot;6&amp;quot; Stretch=&amp;quot;Uniform&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
                &amp;lt;Image x:Name=&amp;quot;o5&amp;quot; Grid.Row=&amp;quot;5&amp;quot; Stretch=&amp;quot;Uniform&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
                &amp;lt;Image x:Name=&amp;quot;o4&amp;quot; Grid.Row=&amp;quot;4&amp;quot; Stretch=&amp;quot;Uniform&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
                &amp;lt;Image x:Name=&amp;quot;o3&amp;quot; Grid.Row=&amp;quot;3&amp;quot; Stretch=&amp;quot;Uniform&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
                &amp;lt;Image x:Name=&amp;quot;o2&amp;quot; Grid.Row=&amp;quot;2&amp;quot; Stretch=&amp;quot;Uniform&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
                &amp;lt;Image x:Name=&amp;quot;o1&amp;quot; Grid.Row=&amp;quot;1&amp;quot; Stretch=&amp;quot;Uniform&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
            &amp;lt;/StackPanel&amp;gt;
        &amp;lt;/ScrollViewer&amp;gt;
        &amp;lt;StackPanel Grid.Row=&amp;quot;2&amp;quot; Orientation=&amp;quot;Horizontal&amp;quot; HorizontalAlignment=&amp;quot;Center&amp;quot; Margin=&amp;quot;4&amp;quot; Grid.ColumnSpan=&amp;quot;2&amp;quot;&amp;gt;
            &amp;lt;Button Content=&amp;quot;Go!&amp;quot; Padding=&amp;quot;32,16&amp;quot; Margin=&amp;quot;4&amp;quot; Click=&amp;quot;Button_Click&amp;quot;/&amp;gt;
        &amp;lt;/StackPanel&amp;gt;
    &amp;lt;/Grid&amp;gt;
&amp;lt;/Page&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Here you'll see that we add an &lt;code&gt;Image&lt;/code&gt; named &amp;quot;sourceImage&amp;quot; which is used to display the input image and another &lt;code&gt;Image&lt;/code&gt; named &amp;quot;targetImage&amp;quot; which is used to display the output. Behind these images I add additional &lt;code&gt;Image&lt;/code&gt; elements which display a checkerboard pattern; this is to demonstrate opacity in the target image and is completely optional but should you wish to display these you can find the &amp;quot;Checkerboard.png&amp;quot; file &lt;a href="https://github.com/ibebbs/UwpMl/blob/master/UwpMl/Assets/Checkerboard.png"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Underneath these images I add a horizontally oriented &lt;code&gt;StackPanel&lt;/code&gt; containing further &lt;code&gt;Image&lt;/code&gt; elements. These are used to display the intermediate results of the U²-Net architecture which I found very useful for debugging but again is completely optional as it has no bearing on the final output.&lt;/p&gt;
&lt;p&gt;Finally, in the bottom row of the UI we have a &lt;code&gt;StackPanel&lt;/code&gt; containing a singular &lt;code&gt;Button&lt;/code&gt; displaying the content &amp;quot;Go!&amp;quot;. This button will be used to load and display an image, perform inference and, finally, display the output image. We'll use the &amp;quot;Click&amp;quot; event to invoke this functionality in the &amp;quot;MainPage.xaml.cs&amp;quot; file as shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using Microsoft.AI.MachineLearning;
using System;
using System.Threading.Tasks;
using Windows.Graphics.Imaging;
using Windows.Storage;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

namespace UwpMl
{
    /// &amp;lt;summary&amp;gt;
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// &amp;lt;/summary&amp;gt;
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private async void Button_Click(object sender, RoutedEventArgs e)
        {
            // Use Picket to get file
            var file = await GetImageFile();

            SoftwareBitmap softwareBitmap;
            byte[] bytes;


            // Load image &amp;amp; scale to tensor input dimensions
            using (IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read))
            {
                bytes = await GetImageAsByteArrayAsync(stream, 320, 320, BitmapPixelFormat.Rgba8);
                softwareBitmap = await GetImageAsSoftwareBitmapAsync(stream, 320, 320, BitmapPixelFormat.Bgra8);
            }

            // Display source image
            var source = new SoftwareBitmapSource();
            await source.SetBitmapAsync(softwareBitmap);

            sourceImage.Source = source;

            // Convert rgba-rgba-...-rgba to bb...b-rr...r-gg...g as colour weighted tensor (0..1)
            var input = TensorFloat.CreateFromIterable(new long[] { 1, 3, 320, 320 }, TensorBrg(bytes));

            // Load model &amp;amp; perform inference
            StorageFile modelFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri($&amp;quot;ms-appx:///Assets/u2net.onnx&amp;quot;));
            u2netModel model = await u2netModel.CreateFromStreamAsync(modelFile);
            u2netOutput output = await model.EvaluateAsync(new u2netInput { input = input });

            // Display intermediate results
            await ToImage(output.o6, o6);
            await ToImage(output.o5, o5);
            await ToImage(output.o4, o4);
            await ToImage(output.o3, o3);
            await ToImage(output.o2, o2);
            await ToImage(output.o1, o1);

            // Display final result using the tensor as alpha mask on source image
            await ToImage(bytes, output.o0, targetImage);
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;As you can see, quality has been traded for clarity here to ensure the flow of how an image is retrieved and passed to a &lt;code&gt;u2netmodel&lt;/code&gt; instance is clear. Pasting this code into &amp;quot;MainPage.xaml.cs&amp;quot; will give you a bunch of red squigglies indicating undefined methods which we'll implement next, starting with the easy bits:&lt;/p&gt;
&lt;h4 id="getimagefile"&gt;GetImageFile&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private async Task&amp;lt;StorageFile&amp;gt; GetImageFile()
{
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
    picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
    picker.FileTypeFilter.Add(&amp;quot;.jpg&amp;quot;);
    picker.FileTypeFilter.Add(&amp;quot;.jpeg&amp;quot;);
    picker.FileTypeFilter.Add(&amp;quot;.png&amp;quot;);

    var file = await picker.PickSingleFileAsync();

    return file;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This code uses a file picker to allow the user to select the source image.&lt;/p&gt;
&lt;h4 id="getimageassoftwarebitmapasync"&gt;GetImageAsSoftwareBitmapAsync&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private async Task&amp;lt;SoftwareBitmap&amp;gt; GetImageAsSoftwareBitmapAsync(IRandomAccessStream stream, uint width, uint height, BitmapPixelFormat pixelFormat)
{
    BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);

    var transform = new BitmapTransform() { ScaledWidth = width, ScaledHeight = height, InterpolationMode = BitmapInterpolationMode.NearestNeighbor };
    var softwareBitmap = await decoder.GetSoftwareBitmapAsync(pixelFormat, BitmapAlphaMode.Premultiplied, transform, ExifOrientationMode.IgnoreExifOrientation, ColorManagementMode.DoNotColorManage);

    return softwareBitmap;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This code loads an image from the specified &lt;code&gt;IRandomAccessStream&lt;/code&gt; and uses a &lt;code&gt;BitmapTransform&lt;/code&gt; and a &lt;code&gt;BitmapPixelFormat&lt;/code&gt; to transform the source image to the desired size and pixel format for displaying in the UI. Finally it returns a &lt;code&gt;SoftwareBitmap&lt;/code&gt; which can be conveniently displayed.&lt;/p&gt;
&lt;h4 id="getimageasbytearrayasync"&gt;GetImageAsByteArrayAsync&lt;/h4&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private async Task&amp;lt;byte[]&amp;gt; GetImageAsByteArrayAsync(IRandomAccessStream stream, uint width, uint height, BitmapPixelFormat pixelFormat)
{
    BitmapDecoder decoder = await BitmapDecoder.CreateAsync(stream);

    var transform = new BitmapTransform() { ScaledWidth = width, ScaledHeight = height, InterpolationMode = BitmapInterpolationMode.NearestNeighbor };
    var data = await decoder.GetPixelDataAsync(pixelFormat, BitmapAlphaMode.Premultiplied, transform, ExifOrientationMode.IgnoreExifOrientation, ColorManagementMode.DoNotColorManage);

    return data.DetachPixelData();
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This code loads an image from the specified &lt;code&gt;IRandomAccessStream&lt;/code&gt; and uses a &lt;code&gt;BitmapTransform&lt;/code&gt; and a &lt;code&gt;BitmapPixelFormat&lt;/code&gt; to transform the source image to the desired size and pixel format for convenient translation into our ONNX model. Finally it returns a &lt;code&gt;byte[]&lt;/code&gt; representing the transformed image.&lt;/p&gt;
&lt;p&gt;Now comes the tricky bits...&lt;/p&gt;
&lt;h3 id="transform-the-source-image-into-u2-nets-input-tensor"&gt;Transform the source image into U²-Net's input tensor.&lt;/h3&gt;
&lt;p&gt;To perform inference, the input image needs to be translated into a &amp;quot;Tensor&amp;quot;. Don't let the terminology scare you here, a &amp;quot;tensor&amp;quot; is simply a multi-dimensional array of floating point numbers with a defined &amp;quot;shape&amp;quot; (i.e. the size of each dimension). We can see the desired &amp;quot;shape&amp;quot; of the input tensor by looking at the &lt;code&gt;u2netInput&lt;/code&gt; class which contains the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public sealed class u2netInput
{
    public TensorFloat input; // shape(1,3,320,320)
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;In case it's not apparent, the sizes of each dimension relate to the values per pixel (3 - red, green &amp;amp; blue) along with the height (320 pixels) and width (320 pixels) dimensions of the source image. We needn't worry about the initial dimension here which - in this instance - just acts as a &amp;quot;container&amp;quot; for the other dimensions and will always have a size of 1.&lt;/p&gt;
&lt;p&gt;Now, while translating our input image into this tensor, it's important to ensure we provide the tensor values in the format/order the underlying model expects them. Specifically here we must:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Provide multiple greyscale images&lt;br /&gt;
Given the shape of this input tensor - (3, 320, 320) - we can see the model is expecting to see 3 greyscale images, sized 320x320 apiece, with each &amp;quot;grayscale&amp;quot; image calculated from one of the input image's colour channels. Furthermore, careful examination of &lt;a href="https://github.com/NathanUA/U-2-Net/blob/0b27f5cc958bac88825b1001f8245f663faeb1b8/data_loader.py#L218"&gt;&lt;code&gt;data_loader.py&lt;/code&gt;&lt;/a&gt; shows that the model is expecting these images in blue, red, green order. This means that our (scaled) input image needs to be translated such that the index [1,1,1] - which would ordinarily return the red component of the top left pixel - returns the blue component of the top left pixel instead, and the index [2,1,1] - which would return the red component of the second pixel from the left on the top row of the image - instead returns the red component of the top left pixel of the image. And so on and so forth.&lt;/li&gt;
&lt;li&gt;&amp;quot;Normalize&amp;quot; pixel values&lt;br /&gt;
Pixels in our input image are in the Rgba8 format (as shown in the call to &lt;code&gt;GetImageAsByteArrayAsync&lt;/code&gt;) meaning each pixel is composed of 4 channels (red, green, blue and alpha) and each channel is represented by a single byte ranging in value from 0 to 255. Each of these pixel values need to be translated into a value between 0 and 1 and &amp;quot;normalized&amp;quot; with a &lt;a href="https://github.com/NathanUA/U-2-Net/blob/0b27f5cc958bac88825b1001f8245f663faeb1b8/data_loader.py#L212"&gt;channel specific divisor&lt;/a&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;I implement these considerations in the &lt;code&gt;TensorBrg&lt;/code&gt; method as shown here:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public IEnumerable&amp;lt;float&amp;gt; TensorBrg(byte[] bytes)
{
    // Original in rgb (0,1,2), we want brg(2,0,1)

    // Return the blue channel
    for (int i = 2; i &amp;lt; bytes.Length; i += 4)
    {
        var b = Convert.ToSingle(((bytes[i] / 255.0) - 0.406) / 0.225);
        yield return b;
    }

    // Return the red channel
    for (int i = 0; i &amp;lt; bytes.Length; i += 4)
    {
        var r = Convert.ToSingle(((bytes[i] / 255.0) - 0.485) / 0.229);
        yield return r;
    }

    // Return the green channel
    for (int i = 1; i &amp;lt; bytes.Length; i += 4)
    {
        var g = Convert.ToSingle(((bytes[i] / 255.0) - 0.456) / 0.224);
        yield return g;
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This method uses the &lt;code&gt;yield return&lt;/code&gt; keyword to return the result of the mapping as an IEnumerable&lt;float&gt; thereby alleviating the need for an intermediate buffer and is used as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;// Convert rgba-rgba-...-rgba to bb...b-rr...r-gg...g as colour weighted tensor (0..1)
TensorFloat input = TensorFloat.CreateFromIterable(new long[] { 1, 3, 320, 320 }, TensorBrg(bytes));
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="perform-inference"&gt;Perform inference&lt;/h3&gt;
&lt;p&gt;Now we have a tensor of the expected shape containing the expected values, we're able to use our ONNX model to perform inference. This is - thanks to the &amp;quot;Windows Machine Learning Code Generator&amp;quot; - extremely easy as shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;// Load model &amp;amp; perform inference
StorageFile modelFile = await StorageFile.GetFileFromApplicationUriAsync(new Uri($&amp;quot;ms-appx:///Assets/u2net.onnx&amp;quot;));
u2netModel model = await u2netModel.CreateFromStreamAsync(modelFile);
u2netOutput output = await model.EvaluateAsync(new u2netInput { input = input });
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And that's it. We have successfully used an ONNX model to perform inference using a state-of-the-art machine learning model. Just one small thing left... interpreting the results.&lt;/p&gt;
&lt;h3 id="transform-the-source-image-into-target-image-using-u2-nets-output-tensor-as-an-alpha-channel"&gt;Transform the source image into target image using U²-Net's output tensor as an alpha channel.&lt;/h3&gt;
&lt;p&gt;We have two methods left to implement: &lt;code&gt;ToImage&lt;/code&gt; &amp;amp; &lt;code&gt;ToBlendedImage&lt;/code&gt;. The first of these takes an output tensor and converts it to a grey scale image. This method is used with the &amp;quot;intermediate&amp;quot; output tensors to show the progression towards the result and is really just used for debugging purposes or out of interest. The code is shown here:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private async Task ToImage(TensorFloat tensorFloat, Image image)
{
    var pixels = tensorFloat
            .GetAsVectorView()
            .SelectMany(
                f =&amp;gt;
                {
                    byte v = Convert.ToByte(f * 255);
                    return new byte[] { v, v, v, 255 };
                })
            .ToArray();

    var writeableBitmap = new WriteableBitmap(320, 320);

    // Open a stream to copy the image contents to the WriteableBitmap's pixel buffer 
    using (Stream stream = writeableBitmap.PixelBuffer.AsStream())
    {
        await stream.WriteAsync(pixels, 0, pixels.Length);
    }

    var dest = SoftwareBitmap.CreateCopyFromBuffer(writeableBitmap.PixelBuffer, BitmapPixelFormat.Bgra8, 320, 320, BitmapAlphaMode.Premultiplied);
    var destSouce = new SoftwareBitmapSource();
    await destSouce.SetBitmapAsync(dest);

    image.Source = destSouce;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Conversely, &lt;code&gt;ToBlendedImage&lt;/code&gt; composes our desired output image by using the final output tensor of the U²-Net model as both a mask and an alpha channel for the input image. This is shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private IEnumerable&amp;lt;byte&amp;gt; ApplyTensorAsMask(byte[] data, TensorFloat tensorFloat, float cutoff)
{
    var tensorData = tensorFloat.GetAsVectorView().ToArray();

    for (int i = 0; i &amp;lt; data.Length; i += 4)
    {
        var alpha = Math.Clamp(tensorData[i / 4], 0, 1);

        if (alpha &amp;gt; cutoff)
        {
            yield return Convert.ToByte(data[i + 2] * alpha);
            yield return Convert.ToByte(data[i + 1] * alpha);
            yield return Convert.ToByte(data[i + 0] * alpha);
            yield return Convert.ToByte(alpha * 255);
        }
        else
        {
            yield return 0;
            yield return 0;
            yield return 0;
            yield return 0;
        }

    }
}

private async Task ToBlendedImage(byte[] data, TensorFloat tensorFloat, Image target)
{
    var image = ApplyTensorAsMask(data, tensorFloat, 0.0f).ToArray();
    var writeableBitmap = new WriteableBitmap(320, 320);

    // Open a stream to copy the image contents to the WriteableBitmap's pixel buffer 
    using (Stream stream = writeableBitmap.PixelBuffer.AsStream())
    {
        await stream.WriteAsync(image, 0, image.Length);
    }

    var dest = SoftwareBitmap.CreateCopyFromBuffer(writeableBitmap.PixelBuffer, BitmapPixelFormat.Bgra8, 320, 320, BitmapAlphaMode.Premultiplied);
    var destSouce = new SoftwareBitmapSource();
    await destSouce.SetBitmapAsync(dest);

    target.Source = destSouce;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;With these methods implemented, there should be no more sqigglies in our &lt;code&gt;MainPage.xaml.cs&lt;/code&gt; and we should be able to successfully compile and run the project.&lt;/p&gt;
&lt;h3 id="testing"&gt;Testing&lt;/h3&gt;
&lt;p&gt;Run the project and click the &amp;quot;Go!&amp;quot; button. While you are free to use any source image you like to test the code above, I would suggest that, when prompted for a source image, you use one of the &lt;a href="https://github.com/NathanUA/U-2-Net/tree/master/test_data/test_images"&gt;test images provided by U²-Net&lt;/a&gt;; in the screen shot below I've used &lt;a href="https://github.com/NathanUA/U-2-Net/blob/master/test_data/test_images/bike.jpg"&gt;bike.jpg&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;After selecting the image, it will be scaled and displayed in the UI before performing inference and displaying the output images. It should only take a few seconds for the output image to appear and, of this time, inference via the ONNX model should - depending on your hardware - be less than a second. This shows that there is significant potential for optimization in the preparation of the input tensor and the processing of the output tensor but, given &lt;a href="https://stackify.com/premature-optimization-evil/"&gt;premature optimisation is the root of all evil&lt;/a&gt;, I didn't attempt to optimize these processes and instead just focused on getting the solution running.&lt;/p&gt;
&lt;p&gt;Anyway, once processing is complete, you should see something similar to this:&lt;/p&gt;
&lt;img src="/Content/MLinUWP/UWP Background Removal.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="UWP Background Removal"/&gt;
&lt;p&gt;Nice! Let's compare it to the docker produced image of my girl above:&lt;/p&gt;
&lt;img src="/Content/MLinUWP/CrossEyed-u2net-UWP.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="CrossEyed Background Removal from UWP"/&gt;
&lt;p&gt;That is pretty good, just as fast as as the Docker solution and doesn't require an internet connection. Sweet!&lt;/p&gt;
&lt;h1 id="bonus"&gt;Bonus&lt;/h1&gt;
&lt;p&gt;Now we're able to remove backgrounds using a state-of-the-art machine learning model both in and out of process, let's revisit the &amp;quot;Premier League Player of the Month&amp;quot; to see if we can easily create one of our own. Quickly combining the following XAML with a processed image of my boy gives us:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xaml"&gt;&amp;lt;Viewbox&amp;gt;
    &amp;lt;Canvas xmlns=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&amp;quot; xmlns:x=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml&amp;quot; x:Name=&amp;quot;Layer_3_0&amp;quot; Width=&amp;quot;640.089&amp;quot; Height=&amp;quot;896.125&amp;quot; Canvas.Left=&amp;quot;0&amp;quot; Canvas.Top=&amp;quot;0&amp;quot;&amp;gt;
        &amp;lt;Path Width=&amp;quot;594.812&amp;quot; Height=&amp;quot;887.356&amp;quot; Canvas.Left=&amp;quot;0.00104256&amp;quot; Canvas.Top=&amp;quot;6.10352e-005&amp;quot; Stretch=&amp;quot;Fill&amp;quot; Fill=&amp;quot;#FF3C9A24&amp;quot; Data=&amp;quot;...&amp;quot;/&amp;gt;
        &amp;lt;controls:DropShadowPanel BlurRadius=&amp;quot;50.0&amp;quot; ShadowOpacity=&amp;quot;0.80&amp;quot; OffsetX=&amp;quot;114.0&amp;quot; OffsetY=&amp;quot;0.0&amp;quot; Color=&amp;quot;#AF000000&amp;quot;&amp;gt;
            &amp;lt;Image Source=&amp;quot;Assets/Poopi.png&amp;quot; Width=&amp;quot;640&amp;quot; Height=&amp;quot;547&amp;quot; /&amp;gt;
        &amp;lt;/controls:DropShadowPanel&amp;gt;
        &amp;lt;Rectangle Width=&amp;quot;595&amp;quot; Height=&amp;quot;50&amp;quot; Canvas.Top=&amp;quot;494&amp;quot; &amp;gt;
            &amp;lt;Rectangle.Fill&amp;gt;
                &amp;lt;LinearGradientBrush EndPoint=&amp;quot;0.5,1&amp;quot; StartPoint=&amp;quot;0.5,0&amp;quot;&amp;gt;
                    &amp;lt;GradientStop Color=&amp;quot;#00000000&amp;quot;/&amp;gt;
                    &amp;lt;GradientStop Color=&amp;quot;#7F000000&amp;quot; Offset=&amp;quot;1&amp;quot;/&amp;gt;
                &amp;lt;/LinearGradientBrush&amp;gt;
            &amp;lt;/Rectangle.Fill&amp;gt;
        &amp;lt;/Rectangle&amp;gt;
        &amp;lt;Canvas x:Name=&amp;quot;Layer_4&amp;quot; Width=&amp;quot;640.089&amp;quot; Height=&amp;quot;855&amp;quot; Canvas.Left=&amp;quot;0&amp;quot; Canvas.Top=&amp;quot;91&amp;quot;&amp;gt;
            &amp;lt;Path Width=&amp;quot;868.328&amp;quot; Height=&amp;quot;171.341&amp;quot; Canvas.Left=&amp;quot;-138.987&amp;quot; Canvas.Top=&amp;quot;437.023&amp;quot; Stretch=&amp;quot;Fill&amp;quot; Fill=&amp;quot;#FFD7533E&amp;quot; Data=&amp;quot;...&amp;quot;/&amp;gt;
        &amp;lt;/Canvas&amp;gt;
        &amp;lt;TextBlock Text=&amp;quot;POOPI&amp;quot; Canvas.Left=&amp;quot;29&amp;quot; Canvas.Top=&amp;quot;553&amp;quot; Height=&amp;quot;119&amp;quot; Width=&amp;quot;532&amp;quot; FontFamily=&amp;quot;Impact&amp;quot; FontSize=&amp;quot;96&amp;quot; Foreground=&amp;quot;White&amp;quot; TextAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
    &amp;lt;/Canvas&amp;gt;
&amp;lt;/Viewbox&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;img src="/Content/MLinUWP/Poopi.png" class="img-responsive" style="margin: auto; max-width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Poopi"/&gt;
&lt;p&gt;Yup, that works.&lt;/p&gt;
&lt;p&gt;(Sorry son but, after what happened Sunday, you deserve it ;0)&lt;/p&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;As you can see, using state-of-the machine learning models from UWP is fairly straight forward and certainly not any more complicated than using them from Python. UWP - via &amp;quot;Microsoft.AI.MachineLearning&amp;quot; - has excellent support for the very latest versions of ONNX and, given most mainstream machine learning frameworks can export to ONNX, allows UWP developers to easily leverage the entire vista of modern machine learning algorithms for their purposes (resources permitting).&lt;/p&gt;
&lt;p&gt;The source code for this article can be found in my &lt;a href="https://github.com/ibebbs/UwpMl"&gt;UwpMl repository&lt;/a&gt; on GitHub; please star it if you find it helpful or informative. Should you have any questions or comments, please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Running UWP on a Raspberry Pi Using Uno Platform</title>
			<link>http://ian.bebbs.co.uk/posts/UnoPi</link>
			<description>&lt;p&gt;A few days ago I showed how the recent &lt;a href="https://platform.uno/blog/announncing-uno-platform-3-0-linux-support-fluent-material-and-more/"&gt;v3 release&lt;/a&gt; of the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; allowed you to run UWP apps on Linux. This was fantastic but really only half the story I wanted to tell. What I really wanted to do was see if I could get an app written in my favourite UI framework running on my favourite SBC; to wit, UWP on the the &lt;a href="https://www.raspberrypi.org/"&gt;Raspberry Pi&lt;/a&gt;. In this post I show how, yet again, the Uno team have made this not only possible but startlingly easy and shockingly powerful.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UnoPi</guid>
			<pubDate>Thu, 20 Aug 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;A few days ago I showed how the recent &lt;a href="https://platform.uno/blog/announncing-uno-platform-3-0-linux-support-fluent-material-and-more/"&gt;v3 release&lt;/a&gt; of the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; allowed you to run UWP apps on Linux. This was fantastic but really only half the story I wanted to tell. What I really wanted to do was see if I could get an app written in my favourite UI framework running on my favourite SBC; to wit, UWP on the the &lt;a href="https://www.raspberrypi.org/"&gt;Raspberry Pi&lt;/a&gt;. In this post I show how, yet again, the Uno team have made this not only possible but startlingly easy and shockingly powerful.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;In my last post &lt;a href="https://ian.bebbs.co.uk/posts/UnoLinux"&gt;&amp;quot;Running UWP on Linux With Uno&amp;quot;&lt;/a&gt;, I used the Uno Platform to write a UWP app which could run on Linux under WSL2. This was a great proof-of-concept and showed that, despite only in preview, Uno's support for UWP under Linux was &lt;a href="https://ian.bebbs.co.uk/posts/UnoLinux#bonus"&gt;more than skin deep&lt;/a&gt;. However, running UWP in Linux on the desktop, while cool, wasn't my primary motivator here. No, what I really wanted to do was run a UWP app on a &lt;a href="https://www.raspberrypi.org/"&gt;Raspberry Pi&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Now, those who have worked in the UWP space for a while probably know that you've been able to run UWP on a Pi for some time via &lt;a href="https://docs.microsoft.com/en-us/windows/iot-core/windows-iot-core"&gt;Windows 10 IoT Core&lt;/a&gt;. Unfortunately Windows 10 IoT Core seems destined for the same fate as many cool Microsoft technologies, namely &lt;a href="https://reddwarf.fandom.com/wiki/Silicon_Heaven"&gt;silicon heaven&lt;/a&gt;. The last release of Windows 10 IoT Core was back in 2018 and, despite &lt;a href="https://www.raspberrypi.org/products/raspberry-pi-4-model-b/"&gt;a new and incredibly powerful Raspberry Pi coming to market&lt;/a&gt;, there are no signs of a compatible Windows 10 IoT Core release coming any time soon.&lt;/p&gt;
&lt;p&gt;Furthermore, the choice to use Windows 10 IoT Core on a Raspberry Pi was a costly one. While you got to run a UWP app, you did so at the expense of huge swathes of other software, open-source libraries, educational material and community support which are available for the Raspberry Pi when running a Linux variant. Indeed, while .NET now enjoys excellent support for interfacing with electronic devices via the &lt;a href="https://github.com/dotnet/iot"&gt;&amp;quot;dotnet/iot&amp;quot;&lt;/a&gt; library, when Windows 10 IoT Core was first released, just toggling a GPIO pin was a somewhat tricky proposition.&lt;/p&gt;
&lt;p&gt;As such I run &lt;a href="https://en.wikipedia.org/wiki/Raspberry_Pi_OS"&gt;Raspberry Pi OS&lt;/a&gt; (formerly Raspbian) on almost all of the (&lt;a href="https://discord.com/channels/372137812037730304/550416151172087808/743474362002440302"&gt;embarrassingly large number of&lt;/a&gt;) Pi's I own. This has lead to my development on the Pi being mainly being targeted at console apps via .NET Core's support for Linux.&lt;/p&gt;
&lt;p&gt;But no more...&lt;/p&gt;
&lt;h2 id="uwp-on-raspberry-pi-os"&gt;UWP on Raspberry Pi OS&lt;/h2&gt;
&lt;p&gt;The Uno team have made compiling a UWP app for the Raspberry Pi almost embarrassingly easy. Assuming you have a Windows PC with &lt;a href="https://dotnet.microsoft.com/download/visual-studio-sdks"&gt;.NET Core SDK v3.1&lt;/a&gt; and the &lt;a href="https://www.nuget.org/packages/Uno.ProjectTemplates.Dotnet"&gt;pre-release Uno Project Templates&lt;/a&gt; installed, and assuming you have a Raspberry Pi running 32-bit Raspberry Pi OS (and which has SSH &amp;amp; GTK correctly configured), then Uno's basic &amp;quot;Hello world&amp;quot; app can be run on the Pi by simply doing the following (note the change in prompt towards the bottom as we shift from executing commands on Windows to executing them remotely on the Pi):&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;PS&amp;gt; mkdir UnoHelloWorld
PS&amp;gt; cd UnoHelloWorld
PS&amp;gt; dotnet new unoapp
PS&amp;gt; cd UnoHelloWorld.Skia.Gtk
PS&amp;gt; dotnet build
PS&amp;gt; dotnet publish --runtime linux-arm -c Release --self-contained
PS&amp;gt; scp -rp bin\Release\netcoreapp3.1\linux-arm\publish pi&amp;#64;[RPI IP ADDRESS]:~/UnoHelloWorld
PS&amp;gt; ssh pi&amp;#64;[RPI IP ADDRESS]
pi&amp;#64;raspberrypi:~ $ cd UnoHelloWorld
pi&amp;#64;raspberrypi:~/UnoHelloWorld $ chmod +x UnoHelloWorld.Skia.Gtk
pi&amp;#64;raspberrypi:~/UnoHelloWorld $ export DISPLAY=:0
pi&amp;#64;raspberrypi:~/UnoHelloWorld $ ./UnoHelloWorld.Skia.Gtk
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If everything was setup correctly, you should see something like this on the Raspberry Pi screen:&lt;/p&gt;
&lt;img src="/Content/UnoPi/UnoHelloWorld on Raspberry Pi.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="UnoHelloWorld on Raspberry Pi"/&gt;
&lt;p&gt;A UWP app, running under Raspberry Pi OS on a Raspberry Pi 3B+. As I said, almost embarrassingly easy!&lt;/p&gt;
&lt;h2 id="performance"&gt;Performance&lt;/h2&gt;
&lt;p&gt;So, after showing that we could run a UWP app on the Pi, I was interested to compare the performance of an app running on the Pi with one running on my PC. I then remembered that during &lt;a href="https://unoconf.com/"&gt;UnoConf&lt;/a&gt; there had been a discussion of &lt;a href="https://github.com/unoplatform/uno.dopesbench"&gt;Dopes Bench&lt;/a&gt;. Unfortunately the code in this repo didn't (at the time of writing) contain Skia backend projects so, following the process above, I quickly knocked up a new Uno project and simply copied the &amp;quot;MainPage.*&amp;quot; and &amp;quot;Random2.cs&amp;quot; files from the Dopes Bench project into it (cue amazement that &lt;em&gt;exactly&lt;/em&gt; the same code runs on Windows, Mac, Android, iOS, Web and, now, Linux).&lt;/p&gt;
&lt;p&gt;I then compiled and ran the test on my PC (DopeTestUno.UWP / release build) and the Raspberry Pi 3B+ (DopeTestUno.Skia.GTK / release build). Here are the results:&lt;/p&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;img src="/Content/UnoPi/DopeTestUno on PC.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="DopeTestUno on PC"/&gt;
&lt;/td&gt;
&lt;td&gt;
&lt;img src="/Content/UnoPi/DopeTestUno on Raspberry Pi.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="DopeTestUno on Raspberry Pi"/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center; font-weight: bold"&gt;
9217.42 Dopes/s
&lt;/td&gt;
&lt;td style="text-align: center; font-weight: bold"&gt;
401.05 Dopes/s
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style="text-align: center"&gt;
Dell Precision T7910&lt;br/&gt;
6 Core (12 Thread) Xeon E5-2620v3 &amp;#64; 2.4GHz&lt;br/&gt;
32 Gb RAM&lt;br/&gt;
NVidia GeForce GTX 980&lt;br/&gt;
&lt;/td&gt;
&lt;td style="text-align: center"&gt;
Raspberry Pi 3B+&lt;br/&gt;
4 Core BCM2837B0 A53 (ARMv8) 64-bit &amp;#64; 1.4GHz&lt;br/&gt;
1Gb RAM&lt;br/&gt;
Broadcom Videocore-IV&lt;br/&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;Well, given the difference in spec between the PC and the Pi, it's not surprising that there's a large difference in &amp;quot;Dopes&amp;quot; but is 401.05 dopes good or bad? Furthermore what does this mean for real world performance of an app?&lt;/p&gt;
&lt;p&gt;No idea, guess we're going to have to build a &amp;quot;real world&amp;quot; app...&lt;/p&gt;
&lt;h2 id="unopify-uno-pi-fy"&gt;Unopify (&amp;quot;Uno-Pi-fy&amp;quot;):&lt;/h2&gt;
&lt;br/&gt;
&lt;img src="/Content/UnoPi/Unopify on Raspberry Pi.png" class="img-responsive" style="margin: auto; max-width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Unopify on Raspberry Pi"/&gt;
&lt;p&gt;Unopify is a UWP Spotify client written using the fantastic &lt;a href="https://www.nuget.org/packages/SpotifyApi.NetCore/3.5.0?_src=template"&gt;SpotifyApi.NetCore&lt;/a&gt; library along with the usual compliment of supporting libraries including &lt;a href="https://www.nuget.org/packages/Microsoft.Extensions.DependencyInjection/3.1.7?_src=template"&gt;Microsoft.Extensions.DependencyInjection&lt;/a&gt;, &lt;a href="https://www.nuget.org/packages/System.Net.Http/4.3.4?_src=template"&gt;System.Net.Http&lt;/a&gt;, &lt;a href="https://www.nuget.org/packages/System.Reactive/"&gt;System.Reactive&lt;/a&gt; and, of course, my faithful &lt;a href="https://www.nuget.org/packages/MVx.Observable/2.0.0?_src=template"&gt;MVx.Observable&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;While only a proof-of-concept which took just a few hours to write, it already demonstrates a significant amount of functionality such as:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Frictionless support for .NET Standard 2.0 libraries&lt;/li&gt;
&lt;li&gt;Functional, Reactive, MVVM&lt;/li&gt;
&lt;li&gt;Navigation (the app moves from an &amp;quot;Authenticating&amp;quot; view to a &amp;quot;Home&amp;quot; view)&lt;/li&gt;
&lt;li&gt;Visual States &amp;amp; Visual State Triggers&lt;/li&gt;
&lt;li&gt;Full layout capabilities (uses auto, proportional and explicit sizing of elements)&lt;/li&gt;
&lt;li&gt;Image fetching, display and scaling (the image URI's retrieved from Spotify web calls are directly bound to each Image's &lt;code&gt;Source&lt;/code&gt; property)&lt;/li&gt;
&lt;li&gt;Opacity (a semi-transparent white rectangle is laid over the background image)&lt;/li&gt;
&lt;li&gt;Lookless controls (via the previous, play, next buttons)&lt;/li&gt;
&lt;li&gt;Command binding and dispatch (via the previous, play, next buttons)&lt;/li&gt;
&lt;li&gt;XAML drawing primitives (via &lt;code&gt;Ellipse&lt;/code&gt; and &lt;code&gt;Path&lt;/code&gt; elements in the previous, play and next buttons)&lt;/li&gt;
&lt;li&gt;... and loads more&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;In fact, about the only thing I wasn't able to get working was the web-based OAuth2 authentication flow. This wasn't particularly surprising given that this flow needs to invoke and interact with a system browser so I simply worked around this (temporary) limitation by using another UWP app to do the authentication and shared the access token with Unopify via SignalR (there were probably better ways to do this but I had the SignalR code to hand).&lt;/p&gt;
&lt;p&gt;There were a couple of minor issues - &lt;code&gt;UIElement.Opacity&lt;/code&gt; doesn't seem to work and an inline control template for the button seemed to cause the button to disappear - but nothing that couldn't be easily worked around. In short, writing a UWP app that worked on the Raspberry Pi under Linux was no more difficult than writing a UWP app that runs on a phone under Android or iOS (which itself is a minor miracle!).&lt;/p&gt;
&lt;p&gt;Below you can see a video of Unopify running on a Raspberry Pi 3B+. In it I'm using Spotify Web Player on the PC to control a Spotify Connect amp and running Unopify on the Pi you can &lt;em&gt;just&lt;/em&gt; see below the TV. At start-up, Unopify requests an authentication token from SignalR then starts polling the Spotify Web API for player state and using the responses to update the UI. Finally, the previous/next/play/pause buttons within Unopify directly call the Spotify Web API which causes the amp to play, pause or change track accordingly.&lt;/p&gt;
&lt;p&gt;(Apologies for the poor quality but a direct screen capture wasn't an option as I wanted to include audio from the amp.)&lt;/p&gt;
&lt;video class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" controls&gt;
  &lt;source src="/Content/UnoPi/Unopify on Raspberry Pi.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;p&gt;As you can see, while start-up was a little slow (exacerbated by there currently being no splash-screen) the running app is completely usable. Furthermore, while the app is very raw (as I said, it only took a few hours) many of the rough edges (i.e. the delay between showing track name and album image and the play/pause button glitch caused by the 1 second polling interval) could easily be smoothed with a few simple changes.&lt;/p&gt;
&lt;p&gt;To put this in perspective, this is a &lt;em&gt;preview&lt;/em&gt; build of a UWP app running on a two year old Raspberry Pi which has 1Gb of RAM, an 80Mb/s capable SD card for a hard drive and costs just £35!&lt;/p&gt;
&lt;p&gt;I have a(nother!) 4Gb Raspberry Pi 4B+ on order and will update this post once with performance metrics and &amp;quot;real world&amp;quot; experience once it arrives.&lt;/p&gt;
&lt;p&gt;Finally, the code for Unopify can be found on &lt;a href="https://github.com/ibebbs/Unopify"&gt;Github&lt;/a&gt;. Should you wish to run it, you will need to deploy the &lt;code&gt;Unopify.AuthRelay&lt;/code&gt; service (for which a free-tier AppService on Azure works well) and implement partial methods on the &amp;quot;Secrets.cs&amp;quot; files in a couple of projects (appropriate exceptions will be thrown if you fail to do this).&lt;/p&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;Uno Platform have once again significantly expanded the vista for UWP (definitely no pun intended) and left me almost dizzy with new possibilities. By supporting Linux on low-power devices, the Uno team has propelled UWP beyond desktop, mobile and web applications into the realm of &lt;em&gt;appliances&lt;/em&gt;. Want UWP on your fridge? Sure! Watch? No problem. A graphical, touch-driven interface for your thermostat? You got it.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;UWP is now a truly &lt;em&gt;Universal Platform&lt;/em&gt; and your &amp;quot;write-once&amp;quot; code really can &amp;quot;run anywhere&amp;quot;.&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;From a commercial perspective, the recent &lt;a href="https://all3dp.com/1/single-board-computer-raspberry-pi-alternative/"&gt;deluge of single-board computers&lt;/a&gt; and their &lt;a href="https://www.nvidia.com/en-gb/autonomous-machines/embedded-systems/jetson-nano/"&gt;rapidly advancing capabilities&lt;/a&gt; provides this technology with immense value. Leveraging the power of UWP and the .NET ecosystem on everything from embedded devices to mobile phones allows businesses to benefit from the incredible cost savings and RoI value proposition of a &lt;a href="https://ian.bebbs.co.uk/posts/UnoValue"&gt;&amp;quot;one stack&amp;quot;&lt;/a&gt; approach. With little to no training, your .NET developers are now able to deliver on the promise of &lt;a href="https://www.webopedia.com/TERM/A/ambient-computing.html"&gt;ambient computing&lt;/a&gt;, efficiently supporting every use-case on every device &amp;quot;from edge to cloud&amp;quot;.&lt;/p&gt;
&lt;p&gt;Wow.&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally&lt;/h2&gt;
&lt;p&gt;If you're interested in using the Uno Platform to deliver cross-platform apps or have an upcoming project for which you'd like evaluate Uno Platform's fit, then please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. As a freelance software developer and remote contractor I'm always interested in hearing from potential new clients or ideas for new collaborations.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Running UWP on Linux With Uno</title>
			<link>http://ian.bebbs.co.uk/posts/UnoLinux</link>
			<description>&lt;p&gt;At &lt;a href="https://unoconf.com/"&gt;UnoConf 2020&lt;/a&gt;, the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; team wowed attendees with the announcement of preliminary support for Linux. This had been something I had very much been hoping for and, first chance I got, I just had to give it a try. In this article I share how I went about getting set up for building and running a UWP app on Linux using the Uno Platform.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UnoLinux</guid>
			<pubDate>Sun, 16 Aug 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;At &lt;a href="https://unoconf.com/"&gt;UnoConf 2020&lt;/a&gt;, the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; team wowed attendees with the announcement of preliminary support for Linux. This had been something I had very much been hoping for and, first chance I got, I just had to give it a try. In this article I share how I went about getting set up for building and running a UWP app on Linux using the Uno Platform.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;UnoConf 2020 was held on 12th August 2020. If you weren't &amp;quot;there&amp;quot; then I would highly encourage you to &lt;a href="https://unoconf.com/"&gt;check out the recording&lt;/a&gt;. Over the course of several hours, (virtual) attendees were treated to numerous demos and descriptions of the Uno Platform, it's use and (rather a lot on) it's history.&lt;/p&gt;
&lt;p&gt;However, &lt;a href="https://youtu.be/nbqe9uHWT_c?t=7931"&gt;the session by CEO Francois Tanguay and CTO Jérôme Laban&lt;/a&gt; was were the Uno team really notched up the shock and awe. After numerous amazing announcements such as the release of Uno Platform 3.0 with out-of-the-box support for both Fluent &lt;em&gt;and&lt;/em&gt; Material design aesthetics, and several &amp;quot;anything you can do [Flutter] we can do better/faster&amp;quot; demos, they then proceeded to blow everyone's minds by showing a UWP app running on a Raspberry Pi under Linux.&lt;/p&gt;
&lt;p&gt;Yes, you read that correctly: Uno Platform now lets you run your UWP apps &lt;em&gt;on Linux&lt;/em&gt;. Just let that sink in for a second.&lt;/p&gt;
&lt;p&gt;Back? Good.&lt;/p&gt;
&lt;p&gt;Well, I just had to give this a shot. Despite a lack of documentation it turned out to be a fairly simple process once some preliminary software had been installed and the results were honestly better than I could have hoped for (hint: keep reading to the end for a bonus section).&lt;/p&gt;
&lt;p&gt;Below I've outlined all the steps you need to follow to get an Uno app running under Linux.&lt;/p&gt;
&lt;h2 id="setup"&gt;Setup&lt;/h2&gt;
&lt;p&gt;Before being able to build or run a UWP app under Linux, you'll first need to get the following set up:&lt;/p&gt;
&lt;h3 id="windows-terminal"&gt;Windows Terminal&lt;/h3&gt;
&lt;p&gt;We will be firing lots of commands into both Windows and Linux shells. While you don't technically &lt;em&gt;need&lt;/em&gt; Windows Terminal, having a single app which is able to interact with both shells will really make your life easier. If you don't have it and want to install it, you can find it in the Windows Store, &lt;a href="https://www.microsoft.com/en-gb/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;In the following steps I endeavour to highlight which shell to use for each command by putting the OS in bold (i.e. &lt;strong&gt;Windows&lt;/strong&gt; or &lt;strong&gt;Ubuntu&lt;/strong&gt;).&lt;/p&gt;
&lt;h3 id="net-core-sdk-v3.1.100"&gt;.NET Core SDK v3.1.100&lt;/h3&gt;
&lt;p&gt;Compiling an Uno Platform project for Linux requires a fairly recent version of the .NET Core toolchain so make sure you have SDK version 3.1.100 or higher installed. The latest version can be found &lt;a href="https://dotnet.microsoft.com/download/visual-studio-sdks"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Once you have an up to date version of the .NET Core SDK, install the latest pre-release version of the Uno ProjectTemplates. You can find latest version of the packages &lt;a href="https://www.nuget.org/packages/Uno.ProjectTemplates.Dotnet"&gt;here&lt;/a&gt; which at the time of writing is version &lt;code&gt;3.1.0-dev.39&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;From the &lt;strong&gt;Windows&lt;/strong&gt; command line, install the templates using the following command:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;dotnet new --install Uno.ProjectTemplates.Dotnet::3.1.0-dev.39
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="wsl2-ubuntu"&gt;WSL2 + Ubuntu&lt;/h3&gt;
&lt;p&gt;We're going to be running our app in a Linux distribution running under WSL2. To do this you'll need to be running Windows 10 version 2004 (Build 19041) or higher and have WSL2 installed by following the instructions &lt;a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Once you have WSL2 installed, you'll need to install a Linux distribution. This can be done from the Windows Store, I used Ubuntu 20.04 LTS which can be found &lt;a href="https://www.microsoft.com/en-gb/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;h3 id="x-window-server"&gt;X Window Server&lt;/h3&gt;
&lt;p&gt;In order to run graphic apps from WSL2, we need to install an X Window Server on our Windows 10 host machine. There are a surprising number of alternatives here including &lt;a href="https://sourceforge.net/projects/xming/"&gt;Xming&lt;/a&gt; and &lt;a href="https://sourceforge.net/projects/vcxsrv/"&gt;VcXsrv&lt;/a&gt; but I went for &lt;a href="https://www.microsoft.com/en-gb/p/x410/9nlp712zmn9q?activetab=pivot:overviewtab"&gt;X410&lt;/a&gt; because it was in the Windows Store, super-easy to use and - until the end of August - heavily discounted to just £8.39.&lt;/p&gt;
&lt;p&gt;After installing X410, all you need to do is run the app, the right click on it's system tray icon and click &amp;quot;Allow Public Networks&amp;quot; as shown below:&lt;/p&gt;
&lt;img src="/Content/UnoLinux/X410 Allow Public Networks.png" class="img-responsive" style="margin: auto; max-width:90%; margin-top: 6px; margin-bottom: 6px;" alt="X410 Allow Public Networks"/&gt;
&lt;p&gt;With that done, leave it running so we can...&lt;/p&gt;
&lt;h2 id="test"&gt;Test&lt;/h2&gt;
&lt;p&gt;Before digging into building our own app, we're going to test our &amp;quot;WSL2 + X Window Server&amp;quot; combo. So from a command prompt inside your &lt;strong&gt;Ubuntu&lt;/strong&gt; distribution run the following commands:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;sudo apt-get update
sudo apt-get install vim-gtk
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This will install the graphic version of Vim which we can use to check that we're able to run a graphical Linux app from Windows (just sounds weird doesn't it!).&lt;/p&gt;
&lt;p&gt;Next find the IP address of the WSL adapter on your Windows 10 host machine. This can be done using &lt;code&gt;ipconfig&lt;/code&gt; from the &lt;strong&gt;Windows&lt;/strong&gt; command line as shown below:&lt;/p&gt;
&lt;img src="/Content/UnoLinux/Windows 10 WSL Adapter IP Address.png" class="img-responsive" style="margin: auto; max-width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Windows 10 WSL Adapter IP Address"/&gt;
&lt;p&gt;With this in hand, enter the following on the &lt;strong&gt;Ubuntu&lt;/strong&gt; command prompt (told you that you'd want Windows Terminal!) substituting your IP address appropriately:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;export DISPLAY=[IP ADDRESS]:0
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Finally, start vim-gtk by running the following command, again from the &lt;strong&gt;Ubuntu&lt;/strong&gt; prompt:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;gvim
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If everything is set up correctly, you should see the following window appear:&lt;/p&gt;
&lt;img src="/Content/UnoLinux/Gvim on Windows 10.png" class="img-responsive" style="margin: auto; max-width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Gvim on Windows 10"/&gt;
&lt;p&gt;If the window doesn't appear try following the troubleshooting section &lt;a href="https://github.com/cascadium/wsl-windows-toolbar-launcher/blob/master/README.md#troubleshooting"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="build"&gt;Build&lt;/h2&gt;
&lt;p&gt;Still with me? Aces. Now lets use Uno to create a UWP app which will run in Ubuntu!&lt;/p&gt;
&lt;p&gt;From the &lt;strong&gt;Windows&lt;/strong&gt; command prompt, navigate to the directory where you want to create the new solution and type the following:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;dotnet new unoapp -o UnoLinux -w=false -wasm=false -ios=false -android=false -macos=false -sw=false
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This will create a new folder named UnoLinux inside of which will be an Uno Solution containing just the &lt;code&gt;UWP&lt;/code&gt; and &lt;code&gt;Skia.Gtk&lt;/code&gt; head projects.&lt;/p&gt;
&lt;p&gt;Next, still on the &lt;strong&gt;Windows&lt;/strong&gt; command line, navigate to the &lt;code&gt;UnoLinux.Skia.Gtk&lt;/code&gt; project and build it using:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;cd .\UnoLinux\UnoLinux.Skia.Gtk\
dotnet build
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You will probably see a few warnings but as long as you see &amp;quot;Build Succeeded&amp;quot; you should be golden. My build output looks as follows:&lt;/p&gt;
&lt;img src="/Content/UnoLinux/UnoLinux Build Output.png" class="img-responsive" style="margin: auto; max-width:90%; margin-top: 6px; margin-bottom: 6px;" alt="UnoLinux Build Output"/&gt;
&lt;p&gt;Finally we want to build the project for the Linux runtime and publish it as a self contained executable. This is done using the following:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;dotnet publish --runtime linux-x64 -c Release --self-contained
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;You're likely to see the same warnings again here but there shouldn't be any errors.&lt;/p&gt;
&lt;p&gt;Once this command completes you should be able to navigate to &lt;code&gt;.\bin\Release\netcoreapp3.1\linux-x64\&lt;/code&gt; where you will find a &lt;code&gt;UnoLinux.Skia.Gtk&lt;/code&gt; file.&lt;/p&gt;
&lt;p&gt;Got it? Brills!&lt;/p&gt;
&lt;h2 id="running-uwp-on-ubuntu"&gt;Running UWP on Ubuntu&lt;/h2&gt;
&lt;p&gt;Back at the &lt;strong&gt;Ubuntu&lt;/strong&gt; command prompt, navigate to the &lt;code&gt;bin\Release&lt;/code&gt; directory above. In WSL all your Windows drives should be mounted under &lt;code&gt;/mnt/&lt;/code&gt; so you should be able to run a command similar to the following (with [DRIVE LETTER] and [PATH] replaced):&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;cd /mnt/[DRIVE LETTER]/[PATH]/UnoLinux/UnoLinux.Skia.Gtk/bin/Release/netcoreapp3.1/linux-x64
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Finally - and here comes the magic - run the &lt;code&gt;UnoLinux.Skia.Gtk&lt;/code&gt; app from the &lt;strong&gt;Ubuntu&lt;/strong&gt; command line using:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;./UnoLinux.Skia.Gtk
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Again, if everything has gone smoothly, the following window should pop-up after a few seconds:&lt;/p&gt;
&lt;img src="/Content/UnoLinux/UnoLinux Hello World.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="UnoLinux Hello World"/&gt;
&lt;p&gt;Now sit back and let this sink in for a second.&lt;/p&gt;
&lt;p&gt;This is a Universal &lt;em&gt;Windows&lt;/em&gt; Platform application, rendering to a Skia backend, within a GTK host, running in Ubuntu, running under Windows. Given we're this many layers down, perhaps I might be able to plant an idea:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;UWP... &lt;em&gt;all... the... things&lt;/em&gt;!&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id="bonus"&gt;Bonus&lt;/h2&gt;
&lt;p&gt;Now, thanks to the Uno team, all the above was fairly painless and I still had some time left so.... I decided to see how far I could push UWP under Linux.&lt;/p&gt;
&lt;p&gt;Using the &lt;a href="https://github.com/ibebbs/UnoChat"&gt;UnoChat sample&lt;/a&gt; I created for my &lt;a href="https://ian.bebbs.co.uk/posts/UnoChat"&gt;&amp;quot;Cross-Platform Real-Time Communication with Uno &amp;amp; SignalR&amp;quot;&lt;/a&gt; post, I updated all the Uno packages to the latest pre-release versions. I then copied the &lt;code&gt;UnoLinux.Skia.Gtk&lt;/code&gt; project folder from the &lt;code&gt;UnoLinux&lt;/code&gt; solution we just created and added it to the &lt;code&gt;UnoChat&lt;/code&gt; solution. Some monkeying ensured to re-namespace everything and correct project and package references but without too much effort, I got everything building.&lt;/p&gt;
&lt;p&gt;With baited breath, I tried this:&lt;/p&gt;
&lt;video class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" controls autoplay loop&gt;
  &lt;source src="/Content/UnoLinux/UnoChat for Linux.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;p&gt;Woah! Without modifying &lt;em&gt;any&lt;/em&gt; of the shared code, the &lt;em&gt;exact same application&lt;/em&gt; compiled, ran &lt;em&gt;&lt;strong&gt;and functioned&lt;/strong&gt;&lt;/em&gt; under Linux.&lt;/p&gt;
&lt;p&gt;That's not to say there weren't problems. There seemed to be an issue with &lt;code&gt;TextBox&lt;/code&gt; controls which prevented me from sending messages from the Linux head and the fonts didn't quite match across the platforms. But, given this is just a preliminary release, the fact that the app could receive messages from a remote SignalR server then template and render the messages correctly on Linux is just stunning.&lt;/p&gt;
&lt;p&gt;Absolutely. Stunning.&lt;/p&gt;
&lt;h2 id="code"&gt;Code&lt;/h2&gt;
&lt;p&gt;The code for this sample is available in the &amp;quot;Prerelease&amp;quot; branch of my UnoChat repository &lt;a href="https://github.com/ibebbs/UnoChat/tree/Prerelease"&gt;here&lt;/a&gt;. Once Linux support is a little more mature, I'll update the more advanced &amp;quot;Uno.ChatSignalR&amp;quot; app I prepared for UnoConf which can be found &lt;a href="https://github.com/unoplatform/Uno.Samples/tree/master/UI/ChatSignalR"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="and-lastly"&gt;And lastly...&lt;/h2&gt;
&lt;p&gt;If you're interested in using the Uno Platform to deliver cross-platform apps or have an upcoming project for which you'd like evaluate Uno Platform's fit, then please feel free to drop me a line to discuss your project/ideas using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. As a freelance software developer and remote contractor I'm always interested in hearing from potential new clients or ideas for new collaborations.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>On the incredible value proposition of .NET &amp; the Uno Platform</title>
			<link>http://ian.bebbs.co.uk/posts/UnoValue</link>
			<description>&lt;p&gt;My company recently released &lt;a href="https://www.zenue.uk/"&gt;Zenue&lt;/a&gt;; a solution for small businesses in the UK hospitality industry struggling to meet post-lockdown governmental guidance. In just 48 hours, a team of two were able to progress from initial concept to app-store submission having delivered on all the fundamental use-cases. In this post I show how this was made possible by .NET and the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; and why you should be considering these technologies for your next project.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UnoValue</guid>
			<pubDate>Wed, 12 Aug 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;My company recently released &lt;a href="https://www.zenue.uk/"&gt;Zenue&lt;/a&gt;; a solution for small businesses in the UK hospitality industry struggling to meet post-lockdown governmental guidance. In just 48 hours, a team of two were able to progress from initial concept to app-store submission having delivered on all the fundamental use-cases. In this post I show how this was made possible by .NET and the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; and why you should be considering these technologies for your next project.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;Ostensibly &lt;a href="https://www.cogenity.com/"&gt;Cogenity&lt;/a&gt; operates as a consultancy but, whenever opportunity arises, we like to &amp;quot;dog food&amp;quot; the services we provide to our clients by undertaking a project for ourselves. Such an opportunity arose a few weeks back when, following the easing of lockdown in the UK, we were contacted by numerous small businesses in the hospitality industry (e.g. cafes, bars and pubs) stating they were unable to find a means of effectively meeting government guidance for recording visitors to their premises.&lt;/p&gt;
&lt;p&gt;During an idle &amp;quot;water-cooler&amp;quot; conversation, we realised there was an interesting challenge here: These businesses were of limited means and couldn't invest in the significant infrastructure required to support many forms of advanced visitor tracking capabilities. Furthermore, the data these businesses were being asked to collect and keep safe represented a legislative tight-rope for them and a potential privacy nightmare for their customers. The &amp;quot;water-cooler&amp;quot; conversation was soon superseded by a &amp;quot;tree-house&amp;quot; brain-storming session (yes, weather permitting we do occasionally meet in our on-site tree-house) and we decided to take a stab at providing a solution.&lt;/p&gt;
&lt;p&gt;After just 48 hours work (which included writing a web-site and privacy policy), we had a solution in place and had submitted an MVP of the Zenue app to both the Google and Apple app-stores.&lt;/p&gt;
&lt;p&gt;We were super-happy with the project not just because it delivered on all the fundamental use-cases nor because it did so using a service model which cost virtually nothing to stand-up and which will scale in a cost-effective manner. No, we found the biggest positive of this project to be the tech stack we had decided to use and how it allowed us to minimize cross-platform development effort while all but eliminating code duplication.&lt;/p&gt;
&lt;p&gt;In short, the delivery of the constituent apps - along with their supporting services - on this timescale was made possible by eschewing a &amp;quot;full stack&amp;quot; approach and opting for &amp;quot;one stack&amp;quot; comprised of just two fundamental technologies: .NET and the Uno Platform.&lt;/p&gt;
&lt;p&gt;Here's why you should be considering these technologies for your next project.&lt;/p&gt;
&lt;h2 id="a-note-on-terminology"&gt;A note on terminology&lt;/h2&gt;
&lt;p&gt;As with many such things in our industry, the term &amp;quot;full stack&amp;quot; has become extremely overloaded. Initially coined to describe &amp;quot;an individual who has a good understanding of the technologies used to implement different layers and components in a solution&amp;quot;, it could be applied to &lt;em&gt;any&lt;/em&gt; developer comfortable with &lt;em&gt;any&lt;/em&gt; set of technologies capable of implementing an end-to-end solution. In recent years however this definition has become increasingly narrow to the point where - should you see it in a job advert or on a résumé - it will almost certainly have been used to mean &amp;quot;a developer who can write an HTML+CSS+JS web-app along with an arbitrary set of back-end technologies&amp;quot;.&lt;/p&gt;
&lt;p&gt;This has lead to frustrations in many camps not least of which being desktop and mobile app developers who choose not to employ web-related technologies in their craft. These developers feel equally entitled to the term &amp;quot;full stack&amp;quot; but are met with confusion when advocating themselves as such to companies and recruitment consultants alike.&lt;/p&gt;
&lt;p&gt;In this post I will be employing a measure of creative license with terms &amp;quot;full stack&amp;quot; and &amp;quot;one stack&amp;quot;, and while some of these uses may lead a reader to think &amp;quot;Hang on a second...&amp;quot;, I would argue that my uses are no more disingenuous than the limited one described above. To avoid confusion however, I would like to advocate for a definition of the terms along the following lines:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Full stack&lt;/strong&gt;: A heterogeneous set of technologies requiring significant and non-transferable training/experience in each.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;One stack&lt;/strong&gt;: A homogeneous or complementary set of technologies within which training/experience is cumulative or easily transferred.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;So with that out of the way...&lt;/p&gt;
&lt;h2 id="full-stack"&gt;Full Stack&lt;/h2&gt;
&lt;p&gt;If we were to have adopted a conventional &amp;quot;full stack&amp;quot; approach and employed (alleged) &amp;quot;best-of-breed&amp;quot; technologies for this project, we might have ended up with something along the lines of this:&lt;/p&gt;
&lt;img src="/Content/UnoValue/FullStack.png" class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Full Stack"/&gt;
&lt;p&gt;Here we have:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;A mobile app for visitors to clients' premises written in Dart using the Flutter framework.&lt;/li&gt;
&lt;li&gt;A web app for staff at clients' premises written in JavaScript using the React framework.&lt;/li&gt;
&lt;li&gt;Internal desktop apps written in C# using the WinUI framework.&lt;/li&gt;
&lt;li&gt;Back-end services for each of the applications written in C# using Azure Functions.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;As you can see, to deliver an MVP using this stack we would have had to employ 3 different languages on 4 different frameworks. Each of these languages/frameworks require significant experience/training before a developer can be considered to be proficient in their use and each of these languages/frameworks would require its own DevOps pipeline to build and deploy the associated app/services. All this can vastly increasing the time it takes to stand-up a solution of this nature, complicating versioned deployments, increasing code duplication and, ultimately, slowing iteration.&lt;/p&gt;
&lt;p&gt;(And lets not even think about the time/effort/complexity for a single developer to install and maintain the plethora of tooling required to develop on all of these stacks simultaneously! &amp;lt;Shudder&amp;gt;)&lt;/p&gt;
&lt;p&gt;Now, admittedly we &lt;em&gt;could&lt;/em&gt; have considered simplifying this stack by employing one of the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Use ReactNative for the Mobile App&lt;br /&gt;
This would have reduced the language count by one but could have introduced significant cognitive dissonance given that, despite the name, React and ReactNative are &lt;em&gt;very&lt;/em&gt; different frameworks.&lt;/li&gt;
&lt;li&gt;Use Flutter for the Web app&lt;br /&gt;
Yes, this might have been possible but web development in Flutter is very much in it's infancy and, at the time of writing, requires a &amp;quot;beta&amp;quot; channel version of Flutter which might have destabilized native app development.&lt;/li&gt;
&lt;li&gt;Used Xamarin for the Mobile &amp;amp; Internal Apps&lt;br /&gt;
This would have reduced the language count &lt;em&gt;and&lt;/em&gt; the framework count but would have still left us needing to maintain a separate development stack for the web app.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Regardless, as you can see, developing and supporting a solution that operates across these myriad platforms can be &lt;em&gt;extremely&lt;/em&gt; time consuming and can make solution-wide micro-iterations all but impossible. It was certainly a non-starter for us as we had very tight deadlines for getting this done and very limited budget for maintenance moving forward.&lt;/p&gt;
&lt;h2 id="one-stack"&gt;One Stack&lt;/h2&gt;
&lt;p&gt;So, if &amp;quot;Full stack&amp;quot; wasn't an option, how were we going to deliver this solution? Well, that was easy: the Uno Platform.&lt;/p&gt;
&lt;p&gt;For those that are unaware, the Uno Platform provides the means to broaden the reach of Universal Windows Platform (aka UWP, WinRT, WinUI, etc) applications beyond... well, beyond the Windows Platform. By standing on the shoulders of two amazing technologies - &lt;a href="https://www.mono-project.com/"&gt;Mono&lt;/a&gt; &amp;amp; &lt;a href="https://dotnet.microsoft.com/apps/xamarin"&gt;Xamarin&lt;/a&gt; - the Uno Platform is able to expose huge (and ever increasing) swathes of the UWP/WinRT API surface to other platforms. This allows apps written for UWP to be run - often without modification - on platforms as diverse as iOS, Android and the Web (via WebAssembly).&lt;/p&gt;
&lt;p&gt;As regular readers of my blog will know, I am a huge fan of the Uno Platform and have been raving about its abilities for &lt;a href="https://ian.bebbs.co.uk/posts/Uno"&gt;quite some time now&lt;/a&gt;. Suggesting that we use Uno for this project was an easy sell given it allowed us to write code in C# &amp;amp; XAML (which we know and love), run the same code across every platform required by this solution (&lt;a href="https://platform.uno/blog/announcing-uno-platform-2-4-macos-support-and-windows-calculator-on-macos/"&gt;and then some!&lt;/a&gt;) and didn't require any platform specific DevOps effort/management. In fact, short of installing the Uno Platform Solution templates from within Visual Studio, using the Uno Platform didn't even require any changes to existing development environments!&lt;/p&gt;
&lt;p&gt;Effectively, using the Uno Platform allowed us to move from &amp;quot;full stack&amp;quot; to &amp;quot;one stack&amp;quot;, as shown below:&lt;/p&gt;
&lt;img src="/Content/UnoValue/OneStack.png" class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" alt="One Stack"/&gt;
&lt;p&gt;Not to labour the point but here we have:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;A mobile app for visitors to client's premises written in C# using the Uno Platform.&lt;/li&gt;
&lt;li&gt;A web app for staff at client's premises written in C# using the Uno Platform.&lt;/li&gt;
&lt;li&gt;Internal desktop apps written in C# using the Uno Platform.&lt;/li&gt;
&lt;li&gt;Back-end services for each of the applications written in C# using Azure Functions.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;All told, this amounted to one language and two frameworks - Uno Platform client-side, Azure Functions service-side. This simplicity made the project incredibly quick to iterate on and, due to the absolutely lack of friction between platforms, a whole lot of fun to deliver. Furthermore we were able to spend 99% of our time delivering use-case functionality instead of setting up multiple tech-stack development environments/workflows and worrying about how best to make them interoperate.&lt;/p&gt;
&lt;h2 id="why-should-i-consider-a-one-stack-approach"&gt;Why should I consider a &amp;quot;One Stack&amp;quot; approach?&lt;/h2&gt;
&lt;p&gt;Well, for us there were innumerable benefits to a &amp;quot;One Stack&amp;quot; approach which, in our experience, would be beneficial to many small teams employing rapid iteration (or &amp;quot;lean start-up&amp;quot;) practices. These included:&lt;/p&gt;
&lt;h3 id="single-language-tooling-solution"&gt;Single Language, Tooling &amp;amp; Solution&lt;/h3&gt;
&lt;p&gt;All the apps and services for this delivery were implemented in C#, using Visual Studio and contained within a single solution. This allowed us to leverage the advanced code-refactoring capabilities of Visual Studio to quickly change solution structure and/or API's without fear of missing required changes in other projects/languages.&lt;/p&gt;
&lt;h3 id="net-standard-2.0-libraries"&gt;.NET Standard 2.0 Libraries&lt;/h3&gt;
&lt;p&gt;Due to the incredible efforts of the &lt;a href="https://www.mono-project.com/docs/about-mono/maintainers/"&gt;Mono team&lt;/a&gt;, the Uno Platform is able to use pretty much any fully-managed .NET Standard 2.0 library. This not only allowed us to share solution artefacts across projects and platforms but also to use &amp;quot;off-the-shelf&amp;quot; nuget packages on platforms they had almost certainly not been designed for. (For an example of this, see my post on &lt;a href="https://ian.bebbs.co.uk/posts/UnoChat"&gt;&amp;quot;Cross-Platform Real-Time Communication with Uno &amp;amp; SignalR&amp;quot;&lt;/a&gt; where I use the &lt;a href="https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client/"&gt;&amp;quot;Microsoft.AspNetCore.SignalR.Client&amp;quot;&lt;/a&gt; nuget package from Android, iOS &lt;em&gt;and&lt;/em&gt; WebAssembly).&lt;/p&gt;
&lt;h3 id="xamarin-libraries"&gt;Xamarin libraries&lt;/h3&gt;
&lt;p&gt;When we did need to leverage platform specific capabilities, Uno Platform allowed us to directly reference and call Xamarin libraries without needing any form of marshalling. For example, Zenue uses the &lt;a href="https://github.com/Redth/ZXing.Net.Mobile"&gt;&lt;code&gt;ZXing.Net.Mobile&lt;/code&gt;&lt;/a&gt; library - ostensibly designed for Xamarin.Forms - to implement QR Code scanning (which is likely to be the subject of a future blog post).&lt;/p&gt;
&lt;h3 id="advanced-common-controls-and-visual-states"&gt;Advanced &amp;quot;Common&amp;quot; Controls and Visual States&lt;/h3&gt;
&lt;p&gt;Using Uno Platform, &amp;quot;write-once&amp;quot; controls really can &amp;quot;run-anywhere&amp;quot;. Furthermore, by leveraging the incredible capabilities of XAML (&amp;quot;look-less&amp;quot; controls, visual states, storyboarded animations, etc) these controls can be templated, styled and reused across a broad range of projects and platforms.&lt;/p&gt;
&lt;h3 id="integrated-debugging-hot-reload"&gt;Integrated debugging &amp;amp; Hot Reload&lt;/h3&gt;
&lt;p&gt;Regardless of platform (UWP, Android, iOS, Web, etc) or deployment target (physical device, simulator, browser, etc), Uno Platform has strong support for integrated debugging and hot reloading of changes. This is a real game changer for the rapid development of cross-platform apps and once you get used to it, going back to a development environment/platform that doesn't allow you to break at arbitrary points in your (non-minified/transpiled) code or to visualize a change without restarting your app, simply feels like a return to the dark ages.&lt;/p&gt;
&lt;h3 id="end-to-end-qa-automated-testing"&gt;End-to-end QA &amp;amp; automated testing&lt;/h3&gt;
&lt;p&gt;As all projects in the solution could be started and debugged from within a single IDE, we were easily able to spin-up and run the solution off-line. This allowed us to run end-to-end QA testing and quickly resolve issues in the integration of system components. We then augmented these QA tests via automated UI tests which covered every component of the solution (and which we found to be particularly good for creating the myriad application screenshots required by the various app stores).&lt;/p&gt;
&lt;h2 id="conclusion-future"&gt;Conclusion &amp;amp; Future&lt;/h2&gt;
&lt;p&gt;As I hope is evident from the above, we found employing a &amp;quot;One Stack&amp;quot; approach for the Zenue project to be a huge win. Reducing our development tech-stack to just a single language and two frameworks resulted in productivity gains that we're still enjoying as we continue to iterate on the app and it's capabilities.&lt;/p&gt;
&lt;h3 id="uno-platform"&gt;Uno Platform&lt;/h3&gt;
&lt;p&gt;At Cogenity we believe the Uno Platform has a very exciting future. While already an incredibly capable and mature framework for delivering cross-platform apps, the Uno team will shortly be releasing v3.0 (perhaps later at &lt;a href="https://platform.uno/blog/unoconf-2020-virtual-free-aug-12-2020-save-the-date/"&gt;UnoConf 2020&lt;/a&gt;) which promises many new capabilities and myriad improvements.&lt;/p&gt;
&lt;p&gt;If you're interested in using the Uno Platform in your next project, Cogenity is able to offer consulting/development services which can ensure your project not only gets off to a flying start but also reaches a successful conclusion! Just drop us an &lt;a href="mailto:contact&amp;#64;cogenity.com"&gt;email&lt;/a&gt; or use our contact form &lt;a href="https://www.cogenity.com/#three"&gt;here&lt;/a&gt; and we'll get back to you asap.&lt;/p&gt;
&lt;h3 id="zenue"&gt;Zenue&lt;/h3&gt;
&lt;p&gt;We're currently engaged with a number of local businesses interested in using Zenue but would welcome the opportunity to partner with businesses across the UK. While helping assuage the fallout from the current pandemic is very much Zenue's raison d'être, we're already looking to expand it's reach beyond visitor tracking. Our aim is to help small businesses leverage the innumerable use-cases modern technologies could provide but which have, so far, remained out of reach for all but large chains.&lt;/p&gt;
&lt;p&gt;If your business needs help meeting current government guidance for visitor tracking or you have an idea for a killer feature you feel Zenue might be able to provide, please feel free to contact us via &lt;a href="https://twitter.com/UkZenue"&gt;Twitter&lt;/a&gt;, &lt;a href="https://www.facebook.com/ZenueUK"&gt;Facebook&lt;/a&gt; or &lt;a href="mailto:contact&amp;#64;zenue.uk"&gt;email&lt;/a&gt;.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Cross-Platform Real-Time Communication with Uno &amp; SignalR</title>
			<link>http://ian.bebbs.co.uk/posts/UnoChat</link>
			<description>&lt;p&gt;In this article we will see how to use &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; and &lt;a href="https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr"&gt;SignalR&lt;/a&gt; to create applications that run on all major platforms - PC, Mac, Android, iOS &lt;em&gt;&lt;strong&gt;and&lt;/strong&gt;&lt;/em&gt; Web - and are capable of receiving real-time updates from a SignalR service. As you will see, these two technologies work incredibly well together, providing an elegant solution to a use-case which, just a few years ago, would have been fiendishly difficult.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UnoChat</guid>
			<pubDate>Thu, 16 Jul 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;In this article we will see how to use &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; and &lt;a href="https://docs.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introduction-to-signalr"&gt;SignalR&lt;/a&gt; to create applications that run on all major platforms - PC, Mac, Android, iOS &lt;em&gt;&lt;strong&gt;and&lt;/strong&gt;&lt;/em&gt; Web - and are capable of receiving real-time updates from a SignalR service. As you will see, these two technologies work incredibly well together, providing an elegant solution to a use-case which, just a few years ago, would have been fiendishly difficult.&lt;/p&gt;
&lt;p&gt;All the source code for this post can be found in my &lt;a href="https://github.com/ibebbs/UnoChat"&gt;UnoChat&lt;/a&gt; repository on GitHub.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;A project I'm working on features a web-dashboard. Being a XAML fan, using Uno to create a web-assembly app was a complete a no-brainer... until I realised that I wanted the dashboard to feature real-time updates. Thanks to SignalR (and a host of subsequent technologies) real-time updates is nothing new for traditional web apps but how would these technologies fare when used with Uno/WebAssembly.&lt;/p&gt;
&lt;p&gt;Hunting around, I had seen that a couple of people had tried this approach a while back but had hit various stumbling blocks along the way. As far as I could tell, no-one had yet managed to get a working solution which, as you might imagine, was a tad worrying.&lt;/p&gt;
&lt;p&gt;Regardless, I knew that Uno and its compilation to WebAssembly (driven by the amazing work undertaken by the &lt;a href="https://github.com/mono/mono"&gt;Mono team&lt;/a&gt;) had progressed massively in the last year so I figured I'd give it a go to see if I could get any further. I was very much prepared for a bit of a slog here, expecting to have to dig into the internals of both Uno and SignalR in order to get it working. But I was &lt;em&gt;not&lt;/em&gt; prepared for what actually happened:&lt;/p&gt;
&lt;p&gt;It... just... worked.&lt;/p&gt;
&lt;p&gt;First time.&lt;/p&gt;
&lt;p&gt;With no kludges, no work-arounds, no untoward platform-specific code and no conditional compilation.&lt;/p&gt;
&lt;p&gt;It really did &lt;strong&gt;Just Work™&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;The following post shows how you can use these amazing technologies together to deliver real-time updates to a cross-platform app.&lt;/p&gt;
&lt;h2 id="ingredients"&gt;Ingredients&lt;/h2&gt;
&lt;p&gt;To cook up this little sumptuous little dish, you will need a copy of Visual Studio 2019 with the following installed:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&amp;quot;ASP.NET and Web development&amp;quot; workload&lt;/li&gt;
&lt;li&gt;&amp;quot;Azure development&amp;quot; workload&lt;/li&gt;
&lt;li&gt;&amp;quot;Universal Windows Platform development&amp;quot; workload&lt;/li&gt;
&lt;li&gt;&amp;quot;Mobile development with .NET&amp;quot; workload&lt;/li&gt;
&lt;li&gt;&amp;quot;.NET Core cross-platform development&amp;quot; toolset&lt;/li&gt;
&lt;li&gt;The &lt;a href="https://marketplace.visualstudio.com/items?itemName=nventivecorp.uno-platform-addin"&gt;Uno Platform Solution Templates&lt;/a&gt;.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;You will also need a (&lt;a href="https://azure.microsoft.com/en-us/free/"&gt;free&lt;/a&gt;) Azure account to which we'll publish our SignalR service so it's easily available to our client platforms.&lt;/p&gt;
&lt;h2 id="objective"&gt;Objective&lt;/h2&gt;
&lt;p&gt;We're going to be building a version of the &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&amp;amp;tabs=visual-studio"&gt;&amp;quot;Get started with ASP.NET Core SignalR&amp;quot;&lt;/a&gt; sample app but, instead of an &amp;quot;HTML+js&amp;quot; client, we're going to be using  Uno to write an app which can be compiled and run natively across multiple platforms &lt;em&gt;including&lt;/em&gt; the web.&lt;/p&gt;
&lt;p&gt;When we're finished, we'll have a solution which looks like this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;UnoChat
|- UnoChat.Service
|- UnoChat.Client.Console
|- UnoChat.Client.App
   |- UnoChat.Client.App.Droid
   |- UnoChat.Client.App.iOS
   |- UnoChat.Client.App.macOS
   |- UnoChat.Client.App.UWP
   |- UnoChat.Client.App.Wasm
   |- UnoChat.Client.App.Shared
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We'll dive into each of these projects individually below with the occasional &amp;quot;F5&amp;quot; to test our progress.&lt;/p&gt;
&lt;p&gt;Right, lets go!&lt;/p&gt;
&lt;h2 id="service-console-client-testing-deployment"&gt;Service, Console Client, Testing &amp;amp; Deployment&lt;/h2&gt;
&lt;h3 id="unochat.service"&gt;UnoChat.Service&lt;/h3&gt;
&lt;p&gt;We'll first create the SignalR service. As this is covered quite extensively in the &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&amp;amp;tabs=visual-studio"&gt;sample app&lt;/a&gt; we're basing this article on I'm going to shoot through this pretty quickly, only covering notable differences and the code we should end up with.&lt;/p&gt;
&lt;p&gt;Ok, start up Visual Studio 2019 and create a new project as shown here:&lt;/p&gt;
&lt;table style="margin: auto; width:100%;"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/CreateNewASPNetCoreWebApplicationI.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Create New ASP Net Core Web Application - Step 1"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/CreateNewASPNetCoreWebApplicationII.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Create New ASP Net Core Web Application - Step 2"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;Now, follow the steps in the &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&amp;amp;tabs=visual-studio#create-a-signalr-hub"&gt;&amp;quot;Create a SignalR hub&amp;quot;&lt;/a&gt; section of the sample app to create a &lt;code&gt;ChatHub : Hub&lt;/code&gt; class in a &lt;code&gt;Hubs&lt;/code&gt; folder within the &lt;code&gt;UnoChat.Service&lt;/code&gt; project.&lt;/p&gt;
&lt;p&gt;We'll continue with the configuration described in the &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&amp;amp;tabs=visual-studio#configure-signalr"&gt;&amp;quot;Configure SignalR&amp;quot;&lt;/a&gt; but we'll also be adding a &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.1"&gt;CORS policy&lt;/a&gt; such that we're able to connect to it from a locally hosted Wasm app. The final configuration of the &lt;code&gt;Startup&lt;/code&gt; class in the &lt;code&gt;UnoChat.Service&lt;/code&gt; project should look like this:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace UnoChat.Service
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddSignalR();

            services.AddCors(o =&amp;gt; o.AddPolicy(
                 &amp;quot;CorsPolicy&amp;quot;,
                 builder =&amp;gt; builder
                    .AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                 )
            );
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler(&amp;quot;/Error&amp;quot;);
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();
            app.UseCors(&amp;quot;CorsPolicy&amp;quot;);

            app.UseAuthorization();

            app.UseEndpoints(endpoints =&amp;gt;
            {
                endpoints.MapRazorPages();
                endpoints.MapHub&amp;lt;Hubs.ChatHub&amp;gt;(&amp;quot;/chathub&amp;quot;);
            });
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And that's it. Seriously that's all we need to create a service which is able to provide real-time communication services to a whole host of client applications.... I know, right!&lt;/p&gt;
&lt;h3 id="unochat.client.console"&gt;UnoChat.Client.Console&lt;/h3&gt;
&lt;p&gt;Next we'll create a quick console application to test our SignalR service prior to diving into a cross platform solution with Uno.&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;BTW, the console app - by virtue of being .NET Core - is also cross-platform and will run on... well... &lt;a href="https://docs.microsoft.com/en-us/dotnet/core/"&gt;pretty much anything&lt;/a&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;So, right click on the &amp;quot;UnoChat&amp;quot; solution and add a new &amp;quot;Console App (.NET Core)&amp;quot; project as shown here:&lt;/p&gt;
&lt;img src="/Content/UnoChat/CreateNewNetCoreConsoleApp.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Create New Net Core Console App"/&gt;
&lt;p&gt;Then, add the &lt;a href="https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client/"&gt;&lt;code&gt;Microsoft.AspNetCore.SignalR.Client&lt;/code&gt; nuget package&lt;/a&gt; to the &lt;code&gt;UnoChat.Client.Console&lt;/code&gt; project as shown here:&lt;/p&gt;
&lt;img src="/Content/UnoChat/InstallMicrosoftAspNetCoreSignalRClientInUnoChatClientConsole.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Install Microsoft Asp Net Core SignalR Client In UnoChat Client Console"/&gt;
&lt;p&gt;Finally, replace the code in &lt;code&gt;Main.cs&lt;/code&gt; with the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using Microsoft.AspNetCore.SignalR.Client;
using System.Threading.Tasks;

namespace UnoChat.Client.Console
{
    using Console = System.Console;

    class Program
    {
        static async Task Main(string[] args)
        {
            Console.WriteLine(&amp;quot;Hi! Err... who are you?&amp;quot;);

            var name = Console.ReadLine();

            Console.WriteLine($&amp;quot;Ok {name} one second, we're going to connect to the SignalR server...&amp;quot;);

            var connection = new HubConnectionBuilder()
                .WithUrl(&amp;quot;http://localhost:61877/ChatHub&amp;quot;)
                .WithAutomaticReconnect()
                .Build();

            connection.On&amp;lt;string, string&amp;gt;(&amp;quot;ReceiveMessage&amp;quot;, (user, message) =&amp;gt; Console.WriteLine($&amp;quot;{user}: {message}&amp;quot;));

            await connection.StartAsync();

            Console.WriteLine($&amp;quot;Aaaaaand we're connected. Enter a message and hit return to send it to other connected clients...&amp;quot;);

            while (true)
            {
                var message = Console.ReadLine();

                await connection.InvokeAsync(&amp;quot;SendMessage&amp;quot;, name, message);
            }
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Note: You'll need to ensure the port number in the &lt;code&gt;.WithUrl(&amp;quot;http://localhost:61877/ChatHub&amp;quot;)&lt;/code&gt; line is correct. You can find the port number your &lt;code&gt;UnoChat.Service&lt;/code&gt; is set to use by right clicking on the &lt;code&gt;UnoChat.Service&lt;/code&gt; project, selecting &lt;code&gt;Properties&lt;/code&gt;, navigating to the &lt;code&gt;Debug&lt;/code&gt; tab and examining the &lt;code&gt;App URL&lt;/code&gt; setting in the &lt;code&gt;Web Server Settings&lt;/code&gt; section as shown here:
&lt;img src="/Content/UnoChat/UnoChatServiceDebugSettings.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Service Debug Settings"/&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id="local-testing"&gt;Local Testing&lt;/h3&gt;
&lt;p&gt;Now we can test our service with our client console. Right click on the &lt;code&gt;UnoChat.Service&lt;/code&gt; project and select &lt;code&gt;Debug-&amp;gt;Start New Instance&lt;/code&gt;. After a few seconds compilation a browser window should open and show something similar to this:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatServiceDebugBrowser.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Service Debug Browser"/&gt;
&lt;p&gt;With that running, go back to Visual Studio and right click on the &lt;code&gt;UnoChat.Client.Console&lt;/code&gt; project and again select &lt;code&gt;Debug-&amp;gt;Start New Instance&lt;/code&gt;. A console window should appear asking who you are. Enter a name, hit return and wait for the app to tell you that it has connected. At this point you can send messages to the &lt;code&gt;UnoChat.Service&lt;/code&gt; which should be echoed back to the console window prefixed with your name as shown here:&lt;/p&gt;
&lt;video class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" controls autoplay loop&gt;
  &lt;source src="/Content/UnoChat/UnoChatClientConsoleDebug.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;p&gt;Just to show we're not just echoing these things locally, right click on the &lt;code&gt;UnoChat.Client.Console&lt;/code&gt; project again and start a second instance using &lt;code&gt;Debug-&amp;gt;Start New Instance&lt;/code&gt;. In this window enter a different name and wait for connection. Now when you send a message, you'll see it in both console windows as shown here:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatClientConsoleTwoInstances.png" class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Client Console Two Instances"/&gt;
&lt;p&gt;Pretty neat huh!&lt;/p&gt;
&lt;h3 id="deployment"&gt;Deployment&lt;/h3&gt;
&lt;p&gt;With our SignalR service running nicely, lets deploy it to Azure by right clicking on the &lt;code&gt;UnoChat.Service&lt;/code&gt; project and selecting &lt;code&gt;Publish...&lt;/code&gt;. I'm not going to cover this process in too much detail as it's &lt;a href="https://docs.microsoft.com/en-US/visualstudio/deployment/quickstart-deploy-to-azure?view=vs-2019"&gt;thoroughly documented elsewhere&lt;/a&gt; but, if you've not done this before, the following screen shots should help you through:&lt;/p&gt;
&lt;table style="margin: auto; width:100%;"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureI.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 1"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureII.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 2"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureIII.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 3"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureIV.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 4"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureV.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 5"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureVI.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 6"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureVII.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 7"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureVIII.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 8"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/PublishUnoChatServiceToAzureIX.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Publish UnoChat Service To Azure - Step 9"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;Still with me? Great.&lt;/p&gt;
&lt;p&gt;Lets test our deployed SignalR service by updating the &lt;code&gt;.WithUrl(&amp;quot;http://localhost:61877/ChatHub&amp;quot;)&lt;/code&gt; line in our &lt;code&gt;UnoChat.Client.Console&lt;/code&gt; app to match the deployed service as shown in the last screenshot above; for me it's &lt;code&gt;.WithUrl(&amp;quot;https://unochatservice20200716114254.azurewebsites.net/ChatHub&amp;quot;)&lt;/code&gt;. Once done you should be able to start the &lt;code&gt;UnoChat.Client.Console&lt;/code&gt; app and send/receive messages to/from your deployed SignalR service.&lt;/p&gt;
&lt;p&gt;Now for the magic...&lt;/p&gt;
&lt;h2 id="uno-client"&gt;Uno Client&lt;/h2&gt;
&lt;h3 id="creating-preparing-an-uno-project"&gt;Creating &amp;amp; Preparing An Uno Project&lt;/h3&gt;
&lt;p&gt;Back in Visual Studio, right click the &lt;code&gt;UnoChat&lt;/code&gt; solution and &lt;code&gt;Add-&amp;gt;New Project...&lt;/code&gt;.  Select &lt;code&gt;Cross-Platform App (Uno Platform)&lt;/code&gt; from the &lt;code&gt;Add a new project&lt;/code&gt; dialog and click Next. Name it &lt;code&gt;UnoChat.Client&lt;/code&gt; on the &lt;code&gt;Configure your new project&lt;/code&gt; dialog and finally click &lt;code&gt;Create&lt;/code&gt;:&lt;/p&gt;
&lt;table style="margin: auto; width:100%;"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/CreateNewCrossPlatformAppI.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Create New Cross Platform App - Step 1"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img src="/Content/UnoChat/CreateNewCrossPlatformAppII.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" alt="Create New Cross Platform App - Step 2"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;To help keep my solution organised, I like to group all the Uno &amp;quot;head&amp;quot; projects in a solution folder. This is shown below but don't feel obliged to follow suit:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatClientSolutionFolder.png" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Client Solution Folder"/&gt;
&lt;p&gt;Now, the first thing to do here is to get our dependencies in order using the following steps:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Upgrade all &lt;code&gt;Uno.*&lt;/code&gt; packages to the latest non-prelease versions (at the time of writing this is &lt;code&gt;Uno.UI&lt;/code&gt; &amp;amp; &lt;code&gt;Uno.UI.RemoteControl&lt;/code&gt; to v2.4.4, &lt;code&gt;Uno.Wasm.Bootstrap&lt;/code&gt; &amp;amp; &lt;code&gt;Uno.Wasm.Bootstrap.DevServer&lt;/code&gt; to v1.3.0)&lt;/li&gt;
&lt;li&gt;Install the &lt;a href="https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Client/"&gt;&lt;code&gt;Microsoft.AspNetCore.SignalR.Client&lt;/code&gt; nuget package&lt;/a&gt; to all the head projects (UnoChat.Client.Droid, UnoChat.Client.iOS, etc, etc).&lt;/li&gt;
&lt;li&gt;Install the &lt;a href="https://www.nuget.org/packages/MVx.Observable/"&gt;&lt;code&gt;MVx.Observable&lt;/code&gt; nuget package&lt;/a&gt; to all the head projects (UnoChat.Client.Droid, UnoChat.Client.iOS, etc, etc).&lt;/li&gt;
&lt;/ol&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Quick tip: Use the &lt;code&gt;Manage NuGet Packages for Solution...&lt;/code&gt; option from the solution's right-click menu to get this done much faster than modifying individual projects.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Lastly use the &lt;code&gt;Properties&lt;/code&gt; window to change the &lt;code&gt;Root namespace&lt;/code&gt; value for the &lt;code&gt;UnoChat.Client.Shared&lt;/code&gt; project from &lt;code&gt;UnoChat.Client.Shared&lt;/code&gt; to just &lt;code&gt;UnoChat.Client&lt;/code&gt; (I'm kind hoping this change makes it into the Uno templates at some point).&lt;/p&gt;
&lt;h3 id="mvx.observable"&gt;MVx.Observable&lt;/h3&gt;
&lt;p&gt;I like to implement UI/UX flows using behavioural, declarative and functional paradigms. I wrote &lt;code&gt;MVx.Observable&lt;/code&gt; to be a &amp;quot;(mostly) unopinionated, light-weight alternative to ReactiveUI provided as a library &lt;em&gt;not a framework&lt;/em&gt;&amp;quot; and have written about it extensively &lt;a href="https://ian.bebbs.co.uk/posts/ReactiveBehaviors"&gt;here&lt;/a&gt; and &lt;a href="https://ian.bebbs.co.uk/posts/Uno#four-important-words"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;You don't &lt;em&gt;need&lt;/em&gt; to use &lt;code&gt;MVx.Observable&lt;/code&gt; to implement the functionality present in this project but I'd encourage you to at least give it a try as, like ReactiveUI, these patterns really can help manage UI state, ensure UX flows are testable and keep discrete behaviours... well, discrete.&lt;/p&gt;
&lt;p&gt;&lt;code&gt;MVx.Observable&lt;/code&gt; uses &lt;a href="https://www.nuget.org/packages/System.Reactive/"&gt;&lt;code&gt;System.Reactive&lt;/code&gt;&lt;/a&gt; to embody it's behaviours in a reactive manner and, as these behaviours interact with the UI, we need to use &lt;code&gt;IScheduler&lt;/code&gt; instances to ensure we update the UI from the correct thread. This is somewhat complicated by the fact that we're writing a cross-platform app which uses different &lt;code&gt;IScheduler&lt;/code&gt; implementations to marshal updates to the appropriate platform threads. Fortunately, this complexity is easily tamed through the use of &lt;a href="https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/classes-and-structs/partial-classes-and-methods"&gt;Partial Classes and Methods&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;In the &lt;code&gt;UnoChat.Client.Shared&lt;/code&gt; project, add a &lt;code&gt;Schedulers.cs&lt;/code&gt; file with the following content:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using System;
using System.Reactive.Concurrency;
using System.Threading;

namespace UnoChat.Client
{
    public static partial class Schedulers
    {
        static partial void OverrideDispatchScheduler(ref IScheduler scheduler);

        private static readonly Lazy&amp;lt;IScheduler&amp;gt; DispatcherScheduler = new Lazy&amp;lt;IScheduler&amp;gt;(
            () =&amp;gt;
            {
                IScheduler scheduler = null;

                OverrideDispatchScheduler(ref scheduler);

                return scheduler == null
                    ? new SynchronizationContextScheduler(SynchronizationContext.Current)
                    : scheduler;
            }
        );

        public static IScheduler Dispatcher =&amp;gt; DispatcherScheduler.Value;

        public static IScheduler Default =&amp;gt; Scheduler.Default;
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Then, in the UWP head, override the &lt;code&gt;OverrideDispatchScheduler&lt;/code&gt; method to provide the correct scheduler for the platform by adding a &lt;code&gt;Schedulers.cs&lt;/code&gt; file to the head project with the following content:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using System.Reactive.Concurrency;
using Windows.UI.Xaml;

namespace UnoChat.Client
{
    public static partial class Schedulers
    {
        static partial void OverrideDispatchScheduler(ref IScheduler scheduler)
        {
            scheduler = new CoreDispatcherScheduler(Window.Current.Dispatcher);
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now we can safely use the scheduler in our solution knowing that we're able to easily marshal operations to and from the UI thread.&lt;/p&gt;
&lt;h3 id="viewmodel"&gt;ViewModel&lt;/h3&gt;
&lt;p&gt;Leveraging &lt;code&gt;MVx.Observable&lt;/code&gt; we're now going to create a &lt;a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel"&gt;ViewModel&lt;/a&gt; to manage all the interaction with SignalR ensuring we don't need have any logic in the view's code-behind.&lt;/p&gt;
&lt;p&gt;Create a new &lt;code&gt;ViewModel&lt;/code&gt; class in the &lt;code&gt;UnoChat.Client.Shared&lt;/code&gt; project containing the following code:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using Microsoft.AspNetCore.SignalR.Client;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Reactive.Disposables;
using System.Reactive.Linq;
using System.Windows.Input;
using Uno.Extensions;

namespace UnoChat.Client
{
    public class ViewModel : INotifyPropertyChanged
    {
        private readonly MVx.Observable.Property&amp;lt;string&amp;gt; _name;
        private readonly MVx.Observable.Property&amp;lt;HubConnectionState&amp;gt; _state;
        private readonly MVx.Observable.Command _connect;

        private readonly MVx.Observable.Property&amp;lt;string&amp;gt; _lastMessageReceived;
        private readonly MVx.Observable.Property&amp;lt;IEnumerable&amp;lt;string&amp;gt;&amp;gt; _allMessages;
        private readonly MVx.Observable.Property&amp;lt;string&amp;gt; _messageToSend;
        private readonly MVx.Observable.Property&amp;lt;bool&amp;gt; _messageToSendIsEnabled;
        private readonly MVx.Observable.Command _sendMessage;

        private readonly HubConnection _connection;

        public event PropertyChangedEventHandler PropertyChanged;

        private static string DefaultName =&amp;gt; typeof(ViewModel)
            .Assembly
            .GetName()
            .Name
            .Split('.')
            .Last();

        public ViewModel()
        {
            _name = new MVx.Observable.Property&amp;lt;string&amp;gt;(DefaultName, nameof(Name), args =&amp;gt; PropertyChanged?.Invoke(this, args));
            _state = new MVx.Observable.Property&amp;lt;HubConnectionState&amp;gt;(HubConnectionState.Disconnected, nameof(State), args =&amp;gt; PropertyChanged?.Invoke(this, args));
            _connect = new MVx.Observable.Command();
            _lastMessageReceived = new MVx.Observable.Property&amp;lt;string&amp;gt;(nameof(LastMessageReceived), args =&amp;gt; PropertyChanged?.Invoke(this, args));
            _allMessages = new MVx.Observable.Property&amp;lt;IEnumerable&amp;lt;string&amp;gt;&amp;gt;(Enumerable.Empty&amp;lt;string&amp;gt;(), nameof(AllMessages), args =&amp;gt; PropertyChanged?.Invoke(this, args));
            _messageToSend = new MVx.Observable.Property&amp;lt;string&amp;gt;(nameof(MessageToSend), args =&amp;gt; PropertyChanged?.Invoke(this, args));
            _messageToSendIsEnabled = new MVx.Observable.Property&amp;lt;bool&amp;gt;(false, nameof(MessageToSendIsEnabled), args =&amp;gt; PropertyChanged?.Invoke(this, args));
            _sendMessage = new MVx.Observable.Command();

            _connection = new HubConnectionBuilder()
                .WithUrl(&amp;quot;https://unochatservice20200716114254.azurewebsites.net/ChatHub&amp;quot;)
                .WithAutomaticReconnect()
                .Build();
        }

        private IDisposable ShouldEnableConnectWhenNotConnected()
        {
            return _state
                .Select(state =&amp;gt; state == HubConnectionState.Disconnected)
                .ObserveOn(Schedulers.Dispatcher)
                .Subscribe(_connect);
        }

        private IDisposable ShouldEnableMessageToSendWhenConnected()
        {
            return _state
                .Select(state =&amp;gt; state == HubConnectionState.Connected)
                .Subscribe(_messageToSendIsEnabled);
        }

        private IDisposable ShouldConnectToServiceWhenConnectInvoked()
        {
            return _connect
                .SelectMany(_ =&amp;gt; Observable
                    .StartAsync(async () =&amp;gt;
                    {
                        await _connection.StartAsync();
                        return _connection.State;
                    }))
                .ObserveOn(Schedulers.Dispatcher)
                .Subscribe(_state);
        }

        private IDisposable ShouldDisconnectFromServiceWhenDisposed()
        {
            return Disposable.Create(() =&amp;gt; _ = _connection.StopAsync());
        }

        private IDisposable ShouldListenForNewMessagesFromTheService()
        {
            return Observable
                .Create&amp;lt;string&amp;gt;(
                    observer =&amp;gt;
                    {
                        Action&amp;lt;string, string&amp;gt; onReceiveMessage =
                            (user, message) =&amp;gt; observer.OnNext($&amp;quot;{user}: {message}&amp;quot;);

                        return _connection.On(&amp;quot;ReceiveMessage&amp;quot;, onReceiveMessage);
                    })
                .ObserveOn(Schedulers.Dispatcher)
                .Subscribe(_lastMessageReceived);
        }

        private IDisposable ShouldAddNewMessagesToAllMessages()
        {
            return _lastMessageReceived
                .Where(message =&amp;gt; !string.IsNullOrWhiteSpace(message))
                .WithLatestFrom(_allMessages, (message, messages) =&amp;gt; messages.Concat(message).ToArray())
                .Subscribe(_allMessages);
        }

        private IDisposable ShouldEnableSendMessageWhenConnectedAndBothNameAndMessageToSendAreNotEmpty()
        {
            return Observable
                .CombineLatest(_state, _name, _messageToSend, (state, name, message) =&amp;gt; state == HubConnectionState.Connected &amp;amp;&amp;amp; !(string.IsNullOrWhiteSpace(name) || string.IsNullOrWhiteSpace(message)))
                .Subscribe(_sendMessage);
        }

        private IDisposable ShouldSendMessageToServiceThenClearSentMessage(IObservable&amp;lt;object&amp;gt; messageToSendBoxReturn)
        {
            var namedMessage = Observable
                .CombineLatest(_name, _messageToSend, (name, message) =&amp;gt; (Name: name, Message: message));

            return Observable.Merge(_sendMessage, messageToSendBoxReturn)
                .WithLatestFrom(namedMessage, (_, tuple) =&amp;gt; tuple)
                .Where(tuple =&amp;gt; !string.IsNullOrEmpty(tuple.Message))
                .SelectMany(tuple =&amp;gt; Observable
                    .StartAsync(() =&amp;gt; _connection.InvokeAsync(&amp;quot;SendMessage&amp;quot;, tuple.Name, tuple.Message)))
                .Select(_ =&amp;gt; string.Empty)
                .ObserveOn(Schedulers.Dispatcher)
                .Subscribe(_messageToSend);
        }

        public IDisposable Activate(IObservable&amp;lt;object&amp;gt; messageToSendBoxReturn)
        {
            return new CompositeDisposable(
                ShouldEnableConnectWhenNotConnected(),
                ShouldEnableMessageToSendWhenConnected(),
                ShouldConnectToServiceWhenConnectInvoked(),
                ShouldDisconnectFromServiceWhenDisposed(),
                ShouldListenForNewMessagesFromTheService(),
                ShouldAddNewMessagesToAllMessages(),
                ShouldEnableSendMessageWhenConnectedAndBothNameAndMessageToSendAreNotEmpty(),
                ShouldSendMessageToServiceThenClearSentMessage(messageToSendBoxReturn)
            );
        }

        public string Name
        {
            get =&amp;gt; _name.Get();
            set =&amp;gt; _name.Set(value);
        }

        public HubConnectionState State =&amp;gt; _state.Get();

        public string LastMessageReceived =&amp;gt; _lastMessageReceived.Get();

        public IEnumerable&amp;lt;string&amp;gt; AllMessages =&amp;gt; _allMessages.Get();

        public string MessageToSend
        {
            get =&amp;gt; _messageToSend.Get();
            set =&amp;gt; _messageToSend.Set(value);
        }

        public bool MessageToSendIsEnabled =&amp;gt; _messageToSendIsEnabled.Get();

        public ICommand Connect =&amp;gt; _connect;

        public ICommand SendMessage =&amp;gt; _sendMessage;
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;While this code is fairly lengthy it includes a large number of behaviours such as asynchronous connection management and message handling for SignalR along with enabling and disabling controls based on the current state of the UI and/or connection. All these behaviours are separated into discrete methods allowing them to be easily modified, supplemented or removed by simply changing, adding or removing an appropriated named &amp;quot;ShouldXXXX&amp;quot; method.&lt;/p&gt;
&lt;h3 id="view"&gt;View&lt;/h3&gt;
&lt;p&gt;With the ViewModel in place and taking care of all the fundamental logic for the application, we now need to use it from the view. In the code behind for &lt;code&gt;MainView.cs&lt;/code&gt; add the following code:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;using System;
using System.Reactive.Linq;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&amp;amp;clcid=0x409

namespace UnoChat.Client
{
    /// &amp;lt;summary&amp;gt;
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// &amp;lt;/summary&amp;gt;
    public sealed partial class MainPage : Page
    {
        private readonly ViewModel _viewModel;
        private IDisposable _behaviours;

        public MainPage()
        {
            this.InitializeComponent();

            _viewModel = new ViewModel();
            DataContext = _viewModel;
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            var messageToSendReturn = Observable
                .FromEvent&amp;lt;KeyEventHandler, KeyRoutedEventArgs&amp;gt;(
                    handler =&amp;gt; (s, k) =&amp;gt; handler(k),
                    handler =&amp;gt; MessageToSendTextBox.KeyUp += handler,
                    handler =&amp;gt; MessageToSendTextBox.KeyUp -= handler)
                .Where(k =&amp;gt; k.Key == Windows.System.VirtualKey.Enter);

            _behaviours = _viewModel.Activate(messageToSendReturn);
        }

        protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
        {
            base.OnNavigatingFrom(e);

            if (_behaviours != null)
            {
                _behaviours.Dispose();
                _behaviours = null;
            }
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;In this code we instantiate the ViewModel, set it as the View's &lt;code&gt;DataContext&lt;/code&gt; and call it's &lt;code&gt;Activate&lt;/code&gt; method when the user navigates to this view. Note how we pass an observable to the &lt;code&gt;Activate&lt;/code&gt; method which will emit a value when the user hits return on the &lt;code&gt;MessageToSendTextBox&lt;/code&gt;. This allows us to receive feedback from the UI without compromising View/ViewModel segregation.&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;Activate&lt;/code&gt; method returns an &lt;code&gt;IDisposable&lt;/code&gt; which, when disposed, will tear down all the associated behaviours, unsubscribe from events and release resources. Accordingly, we dispose of this &lt;code&gt;IDisposable&lt;/code&gt; when the user navigates away from this view, thereby correctly managing the lifetime of the ViewModel's resources.&lt;/p&gt;
&lt;p&gt;Finally, lets implement our UI by editing the &lt;code&gt;MainView.xaml&lt;/code&gt; to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xml"&gt;&amp;lt;Page
    x:Class=&amp;quot;UnoChat.Client.MainPage&amp;quot;
    xmlns=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&amp;quot;
    xmlns:x=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml&amp;quot;
    xmlns:local=&amp;quot;using:UnoChat.Client&amp;quot;
    xmlns:d=&amp;quot;http://schemas.microsoft.com/expression/blend/2008&amp;quot;
    xmlns:mc=&amp;quot;http://schemas.openxmlformats.org/markup-compatibility/2006&amp;quot;
    mc:Ignorable=&amp;quot;d&amp;quot;&amp;gt;

    &amp;lt;Grid Background=&amp;quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&amp;quot;&amp;gt;
        &amp;lt;Grid.RowDefinitions&amp;gt;
            &amp;lt;RowDefinition Height=&amp;quot;Auto&amp;quot;/&amp;gt;
            &amp;lt;RowDefinition Height=&amp;quot;*&amp;quot;/&amp;gt;
            &amp;lt;RowDefinition Height=&amp;quot;Auto&amp;quot;/&amp;gt;
        &amp;lt;/Grid.RowDefinitions&amp;gt;
        &amp;lt;Grid.ColumnDefinitions&amp;gt;
            &amp;lt;ColumnDefinition Width=&amp;quot;Auto&amp;quot;/&amp;gt;
            &amp;lt;ColumnDefinition Width=&amp;quot;*&amp;quot;/&amp;gt;
            &amp;lt;ColumnDefinition Width=&amp;quot;Auto&amp;quot;/&amp;gt;
        &amp;lt;/Grid.ColumnDefinitions&amp;gt;
        &amp;lt;TextBlock Text=&amp;quot;Name:&amp;quot; Style=&amp;quot;{StaticResource BaseTextBlockStyle}&amp;quot; Grid.Row=&amp;quot;0&amp;quot; Grid.Column=&amp;quot;0&amp;quot; Margin=&amp;quot;4&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot; /&amp;gt;
        &amp;lt;TextBox Text=&amp;quot;{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}&amp;quot; Grid.Row=&amp;quot;0&amp;quot; Grid.Column=&amp;quot;1&amp;quot; Margin=&amp;quot;4&amp;quot;/&amp;gt;
        &amp;lt;Button Command=&amp;quot;{Binding Path=Connect}&amp;quot; Content=&amp;quot;Connect&amp;quot; Grid.Row=&amp;quot;0&amp;quot; Grid.Column=&amp;quot;2&amp;quot; Margin=&amp;quot;4&amp;quot; Padding=&amp;quot;16,4&amp;quot; HorizontalAlignment=&amp;quot;Stretch&amp;quot;/&amp;gt;
        &amp;lt;ItemsControl ItemsSource=&amp;quot;{Binding Path=AllMessages}&amp;quot; Grid.Row=&amp;quot;1&amp;quot; Grid.ColumnSpan=&amp;quot;3&amp;quot; Margin=&amp;quot;4&amp;quot; /&amp;gt;
        &amp;lt;TextBlock Text=&amp;quot;Message:&amp;quot; Style=&amp;quot;{StaticResource BaseTextBlockStyle}&amp;quot; Grid.Row=&amp;quot;2&amp;quot; Grid.Column=&amp;quot;0&amp;quot; Margin=&amp;quot;4&amp;quot; VerticalAlignment=&amp;quot;Center&amp;quot;/&amp;gt;
        &amp;lt;TextBox x:Name=&amp;quot;MessageToSendTextBox&amp;quot; Text=&amp;quot;{Binding Path=MessageToSend, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}&amp;quot; IsEnabled=&amp;quot;{Binding Path=MessageToSendIsEnabled}&amp;quot; Grid.Row=&amp;quot;2&amp;quot; Grid.Column=&amp;quot;1&amp;quot; Margin=&amp;quot;4&amp;quot;/&amp;gt;
        &amp;lt;Button Command=&amp;quot;{Binding Path=SendMessage}&amp;quot; Content=&amp;quot;Send&amp;quot; Grid.Row=&amp;quot;2&amp;quot; Grid.Column=&amp;quot;2&amp;quot; Margin=&amp;quot;4&amp;quot; Padding=&amp;quot;16,4&amp;quot; HorizontalAlignment=&amp;quot;Stretch&amp;quot;/&amp;gt;
    &amp;lt;/Grid&amp;gt;
&amp;lt;/Page&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And that's that. Let's give it a go!&lt;/p&gt;
&lt;h3 id="testing"&gt;Testing&lt;/h3&gt;
&lt;p&gt;Set the &lt;code&gt;UnoChat.Client.UWP&lt;/code&gt; project as the &amp;quot;Startup Project&amp;quot; and hit F5. After a short compilation cycle you should see the following:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatClientUWPRunningI.png" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Client UWP Running - 1"/&gt;
&lt;p&gt;Click &amp;quot;Connect&amp;quot; and, after a short pause you should see the &amp;quot;Message&amp;quot; textbox become enabled. Enter some text in the &amp;quot;Message&amp;quot; textbox and click the &amp;quot;Send&amp;quot; button (or hit enter) and the message should be sent to SignalR. SignalR will then publish this message to all connected clients which, given we are one of the connected clients, will result in the message being sent back to us and being displayed in ItemsControl in the middle of the window as shown below:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatClientUWPRunningII.png" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Client UWP Running - 2"/&gt;
&lt;p&gt;But having one client on one platform is no fun!&lt;/p&gt;
&lt;p&gt;Lets kick off the Android head project by right clicking on it and selection &lt;code&gt;Debug-&amp;gt;Start New Instance&lt;/code&gt;. After another short compilation an Android Emulator should started and our app should be deployed to it then run. Clicking &amp;quot;Connect&amp;quot; then (after connection is complete) entering a message in the &amp;quot;Message&amp;quot; text box and hitting &amp;quot;Send&amp;quot; should result in the following:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatRunningOnUwpAndAndroid.png" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Running On Uwp And Android"/&gt;
&lt;p&gt;Nice, two platforms for the price on one!&lt;/p&gt;
&lt;p&gt;Now (and you'll need to be &lt;a href="https://docs.microsoft.com/en-us/xamarin/ios/get-started/installation/windows/connecting-to-mac/"&gt;paired to a Mac for this&lt;/a&gt;), right click the iOS head project and select &lt;code&gt;Debug-&amp;gt;Start New Instance&lt;/code&gt;. Once the iOS device emulator has started, follow the same steps as with with other head projects and you'll see the following:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatRunningOnUwpAndroidAndiOS.png" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Running On Uwp, Android and iOS"/&gt;
&lt;p&gt;That's three for three.&lt;/p&gt;
&lt;p&gt;Now, right click on the WASM head and select &lt;code&gt;Debug-&amp;gt;Start New Instance&lt;/code&gt;. After a short compilation you'll see a browser window appear and.... get stuck at the splash screen.&lt;/p&gt;
&lt;p&gt;Booo! So close...&lt;/p&gt;
&lt;h3 id="getting-wasm-linked"&gt;Getting WASM Linked&lt;/h3&gt;
&lt;p&gt;Opening the browser's &amp;quot;Developer Tools&amp;quot; with F12 we see this on the Console:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatWasmLinkerIssues.png" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Wasm Link Issues"/&gt;
&lt;p&gt;Well, we've seen these &amp;quot;A suitable constructor ... could not be found&amp;quot; exceptions &lt;a href="https://ian.bebbs.co.uk/posts/UnoWithSwagger#this-missing-links"&gt;before&lt;/a&gt;. They're due to the assemblies containing the associated types being omitted by the Mono linker. By looking up which assemblies the various types belong to we're able to explicitly instruct the linker to include the assemblies by modifying the &lt;code&gt;LinkerConfig.xml&lt;/code&gt; file in the WASM head project.&lt;/p&gt;
&lt;p&gt;After a few &amp;quot;start -&amp;gt; fail -&amp;gt; find type -&amp;gt; amend config&amp;quot; iterations I ended up with the following in my &lt;code&gt;LinkerConfig.xaml&lt;/code&gt; file:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xml"&gt;&amp;lt;linker&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;UnoChat.Client.Wasm&amp;quot; /&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Uno.UI&amp;quot; /&amp;gt;

  &amp;lt;assembly fullname=&amp;quot;Microsoft.AspnetCore.Http.Connections.Client&amp;quot;/&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Microsoft.Extensions.Options&amp;quot;/&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Microsoft.AspNetCore.SignalR.Client&amp;quot;/&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Microsoft.AspNetCore.SignalR.Client.Core&amp;quot;/&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Microsoft.AspNetCore.SignalR.Protocols.Json&amp;quot;/&amp;gt;

  &amp;lt;assembly fullname=&amp;quot;System.Core&amp;quot;&amp;gt;
	&amp;lt;!-- This is required by JSon.NET and any expression.Compile caller --&amp;gt;
	  &amp;lt;type fullname=&amp;quot;System.Linq.Expressions*&amp;quot; /&amp;gt;
  &amp;lt;/assembly&amp;gt;
&amp;lt;/linker&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And, with this in place starting the WASM head resulted in:&lt;/p&gt;
&lt;img src="/Content/UnoChat/UnoChatWasmRunning.png" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="UnoChat Wasm Running"/&gt;
&lt;p&gt;ooOOoo... exciting!! Could it be??&lt;/p&gt;
&lt;video class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px;" controls autoplay loop&gt;
  &lt;source src="/Content/UnoChat/UnoChatAllWingsCheckin.mp4" type="video/mp4"/&gt;
Your browser does not support the video tag
&lt;/video&gt;
&lt;p&gt;Yes, yes it could.&lt;/p&gt;
&lt;p&gt;Here we have &lt;code&gt;UnoChat.Client.Console&lt;/code&gt; (Red Leader), &lt;code&gt;UnoChat.Client.UWP&lt;/code&gt; (Red 3), &lt;code&gt;UnoChat.Client.Wasm&lt;/code&gt; (Red 6), &lt;code&gt;UnoChat.Client.Droid&lt;/code&gt; (Red 5) and &lt;code&gt;UnoChat.Client.iOS&lt;/code&gt; (Red Buttons) all connected to the SignalR service and all receiving real-time updates.&lt;/p&gt;
&lt;p&gt;Nice.&lt;/p&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;And there we go. In about an hour (hey I stopped for lunch) we have an app which is capable of receiving real-time updates and which runs on pretty much every OS - either natively or through the browser. Moreover, the code to deliver this somewhat epic feat is short, concise, maintainable and - most importantly - 99% shared amongst the various project heads.&lt;/p&gt;
&lt;p&gt;The Uno platform really has matured amazingly well since I first blogged about it as part of last December's &lt;a href="https://ian.bebbs.co.uk/posts/Uno"&gt;Third Annual C# Advent&lt;/a&gt;. Back then I found that it worked... mostly... but not all the head projects functioned correctly and it required a whole host of kludges to get them all running from a shared codebase. Just over seven months later and the change is incredible: You now have an expectation of things working &amp;quot;out-of-the-box&amp;quot; and any minor difference/issue on a given platform to be an easy work around.&lt;/p&gt;
&lt;p&gt;I can't wait to see what the Uno Platform has in store for us at &lt;a href="https://platform.uno/blog/unoconf-2020-virtual-free-aug-12-2020-save-the-date/"&gt;UnoConf 2020&lt;/a&gt; (personally I'm hoping for Uno on Linux and - most importantly - Raspberry Pis). Hope to see you all there on August 12th!&lt;/p&gt;
&lt;h2 id="lastly"&gt;Lastly...&lt;/h2&gt;
&lt;p&gt;If you're interested in using the Uno Platform to deliver cross-platform apps or have an upcoming project for which you'd like evaluate Uno Platform's fit, then please feel free to drop me a line to discuss your project/ideas using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. As a freelance software developer and remote contractor I'm always interested in hearing from potential new clients or about potential new collaborations.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Uno WebAssembly Containerization</title>
			<link>http://ian.bebbs.co.uk/posts/UnoWasmDocker</link>
			<description>&lt;p&gt;In this post I will show how to build and run &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; WebAssembly projects within a Docker container. While I'm pretty familiar with containerization technologies, Uno's transformation of C#/XAML to WebAssembly via Mono was - and, to a certain extent, still is - a bit of a mystery. As such, this post will very much be an exploration of the technical underpinnings of these technologies.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UnoWasmDocker</guid>
			<pubDate>Mon, 22 Jun 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;In this post I will show how to build and run &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; WebAssembly projects within a Docker container. While I'm pretty familiar with containerization technologies, Uno's transformation of C#/XAML to WebAssembly via Mono was - and, to a certain extent, still is - a bit of a mystery. As such, this post will very much be an exploration of the technical underpinnings of these technologies.&lt;/p&gt;
&lt;h2 id="deployment"&gt;Deployment&lt;/h2&gt;
&lt;p&gt;While most project heads in an Uno solution are native applications that get deployed to and run on a device (usually from an App store), the WebAssembly (Wasm) head is different. Artifacts from the compilation of the Wasm project need to be deployed to a server which is capable of serving them to a browser when requested.&lt;/p&gt;
&lt;p&gt;This deployment is typically achieved by publishing the Wasm artifacts to IIS hosted on a [virtual] server, &lt;a href="https://nicksnettravels.builttoroam.com/post-2019-03-20-publishing-uno-webassembly-wasm-to-azure-app-service-aspx/"&gt;deploying an Azure App-Service&lt;/a&gt; replete with all artifacts or simply copying the artifacts to a &lt;a href="https://nicksnettravels.builttoroam.com/post-2019-03-20-deploying-uno-wasm-using-blob-storage-aspx/"&gt;file store capable of responding to HTTP requests&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;However there is another modern deployment mechanism that has, in recent years, come to dominate the DevOps landscape: Containerization.&lt;/p&gt;
&lt;h2 id="add-docker-support"&gt;Add -&amp;gt; Docker Support...&lt;/h2&gt;
&lt;p&gt;Visual Studio has had first class support for creating and running Docker Containers for quite a while now and its integration into Visual Studio is very mature. In most instances, Containerizing a project has become as simple as right-clicking on the project, selecting &amp;quot;Add -&amp;gt; Docker Support...&amp;quot; and following the resulting dialogs. Unfortunately, despite being a web project which Visual Studio knows how to &amp;quot;Publish...&amp;quot;, right clicking on an Uno Wasm project does not present the option to add Docker Support.&lt;/p&gt;
&lt;p&gt;Given I was working on a solution with a containerized ReST API (along with &lt;a href="https://ian.bebbs.co.uk/posts/UnoWithSwagger"&gt;NSwag-generated .NET Standard client project&lt;/a&gt;) I really wanted to be able to containerize the Wasm app too so it could form part of a &lt;a href="https://docs.docker.com/compose/"&gt;composed deployment&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;To simplify the process of working this out, I created a new Uno Platform project named &lt;code&gt;ContaineredUnoWasm&lt;/code&gt; using version 2.4.0.0 of the Uno Platform templates and worked to containerize that. This project (completed with working containerized builds) can be found &lt;a href="https://github.com/ibebbs/ContaineredUnoWasm"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="building-in-a-container"&gt;Building in a container&lt;/h2&gt;
&lt;h3 id="imitation-is-the-sincerest-form-of-flattery"&gt;Imitation is the sincerest form of flattery&lt;/h3&gt;
&lt;p&gt;If I was going to containerize the deployment of the Wasm project, I decided to go the whole hog and allow for &lt;a href="https://docs.docker.com/develop/develop-images/multistage-build/"&gt;multi-stage containerized builds&lt;/a&gt;, much like those created natively by Visual Studio. Without really thinking too much about it, my first - somewhat naïve - approach was simply to copy and customise a &lt;code&gt;Dockerfile&lt;/code&gt; created by Visual Studio; in effect, something like this:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80

FROM mcr.microsoft.com/dotnet/core/sdk:3.1-buster AS build
WORKDIR /src

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;]
RUN dotnet restore &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;]
COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;]
RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build 

FROM build AS publish
RUN dotnet publish &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT [&amp;quot;dotnet&amp;quot;, &amp;quot;ContaineredUnoWasm.Wasm.dll&amp;quot;]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;We can then try building a container image from this &lt;code&gt;Dockerfile&lt;/code&gt; by executing the following command (from the root of our repo):&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;$&amp;gt; docker build -f .\ContaineredUnoWasm\ContaineredUnoWasm.Wasm\Dockerfile .
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Which fails with the somewhat confusing error:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Step 10/16 : RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build
...
Build FAILED.
...
  Downloading mono-wasm-502dca36d36 to /tmp/mono-wasm-502dca36d36.zip
/root/.nuget/packages/uno.wasm.bootstrap/1.2.0/build/Uno.Wasm.Bootstrap.targets(124,5): error : System.ComponentModel.Win32Exception (2): No such file or directory [/src/ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Oooh-kay. We know that file is exists as that's the file we started building!&lt;/p&gt;
&lt;h3 id="jaylee-to-the-rescue"&gt;Jaylee to the rescue!&lt;/h3&gt;
&lt;p&gt;Casting around for ideas as to what might be causing this issue, I came across &lt;a href="https://jaylee.org/archive/2019/03/21/azure-devops-wasm-build-container.html"&gt;this post&lt;/a&gt; from the one and only &lt;a href="https://twitter.com/jlaban"&gt;Jérôme Laban&lt;/a&gt; which shows how to build the Wasm project in Azure Devops using a container... which all sounded rather promising.&lt;/p&gt;
&lt;p&gt;Reading this post shows that Jérôme is using a custom container image - &lt;code&gt;nventive/wasm-build:1.0-bionic&lt;/code&gt; - within which the Wasm project is built. Looking this image up on &lt;a href="https://hub.docker.com/r/nventive/wasm-build"&gt;Docker Hub&lt;/a&gt; and then navigating to the &lt;a href="https://github.com/nventive/docker"&gt;source repository&lt;/a&gt; allows us to see what bizarre wizardry Jérôme is using to build the Wasm project in a container. And here it is:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM mcr.microsoft.com/dotnet/core/sdk:2.2.105-bionic
RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF
RUN echo &amp;quot;deb https://download.mono-project.com/repo/ubuntu stable-bionic main&amp;quot; | tee /etc/apt/sources.list.d/mono-official-stable.list
RUN apt-get update

# Install mono, msbuild and dependencies
RUN apt-get -y install sudo unzip python mono-devel msbuild libc6 ninja-build

# Setup for GitVersion 4.x 
RUN sudo apt-get install -y libgit2-dev libgit2-26 &amp;amp;&amp;amp; \
ln -s /usr/lib/x86_64-linux-gnu/libgit2.so /lib/x86_64-linux-gnu/libgit2-15e1193.so

# Install node and puppeteer dependencies
RUN curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash - &amp;amp;&amp;amp; \
	sudo apt install -y nodejs gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 \
	libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 \
	libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 \
	libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 \
	libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

# Install and activate emscripten
RUN git clone https://github.com/juj/emsdk.git &amp;amp;&amp;amp; \
	sudo chmod 777 /emsdk &amp;amp;&amp;amp; \
    cd emsdk &amp;amp;&amp;amp; \
    ./emsdk install sdk-1.38.28-64bit &amp;amp;&amp;amp; \
    ./emsdk install sdk-1.38.30-64bit &amp;amp;&amp;amp; \
    ./emsdk install sdk-1.38.31-64bit &amp;amp;&amp;amp; \
    ./emsdk install sdk-1.38.34-64bit &amp;amp;&amp;amp; \
    ./emsdk install latest &amp;amp;&amp;amp; \
    ./emsdk activate sdk-1.38.31-64bit &amp;amp;&amp;amp; \
    sudo chmod -R 777 /emsdk
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;No wonder our docker build was failing, look at all the additional dependencies we need to build the Wasm project.&lt;/p&gt;
&lt;p&gt;You know, contrary to intuition, the more I learn about the how the C#-&amp;gt;WebAssembly transformation works, the &lt;em&gt;more&lt;/em&gt; it seems like magic.&lt;/p&gt;
&lt;h3 id="meanwhile-back-in-the-dockerfile"&gt;Meanwhile, back in the Dockerfile&lt;/h3&gt;
&lt;p&gt;Right, so armed with Jérôme's magical mystical container image of power, we'll try rewriting our Dockerfile as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80

FROM nventive/wasm-build:latest AS build
WORKDIR /src

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;]
RUN dotnet restore &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;]
COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;]
RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build 

FROM build AS publish
RUN dotnet publish &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT [&amp;quot;dotnet&amp;quot;, &amp;quot;ContaineredUnoWasm.Wasm.dll&amp;quot;]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Looks promising, let's give it a shot. Running this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;$&amp;gt; docker build -f .\ContaineredUnoWasm\ContaineredUnoWasm.Wasm\Dockerfile .
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Produces this:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Step 8/14 : RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build
 ---&amp;gt; Running in 1f7ff2159acc
Microsoft (R) Build Engine version 15.9.20+g88f5fadfbe for .NET Core
Copyright (C) Microsoft Corporation. All rights reserved.

  Restoring packages for /src/ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj...
  Installing Microsoft.Extensions.DependencyInjection.Abstractions 1.1.0.
  Installing System.Runtime.CompilerServices.Unsafe 4.3.0.
  Installing Microsoft.Extensions.Logging 1.1.1.
  Installing System.ValueTuple 4.4.0.
  Installing CommonServiceLocator 2.0.5.
  Installing System.Buffers 4.4.0.
  Installing System.Runtime.CompilerServices.Unsafe 4.5.2.
  Installing Microsoft.Extensions.Primitives 1.1.0.
  Installing Uno.SourceGenerationTasks 2.0.6.
  Installing Uno.Core 2.0.0.
  Installing System.Memory 4.5.2.
  Installing Uno.Core.Build 2.0.0.
  Installing System.Runtime.InteropServices.WindowsRuntime 4.3.0.
  Installing Microsoft.Extensions.Configuration.Abstractions 1.1.1.
  Installing Microsoft.Extensions.Logging.Abstractions 1.1.1.
  Installing Uno.UI 2.4.0.
  Installing Microsoft.Extensions.Logging.Console 1.1.1.
  Installing Microsoft.Extensions.Logging.Filter 1.1.1.
  Installing Uno.Wasm.Bootstrap 1.2.0.
  Installing Uno.Wasm.Bootstrap.DevServer 1.2.0.
  Generating MSBuild file /src/ContaineredUnoWasm/ContaineredUnoWasm.Wasm/obj/ContaineredUnoWasm.Wasm.csproj.nuget.g.props.
  Generating MSBuild file /src/ContaineredUnoWasm/ContaineredUnoWasm.Wasm/obj/ContaineredUnoWasm.Wasm.csproj.nuget.g.targets.
  Restore completed in 27.69 sec for /src/ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj.
It was not possible to find any compatible framework version
The specified framework 'Microsoft.NETCore.App', version '3.0.0' was not found.
  - Check application dependencies and target a framework version installed at:
      /usr/share/dotnet/
  - Installing .NET Core prerequisites might help resolve this problem:
      https://go.microsoft.com/fwlink/?LinkID=798306&amp;amp;clcid=0x409
  - The .NET Core framework and SDK can be installed from:
      https://aka.ms/dotnet-download
  - The following versions are installed:
      2.2.3 at [/usr/share/dotnet/shared/Microsoft.NETCore.App]
/root/.nuget/packages/uno.sourcegenerationtasks/2.0.6/build/netstandard1.0/Uno.SourceGenerationTasks.targets(127,2): error : Generation failed, error code 150 [/src/ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj]

Build FAILED.
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Oh, interesting stuff. An error we can work with and, if I'm not mistaken, I seem to remember the &lt;code&gt;nventive/wasm-build&lt;/code&gt; Dockerfile starting with &lt;code&gt;FROM mcr.microsoft.com/dotnet/core/sdk:2.2.105-bionic&lt;/code&gt;. Perhaps this Dockerfile is just a little out of date?&lt;/p&gt;
&lt;h3 id="updating-wasm-build"&gt;Updating Wasm-Build&lt;/h3&gt;
&lt;br/&gt;
&lt;h4 id="edit"&gt;- - - - EDIT - - - -&lt;/h4&gt;
&lt;p&gt;At this point I forked, cloned, updated and built a new version of the &lt;a href="https://github.com/nventive/docker"&gt;&lt;code&gt;nventive/docker&lt;/code&gt;&lt;/a&gt; image. However, towards the end of authoring this blog post, a hunch caused me to search for &amp;quot;docker&amp;quot; in the &amp;quot;unoplatform&amp;quot; organisation on Github. On the last page of &amp;quot;Code&amp;quot; hits, I found a link to this &lt;a href="https://github.com/unoplatform/Uno.Wasm.Bootstrap/blob/master/Readme.md"&gt;&lt;code&gt;Readme.md&lt;/code&gt;&lt;/a&gt; in which, about half way down, is a reference to another container image &lt;a href="https://hub.docker.com/r/unoplatform/wasm-build"&gt;&lt;code&gt;unoplatform/wasm-build&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;This image was completely up to date and meant I no longer had to build a custom version so the rest of this (somewhat painful) section has been removed. Conversely, I decided to leave the slight misdirection in the section above as I thought it provided quite an insight into the complexities involved in building the Wasm output.&lt;/p&gt;
&lt;h4 id="end-edit"&gt;- - - - END EDIT - - - -&lt;/h4&gt;
&lt;br/&gt;
&lt;h3 id="one-step-back-two-steps-forward"&gt;One step back, two steps forward&lt;/h3&gt;
&lt;p&gt;Ok, having found a new &lt;code&gt;wasm-build&lt;/code&gt; image, lets try integrating it into the &lt;code&gt;Dockerfile&lt;/code&gt; for building &lt;code&gt;ContaineredUnoWasm&lt;/code&gt; as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-buster-slim AS base
WORKDIR /app
EXPOSE 80

FROM unoplatform/wasm-build:latest AS build
WORKDIR /src

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;]
RUN dotnet restore &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;]
COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;]
RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build 

FROM build AS publish
RUN dotnet publish &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT [&amp;quot;dotnet&amp;quot;, &amp;quot;ContaineredUnoWasm.Wasm.dll&amp;quot;]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Which is built using the command:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;$&amp;gt; docker build -f .\ContaineredUnoWasm\ContaineredUnoWasm.Wasm\Dockerfile . -t ibebbs/containeredunowasm:latest
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And results in:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;Successfully built c2c4c48cf33a
Successfully tagged ibebbs/containeredunowasm:latest
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Huzzah, it worked!&lt;/p&gt;
&lt;img src="/Content/UnoWasmDocker/Brilliant.jpg" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="BRILLIANT!!!!"&gt;
&lt;br/&gt;
&lt;h2 id="running-from-a-container"&gt;Running from a container&lt;/h2&gt;
&lt;p&gt;Now, unless I'm very much mistaken, running our containerized Wasm app should be as simple as starting the container and navigating to the exposed port in a browser. As such, let's run the command:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;$&amp;gt; docker run -p 5000:80 ibebbs/containeredunowasm:latest
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Results in:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;It was not possible to find any installed .NET Core SDKs
  Did you mean to run .NET Core SDK commands? Install a .NET Core SDK from:
      https://aka.ms/dotnet-download
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Errr... no I didn't, I wanted to run my app service. Let's see what's going on here by opening an interactive shell within the container and listing the contents:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;docker run -it --entrypoint /bin/bash ibebbs/containeredunowasm:latest
root&amp;#64;52acb17752f2:/app# dir
AppManifest.js                                             Uno.UI.css
Assets                                                     Uno.UI.dll
CommonServiceLocator.dll                                   Uno.UI.js
Fonts.css                                                  Uno.Xaml.dll
Microsoft.Extensions.Configuration.Abstractions.dll        Uno.dll
Microsoft.Extensions.DependencyInjection.Abstractions.dll  _compressed_br
Microsoft.Extensions.Logging.Abstractions.dll              _compressed_gz
Microsoft.Extensions.Logging.Console.dll                   corebindings.o
Microsoft.Extensions.Logging.Filter.dll                    dotnet.js
Microsoft.Extensions.Logging.dll                           dotnet.wasm
Microsoft.Extensions.Primitives.dll                        driver.o
Properties                                                 index.html
System.Buffers.dll                                         jquery-pep.js
System.Collections.Immutable.dll                           managed-4aa732b23652301ed854d2dd646ce71b0b0b5e3f
System.ComponentModel.dll                                  mono-config.js
System.Linq.dll                                            normalize.css
System.Memory.dll                                          refs
System.Numerics.Vectors.dll                                require.js
System.Reflection.Emit.ILGeneration.dll                    runtime.js
System.Reflection.Emit.Lightweight.dll                     server.py
System.Runtime.CompilerServices.Unsafe.dll                 service-worker.js
System.Runtime.InteropServices.WindowsRuntime.dll          setImmediate.js
System.Threading.dll                                       uno-bootstrap.css
Uno.Core.dll                                               uno-bootstrap.js
Uno.Foundation.dll                                         uno-config.js
Uno.UI.Toolkit.dll                                         web.config
Uno.UI.Wasm.dll                                            zlib-helper.o
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;What? No &lt;code&gt;ContaineredUnoWasm.Wasm.dll&lt;/code&gt; but an &amp;quot;index.html&amp;quot;? This looks suspiciously like a...&lt;/p&gt;
&lt;img src="/Content/UnoWasmDocker/MindBlown.gif" class="img-responsive" style="margin: auto; margin-top: 6px; margin-bottom: 6px;" alt="Mind Blown"&gt;
&lt;p&gt;Yup, &lt;em&gt;&lt;strong&gt;very&lt;/strong&gt;&lt;/em&gt; much mistaken. The result of compiling the Wasm project isn't a hosted service but is ... of course ... just content which can be hosted by another service. As such, there's really nothing for the container to run and, as such, we're going to need a web server to serve this content.&lt;/p&gt;
&lt;h3 id="kestrel-vs-nginx"&gt;Kestrel vs Nginx&lt;/h3&gt;
&lt;p&gt;Now, this being a .net solution and me being a .net fanboi, I really wanted serve this content from a .net webserver. I was thinking it should be possible to find an off-the-[docker hub]-shelf image of a kestrel webserver which was/could be configured to serve static content. But no, despite a significant search, it appeared that, if I wanted to serve the content from Kestrel I'd have to add, build and containerize a bespoke web project.&lt;/p&gt;
&lt;p&gt;So instead I decided to use &lt;a href="https://hub.docker.com/_/nginx/"&gt;nginx&lt;/a&gt; which is configured to &lt;a href="https://github.com/docker-library/docs/tree/master/nginx#hosting-some-simple-static-content"&gt;serve static content&lt;/a&gt; out-of-the-box.&lt;/p&gt;
&lt;p&gt;To use nginx, I amended the &lt;code&gt;Dockerfile&lt;/code&gt; for &lt;code&gt;ContaineredUnoWasm&lt;/code&gt; to this:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM unoplatform/wasm-build:latest AS build
WORKDIR /src

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;]
RUN dotnet restore &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;]
COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;]
RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build 

FROM build AS publish
RUN dotnet publish &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/publish

FROM nginx:alpine
EXPOSE 80
COPY --from=publish /app/publish /usr/share/nginx/html
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Then rebuilt and started the image:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;$&amp;gt; docker build -f .\ContaineredUnoWasm\ContaineredUnoWasm.Wasm\Dockerfile . -t ibebbs/containeredunowasm:latest
...
Successfully built 4c1fc5cb9efd
Successfully tagged ibebbs/containeredunowasm:latest
$&amp;gt; docker run -p 5000:80 ibebbs/containeredunowasm:latest
/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: Getting the checksum of /etc/nginx/conf.d/default.conf
10-listen-on-ipv6-by-default.sh: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Looks promising. Let's hit &lt;code&gt;http://localhost:5000&lt;/code&gt; with a browser:&lt;/p&gt;
&lt;img src="/Content/UnoWasmDocker/UnoLogo.png" class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Uno Logo"&gt;
&lt;p&gt;Well, that's better. Lets see if we can resolve the &amp;quot;Incorrect response MIME type&amp;quot; issue by telling nginx about the mime types to serve. This is done by adding a &lt;code&gt;mime.types&lt;/code&gt; file to our project containing:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;types {
  text/html                             html htm shtml;
  text/css                              css;
  text/javascript						            js;
  application/wasm                      wasm;
  application/octet-stream              dll clr;
  application/json                      json;
  application/font-woff                 woff woff2;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And adding it to our &lt;code&gt;nginx&lt;/code&gt; container by amending the &lt;code&gt;Dockerfile&lt;/code&gt; for &lt;code&gt;ContaineredUnoWasm&lt;/code&gt; as shown here:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM unoplatform/wasm-build:latest AS build
WORKDIR /src

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;]
RUN dotnet restore &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;]
COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;]
RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build 

FROM build AS publish
RUN dotnet publish &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/publish

FROM nginx:alpine
EXPOSE 80
COPY --from=publish /app/publish /usr/share/nginx/html
COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/mime.types&amp;quot;, &amp;quot;/etc/nginx/mime.types&amp;quot; ]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now, rebuilding the image, running the container and hitting the endpoint in a browser gives us:&lt;/p&gt;
&lt;img src="/Content/UnoWasmDocker/HelloWorld.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Hello World!"&gt;
&lt;p&gt;Wahoo!&lt;/p&gt;
&lt;h3 id="a-little-house-keeping"&gt;A little house keeping&lt;/h3&gt;
&lt;p&gt;Of course, needing to add a &amp;quot;mime.types&amp;quot; file with this exact content to any Wasm project we want to containerize is a pain so instead lets make a container image that already includes this file. In a fork of the &lt;a href="https://github.com/unoplatform/docker"&gt;&lt;code&gt;unoplatform/docker&lt;/code&gt;&lt;/a&gt; repository, I'll add a new folder called &lt;code&gt;wasm-serve&lt;/code&gt; within which I'll add the &lt;code&gt;mime.types&lt;/code&gt; file from above and the following &lt;code&gt;Dockerfile&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM nginx:alpine
COPY [&amp;quot;mime.types&amp;quot;, &amp;quot;/etc/nginx/mime.types&amp;quot; ]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Building this image with the command &lt;code&gt;docker build . -t wasm-server:latest&lt;/code&gt; allows me to modify the &lt;code&gt;Dockerfile&lt;/code&gt; for &lt;code&gt;ContaineredUnoWasm&lt;/code&gt; as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-dockerfile"&gt;FROM unoplatform/wasm-build:latest AS build
WORKDIR /src

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;]
RUN dotnet restore &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot;

COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Shared/&amp;quot;]
COPY [&amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;, &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/&amp;quot;]
RUN dotnet build &amp;quot;ContaineredUnoWasm/ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/build 

FROM build AS publish
RUN dotnet publish &amp;quot;ContaineredUnoWasm.Wasm/ContaineredUnoWasm.Wasm.csproj&amp;quot; -c Release -o /app/publish

FROM ibebbs/wasm-serve:latest
EXPOSE 80
COPY --from=publish /app/publish /usr/share/nginx/html
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Which, when rebuilt and run, still results in the running app.&lt;/p&gt;
&lt;p&gt;Done and done.&lt;/p&gt;
&lt;h3 id="future-improvements"&gt;Future improvements&lt;/h3&gt;
&lt;p&gt;At the moment the docker build needs to download the &amp;quot;mono-wasm SDK&amp;quot; on each build. It would be much better download the mono-wasm SDK in an earlier step of the Dockerfile so that it is cached and doesn't need to be downloaded each time. I'm looking into doing this and will provide an update as an when I've worked out how to do it.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://balintpogatsa.github.io/2019/05/05/webassembly-mono-aot-example.html"&gt;This article&lt;/a&gt; suggests downloading the SDK from &lt;a href="https://jenkins.mono-project.com/job/test-mono-mainline-wasm/label=ubuntu-1804-amd64/lastSuccessfulBuild/Azure/"&gt;here&lt;/a&gt; but the build output from Visual Studio suggests the SDK is coming from a blob owned by Uno (&lt;a href="https://unowasmbootstrap.blob.core.windows.net/runtime/mono-wasm-###########.zip"&gt;https://unowasmbootstrap.blob.core.windows.net/runtime/mono-wasm-###########.zip&lt;/a&gt;). Either way, once it's downloaded, setting the &lt;code&gt;WASM_SDK&lt;/code&gt; to the path of the unzipped sdk should ensure the sdk doesn't need to be downloaded during build.&lt;/p&gt;
&lt;p&gt;I'm also still having problems building/running more advanced projects within a container. Hitting a weird error (&lt;code&gt;Object doesn't support property or method '_coreDispatcherCallback'&lt;/code&gt;) when running the resulting WASM in a browser. Still banging my head against this one so any advice gratefully received.&lt;/p&gt;
&lt;h4 id="edit-1"&gt;- - - - EDIT - - - -&lt;/h4&gt;
&lt;p&gt;And as if by magic, Jérôme nails the answer in one fell swoop:&lt;/p&gt;
&lt;blockquote class="twitter-tweet tw-align-center"&gt;&lt;p lang="en" dir="ltr"&gt;Nice article!! dotnet publish definitely needs a bit of work (the support is very recent), too many files are in the output folder. For the `_coreDispatcherCallback` error, it&amp;#39;s generally a mismatch between Uno.UI and Uno.Wasm.Bootstrap. Recent builds don&amp;#39;t have that issue.&lt;/p&gt;&amp;mdash; Jérôme Laban (&amp;#64;jlaban) &lt;a href="https://twitter.com/jlaban/status/1275046276233605122?ref_src=twsrc%5Etfw"&gt;June 22, 2020&lt;/a&gt;&lt;/blockquote&gt; &lt;script async src="https://platform.twitter.com/widgets.js" charset="utf-8"&gt;&lt;/script&gt;
&lt;br/&gt;
&lt;h4 id="end-edit-1"&gt;- - - - END EDIT - - - -&lt;/h4&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;It really was a bit of a roller-coaster of a journey to get a containerized build / image of an Uno Wasm project running.&lt;/p&gt;
&lt;p&gt;One thing it really highlighted to me is the amazing impact of open-source code. Any time an issue was encountered, I was able to find the &lt;em&gt;exact code/file&lt;/em&gt; causing the problem and thereby find a solution. For someone who cut his teeth programming before the internet made resolving every programming issue as simple as a quick jaunt to StackOverflow, and when source-code was something you had to pay through the nose for, working in and with OSS for the past several years has been an real eye-opener (if you'll excuse the somewhat strained facial idioms).&lt;/p&gt;
&lt;p&gt;However, we also discovered that this transparency can also be a double-edged sword. The .NET ecosystem - and especially Uno - is moving forward at an incredible cadence with new releases causing older versions to be deprecated and documentation to become dated. As we can see above, this can throw serious curve-balls to anyone endeavouring to stray from the beaten path or get a better understanding of how things work.&lt;/p&gt;
&lt;p&gt;Anyway, should you have any suggestions for, or questions about, anything above please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Giving Uno Some Swagger</title>
			<link>http://ian.bebbs.co.uk/posts/UnoWithSwagger</link>
			<description>&lt;p&gt;A few days ago, &lt;a href="https://twitter.com/thenickrandolph"&gt;Nick Randolph&lt;/a&gt; published an excellent blog post about &lt;a href="https://nicksnettravels.builttoroam.com/consuming-swagger/"&gt;"Consuming REST API with Swagger / OpenAPI in Xamarin and Uno Applications"&lt;/a&gt;. I read this article with great interest (and perhaps a touch of chagrin) as I was mid-way through writing a very similar article myself. While I found this post to be as detailed and pragmatic as &lt;a href="https://nicksnettravels.builttoroam.com/uno-crossplatform-template/"&gt;Nick's always are&lt;/a&gt;, I feel he missed a few key elements about consuming strongly-typed ReST clients in Uno, particularly when it comes to consuming them from within a browser via the WebAssembly (WASM) project. In this post I will cover these additional points such that the reader is able to consume ReST endpoints, in the same manner, from all Uno head projects.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/UnoWithSwagger</guid>
			<pubDate>Mon, 15 Jun 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;A few days ago, &lt;a href="https://twitter.com/thenickrandolph"&gt;Nick Randolph&lt;/a&gt; published an excellent blog post about &lt;a href="https://nicksnettravels.builttoroam.com/consuming-swagger/"&gt;&amp;quot;Consuming REST API with Swagger / OpenAPI in Xamarin and Uno Applications&amp;quot;&lt;/a&gt;. I read this article with great interest (and perhaps a touch of chagrin) as I was mid-way through writing a very similar article myself. While I found this post to be as detailed and pragmatic as &lt;a href="https://nicksnettravels.builttoroam.com/uno-crossplatform-template/"&gt;Nick's always are&lt;/a&gt;, I feel he missed a few key elements about consuming strongly-typed ReST clients in Uno, particularly when it comes to consuming them from within a browser via the WebAssembly (WASM) project. In this post I will cover these additional points such that the reader is able to consume ReST endpoints, in the same manner, from all Uno head projects.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;This article will now very much be a continuation of Nick's. If you haven't read Nick's post, I would encourage you to &lt;a href="https://nicksnettravels.builttoroam.com/consuming-swagger/"&gt;do so now&lt;/a&gt; so that you understand many of the approaches used here. Much like Nick, I will be using a ReST endpoint created for an earlier blog post, namely the &amp;quot;Cheeze.Store&amp;quot; API written for my &lt;a href="https://ian.bebbs.co.uk/posts/LessReSTMoreHotChocolate"&gt;&amp;quot;Less ReST, More HotChocolate&amp;quot;&lt;/a&gt; post.&lt;/p&gt;
&lt;p&gt;All source code for this post can be found in my &lt;a href="https://github.com/ibebbs/UnoWithSwagger"&gt;UnoWithSwagger&lt;/a&gt; repo on Github.&lt;/p&gt;
&lt;h2 id="typed-clients"&gt;Typed Clients&lt;/h2&gt;
&lt;p&gt;In contrast to Nick's post, I will not be using &lt;code&gt;dotnet openapi&lt;/code&gt; to generate Typed Clients for my API but will instead continue to use the &lt;a href="https://www.nuget.org/packages/NSwag.MSBuild/"&gt;&lt;code&gt;NSwag.MSBuild&lt;/code&gt;&lt;/a&gt; package. This is for two reasons:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Typed Client generation using &lt;code&gt;NSwag.MSBuild&lt;/code&gt; uses an NSwag configuration file. This configuration file provides much greater control over the generated code than is currently possible with &lt;code&gt;dotnet openapi&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Once configured, &lt;code&gt;NSwag.MSBuild&lt;/code&gt; is able to generate Typed Clients directly from the ReST service's source code instead of needing a &lt;code&gt;swagger.json&lt;/code&gt; file. This saves a significant amount of time when you're writing a .NET ReST service as you don't need to start the service to update the client side code, thereby removing friction and allowing you to rapidly iterate the API.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;If you're interested in using &lt;code&gt;NSwag.MSBuild&lt;/code&gt; to generate your Typed Clients then I cover the process quite thoroughly &lt;a href="https://ian.bebbs.co.uk/posts/LessReSTMoreHotChocolate#generating-typed-clients"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Furthermore, rather than &amp;quot;newing up&amp;quot; a &lt;code&gt;swaggerClient&lt;/code&gt; manually, I will be using the &lt;a href="https://www.nuget.org/packages/Microsoft.Extensions.DependencyInjection/3.1.5"&gt;&lt;code&gt;Microsoft.Extensions.DependencyInjection&lt;/code&gt;&lt;/a&gt; and &lt;a href="https://www.nuget.org/packages/Microsoft.Extensions.Http/3.1.5"&gt;&lt;code&gt;Microsoft.Extensions.Http&lt;/code&gt;&lt;/a&gt; packages to inject a correctly configured Typed Client into my view-model. This, I believe, is where Typed Clients really shine as this approach completely abstracts the source of the data such that the Typed Clients appear to just be another client side dependency.&lt;/p&gt;
&lt;p&gt;Here is the &lt;code&gt;Services&lt;/code&gt; class I use for service registration:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public partial class Services
{
    public static readonly Services Instance = new Services();

    private readonly ServiceCollection _serviceCollection;
    private readonly Lazy&amp;lt;IServiceProvider&amp;gt; _serviceProvider;

    private Services()
    {
        _serviceCollection = new ServiceCollection();
        _serviceProvider = new Lazy&amp;lt;IServiceProvider&amp;gt;(() =&amp;gt; _serviceCollection.BuildServiceProvider());
    }

    private void RegisterGlobalServices(IServiceCollection services, ILogger logger)
    {
        services.AddHttpClient&amp;lt;Store.Client.IStoreClient, Store.Client.StoreClient&amp;gt;(
            httpClient =&amp;gt; httpClient.BaseAddress = new Uri(&amp;quot;http://localhost:5000&amp;quot;)
        );

        services.AddSingleton&amp;lt;ISchedulers, Schedulers&amp;gt;();

        services.AddTransient&amp;lt;ViewModel&amp;gt;();
    }

    public void PerformRegistration(ILogger logger)
    {
        if (_serviceProvider.IsValueCreated) throw new InvalidOperationException(&amp;quot;You cannot register services after the service provider has been created&amp;quot;);

        RegisterGlobalServices(_serviceCollection, logger);
    }

    public IServiceProvider Provider =&amp;gt; _serviceProvider.Value;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Which is initialized from &lt;code&gt;App.xaml.cs&lt;/code&gt; as shown here:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;sealed partial class App : Application
{
    private readonly ILogger&amp;lt;App&amp;gt; _logger;

    public App()
    {
        ConfigureFilters(global::Uno.Extensions.LogExtensionPoint.AmbientLoggerFactory);

        _logger = global::Uno.Extensions.LogExtensionPoint.AmbientLoggerFactory.CreateLogger&amp;lt;App&amp;gt;();

        Platform.Services.Instance.PerformRegistration(_logger);

        this.InitializeComponent();
        this.Suspending += OnSuspending;
    }

    ...
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And used (naively) from within the view to instantiate the ViewModel, which then acts as the view's data context:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public sealed partial class MainPage : Page
{
    private readonly ViewModel _viewModel;
    private IDisposable _behaviours;

    public MainPage()
    {
        this.InitializeComponent();

        _viewModel = Platform.Services.Instance.Provider.GetRequiredService&amp;lt;ViewModel&amp;gt;();
        DataContext = _viewModel;
    }
    
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);

        _behaviours = _viewModel.Activate();
    }

    protected override void OnNavigatedFrom(NavigationEventArgs e)
    {
        base.OnNavigatedFrom(e);

        if (_behaviours != null)
        {
            _behaviours.Dispose();
            _behaviours = null;
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Finally, here is the &lt;code&gt;ViewModel&lt;/code&gt; implementation showing the use of the &lt;code&gt;IStoreClient&lt;/code&gt; Typed Client:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public class ViewModel : INotifyPropertyChanged
{
    private readonly IStoreClient _storeClient;
    private readonly Platform.ISchedulers _schedulers;
    private readonly ILogger&amp;lt;ViewModel&amp;gt; _logger;
    private readonly MVx.Observable.Command _loadCheese;
    private readonly MVx.Observable.Property&amp;lt;IEnumerable&amp;lt;Store.Client.Cheese&amp;gt;&amp;gt; _cheeses;

    public event PropertyChangedEventHandler PropertyChanged;

    public ViewModel(IStoreClient storeClient, Platform.ISchedulers schedulers)
    {
        _storeClient = storeClient;
        _schedulers = schedulers;

        _logger = global::Uno.Extensions.LogExtensionPoint.AmbientLoggerFactory.CreateLogger&amp;lt;ViewModel&amp;gt;();

        _loadCheese = new MVx.Observable.Command(true);
        _cheeses = new MVx.Observable.Property&amp;lt;IEnumerable&amp;lt;Store.Client.Cheese&amp;gt;&amp;gt;(Enumerable.Empty&amp;lt;Store.Client.Cheese&amp;gt;(), nameof(Cheeses), args =&amp;gt; PropertyChanged?.Invoke(this, args));
    }

    private IDisposable ShouldLoadCheeseWhenLoadCheeseInvoked()
    {
        return _loadCheese
            .Do(_ =&amp;gt; _logger.LogInformation(&amp;quot;Loading Cheeses!&amp;quot;))
            .SelectMany(_ =&amp;gt; _storeClient.GetAsync())
            .ObserveOn(_schedulers.Dispatcher)
            .Subscribe(_cheeses);
    }

    public IDisposable Activate()
    {
        return new CompositeDisposable(
            ShouldLoadCheeseWhenLoadCheeseInvoked()
        );
    }

    public ICommand LoadCheese =&amp;gt; _loadCheese;

    public IEnumerable&amp;lt;Store.Client.Cheese&amp;gt; Cheeses =&amp;gt; _cheeses.Get();
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note: This ViewModel uses my &lt;a href="https://www.nuget.org/packages/MVx.Observable/"&gt;&lt;code&gt;MVx.Observable&lt;/code&gt;&lt;/a&gt; package:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Functional, Declarative and Reactive Extensions for MVVM &amp;amp; MVC patterns&lt;/p&gt;
&lt;p&gt;A (mostly) unopinionated, light-weight alternative to ReactiveUI provided as a library &lt;em&gt;not a framework&lt;/em&gt;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id="this-missing-links"&gt;This Missing Links&lt;/h2&gt;
&lt;p&gt;Now, regardless of how you've generated your Typed Clients, you will have added a reference to the client library to each of the head projects in your Uno solution. With the above code in place, you should be able to start the UWP head, click the &amp;quot;Load Cheeze!&amp;quot; button and see this:&lt;/p&gt;
&lt;img src="/Content/UnoWithSwagger/UWPHead.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="UWP Head Running"&gt;
&lt;p&gt;However, starting the WASM head will result in the browser only showing the app's splash screen. If you bring up your browser's &amp;quot;developer tools&amp;quot; window (I use Chrome and Edge interchangeably) and view the console output you should see something like the following:&lt;/p&gt;
&lt;img src="/Content/UnoWithSwagger/WASMLinkerIssue.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="WASM DefaultHttpClientFactory could not be located"&gt;
&lt;p&gt;This error is due to way the Mono linker determines the assemblies and types that should - or shouldn't - be included in the WASM output. By default, only statically referenced types (i.e. those we're directly using in our code) will be included and downloaded into the browser when starting the app. As we don't directly reference &amp;quot;Microsoft.Extensions.Http.DefaultHttpClientFactory&amp;quot; this type isn't available to the app and therefore the DI container isn't able to instantiate it.&lt;/p&gt;
&lt;p&gt;To resolve this, we need to explicitly instruct the Mono linker to include the types we need. This can be done by modifying the &lt;code&gt;LinkerConfig.xml&lt;/code&gt; file (within the WASM head project) to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xml"&gt;&amp;lt;linker&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Cheeze.App.Wasm&amp;quot; /&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Uno.UI&amp;quot; /&amp;gt;
  
  &amp;lt;assembly fullname=&amp;quot;Newtonsoft.Json&amp;quot; /&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;System.ComponentModel.Annotations&amp;quot;/&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Microsoft.Extensions.Http&amp;quot;/&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Microsoft.Extensions.Options&amp;quot;/&amp;gt;
  &amp;lt;assembly fullname=&amp;quot;Cheeze.Store.Client&amp;quot; /&amp;gt;

  &amp;lt;assembly fullname=&amp;quot;System.Core&amp;quot;&amp;gt;
	&amp;lt;!-- This is required by JSon.NET and any expression.Compile caller --&amp;gt;
	&amp;lt;type fullname=&amp;quot;System.Linq.Expressions*&amp;quot; /&amp;gt;
  &amp;lt;/assembly&amp;gt;
&amp;lt;/linker&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;With this done, we should now be able to start the Cheeze App within the browser:&lt;/p&gt;
&lt;img src="/Content/UnoWithSwagger/WASMRunningNoData.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Cheeze.App running in browser"&gt;
&lt;br/&gt;
&lt;h2 id="close-but-no-handler"&gt;Close, but no handler!&lt;/h2&gt;
&lt;p&gt;With Cheeze.App running in the browser, if we click the &amp;quot;Load Cheeze!&amp;quot; button now we should get... wait for it....&lt;/p&gt;
&lt;p&gt;Nope, nothing.&lt;/p&gt;
&lt;p&gt;Back to the browser's debugging tool's Console output and we're likely to see something along the lines of &amp;quot;Operation is not supported on this platform&amp;quot;. This is due to the fact that, while running in the browser, the WASM head uses the browser to make HTTP calls. In order to do this, the &lt;code&gt;HttpClient&lt;/code&gt; used by the Typed Client implementation needs to be configured to use the &lt;code&gt;WasmHttpHandler&lt;/code&gt; as described &lt;a href="https://platform.uno/docs/articles/faq.html#is-it-possible-to-make-http-web-requests-using-the-wasm-target"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Note: Somewhat confusingly, I hit this error consistently while originally writing the Cheese.App but, after implemented the changes below then backing them out so I could write this post, I could not for the life of me get the error to occur again. I imagine it's something cached or not rebuilt but this does mean that I'm unable to share screenshots showing this error. Apologies.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Fortunately, getting &lt;code&gt;HttpClient&lt;/code&gt; to use the &lt;code&gt;WasmHttpHandler&lt;/code&gt; can be done completely transparently to the Typed Client by adding some additional configuration to our dependency injection setup. Shown below is the refactored &lt;code&gt;Services.cs&lt;/code&gt; class.&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public partial class Services
{
    public static readonly Services Service = new Services();

    private readonly ServiceCollection _serviceCollection;
    private readonly Lazy&amp;lt;IServiceProvider&amp;gt; _serviceProvider;

    private Services()
    {
        _serviceCollection = new ServiceCollection();
        _serviceProvider = new Lazy&amp;lt;IServiceProvider&amp;gt;(() =&amp;gt; _serviceCollection.BuildServiceProvider());
    }

    partial void GetHttpMessageHandler(ref HttpMessageHandler handler);

    private HttpMessageHandler PrimaryHttpMessageHandler()
    {
        HttpMessageHandler handler = null;

        GetHttpMessageHandler(ref handler);

        handler ??= new HttpClientHandler();

        return handler;
    }

    private void RegisterGlobalServices(IServiceCollection services, ILogger logger)
    {
        services
            .AddHttpClient&amp;lt;Store.Client.IStoreClient, Store.Client.StoreClient&amp;gt;(
                httpClient =&amp;gt; httpClient.BaseAddress = new Uri(&amp;quot;http://localhost:5000&amp;quot;))
            .ConfigurePrimaryHttpMessageHandler(PrimaryHttpMessageHandler);

        services.AddSingleton&amp;lt;ISchedulers, Schedulers&amp;gt;();

        services.AddTransient&amp;lt;ViewModel&amp;gt;();
    }

    public void PerformRegistration(ILogger logger)
    {
        if (_serviceProvider.IsValueCreated) throw new InvalidOperationException(&amp;quot;You cannot register services after the service provider has been created&amp;quot;);

        RegisterGlobalServices(_serviceCollection, logger);
    }

    public IServiceProvider Provider =&amp;gt; _serviceProvider.Value;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note the addition of the &lt;code&gt;.ConfigurePrimaryHttpMessageHandler(PrimaryHttpMessageHandler)&lt;/code&gt; call and the &lt;code&gt;GetHttpMessageHandler&lt;/code&gt; partial method. The code here ensures that &lt;code&gt;HttpClientHandler&lt;/code&gt; is used as the default but allows this to be overriden by providing an implementation for the &lt;code&gt;GetHttpMessageHandler&lt;/code&gt; within platform specific code. Accordingly, a partial implementation of the &lt;code&gt;Services.cs&lt;/code&gt; class is added to the &lt;code&gt;WASM&lt;/code&gt; head project as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public partial class Services
{
    partial void GetHttpMessageHandler(ref HttpMessageHandler handler)
    {
        handler = new Uno.UI.Wasm.WasmHttpHandler();
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now when the implementation of the IStoreClient is injected into the &lt;code&gt;ViewModel&lt;/code&gt; it will be using an &lt;code&gt;HttpClient&lt;/code&gt; instance which is configured to use &lt;code&gt;WasmHttpHandler&lt;/code&gt;. Nice.&lt;/p&gt;
&lt;h2 id="cors-blimey"&gt;COR[s] BLIMEY!&lt;/h2&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Now&lt;/strong&gt;&lt;/em&gt; when we start the WASM head and click the &amp;quot;Load Cheeze!&amp;quot; button we get...  #$&amp;#64;&amp;amp;%*! ... &lt;em&gt;&lt;strong&gt;still&lt;/strong&gt;&lt;/em&gt; nothing.&lt;/p&gt;
&lt;p&gt;Again, back to the browser's Console output and we'll see the culprit:&lt;/p&gt;
&lt;img src="/Content/UnoWithSwagger/WASMCorsIssue.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Still No Data"&gt;
&lt;p&gt;Remember how I said earlier that &amp;quot;the WASM head uses the browser to make HTTP calls&amp;quot;? Yup? Well, this therefore makes the requests beholden to &lt;a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing"&gt;CORS&lt;/a&gt;. As the &lt;code&gt;GET&lt;/code&gt; request emanating from our Cheeze.App is deemed to be from another origin (by virtue of running from a different port) our service refuses to answer the request and everything disappears in a puff of console output.&lt;/p&gt;
&lt;p&gt;To resolve this issue, we need to change the service (Cheeze.Store) through the addition of a CORS policy, as shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public class Startup
{
    ...

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        ...

        services.AddCors(o =&amp;gt; o.AddPolicy(
            &amp;quot;CorsPolicy&amp;quot;,
            builder =&amp;gt;
            {
                builder.AllowAnyOrigin()
                        .AllowAnyMethod()
                        .AllowAnyHeader();
            })
        );
        
        ...
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        ...

        app.UseCors(&amp;quot;CorsPolicy&amp;quot;);
        
        ...
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note: The policy shown here is for debug only and shouldn't be used verbatim in production!!&lt;/p&gt;
&lt;h1 id="finally"&gt;Finally!&lt;/h1&gt;
&lt;p&gt;With all this in place and rebuilt, clicking the &amp;quot;Load Cheeze!&amp;quot; button in the browser finally gives us:&lt;/p&gt;
&lt;img src="/Content/UnoWithSwagger/WASMWithData.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="WASM with data"&gt;
&lt;p&gt;YAY!&lt;/p&gt;
&lt;p&gt;Now, personally, I feel it's worth taking a moment here to reflect on this. With just a minor change in client side code (~12 loc) we're able to run &lt;em&gt;exactly&lt;/em&gt; the same app both on the desktop &lt;strong&gt;and&lt;/strong&gt; in the browser. I mean, look at it:&lt;/p&gt;
&lt;img src="/Content/UnoWithSwagger/SideBySide.png" class="img-responsive" style="margin: auto; width:95%; margin-top: 6px; margin-bottom: 6px;" alt="Side By Side"&gt;
&lt;p&gt;With no effort and just a couple of minor exceptions (font weight in UWP - left, and a scroll bar in the browser - right) the UI is pixel-perfect across two platforms that really couldn't be more dissimilar! I've said it before and I'll say it again, the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; team deserve massive kudos for providing a framework that allows developers to leverage existing skills (not to mention one of the best UI frameworks) to deliver apps across four (no, wait, &lt;a href="https://platform.uno/blog/announcing-uno-platform-2-4-macos-support-and-windows-calculator-on-macos/"&gt;FIVE!&lt;/a&gt;) disparate platforms.&lt;/p&gt;
&lt;h2 id="wrapping-up"&gt;Wrapping Up&lt;/h2&gt;
&lt;p&gt;While implementing WASM heads for Uno solutions, I've found the following helps smooth the process:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Enable WASM debugging by add &lt;code&gt;inspectUri&lt;/code&gt; to &lt;code&gt;properties/launchSettings.json&lt;/code&gt; as shown &lt;a href="https://platform.uno/blog/debugging-uno-platform-webassembly-apps-in-visual-studio-2019/"&gt;here&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Use Microsoft Edge to find errors (it's Console output seems have more info) but Chrome to hit breakpoints&lt;/li&gt;
&lt;li&gt;Create loggers via &lt;code&gt;global::Uno.Extensions.LogExtensionPoint.AmbientLoggerFactory.CreateLogger&amp;lt;T&amp;gt;()&lt;/code&gt;. Uno uses an old version of &lt;code&gt;Microsoft.Extensions.Logging&lt;/code&gt; so injecting an &lt;code&gt;ILogger&amp;lt;T&amp;gt;&lt;/code&gt; instance into a class doesn't (seem to) work for browser console output and certainly can't used used while registering services.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;And that's it. I hope you've found this helpful. Should you like or use any of the code in this article please star the &lt;a href="https://github.com/ibebbs/UnoWithSwagger"&gt;repository&lt;/a&gt; and, if you have any questions or comments, please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="oh-and.fine-cheese"&gt;Oh, and... Fine Cheese&lt;/h2&gt;
&lt;p&gt;Some content in the &amp;quot;Cheeze&amp;quot; app/repository has been borrowed - thus far without permission - from &lt;a href="https://www.finecheese.co.uk/"&gt;The Fine Cheese Co&lt;/a&gt; website. While I'm not affiliated with this company in any way - I just happen to like both cheese and their website - if you should end up ordering from them as a result of reading article, please let them know so they don't force me to change all the screen shots above. Thanks.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>A Kata for Katas</title>
			<link>http://ian.bebbs.co.uk/posts/Codewars</link>
			<description>&lt;p&gt;Azure Functions and Azure Blob Storage provide an incredibly quick, easy and cheap way of adding dynamic content to a static website. In this post I show how I used this combo to add a list of completed "code kata" to my blog's sidebar.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/Codewars</guid>
			<pubDate>Tue, 09 Jun 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;Azure Functions and Azure Blob Storage provide an incredibly quick, easy and cheap way of adding dynamic content to a static website. In this post I show how I used this combo to add a list of completed &amp;quot;code kata&amp;quot; to my blog's sidebar.&lt;/p&gt;
&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;A code kata is an exercise in programming which helps programmers hone their skills through practice and repetition.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;There are many ways of practising code katas and many sites that provide code katas for you to practise with. I use &lt;a href="https://www.codewars.com"&gt;Codewars&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;While completing a kata yesterday, I thought it would be good to show the katas I'm completing on my blog. A quick search revealed that Codewars has an &lt;a href="https://dev.codewars.com/"&gt;API&lt;/a&gt; for retrieving profile and kata information and &lt;a href="https://dev.codewars.com/#webhooks"&gt;webhooks&lt;/a&gt; for notifying external services when this information changes. A workable solution for getting kata information on my blog quickly came to mind and I simply couldn't resist taking time out to implement it.&lt;/p&gt;
&lt;p&gt;Just a few - very enjoyable - hours later, I had this:&lt;/p&gt;
&lt;img src="/Content/Codewars/Homepage.png" class="img-responsive" style="margin: auto; margin-top: 6px; margin-bottom: 6px;" alt="Homepage with Codewars"/&gt;
&lt;p&gt;Here's how I did it.&lt;/p&gt;
&lt;h2 id="static-serverless"&gt;Static &amp;amp; Serverless&lt;/h2&gt;
&lt;p&gt;My blog is written in &lt;a href="https://en.wikipedia.org/wiki/Markdown"&gt;Markdown&lt;/a&gt; and uses &lt;a href="https://wyam.io/"&gt;Wyam.io&lt;/a&gt; to translate the markdown (plus other content) into a static site which is hosted on &lt;a href="https://pages.github.com/"&gt;Github Pages&lt;/a&gt;. All content is source controlled and the process of adding a new blog post is very smooth.&lt;/p&gt;
&lt;p&gt;As such I didn't really want to add any complexity to the process by trying to regenerate the site when I complete a kata. This meant I needed to a) embed an external page within my blog, and b) write a service which would generate this page whenever I complete a kata. Furthermore, given the relative infrequency with which I undertake code katas, I didn't want a service running 24/7. This meant going &lt;a href="https://en.wikipedia.org/wiki/Serverless_computing"&gt;serverless&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;These requirements led to this architecture:&lt;/p&gt;
&lt;img src="/Content/Codewars/Architecture.png" class="img-responsive" style="margin: auto; width:90%; margin-top: 6px; margin-bottom: 6px; margin-top: -20px;" alt="Architecture"/&gt;
&lt;p&gt;Which can be read as follows:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;When a Kata is submitted to Codewars ...&lt;/li&gt;
&lt;li&gt;... a webhook is used to call the Http Trigger of our Azure Function.&lt;/li&gt;
&lt;li&gt;The Azure Function queries the Codewars API for the data it needs to generate an HTML page.&lt;/li&gt;
&lt;li&gt;The generated page is saved to Azure Blob Storage in a container which is configured to allow &amp;quot;Public read access for blobs only&amp;quot;&lt;/li&gt;
&lt;li&gt;The homepage for my blog is modified to include an &lt;code&gt;&amp;lt;embed/&amp;gt;&lt;/code&gt; element pointing to the generated page meaning ...&lt;/li&gt;
&lt;li&gt;... visitors to my blog now receive both the content from GitHub Pages and the new page from Azure Blob Storage.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="implementation"&gt;Implementation&lt;/h2&gt;
&lt;h3 id="azure-function"&gt;Azure Function&lt;/h3&gt;
&lt;p&gt;If you're using Visual Studio 2019, writing this kind of Azure Function is an absolute doddle:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Create a new project and select the &amp;quot;Azure Functions&amp;quot; template.&lt;/li&gt;
&lt;/ol&gt;
&lt;img src="/Content/Codewars/CreateAzureFunctionsProject.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Create an Azure Functions project"/&gt;
&lt;ol start="2"&gt;
&lt;li&gt;Name the project - in this example I've used the name &amp;quot;Blog.FunctionsExample&amp;quot;&lt;/li&gt;
&lt;li&gt;In the &amp;quot;Create a new Azure Functions application&amp;quot; dialog, ensure you've selected:
&lt;ol type="a"&gt;
&lt;li&gt;&amp;quot;Azure Functions v3 (.NET Core)&amp;quot; (the latest Azure Blob Storage packages don't play so nice with older versions)&lt;/li&gt;
&lt;li&gt;&amp;quot;Http trigger&amp;quot;&lt;/li&gt;
&lt;li&gt;&amp;quot;Storage Emulator&amp;quot; for the &amp;quot;Storage account (AzureWebJobsStorage)&amp;quot;&lt;/li&gt;
&lt;li&gt;&amp;quot;Function&amp;quot; for Authorization level&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;img src="/Content/Codewars/HttpTrigger.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Create a new Azure Functions application"/&gt;
&lt;ol start="4"&gt;
&lt;li&gt;Clicking the &amp;quot;Create&amp;quot; button should result in a new project which looks something like this:&lt;/li&gt;
&lt;/ol&gt;
&lt;img src="/Content/Codewars/CreatedFunctionsSourceCode.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Create Function source code"/&gt;
&lt;p&gt;Now, here comes the magic part: Hit F5.&lt;/p&gt;
&lt;img src="/Content/Codewars/FunctionDebugging.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Integrated Function Debugging"/&gt;
&lt;p&gt;If everything is set up correctly (you may get prompted to install a few packages), running the Functions app should have started the &lt;a href="https://docs.microsoft.com/en-us/azure/storage/common/storage-use-emulator"&gt;&amp;quot;Azure Storage Emulator&amp;quot;&lt;/a&gt; and then spun up your function within the &lt;a href="https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=windows%2Ccsharp%2Cbash"&gt;&amp;quot;Azure Functions Core Tools&amp;quot;&lt;/a&gt; debugging host. Yup, this is a fully local debug environment for Azure Functions &lt;em&gt;including Azure Storage emulation&lt;/em&gt;. Wow.&lt;/p&gt;
&lt;p&gt;Once started, the debugging host should provide you an HTTP endpoint from which you can trigger your function; in the screenshot above it's &lt;code&gt;Function1: [GET,POST] http://localhost:7071/api/Function1&lt;/code&gt;. Simply GET this URL from a browser (or &lt;a href="https://www.postman.com/"&gt;Postman&lt;/a&gt;, or &lt;a href="https://docs.microsoft.com/en-us/windows/wsl/install-win10"&gt;curl&lt;/a&gt;) and your function will run, returning the &lt;code&gt;responseMessage&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;You are completely free to use breakpoints or any other means of interactive debugging which effectively makes writing a cloud hosted and serverless Azure Functions app no more difficult than a basic console app.&lt;/p&gt;
&lt;p&gt;Now all we need to do is flesh out the function.&lt;/p&gt;
&lt;h3 id="writing-to-azure-blob-storage"&gt;Writing to Azure Blob Storage&lt;/h3&gt;
&lt;p&gt;First we want to make our function output an HTML page to Azure Blob Storage. While there are many ways to interact with Azure Blob Storage from within an Azure Function, by far the easiest is to lean on Azure Functions' built in &lt;a href="https://jhaleyfiles2016.blob.core.windows.net/public/Azure%20WebJobs%20SDK%20Cheat%20Sheet%202014.pdf"&gt;bindings&lt;/a&gt;. To do this we first need to add a the &lt;a href="https://www.nuget.org/packages/Microsoft.Azure.WebJobs.Extensions.Storage/"&gt;&lt;code&gt;Microsoft.Azure.WebJobs.Extensions.Storage&lt;/code&gt;&lt;/a&gt; nuget package to our project. Then we add a new parameter to our function - (&lt;code&gt;CloudBlockBlob output&lt;/code&gt; below) - with attributes - (&lt;code&gt;[Blob()]&lt;/code&gt; below) - that detail how to bind this parameter. Finally we can save our generated content to the blob as shown here:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;[FunctionName(&amp;quot;Function1&amp;quot;)]
public static async Task&amp;lt;IActionResult&amp;gt; Run(
    [HttpTrigger(AuthorizationLevel.Function, &amp;quot;get&amp;quot;, &amp;quot;post&amp;quot;, Route = null)] HttpRequest req,
    [Blob(&amp;quot;output/content.html&amp;quot;, FileAccess.Write, Connection = &amp;quot;AzureWebJobsStorage&amp;quot;)] CloudBlockBlob output,
    ILogger log)
{
    log.LogInformation(&amp;quot;C# HTTP trigger function processed a request.&amp;quot;);

    string name = req.Query[&amp;quot;name&amp;quot;];

    string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    dynamic data = JsonConvert.DeserializeObject(requestBody);
    name = name ?? data?.name;

    string responseMessage = string.IsNullOrEmpty(name)
        ? &amp;quot;&amp;lt;html&amp;gt;&amp;lt;body&amp;gt;This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&amp;quot;
        : $&amp;quot;&amp;lt;html&amp;gt;&amp;lt;body&amp;gt;Hello, {name}. This HTTP triggered function executed successfully.&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;&amp;quot;;

    output.Properties.ContentType = &amp;quot;text/html&amp;quot;;
    await output.UploadTextAsync(responseMessage);

    return new NoContentResult();
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If we trigger this function now we should see a new container - &lt;code&gt;output&lt;/code&gt; - added to the Storage Emulator containing a single file: &lt;code&gt;content.html&lt;/code&gt;.&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Quick tip: If you're doing anything with any form of Azure Storage, do yourself a favour and download the &lt;a href="https://azure.microsoft.com/en-us/features/storage-explorer/"&gt;&amp;quot;Azure Storage Explorer&amp;quot;&lt;/a&gt;. This app provides a very easy to use GUI over many forms of Azure Storage hosted in the cloud or locally. While it won't match a CLI for repetitive tasks, during development this app can really help you see what files are ending up where and with which characteristics.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Note that in most cases it would be sufficient to bind the &lt;code&gt;Blob&lt;/code&gt; attributed parameter to a simple &lt;code&gt;Stream&lt;/code&gt; type. However, this would result in files written to Azure Blob Store having a &lt;code&gt;Content-Type&lt;/code&gt; of &lt;code&gt;application/octet-stream&lt;/code&gt; which would not be displayed correctly (or at all!) by most browsers when encountering this type of file within an &lt;code&gt;&amp;lt;embed/&amp;gt;&lt;/code&gt; tag. As such we elect to bind to a &lt;code&gt;CloudBlockBlob&lt;/code&gt; type which allows us to set the &lt;code&gt;Content-Type&lt;/code&gt; directly.&lt;/p&gt;
&lt;h2 id="collecting-and-aggregating-kata-information"&gt;Collecting and aggregating Kata information&lt;/h2&gt;
&lt;p&gt;Great, so now we have a function which, when triggered, will write an HTML document to Azure Blob Storage. Now, we need to start working on filling out the HTML document with the information we're interested in. The first step here is to collect this information from Codewars which involves HTTP calls to three endpoints - none of which require authentication:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;The &lt;a href="https://dev.codewars.com/#get-user"&gt;Profile&lt;/a&gt; endpoint - to get my current honor and rank information&lt;/li&gt;
&lt;li&gt;The &lt;a href="https://dev.codewars.com/#get-user:-completed-challenges"&gt;Completed Challenges&lt;/a&gt; endpoint - to get the katas I have completed&lt;/li&gt;
&lt;li&gt;Repeated calls to the &lt;a href="https://dev.codewars.com/#get-code-challenge"&gt;Code Challenge&lt;/a&gt; endpoint - to get information for the last X katas I have completed ('X' will be specified in config)&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;For each endpoint, I first craft an example request in Postman, copy the JSON returned from the endpoint invocation and employ Visual Studio's insanely useful &lt;a href="https://dailydotnettips.com/did-you-know-you-can-automatically-create-classes-from-json-or-xml-in-visual-studio/"&gt;&amp;quot;Paste JSON as classes&amp;quot;&lt;/a&gt; to create DTOs which I can deserialize into. This makes calls to each endpoint as simple as doing this:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private static async Task&amp;lt;Profile.Rootobject&amp;gt; Profile(HttpClient client)
{
    var completedResponse = await client.GetAsync(&amp;quot;https://www.codewars.com/api/v1/users/ibebbs/&amp;quot;);

    using (var stream = await completedResponse.Content.ReadAsStreamAsync())
    {
        return await JsonSerializer.DeserializeAsync&amp;lt;Profile.Rootobject&amp;gt;(stream);
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note that all IO &lt;em&gt;has&lt;/em&gt; to be async. Calling the synchronous versions of any of the methods above will result in an exception being thrown stating &lt;a href="https://stackoverflow.com/a/60755952/628821"&gt;&amp;quot;Synchronous operations are disallowed&amp;quot;&lt;/a&gt;. This slightly complicates the retrieval of completed code challenges as each challenge needs to be fetched asynchronously then projected into a DTO asynchronously and these asynchronous operations need to be performed a specific number of times.&lt;/p&gt;
&lt;p&gt;My go to approach for dealing with collections in a functional manner - LINQ - can't handle asynchronous operations but fortunately a recent addition to C# 8 - &lt;a href="https://docs.microsoft.com/en-us/dotnet/api/system.collections.generic.iasyncenumerable-1?view=dotnet-plat-ext-3.1"&gt;IAsyncEnumerable&lt;/a&gt; - can. Coupled with &lt;a href="https://www.nuget.org/packages/System.Linq.Async"&gt;&lt;code&gt;System.Linq.Async&lt;/code&gt;&lt;/a&gt; I can write &amp;quot;LINQ style&amp;quot; projections over asynchronous operations, as shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private static async Task&amp;lt;IEnumerable&amp;lt;Completion&amp;gt;&amp;gt; Completions(HttpClient client, int numberOfCompletionstoInclude)
{
    var completed = await Completed(client);

    var result = await completed.data
        .ToAsyncEnumerable()
        .SelectAwait(d =&amp;gt; AsCompletion(d, client))
        .Take(numberOfCompletionstoInclude)
        .ToArrayAsync();

    return result;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Finally all the collected information is projected into a &lt;code&gt;Model&lt;/code&gt; class for use in the next step.&lt;/p&gt;
&lt;h2 id="generating-an-html-page"&gt;Generating an HTML page&lt;/h2&gt;
&lt;p&gt;To create the HTML page containing all the kata information in an appropriate layout I use (a prelease version of) &lt;a href="https://www.nuget.org/packages/RazorLight/2.0.0-beta7"&gt;RazorLight&lt;/a&gt;. This allows me to template the desired output using &amp;quot;cshtml&amp;quot; (a.k.a. &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-3.1"&gt;Razor pages&lt;/a&gt;) and bind values from the &lt;code&gt;Model&lt;/code&gt; into appropriate places within the template. Here's the &lt;code&gt;cshtml&lt;/code&gt; file:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-html"&gt;&amp;#64;model Blog.Codewars.Generator.Model
&amp;lt;!DOCTYPE html&amp;gt;

&amp;lt;html lang=&amp;quot;en&amp;quot; xmlns=&amp;quot;http://www.w3.org/1999/xhtml&amp;quot;&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset=&amp;quot;utf-8&amp;quot; /&amp;gt;
    &amp;lt;title&amp;gt;Codewars!&amp;lt;/title&amp;gt;
    &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;https://www.codewars.com/assets/application-776f7eebc122613f70443dfee33518104673ba7dced96422ca993601702f6456.css&amp;quot;&amp;gt;
    &amp;lt;style&amp;gt;
        table td {
            border-bottom: none;
            padding-top: 2px;
            padding-bottom: 2px;
            line-height: normal;
            padding: 0px;
            padding-right: 10px;
        }
        td.fitwidth {
            width: 1px;
            white-space: nowrap;
        }
        div.minitag {
            line-height: normal;
            font-size: 9px;
            margin: 0px
        }
        .tight {
            line-height: normal;
            margin-top: 4px;
            margin-bottom: 0px;
        }
        .tight-last {
            line-height: normal;
            margin-top: 4px;
            margin-bottom: 8px;
        }
        .tagrow {
            margin-bottom: 8px;
            margin-top: -2px
        }
    &amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body style=&amp;quot;background-color: white;padding-top: 0px&amp;quot;&amp;gt;
    &amp;lt;h2 class=&amp;quot;tight&amp;quot;&amp;gt;Honor: &amp;#64;Model.Honor&amp;lt;/h2&amp;gt;
    &amp;lt;h3 class=&amp;quot;tight-last&amp;quot;&amp;gt;Showing &amp;#64;Model.Completions.Count() of &amp;#64;Model.TotalCompleted completed kata&amp;lt;/h3&amp;gt;
    &amp;lt;table style=&amp;quot;width: 100%;background-color: white;&amp;quot;&amp;gt;
        &amp;lt;tbody&amp;gt;
            &amp;#64;foreach (var item in &amp;#64;Model.Completions)
            {
                &amp;lt;tr&amp;gt;
                    &amp;lt;td class=&amp;quot;fitwidth&amp;quot; style=&amp;quot;border-bottom: none;&amp;quot;&amp;gt;
                        &amp;lt;p class=&amp;quot;tight&amp;quot;&amp;gt;&amp;#64;item.Date.ToString(&amp;quot;yyyy-MM-dd&amp;quot;)&amp;lt;/p&amp;gt;
                    &amp;lt;/td&amp;gt;
                    &amp;lt;td&amp;gt;
                        &amp;lt;a href=&amp;quot;&amp;#64;item.Uri&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;&amp;lt;h5 class=&amp;quot;tight&amp;quot;&amp;gt;&amp;#64;item.Name&amp;lt;/h5&amp;gt;&amp;lt;/a&amp;gt;
                    &amp;lt;/td&amp;gt;
                    &amp;lt;td class=&amp;quot;fitwidth&amp;quot; rowspan=&amp;quot;2&amp;quot; &amp;gt;
                        &amp;#64;if (&amp;#64;item.Language == &amp;quot;csharp&amp;quot;)
                        {
                            &amp;lt;img src=&amp;quot;https://ian.bebbs.co.uk/Content/csharp.png&amp;quot; style=&amp;quot;max-width: 32px; margin-top: -6px&amp;quot; /&amp;gt;
                        }
                        else
                        {
                            &amp;lt;img src=&amp;quot;https://ian.bebbs.co.uk/Content/fsharp.png&amp;quot; style=&amp;quot;max-width: 32px; margin-top: -6px&amp;quot; /&amp;gt;
                        }
                    &amp;lt;/td&amp;gt;
                    &amp;lt;td class=&amp;quot;fitwidth&amp;quot; rowspan=&amp;quot;2&amp;quot;&amp;gt;
                        &amp;#64;{
                            switch (item.Colour)
                            {
                                case &amp;quot;white&amp;quot;:
                            &amp;lt;div class=&amp;quot;small-hex is-extra-wide is-inline mr-15px is-white-rank&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;inner-small-hex is-extra-wide &amp;quot;&amp;gt;&amp;lt;span&amp;gt;&amp;#64;item.Ktu&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;
                                    break;
                                case &amp;quot;yellow&amp;quot;:
                            &amp;lt;div class=&amp;quot;small-hex is-extra-wide is-inline mr-15px is-yellow-rank&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;inner-small-hex is-extra-wide &amp;quot;&amp;gt;&amp;lt;span&amp;gt;&amp;#64;item.Ktu&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;
                                    break;
                                case &amp;quot;blue&amp;quot;:
                            &amp;lt;div class=&amp;quot;small-hex is-extra-wide is-inline mr-15px is-blue-rank&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;inner-small-hex is-extra-wide &amp;quot;&amp;gt;&amp;lt;span&amp;gt;&amp;#64;item.Ktu&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;
                                    break;
                                case &amp;quot;purple&amp;quot;:
                            &amp;lt;div class=&amp;quot;small-hex is-extra-wide is-inline mr-15px is-purple-rank&amp;quot;&amp;gt;&amp;lt;div class=&amp;quot;inner-small-hex is-extra-wide &amp;quot;&amp;gt;&amp;lt;span&amp;gt;&amp;#64;item.Ktu&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;
                                    break;
                            }
                        }
                    &amp;lt;/td&amp;gt;
                &amp;lt;/tr&amp;gt;
                &amp;lt;tr class=&amp;quot;bottom-margin&amp;quot;&amp;gt;
                    &amp;lt;td colspan=&amp;quot;2&amp;quot;&amp;gt;
                        &amp;lt;div class=&amp;quot;mt-15px tagrow&amp;quot;&amp;gt;
                            &amp;#64;foreach (var tag in &amp;#64;item.Tags)
                            {
                            &amp;lt;div class=&amp;quot;keyword-tag minitag tight&amp;quot;&amp;gt;&amp;#64;tag&amp;lt;/div&amp;gt;
                            }
                        &amp;lt;/div&amp;gt;
                    &amp;lt;/td&amp;gt;
                &amp;lt;/tr&amp;gt;
            }
        &amp;lt;/tbody&amp;gt;
    &amp;lt;/table&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Please excuse the crappy CSS. I &lt;em&gt;still&lt;/em&gt; maintain CSS is a terrible way to style UI elements - particularly when compared to the elegance of &lt;a href="https://platform.uno/"&gt;XAML&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Anyway, this &lt;code&gt;codewars.cshtml&lt;/code&gt; file is added to the project as an &amp;quot;Embedded Resource&amp;quot; and used as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public static class Implementation
{
    public static async Task&amp;lt;string&amp;gt; GenerateBlogPage(int numberOfCompletionstoInclude)
    {
        var engine = new RazorLightEngineBuilder()
            .SetOperatingAssembly(Assembly.GetExecutingAssembly())
            .UseEmbeddedResourcesProject(typeof(Implementation))
            .UseMemoryCachingProvider()
            .Build();

        var model = await Source.Create(numberOfCompletionstoInclude);

        string result = await engine.CompileRenderAsync(&amp;quot;codewars&amp;quot;, model);

        return result;
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id="securing-the-function"&gt;Securing the Function&lt;/h2&gt;
&lt;p&gt;While this function will be exposed publicly, we don't want just anyone to be able to invoke it as this would directly cost us money. By using the &amp;quot;'Function' Authorization Level&amp;quot; when we created the function, we ensured that the function can be invoked only if an appropriate &amp;quot;code&amp;quot; value is passed in the URL, but this is still just &lt;a href="https://en.wikipedia.org/wiki/Security_through_obscurity"&gt;&amp;quot;security through obscurity&amp;quot;&lt;/a&gt; which we should look to bolster further. As we'd like to ensure only Codewars can invoke this function (or at least cause the page to be regenerated) we can provide a &amp;quot;secret&amp;quot; to Codewars which they pass back to us - and we can check for - when the function is invoked.&lt;/p&gt;
&lt;p&gt;Furthermore, Codewars will call this function for a variety of reasons, not just when I complete a kata. As generating the page is a relatively costly process (in terms of resources at least), we want to ensure this happens only when required. We therefore flesh out the function as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;private static bool IsCodeWars(HttpRequest request)
{
    return request.Headers.TryGetValue(&amp;quot;X-Webhook-Secret&amp;quot;, out var values) &amp;amp;&amp;amp; values.Contains(Settings.CodewarsSecret);
}

private static async Task&amp;lt;bool&amp;gt; IsMyHonorChange(HttpRequest request, ILogger log)
{
    using (StreamReader reader = new StreamReader(request.Body))
    {
        var body = await reader.ReadToEndAsync();

        log.LogInformation($&amp;quot;Body: '{body}'&amp;quot;);

        return body.Contains(&amp;quot;honor_changed&amp;quot;) &amp;amp;&amp;amp; body.Contains(Settings.MyCodewarsId);
    }
}

[FunctionName(&amp;quot;WebHook&amp;quot;)]
public static async Task&amp;lt;IActionResult&amp;gt; Run(
    [HttpTrigger(AuthorizationLevel.Function, &amp;quot;post&amp;quot;, Route = null)] HttpRequest request,
    [Blob(&amp;quot;blog/codewars.html&amp;quot;, FileAccess.Write, Connection = &amp;quot;AzureWebJobsStorage&amp;quot;)] CloudBlockBlob output,
    ILogger log)
{
    log.LogInformation(&amp;quot;C# HTTP trigger function processed a request.&amp;quot;);

    if (IsCodeWars(request))
    {
        if (await IsMyHonorChange(request, log))
        {
            var content = await Generator.Implementation.GenerateBlogPage(Settings.NumberOfCompletionstoInclude);
            output.Properties.ContentType = &amp;quot;text/html&amp;quot;;
            await output.UploadTextAsync(content);

            return new NoContentResult();
        }
        else
        {
            return new StatusCodeResult(304);
        }
    }
    else
    {
        return new UnauthorizedResult();
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note that &lt;code&gt;Settings&lt;/code&gt; is a façade for retrieving configuration values as shown here:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public static class Settings
{
    public static string CodewarsSecret =&amp;gt; Environment.GetEnvironmentVariable(&amp;quot;CodewarsSecret&amp;quot;);

    public static string MyCodewarsId =&amp;gt; Environment.GetEnvironmentVariable(&amp;quot;MyCodewarsId&amp;quot;);

    public static int NumberOfCompletionstoInclude =&amp;gt; Int32.Parse(Environment.GetEnvironmentVariable(&amp;quot;NumberOfCompletionstoInclude&amp;quot;));
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id="deployment"&gt;Deployment&lt;/h2&gt;
&lt;p&gt;Finally we need to get the function deployed and connected to Codewars. As this isn't something that is going to change regularly, deployment of the function to Azure is performed with a &amp;quot;right click -&amp;gt; publish&amp;quot; from within Visual Studio. Once deployed, the function URL and &lt;code&gt;CodewarsSecret&lt;/code&gt; value are copied from the Azure portal and added to my Codewars Account Settings page as shown below:&lt;/p&gt;
&lt;img src="/Content/Codewars/FunctionURL.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Function URL from Azure Portal"/&gt;
&lt;br/&gt;
&lt;img src="/Content/Codewars/CodewarsWebhook.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Codewars Webhook settings"/&gt;
&lt;p&gt;Once saved, completing a kata automatically generates a new page in Azure Blob Storage which then appears on my blog. Nice!&lt;/p&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;Sometimes I'm amazed at how fast and inexpensive it has become to assemble solutions to problems that, just a few years ago, would have been a major undertaking and cost a significant amount to run. Indeed, this solution took just a few hours from concept to deployment and costs...&lt;/p&gt;
&lt;img src="/Content/Codewars/AzureCost.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Azure Cost Analysis"/&gt;
&lt;p&gt;... yup, less than a penny a month to run!&lt;/p&gt;
&lt;p&gt;As developers we truly are spoiled by the tooling provided to us by Visual Studio and the hosting options available in Azure. While I'm fairly proficient in variety of other languages and frameworks, I always find myself back in VS because it makes everything just so damn easy!&lt;/p&gt;
&lt;p&gt;Anyway, the source code for this project can be found in my &lt;a href="https://github.com/ibebbs/Blog.Codewars"&gt;&amp;quot;Blog.Codewars&amp;quot;&lt;/a&gt; repository on Github. Please star it if you find it - or this blog post - useful.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Many platforms, one world - Part 4</title>
			<link>http://ian.bebbs.co.uk/posts/COduo-Part4</link>
			<description>&lt;p&gt;This is part 4 of my series on using the Uno Platform to write CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;, a highly graphical cross-platform app, able to target both single and dual-screen devices. In this post I show how CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; uses the TwoPaneView to provide a single, adaptive UI which functions across multiple form-factors, screens and orientations. I then detail how to set up an Uno Platform solution such that you're able to use (one of the myriad implementations of) the TwoPaneView in your apps.&lt;/p&gt;</description>
			<enclosure url="http://ian.bebbs.co.uk/Content/CODuo/Header.png" length="0" type="image" />
			<guid>http://ian.bebbs.co.uk/posts/COduo-Part4</guid>
			<pubDate>Sun, 10 May 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;This is part 4 of my series on using the Uno Platform to write CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;, a highly graphical cross-platform app, able to target both single and dual-screen devices. In this post I show how CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; uses the TwoPaneView to provide a single, adaptive UI which functions across multiple form-factors, screens and orientations. I then detail how to set up an Uno Platform solution such that you're able to use (one of the myriad implementations of) the TwoPaneView in your apps.&lt;/p&gt;
&lt;p&gt;For an introduction to CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; or to find further posts in this series, please use the links below:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="./COduo-Part1"&gt;Part 1 - Background&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part2"&gt;Part 2 - Infrastructure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part3"&gt;Part 3 - Client Architecture&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part4"&gt;Part 4 - Using the TwoPaneView&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Part 5 - Implementing the interactive UK Map&lt;/li&gt;
&lt;li&gt;Part 6 - Charts on the Uno Platform&lt;/li&gt;
&lt;li&gt;Part 7 - Windows, Win10X and releasing to the Microsoft Store&lt;/li&gt;
&lt;li&gt;Part 8 - Android and releasing to the Google Play Store&lt;/li&gt;
&lt;li&gt;Part 9 - iOS and releasing to the Apple App Store&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="the-twopaneview"&gt;The TwoPaneView&lt;/h2&gt;
&lt;p&gt;Windows Dev Center describes the &lt;a href="https://docs.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls.twopaneview?view=winui-2.3"&gt;TwoPaneView&lt;/a&gt; as:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;a layout control that helps you manage the display of apps that have 2 distinct areas of content, like a master/detail view.&lt;br /&gt;
While it works on all Windows devices, the TwoPaneView control is designed to help you take full advantage of dual-screen devices automatically, with no special coding needed. On a dual-screen device, the two-pane view ensures that the user interface (UI) is split cleanly when it spans the gap between screens, so that your content is presented on either side of the gap.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;As outlined above, the central tenet of the TwoPaneView is that, by separating the UI of your app into two parts, your app can automatically capitalize on the additional screen real-estate offered by dual-screen devices. While splitting a UI into 2 distinct areas may seem odd, Microsoft offer several examples of how this can be achieved in their &lt;a href="https://docs.microsoft.com/en-us/dual-screen/introduction"&gt;&amp;quot;Introduction to dual-screen devices&amp;quot;&lt;/a&gt; article, a summary of which can be seen in the image below:&lt;/p&gt;
&lt;img src="https://docs.microsoft.com/en-us/dual-screen/images/dual-screen-app-patterns.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Dual-screen app patterns"/&gt;
&lt;p&gt;What Microsoft do not make clear though, is how good this approach is for providing a reactive UI on &lt;em&gt;single screen devices&lt;/em&gt;. By splitting your UI in this way, it can be composed into a variety of layouts to automatically fit the myriad different screen resolutions and aspect ratios provided by devices ranging from PC's and tablets to mobile phones and IoT devices (and the various orientations thereof). For example, below I show common screen sizes, layouts and orientations which are natively catered for by the TwoPaneView:&lt;/p&gt;
&lt;img src="/Content/CODuo/TwoPaneViewLayouts.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="TwoPaneView on Single Screen"/&gt;
&lt;p&gt;Note that the two panes do not need to be the same size and scroll-bars are introduced if either of the panes causes the layout to exceed the screen bounds.&lt;/p&gt;
&lt;p&gt;Now this kind of reactive UI is nothing new but historically it would have had to be handled manually; usually (in the XAML world) through the use of &lt;a href="https://blog.mzikmund.com/2017/02/visualstatemanager-pitfalls/"&gt;Visual States and Adaptive Triggers&lt;/a&gt;. But with the TwoPaneView this is all taken care of for you while providing the added benefit of also allowing these panes to intelligently span across &lt;em&gt;screens&lt;/em&gt;. Pretty neat huh.&lt;/p&gt;
&lt;p&gt;Microsoft provide a fairly comprehensive guide to using the TwoPaneView &lt;a href="https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/two-pane-view"&gt;here&lt;/a&gt; but there are numerous additional tips for using the control - particularly on multiple screens - that could easily warrant an entire blog post. Here though I would like to refocus on how you can start using the control in an Uno Project which, unfortunately, isn't as straight forward as it ought to be.&lt;/p&gt;
&lt;h2 id="three-implementations-of-two-panes"&gt;Three Implementations of Two Panes&lt;/h2&gt;
&lt;p&gt;At the time of writing, there are &lt;em&gt;three&lt;/em&gt; implementations of the TwoPaneView control:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;The &lt;a href="https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.twopaneview"&gt;Windows 10 SDK version&lt;/a&gt;, released as part of the &lt;a href="https://developer.microsoft.com/en-US/windows/downloads/windows-10-sdk/"&gt;v10.0.18362.0 SDK&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;The &lt;a href="https://docs.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls.twopaneview?view=winui-2.3"&gt;WinUI version&lt;/a&gt; released as part of the &lt;a href="https://www.nuget.org/packages/Microsoft.UI.Xaml/2.1.190405004"&gt;WinUI 2.1&lt;/a&gt; nuget package&lt;/li&gt;
&lt;li&gt;The &lt;a href="https://platform.uno/blog/surface-duo-winui-twopaneview-implementation-via-uno-platform/"&gt;Uno version&lt;/a&gt; released as part of the &lt;a href="https://www.nuget.org/packages/Uno.UI/2.1.37"&gt;Uno.UI 2.1&lt;/a&gt; nuget package&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Getting an Uno Platform solution to correctly use the desired implementations has been the cause of more than a little confusion (&lt;a href="https://stackoverflow.com/questions/60931965/twopaneview-with-uno-platform"&gt;not least of which from me&lt;/a&gt;), so here I will cover the various combinations that allow you to use the TwoPaneView in a cross-platform code-base.&lt;/p&gt;
&lt;h3 id="uno-windows-10-sdk"&gt;Uno + Windows 10 SDK&lt;/h3&gt;
&lt;p&gt;If your UWP head project is targeting platform 1903 or later, then the easiest way to use the TwoPaneView is to mix the Uno.UI and Windows 10 SDK implementations of the control. To do this, first ensure:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;That all head projects except UWP have Uno.UI version 2.1 or later installed&lt;/li&gt;
&lt;li&gt;The UWP head project is targeting platform 1903&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;With these pre-requisites, the following XAML will compile and run successfully across all heads:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-xaml"&gt;&amp;lt;Page
    x:Class=&amp;quot;UnoWithWinUI.MainPage&amp;quot;
    xmlns=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&amp;quot;
    xmlns:x=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml&amp;quot;
    xmlns:local=&amp;quot;using:UnoWithWinUI&amp;quot;
    xmlns:d=&amp;quot;http://schemas.microsoft.com/expression/blend/2008&amp;quot;
    xmlns:mc=&amp;quot;http://schemas.openxmlformats.org/markup-compatibility/2006&amp;quot;
    mc:Ignorable=&amp;quot;d&amp;quot;&amp;gt;

    &amp;lt;Grid Background=&amp;quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&amp;quot;&amp;gt;
        &amp;lt;TwoPaneView Pane1Length=&amp;quot;0.3*&amp;quot; Pane2Length=&amp;quot;0.7*&amp;quot; Background=&amp;quot;Yellow&amp;quot; HorizontalAlignment=&amp;quot;Stretch&amp;quot; VerticalAlignment=&amp;quot;Stretch&amp;quot; MinWideModeWidth=&amp;quot;100&amp;quot;&amp;gt;
            &amp;lt;TwoPaneView.Pane1&amp;gt;
                &amp;lt;Border&amp;gt;
                    &amp;lt;Rectangle Fill=&amp;quot;LightBlue&amp;quot; /&amp;gt;
                &amp;lt;/Border&amp;gt;
            &amp;lt;/TwoPaneView.Pane1&amp;gt;
            &amp;lt;TwoPaneView.Pane2&amp;gt;
                &amp;lt;Border&amp;gt;
                    &amp;lt;Rectangle Fill=&amp;quot;LightGreen&amp;quot;/&amp;gt;
                &amp;lt;/Border&amp;gt;
            &amp;lt;/TwoPaneView.Pane2&amp;gt;
        &amp;lt;/TwoPaneView&amp;gt;
    &amp;lt;/Grid&amp;gt;
&amp;lt;/Page&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="uno-winui"&gt;Uno + WinUI&lt;/h3&gt;
&lt;p&gt;WinUI is &lt;a href="https://microsoft.github.io/microsoft-ui-xaml/"&gt;&amp;quot;The Future of Windows Development&amp;quot;&lt;/a&gt; and, accordingly, the Uno platform has committed to &lt;a href="https://www.idiwork.com/unoplatform-winui-what-to-expect/"&gt;&amp;quot;put WinUI on every platform possible&amp;quot;&lt;/a&gt;. As such, if you're looking to start a new cross-platform project, you should probably be looking to use controls from the WinUI package (not the Windows 10 SDK) where possible.&lt;/p&gt;
&lt;p&gt;Unfortunately, this isn't as simple as one might hope. Uno currently only implements a small subset of the controls available in WinUI and, as the namespaces between these controls are different, you will need to limit yourself to only using controls from WinUI that have also been implemented in Uno if you want to maintain a single code-base for your cross-platform project (at the time of writing Uno.UI has implemented just the &lt;a href="https://github.com/unoplatform/uno/tree/e61a1da0df49d2d93e32d71e2801fd84689bb007/src/Uno.UI/Microsoft/UI/Xaml/Controls/NumberBox"&gt;NumberBox&lt;/a&gt; and the &lt;a href="https://github.com/unoplatform/uno/tree/e61a1da0df49d2d93e32d71e2801fd84689bb007/src/Uno.UI/Microsoft/UI/Xaml/Controls/TwoPaneView"&gt;TwoPaneView&lt;/a&gt; controls).&lt;/p&gt;
&lt;p&gt;The following steps describe how to get an Uno solution setup such that you can correctly use a WinUI control - in this instance the TwoPaneView - without resorting to head project specific views:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Ensure that all head projects except UWP have Uno.UI version 2.1 or later installed&lt;/li&gt;
&lt;li&gt;Install the WinUI nuget package (version 2.1 or later) into the UWP head project&lt;/li&gt;
&lt;li&gt;Add the required WinUI XAML resources to &lt;code&gt;App.xaml&lt;/code&gt; in the Shared project as shown here:
&lt;pre&gt;&lt;code class="language-xaml"&gt;&amp;lt;Application.Resources&amp;gt;
    &amp;lt;ResourceDictionary&amp;gt;
        &amp;lt;ResourceDictionary.MergedDictionaries&amp;gt;
            &amp;lt;XamlControlsResources xmlns=&amp;quot;using:Microsoft.UI.Xaml.Controls&amp;quot; /&amp;gt;
        &amp;lt;/ResourceDictionary.MergedDictionaries&amp;gt;
    &amp;lt;/ResourceDictionary&amp;gt;
&amp;lt;/Application.Resources&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;Add the &lt;code&gt;xmlns:winui=&amp;quot;using:Microsoft.UI.Xaml.Controls&amp;quot;&lt;/code&gt; namespace to the XAML page in which you wish to use the TwoPaneView control.&lt;/li&gt;
&lt;li&gt;Add the TwoPaneView to the XAML page.&lt;/li&gt;
&lt;/ol&gt;
&lt;pre&gt;&lt;code class="language-xaml"&gt;&amp;lt;Page
    x:Class=&amp;quot;UnoWithWinUI.MainPage&amp;quot;
    xmlns=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&amp;quot;
    xmlns:x=&amp;quot;http://schemas.microsoft.com/winfx/2006/xaml&amp;quot;
    xmlns:local=&amp;quot;using:UnoWithWinUI&amp;quot;
    xmlns:winui=&amp;quot;using:Microsoft.UI.Xaml.Controls&amp;quot;
    xmlns:d=&amp;quot;http://schemas.microsoft.com/expression/blend/2008&amp;quot;
    xmlns:mc=&amp;quot;http://schemas.openxmlformats.org/markup-compatibility/2006&amp;quot;
    mc:Ignorable=&amp;quot;d&amp;quot;&amp;gt;

    &amp;lt;Grid Background=&amp;quot;{ThemeResource ApplicationPageBackgroundThemeBrush}&amp;quot;&amp;gt;
        &amp;lt;winui:TwoPaneView Pane1Length=&amp;quot;0.3*&amp;quot; Pane2Length=&amp;quot;0.7*&amp;quot; Background=&amp;quot;Yellow&amp;quot; HorizontalAlignment=&amp;quot;Stretch&amp;quot; VerticalAlignment=&amp;quot;Stretch&amp;quot; MinWideModeWidth=&amp;quot;100&amp;quot;&amp;gt;
            &amp;lt;winui:TwoPaneView.Pane1&amp;gt;
                &amp;lt;Border&amp;gt;
                    &amp;lt;Rectangle Fill=&amp;quot;LightBlue&amp;quot; /&amp;gt;
                &amp;lt;/Border&amp;gt;
            &amp;lt;/winui:TwoPaneView.Pane1&amp;gt;
            &amp;lt;winui:TwoPaneView.Pane2&amp;gt;
                &amp;lt;Border&amp;gt;
                    &amp;lt;Rectangle Fill=&amp;quot;LightGreen&amp;quot;/&amp;gt;
                &amp;lt;/Border&amp;gt;
            &amp;lt;/winui:TwoPaneView.Pane2&amp;gt;
        &amp;lt;/winui:TwoPaneView&amp;gt;
    &amp;lt;/Grid&amp;gt;
&amp;lt;/Page&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;At this point you should all project heads should compile and run successfully. If all goes well, you should see something akin to the following on each platform:&lt;/p&gt;
&lt;img src="/Content/CODuo/UnoTwoPaneViewOnAndroid.png" class="img-responsive" style="margin: auto; height:320px; margin-top: 6px; margin-bottom: 6px;" alt="Uno TwoPaneView on Android"/&gt;
&lt;h2 id="two-pains-with-the-twopaneview"&gt;Two pains with the TwoPaneView&lt;/h2&gt;
&lt;p&gt;While developing CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; I found that the TwoPaneView exhibited two curious behaviours that I had not expected. Firstly, the control would continue to use proportional sizing of the panes even when the control was being used across multiple screens and, secondly, it wrapped each pane's content in a scroll viewer which made it difficult to correctly design an &amp;quot;adaptive&amp;quot; UI.&lt;/p&gt;
&lt;p&gt;I spent an age trying to work out why the control was behaving this way and potential methods to get it to work the way I expected. Finally I ended up writing a custom control which &amp;quot;just worked&amp;quot; and moved on with trying to deliver some more functional aspects of the app.&lt;/p&gt;
&lt;p&gt;Sometime later, while discussing this issue with the Uno Platform team, I decided to recreate the issues I had experienced in a new solution. Yet, when I came to demonstrate the issues - this time on the Windows 10X Emulator - the TwoPaneView worked perfectly. Looking at the associated code I confirmed that it had not changed yet I was no longer seeing either of the behaviours I had previously experienced... until I tried running the project back on the Surface Duo emulator.&lt;/p&gt;
&lt;p&gt;Bingo.&lt;/p&gt;
&lt;p&gt;It turned out that, while the WinUI implementation of the TwoPaneView worked exactly as I had originally expected, the Uno recreation of the control didn't exhibit the same behaviour. I &lt;a href="https://github.com/unoplatform/uno/issues/2816"&gt;created an issue&lt;/a&gt; in the Uno Platform github repository and will revert to using the TwoPaneView when they - or I - have time to resolve the issue.&lt;/p&gt;
&lt;h2 id="using-the-twopaneview-in-coduo"&gt;Using the TwoPaneView in CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;&lt;/h2&gt;
&lt;p&gt;CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; uses the TwoPaneView in the &amp;quot;root&amp;quot; view. This root view is displayed in the UWP Window's &lt;code&gt;Frame&lt;/code&gt; and never changes. To support navigation and layout changes CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; employs a &lt;a href="https://ian.bebbs.co.uk/posts/ReactiveStateMachines"&gt;Reactive State Machine&lt;/a&gt; which dictates the content that should be displayed within each pane of the TwoPaneView. This is done by reacting to mode changes in the TwoPaneView (i.e. SinglePane, Tall, Wide) and emitting &lt;code&gt;Layout.Changed&lt;/code&gt; events, all communicated between the view and state machine via the &lt;code&gt;Event.Bus&lt;/code&gt;. These events are received by the &lt;code&gt;Root.ViewModel&lt;/code&gt; which coordinates updating the TwoPaneView control in the &lt;code&gt;Root.View&lt;/code&gt; by directly setting the content of each panel.&lt;/p&gt;
&lt;p&gt;To illustrate this here is the code from the &lt;a href="https://github.com/ibebbs/CODuo/blob/master/src/CODuo/CODuo.Shared/Home/State.cs"&gt;&lt;code&gt;Home.State&lt;/code&gt;&lt;/a&gt; which reacts to layout changes:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;var viewModel = _viewModelFactory.Create&amp;lt;IViewModel&amp;gt;();

var layouts = Observable
    .Merge(
        _eventBus.GetEvent&amp;lt;Event.LayoutModeResponse&amp;gt;().Select(&amp;#64;event =&amp;gt; &amp;#64;event.Mode),
        _eventBus.GetEvent&amp;lt;Event.LayoutModeChanged&amp;gt;().Select(&amp;#64;event =&amp;gt; &amp;#64;event.Mode))
    .ObserveOn(_schedulers.Dispatcher)
    .Select(mode =&amp;gt; AsLayout(viewModel, mode))
    .Select(AsEvent)
    .Subscribe(_eventBus.Publish);
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And the code from the &lt;a href="https://github.com/ibebbs/CODuo/blob/master/src/CODuo/CODuo.Shared/Root/ViewModel.cs"&gt;&lt;code&gt;Root.ViewModel&lt;/code&gt;&lt;/a&gt; which applies the layout:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;return _eventBus.GetEvent&amp;lt;Event.LayoutChanged&amp;gt;()
    .WithLatestFrom(_view, (&amp;#64;event, view) =&amp;gt; (&amp;#64;event.Layout, View: view))
    .Where(tuple =&amp;gt; tuple.View != null)
    .ObserveOn(_schedulers.Dispatcher)
    .Subscribe(tuple =&amp;gt; tuple.View.PerformLayout(tuple.Layout));
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And the code from the &lt;a href="https://github.com/ibebbs/CODuo/blob/master/src/CODuo/CODuo.Shared/Root/View.xaml.cs"&gt;&lt;code&gt;Root.View&lt;/code&gt;&lt;/a&gt; which updates the TwoPaneView (currently my custom &lt;code&gt;DualPaneView&lt;/code&gt; control due to the issues described above):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public void PerformLayout(Layout layout)
{
    dualPaneView.Pane1 = layout.Pane1Content as UIElement;
    dualPaneView.Pane2 = layout.Pane2Content as UIElement;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id="part-5"&gt;Part 5&lt;/h2&gt;
&lt;p&gt;In &lt;a href="./COduo-Part5"&gt;Part 5&lt;/a&gt; I will outline how I implemented the interactive map of the UK. I believe the approaches used for this control leverage some of the incredible power of UWP - and the Uno Platform - to &amp;quot;build modern, seamless UIs that feel natural to use on every &lt;del&gt;Windows&lt;/del&gt; device.&amp;quot;&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally&lt;/h2&gt;
&lt;p&gt;I hope you enjoy this series and that it goes some way to demonstrating the massive potential presented by the Uno Platform for delivering cross-platform experiences without having to invest in additional staff training nor bifurcating your development efforts.&lt;/p&gt;
&lt;p&gt;If you or your company are interested in building apps that can leverage the dual screen capabilities of new devices such as the Surface Duo and Surface Neo, or are keen to understand how a single code-base can deliver apps to &lt;em&gt;every platform from mobile phones to web sites&lt;/em&gt;, then please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. I am actively seeking new clients in this space and would be happy to discuss any ideas you have or projects you're planning.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Tech Adventures in Sustainability</title>
			<link>http://ian.bebbs.co.uk/posts/TechAdventuresInSustainability-PartII</link>
			<description>&lt;p&gt;I'm taking a quick break from my &lt;a href="https://ian.bebbs.co.uk/tags/uno-platform"&gt;"Many Platforms, one world" blog series&lt;/a&gt; to reprise an old - but related - series on using technology to promote sustainability. In &lt;a href="http://ian.bebbs.co.uk/posts/TechAdventuresInSustainability-PartI"&gt;Part 1 of this series&lt;/a&gt; I showed how my family uses &lt;a href="https://github.com/ibebbs/SolarEdge.Monitor"&gt;SolarEdge.Monitor&lt;/a&gt; to extract, persist and visualize the energy being produced by our solar panels. In this post I aim to show how I use the data produced by SolarEdge.Monitor to automatically optimize our electricity usage.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/TechAdventuresInSustainability-PartII</guid>
			<pubDate>Sat, 02 May 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="background"&gt;Background&lt;/h2&gt;
&lt;p&gt;I'm taking a quick break from my &lt;a href="https://ian.bebbs.co.uk/tags/uno-platform"&gt;&amp;quot;Many Platforms, one world&amp;quot; blog series&lt;/a&gt; to reprise an old - but related - series on using technology to promote sustainability. In &lt;a href="http://ian.bebbs.co.uk/posts/TechAdventuresInSustainability-PartI"&gt;Part 1 of this series&lt;/a&gt; I showed how my family uses &lt;a href="https://github.com/ibebbs/SolarEdge.Monitor"&gt;SolarEdge.Monitor&lt;/a&gt; to extract, persist and visualize the energy being produced by our solar panels. In this post I aim to show how I use the data produced by SolarEdge.Monitor to automatically optimize our electricity usage.&lt;/p&gt;
&lt;h2 id="maximizing-self-consumption-minimizing-imported-energy"&gt;Maximizing Self-Consumption / Minimizing Imported Energy&lt;/h2&gt;
&lt;p&gt;The data collected by SolarEdge.Monitor shows the best times to turn on electrical appliances around the house like the washing machine and dish washer. Unfortunately, over the summer we still end up with generation/consumption patterns that look like this:&lt;/p&gt;
&lt;img src="../Content/TechAdventuresInSustainability-PartII/SolarGenerationAndImportExport.png" class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Generation And Consumption"&gt;
&lt;p&gt;As you can see, on sunny days, we generate way more electricity than we consume and over night we consume more electricity than we would like.&lt;/p&gt;
&lt;p&gt;The obvious answer here would be to supplement our solar power system with a battery which would be charged with the excess energy we generate during the day and discharged during the evening. We have discussed this at length and, unfortunately, we still don't feel the cost / RoI balance is there to justify buying a solar battery at this time.&lt;/p&gt;
&lt;h2 id="working-smarter"&gt;Working Smarter&lt;/h2&gt;
&lt;p&gt;So if the obvious answer isn't the right answer (yet), what can we do? Well, when we thought about this problem, we realised that there are a lot of electrical appliances/devices that are used during the day but that sit in standby overnight sipping energy. If we turned these off rather than being on standby we could potentially cut our overnight consumption.&lt;/p&gt;
&lt;p&gt;Furthermore, from a sustainability point of view, we have a number of devices around the house that use normal domestic batteries ('AA' or 'AAA'). If we moved to using rechargeable batteries and charged them with excess solar energy then we could further maximise our self-consumption and reduce the number of batteries we buy.&lt;/p&gt;
&lt;p&gt;Again these are fairly obvious actions to take but extremely onerous to perform on a daily basis. If only there were something that could detect when we're exporting energy and turn these devices on or, conversely, when we're importing energy and turn these devices off.&lt;/p&gt;
&lt;h2 id="powerfull"&gt;PowerFull&lt;/h2&gt;
&lt;p&gt;And so I wrote &lt;a href="https://github.com/ibebbs/PowerFull"&gt;PowerFull&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;An open-source .NET Core utility for automatically controlling device power via MQTT.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Once supplied with MQTT and device information, PowerFull is able to monitor the levels of electricity being imported or exported and turn devices on or off appropriately.&lt;/p&gt;
&lt;p&gt;As with SolarEdge.Monitor, PowerFull is a .NET Core application which can natively be &lt;a href="https://hub.docker.com/r/ibebbs/powerfull"&gt;containerized&lt;/a&gt; and composed with other applications. A full description of how to configure and run PowerFull is available is both the &lt;a href="https://github.com/ibebbs/PowerFull"&gt;source code repository&lt;/a&gt; and the &lt;a href="https://hub.docker.com/r/ibebbs/powerfull"&gt;Docker Hub&lt;/a&gt; pages.&lt;/p&gt;
&lt;h2 id="sonoff-mini"&gt;Sonoff Mini&lt;/h2&gt;
&lt;p&gt;My first application of PowerFull was to use excess solar energy to charge rechargeable batteries. I already had a decent 12-way battery charger (&lt;a href="https://www.ikea.com/gb/en/p/storhoegen-battery-charger-with-storage-white-40303651/"&gt;courtesy of IKEA&lt;/a&gt;) which I decided to control with one of these:&lt;/p&gt;
&lt;img src="../Content/TechAdventuresInSustainability-PartII/Sonoff Mini.jpg" class="img-responsive" style="margin: auto; width:40%; margin-top: 6px; margin-bottom: 6px;" alt="Sonoff Mini"&gt;
&lt;p&gt;A Sonoff Mini.&lt;/p&gt;
&lt;p&gt;Now using Sonoff to control devices is nothing new and people have been flashing custom firmware - most often &lt;a href="https://github.com/arendst/Tasmota"&gt;Tasmota&lt;/a&gt; - to these devices for years. The Sonoff Mini however makes flashing custom firmware easier than ever with a factory supplied &amp;quot;DIY Mode&amp;quot;. You see, historically, if you wanted to flash a Sonoff device with new firmware, you'd need an FTDI module to transfer the new firmware to the Sonoff device. With &amp;quot;DIY Mode&amp;quot; it's as simple as connecting a jumper using a specific tool to flash a firmware over Wifi. A guide to flashing the Sonoff Mini can be found &lt;a href="https://www.youtube.com/watch?v=9fkYBWvwn4A"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Furthermore, while PowerFull can be configured to work with a variety of devices via configurable MQTT messages, it is provided with a &amp;quot;Theme&amp;quot; that pre-sets all configuration values such that they are compatible with Tasmota.&lt;/p&gt;
&lt;h2 id="operation"&gt;Operation&lt;/h2&gt;
&lt;p&gt;The diagram and associated notes below show how PowerFull interacts with SolarEdge.Monitor and the Sonoff Mini to control power states:&lt;/p&gt;
&lt;img src="../Content/TechAdventuresInSustainability-PartII/PowerFullOperation.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="PowerFull Operation Flow"&gt;
&lt;br/&gt;
&lt;ol&gt;
&lt;li&gt;PowerFull begins in the &lt;strong&gt;Starting&lt;/strong&gt; state in which it connects to the MQTT broker and subscribes to required topics (&lt;code&gt;Device.PowerOffRequestTopic&lt;/code&gt;, &lt;code&gt;Device.PowerOnRequestTopic&lt;/code&gt;, &lt;code&gt;Device.PowerStateRequestTopic&lt;/code&gt;, &lt;code&gt;Device.PowerStateResponseTopic&lt;/code&gt;, &lt;code&gt;Messaging.PowerReadingTopic&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;PowerFull transitions to the &lt;strong&gt;Initializing&lt;/strong&gt; state&lt;/li&gt;
&lt;li&gt;PowerFull request power state (by sending &lt;code&gt;Device.PowerStateRequestPayload&lt;/code&gt; on &lt;code&gt;Device.PowerStateRequestTopic&lt;/code&gt;) from all devices (concurrently), waiting to receive a response from the device (on the &lt;code&gt;Device.PowerStateResponseTopic&lt;/code&gt;) for up to 10 seconds.&lt;/li&gt;
&lt;li&gt;Broker forwards '&lt;null&gt;' on topic &lt;code&gt;cmnd/%deviceId%/POWER&lt;/code&gt; to Sonoff device.&lt;/li&gt;
&lt;li&gt;Sonoff responds by publishing current power state (&amp;quot;ON&amp;quot; or &amp;quot;OFF&amp;quot;) on topic &amp;quot;stat/%deviceId%/POWER&amp;quot;&lt;/li&gt;
&lt;li&gt;PowerFull uses &lt;code&gt;Device.PowerStateResponseOnPayloadRegex&lt;/code&gt; and &lt;code&gt;Device.PowerStateResponseOffPayloadReger&lt;/code&gt; to determine state of device. Any device that doesn't respond within 10 seconds or for which the response is not matched by the power state regex values is left in an 'Unknown' state and no further interaction is performed.&lt;/li&gt;
&lt;li&gt;PowerFull transitions to the &lt;strong&gt;Running&lt;/strong&gt; state.&lt;/li&gt;
&lt;li&gt;SolarEdge.Monitor publishes regular power reading message to the &amp;quot;home/solar/meter1readings&amp;quot; topic.&lt;/li&gt;
&lt;li&gt;Power reading messages are received by PowerFull's subscription to the &lt;code&gt;Messaging.PowerReadingTopic&lt;/code&gt; and  the current power reading is extracted from the payload of the message via the &lt;code&gt;Messaging.PowerReadingPayloadValueRegex&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Power reading is averaged across &lt;code&gt;Service.AveragePowerReadingAcrossMinutes&lt;/code&gt; minutes and if it is:&lt;/li&gt;
&lt;/ol&gt;
&lt;ol type="a"&gt;
&lt;li&gt;above the &lt;code&gt;Service.ThresholdToTurnOnDeviceWatts&lt;/code&gt; value then the &lt;code&gt;Device.PowerOnRequestPayload&lt;/code&gt; is sent to the &lt;code&gt;Device.PowerOnRequestTopic&lt;/code&gt; for the next device to be turned on; or&lt;/li&gt;
&lt;li&gt;below the &lt;code&gt;Service.ThresholdToTurnOffDeviceWatts&lt;/code&gt; value then the &lt;code&gt;Device.PowerOffRequestPayload&lt;/code&gt; is sent to the &lt;code&gt;Device.PowerOfRequestTopic&lt;/code&gt; for the next device to be turned off&lt;/li&gt;
&lt;/ol&gt;
&lt;ol start="11"&gt;
&lt;li&gt;Broker forwards the payload &amp;quot;ON&amp;quot; or &amp;quot;OFF&amp;quot; on topic &amp;quot;cmnd/%deviceId%/POWER&amp;quot; to Sonoff device which turns it's output on or off respectively.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Steps 8-11 repeat until service is encounters a fault or halt at which point:&lt;/p&gt;
&lt;ol start="12"&gt;
&lt;li&gt;PowerFull transitions to a &lt;strong&gt;Faulted&lt;/strong&gt; state where all subscriptions and resources are disposed&lt;/li&gt;
&lt;li&gt;PowerFull transitions to the &lt;strong&gt;Stopped&lt;/strong&gt; state where no further processing occurs&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;* All terms in &lt;code&gt;Code Format&lt;/code&gt; represent PowerFull configuration values. Configuration values can be specified on the command-line or via environment variables. You can see an example of the latter in the following section.&lt;/p&gt;
&lt;h2 id="docker"&gt;Docker&lt;/h2&gt;
&lt;p&gt;As shown in &lt;a href="https://ian.bebbs.co.uk/tags/uno-platform"&gt;Part 1&lt;/a&gt;, I use &lt;a href="https://docs.docker.com/compose/"&gt;Docker Compose&lt;/a&gt; to run my Smart Home infrastructure. Adding PowerFull was simply a case of adding a new service to my &lt;code&gt;docker-compose.yml&lt;/code&gt; file as shown below:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-yml"&gt;version: &amp;quot;3.2&amp;quot;

services:
  # https://hub.docker.com/_/eclipse-mosquitto
  mqtt:
    image: eclipse-mosquitto
    ports:
      - &amp;quot;1883:1883&amp;quot;
      - &amp;quot;9001:9001&amp;quot;

  solaredgemonitor:
    image: ibebbs/solaredge.monitor
    environment:
      - Solaredge:Monitor:Inverter:Address=192.168.2.23
      - Solaredge:Monitor:Inverter:Port=502
      - Solaredge:Monitor:MQTT:Address=mqtt
      - Solaredge:Monitor:MQTT:Port=1883
      - Solaredge:Monitor:MQTT:ClientId=InverterMonitor
      - Solaredge:Monitor:MQTT:Topic=home/solar/inverter
      - Solaredge:Monitor:Service:PollingIntervalSeconds=10
      - Solaredge:Monitor:Service:ModelsToRead=inverter,meter1readings
    depends_on:
      - mqtt

  powerfull:
    image: ibebbs/powerfull
    environment:
      - PowerFull:Service:Devices=sonoff-battery
      - PowerFull:Messaging:Broker=mqtt
      - PowerFull:Messaging:PowerReadingTopic=home/solar/meter1readings
      - PowerFull:Messaging:PowerReadingPayloadValueRegex=^{.+&amp;quot;RealPower&amp;quot;:{&amp;quot;Total&amp;quot;:(?&amp;lt;RealPower&amp;gt;-?\d+(\.\d+)).+}
      - PowerFull:Device:Theme=Tasmota
    depends_on:
      - mqtt      
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;By adding rules to interpret power on and power off messages to &lt;a href="https://nodered.org/"&gt;NodeRed&lt;/a&gt; (see &lt;a href="https://ian.bebbs.co.uk/tags/uno-platform"&gt;Part 1&lt;/a&gt; for an explanation of how NodeRed is used), we're able to monitor the effectiveness of this solution:&lt;/p&gt;
&lt;img src="../Content/TechAdventuresInSustainability-PartII/DevicePowerState.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Device Power State"&gt;
&lt;p&gt;As you can see, over the last 30 days PowerFull has allowed me to harness 9 days (~216 hours) worth of electricity that would otherwise have been exported to the grid. Pretty cool!&lt;/p&gt;
&lt;p&gt;If you have any questions or comments about PowerFull please feel free to drop me a line using the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Many platforms, one world - Part 3</title>
			<link>http://ian.bebbs.co.uk/posts/COduo-Part3</link>
			<description>&lt;p&gt;This is part 3 of my series on using the Uno Platform to write a cross-platform app, able to target both single and dual-screen devices. In this post I cover the architecture of the CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; app with an aim to providing an understanding of how it's primary components interoperate to provide a robust and testable experience across multiple platforms and screen configurations.&lt;/p&gt;</description>
			<enclosure url="http://ian.bebbs.co.uk/Content/CODuo/Header.png" length="0" type="image" />
			<guid>http://ian.bebbs.co.uk/posts/COduo-Part3</guid>
			<pubDate>Tue, 28 Apr 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;This is part 3 of my series on using the Uno Platform to write a cross-platform app, able to target both single and dual-screen devices. In this post I cover the architecture of the CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; app with an aim to providing an understanding of how it's primary components interoperate to provide a robust and testable experience across multiple platforms and screen configurations.&lt;/p&gt;
&lt;p&gt;For an introduction to CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; or to find further posts in this series, please use the links below:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="./COduo-Part1"&gt;Part 1 - Background&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part2"&gt;Part 2 - Infrastructure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part3"&gt;Part 3 - Client Architecture&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part4"&gt;Part 4 - Using the TwoPaneView&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Part 5 - Implementing the interactive UK Map&lt;/li&gt;
&lt;li&gt;Part 6 - Charts on the Uno Platform&lt;/li&gt;
&lt;li&gt;Part 7 - Windows, Win10X and releasing to the Microsoft Store&lt;/li&gt;
&lt;li&gt;Part 8 - Android and releasing to the Google Play Store&lt;/li&gt;
&lt;li&gt;Part 9 - iOS and releasing to the Apple App Store&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="architecture"&gt;Architecture&lt;/h2&gt;
&lt;p&gt;In part 2 I presented the following diagram and discussed the service-side infrastructure components.&lt;/p&gt;
&lt;img src="/Content/CODuo/Infrastructure.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Infrastructure.png"/&gt;
&lt;p&gt;This post will be focussing on the architectural components of the app. Again, this isn't specifically about how the Uno Platform was used to implement the app so I will endeavour to keep these discussions at a high level. However, in order to understand how the app functions, I think it's important to understand it's various components and interactions.&lt;/p&gt;
&lt;p&gt;To do this we should first outline some of the conventions and libraries used within CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; in order to facilitate further discussion around the actual implementation.&lt;/p&gt;
&lt;h2 id="conventions-libraries"&gt;Conventions &amp;amp; Libraries&lt;/h2&gt;
&lt;h3 id="fluent-namespacing"&gt;Fluent Namespacing&lt;/h3&gt;
&lt;p&gt;CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; employs &amp;quot;Fluent Namespacing&amp;quot;, an introduction to which can be found in my blog post &lt;a href="https://ian.bebbs.co.uk/posts/FluentNamespacing"&gt;here&lt;/a&gt;. To summarise, Fluent Namespacing promotes the practise of grouping classes by functional domain, &lt;em&gt;not&lt;/em&gt; functional pattern.&lt;/p&gt;
&lt;p&gt;For example, the Application State Machine is a class named &lt;code&gt;Machine&lt;/code&gt; in the &lt;code&gt;Application.State&lt;/code&gt; namespace; therefore having a full-name of &lt;code&gt;Application.State.Machine&lt;/code&gt;. This is in contrast to a conventional grouping of classes by functional pattern where - for example - there would typically be a class named &lt;code&gt;ApplicationStateMachine&lt;/code&gt; in the &lt;code&gt;StateMachines&lt;/code&gt; namespace.&lt;/p&gt;
&lt;p&gt;While this might initially take some getting used to, as you examine the source code for CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; you should hopefully see how this approach simplifies class names, eases navigation and promotes good practices.&lt;/p&gt;
&lt;h3 id="reactive-extensions-mvvm-mvx.observable"&gt;Reactive Extensions, MVVM &amp;amp; MVx.Observable&lt;/h3&gt;
&lt;p&gt;The &lt;a href="https://github.com/dotnet/reactive"&gt;Reactive Extensions&lt;/a&gt; (Rx) library is used throughout CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; to implement many different types of component from &lt;a href="#state-lifetime-management"&gt;State Machines&lt;/a&gt; to the &lt;a href="#communication"&gt;Event Bus&lt;/a&gt;. One area where Rx shines particularly brightly however is as a means to write &lt;a href="https://en.wikipedia.org/wiki/Reactive_programming"&gt;functional, declarative and reactive user interfaces&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; does just this by implementing &lt;a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel"&gt;MVVM style ViewModels&lt;/a&gt; as collections of &lt;a href="https://ian.bebbs.co.uk/posts/ReactiveBehaviors"&gt;Reactive Behaviours&lt;/a&gt; via the &lt;a href="https://www.nuget.org/packages/MVx.Observable/"&gt;MVx.Observable&lt;/a&gt; library.&lt;/p&gt;
&lt;p&gt;If you are unfamiliar with Rx I would certainly suggest taking the time to learn about it. Not only will you understand more of how CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; hangs together but, once you &amp;quot;get&amp;quot; it, I almost guarantee you'll start to see programming problems in a different light. Lee Campbell has a great introduction to Rx on his aptly named website &lt;a href="http://introtorx.com/"&gt;&amp;quot;IntroToRx.com&amp;quot;&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="implementation"&gt;Implementation&lt;/h2&gt;
&lt;h3 id="shared"&gt;99% Shared&lt;/h3&gt;
&lt;p&gt;As can be seen from the diagram above, while CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; comprises many &amp;quot;head&amp;quot; projects (i.e. UWP, Android, iOS, etc), all application code - except for a very small &amp;quot;Platform Services&amp;quot; layer - is shared across all platforms. This includes all state and application lifetime management, navigation and data access and View/ViewModel implementations. I believe this is quite an achievement and speaks volumes about the potential for the Uno Platform to lower TCO when implementing and maintaining a cross-platform solution.&lt;/p&gt;
&lt;p&gt;The &amp;quot;Platform Services&amp;quot; layer comprises a couple of interface implementations in each head project which provides platform specific functionality. For example, the use of &lt;a href="https://github.com/dotnet/reactive"&gt;Reactive Extensions&lt;/a&gt; requires &lt;a href="http://introtorx.com/Content/v1.0.10621.0/15_SchedulingAndThreading.html"&gt;IScheduler&lt;/a&gt; implementations for correctly marshalling events to and from the platform's &amp;quot;UI thread&amp;quot;. The implementation of (and access to) the correct IScheduler implementation is different for each platform so each head project contains an implementation of the &lt;a href="https://github.com/ibebbs/CODuo/blob/master/src/CODuo/CODuo.Shared/Platform/ISchedulers.cs"&gt;&lt;code&gt;Platform.ISchedulers&lt;/code&gt;&lt;/a&gt; interface. Shown below is the &lt;a href="https://github.com/ibebbs/CODuo/blob/master/src/CODuo/CODuo.Droid/Platform/Schedulers.cs"&gt;&lt;code&gt;Platform.ISchedulers&lt;/code&gt;&lt;/a&gt; implementation for Android:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public class Schedulers : ISchedulers
{
    private static readonly Lazy&amp;lt;IScheduler&amp;gt; DispatchScheduler = new Lazy&amp;lt;IScheduler&amp;gt;(() =&amp;gt; new SynchronizationContextScheduler(SynchronizationContext.Current));

    public IScheduler Default =&amp;gt; Scheduler.Default;

    public IScheduler Dispatcher =&amp;gt; DispatchScheduler.Value;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="views-view-models"&gt;Views &amp;amp; View Models&lt;/h3&gt;
&lt;p&gt;As mentioned above, CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; employs the MVVM pattern to separate GUI and business logic. Each View uses data-binding to declaratively bind information provided by the ViewModel to the various controls presented in the UI. The ViewModel uses &lt;a href="https://ian.bebbs.co.uk/posts/ReactiveBehaviors"&gt;Reactive Behaviours&lt;/a&gt; and &lt;a href="https://www.nuget.org/packages/MVx.Observable/"&gt;MVx.Observable&lt;/a&gt; properties to react to user interactions and changes in application state.&lt;/p&gt;
&lt;p&gt;The example below shows how current value for &amp;quot;Tonnes Of CO&lt;sub&gt;2&lt;/sub&gt; per hour&amp;quot; is implemented in the &lt;code&gt;Home.ViewModel&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;public class ViewModel : IViewModel, INotifyPropertyChanged
{
    private readonly Data.IProvider _dataProvider;
    private readonly Platform.ISchedulers _schedulers;
    
    ...

    private readonly MVx.Observable.Property&amp;lt;int&amp;gt; _selectedRegion;
    private readonly MVx.Observable.Property&amp;lt;Common.Period&amp;gt; _currentPeriod;
    private readonly MVx.Observable.Property&amp;lt;double&amp;gt; _tonnesOfCO2PerHour;

    public event PropertyChangedEventHandler PropertyChanged;

    public ViewModel(Data.IProvider dataProvider, Platform.ISchedulers schedulers)
    {
        _dataProvider = dataProvider;
        _schedulers = schedulers;
        
        ...

        _currentPeriod = new MVx.Observable.Property&amp;lt;Common.Period&amp;gt;(nameof(CurrentPeriod), args =&amp;gt; PropertyChanged?.Invoke(this, args));
        _selectedRegion = new MVx.Observable.Property&amp;lt;int&amp;gt;(0, nameof(SelectedRegion), args =&amp;gt; PropertyChanged?.Invoke(this, args));
        _tonnesOfCO2PerHour = new MVx.Observable.Property&amp;lt;double&amp;gt;(nameof(TonnesOfCO2PerHour), args =&amp;gt; PropertyChanged?.Invoke(this, args));
        
        ...
    }

    private IDisposable ShouldRefreshTonnesOfCO2PerHourWhenPeriodOrSelectedRegionChanges()
    {
        return Observable
            // When the current value of either `_currentPeriod` or `_selectedRegion` changes ...
            .CombineLatest(_currentPeriod, _selectedRegion, (period, regionId) =&amp;gt; period?.Regions
                // ... retreive the data for the selected region from the current period ...
                .Where(region =&amp;gt; region.RegionId == regionId)
                // ... and use this data to calculate Tonnes Of CO2 Per Hour
                .Select(region =&amp;gt; (region.Estimated.TotalMW * MegaWattsToKiloWatts * region.Estimated.GramsOfCO2PerkWh) / GramsInAMetricTonne ?? 0.0)
                // ... returning the first value or 0
                .FirstOrDefault() ?? 0.0)
            // ... then move onto the UI thread
            .ObserveOn(_schedulers.Dispatcher)
            // ... and update the _tonnesOfCO2PerHour value with the value 
            // calculated above causing the PropertyChanged event to be 
            // raised for the `TonnesOfCO2PerHour` property
            .Subscribe(_tonnesOfCO2PerHour);
    }

    public IDisposable Activate()
    {
        return new CompositeDisposable(
            ...
            ShouldRefreshTonnesOfCO2PerHourWhenPeriodOrSelectedRegionChanges()
            ...
        );
    }

    ...

    public Common.Period CurrentPeriod
    {
        get { return _currentPeriod.Get(); }
    }

    public double TonnesOfCO2PerHour
    {
        get { return _tonnesOfCO2PerHour.Get(); }
    }

    public int SelectedRegion
    {
        get { return _selectedRegion.Get(); }
        set { _selectedRegion.Set(value); }
    }

    ...
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;As you can see, all source data and logic for implementing this behaviour is wrapped into a single, appropriately named method called 'ShouldRefreshTonnesOfCO2PerHourWhenPeriodOrSelectedRegionChanges'. While the code in this method should be comprehensible to anyone fluent with LINQ extension-method syntax, it has been annotated for clarity.&lt;/p&gt;
&lt;p&gt;This pattern is repeated for each behaviour the ViewModel is required to implement.&lt;/p&gt;
&lt;h3 id="application-navigation-state"&gt;Application &amp;amp; Navigation State&lt;/h3&gt;
&lt;p&gt;Similar to how we employ MVVM to separate view and business logic, I find it beneficial to separate view and application/navigation logic which all too often are conflated together. Doing this brings benefits similar to the adoption of MVVM in the view layer (i.e. simplified logic, enhanced testability, etc) to the application layer.&lt;/p&gt;
&lt;p&gt;As such, application state and navigation state are managed by a dedicated &lt;a href="https://en.wikipedia.org/wiki/Finite-state_machine"&gt;state machines&lt;/a&gt;. These are implemented as &lt;a href="https://ian.bebbs.co.uk/posts/ReactiveStateMachines"&gt;Reactive State Machines&lt;/a&gt; and designed to mirror lifetime and navigation states in the app. Stateful application and navigation data is passed between states via a mutable &lt;code&gt;Application.Aggregate.Root&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;These approaches allow the app to elegantly manage lifetime events such as the app being suspended / resumed and to transparently restore navigation state and data.&lt;/p&gt;
&lt;p&gt;Here is CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;'s current state diagram:&lt;/p&gt;
&lt;img src="/Content/CODuo/StateChart.png" class="img-responsive" style="margin: auto; margin-top: 6px; margin-bottom: 6px;" alt="COduo State Diagram"/&gt;
&lt;h3 id="communication"&gt;Communication&lt;/h3&gt;
&lt;p&gt;All communication between disparate app components (for example between the state-machine and a view model) occurs via events published through an Event Bus. This promotes decoupling by ensuring that the component that raises an event requires no knowledge of a component which might consume the event, and vice versa.&lt;/p&gt;
&lt;h3 id="data"&gt;Data&lt;/h3&gt;
&lt;p&gt;Data for the application is retrieved and deserialized by the &lt;code&gt;Data.Provider&lt;/code&gt;. The &lt;code&gt;Data.Provider&lt;/code&gt; sets up an Rx subscription to acquire new data every 15 minutes or whenever a &lt;code&gt;Data.Requested&lt;/code&gt; event is received from the event bus. This data is exposed to the rest of the application as an &lt;code&gt;IObservable&amp;lt;&amp;gt;&lt;/code&gt; which has been designed to immediately return the current value whenever a new consumer subscribes.&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;Data.Provider&lt;/code&gt; starts fetching data when the &lt;code&gt;Activate&lt;/code&gt; method is called and will continue to fetch data - regardless of whether there currently exists any subscribers - until the &lt;code&gt;IDisposable&lt;/code&gt; result of the &lt;code&gt;Activate&lt;/code&gt; method is disposed. This ensures data is immediately available to ViewModels when they need it (i.e. after navigation) and allows data acquisition to be correctly managed through Suspend/Resume transitions.&lt;/p&gt;
&lt;h2 id="source-code"&gt;Source Code&lt;/h2&gt;
&lt;p&gt;You can find the source code for CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; in my &lt;a href="https://github.com/ibebbs/CODuo"&gt;Github repository&lt;/a&gt;. Should you like or use it, please take the time to &amp;quot;star&amp;quot; the repository; it's a small gesture which really fuels developers's enthusiasm for projects such as these.&lt;/p&gt;
&lt;h2 id="part-4"&gt;Part 4&lt;/h2&gt;
&lt;p&gt;Now we understand how the application hangs together, in &lt;a href="./COduo-Part4"&gt;Part 4&lt;/a&gt; I will detail how to setup an Uno Platform solution such that you're able to use a &lt;code&gt;TwoPaneView&lt;/code&gt; control and how the TwoPaneView control is used within CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;.&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally&lt;/h2&gt;
&lt;p&gt;I hope you enjoy this series and that it goes some way to demonstrating the massive potential presented by the Uno Platform for delivering cross-platform experiences without having to invest in additional staff training nor bifurcating your development efforts.&lt;/p&gt;
&lt;p&gt;If you or your company are interested in building apps that can leverage the dual screen capabilities of new devices such as the Surface Duo and Surface Neo, or are keen to understand how a single code-base can deliver apps to &lt;em&gt;every platform from mobile phones to web sites&lt;/em&gt;, then please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. I am actively seeking new clients in this space and would be happy to discuss any ideas you have or projects you're planning.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Many platforms, one world - Part 2</title>
			<link>http://ian.bebbs.co.uk/posts/COduo-Part2</link>
			<description>&lt;p&gt;This is part 2 of my series on using the Uno Platform to write a cross-platform app, able to target both single and dual-screen devices. In this post I cover the infrastructure used to collate and aggregate the data used by CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; as a prelude to a deeper dive into the implementation of the app itself which I will cover in later posts.&lt;/p&gt;</description>
			<enclosure url="http://ian.bebbs.co.uk/Content/CODuo/Header.png" length="0" type="image" />
			<guid>http://ian.bebbs.co.uk/posts/COduo-Part2</guid>
			<pubDate>Thu, 23 Apr 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;This is part 2 of my series on using the Uno Platform to write a cross-platform app, able to target both single and dual-screen devices. In this post I cover the infrastructure used to collate and aggregate the data used by CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; as a prelude to a deeper dive into the implementation of the app itself which I will cover in later posts.&lt;/p&gt;
&lt;p&gt;Here are links to all the posts I have written - or intend to write - for this series:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="./COduo-Part1"&gt;Part 1 - Background&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part2"&gt;Part 2 - Infrastructure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part3"&gt;Part 3 - Client Architecture&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part4"&gt;Part 4 - Using the TwoPaneView&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Part 5 - Implementing the interactive UK Map&lt;/li&gt;
&lt;li&gt;Part 6 - Charts on the Uno Platform&lt;/li&gt;
&lt;li&gt;Part 7 - Windows, Win10X and releasing to the Microsoft Store&lt;/li&gt;
&lt;li&gt;Part 8 - Android and releasing to the Google Play Store&lt;/li&gt;
&lt;li&gt;Part 9 - iOS and releasing to the Apple App Store&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="infrastructure"&gt;Infrastructure&lt;/h2&gt;
&lt;p&gt;While considering how to implement CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;, I needed to ensure the app could retrieve all the data it required quickly, efficiently, securely and - most importantly - cheaply. As such, I decided to introduce service infrastructure that would perform all the required data collation, aggregation and serialization such that the app merely had to retrieve a single file from a know URI.&lt;/p&gt;
&lt;p&gt;Here is a mile-high view of the infrastructure used to operate CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; and the architecture of the app's various components:&lt;/p&gt;
&lt;img src="/Content/CODuo/Infrastructure.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Infrastructure.png"/&gt;
&lt;p&gt;As the primary focus of this series of posts is the Uno Platform I won't be digging into the service-side components too deeply but I feel it's important to show how the infrastructure delivers on the requirements above in order to understand how this simplifies the app's implementation.&lt;/p&gt;
&lt;h2 id="serverless"&gt;Server[less]&lt;/h2&gt;
&lt;p&gt;Fundamentally, the infrastructure is provided by two, timer-triggered &lt;a href="https://azure.microsoft.com/en-us/services/functions/"&gt;Azure Functions&lt;/a&gt;: &amp;quot;Weather Collection&amp;quot; and &amp;quot;Energy Aggregation&amp;quot;. These 'serverless' functions collate, process and store all the data required by the app, greatly simplifying client data access.&lt;/p&gt;
&lt;p&gt;Here's the (&lt;a href="https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-map?tabs=net"&gt;Application Insights&lt;/a&gt; generated) application map:&lt;/p&gt;
&lt;img src="/Content/CODuo/AzureFunctionsApplicationMap.png" class="img-responsive" style="margin: auto; width:60%; margin-top: 6px; margin-bottom: 6px;" alt="Azure Functions Application Map"/&gt;
&lt;h3 id="weather-collection"&gt;Weather Collection&lt;/h3&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;[FunctionName(&amp;quot;WeatherV1&amp;quot;)]
public static async Task Weather(
    [TimerTrigger(WeatherNormal)] TimerInfo timer, 
    [CosmosDB(databaseName: CosmosDatabase, collectionName: WeatherCollection, ConnectionStringSetting = CosmosConnectionStringKey)] IAsyncCollector&amp;lt;Weather.Common.Document&amp;gt; documentsOut, 
    ILogger log)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The Weather Collection function is triggered every hour and retrieves data from the &lt;a href="https://metoffice.apiconnect.ibmcloud.com/metoffice/production/"&gt;Met Office Weather Data Hub&lt;/a&gt;. It collects 48 hours worth of forecast data for each of 14 locations around the UK (one city in each of the 14 &lt;a href="https://www.ovoenergy.com/guides/energy-guides/dno.html"&gt;Distributed Network Operator regions&lt;/a&gt;) then transposes this to generate weather data for each hour containing the forecast in each region.&lt;/p&gt;
&lt;p&gt;This was done for many reasons but mostly to provide numerous small, easily indexed documents that can be cheaply written to, read from and updated within Cosmos DB. This has worked well and each hour documents are saved to a &lt;a href="https://azure.microsoft.com/en-us/updates/azure-cosmos-db-free-tier-is-now-available/"&gt;free tier CosmosDB container&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Persisting these documents does occasionally exceed the free tier's 400ru/s quota which means writes to Cosmos need to be retried until they succeed. While all the retries are transparently handled by the SDK, the retries cause the function to run longer than it otherwise would and, as such, I will probably modify the function to only persist 24 hours worth of forecast data in the next version.&lt;/p&gt;
&lt;h3 id="energy-aggregator"&gt;Energy Aggregator&lt;/h3&gt;
&lt;pre&gt;&lt;code class="language-c#"&gt;[FunctionName(&amp;quot;EnergyV1&amp;quot;)]
public static async Task Energy(
    [TimerTrigger(EnergyNormal)]TimerInfo timer,
    [CosmosDB(
        databaseName: CosmosDatabase,
        collectionName: WeatherCollection,
        ConnectionStringSetting = CosmosConnectionStringKey)] DocumentClient client,
    [Blob(EnergyOutputFile, FileAccess.Write, Connection = EnergyStorage)] Stream blob, 
    ILogger log)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The Energy Aggregation function runs every 15 minutes and requests electricity generation and composition information from a few different API's, most notably Elexon's &lt;a href="https://www.elexon.co.uk/knowledgebase/what-is-bmreports-com/"&gt;Balancing Mechanism Reporting Service&lt;/a&gt;. This is collated with weather data generated by the Weather Collection function then aggregated and serialized into a JSON document easily consumed by the CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; client application.&lt;/p&gt;
&lt;p&gt;The serialized document is then persisted in a publicly accessible &lt;a href="https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-storage-tiers?tabs=azure-portal"&gt;'Hot' Azure Blob&lt;/a&gt; meaning the client application can retrieve it with a single, unauthenticated HTTPS request.&lt;/p&gt;
&lt;h3 id="conclusion"&gt;Conclusion&lt;/h3&gt;
&lt;p&gt;At current levels (and using the CosmosDB free-tier) it is currently costing less than £1 per month to run this infrastructure with only small increases (due to bandwidth costs) as application usage scales. As such, I feel it satisfies CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;'s requirements very neatly. Furthermore, Visual Studio's impressive tooling for developing and testing Azure Functions locally (including local emulators of all storage) streamlines the delivery of features and regression testing of changes such that I've been able to iterate on this project extremely quickly.&lt;/p&gt;
&lt;h3 id="more-information"&gt;More information&lt;/h3&gt;
&lt;p&gt;I've deliberately kept this post at a &amp;quot;mile-high&amp;quot; level as the series is focused on the use of the Uno Platform to deliver a cross platform application. However, if you're keen to understand more of how these service-side components operate then drop me a line (contact links at the bottom of the page) and, if enough people are interested, I'll write a blog post detailing these approaches further.&lt;/p&gt;
&lt;h2 id="part-3"&gt;Part 3&lt;/h2&gt;
&lt;p&gt;&lt;a href="./COduo-Part3"&gt;Part 3&lt;/a&gt; will examine the architecture of CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; with an aim to providing an understanding of how it's primary components interoperate to provide a robust and testable experience across multiple platforms and dual-screens.&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally&lt;/h2&gt;
&lt;p&gt;I hope you enjoy this series and that it goes some way to demonstrating the massive potential presented by the Uno Platform for delivering cross-platform experiences without having to invest in additional staff training nor bifurcating your development efforts.&lt;/p&gt;
&lt;p&gt;If you or your company are interested in building apps that can leverage the dual screen capabilities of new devices such as the Surface Duo and Surface Neo, or are keen to understand how a single code-base can deliver apps to &lt;em&gt;every platform from mobile phones to web sites&lt;/em&gt;, then please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. I am actively seeking new clients in this space and would be happy to discuss any ideas you have or projects you're planning.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Many platforms, one world - Part 1</title>
			<link>http://ian.bebbs.co.uk/posts/COduo-Part1</link>
			<description>&lt;p&gt;This is part 1 of a series of posts in which I chronical how the Uno Platform was used to write an app which runs natively on all major platforms and naturally on modern dual-screen devices (such as the forthcoming Surface Neo and Surface Duo). I will endeavour to detail how the Uno Platform makes it possible to achieve "99% shared code" across operating system and form-factor, all without having to leave the comfort of basic C# nor needing to learn a new dialect of XAML. And finally, through the app, I hope to provide the means to better understand - and help mitigate - the impact our energy usage is having on the environment.&lt;/p&gt;</description>
			<enclosure url="http://ian.bebbs.co.uk/Content/CODuo/Header.png" length="0" type="image" />
			<guid>http://ian.bebbs.co.uk/posts/COduo-Part1</guid>
			<pubDate>Sun, 19 Apr 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="tldr"&gt;TL;DR&lt;/h2&gt;
&lt;p&gt;This is part 1 of a series of posts in which I chronical how the Uno Platform was used to write an app which runs natively on all major platforms and naturally on modern dual-screen devices (such as the forthcoming Surface Neo and Surface Duo). I will endeavour to detail how the Uno Platform makes it possible to achieve &amp;quot;99% shared code&amp;quot; across operating system and form-factor, all without having to leave the comfort of basic C# nor needing to learn a new dialect of XAML. And finally, through the app, I hope to provide the means to better understand - and help mitigate - the impact our energy usage is having on the environment.&lt;/p&gt;
&lt;h2 id="part-1"&gt;Part 1&lt;/h2&gt;
&lt;p&gt;In this post I cover the app's conceptualization, why I chose to implement it using the Uno Platform, how you can get the app for your device and where you can examine it's source code. Later posts detail the various conundra of designing, implementing and deploying an app targeting multiple platforms using the Uno Platform.&lt;/p&gt;
&lt;p&gt;Below is a (preliminary) list of posts I intend to write. It will be updated as each post is completed and published:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="./COduo-Part1"&gt;Part 1 - Background&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part2"&gt;Part 2 - Infrastructure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part3"&gt;Part 3 - Client Architecture&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="./COduo-Part4"&gt;Part 4 - Using the TwoPaneView&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Part 5 - Implementing the interactive UK Map&lt;/li&gt;
&lt;li&gt;Part 6 - Charts on the Uno Platform&lt;/li&gt;
&lt;li&gt;Part 7 - Windows, Win10X and releasing to the Microsoft Store&lt;/li&gt;
&lt;li&gt;Part 8 - Android and releasing to the Google Play Store&lt;/li&gt;
&lt;li&gt;Part 9 - iOS and releasing to the Apple App Store&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="background"&gt;Background&lt;/h2&gt;
&lt;p&gt;Back in January I wrote a &lt;a href="https://ian.bebbs.co.uk/posts/UnoDuoHey"&gt;blog post&lt;/a&gt; showing how the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; could be used to write native, cross-platform apps that can leverage the unique UX opportunities afforded by dual and multi-screen devices such as the forthcoming Surface Duo and Surface Neo. This article was received well and the Uno Platform team dropped me a line after reading it suggesting that, if I could develop the PoC into a &amp;quot;real app&amp;quot;, they'd feature it on their &lt;a href="https://platform.uno/showcases/"&gt;showcases page&lt;/a&gt;. This seemed like a great idea but, as I was in the middle of a project at the time and couldn't immediately think of an app I wanted to write, I thanked them and left it there...&lt;/p&gt;
&lt;p&gt;Until, that is, I read that &lt;a href="https://blogs.microsoft.com/blog/2020/01/16/microsoft-will-be-carbon-negative-by-2030/"&gt;Microsoft had committed to going carbon negative by 2030&lt;/a&gt;. As regular readers of my blog will know, I have a penchant for &lt;a href="https://ian.bebbs.co.uk/posts/TechAdventuresInSustainability-PartI"&gt;using technology to help promote sustainable living&lt;/a&gt; and thought an app combining this with Microsoft's current focus on dual-screen devices could be the showcase app the Uno Platform team  were looking for.&lt;/p&gt;
&lt;p&gt;And so it was that CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; came to be:&lt;/p&gt;
&lt;img src="/Content/CODuo/RunningOnSurface.png" class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Running On Surface.png"/&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;An early version of CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; running on Surface Pro (Windows 10), Surface Duo (Android 10) and Surface Neo (Windows 10X)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id="so-what-is-coduo"&gt;So what is CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;?&lt;/h2&gt;
&lt;p&gt;CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; is an app which presents data about electricity generation and carbon emissions across the UK in a user-friendly way.&lt;/p&gt;
&lt;p&gt;With CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; I wanted to not only increase people's awareness of the impact their energy usage was having on the environment - particularly the CO&lt;sub&gt;2&lt;/sub&gt; emissions - but also empower them to change their energy usage in ways which might help mitigate this impact. In short, my design goals could be summarised with the following two user stories:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;&amp;quot;As a domestic user of electricity, I need to understand the impact my energy usage has on the environment so that I am incentivized to change this usage&amp;quot;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;&amp;quot;As a domestic user of electricity, I need to understand how I can change my energy usage so that it's impact on the environment is minimized&amp;quot;.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I started this project by searching for appropriate sources of data and was pleased to find that, for the UK at least, there were numerous free - and extremely detailed - public APIs available. I then spent some time prototyping a data visualisation that could show the carbon intensity of current and forecast energy generation and illustrate when might be best to use energy-intensive appliances (i.e. washing machines, dish washers, tumble dryers, etc).&lt;/p&gt;
&lt;p&gt;Using Syncfusion's Essential Studio I got the below working in a UWP app in single evening:&lt;/p&gt;
&lt;img src="/Content/CODuo/Prototype.png" class="img-responsive" style="margin: auto; width:80%; margin-top: 6px; margin-bottom: 6px;" alt="Prototype of COduo"/&gt;
&lt;p&gt;&amp;quot;Great&amp;quot;, I thought, &amp;quot;Now to make it run across every platform, on every screen and in every configuration. How difficult can it be?&amp;quot;.&lt;/p&gt;
&lt;p&gt;Well, lets find out.&lt;/p&gt;
&lt;h2 id="why-the-uno-platform"&gt;Why the Uno Platform?&lt;/h2&gt;
&lt;p&gt;This is my third blog post about the Uno Platform. The first two - &lt;a href="https://ian.bebbs.co.uk/posts/Uno"&gt;The Seven GUIs of Christmas&lt;/a&gt; about Uno's cross-platform capabilities &amp;amp; &lt;a href="https://ian.bebbs.co.uk/posts/UnoDuoHey"&gt;Uno, Duo, Hey!&lt;/a&gt; about Uno's dual-screen capabilities - showed a platform that had incredible potential and which was rapidly maturing to the point where it could deliver on this potential for &amp;quot;real world&amp;quot; apps.&lt;/p&gt;
&lt;p&gt;Given I wanted to write an app that would work natively on both the Surface Duo - which runs Android - and Surface Neo - which runs Windows 10X - the Uno Platform was an obvious choice as it would reduce my technology stack from this:
&lt;img src="/Content/CODuo/MultipleApps.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Multiple Apps"/&gt;&lt;/p&gt;
&lt;p&gt;To this:
&lt;img src="/Content/CODuo/UnoAllTheThings.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Uno All The Things!"/&gt;&lt;/p&gt;
&lt;p&gt;As we will see in the following series, this choice really has paid dividends. In fact, it has been so successful that I feel I must issue a correction:&lt;/p&gt;
&lt;p&gt;My first blog post about the Uno Platform - &lt;a href="https://ian.bebbs.co.uk/posts/Uno"&gt;The Seven GUIs of Christmas&lt;/a&gt; - contained the following:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;The Uno platform is, somewhat amazingly, able to display (almost) the exact same XAML page across multiple platforms (or 'heads' to use Uno parlance) with a very high degree of fidelity. This is quite an achievement and the team at nventive are rightly proud of this capability.

However, from the perspective of someone looking to write large applications on this platform, I don't believe this facility is particularly important nor - to a certain extent - even desirable. You see, in my experience, it is often the case that each platform and/or form-factor requires such different UI and/or UX that trying to shoe-horn everything into a single XAML page results in a page that is difficult, if not impossible, to maintain.
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;In contrast to this statement, CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; has been written with a single code-base - from infrastructure through to view-models &lt;em&gt;and&lt;/em&gt; views - shared across all devices. This has led to neither code bloat nor maintainability issues due, in most part, to the Uno Platform's faithful reproduction of a few key UWP tenets.&lt;/p&gt;
&lt;p&gt;To explain: Whereas previously I had been used to writing cross-platform apps using multiple different display technologies, the Uno Platform is just UWP and UWP was designed to be... well... universal. Out of the gate, UWP ran on everything from desktop PCs and tablets through to mobile phones and IoT devices. It successfully abstracted away many technical difficulties of designing for multiple platforms ensuring the developer was able to write a single &amp;quot;adaptive&amp;quot; UI which would then be able to capitalize on the display surface(s) available.&lt;/p&gt;
&lt;p&gt;Uno have very successfully reproduced this capability across multiple disparate platforms and while not quite pixel-perfect - as we will see in future posts - it is close enough that any differences can be smoothed over with a little creative design.&lt;/p&gt;
&lt;h2 id="which-platforms-does-coduo-run-on"&gt;Which platforms does CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; run on?&lt;/h2&gt;
&lt;p&gt;CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; currently runs on the following platforms:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Via UWP
&lt;ul&gt;
&lt;li&gt;Windows 10 PC&lt;/li&gt;
&lt;li&gt;Windows 10 Tablet&lt;/li&gt;
&lt;li&gt;Windows 10 Mobile/Phone&lt;/li&gt;
&lt;li&gt;Windows 10 IoT&lt;/li&gt;
&lt;li&gt;XBox One&lt;/li&gt;
&lt;li&gt;Hololens&lt;/li&gt;
&lt;li&gt;Surface Hub&lt;/li&gt;
&lt;li&gt;Windows 10X PC/Tablet (i.e. Surface Neo)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Via Android (Oreo - version 8 - or above)
&lt;ul&gt;
&lt;li&gt;Android Phone&lt;/li&gt;
&lt;li&gt;Android Tablet&lt;/li&gt;
&lt;li&gt;Android TV&lt;/li&gt;
&lt;li&gt;Dual-Screen Android Devices (i.e. Surface Duo)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Furthermore, CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; will be updated to run on the following platforms when time and resources allow:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Via iOS
&lt;ul&gt;
&lt;li&gt;iPhone&lt;/li&gt;
&lt;li&gt;iPad&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Via WebAssembly
&lt;ul&gt;
&lt;li&gt;Any &lt;a href="https://en.wikipedia.org/wiki/WebAssembly"&gt;WebAssembly compatible browser&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="where-can-i-get-coduo"&gt;Where can I get CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;?&lt;/h2&gt;
&lt;p&gt;Beta versions of CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; are currently available in the following apps stores:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.microsoft.com/en-gb/p/coduo/9php2cf3z997"&gt;Microsoft Store&lt;/a&gt; - for PC, Tablet, XBox, Hololens and Surface Hub&lt;/li&gt;
&lt;li&gt;&lt;a href="https://play.google.com/store/apps/details?id=solutions.onecog.coduo"&gt;Google Play&lt;/a&gt; - for Android Phone, Table, and TV.&lt;/li&gt;
&lt;li&gt;Apple App Store - Coming soon&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;As promised, the Uno Platform Team have also featured CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; on their &lt;a href="https://platform.uno/showcases/"&gt;showcases page&lt;/a&gt; and as part of their introduction to using the &lt;a href="https://platform.uno/surface-duo-neo/"&gt;Uno Platform for Surface Duo and Surface Neo&lt;/a&gt;.&lt;/p&gt;
&lt;h2 id="will-you-be-open-sourcing-coduo"&gt;Will you be open-sourcing CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;?&lt;/h2&gt;
&lt;p&gt;Yes, &lt;em&gt;mostly&lt;/em&gt;. In addition to detailing lots of the design and implementation considerations that went into writing CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; in various posts for this series, the code for CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; has been published under a &amp;quot;shared source&amp;quot; license; specifically &lt;a href="https://www.gnu.org/licenses/gpl-3.0.en.html"&gt;GPLv3&lt;/a&gt; with the &lt;a href="https://commonsclause.com/"&gt;&amp;quot;Commons Clause&amp;quot;&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;The Commons Clause is a license condition drafted by Heather Meeker that applies a narrow, minimal-form commercial restriction on top of an existing open source license to transition the project to a source-availability licensing scheme. The combined text replaces the existing license, allowing all permissions of the original license to remain except the ability to &amp;quot;Sell&amp;quot; the software as defined in the text.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;It is my hope that transitioning the CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; project to a &amp;quot;source-available&amp;quot; license scheme will allow others to understand how to use the Uno Platform to develop a cross-platform app without me having to worry about numerous clones of the app appearing in various app stores laden with ads.&lt;/p&gt;
&lt;p&gt;The source code for CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; can be found in my &lt;a href="https://github.com/ibebbs/CODuo"&gt;COduo repository on Github&lt;/a&gt;. If you like or use the source-code, please take the time to &amp;quot;star&amp;quot; the repository; it's a small gesture which really fuels developers's enthusiasm for projects such as these.&lt;/p&gt;
&lt;h2 id="when-will-new-posts-about-coduo-be-made-available"&gt;When will new posts about CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; be made available?&lt;/h2&gt;
&lt;p&gt;I intend to write/release a new post in the series every few days.&lt;/p&gt;
&lt;p&gt;My plan is for parts 2 and 3 to provide a high level overview of the service-side infrastructure and client app architecture respectively. These posts won't specifically discuss the Uno Platform but will instead provide insight into how the project was designed and how this design simplifies the development of a cross-platform app such as CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt;.&lt;/p&gt;
&lt;p&gt;After parts 2 and 3 I will be diving into the various considerations of using the Uno Platform to deliver a cross-platform app. Part 4 will detail how to use the TwoPaneView to develop an app that runs natively on dual-screen devices and part 5 onwards will discuss how other UI components were implemented.&lt;/p&gt;
&lt;p&gt;I will round out the series by highlighting platform differences you need to be aware of while using the Uno Platform and my experience of deploying CO&lt;sub&gt;&lt;em&gt;duo&lt;/em&gt;&lt;/sub&gt; to each of the various apps stores.&lt;/p&gt;
&lt;h2 id="finally"&gt;Finally&lt;/h2&gt;
&lt;p&gt;I hope you enjoy this series and that it goes some way to demonstrating the massive potential presented by the Uno Platform for delivering cross-platform experiences without having to invest in additional staff training nor bifurcating your development efforts.&lt;/p&gt;
&lt;p&gt;If you or your company are interested in building apps that can leverage the dual screen capabilities of new devices such as the Surface Duo and Surface Neo, or are keen to understand how a single code-base can deliver apps to &lt;em&gt;every platform from mobile phones to web sites&lt;/em&gt;, then please feel free to drop me a line using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;. I am actively seeking new clients in this space and would be happy to discuss any ideas you have or projects you're planning.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Uno, Duo, Hey!</title>
			<link>http://ian.bebbs.co.uk/posts/UnoDuoHey</link>
			<description>&lt;p&gt;Last December I wrote &lt;a href="https://ian.bebbs.co.uk/posts/Uno"&gt;a blog post&lt;/a&gt; called "The Seven GUIs of Christmas" as part of the &lt;a href="https://crosscuttingconcerns.com/The-Third-Annual-csharp-Advent"&gt;Third Annual C# Advent&lt;/a&gt; series. This post showed the use of the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; to write cross-platform apps in UWP. One of the major drivers behind this blog post a desire to write apps for Microsoft's &lt;a href="https://news.microsoft.com/october-2-2019/"&gt;recently announced Surface Neo and Surface Duo devices&lt;/a&gt; which run Windows 10X and Android respectively. Well, a couple of days ago, Microsoft finally released a &lt;a href="https://blogs.windows.com/windowsdeveloper/2020/01/22/announcing-dual-screen-preview-sdks-and-microsoft-365-developer-day/"&gt;preview SDK for the Surface Duo&lt;/a&gt; which included an Android Emulator with a preview Surface Duo image. Today I finally got a chance to see whether the Uno Platform really could deliver on these new form-factors.&lt;/p&gt;</description>
			<enclosure url="http://ian.bebbs.co.uk/Content/UnoDuoHey/SurfaceDuo-Title.jpg" length="0" type="image" />
			<guid>http://ian.bebbs.co.uk/posts/UnoDuoHey</guid>
			<pubDate>Fri, 24 Jan 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;Last December I wrote &lt;a href="https://ian.bebbs.co.uk/posts/Uno"&gt;a blog post&lt;/a&gt; called &amp;quot;The Seven GUIs of Christmas&amp;quot; as part of the &lt;a href="https://crosscuttingconcerns.com/The-Third-Annual-csharp-Advent"&gt;Third Annual C# Advent&lt;/a&gt; series. This post showed the use of the &lt;a href="https://platform.uno/"&gt;Uno Platform&lt;/a&gt; to write cross-platform apps in UWP. One of the major drivers behind this blog post a desire to write apps for Microsoft's &lt;a href="https://news.microsoft.com/october-2-2019/"&gt;recently announced Surface Neo and Surface Duo devices&lt;/a&gt; which run Windows 10X and Android respectively. Well, a couple of days ago, Microsoft finally released a &lt;a href="https://blogs.windows.com/windowsdeveloper/2020/01/22/announcing-dual-screen-preview-sdks-and-microsoft-365-developer-day/"&gt;preview SDK for the Surface Duo&lt;/a&gt; which included an Android Emulator with a preview Surface Duo image. Today I finally got a chance to see whether the Uno Platform really could deliver on these new form-factors.&lt;/p&gt;
&lt;h2 id="installing-the-emulator"&gt;Installing the Emulator&lt;/h2&gt;
&lt;p&gt;If, like me, you don't have Android Studio installed and/or you want to install the Surface Duo SDK in a non-standard location (my super-speedy Intel Optane 900P C:\ drive is getting a little crowded!), you're going to face issues running the emulator. This is mostly due to the &lt;code&gt;run.bat&lt;/code&gt; file used to launch the emulator not looking in the correct location for the Android SDK and not supporting installation of the Surface Duo SDK in a path that contains spaces.&lt;/p&gt;
&lt;p&gt;If you're encountering issues launching the emulator, navigate to the &lt;code&gt;artifacts&lt;/code&gt; directory within the Surface Duo SDK installation directory and edit the &lt;code&gt;run.bat&lt;/code&gt; file to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cmd"&gt;&amp;#64;echo off

rem ##### ENSURE THE SDK LOCATION BELOW IS CORRECT: #######
set ANDROID_SDK_LOCATION=C:\Program Files (x86)\Android\android-sdk

rem ############ DO NOT Modify below this line ############

set DIRNAME=%~dp0
if &amp;quot;%DIRNAME%&amp;quot; == &amp;quot;&amp;quot; set DIRNAME=.\

echo %DIRNAME%

rem Check if emulator is installed
set EMULATOR=%ANDROID_SDK_LOCATION%\emulator\emulator.exe
echo &amp;quot;%EMULATOR%&amp;quot;
if exist %EMULATOR% (
    set ANDROID_PRODUCT_OUT=%DIRNAME%
    &amp;quot;%EMULATOR%&amp;quot; -verbose -accel auto %* -sysdir &amp;quot;%DIRNAME%\bin&amp;quot; -kernel &amp;quot;%DIRNAME%\bin\kernel-ranchu&amp;quot; -datadir &amp;quot;%DIRNAME%\bin\data&amp;quot; -initdata &amp;quot;%DIRNAME%\bin\userdata.img&amp;quot; -vendor &amp;quot;%DIRNAME%\bin\vendor-qemu.img&amp;quot; -system &amp;quot;%DIRNAME%\bin\system-qemu.img&amp;quot; -initdata &amp;quot;%DIRNAME%\bin\userdata.img&amp;quot; -data &amp;quot;%DIRNAME%\bin\userdata.img&amp;quot;
) else (
    echo &amp;quot;Can't find emulator executable, make sure its installed&amp;quot;
)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;TBH, the changes are mostly just encapsulating paths within quotes but hopefully this'll save you a little time.&lt;/p&gt;
&lt;p&gt;Hopefully now, when you launch the emulator, you'll be greeted by this:&lt;/p&gt;
&lt;img src="/Content/UnoDuoHey/DuoEmulator.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="Android Duo Emulator"/&gt;
&lt;p&gt;Hmm... dual screens!&lt;/p&gt;
&lt;h2 id="getting-started"&gt;Getting Started&lt;/h2&gt;
&lt;p&gt;Microsoft have done a great job of helping developers get started on this platform by supplying some great &lt;a href="https://docs.microsoft.com/en-gb/dual-screen/android/"&gt;code-snippets and samples&lt;/a&gt; in both &lt;a href="https://github.com/microsoft/surface-duo-sdk-samples"&gt;Java&lt;/a&gt; and &lt;a href="https://github.com/microsoft/surface-duo-sdk-xamarin-samples"&gt;C# (using the Xamarin platform)&lt;/a&gt;. Furthermore, the emulator &amp;quot;just works&amp;quot; with the Visual Studio IDE such that, once running, it appears as a standard deployment target allowing you to quickly get apps running within the Surface Duo image.&lt;/p&gt;
&lt;img src="/Content/UnoDuoHey/VisualStudioTargettingDuoEmulator.png" class="img-responsive" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" alt="VisualStudio Targetting The Duo Emulator"/&gt;
&lt;h2 id="cross-platform-dual-screen"&gt;Cross-Platform Dual-Screen&lt;/h2&gt;
&lt;p&gt;My first priority with Uno was to make sure I could correctly interpret when the app was running on a single screen or across both screens. To do this, I took a look at the Xamarin samples and quickly saw that they used a &lt;code&gt;ScreenHelper&lt;/code&gt; class to collate information on the current state of the app. This class is provided as part of the (very new - just two days old at time of writing!) &lt;a href="https://www.nuget.org/packages/Xamarin.DuoSdk/0.0.3.2"&gt;Xamarin.DuoSdk nuget package&lt;/a&gt;. Fortunately, when running on Android (or iOS), Uno runs on top of Xamarin meaning I could just add a reference to this package from the &lt;code&gt;Droid&lt;/code&gt; head project of my Uno solution and start using this class right away.&lt;/p&gt;
&lt;p&gt;The main functions of the &lt;code&gt;ScreenHelper&lt;/code&gt; class were abstracted behind an &lt;code&gt;IDeviceHelper&lt;/code&gt; interface so that each head project could provide a platform specific implementation and a small shim written around the &lt;code&gt;ScreenHelper&lt;/code&gt; class to satisfy this interface. Finally, to provide responsiveness to changes, I again used my &lt;a href="https://www.nuget.org/packages/MVx.Observable/"&gt;MVx.Observable nuget package&lt;/a&gt; to dynamically call &lt;code&gt;IDeviceHelper&lt;/code&gt; members and update properties on a view model whenever the application changed modes.&lt;/p&gt;
&lt;p&gt;In very short order, I had this working:&lt;/p&gt;
&lt;iframe width="560" height="315" style="margin: auto; width:50%; margin-top: 6px; margin-bottom: 6px;" src="https://www.youtube.com/embed/MBPo9GvnX-Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
&lt;p&gt;Just to highlight: this is completely standard UWP / C# code, running &lt;em&gt;unchanged&lt;/em&gt; on a dual-screen Android device.&lt;/p&gt;
&lt;p&gt;A few comments / caveats:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;The loading time of the Uno app in the emulator was due to the app being run, as debug, directly from the Visual Studio IDE and is not indicative of Uno Platform app start times.&lt;/li&gt;
&lt;li&gt;The app disappearing when switching between screens or between single and dual screen modes is not due to the Uno Platform; this happen with apps that come as part of the Duo image.&lt;/li&gt;
&lt;li&gt;Occasionally, when switching between single and dual screen modes, the app will just disappear. Again, this is nothing to do with the Uno Platform and happens with apps that come as part of the Duo image.&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;h3 id="surface-duo"&gt;Surface Duo&lt;/h3&gt;
&lt;p&gt;While the Surface Duo Android Emulator image is undoubtedly rough around the edges (it is, after all, a preview) it manages to provide a tantalising taste of what using dual-screen devices could be like. Indeed, just running the Contacts and Calendar apps side-by-side boggles the mind with possible interactions between the two. Furthermore Microsoft have, in relatively short order, delivered a preview SDK from which it is possible to start developing new dual-screen apps or enhance existing apps to take advantage of a second screen. Exciting times!&lt;/p&gt;
&lt;h3 id="uno-platform"&gt;Uno Platform&lt;/h3&gt;
&lt;p&gt;Per my experience while writing &amp;quot;The Seven GUIs of Christmas&amp;quot; post, the Uno Platform has continued to preform admirably and shows great promise for writing apps that will run natively across platforms &lt;strong&gt;and&lt;/strong&gt; on dual screens. The only issue I had with Uno while writing the app above was the use of a &amp;quot;Shared Project&amp;quot; to share the Xaml/ViewModel between the various head projects. This approach (which &lt;a href="https://ian.bebbs.co.uk/posts/Uno#six-points-opining"&gt;I recommended against&lt;/a&gt; in my previous post) resulted in Visual Studio stubbornly refusing to show the Xaml editor and countless errors being shown in the error window despite everything compiling and running fine.&lt;/p&gt;
&lt;h3 id="code"&gt;Code&lt;/h3&gt;
&lt;p&gt;All code for this post can be found in my &lt;a href="https://github.com/ibebbs/UnoDuoHey"&gt;UnoDuoHey repository&lt;/a&gt; on Github.&lt;/p&gt;
&lt;h2 id="lastly"&gt;Lastly...&lt;/h2&gt;
&lt;p&gt;I am currently eager to find potential new clients interested in using the Uno Platform to deliver cross-platform apps and those looking to capitalise on the amazing potential of dual-screen devices in particular. If this sounds like you or your company, please feel free to drop me a line to discuss your project/ideas using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Less ReST, more Hot Chocolate</title>
			<link>http://ian.bebbs.co.uk/posts/LessReSTMoreHotChocolate</link>
			<description>&lt;p&gt;A project I'm working on requires a microservice like evaluation environment. A brief google revealed very little that would suffice so I decided to quickly knock up my own. At the same time, I thought it would be a great opportunity to evaluate &lt;a href="https://hotchocolate.io/"&gt;Hot Chocolate&lt;/a&gt; by &lt;a href="https://chillicream.com/"&gt;Chilli Cream&lt;/a&gt;; a relative newcomer to the (very sparse) GraphQL for .NET scene. In this post I'll also be using &lt;a href="https://github.com/RicoSuter/NSwag"&gt;NSwag&lt;/a&gt; to generate &lt;a href="https://www.openapis.org/"&gt;OpenAPI documents&lt;/a&gt; and &lt;a href="https://docs.microsoft.com/en-us/dotnet/architecture/microservices/implement-resilient-applications/use-httpclientfactory-to-implement-resilient-http-requests#how-to-use-typed-clients-with-httpclientfactory"&gt;Typed Clients&lt;/a&gt; for downstream services and, finally, I will be containerizing the microservices using &lt;a href="https://www.docker.com/"&gt;Docker&lt;/a&gt; and employing &lt;a href="https://docs.docker.com/compose/"&gt;Docker Compose&lt;/a&gt; to run and test them.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/LessReSTMoreHotChocolate</guid>
			<pubDate>Wed, 08 Jan 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;A project I'm working on requires a microservice like evaluation environment. A brief google revealed very little that would suffice so I decided to quickly knock up my own. At the same time, I thought it would be a great opportunity to evaluate &lt;a href="https://hotchocolate.io/"&gt;Hot Chocolate&lt;/a&gt; by &lt;a href="https://chillicream.com/"&gt;Chilli Cream&lt;/a&gt;; a relative newcomer to the (very sparse) GraphQL for .NET scene. In this post I'll also be using &lt;a href="https://github.com/RicoSuter/NSwag"&gt;NSwag&lt;/a&gt; to generate &lt;a href="https://www.openapis.org/"&gt;OpenAPI documents&lt;/a&gt; and &lt;a href="https://docs.microsoft.com/en-us/dotnet/architecture/microservices/implement-resilient-applications/use-httpclientfactory-to-implement-resilient-http-requests#how-to-use-typed-clients-with-httpclientfactory"&gt;Typed Clients&lt;/a&gt; for downstream services and, finally, I will be containerizing the microservices using &lt;a href="https://www.docker.com/"&gt;Docker&lt;/a&gt; and employing &lt;a href="https://docs.docker.com/compose/"&gt;Docker Compose&lt;/a&gt; to run and test them.&lt;/p&gt;
&lt;h2 id="contents"&gt;Contents&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="#requirements"&gt;Requirements&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="#solution"&gt;Solution&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#environment"&gt;Environment&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#about-hot-chocolate"&gt;About Hot Chocolate&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#solution-structure"&gt;Solution Structure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#rest-services"&gt;ReST Services&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="#cheeze.store"&gt;Cheeze.Store&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#cheeze.inventory"&gt;Cheeze.Inventory&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#providing-swagger-endpoints"&gt;Providing Swagger Endpoints&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#generating-typed-clients"&gt;Generating Typed Clients&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#graphql-service"&gt;GraphQL Service&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="#object-model"&gt;Object Model&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#schema-resolvers"&gt;Schema &amp;amp; Resolvers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#service-binding-configuration"&gt;Service Binding &amp;amp; Configuration&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#containerization"&gt;Containerization&lt;/a&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="#docker-support"&gt;Docker Support&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#container-orchestration-support"&gt;Container Orchestration Support&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#testing"&gt;Testing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#conclusion"&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="requirements"&gt;Requirements&lt;/h2&gt;
&lt;h3 id="solution"&gt;Solution&lt;/h3&gt;
&lt;p&gt;The requirements for the test environment were pretty simple:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A .net core web service which, when called, fetched and collated data from two other .net core web services. As (conditionally) aggregating data from multiple sources is one of GraphQL's primary use cases I decided a GraphQL endpoint would make for a great entry point into this flow.&lt;/li&gt;
&lt;li&gt;Avoid any tight coupling between the GraphQL endpoint and the underlying web-services yet provide strong compile-time guarantees of cohesion with these services.&lt;/li&gt;
&lt;li&gt;A simple build/deployment/debug loop.&lt;/li&gt;
&lt;li&gt;Embrace 'modern' methodologies; for example asynchronous controller actions and &lt;a href="https://docs.microsoft.com/en-us/dotnet/csharp/nullable-references"&gt;Nullable Reference Types&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id="environment"&gt;Environment&lt;/h3&gt;
&lt;p&gt;To follow the following steps you will need:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="https://dotnet.microsoft.com/download/dotnet-core/3.1"&gt;.Net Core 3.1 SDK&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Powershell (I'd recommend the new &lt;a href="https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701?activetab=pivot:overviewtab"&gt;Windows Terminal&lt;/a&gt;)&lt;/li&gt;
&lt;li&gt;A text editor (&lt;a href="https://code.visualstudio.com/Download"&gt;VSCode&lt;/a&gt; perhaps?)&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.docker.com/docker-for-windows/"&gt;Docker for Windows&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="about-hot-chocolate"&gt;About Hot Chocolate&lt;/h2&gt;
&lt;p&gt;I have only just started using Hot Chocolate but really like it. It allows code-first schema modelling using basic POCO classes leaving all the GraphQL magic to be implemented using a neat fluent syntax rooted from a &lt;a href="https://hotchocolate.io/docs/schema"&gt;&lt;code&gt;SchemaBuilder&lt;/code&gt;&lt;/a&gt; class. While this post is most certainly aimed at GraphQL beginners you may glean some additional information about Hot Chocolate from their &lt;a href="https://hotchocolate.io/docs/introduction.html"&gt;&amp;quot;Quick Start&amp;quot;&lt;/a&gt; or by watching &lt;a href="https://www.youtube.com/watch?v=Lr6qyoAT8k4"&gt;any&lt;/a&gt; &lt;a href="https://www.youtube.com/watch?v=2QLhcqFYRpg"&gt;one&lt;/a&gt; of the &lt;a href="https://www.youtube.com/watch?v=q-5MUqLAEFs"&gt;many talks&lt;/a&gt; by Michael Steib on it's use.&lt;/p&gt;
&lt;p&gt;Now, if you do watch/have seen any of the videos here, you will notice that &lt;a href="https://hotchocolate.io/docs/stitching"&gt;Schema Stitching&lt;/a&gt; is mentioned numerous times. In fact, in a couple of videos it is discussed specifically in relation to &amp;quot;stitching&amp;quot; ReST services into a GraphQL schema (along with other GraphQL schemas). This sounded fantastic and was certainly a desired use case when I started using Hot Chocolate. Unfortunately, there is zero documentation or guidance on how this can be achieved at the current time so the project that follows uses basic &lt;a href="https://hotchocolate.io/docs/resolvers"&gt;resolvers&lt;/a&gt; to fetch data from ReST services and AutoMapper to map between schemas.&lt;/p&gt;
&lt;p&gt;Before getting set up, be sure to install Hot Chocolate's template into the dotnet CLI as follows:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;dotnet new -i HotChocolate.Templates.Server
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 id="solution-structure"&gt;Solution Structure&lt;/h2&gt;
&lt;p&gt;Here's how I set up my solution:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;# Create directories and initialize git
mkdir Cheeze
cd Cheeze
git init
mkdir src
cd src
# Create projects and remove superfluous files
dotnet new graphql -n Cheeze.Graph
dotnet new webapi -n Cheeze.Store
dotnet new classlib -n Cheeze.Store.Client
rm .\Cheeze.Store.Client\Class1.cs
dotnet new webapi -n Cheeze.Inventory
dotnet new classlib -n Cheeze.Inventory.Client
rm .\Cheeze.Inventory.Client\Class1.cs
# Create solution for easy of use from VS
dotnet new sln -n Cheeze
dotnet sln add .\Cheeze.Graph\Cheeze.Graph.csproj
dotnet sln add .\Cheeze.Store\Cheeze.Store.csproj
dotnet sln add .\Cheeze.Store.Client\Cheeze.Store.Client.csproj
dotnet sln add .\Cheeze.Inventory\Cheeze.Inventory.csproj
dotnet sln add .\Cheeze.Inventory.Client\Cheeze.Inventory.Client.csproj
# Add project references
dotnet add .\Cheeze.Graph\Cheeze.Graph.csproj reference .\Cheeze.Store.Client\Cheeze.Store.Client.csproj
dotnet add .\Cheeze.Graph\Cheeze.Graph.csproj reference .\Cheeze.Inventory.Client\Cheeze.Inventory.Client.csproj
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Unfortunately, if we do a &lt;code&gt;dotnet build&lt;/code&gt; now we'll see a couple of errors due to &lt;a href="https://github.com/ChilliCream/hotchocolate/issues/1329"&gt;a bug&lt;/a&gt; in the Hot Chocolate server template which fails to add the HotChocolate namespace to the list of using statements in &lt;code&gt;Startup.cs&lt;/code&gt;. This can be resolved with the following command:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;&amp;#64;(Get-Content .\Cheeze.Graph\Startup.cs)[0..2] + &amp;quot;using HotChocolate;&amp;quot; + &amp;#64;(Get-Content .\Cheeze.Graph\Startup.cs)[3..44] | Set-Content .\Cheeze.Graph\Startup.cs
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Everything should now build correctly.&lt;/p&gt;
&lt;h2 id="rest-services"&gt;ReST Services&lt;/h2&gt;
&lt;p&gt;We'll start by building out our ReST services.&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Note: These ReST services simply return static (and somewhat bare) data as that's all the need to be for my test environment. As such there is no persistence layer implemented and much of the schema for each type is unused.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;The two services are as follows:&lt;/p&gt;
&lt;h3 id="cheeze.store"&gt;Cheeze.Store&lt;/h3&gt;
&lt;p&gt;This web api will provide a full list of all cheeses available through the store along with descriptions and image URLs. It will (for simplicity) have a single endpoint which allows a consumer to retrieve all available cheeses.&lt;/p&gt;
&lt;p&gt;To set this up, do the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Delete the &lt;code&gt;Controllers&lt;/code&gt; folder - We're a microservice and will be providing a single endpoint so there's no need for plurality here.&lt;/li&gt;
&lt;li&gt;Delete &lt;code&gt;WeatherForecast.cs&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Add the following files:
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Controller.cs&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using System;
using System.Collections.Generic;
using System.Net;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace Cheeze.Store
{
    [Route(&amp;quot;api/store&amp;quot;)]
    public class Controller : Microsoft.AspNetCore.Mvc.Controller
    {
        [HttpGet]
        [ProducesResponseType(typeof(IEnumerable&amp;lt;Cheese&amp;gt;), (int)HttpStatusCode.OK)]
        public Task&amp;lt;ActionResult&amp;lt;IEnumerable&amp;lt;Cheese&amp;gt;&amp;gt;&amp;gt; Get()
        {
            var result = new[]
            {
                new Cheese
                {
                    Id = Guid.Parse(&amp;quot;1468841a-5fbe-41c5-83b3-ab136b7ae70c&amp;quot;),
                    Name = &amp;quot;API Cheese&amp;quot;
                }
            };

            return Task.FromResult&amp;lt;ActionResult&amp;lt;IEnumerable&amp;lt;Cheese&amp;gt;&amp;gt;&amp;gt;(Ok(result));
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cheese.cs&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using System;
using System.ComponentModel.DataAnnotations;

namespace Cheeze.Store
{
    public class Cheese
    {
        public Guid Id { get; set; }

        public Uri? Uri { get; set; }

        [Required]
        public string Name { get; set; } = string.Empty;

        public string Description { get; set; } = string.Empty;

        public decimal Price { get; set; }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id="cheeze.inventory"&gt;Cheeze.Inventory&lt;/h3&gt;
&lt;p&gt;This web api provides up to date inventory information for cheeses available through the store. It will have two endpoints which allow a consumer to get the availability of a specific cheese or a list of cheeses by id.&lt;/p&gt;
&lt;p&gt;To set this up, do the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Delete the &lt;code&gt;Controllers&lt;/code&gt; folder - same as above&lt;/li&gt;
&lt;li&gt;Delete &lt;code&gt;WeatherForecast.cs&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Add the following files:
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Controller.cs&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Threading.Tasks;

namespace Cheeze.Inventory
{
    [Route(&amp;quot;api/inventory&amp;quot;)]
    public class Controller : Microsoft.AspNetCore.Mvc.Controller
    {
        private static readonly Random Random = new Random();

        [HttpGet(&amp;quot;{id}&amp;quot;)]
        [ProducesResponseType(typeof(uint), (int)HttpStatusCode.OK)]
        public Task&amp;lt;ActionResult&amp;lt;uint&amp;gt;&amp;gt; Get(Guid id)
        {
            return Task.FromResult&amp;lt;ActionResult&amp;lt;uint&amp;gt;&amp;gt;(Ok((uint)Random.Next(10)));
        }

        [HttpPost]
        [ProducesResponseType(typeof(IEnumerable&amp;lt;Available&amp;gt;), (int)HttpStatusCode.OK)]
        public Task&amp;lt;ActionResult&amp;lt;IEnumerable&amp;lt;Available&amp;gt;&amp;gt;&amp;gt; Post([FromBody] Request request)
        {
            var available = request.Ids
                .Select(id =&amp;gt; new Available { Id = id, Quantity = (uint)Random.Next(10) }) 
                .ToArray();

            return Task.FromResult&amp;lt;ActionResult&amp;lt;IEnumerable&amp;lt;Available&amp;gt;&amp;gt;&amp;gt;(Ok(available));
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Request.cs&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using System;
using System.Collections.Generic;
using System.Linq;

namespace Cheeze.Inventory
{
    public class Request
    {
        public IEnumerable&amp;lt;Guid&amp;gt; Ids { get; set; } = Enumerable.Empty&amp;lt;Guid&amp;gt;();
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Available.cs&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using System;

namespace Cheeze.Inventory
{
    public class Available
    {
        public Guid Id { get; set; }

        public uint Quantity { get; set; }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h3 id="providing-swagger-endpoints"&gt;Providing Swagger Endpoints&lt;/h3&gt;
&lt;p&gt;Both ReST services will provide a swagger endpoints to facilitate their use. We're using &lt;a href="https://github.com/RicoSuter/NSwag"&gt;'NSwag'&lt;/a&gt; to generate these endpoints for each project as follows:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Add the required packages to each project:&lt;/li&gt;
&lt;/ol&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;dotnet add .\Cheeze.Store\Cheeze.Store.csproj package NSwag.AspNetCore
dotnet add .\Cheeze.Inventory\Cheeze.Inventory.csproj package NSwag.AspNetCore
&lt;/code&gt;&lt;/pre&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;In the &lt;code&gt;Startup.ConfigureServices&lt;/code&gt; method, register the required Swagger services:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();

    // Register the Swagger services
    services.AddOpenApiDocument();
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the &lt;code&gt;Startup.Configure&lt;/code&gt; method, enable the middleware for serving the generated Swagger specification and the Swagger UI:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;public void Configure(IApplicationBuilder app)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    // Remove HTTP-&amp;gt;HTTPS redirection for simplified hosting in Docker
    //app.UseHttpsRedirection();

    app.UseRouting();

    // Register the Swagger generator and the Swagger UI middlewares
    app.UseOpenApi();
    app.UseSwaggerUi3();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =&amp;gt;
    {
        endpoints.MapControllers();
    });
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Build the solution to restore all dependencies:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;dotnet build
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If you now build and run either project you should now be able to navigate to the swagger endpoint UI. For example:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;dotnet run --project .\Cheeze.Store\Cheeze.Store.csproj
start &amp;quot;microsoft-edge:http://localhost:5000/swagger&amp;quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="generating-typed-clients"&gt;Generating Typed Clients&lt;/h3&gt;
&lt;p&gt;We're now going to use NSwag`s MSBuild package to generate a &lt;a href="https://docs.microsoft.com/en-us/dotnet/architecture/microservices/implement-resilient-applications/use-httpclientfactory-to-implement-resilient-http-requests#how-to-use-typed-clients-with-httpclientfactory"&gt;Typed Client&lt;/a&gt; for each project at build time. To do this:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Install the required packages&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;dotnet add .\Cheeze.Store\Cheeze.Store.csproj package NSwag.MSBuild
dotnet add .\Cheeze.Inventory\Cheeze.Inventory.csproj package NSwag.MSBuild
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Build project to restore packages&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Edit the project file to enable Nullable Reference Types and include all assemblies on build:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-csproj"&gt;&amp;lt;Project Sdk=&amp;quot;Microsoft.NET.Sdk.Web&amp;quot;&amp;gt;
    &amp;lt;PropertyGroup&amp;gt;
        &amp;lt;TargetFramework&amp;gt;netcoreapp3.1&amp;lt;/TargetFramework&amp;gt;
        &amp;lt;Nullable&amp;gt;enable&amp;lt;/Nullable&amp;gt; &amp;lt;!-- Add this line --&amp;gt;
        &amp;lt;CopyLocalLockFileAssemblies&amp;gt;true&amp;lt;/CopyLocalLockFileAssemblies&amp;gt; &amp;lt;!-- And this line --&amp;gt;
    &amp;lt;/PropertyGroup&amp;gt;
    ...
&amp;lt;/Project&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Generate an NSwag configuration file&lt;/p&gt;
&lt;p&gt;Building the solution after adding the &lt;code&gt;NSwag.MSBuild&lt;/code&gt; package should have added the NSwag tools to your nuget package cache (usually in the following directory: &lt;code&gt;%userprofile%\.nuget\packages\nswag.msbuild\13.2.0\tools\NetCore31&lt;/code&gt;). Using these build tools we can generate the required configuration file for each project with the following command:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;cd .\Cheeze.Inventory
~\.nuget\packages\nswag.msbuild\13.2.0\tools\NetCore31\dotnet-nswag.exe new
cd ..\Cheeze.Store
~\.nuget\packages\nswag.msbuild\13.2.0\tools\NetCore31\dotnet-nswag.exe new
cd ..
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Now we need to replace sections the generated configuration file with populated values. In each of files do the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Set the &lt;code&gt;runtime&lt;/code&gt; version:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-json"&gt;{
    &amp;quot;runtime&amp;quot;: &amp;quot;NetCore31&amp;quot;,
    ...
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Modify the &lt;code&gt;documentGenerator&lt;/code&gt; section to generate an OpenAPI document from the generated web assembly. Do this by replacing the &lt;code&gt;documentGenerator&lt;/code&gt; section with the following (ensuring to replace the &lt;code&gt;controllerNames&lt;/code&gt;, &lt;code&gt;defaultUrlTemplate&lt;/code&gt; and &lt;code&gt;assemblyPaths&lt;/code&gt; to the correct values for each project):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-json"&gt;{
    ...
    &amp;quot;documentGenerator&amp;quot;: {
        &amp;quot;webApiToOpenApi&amp;quot;: {
            &amp;quot;controllerNames&amp;quot;: [
                &amp;quot;Cheeze.Store.Controller&amp;quot;
            ],
            &amp;quot;isAspNetCore&amp;quot;: true,
            &amp;quot;resolveJsonOptions&amp;quot;: false,
            &amp;quot;defaultUrlTemplate&amp;quot;: &amp;quot;api/store&amp;quot;,
            &amp;quot;addMissingPathParameters&amp;quot;: false,
            &amp;quot;includedVersions&amp;quot;: null,
            &amp;quot;defaultPropertyNameHandling&amp;quot;: &amp;quot;Default&amp;quot;,
            &amp;quot;defaultReferenceTypeNullHandling&amp;quot;: &amp;quot;Null&amp;quot;,
            &amp;quot;defaultDictionaryValueReferenceTypeNullHandling&amp;quot;: &amp;quot;NotNull&amp;quot;,
            &amp;quot;defaultResponseReferenceTypeNullHandling&amp;quot;: &amp;quot;NotNull&amp;quot;,
            &amp;quot;defaultEnumHandling&amp;quot;: &amp;quot;Integer&amp;quot;,
            &amp;quot;flattenInheritanceHierarchy&amp;quot;: false,
            &amp;quot;generateKnownTypes&amp;quot;: true,
            &amp;quot;generateEnumMappingDescription&amp;quot;: false,
            &amp;quot;generateXmlObjects&amp;quot;: false,
            &amp;quot;generateAbstractProperties&amp;quot;: false,
            &amp;quot;generateAbstractSchemas&amp;quot;: true,
            &amp;quot;ignoreObsoleteProperties&amp;quot;: false,
            &amp;quot;allowReferencesWithProperties&amp;quot;: false,
            &amp;quot;excludedTypeNames&amp;quot;: [],
            &amp;quot;serviceHost&amp;quot;: null,
            &amp;quot;serviceBasePath&amp;quot;: null,
            &amp;quot;serviceSchemes&amp;quot;: [],
            &amp;quot;infoTitle&amp;quot;: &amp;quot;My Title&amp;quot;,
            &amp;quot;infoDescription&amp;quot;: null,
            &amp;quot;infoVersion&amp;quot;: &amp;quot;1.0.0&amp;quot;,
            &amp;quot;documentTemplate&amp;quot;: null,
            &amp;quot;documentProcessorTypes&amp;quot;: [],
            &amp;quot;operationProcessorTypes&amp;quot;: [],
            &amp;quot;typeNameGeneratorType&amp;quot;: null,
            &amp;quot;schemaNameGeneratorType&amp;quot;: null,
            &amp;quot;contractResolverType&amp;quot;: null,
            &amp;quot;serializerSettingsType&amp;quot;: null,
            &amp;quot;useDocumentProvider&amp;quot;: true,
            &amp;quot;documentName&amp;quot;: &amp;quot;v1&amp;quot;,
            &amp;quot;aspNetCoreEnvironment&amp;quot;: null,
            &amp;quot;createWebHostBuilderMethod&amp;quot;: null,
            &amp;quot;startupType&amp;quot;: null,
            &amp;quot;allowNullableBodyParameters&amp;quot;: true,
            &amp;quot;output&amp;quot;: null,
            &amp;quot;outputType&amp;quot;: &amp;quot;Swagger2&amp;quot;,
            &amp;quot;assemblyPaths&amp;quot;: [
                &amp;quot;bin/$(Configuration)/netcoreapp3.1/Cheeze.Store.dll&amp;quot;
            ],
            &amp;quot;assemblyConfig&amp;quot;: null,
            &amp;quot;referencePaths&amp;quot;: [],
            &amp;quot;useNuGetCache&amp;quot;: true
        }
    },
    ...
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Remove the &lt;code&gt;openApiToTypeScriptClient&lt;/code&gt; and &lt;code&gt;openApiToCSharpController&lt;/code&gt; sections from within the &lt;code&gt;codeGenerators&lt;/code&gt; section of each file.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Modify the &lt;code&gt;openApiToCSharpClient&lt;/code&gt; section to generate C# typed clients from the OpenAPI document. Do this by replacing the &lt;code&gt;openApiToCSharpClient&lt;/code&gt; section with the following (ensuring to replace the &lt;code&gt;className&lt;/code&gt;, &lt;code&gt;namespace&lt;/code&gt; and &lt;code&gt;output&lt;/code&gt; to the correct values for each project):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-json"&gt;{
    ...
    &amp;quot;codeGenerators&amp;quot;: {
        &amp;quot;openApiToCSharpClient&amp;quot;: {
            &amp;quot;clientBaseClass&amp;quot;: null,
            &amp;quot;configurationClass&amp;quot;: null,
            &amp;quot;generateClientClasses&amp;quot;: true,
            &amp;quot;generateClientInterfaces&amp;quot;: true,
            &amp;quot;injectHttpClient&amp;quot;: true,
            &amp;quot;disposeHttpClient&amp;quot;: true,
            &amp;quot;protectedMethods&amp;quot;: [],
            &amp;quot;generateExceptionClasses&amp;quot;: true,
            &amp;quot;exceptionClass&amp;quot;: &amp;quot;ApiException&amp;quot;,
            &amp;quot;wrapDtoExceptions&amp;quot;: true,
            &amp;quot;useHttpClientCreationMethod&amp;quot;: false,
            &amp;quot;httpClientType&amp;quot;: &amp;quot;System.Net.Http.HttpClient&amp;quot;,
            &amp;quot;useHttpRequestMessageCreationMethod&amp;quot;: false,
            &amp;quot;useBaseUrl&amp;quot;: false,
            &amp;quot;generateBaseUrlProperty&amp;quot;: false,
            &amp;quot;generateSyncMethods&amp;quot;: false,
            &amp;quot;exposeJsonSerializerSettings&amp;quot;: false,
            &amp;quot;clientClassAccessModifier&amp;quot;: &amp;quot;public&amp;quot;,
            &amp;quot;typeAccessModifier&amp;quot;: &amp;quot;public&amp;quot;,
            &amp;quot;generateContractsOutput&amp;quot;: false,
            &amp;quot;contractsNamespace&amp;quot;: null,
            &amp;quot;contractsOutputFilePath&amp;quot;: null,
            &amp;quot;parameterDateTimeFormat&amp;quot;: &amp;quot;s&amp;quot;,
            &amp;quot;parameterDateFormat&amp;quot;: &amp;quot;yyyy-MM-dd&amp;quot;,
            &amp;quot;generateUpdateJsonSerializerSettingsMethod&amp;quot;: true,
            &amp;quot;serializeTypeInformation&amp;quot;: false,
            &amp;quot;queryNullValue&amp;quot;: &amp;quot;&amp;quot;,
            &amp;quot;className&amp;quot;: &amp;quot;StoreClient&amp;quot;,
            &amp;quot;operationGenerationMode&amp;quot;: &amp;quot;MultipleClientsFromOperationId&amp;quot;,
            &amp;quot;additionalNamespaceUsages&amp;quot;: [],
            &amp;quot;additionalContractNamespaceUsages&amp;quot;: [],
            &amp;quot;generateOptionalParameters&amp;quot;: false,
            &amp;quot;generateJsonMethods&amp;quot;: false,
            &amp;quot;enforceFlagEnums&amp;quot;: false,
            &amp;quot;parameterArrayType&amp;quot;: &amp;quot;System.Collections.Generic.IEnumerable&amp;quot;,
            &amp;quot;parameterDictionaryType&amp;quot;: &amp;quot;System.Collections.Generic.IDictionary&amp;quot;,
            &amp;quot;responseArrayType&amp;quot;: &amp;quot;System.Collections.Generic.ICollection&amp;quot;,
            &amp;quot;responseDictionaryType&amp;quot;: &amp;quot;System.Collections.Generic.IDictionary&amp;quot;,
            &amp;quot;wrapResponses&amp;quot;: false,
            &amp;quot;wrapResponseMethods&amp;quot;: [],
            &amp;quot;generateResponseClasses&amp;quot;: true,
            &amp;quot;responseClass&amp;quot;: &amp;quot;SwaggerResponse&amp;quot;,
            &amp;quot;namespace&amp;quot;: &amp;quot;Cheeze.Store.Client&amp;quot;,
            &amp;quot;requiredPropertiesMustBeDefined&amp;quot;: true,
            &amp;quot;dateType&amp;quot;: &amp;quot;System.DateTimeOffset&amp;quot;,
            &amp;quot;jsonConverters&amp;quot;: null,
            &amp;quot;anyType&amp;quot;: &amp;quot;object&amp;quot;,
            &amp;quot;dateTimeType&amp;quot;: &amp;quot;System.DateTimeOffset&amp;quot;,
            &amp;quot;timeType&amp;quot;: &amp;quot;System.TimeSpan&amp;quot;,
            &amp;quot;timeSpanType&amp;quot;: &amp;quot;System.TimeSpan&amp;quot;,
            &amp;quot;arrayType&amp;quot;: &amp;quot;System.Collections.Generic.ICollection&amp;quot;,
            &amp;quot;arrayInstanceType&amp;quot;: &amp;quot;System.Collections.ObjectModel.Collection&amp;quot;,
            &amp;quot;dictionaryType&amp;quot;: &amp;quot;System.Collections.Generic.IDictionary&amp;quot;,
            &amp;quot;dictionaryInstanceType&amp;quot;: &amp;quot;System.Collections.Generic.Dictionary&amp;quot;,
            &amp;quot;arrayBaseType&amp;quot;: &amp;quot;System.Collections.ObjectModel.Collection&amp;quot;,
            &amp;quot;dictionaryBaseType&amp;quot;: &amp;quot;System.Collections.Generic.Dictionary&amp;quot;,
            &amp;quot;classStyle&amp;quot;: &amp;quot;Poco&amp;quot;,
            &amp;quot;generateDefaultValues&amp;quot;: true,
            &amp;quot;generateDataAnnotations&amp;quot;: true,
            &amp;quot;excludedTypeNames&amp;quot;: [],
            &amp;quot;excludedParameterNames&amp;quot;: [],
            &amp;quot;handleReferences&amp;quot;: false,
            &amp;quot;generateImmutableArrayProperties&amp;quot;: false,
            &amp;quot;generateImmutableDictionaryProperties&amp;quot;: false,
            &amp;quot;jsonSerializerSettingsTransformationMethod&amp;quot;: null,
            &amp;quot;inlineNamedArrays&amp;quot;: false,
            &amp;quot;inlineNamedDictionaries&amp;quot;: false,
            &amp;quot;inlineNamedTuples&amp;quot;: true,
            &amp;quot;inlineNamedAny&amp;quot;: false,
            &amp;quot;generateDtoTypes&amp;quot;: true,
            &amp;quot;generateOptionalPropertiesAsNullable&amp;quot;: false,
            &amp;quot;templateDirectory&amp;quot;: null,
            &amp;quot;typeNameGeneratorType&amp;quot;: null,
            &amp;quot;propertyNameGeneratorType&amp;quot;: null,
            &amp;quot;enumNameGeneratorType&amp;quot;: null,
            &amp;quot;serviceHost&amp;quot;: null,
            &amp;quot;serviceSchemes&amp;quot;: null,
            &amp;quot;output&amp;quot;: &amp;quot;$(Target)/StoreClient.Generated.cs&amp;quot;
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Edit the project file to use the configuration file to generate the typed client for each project (replacing &lt;code&gt;[PROJECT_NAME]&lt;/code&gt; with &lt;code&gt;Cheeze.Store.Client&lt;/code&gt; or &lt;code&gt;Cheeze.Inventory.Client&lt;/code&gt; as appropriate):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-csproj"&gt;&amp;lt;Project Sdk=&amp;quot;Microsoft.NET.Sdk.Web&amp;quot;&amp;gt;
    ...
    &amp;lt;Target Name=&amp;quot;NSwag&amp;quot; AfterTargets=&amp;quot;Build&amp;quot;&amp;gt;
        &amp;lt;Copy SourceFiles=&amp;quot;&amp;#64;(ReferencePath)&amp;quot; DestinationFolder=&amp;quot;$(OutDir)References&amp;quot; /&amp;gt;
        &amp;lt;Exec Condition=&amp;quot;'$(NSwag)'=='true'&amp;quot; Command=&amp;quot;$(NSwagExe_Core31) run nswag.json /variables:Configuration=$(Configuration),OutDir=$(OutDir),Target=$(SolutionDir)[PROJECT_NAME]&amp;quot; /&amp;gt;
        &amp;lt;RemoveDir Directories=&amp;quot;$(OutDir)References&amp;quot; /&amp;gt;
    &amp;lt;/Target&amp;gt;
    ...
&amp;lt;/Project&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Add a &lt;code&gt;build.ps1&lt;/code&gt; file to the &lt;code&gt;src&lt;/code&gt; directory containing:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;$solutionDir = Get-Location
dotnet build .\Cheeze.Store\Cheeze.Store.csproj /p:NSwag=true /p:SolutionDir=$solutionDir
dotnet build .\Cheeze.Inventory\Cheeze.Inventory.csproj /p:NSwag=true /p:SolutionDir=$solutionDir
dotnet build .\Cheeze.Store.Client\Cheeze.Store.Client.csproj
dotnet build .\Cheeze.Inventory.Client\Cheeze.Inventory.Client.csproj
dotnet build .\Cheeze.Graph\Cheeze.Graph.csproj
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;The build script is required to ensure projects are built in the correct order and to ensure we don't try to regenerate our typed clients while containerizing our projects (see below).&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Adding &lt;code&gt;Newtonsoft.Json&lt;/code&gt; and &lt;code&gt;System.ComponentModel.Annotations&lt;/code&gt; packages to the client projects:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;dotnet add .\Cheeze.Store.Client\Cheeze.Store.Client.csproj package Newtonsoft.Json
dotnet add .\Cheeze.Store.Client\Cheeze.Store.Client.csproj package System.ComponentModel.Annotations
dotnet add .\Cheeze.Inventory.Client\Cheeze.Inventory.Client.csproj package Newtonsoft.Json
dotnet add .\Cheeze.Inventory.Client\Cheeze.Inventory.Client.csproj package System.ComponentModel.Annotations
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Build!&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;.\build.ps1
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;If all the above is correct, we should have a successful build and see that &lt;code&gt;StoreClient.Generated.cs&lt;/code&gt; and &lt;code&gt;InventoryClient.Generated.cs&lt;/code&gt; appear in the &lt;code&gt;Cheeze.Store&lt;/code&gt; and &lt;code&gt;Cheeze.Inventory&lt;/code&gt; directories respectively.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="graphql-service"&gt;GraphQL Service&lt;/h2&gt;
&lt;p&gt;Finally we can get around to implementing our GraphQL service. We'll undertake the following steps to get this service running as expected:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Create an object model of our DTOs and Graph Query as POCO objects&lt;/li&gt;
&lt;li&gt;Build a GraphQL schema from these objects using the SchemaBuilder&lt;/li&gt;
&lt;li&gt;Configure the .Net Core host to correctly run the GraphQL Service&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;First however, as we're not currently able to use Schema Stitching, we need to perform mapping between the &lt;code&gt;Cheeze.Store&lt;/code&gt; and &lt;code&gt;Cheeze.Graph&lt;/code&gt; schemas ourselves. To facilitate this, we're going to use &lt;a href="https://automapper.org/"&gt;Automapper&lt;/a&gt; so we need to add the package to &lt;code&gt;Cheeze.Graph&lt;/code&gt; using:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;dotnet add .\Cheeze.Graph\Cheeze.Graph.csproj package AutoMapper
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="object-model"&gt;Object Model&lt;/h3&gt;
&lt;p&gt;Add a &lt;code&gt;Cheese.cs&lt;/code&gt; to &lt;code&gt;Cheeze.Graph&lt;/code&gt; with the following content:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using System;

namespace Cheeze.Graph
{
    public class Cheese
    {
        public Guid Id { get; set; }

        public Uri? Uri { get; set; }

        public string Name { get; set; } = string.Empty;

        public string Description { get; set; } = string.Empty;

        public decimal Price { get; set; }

        public int Available { get; set; }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;There are two things to note here:&lt;/p&gt;
&lt;p&gt;Firstly, the Cheese type is very similar - &lt;strong&gt;but not identical&lt;/strong&gt; - to the Cheese type declared in &lt;code&gt;Cheeze.Store&lt;/code&gt;. Crucially this Cheese type has an Available property which is not in the data provided by &lt;code&gt;Cheeze.Store&lt;/code&gt; and instead will be populated by dependent calls to &lt;code&gt;Cheeze.Inventory&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Secondly this type does not implement any behaviour, it merely declares the shape (i.e. schema) of the data that can be provided by this service. All GraphQL functionality is provided via the SchemaBuilder and associated Resolvers as see below.&lt;/p&gt;
&lt;h3 id="schema-resolvers"&gt;Schema &amp;amp; Resolvers&lt;/h3&gt;
&lt;p&gt;Add a &lt;code&gt;Schema.cs&lt;/code&gt; file to &lt;code&gt;Cheeze.Graph&lt;/code&gt; with the following content:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using AutoMapper;
using HotChocolate;
using HotChocolate.Resolvers;
using HotChocolate.Types;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Cheeze.Graph
{
    public static class Schema
    {
        private static readonly IMapper Mapper;

        static Schema()
        {
            var mapping = new MapperConfiguration(
                configuration =&amp;gt;
                {
                    configuration.CreateMap&amp;lt;Cheeze.Store.Client.Cheese, Cheese&amp;gt;()
                        .ForMember(cheese =&amp;gt; cheese.Available, options =&amp;gt; options.Ignore());
                }
            );

            Mapper = mapping.CreateMapper();
        }
        private static async Task&amp;lt;IReadOnlyDictionary&amp;lt;Guid, int&amp;gt;&amp;gt; FetchInventory(this Cheeze.Inventory.Client.IInventoryClient inventoryClient, IReadOnlyList&amp;lt;Guid&amp;gt; cheeses)
        {
            var response = await inventoryClient.PostAsync(new Cheeze.Inventory.Client.Request { Ids = cheeses.ToArray() });

            return cheeses
                .GroupJoin(response, id =&amp;gt; id, available =&amp;gt; available.Id, (id, available) =&amp;gt; (Id: id, Available: available.Select(a =&amp;gt; a.Quantity).FirstOrDefault()))
                .ToDictionary(tuple =&amp;gt; tuple.Id, tuple =&amp;gt; tuple.Available);
        }

        private static async Task&amp;lt;int&amp;gt; ResolveInventory(this IResolverContext context)
        {
            var dataLoader = context.BatchDataLoader&amp;lt;Guid, int&amp;gt;(
                &amp;quot;availableById&amp;quot;,
                context.Service&amp;lt;Cheeze.Inventory.Client.IInventoryClient&amp;gt;().FetchInventory);

            return await dataLoader.LoadAsync(context.Parent&amp;lt;Cheese&amp;gt;().Id, context.RequestAborted);
        }

        private static async Task&amp;lt;IEnumerable&amp;lt;Cheese&amp;gt;&amp;gt; ResolveCheeses(this IResolverContext context)
        {
            var results = await context.Service&amp;lt;Cheeze.Store.Client.IStoreClient&amp;gt;().GetAsync();

            return results.Select(source =&amp;gt; Mapper.Map&amp;lt;Cheeze.Store.Client.Cheese, Cheese&amp;gt;(source));
        }

        public static ISchemaBuilder Build()
        {
            return SchemaBuilder.New()
                .AddQueryType(
                    typeDescriptor =&amp;gt; typeDescriptor
                        .Field(&amp;quot;Cheese&amp;quot;)
                            .Resolver(context =&amp;gt; context.ResolveCheeses()))
                .AddObjectType&amp;lt;Cheese&amp;gt;(
                    cheese =&amp;gt; cheese
                        .Field(f =&amp;gt; f.Available)
                            .Resolver(context =&amp;gt; context.ResolveInventory()))
                .ModifyOptions(o =&amp;gt; o.RemoveUnreachableTypes = true);
        }
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Amazingly, this single class implements &lt;strong&gt;all&lt;/strong&gt; the functionality needed to provide a GraphQL compliant endpoint in ~70 SLoC. There is rather a lot going on though so lets break it down starting with the static public method &lt;code&gt;Build&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;Build&lt;/code&gt; method uses (and returns) a &lt;code&gt;SchemaBuilder&lt;/code&gt; to define the schema that will be presented through the GraphQL endpoint. This comprises two main elements: the &lt;code&gt;QueryType&lt;/code&gt; - provided by the &lt;code&gt;.AddQueryType()&lt;/code&gt; fluent method - and the &lt;code&gt;Cheese&lt;/code&gt; object type - provided by the &lt;code&gt;.AddObjectType&amp;lt;Cheese&amp;gt;()&lt;/code&gt; fluent method. We'll dig into each of these here.&lt;/p&gt;
&lt;p&gt;The &lt;code&gt;AddQueryType&lt;/code&gt; defines the types of queries that can be executed by this GraphQL endpoint in a purely code-first manner. The code above adds a field &lt;code&gt;Cheese&lt;/code&gt; which, when used in the query, uses the &lt;code&gt;ResolveCheeses()&lt;/code&gt; extension method to provide data for the query. The &lt;code&gt;ResolveCheeses()&lt;/code&gt; extension method uses the &lt;code&gt;IResolverContext&lt;/code&gt; to retrieve the typed client for the &lt;code&gt;Cheeze.Store&lt;/code&gt; ReST endpoint and calls the &lt;code&gt;GetAsync()&lt;/code&gt; method on it. Finally, AutoMapper is used to map between the &lt;code&gt;Cheeze.Store.Client.Cheese&lt;/code&gt; and &lt;code&gt;Cheeze.Graph.Cheese&lt;/code&gt; types, specifically ignoring the &lt;code&gt;Available&lt;/code&gt; property of &lt;code&gt;Cheeze.Graph.Cheese&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Similarly, the &lt;code&gt;AddObjectType&amp;lt;Cheese&amp;gt;&lt;/code&gt; method intercepts objects of type &lt;code&gt;Cheese&lt;/code&gt; and uses the &lt;code&gt;ResolveInventory()&lt;/code&gt; extension method to populate the &lt;code&gt;Available&lt;/code&gt; property. This time however, a &lt;code&gt;BatchDataLoader&lt;/code&gt; is used from within the extension method to neatly avoid the &lt;a href="https://itnext.io/what-is-the-n-1-problem-in-graphql-dd4921cb3c1a"&gt;N+1 problem&lt;/a&gt;.&lt;/p&gt;
&lt;h3 id="service-binding-configuration"&gt;Service Binding &amp;amp; Configuration&lt;/h3&gt;
&lt;p&gt;Finally we need to bind required service and configuration types so, again in &lt;code&gt;Cheeze.Graph&lt;/code&gt; add the following:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;A &lt;code&gt;Configuration.cs&lt;/code&gt; file in an &lt;code&gt;Inventory&lt;/code&gt; folder containing:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using System;

namespace Cheeze.Graph.Inventory
{
    public class Configuration
    {
        public Uri BaseAddress { get; set; } = new Uri(&amp;quot;https://inventory&amp;quot;);
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A &lt;code&gt;Configuration.cs&lt;/code&gt; file in a &lt;code&gt;Store&lt;/code&gt; folder containing:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using System;

namespace Cheeze.Graph.Store
{
    public class Configuration
    {
        public Uri BaseAddress { get; set; } = new Uri(&amp;quot;https://store&amp;quot;);
    }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In &lt;code&gt;Program.cs&lt;/code&gt; refactor &lt;code&gt;CreateWebHostBuilder&lt;/code&gt; method to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;public static IWebHostBuilder CreateWebHostBuilder(string[] args)
{
    return WebHost
        .CreateDefaultBuilder(args)
        .ConfigureAppConfiguration((hostingContext, config) =&amp;gt; config.AddEnvironmentVariables(&amp;quot;Cheeze:Graph:&amp;quot;))
        .ConfigureServices(
            (hostContext, services) =&amp;gt;
            {
                services.AddOptions&amp;lt;Store.Configuration&amp;gt;().Bind(hostContext.Configuration.GetSection(&amp;quot;Store&amp;quot;));
                services.AddOptions&amp;lt;Inventory.Configuration&amp;gt;().Bind(hostContext.Configuration.GetSection(&amp;quot;Inventory&amp;quot;));
            })
        .UseStartup&amp;lt;Startup&amp;gt;();
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And add the two required usings:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Here we're adding configuration from Environment Variables (prefixed with &lt;code&gt;Cheeze:Graph&lt;/code&gt;) to our application and binding this configuration to the types added above.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In &lt;code&gt;Startup.cs&lt;/code&gt; refactor the &lt;code&gt;ConfigureServices&lt;/code&gt; method to the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;public void ConfigureServices(IServiceCollection services)
{
    services.AddHttpClient&amp;lt;Cheeze.Store.Client.IStoreClient, Cheeze.Store.Client.StoreClient&amp;gt;(
        (serviceProvider, httpClient) =&amp;gt; httpClient.BaseAddress = serviceProvider.GetRequiredService&amp;lt;IOptions&amp;lt;Store.Configuration&amp;gt;&amp;gt;().Value.BaseAddress
    );

    services.AddHttpClient&amp;lt;Cheeze.Inventory.Client.IInventoryClient, Cheeze.Inventory.Client.InventoryClient&amp;gt;(
        (serviceProvider, httpClient) =&amp;gt; httpClient.BaseAddress = serviceProvider.GetRequiredService&amp;lt;IOptions&amp;lt;Inventory.Configuration&amp;gt;&amp;gt;().Value.BaseAddress
    );

    // this enables you to use DataLoader in your resolvers.
    services.AddDataLoaderRegistry();

    // Add GraphQL Services
    services.AddGraphQL(Schema.Build());
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And again add the required using:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-cs"&gt;using Microsoft.Extensions.Options;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Here we're binding the typed clients for &lt;code&gt;Cheeze.Store&lt;/code&gt; and &lt;code&gt;Cheeze.Inventory&lt;/code&gt; and ensuring they're configured with the appropriate base addresses. Finally we're using the &lt;code&gt;Schema.Build()&lt;/code&gt; method to provide the GraphQL schema to the &lt;code&gt;services.AddGraphQL()&lt;/code&gt; method.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;And that - as the say - is that. If we run our build script now we should find everything builds successfully.&lt;/p&gt;
&lt;h2 id="containerization"&gt;Containerization&lt;/h2&gt;
&lt;p&gt;Now, rather than configuring and spinning up all the services manually, we'll simplify our debug/deploy loop by containerizing our services and using &lt;a href="https://docs.docker.com/compose/"&gt;Docker Compose&lt;/a&gt; to do the job for us. From Visual Studio this would be a simple case of using the &amp;quot;Add &amp;gt; Docker Support&amp;quot; and &amp;quot;Add &amp;gt; Container Orchestration Support&amp;quot; options from the &amp;quot;Solution Explorer&amp;quot; as described &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/docker/visual-studio-tools-for-docker?view=aspnetcore-3.1"&gt;here&lt;/a&gt;. However, as we've so far done pretty much everything from the command-line, lets try carrying that on.&lt;/p&gt;
&lt;h3 id="docker-support"&gt;Docker Support&lt;/h3&gt;
&lt;p&gt;First we'll add docker support to each of the top-level projects by using the standard multi-stage dockerfile template. I was unable to find an official source for this template so uploaded a version to my &lt;a href="https://github.com/ibebbs/DotnetCliDocker"&gt;DotnetCliDocker&lt;/a&gt; repository which we're be using here.&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;&amp;#64;(Invoke-WebRequest &amp;quot;https://raw.githubusercontent.com/ibebbs/DotnetCliDocker/master/Dockerfile3_1&amp;quot; | Select-Object -ExpandProperty Content) -replace &amp;quot;\(ProjectName\)&amp;quot;,&amp;quot;Cheeze.Graph&amp;quot; | Set-Content .\Cheeze.Graph\Dockerfile
&amp;#64;(Invoke-WebRequest &amp;quot;https://raw.githubusercontent.com/ibebbs/DotnetCliDocker/master/Dockerfile3_1&amp;quot; | Select-Object -ExpandProperty Content) -replace &amp;quot;\(ProjectName\)&amp;quot;,&amp;quot;Cheeze.Store&amp;quot; | Set-Content .\Cheeze.Store\Dockerfile
&amp;#64;(Invoke-WebRequest &amp;quot;https://raw.githubusercontent.com/ibebbs/DotnetCliDocker/master/Dockerfile3_1&amp;quot; | Select-Object -ExpandProperty Content) -replace &amp;quot;\(ProjectName\)&amp;quot;,&amp;quot;Cheeze.Inventory&amp;quot; | Set-Content .\Cheeze.Inventory\Dockerfile
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 id="container-orchestration-support"&gt;Container Orchestration Support&lt;/h3&gt;
&lt;p&gt;Now lets add a couple of files so that we can use Docker Compose to run our microservice environment&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Add a &lt;code&gt;docker-compose.yml&lt;/code&gt; file to the &lt;code&gt;src&lt;/code&gt; directory containing:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-yaml"&gt;version: '3.4'

services:
cheeze.store:
    image: ${DOCKER_REGISTRY-}cheezestore
    build:
    context: .
    dockerfile: Cheeze.Store/Dockerfile

cheeze.inventory:
    image: ${DOCKER_REGISTRY-}cheezeinventory
    build:
    context: .
    dockerfile: Cheeze.Inventory/Dockerfile

cheeze.graph:
    image: ${DOCKER_REGISTRY-}cheezegraph
    build:
    context: .
    dockerfile: Cheeze.Graph/Dockerfile
    ports:
    - &amp;quot;8081:80&amp;quot;
    environment:
    - Cheeze__Graph__Store__BaseAddress=http://cheeze.store
    - Cheeze__Graph__Inventory__BaseAddress=http://cheeze.inventory
    depends_on:
    - cheeze.store
    - cheeze.inventory
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Add a &lt;code&gt;.dockerignore&lt;/code&gt; to the &lt;code&gt;src&lt;/code&gt; directory by running:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;&amp;#64;(Invoke-WebRequest &amp;quot;https://raw.githubusercontent.com/ibebbs/DotnetCliDocker/master/.dockerignore&amp;quot;) | Set-Content .\.dockerignore
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Build and run our containers&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;docker-compose build
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;This might take some time but should result in a successful build afterwhich you can run the containers using:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-powershell"&gt;docker-compose run
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="testing"&gt;Testing&lt;/h2&gt;
&lt;p&gt;With our composed containers running, open up a browser and navigate to &lt;code&gt;http://localhost:8081/playground&lt;/code&gt;. You should see something like the following:&lt;/p&gt;
&lt;img src="/Content/LessReSTMoreHotChocolate/Playground.png" class="img-responsive" style="margin: auto; width:600px; margin-top: 6px; margin-bottom: 6px;" alt="GraphQL Playground"&gt;
&lt;p&gt;The two tabs on the right hand side of the screen - &amp;quot;Docs&amp;quot; &amp;amp; &amp;quot;Schema&amp;quot; - allow you to examine the GraphQL endpoint to determine the queries you can execute and the content the service is able to receive. As we've got very little data in our services, we'll just use a basic query to retrieve the data we've defined. In the left pain of the playground (underneath &amp;quot;# Write your query or mutation here&amp;quot;) enter the following:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-graphql"&gt;{
  Cheese {
    id,
    name,
    available
  }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;Note: As you're typing this, you should see that auto-complete is available and extremely quick.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Finally, once the query is complete, click the &amp;quot;Play&amp;quot; button in the centre of the screen. If everything has compiled and build correctly, you should see the following in the right hand pane:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;{
  &amp;quot;data&amp;quot;: {
    &amp;quot;Cheese&amp;quot;: [
      {
        &amp;quot;id&amp;quot;: &amp;quot;1468841a-5fbe-41c5-83b3-ab136b7ae70c&amp;quot;,
        &amp;quot;name&amp;quot;: &amp;quot;API Cheese&amp;quot;,
        &amp;quot;available&amp;quot;: 9
      }
    ]
  }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;And there we go. We've successfully used GraphQL to integrate and intelligently query two independent ReST services. Nice!&lt;/p&gt;
&lt;h2 id="conclusion"&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;If you're hitting up against some of the limitations of ReST - particularly for mobile client applications - I would very much recommend taking a look at GraphQL and &lt;a href="https://chillicream.com/"&gt;ChilliCream's&lt;/a&gt; Hot Chocolate library in particular. Hot Chocolate makes setting up a GraphQL endpoint incredibly easy, and it's code-first capabilities allow you to concentrate on modelling a domain that works for you and your customers rather than the GraphQL framework.&lt;/p&gt;
&lt;p&gt;Hot Chocolate is under &lt;strong&gt;very&lt;/strong&gt; heavy development with fantastic new features getting added at an amazing cadence (hopefully ReST based Schema Stitching will bubble to the top of ChilliCream's priority list soon). Furthermore support for this library is excellent; in point of fact, while authoring this article I posted a question in their Slack workspace only to get it answered by Michael Steib himself just moments later and which culminated in a discussion that lasted the better part of an hour.&lt;/p&gt;
&lt;p&gt;ChilliCream also have a &lt;a href="https://www.nuget.org/packages/StrawberryShake/11.0.0-preview.75"&gt;client-side library&lt;/a&gt; for GraphQL called &lt;a href="https://chillicream.com/blog/2019/11/25/strawberry-shake_2"&gt;&amp;quot;Strawberry Shake&amp;quot;&lt;/a&gt;. While currently in alpha it looks extremely promising for creating strongly-typed GraphQL clients as it will - apparently - provide &lt;a href="https://grpc.io/blog/grpc-dotnet-build/"&gt;&amp;quot;protobuff style&amp;quot;&lt;/a&gt; code generation for the client direct from a GraphQL service's schema.&lt;/p&gt;
&lt;p&gt;Lastly, if you are authoring ReST endpoints, I would very much recommend considering &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/getting-started-with-nswag?view=aspnetcore-3.1&amp;amp;tabs=visual-studio"&gt;NSwag&lt;/a&gt; over &lt;a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-3.1&amp;amp;tabs=visual-studio"&gt;Swashbuckle&lt;/a&gt;. For me, NSwag's integration is a bit nicer than Swashbuckle and has a greater focus on the OpenAPI toolchain. Furthermore NSwag's tooling is first class allowing you to generate OpenAPI documents and/or client side libraries (in a number of languages) using a variety of tools, not least of which being the MSBuild target we used here.&lt;/p&gt;
&lt;p&gt;All code for from this post can be found in my &lt;a href="https://github.com/ibebbs/Cheeze"&gt;&amp;quot;Cheeze&amp;quot;&lt;/a&gt; repository on GitHub.&lt;/p&gt;
&lt;p&gt;As always, if you have any questions or comments on the above or would like to discuss any point further, please don't hesitate to contact me using any of the links below or from my &lt;a href="https://ian.bebbs.co.uk/about"&gt;about page&lt;/a&gt;.&lt;/p&gt;
</content:encoded>
		</item>
		<item>
			<title>Network Booting Many Raspberry Pis</title>
			<link>http://ian.bebbs.co.uk/posts/NetworkBootingManyRaspberryPis</link>
			<description>&lt;p&gt;This is just a short post - mostly for my own benefit - on how to network boot multiple Raspberry Pis from an x86 Linux Server. While this has been covered &lt;a href="https://hackaday.com/2019/11/11/network-booting-the-pi-4/"&gt;many&lt;/a&gt; &lt;a href="https://hackaday.com/2018/10/08/hack-my-house-running-raspberry-pi-without-an-sd-card/"&gt;times&lt;/a&gt; in &lt;a href="https://www.raspberrypi.org/documentation/hardware/raspberrypi/bootmodes/net_tutorial.md"&gt;other&lt;/a&gt; &lt;a href="https://github.com/raspberrypi/rpi-eeprom/blob/master/firmware/raspberry_pi4_network_boot_beta.md"&gt;posts&lt;/a&gt; none of them worked for me "out of the box". Here's what does.&lt;/p&gt;</description>
			<guid>http://ian.bebbs.co.uk/posts/NetworkBootingManyRaspberryPis</guid>
			<pubDate>Thu, 02 Jan 2020 00:00:00 GMT</pubDate>
			<content:encoded>&lt;h2 id="intro"&gt;Intro&lt;/h2&gt;
&lt;p&gt;This is just a short post - mostly for my own benefit - on how to network boot multiple Raspberry Pis from an x86 Linux Server. While this has been covered &lt;a href="https://hackaday.com/2019/11/11/network-booting-the-pi-4/"&gt;many&lt;/a&gt; &lt;a href="https://hackaday.com/2018/10/08/hack-my-house-running-raspberry-pi-without-an-sd-card/"&gt;times&lt;/a&gt; in &lt;a href="https://www.raspberrypi.org/documentation/hardware/raspberrypi/bootmodes/net_tutorial.md"&gt;other&lt;/a&gt; &lt;a href="https://github.com/raspberrypi/rpi-eeprom/blob/master/firmware/raspberry_pi4_network_boot_beta.md"&gt;posts&lt;/a&gt; none of them worked for me &amp;quot;out of the box&amp;quot;. Here's what does.&lt;/p&gt;
&lt;h2 id="infrastructure"&gt;Infrastructure&lt;/h2&gt;
&lt;p&gt;I will be using the following components&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Hyper-V Virtual Machine running Raspberry Pi Desktop (aka Debian Buster with Raspberry Pi Desktop) downloaded from &lt;a href="https://www.raspberrypi.org/downloads/raspberry-pi-desktop/"&gt;here&lt;/a&gt; as the network boot server.&lt;/li&gt;
&lt;li&gt;Multiple Raspberry Pi 3B+ (the non-plus Raspberry Pi 3B requires &lt;a href="https://www.raspberrypi.org/documentation/hardware/raspberrypi/bootmodes/net_tutorial.md"&gt;additional steps&lt;/a&gt;) as network boot clients&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="requirements"&gt;Requirements&lt;/h2&gt;
&lt;p&gt;The &lt;a href="https://www.raspberrypi.org/documentation/hardware/raspberrypi/bootmodes/net_tutorial.md"&gt;official Raspberry Pi Network Boot instructions&lt;/a&gt; assume you're using a Raspberry Pi as the network boot server and can therefore &amp;quot;copy&amp;quot; a Raspbian installation from an SD Card that has been installed on the network boot client Raspberry Pi. As I want to use an Linux server - running in a virtualised environment no less - I will be using additional steps from Hackaday's excellent article on &lt;a href="https://hackaday.com/2019/11/11/network-booting-the-pi-4/"&gt;Network Booting The Pi 4&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Additionally, while each of the network boot client Raspberry Pi's will be running Raspbian Buster Lite, they will be used for different purposes so must run a unique Raspbian installation.&lt;/p&gt;
&lt;h2 id="steps"&gt;Steps&lt;/h2&gt;
&lt;h3 id="network-boot-server"&gt;Network Boot Server&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Create a virtual machine and install Debian Buster with Raspberry Pi Desktop. I will not cover instructions for doing this here as there are many virtualisation engines and instructions for each would be different; suffice to say I used a Gen 1 Hyper-V instance on Windows Server 2016 with 4 virtual cores, 8Gb of RAM and 64Gb of disk-space. Furthermore, after installation, I enabled SSH and used SSH to execute the following.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Install required software using the following command:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo apt-get install unzip kpartx dnsmasq nfs-kernel-server
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Make a directory to contain the first network boot client image:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;sudo mkdir -p /nfs/raspi1
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Download and unzip the latest Raspbian Buster Lite image:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;wget https://downloads.raspberrypi.org/raspbian_lite/images/raspbian_lite-2019-09-30/2019-09-26-raspbian-buster-lite.zip
unzip 2019-09-26-raspbian-buster-lite.zip
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Mount the Raspbian Buster Lite image to known locations:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo kpartx -a -v 2019-09-26-raspbian-buster.img
mkdir rootmnt
mkdir bootmnt
sudo mount /dev/mapper/loop0p2 rootmnt/
sudo mount /dev/mapper/loop0p1 bootmnt/
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Copy the Raspbian Buster Lite image to the network boot client image directory created above:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo cp -a rootmnt/* /nfs/raspi1/
sudo cp -a bootmnt/* /nfs/raspi1/boot/
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Ensure the network boot client image doesn't attempt to look for filesystems on the SD Card:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo sed -i /UUID/d /nfs/raspi1/etc/fstab
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Replace the boot command in the network boot client image to boot from a network share. Ensure you replace [IP Address] with the IP address of your network boot server (note the &lt;code&gt;modprobe.blacklist&lt;/code&gt; is required to successfully boot the Raspberry Pi 3B+ as described &lt;a href="https://raspberrypi.stackexchange.com/a/105886"&gt;here&lt;/a&gt;):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;echo &amp;quot;console=serial0,115200 console=tty root=/dev/nfs nfsroot=[IP Address]:/nfs/raspi1,vers=3 rw ip=dhcp rootwait elevator=deadline modprobe.blacklist=bcm2835_v4l2&amp;quot; | sudo tee /nfs/raspi1/boot/cmdline.txt
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Enable SSH in the network boot client image:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo touch /nfs/raspi1/boot/ssh
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Create a network share containing the network boot client image:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;echo &amp;quot;/nfs/raspi1 *(rw,sync,no_subtree_check,no_root_squash)&amp;quot; | sudo tee -a /etc/exports
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Create a TrivialFTP folder containing boot code for all network boot clients&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo mkdir /tftpboot
sudo cp /nfs/raspi1/boot/bootcode.bin /tftpboot/bootcode.bin
sudo chmod 777 /tftpboot
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Enable and restart &lt;code&gt;rpcbind&lt;/code&gt; and &lt;code&gt;nfs-kernel-server&lt;/code&gt; services:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo systemctl enable rpcbind
sudo systemctl enable nfs-kernel-server
sudo systemctl restart rpcbind
sudo systemctl restart nfs-kernel-server
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reconfigure &lt;code&gt;dnsmasq&lt;/code&gt; to server TFTP files only to Raspberry Pi instances as described here:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;We need to add our settings to the dnsmasq config file, which is where most of the magic happens. Let’s talk about that “proxy” setting. What we’re asking dnsmasq to do is watch for DHCP requests, and rather than respond to those requests directly, wait for the primary DHCP server to assign an IP address. If dnsmasq sees a request for PXE information, it will send additional information to inform the PXE-capable device of the PXE server information. The upside is that this approach lets us support PXE booting without modifying the primary DHCP server.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Be sure to replace [Broadcast Address] with the broadcast address for your network (use &lt;code&gt;ip address | grep brd&lt;/code&gt; to find it):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;echo 'dhcp-range=[Broadcast Address],proxy' | sudo tee -a /etc/dnsmasq.conf
echo 'log-dhcp' | sudo tee -a /etc/dnsmasq.conf
echo 'enable-tftp' | sudo tee -a /etc/dnsmasq.conf
echo 'tftp-root=/tftpboot' | sudo tee -a /etc/dnsmasq.conf
echo 'pxe-service=0,&amp;quot;Raspberry Pi Boot&amp;quot;' | sudo tee -a /etc/dnsmasq.conf
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Enable and restart the &lt;code&gt;dnsmasq&lt;/code&gt; service:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo systemctl enable dnsmasq
sudo systemctl restart dnsmasq
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Find the serial number of the first network boot client:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Tail &lt;code&gt;daemon.log&lt;/code&gt; to :&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo tail -f /var/log/daemon.log
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Plug in a network cable and power cable to the first network boot client. After 10-30 seconds you should see output like this in the daemon.log:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;dnsmasq-dhcp[9460]: 653460281 available DHCP subnet: 192.168.1.255/255.255.255.0&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 vendor class: PXEClient:Arch:00000:UNDI:002001&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 PXE(eth0) b8:27:eb:ec:46:57 proxy&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 tags: eth0&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 broadcast response&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  1 option: 53 message-type  2&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  4 option: 54 server-identifier  192.168.1.102&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  9 option: 60 vendor-class  50:58:45:43:6c:69:65:6e:74&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 17 option: 97 client-machine-id 00:44:44:44:44:44:44:44:44:44:44:44:44:44...&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 32 option: 43 vendor-encap  06:01:03:0a:04:00:50:58:45:09:14:00:00:11...&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/bootsig.bin not found&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/bootcode.bin to 192.168.1.112&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 available DHCP subnet: 192.168.1.255/255.255.255.0&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 vendor class: PXEClient:Arch:00000:UNDI:002001&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 PXE(eth0) b8:27:eb:ec:46:57 proxy&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 tags: eth0&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 broadcast response&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  1 option: 53 message-type  2&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  4 option: 54 server-identifier  192.168.1.102&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  9 option: 60 vendor-class  50:58:45:43:6c:69:65:6e:74&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 17 option: 97 client-machine-id  00:57:46:ec:fe:57:46:ec:fe:57:46:ec:fe:57...&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 32 option: 43 vendor-encap  06:01:03:0a:04:00:50:58:45:09:14:00:00:11...&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/start.elf not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/autoboot.txt not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/config.txt not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/recovery.elf not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/start.elf not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/fixup.dat not found&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;This shows that the first network boot client has successfully made requests to the TFTP service on the network boot service.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Notice the &lt;code&gt;dnsmasq-tftp[9460]: file /tftpboot/feec4657/start.elf not found&lt;/code&gt; line. The 'feec4657' value is the serial number of the network boot client (it will obviously be different for you) and allows you to use different images for different devices.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Create a directory for the first network boot client in the &lt;code&gt;/tftpboot&lt;/code&gt; directory (remembering to replace &lt;code&gt;[SerialNumber]&lt;/code&gt; with the value you found above):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo mkdir /tftpboot/[SerialNumber]
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Copy the boot directory from the &lt;code&gt;/nfs/raspi1&lt;/code&gt; directory to the new directory in &lt;code&gt;/tftpboot&lt;/code&gt;:&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;sudo cp -a /nfs/raspi1/boot/* /tftpboot/[SerialNumber]/
&lt;/code&gt;&lt;/pre&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reconnect the power to the network boot client and it should now boot successfully. If you use &lt;code&gt;sudo tail -f /var/log/daemon.log&lt;/code&gt; again you should see something like the following:&lt;/p&gt;
&lt;blockquote class="blockquote"&gt;
&lt;p&gt;dnsmasq-dhcp[9460]: 653460281 vendor class: PXEClient:Arch:00000:UNDI:002001&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 PXE(eth0) b8:27:eb:ec:46:57 proxy&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 tags: eth0&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 broadcast response&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  1 option: 53 message-type  2&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  4 option: 54 server-identifier  192.168.1.102&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  9 option: 60 vendor-class  50:58:45:43:6c:69:65:6e:74&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 17 option: 97 client-machine-id  00:44:44:44:44:44:44:44:44:44:44:44:44:44...&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 32 option: 43 vendor-encap  06:01:03:0a:04:00:50:58:45:09:14:00:00:11...&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/bootsig.bin not found&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/bootcode.bin to 192.168.1.112&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 available DHCP subnet: 192.168.1.255/255.255.255.0&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 vendor class: PXEClient:Arch:00000:UNDI:002001&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 PXE(eth0) b8:27:eb:ec:46:57 proxy&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 tags: eth0&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 broadcast response&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  1 option: 53 message-type  2&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  4 option: 54 server-identifier  192.168.1.102&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size:  9 option: 60 vendor-class  50:58:45:43:6c:69:65:6e:74&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 17 option: 97 client-machine-id  00:57:46:ec:fe:57:46:ec:fe:57:46:ec:fe:57...&lt;br /&gt;
dnsmasq-dhcp[9460]: 653460281 sent size: 32 option: 43 vendor-encap  06:01:03:0a:04:00:50:58:45:09:14:00:00:11...&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/autoboot.txt not found&lt;br /&gt;
dnsmasq-tftp[9460]: error 0 Early terminate received from 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: failed sending /tftpboot/feec4657/start.elf to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/config.txt to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/recovery.elf not found&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/start.elf to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/fixup.dat to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/recovery.elf not found&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/config.txt to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/dt-blob.bin not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/recovery.elf not found&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/config.txt to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/bootcfg.txt not found&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/cmdline.txt to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/bcm2710-rpi-3-b.dtb to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/config.txt to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/recovery8.img not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/recovery8-32.img not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/recovery7.img not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/recovery.img not found&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/kernel8-32.img not found&lt;br /&gt;
dnsmasq-tftp[9460]: error 0 Early terminate received from 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: failed sending /tftpboot/feec4657/kernel8.img to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: error 0 Early terminate received from 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: failed sending /tftpboot/feec4657/kernel7.img to 192.168.1.112&lt;br /&gt;
dnsmasq-tftp[9460]: file /tftpboot/feec4657/armstub8-32.bin not found&lt;br /&gt;
dnsmasq-tftp[9460]: sent /tftpboot/feec4657/kernel7.img to 192.168.1.112&lt;br /&gt;
dnsmasq-dhcp[9460]: 1754635714 available DHCP subnet: 192.168.1.255/255.255.255.0&lt;br /&gt;
dnsmasq-dhcp[9460]: 1754635714 available DHCP subnet: 192.168.1.255/255.255.255.0&lt;br /&gt;
rpc.mountd[26471]: authenticated mount request from 192.168.1.112:843 for /nfs/raspi1 (/nfs/raspi1)&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Here we can see the following:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;sent /tftpboot/bootcode.bin to 192.168.1.112&lt;/code&gt; -&amp;gt; We successfully sent the &lt;code&gt;bootcode.bin&lt;/code&gt; to the network boot client&lt;/li&gt;
&lt;li&gt;&lt;code&gt;sent /tftpboot/feec4657/[FILENAME] to 192.168.1.112&lt;/code&gt; -&amp;gt; We successfully sent boot files from the device specific &lt;code&gt;/tftpboot&lt;/code&gt; directory to the network boot client&lt;/li&gt;
&lt;li&gt;&lt;code&gt;authenticated mount request from 192.168.1.112:843 for /nfs/raspi1 (/nfs/raspi1)&lt;/code&gt; -&amp;gt; the network boot client mounted to the system drive from the nfs share.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You should now be able to ssh into the network boot client using the following (replacing the [IP Address]) with the one you see):&lt;/p&gt;
&lt;pre&gt;&lt;code class="language-bash"&gt;ssh pi&amp;#64;[IP Address]
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Using the default password of 'raspberry'.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2 id="additional-network-boot-clients"&gt;Additional Network Boot Clients&lt;/h2&gt;
&lt;p&gt;To add additional network boot clients, simply repeat steps 3, 6-10, 15-18 replacing all instances of &lt;code&gt;raspi1&lt;/code&gt; with a new name.&lt;/p&gt;
&lt;h2 id="enjoy"&gt;Enjoy&lt;/h2&gt;
</content:encoded>
		</item>
	</channel>
</rss>