Desarrollo de un proyecto con Visual Studio Online - Parte 1 de 3

El pasado 13 de Noviembre Microsoft anunció el lanzamiento de Visual Studio 2013 y con él Visual Studio Online. A lo largo de los siguientes posts vamos a ver todas las novedades que trae Visual Studio Online mediante la realización de un proyecto de Website alojado en Windows Azure. Realizaremos todo el ciclo de desarrollo de un proyecto apoyándonos en todas las herramientas que Visual Studio Online nos ofrece: control de código fuente, planificación del trabajo del equipo utilizando una metodología ágil, edición de código desde la nube con el editor Monaco…

Nuestro proyecto: Cubitos

El proyecto que vamos a realizar es una web de consulta donde vamos a alojar los diferentes objetos que podemos fabricar en nuestro juego Cubitos.

Cuenta en Visual Studio Online

Lo primero que vamos a hacer es crear nuestra cuenta de Visual Studio Online si no la tenemos. Para crear nuestra cuenta de Visual Studio Online lo único que necesitamos es tener una Microsoft Account.

image

Si no tenemos una Microsoft Account nos podemos crear una, para ello no hace alta disponer de una cuenta de correo de Hotmail o Outlook.

Nuestro primer proyecto

Una vez hemos configurado nuestros datos accedemos a la URL de nuestro Visual Studio Online. Lo primero que nos ofrece es crear un nuevo proyecto. Nos pide el nombre, y además podemos añadir una descripción.

Por otro lado nos deja elegir entre dos servicios de control de versiones: Team Foundation Version Control (TFVC) o Git. TFVC es un repositorio de servidor centralizado mientras que Git es distribuido.

image

También Visual Studio Online nos ofrece la posibilidad de elegir una plantilla para el modelo de desarrollo ágil. Nosotros en nuestro caso vamos a elegir MSF for Agile Software Development, que nos da más flexibilidad que la plantilla de Scrum. Por otro lado tenemos CMMI que está pensada para proyectos más formales.

Una vez que hemos seleccionado las opciones que más nos interesa, en nuestro caso TFVC y MSF for Agile Software Development, le damos a crear proyecto. Ya está, ya tenemos nuestro proyecto en Visual Studio Online.

Planificación del proyecto

Usando una metodología ágil

Antes de ponernos a trabajar con nuestro proyecto tenemos que tener claro algunos aspectos de la metodología ágil que vamos a utilizar.

La característica principal de una metodología ágil es la capacidad que tiene un equipo de desarrollo para adaptarse al cambio. Al contrario de otras técnicas de desarrollo clásicas donde se hacía una gran captación de requisitos, un desarrollo y una entrega de producto, las metodologías ágiles buscan hacer un desarrollo incremental del proyecto, en ciclos de desarrollo más cortos. Para ello se utilizan conceptos como Product Backlog, historias de usuario, tarea, etc. Vamos a ver que son estos conceptos y cómo trabajar con ellos en Visual Studio Online.

 

Historias de usuario

Una historia de usuario es la representación de los requisitos de software en lenguaje común. Sigue siempre la misma estructura:

Yo como (rol) quiero poder (funcionalidad) para (valor)

Por ejemplo

“Yo como usuario quiero poder iniciar sesión en el sistema para poder acceder a la facturación “

“Yo como administrador quiero poder ver los usuarios registrado para poder realizar un control”

Estas historias de usuario se almacenan priorizadas por su retorno de valor en un Product Backlog.

 

Visual Studio Online

Para añadir historias de usuario a nuestro proyecto debemos ir a la pestaña de trabajo (WORK) y luego a la categoría Stories.

image

 

Únicamente debemos escribir el título y pulsar el botón de añadir. De esta forma añadimos todas las historias de usuario que consideremos oportunas. Durante la planificación inicial del proyecto es interesante definir todas las historias de usuario que conforman el mismo.

 

Tareas

Las historias de usuario se dividen en tareas, que definen, ya en lenguaje técnico, las unidades últimas de trabajo del equipo.

 

Visual Studio Online

Una vez tenemos las historias de usuario, podemos habilitar la opción de ver las tareas en las que se descompone y simplemente debemos de pulsar sobre el botón más para añadir una.

image

 

Ahora debemos descomponer nuestras historias de usuario en tareas. Cuando creamos una tarea nos aparecen varios apartados. En Status podemos asignarle una tarea a un miembro del equipo e indicar en que estado está. En Planning podemos indicarle como de prioritaria es una tarea. Por otro lado podemos decidir a qué área pertenece la tarea (diseño, implementación, gestión…) y en qué iteración desde el apartado Classification. Y por último en el apartado Effort puedes indicar la estimación de en horas de las tareas, además del tiempo completado y el tiempo restante.

image

 

Estimación de tiempos

Es importante que estimemos bien el tiempo de cada tarea, ya que eso marcará el que podamos o no acabar los Sprints con éxito. En base a la capacidad del equipo debemos ver que historias de usuario se van a meter en el siguiente Sprint.

Con Visual Studio Online esa tarea es bastante fácil y ya viene integrada. Para empezar vamos a ir al Sprint 1 para definir nuestro primer Sprint

Lo primero que tenemos que hacer es definir la capacidad del equipo. Para ello pulsamos en Capacity y definimos que carga de trabajo que puede llevar cada miembro del equipo al día y cuando días va a estar sin trabajar (vacaciones, trabaja menos días a la semana…).

Además vamos a definir la duración del primer Sprint. Para ello nos vamos a la esquina superior derecha donde pone Set dates. Ahí definimos la fecha de inicio y fin del Sprint y el nombre.

 

image

 

En este momento podemos añadir ya al primer Sprint las historias de usuario y tareas que nuestro equipo se ha comprometido a realizar. Para añadir historias al Sprint nos vamos al apartado Stories y las podemos arrastrar al Sprint que queramos o con botón derecho en la historia nos aparece un menú con el que podemos mover la historia de usuario al Sprint que queramos.

Dado que soy la única persona del equipo y que trabajo mi carga diaria que puedo dedicarle al proyecto son dos horas. Añado la primera historia de usuario y tengo los siguientes datos.

 

image

Ya no puedo añadir ninguna tarea más, porque el equipo ya no puede soportar ninguna tarea más.

 

Burn Down

Existe una gráfica en el proyecto, llamada BurnDown, que me indica cómo se van bajando el número de horas totales del proyecto e indica la velocidad del equipo.

 

image020

 

 

A programar!

Ya podemos empezar con el desarrollo del proyecto. Abrimos nuestro Visual Studio de escritorio y seleccionamos Nuevo Proyecto > Web > ASP .NET Project. Seleccionamos MVC y aceptamos. Ya hemos creado nuestro proyecto.

image

 

Ahora tenemos que subir nuestro proyecto a Visual Studio Online a través de TFVC. Para ello, vamos a la pestaña Team de Visual Studio y seleccionamos Connect to Team Foundation Server.

 

image

Vamos a Servers y añadimos nuestro servidor, con la URL de nuestro Visual Studio Online. Seleccionamos nuestro proyecto de Visual Studio Online y ya está.

 

image

 

Ahora ya podemos añadir nuestro código al control de versiones.

El siguiente paso es configurar nuestro Workspace. TFS necesita saber que carpeta local se corresponde con qué carpeta del servidor. De esa manera se puede llevar registro de los ficheros que se modifican en local y en el servidor. En Visual Studio se pueden asociar proyectos enteros, colecciones o carpetas individuales.

Una vez configurado el Workspace, los nuevos proyectos de Visual Studio que se creen en esa carpeta, pero que no estén asociados a un control de código fuente, serán asociados a este de manera automática.

Para ello debemos hacer click derecho sobre la solución, y seleccionamos Add Solution to Source Control,  de esa manera el proyecto recién creado está asociado a este proyecto de TFS. El siguiente paso es enviar este conjunto de cambios al servidor pulsado con el botón derecho del ratón sobre la solución y seleccionados Check In.

En el menú de cambios pendientes podemos añadir un comentario que identifique nuestro Check In. Además, como veremos en los siguientes post podremos asociar el Check In a tareas o historias de usuario de nuestro Product Backlog para tener trazabilidad del progreso de las tareas y en qué conjunto de cambios se ha finalizado una tarea.

 

image

 

Hacemos el Check In y ya tenemos nuestro código en el control de versiones de Visual Studio Online. A partir de los siguientes post vamos a ver como se trabaja con Visual Studio Online, actualizando las tareas, registrando nuestro trabajo…

Os dejo el enlace al segundo y al tercer post.

 

Un saludo,

Sergio Gallardo Sales (@maktub82)

 

PD: Mantente informado de todas las novedades de Microsoft para los desarrolladores españoles a través del Twitter de MSDN, el Facebook de MSDN, el Blog de MSDN y la Newsletter MSDN Flash.