As the days crept on, I prepared my talks and IoT devices, pulled out my travel laptop, and dusted it off. Windows then proceeded to install updates over the next 12 hours. A few days before my flight, reality set in that this trip was going to happen. My anxiety was pretty high with fear of unknowns such as how will we all be safe, keep a distance, how many people will be there, how often will surfaces be cleaned, among many other concerns. Upon arrival, all of my concerns subsided as there were mask mandates, social distancing, and a superb Disney cast keeping on top of sanitizing rooms and common areas. The DevIntersection group planned this event perfectly, and I could then redirect my focus to the event’s purpose, learning about technology.

My learning goals were to attend sessions on security, infrastructure, and Infrastructure as Code topics. A few sessions that stood out to me were the following:

• Azure Sentinel, by Chris Givens. In this session, I learned about Azure Sentinel and how it works alongside built-in machine learning to identify changes in user behavior patterns. I also enjoyed experiencing the Sentinel user interface that generates graph visualizations as an intuitive method of investigating the root cause of security incidents.  (image from: What is Azure Sentinel? | Microsoft Docs)

• Master your Terraform deployments with Azure DevOps, by Jim Counts. This session was my first introduction to Terraform. I learned about syntax, variables, the Terraform Azure provider, and testing strategies when it comes to authoring Terraform for deployments in Azure. After this session, I feel I have the information and confidence to begin authoring my own Terraform deployments in Azure, check them into source control, and leverage them in Azure DevOps pipelines.
• Running AKS in production, by Dan Patrick. This session brought real-world experiences and lessons learned to the forefront. The content covered infrastructure, networking, security, and DevOps. The candid nature of Dan explaining some of the problems encountered on projects could save others a lot of headaches and time. I like how the abstract for the session reads: “Our pain, your gain.” Dan provided guidance on best practices for deployments, Azure DevOps and Terraform deployments, and securing AKS. I enjoyed the conversation back and forth between Dan and his colleague Jim Counts who was also in the audience for this presentation – many more experiences were unearthed as part of those conversations. There were so many valuable points and recommended guidance presented in this session. I would love to see its content made available as a series of documentation written as a reference.

My sessions for this event were IoT-focused. I presented on four IoT topics and participated in a closing panel discussion on the final day of the conference. My sessions were:

• Introduction to Azure Sphere. In this session, I explained the reasoning behind the Azure Sphere platform. I described the seven properties of a highly secured IoT device and how the Azure Sphere platform satisfies those properties. I explained how to claim a device, obtain proper certificate authentication, and add a device to an enrollment group. I then reviewed a simple C program used to define a product for a device group. This program was then cloud-deployed to the Azure Sphere that I had on my desk.
• Living on the Edge. In this session, I reviewed the different types of IoT Edge devices and IoT Edge gateways. We walked through defining an IoT Edge device in IoT Hub. Using a Raspberry Pi 4 device, we used apt-get, and a trusted Microsoft feed to complete the installation and configuration of the Pi 4 device. We then walked through creating an IoT Edge module in C#, building and uploading the module to the Azure Container registry. In IoT Hub, we configured the module to be deployed to the IoT Edge device we registered: the Raspberry Pi 4 device.
• Using Azure IoT Central to form a basis for your IoT Solutions. In this session, I reviewed the Software as a Service (Saas) offering of IoT Central. I listed out some pros and cons of having this type of solution. While it is closed source and hides much of the underlying IoT infrastructure resources, such as Stream Analytics, IoT Hub, Device Provisioning Service (DPS), and Time Series Insights. I demonstrated multiple ways of extending IoT Central to benefit from its SaaS web portal interface, customizability, dashboarding, and analytics – and still enable more complicated scenarios and downstream processing, consistent with more mature IoT solutions. I demonstrated Continuous Data Export to a service bus queue and triggered a Power Automate flow when an alert (rule) is activated based on the data ingested.
• IoT State of the Union. In this session, we reviewed the Azure Internet of Things Platform. We covered the products and services expected in IoT solution architectures today and their roles in the overall solution. We covered concepts relating to IoT Hub/DPS and when it makes sense to kick start a solution using IoT Central. We also covered some of the new features surrounding Azure Digital Twins. We discussed multiple areas where Device Twin Definition Language (DTDL) is used, including device twins, module twins, and device capability models (IoT Plug & Play).
• Closing panel. I had the opportunity to discuss the impacts of COVID-19 on technology careers with our host, Jeff Fritz, and friends Sara Faatz and Sam Basu. We talked about how various companies and employees adjusted and overcame obstacles related to such drastic changes in the work environment. We also discussed how DevIntersection is leading the pack when it comes to returning to in-person learning. Hybrid or online learning is valuable, but in-person learning provides the additional benefit of hallway conversations and connections with others.

As I reflect on the spring 2021 edition of DevIntersection, I am motivated to attend the fall DevIntersection event in December (7^th-9^th, 2021). This event was comfortable and very well-done. I am looking forward to adding more in-person learning opportunities in my steps to getting back to normalcy.

This post expects that you have created an Azure IoT Edge device and have it registered with an existing IoT Hub (free or standard tier). If you need some help with this, see this blog post.

This article is part of The Fourth Annual C# Advent Calendar initiative by Matthew D. Groves. You’ll find other helpful articles and tutorials published daily by community members and experts there, so make sure to check it out every day.

Azure IoT Edge modules are deployed to devices as Docker containers. In this article we will create an Azure IoT Edge module to control an LED that is connected to the Raspberry Pi.

Wiring

In this diagram, we will connect the Raspberry PI GPIO7 pin to a 100 ohm resistor. Connect the other end of the resistor to the the cathode (+ve, long leg) of the LED. The anode of the LED (-ve, short leg) will be connected to the Raspberry PI ground (GND).

Create a Container Registry

Login to the Azure Portal and navigate to the resource group that contains your IoT Hub. From the top toolbar, select the + Add button.

In the Marketplace search box, search for Container Registry, and select it from the search results. Select Create on the resource overview screen.

In the Create container registry form, give the registry a globally unique name and ensure it is located in the appropriate region. You can select the Basic SKU. Select the Review + create button, then after validation passes, select Create.

Navigate to the container registry resource once it’s deployed. From the left menu, select Access keys, then enable the Admin user switch. Make note of the Login server, Username and password values.

Creating the Azure IoT Edge Module

You have the choice to create the Azure IoT Edge module using Visual Studio or Visual Studio Code. In this case, I will be using Visual Studio Code. The pre-requisites needed are the following:

• Visual Studio Code
• .Net Core 3.1 SDK
• C# for Visual Studio Code extension
• Azure IoT Tools for Visual Studio Code extension
• Docker Desktop Community

Create a folder where you would like the project to be created. Then open Visual Studio Code.

We will use the command palette to scaffold the project. Use CTRL+SHIFT+P to open the palette. First, login to Azure using the Azure: Sign in command. Next, execute the following command: Azure IoT Edge: New IoT Edge solution. In executing this command, you will be prompted for the following:

