jueves, 28 de abril de 2016

Lo bueno, lo malo y lo feo de Xamarin (Mi experiencia con Xamarin)

Decidí escribir este post para hablar un poco como me ha ido estos últimos años trabajando con Xamarin y compartir algunos aspectos que pueden ser de ayuda cuando hay que decidir entre usar esta plataforma o crear apps nativas.

Los últimos tres años he trabajado con Xamarin (Xamarin.Android y Xamarin.iOS no he usado Xamarin.Forms en proyectos "reales") creando todo tipo de apps y en distintos escenarios, he creado apps para las plataformas móviles, otra que solo son Android y Desktop, una mas que además de los móviles comparte código con una pagina web, apps que se ejecutan en tabletas Android con hardware a la medida, he integrado dispositivos de hardware de terceros, entre otras cosas.

A lo largo de esos desarrollo me he encontrado con muchos retos, retos técnicos relacionados directamente al código que estoy creando y otros relacionados a los factores que son importantes durante el desarrollo, por ejemplos los entornos de desarrollo, la documentación, la calidad del soporte técnico de Xamarin, etc.

Básicamente en ese contexto ha sido mi trabajo y partiendo de eso voy a escribir sobre las cosas que mas me han gustado y las que no me han gustado sobre esta plataforma, por supuesto hay mas cosas que puedo no estar mencionando.



Lo bueno


1 – Uso de código .NET

La causa por la que se decidió usar Xamarin en la empresa en la que trabajo fue porque ya se tenía una lógica de negocios en C# (mas de 50 clases), la cual llevaba muchos años funcionando en ambientes “tradicionales” (desktop y servidor). Para usar esta lógica en Xamarin.Android y Xamarin.iOS fue tan simple como compartir el proyecto Core con estas plataformas usando un plugin para Visual Studio (Project Linker, *ya VS permite hacerlo sin plugins), en el caso de WP hubo que modificar algunas clases por unas mas modernas para el manejo de XML, lo mejor es que esta actualización de clases funcionaba en las demás plataformas, de este modo no hubo que mantener varias versiones del Core.


2 – El soporte técnico

Otra de las ventajas es el soporte técnico, en general cuando he preguntado algo al mail de soporte obtengo respuesta al siguiente día hábil y siempre me ha respondido gente con toda la disponibilidad de resolver el resolver el problema.


3 – La documentación

La documentación es muy completa, prácticamente todo lo necesario para comenzar se encuentra en su sitio web para desarrolladores, también los errores mas comunes ya tienen respuesta en su foro o en sitios como stackoverflow. Si eso no funcionaba había mucha documentación buscando como MonoDroid y MonoTouch (antecesores de Xamarin.Android y Xamarin.iOS) aunque hace mucho tiempo que no he tenido que recurrir a eso.


4 – Uso de código Java y Objective C

Algo que me ha parecido muy bueno es la capacidad de poder utilizar librerías nativas en los proyectos Xamarin, por ejemplo si por cuestiones de tiempo o falta de experiencia es necesario el apoyo de alguien que solo conoce de Android con Java u iOS con Objective C, para mi ha sido muy sencillo que esta persona de apoyo encapsule todo en una librería nativa y yo consumirla desde Xamarin. 


5 – Curva de aprendizaje para iOS

De las cosas que mas me han gustado de iOS es que no es necesario conocer Objective C para poder crear apps si solo usaremos código C# sin usar alguna librería creada en Objective C podemos manejar métodos, el ciclo de vida, objetos, etc. como en cualquier programa .Net con C#, por ejemplo no es necesario crear outlets y actions de manera manual cuando se trabaja con interfaces gráficas, Xamarin hace esto transparente para nosotros.


6 - ALM

Finalmente algo que me ha funcionado perfectamente bien es la integración con Visual Studio Team Services para el control de código fuente, nunca he tenido problemas con los diferentes archivos que se usan para el trabajo con las apps Xamarin.Android o Xamarin.iOS. Hace poco comencé a probar HockeyApp en una de mis apps y ha funcionado de maravilla.


Lo malo y lo feo


1 – Actualizaciones

