The coolest Emerging Experiences WinRT application on CNN during the US presidential election

Well, there’s this little thing called United States Presidential Election today.  And because of that there is a group of totally overworked & stressed out InterKnowlogy folks in the CNN broadcast center in Washington DC.

It’s estimated that 250-350 Million people around the world will be watching John King, Wolf Blitzer, and Anderson Cooper of CNN use the coolest Emerging Experiences WinRT application that we have built for them – The CNN Magic Wall.

I’m told CNN will use the on air broadcast “Magic Wall” application for 14 straight hours with just a couple commercial breaks.  Yep, that means this monster of a C# / XAML / Direct X app doesn’t have an SLA of triple 9s; it has to stay up 100% of the time; 24/7.

It’s not a surprise that ratings are through the roof for CNN.  But, so are Fox’s and MSNBC’s and everyone’s.  Never in the history of the US have both candidates been so vehemently hated which is going to manifest in the biggest voter turnout in the history of the United States.  The people in the know tell me that we are going to see a huge millennial vote today.

We have built some new features into the application specifically for this election night and you CNN junkies will notice them.

Feel free to ping me if you need the PR stuff, Social media, contact stuff, etc.

1 2 3

 

 

 

The first ever Emerging Experiences (EE) Track is at Dev Intersection, October 25-28

I am very excited to report that the first ever Emerging Experiences (EE) Track is at Dev Intersection, October 25-28, at the MGM Grand in Las Vegas, NV.

I’m serving as track chair for the EE track.  It’s taken months of planning.  Here’s a little teaser Video with Richard Campbell and Giorgio Sardo talking about the keynote at the EE track.

https://channel9.msdn.com/Shows/The-DEVintersection-Countdown-Show/Giorgio-Sardo-and-Richard-Campbell-talk-Emerging-Experiences-at-DEV-intersection-Fall-Count-Down-Sho

What are emerging experiences?  It’s the intersection of machine learning and More Personal Computing, where magic is being created on a daily basis.  It’s a MSFT driven term that encompasses everything cool and cutting edge: Hololens, Cognitive Services, Machine Learning, Kinect, bot fmx, Cortana, Band, SurfaceHub, etc.

We have quite a lineup of sessions to be given by the best of the best at MSFT, and some 3d party RD & MVPs too.  Bill Buxton himself is even speaking in the track!

Anna Roth from MSFT Cognitive Services is speaking in the track.  Lots more great MSFT EE expert / speakers are in the track like: Mat Velloso, Keith Harold and Pete Brown

We also have a post-con called “Mixed Reality Essentials: a concise course” given by EE experts James Ashley and Dennis Vroegop where you can learn all this stuff in a more classroom like format.  If you ever wanted to learn stuff like how to build unity apps for hololens this would be the conference to attend.

Use the Discount code below to register:

dev_300x250_huckaby_rev

Keeping .NET app settings secrets out of source control

Keeping .NET app settings secrets out of source control

Whether your app is a desktop client app or a website, it’s important to keep passwords, connection strings, and API keys out of source control. In .NET, these settings are stored in a app.config or web.config file depending on the type of app you are building and those files would be checked into source control. I’ve done this in the past for many projects. Of course, I never committed production secrets, but it was still a big no-no, but I just never had the time to investigate the proper way to handle this situation…until today.

A quick Google search returned this result: http://www.asp.net/identity/overview/features-api/best-practices-for-deploying-passwords-and-other-sensitive-data-to-aspnet-and-azure. Config files have a simple way of handling this by adding a file attribute to the appSettings section of the web.config file, like so

<appSettings file="secrets.config">
  <add key="testSetting" value="not a secret" />
</appSettings/>

And the secrets.config file looks like this

<appSettings>
  <add key="secretTestSetting" value="very secret" />
  <add key="testSetting" value="I will overwrite" />
</appSettings>

This is the entire file, it is important that the root element is <appSettings> , otherwise you will get a compile or runtime error. Any new keys defined will be added and any existing keys will overwrite the value from the web.config.