• Folder where you’d like the solution created
• The solution name
• The module template (select C#)
• The module name (LightControl)
• The Docker image repository with the module name (registryloginserver.azurecr.io/lightcontrol)

Once the solution has been scaffolded, open the .env file, and add the CONTAINER_REGISTRY_USERNAME and CONTAINER_REGISTRY_PASSWORD values with those that you recorded from the Access keys section of the container registry.

Open a Terminal window (Powershell), and change directory into the modules/LightControl folder. Execute the following command to add GPIO support to our module:

dotnet add System.Device.GPIO

Open the modules\LightControl\Program.cs file and replace it with the following code listing (commented inline):

namespace LightControl
{
    using System;   
    using System.Runtime.Loader;    
    using System.Text;
    using System.Threading;
    using System.Threading.Tasks;
    using Microsoft.Azure.Devices.Client;
    using Microsoft.Azure.Devices.Client.Transport.Mqtt;
    using System.Device.Gpio;

    class Program
    {
        static int ledpin = 7; //GPIO 7
        static GpioController controller;

        static void Main(string[] args)
        {
            Init().Wait();

            // Wait until the app unloads or is cancelled
            var cts = new CancellationTokenSource();
            AssemblyLoadContext.Default.Unloading += (ctx) => cts.Cancel();
            Console.CancelKeyPress += (sender, cpe) => cts.Cancel();
            WhenCancelled(cts.Token).Wait();
        }

        /// <summary>
        /// Handles cleanup operations when app is cancelled or unloads
        /// </summary>
        public static Task WhenCancelled(CancellationToken cancellationToken)
        {
            var tcs = new TaskCompletionSource<bool>();
            cancellationToken.Register(s => ((TaskCompletionSource<bool>)s).SetResult(true), tcs);
            return tcs.Task;
        }

        /// <summary>
        /// Initializes the ModuleClient and sets up the callback to receive
        /// direct method calls from the IoT Hub
        /// </summary>
        static async Task Init()
        {
            MqttTransportSettings mqttSetting = new MqttTransportSettings(TransportType.Mqtt_Tcp_Only);
            ITransportSettings[] settings = { mqttSetting };

            // Open a connection to the Edge runtime
            ModuleClient ioTHubModuleClient = await ModuleClient.CreateFromEnvironmentAsync(settings);
            await ioTHubModuleClient.OpenAsync();
            Console.WriteLine("IoT Hub module client initialized.");
         
            //setup direct method handler 
            await ioTHubModuleClient.SetMethodDefaultHandlerAsync(DirectMethodCalled, ioTHubModuleClient);
            controller = new GpioController();
            controller.OpenPin(ledpin, PinMode.Output);
            Console.WriteLine("Initialized GPIO and listening for direct method call");

        }
        private static Task<MethodResponse> DirectMethodCalled(MethodRequest methodRequest, object userContext)
        {
            var data = Encoding.UTF8.GetString(methodRequest.Data);
            Console.WriteLine(data);
                      
           string result = "{\"result\":\"Executed direct method: " + methodRequest.Name + "\"}";

           switch(methodRequest.Name) {
               case "ON":
                    // Turn on the LED                    
                    controller.Write(ledpin, PinValue.High);
                    Console.WriteLine("LED SHOULD BE ON NOW");
                    break;
               case "OFF":
                    // Turn off the LED
                    controller.Write(ledpin, PinValue.Low);
                    Console.WriteLine("LED SHOULD BE OFF NOW");
                    break;
               default:
                    Console.WriteLine("Unknown method");
                    break;                   
           }
           //Acknowledge the receipt of the direct method call
           return Task.FromResult(new MethodResponse(Encoding.UTF8.GetBytes(result), 200));
           
        }

    }
}

Next, open the modules\LightControl\Dockerfile.arm32v7 file. Replace ONLY the first line of the file with the following (this will allow us to build the Linux based container on Windows):

FROM mcr.microsoft.com/dotnet/core/sdk:3.1 AS build-env

Build and push the LightControl module

Open the Command Palette once again, and execute the Azure IoT Edge: Build and Push IoT Edge Module Image. This command will publish our build to our Azure Container Registry. You can expect the following prompts:

• Select module config file (select the modules\LightControl\module.json file)
• Select Platform (select arm32v7)

Once the build has completed. Locate in the output the line that starts with Successfully tagged. Record the tag value. It should look something similar to: yourcontainerregistry.azurecr.io/lightcontrol:0.0.1-arm32v7

Add the module to be deployed to the Edge device

In the Azure Portal, navigate to your IoT Hub. From the left menu, select IoT Edge located in the Automatic Device Management section. From there, select your edge device from the list. Select Set modules from the top toolbar menu.

On the Set modules on device page, fill out the Container Registry Credentials section at the top of the form with the values you recorded when creating the registry.

In the IoT Edge Modules section, expand the + Add drop down and select IoT Edge Module.

Enter LightControl as the Module Name, and with the Module Settings tab selected, paste the tag value that you recorded earlier (similar to yourcontainerregistry.azurecr.io/lightcontrol:0.0.1-arm32v7).

Select the Container Create Options tab, and paste the following JSON. This will allow the Docker container we deploy access to the GPIO pins.

{
    "HostConfig": {
        "Privileged": true
    }
}

Select the Add button, to add this module to the list.

You should now be back on the Set modules on device screen. Select Review + create, then Create once validation has passed. This will return you to the Edge Device screen. Give the deployment a minute or two to reach your device, then select the Refresh button from the top toolbar. You should see LightControl listed as a module and reported by the device. Stay on this screen – we’ll be needing it momentarily.

Control the LED with a Direct Method call

Open a command prompt, and SSH into your Edge device. Once logged in execute the following command:

sudo iotedge logs -f LightControl

This command will show the console output of our module. Keep this window visible while you return to the Azure Portal Edge Device Screen. From the Modules list, select the LightControl module. This will open the Details screen for our LightControl Edge module. From the top toolbar, select the Direct method item.

On the Direct method form, for Method Name, you can enter the value ON or OFF. In the Payload field, you can optionally send additional information to the module direct method handler. Invoke the method by selecting the Invoke Method button from the top toolbar.

In my example, I called the method ON and passed in the payload JSON of: { “Initiator”: “CSAdvent” }

Once invoked, you should see your LED turn on! Not only that, but looking in your SSH window, you will see the console output that the light should be on.

Feel free to invoke the OFF method and watch the LED and the console output.

Wrapping up!

I hope that this article helps demonstrate how to control GPIO pins from an Azure IoT Edge module. Enjoy the rest of the C# Advent series!

I have been chomping at the bit to get myself a Pi 4 device. Of course I went with the 4 GB version. I landed on buying a Vilros starter kit on Amazon. I like that you can get (pretty much) everything you need in a single box.

The first thing I wanted to do is to make this thing into an Azure Edge device, so that I can easily deploy container-based applications remotely from IoT Hub and to act as a device gateway in my home (among other things).

Imaging the Operating System

I decided to use Raspbian Buster as the OS even though it is considered a tier 2 operating system. You can obtain the Raspbian Buster image from the Raspberry Pi website. I am running Windows, so I downloaded the Zip file for Raspbian Buster with desktop item. Please note, that for some reason, I needed to download this at least twice, because the file was corrupting somehow in transit [this was not an issue in October 2020]. Also, using 7-Zip is recommended as the unzip utility over the built-in Windows zip file extractor.

With the zip file extracted, I inserted the micro-SD card into my card reader and flashed the operating system image on it using the Balena Etcher tool.

While the OS is being imaged, cancel out of any Windows drive popups that surface.

Configuring Raspbian Buster

Insert the micro-sd card into the Raspberry Pi. Then connect a screen, mouse, keyboard, and network cable. Power on the device and wait for it to boot up.

On the welcome screen, be sure to note the IP address of the device – and continue setting up the Pi using your desired settings. It is equally important to remember the password you enter for the pi user.

Ensure that you allow for the Operating System to check for and install any necessary updates.

Next, we’ll enable SSH on the device. This is optional – but I find it much easier to work on my large monitors vs. the small screen that I have on my Pi. From the Pi menu, select Preferences, then Raspberry Pi Configuration.

Select the Interfaces tab, then ensure you enable SSH, and select OK. You may also enable all interfaces that you require for your project at this time. I’ve also enabled Camera, SPI, I2C, Serial Port, 1-Wire and Remote GPIO [mainly because I’m not sure all of what I want to do with it yet ]. Reboot the device so that the new settings take effect.

Install Azure IoT Edge

Next, you can either open the Terminal directly on your pi device, or SSH into it from the machine of your choice.

For SSH, enter the command ssh pi@ipaddressofpi and when prompted, type yes to continue connecting.

First thing we need to do is install an earlier version of OpenSSL that is compatible with Azure IoT Edge. Install this package by executing the following:

sudo apt-get install libssl1.0.2

We’ll need to register the Microsoft Key and software repository feed in order to obtain the software necessary to run Azure IoT Edge. Execute the following command to retrieve the list of products from the feed, and copy the downloaded list to the apt sources on the device. The last two commands in the series will install the Microsoft GPG public key as a trusted source.

curl https://packages.microsoft.com/config/debian/stretch/multiarch/prod.list > ./microsoft-prod.list

sudo cp ./microsoft-prod.list /etc/apt/sources.list.d/

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg

sudo cp ./microsoft.gpg /etc/apt/trusted.gpg.d/

Now that we’ve added (and trusted) the Microsoft package feed. Let’s update our device’s package list.

sudo apt-get update

Next, we’ll install the Moby engine and its associated CLI so that we can deploy, control, and run our Docker containers. Moby and the CLI are available as a single package in Microsoft package feed. Install this package by executing the following two commands:

sudo apt-get install moby-engine

Now for the moment we’ve all been waiting for! Let’s install the most recent iotedge package.

sudo apt-get install iotedge

Woohoo! We’ve made it! We’ve installed Azure IoT Edge on the Pi. We now need to give it a home. Keep your terminal window open while we switch gears to provisioning the device to an IoT Hub !

Provision the Edge Device with an IoT Hub

Log in to the Azure Portal and choose to + Create a resource. Search for IoT Hub and create the resource – choose either the Free tier or Standard tier.

Once provisioned. Open the IoT Hub resource you just created, and select IoT Edge from the left menu (beneath Automatic Device Management).

On the IoT Edge screen, select + Add an IoT Edge device from the top toolbar. Give the device a name in the Device ID field. For authentication, we’ll just keep it simple and use a Symmetric key. Press the Save button to complete the device creation step.

The device is now listed on the IoT Edge screen. Select the device you just created from the table.

On the device screen, copy the Primary Connection String value, and paste it into a text editor. This is the connection string we will use to configure our IoT Edge module on the Pi.

While we’re still on the device screen, select the Set Modules item from the top toolbar. It makes sense to have some type of module installed that will send telemetry from our device up to the IoT Hub to verify connectivity.

In the IoT Edge Modules section of the Set Modules screen, expand the + Add toolbar item, and select the + Marketplace Module item.

In the search box for the marketplace, search for Simulated, and select to install the Simulated Temperature Sensor IoT Edge module.

Select the Review + create button to validate. Once validation has succeeded, select the Create button to persist the configuration.

Return to the terminal window for the final piece of the puzzle. We need to configure our Pi with the device connection string that we obtained from the IoT Hub.

Execute the following command to edit the configuration of our IoT Edge module:

sudo nano /etc/iotedge/config.yaml

Use your arrow keys to navigate down the document until you see the <ADD DEVICE CONNECTION STRING HERE> text. Replace that text with the connection string you copied for your device in the IoT Hub earlier. (CTRL+X to exit, choose y to save and enter to confirm the same file name).

Restart the IoT Edge module by executing the following command:

sudo systemctl restart iotedge

Give the module a couple of minutes to restart, and view the logs of the IoT Edge Daemon by executing the following (when finished use CTRL+C to exit the command):

systemctl status iotedge

Verify the success of the remote deployment of the SimulatedTemperatureSensor module onto the device by executing the following command:

sudo iotedge list

You can view the output of the telemetry being sent by the SimulatedTemperatureSensor module by executing the following command:

sudo iotedge logs -f SimulatedTemperatureSensor

Returning to the Azure Portal, refresh your Edge Device screen and you should see the IoT Edge runtime responding successfully. The SimulatedTemperatureSensor module should also have reported in from the device to the IoT Hub as well.

In the Azure Portal, you can view statistics of incoming messages into your IoT Hub resource on its Overview screen.

You can monitor incoming telemetry at the IoT Hub level by opening an instance of the Azure cloud shell, and run the following Azure CLI commands:

az extension add --name azure-iot

az iot hub monitor-events --device-id {YourDeviceId} --hub-name {YourIoTHubName}

Conclusion

Welcome to the beginning of your IoT Edge journey! I hope this blog post helps you get started !

There’s only one aspect that made it slightly more difficult to get started – all of the intro material in the first chapter assumes you are running on a Linux machine. I am a Windows user – so I needed to seek out an alternate way to get my learning started with my platform of choice.

Step 1 – Install Python 3 and pip

This one, I need to go off of memory because I already had Python and pip installed on my machine – so forgive me if I forget something. You need to download the latest release of Python 3 for Windows. Press the link for the latest version (typically near the top of the screen) – and that will bring you to the download page for that version. Scroll towards the bottom of the page and there will be a list of files. Keep it simple and download and run the Windows x86-64 executable installer. Ensure you add Python to your PATH environment variable (available as an option in the installer – mine is in C:\Users\myuser\AppData\local\Programs\Python\Python38)

Next you’ll need to download the get-pip.py script. You can get the raw script directly from GitHub. (Right click the previous link, select save target as.. and save get-pip.py to your desktop). Because we already have Python installed, it’s just a matter of double-clicking on the script and letting it do its thing (a console window will open and close when it is finished). Now we need to ensure that we add pip to our path environment variable. It is located in your Python installation location in the Scripts folder – in my case it is in C:\Users\myusername\AppData\Local\Programs\Python\Python38\Scripts.

Verify the paths are entered correctly by opening a command prompt and executing the pip command.

Step 2 – Download and Install Anaconda

The next item that will be needed is a tool called Anaconda. Download and run the Anaconda Distribution Windows Installer for Python 3. When running the installer, when you get to the installation options, be sure to uncheck both checkboxes (do not add anaconda to the path, and do not make it the default python installation for the system as we have already downloaded and installed Python).

This installation is not a speedy one, so use patience and wait for it to complete.

Step 3 – Begin a project by creating an environment

After the installation has completed. In the Start Menu, you should now have application called Anaconda Navigator. Start this application (and be ready for console windows popping up and disappearing, it’s a normal thing). In the application, select Environments from the left menu, and in the Environments List pane, press the Create button to create a new workspace/environment.

In the Create Environment form, give your environment a name, select the proper Python version, then press the Create button.

Step 4 – Install the required packages for your project

In order to follow along with the second chapter in this book, I needed to install some package dependencies into my environment. In the Environment List, ensure that you have the environment that you just created selected from the list. In the third pane, it shows you the packages that are already installed and available for use.

The additional packages required for this chapter are: jupyter, matplotlib, numpy, pandas, scipy, and sklearn (**search for scikit-learn instead of sklearn **). Install these packages in your environment from the packages pane (third pane) by selecting All from the drop-down filter, and searching for each package individually. You do not need to install them one at a time, search for one, check the box, search for the next, check the box, and so on. After you have searched and checked each one – press the Apply button and wait for the packages to install.

Step 5 – Open the Environment using Jupyter Notebooks

In the Environments list (middle pane) – ensure your environment is selected and press the play button, this will display a context menu where you will select Open with Jupyter Notebook. This will automatically fire up the Jupyter server and a web browser will display showing you the Jupyter web interface.

In the upper right of the Jupyter web interface, there is a New button, press this button and under the Notebook section, select Python3.

Now you are off to the races to continue with the guidance presented in Chapter 2 – have fun!

While building the .NET Core library for Stream Deck plugins along with Jeff Fritz’ Twitch Stream, it became evident that we can’t expect all contributors to have physical hardware to be able to code for this project.

I took it upon myself to complete a simple solution to this problem. What is nice is that all communication between the Stream Deck and its plugins are all via web sockets, so standing up an emulator is just a matter of setting up a server. I decided to stand up this emulator in Node.js due to its simplicity and terseness.

Obtaining the Source Code

All code is available through GitHub and is hosted alongside the .NET Core library project. Initially (which hopefully by the time you read this has matured somewhat) – I’ve implemented an application that will emulate the Stream Deck hardware by initiating a web socket server, then firing up the plugin executable. It also listens for user interaction to send a message from the server to the plugin. I will walk you through the “original” version of this code here.

Configuration

Configuration for this Node application is available in the config.js file. This file contains settings for the folder path to the plugin code, the name of the manifest file, as well as the name of the plugin. It also contains websocket server settings including device id (which is a made up hardware id assigned to our Stream Deck emulator), and the port on which the plugin will communicate with the server.

// config.js listing
let config = {};
config.executable = {
    path: "C:\\SourceCode\\Fritz\\StreamDeckToolkit\\src\\SamplePlugin\\bin\\Debug\\netcoreapp2.2\\win10-x64",
    manifest: "manifest.json",
    exe: "SamplePlugin.exe"
};
config.server = {
    deviceId : '55F16B35884A859CCE4FFA1FC8D3DE5B',
    port : 3000
}

module.exports = config;

Websocket Server Code

Next is the websocket server code, located in server.js. This file is responsible for creating the websocket server listening on the configured port. It will also listen for commands from the main program (index.js) to know when to send the keyUp event across a connected socket, emulating a button press. Originally the keyUp event is the only event implemented in this code, adding others would just be a matter of adding cases to the switch statement.

// server.js listing
const config = require('./config');
var manifest = require(config.executable.path +'\\'+ config.executable.manifest);

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: config.server.port});
let _socket; 

