Angel \”Java\” Lopez on Blog

November 2, 2013

New Month’s Resolutions: November 2013

Time to review my October resolutions:

– Give a talk about PHP and Node.js [complete] see post and PHP/Node repo and PageJs repo at PHP Dev Argentina 2013
– Give a talk about TDD with ASP.NET MVC [complete] see repo
– Give a talk about Scala implementation [complete] see slides and simple samples
– Give a talk about Python in JavaScript [complete] see repo and slides at PyCon 2013 Argentina
– Give a talk about Smalltalk in JavaScript and C# [complete] see repo and slides at Smalltalks 2013

This new month’s resolution:

– Start compiler reduced Python to C, using JavaScript
– Give a talk about Ruby in C#
– Start Ruby to JavaScript compiler
– Complete variable scope in Mass language
– Give a talk about compiling languages to JavaScript (to be confirmed)
– Write web framework for AjTalkJs (to be used in Node.js) (plain? MVC?)
– Improve NPM modules in AjTalkJs and AjTalk
– Improve unit test support in AjTalkjs and AjTalk
– Improve match and data structure in AjErl

More fun is coming 😉

Keep tuned!

Angel “Java” Lopez
@ajlopez

November 30, 2011

Social Online Games Programming (Part 5) New Azure Toolkit

Previous Post
Next Post

Two weeks ago, a new version of Windows Azure Toolkit for Social Games was released. See @ntotten posts:

Windows Azure Toolkit for Social Games Version 1.1.1
Windows Azure Toolkit for Social Games Version 1.1

The new version implements two simple HTML5 games: tic-tac-toe and four-in-a-row, backed up by ASP.NET MVC views, WCF Web API services, ACS federated security, and Azure Storage. You can play them online at:

http://watgames4.cloudapp.net/

I think this is a more clear example than the previous one (Tankster) that was great but a bit overwhelming ;-). Let’s dive into some implementation details of this new example.

Totten wrote:

The biggest change we have made in this release is to separate the core toolkit from the Tankster game. After we released the Tankster sample game we received a lot of feedback asking for a simpler game that developers could use to learn. To meet this need we developed two simple games, Tic-Tac-Toe and Four in a Row, and included in the toolkit. The Tankster game is now available separately as a sample built on top of the toolkit.

While the new games included in the toolkit are much simpler than Tankster, they still show the same core concepts. You can easily use these samples as a starting point to build out any number of types of games. Additionally, you will find that many of the core components of the game such as the leaderboard services, game command services can be used without any modification to the server side or client side code.

In my previous post, I mentioned a minor but important change in game action processing: any game logic was removed from server code. Adopting this approach, you can write new games without changing the ASP.NET MVC code. You still can add server side code if you want (to have more control over the actions, to avoid player cheating, etc..) but it is interesting to have a base code with game-agnostic code.

Opening the solution in Visual Studio, you will find Javascript files used by the two games. You can write a new game, reusing these files:

The games are implemented as areas:

You could add new games and publish them as NuGet packages.

Visually, the client Javascript code is organized as:

Each game X (TicTacToe, FourInARow, yours) has:

XGame: the game logic

XBoard: to draw board on canvas and to detect click events on it

XViewModel: containing the player and other data to be used at view rendering (the example uses knockout.js, an MVC in Javascript)

XController: to process new events and to coordinate the above elements

The generic part:

UserService: methods related to users: login, get friends, etc.

GameService:  play moves, receives new moves, other actions.

ServerInterface: Ajax calls (using GET, POST, JSONP, Azure storage…) that are used by the implemention of User and Game Service.

Topics for next posts: analyze the Javascript code, the use of Canvas, Javascript tests using QUnit, communication with server using Ajax, change the Game Service (Javascript) to use a Node.js server.

Keep tuned!

Angel “Java” Lopez
http://www.ajlopez.com
http://twitter.com/ajlopez

August 8, 2011

Social Online Games Programming (Part 4) Processing arbitrary Game Actions

Filed under: .NET, ASP.NET MVC, Azure, Game Development, HTML5, JavaScript — ajlopez @ 8:49 am

Previous Post
Next Post

There is a new release of Windows Azure Toolkit for Social Games:

http://watgames.codeplex.com/releases/view/70342

Let examine a key change in this version. There is a new entry at Tankster.GamePlay\Services\IGameService.cs:

[WebInvoke(Method = "POST", UriTemplate = "command/{gameId}")]
HttpResponseMessage Command(Guid gameId, HttpRequestMessage request);
[WebInvoke(Method = "POST", UriTemplate = "command/v2/{gameId}")]
HttpResponseMessage Command2(Guid gameId, HttpRequestMessage request);

There are TWO entry points to send game commands from client. Why? Having two URIs the server can be used by old clients and new ones. Note the “v2” in the UriTemplate.

The new Command2 (partial) code at implementation (GameService.cs):

// Add gameAction
var gameAction = new GameAction
{
    Id = Guid.NewGuid(),
    Type = commandType,
    CommandData = commandData,
    UserId = this.CurrentUserId,
    Timestamp = DateTime.UtcNow
};
// Cleanup game actions lists
for (int i = 0; i < game.GameActions.Count(); i++)
{
    if (game.GameActions[i].Timestamp < DateTime.UtcNow.AddSeconds(-10))
    {
        game.GameActions.RemoveAt(i);
        i--;
    }
}
game.GameActions.Add(gameAction);
this.gameRepository.AddOrUpdateGame(game);
return SuccessResponse;