Overwriting values in the web.config is very useful for local development. Since the secrets.config file is never checked in, each developer can keep their own local app settings values without worrying about mistakenly checking them in and overriding the web.config default values. No more commenting out values in your web.config!

The same thing works for the connectionStrings section, except in this case the entire section is overwritten. In fact, the web.config can’t have any elements under it or you will get errors. The web.config will look like this

<connectionStrings configSource="connectionStrings.config">
</connectionStrings>

And the connectionStrings.config will look like this

<connectionStrings>
  <clear/>
  <add name="Database" connectionString="very secret" />
</connectionStrings>

As long as your extra files have the .config extension, IIS will never serve them. Also, you should never add these secrets config files to your project to avoid mistakenly deploying them to your servers. Instead, your release process should deploy secrets files separately from code files.

And finally, always add secrets.config and connectionStrings.config to your .gitignore and to get first-time developers setup with secrets, you could include these files somewhere outside of source control, like a file share.

That’s all! Super easy way to keep all your secrets safe in both desktop and web applications. Find the code here: https://github.com/svarcoe/AppSecretsDemoProject

InterKnowlogy’s Technology for the 2016 United States Presidential Election

Democratic National Convention Voting App Log in

Democratic National Convention Voting App Log in

Background

Since 2008 IK has been building software for The US presidential elections and for customers like the United States Library of Congress. In 2012 we delivered a cutting edge solution for capturing ballot voting results on tablets to the Democratic National Convention Committee (DNCC) during the DNCC national convention. That reporting solution was one of many other app experiences we’ve created in the election and campaign space of civic technology.

DNC Admin console

DNC Admin console – test data

Technology at the Democratic National Convention

Now, in 2016, we’re updating the DNCC app with a variety of new features including enabling real-time viewing of delegate voting by state on the convention floor. The data from the voting is fed to systems that report in to giant screens, updating the status of each state’s votes in real time for everyone at the convention (and the world for that matter because it’s covered by broadcast TV worldwide) to see. We take pride in our user interaction design; the delegates love the voting applications because the user experience is intuitive.

Test data - The CA vote from the DNC admin console

Test data – The CA vote from the DNC admin console

CNN’s on air Broadcast Software: The Magic Wall

Throughout the year long process of selecting the next President of the United States, you have seen CNN broadcast journalists John King, Wolf Blitzer and Anderson Cooper analyze live results on the CNN Magic Wall we fir built a few years back. Since that we’ve continued to add a ton of functionality including the new features you are seeing right now that visualize tracking the delegates during the presidential primaries.

John King of CNN using the "Magic Wall" that IK built for him

John King of CNN using the “Magic Wall” that IK built for him

John King of CNN using the “Magic Wall” that IK built for him

Technology built for the Iowa Caucus

The Software we have built specifically for the conventions comes right on the heels of our successful projects for the Iowa Caucuses. Not wanting a repeat of the disastrous reporting and mistakes in 2012, both the Republican and Democratic parties of Iowa turned to InterKnowlogy for the first digital voting experience in Iowa Caucus history. InterKnowlogy played the lead role in transforming how caucuses and primaries can be run more efficiently, securely and reliably. There were countless hours of meetings with both political parties, UX design work to define the system, user interaction design to ensure ease of use, and a huge design and development effort to create more than a dozen mobile apps, IVR integration (for backup and for those that didn’t have access to computers or smartphones), back office workflow apps, and web applications for the public. On February 1, 2016, the night of the Caucuses, we were ready for an all-nighter to watch our work in action. But using our technology solution, both parties were able to securely and accurately report results in just 3 hours!

The Applications IK built for the 2016 Iowa Caucus

The Applications IK built for the 2016 Iowa Caucus

NDA until November (C3)

In November during the elections, you are going to see an application we are building that is “God’s gift to big data and data visualization”.  It’s NDA and embargoed until then so I can’t go into details.  But, it’s built on:  UWP, AzureSQL, AzureAD, Azure Blobs, Azure Tables, multiple queues and worker roles. We actually do dynamic SQL table generation in this platform to support PowerBI consumption of the data.

Of interest

