bridgedotnet / Widgetoko

A Node.js and Electron demonstration app written in C# then compiled to JavaScript using Bridge and Retyped.

Check out the Widgetoko announcement blog post.

Widgetoko enables users to connect to Twitter and watch tweets arrive in real-time that match a specified search term.

There are several options for installing Widgetoko. Packaged installers are available as .exe (Win) and .dmg (Mac), or you can build the project from the original source code.

Introduction

Installers

Build from source

Requirements

1. Install Yarn

Start

1. Clone the Widgetoko repo or download source
2. Using the Command (Win) or Terminal (Mac), browse to the /dist directory
3. Run the following yarn command:

yarn install

If this is your first time running yarn install on the /dist/ folder, Yarn may take a few minutes to download the required packages. Just let the process run.

Once yarn install is complete, run the following yarn start command and an instance of the Widgetoko app should start automatically.

yarn start

Compile C# source

The above steps will run the previously released JavaScript files in the /dist folder, but it's also very easy to fully recompile the original C# source code in Visual Studio to refresh the JavaScript output files.

1. Double click the /src/Widgetoko.sln file to open in Visual Studio
2. Select Build > Rebuild Solution from the main Visual Studio menu
3. Run the command yarn install (if you have not done so earlier)

You can then start an instance of the Widgetoko app by running the command yarn start.

It is also possible to start Widgetoko directly from Visual Studio by clicking the Start button or hitting F5 or Ctrl + F5, BUT FIRST... there are two Project Properties that need to be set (see image below).

1. Right-click on the Widgetoko Project in the Solution, and select Properties
2. Under the Debug tab, select Start external program and paste the value ..\dist\node_modules\electron\dist\electron.exe
3. In the Command line arguments field, paste the value ../../../dist

Now the Start button will work as expected and the Widgetoko app will launch.

Configure Twitter Tokens

A connection to the Twitter Stream is required, so we must register the Widgetoko app with Twitter and generate Access Tokens. This is a required step to tap into the Tweet stream.

1. Browse to https://apps.twitter.com/app/new

2. Fill in the fields (App name, Description, WebSite). You should use your own unique Application name, and any values you want for the other fields.

1. Press Create your Twitter application button.

2. The application has been created. Now go to Keys and Access Tokens tab.

3. Press Create My access token button to generate keys.

4. That's it, all tokens are generated:

1. The last step. You should copy-paste those tokens into Widgetoko app. Run Widgetoko, press F2 (or File > Options) to open Options form, paste your tokens as shown below. Click Save.

Security Notice:

Your tokens will be saved in %appdata%/widgetoko/UserSettings.json in an obfuscated format. You have several options to remove tokens afterwards:

• Just delete that file.
• Replace the Options form with empty values, then click Save to overwrite your old token values.
• Invalidate the tokens from the Twitter app configuration, or just delete the app from Twitter.

Build Installers

Creating an actual installer for the Widgetoko app is very simple. To create the installer, use the following steps:

1. Clone this repo (if you have not done so already)
2. With a Command Window (Windows) or Terminal (Mac), browse to the /dist directory
3. Run the following yarn commands:

yarn install
yarn build

Installers can be created for Mac, Windows, and Linux. The installer creation process should take no more than a few minutes, but needs to be run on each platform you support. If you want an .exe for Windows, run the command on a Windows machine. Need a Mac installer? run the command on a Mac.

The installer files, such as .exe (Win) and .dmg (Mac), will be added to the /dist/installers/ folder and those files can be deployed to your users.