server.on('connection', (socket) => {
    _socket = socket;
    _socket.on('message',(msg)=> {
        console.log("\n"+ msg);
    });
});

// Message from index.js
process.on('message', (msg) => {
    switch(msg) {
        case 'button':
            var json = {
                "action": manifest.Actions[0].UUID,
                "event": "keyUp",
                "context": '',
                "device": config.deviceId,
                "payload": {
                    "settings": {},
                    "coordinates": {
                        "column": 3, 
                        "row": 1
                    },
                    "state": 0,
                    "userDesiredState": 1,
                    "isInMultiAction": false
                }
            };
            _socket.send(JSON.stringify(json));
            break;
        default:
            console.log('\nUnknown Index message: '+ msg);
            break;
    }
});

The main application

Finally, the main application, available in index.js. This application is responsible for starting up the websocket server, as well as initiating the plugin via the command line using the appropriate command-line parameters. This code also listens for user input, in the case of the original code, we are only listening for the character b to be pressed by the user in order to initiate the keyUp event. By pressing b, the application sends a message to the server application telling it to execute the socket message associated with ‘button’.

// index.js
const config = require('./config');
const { fork } = require('child_process');
var rlSync = require('readline-sync');
var exec = require('child_process').execFile;
var manifest = require(config.executable.path +'\\'+ config.executable.manifest);

