Azure DocumentDB and C#

The goal of this post is to write a C# sample application to perform basic requests to Azure DocumentDB:  Create, Read, Update, Delete and Find documents.

You can find the code on my github: https://github.com/softwarejc/documentdb

Relational databases have been the dominant approach to store data for decades and they will probably be used for a very long time. However a lot of modern applications work with JSON, a format that does not fit naturally in a relational system.

NoSQL databases came to solve this problem and to improve the scalability of relational databases.  NoSQL also allows working with data that change fast without having to change the database.

There are different types of NoSQL databases:

  • Document stores: MongoDB, Azure DocumentDB
  • Key/Value stores: Riak
  • Column stores: Cassandra
  • Big data analytics: HDInsight, Hadoop

The focus of this post is the document store offered by Microsoft: Azure DocumentDB.

You can read more about MongoDB vs DocumentDB here: http://justazure.com/mongodb-vs-azure-documentdb/

Create a DocumentDB in Azure

The creation of a DocumentDB is very straight forward.

Scott Hanselman explains it very good in this video:

https://channel9.msdn.com/Blogs/Windows-Azure/Create-DocumentDB-on-Azure

You can read the about pricing information here:

http://azure.microsoft.com/en-us/pricing/details/documentdb/

How to use DocumentDB with C#

DocumentDB officially supports the following programming languages:

  • .NET
  • Node.js
  • Javascript
  • Python
  • Java

We will be using .NET C# 6.

The first thing that we have to do is to add a Nuget package that will do part of the job for us: Microsoft.Azure.DocumentDB:

Nuget

Continue reading

TypeScript – Introduction

It is time to start learning the language of the future: TypeScript

There are a lot of online resources to learn the language, here I just share a small piece of code with the basics of the language:

//---------------
// 1 Basic types
//---------------
var myBooleanVar: boolean = false;
var myNumberVar: number = 29;
var myStringVar: string = "Juan Carlos";

// 1.1 Arrays
var myArrayVar: number[] = [1, 2, 3];
var myArrayVar: Array<number> = [1, 2, 3];

// 1.2 Enumerations
enum Direction { Up, Down, Left, Right };
var myDirectionVar: Direction = Direction.Up;

// 1.3 Any
var myAnyTypeVar: any = "I am a text";
myAnyTypeVar = false; // before it was string, now a boolean

// 1.4 Void
function log(msg: string): void {
	console.log(msg);
	// this functions returns nothing
}

//---------------
// 2 Interfaces
//---------------
interface IPerson {
	name: string;
	age?: number; // optional parameter
}

function sayHello(person: IPerson) {
	console.log(person.name);
	if (person.age) {
		console.log("Your age is " + person.age)
	}
}

// myVar has no type but has all the fields that a 
// Person should have. Therefore is a Person (duck typing)
var myVar = { name: "Juan Carlos" };
sayHello(myVar);

// 2.1 Interfaces extends
interface IStudent extends IPerson {
	studentId: number;
}

// 2.2 Interfaces indexes
interface Friends {
	[index: number]: IPerson;
	length: number;
}

// 2.3 Interfaces with functions/methods
interface PeopleService {
	getPersonId(person: IPerson): number;
	// a function that has a Person has parameter and return a boolean
	(newFriend: IPerson): boolean;
}

//---------------
// 3 Classes
//---------------

// 3.1 Interfaces implementation
interface IVehicle {
	move(direction: Direction);
	registrationNumber: number;
}

class Vehicle implements IVehicle {
	registrationNumber: number;

    constructor(id: number) {
		this.registrationNumber = id;
	}

	move(direction: Direction) {
		console.log("Moving" + direction);
	}
}

// 3.2 Classes Extends
class Car extends Vehicle {
	// by default all public
	private numberOfWheels: number = 4;
	speed: number = 120;
	
	// method override
	move(direction: Direction) {
		console.log("Speed = " + this.speed);
		// call base
		super.move(direction);
	}
}

var myCar: IVehicle = new Car(1234);
myCar.move(Direction.Up);

// 3.3 Classes, define class fields in constructor 
// add public or private to the parameter
class Motorbike implements IVehicle {
	private numberOfWheels: number = 2;
	
	// the constructor defines a public field 'registrationNumber'
    constructor(
		public registrationNumber: number,
		// define a private field with the value passed as parameter
		// if no value specified, the field as the value 90
		private speed: number = 90) {
	}

	move(direction: Direction) {
		console.log("Moving the motorbike" + direction);
	}
}

// 3.4 Accesors and static fields
class Plane implements IVehicle {
	// Static field
	static minSpeed: number = 100;
	static speedCorrectionFactor: number = 0.8;
	
	constructor(
		public registrationNumber: number,
		private _speed: number = 300) {
	}

	// speed getter
	get getSpeed(): number {
		// for some reason the public speed is 80%
		// of the realone
        return this._speed * Plane.speedCorrectionFactor;
    }

	// speed setter
    set setSpeed(newSpeed: number) {
		if (newSpeed > Plane.minSpeed) {
			this._speed = newSpeed;
		}
	}

	move(direction: Direction) {
		console.log("Flying! " + direction);
	}
}

Resources:
http://www.typescriptlang.org/Handbook

SPA AngularJS Authentication using Microsoft Azure Active Directory (ADAL)

The goal of this post is to add authentication to a single page application using a free subscription of Microsoft Azure Active Directory , for that we will use the Active Directory Authentication Library (ADAL) for JavaScript.

