[ASP.NET MVC] Primer Video tutorial–MVC5 para desarrolladores WebForms

Hola, esto es algo que quería hacer hace tiempo, que es videos tutoriales acerca de MVC5, pero con la mirada de un desarrollador WebForms, ya se ha hablado bastante sobre la teoría de MVC, veamos la práctica.

Bueno de dejo el primer video en donde vemos la introducción al desarrollo con MVC.

https://www.youtube.com/watch?v=ZiFherojt_Y

Saludos!

[Material WebCast]Ejemplo simple de SignalR y Hub

Hola, ha pasado un tiempo desde el WebCast que di sobre SignalR, pero por temas de tiempo no había podido subir el material. Este es un ejemplo de una charla oficial de SignalR,la que puedes encontrar aquí.

Ahora veamos el ejemplo funcionando antes de ver como se hace:

signalr

En el ejemplo anterior, el browser de la izquierda es mozilla y el de la derecha es chrome, y estoy moviendo el cuadrado sobre mozilla y puedes ver que en tiempo real , se replica la ventana de derecha Sonrisa, este es un ejemplo muy sencillo, pero que deja en claro las potencialidades de SignalR

La construcción: Estructura del Proyecto

La estructura del proyecto es la siguiente:

image

Para agregar SignalR a tu proyecto, recuerda que tienes NuGet buscando Microsoft.AspNet.SignalR:

image

Volviendo al proyecto, realmente la carpeta content no la estoy ocupando, pero si es importante la carpeta Script ya que necesitaremos jquery para utiliza SignalR (por ahora, ya que se viene un cliente que no depende de jquery). También usaremos jqueryUI para el tema del Drag & Drop.

Vamos a agregar una nueva Clase de concentrador SignalR(V2), que es nuestro Hub, le pondré por nombre MoveShapeHub:

image

Luego el código:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

 

namespace Demo

{

[HubName(“moveShape”)]

    public class moveShapeHub : Hub

    {

        public void moveShape(int x, int y)

        {

            Clients.Others.ShapeMoved(x,y);

        }

    }

}

Como puedes ver es mega ultra sencillo, llegarán desde los clientes llamadas a moveShape con las coordenadas x, y para luego ser reenviada a los clientes llamando a la función ShapeMoved de javascript, SI! magia! desde el cliente se llama a la función en el server y desde el server directo al cliente (bueno, no tan directo, pero la implementación de eso es transparente para el desarrollador).

Luego creamos el cliente, veamos el index.html

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

    <title></title>

    <style>

        #shape {

            width: 100px;

            height: 100px;

            background-color: blue;

            cursor: move;

        }

    </style>

</head>

<body>

 

    <div id=”shape”></div>

    <script src=”Scripts/jquery-1.6.4.js”></script>

    <script src=”Scripts/jquery-ui-1.10.4.min.js”></script>

    <script src=”Scripts/jquery.signalR-2.0.2.js”></script>

    <script src=”signalr/hubs”></script>

    <script src=”Scripts/MoveShape.js”></script>

</body>

</html>

Lo anterior generala pantalla con el cuadro que podemos draggear, es por eso que usamos  jquery & jqueryUI, también incluimos la librería de SignalR , “signalr/hubs” es un caso especial, es un script de tipo proxy que lo genera automáticamente SignalR, y hay que agregarlo si estamos trabajando con HUB. Luego el javascript que tiene nuestra lógica de funcionamiento y comunicación con el servidor “MoveShape.js” que lo veremos a continuación:

/// <reference path=”jquery-ui-1.10.4.min.js” />

/// <reference path=”jquery-1.6.4.js” />

/// <reference path=”jquery.signalR-2.0.2.min.js” />

 