const forked = fork('server.js');
forked.send('<status>Web Socket Server Started....');

// Registration Stuff
var info = {
    'application': {
      'language': 'en', 
      'platform': 'windows', 
      'version': '4.0.0'
    }, 
    'devices': [
      {
        'id': config.server.deviceId, 
        'size': {
          'columns': 5, 
          'rows': 3
        }, 
        'type': 0
      }
    ]
  };

var registrationParams = ['-port', config.server.port, '-pluginUUID', manifest.Actions[0].UUID,'-registerEvent','registerEvent','-info', JSON.stringify(info)];
exec(config.executable.exe, registrationParams, { cwd: config.executable.path }, (err, data) => {
    if(err){
        console.log(`ERROR: ${err}`);
    } else {
        console.log(`DATA: ${data}`);
    }
} );

// Type b at any time to send a KeyUp event to the plugin
promptUser();

function promptUser() {
    var cmd = rlSync.question("Enter 'b' to simulate a button press ");
    switch(cmd) {
        case 'b':
            forked.send('button');
            break;
        default:
            break;
    }
    promptUser();
}

Running the emulator

The first thing you need to do is to pull down the code, and ensuring your configuration is pointed to the correct path.

Then, install the dependencies using:

npm install

And run the application using:

node .

In this case, I am using a debug version of the Sample Plugin available from the StreamDeckToolkit, it has a debugger break that will fire when the plugin is initiated. Select “StreamDeckToolKit” to initiate the debugger in the plugin code.

It will break on a line that says Debugger.Launch() , just press the continue button in Visual Studio.

On the console of the Node application – you’ll see a couple things.

#1 – The prompt for the user to press ‘b’ to initiate the button press (this will seem out of order with the server messages being output, but rest assured, the user can press ‘b’ at any time to initiate the button press).

#2 – The registration message that is received from the plugin is output.

Once the user enters b <enter> – the magic starts – it initates the keyUp event in the plugin, and the plugin responds with commands for the Stream Deck (Emulator). Developers can now inspect the messages obtained from the plugin in the console of the Node application.

To finish off…

This blog post gives an overview of the beginnings of the Stream Deck Emulator project – I’m certain it will grow from here – but this gives us a starting point to ease plugin development for the Stream Deck hardware.

When first diving in to explore the Azure Sphere MCU, I was a bit dismayed that I2C and ADC are currently unsupported. My spirits were then lifted when I discovered that the Grove Shield for the Azure Sphere MT3620 removes that barrier!

The MT3620 Grove Shield

When I first purchased my Azure Sphere, I also added the Azure Sphere Grove Starter Kit. I have had a lot of good experiences with Seeed Grove kits in the past, so picking this one up was only logical. It provides the shield that sits atop of the Azure Sphere and exposes plug and play options for GPIO, Analog, and UART peripherals. The starter kit also shipped with a series of popular sensors so that you can get started designing your devices without having to breadboard or solder anything. There are tons of affordable Grove sensors available, each with accompanying schematics and source libraries for various hardware platforms.

The MT3620 Grove Shield Library

Seeed Studio has provided full C source code to their library that interfaces with the Azure Sphere board. In the same repository, they’ve also included code samples for each of the Grove sensors provided in the starter kit.

Creating an app that reads temperature and humidity at the press of a button

Prepping the hardware

In this project, we’ll be using two groves that come from the starter kit – the Grove – Blue LED Button and the Grove – Temperature and Humidity Sensor (SHT31).

Plug the Temperature/Humidity sensor into one of the I2C ports, and the button into the GPIO0 slot (this ultimately ends up using GPIO0 and GPIO1).

Setting up the Visual Studio project

The first step to any development is to clone the MT3620 Shield Library repository. Remember where you cloned this repository – we’ll be needing it shortly!

Once cloned, open Visual Studio 2017, and create a new project using the ‘Blank Application for MT3620 RDB (Azure Sphere)’ template (located in Other Languages -> Visual C++ -> Cross Platform -> Azure Sphere). I have named mine ‘OnDemandTemperatureAndHumidity’.

Once the project has been generated, we need to add the cloned MT3620 Shield Library project to the solution. Do so by right-clicking the solution in solution explorer, and select ‘Add existing project’, then find the ‘MT3620_Grove_Shield_Library.vcxproj’ that is located in the MT3620_Grove_Shield_Library folder of the cloned repository.

Next, add a project reference to the Grove Shield Library project that we just added. Do so by right-clicking on your ‘OnDemandTemperatureAndHumidity’ project, and select ‘Add’ -> ‘Reference’, then select ‘Projects’ -> ‘Solution’ in the left-hand treeview, and place a checkmark next to the MT3620_Grove_Shield_Library item.

Now we need to add the location of the MT3620_Grove_Shield_Library to the include directories of the project. To do so, right click on the ‘OnDemandTemperatureAndHumidity’ project and select ‘Properties’. Then in the left-hand treeview, expand ‘Configuration Properties’ -> ‘C/C++’ -> ‘General’. In the ‘Additional Include Directories’ field, add the path to the MT3620_Grove_Shield_Library folder (it contains the ‘Grove.h’ file). My field value (will vary based on where you cloned the library), now looks similar to this:

C:\SourceCode\AzureSphere\MT3620_Grove_Shield\MT3620_Grove_Shield_Library;%(AdditionalIncludeDirectories)

Bring on the Source Code!

