By watching that video I started to search what he used and then stumbled on the official fable elmish repository, but also I found out an another one which is more to my liking and it was SAFE Stack (SAFE stands for Saturn Azure Fable and Elmish). A nice article have been written not long ago by Isaac Abhrams (MSDN Link), so I won’t try to repeat what he already wrote.

In this article, we will simply explore how to create your first application.

Why is it so interesting

Basically, if we use the SAFE Stack, everything is more or less working together. You write your back-end in F#, your front-end in F# and then you can share domain objects and basic functions between the two since all is compiled (or transpiled depending where you look at). If you run all within VS Code, it’s going to be a nice experience since you can save in back or front and then see the new results on the interface (back-end needs a page refresh in such a case or a new call to the server).

When putting breakpoints in the F# file, you can debug your front or backend directly. Also, if you know React JS and it’s plugin in Chrome, you know that you have a time machine for your front-end. It’s also working out of the box, so it’s great to debug or receive an “how to reproduce” script.

Requirements

• NodeJs
• Yarn
• Dotnet Core 3.1
• Crome with Redux extension (Didn’t work with Brave Browser due to some linking from VS Code)

More details at https://safe-stack.github.io/docs/quickstart/

Let’s install SAFE Stack

We’re in March 2020 and it’s .Net Core 3.1 era.

Add a new template to your dotnet new

This will allow you to scaffold template project. The project being quite active, I suggest you to update once in a while by retyping the same command. It will download the latest version while re-installing. (It’s based on a NuGet template package which you can follow).

dotnet new -i SAFE.Template

Create a new folder and then scaffold a first app

Details on command line arguments at https://safe-stack.github.io/docs/template-overview/

dotnet new SAFE --layout fulma-cover --deploy docker

Restore the whole app (takes a bit of time)

dotnet tool restore

Run without VS Code (No nice debugging experience)

Use the following to see if all is working as expected (Takes time on the first launch since it downloads everything).

dotnet fake build --target run

Run within VS Code (Integrated and nice experience)

Open VS Code in the current folder code .. If the extension required to run are not installed it will pop-up the following message. Simply agree

Once installed, if not already go on the debug icon on the left menu bar and look at the targets:

Click on Debug SAFE App. This will start both front-end and back-end server and watch/attach process in VS Code. This will allow to do live debug. After you click and wait, you should have 2 process attached

If you look at your source code from the F# view (default it after you have installed the plugin and opened a folder with FS files). You will see that you have only a few files, while in reality you have many. Simply go in the folder view to see everything. You will also see there’s a shared folder with a file. That file is shared through the FSProj file.

Default view after starting the application

Application created, let’s explore quickly the files

Front-end

All the front-end is build using react/redux. Since it’s the case and it’s quite nice, you can use the time machine to play around.

The code to generate the UX is something that looks like bellow:

let containerBox (model : Model) (dispatch : Msg -> unit) =
    Box.box' [ ]
        [ Field.div [ Field.IsGrouped ]
            [ Control.p [ Control.IsExpanded ]
                [ Input.text
                    [ Input.Disabled true
                      Input.Value (show model) ] ]
              Control.p [ ]
                [ Button.a
                    [ Button.Color IsPrimary
                      Button.OnClick (fun _ -> dispatch Increment) ]
                    [ str "+" ] ]
              Control.p [ ]
                [ Button.a
                    [ Button.Color IsPrimary
                      Button.OnClick (fun _ -> dispatch Decrement) ]
                    [ str "-" ] ] ] ]

Most of the UX is created using Fulma functions (Control.p, Field.div, etc.). In case you would like to have a line break, you could add a line with br []. It’s not because it’s using most likely Fulma that you cannot use the Fable.React.Standard html controls.

The first [] are for the style (class and stuff like that) and the second [] is the content.

The default project put all within one file, but nothing does not allow you to split across multiple file. Even the tutorial SAFE-Dojo is built using a bit more separation of concerns.

Back-end

Like the front-end, I would have loved to have a better separation within the template scaffolding. Right now, only one file is created and it’s up to you to know what to do.

Since the back-end is built around Saturn and Giraffe, you can see at the doc to understand more how to split your files (Which I highly recommend).

Otherwise, for the back-end, it’s the usual. You use your code and favorite libraries. Don’t forget that you can share some logic and types between your back and front.

Next step

I will try to come back on this, but, it will be about moving the file around and going a bit deeper with a bigger scenario. At the moment, the samples on the website are not all up to date and you might experience some issue by running them. That being said, enjoy playing around until the next post.

Thank you for reading!

PHP Rendering State Machine

What I wanted to achieve was to render pages from a state and only test the transition from that state. I didn’t want to create the whole state machine in memory every time I was going to load a script.

Partial State Machine

From there, the idea of a partial state machine came to me.

1. Create states with a unique identifier (I would store it in the session)
2. In those states, create the appropriate transitions and set this unique identifier as the target.
3. Create a factory that can create those states based on those unique ids.

As you can see, if you’re familiar with state machines, it’s nothing too complex to implement and it can be incredibly powerful.

My simple PHP framework here contains my naive implementation of this state machine: https://github.com/angedelamort/php-sun-framework. You can have a look at the sample where I created a simple hangman that implements it.

Example

Using the state machine

// When the script loads in your route controller (if using slim)
// The code was over-simplified to show the idea.

