[Insights] – Cómo configurar una aplicación HTML de LightSwitch para Insights

Última actualización: 16 de marzo de 2014

Pre-Requisitos:

Otras posibles publicaciones de interés

Cómo Configurar una aplicación de LightSwitch para capturar métricas de rendimiento de la aplicación

Descargar los archivos de instrumentación para PAAS

Luego creamos una carpeta en el proyecto server llamada AppInsightsAgent

image

Copiamos los dos archivos descargados y los incluímos en el proyecto como contenido de la carpeta creada y con la propiedad Copy to Output directory como Always.

image

En el proyecto raíz de LighSwitch seleccionamos mostrar todos los archivos

image

Agregamos al archivo ServiceDefinition.csdef

<Startup>
<Task commandLine="ProjectInfoTool.ServerAppInsightsAgentUnifiedBootstrap.bat" executionContext="elevated" taskType="background">
</Task>
</Startup>

 
<Setting name="Microsoft.AppInsights.AccountId" />
<Setting name="Microsoft.AppInsights.InstrumentationKey" />
<Setting name="Microsoft.AppInsights.EnableMonitoring" />
<!-- Uncomment the following section if you want to change the Display Name of your application on the Application Insights Portal. (Default is your WebRole Name)-->
<Setting name="Microsoft.AppInsights.DisplayName" />

image

 
Agregamos al archivo ServiceConfiguration.cscfg
 
<Setting name="Microsoft.AppInsights.AccountId" value="SU Account ID Aquí" />
<Setting name="Microsoft.AppInsights.InstrumentationKey" value="SUKEYAQUI" />
<Setting name="Microsoft.AppInsights.EnableMonitoring" value="true" />
<!-- Uncomment the following section if you want to change the Display Name of your application on the Application Insights Portal. (Default is your WebRole Name)-->
<Setting name="Microsoft.AppInsights.DisplayName" value="Project Info App" />

image

 

Configurando una aplicación HTML de LightSwitch para monitorear patrones de uso

Configurar el proyecto servidor

Vamos al proyecto del servidor y hacemos doble clic en Usage Analytics Data.

image

En el portal seleccionamos web site y damos clic para seguir las instrucciones:

image

Copiamos el código como nos indica las instrucciones; con la unica diferencia que en logPageView vamos categorizando las paginas.

appInsights.logPageView("Services/ApplicationData");

image

 

Configurar el proyecto cliente

Ahora trabajaremos en el proyecto cliente de LightSwitch, en este proyecto toda la configuración la realizaremos manualmente, ya que al momento el tool de Application Insights no lo configura; para esto lo primero que debemos hacer es agregar el paquete NuGet de Application Insights para lo cual realizaremos lo siguiente:

image

En el cuadro de búsqueda escribimos application insights e instalamos el paquete. Al finalizar el archivo ApplicationInsights.config será agregado a este proyecto.

image

Luego lo que haremos será abrir el archivo ApplicationInsights.config del proyecto de servidor copiamos todo su contenido y lo pegamos en el archivo ApplicationInsights.config del cliente HTML.

En el proyecto de servidor abrimos el archivo default.aspx y copiamos el script generado por Application Insights y lo pegamos en el archivo default.htm del proyecto cliente antes de cualquier otro script justo después de Title, cambiando el contenido de logPageView por el siguiente.

appInsights.logPageView("Client/HTML5");

Compilamos la aplicación y la publicamos en azure nuevamente.

 

Cómo registrar eventos en Application Insights

El método logPageView registra las páginas en Application Insights, hasta este punto si navegamos en la aplicación no veremos las llamadas a las pantallas que tenemos en el proyecto cliente de LightSwitch, para poder medir el uso de esas pantallas registraremos un evento de Insights cuando la pantalla es creada, para esto en cada pantalla le haremos doble clic, una vez en el diseñador vamos a Write Code y seleccionamos created. Usaremos la estructura ( Actividad|Proyecto / Acción) en el siguien código que insertaremos en cada una de las pantallas.

if (appInsights) { appInsights.logEvent("Actividad/AddEditActividad"); }

image