$(function () {

 

    var hub = $.connection.moveShape,

        $shape = $(“#shape”);

 

    hub.client.shapeMoved = function (x, y) {

        $shape.css({ left: x, top: y })

    }

 

    $.connection.hub.start().done(function () {

        $shape.draggable({

            drag: function () {

                hub.server.moveShape(this.offsetLeft, this.offsetTop || 0);

            }

 

        });

 

    });

 

});

Esto también es sencillo, pero hay que entenderlo. Antes que todo, hacemos referencia hacia el hub, que es conection.moveShape (que viene de [HubName(“moveShape”)].

Luego tenemos la función que será llamada desde el servidor, (te recuerdas que era shapeMove?), y mediante css le damos la posición, para que “se mueva”.

Finalmente tenemos la función que hace partir a todo esto, una vez que se conecta, y mediante el patrón promise , tenemos que cada vez que se hace drag, llamamos a la función el el servidor que replicará en los clientes las coordenadas Sonrisa.

Descarga el ejemplo!

saludos!
@chalalo

[Windows Phone] Como cambiar la página de navegación inicial por defecto.

Hola que tal, unos de los escenarios clásicos con los que nos podemos encontrar es que queramos cambiar el flujo de navegación inicial de nuestra aplicación, esto puede ser gatillado en distintos escenarios, el más común es el siguiente : Nuestra aplicación solicita o no, según lo configure el usuario, una password de acceso al inicio de la app. Esta claro que no es conveniente que en la página principal de la aplicación se consulte si es que existe una password asociado, cargar de inmediato la ventana de password, ya que estaríamos entrando a la app y luego sacamos a la persona para que ingrese el su contraseña.

La solución es simple, lo primero es indicarle a la aplicación que no va a contar con una MainPage.xaml, como pagina de lanzadera por defecto. Para esto debes ir al archivo WMAppManifest.xml y eliminar el siguiente código:

  <Tasks>

      <DefaultTask Name="_default" NavigationPage="MainPage.xaml"/>

  </Tasks>

 

Luego ir al archivo App.xaml.cs  y agregar el código dentro del método InitializePhoneApplication ( lo puedes dejar al final):

 

if (IsolatedStorageSettings.ApplicationSettings.Contains("acceso"))

{

    if ((Convert.ToString(IsolatedStorageSettings.ApplicationSettings
                                          [
"acceso"]).ToLower() == "s"
))

    {

      RootFrame.Navigate(new Uri("/pin.xaml", UriKind.RelativeOrAbsolute));   

    }else{

     RootFrame.Navigate(new Uri("/MainPage.xaml", UriKind.RelativeOrAbsolute));

    }

}else{

     RootFrame.Navigate(new Uri("/MainPage.xaml", UriKind.RelativeOrAbsolute));

}

Obviamente le cambias el nombre de las p{aginas a cargar según corresponda. y no es nada más que esto, Super sencillo y evita el problema de un ingreso falso solo para revisar si tenemos que volver a salir para ingresar una contraseña.

Espero que te sirva!! @chalalo

[Windows Phone] Essential Studio for Windows Phone Gratis!!

Así es, una muy buena noticias para los que desarrollamos para Windows Phone, hay una oferta especial para los “hobbyists”. Podemos tener esta  excelente suite de controles totalmente gratis, lo primero es hacer click en la siguiente URL.

Requiere registro, no es llegar y descargar, pero no pide tarjeta de crédito ni nada por el estilo.

http://www.syncfusion.com/sales/offers/winphone-hobbyist?UTM_medium=Twitter&utm_content=buffer5a9c0&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

Acá está el video de todo lo que puedes hacer con estos controles, están buenísimos , nos permiten crear nuevas y mejores apps Sonrisa

Espero que te sirvan!
@chalalo

Monetizar nuestras Apps Windows Phone 8 con Admob

Hola que tal? esta vez vamos a hablar de algo que nos interesa a la gran mayoría, que es ganar dinero con nuestras aplicaciones. En un inicio, personalmente era un poco reacio a agregar publicidad en las apps, las hacía por “amor al arte”, pero ya saben, todos queremos una casa de oro y un auto cohete…

Ahora bien, Admob, por si no lo sabías, es un sistema de google, que nos permite rentabilizar y promocionar nuestras aplicaciones móviles con anuncios, los pasos para registrarse son bastante sencillos, puedes verlos acá:http://www.google.es/ads/admob/

A modo de historia, había estado probando en versiones anteriores a este SDK y funcionaba en modo debug, pero al momento de hacer realese, google dejaba de enviar la publicidad, con un código de error que indicaba que no existía publicidad disponible, el clásico error "NoFill" que puedes encontrar en los foros. Felizmente, esto ya no sucede, por lo que podemos seguir adelante Sonrisa

Entonces, lo primero, bajar el SDK para Windows Phone desde acá (Versión 6.5.11):
https://developers.google.com/mobile-ads-sdk/download#downloadwp

Una vez descargado vas a ver que existe un proyecto de prueba y una carpeta lib, vamos a abrir el proyecto de prueba, el que lamentablemente, no es out-the-box, es decir, no te va a funcionar a la primera, ya que la referencia al ensamblado GoogleAds no está bien hecha:

image

Así que vamos agregamos la referencia correctamente seleccionando GoogleAds de la carpeta Lib

image

y listo, ya tenemos la referencia, ahora si revisamos el código XAML del MainPage.xaml, veremos lo siguiente:

<GoogleAds:AdView AdUnitID="MY_AD_UNIT_ID"
                          Format="Banner"
                          ReceivedAd="OnAdReceived"
                          FailedToReceiveAd="OnFailedToReceiveAd"
                          VerticalAlignment="Bottom" />

Puedes notar que hay dos handlers que son el receiveAd que ocurre cuando se recibió desde google la publicidad y el FailedToReceivedAd, que ocurre cuando existe algún error, es bueno manejarlos para saber, que pasa cuando no llega algo y cual es el mensaje de error.

Ahora debemos agregar nuestro AD_UNIT_ID para poder obtener la publicidad, este número lo obtienes una vez registrado en admob y agregando una app para Windows Phone 8 , para esto vas al menú Monetizar, y luego [+ Monetizar aplicación nueva]

image

Luego agregamos el nombre de la aplicación y seleccionamos la plataforma manualmente

image

Luego seleccionar si queremos entre Banner e intersticial y los datos, en mi caso, seleccioné banner:

image

Es importante que agregues un nombre significativo al nombre del bloque de anuncios, así le puedes hacer seguimiento y análisis a tu banner, y recuerda que puedes tener varios banners dentro de la misma app.

Presionamos Guardar y ahora se nos presenta la pantalla en donde nos entrega e AD_UNIT_ID

image

Luego agrego este ID al código XAML;

 

<GoogleAds:AdView AdUnitID="ca-app-pub-9224915314665038/4125682904"

                          Format="Banner"

                          ReceivedAd="OnAdReceived"

                          FailedToReceiveAd="OnFailedToReceiveAd"

                          VerticalAlignment="Bottom" />

y probamos:

image

Como puedes ver, la publicidad se ve sin problemas, ahora bien , desde la creación de Anuncio hasta que sea utilizable pueden pasar unos minutos. (al menos esa es mi experiencia)

Espero que te sirva! nos vemos en otro post

@chalalo