In order to gain access to the functionality of the shield, we will need to add some capabilities to the app manifest of the project. In the root of the OnDemandTemperatureAndHumidity project, open ‘app_manifest.json’ and modify the Capabilities property to the following:

  "Capabilities": {
    "AllowedConnections": [],
    "Gpio": [ 8, 9, 10, 15, 16, 17, 18, 19, 20, 12, 13, 0, 1, 4, 5, 57, 58, 11, 14, 48 ],
    "Uart": [ "ISU0", "ISU3" ],
    "WifiConfig": false
  }

Next, in the Source Files folder, modify your main.c file with the following listing (my code additions are numbered, and commented inline):

#include <signal.h>
#include <stdbool.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>

#include "applibs_versions.h"
#include <applibs/log.h>

#include "mt3620_rdb.h"

// 1. include the Grove, Grove LED Button, and Grove Temp Humidity Headers from the MT3620_Grove_Shield_Libary
#include "Grove.h"
#include "Sensors/GroveLEDButton.h"
#include "Sensors/GroveTempHumiSHT31.h"

static volatile sig_atomic_t terminationRequested = false;

static void TerminationHandler(int signalNumber)
{
	terminationRequested = true;
}

int main(int argc, char *argv[])
{
	// 2. define variables for button and initial state
	static GPIO_Value_Type buttonState, lastButtonState;
	void *ledButton = GroveLEDButton_Init(1, 0);
	lastButtonState = GroveLEDButton_GetBtnState(ledButton);

	// 3. initialize i2c feed with baud rate and temp humidity sensor
	int i2cFeed;
	GroveShield_Initialize(&i2cFeed, 115200);
	void* tempHumiditySensor = GroveTempHumiSHT31_Open(i2cFeed);

	struct sigaction action;
	memset(&action, 0, sizeof(struct sigaction));
	action.sa_handler = TerminationHandler;
	sigaction(SIGTERM, &action, NULL);

	// FYI - loop is every 1000 nanoseconds
	const struct timespec sleepTime = { 0, 1000 };
	while (!terminationRequested) {

		// 4. determine button state and if it has changed, toggle LED accordingly
		buttonState = GroveLEDButton_GetBtnState(ledButton);
		if (buttonState != lastButtonState) {
			if (buttonState == 0) {
				GroveLEDButton_LedOn(ledButton);
				Log_Debug("Button pressed.\n");
				// 5. take a temperature and humidity reading every time button is pressed
				GroveTempHumiSHT31_Read(tempHumiditySensor);
				float temperature = GroveTempHumiSHT31_GetTemperature(tempHumiditySensor);
				float humidity = GroveTempHumiSHT31_GetHumidity(tempHumiditySensor);
				Log_Debug("Temperature: %.1fC\n", temperature);
				Log_Debug("Humidity: %.1f\%c\n", humidity, 0x25);
			}
			else {
				GroveLEDButton_LedOff(ledButton);
				Log_Debug("Button released.\n");
			}
		}
		lastButtonState = buttonState;

		nanosleep(&sleepTime, NULL);
	}
	return 0;
}

Build and run your project on your device – every time you press the button, the LED will light up, and the debug output will indicate the current temperature and humidity. The resulting output will look similar to the following:

Remote debugging from host 192.168.35.1
Button pressed.
Temperature: 22.4C
Humidity: 40.2%
Button released.
Button pressed.
Temperature: 22.3C
Humidity: 43.3%
Button released.
Button pressed.
Temperature: 22.3C
Humidity: 42.9%
Button released.
Button pressed.
Temperature: 22.3C
Humidity: 41.9%
Button released.
Button pressed.
Temperature: 22.3C
Humidity: 41.3%
Button released.

Conclusion

The Azure Sphere Grove Starter kit greatly simplifies creating a proof of concept on the platform. What is especially nice is that the libraries provided by Seeed Studio have all the source code available on GitHub. This makes it easy to start creating code to interface with additional Groves, or if you are adventurous, creating your own custom Groves adhering to the interface.

Adding the NativeScript Firebase Plugin

This step is a pretty simple one. If you have not already done so in your application, add the nativescript firebase plugin by executing the following command:

tns plugin add nativescript-push-notifications

Also ensure that you have the plugin setup in your project as specified on the plugin GitHub page.

Cloud messaging setup

Verify in your project root folder that the file ‘firebase.nativescript.json’ that the messaging property is set to true.

...
"messaging": true,
...

Setting up iOS for messaging

With Firebase being a Google offering, they made it very painless to incorporate messaging for Android – we’ve already done everything that we needed to do to get it to run there. We will have to perform additional steps for iOS.

Enable push notifications in Xcode

Using Xcode, in the ‘/platforms/ios/’ folder, open your ‘*.xcworkspace’ file. Select the project in the left hand treeview, them select the ‘Capabilities’ tab. Scroll down until you find ‘Push Notifications’, and toggle it to the ‘On’ position.

This will create an entitlements file located in ‘/platforms/ios/<project>/<project.entitlements’ – this file will need to be copied (or merged) to ‘/App_Resources/iOS/<project>.entitlements’. This will allow the entitlements to be copied over every time you remove and re-add the iOS platform.

Enable background notifications

In order to be able to receive notifications when the app is closed, you’ll need to enable background notifications. Open ‘/App_Resources/iOS/Info.plist’ and add this key:

<key>UIBackgroundModes</key>
<array>
  <string>remote-notification</string>
</array>

Generate an APNS authentication key

Go to ‘https://developer.apple.com’ and log in with your Apple developer account. Select ‘Certificates, Identifiers & Profiles’. Then, on the left hand menu, select ‘All’ underneath the ‘Keys’ section and click the ‘+’ button to add a key. Give the key a description, ensure you check the APNs checkbox, then click the ‘Continue’ button, then the ‘Confirm’ button to generate the key. Finally, download the key, we will be using it momentarily.

Verify your application has Push Notifications as configurable

In the Apple developer site, select your App ID and ensure that Push Notifications are set to ‘Configurable’. If it’s not, simply edit the form, and check the ‘Push Notifications’ checkbox.

If you’ve made a change, you will need to re-generate your development provisioning profile.

Add iOS Authentication key to Firebase

Log into your Firebase console, and next to ‘Project Overview’ click the cog button and select ‘Project Settings’. Select the ‘Cloud Messaging’ tab, then scroll down to the iOS app configuration section, and click the ‘Upload’ button.

You will now be presented with a form, upload the APNs authentication key that you generated earlier. Enter a 10 character Key ID (these 10 characters are the suffix to the key file that you downloaded) – and fill out your Team ID – this is located in the Apple Developer Console under Membership.

Add notification handling code

Open ‘/src/app/app.component.ts’ and in your ngOnInit handler within the firebase.init call, add the following code (firebase.init method included here for clarity):

firebase.init({
    showNotifications: true,
    showNotificationsWhenInForeground: true
  });

Send a test notification

Ensure you have your application running on actual device(s). I was only able to receive them when the apps were running on the device, disconnected from any computer.

In your firebase console, in the left hand menu, in the ‘Grow’ section – select ‘Cloud Messaging’. You can then author a message, select which app(s) to send the message to, and finally review the message prior to publishing.

Once published, you will receive notifications on the devices you’ve selected.

That’s all there is to it, hopefully this will help someone cut to the chase and implement Push Notifications in their NativeScript application.

Note: Azure Sphere needs to be linked to Azure Active Directory (AAD) – I have one through my personal business’ Office 365 subscription. There are multiple ways of creating an AAD instance through this guidance.

Procuring the dev kit

I ordered my dev kit and received it a few weeks later – I also added the Grove starter kit so that I could start tinkering with my new board immediately.

Download and install the SDK

In order to develop for the Azure Sphere, you’ll need to download and install the SDK – at the time of this writing it is currently in preview.

Claiming the device

Hook up the Sphere to your PC using the USB cable that was included in the box. Open the Azure Sphere Developer Command Prompt and log in with your Microsoft account:

azshpere login