Compilamos la solución y publicamos la aplicación en Azure, esperamos unos 20 minutos y empezamos a navegar en nuestra aplicación si es posible desde Internet Explorer y Firefox, por defecto Insights captura información del cliente cuando es posible y nos brindará también información del navegador que utiliza.

Información de Rendimiento

image

Información de uso – Paginas visitadas

image

Información de uso – eventos

image

[Insights] – Cómo agregar características de Insights en un proyecto de LightSwitch

Última actualización: 16 de marzo de 2014

Pre-Requisitos:

Otras posibles publicaciones de interés

Code: Creación de una aplicación HTML5 con LightSwitch

Deploy: Cómo publicar una aplicación LightSwitch en Windows Azure

Código Fuente: Aplicación HTML5 con LightSwitch

 

Agregando características de Insights en un proyecto de LightSwitch

Para empezar a capturar información de insights en una aplicación creada con LightSwitch en el proyecto de servidor hacemos clic derecho y seleccionamos Add Application Insights Telemetry to Project…

Nota: Aún no está disponible para este tipo de proyecto Add Aplication Insights cuando estamos creando un nuevo proyecto de LightSwitch, ya sea este HTML o aplicación lightswitch.

SNAGHTMLf4ec70

Luego seleccionamos Configure settings, escribimos el nombre que tendrá nuestra aplicación en Application Insights, hacermos clic en OK, y luego Add Application Insights to Project.

image

A partir de este momento podremos ver en el Solution Explorer el archivo de configuración de Application Insights y los vínculos directos a las páginas de cada una de las características.

image

Por ejemplo si hago clic en Project Info App Dashboard veremos la siguiente pantalla.

image

Aunque nuestra aplicación ya está registrada en Microsoft Application Insight aún no recolectará información ya que debemos empezar por publicar nuevamente la aplicación en azure con estos cambios.

Vea también Cómo configurar una aplicación HTML de LightSwitch para Insights.

[Insights] – Application Insights en Visual Studio Online

Última actualización: 17 de Marzo de 2014

Resumen

El principio de inicio ligero o rápido

“Las ideas se desarrollan y luego se publican. Se mide el comportamiento de su aplicación, recolectan los datos, y luego aprenden de lo sucedido. Por último, aplican esas lecciones y actualizan su producto.”

Hoy en día la mayoría de las aplicaciones modernas se desarrollan basadas en el principio de inicio ligero un camino óptimo para desarrollar, suministrar y refinar ideas; hasta ahora nos hemos enfocado en mejorar las herramientas, procesos y plataforma para desarrollar y suministrar ideas principalmente, abriendo una gran oportunidad para herramientas de refinamiento de las ideas.

Hoy en día sabemos ¿cómo los usuarios utilizan nuestras aplicaciones?, ¿Cuál es el comportamiento de nuestra aplicación?, ¿estamos realmente capturando lecciones aprendidas y aplicándolas de manera efectiva en la siguiente versión del producto basado en su utilización?, o simplemente para nosotros el refinamiento de nuestra aplicación está basado en corrección de errores?.

Es este artículo revisaremos algunas de las novedades relacionadas a Application Insights de Visual Studio Online y poco a poco iremos incorporando referencias a ejemplos, demos, herramientas y noticias relacionadas a este tema.

 

¿Qué es Application Insights?

Las fortalezas y beneficios que Application Insights le brindará empieza cuando su aplicación es puesta en producción, ya sea OnPremise o Cloud, usted estará en capacidad de contestar dudas como: ¿cómo los usuarios utilizan nuestras aplicaciones?, ¿Cuál es el comportamiento de nuestra aplicación?, ¿estamos realmente capturando lecciones aprendidas y aplicándolas de manera efectiva en la siguiente versión del producto basado en su utilización?, o simplemente para nosotros el refinamiento de nuestra aplicación está basado en corrección de errores?, permitiéndole así ser más asertivo al momento de priorizar el backlog de su siguiente versión o actualización de su aplicación.

Microsoft Application Insights le dirá si su aplicación está supliendo bien las necesidades de sus usuarios, la aplicación está funcionando o no, está ejecutándose de una forma lenta bajo la carga de usuarios y usabilidad que está teniendo, existe algún error (excepción) e ir directamente a la línea de código que lo está ocasionando, permitiéndole así ser más proactivo con la operación de la misma.

