Parse, Terminado el Servicio.

Articulo Restablecido.

Hola a todos. Prosiguiendo con el blog, hoy quiero comentarles de un anuncio sobre Parse.

Este blog realizo dos breves post sobre Parse, un BaaS enfocado para aplicaciones moviles.

BaaS: Parse

Consumiendo Parse desde .NET

A mi parecer, me parecia un servicio bueno, tenia varios modulos enfocado para aplicaciones moviles, lo use en mi trabajo, y le tuve cierto aprecio. Muchos puritanos diran que como no tenia una empresa grande que los respaldara como otros productos en el mercado, ese era su destino, puede que si, pero no por eso le quitaremos que era una buena herramienta.

A todas las personas que lo usaban les llego un correo con la noticia, tambien la pueden leer en el portal, basicamente lo que dicen es el servicio estaba habilitado hasta enero 28 del 2017. Considero que es un buen tiempo para hacer las migraciones requeridas en los productos ya echos.

Tambien ofrecen una herramienta de migración y su servidor lo liberan bajo open source.

Asi que ha trabajar en sus respetivas migraciones.

 

Link del post:

Moving On

Sl2

Romny

Parse, Terminado el Servicio.

Hola a todos. Prosiguiendo con el blog, hoy quiero comentarles de un anuncio sobre Parse.

Este blog realizo dos breves post sobre Parse, un BaaS enfocado para aplicaciones moviles.

A mi parecer, me parecia un servicio bueno, tenia varios modulos enfocado para aplicaciones moviles, lo use en mi trabajo, y le tuve cierto aprecio. Muchos puritanos diran que como no tenia una empresa grande que los respaldara como otros productos en el mercado, ese era su destino, puede que si, pero no por eso le quitaremos que era una buena herramienta.

A todas las personas que lo usaban les llego un correo con la noticia, tambien la pueden leer en el portal, basicamente lo que dicen es el servicio estaba habilitado hasta enero 28 del 2017. Considero que es un buen tiempo para hacer las migraciones requeridas en los productos ya echos.

Tambien ofrecen una herramienta de migración y su servidor lo liberan bajo open source.

Asi que ha trabajar en sus respetivas migraciones.

 

Link del post:

Moving On

Sl2

Romny

Implementando Jquery DataTables en Asp.Net MVC 5 Part 2.

Hola a todo.

Continuando con nuestro anterior post. Implementando Jquery DataTables en Asp.Net MVC 5 Part 1. donde mostramos como usar la librería Jquery DataTables en nuestros proyectos de MVC. Pero el post se quedo corto dado que algunas funcionalidades no funcionan correctamente a la primera implementada, y este post cubre esas necesidades.

Partimos de nuestro código de inicio: https://github.com/romnyd/JqueyDataTables

Lo primero crearemos una clase en la carpeta Models, con el nombre “jQueryDataTableParams” la cual se encargara de manejar todos estos temas. “Búsqueda, filtro, orden”

image

Esta clase tendrá la siguiente estructura

   1: /// <summary>  

   2:    /// Class that encapsulates most common parameters sent by DataTables plugin  

   3:    /// </summary>  

   4:     public class jQueryDataTableParams

   5:     {

   6:         /// <summary>  

   7:         /// Request sequence number sent by DataTable,  

   8:         /// same value must be returned in response  

   9:         /// </summary>      

  10:         public string sEcho { get; set; }

  11:         /// <summary>  

  12:         /// Text used for filtering  

  13:         /// </summary>  

  14:         public string sSearch { get; set; }

  15:         /// <summary>  

  16:         /// Number of records that should be shown in table  

  17:         /// </summary>  

  18:         public int iDisplayLength { get; set; }

  19:         /// <summary>  

  20:         /// First record that should be shown(used for paging)  

  21:         /// </summary>  

  22:         public int iDisplayStart { get; set; }

  23:         /// <summary>  

  24:         /// Number of columns in table  

  25:         /// </summary>  

  26:         public int iColumns { get; set; }

  27:         /// <summary>  

  28:         /// Number of columns that are used in sorting  

  29:         /// </summary>  

  30:         public int iSortingCols { get; set; }

  31:         /// <summary>  

  32:         /// Comma separated list of column names  

  33:         /// </summary>  

  34:         public string sColumns { get; set; }

  35:  }

 