This will open a familiar browser login screen to authenticate your account. You may be shown a message indicating that there are no Azure Sphere Tenants found under the selected AAD user – this is expected. If you need to create a tenant, execute a command to create one (replace the name argument with the name of your choosing, I named mine ‘TrilliumSphere’) – you will be prompted to authenticate once more:

azsphere tenant create --name TrilliumSphere

Then claim the device using the following command:

azsphere device claim

Performing initial setup

Configure the device to utilize your Wi-Fi by issuing the following command:

azsphere device wifi add --ssid <YOURSSID> --key <YOURKEY>

When the device first boots, or connects to Wi-Fi, it will automatically seek out and install any updates. These updates should not be interrupted. Check the status of any updates by issuing the following command:

azsphere device show-ota-status

HelloWorld MCU Edition == Blink

The default Hello World program for a microcontroller is to blink an LED. I followed the following walkthrough to perform just that!

By default, the Sphere ships to you in a locked state, meaning you can’t load or debug programs from a PC. Execute the following command to unlock the device:

azsphere device prep-debug

You will then see output similar to the following:

As indicated in the console window – when a device is unlocked, it will not receive over-the-air updates. To lock a device for production (and to start receiving updates once more) you would execute the following command:

azsphere device prep-field

In order to run the blink sample, keep the device in the unlocked/debug mode. Ensure that you are running the latest build of Visual Studio 2017 – at the time of this writing it is v.15.8.9 – this will save you a whole lot of headaches!!!

Open Visual Studio, create a new project – then select the ‘Blink Sample for MT3620 RDB (Azure Sphere)’ template (on my machine this is located under Other Languages -> Visual C++ -> Cross Platform -> Azure Sphere).

Build and run the project – then press the ‘A’ button to change the speed of the blinking on LED 1.

Sample Source file listing is as follows (copied from template) Source Files\main.c :

#include <errno.h>
#include <signal.h>
#include <stdbool.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>
#include <unistd.h>

// applibs_versions.h defines the API struct versions to use for applibs APIs.
#include "applibs_versions.h"
#include "epoll_timerfd_utilities.h"

#include <applibs/gpio.h>
#include <applibs/log.h>

#include "mt3620_rdb.h"

// This sample C application for the MT3620 Reference Development Board (Azure Sphere)
// blinks an LED.
// The blink rate can be changed through a button press.
//
// It uses the API for the following Azure Sphere application libraries:
// - gpio (digital input for button)
// - log (messages shown in Visual Studio's Device Output window during debugging)

// File descriptors - initialized to invalid value
static int gpioButtonFd = -1;
static int gpioButtonTimerFd = -1;
static int gpioLedFd = -1;
static int gpioLedTimerFd = -1;
static int epollFd = -1;

// Button state variables
static GPIO_Value_Type buttonState = GPIO_Value_High;
static GPIO_Value_Type ledState = GPIO_Value_High;

// Blink interval variables
static const int numBlinkIntervals = 3;
static const struct timespec blinkIntervals[] = {{0, 125000000}, {0, 250000000}, {0, 500000000}};
static int blinkIntervalIndex = 0;

// Termination state
static volatile sig_atomic_t terminationRequired = false;

/// <summary>
///     Signal handler for termination requests. This handler must be async-signal-safe.
/// </summary>
static void TerminationHandler(int signalNumber)
{
    // Don't use Log_Debug here, as it is not guaranteed to be async signal safe
    terminationRequired = true;
}

/// <summary>
///     Handle LED timer event: blink LED.
/// </summary>
static void LedTimerEventHandler()
{
    if (ConsumeTimerFdEvent(gpioLedTimerFd) != 0) {
        terminationRequired = true;
        return;
    }

    // The blink interval has elapsed, so toggle the LED state
    // The LED is active-low so GPIO_Value_Low is on and GPIO_Value_High is off
    ledState = (ledState == GPIO_Value_Low ? GPIO_Value_High : GPIO_Value_Low);
    int result = GPIO_SetValue(gpioLedFd, ledState);
    if (result != 0) {
        Log_Debug("ERROR: Could not set LED output value: %s (%d).\n", strerror(errno), errno);
        terminationRequired = true;
    }
}

/// <summary>
///     Handle button timer event: if the button is pressed, change the LED blink rate.
/// </summary>
static void ButtonTimerEventHandler()
{
    if (ConsumeTimerFdEvent(gpioButtonTimerFd) != 0) {
        terminationRequired = true;
        return;
    }

    // Check for a button press
    GPIO_Value_Type newButtonState;
    int result = GPIO_GetValue(gpioButtonFd, &newButtonState);
    if (result != 0) {
        Log_Debug("ERROR: Could not read button GPIO: %s (%d).\n", strerror(errno), errno);
        terminationRequired = true;
        return;
    }

    // If the button has just been pressed, change the LED blink interval
    // The button has GPIO_Value_Low when pressed and GPIO_Value_High when released
    if (newButtonState != buttonState) {
        if (newButtonState == GPIO_Value_Low) {
            blinkIntervalIndex = (blinkIntervalIndex + 1) % numBlinkIntervals;
            if (SetTimerFdInterval(gpioLedTimerFd, &blinkIntervals[blinkIntervalIndex]) != 0) {
                terminationRequired = true;
            }
        }
        buttonState = newButtonState;
    }
}

/// <summary>
///     Set up SIGTERM termination handler, initialize peripherals, and set up event handlers.
/// </summary>
/// <returns>0 on success, or -1 on failure</returns>
static int InitPeripheralsAndHandlers(void)
{
    struct sigaction action;
    memset(&action, 0, sizeof(struct sigaction));
    action.sa_handler = TerminationHandler;
    sigaction(SIGTERM, &action, NULL);

    epollFd = CreateEpollFd();
    if (epollFd < 0) {
        return -1;
    }

    // Open button GPIO as input, and set up a timer to poll it
    Log_Debug("Opening MT3620_RDB_BUTTON_A as input\n");
    gpioButtonFd = GPIO_OpenAsInput(MT3620_RDB_BUTTON_A);
    if (gpioButtonFd < 0) {
        Log_Debug("ERROR: Could not open button GPIO: %s (%d).\n", strerror(errno), errno);
        return -1;
    }
    struct timespec buttonPressCheckPeriod = {0, 1000000};
    gpioButtonTimerFd = CreateTimerFdAndAddToEpoll(epollFd, &buttonPressCheckPeriod,
                                                   &ButtonTimerEventHandler, EPOLLIN);
    if (gpioButtonTimerFd < 0) {
        return -1;
    }

    // Open LED GPIO, set as output with value GPIO_Value_High (off), and set up a timer to poll it
    Log_Debug("Opening MT3620_RDB_LED1_RED\n");
    gpioLedFd = GPIO_OpenAsOutput(MT3620_RDB_LED1_RED, GPIO_OutputMode_PushPull, GPIO_Value_High);
    if (gpioLedFd < 0) {
        Log_Debug("ERROR: Could not open LED GPIO: %s (%d).\n", strerror(errno), errno);
        return -1;
    }
    gpioLedTimerFd = CreateTimerFdAndAddToEpoll(epollFd, &blinkIntervals[blinkIntervalIndex],
                                                &LedTimerEventHandler, EPOLLIN);
    if (gpioLedTimerFd < 0) {
        return -1;
    }

    return 0;
}

/// <summary>
///     Close peripherals and handlers.
/// </summary>
static void ClosePeripheralsAndHandlers(void)
{
    // Leave the LED off
    if (gpioLedFd >= 0) {
        GPIO_SetValue(gpioLedFd, GPIO_Value_High);
    }

    Log_Debug("Closing file descriptors\n");
    CloseFdAndPrintError(gpioLedTimerFd, "LedTimer");
    CloseFdAndPrintError(gpioLedFd, "GpioLed");
    CloseFdAndPrintError(gpioButtonTimerFd, "ButtonTimer");
    CloseFdAndPrintError(gpioButtonFd, "GpioButton");
    CloseFdAndPrintError(epollFd, "Epoll");
}