Creo que una de las cosas que deben mejorar es el tema de las actualizaciones, en ocasiones cuando he actualizado cualquier cosa del entorno (principalmente la Mac) todo deja de funcionar, por ejemplo una vez salió una versión nueva de Xamarin Studio en el canal “estable” de actualizaciones y dejo de funcionar todo mi proyecto de iOS, tuve que regresar a la versión anterior (un proceso muy tedioso) y esperar a una versión mas actual para poder actualizar. Contactando al soporte me pedían usar una versión Beta, lo cual para una app empresarial conlleva ciertos riesgos.  Creo que si el instalador de actualizaciones y/o el IDE verificaran las versiones compatibles de ambiente (Sistema Operativo, XCode, Java, etc. ) se evitarían estos problemas o sería mas fácil saber que corregir.


2 – Soporte técnico

Otro tema es que aunque el soporte es muy amable y busca solucionar los problemas, siempre solicitan el código fuente de tu proyecto que falla, lo cual es difícil porque no siempre puedo obtener autorización para andar enviando proyectos por correo. Algo importante que mencionar es que generalmente los problemas son del entorno de desarrollo y no del código por lo cual no me hace sentido que me pidan el código si les informo de un problema de con el diseñador de interfaces de Android o si Visual Studio se cierra cuando quiero ver las propiedades del proyecto y eso no sucede en Xamarin Studio. Los logs que genera Xamarin tanto en PC o en Mac tiene mucha información y muy rara vez los solicitan, por lo cual si uno no sabe de su existencia puede perder mucho tiempo antes de que ellos los soliciten, explicando de donde se deben obtener.


3 – Dificultad para usar librerías Objective C

Es muy útil poder usar código nativo sin embargo en el caso de iOS es un poco complicado hacer los binding para utilizar librerías nativas en el proyecto Xamarin,   hay que tener conocimientos medianamente solidos de Objective C, lo cual quita la ventaja de la curva de aprendizaje si nuestro proyecto depende de algo ya creado de manera nativa, por ejemplo el SDK de un dispositivo de hardware.


4 – Dificultad para ejecutar un proyecto nuevo

Uno de los temas que no me parece muy grave pero si es un poco molesto es lograr que un proyecto se ejecute por primera vez, sobre todo Xamarin.Forms. Entre errores por la descarga de paquetes nuget, errores con las API de Android seleccionadas por defecto, etc. podemos perder un par de horas (sobretodo si estamos empezando a conocer la plataforma) en lograr ejecutar el proyecto en blanco. La parte rescatable es que mucho errores son comunes y la solución es fácil de encontrar en los foros de Xamarin, la otra parte buena es que después de que logramos ejecutarlo casi nunca vuelve a haber problemas de este tipo a lo largo del desarrollo.


5 – Integración con Visual Studio

Por último algo que creo debe mejorar mucho (sobretodo ahora que están pidiendo que se use Visual Studio y nos olvidemos de Xamarin Studio para PC) es el soporte para Visual Studio, este es demasiado inestable cuando se trabaja con Xamarin, en ocasiones un mismo proyecto puede funcionar perfecto en Xamarin Studio y no en Visual Studio. Es importante aclarar que no he tenido ningún problema de estabilidad con las apps ya empaquetadas,.



Al final ¿recomiendas Xamarin?

Si lo recomiendo, les puedo decir que es una plataforma muy buena para el desarrollo de apps iOS y Android (Mac no lo he usado) y fácilmente se integra con proyectos Microsoft .NET (Desktop, Web, Consola, ensamblados dll, etc.). La plataforma aun tiene mucho por mejorar (en ocasiones hay que tener mucha paciencia, sobretodo siendo nuevo) sin embargo al día de hoy no tengo quejas en cuanto a la estabilidad de los productos finales y creo que la clave para lograr crear aplicaciones que aprovechen esta plataforma esta en entender los conceptos básicos sobre los diferentes tipos de proyectos y las estrategias para compartir el código, de lo contrario se terminan haciendo aplicaciones nativas independientes con la diferencia de usar C# en lugar de Objective C y Java.

miércoles, 6 de abril de 2016

Haciendo deployment a un dispositivo Android mediante la red TCP IP