Para que la grilla funcione correctamente tendremos que crear una acción para que maneje todos estos temas por backend, en mi opinión es la mejor forma.

La estructura básica seria la siguiente.

   1: public ActionResult GetDataCustomers(jQueryDataTableParams param)

   2:         {

   3:  

   4:         }

Esta es la implementación final de esta acción, esta acción maneja todo los que necesita la grilla.

   1: public ActionResult GetDataCustomers(jQueryDataTableParams param)

   2:         {

   3:             //Traer registros

   4:             IQueryable<Customers> memberCol = db.Customers.AsQueryable();

   5:  

   6:             //Manejador de filtros

   7:             int totalCount = memberCol.Count();

   8:             IEnumerable<Customers> filteredMembers = memberCol;

   9:             if (!string.IsNullOrEmpty(param.sSearch))

  10:             {

  11:                 filteredMembers = memberCol

  12:                         .Where(m => m.CompanyName.Contains(param.sSearch) ||

  13:                            m.ContactName.Contains(param.sSearch) ||

  14:                            m.ContactTitle.Contains(param.sSearch) ||

  15:                            m.Address.Contains(param.sSearch) ||

  16:                            m.City.Contains(param.sSearch) ||

  17:                            m.Region.Contains(param.sSearch) ||

  18:                            m.PostalCode.Contains(param.sSearch) ||

  19:                            m.Country.Contains(param.sSearch) ||

  20:                            m.Phone.Contains(param.sSearch) ||

  21:                            m.Fax.Contains(param.sSearch));

  22:             }

  23:             //Manejador de orden

  24:             var sortIdx = Convert.ToInt32(Request["iSortCol_0"]);

  25:             Func<Customers, string> orderingFunction =

  26:                                 (

  27:                                 m => sortIdx == 0 ? m.CompanyName :

  28:                                   sortIdx == 1 ? m.ContactName :

  29:                                   sortIdx == 2 ? m.ContactTitle :

  30:                                   sortIdx == 3 ? m.Address :

  31:                                   sortIdx == 4 ? m.City :

  32:                                   sortIdx == 5 ? m.Region :

  33:                                   sortIdx == 6 ? m.PostalCode :

  34:                                   sortIdx == 7 ? m.Country :

  35:                                   sortIdx == 8 ? m.Phone :

  36:                                   sortIdx == 9 ? m.Fax :

  37:                                   m.CustomerID

  38:                                  );

  39:             var sortDirection = Request["sSortDir_0"]; // asc or desc  

  40:             if (sortDirection == "asc")

  41:                 filteredMembers = filteredMembers.OrderBy(orderingFunction);

  42:             else

  43:                 filteredMembers = filteredMembers.OrderByDescending(orderingFunction);

  44:             var displayedMembers = filteredMembers

  45:                      .Skip(param.iDisplayStart)

  46:                      .Take(param.iDisplayLength);

  47:  

  48:             //Manejardo de resultados

  49:             var result = from a in displayedMembers

  50:                          select new

  51:                          {

  52:                              a.CompanyName,

  53:                              a.ContactName,

  54:                              a.ContactTitle,

  55:                              a.Address,

  56:                              a.City,

  57:                              a.Region,

  58:                              a.PostalCode,

  59:                              a.Country,

  60:                              a.Phone,

  61:                              a.Fax

  62:  

  63:  

  64:                          };

  65:             //Se devuelven los resultados por json

  66:             return Json(new

  67:             {

  68:                 sEcho = param.sEcho,

  69:                 iTotalRecords = totalCount,

  70:                 iTotalDisplayRecords = filteredMembers.Count(),

  71:                 aaData = result

  72:             },

  73:                JsonRequestBehavior.AllowGet);

  74:         }

 

La vista cambia y solo devuelve la vista.

   1: public ActionResult Customers()

   2:         {

   3:             return View();

   4:         }

