Tech of the week

Appears to be the story of my life lately, just as I get excited and proficient on one stack I get side tracked with something else. The latest stack I’m playing with is the Ionic2 framework, but first some history.

 

UX Stacks

I’ve written UX applications in many different way in the past

  • java swing (albeit i’d never put this on my resume as I can’t recall a single bit of that application i helped a student friend with so many years ago)
  • MFC – Oh the pain
  • ATL/WTL – Actually i quite like this back in the old C++ days when men were men.
  • C# Windows forms – Spent years on this stack and if you’re happy with battleship grey it’s still quite RAD
  • WPF/Silverlight – Wrote quite a few applications in this, probably wouldn’t call myself an expert but I can xaml like the next guy
  • MVC3+ – Have written and still support a quite a few MVC applications it was the bridge that finally moved me heavily to web client side tech.
  • Objective-C/XCode – A handful of iPhone applications, it’s ok, language is a little weird yes but use it for a week read a few books/material and you’ll make a good stab at it.
  • Xamarin – A nice approach for writing mobile apps in  c#, problem is you still need to use the native designers (yes i know about xamarin forms.. are we really going to talk about that?)
  • Web tech, My transition to the web was a natural progression that leveraged things I’d learned with other frameworks, e.g Knockout was familiar from wpf data binding, angular has somewhat a familiarity to MVC

Ionic2

So what is Ionic2? In short it’s a framework for writing mobile (and progressive) apps. As you’ve seen above I’ve already ways of writing mobile apps, So why something new? Why not! in this world – always be learning!

In my case there were some more compelling reasons,  see for the last year I was an architect and hands on developer for a new web application using angularjs v1 sass, typescript and a tonne of wonderful libraries. Ionic2 is built around the same stacks, applications use angular2, html5, typescript, saas, gulp etc, the list goes on and on. Apparently I’m finding my home in this world, in fact if i was to write a greenfield desktop application I’d seriously consider writing it with html tech and framing with Atom/Electron.

Sample app

image_thumb2 Taking the application on the left as an example,
I was to create this screen in a few hours, sure i’s not the prettiest and contrasts are high, but the point is that from a blank canvas it only took a few hours to design and implement this screen using Ionic2 and web technologies. I’m a little spoiled as I can somewhat ignore the stubborn elephant in the room *CSS*. i’m targeting the latest devices so I’m getting to use flexbox for layout , css3 transitions etc.

I’m seriously convinced that when it comes to writing general purpose mobile applications Ionic2 will be hard to beat.

I know if i was to write the same screen in xcode/android studio it would take me a lot longer to implement this design.

Check out Ionic2 for yourself you won’t regret it.

Angular Form Validation

Hi all,

Ok this is my very first ever screencast, It’s not very polished but hopefully I’ll get into the swing of things with some more practise.

The screen cast shows how to add validation to forms the Angular.JS way.

 

image

 

 

image

image

Angular.js Auth with ASP WebApi2

So in my previous post I show you how to auth with a bearer token against WebApi2 with the OWIN middleware using a HttpClient. Next up I show you how to do the same with AngularJS.

AngularJS

True to form I’m not going to write a big long blog post on this topic, there are many others that are better than mine. There are even a nice few github hosted solutions you can grab for yourself.

I ended up picking the first post I saw, http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

Now lets ignore the CORS part for starters (have banged my head against the walls many times over that).  In order to get this working with the latest and greatest web api as of this post you’ll need two little tweaks

1) Relative URL

The author posts the following code

image

You’ll need to change the baseUrl to an empty string, if you leave it this way (even when correcting the port) you’ll end up in a CORS situation and you’ll see the browser send an OPTIONS request which you don’t want. (in fairness the author was showing CORS working so there is nothing wrong with his/her post).

 

2) Token Payload

image

The important part is that i create a new object ‘data’ and this contains the querystring for the POST body, in the $http call, I then pass data rather than userData like the codeproject article shows.

That’s it, you should now be up and running.

NDepend

Hi all, I’d like to introduce you to what appears to be a great tool for the .net platform. http://www.ndepend.com/

image

I’ve promised to write a review on this tool, however, I’ll be perfectly honest and admit, that I’ve just not got the time right now, so I’m going to take a short cut.

Podcasts

I listen to a lot of podcasts mostly when driving or cycling, recently I’ve started listening to a new podcast http://www.codingblocks.net/ it’s a good podcast and I hope it continues to stick around. As it turns out this podcast did a review on NDepends http://www.codingblocks.net/podcast/ndepend-on-how-good-your-code-is/ and I encourage you to check it out. Moreover; in a more recent episode they mention that they’ve received feedback from Patrick Smacchia (Lead Developer and brains behind the tool) and the feedback they’ve received from Patrick on the few little niggles they encountered is quite positive and upbeat.