En este pequeño tutorial voy a demostrar como se puede hacer la instalación de una app a un dispositivo Android usando la red en lugar del cable USB. Hay varios escenarios donde esto puede ser útil, dos de los casos con los que me he encontrado son los siguientes:
  • Alguna vez tenia que instalar y debuggear una app en un dispositivo hecho a la medida, que tenia Android como Sistema Operativo y del cual no me dieron los driver para el USB y el dispositivo tenia acceso Root y la Terminal funcionando.
  • Actualmente trabajo con una MacBook Pro donde tengo virtualizado Windows con Parallels, esto para poder trabajar con Visual Studio conectado a los Visual Studio Team Services. Para no instalar dentro de la maquina virtual el emulador “Android Player” que provee Xamarin, lo cual no parece una buena idea, lo que hice fue instalar el Android Player en la maquina host y conectarlo a la maquina virtual mediante la red que se crea entre las dos maquinas.
Como lo mencione hace unas líneas para este ejemplo estoy utilizando lo siguiente:
  • Una MacBook Pro con OS X El Capitan
  • Windows 10 virtualizado con Parallels
  • Android Player con una instancia de un Nexus 4 con Lollipop
  • En ambos sistemas tengo Xamarin con todas sus actualizaciones tanto de Xamarin como de XCode en el caso de OS X
En el caso del emulador ya viene configurado con las opciones de desarrollador activadas y listo para el debug mediante TCP. En el caso de un dispositivo físico hay que usar estos comandos antes de realizar la conexión

En un dispositivo con acceso Root desde la terminal usamos los siguientes comandos
su
setprop service.adb.tcp.port 5555
stop adbd
start adbd

En este caso no hablare de un dispositivo sin acceso Root el cual de inicio debe conectarse por USB para habilitar el Debug por TCP.

Ya que tengamos nuestro dispositivo listo continuamos abriendo la consola “Android ABD” desde Visual Studio, podemos hacer la ejecución desde la consola normal solo si tenemos las variable de entorno bien configuradas o si usamos la ruta completa de donde tengamos abd.exe. En el caso de abrir la consola desde Visual Studio esta consola ya esta lista para trabajar sin escribir toda la ruta, para hacerlo presionamos el siguiente icono

image

O podemos acceder desde el menú Tools/Android/Android Adb Command Prompt
En nuestro Android Player presionamos el siguiente botón para obtener la dirección IP asignada al emulador

image
image

Ahora en la consola realizamos la conexión con el siguiente comando
adb connect <Dirección_IP>

image

Si obtenemos las respuesta “connected to” ya se realizo la conexión, tras esto ya podríamos hacer el deployment en el dispositivo conectado como lo hacemos normalmente seleccionando el dispositivo desde la barra de herramienta de VS

image

NOTA: si no aparece el dispositivo hay que intentar reiniciando VS para que lo muestre.

martes, 9 de febrero de 2016

Fundamentos de .NET y C# en TelmexHub

El día sábado 6 de Febrero comencé un curso de C# en TelmexHub. La idea de esta primera sesión era mostrar a los asistentes los fundamentos teóricos del lenguaje C# y la paltaforma Microsoft .NET, esto con la finalidad de que en un futuro cercano se de un curso de Xamarin donde se puedan aprovechar estos conocimientos desarrollando apps móviles.








También les comparto la presentación que utilice durante la primera sesión del curso.

Los temas que abarca son:

  •  Fundamentos de .NET (CLR, CLI, CIL, proceso de compilación, componentes de .NET) 
  • ¿Qué es C#? 
  • Variables y tipos de datos 
  • Expresiones Operadores


 

viernes, 29 de enero de 2016

Universal Windows Platform con Xamarin

Hola,

Les comparto este vídeo con el procedimiento de como utilizar Xamarin.Forms para crear aplicaciones para Windows 10 o de la llamada Plataforma Universal de Windows.


lunes, 21 de diciembre de 2015

Xamarin 4 Party Ciudad de México

WP_20151217_10_10_49_Pro
El pasado jueves 17 de Diciembre se llevo a cabo una Xamarin 4 Party en la ciudad de México.
En las oficinas de Microsoft México tuve la oportunidad de dar una serie de charlas sobre las novedades que tiene la versión 4 de Xamarin la cual fue lanzada en noviembre de este año.
Los temas fueron:
  • La plataforma Xamarin y Xamarin University
  • Xamarin.Forms 2.0
  • Xamarin Insigths
  • Xamarin UI Test
A continuación les dejo la galería de fotos del evento.
 
Y también les comparto las presentaciones que sirvieron de apoyo para mis exposiciones.

sábado, 28 de noviembre de 2015

Usando SQLite .NET multiplataforma en Xamarin Android, Xamarin IOS, Windows Phone y Windows Store (Parte 3 Android)