// 1 - initialize the state machine with the current system state.
$sm = new StateMachine($_SESSION['current_state], 'namespace\to\states');

// 2 - Create a context for the state machine
$context = new StateMachineContext($request, $args, []);

// 3 - if needed, call step() to make the state machine test the conditions for each transitions registered in the current state.
$sm->step($context)

// 4 - get the current state (might be the same as the previous one if no conditions were met
$state = $sm->getState();

// 5 - Render the page content using the view and model from the state (since it's a rendering state machine.
$this->view->render($response, $state->getView(), $state-
>getModel($context));

Creating a new state

// I won't go into details here neither, but only show the idea
class MyFirstState extends BaseState {
    private function initStateMachine(): void
    {
        // Create a first condition that will start by testing the final transition. If the condition is true, it will go to the final state.
        $finalTransition = new Transition(FinalState::name(), [$this, 'setLetter'], 'success');
        $finalTransition->addCondition(function (StateMachineContext $context) {
            return self::isCompleted($context->getRequest()->getParsedBodyParam('isCompleted'));
        });
        $this->addTransition($finalTransition);

        // the default transition that does nothing for now.
        $failTransition = new Transition(InitState::name(), [$this, 'showWarning'], 'fail');
        $this->addTransition($failTransition);
    }
}

I would suggest you to go and browse the code for a complete example, but in here, as you can see, when the state will be instantiated by the state machine, only the transitions from the state will be instantiated, and until you do a StateMachine::step(), no new allocation will be done.

Conclusion

I don’t know if this concept is already used in some other framework, but I think in this kind of use case, it’s really useful if you care about performance and loading time. The state machine can be as complex as you want and it will always take the same time to initialize it. The only disadvantage is that it might be hard to get the full overview of what your state machine is doing since it’s not defined all at the same place. But big state machines tend to be incomprehensible anyway if you don’t use proper hierarchy.

I hope you’ll like the idea and use it in your future projects!

Ordering of the filters within Dotnet Core

Basically, most of the time we want to add some behavior within the ActionFilter area. But when it comes to authorization, the best is to stop the entire pipeline as soon as possible. That’s where the IAuthorizationFilter comes into play.

Sample of creating an IAuthorizationFilter

The IAuthorizationFilter only require us one method to implement (i.e.: OnAuthorization). There is also no need of doing any dependency injection for such attribute in order to activate it. The following code is only an example doing nothing special, but you should grasp the idea.

    public sealed class SpecialAuthorizeAttribute : Attribute, IAuthorizationFilter  // or IAsyncAuthorizationFilter  ...
    {
        private const string HEADER_SPECIAL_STUFF = "specialHeaderStuff";

        public void OnAuthorization(AuthorizationFilterContext context)
        {
            if (context != null)
            {
                var authCode = context.HttpContext.Request.Headers[HEADER_SPECIAL_STUFF];
                // Write your logic here.
                if (string.IsNullOrEmpty(authCode))
                {
                    context.Result = new UnauthorizedObjectResult($"{HEADER_SPECIAL_STUFF} is required");
                    return;
                }

                if (!authCode.Equals("IAmValid"))
                {
                    context.Result = new UnauthorizedObjectResult($"{HEADER_SPECIAL_STUFF} is invalid");
                    return;
                }

                // ===== if you're here, it's a success =====
                // DO STUFF
                //
                // ===== you can also use registered services =====
                // var someService = context.HttpContext.RequestServices.GetService<ISomeService>();
            }
        }
    }

Sample of using our custom IAuthorizationFilter

The following code is based on a new WebApi project.

[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{

    // GET api/values/5
    [SpecialAuthorize]
    [HttpGet("{id}")]
    public ActionResult<string> Get(int id)
    {
        return "value";
    }

    // ... other stuff
}

In order to execute, you can simply do a HTTP call using Curl.

nordes@Something:~$ curl https://localhost:5001/api/values/1 --insecure && echo ''
specialHeaderStuff is required
nordes@Something:~$ curl https://localhost:5001/api/values/1 -H 'specialHeaderStuff:IAmInvalid' --insecure && echo ''
specialHeaderStuff is invalid
nordes@Something:~$ curl https://localhost:5001/api/values/1 -H 'specialHeaderStuff:IAmValid' --insecure && echo ''
value

As you can see, when I use a Valid value, it is accepted and then process the Controller-Action. The attribute could also be put on the Controller and in such case will apply that rule to every actions.

Conclusion

As you can see, it’s not something complex to do. What you should ask yourself is if you need to use it? In my case, I had to use it for specific scenario, but most people will probably simply use the policy over the official Authorize attribute given by the framework.

All I wanted to do is simply have a way to connect to my local server on the network and then when receiving a specific request from #Slack. Once received act on it, do a some background work or send reports. This server is obviously not exposed on the internet and reside behind a firewall/proxy. For that reason, I had to be a bit more creative and think out of the box.

In the past I resolved this by using a WebSocket to an Heroku WebSite. It works but it was not perfect. So, I started to look around for a better way to stream a service where I a simple Webhook would be forwarded. In that manner, I could watch a service where it send me back the data. I recently came across Smee.io which use the Server Side Events (SSE) but as a streaming service on the HTTP port. Following is a story of how to make all that working together.

Before going further, I would have loved a solution like
ngrok, but it’s not possible behind a proxy/firewall such as where I work.

Step 1. Grab a new Smee URL

To get the URI, it’s deadly simple. Simply go on Smee.io and then click on create the big button in order to create a new Webhook. Keep the Webhook URL for the next step.

Step 2. Configure the #Slack App/Bot

In that App, we will setup a bot, a hook and a bot for commands.

Configure the App

Open your #Slack page and add an App and if you don’t know how, simply go on https://api.slack.com/ and click on Start Building button and fill the form. It should look like this:

Once you have created your app, you will need to enable “Bot” and give him a name, and then go into the Create a new command page and then add a new command like the following:

Install your app

For that, you go for example in OAuth & Permissions and click install app To Workspace. (Note, you might also have to add a permission File.Upload.User)

You can see the beginning of the token. The 4 first characters indicate what kind of token it is. (Documentation in slack documentation exists for more details)

Step 3. Keep it simple with a sample app in NodeJS or Dotnet Core

Due to some missing implementation in the original repository/server, I’ve added what’s missing in my fork within GitHub. I then use my Heroku account to generate automatically my Docker container with the service. In the future, the issues should be fixed (PR currently waiting to be approved).

The main issue with the Smee.IO website is that it does not yet forward the content if it’s using x-www-form-urlencoded. If you use my branch, for now you will be ok. You can even use it for building your docker service on heroku.

Sample receiving data using NodeJS (index.js + smee-client & express packages)

const SmeeClient = require('smee-client')

/// Smee client (websocket)
const smee = new SmeeClient({
  source: 'https://smee.io/5sFasdasdukH5VQidvpGv', // In case Smee is not updated, please use my repository + an heroku deployment. It is that easy.
  target: 'http://localhost:3000/events',
  logger: console
})
const events = smee.start()
/// WebServer
const express = require('express');
const app = express();
const router = express.Router();

app.use(express.json()) // Instead of body-parser
app.use(express.urlencoded()) // Instead of body-parser
app.use(function(req, res, next) { // Allow CORS if you want.
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

console.log(app)

// from top level path e.g. localhost:3000, this response will be sent
app.get('/', (request, response) => response.send('Hello World'));
app.use('/events', router);

router.post('/', (request, response, next) => {
  console.log(request.body) // Raw data
  response.end();
});

app.listen(3000, () => console.log('Listening on port 3000'));

Sample receiving data using Dotnet Core

NuGet Package: Smee.IO.Client (That library simply do the SSE streaming for smee.io event types for you. So, if you want to use it for different SSE messages types, you will have to adapt the code).

The following code is also available in my Github repo (Demo).

using System;
using System.Threading;
using System.Threading.Tasks;
using Newtonsoft.Json;

namespace Smee.IO.Client.ConsoleDemo
{
    class Program
    {
        private static CancellationTokenSource source;

        static async Task Main(string[] args)
        {
            source = new CancellationTokenSource();
            var token = source.Token;

            // This could also be done automatically, but since we expect some developer to test, let's
            // keep it this way.
            Console.WriteLine("Hi there, please get a valid url on https://smee.io/new (or your own server. In case of this demo, I will use my own instance)");
            Console.Write("Please enter a valid URI because no validation will be made: ");
            var smeeUri = new Uri(Console.ReadLine());

            Console.ForegroundColor = ConsoleColor.DarkRed;
            Console.WriteLine(" > Hit CTRL-C in order to stop everything.");
            Console.WriteLine();
            Console.ResetColor();

            var smeeCli = new SmeeClient(smeeUri);
            smeeCli.OnConnect += (sender, a) => Console.WriteLine($"Connected to Smee.io ({smeeUri}){Environment.NewLine}");
            smeeCli.OnDisconnect += (sender, a) => Console.WriteLine($"Disconnected from Smee.io ({smeeUri}){Environment.NewLine}");
            smeeCli.OnMessage += (sender, smeeEvent) =>
            {
                Console.Write("Message received: ");
                Console.ForegroundColor = ConsoleColor.DarkYellow;
                Console.Write(JsonConvert.SerializeObject(smeeEvent)); // This is a typed object.
                Console.ResetColor();
                Console.WriteLine();
                Console.WriteLine();
            };
            smeeCli.OnPing += (sender, a) => Console.WriteLine($"Ping from Smee{Environment.NewLine}");
            smeeCli.OnError += (sender, e) => Console.WriteLine($"Error was raised (Disconnect/Anything else: {e.Message}{Environment.NewLine}");

            Console.CancelKeyPress += (sender, eventArgs) =>
            {
                source.Cancel();
                eventArgs.Cancel = true;
            };

            await smeeCli.StartAsync(token);
            Console.WriteLine("Finish executing. Thank you!");
        }
    }
}

Example of what you can see in Smee.io console

The command in the previous capture is using a different command, don’t worry. Anything will do.

If the payload is empty, it’s because the content type is application/x-www-form-urlencoded (Current limitation on Smee.io). If you use my branch, as said earlier, you will have the proper data.

We can receive, now let’s send

For this part, you have a few option. I will be using the Dotnet implementation from now on. However, know that you can either use a library or use raw HTTP command using the Slack API. Basically, you will do either HTTP post to a specific URL or to the response_url. The response_url is not something that stays forever. As of now, it stays 30 minutes alive, after that, normally, it won’t be usable. It can be useful to make a small dialog with options that needs to be selected. Here we will now focus to send a simple message back to say “Message received!”.

In Dotnet, but also in NodeJS, some people already have written some libraries (e.g.: SlackAPI). It’s up to you to use them. The following code will be using a raw lazy HTTP post. For that, let’s replace smeeCli.OnMessage += ... by the following (not fully completed, but you get the idea):

smeeCli.OnMessage += (sender, smeeEvent) =>
{
    IncomingMessage msgBody = null;
    if (e.Data.Body != null)
    {
        msgBody = (e.Data.Body as JObject)?.ToObject<IncomingMessage>();
    }

    // If it's for command listener, you could use a strategy pattern.
    // Some code is not in previous block, but you can easily find out what to put in order to make
    // it work.
    _slackHttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _slackConfiguration.BotOAuthToken);
    var msg = new
    {
        token = _slackConfiguration.BotOAuthToken,
        channel = msgBody.UserId,
        // response_type = "ephemeral", // See doc.
        text = "Message received!"
    };
    var content = new StringContent(JsonConvert.SerializeObject(msg), Encoding.UTF8, "application/json");
    var result = await _slackHttpClient.PostAsync("chat.postMessage", content).ConfigureAwait(false);
    // https://api.slack.com/methods/im.open/test (open)
    // send message to specific channel...
    // https://api.slack.com/methods/im.close/test (open)
    // Conversation could be created, but for now let's consider no conversation.
    // e.g.: https://api.slack.com/dialogs#select_elements <== create a select box...
};

What’s next?

• Basically, if you wish, you could also link yourself with Luis.AI, TensorFlow or anything in order to make a Chat Bot more alive and more intelligent.
• Create some command to interact with your servers
• Link your slack account with some of your service in order to be notified when some jobs are completed for example.
• Link/Sync/Send stuff between your #Slack and your MS Team
• …the sky is the limit…

The limits are actually your limits and how secure you want your stuff to be (as usual).

Conclusion

I hope you’ve enjoyed that article ;). I don’t have much time recently, so it’s hard to write more often.

In this article, we will talk about how to call the libgio (GSettings especially) from our Dotnet application. Obviously, this will work only from Linux having the library. People familiar with Linux/Gnome GUI already knows about the libgio by using C or C++, but what about using C#?

In case you want to know more about libgio, I recommend you to go on the Gnome Developer site and as extra resource you can also go on their blog post about the topic (First Step with GSettings). I will repeat myself later, but, the GSettings links configuration to your session using the DBUS session. If you don’t have any session, you will be able to read the default value, but not to modify them.

What are we going to experiment?

We will simply try to get the GSettings and set a new value. It means that we will be using only 3 API’s our of many. The full name of the library being used is libgio-2.0.so and those 3 API’s are:

• g_settings_new : This will attach to the schema
• g_settings_get_int : This will get the value
• g_settings_set_int : This will set the new value

As you can see, the GSettings is a database containing the key-value pairs of strongly typed documents. What is really under the hood for the schema is XML files. The XML is then compiled and the system will be using binary data instead of XML. The normal emplacement for the schemas is in /usr/share/glib-2.0/schemas. Some details about how to create your own schema (Python) can be found on that blog. In case you don’t want to have to specify the path on each request on your custom schema, simply update it by specifying the path directly in the schema element.

In the case you want to test using the command line, you can use the gsettings –help. In case you play in your subsystem (Windows10), you might want to install libglib2.0-bine and dconf-gsettings-backend.

Example of gsettings file for your application

The example bellow, is purely fictional, but if you wish you can look to existing schema available in /usr/share/glib-2.0/schemas/. If the path is part of the schema element, you won’t need to write the path at every request. Also note that the GSettings set won’t work if your dbus is not started for your user. The dbus bridge your settings with your current session.

<schemalist>
  <enum id="com.honosoft.sample.enum">
    <value nick="off" value="1"/>
    <value nick="warming" value="2"/>
    <value nick="on" value="3"/>
  </enum>

  <schema path="/usr/share/glib-2.0/schemas/" id="com.honosoft.sample">
 
    <key type="b" name="my-flag-is-active">
      <default>false</default>
      <summary>I am a boolean flag</summary>
      <description>A description of your boolean</description>
    </key>
    <key type="i" name="threshold">
        <range min="1" max="100"/>
        <default>50</default>
        <summary>Some threshold</summary>
        <description>Some threshold from 1 to 100 about something</description>
    </key>
 
    <key name="list-prime-numbers" type="ai">
      <default>[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43]</default>
      <summary>Some numbers</summary>
      <description>
        List of numbers
      </description>
    </key>
 
    <key name="list-my-pets" type="as">
        <default>['Captain', 'Scrooge', 'Mana', 'Saturn', 'Brutal']</default>
        <summary>Some array of strings</summary>
        <description>List my pet(s) name</description>
    </key>
 
    <key name="current-state" enum="com.honosoft.sample.enum">
        <default>'off'</default>
        <summary>display a state of my application</summary>
        <description>Using the enum allow only a few values pre-defined</description>
    </key>

    <child name="best-book" schema="com.honosoft.sample.book"/>
  </schema>
 
  <schema path="/usr/share/glib-2.0/schemas/" id="com.honosoft.sample.book">
      <key name="title" type="s">
          <default>'Clean Code'</default>
          <summary>Define the book title</summary>
      </key>
      <key name="author" type="s">
          <default>'Robert C. Martin'</default>
          <summary>Define the author name</summary>
      </key>
  </schema>
</schemalist>

After putting your file in the /usr/share/glib-2.0/schemas/ , you need to compile it. To compile and make it available, you have to execute glib-compile-schemas /usr/share/glib-2.0/schemas/ After, you will be able to access the key-value-pair. Note that the command exists simply for debugging purpose. More details can be found on that article.

How do we call such library from C# (Dotnet)

It’s not as complex as you might think. There’s some gotcha, and if you have C/C++ knowledge it will help you to understand those (such as void pointers).

In Dotnet, we have the attribute DllImports which consists of doing the link between the “dll” (or compiled C/C++ .so) and the framework. The best practice for that would be to create a layer of abstraction over the layer mapping such commands. Here’s the 3 command that we will be using mapped in C# using the attribute:

[DllImport("libgio-2.0.so", EntryPoint = "g_settings_new")]
public static extern IntPtr New(string schema);

[DllImport("libgio-2.0.so", EntryPoint = "g_settings_get_int")]
public static extern int GetInt(IntPtr settings, string key);

[DllImport("libgio-2.0.so", EntryPoint = "g_settings_set_int")]
public static extern bool SetInt(IntPtr settings, string key, int value);

As you can see, the IntPtr is a reference to the GSettings schema.

Let’s experiment the whole process

1. Request to the user what schema to retrieve
2. Request to the user what key (int key) to retrieve from the schema
3. Get the int value from the schema + key
4. Request the user to give a new value
5. Set or store the new value

class Program
{
    static void Main(string[] args)
    {
        Console.Write("Schema to look: ");
        var gsettingsSchema = Console.ReadLine();
        Console.Write("Key to look: ");
        var gsettingsKey = Console.ReadLine();

        var gsettings = DemoBindings.GSettings.New(gsettingsSchema);
        var result = DemoBindings.Bindings.GSettings.GetInt(gsettings, gsettingsKey);
        Console.WriteLine($"Value is: {result}");
        Console.Write("Please give me a new value to set: ");
        var newValue = Console.ReadLine();

        var intValue = int.Parse(newValue); // No validation, but you should ;)
        var success = DemoBindings.GSettings.SetInt(gsettings, gsettingsKey, intValue);
        Console.WriteLine($"The new value was set with {success ? string.Empty : "no "} success")
        Console.ReadKey();
    }
}

What does it mean for you?

In the eventually you would write an application that runs in the background triggering some event on the display, you could take advantage of the applications settings (listen even to those) and then maybe trigger some actions. For example:

• Toggle the display of a virtual keyboard on a touch screen.
• Get the current session details (windows)

I hope you’ve enjoyed, even if this is a really short blog.

Let’s consider that you have a touch panel where you would like to handle everything by yourself (touch, move, etc.). How in the world would you get the touch event?

Probably, if you never played around that low in the system, you probably don’t know. Interestingly, there’s the HID (Human Interface Devices). Most of the documentation is available if you search from your favorite engine. What you really want to know, is the binary data structure, once you have that, the fun can begin. In the case you can’t get any description anywhere, I guess the best choice is to do some reverse engineering (not recommended).

In this article we will only analyse a touch event generating a lot of binary data. I don’t want to cover the entire touch/move/etc of the binary data.

Let’s take the touch screen “touch” click event (KeyPress/Release)

Find the Screen Input Device

Within Linux system, there’s plenty of command in order to find your devices. The device files are usually located within the /dev/…. folder. In the past, we used to have all the existing device in the world in that folder. Nowadays, we simply have the bare minimum and that’s great. Most of the devices, if not all, are documented in the Linus repository. There’s many way to retrieve more details or at least the input device of your choice (touch panel).

One of those method consist in looking in all the USB (/proc/bus/usb/devices) or Input devices (/proc/bus/input/devices) in your system. The touch panel is usually linked to an “Event[1..5]” device.

An alternative is to configure your display to point towards your X-Server and then use the xinput command. If you fail to execute that command, it’s either not installed or you simply forgot to set your environment variable DISPLAY.

xinput --list

Second alternative. Without installing anything, you can use the device manager and look directly in the database and find your touch screen. The command for such a case is udevadm and of course you are required to run this as a root (sudo).

# Give all the devices available on your system. If you have a lot of
# devices connected, consider making the output redirected into a file.
# e.g.: udevadm info --export-db > myFile.txt
udevadm info --export-db 

An another alternative, just in case, is to simply look in the special folder “/dev/input/by-id” and “/dev/input/by-path“. The first give the currently connected device with input capabilities. So if you connect or disconnect an input device, you should be able to see it there. By doing a “ls -l” you will see which event file it’s using since it’s creating a symbolic link to it. For example in this output the event1 is my touchscreen:

myroot@mymachine:/dev/input/by-path# ls -l
total 0
lrwxrwxrwx 1 nobody nogroup 9 Mar  6 08:54 pci-0000:00:14.0-usb-0:13.1:1.1-event -> ../event1
lrwxrwxrwx 1 nobody nogroup 9 Mar  7 23:55 pci-0000:00:14.0-usb-0:13.4.2:1.0-event-kbd -> ../event2

Normally, from here, you know which device file correspond to your device. You might even have more details if you used the udevadm.

Read the binary content

Devices files are the raw data file. In order to be able to do something, you need to stream it as you would do for a TCP/UDP/File data. The structure of the content is structured following the driver rules. For example, the Keyboard and Mouse and a few other devices are considered as well known devices and are well documented all over the internet. You can even go directly in the Unix source code in order to see the .h file.

Let’s create a simple loop receiving the binary content while you touch the panel and then let’s output that raw data using an hex string.

public void ReadDeviceStream(CancellationToken stoppingToken) 
{
  // Use the device file
  var targetFile = new FileInfo("/dev/inputs/event1");

  // Open a stream
  using (FileStream fs = targetFile.Open(FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
  {
    stoppingToken.Register(() => fs?.Close());
    int blockId = 1;

    // A big buffer, for simplicity purpose and to receive the entire touch report. We should use
    // the proper buffer size based on the event size. Note that we could also
    // use the binary reader
    var buffer = new byte[1024];

    // Read until the token gets cancelled
    while (!stoppingToken.IsCancellationRequested && fs.Read(buffer) > 0)
    {
      ShowBinaryContent(blockId, buffer);
      blockId++;
    }
  }
}

public void ShowBinaryContent(int blockId, byte[] buffer)
{
  Console.WriteLine($"Block #{blockId}");
  Console.WriteLine(BitConverter.ToString(bytes)); // Hex format: AB-1D...
  Console.WriteLine(string.Empty);
}

How to interpret the data

The result of the previous small program is displayed here

// Block #1
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-03-00-39-00-03-01-00-00-
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-03-00-35-00-31-01-00-00-
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-03-00-36-00-E8-01-00-00-
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-01-00-4A-01-01-00-00-00-
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-03-00-00-00-31-01-00-00-
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-03-00-01-00-E8-01-00-00-
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-04-00-05-00-00-00-00-00-
59-9A-74-5C-00-00-00-00-9C-C7-04-00-00-00-00-00-00-00-00-00-00-00-00-00

// Block #2
59-9A-74-5C-00-00-00-00-6F-40-05-00-00-00-00-00-03-00-35-00-2C-01-00-00-
59-9A-74-5C-00-00-00-00-6F-40-05-00-00-00-00-00-03-00-00-00-2C-01-00-00-
59-9A-74-5C-00-00-00-00-6F-40-05-00-00-00-00-00-04-00-05-00-10-27-00-00-
59-9A-74-5C-00-00-00-00-6F-40-05-00-00-00-00-00-00-00-00-00-00-00-00-00
            
// Block #3
59-9A-74-5C-00-00-00-00-5D-96-05-00-00-00-00-00-04-00-05-00-20-4E-00-00-
59-9A-74-5C-00-00-00-00-5D-96-05-00-00-00-00-00-00-00-00-00-00-00-00-00

// Block #4
59-9A-74-5C-00-00-00-00-7D-9A-05-00-00-00-00-00-03-00-39-00-FF-FF-FF-FF-
59-9A-74-5C-00-00-00-00-7D-9A-05-00-00-00-00-00-01-00-4A-01-00-00-00-00-
59-9A-74-5C-00-00-00-00-7D-9A-05-00-00-00-00-00-04-00-05-00-30-75-00-00-
59-9A-74-5C-00-00-00-00-7D-9A-05-00-00-00-00-00-00-00-00-00-00-00-00-00

As you can see, we receive many events at the same time and each block contains their own timestamp (few first bytes on each lines). A block here contains more than one instruction. For example, it tells you where you pushed and if it was a push event or release. Let’s focus on the data looking like the Block #1.

public static void Main()
	{
		// Release
		 var binaryStrings = 
		 new [] { "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-03-00-39-00-0C-01-00-00",
                "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-03-00-35-00-51-01-00-00",
                "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-03-00-36-00-93-01-00-00",
                "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-01-00-4A-01-01-00-00-00",
                "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-03-00-00-00-51-01-00-00",
                "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-03-00-01-00-93-01-00-00",
                "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-04-00-05-00-00-00-00-00",
                "E3-00-75-5C-00-00-00-00-3F-72-09-00-00-00-00-00-00-00-00-00-00-00-00-00"};

		foreach (var bs in binaryStrings) {
			byte[] data = bs.Split('-').Select(b => Convert.ToByte(b, 16)).ToArray();

			Console.Write($"[Sec: {BitConverter.ToUInt32(data, 0)}]");
			Console.Write($"\t[USec: {BitConverter.ToUInt32(data, 8)}]");
			Console.Write($"\t[Type: {BitConverter.ToUInt16(data, 16)}]");
			Console.Write($"\t[Code: {BitConverter.ToUInt16(data, 18)}]");
			Console.Write($"\t[Value: {BitConverter.ToInt32(data, 20)}]");
			Console.WriteLine();
		}
	}
		/*
Ref: https://github.com/torvalds/linux/blob/master/include/uapi/linux/input-event-codes.h
Ref: https://www.kernel.org/doc/Documentation/input/event-codes.txt

[Sec: 1551171811]    [USec: 619071]    [Type: 3 EV_ABS]    [Code: 57 ABS_MT_TRACKING_ID]    [Value: 268]  Unique ID of initiated contact
[Sec: 1551171811]    [USec: 619071]    [Type: 3 EV_ABS]    [Code: 53 ABS_MT_POSITION_X]    [Value: 337] Center X touch position 
[Sec: 1551171811]    [USec: 619071]    [Type: 3 EV_ABS]    [Code: 54 ABS_MT_POSITION_Y]    [Value: 403] Center Y touch position
[Sec: 1551171811]    [USec: 619071]    [Type: 1 EV_KEY]    [Code: 330 BTN_TOUCH]    [Value: 1] 
[Sec: 1551171811]    [USec: 619071]    [Type: 3 EV_ABS]    [Code: 0 ABS_X]    [Value: 337] 
[Sec: 1551171811]    [USec: 619071]    [Type: 3 EV_ABS]    [Code: 1 ABS_Y]    [Value: 403]
[Sec: 1551171811]    [USec: 619071]    [Type: 4 EV_MSC]    [Code: 5 MSC_TIMESTAMP]    [Value: 0] 
[Sec: 1551171811]    [USec: 619071]    [Type: 0 EV_SYN]    [Code: 0 SYN_REPORT]    [Value: 0] Indicate the batch is completed and we can proceed
		*/

All the documentation about the types, code, etc. is available from source of Linux (https://github.com/torvalds/linux/blob/master/include/uapi/linux/input-event-codes.h).

The structure look like the following (4bit):

(C lang)

struct input_event {
	struct timeval time; // 2 unsigned uint32 or uint64
	unsigned short type; // 4 bit
	unsigned short code; // 4 bit
	unsigned int value;
};

The official documentation can be found at https://www.kernel.org/doc/Documentation/input/input.txt under the section 3.2.4 evdev and we can read the following:

The event codes are the same on all architectures and are hardware independent.

https://www.kernel.org/doc/Documentation/input/input.txt

How should we test?

It looks obvious, but in windows you might not be able to test/debug. You need a Linux system (Not subsystem). Since I use a touch panel with Linux, I simply logged the event output while I was experimenting the touch panel. I then replayed that same data while writing UT (TDD). After your TDD passes and that your event gets out as expected, you can then have the desired flow within your application. If you’ve never experimented, know that you can do remote debugging from Visual Studio (or code) to a Linux host. It works well and you might be able to debug more easily.

Existing library to support you

Here we go directly in the raw content, however, there’s a NuGet package that might help you realize what you need. As discussed in the beginning of the article, the HID is the keyword you want to look for, for such development. I haven’t played that much with the following library, but you should definitely use it in case you want to manage the devices from Dotnet. That library is OS agnostics and does not really care if you are on Windows, Linux or MacOS.

• NuGet Library: https://www.nuget.org/packages/HidSharp/
• GitHub Page: https://github.com/directhex/hidsharp

The only issue with that library is the lack of documentation. The best is to read the code itself or simply code everything by yourself.

What are we building?

The example will be simple and will be doing the following:

• Take JSON input
• Transform that JSON into an object (In this case, an object containing a dictionary)
• Pass through all the items from the dictionary and match the key against an enum which will be used to generate code
• Use reflection on the dictionary key enum (if it exists) and create a new special object with the dictionary value
• Print out the generated data using JSON prettify option

Building block #1 – JSON input

The JSON input will be quite simple, it will be an object containing a simple dictionary.

{ "MyDictionary": { "Key1": 1, "Key2": 2, "Key3": 3.1416 } }

Building block #2 – Basic objects structure

We now know the JSON structure, so let’s create our basic objects. Here we go a bit further than simply creating objects, we also create the Attribute which will be used during the “Reflection”.

class SampleObject
{
    public Dictionary<string, decimal> MyDictionary { get; set; }
}

public class CustomAttribute : Attribute
{
    public string CustomValue { get; set; }

    public CustomAttribute(string customValue)
    {
        CustomValue = customValue;
    }
}

 enum MyDictionarySpecialKeys
 {
     [Custom("Simple Value")]
     Key1,
     [Custom("Another Simple Value")]
     Key3
 }

 class MySpecialItem
 {
     public string Special { get; set; }
     public string OriginalKey { get; set; }
     public string Value { get; set; }
 }

Dive in the reflection

Now that we have all the basic object, let’s talk about the Reflection. I will not repeat what you can find on the MSDN, but rather show you directly a possible usage. The Reflection, as the name indicate, can go and read through the assembly and see how the objects are made and give you useful information. Recently, I used it in order to take a JSON configuration (appsettings section) and then generate code to be executed in the background based on that. I will not explain further that application.

Let’s begin, we will be taking our “Attribute” from the enum value and use the value provided. Then from that, instead of simply returning a simple string, let’s return a new Object. In this implementation, I will be using an extension method for simplicity. The same could be done using a simple method.

public static class CustomAttributeExtension
{
    internal static MySpecialItem GenerateEvent(this MyDictionarySpecialKeys myKey, decimal val)
    {
        // Get the member from the Enum
        var memberInfo = typeof(MyDictionarySpecialKeys)
            .GetMember(myKey.ToString())
            .FirstOrDefault();

        // If the enum member exists, then let's get the attribute
        if (memberInfo != null)
        {
            var attr = (CustomAttribute)memberInfo
                    .GetCustomAttributes(typeof(CustomAttribute), false)
                    .FirstOrDefault();

            if (attr == null)
            {
                // Should skip, if not exists
                return null;
            }

            // If enum contains the attribute let's create an object
            return new MySpecialItem
            {
                Special = attr.CustomValue,
                OriginalKey = myKey.ToString(),
                Value = val.ToString(CultureInfo.InvariantCulture)
            };
        }

        // Should skip
        return null;
    }
}

Let’s put all together in a program

If we take all of what we’ve done so far and put this into a program. We will have a JSON having 3 items in a dictionary. However, that dictionary will have only two entries mapped on the strongly typed enum. From that enum, the two enum members will be decorated with a custom attribute giving a special extra meaning to the value.

That put into code will give you something like this:

public class Program
{
    public static void Main()
    {
        var jsonInputSample = "{ \"MyDictionary\": { \"Key1\": 1, \"Key2\": 2, \"Key3\": 3.1416 } }";
        Console.WriteLine($"Input: {jsonInputSample}");

        var deserializedObject = JsonConvert.DeserializeObject<SampleObject>(jsonInputSample);
        var generatedSpecialItems = new List<MySpecialItem>();

        Console.WriteLine();
        Console.WriteLine("Content of [MyDictionary]:");

        foreach (var dictionaryItem in deserializedObject.MyDictionary)
        {
            Console.WriteLine($"\tDictionary [Key: {dictionaryItem.Key}] [Value: {dictionaryItem.Value}]");
            if (Enum.TryParse(dictionaryItem.Key, true, out MyDictionarySpecialKeys specialKey)
                && Enum.IsDefined(typeof(MyDictionarySpecialKeys), specialKey))
            {
                var specialItem = specialKey.GenerateEvent(dictionaryItem.Value);

                if (specialItem != null)
                {
                    generatedSpecialItems.Add(specialItem);
                }
            }
        }

        Console.WriteLine();
        Console.WriteLine("Result (Could be special items to be inserted in a DB):");
        Console.WriteLine("-----------------------------------------");
        Console.WriteLine(JsonConvert.SerializeObject(generatedSpecialItems, Formatting.Indented));
        Console.WriteLine("-----------------------------------------");
        Console.WriteLine("Completed");
        // Console.ReadKey(); // If you wish to wait when you run from Visual Studio and not command line.
    }
}

And the output result will be:

Input: { "MyDictionary": { "Key1": 1, "Key2": 2, "Key3": 3.1416 } }

Content of [MyDictionary]:
        Dictionary [Key: Key1] [Value: 1]
        Dictionary [Key: Key2] [Value: 2]
        Dictionary [Key: Key3] [Value: 3.1416]

Result (Events to be created):
-----------------------------------------
[
  {
    "Special": "Simple Value",
    "OriginalKey": "Key1",
    "Value": "1"
  },
  {
    "Special": "Another Simple Value",
    "OriginalKey": "Key3",
    "Value": "3.1416"
  }
]
-----------------------------------------
Completed

In the past, I used a lot NodeJs, but found out that some things were missing in order to be really effective. Especially when you have to touch the Rest API’s (Express or alike), it’s becoming almost a hell for managing data contract, generating the Swagger API and etc. For most of my scenarios where I want something that can scaffold and be ready in one hour, I now tend to use more Dotnet Core. Since it now runs pretty much everywhere and that we can scaffold super quickly API’s and UI (creating some templates).

In fact, in order to become more efficient, I started to build a template project available on GitHub and also NuGet. It’s also the template I most likely use for the articles on this site. For information, the template project use Dotnet Core 2+ (2.2 as o now) and contains 2 projects template. One that is the most basic web application you could have with VueJS and the other one which contains all the ready to start pretty much anything (Swagger, VueJS, VeeValidate, etc.).

Why VueJS and not Angular or any others? That’s a legitimate question. I personally like to use VueJS for it’s simplicity, it’s easy to debug and to finish, it’s really easy to use (great documentation). Then added to that, I use instead of the mastodon of Bootstrap the super lightweight Picnic CSS. It contains all the thing I usually require (grid alike feature, buttons, tabs, etc.). Yes, NodeJS is not gone, it’s still part of the deal. I use WebPack (hot reloading) in order to have a nice lightweight front-end deployed in “production” cases. The hot-reload become really handy when you want to see your changes live.

To debug your API’s using REST calls become easy and you know how the pipeline goes and security is also part of the deal with Kestrel (Http/s).

Regarding the API’s call from the front-end, my personal choice is Axios since it’s also easy and in case I would build UT, the library is simple to mock.

Why Dotnet Core 2.2 (or higher)?

Dotnet Core is using the power of the C# and all the business logic. In case I have to use a database, instead of connecting to a big database, I will simply use EntityFramework Core code first approach with SQLite. Also, Dotnet Core create a simple way to have a well defined swagger API, creates API’s through controllers and also give possibilities to easily integrate with existing Authentication mechanisms. The syntax and data contracts are part of the language and for anyone will understand them. The serialization is usually using the camelCase, but in case you need something different, you simply have to change the data contract factory (Newtonsoft.Json library) to suits your needs.

SQLite?

I used to use SQL Express, PostgreSQL, etc. However, to be doing rapid prototyping without installing any DBMS, SQLite give you the power of a database in a single small file (Don’t forget to VACUUM ;)). I use the latest version where you have foreign keys and cascade delete availability. The only drawback when using SQLite is to access the data with a visualization tool. I recently found one tool which was worth using. It’s not so big to install and you can drag and drop your database in the tool for lazy people ;). The tool in question is SQLite Studio.

When doing prototyping, you want to take a minimum of time to setup an environment, and if you have to deploy let’s say on a Raspberry PI or docker. You might not want to have to install anything else than your application (self-contained). SQLite files are created wherever your project wants it to be. That way, you simply deploy your application. At the startup of the application, the migrations happens and everything is ready. In worst case, or best case, you simply download or upload the database from/to your PC.

A complete example of a standalone project can be found on Github (https://github.com/Nordes/HoNoSoFt.PushChartToConfluence.Sample).

Introduction

Like I said, we will have an application serving some charts using the Canvas (HTML5) technology. We will then resize, take a snapshot and then transmit this file to our backend server. Then it will connect to confluence, look at the existing attachments and if it exists it will update using a comment or in the case where the file does not exists, we will be posting a new file. It is nice to update the file, but why not add the file (image) to the page if it is not already there.

Proposal using a chart

Note that we’re going to add the chart, but the same flow could be used to also update some comment/text. As long as you are familiar with html syntax, you should be able to do something good.

Pre-requisites before starting

1. If you already have a confluence server or follow the official installation guide from Confluence, skip to #3 (Create a small application)
2. For the docker users, let’s go towards the evaluation “just because”
   1. docker pull atlassian/confluence-server:latest
      1. About 700mo
   2. While it download, you can start by requesting a KEY
      1. https://my.atlassian.com/license/evaluation
      2. Select a Confluence server license and keep that page open until the docker image is ready.
   3. Start the docker image
      • Command: docker run -v $volume$:/var/atlassian/application-data/confluence --name="confluence" -d -p 8090:8090 -p 8091:8091 atlassian/confluence-server
        • $volume$: C:/demo/your/confluence/home
      • Open site: http://localhost:8090/
   4. During installation, fetch the Server ID and input it in the evaluation page.
      1. Follow the instructions
         1. Select trial
         2. Get the Server ID
         3. Go on your atlassian page already open and paste it
         4. Generate your key
         5. Copy/paste your key in the form within the confluence page
         6. Click next (wait a little) and voilà
         7. Setup a user or two and then let’s start
3. Create a small application with ChartJs (or use the one built in the previous post )

Back-End

In the back-end, we will first be receiving the image to at least test our local upload between front-end and back-end. After, we will start integrating the Confluence connexion.

Dotnet ImagesController: Receive Images (Part 1)

Within Dotnet Core, we can receive files or forms controls using the IFormCollection. I don’t think it is common to receive such thing, but when talking about receiving files, this comes handy. The client (JavaScript) will then create a collection and send it using a multipart/form-data. In there we can find many things, however what we will only using here are the files (((IFormCollection)MyFormCollection).Files).

Let’s create a controller named ImagesController we will receive the files as stream and then copy those files to a temporary folders. If you already played around with file streaming you can probably skip this part.

[Route("api/[controller]")]
[ApiController]
public ImagesController : ControllerBase {
    // .. some constructor stuff

    /// <summary>
    /// This will save the image in your local "temp" folder.
    /// </summary>
    [HttpPost]
    [ProducesResponseType((int)HttpStatusCode.Created)]
    public async Task<IActionResult> PostAsync(IFormCollection formCollection)
    {
        var files = formCollection.Files;
        long size = files.Sum(f => f.Length);
        List<string> fileList = new List<string>();

        foreach (var formFile in files)
        {
            // full path to file in temp location
            var filePath = Path.GetTempFileName();
            if (formFile.Length > 0)
            {
                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    // Save to file... We could remove the await, have a List<Task<..>> and then do a Task.WhenAll(myList)
                    await formFile.CopyToAsync(stream);
                    fileList.Add(filePath);
                }
            }
        }

        // Example of processed uploaded files returning details of the new file + original request.
        // You shouldn't rely on (or) trust the FileName property without validation.
        return Ok(new { count = files.Count, size, fileList });
    }
}

This is named Part 1 since we will come back in that code in order to add some code to send to confluence.

Front-End

Do the snapshot

From JavaScript, we have two methods that are quite handy to take snapshot of a Canvas. The first one is “toBlob(…)” and the second is “toDataUrl(…)“. While “toBlob” is not supported everywhere, I find it more useful for the demo, otherwise feel free to use “toDataUrl” for all browsers supports except Edge and then convert that base64 into a binary data (image/png). In case you go towards the “toDataUrl” method, don’t forget that you will have to transform the data once it’s server side for something readable (binary) as an image/png.

You will see in the next sub-section how to start from a ChartJs chart which you’d like to push to your back-end having a resolution of 1200px wide. Don’t forget that if you use an adaptive screen UX, it will not be displayed as 1200px until you do a snapshot for a fraction of a second.

How does the resizing work?

As you already know, a ChartJs canvas does not resize automatically at your wishes and if you want a snapshot, you are required to hack your way. Next, we are going to have the following flow:

Interesting part in the JS, I will skip the trivial step of generating a chart since you’re I suspect that you’re already able to do so.

// Some code (I used VueJs, but other language should look alike)

snapshot: function () {
  // Resize to desired size, bigger it is, more heavy will be the blob file.
  this.$refs.chartContainer.style.width = '1200px'
  this.chart.resize()
  var ctx = this

  // Do a snapshot
  this.$refs.chart.toBlob(function (blob) {
    // Resize back to original size
    ctx.$refs.chartContainer.style.width = ""
    ctx.chart.resize()

    // Prepare the form post
    // The file name used will be the chart title, but depending on your case, you
    // might want to have something more precise based on parameter (hash, encoding, something). 
    var filename = `${ctx.chartConfig.options.title.text}.png`
    var data = new FormData()
    data.append('file', blob, filename)

    const config = {
        headers: { 'content-type': 'multipart/form-data' }
    }

    // Post the file to your backend
    ctx.$http.post('/api/images', data, config)
    // Later in the article it should become as
    // ctx.$http.post('/api/images/confluence/{desiredPageId}', data, config)
  }, "image/png", 0.95);
}

// Some code

As you can see, I resize to 1200px => snapshot (toBlob) => resize back to original => send the file as multipart/form-data to the api.

The file should normally be created within your temp folder and the exact location will come back through the API. It is also part of the current data contract. Now that you have that, you can consider yourself ready for the next step, which is to transfer that buffered binary data directly to confluence using their API’s.

Back-end Part 2 – Use confluence API’s

Now that we know we can receive file and save it, we now simply need to use the Confluence API’s from Atlassian. The related documentation for that is:

• How to do basic authentication with Confluence
• Confluence REST API’s description (Pretty much all you need) (for version 6.13 at time of this writing)

API’s that we’re going to use for this demo are:

• [GET] api/content/{pageId}/child/attachment?filename={formFile.FileName}&expand=version
  • Search/Retrieve the existing attachment. In case it does not exists, it will sends back an empty array.
• [POST] api/content/{pageId}/child/attachment/{attachmentData.Id}/data
  • Update in case of existing attachment
• [POST] api/content/{pageId}/child/attachment
  • Create the attachment resource if it was not already existing
• [GET] api/content/{pageId}?expand=version,body.storage
  • Retrieve the details on the current page, especially the body specified in readable/editable way (storage). The version is also mandatory when you want to update the page.
• [PUT] api/content/{pageId}
  • Api used in order to update the confluence page.

Update the ImagesController to forward to Confluence

There’s maybe more code than required in the controller. The proper approach would be to use a IDataProvider injected (for UT) and then implement the provider using the IHttpClientFactory. That way, all would be testable and also it would also put the logic where it should be. However, let’s put all for now in one place and please adapt for your needs.

// some code in the controller

        /// <summary>
        /// Receive 1 or more images to be sent to Confluence server.
        /// </summary>
        /// <param name="formCollection">The form data (only files are being consumed)</param>
        /// <param name="pageId">The confluence page Id</param>
        /// <remarks>
        /// More details can be found at https://developer.atlassian.com/server/confluence/confluence-rest-api-examples/
        /// </remarks>
        [HttpPost("confluence/{pageId}")]
        [ProducesResponseType((int)HttpStatusCode.Created)]
        public async Task<IActionResult> PostToConfluence(IFormCollection formCollection, int pageId)
        {
            var files = formCollection.Files;
            long size = files.Sum(f => f.Length);
            List<string> fileList = new List<string>();
            var forwardAttachmentTasks = new List<Task<FileTransferResult>>();

            foreach (var formFile in files)
            {
                if (formFile.Length > 0)
                {
                    forwardAttachmentTasks.Add(ForwardFileToConfluence(pageId, formFile));
                }
            }

            // In case we had multiple tasks at the same time.
            await Task.WhenAll(forwardAttachmentTasks.ToArray()).ConfigureAwait(false);
            await UpdatePage(pageId, forwardAttachmentTasks).ConfigureAwait(false);

            return StatusCode((int)HttpStatusCode.InternalServerError, new { count = files.Count, size, fileList });
        }

        private async Task UpdatePage(int pageId, List<Task<FileTransferResult>> forwardTasks)
        {
            if (forwardTasks.Any())
            {
                // Update the page
                var pageContentResult = await _confluenceHttpClient.GetAsync($"content/{pageId}?expand=version,body.storage");
                var pageContentData = JsonConvert.DeserializeObject<Models.Confluence.Content.ContentStorage>(await pageContentResult.Content.ReadAsStringAsync());

                string newContent = string.Empty;
                foreach (var sentAttachmentTask in forwardTasks)
                {
                    var sentAttachment = await sentAttachmentTask;
                    if (sentAttachment != null && sentAttachment.Results.Any())
                    {
                        // Add the file if not present on the page.
                        var fileName = sentAttachment.Results.First().Title;
                        if (pageContentData.Body.Storage.Value.IndexOf($"<ri:attachment ri:filename=\"{fileName}\" />") == -1)
                        {
                            newContent += $"<h2>You've just pushed: {fileName}</h2><p><ac:image><ri:attachment ri:filename=\"{fileName}\" /></ac:image></p>";
                        }
                        // Else: Nothing to do, it's already on the page somewhere.
                    }
                }

                // Update object (camelCase mandatory, so use a proper serializer in real life scenario)
                var updateQuery = new
                {
                    id = pageContentData.Id,
                    title = pageContentData.Title,
                    status = pageContentData.Status,
                    type = pageContentData.Type,
                    version = new { number = pageContentData.Version.Number + 1 },
                    body = new
                    {
                        storage = new
                        {
                            value = pageContentData.Body.Storage.Value + newContent,
                            representation = "storage"
                        }
                    }
                };

                var result = await _confluenceHttpClient.PutAsJsonAsync($"content/{pageId}", updateQuery);
            }
        }

        private async Task<FileTransferResult> ForwardFileToConfluence(int pageId, IFormFile formFile)
        {
            // Start getting if attachment exists
            var getIfAttachmentExists = _confluenceHttpClient.GetAsync($"content/{pageId}/child/attachment?filename={formFile.FileName}&expand=version").ConfigureAwait(false);
            // While previous request goes on, let's get the file.
            byte[] data;
            using (var br = new BinaryReader(formFile.OpenReadStream()))
            {
                data = br.ReadBytes((int)formFile.OpenReadStream().Length);
            }

            ByteArrayContent bytes = new ByteArrayContent(data);
            MultipartFormDataContent multipartContent = new MultipartFormDataContent();
            multipartContent.Add(bytes, "file", formFile.FileName);

            var attachmentRequestData = await getIfAttachmentExists;
            if (attachmentRequestData.IsSuccessStatusCode && attachmentRequestData.StatusCode == HttpStatusCode.OK)
            {
                // Page exists and no errors...
                var attachmentRequestContent = await attachmentRequestData.Content.ReadAsStringAsync().ConfigureAwait(false);
                var attachmentData = JsonConvert.DeserializeObject<FileSearch>(attachmentRequestContent);

                HttpResponseMessage putAttachmentResponse;
                // Update existing data.
                if (attachmentData.Size == 1)
                {
                    multipartContent.Add(new StringContent($"Automatic update/upload from TestApplication ;)."), "comment");
                    putAttachmentResponse = await _confluenceHttpClient.PostAsync(
                        $"content/{pageId}/child/attachment/{attachmentData.Results.First().Id}/data",
                        multipartContent);

                    // Result is 1 "item"
                    var content = await putAttachmentResponse.Content.ReadAsStringAsync().ConfigureAwait(false);
                    var result = JsonConvert.DeserializeObject<Models.Confluence.Result>(content);

                    return new FileTransferResult() { Results = new Models.Confluence.Result[] { result }, Size = 1 };
                }
                else
                {
                    // Create the attachment
                    multipartContent.Add(new StringContent($"Automatic upload from TestApplication ;)."), "comment");
                    putAttachmentResponse = await _confluenceHttpClient.PostAsync(
                        $"content/{pageId}/child/attachment",
                        multipartContent);

                    // Result is a list of item.
                    var content = await putAttachmentResponse.Content.ReadAsStringAsync().ConfigureAwait(false);
                    return JsonConvert.DeserializeObject<FileTransferResult>(content);
                }
            }

            return default(FileTransferResult);
        }

// some code in the controller

It’s a lot of code. By reading it, it should be really easy to understand. During the file upload to Atlassian Confluence, we add a comment (updated or created) and the version gets updated. That way you could show the changes over time.

What else you could do?

• Transform the backend in order to have a provider injected
• Create UT
• Create IT
• Change the token used in order to use the official Atlassian flow for plugins
• Automate everything back-end by creating a scheduled job (not tested, but should be feasible)
  1. Selenium
  2. Image docker + chromium
  3. Execute the javascript using chrome Webdriver
  4. Send the image using a job.
• Send a SnapShot (not necessarily from Charts) while building your backend app in a pipeline.

Conclusion

Thank you for reading and I hope you have learned something today, or at least enjoyed this article.

Pré-requis

• Docker en local
• Client heroku (CLI) installé et configuré
• Git, pour cloner un repository
• Dotnet core 2.1.x installé (ou plus récent)

Exécuter en local

Docker: Images à pré-télécharger

Le build va reposer principalement sur 2 images. Ces images peuvent aussi être téléchargée automatiquement lors du lancement de la commande docker build lors d’une étape subséquente. Si vous voulez lancer les téléchargements en avance, lancez les commandes “docker pull” suivantes:

> docker pull microsoft/dotnet:2.1.500-sdk-alpine3.7 
> docker pull microsoft/dotnet:2.1.6-aspnetcore-runtime-alpine3.7

Créer un projet, ou faire du scaffolding

Je vais opter pour du scaffolding sur un de mes templates. Pour lancer l’installation du template en local faite à partir d’un dossier vide dotnet new -i HoNoSoFt.DotNet.Web.Spa.ProjectTemplates. Ensuite, faire dotnet new vuejs-picnic afin de lancer le scaffolding.

Cette étape n’est sans doutes pas obligatoire, mais sachez qu’Heroku vous procure le HTTPS sans doute en utilisant un reverse proxy (je ne fait que supposer ici). Du coup, vous pouvez désactiver le HTTPS du le projet surtout si vous n’avez pas de certificat valide. Le fichier a modifier est le Startup.cs, mettez en commentaire les lignes app.UseHttpsRedirection(); et app.UseHsts();.

À priori, vous avez votre projet disponible. Vous pourrez donc effectuer un  dotnet build histoire de vous assurer que le build fonctionne. Et ensuite  dotnet run vous permettra de voir avec Kestrel votre site sur https://localhost:5001/.

Faire un build local de votre image Docker

Comme vous l’avez sans doute constaté, ou pas, le projet template utilisé pour le scaffolding contenait déjà un fichier Dockerfile. Ce fichier décrit comment effectuer un build et ensuite vous donne l’option d’exécuter l’image en local.

Contenu du fichier:

####################################################
# To build your own image: 
#    > docker build -t honosoft/vuejs-picnic:latest -t honosoft/vuejs-picnic:1.0 .
# To run your image once it's ready:
#    > docker run -d -p 39803:80 --name vuejs-picnic honosoft/vuejs-picnic
# To push the image into your docker repository:
#    > docker push honosoft/vuejs-picnic:latest
# If you wish to remove your dangling images, please do the following (not mandatory)
#    > docker rmi $(docker images -f “dangling=true” -q)
####################################################

# Build the container with Source code compiled
FROM microsoft/dotnet:2.1.500-sdk-alpine3.7 as buildenv
WORKDIR /source
RUN apk add --update nodejs nodejs-npm
COPY *.csproj .
RUN dotnet restore
COPY . .
# Publishing will also restore (install) the npm packages.
RUN dotnet publish -c Release -o /app/

# Stage 2 - Creating Image for compiled app
FROM microsoft/dotnet:2.1.6-aspnetcore-runtime-alpine3.7 as baseimage
RUN addgroup -S coreApp && adduser -S -G coreApp coreApp
RUN apk add --update nodejs nodejs-npm


WORKDIR /app
COPY --from=buildenv /app .
RUN chown -R coreApp:coreApp /app

# Replace the application name if required.
CMD ASPNETCORE_URLS=http://+:$PORT dotnet Sample.Heroku.dll

IMPORTANT! Si vous utilisez “ENTRYPOINT” pour lancer l’application, ça marchera en local mais pas sur Heroku. Ce qui fait en sorte que vous devrez remplacer la commande par “CMD”, pour plus de détails cliquer ici

Comme avez pu le constater, mon projet s’appelle Sample.Heroku et le point d’entrée afin de démarrer le conteneur sera le fichier Sample.Heroku.dll. Les images utilisée sont la SDK afin de faire la compilation et ensuite l’image Runtime afin d’exécuter la publication en mode Production.

Pour bâtir votre docker, exécuter la commande docker build -t honosoft/sample-heroku:latest .. L’image devrait faire dans les 200mb décompressé et environs 80mo compressée. Il y a des moyens afin de diminuer cela, mais pour le moment on se contentera des images par défaut fournie par Microsoft.

Une fois le build terminé, vous pourrez lister vos images avec la commande docker images. Si votre image s’est construite sans soucis, vous pourrez passer à l’étape suivante, sinon vous devrez faire des corrections par rapport aux erreurs.

Lancer l’image docker en local pour tester

Rien de plus simple, par défaut, docker avec dotnet core utilise le port 80 en interne. Du coup, pour lancer votre image, effectuer la commande suivante:

docker run -d -p 8080:80 --name sample-heroku honosoft/sample-heroku

Votre image devrait donc désormais être disponible en atteignant http://localhost:8080 par le proxy créé par Docker (Port 80 sur Docker et exposé sur votre machine sur 8080).

Déploiement sur Heroku

Créer une application sur Heroku

À partir du dashboard, simplement créer une nouvelle application. Dans mon cas, l’application sera “morning-oasis-26273”.

Deploiement avec le CLI

Vous connecter à votre compte Heroku avec le CLI:

heroku login
heroku container:login

Comme vous le feriez pour envoyer vers les registres de Docker privé, effectuer un tag Heroku de votre image fraîchement créée. Ensuite, vous n’aurez qu’à faire un push (à la git), de votre image vers votre site web.

docker tag honosoft/sample-heroku registry.heroku.com/morning-oasis-26273/web
docker push registry.heroku.com/morning-oasis-26273/web

Alternativement au docker tag/push vous pouvez aussi utiliser la commande Heroku qui effectuera les 2 commandes en une seule:

heroku container:push web -a morning-oasis-26273

Lors du push, ça prendra un peu de temps tout dépendant de votre connexion internet. Le push, tel que pour GIT enverra la différence vers le serveur de registre Docker. Le premier push prendra un peu plus de temps, mais les push subséquents seront rapide et avec un faible volume de données à envoyer.

Tout ce qui reste à faire maintenant, est d’activer votre image sur le site Heroku à l’aide du CLI:

heroku container:release web -a morning-oasis-26273

Avant d’atteindre votre application, vous pouvez tout démarrer les traces logs. Ce sera utile en cas de problème (conteneur qui ne démarre pas par exemple).

heroku logs --tail -a morning-oasis-26273

Conclusion

C’était peut-être un peu plus long que prévu. Mais le tout fonctionne, bonne journée!