Podemos agrupar las características de Microsoft Application Insights en 4 principales:

  • Tableros de control
  • Disponibilidad del servicio
  • Rendimiento de la aplicación
  • Monitorear patrones de uso
  • Configuración de alertas

Tableros de control

En Microsoft Application Insights usted encontrará componentes visuales agrupados en OverView, disponibilidad, Rendimiento, uso y diagnóstico, dentro de Overview usted podrá crear sus propios tableros de control que le permitirán agrupar las métricas y eventos que más le conciernen o son más relevantes para usted.

 

Disponibilidad del servicio

Con Microsoft Application Insights usted puede monitorear la disponibilidad de cualquier sitio web o servicio siempre y cuando tenga una url pública, ya que puede hacer ping a su servicio periódicamente desde diferentes partes del mundo, simulando usuarios reales. Si su servicio responde lentamente, de forma incorrecta, o no responde, una notificación le será enviada.

 

Rendimiento de la aplicación

Los agentes de Microsoft Application Insights recolectan diferentes métricas y envían esta información hacia el servicio de Microsoft Application Insights. Para poder capturar esta información algunas deberán configurarse en el código u otras con tal solo tener los suficientes privilegios en el servidor, este es el caso para servicios web desarrollados bajo .Net; para servicios web en java, usted deberá descargar el agente en el servidor, actualizar los archivos de configuración y reiniciar el servicio web. Finalmente para servicios ejecutándose en una VM con rol web en un Cloud Service de Windows Azure, usted deberá acceder al código, instalar la herramienta de application insight en su equipo de desarrollo, configurar su aplicación, compilar la aplicación y desplegar los cambios en azure.

 

Monitorear patrones de uso

Con esta característica de Microsoft Application Insights usted podrá identificar las características más populares de su aplicación, los errores más comunes de los usuarios, y cuanto tiempo los usuarios están en las diferentes características de su aplicación; identificar la lealtad de sus usuarios, mediante la identificación de nuevos usuarios y usuarios recurrentes; además podrá crear funciones personalizadas para por ejemplo incluir métricas propias de su aplicación cómo medición del stock de productos si su aplicación es un carrito de compras, o los productos más populares.

Los SDKs al momento disponibles para monitorear patrones de uso son para:

 

Configuración de alertas

En Microsoft Application Insights usted podrá configurar y recibir alertas via correo electrónico si su aplicación está teniendo problemas de rendimiento, está presentando excepciones, o algún servicio no está disponible.

 

Novedades

[Noticias] – Application Insights Tools for Visual Studio

Desde el 26 de Febrero de 2014 se encuentra disponible la herramienta de Application Insights para Visual Studio, el cual les permitirá crear, configurar y probar fácilmente telemetría para sus aplicaciones desde Visual Studio. Lo pueden habilitar desde el momento que crean una aplicación web o si el proyecto ya existe con hacer clic derecho sobre su proyecto web podrán agregarlo. Este tool está disponible aquí.

[Code] – Visual Studio me da un error de login al servidor en SQL Azure

Ya sea cuando estoy tratando de conectarme a un origen de datos existente en azure o cuando estoy tratando de publicar una aplicación que contiene una base de datos en SQL Azure, Visual Studio me presenta el mensaje que no puede conectarse al servidor porque la ip XXX.XXX.XXX.XXX no puede acceder al servidor.

Esto se da porque SQL Azure tiene una protección de seguridad a nivel de las IPs o rangos de IPs que pueden conectarse al servidor, el resto de ips no registradas aunque tengan las credenciales de inicio de sesión no podrán conectarse al servidor de base de datos.

image

Para resolver este problema si tienes los permisos de administrador o co-administrador de la suscripción puedes conectarte o solicitarle al administrador de Windows Azure ir al portal de administración de azure –> SQL Databases –> cambiarse de la pestaña de bases de datos a servidores –> seleccionar el servidor –> Ir a configuración y crear una regla que registre tu IP, para que los cambios sean reflejados deberás guardar los cambios haciendo clic en el boton Save ubicado en la parte inferior de esta pantalla y listo!.

 