En la vista los cambios que hay que realizar son los siguientes.

  1. El foreach que cargaba los datos se elimina solo se deja la etiqueta <tbody> dado que toda esta información se cargara por backend.
  2. el jquery de carga cambia.
   1: <script type="text/javascript">

   2:         $(document).ready(function () {

   3:             $('#listar').dataTable({

   4:                 "bServerSide": true,

   5:                 "sAjaxSource": '@Url.Action("GetDataCustomers", "Home")',

   6:                 "bProcessing": true,

   7:                 "bdestroy": true,

   8:                 "start": 0,

   9:                 "order": [0, "asc"],

  10:                 "bDeferRender": true,

  11:  

  12:                 "aoColumns": [

  13:                         { "sName": "CompanyName", "mData": "CompanyName" },

  14:                         { "sName": "ContactName", "mData": "ContactName" },

  15:                         { "sName": "ContactTitle", "mData": "ContactTitle" },

  16:                         { "sName": "Address", "mData": "Address" },

  17:                         { "sName": "City", "mData": "City" },

  18:                         { "sName": "Region", "mData": "Region" },

  19:                         { "sName": "PostalCode", "mData": "PostalCode" },

  20:                         { "sName": "Country", "mData": "Country" },

  21:                         { "sName": "Phone", "mData": "Phone" },

  22:                         { "sName": "Fax", "mData": "Fax" },

  23:                         

  24:                 ],

  25:             });

  26:         });

Es importante leer la documentación dado que esta les indica que hacer para lo que desean implementar.

Ejecutamos y probamos.

image

image

Revisamos la consola del navegador y vemos que todo esta funcionando correctamente.

image

Espero que les haya gustado. S@ludos.

 

El código esta en esta url: https://github.com/romnyd/JqueyDataTables

 

Romny

Implementando Jquery DataTables en Asp.Net MVC 5 Part 1.

Hola a todos.

Hoy quiero mostrarles como implementar el plugin DataTables para Jquery en una solución de Asp.Net MVC 5.

DataTables es un plugin para la librería de Jquery, el cual nos permite crear una grilla muy potente, esta grilla tiene funcionalidades de búsqueda, filtrado, paginación, exportación entre otras. Para revisar mas ir a al sitio el cual contiene cantidad de información para hacer sus implementaciones.

Lo primero para empezar es crear nuestro proyecto.

image

image

Después de crear nuestro proyecto vamos al administrador de paquetes de nuget.

image

Buscamos “datables” y damos instalar.

image

El sistema procede a instalar.

image

Verificamos la instalación.

image

Procedemos a configurar el respectivo bundle para el javascript y configurar el css.

   1: bundles.Add(new ScriptBundle("~/bundles/datatables").Include(

   2:                 "~/Scripts/DataTables/jquery.dataTables.js", "~/Scripts/DataTables/dataTables.tableTools.js",

   3:                 "~/Scripts/DataTables/dataTables.scroller.min.js",

   4:                 "~/Scripts/DataTables/dataTables.bootstrap.js"

   5:                 ));

 

   1: bundles.Add(new StyleBundle("~/Content/css").Include(

   2:                       "~/Content/bootstrap.css",

   3:                       "~/Content/site.css",

   4:                       "~/Content/DataTables/css/dataTables.bootstrap.css"));

 

Para la conexión a datos usaremos la bd de NORTHWND y crearemos un modelo DataBaseFirts de EntityFramework.

image

image

image

image

Después de tener nuestro modelo, procedemos a crear nuestra vista que implementara DataTables. La forma basica de implementar DataTables es crear nuestro conjunto de datos, pasarlos a la vista y en la vista instanciar la librería.

   1: public ActionResult Customers()

   2:         {

   3:             var customers = db.Customers.ToList();

   4:             return View(customers);

   5:         }

Creamos la vista con el scaffolding y configuramos la librería.

   1: @section scripts

   2: {

   3:     @Scripts.Render("~/bundles/jquery")

   4:     @Scripts.Render("~/bundles/datatables")

   5:     <script type="text/javascript">

   6:         $(document).ready(function () {

   7:             $('#listar').DataTable({

   8:                 "paging": true,

   9:                 "recordsFiltered": 10,

  10:                 "lengthChange": false,

  11:                 "searching": true,

  12:                 "ordering": true,

  13:                 "info": true,

  14:                 "autoWidth": false

  15:             });

  16:         });

  17:     </script>

  18: }

