Wednesday, May 15, 2013

Creando un UI como la de Netflix para iOS con C#, Xamarin iOS y NucliOS


Este articulo es una adaptación del articulo en inglés "Creating a Netflix style iOS Grid with C#, Xamarin.iOS and NucliOS".
Repositorio en Github.
Mientras me relajaba un poco, leyendo un poco de mi lista de lectura (via Flipboard), encontré este interesante articulo de como crear una Interfaz de Usuario utilizando la libreria INucliOS de Infragistics. Casi instantaneamente se me ocurrió que sería una buena idea para un articulo a mi blog. De pronto, casi como segunda naturaleza ya mis manos se desplazaban hacia el teclado, abrieron una ventana de IE 10 y buscaron -vía Bing - por los terminos de busqueda "NucliOS MonoTouch Bindings". Para mi sorpresa, el producto ya viene con los "bindings" para Xamarin.iOS en la descarga oficial. 
Es aquí cuando comienza la travesía. Como parte del trabajo de este articulo está basado en un articulo publicado por Stephen Zaharuk, bajo el titulo "Creating a Netflix style iOS Grid", no les aburriré con los detalles; en vez, les monstraté como tomar el original y crear un UI similar en Xamarin.iOS sin mucho esfuerzo. 
Aquí están las cosas que deben de tener en cuenta cuando "traducen"  código en Obj-C y XCode al glorioso C# y Xamarin.iOS. 

// Obj-C Implementation of the model 

@interface NetflixData : NSObject
       @property (nonatomic, retain)NSString* category;
       @property (nonatomic, retain)NSMutableArray* media;
       @property (nonatomic, assign)CGFloat scrollPosition;
@end 

1- Recuerda decorar con el atributo[Export()] a las propiedades de tus objectos que derivande NSObject. Esto le permitirá a la implementación nativa usar las propiedades de tu modelo de datos.

public class NetflixMedia: NSObject
    {
        [Export("ImageUrl")]
        public string ImageUrl {
            get;
            set;
        }

        [Export("Title")]
        public string Title {
            get;
            set;
        }

        [Export("Genre")]
        public string Genre {
            get;
            set;
        }
    }


2 - Usa la propiedad WeakDelagate que se llama WeakDataSource
 //NucliosViewController.cs  - Obj-C
 _gridView.WeakDataSource = _ds;