image

[Tip] – Como crear una base de datos en blanco en Windows Azure

La creación de la mayoría de los servicios en Windows Azure son sencillos sobre todo si utilizamos los asistentes de la interfaz web, claro que también tenemos la opción de hacerlo via powershell ( esto lo veremos en otro post), en este momento lo que haremos será crear una nueva base de datos y servidor, para la cual debemos ir al sitio de administración de windows azure, ingresar nuestras credenciales, en la parte inferior izquierda seleccionar New –> Data Services –> SQL Database –> Quick Create e ingresar la información que nos solicita el asistente.

image

[Tip] – Como explorar servicios de Windows Azure en Visual Studio 2013

En esta publicación corta veremos lo fácil y cómo explorar los servicios de una suscripción de Windows Azure desde Visual Studio 2013 en 3 simples pasos.

Paso 1: Vamos al menu Tools y seleccionamos Connect to Windows Azure…

image 

Paso 2: Ingresamos nuestras credenciales ( usuario y contraseña), la misma que debe tener los suficientes permisos, es decir como administrador o co-administrador, si ingresamos las credenciales del administrador de billing nos podremos conectar pero no explorar el contenido de los servicios.

Paso 3: Desde el Server Explorer empezamos a explorar el contenido de nuestros servicios, en algunos casos como por ejemplo el caso de Web Sites, podemos crearlos desde aquí el Server Explorer.

image

[Deploy] Cómo publicar una aplicación LightSwitch en Windows Azure

Resumen

Con Visual Studio LightSwitch tenemos varias opciones para publicar la aplicación que hemos creado, dependiendo del tipo de cliente, donde está el origen de datos, los usuarios de la aplicación son internos, externos, ambos; una vez resultas aquellas dudas podremos definir si nuestra aplicación LightSwitch será publicada en Cloud u On-Premise, en este artículo revisaremos como publicar una aplicación LightSwitch en Windows Azure.

Pre-Requisitos

Código Fuente: Aplicación HTML5 con LightSwitch

 

Publicación de la aplicación en Azure

Antes de comenzar con la publicación asegúrese de crear primero la base de datos en sql azure.

Luego selecionamos el proyecto raíz de nuestra solución creada con LightSwitch y seleccionamos Publicar.

SNAGHTML1fc66f58

A continuación seguimos los pasos del asistente de publicación:

Seleccionamos aplicación completa y damos clic en siguiente.

image

Nota: si la aplicación está en modo debug usted verá el siguiente mensaje, en este punto cancele el asistente cambie el modo de su solución a release y ejecute el asistente nuevamente. No es un error que no le permitirá publicar su solución.

image

Seleccionamos Windows Azure

image

En la sección de suscripción nos listará las suscripciones asociadas a la cuenta con la que iniciamos sesión, seleccionamos con la que vamos a trabajar, por defecto el tipo de servicio que se publicará será Web Site, haremos el cambio a Cloud Service; a diferencia de un Web Site, el cloud service nos creará un servidor web que luego podremos conectarnos para cambiar / instalar algun componente que necesitemos, basicamente la diferencia está en el nivel de administración que tendremos de la infraestructura de nuestra solución y la escalibilidad.

image

En la configuración del servicio seleccionamos crear nuevo, ingresamos la información del nuevo servicio

image

luego habilitamos la conexión remota e ingresamos las credenciales del administrador; y pasamos a la pestaña de avanzado donde…

image

crearemos un storage nuevo ( similar a la ventana anterior)

image

En las opciones de seguridad seleccionamos No para HTTPS.

image

En la sección de conexiones de datos deberá configurar la conexión de usuario y publicación de esquema de la misma; para lo cual deberá empezar por dar clic en … (3 puntos), luego en el punto 2 ingresar el nombre del servidor de base de datos, en el punto 3: las credenciales del usuario; en el punto 4: seleccione la base de datos, pruebe la conexión, haga clic en OK; copie el string de conexión del punto 1 y pegue en el punto 7.

image

Nota: Si al momento de tratar de seleccionar la base de datos aparece la siguiente pantalla, puede revisar como resolver este error aquí.