Ejecutamos y vemos como se comporta la libreria.

image

En un principio esta todo bien pero hay un error de javascript, esto error ocurre por que la tabla no esta definida correctamente.

Faltan los <thead> y los <tbody>, corregimos esto y volvemos a probar.

image

En este punto tenemos funcionando la librería, pero esta a medias, por que si nos fijamos el paginado no esta funcionando, el filtro y ordenamiento tampoco

image

Estas funcionalidades las revisaremos en nuestro siguiente post.

El código esta en esta url: https://github.com/romnyd/JqueyDataTables

Espero que les haya gustado. S@ludos.

Romny

React.js en Asp.Net MVC

Hola a todos, hoy quiero hablar de un librería de JavaScript que va a revolucionar el mundo del desarrollo web.

Que es React.js?

React.js es una librería open source de JavaScript, patrocina por facebook y no solo eso, también la utiliza en sus productos. Esta librería esta basada en componentes, la idea es poder reutilizar todos los componentes que se utilizan en el desarrollo web, como botones, barras, etc., también una de sus fortalezas es que mantiene el contenido actualizado en todo momento. React,js utiliza archivos JSX que es un nuevo tipo de archivo que mesclar JavaScript con HTML, también permite compartir código de forma nativa para android y iPhone.

 

Para mas informacion en: https://facebook.github.io/react/

Usando React.js con Asp.Net MVC

Lo primero es crear un proyecto nuevo.

image

image

Procedemos a instalar React.js desde el administrador de paquetes.

image

image

Procedemos a crear una vista básica.

image

 

 

1 @{ 2 Layout = null; 3 } 4 <html> 5 <head> 6 <title>Hello React</title> 7 </head> 8 <body> 9 <div id="content"></div> 10 <script src="http://fb.me/react-0.13.1.js"></script> 11 <script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script> 12 </body> 13 </html>

 

Procedemos a crear nuestro archivos jsx

image

1 var CommentBox = React.createClass({ 2 render: function() { 3 return ( 4 <div className="commentBox"> 5 Hello, world! I am a CommentBox. 6 </div> 7 ); 8 } 9 }); 10 React.render( 11 <CommentBox />, 12 document.getElementById('content') 13 );

Ejecutamos y deberíamos ver algo así.

 

image

El mismo ejemplo anterior lo podemos cambiar a la convension de ReactJS

1 var CommentBox = React.createClass({displayName: 'CommentBox', 2 render: function() { 3 return ( 4 React.createElement('div', {className: "commentBox"}, 5 "Hello, world! I am a CommentBox." 6 ) 7 ); 8 } 9 }); 10 React.render( 11 React.createElement(CommentBox, null), 12 document.getElementById('content') 13 );

 

Hasta este momento, no hemos explotado lo que es ReactJS, en nuestro próximo post, adentraremos en el uso de esta librería.

 

Sl2

Romny

Consumiendo Parse desde .NET

Hola a todos.

Prosiguiendo con el tema de Parse, en el cual en la entrada anterior vimos un poco lo que es este BaaS y algunas generalidades.

Para mas información: http://geeks.ms/blogs/rduarte/archive/2015/02/11/baas-parse.aspx

 

En esta entrada vamos a demostrar como seria consumir nuestra App creada en Parse desde .NET

Crear App MVC

Lo primero será crear un aplicación MVC

image

image

Componentes

Para poder conectarse con Parse debemos instalar el siguiente Nuget que nos proveerá lo necesario.

image

Trabajar con Parse

Después de tener lo necesario para trabajar con Parse, necesitamos la key de identificación, para eso vamos al portal y obtenemos dichas key.

image

En la aplicación en el Global.asax, inicializamos el cliente con Parse, para esto necesitamos las key de Application ID y NET Key.

image

