Software Development

is all it is about
Follow Me

This is a well-known scrum game that's been around for a while already. But is one of the games that everytime it is played, it is played differently.

How we did it

Our game took 2 hours. We started with having only the Product Vision (the picture above shows that I had the vision to build an Airbus A-380). We created some Epics out of it and went into a initial Grooming where we broke down the Epics into User Stories, the team estimated them and I, as a Product Owner, prioritized them.

Right after, we jumped into the planning, where the team committed to a certain amount of Story Points, and the Sprint started.

The Sprint

We timeboxed every meeting. 
  • Grooming and Planning took 3 minutes each
  • Sprints were of "2 days", every day lasting 5 minutes
  • And every day we had a quick daily (1 additional minute)
  • At the end of the Sprint, we had the review 3 minutes
  • The Retro: 2 minutes (so they could identify some improvements and actions)
  • And then we started with the next Sprint
We did it in 4 Sprints (1 hour and 40 minutes more or less)

As the initial Grooming took a while, we only had 8 minutes for a final round to see what were the learnt lessons.

Some Pictures

Some Insights

I found it very funny, and participants too! If you want to present it, it is so flexible that you can really decide which Scrum situations you want the participants to face and learn:
  • Starting a project from scratch in Scrum is a challenge when you are not used to the methodology
  • You can define unclear USs and then reject the Increment to make them aware that they have to clarify stuff before committing to it (or either reject it)
  • Time is short, so the team has to really learn quickly to work together and self-organize
  • It is very interesting to see how they create actions in the retrospective, and even, given the time constraint, invest time on improvements that finally pay off!
  • In this concrete case, they even asked to adjust the length of the Sprint to be more efficient.
The airplane has no wheels, seets were just drawn lines on the inside, the wing brakes are post its... but let's be honest, I did not expect that they could do that much! The team impressed me!

We wanted to throw it out of the balcony in the center of Barcelona and see if the most important requirement was met ;) but with the MWC ongoing and all the security around, was not the smartest idea!

Hope you like it!

The Goal

This goal of this game is to help to understand that there is a whole world of considarations to take when it comes to balance customers and projects.

The Game

The idea is simple. There are some customers (see them on the board in the picture above) which every iteration will send the company a new request. Every request can have one or more features. 

Customers happiness might change. Every request will bring a certain level of happiness to the customer. Whenever an iteration is gone and a customer does not receive any completed request, their happiness goes down. If they reach 0 happiness, they will look for a different supplier.

The trick here is that it is not only about their happiness, but also about the earnings and the business value. 

Together with the Customers' requests cards, there are some investment cards (like, more velocity for the dev team, more release capacity), which are nice to see the ROI.

Teams here are not developers. Participants become Account Managers (all from the same company). And they have to come to an agreement on which request to prioritize, even though it is from another Account Manager and has not a personal benefit, but a global benefit.

After every iteration, every team has to sum up how much they earned considering customer happines, incomes, ROI and Business Value. The team that gets more money in the end, wins.

One trick of this game is that, sometimes, there are customers which are just not worth it. Another trick: bring chocolate for the participants!


Especial Mentions

This one was prepared with my good friend Juanan as well, but he could not attend. If I remember correctly, his wife was giving birth in that moment!

This is the first post I'll be making about Workshops. In this case, this was the well known Scrum Lego game. The idea behind is about teaching Scrum basics while having some fun building a "city" with Lego.

The Game and the Boards

As a coach you will play the Product Owner role during the Workshop. It is important that you have your User Stories ready and printed (one per paper sheet). Create a Size Board in the wall where the team (participants) can put the User Stories according to their estimations. 

Then create a Scrum Board for all the teams where they can put into the Sprint Backlog the committed User Stories (in the picture below, it is the board in the far-away wall, where the rows represent sprints and the columns represent teams).

I hope the picture is understandable :)

My suggestion is that teams compete between them but they build together the same city.

Estimation Round

Even though teams are competing, let them estimate all together to better have references on sizes. Grab the User Stories one by one and let them put it into the wall right below the size they think it has.

Once the User Stories are estimated, start the Sprints.

The Sprints