If you compare the old code (Command method) with the above code, the main difference is:

– The server doesn’t manage the logic of “who is the next player in turn”

– The server doens’t distribute the received command via a GameActionProcessor

And another change: game action type is an int, now. In the previous release, it was an enum, reflecting a fixed set of action types.

It still updates the game status blob adding the new game command (it could be a chat message, or a new shot). In this new way, THE SERVER CODE is more independent from game logic: the client code has the responsibility of select the next player. The notion of turn is leave to game client development. Now, the server code could be used for other multi-players games. Yes, we could have our own Social game! 😉

Windows Azure and worker/web roles are in charge of federated authentication, the formation of  new games, etc. But the engine is more “game agnostic” in this new release.

The client code sends commands:

Steps:

1- Client code sends a new Game Action in JSON (i.e.: shot information (position, angle, force)).

2- A web role instance receives the Game Action and updates the list of actions in the corresponding game blob status (saving the actions of the last 10 seconds)

3- The other players are polling the game status, until they notice a new game action that implies turn change.

Client code could manage the case of timeout of its player, or the “going offline” of one the other browsers.

Pros:

– Server code is more generic, and it could be used for other games

Cons:

– The client code could be cheated (no server control, validation over game actions)

– More complexity (turn logic, timeout management, offline and latency issues, cheat control) at client code.

The litmus test: implementing a new game using the same server code. Some points to polish: skirmish mode is still hardcoded to a maximum of 5 players; the 10 seconds windows for game actions is arbitrary. Possible solutions: each game client code creates a new game (waiting for other players) specifying the minimum, maximum number of players and a timeout in seconds, and time window for game action status.

But remember, the example code is still in beta. A new version is coming.

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

July 29, 2011

Social Online Games Programming (Part 3) Tankster, Blob Storage and JSONP

Filed under: .NET, AJAX, ASP.NET MVC, Azure, Game Development, HTML5, JavaScript, JQuery — ajlopez @ 10:59 am

Previous Post
Next Post

In my previous post I wrote about the Windows Azure Social Gaming Toolkit, and its example multi-player online game Tankster. See:

http://watgames.codeplex.com/
http://www.tankster.net/

There are two interesting posts by @ntotten about the inner guts of the game:

Architecture of Tankster – Introduction to Game Play (Part 1)
Architecture of Tankster– Scale (Part 2)

It’s worth to mention Nathan’s text here:

Before we begin with an explanation of the implementation, it is important to know what our goals where for this game. We had three primary goals when building this game.

  1. The game must scale to handle several hundred thousand concurrent users.*
  2. The architecture must be cost effective.
  3. The architecture must be flexible enough for different types of games.

* This is the goal, but there are still some known limitations in the current version that would prevent this. I will be writing more about that later.

Now, I want to write about the use and implementation of blob storage in Tankster.

Why to use blob storage? If you play Tankster in practice mode, the Javascript client doesn’t use the Azure backend. Javascript can access web role and blob storage via Ajax/JSON calls. But in multi-player game (there is one kind of game, named Skirmish), each player client code polls the blob storage to get the game status (tank shots, chat messages, other status). But again, why blob storage? There are money reasons (cost of each access to Web Role service API vs. cost of read a blob), but I don’t know about Azure prices (you know, MVPs don’t touch the money ;-). But there is another reason: to spread the workload, given some air to web role instances.

There is an AzureBlobContainer class in Tankster.Common library project:

public class AzureBlobContainer<T> : IAzureBlobContainer<T>
{
    private readonly CloudBlobContainer container;
    private readonly bool jsonpSupport;
    private static JavaScriptSerializer serializer;
    public AzureBlobContainer(CloudStorageAccount account)
        : this(account, typeof(T).Name.ToLowerInvariant(), false)
    {
    }
    public AzureBlobContainer(CloudStorageAccount account, bool jsonpSupport)
        : this(account, typeof(T).Name.ToLowerInvariant(), false)
    {
    }
    public AzureBlobContainer(CloudStorageAccount account, string containerName)
        : this(account, containerName.ToLowerInvariant(), false)
    {
    }
	//....

 

The class use generics. Type T could be a Game, GameQueue or another .NET type. You can reuse this class in other projects: it’s “game agnostic” code. The many constructors add flexibility for testing purpose.

This is the code to save a typed object to a blob:

public void Save(string objId, T obj)
{
    CloudBlob blob = this.container.GetBlobReference(objId);
    blob.Properties.ContentType = "application/json";
    var serialized = string.Empty;
    serialized = serializer.Serialize(obj);
    if (this.jsonpSupport)
    {
		serialized = this.container.Name + "Callback(" + serialized + ")";
    }
    blob.UploadText(serialized);
}

The object (type T) is serialized to JSON. AND not only JSON: note that a there is a Callback (you could remove this part if you don’t need this feature in your project). Then, a game object is saved as (I stolen …errr… borrowed 😉 this code from Nathan’s post):

gamesCallback(
    {"Id":"620f6257-83e6-4fdc-99e3-3109718934a6"
    ,"CreationTime":"\/Date(1311617527935)\/"
    ,"Seed":1157059416
    ,"Status":0
    ,"Users":[
        {"UserId":"MxAb1iZtey732BGsWsoMcwx3JbklW1xSnsxJX9+KanI="
        ,"UserName":"MxAb1iZtey732BGsWsoMcwx3JbklW1xSnsxJX9+KanI="
        ,"Weapons":[]
        },
        {"UserId":"ZXjeyzvw7WTdP8/Uio4P6cDZ8jmKvCXCDp7JjWolAOY="
        ,"UserName":"ZXjeyzvw7WTdP8/Uio4P6cDZ8jmKvCXCDp7JjWolAOY="
        ,"Weapons":[]
        }]
    ,"ActiveUser":"MxAb1iZtey732BGsWsoMcwx3JbklW1xSnsxJX9+KanI="
    ,"GameRules":[]
    ,"GameActions":[]
    })

Why the callback? To support JSONP:

http://en.wikipedia.org/wiki/JSONP

JSONP or “JSON with padding” is a complement to the base JSON data format, a pattern of usage that allows a page to request data from a server in a different domain. As a solution to this problem, JSONP is an alternative to a more recent method called Cross-Origin Resource Sharing.

Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server other than server1.example.com. An exception is the HTML <script> element. Taking advantage of the open policy for <script> elements, some pages use them to retrieve Javascript code that operates on dynamically-generated JSON-formatted data from other origins. This usage pattern is known as JSONP. Requests for JSONP retrieve not JSON, but arbitrary JavaScript code. They are evaluated by the JavaScript interpreter, not parsed by a JSON parser.

If you are a newbie to JSON and JSONP, this is a short tutorial/example using JQuery (the same library used by Tankster client code):

Cross-domain communications with JSONP, Part 1: Combine JSONP and jQuery to quickly build powerful mashup

But (you know, there is a “but” in every software project 😉 Azure blob storage doesn’t support the JSONP URL (that has a randomly generated callback id):

Query JSON data from Azure Blob Storage with jQuery

There is a proposed solution in that Stack Overflow thread. Agent Maxwell Smart would say: ah! the “old trick” of having the callback in the blob!

dataCallback({"Name":"Valeriano","Surname":"Tortola"})

You can read a more detailed description of problem/solution with example code at @woloski’s post (good practice Matthew! write a post!):

Ajax, Cross Domain, jQuery, WCF Web API or MVC, Windows Azure

One problem to point: note that the callback name is “hardcoded” in blob storage. The gamesCallback present in game status blob should be the name of a global function. But you can change the blob text to whatever valid Javascript code.

And the client code? You can study the gskinner code at Tankster.GamePlay web project, under src\ui\net\ServerDelegate.js:

(function (window) {
    goog.provide('net.ServerDelegate');
    goog.require('net.ServerRequest');

    var ServerDelegate = function () {
        throw new Error('ServerDelegate cannot be instantiated.');
    };

    var p = ServerDelegate;

    p.BASE_API_URL = "/";
    p.BASE_BLOB_URL = "http://tankster.blob.core.windows.net/";
    p.BASE_ASSETS_URL = "";
    p.load = function (type, data, loadNow) {
        var req;
        if (p.CLIENT_URL == null) {
            p.CLIENT_URL = window.location.toString();
        }
//....

There is an interesting switch:

switch (type) {
    //Local / config calls
    case 'strings':
        req = new ServerRequest('locale/en_US/strings.js',
		   null, 'jsonp', null, 'stringsCallback'); break;
    //Game calls
    case 'endTurn':
        req = new ServerRequest(apiURL+'Game/EndTurn/',
		    null, 'xml'); break;
    case 'leaveGame':
        req = new ServerRequest(apiURL+'Game/Leave/'+data.id,
		    {reason:data.reason}, 'xml', ServerRequest.POST); break;
    case 'playerDead':
        req = new ServerRequest(apiURL+'Game/PlayerDead/',
		    null, 'json'); break;
    case 'gameCreate':
        req = new ServerRequest(apiURL+'Game/Queue', data,
		    'xml', ServerRequest.POST); break;
    case 'usersGame':
        req = new ServerRequest(blobURL+'sessions/'+data,
		    null, 'jsonp', null, 'sessionsCallback'); break;
    case 'gameStatus':
        req = new ServerRequest(blobURL+'games/'+data,
		    null, 'jsonp', null, 'gamesCallback'); break;
    case 'gameQueueStatus':
        req = new ServerRequest(blobURL+'gamesqueues/'+data,
		    null, 'jsonp', null, 'gamesqueuesCallback'); break;
    case 'notifications':
        req = new ServerRequest(blobURL+'notifications/'+data,
		    null, 'jsonp'); break;

    //User calls
    case 'verifyUser':
//...

See the ‘gameStatus’ polling: it uses ‘jsonp’ as format. My guess: the ‘gamesCallback’ parameter is not needed: you can use any other name, the function to call resides in the blob content.

I think there are alternatives to game status. The blob reflects the Game entity (see Tankster.Core\Entities\Game.cs). But it could be implemented in two blobs by game:

– One, having the initial status (players, positions,etc…) and the list of ALL the history of the game (think about to implement a chess or go game, you need to save the history).

– Another one, having the “news” (last 10 seconds of game actions). So, the data to poll should be shorter.

The price to pay: web role service should update both. But that update only occurs when a player sends a move (shot, chat…). The poll of game status occurs in every client, triggered by a repeated timeout. Actually, the game blob keeps the last 10 seconds actions AND initial status, weapons, etc…. Each client polls that info. In case a client disconnects and reconnects, it could poll the “complete game” blob to be in sync again.

The separation of that info in two blobs should improve the scalability of the solution. But you know: premature optimization is the root of all evil ;-). If you take that way of store and retrieve games, you should run some stress or/and load tests to have a really measure of such decision impact.

More Tankster code analysis, patterns, and social game dev in general: coming soon.

Some links:

WAT is to Social Gaming, as Windows Azure is to… | Coding4Fun Blog | Channel 9

Thanks! They mention my post 😉

Episode 52 – Tankster and the Windows Azure Toolkit for Social Games | Cloud Cover | Channel 9

Microsoft tailors Azure cloud services to social game developers | VentureBeat

Windows Azure Toolkit for Social Games Released to CodePlex – ‘Tankster’ Social Game Built for Windows Azure

Tankster, a Social Game Built for Windows Azure | Social Gaming on Windows Azure | Channel 9

Social Gaming on Windows Azure | Channel 9

Build Your next Game with the Windows Azure Toolkit for Social Games

Microsoft delivers early build of Windows Azure toolkit for social-game developers | ZDNet

http://www.delicious.com/ajlopez/tankster

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

July 21, 2011

Social Online Games Programming (Part 2) Tankster and Windows Azure Toolkit For Social Games

Previous post
Next post

Yesterday, July 20th, Microsoft released a preview version of Windows Azure Toolkit for Social Games, and published a beta version (with code) of a first demo game.

You can download the code from Codeplex: http://watgames.codeplex.com/

You can play the game at: http://www.tankster.net/

The current solution main projects:

Tankster.GamePlay is a Web Role. The only worker role is Tankster.WorkerRole. Tankster.Core is a class library. There are interesting code at Tankster.Common: Azure utilities to access repositories, a job engine; all its code is game-agnostic.

These are my first short comments about the code and implemented features (remember, is a beta! Some of these features/implementations could change in the next release):

– Client technology: HTML5, Javascript, EaselJs (for canvas programming).
– Server technology: ASP.NET MVC 3, some Razor test views (interesting topic: how to test the game without the REAL game), WCF Web API (another interesting topic to discuss: alternative technologies to received the game activity)
– There is a client game model and entities in Javascript. See src/model, src/game.

– There is a server game model (see Tankster.Core class library project)

– You can play in single player mode, but you can choose multi-player online. Then, the game uses ACS Portal to login using Federated Authentication:

– The client code resides in a single page: index.html (with lot of referenced javascript files)
– Client code sends JSON data (commands) to WCF Web API endpoints, using Ajax/JQuery. There are services published, exposing a REST-like interface

routes.MapServiceRoute<GameService>("game");
routes.MapServiceRoute<AuthService>("auth");
routes.MapServiceRoute<UserService>("user");
routes.MapServiceRoute<TestService>("test");

– Most of the game activity is send to game/command service. The service updates the game status residing in a blob at Azure Storage. Code excerpt:

// Add gameAction
var gameAction = new GameAction
{
    Id = Guid.NewGuid(),
    Type = commandType,
    CommandData = commandData,
    UserId = this.CurrentUserId,
    Timestamp = DateTime.UtcNow
};
// Cleanup game actions lists
for (int i = 0; i < game.GameActions.Count(); i++)
{
    if (game.GameActions[i].Timestamp < DateTime.UtcNow.AddSeconds(-10))
    {
        game.GameActions.RemoveAt(i);
        i--;
    }
}
game.GameActions.Add(gameAction);
this.gameRepository.AddOrUpdateGame(game);

– The game status is polled by javascript clients from blob storage. In this way, the ASP.NET MVC web role has less workload.

– The blob resides in the same domain, so no cross-domain JSON call is needed. But the game is prepared to use cross-domain Ajax call, replacing the XmlHttpRequest object by a Flash component.

– The Skirmish game mode (five players in a game) is made queuing the new players in a Game Queue, managed at worker role.

– The Statistics are processed at worker role: some game actions are sent to Azure queue, so the statistics process doesn’t disturb the client game.

– User status, Game status, Skirmish Game Queue status are blobs.

– Statistics data uses SQL Azure.

– There only worker role use a Job Engine to process many tasks, example:

// Game Queue for Skirmish game
Task.TriggeredBy(Message.OfType<SkirmishGameQueueMessage>())
    .SetupContext((message, context) =>
    {
         context.Add("userId", message.UserId);
    })
    .Do(
        new SkirmishGameQueueCommand(userRepository,
            gameRepository, workerContext))
    .OnError(logException)
    .Start();

There are a lot of points to comment and discuss, feed for upcoming posts. Surely, the solution will evolve and new versions will be published (this week? next week?). But it is interesting to have a published game online AND the code to analyzes it.

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

June 29, 2011

AjModel: Model by Code (Part 2) Models and Repositories

Filed under: .NET, AjModel, ASP.NET MVC, C Sharp, Software Development — ajlopez @ 10:50 am

Previous Post

I was working on my AjModel project. You can download the source code from my AjCodeKatas Project under trunk/AjModel. I added a Model class, and enhanced Entity Model and Property Model:

The model refers all the entity models I want to have in the coded model. AjModel enrich the already coded classes of your model, adding information like human descriptions, legends, etc. The idea is to generate automatically a UI for the coded model, for different technologies. The enhanced model could have nothing new, and AjModel should generate the initial UI, at runtime. The enhanced model could be consumed from differents UI technologies: the “proof of concept” application is an ASP.NET MVC one.

There is a fluent interface for EntityModel, and PropertyModel. There are extension methods, and wrappers/builders, like:

Some usage examples, borrowed from my tests:

EntityModel<Customer> model = new EntityModel<Customer>();
FluentEntityModel<Customer> fluentModel = new FluentEntityModel<Customer>(model);
fluentModel.Name("BusinessCustomer")
    .SetName("BusinessCustomers")
    .Descriptor("Business Customer")
    .SetDescriptor("Business Customers");
//..
Model model = new Model();
var entityModel = model.ForEntity<Customer>();
entityModel.Descriptor("Business Customer")
    .SetDescriptor("Business Customers");
//..
Model model = new Model();
model.ForEntity<Customer>().Property(
    c => c.Name,
    pm => pm.Descriptor("Customer Name")
            .Description("The Customer Name")
);

Where pm is a FluentPropertyModel.

In the UI process, I want to retrieve an entity by its identity. Or I need to get a list of entities to build a grid. Then, I need something to manage the entities, as a list. I implemented repositories in a context, to be implemented by different technologies. The current implementation is an in-memory list:

I’m planning to write adapter examples to NHibernate, Entity Framework, but those ideas are still in blueprints 😉

Usage examples:

this.entityModel = new EntityModel<Customer>();
this.domain = new SimpleDomain();
this.repository = new Repository<Customer>(this.entityModel, this.domain.Customers);

Note that the repository is a typed one, using generics. And it needs an entity model, and (in the current implementation) an IList to manage. The context contains a list of repositories:

var entityModel = new EntityModel<Customer>();
var domain = new SimpleDomain();
var repository = new Repository<Customer>(entityModel, domain.Customers);
var context = new Context();
context.AddRepository(this.repository);
var repo = context.GetRepository("Customer");

SimpleDomain is a class I created for tests:

public class SimpleDomain
{
    public SimpleDomain()
    {
        this.Customers = new List<Customer>();
        for (int k = 1; k <= 10; k++)
        {
            Customer customer = new Customer()
            {
                Id = k,
                Name = string.Format("Customer {0}", k)
            };
            this.Customers.Add(customer);
        }
    }
    public IList<Customer> Customers { get; set; }
    public ProductList Products { get; set; }
}

A model can be created using a class like SimpleDomain. It discovers IList public properties:

var model = new Model(typeof(SimpleDomain));
var entityModel = model.GetEntityModel("Customer");
Assert.IsNotNull(entityModel);
entityModel = model.GetEntityModel("Product");
Assert.IsNotNull(entityModel);

I plan to add all types in an assembly that satisfied a predicate, like having “Entities” in their namespaces.

Entities can be added and retrieved to/from a repository:

Customer entity = new Customer() { Id = 1000 };
this.repository.AddEntity(entity);
Customer newEntity = this.repository.GetEntity(1000);

And they can be removed, too.

Entity model has the info to create new entities from values: a feature I will use in the UI:

EntityModel<Person> model = new EntityModel<Person>();
IDictionary<string, object> values = new Dictionary<string, object>()
{
    { "Id", 1 },
    { "FirstName", "Joe" },
    { "LastName", "Doe" },
    { "Age", "30" }
};
object entity = model.NewEntity(values);

In the next posts, I will discuss MVC UI implementation. All is work in progress, but the project is taking shape. And I having fun coding it 😉

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

June 24, 2011

Writing An Application Using TDD (Part 5) Adding Views

Previous Post
Next Post

Now I have some tests in place, I add some MVC views in this step. You can download the code from my AjCodeKatas Google Project, under trunk/AppTdd/Step04. So, this post has few new tests: it shows how we can build the interface AFTER the tests, and WITHOUT having a database or service layer, yet.

First, I added a new Site.master master page and style.css (borrowed from another ASP.NET MVC project)

I added a new Home controller:

Then, I added a view using the context menu over the Index method:

 

I modified the master page code, to have a new entry in its menu:

I added a new view associated to Index action in Subject controller:

I selected the “List” view content, and “Subject” as the type to use in the model.

But the controller method is:

public ActionResult Index()
{
    return View(subjects);
}

It uses a subject list, that is injected in the constructor by the tests:

public SubjectController(IList<Subject> subjects)
{
    this.subjects = subjects;
}

But wait! That list is injected by the tests. Now, I should inject in the normal process of the controller, in its parameter-less constructor:

public SubjectController()
    : this(Domain.Instance.Subjects)
{
}

I added a Domain.Instance to use as our in-memory domain:

public class Domain
{
    private static Domain instance = new Domain();
    private Domain()
    {
        this.Subjects = new List<Subject>()
        {
            new Subject() { Id = 1, Name = "Mathematics" },
            new Subject() { Id = 2, Name = "Physics" },
            new Subject() { Id = 3, Name = "Biology" },
            new Subject() { Id = 4, Name = "Literature" }
        };
    }
    public static Domain Instance { get { return instance; } }
    public IList<Subject> Subjects { get; set; }
}

I changed the links generated in the Index view from:

to use the Id property as primary key:

This is the result:

I created the other views using the Visual Studio “Add View…” wizard:

I had some missing actions, I wrote a new:

public ActionResult Edit(int id)
{
    var model = this.subjects.Where(s => s.Id == id).FirstOrDefault();
    return View(model);
}

With tests! 😉

[TestMethod]
public void GetSubjectForEdit()
{
    IList<Subject> subjects = GetSubjects();
    SubjectController controller = new SubjectController(subjects);
    ActionResult result = controller.Edit(1);
    Assert.IsNotNull(result);
    Assert.IsInstanceOfType(result, typeof(ViewResult));
    ViewResult viewResult = (ViewResult)result;
    Assert.IsInstanceOfType(viewResult.ViewData.Model, typeof(Subject));
    Subject model = (Subject)viewResult.ViewData.Model;
    Assert.AreEqual(1, model.Id);
    Assert.AreEqual("Mathematics", model.Name);
}

Curiously, I detected a “bad” test. I had written in my AddSubject test:

Assert.IsTrue(subjects.Any(s => s.Name == "Chemistry"));
Assert.AreEqual(4, subject.Id);

But the new id should be 5 (our testable list has 4 predefined subjects):

Assert.IsTrue(subjects.Any(s => s.Name == "Chemistry"));
Assert.AreEqual(5, subject.Id);

I fixed the code and the controller action, run the web application, and voila!

Main points:

– I am using an in-memory domain.

– The views run over the already tested actions

No service layer or persistence yet. Next steps: add more classes to domain (Books), service layer (using test), and some persistence.

Interesting related post about development with TDD without a database (or adding it after the tests) by @RonJeffries:

But We Need a Database … Don’t We? | xProgramming.com

See? We Don’t Need a Database … Yet | xProgramming.com

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

June 16, 2011

AjModel, Model by Code (Part 1) Inception

Filed under: .NET, AjModel, ASP.NET MVC, C Sharp, Software Development — ajlopez @ 11:12 am

Next Post

I’m a big proponent of raise the level of abstraction, separate problems from solutions. One of my project, AjGenesis, is dedicated to design free models that can produce (via code generation) applications in different platforms and technologies. Now, I want to explore another way: instead of code generation, I want to use simple runtime code to define and use an enhanced model.

First ideas

It’s natural to have a model (domain model, business model, you can name it):

You can have main classes (entities), associations, collection associations, services with methods, etc. And you can build all these artifacts using TDD, or not. But these artifacts ARE the system core. But you need to enhance the model, if you want to expose in a user interface. An example from AjGenesis:

<Entity>
    <Name>Customer</Name>
    <Description>Customer</Description>
    <SetName>Customers</SetName>
    <Descriptor>Customer</Descriptor>
    <SetDescriptor>Customers</SetDescriptor>
    <SqlTable>customers</SqlTable>
    <Properties>
	<Property>
	    <Name>Id</Name>
	    <Description>Id</Description>
	    <Type>Id</Type>
	    <SqlType>int</SqlType>
	</Property>
	<Property>
	    <Name>Name</Name>
	    <Description>Name</Description>
	    <Type>Text</Type>
	    <SqlType>varchar(200)</SqlType>
	    <Required>true</Required>
	</Property>
    </Properties>
</Entity>

This abstract model has attributes like Name, SetName to be uses as names in code generation, and Descriptor, Description to be used in interface (user communication) code generation. These additional attributes is part of I named “Enhanced Model”: a model with additional properties, information that help to describe the model in human terms. Maybe, I could add some additional data (SQL field lengths, etc), to be used in persistence, but it is not a target in my initial steps:

Interface models depend of the base technology to use. Once the enhanced model describe the entities and properties in user terms, view models can be built based on such information. And if the “human name” of an entity or property is missing, the code name can be used. There is “default” data and behavior in an enhanced model: use the model, Luke! In the following paragraphs are code that shows the way to enhance the model. But one key design decision is: if the model is not enhanced, I could generate all the interface from the plain model.

Some code

Then, I began to code AjModel. You can see my progress in my AjCodeKatas Project under trunk/AjModel. My first enhanced models are dedicated to Entities (main objects in the model) and their Properties:

This is a test model class, a simple Customer:

public class Customer
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Notes { get; set; }
}

Then, one test:

[TestMethod]
public void GetProperties()
{
    EntityModel model = new EntityModel(typeof(Customer));
    var properties = model.Properties;
    Assert.IsNotNull(properties);
    Assert.AreEqual(4, properties.Count);
    Assert.AreEqual("Id", properties.First().Name);
    Assert.AreEqual("Name", properties.Skip(1).First().Name);
    Assert.AreEqual("Address", properties.Skip(2).First().Name);
    Assert.AreEqual("Notes", properties.Skip(3).First().Name);
}

Upcoming: ServiceModel (describing services), and Model (containing the list of Entity and Service Models). More properties in EntityModel, like .Descriptor, .SetDescriptor, etc.

Each interface model depends of the final technology. As a proof of concept, I started to define an ASP.NET MVC interface model, in AjModel.WebMvc project. There is an EntityController, now dedicated to Customer:

public ActionResult Index()
{
    var model = new EntityListViewModel();
    model.Entities = Domain.Instance.Customers;
    model.EntityModel = new EntityModel(typeof(Customer));
    return View(model);
}

Domain.Instance.Customers is a in-memory list of customers. Some code in view:

<h2>
    <%= this.Model.Title %></h2>
<table>
    <tr>
        <% foreach (var property in this.Model.EntityModel.Properties)
           {
        %>
        <th>
            <%= Html.Encode(property.Name) %>
        </th>
        <%} %>
    </tr>
    <% foreach (var entity in this.Model.Entities)
       { %>
       <tr>
       <% foreach (var property in this.Model.EntityModel.Properties)
          { %>
          <td><%= property.GetValue(entity) %></td>
       <%} %>
       </tr>
    <%} %>
</table>

Next steps

I want to have a fluent interface like:

model.ForEntity<Customer>()
      .Descriptor("Customer")
      .SetDescriptor("Customers")

And I want to use Expression<Func…> to leverage code validation (define properties by code instead by name):

model.ForEntity<Customer>()
     .ForProperty(c => c.Name)
         .Description("Customer Name")
         .IsRequired()

Or something like:

model.ForEntity<Customer>()
     .Property(c => c.Name,
          pm => pm.Description("Customer Name")
                  .IsRequired()
        )
     .Property(c => c.Address,
          pm => pm.Description("Customer Address")
        )

where pm is a PropertyModel. .ForProperty returns a PropertyModel fluent interface. But .Property returns a fluent EntityModel builder, so it uses the second parameter to extended the selected property.

But no committed code in repo, yet. You know, I’m working in my free time, I’m still need to work, family fortune dissolved in Montecarlo tables 😉

Code Generation vs Runtime

I’m still prefer code generation from an free-defined model: it makes a clear distinction of the problem and the technological solution. And it can be easily adapted to the changes of technologies and language (Java vs Scala vs C# vs … whatever upcoming combination.. ;-). But most developers prefer to work with code. That’s the reason for this experiment. Since late nineties, I know morphic  in Smalltalk world (thanks to SUGAR Smalltalk User Group Argentina meetings, now defunct) See History of Morphic. And Naked Objects is another way to expose the model to the user/developer. See Naked Objects, Wikipedia. I read:

1. All business logic should be encapsulated onto the domain objects. This principle is not unique to naked objects: it is just a strong commitment to encapsulation.

2. The user interface should be a direct representation of the domain objects, with all user actions consisting, explicitly, of creating or retrieving domain objects and/or invoking methods on those objects. This principle is also not unique to naked objects: it is just a specific interpretation of an object-oriented user interface (OOUI).

The original idea in the naked objects pattern arises from the combination of these two, to form the third principle:

3. The user interface should be created 100% automatically from the definition of the domain objects. This may be done using several different technologies, including source code generation; implementations of the naked objects pattern to date have favoured the technology of reflection.

The naked objects pattern was first described formally in Richard Pawson’s PhD thesis[1] which includes a thorough investigation of various antecedents and inspirations for the pattern including, for example, the Morphic user interface.

This century, I found Magritte.

Now, it’s time to explore the runtime/reflection way in .NET. Pros: developers can enhanced the model using their IDEs and code; their can create new interface models. Cons: it’s limited to the underlying technology, in my case: .NET; new dynamic interface models can be hard to create; custom extension by manual code could be not easy.

Ok, enough for today, back to coding (and to work).

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

June 1, 2011

Writing An Application Using TDD (Part 4) Update and Insert

Previous Post
Next Post

In the previous post, I implemented the retrieve of one Subject data. No view is implemented yet. I’m writing the tests and then, implementing the code in the controller. It’s time to add a new Subject, using an action in the controller:

This was my first test:

[TestMethod]
public void AddSubject()
{
    IList<Subject> subjects = GetSubjects();
    Subject subject = new Subject() { Name = "Chemistry" };
    SubjectController controller = new SubjectController(subjects);
    ActionResult result = controller.Create(subject);
    Assert.IsNotNull(result);
    Assert.IsTrue(subjects.Any(s => s.Name == "Chemistry"));
    Assert.AreNotEqual(0, subject.Id);
}

GetSubjects() is a helper method presented in the previous post. It returns a list of test subjects. I added a new action in the controller class, so the solution could be compiled:

public ActionResult Create(Subject subject)
{
    throw new NotImplementedException();
}

The test was red:

Then, I completed the action method, with the minimal code to pass the test:

public ActionResult Create(Subject subject)
{
   subject.Id = this.subjects.Max(s => s.Id);
   subjects.Add(subject);
   return RedirectToAction("Index");
}

But I want to redirect to the details view for the new item. I added assertions to the test:

RedirectToRouteResult redirect = (RedirectToRouteResult)result;
Assert.IsTrue(string.IsNullOrEmpty(redirect.RouteName));
Assert.IsTrue(redirect.RouteValues.ContainsKey("id"));
Assert.AreEqual(subject.Id, redirect.RouteValues["id"]);
Assert.IsTrue(redirect.RouteValues.ContainsKey("action"));
Assert.AreEqual("Details", redirect.RouteValues["action"]);

I changed the action code, only to comply with the new requirement:

public ActionResult Create(Subject subject)
{
    subject.Id = this.subjects.Max(s => s.Id);
    subjects.Add(subject);
    return RedirectToAction("Details", new { id = subject.Id });
}

Now, the test is red:

I followed a similar path to write and pass the test for update a subject. This is the current version of the test:

[TestMethod]
public void UpdateSubject()
{
    IList<Subject> subjects = GetSubjects();
    Subject literature = subjects.Where(s => s.Name == "Literature").FirstOrDefault();
    Subject subject = new Subject() { Name = "SciFi" };
    SubjectController controller = new SubjectController(subjects);
    ActionResult result = controller.Update(literature.Id, subject);
    Assert.IsNotNull(result);
    Assert.IsInstanceOfType(result, typeof(RedirectToRouteResult));
    RedirectToRouteResult redirect = (RedirectToRouteResult)result;
    Assert.IsTrue(string.IsNullOrEmpty(redirect.RouteName));
    Assert.IsTrue(redirect.RouteValues.ContainsKey("id"));
    Assert.AreEqual(literature.Id, redirect.RouteValues["id"]);
    Assert.IsTrue(redirect.RouteValues.ContainsKey("action"));
    Assert.AreEqual("Details", redirect.RouteValues["action"]);
    Assert.IsTrue(subjects.Any(s => s.Name == "SciFi"));
    Assert.AreEqual(literature.Id, subjects.Where(s => s.Name == "SciFi").Single().Id);
}

The current controller action:

public ActionResult Update(int id, Subject subject)
{
    Subject toupdate = this.subjects.Where(s => s.Id == id).Single();
    toupdate.Name = subject.Name;
    return RedirectToAction("Details", new { id = id });
}

All the tests are green:

Some warnings: the tests are testing two ouputs: the change in the domain (a simple list) and the result action (an MVC concern). I should refactor (in an upcoming post) the implemention of the controller to separate the updates applied to the domain from the navigation results. I wrote the example in this way to show how to refactor the obtained code to have a better implementation. I could add tests that exercises the expected behavior when the subject to add is already in the domain, or the subject to update is missing.

Other note: there is no views yet. But I have the test in place to have confidence: when I added the views, I will have the expected behavior tested and in place.

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

March 28, 2011

Writing an Application using TDD (Part 3) First Detail

First post
Next post
Previous post

Since the previous post, I applied the suggestions in comments from @MartinSalias and @theHumanFlag, thanks!. First, I renamed Genre class to Subject, using the refactoring features of Visual Studio:

public class Subject
{
    public string Name { get; set; }
}

Second, now the controller receives and process an IEnumerable<Subject>:

public class SubjectController : Controller
{
    private IEnumerable<Subject> subjects;
    public SubjectController()
    {
    }
    public SubjectController(IEnumerable<Subject> subjects)
    {
        this.subjects = subjects;
    }
    public ActionResult Index()
    {
        return View(subjects);
    }
}

I made the change with confidence, thanks to the test.

In this new step, I added an action: to get a Subject by Id. A new property Id in Subjec:

public class Subject
{
    public int Id { get; set; }
    public string Name { get; set; }
}

I wrote the test:

[TestMethod]
public void GetSubjectForDetail()
{
    IEnumerable<Subject> subjects = new List<Subject>()
    {
        new Subject() { Id = 1, Name = "Mathematics" },
        new Subject() { Id = 2, Name = "Physics" },
        new Subject() { Id = 3, Name = "Biology" },
        new Subject() { Id = 4, Name = "Literature" }
    };
    SubjectController controller = new SubjectController(subjects);
    ActionResult result = controller.Details(1);
    Assert.IsNotNull(result);
    Assert.IsInstanceOfType(result, typeof(ViewResult));
    ViewResult viewResult = (ViewResult)result;
    Assert.IsInstanceOfType(viewResult.ViewData.Model, typeof(Subject));
    Subject model = (Subject)viewResult.ViewData.Model;
    Assert.AreEqual(1, model.Id);
    Assert.AreEqual("Mathematics", model.Name);
}

The test didn’t compile. I created the action:

public ActionResult Details(int id)
{
    return View();
}

The test compile, but its result was red. Now, go for the green light:

public ActionResult Details(int id)
{
    var model = this.subjects.Where(s => s.Id == id).FirstOrDefault();
    return View(model);
}

I had two tests, that give a list of Subjects to the actions. I refactored the test to separate the creation of such list. I extracted the method:

private static IEnumerable<Subject> GetSubjects()
{
    IEnumerable<Subject> subjects = new List<Subject>()
    {
        new Subject() { Id = 1, Name = "Mathematics" },
        new Subject() { Id = 2, Name = "Physics" },
        new Subject() { Id = 3, Name = "Biology" },
        new Subject() { Id = 4, Name = "Literature" }
    };
    return subjects;
}

Now, the test code is:

[TestMethod]
public void GetSubjectInDetail()
{
    IEnumerable<Subject> subjects = GetSubjects();
    SubjectController controller = new SubjectController(subjects);
    ActionResult result = controller.Details(1);
    Assert.IsNotNull(result);
    Assert.IsInstanceOfType(result, typeof(ViewResult));
    ViewResult viewResult = (ViewResult)result;
    Assert.IsInstanceOfType(viewResult.ViewData.Model, typeof(Subject));
    Subject model = (Subject)viewResult.ViewData.Model;
    Assert.AreEqual(1, model.Id);
    Assert.AreEqual("Mathematics", model.Name);
}

All tests in green!

As usual, the code is in my AjCodeKatas Google Project, under trunk/AppTdd/Step02)

Next steps: more actions, integrate views.

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

Older Posts »

Create a free website or blog at WordPress.com.