image

En Data Connections aparecerán los dos strings de conexión a la base de datos.

image

En la vista de resumen aparecerán las configuraciones mas importantes seleccionadas durante este proceso; hacemos clic en Publish, esperemos unos minutos mientras se publica la aplicación; al finalizar nos direccionará a la pagina de administración de Windows Azure.

image

Finalmente ingresamos a nuestra aplicación: http://suaplicacion/cloudapp.net/HTMLClient.

 

image

[Code] Creación de una aplicación HTML5 con LightSwitch

Última actualización: 15 de marzo de 2014

Resumen

Durante algunos de los eventos que he venido realizando una de las preguntas comunes es como crear una aplicación web transaccional rápido y que sea soportada por múltiples dispositivos, para este tipo de escenarios tenemos Visual Studio LightSwitch el cual nos permite crear aplicaciones de una manera rápida y con múltiples alternativas de publicación ya sea en OnPremise o Cloud, pero a su vez no muy utilizada, es por eso que este pequeño post tiene como objetivo presentar como empezar a trabajar con LightSwitch.

Pre-Requisitos

¿Qué es Visual Studio LightSwitch?

En versiones anteriores tenían que descargar e instalar de manera independiente, ahora parte de Visual Studio está diseñado para simplificar el desarrollo de aplicaciones y servicios centrados en datos empresariales, y que pueden funcionar en una variedad de dispositivos. Con LightSwitch usted puede:

  • Crear aplicaciones Office ( Office 2013 SP1, Office 365), desktop y HTML 5 (iOS 5/6, Windows RT, Windows Phone 8, Android 4)
  • Consumir y agregar múltiples orígenes de información como bases de datos, sharepoint, OData y SAP
  • Eliminar tiempos en escritura de código y centrarse en lo que debe hacer su aplicación
  • Publicación flexible On-Premise (IIS, SQL Server, SharePoint 2013), Cloud (Windows Azure, SQL Azure, Office 365).
  • Su arquitectura se basa en mejores prácticas y tecnologías.

Creando una aplicación de Visual Studio LightSwitch 2013

Para esta publicación iniciaremos creando una aplicación HTML 5 que nos permita registrar información básica de un proyecto y sus actividades. Esta publicación además será gestionada con Visual Studio Online, por lo que todo lo que generemos se irá publicando en source control para utilización en futuras publicaciones.

1. Creación del proyecto en Visual Studio

Para crear este tipo de proyecto lo hacemos de la misma manera que cualquier otro tipo de proyecto en Visual Studio File -> New -> Project, y seleccionamos la plantilla de proyecto LightSwitch HTML Application.

Nombre del Proyecto y solución: ProjectInfoTool

Habilitamos la casilla de Add to source control

Seleccionamos Team Foundation Version Control.

Seleccionamos la carpeta donde deseamos almacenar la solución.

 

2. Estructura del proyecto

En versiones anteriores de LightSwitch cuando se creaba un proyecto lo que inicialmente veíamos era la vista lógica de la solución la cual nos mostraba básicamente las pantallas, tablas y consultas que creábamos y si queríamos modificar el código, Nugets, CSS o imágenes debíamos cambiarnos a la vista de archivos, en la versión 2013 todo el contenido del proyecto se muestra en una única vista en el Solution Explorer.

 

  1. Proyecto raíz: es donde podemos modificar las propiedades de nuestra aplicación tales como métodos de autenticación, extensiones y SharePoint.

     

  2. Proyecto cliente: Contiene las pantallas, scripts y contenido del cliente que estamos creando.

 

  1. Proyecto servidor: Contiene los orígenes de datos, código del lado del servidor, servicios svc; cualquier personalización del lado de la capa de servicios debe ser realizada en este proyecto.

 

3. Trabajando con orígenes de datos

Para trabajar con orígenes de datos nosotros podemos tener los dos siguientes escenarios:

Nota: En LightSwitch las tablas son a su vez entidades.

  • El origen de datos ya existe: para lo hacemos clic derecho sobre Data Sources y seleccionamos Add Data Source, donde podremos seleccionar cualquiera de los orígenes de datos disponibles.

     

     

  • No existe el origen de datos: Lo contrario al escenario anterior no tenemos el origen de datos (como es este el caso) seleccionamos Add Table.