Para este ejemplo me cree una clase books la cual se muestra así.

image

A modo de ejemplo realizare el código lo mas fácil, para no complicarnos.

image

Después de ejecutar el código, revisamos en Parse y se muestra el registro que acabamos de insertar.

image

De esta forma podemos consumir Parse de una forma sencilla y fácil. En próximos post trataremos de afrontar otros temas con Parse.

 

Espero que les haya gustado.

 

Sl2

Romny

BaaS: Parse

Hola a todos, esta noche quiero hablarles de un producto que se ofrece como BaaS para trabajar con desarrollo web y móvil.

 

Que es BaaS

Para hablar de Parse, lo primero que tenemos que saber es el termino BaaS: conocido como Backend como Servicio o Mobile backend como servicio, como tal es un modelo que proporciona a los desarrolladores web y de aplicaciones móviles, una forma de vincular las aplicaciones a cloud storage, servicios de análisis, gestión de usuarios, notificaciones push y la integración con redes sociales.

 

Que es Parse

Parse como tal es un producto que se ajusta al modelo de BaaS, ofrece todos los servicios característicos de un Backend como Servicio y maneja una integración con muchos productos.

image

Costo

Como Parse es una plataforma de pago, cuenta con un plan free el cual es ideal para app pequeñas.

Core

image

Push y Analytics

image

Si desean ajustar su plan en https://www.parse.com/plans se encuentra la respectiva calculadora de precios.

 

Creando una App

Lo primero que hay que hacer es generar una App en Parse, para eso nos registramos y en seguida se nos muestra un formulario para crear nuestra App.

image

Para empezar a trabajar vamos al CORE.

image

Vamos a generar un tabla, Parse utiliza bases de datos NoSql, lo que significa agregar una clase, para el caso de tipo user.

image

image

siendo el resultado este.

image

Para nuestro próximo post, conectaremos esta App con .NET

 

Espero que el post sea de su agrado y nos vemos en el próximo.

 

Sl2

Romny

Ciclo de vida de una aplicación ASP.NET MVC 5

Hola a todos.

Seguro muchos ya tienen el concepto de claro de como es el ciclo de vida de una aplicación MVC, pero este post es para dejarles un link del sitio oficial de ASP.NET, donde se muestra como es el ciclo de vida de dichas aplicaciones.

Para detallarlo bien lo pueden ubicar en: Lifecycle of an ASP.NET MVC 5 Application

  • Primera parte:
  • Muestra el ciclo de vida de todas las aplicaciones ASP.NET MVC, a partir de la recepción de la solicitud HTTP desde el cliente para enviar la respuesta HTTP de vuelta al cliente.

    Se muestra todos los componentes que actúan, desde la petición, pasando por el sistema de routing, luego el handler de mvc se encargara de procesar el controlador, pasar por el sistema de autorización y autenticación e invocar las acciones apropiadas de bindear, para retornar al cliente.

    image

  • Segunda Parte:

Muestra con mas detalle el ciclo que efectúa una petición.

image

Revisen el link echadle un vistazo.

S@ludos.

Romny

Conociendo el Dashboard de Orchard

Hola a todos. Después de conocer un poco como instalar, como ejecutar Orchard, vamos a conocer poco a poco lo que este CMS puede ofrecernos. Si quieren conocer nuestros previos post no olviden pasar por este link. http://geeks.ms/blogs/rduarte/archive/tags/Orchard/default.aspx

 

El Dashboard de Orchard le permite administrar el sitio web, cambiar su apariencia, añadir contenido, y habilitar y deshabilitar características de Orchard features. Cuando se inicia sesión el sitio web, se puede acceder al panel de control haciendo clic en el enlace en la parte inferior de su página de inicio por defecto.

image

image

