A few weeks back we started kicking around some ideas for leveraging Retyped and Bridge to build an actual cross-platform desktop application.

The plan was to build something that might actually have some utility in the “real world” and be far more feature complete than the typical canned scenarios (we have those too, see Retyped Demos and Deck.NET).

We sketched out some goals:

Build a “real” desktop application

Install on Mac and Windows

Exact same code base for both platforms

Write the app entirely in C#

Use a variety of Retyped binding libraries

Connect to a live data stream, such as social media or financial data

Render the data as it arrives in real-time

Save something to the file system

Use the native OS menu system

Sending system notifications would be fun

Build something useful

Technology Stack

The entire Bridge team lives in Slack and we use Slack almost exclusively for our team communication and file sharing. It’s hard not to be impressed with the quality of the Slack app and how consistent the UI feels across Windows and Mac OS. Let’s try to leverage some of the same framework pieces as Slack for our application.

The desktop versions of Slack for Mac and Windows are basically web applications running in a web browser shell that act as native desktop software. The shell is provided by a framework called Electron authored by GitHub. Electron enables developers to easily build cross-platform applications with rich user interfaces.

The Electron container includes an instance of Chromium (think Google Chrome) as the web browser, so you always know the web browser version you are building for, and have none of the “browser hell” issues of having to support outdated browsers.

You write your Electron application like a web app, but you can also tap into native features such as the file system, menus, and system notifications.

Slack is far from the only high profile major league product being built on Electron. Microsoft choose Electron as the platform to develop Visual Studio Code upon. That’s a quality vote of confidence for the framework.

Do you use GitHub Desktop? Yep, that’s an Electron app too. How about WordPress Desktop? Electron.

We knew we wanted to use Electron, and since Retyped includes support for the Retyped.electron package, within minutes we had our cross-platform desktop project underway. All it took was one simple NuGet command:

install-package retyped.electron

Introducing Widgetoko

We are thrilled to announce the release Widgetoko into the wild.

Meet Oko. She hangs out silently around the Widgetoko app keeping a keen eye on all those Tweets streaming by. When something catches her attention, she grabs it.

The following quick video will help introduce Widgetoko and covers installation, connecting to Twitter, and the main features.

The intro video demonstrates Widgetoko for Windows, but if you’re on a Mac, all the features and functionality are exactly the same… but all Macified.

Installers

It takes only minutes to build Widgetoko from the original C# source code, but if you want to jump straight into using the app, Windows (.exe) and Mac (.dmg) installers are available to download.

Features

In order for Widgetoko to connect to the Twitter Stream, you need to register with Twitter. The intro video from earlier demonstrates how to register and generate the Access Tokens, but it’s a simple process that should only take a few moments. We also documented the process in the project README.

Once Widgetoko is connected to Twitter, enter a filter term and click the Start button. If you search a popular term, the tweets should start flowing in right away.

Multiple filter terms can be combined using a comma function as an or command. Filters separated by a space function as an and command.

Widgetoko also demonstrates how to configure a Theme switcher options. Select View > Theme > Light|Dark from the menu to switch.

Double-clicking a Tweet will open your default web browser and navigate to the location on twitter.com.

System Notification can be turned on by flipping the Notifications switch. Widgetoko will buffer the notifications to avoid flooding the desktop with notifications during rapid captures. A maximum of one notification will be sent every 10 seconds.

Clicking the Notification will again open the Tweet in a web browser.

When minimized, Widgetoko becomes a System Tray app running silently in the background until a tweet is captured.

Explore around through the menu options and let us know if you have any suggestions for enhancements.

Technical Highlights

The main technical highlights of Widgetoko include:

100% cross-platform desktop application deployed on Win and Mac

Minimal and stable RAM and CPU usage

Instant capturing of Tweets and Retweets

Written entirely in C#

Very basic HTML and CSS skills required

Native installers for Win (.exe) and Mac (.dmg)

Human Effort

The project involved three team members with the following roles, responsibilities, and rough estimates for time working on the project.

Role: Developer

Responsibility: Build it

Main Tasks: Project setup, C# app logic, Twitter API integration

Time: ~40 hrs (20 hrs initial prototype + 20 hrs enhancements)

Role: Designer

Responsibility: Design it

Main Tasks: UI design and build with HTML + CSS

Time: ~20 hrs (8 hrs design + 12 hrs UI build)

Role: Project Manager

Responsibility: Organize it

Main Tasks: Team coordination, refinements, testing, docs, misc

Time: ~10 hrs (time here and there)

In total, we’re into the project for approximately 70–80 hours spread across three people and two weeks. That’s starting from a position of having no solid idea whatsoever on what we were going to build, then and continuing until today with the deliverable of a quality software product working on Mac and Windows.

List of tools

Widgetoko is a place where a set of technologies comes together:

Visual Studio 2017 and GitHub for code management

and for code management NuGet packages simplify adding .NET libraries into the project

packages simplify adding .NET libraries into the project NPM packages for efficient managing of JavaScript libraries

packages for efficient managing of JavaScript libraries Retyped.electron provides the Electron API binding library for C#

provides the Electron API binding library for C# Retyped.jquery package for HTML dom manipulation

package for HTML dom manipulation Simple custom Twitter binding library for connecting to Twitter stream

binding library for connecting to Twitter stream Bridge.NET to compile C# into JavaScript code

to compile C# into JavaScript code JavaScript code of Main process is executed by Node.js

Forms and Renderer process logic is handled by Chromium

Installers are created with a single Yarn command and electron-builder

command and Electron container to hold it all together

Electron features

Widgetoko demonstrates the following features of Electron:

Implementing logic in C# for Main and Renderer processes Creating windows (modal and non-modal) and managing them Adding a customized Main menu Adding to the application tray Writing to the native file system Communicating between Main and Renderer processes Opening external links in a default browser Creating system notifications Showing system dialog messages Getting user system information

Open source

Widgetoko is open-source software and the entire project is released under the open-source Apache 2.0 license.

If you find a bug or feel inspired to work on an Issue, please feel free to send a Pull Request and we will review.

} finally {

From the start, we were confident that we were going to make something work, but the power, flexibility, and quality of software product that resulted was nothing short of an epiphany.

Building Widgetoko has been an incredibly interesting and fun project. We hope you can learn as much from Widgetoko as we have, and please feel free to use Widgetoko as a launching point to build your own software development project.

Check out the Widgetoko project on GitHub to get started.

Tweet Tweet