We have prototyped the CNN Magic Wall, Hololens Version, and CNN’s initial reaction was positive.

Technology Stack

· CNN:

Magic Wall On-Air

WinRT, DirectX (3D and 2D), SQL, tons of http/JSON to CNN servers.

Magic Wall Online

Azure Web App: Angular (v1), TypeScript,, Web Sockets, Azure caching (Redis?), Azure SQL, Traffic Manager, Azure CDN …  

Azure Web API

Cloud service (fetch data from CNN servers and store in SQL)

Azure media services (upload, process, and serve videos)

· DNC Voting & reporting Applications:

WPF+SQL

· Iowa Caucus Applications:

  • 12 Mobile apps
    • iOS, Android, Windows + Tablet (for each party)
    • Mobile voting apps to collect voting results from precincts
    • Xamarin
    • stores results in the cloud
  • 2 UWP validation apps
    • apps for party officials to validate results
  • 4 ASP .NET + angular= typescript websites for public and media results reporting
  • 2 twilio IVRs (for each party)
  • Plus services and databases in Microsoft Azure

The Future

Our work in civic technology won’t be done with the election in November. As the leading expert in civic technology, InterKnowlogy is working on many more projects that will continue to transform election technology.

Getting Started with Azure Mobile Apps

Earlier this year I worked on an awesome project for IMSA. While the project was full of challenges such as Xamarin.Forms there was one part of the project that ran smoother than the rest. That part was our Azure Mobile Service. Since completing that project Azure has released a new product named Azure Mobile Apps which is an even more comprehensive solution for creating Web APIs for mobile apps. The new name is a bit confusing, but rest assured Azure Mobile Apps does not refer to the actual App package running on a device.

Why?

Before Azure Mobile Apps and Azure Mobile Services the work a developer had to perform to provide a simple API to their mobile app was quite extensive. Standing up a website with a RESTful API was only step 1. If you wanted to see metrics about how healthy your API was you’d have to go find a solution from another provider and integrate it manually. You’d have multiple places to manage your mobile app. Your database might have lived in Azure, but it’s wouldn’t have been related to any grouping of services. The ability to manage this world effectively became unreasonable and difficult very quickly.

Azure Mobile Apps provide all the necessary services to provide and support an API for your mobile app. It also groups all those services in one easy to manage location in the Azure Preview Portal. In my experience the provided services and grouping of those services has provided critical time saving and sanity preserving assistance compared to previous solutions. This is especially true because of the awesome integration with Visual Studio.

What does it do?

Azure Mobile Apps provide a suite of Azure services which are used for working with mobile app development and support. You can read their details here. All of the services are grouped into a single Resource Group. This organization is awesome! It helps you comprehend and manage all of the services used by your mobile app effectively. The default services included are:

  • Web App (aka: A website which hosts Web API Controllers)
  • Application Insights (For the Web App)

You can also add in any number of services into this Resource Group. For example you’ll probably add a Database Server and Database to store the data for you mobile app. Adding theses services allow you to leverage Entity Framework in your mobile app, which is a really cool feature.

How much does it cost?

It would be silly for me to try to repeat the values quoted my Microsoft since Azure changes things quite frequently. You can find the official pricing here. Everyone has a different definition of “affordable”, so I’ll only say that in our experience here at InterKnowlogy this service has been worth every penny!

How do I set it up?

Go to the Preview Portal. In the bar on the left click the “+ New” button. Select the “Web + Mobile” category. Select the Mobile App offering. Fill out all the data. I suggest creating a new Resource Group specifically named for this Mobile App. In my demo I’m creating a Secret Santa app so my Resource Group name is SecretSanta and my Web App name is SecretSantaApp.

image

Click the Create button and Azure will now create all the services mentioned before in a single Resource Group. When Azure notifies you that it’s done you’ll see something like this when you navigate to your Resource Group.

image

You can modify what level of service you want to use for your Web App. From the Resource Group blade click your Web App which is the item with the blue sphere. You’ll see a pair of blades like this:

image

On the right you’ll see Application Settings where you can modify any AppSetting or ConnectionString that is specific to this deployment in Azure. These settings persist in Azure across publishes. This means that you can have AppSettings and ConnectionsStrings for Local development that do not get used in Azure.

