Implementing Google login in Universal Apps

In a recent project I had to implement Google login to an Universal App. I decided to use the native WebAuthenticationBroker control and the implementation was not as straightforward as I hoped. By implementing Google login I mean getting the authentication token that you can then use with your server API.

WebAuthenticationBroker is a good idea but it is implemented rather poorly. It works differently on Windows 8.1 and Windows Phone 8.1 due to the “AndContinue” pattern that Windows Phone 8.1 forces on you. You can solve this with some ifdefs and platform specific code, as always.

The real problem s that the MSDN sample states it works with Google login but it does not. The sample thinks it gets the authentication token but it does not, it just gets the success code that you have to exchange for the authentication token yourself.

Lets start with a basic config

The important things here are your Google app id and Google app secret. The GoogleStartUri also contains permissions that you want to get (profile, https://www.googleapis.com/auth/plus.login and https://www.googleapis.com/auth/plus.me email in my case).

You use this config with a WebAuthenticationBroker call

on Windows 8.1 you get the response data immediately. On Windows Phone 8.1, you have to implement the “AndContinue” pattern.

You use the response data to parse out the success code

Now that you have the success code, you can exchange it for the authentication token

And now you finally have a way to get the authentication token and implement Google login.

Removing unused strings from Windows Phone 8 RESX files

Using RESX files is the standard approach to Windows Phone 8 app localization, it is even contained in the standard project templates. When you work on a project for a longer time, you may get to a situation that your RESX files contain strings that you no longer use. This is a problem especially when you want to add a new localization, because it is slower and kind of wasteful localizing unused strings.

To solve this problem I have created a simple command line utility, that is available at Github. This utility assumes that you use the standard localization approach from the templates (AppResources.{lang}.resx and LocalizedStrings.{value} in XAML).

The usage is really simple. Just run the utility with the path to your project as a parameter. It will detect all resources files and remove all the unused strings from them.

Custom DateTime deserialization with JSON.NET

Sometimes you cannot influence the design of the API you have to use and wonder, why the API uses so strangely serialized DateTime and how to handle it using JSON.NET.

Luckily, JSON.NET makes plugging in custom serializers / deserializes quite easy. There are a few base classes to help you write your own converter, when dealing with DateTime you want to inherit the DateTimeConverterBase class.

There are two methods in this class to override, WriteJson and ReadJson. All you custom serialization and deserialization logic should be placed there.

Here is a sample implementation:

If you want to use your custom converter to serialize or deserialize a property you just need to decorate it with the right attribute.

Customizing the Player Framework UI

In my last article I gave you a tip on how to localize the Player Framework, in this article I will show you have to customize the UI of the actual player.

The first step is to obtain the Generic.xaml file that the Player Framework uses for styling. You can find it in C:\ Program Files (x86)\ Microsoft SDKs\ Windows\ v8.0\ ExtensionSDKs\ Microsoft.PlayerFramework.Xaml\ 2.0.0.0\ Redist\ CommonConfiguration\ neutral\ Microsoft.PlayerFramework\ Themes. Copy it to your projects and rename it to something more telling, like PlayerFramework.xaml.

You can now edit the copied XAML file and customize it any way you want. If you do the styling for a Windows Phone app, keep in mind that the ControlPanel switches to the Compact states and a few transformations are applied by default, that can interfere with your styling.

Finally, you need to apply the style by adding it to the page with your player

The death of the WinRT developer?

As many other Windows Phone / Windows 8 / Universal apps developers (lets just call us WinRT developers) I watched the Build 2015 keynote last night. And I did not like it. I know Microsoft does not know to communicate but the message for me was clear. We, the WinRT developer, are no longer needed.

First, Microsoft announced that WPF apps will be allowed to be submitted to the Windows Store to be used on desktops / tablets. So why would anyone want to develop (or want to have developed) a Windows 8 (WinRT) app, when they can just use WPF and get everything done easier? I do not know.

But allowing WPF apps to the Windows Store is a small news compared to the ability to run Android apps on Windows Phone. The first news talked about porting Android apps to the Windows Phone, but later, statements like this appeared

Android developers will be able to submit versions of their apps, written in Java or C++, to the Windows Store in he form of APKs and have those apps work on Windows Phone 10 devices. Android developers should be able to start submitting apps to the Windows 10 Store some time in the next few months.

So let get this straight. Who would want a native mobile Windows app developed, when they can just take their Android app and use it on Windows? What company would want to keep their mobile Windows team, when they can just use their Android team to make Windows apps?

Sure, Android apps will probably not run on XBOX and HoloLens, but I doubt Microsoft will open the XBOX store for all the developers, more likely only chosen companies will be allowed to publish apps. HoloLens will be used only by a small number of people if this price is not really low (which I doubt it will be), so only a few HoloLens apps will be needed.

For me, the situation seems clear, it is the death of the WinRT developer.

Player Framework localization

In my recent universal (Windows Phone 8.1 and Windows 8.1) project I implemented PlayReady DRM protected smooth streaming movies playback using the Player Framework. This projects seems to be dead, but it is still the best option when implementing any kind of video playback.

One of the first things I had to do was localize it’s controls, because the app I worked on was in Czech and Slovak, not in English (the only language the Player Framework supports out of the box). Not all the texts an be localized, but the most visible ones like button labels and error messages can.

To create your own localization, I suggest you create a new RESW file in your project. You can use and existing one, but I prefer to separate the texts for the Player Framework from texts for the rest of the app.

Next you have to find out the keys for the string you want to localize. You an find them in the source code. You can just copy the content of that RESW file to yours RESW file and localized everything.

The last step is to let the PlayerFramework know about your RESW file using

Leveraging ETag caching in Windows Phone and Windows apps

In my previous article I showed you how to implements server side caching using ETag. HTTP clients on other platforms can usually work with ETag automatically, but of course, the portable HTTP client used on Windows platforms cannot. You have to implement ETag handling yourself.

In TvTime, all the server requests are GET request, so I remember the ETag values for each Url (= each GET request). I store the ETag values in application local settings.

When the app wants to get some data, I perform a GET request including the ETag as the If-None-Match header. If my ETag matches with the ETag on the server, the server returns HTTP 304 Not Modified and I return the cached data from disk. Otherwise I read the response body and return it.

This approach works with the portable Http client library, that you can use with Windows Phone 8 (Silverlight), 8.1 (Sliverlight), 8.1 XAML and Windows 8/8.1. If you only need to support Windows Phone 8.1 XAML and Windows 8.1, you may want to look into the Windows.Web.Http.HttpClient.

Using ETag to cache responses in NancyFX

Caching data is usually a good idea, especially when creating APIs for mobile clients and the user may pay for each transferred byte. There are many approaches to caching data (I recommend reading this article), in my last NancyFX project I used ETag.

ETag

ETag is a HTTP header that acts as a hash of the data. When the server returns a response, it computes a hash of the data and sends it to the client. When the client requests the data again, it includes the ETag in its request. The server compares the ETag with the hash of the current data and if they match (the data did not change), it returns an empty responses with a HTTP 304 status code.

NancyFX impelemntation

To implement caching using ETag in NancyFX I use a method in my base module

There are two parameters in this method, because you may sometimes want to compute the ETag from only a part of the returned model.

Using this method is the really simple

Measuring and recording the room temperature with a Raspberry Pi

The Raspberry Pi is a small embedded computing device that you can use for many different software and hardware projects. One of the first projects I did with the Pi was turning it into a device that would measure, record and display the room temperature.

Hadrware

To make the project, you will of course need a Raspberry Pi. I use my old Raspberry Pi model B, any newer one would also work. You also need a DS18B20 temperature sensor and a RRU 4K7 resistor. You can buy the separately, or you can buy the Raspberry Pi YouTube Workshop Kit that also contains both parts.

To connect the temperature sensor to the Pi, I suggest you follow the YouTube tutorial for the kit. You can also solder the temperature sensor and the resistor into one piece and connect it to the Pi using this schema, so the result then looks like this

Drivers

The advantage of using the DS18B20 temperature sensor is that Raspbian and all the other Raspbian based Linux distors for the Pi contain drivers for it. There are two drivers that you need to load to make it work, the w1-gpio and the w1-therm. You can load them using

or just add them to /etc/modules so they autoload with each boot of the Pi.

When the temperature sensor is connected and both drivers are loaded, a new device will appear in /sys/bus/w1/devices/. On my Pi, it is 28-000004e23e98, execute

to find the id on yours.

Software

I am a .NET developer but running Mono on the Pi just seems strange to me, so I decided to use Node.js to create the UI. You can find the whole project on Github. It is a simple Node.js server that gets the temperature and shows it.

Getting the temperature is a matter of a simple cat command to the right place

and parsing the result.

I decided to use SQLite for storing the data and create a simple endpoint that gets the current temperature and stores it in the database. I recommend using cron to call the endpoint with the periodicity you want.

You can then use the /history endpoint to get the temperature stats.

You can get, download, fork the whole project from https://github.com/igorkulman/rpi-thermometer.

Back navigation on Backspace key press in Windows 8.1 apps

I am not a mouse or a touch person, I like using the keyboard and keyboard shortcuts for everything. So when I (have to) use a Windows 8.1 Metro app, I always miss when the app does not navigate back when I press the Backspace key, just like the browser does.

Implementing this functionality is really simple, you just need to handle the KeyUp event and listen for the Backspace key. You can implement the KeyUp event handler on every View in your app, but that is not necessary. You can just hook up the global Window.Current.CoreWindow.KeyUp event after you app starts.

If you implement this in your app, I am sure you will make some of your users more happy.

© 2015 Coding Journal

Theme by Anders NorenUp ↑