Al abrir el panel de control, verá una lista de funciones de la aplicación y los ajustes en el lado izquierdo de la página. Esta lista se divide en secciones de características relacionadas. Cada sección expandible puede plegarse para mostrar solamente el título de la sección. Si hace clic en un título de la sección, se selecciona la primera función en esa sección. Esta lista cambia a medida que habilitar y deshabilitar características de la huerta. Por ejemplo, la sección del blog tendrá un conjunto de elementos plegables adicionales en virtud del mismo (como se muestra) después de crear realmente un blog. La nueva sección permite crear nuevas instancias de tipos de contenido por defecto, así como cualquier tipo de contenido personalizado que usted defina. El lado derecho de la página muestra los ajustes disponibles para la función seleccionada. La siguiente imagen muestra el contenido del tablero de instrumentos.

image

 

Ajustes de las características disponibles en el Dashboard

La siguiente tabla muestra cada una de las secciones del tablero de instrumentos y se describen brevemente los ajustes disponibles.

Titulo de Sección Descripción
Dashboard Contiene el Dashboard y muestra el ("Bienvenido a Orchard") en la página principal. Esta página contiene una serie de enlaces útiles para trabajar con Orchard. La página también muestra la versión Orchard que ejecuta y muestra avisos de http://orchardproject.net (cuando la advertencia se encuentre disponible) que se le notifique cuando una nueva versión está disponible o cuando una actualización importante necesita ser aplicada.
New Permite crear nuevas instancias de tipos de contenido predeterminados o de los tipos de contenido personalizados que se definen en la pantalla de definición de contenidos.
Content Permite gestionar las instancias de los tipos de contenido. Por ejemplo, te permite crear páginas, editar o eliminar las páginas existentes, y publicar páginas.
Content Definition Permite gestionar tipos de contenido existentes, así como la creación de su propia.
Blog Le permite añadir un blog a su sitio web, crear nuevas entradas del blog, y administrar su blog.
Queries Le permite agregar nuevas consultas y editar o eliminar queries. Queries existentes son utilizados después para visualización de listas de elementos de contenido a través del sitio.
Comments Si su sitio web está configurado para permitir a los usuarios publicar comentarios, le permite gestionar los comentarios publicados.
Taxonomies Permite gestionar términos de la taxonomía. Más adelante se puede utilizar para clasificar los elementos de contenido y mostrar u ocultar en diferentes formas de acuerdo con su taxonomía.
Widgets Permite gestionar los widgets que aparecen en las páginas de su sitio.
Media Le permite agregar o eliminar las carpetas que contienen los medios de comunicación.
Navigation Le permite agregar o quitar elementos en el menú principal y definir los menús de navegación adicionales.
Tags Le permite agregar o quitar etiquetas de contenido para su sitio.
Modules Le permite descargar, instalar y administrar módulos y características en su sitio.
Themes Permite instalar nuevos temas y aplicar temas a su sitio.
Workflows Le permite administrar sus flujos de trabajo. A través de flujos de trabajo de su sitio puede realizar tareas simples o complejas basadas en los eventos del sistema o la interacción del usuario.
Users Permite gestionar usuarios y funciones para su sitio.
Reports Permite administrar y ver informes que Orchard genera para su sitio.
Settings Permite configurar una variedad de ajustes del sitio, tales como el nombre del sitio y la cultura, el número predeterminado de elementos por página, URLs para Gallery feeds, si los comentarios agregados por el usuario deben ser aprobados, los tipos de archivos multimedia que se pueden cargar, y la configuración de registro de usuario.

Esta breve descripción es lo que a través del Dashboard se puede lograr.

Saludos.

Romny

Crear un WebSite Orchard desde Windows Azure

Hola  a todos, hoy vamos a crear un WebSite de Orchard desde Windows Azure.

Lo primero es ir a https://manage.windowsazure.com, y loguearnos con nuestras respectivas credenciales, vamos a crear un nuevo proceso –> Sitio Web

image

Buscamos en el tag de CMS –> Orchard CMS

image

Definimos la configuración del sitio

image

Luego aparecerá la tarea de configuración

image

Procedemos a la dirección que definimos

image

Luego configuramos el sitio.

image

Así generamos un WebSite de Orchard usando la galería desde Windows Azure.

image

Aquí vemos los datos respectivos de uso del sitio desde la administración de Windows Azure.

image

Espero que este post les sea de utilidad, ya vimos su instalación desde los posibles frentes que puede tener.

Saludos.

Romny