Run a Sprint with all its events:
  • Let them plan and commit to a Sprint Backlog
  • Work
  • Do a Sprint Review
  • And then a short Retrospective
As a coach you want to teach them several principels, and the Product Owner role will help you to. Avoid giving very detailed User Stories so they learn to ask and clarify. Be picky when accepting their work in the Sprint Review. Randomly exclude someone from the game for a couple of minutes like if she had a training or is just sick (this kind of things have a big impact on the capacity of the Team during a Sprint).

Closing Debrief

Conduct a Closing Retrospective where everybody can point what she has learnt from the game and how to apply it. Feel free to raise real-like situations and open discuss about them. For example, as you did not provided detailed enough User Stories, what could the team have done?

Especial Mentions

I would like to thank my colleague and friend Juanan with whom I prepared it. He is just an awesome Agile guy!

On my previous post I wrote about how to start a project in Ionic Creator and export it to continue with development within Visual Studio.

Today, I would like to introduce the Ionic Project Template Visual Studio Extension that I created to simplify the process and be able to have a project already setup with the basic Ionic templates from Visual Studio (of course it is not a replacement for Ionic Creator, there you can drag and drop more components and set their style, but once you get familiar with Ionic, you would probably appreciate to be able to start the project quicker and apply the style yourself). You can find the extension in the Visual Studio Gallery.

Remember that you need to have the Visual Studio Tools for Apache Cordova installed first.

How to Use the Extension

Once you have the Visual Studio Tools for Apache Cordova installed, and the Ionic Project Templates extension installed (remember to restart Visual Studio after installing the extension), just go to the File menu, then New, then New project.

The New Project dialog appears (as in the picture in the beginning of the post). Under Javascript you should now see the Ionic Project Templates installed. Just select the one you would like to start with and give it a name, a path where to save it, and optionally add it to source control as you would do with any other project.

About the Templates

The templates will provide you the basic structure that you would get when exporting them from Ionic Creator. Well, maybe a little bit more. Some are tuned and with namings to help you understand what is what (like the tabs template). They also include the project structure (Ionic Creator only gives an index.html unless you export it using the Ionic CLI), with all their dependencies and the code adjusted to run with the Visual Studio Tools for Apache Cordova. Version 1.0 of the extension comes with Ionic's Beta 14.

There are 5 templates included in the VS Extension:
  • Blank Ionic App
  • A template with a built-in login page
  • A template with a built-in side menu
  • A template with a built-in signup page
  • And a template with built-in tabs


Do you want to improve the templates and keep the extension up to date? Feel free to join the GitHub project!

In case you have comments or questions, feel free to leave a comment either here or in the Visual Studio Gallery page.

Hope it helps!


This time I would like to share how to easily start from scratch an Hybrid App using Ionic Framework, AngularJS and Apache Cordova. We will have two main tools for this guide: Ionic Creator and Visual Studio with Apache Cordova Tools installed.

Ionic Creator

The guys from Ionic Framework are doing a great job and developing a new framework and backend services with a very good result in a record time. They've been running for about a year and it is impressive what they've done. 

Ionic Creator is not as Ms Blend for XAML apps, it is more like the Visual Editor you find in almost every IDE.Then, what is especial about it? In the Ionic guys words: "Lets you rapidly mockup and prototype a real mobile app in minutes". More than that, you can just export it as a project and start working on the code and do the needed bindings. And that's it.

Start the project

Go to the Ionic Creator site and log in (sign up if you do not have an account). Now, we will create a project. Just give it a name and select the template you want to use.

Look at the picture below. This is how it should look like. On the Left side you have the Pages pane, where your Tabs hierarchy in this case was created. Below, you have the available components to drag to the content area (located in the center of the screen, you will recognize it as it looks like an iPhone screen). On the Right side you will find the Properties pane. It will display the properties of the selected element. Just above it, you will see a switch between Edit and Test. This will allow you to switch between edition mode (the one we are now) and the "preview" mode, to see how what we've done would look like.

Creating the UI

On the Pages pane open the Tabs node, and for every Tab node remove everything but its Content node. We only need two tabs for the sample, so remove the third one. Now, we are going to change their title and icon. For doing this, click on one Tab node. Notice that the Properties pane has been updated and now you can enter a title and select an icon. I called them "Attendees" and "Register", and selected the "ion-ios7-contact-outline" and "ion-ios7-bookmarks" icons respectively.