To change you Web App’s service plan look under the Essentials section and click the link under the header “App Service plan/pricing tier” which will open the following blade:

image

Click the “Pricing tier” block to open the “Choose your pricing tier” blade for different plan tiers.

image

In the image above you only see a few of the many options. For this demo I selected F1 Free which is a very limited plan, but it doesn’t cost anything which is nice for a demo or proof of concept. You can change your plan at any time. After selecting your desired plan click Select and your plan will be applied.

Now there is a bug in the link to Quickstart at the time of this writing. So at this point if you’re following along, close all the open blades using the ‘x’ button in the top right of the dark blue header.

Reopen your Resource Group and then open your Web App again. This time pay attention to the far right Quickstart blade which should look like this:

image

Azure has provided us with an awesome set of getting started tools for a bunch of different platforms. For the sake of this demo we’ll stick with Windows C#. Click on the Windows C# option. You should now see:

image

You’ll now notice that step 1 is to get Visual Studio 2015 installed. Microsoft offers the Community Edition straight up here in case you don’t have it yet. Step 2 allows you to download a starting point for your service in the cloud. Download this code and explore it. There is a lot going on. We will not cover the source in this demo. The source in basically a Web API project where you can add your Web API Controllers and build it out like you would any other Web API project. Lastly step 3 allows you to download an app that is ready to use with the Web API project you downloaded in step 2. This is an awesome starting point. The project in step 3 for Windows C# is a Windows 8.1 Universal App. If you want to do UWP and/or switch to another language you can do that just fine. At the top of this blade is a toggle button. Toggle it to Connect an Existing App and then follow the instructions to wire up your custom app that you created to the Mobile App service in Azure.

Finally I want to walk you through getting the Database to set up. At the top of this blade you’ll notice a message stating you need a database in order to complete the quick start. Click that banner. It will open a Data Connections blade. We’ll create a new data connection. Click the Add button. Follow the wizard to fill out all required data. Be sure to select “Create a new database” not “Use an existing database” if you want a new place to store your data. If you already have data that you will now leverage in this Mobile App then point at your existing database. Also, make sure you’re aware which pricing tier you’re selecting for your database. The default is standard which for most demos may cost too much.

image

After your database is created navigate back to your Resource Group. It should look something like this now:

image

You’ll notice the 2 new items. The Database Server ands the Database itself. Now you’re Azure Mobile App is ready for use.

Let’s run it!

You’ve downloaded both the Server and the Mobile App. Before you can use the server app you need to deploy it. The sample code you downloaded is ready for upload with all the settings matching your Mobile App settings. Azure does not auto deploy the server code for you because you will always change it for real projects. Go ahead and deploy the project. Follow the instructions in Microsoft’s Tutorial under the heading “Publish the server project to Azure.”

Limitation Notice

In order for your app to access the database using the default settings you need to modify your ConnectionString named MS_TableConnectionString to use admin credentials not user credentials. This is because Entity Framework code first requires permissions to create a schema for your database. Once the server code is deployed go back to the Azure Portal and open the Web App again. Open the Settings blade and select Application Settings. Modify your connection string MS_TableConnectionString to use admin credentials.

image

Save your changes. Then try out your API. You can try it out in the browser by hitting the URL for your Mobile App and then adding on /tables/todoitem. For example: http://secretsantaapp.azurewebsites.net/tables/todoitem. You should see JSON output similar to this:

image

Once this is working you can run the demo app that you downloaded from Azure. The first load of the app should look like this:

image

WOOT WOOT! Demo DONE! You’re now an expert!

The take away…

While it may have taken 15-30 min. to walk through this demo, after becoming familiar with the creation process Azure Mobile Apps take very little time and effort to get up and running. I’m very grateful for this solution. Here at InterKnowlogy we have used Azure Mobile Apps on many different projects in order to support mobile apps on Windows, Android, and iOS. Maintenance has been very straight forward and the flexibility is great. It feels like such a small thing, but has a profound impact on creating successful mobile app solutions. If you have any questions feel free to reach out on twitter @dannydwarren or here in the comments.