/// <summary>
///     Main entry point for this application.
/// </summary>
int main(int argc, char *argv[])
{
    Log_Debug("Blink application starting\n");
    if (InitPeripheralsAndHandlers() != 0) {
        terminationRequired = true;
    }

    // Use epoll to wait for events and trigger handlers, until an error or SIGTERM happens
    while (!terminationRequired) {
        if (WaitForEventAndCallHandler(epollFd) != 0) {
            terminationRequired = true;
        }
    }

    ClosePeripheralsAndHandlers();
    Log_Debug("Application exiting\n");
    return 0;
}

First impressions

My first impressions with this device has overall been positive. It was easy to add it to the domain and claim it – though I did have to disconnect and reconnect it in order for the tenant creation command to see it. In Visual Studio – I was getting an application error when opening the project, and if I tried to build the project, it would fail but not give any errors in the error pane. After updating Visual Studio – the project started working fine!

I guess it’s time to brush up on my C programming!!!

I decided to utilize the UI for NativeScript from Progress Software, a professional grade component library that is available free of charge. Included in this offering is a Calendar component that satisfies my need for a better user experience.

Note: this is expecting that you already have the module importing the UI for NativeScript Calendar and ListView components. It is also importing only basic iCal data, no recurrence rule parsing is taking place. This article also doesn’t step you through creating a NativeScript application from scratch, it shows you how to add the functionality into an existing module. In this case, I have created an application module called Calendar, and I have already setup the module, routes, etc.

Obtain the calendar feed

The first thing that you will need is the public or private feed for the Google Calendar that you’d like to have imported to have displayed in the NativeScript Calendar component. To do this, open your Google Calendar page, on the upper-right hand corner of the page, click on cog icon and select ‘Settings’.

Next, ensure you select the correct calendar to edit the settings for. Then scroll toward the bottom of the settings window, and find the iCal address. You can choose a public link (for published calendars) or the private link for private/unpublished calendars. In my case, the calendar is not public, so I am making a note of the private iCal address.

Establishing a model

In order to populate the Calendar component, it requires data to adhere to the CalendarEvent model established in the API. This model includes the following properties:

• endDate
• eventColor
• isAllDay
• startDate
• title

This is a great model for a base calendar, however, I need a little more information captured in my events, so I created a new class that extends the CalendarEvent model – adding to it a couple more properties. Here is a listing of my app/models/calendar-event-extended.ts file:

import { CalendarEvent } from "nativescript-ui-calendar";
import { Color } from "tns-core-modules/color/color";

export class CalendarEventExtended extends CalendarEvent {
    description: string;
    location: string;
    constructor() {
        const maxDate = new Date(8640000000000000);
        const minDate = new Date(-8640000000000000);
        super("None", minDate, maxDate, false, new Color(200, 188, 26, 214));
        this.description = "";
        this.location = "";
    }
}

Creating a service class

I have my project setup to have service classes to retrieve data from Firebase Firestore or any other external data source. This is where I will put my class that is responsible for pulling, parsing and transforming the iCal data into the CalendarEventExtended structure. Here is a listing of my services/calendar-service.ts file:

import * as moment from "moment";
import { getString } from "tns-core-modules/http";
import traceModule = require("tns-core-modules/trace");
import { CalendarEventExtended } from "../models/calendar-event-extended";

export class CalendarService {
     private _icsUrl: string = "";
     constructor(icsUrl: string) {
         this._icsUrl = icsUrl;
     }
     getCalendarEventsPromise(): Promise<Array<CalendarEventExtended>> {
         return new Promise<Array<CalendarEventExtended>>((resolve, reject) => {
            getString(this._icsUrl).then((content) => {
                const calEvents = new Array<CalendarEventExtended>();
                const lines = content.split("\n");
                let entry = new CalendarEventExtended();
                lines.forEach((itm) => {
                    if (itm.indexOf("BEGIN:VEVENT") === 0) {
                        entry = new CalendarEventExtended();
                    } else if (itm.indexOf("DTSTART") === 0) {
                        if (itm.indexOf("VALUE=DATE") >= 0) {
                            entry.isAllDay = true;
                            entry.startDate = this._getDateOnlyFromIcalString(itm);
                        } else {
                            entry.startDate = this._getDateTimeFromIcalString(itm);
                        }
                    } else if (itm.indexOf("DTEND") === 0) {
                        entry.endDate = (itm.indexOf("VALUE=DATE") >= 0) ?
                                    this._getDateOnlyFromIcalString(itm) :
                                    this._getDateTimeFromIcalString(itm);
                    } else if (itm.indexOf("SUMMARY") === 0) {
                        entry.title = this._getTextFromIcalString(itm);
                    } else if (itm.indexOf("DESCRIPTION") === 0) {
                        entry.description = this._getTextFromIcalString(itm);
                    } else if (itm.indexOf("LOCATION") === 0) {
                        entry.location = this._getTextFromIcalString(itm);
                    } else if (itm.indexOf("END:VEVENT") === 0) {
                        calEvents.push(entry);
                    }
                });
                resolve(calEvents);
             }, (err) => {
                 traceModule.error(err);
                 reject(err);
             });
         });
     }
     private _getDateTimeFromIcalString(str: string): Date {
        const dteNum = str.split(":")[1];
        const m = moment(dteNum, "YYYYMMDDTHHmmssZ");

        return m.toDate();
     }
     private _getDateOnlyFromIcalString(str: string): Date {
         const dteNum = str.split(":")[1];
         const m = moment(dteNum, "YYYYMMDD");

         return m.toDate();
     }
     private _getTextFromIcalString(str: string): string {
        const idx = str.indexOf(":");

        return str.substr(idx + 1).replace("\\", "");
     }
}

From the code above, you can see that I am pulling the iCal data from a url and parsing its content. This is only providing basic parsing, I don’t have logic in there to deal with recurrence rules, so this will work in the basic calendar usage case. I am also utilizing the trace module for logging functionality, so if you are not using that – it can be removed. The getCalendarEventsPromise function returns just that, a promise that it will retrieve, parse, and transform the calendar data into an array of CalendarEventExtended objects.

Establishing a View Model

In this application, what I needed to do is display the calendar with events, then when a date is selected, to list the events for that date in a list below the calendar (I am also using the ListView component from UI from NativeScript). This View Model is also responsible for setting styles for the calendar, most of which I retained as the defaults. You will notice that I am importing another service, application-service – this is where I have set things like the iCal url as well as the color palette for the application. The listing for view-models/calendar-view-model.ts is as follows:

import { Observable } from "data/observable";
import { ObservableArray } from "data/observable-array";
import * as Moment from "moment";
import * as MomentRange from "moment-range";

import { CalendarDayViewStyle, CalendarEventsViewMode, CalendarMonthNamesViewStyle, CalendarMonthViewStyle, CalendarSelectionEventData, CalendarSelectionMode, CalendarTransitionMode, CalendarViewMode, CalendarWeekViewStyle, CalendarYearViewStyle, DayCellStyle, SelectionShape } from "nativescript-ui-calendar";
import { CalendarEventExtended } from "../models/calendar-event-extended";
import { applicationService } from "../services/application-service";

const moment = MomentRange.extendMoment(Moment);

export class CalendarViewModel extends Observable {
    private _calendarEvents: ObservableArray<CalendarEventExtended> = new ObservableArray<CalendarEventExtended>();
        private _calendarEventsFiltered: ObservableArray<CalendarEventExtended> = new ObservableArray<CalendarEventExtended>();
    private _selectedDate: Date = new Date();

    constructor() {
        super();
    }

    get selectedDate(): Date {
        return this._selectedDate;
    }

    set selectedDate(dte: Date) {
        this._selectedDate = dte;
    }

    get calendarEvents(): ObservableArray<CalendarEventExtended> {
        return this._calendarEvents;
    }

    get calendarEventsFiltered(): ObservableArray<CalendarEventExtended> {
        return this._calendarEventsFiltered;
    }