If you toggle to Test, you should see something like this:

Adding Extra Pages

Go to the Pages pane and click on the plus to add a new one and select the Blank template. Change its Title to "Attendees" and its Routing URL to "/attendees". Note that now that the Attendees page is selected, if you enter the Test mode you will preview this page, but if you have the Tabs page selected, you will preview the Tabs page instead.

Do exactly the same steps now for creating the "Register" page, but instead of selecting the Blank template use the Sign Up one. You will see a form with Name, Username and Password fields and a button to Sign Up. Feel free to play around with the style of the form (for instance, change the Type attribute of the Username to Email and the Type attribute of the Password to Password), but don't forget to rename the Routing URL to "/register"!

Adding Content to the Pages

As our Register page is already fine, let's add content to our Attendees one. We want to see a list with all the Attendees the Workshop will have. Select the Attendees page in the Pages pane and, from the Components list, drag and drop into the View a List.

Now, select the Item Thumbnail component and drop it in the List you just dropped in the View. Do it several times. Now we have a strange list with a mix of regular list items and thumbnails list items. In the view, select the regular list items and delete them using the "x" that appears on the top-right corner. Change the properties of the thumbnails to make them appear like they have data. It could end up looking something similar to this:

Starting to Code

Exporting from Ionic Creator

Now, on the header bar of the Ionic Creator, click on the second button (circled arrow down) that is right beside you project's name. This is the Export button. It will allow you to get your project in three different ways: using the CLI, downloading a ZIP or just copying the code. Use the ZIP option so we can use it later.

Getting Visual Studio Ready

If you didn't do it before, you will need to install the Visual Studio tools for Apache Cordova. It will install a lot of stuff for you.

Once it is installed, you will have a new project template under the Javascript language. Open Visual Studio, and create a new project for Javascript -> Apache Cordova Apps. See the picture below:

Bringing the Ionic Project into Visual Studio

Now, it is time to bring what we've done in Ionic Creator into Visual Studio. Open the index.html file that Visual Studio created for you and now let's merge it together with the one Ionic Creator generated.