...
Instead of..
//NucliosViewController.m  - Obj-C
_gridView.dataSource = _ds;
...
3- Cuando crees "constructores sobrecargados", recuerda extraer el código de inicialización a un metodo aparte (eso es puro sentido común), y por último no trates de escribir código con el estomago vacío, que el "Malcomío no piensa".
public class MediaCell:IGGridViewCell
{
    public MediaCell (string identifier): base(identifier)
    {
        Init ();
    }
4- Y por último, si encuentras algo escrito de forma que no hace sentido reproducirlo tal cual, luce lo que sabes y re-escribelo, y utiliza lo que está de punta (Async) y echa vainas a tus colegas.
//Obj-C
+(NSMutableArray*)generateData
{
NSMutableDictionary* mediaLookup = [[NSMutableDictionary alloc]init];
NSMutableArray* netFlixData = [[NSMutableArray alloc]init];

NSString* rootUrl = @"https://itunes.apple.com/search?term=%@&media=movie&entity=movie&limit=600&attribute=releaseYearTerm";

NSArray* keys = @[@"2012", @"2013"];

for(NSString* key in keys)
{
    NSURL* url = [NSURL URLWithString:[NSString stringWithFormat:rootUrl, key]];

    NSData* data = [NSData dataWithContentsOfURL:url];
    NSDictionary* json = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
    NSArray* results = [json valueForKey:@"results"];

    if(results != nil)
    {
        for(NSDictionary* mediaInfo in results)
        {
            NSString* genre = [NSString stringWithFormat:@"%@", [mediaInfo valueForKey:@"primaryGenreName"]];

            NSString* url = [mediaInfo valueForKey:@"artworkUrl100"];

            MediaItem* media = [[MediaItem alloc]init];
            media.title = [mediaInfo valueForKey:@"trackName"];
            media.imgUrl = [NSURL URLWithString:url];

            MediaData* nfd = [mediaLookup valueForKey:genre];
            if(nfd == nil)
            {
                nfd = [[MediaData alloc]init];
                nfd.genre = genre;
                nfd.media = [[NSMutableArray alloc]init];
                [mediaLookup setValue:nfd forKey:genre];
                [netFlixData addObject:nfd];
            }

            [nfd.media addObject:media];
        }

    }
}


return netFlixData;

//C#
async Task<IList<NetflixMedia>> GetData ()
    {
        var movies = new List<NetflixMedia> ();
        var url = "https://itunes.apple.com/search?term={0}&media=movie&entity=movie&limit=600&attribute=releaseYearTerm";

        var client = new HttpClient ();

        var response = await client.GetAsync (string.Format (url, "2013"));
        var stringData = await response.Content.ReadAsStringAsync ();
        var json = JsonObject.Parse (stringData);

        var results = json["results"];

        foreach(JsonValue movie in results)
        {
            movies.Add (new NetflixMedia(){
                Title = movie["trackName"],
                ImageUrl = movie["artworkUrl100"],
                Genre = movie["primaryGenreName"],
            });

        }
        return movies;
    }

El resultado final


Wednesday, August 15, 2012

Código, Presentaciones y Fotos de CodeCampSDQ 2012

Me complace reportar que el evento CodeCampSDQ fué un éxito.
Gracias a todos los que contribuyeron con su granito de arena para que este evento fuese exitoso.

El evento comenzó a las 9:30 AM, y acabó a las 4:00 PM. A este acudieron 30 profesionales del desarrollo, entre ellos varios ex-alumnos del Instituto Técnico Salesiano y el Instituto Tecnológico de Las Américas.

Los temas a tratar en este primer CodeCamp fueron:

  • Desarollo de aplicaciones Web con ASP.NET MVC 4, por Alexander Matos
  • Desarrollo de aplicaciones para iOS con C# y .NET usando MonoTouch, por Claudio Sanchez



Si el widget de SkyDrive no te funciona; para ver el código, presentaciones y fotos, eche un vistazo aquí

Wednesday, February 8, 2012

How to get a job with Microsoft, Apple or Google

I recently read a very interesting article about how to get yourself noticed in the “Major Leagues” . The article is by Gayle Laakmann McDowell, who herself has worked at four of today’s big tech companies the likes of Apple, Google and Microsoft.
Here is a short version of the 9 Reasons.
  • Go to an elite school (or associate with one).
  • Intern early, and relevant to your career (knowing how to flip burgers doesn’t make you a better coder).
  • Major in something relevant.
  • Community service means: do Tech work for free, not in a soup kitchen.
  • Learn how to write (oops, that is why I could never land one of those Winking smile).
  • Be a teacher’s pet. They write good recommendation letters.
  • Be a generalist.
  • Be an entrepreneur, innovate or deliver results.
  • no one cares if you have a 4.0 GPA.
At the end of the day, make sure that whatever you do is transferable to the next step/job in your career.

Friday, December 30, 2011

MSDN Training Courses

Microsoft’s DPE Team has put together some great training courses available for download. It is always good to “sharpen the tools”, and this would be a great starting point for learning a new skill or sharpen the already developed one.

Some of the ones that caught my eye are:

  Link to Training Courses: http://msdn.microsoft.com/en-us/gg299335

Wednesday, December 21, 2011

Windows Identity Foundation Training available

[Federated] Security is no easy thing, let’s just state that out of the gate. That is why our Federated Security guru  Dominick Baier has put together a two-day course. You can get some more details  over here.

Monday, December 19, 2011

Walk-through of provisioning Identity Server v1.0


Introduction

If you have the need to use your own Identity Provider, and want to go with something light (i.e.: not ADFS), Thinktecture’s Identity Server is your product.  I have been using it for the last couple of months and I love it!! I actually added a service layer over it to enable my RP to provision users in the Identity Server (yes, I know that this is contrary to the general concept of outsourcing Identity Management, but in my scenario, trust me, it makes sense).
From the CodePlex site:
Thinktecture IdentityServer is an open source security token service based on Microsoft .NET, ASP.NET MVC, WCF and WIF.
High level features
  • Multiple protocols support (WS-Trust, WS-Federation, OAuth2, WRAP, JSNotify, HTTP GET)
  • Multiple token support (SAML 1.1/2.0, SWT)
  • Out of the box integration with ASP.NET membership, roles and profile
  • Support for username/password and client certificates authentication
  • Support for WS-Federation metadata
  • Support for WS-Trust identity delegation
  • Extensibility points to customize configuration and user management handling

Setup

UPDATE: This walk-through assumes you are setting up Identity Server in a production/QA environment, and not as a single machine/developer setup. Hence why we are setting up by using SQL Server instead of mounting the Compact database included in the App_Data directory, as well as installing the ASP.NET Membership provider DB on the DB Server.
Download source from here
Unzip the file and open the solution.
Because Identity Server (IdSvr) needs an ASP.NET membership database, we are going to set one up (if it doesn’t exist). There are some great tutorials on the web on how to do this (if you don’t already know), here is one of them.
After having installed the ASP.NET Membership database, we are going to update the connection string in IdSvr to point to said database.
The connection string file is located at  \Configuration\connectionstring.config (Below is an example)
   1:  <connectionStrings>
   2:    <add name="ProviderDB"
   3:         connectionString="Persist Security Info=False;
   4:         User ID=sa; 
   5:         password=****;
   6:         Initial Catalog=aspnetdb;
   7:         Data Source=mydbserver;"
   8:         providerName="System.Data.SqlClient" />
   9:    
  

>

To test that the connection string works, in Solution Explorer, you should select the Website project, then from Visual Studio’s menu, select Project –> ASP.NET Configuration. This will launch the ASP.NET Web Site Administration Tool.

Screen Shot 2011-12-09 at 12.17.59 PM

Screen Shot 2011-12-09 at 12.18.14 PM



Using the ASP.NET Web Site Administration Tool, proceed to create a user (i.e.: Administrator) and a roles called IdentityServerAdministrators and IdentityServerUsers. These roles are important because they allow the user created to logon to  IdSvr’s administration screen, and in the case of IdentityServerUsers, to be forwarded to the RPs upon successful login.  These roles are specified in the Constants.cs file inside of the Thinktecture.IdentityServer.Core project.

   1:   public static class Constants
   2:      {
   3:         // ....
   4:          public static class Roles
   5:          {
   6:              public const string InternalRolesPrefix          = "IdentityServer";
   7:              public const string Users                        = "Users";
   8:              public const string Administrators               = "Administrators";
   9:   
  10:              public const string IdentityServerUsers          = InternalRolesPrefix + Users;
  11:              public const string IdentityServerAdministrators = InternalRolesPrefix + Administrators;
  12:          }

imageimage

Screen Shot 2011-12-09 at 12.18.21 PMScreen Shot 2011-12-09 at 12.18.40 PM



Configuring IIS 7


Let’s proceed to configure IIS 7 to host the Identity Server website. We will need to:


  • Request a Certificate for SSL (self-signed, Domain cert or commercial). Read this tutorial
  • Setup https bindings. Go to this link, and scroll down to Create an SSL Binding.

Creating a certificate for Token Signing


The process of creating this certificate is the same as requesting a certificate for SSL. Why not just the SSL Certificate then? – May you ask?–, and the answer is:


“Using the SSL certificate for the token signing certificate will work – but this should not be the configuration you use in production. This is considered bad key hygiene.”

Source:Technet

In my case, I have requested two certificates to the Domain Certificate Authority.

***UPDATE: Make sure the certificate Distinguished Name of each certificate is different (i.e.: Don’t request two certificates with the same attributes). I ran into an issue where IdentityServer’s x509Certificate Helper could not find the right certificate because there were two certificates, and it didn’t like that.



var certs = store.Certificates.Find(findType, value, false);
 if (certs.Count != 1) 
 { 
     throw new InvalidOperationException(String.Format("Certificate not found: {0}", value));  
 }


 IISCerts


We are almost there.

Configuring Identity Server


You should be able to navigate to Identity Server’s URL. If the certificates you created are not trusted by your computer, you see this screen. This occurs if you are using a certificate issued by a CA your computer does not trust. Here is a link on how to trust the certificate.

image

You should be seeing Identity Server’s initial configuration screen.  Go ahead and customize the first two fields to match your environment, and select the certificate that will be used for token signing.

UPDATE: Make sure that the IIS Worker Process Identity has access to the Private Key of your certificates. Use the Certificate MMC for this.

image

Tada!! You have successfully configured Identity Server and should be ready to add your application as a Relaying Party (RP). You can find a tutorial on how to do that over here (scroll down to 2.Register an existing production STS).

image

Sunday, November 13, 2011

CMAP CodeCamp Slide Deck

Wow!! What an awesome experience to have participated in CMAP's CodeCamp.  
I have started the process of going from having a wealth of opinion and a lack of experience, to a more balanced mix.  I have made a mental note of a myriad of things that need to be improved, and will continue to improve the talk and gain more experience every time I do it. 
Thanks to the audience for being so patient with me and not have walked out on me.  The slides are here.