When I find myself looking for some tooling like this I’ll write a proper review of my own, but until then based on my interactions with Patrick and after listening to the podcast above, I encourage you, that if you’re in the market for such analysis tools to take NDepends for a spin, and let us know how you get on!

WebAPI OWIN and HppClient Authorize

Hi all, I know I promised my next post was going to be more Azure but I encountered a little task that took me a while to get working, the scenario was that I wanted to make a call to my WebAPI (MVC5) service using a C# HttpClient, the problem was that the resource I wished to access had the AuthorizeAttribute set

image

 

Now there’s a few ways to skin a cat but in the presence of the default Token Authorization one needs to first get a token and then use this token in subsequent requests. There is some good documentation using fiddler here: http://www.asp.net/web-api/overview/security/individual-accounts-in-web-api, however, there was not a lot of information on how to do this with HttpClient against Katana/Owin/MVC5, rather this information was not available in one specific place.

How

image

The first request gets the token and then this token is used as the Bearer for further requests.

Writing to an Azure Queue

If you've seen my previous post then this post is quite similar, this time however I write to an Azure Queue and not to a blob.

Code

First of all you need an Azure storage account as before, but once this is setup, consider the following code…

image

 

What I’m doing in the code above is

  1. Connecting to my storage account
  2. Creating the queue if it doesn't exist (remember you’ll get a bad request if you don’t name the queue correctly!).
  3. Then I create a simple message, I’m using an POCO object from another project and serializing it to JSON.

Did it work?

Lets use VS2013 U3 to check!

image

Open your server explorer and select the queue under the storage account you’ve chosen in your connection string, double click

image

Above you see the message added to the queue, you can see how many times it was de-queued  and when it’s set to expire, If we use a competing consumer pattern that count may be more than 1!

Next

I’m a little thorn re my next post, I’ve been writing a post on c# expression trees which is nearing completion, however I think to keep in line with the current trend I’ll post how this queue can be read and feed to an Azure Service Bus topic (pub/sub)… stay tuned ;-)

Azure WebJob triggering on BlobUpload

Tonight I’m going to follow up on my previous post where I promised to show you how to react on somone/something uploading a Blob.

Please read http://azure.microsoft.com/blog/2014/06/18/announcing-the-0-3-0-beta-preview-of-microsoft-azure-webjobs-sdk/ as there is a lot of old information lying about on the web regarding v0-2-0 which will not work in v0-3-0, I’m not ashamed to say it’s now the early hours of the morning before I’ve finally managed to get this working as most of the documentation I was reading was v0-2-0.

Let’s get started by creating a console application.

Nuget

image

 

Code

In this code you can see that I’m just appending worked… to the input file, the important parts to consider are the BlobTrigger and Blob attributes, the trigger is the item that will start to process when a blobupdates on the reuters-input container, the BlobAttribute is the output and the reuters-gdmx is the identified container for same.

image

 

There are a few options with the job, schedule/on demand/continuous..

image

 

For the automatic trigger I’m setting the job to be On Demand, however I know in the current version of webjobs, that ondemand for blobs are polled every 10 minutes (I hope can be more real-time once WebJobs exit preview).

image

image

 

Connection Strings

You need to add two connections string to your blob storage account (get the connection string with visual studio Azure explorer), I’ve set both to the same storage account. The last two are from v0-3-0.

image

 

Test

I’m going to use the AzureStorage explorer to upload a file, once this file gets uploaded the WebJob will run and create the associated blob in reuters-gdmx

image

image
image

Output

Here you can see the result of the WebJob (appending worked….)

image

Uploading a Blob to Azure container

image

 

In the picture above you see a storage account in Azure, in the storage account we have an ecbfx (European Central Bank FX Rates) container. Now let’s see how to upload some data to this container using a C# console application.

NUGET

Given we are going to work with C# the best option is to use the .NET library, this can be retrieved from NuGet

image

 

Code

image

The code above connects to the pre-created container, notice that my container has built in Geo Redundancy (primary storage in Dublin, secondary in the Amsterdam) so after running there will be 6 copies of this blob, 3 in Dublin and 3 in Amsterdam, this is the storage package I’ve chosen.

image

 

View Blob

The easiest way to view the newly uploaded blob is to use the Windows Azure server explorer in Visual Studio, it’s the easiest way of getting the connection string to the storage account also.

image

In the next post I’m going to show you how react to someone uploading a Blob with an automatic trigger.

Broadband in rural Ireland

View Broadband
View Full Album

This is a post, that I've just not got time to explain in full yet... 
But if you are stuck on 1-2mbps ADSL and have a bit of time on your hands then its possible to get +20mbps broadband.

I achieved this by load balancing a fixed wireless connection of 8mbps with a HSPDA 12+mbps connection. The HSPDA connection took most of the work and involved installing a fixed external yagi antenna for starters..

So far so good! PM me for more details.