From Ionic Creator's index.html file, copy the following things to the Visual Studio's index.html file:
  • Within the <head>:
    • The meta viewport tag.
    • The style for google map container (only if you will need it. If so, I would suggest to move it to your css folder instead anyway)
    • Import the references to ionic.css and ionic.bundle.js (you don't have them yet and Visual Studio will warn you. We will fix it later)
    • Add a reference to app.js (which does not exist yet)
  • From the <script> tag:
    • In Visual Studio, create an app.js file and copy there all the javascript content from <script> tag in the index.html that Ionic Creator generated.
  • Within the <body>:
    • Just copy the <body> itself with all its content. Be careful! You will still need the two references (cordova.js and platformOverrides.js) that Visual Studio created for you within the <body> tag. Make sure you keep them!
Now it is time to download the missing things:
  • ionic.css (click the download button)
  • ionic.bundle.js (comes in the zip from the link above):
  • cordova.js (there is nothing to do with this. It will be created by Visual Studio the first time you succesfully compile).
Important! If you take a look at the index.html file you will notice that the references are expecting the ionic.css and ionic.bundle.js in the "lib" folder, which does not exist. Create it and copy the files there, or organize them as you want (but update the reference path in the index.html!)

If you run the project using Ripple, you should see something like this:

I agree with you, not very impressive so far. Let's try to get our two pages within the two tabs, to see the name of the application in the header and to give a little bit of color. But first, let's do it understanding what was autogenerated.

What is the Generated Code

In the <body> tag, the first thing you will notice is the <ion-nav-bar> and the <ion-nav-view>. Remove both leaving the parent <div> empty, as we are going to move some content here.

You will also find 3 <script> tags with an Id and a Type (templates in this case). The Id is the name of the page. Take the content of the first one (<ion-tabs>) and place it within the <div> we just emptied. The <script> that is now empty, can be completely removed.
The <ion-tabs> has 2 <ion-tab>. Each of them has an <ion-content> tag. Replace them with <ion-nav-view name="">. As name, for the first one put "attendees" and for the second one "register".

You have to also add the attribute ui-sref for every ion-tab like this:
<ion-tab title="Attendees" icon="ion-ios7-contact-outline" ui-sref="attendees">
<ion-tab title="Register" icon="ion-ios7-bookmarks" ui-sref="register">

The ui-sref attribute points to a state configured in the AngularUI Router, we will see it in the app.js file.

For the other 2 <script> tags, rename their Id to "attendeespage.html" and "registerpage.html".

Go to the app.js file. It is creating and angular module called "app" with Ionic as a dependency. The next thing you will see is the ".config". Ionic uses AngularUI Router and, as we said, uses the concept of states. Defining states is the next thing you find. You probably already noticed that the tamplates URLs are not correct because we changed them in the index.html file. Let's remove the one that belongs to the tabs (as it is not a template anymore, but our main view container) and change the other two accordingly to "attendeespage.html" and "registerpage.html".

Let's do a short explanation here on states:

  • they have a name (the first string after the opening parenthesis). Remember the state we are pointing to with the ui-sref attribute?
  • they have a URL. It helps us to create the nested navigation if needed (and even indicate that parameters will be passed). In this case, we don't have that scenario, so we forget about it.
  • the templateUrl is the Id given to the template we want to use to represent the state graphycally.

Yes, you got it right. we need to do something with the names of the auto-generated states. Call them "attendees" and "register". In this way, the states names will match the ui-sref attributes of the ion-tabs.

The URLs will remain as they are (as we gave them the name already in Ionic Creator).

The last change is the "templateUrl". The "attendees" state would completely look as follows:
             .state('attendees', {
                  url: '/attendees',
                  views: {
                      attendees: {
                          templateUrl: 'attendeespage.html'

If you remember, we said in one ion-tab that it would contain an ion-nav-view named "attendees", as the view we just defined for the "attendees" state. And we are saying that the template we will use for displaying that view is the content of the script with Id "attendeespage.html".


This is the result we've got so far.

Now, just go ahead and play with the style, with angular, remove the fake data and do actual bindings, organize the code a little bit better than we've done, add some Apache Cordova plugins to access the hardware, connect to backend services like Firebase or Azure Mobile Services, and, of course, deploy it to the different app stores. If you do it, come back and let us know what you've created ;)

Hope it helps!

Special Mention

As I used them for the sample app, I want to give special mention to my friend Drew Simmie, a great Personal Development Coach settled in Toronto. He is working close with the goverment to help young enterprenours to learn and act. You have to meet him. He will just touch you and inspire you.

And, of course, to my lovely wife, Denisse. She is just the best thing that could have happened in my life. I bet you will like her designs!


Restrospective is one of the official meetings that Scrum considers. It is a timeboxed meeting where the Scrum Team gathers together at the end of every Sprint to look back and think about how things went.

Though the meeting is official, there is not an official "template" for it. It is on the Scrum Master to host it and define which format the meeting will have.


Personally, I like to do different exercises for every retrospective. In this manner, it is easier to get the team involved (meetings are boring for developers and the Scrum Master has to make them attractive for the team, as he is the facilitator)

This article is not about the different exercises (maybe I will share a series of Retrospective exercices, but, in the meantime, you can take a look at the Restrospective Toolbox my colleague Jimmy did as part of his Master Piece, really great job!). 

Common Mistakes

This article is about the things that could go wrong, which are a lot: not every team member participates and gives his opinion, finger pointing, not having a clear goal for the meeting, leaving the meeting without any actions, not following up on the actions agreed on the last Retrospective... but, the point I want to stress today, is to keep the focus within the team's impact area as a rule.

Making Excuses

That is what I mean with keeping the focus of the meeting within the team's impact area. I've seen too often retrospectives going away only talking about what people not belonging to the team should have done, as if the team's actions had no impact on the output of the Sprint. This is so wrong!
Do not waste time complaining about what managers should do, how the Requirements Engineer should work, or how QA should give you feedback. Focus on how the team did, what can be improved, what should stay the same, what should the team do more, and so on.

But I said "as a rule", and it means, that there can be exceptions ;)
Sometimes it is needed to point out some situations. Maybe managers interrupt developers so often day after day for weeks now, or maybe the Requirements Engineer does not deliver his work on time so that developers know what the constraints are. It is fine to point this kind of things out when they become the usual scenario, to set some action, and let the right person remove the impediment itself (most likely the Scrum Master). But it is not ok to waste Retro after Retro complaining the whole meeting about it. It must be the exception.

That is why I think it should be called Intro-Retrospective, because a team should focus (as a rule) on what they can have an impact on. 


Just to let you know, I am a .Net developer certified for Store Apps development (now call Universal Apps). It means that most of the time I spent on creating mobile applications was native development. It also implies that I feel very comfortable on my Windows 8 machine with my beloved Visual Studio!

Hybrid Apps Development - Ionic + AngularJS

So, now called Hybrid Apps are supposed to run cross-platform (mostly iOS and Android, and sometimes on other environments like Windows Phone, Windows 8, Firefox, Blackberry ... )

Switching from native Store Apps to Hybrid meant I had to say goodbye to C# and XAML and adopt HTML and Javascript. 

I started to look for the right things to use. A quick search at Google will probably lead you to jQuery Mobile, Bootstrap, Kendo UI, Onsen UI... and a lot more. But, I have to say, that after giving a try to almost all of them, Ionic Framework was my winner.

Why? Several reasons: 
  • It is very well integrated with AngularJS and you can forget about some issues you will find with jQuery Mobile for instance. 
  • The look and feel is great just out of the box. Now, with update 14 (the last beta) platform specific magic is about to happen!
  • Documentation is excellent. Very easy to get started and familiar with.
  • Support is great.
  • They keep going together with AngularJS evolution. But that is not all, as they are creating other products around like the Ionic Creator to make Ionic development easier.

Hybrid Apps Dev Environment

Cool, having decided what technologies to use is one step, but now, you have to decide your setup for your dev environment. If you are like me, a Microsoft guy, you are going to have a hard time! (not really now).

Your first option will be Visual Studio (of course!). Now, with the Apache Cordova tools for Visual Studio they've made it easier. You can code, configure your plugins, debug and run (either using the emulator or a real device - not that straight forward when talking about iOS) from your Visual Studio.

But, what if, like me, you don't have the same enviroment wherever you go? Visual Studio is only installed on my work laptop ( I have no personal computer at home beside my wife's... I know, I am strange). As I do not want to polute her machine, I have a second option: Code Anywhere! I can just log in to my account and keep writing code on my wife's laptop's browser. Or even better, I can just turn on my iPad (yes, I said I am a MS guy but have an iPad, but I have my reasons for that - testing!), start the Code Anywhere app and keep going (there is a drawback here... the Code Anywhere app does not fully support keyboard: arrows don't work. They promised to fix it in the November 2014 release, but there was no release yet)

You might be thinking about how to move code back and forth between both. There are two options here: you can copy paste (just kidding, forget about it), or use a Git repository (this is specially helpful for making builds, but we will talk about it in the next section).

Testing your Apps

As I said before, you can run the emulator or the App on a device directly from Visual Studio. This is only "true" for Android and Windows devices. Ok, it is also true for iOS, but Visual Studio alone won't do the magic. Now you need a Mac machine listening, and, I personally do not have it (yet).

Now you probably understand why I have an iPad. The other alternative to test it as a native App beside using Visual Studio is using PhoneGap Build. Still you will need your Apple Developer Certificate when building for iOS devices.

If you are not using plugins at all, you can run it directly from CodeAnywhere as well. If you are in the browser, a new tab will open with your App. If you are using the iPad, Safari will be launch and you will see your App there.


Developing Hybrid Apps is funny and possible switching from different environments. It does not matter where you are and what device you are on. Technologies like Ionic and Angular make it easy to deliver a high quality app with a beautiful modern look and feel. All the development process will be almost free (as Visual Studio has released its community version now). But when it comes to test it on a real iOS device, you will need either a Mac or an active iOS Developer account. 

Feel free to leave your comments and share your experience or your setup. I am sure you will have some hints to improve my current scenario. 

Hope it helps!