Microsoft also offers other versions of this library for Windows Phone, Android and iOS applications – all of them also open source.

You can find all the code of the sample application that we will write on my git hub. You can also see a running demo here.

To use the demo you can login with a guest account:

user: guest@softwarejc.onmicrosoft.com
pass: Softwarejc123

Agenda

  • Some details about our sample application
  • Azure: Create a Microsoft Azure Active Directory and add an Application to it
  • How to use ADAL to add Authorization to a AngularJS state
  • How to use ADAL to add Authorization to a WebAPI controller
  • Conslusion

Some details about our sample application

We will add authentication to a very simple application – a list of tasks to do. This application uses SignalR to notify all connected clients when a note was added/removed.

ToDO list - Application architecture

ToDO list – Application architecture

The user will be asked for his user and password when he tries to open a restricted section of the application and all request to the “Authorized” WebAPI controller will return a “401 Unauthorized” error if the user was not identified.

Azure: Create a Microsoft Azure Active Directory and Add an Application to it

We need a Microsoft Azure Active Directory, by default you should have one on your azure account. If you want to create a new one just open Azure > Active Directory and add it. Continue reading

AngularJS and SignalR

The goal of this post is to connect and use SignalR from AngularJS. All the code is available in GitHub.

All code is available here: GitHub Link

The application used in this post allows to add tasks to a collaborative list of tasks to do. The application displays a list with all the tasks pending to do and also allows to remove them from the list. SignalR will push the notification “newTask” and “taskDone” to all connected users.

Feel free to get the code from github and run the application in more than one place (different tabs in your explorer) to see how SignalR synchronizes all of them.

The simplicity of the application allows to focus on the goal of this post: SignalR and AngularJS.

This is a screenshot of the running application.

Screenshot of the signalR and angularJS app.

SignalR Hub

The first thing that we need is to configure the OWIN startup, we need this class in our project:

[assembly: OwinStartup(typeof(Startup))]
namespace AngularJS_SignalR
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // SignalR
            app.MapSignalR();
        }
    }
}

The signalR hub type is “INotesCallbacks”, this interface defines the callbacks that the hub can make to the connected clients.

    // Client callbacks
    public interface INotesCallbacks
    {
        // Notify note added
        Task BroadcastNewNote(Note newNote);
        // Notify note removed
        Task BroadcastRemoveNote(int noteId);
    }

The hub also implement the interface “INotesCalls” this interfaces defines the hub methods that clients can call.

    // Client calls
    public interface INotesCalls
    {
        // Add note
        Task AddNote(string note);
        // Get all notes
        IEnumerable<Note> GetAllNotes();
        // Remove note
        Task RemoveNote(int roomId);
    }

This is the implementation of the hub:
Continue reading

JavaScript – first steps for a c# developer

The goal of this post is to compare some basics features of JavaScript with C#.

Objects Initialization

The initialization of JavaScript objects is similar to c# anonymous initialization.

// c# Anonymous initialization
var car = new
{
  Name = "myCar",
  PlateNumber = 12435
};
// JavaScript Initialization
var car =
{
  Name: "myCar",
  PlateNumber: 12435
};

Dynamic members

JavaScript objects can be dynamically expanded or updated. The behavior is like dynamic + ExpandoObjects in C#.

// c# Dynamic objects
dynamic car = new ExpandoObject();
car.Name = "myCar";
car.PlateNumber = 1234;
// JavaScript objects
var car = {}
car.Name = "myCar";
car.PlateNumber = 12435;

Classes and object oriented programming

JavaScript is a function oriented language. This means that classes in JavaScript are fairly different to classes in c#.

A class in JavaScript looks like a function. We need to use the keyword ‘this’ inside a function to define fields and methods of our class and the keyword ‘new’ to create instances. The function itself is the constructor of the class.

// c# class
Car myCar = new Car("myCar", "12345");

class Car
{
  public Car(string name, string plateNumber)
  {
    this.Name = name;
    this.PlateNumber = plateNumber;
  }

  public string Name { get; set; }
  public string PlateNumber { get; set; }

  public void Move(object position)
  {
    // move
  }

  private int Speed = 50;
}
// JavaScript class
var car = new Car("myCar", 12345);

function Car(name, plateNumber) {
  // public
  this.name = name;
  this.plateNumber = plateNumber;
  this.move = function (position) { /* move*/ }

  // private
  var speed = 50;
}

Properties

The previous javascript code is not creating properties because they have no getter and setter, if we need the getter and setter methods we need to use the following special syntax. This syntax also allows to define read-only properties.

// private backing field
var _name;
// property with public getter and setter
Object.defineProperty(this, "name", {
  get: function() { return _name; },
  set: function(value) { _name = value; }
});

Static methods and fields

Static members needs to be added dynamically to the class function:

// Define static field
Car.wheels = 4;
// Create instance
var myCar = new Car("myCar", 12345);
// Use static field
var test = myCar.wheels; // ERROR, static methods cannot be called from an instance
var test = Car.wheels; // OK

Prototype and inheritance

Prototype is an object contained by all classes. We can be extended dynamically this object (like all objects in JavaScript) with data and methods that will be accessible from our class.

Car.prototype.wheels = 4;
Car.prototype.move = function(position) { /* move*/ };

Inheritance in JavaScript is implemented changing the prototype of the child class. Let’s create a class “Car” that should have “Vehicle” class as base class:

function Vehicle(...) {
...
}
function Car(...){
...
}
Ferrari.prototype = new Vehicle();