3.1 Creación de las entidades

        Nota: Por defecto LightSwitch habilita las propiedades de creado/modificado. El nombre de la entidad va en singular.

        Nombre de la Entidad: Project

Nombre Propiedad

Tipo de Dato

Requerido

Name

String (50)

Si

Description

String (255)

Si

StartDate

Date

Si

EndDate

Date

Si

     

       

Nombre de la Entidad: Activity

Nombre Propiedad

Tipo de Dato

Requerido

Name

String (50)

Si

Description

String (255)

Si

StartDate

Date

Si

EndDate

Date

Si

AsignedTo

Person

Si

Status

Short Integer

Si

 

La propiedad Status tiene la particularidad de que podemos pre-definir los posibles valor de elección, para lo cual seleccionamos Status, luego vamos a propiedades damos un clic en Choise List y en la ventana ingresamos los posibles valores.

 

¿Cómo defino el valor por defecto de la propiedad Status?

En el siguiente artículo se revisa cómo configurar valores por defecto.

3.2. Relacionando Entidades

    En este paso crearemos la relación de 1:M entre Proyecto y actividades. Seguimos los siguientes pasos:    

   

4. Trabajando con pantallas

A continuación crearemos las pantallas relacionadas a nuestras dos tablas creadas anteriormente, para lo cual en la parte inferior del diseñador nos cambiamos de Server a HTMLClient. Recordemos que nuestra aplicación es Proyectos el punto de entrada voy a darle doble clic a la entidad Project para ponerla en primer plano y luego dar un clic en screen.

En la ventana de Add New Screen, seleccionamos Common Screen Set, seleccionamos Projects, marcamos la casilla Activities para que su conjunto de datos también sea incluído en la pantalla de detalle del proyecto; con esta plantilla de pantalla lo que se creará será una carpeta que contenga la colección de las 3 siguientes pantallas relacionadas a proyectos sin necesidad de crear una a una manualmente ahorrándonos tiempo, y luego ingresar solo a personalizar. Ahora que ya sabemos qué hace esta primera plantilla de pantalla, revisemos las siguientes:

Browse Data Screen: muestra una lista de elementos.

View Details Screen: muestra el detalle del elemento seleccionado.

Add/Edit Details Screen: permite agregar o editar el detalle del elemento seleccionado.

Hago lo mismo para la entidad actividad.

Veamos cómo está el proyecto cliente:

5. Guardar el proyecto

Guardamos los cambios realizados, nos vamos a nivel de solución y seleccionamos Check-In, luego vinculamos con los elementos de trabajo y protegemos el código.

6. Ejecutamos la aplicación

Otros Recursos

[Code] ¿Cómo defino el valor por defecto de una propiedad en LightSwitch?

Última actualización: 15 de marzo de 2014

Cuando en LightSwitch estamos trabajando con alguna propiedad la cual puede tener varios valores pre-definidos y hemos creado una lista de selección, existen dos posibles formas para establecer el valor por defecto y prácticamente depende del alcance (scope) que le queremos dar a este valor por defecto: escenario 1: queremos que el valor por defecto se aplique en todas las ventanas, o en el escenario 2: queremos que el valor por defecto se aplique en una ventana o al hacer clic en alguna acción dentro de la ventana.

Por ejemplo si estoy trabajando con una entidad actividad, y tengo una propiedad llamada estado (status en la imagen) con los siguientes posibles valores: (0) New, (1) In Progress, (2) Done,(3) Deleted; y …

(X) -> Representa el valor que corresponde de la lista.

Escenario 1:

deseamos establecer el valor New por defecto cada vez que creamos una nueva actividad. Seleccionamos Activity luego desplegamos la lista de Write Code y seleccionamos Activity_Created y escribimos:

partial void Activity_Created()

{

this.Status = 0;

}

image

Escenario 2:

Deseamos que en la pantalla Nueva Actividad se establezca el valor por defecto, utilizamos el siguiente código:

myapp.Activity.created = function (entity) {

// Write code here.

entity.Status = 0;

};

clip_image004