En este tercera publicación el turno es para Xamarin Android al igual que la parte anterior no voy a entrar a fondo a los pasos que ya se hicieron anteriormente (Parte 1 y Parte 2).
El primer paso igual que en ocasiones anteriores es crear un proyecto para Xamarin Android
3CreandoDroid
El paso siguiente es enlazar Core mediante el project linker, como lo explique en la primer publicación.
Utilizando SQLite .NET en el proyecto de Android
Con Xamarin Android no hay que agregar referencias extra para hacer funcionar SQLite, por lo cual podemos pasar a desarrollar la interfaz y funcionalidad con solo enlazar Core que contiene los archivos de SQLite .Net.
La interfaz va a contener los mismos campos que las aplicaciones de WP y WS.
image
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:text="Nombre"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView4" />
    <EditText
        android:inputType="textPersonName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtName" />
    <TextView
        android:text="Edad"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView3" />
    <EditText
        android:inputType="number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtAge" />
    <TextView
        android:text="Correo Electrónico"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView2" />
    <EditText
        android:inputType="textEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtMail" />
    <TextView
        android:text="Teléfono"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1" />
    <EditText
        android:inputType="phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtPhone" />
    <Button
        android:id="@+id/btnSave"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Guardar" />
    <Button
        android:text="Búsqueda"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnSearch" />
</LinearLayout>
El código de la funcionalidad es muy parecido, lo único que es diferente es lo referente a la interacción con la interfaz de usuario.
using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using SQL.Core.Core;
using System.IO;

namespace SQL.Droid
{
    [Activity(Label = "SQL.Droid", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.Main);

            // Get our button from the layout resource,
            // and attach an event to it
            Button btnSave = FindViewById<Button>(Resource.Id.btnSave);
            btnSave.Click += btnSave_Click;
            
            Button btnSearch = FindViewById<Button>(Resource.Id.btnSearch);
            btnSearch.Click += btnSearch_Click;

            InitializateDB();
        }

        void btnSearch_Click(object sender, EventArgs e)
        {
            Intent intent = new Intent(this,typeof(SearchActivity));
            StartActivity(intent);
        }
       
        void btnSave_Click(object sender, EventArgs e)
        {
            var edtName = FindViewById<EditText>(Resource.Id.edtName);
            var edtAge = FindViewById<EditText>(Resource.Id.edtAge);
            var edtPhone = FindViewById<EditText>(Resource.Id.edtPhone);
            var edtMail = FindViewById<EditText>(Resource.Id.edtMail);

            Contact contact = new Contact(edtName.Text,int.Parse(edtAge.Text), edtPhone.Text, edtMail.Text);
            crud.SaveValue<Contact>(contact);

        }

        CRUDManager crud;
        void InitializateDB()
        {
            var sqliteFilename = "ContactsDb";
            var path = Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal), sqliteFilename); ;

            crud = new CRUDManager(path);

           

        }

    }
}

Para la segunda pantalla la cual muestra los resultados, voy a agregar el código de dos componentes uno es la plantilla xml con la que se mostraran los diferentes campos en la lista de resultados.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
           android:orientation="horizontal"
           android:minWidth="25px"
           android:minHeight="25px"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:id="@+id/Container"
           android:layout_marginTop="15dp"
           
           android:paddingLeft="20dp">
  <LinearLayout
      android:orientation="vertical"
      android:minWidth="25px"
      android:minHeight="25px"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/linearLayout28">
    <TextView
        android:text="Text"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:id="@+id/txvName"
        android:textSize="20sp"
        android:textColor="#005DAA" />
    <TextView
        android:text="Text"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:id="@+id/txvAge" />
    <TextView
      android:text="Text"
      android:layout_height="match_parent"
      android:layout_width="wrap_content"
      android:id="@+id/txvMail" />
    <TextView
        android:text="Text"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:id="@+id/txvPhone" />
  </LinearLayout>

</LinearLayout>

El otro es la clase “Adapter” que va a funcionar como fuente de datos de la lista que mostrara los resultados.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using SQL.Core.Core;

namespace SQL.Droid
{
    class ContactAdapter : BaseAdapter
    {

        private Activity activity;
        private List<Contact> data;
        private static LayoutInflater inflater = null;