    updateCalendarEventsFiltered(events: Array<CalendarEventExtended>) {
        this.calendarEventsFiltered.length = 0;
        if (events && events.length) {
            for (const ce of events) {
                this.calendarEventsFiltered.push(ce);
            }
        }
    }

    updateCalendarEvents(list: Array<CalendarEventExtended>) {
        this.calendarEvents.length = 0;
        if (list && list.length) {
            for (const ce of list) {
                this.calendarEvents.push(ce);
            }
        }
    }

    onDateSelected(args: CalendarSelectionEventData) {
        this.calendarEventsFiltered.length = 0;
        if (args.date) {
            const filtered = this.calendarEvents.filter((itm, idx, calendarEvents) => {
                const range = moment().range(moment(itm.startDate).startOf("day"), moment(itm.endDate).endOf("day"));

                return range.contains(args.date);
            });
            this.updateCalendarEventsFiltered(filtered);
        }
    }

    get selectionMode() {
        return CalendarSelectionMode.Single;
    }

    get viewMode() {
        return CalendarViewMode.Month;
    }

    get transitionMode() {
        return CalendarTransitionMode.Slide;
    }

    get eventsViewMode() {
        return CalendarEventsViewMode.None;
    }

    get monthViewStyle(): CalendarMonthViewStyle {
        const monthViewStyle = new CalendarMonthViewStyle();
        monthViewStyle.backgroundColor = applicationService.iconsTextColorHex;
        monthViewStyle.showTitle = true;
        monthViewStyle.showWeekNumbers = false;
        monthViewStyle.showDayNames = true;
        monthViewStyle.selectionShape = SelectionShape.None;

        const todayCellStyle = new DayCellStyle();
        todayCellStyle.cellBackgroundColor = applicationService.primaryColorHex;
        todayCellStyle.cellBorderWidth = 2;
        todayCellStyle.cellBorderColor = applicationService.primaryColorHex;
        monthViewStyle.todayCellStyle = todayCellStyle;

        const dayCellStyle = new DayCellStyle();
        dayCellStyle.eventTextSize = 4;              monthViewStyle.dayCellStyle = dayCellStyle;

        const weekendCellStyle = new DayCellStyle();
             weekendCellStyle.cellBackgroundColor = applicationService.extraLightPrimaryColorHex;
               monthViewStyle.weekendCellStyle = weekendCellStyle;

        const selectedCellStyle = new DayCellStyle();
               selectedCellStyle.cellBackgroundColor = applicationService.accentColorHex;
        monthViewStyle.selectedDayCellStyle = selectedCellStyle;

        return monthViewStyle;

    }

    get weekViewStyle(): CalendarWeekViewStyle {
        const weekViewStyle = new CalendarWeekViewStyle();
                              

        return weekViewStyle;
    }

    get yearViewStyle(): CalendarYearViewStyle {
        const yearViewStyle = new CalendarYearViewStyle();

        return yearViewStyle;

    }

    get dayViewStyle(): CalendarDayViewStyle {
        const dayViewStyle = new CalendarDayViewStyle();
          
         return dayViewStyle;
    }

    get monthNamesViewStyle(): CalendarMonthNamesViewStyle {
        const monthNamesViewStyle = new CalendarMonthNamesViewStyle();
        return monthNamesViewStyle;
    }
}

From the code above, you can see that I am using MomentJS and the extensions available in Moment-Range packages – both are available via npm. You can also see that I’ve created an event onDateSelected that will filter events by the date selected – these will be displayed in the ListView.

Date Formatting Display Pipe

In my list view, I also wanted to format the dates and times in a specific format, as such I created a simple DateTimeFormatter pipe to transform my data to the desired format. This formatter must be in your @NgModule declaration in order to use it. The source code for the pipes/dateTimeFormatter.ts is as follows:

import { Pipe, PipeTransform } from "@angular/core";
import * as moment from "moment";

@Pipe({
    name: "sgDateTimeFormatter",
    pure: true
})

export class DateTimeFormatter implements PipeTransform {
    transform(dte: Date): string {
        return moment(dte).format("MM/DD/YYYY h:mm A");
    }
}

Finally – the view!

The component code for my application Calendar module utilizes another plug-in for displaying the events list as a series of cards. I am also using the angular drawer navigation template as the basis of my application. My component source file listing is as follows (app/calendar/calendar.component.ts):

import { AfterViewInit, Component,  OnInit } from "@angular/core";
import * as app from "application";
import { registerElement } from "nativescript-angular/element-registry";
import { CardView } from "nativescript-cardview";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import { applicationService } from "../services/application-service";
import { CalendarService } from "../services/calendar-service";
import { CalendarViewModel } from "../view-models/calendar-view-model";

registerElement("CardView", () => CardView);

@Component({
    selector: "Calendar",
    moduleId: module.id,
    templateUrl: "./calendar.component.html"
})
export class CalendarComponent implements OnInit, AfterViewInit {
    vm: CalendarViewModel = new CalendarViewModel();
    constructor() {
        // Use the component constructor to inject providers.
    }

    ngOnInit(): void {
        // Init your component properties here.
    }

    ngAfterViewInit(): void {
        const svc = new CalendarService(applicationService.calendarUrl);
        svc.getCalendarEventsPromise().then((result) => {
            this.vm.updateCalendarEvents(result);
        });
    }

    onDrawerButtonTap(): void {
        const sideDrawer = <RadSideDrawer>app.getRootView();
        sideDrawer.showDrawer();
    }
}

From the code above, you can see that it utilizes the service that was created to pull back data and populate the view model.

The view listing is as follows (calendar.component.html):

<ActionBar class="action-bar">
    <!-- 
    Use the NavigationButton as a side-drawer button in Android
    because ActionItems are shown on the right side of the ActionBar
    -->
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <!-- 
    Use the ActionItem for IOS with position set to left. Using the
    NavigationButton as a side-drawer button in iOS is not possible,
    because its function is to always navigate back in the application.
    -->
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
        ios.position="left">
    </ActionItem>
    <Label class="action-bar-title" text="Calendar"></Label>
</ActionBar>

<GridLayout rows="2*,*" columns="*" class="page page-content">
    <RadCalendar [eventSource]="vm.calendarEvents"
        [monthViewStyle] = "vm.monthViewStyle" [weekViewStyle]="vm.weekViewStyle"
        [monthNamesViewStyle] = "vm.monthNamesViewStyle" [yearViewStyle]="vm.yearViewStyle"
        [dayViewStyle]="vm.dayViewStyle" [transitionMode]="vm.transitionMode"
        [selectionMode]="vm.selectionMode" [eventsViewMode]="vm.eventsViewMode" 
        [selectedDate]="vm.defaultDate"
        (dateSelected)="vm.onDateSelected($event)"
        row="0" col="0">
    </RadCalendar>
    <RadListView [items]="vm.calendarEventsFiltered" row="1" col="0">
        <ng-template tkListItemTemplate let-item="item">
            <CardView class="cardStyle" elevation="10" radius="1">
                <StackLayout orientation="vertical">
                    <Label class="primary-header" [text]="item.title"></Label>
                    <StackLayout class="list-item-divider"></StackLayout>
                    <Label class="secondary-header" [text]="item.description"></Label>
                    <StackLayout margin="5" *ngIf="!item.isAllDay">
                        <Label text="Start Date: {{item.startDate | sgDateTimeFormatter}}"></Label>
                        <Label text="End Date: {{item.endDate | sgDateTimeFormatter}}"></Label>
                    </StackLayout>
                    <StackLayout margin="5" *ngIf="item.isAllDay">
                        <Label text="Date: {{item.startDate | sgDateTimeFormatter}}"></Label>
                    </StackLayout>
                  
                </StackLayout>
            </CardView>
        </ng-template>
    </RadListView>
</GridLayout>

Here is what the resulting code looks like on a device:

Wrap-up

One of the nice things about NativeScript is its flexibility. I like that I am easily able to extend it using JavaScript and leverage many of the helper libraries available on NPM to get me where I need to go. This is just a simple example of how you can provide an in-application native experience to your users while still using information you’ve already got published on the web.