How I met Alexa

On my second week at Interknowlogy they gave me a great task :) work around with Amazon’s Echo, which is a voice command device from Amazon.com that can answer you questions, play music and control smart devices. This device responds to the name “Alexa” (you can configure it to respond to Amazon too). So my main job was to try to find out how Alexa works.

Alexa’s knowledge is given from her skills which you can add at the developer site of amazon . To access this site, you have to register and go to the  Apps&Services section and get started in the Alexa Skill Kit.

 

Capture

Each skill has a Name, Invocation Name (how users will interact with the service), Version and an Endpoint. The last option is the URL service that will provide all the info of your skill to Alexa, you can choose between two options for your endpoint, you can decide between Lambda ARN (Amazon Resouce Name), that has to be developed with Java or Node.js, or your own service, the only thing that amazon requires its that it has to be a HTTPS server.

So I am going to explain how to do an Alexa skill in C# using your own server.

The technologies I used are:

  • ASP.NET Web API
  • Azure Websites

So, to create your Web API you follow the next steps:

Create new project -> ASP.NET Web Application

11-e1438811615167

Choose the Web API option ( from ASP.NET 4.5.2 Templates) and connect it to an Azure Web App.

2

And then you have to Configure all your Azure Website stuff with your credentials to be ready to code :)

 

2015-08-12 (1)

So what we want to do is to create a Controller that will have a post method and this method will receive all the requests from Alexa.


[Route( "alexa/hello" )]
[HttpPost]
public async Task<HttpResponseMessage> SampleSession()
{
   var speechlet = new GetMatchesSpeechlet();
   return await speechlet.GetResponse( Request );
}

To understand all these requests I used AlexaSkillsKit that is a NuGet package made by FreeBusy which you can find in this link, it’s pretty great, it helps you understand how Alexa works. Once you install that package you want to create a class that will derive from Speechlet (FreeBusy’s class) and override the following methods :)

  • OnSessionStarted

private static Logger Log = NLog.LogManager.GetCurrentClassLogger();

public override void OnSessionStarted(SessionStartedRequest request, Session session)
{
    Log.Info("OnSessionStarted requestId={0}, sessionId={1}", request.RequestId, session.SessionId);
}
  • OnLaunch

This method is called at the start of the application.


public override SpeechletResponse OnLaunch(LaunchRequest request, Session session)

{
    Log.Info("OnLaunch requestId={0}, sessionId={1}", request.RequestId, session.SessionId);
    return GetWelcomeResponse();
 }

 private SpeechletResponse GetWelcomeResponse()
 {
    string speechOutput =
       "Welcome to the Interknowlogy's Yellowjackets app, How may I help you?";
    return BuildSpeechletResponse("Welcome", speechOutput, false);
 }
  • OnIntent

This method will identify the intent that Alexa needs, so the API will receive an Intent with a name and it will be compared to do some action.


private const string NAME_SLOT = "name";

public override async Task<SpeechletResponse> OnIntent(IntentRequest request, Session session)
{
   Log.Info("OnIntent requestId={0}, sessionId={1}", request.RequestId, session.SessionId);

   Intent intent = request.Intent;
   string intentName = (intent != null) ? intent.Name : null;

   if ("LastScore".Equals(intentName))
   {

      //method that does some magic in my backend
      return await GetLastMatchResponse();

   }

   if ("GetPlayerLastScore".Equals(intentName))
   {

      Dictionary<string, Slot> slots = intent.Slots;
      Slot nameSlot = slots[NAME_SLOT];
      //method that does some magic in my backend
      return await GetLastMatchPlayerResponse(nameSlot.Value);

   }

   else
   {
      return BuildSpeechletResponse("Hey", "What can I help you with?", false);
   }

   throw new SpeechletException("Invalid Intent");
}

Intents names are preset at amazon’s developer site with a json, and the example is the following:

Capture

In this page you will preset an Intent Schema which is in a Json format:


{
 "intents": [
 {
 "intent": "LastScore",
 "slots": []
 },
 {
 "intent": "GetPlayerLastScore",
 "slots": [
{
 "name": "name",
 "type": "LITERAL"
 }]
}

This json format text describes that there will be two available intents, one named “LastScore” and the other one “GetPlayerLastScore”, and the last one recieves a “field” that is text.

Now the question is… How do I define the sentences and the parameters that the user of my echo will tell to alexa? In the same page of the developer site is a field that let you provide examples of the usage of Alexa. Which are the following:

 

1

Taking the last samples the interaction with alexa will be the following:

Alexa, ask Yellowjackets..

Welcome to the Interknowlogy’s Yellowjackets app, How may I help you?

What was the last ping pong score for Kevin?

…..

 

Build Responses

To Build responses (in custom methods) you will need to build a Speechlet response that contains a speech response and also can contain a card (optional), that is a graphic representation of a response of alexa that is displayed in the Echo App which is available online and in the following mobile OS:

  • Fire OS 2.0 or higher
  • Android 4.0 or higher
  • iOS 7.0 or higher

The only available cards for devs (right know) are the Simple cards, that only contain plain text. Cards with pictures are not open for non-amazon devs.

gscompanionappcard

 

To create a Speechlet response we will be using the cool Freebusy’s Nuget package class SpeechletResponse like this:


 private SpeechletResponse BuildSpeechletResponse(string title, string output, bool shouldEndSession)
 {
    // Create the Simple card content.
    SimpleCard card = new SimpleCard();
    card.Title = String.Format("YellowJackets - {0}", title);
    card.Subtitle = String.Format("YellowJackets - Sub Title");
    card.Content = String.Format("YellowJackets - {0}", output);

    PlainTextOutputSpeech speech = new PlainTextOutputSpeech();
    speech.Text = output;

    // Create the speechlet response.
    SpeechletResponse response = new SpeechletResponse();
    response.ShouldEndSession = shouldEndSession;
    response.OutputSpeech = speech;
    response.Card = card;
    return response;
 }

The next steps will be to complete the skill configuration at amazon’s developer site.  Which will be the SSL certificate, that will be pointing to my domain, because our WEB Api is a wildcard certificate from Azure.

Also you need to enable test mode to check out your service and Alexa’s interaction in your Amazon Echo.

So, there it is, hope this blog helped you in your adventure with Alexa (Amazon Echo) :)

Your Design, Our Development | Agency Partnerships

standout2

You Have Unique Needs as a Design Agency

We understand that and work with you to build innovative and creative application solutions.

InterKnowlogy Agency Partners are some of the most innovative and technologically savvy digital design firms in the business today.
If you want to set your brand apart from the competition, consider a Design Agency Partnership with InterKnowlogy. We partner with agencies to add value to their company by being their “Go To” custom development team and give them an inside track on the latest technology developments in the software solution industry.

InterKnowlogy is the leading source and expertise in the area of custom software and application solutions for Fortune 500 companies.  At InterKnowlogy we meet and collaborate with our partners to understand the project needs and the best approach to tackle it. We want to equip your agency to offer leading edge solutions that make you stand above the rest of the marketplace.
We truly enjoy working with all our agency partners. If you’re part of a design agency that is looking for a quality software development team to partner with, we encourage you to reach out and get in touch with us! Visit our website at www.interknowlogy.com and checkout some of our projects we are happy to answer any questions or provide you with additional information.

We create impact through technology. Get the edge, contact us!

INNOVATORS IN UX, SOFTWARE, & MOBILE APP

 

New IMSA app is maximizing the user experience during live race events!


IMSA Mobile Apps

Though the re-developed version of the IMSA app only launched on May 1st, it is already completely changing the user experience during live race events in a number of significant ways. IMSA can now publish app updates to all user devices with immediate effect, getting important updates, videos and other content out to the people with the press of a button. The app itself is incredibly easy to manage and has already been utilized at a variety of events (including the continental Tire Monterey Grand Prix) without intervention from the IK development team. It’s been downloaded over 31,000 times on the iOS platform alone and almost 3,000 times to the Windows Phone platform. Each platform has its own matching app, allowing users full access to this incredible experience in a format that is designed to work on their own personal mobile device.

The Second Screen Experience

The IMSA app isn’t just a way to recreate the broadcast TV experience on a smaller and more personal device – it’s a way to completely tear it apart and rebuild it from the ground up. If a user is already watching TV, they can use the app to maximize their experience by viewing in car cameras or by getting team and driver details on their mobile device via the app. If the user is at the live event, they can listen to IMSA radio to make sure that they always have the information they need when they need it the most.

At its core, the IMSA app isn’t about taking something old and putting a fresh coat of paint on it – it’s about taking something that already exists and making it exponentially better for the benefit of users everywhere.

The New IMSA App and the User Experience

Even though the IMSA app was only recently released, it is still completely revolutionizing the user experience in a number of interesting and important ways. The IMSA app includes the native ability for a user to receive push notifications, for example, allowing them to get automated reminders prior to certain events that they may want to watch. This means that they won’t have to worry about missing even a second of the high-stakes action that they’re already so heavily invested in.

The IMSA app also allows users to view post event videos, which lets the user continue the experience on their own terms and catch up on certain activities even if they originally missed them when they were broadcast on live TV.

At its core, the new IMSA app is all about empowerment. It’s giving the user the tools necessary to experience live race events however and wherever they want without restriction. If the user wants constant, unfettered access to live footage, they’ve got it from one easy to use platform. If they want to catch up on events that they missed after a hard day at work or school, they’ve got that, too. In just a short period of time, the IMSA app is already changing the face of live race events for all time and for the better.

Want to take your app to the next level?

We would love to hear from you! Visit us at www.interknowlogy.com or email us at curious@interknowlogy.com

IoT: Ping Pong Scoring via Netduino

Combining InterKnowlogy’s thirst for using the latest and greatest technology with our world famous ping pong skills provides the following result:  during RECESS, I am making a small device that allows us to quickly keep a digital score of our ping pong matches.

Internet of Things (IoT) is a hot topic these days, so I decided to implement the ping pong scoring system on a Netduino board.  I had dabbled with an older board a year or more ago, and was frustrated: one of the first things I wanted to do was make a call to a web API service, but there was no network connectivity.  Enter the newest board, the “Netduino 3 WiFi“.  It has a built-in button and LED, but it’s extensible by way of the 3 GOBUS ports, where you can easily hookup external modules.

Hardware setup

Netduino 3 board with Gobus modules

My shopping list

Required Software

Netduino is a derivative of the Arduino board, with the ability to run .NET Micro Framework (NET MF) code.  This means you get to write your “application” for the board using familiar tools like Visual Studio and .NET.  Here are the steps I went through (loosely following this forum post, but updated to current day):

Network Configuration

This board has WiFi (sweet!), which means you need to get it on your wireless network before you go much further.

Use the .NET Micro Framework Deployment Tool (MFDEPLOY) to configure WiFi on the board.

  • Target, Connect
  • Target, Configuration, Network
  • Set network SSID, encryption settings, network credentials, etc.
  • Reboot the device to take on the new settings!
  • GREEN LIGHT means you’re successfully connected to the network (yellow means it’s searching for a network)

Write Some Code!

After installing the VS plug-in, you now have a new project template.

File, New Project, Micro Framework – Netduino Application (Universal)

Go to the project properties and confirm two things:

  • Application, Target Framework = .NET MF 4.3
  • .NET Micro Framework, Deployment.  Transport = USB, Device = (your device)

On-board light

static OutputPort led = new OutputPort( Pins.ONBOARD_LED, false );
led.Write( true );

On-board button

NOTE: There is a bug with the on-board button in the current Netduino 3 board firmware. While your application is running, pressing the on-board button will cause a reset of the device, not a button press in your application. The work-around until the next version of the firmware is to reference the pin number explicitly, instead of using Pins.ONBOARD_BTN. See my forum post for more information.

static InputPort button = new InputPort( (Cpu.Pin)0x15, false, Port.ResistorMode.Disabled );

GO Button

Now attach a GOBUS button module and the code is a little different.  The Netduino SDK provides classes specific to each module that you use instead of general input / output port classes.

The natural way in .NET to react to button presses is to wire up an event handler.  The GoButton class has such the ButtonPressed event, BUT, there’s a bug in the firmware and SDK:  If you react to a ButtonPressed event and in that handler method (or anywhere in that call stack), you make a call on the network, the call will hang indefinitely.  I discuss this and the work around with others in the a Netduino forum post.

It’s kind of ugly, but instead of wiring up to the events, for now (until the Netduino folks get it fixed), you just sample the IsPressed state of the button in a loop.

Add a reference to Netduino.GoButton.

var goButton = new NetduinoGo.Button();
if ( goButton.IsPressed ) { // do something }

Go Buzzer

Add a reference to Netduino.PiezoBuzzer.

var buzzer = new NetduinoGo.PiezoBuzzer();
buzzer.SetFrequency(noteFrequency);

Talk to the Web!

You bought this board because it has WiFi, so you must want to call a web API or something similar.  In my case, I wrote a simple OWIN based Web API service, hosted in a WPF app that is my ping pong scoreboard display.  This gives me the ability to receive HTTP calls from the Netduino board & client code, straight into the WPF application.

So a call from the Netduino application code to something like http://1.2.3.4:9999/api/Scoring/Increment/1 will give player 1 a point!

I do this using the HttpWebRequest and related classes from the .NET MF.

// error handling code removed for brevity...
var req = WebRequest.Create( url );
req.Timeout = 2000;
using ( var resp = req.GetResponse() )
{
	var httpResp = resp as HttpWebResponse;
	using ( Stream strm = httpResp.GetResponseStream() )
	{
		using ( var rdr = new StreamReader( strm ) )
		{
			string content = rdr.ReadToEnd();
			return content;
		}
	}
}

In my case, the results from my API calls come back as JSON, so I’m using the .NET Micro Framework JSON Serializer and Deserializer (Json.NetMF nuget package).

var result = Json.NETMF.JsonSerializer.DeserializeString( responseText ) as Hashtable;
if ( result != null )
{
    Debug.Print( "Score updated: " + result["Player1Score"] + "-" + result["Player2Score"] );
}

Putting that all together, I have a couple physical buttons I can press, one for each player, and a WPF based scoreboard on the wall that removes any confusion about the score!

Hope you too are having fun with IoT!

 

Create A Great User Experience For Your App

User Experience Design Pyrmid

If your app is infuriating to use, users will give up and find an alternative. User experience design also referred to as UXD or UED, is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design combines the user interface, user workflows, animations, gestures, artwork and the overall feeling your app gives to the user. The mobile UX design can make or break the entire user experience and high attention and effort is required on features and designs of an app.

Consider these questions before you start designing an app:

  • Usefulness – How can it simplify or make tasks easier?
  • Usability – Is it user-friendly?
  • Uniqueness – Is it offering something other apps don’t?
  • Accessibility – What is the load time? Do users quickly and easily find what they’re looking for?

Collaborate With the Design & Dev Teams Early On

Involve your UX designer and developers as early as possible into the project. Working with both a UX designer that has an understanding that software is not simply code and a developer team that appreciates the expertise of beautiful and intuitive design can lead to stunning results. The whole team can work together to perfect the app’s user interface.

Ensure There Is a Primary Action and a Next Action On Every Screen

Screens can often be cluttered with too many actions to take, but lower functionality pages often leave users with no next action to take to continue their journey. This also brings up the topic of habituation. Habituation is when a user becomes trained to do a certain action they no longer need to think about it. Using consistent actions to create a focused experience will allow users to quickly and easily explore the app.

Know Your Audience

When designing your app, you need to understand who you are designing it for. App developers tend to be in the age range of 30 to 55, also known as Generation Xers. The two largest demographics in the U.S. are Baby Boomers (55+) and Millennials (Under 30). Knowing who will be using your app can help you build what they want: an intuitive app that meets a need.

Want to take your app to the next level?

We would love to hear from you! Visit us at www.interknowlogy.com or email us at curious@interknowlogy.com