        public ContactAdapter(Activity activity, List<Contact> data)
        {
            this.activity = activity;
            this.data = data;
            inflater = (LayoutInflater)activity.GetSystemService(Context.LayoutInflaterService);

        }

        public Contact GetContact(int position)
        {
            return data[position];
        }


        public override int Count
        {
            get { return data.Count; }
        }

        public override Java.Lang.Object GetItem(int position)
        {
            return position;
        }

        public override long GetItemId(int position)
        {
            return position;
        }

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            View vi = convertView;
            if (convertView == null)
                vi = inflater.Inflate(Resource.Layout.ContactRow, null);

            TextView name = (TextView)vi.FindViewById(Resource.Id.txvName);
            TextView age = (TextView)vi.FindViewById(Resource.Id.txvAge);
            TextView mail = (TextView)vi.FindViewById(Resource.Id.txvMail);
            TextView phone = (TextView)vi.FindViewById(Resource.Id.txvPhone);
            

            name.Text = data[position].Name;
            age.Text = data[position].Age.ToString();
            mail.Text = data[position].Mail;
            phone.Text = data[position].PhoneNumber;
          

            return vi;
        }
    }
}

Finalmente la pantalla creada es la siguiente:
image
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <EditText
        android:inputType="textPersonName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edtName" />
    <Button
        android:text="Buscar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnSearch" />
    <Button
        android:text="Mostrar Todos"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnAllItems" />
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:id="@+id/lvResults" />
    <Button
        android:text="Eliminar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btnDelete" />
</LinearLayout>
Y su respectiva clase C# para la funcionalidad, al igual que con la primer pantalla la mayoría de los cambios son relativos a la interfaz de usuario
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using SQL.Core.Core;
using System.IO;

namespace SQL.Droid
{
    [Activity(Label = "SearchActivity")]
    public class SearchActivity : Activity
    {
        ListView lvResults;
        Contact selected;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SetContentView(Resource.Layout.Search);
            Button btnSearch = FindViewById<Button>(Resource.Id.btnSearch);
            btnSearch.Click += btnSearch_Click;

            Button btnAllItems = FindViewById<Button>(Resource.Id.btnAllItems);
            btnAllItems.Click += btnAllItems_Click;

            Button btnDelete = FindViewById<Button>(Resource.Id.btnDelete);
            btnDelete.Click += btnDelete_Click;

            lvResults = FindViewById<ListView>(Resource.Id.lvResults);
            lvResults.ItemClick += lvResults_ItemClick;

            InitializateDB();
        }

        void lvResults_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            selected = ((ContactAdapter)lvResults.Adapter).GetContact(e.Position);
        }

        

        void btnDelete_Click(object sender, EventArgs e)
        {
            if (selected != null)
            {
                crud.DeleteValue<Contact>(selected);
                lvResults.Adapter = new ContactAdapter(this, crud.GetAllItems<Contact>());

            }
        }

        


        void btnAllItems_Click(object sender, EventArgs e)
        {

            lvResults.Adapter = new ContactAdapter(this,crud.GetAllItems<Contact>());
        }

        CRUDManager crud;
        void InitializateDB()
        {
            var sqliteFilename = "ContactsDb";
            var path = Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal), sqliteFilename); ;

            crud = new CRUDManager(path);



        }

        void btnSearch_Click(object sender, EventArgs e)
        {
            var lvResults = FindViewById<ListView>(Resource.Id.lvResults);

            lvResults.Adapter = new ContactAdapter(this,
                new List<Contact>() { crud.GetItem<Contact>(FindViewById<EditText>(Resource.Id.edtName).Text) });
        }
    }
}
Con esto queda concluido el proyecto, al igual que en los casos anteriores dejo el proyecto de Visual Studio http://1drv.ms/1aS1dTL

martes, 17 de noviembre de 2015

Serie de vídeos en español sobre Xamarin en Microsoft Channel 9

El día de hoy se publico el primer vídeo de una serie de vídeos sobre desarrollo con Xamarin, estos vídeos van a abarcar los temas básicos para comenzar a desarrollar apps IOS y Android y lo mejor de todo es que estarán en español.

En este primer vídeo hablo sobre los productos que ofrece Xamarin, cuales son las ventajas de utilizar la plataforma en el desarrollo de apps para IOS y Android; y también muestro como crear una cuenta con licencia de tipo Starter para comenzar a crear proyectos desde Visual Studio. 

Sin mas que decir este es el vídeo: