Categoría: Web

Conectar un Azure App Service mediante Filezilla

Introducción

Azure app Service es una solución de servicio como plataforma (PaaS) que nos ofrece la nube de Azure entre su vasta cantidad de soluciones, desde poder desarrollar nuestras aplicaciones web, subir una API, trabajar hasta con aplicaciones de terceros, sin preocuparte acerca de la administración de su infraestructura.

tradicionalmente un deploy de cualquier aplicación web debe de requerir no solamente en la planificación de su arquitectura desde el punto de vista del desarrollo sino también considerar la parte de toda la infraestructura que se debe desarrollar o crear como por ejemplo las redes, balanceo de cargas, tolerancia a fallos, tener alta disponibilidad entre algunas cosas que deben ser consideradas que debemos de manejar en nuestras aplicaciones.

Una vez desplegado estos sistemas o estas aplicaciones web o API en general bajo un entorno de producción se necesita darle mantenimiento ahí es donde entran nuestro personal de infraestructura lo cual monitorean la salud de estas aplicaciones.

toda esa responsabilidad esta resumida con esta solución que llegó hacia los desarrolladores como caída del cielo llamada Azure app Service, donde nos da la facilidad de crear aplicaciones y desplegar las mismas de una manera super fácil sin necesidad de preocuparnos por toda esa capa de mantenimiento e infraestructura vital para tener nuestras aplicaciones encendidas y totalmente funcionales.

Que aprenderás en este articulo:

  1. Aprenderás a crear una App Service directamente desde el portal de Azure
  2. Podrás conectarte mediante el protocolo FTP a la app web de app Service mediante la aplicación Filezilla
  3. Poder hacer respaldos y gestión de los archivos y carpetas en esa instancia de App Service mediante Filezilla por el protocolo FTP

Requisitos básicos:

  1. Filezilla (https://filezilla-project.org/download.php?platform=win64)
  2. Una cuenta de Azure (https://docs.microsoft.com/en-us/learn/modules/create-an-azure-account/)
  3. Ganas de aprender

Creación de un App Service

Lo primero que debemos de hacer para poner en práctica este artículo es empezar a preparar todos los recursos necesarios en la nube de Azure pero para ello primero debemos de crear nuestra cuenta de Azure, sí ya la posees entonces ya te puedes saltar este paso e ingresar al portal principal de Azure (https://portal.azure.com) dónde vamos a seleccionar en el botón de hamburguesa en la esquina superior izquierda del portal principal le vamos a dar clic en la primera opción como aparece en la siguiente imagen.

Azure predefine una serie de elementos comunes para crear en sus recursos, para este articulo vamos a hacer clic en la opción Web App como se muestra a continuación.

Una vez ido al formulario de creación de una web app para App Services vamos a seleccionar la suscripción como primera opción, luego vamos a crear un recurso nuevo, en mi caso yo le llame Demos, como siguiente opción damos un nombre a la web app, esta a la vez será la url a la cual vamos a acceder desde la internet yo le llame demoappservicefilezilla, en publicación dejamos en la opción Código, luego en la opción Runtime la verdad puedes elegir cualquiera, el interés de este demo es acceder a los archivos que están en este espacio reservado para alojar nuestra app, en mi caso seleccione .NET 5, en la opción de sistema operativo lo dejamos como quedo por defecto, en este caso Windows y en la región, agreguen la que mas les haga sentido, para este demo seleccione South Central US.

en la sección de App service plan, yo como no tenia ninguna nueva le di a crear nuevo plan y del lado derecho se va a desplegar una página donde aparecerán los distintos esquemas de precios que nos ofrece app service para hospedar, primero seleccionar en sus distintos ambientes (Dev/Test – Production – Isolated), vamos a hacer para efectos de este demo clic en la primera opción (Dev / Test) y seleccionaremos el tier F1 que es gratuito donde nos ofrece 1 GB de memoria y 60 minutos al día de cómputo, esto quiere decir que entre cada transacción ya sea de request o response este nos va a consumir dentro de nuestro rango de tiempo que ofrece diario este tier que no sobrepase de los 60 minutos lo cual para pruebas y demos esta mas que suficiente, mas no es una instancia que debemos dejar luego cuando queramos ir a producción o ambientes más públicos.

Luego de seleccionar o crear el plan de app service y aplicamos los cambios le damos a revisar y crear para que nos envíe a la siguiente pagina donde nos va a mostrar un resumen de todas las configuraciones seleccionadas hacemos clic en el botón crear para que Azure proceda a crear nuestra app web como se muestran en la siguiente imagen.

Una vez creado el recurso, vamos a ello haciendo clic en el botón Go to resource

Para comprobar que todo esta al 100% funcional con nuestra app web vamos a buscar la opción de Browse en la pagina principal del recurso que pertenece a nuestra app web o bien ubicar la opción URL y hacer clic en la opción de copiar y pegar la ruta en nuestro navegador web para confirmar que ya tenemos nuestra app web ejecutándose sin problemas como se muestra a continuación.

De esta manera ya tenemos creada nuestra app web mediante el cual nos vamos a poder conectar mediante ftp con Filezilla y gestionar los archivos que se encuentran hospedados en ese recurso.

Conectar App Service mediante Filezilla

Aquí el truco para conectarnos mediante ftp a cualquier web app es obtener el perfil de publicación que nos ofrece app service en la pagina principal de aquel recurso que creemos, vamos a ubicar la opción Get Publish Profile y hacemos clic para descargar el archivo con extensión .PublishSettings como se muestra a continuación.

Una vez descargado el archivo lo ubicamos y abrimos con nuestro bloc de notas y vamos a hacer clic en la opción formato y hacemos clic en ajuste de línea para que no se abra el archivo y se muestre todo en 1 sola línea y se vea mas entendible el archivo, luego vamos a notar que parece código xml con configuración relevante usuarios, contraseñas, urls, en realidad lo que estas descargando son los perfiles para conexión mediante ftp, ftp pasivo y webapp que luego veremos en otros artículos como sacarles el máximo provecho para hacer liberaciones de nuestras aplicaciones de una manera más rápida y sencilla, continuando con el articulo vamos a ubicar el tag de publishProfile y para que sea mas entendible hagamos enter para dar espacios y de ahí sacar el perfil que nos interesa que es el FTP como se muestra en las siguientes imágenes.

Ok entonces ya teniendo los datos de conexión abrimos Filezilla y hacemos clic en el primer icono del lado izquierdo que es donde se nos va a desplegar una ventana de configuración de conexiones y vamos a hacer clic en la opción New Site, le damos un nombre a nuestro site, en mi caso coloque DemoAzureAppService como se muestra a continuación.

A este paso veremos del lado derecho de la ventana de conexión una serie de valores que vamos a rellenar con las configuraciones que ya tenemos del archivo publishProfile donde vamos a copiar el publishUrl y lo vamos a pegar en la casilla de host como primer paso, luego seguimos con el usuario y contraseña es mas que obvio ubicarlo en el bloc de notas los copiamos y pegamos y hacemos clic en Connect como se muestra en la siguiente imagen.

Hasta este paso ya vamos muy bien, solamente se nos mostrará una ventana mostrándonos el certificado de conexión entrante que nos permitirá hacer conexión con el recurso de Azure mediante el protocolo FTP, simplemente hacemos clic en OK.

Hasta este punto ya nos podemos conectar mediante ftp a nuestra web app y poder hacer gestión de nuestros archivos, en este caso solo se ve un archivo que es el que predefine Azure al momento de crear un recurso de app service que es el archivo hostingstart.html.

Respaldar y hacer cambios en nuestros archivos

En los pasos previos ya nos pudimos conectar mediante Filezilla a nuestro espacio reservado donde tenemos los archivos que pertenecen a nuestra app web, por ahora tenemos el único archivo que automáticamente genera Azure, pero ya hasta aquí podríamos subir archivos pertinentes a un portal web, modificar imágenes, cambiar nombres y permisos a carpetas, para hacer una prueba si cualquier cambio surte efecto hacemos clic en la carpeta wwwroot, y en la lista de abajo nos va a aparecer el archivo hostingstart.html le damos clic derecho y hacemos clic en la opción View/Edit.

Nos abrirá el bloc de notas con todo el contenido en html donde vamos a buscar el tag de title y solamente voy a cambiar las líneas del titulo para ver el cambio en tiempo real luego de guardar el archivo como se muestra en la siguiente imagen.

Se nos mostrara una ventana donde vamos a confirmar los cambios realizados en el servidor propiamente en el archivo hostingstart.html y hacemos clic en Yes.

Vamos a nuestra web app de Azure y copiamos la url o hacemos clic en browse y nos mostrara los cambios que hicimos directamente desde FTP al archivo html que previamente modificamos.

Conclusión

De esta manera ya como lo vimos en los pasos anteriores podemos demostrar de una manera rápida el aprovechamiento de la herramienta de Filezilla para gestionar los archivos ya almacenados en esa instancia de app service, ya sea para configurar algunas cosas que quedaron pendientes, alguna modificación de un parámetro o variable en una configuración por ambientes, algún respaldo, algún archivo faltante por reemplazar o añadir, en fin.

Accediendo de manera rápida mediante Filezilla podemos controlar más cómodamente nuestras instancias de App service, si se esta al tanto y se conoce de que ya se puede hacer gestión mediante otros recursos mediante ya sea el App Service Editor que aun sigue en fase preview a día de hoy así como también mediante KUDU, el CLI y también herramientas como Powershell pero nada quita la comodidad de arrastrar y soltar archivos de manera fácil mediante Filezilla o algún programa de gestión de archivos mediante el protocolo FTP.

Creando una API RESTful con documentación sobre Azure App Service.

Introducción 

La plataforma de Azure provee un vasto set de capacidades dentro de un modelo de Plataforma como servicio (PaaS) para alojar aplicaciones web y servicios. La plataforma es capaz de ofrecer algo más que solo alojar para ejecutar la lógica en sus aplicaciones; esta también incluye una serie de robustos mecanismos para gestionar todos los aspectos acerca del ciclo de vida de su aplicación web como servicios web respectivamente. 

Azure App Services incluye un numero de características para gestionar sus aplicaciones web y servicios incluyendo Web Apps, Logic Apps, Mobile Apps y API Apps.  De esta manera hacemos introducción para explicar mediante este articulo con un breve ejemplo el uso de estas características para alojar en este caso específico una web API RESTful de manera muy sencilla y en adición a una documentación robusta y dinámica. 

Estas características claves son de primordial importancia para la creación de aplicaciones web modernas a través de la nube de Azure como (PaaS). 

Cuando usted está en el proceso de diseño de una arquitectura de software basada en una aplicación web, una de las capas que necesitara implementar es una API lo cual permite que las capas de su arquitectura puedan comunicarse con cada una de las demás. Independientemente de la arquitectura de su aplicación, esta es una buena oportunidad para que implemente una API RESTful para que dicha intercomunicación suceda con su respectiva documentación para el uso de su API. 

Luego de leer este articulo usted podrá: 

  • Crear una aplicación API RESTful sobre Azure App service. 
  • Crear una documentación bien estructurada para la API utilizando herramientas de código abierto. 

Crear una aplicación API con Azure App Service es un poco similar a crear una aplicación web normal desplegada como un App service. Usted podrá tener las mismas opciones disponibles para su aplicación API que usted tiene para una aplicación web normal. 

Crear e implementar una aplicación API 

Para crear una aplicación API RESTful en Azure App Service existen muchas formas, las maneras más comunes son ya sea mediante el portal de Azure o directamente desde Visual Studio, en este caso vamos a realizar el ejemplo desde Visual Studio 2019: 

  1. Ejecute Visual Studio 2019 y seleccione en la opción Archivo > Nuevo > Proyecto. 
  1. En la ventana emergente de Nuevo Proyecto, seleccione ASP.NET Web Application (.Net Framework) dentro de la categoría de Cloud y haga clic en Siguiente. 
  1. En la ventana emergente de configuración del Nuevo Proyecto, escriba el nombre del proyecto, en la ubicación física en el disco seleccione el tipo de framework .NET a utilizar y luego haga clic en Crear. 
  1. Seleccione la plantilla de Web API en la ventana emergente de configuración de nuevo proyecto y luego haga clic en Crear. 

De esta manera Visual Studio crea un nuevo proyecto web API con la siguiente estructura de archivos en el árbol de archivos en el explorador de la solución: 

Generar la documentación automática de la API usando Swashbuckle 

Swashbuckle es un framework de código abierto muy popular que consiste en un gran ecosistema de herramientas que funcionan para diseñar, construir, documentar, y consumir su RESTful API, lo que lo vuelve la alternativa ideal para crear la documentación de la API de manera más automatizada, el paquete de NuGet está muy bien documentado así que pueden revisar la documentación para más detalles accediendo al proyecto GitHub accediendo al final del artículo. 

Swashbuckle se proporciona a través de un conjunto de paquetes de NuGet: Swashbuckle y Swashbuckle Core. A continuación, siga estos pasos para agregar Swashbuckle a su proyecto de API: 

  1. Instale el paquete de NuGet, lo cual incluye Swashbuckle.Core como una dependencia al momento de instalar usando el siguiente comando desde la consola de paquetes de Nuget: 
Install-Package Swashbuckle 
  1. El paquete de NuGet también instala un archivo de arranque inicial o bootstrapper (App_Start/SwaggerConfig.cs) lo cual habilita las rutas de Swagger al iniciar la aplicación API usando WebActivatorEx. Usted también puede configurar las opciones de Swashbuckle modificando el método de extensión GlobalConfiguration.Configuration.EnableSwagger en el archivo SwaggerConfig.cs. también puede excluir de su API las acciones que han sido marcadas con el decorativo de obsoletas agregando la siguiente configuración: 
public class SwaggerConfig 
{ 
        public static void Register() 
        { 
            var thisAssembly = typeof(SwaggerConfig).Assembly; 
  
            GlobalConfiguration.Configuration 
              .EnableSwagger(c => 
              { 
                ...  
                ... 
              //Set this flag to omit schema property descriptions    for any type properties decorated with the Obsolete attribute 
                      
                c.IgnoreObsoleteProperties(); 
 
               ... 
               ... 
         }); 
      } 
 } 
  1. Modifique las acciones de los controladores en su proyecto API para incluir el atributo swagger para ayudar al generador a construir los metadatos de swagger. 
  1. Swashbuckle está ahora configurado para generar los metadatos Swagger para los endpoints de su API con una simple interfaz de usuario para explorar la metadata. Por ejemplo, el controlador que se lista puede producir la UI que se muestra bastando solo con escribir Swagger en la barra del navegador web seguido de la url de la aplicación web.  

Publicar la API RESTful en Azure App Service 

Hasta este punto ya tenemos el diseño de una API con lo básico para conectar con las demás capas de su proyecto, también contamos con una documentación que ya se genera de manera automática, aprovechando al máximo toda la metadata y definición de su API a través de las acciones de sus controladores, ya preparado lo anterior mencionado hasta este momento para implementar su aplicación API se necesita completar la publicación desde Visual Studio hacia Azure App Service para desplegar su proyecto API en la nube. 

Siga estos pasos para desplegar su proyecto API desde Visual Studio: 

  1. Haga clic derecho sobre el proyecto en el Visual Studio Solution Explorer y luego hacer clic en Publicar.
  1. En la ventana de dialogo de publicación, seleccione en App Service en la parte izquierda superior, luego Crear Nuevo, posteriormente hacer clic en publicar para ir a la configuración de App Service de Azure.

  1. La ventana cambiara y lo enviara a una configuración más específica donde primeramente debe de escribir el nombre de la aplicación a desplegar en Azure App Services, luego seleccione la suscripción a la cual está asociado en su portal de Azure. 
  1. A continuación, se debe de especificar un grupo de recurso dentro de la nube de Azure al cual se va a asignar la aplicación web API como recurso de Azure App Service. 
  1. En el caso de que no posea ningún recurso o quiera crear un nuevo recurso haga clic en nuevo nombre de grupo de recurso a crear. 
  1. Este grupo de recurso por lo general asigna una capacidad de gasto calculado a través de un plan de hosting escalable con más o menos capacidades como lo son por ejemplo uso de RAM o número de procesadores necesarios para la ejecución del API, lo cual por defecto selecciona S1 (1 core, 1.75 GB RAM), en este caso le vamos a bajar escalabilidad del API para efectos de prueba y seleccionamos un plan de costos gratuito, este por ser compartido y además por ser un ambiente inicial de pruebas, cuando ya se quiera escalar más la aplicación o cambiar a un ambiente de más calidad y/o producción se puede optimizar a un plan adecuado para ejecutar de manera eficiente su proyecto API. 
  1. Una vez configurado todo el entorno del proyecto API en Azure App Service, se crea un perfil de publicación en Visual Studio para que cada vez que quiera ejecutar un despliegue de su API con cambios nuevos simplemente le damos a ejecutar la publicación mediante el botón Publicar. Visual Studio procede a compilar e intentar subir todos los archivos del proyecto API hacia la nube de Azure mediante Azure App service, de esta manera ya puede acceder a su API a través de la internet. 
  1. Cuando la publicación de su proyecto API esté finalizado, este abrirá en una nueva ventana de navegador donde se mostrará la página web inicial de publicación. 
  1. Navegaremos hacia la documentación Swagger a través de la ruta /Swagger para ver los detalles de la documentación de la API, además para probar los métodos REST ya expuestos mediante la API. Por ejemplo, http://<SU-API-APP&gt;.azurewebsites.net/swagger/ 

De esta manera ya podemos contar con una aplicación RESTful con una documentación bien estructurada de manera automatizada debidamente ejecutándose a través de la nube de Azure mediante Azure App Service. 

Código fuente 

https://github.com/hughfernandez/API-RESTfull-Demo-Doc-Swagger

Como enviar un objeto con imagen por POST hacia un WebAPI en formato JSON

Sabemos que Json está revolucionando la programación hoy en día. XML ya empieza a irse desplazando de un tiempo para acá, mucho auge de tecnologías basadas en motores de JavaScript pero bueee la tecnología es así….

Este código es bien sencillo, por lo tanto en este artículo solo voy a hacer énfasis en ese fragmento de código, por lo que no voy a explicar otras cosas alrededor, la idea es poder tener la lógica en nuestras apps y que puedas incorporar esta funcionalidad tan vital para aplicaciones que interactúan mucho con imágenes o alguna captura de multimedios.

Previo a realizar esta subida de data hacia un servidor se debe de tener una WebApi, las WebAPIs son lo más sencillo y dinámico para exponer información, ya sea de un repositorio de data, así como la misma establece una capa de datos muy dinámica y portable por ser multiplataforma.

Ya teniendo tu propia WebAPI arriba en algún servidor (Azure, IIS, etc), se debe de crear una aplicación cliente que consumirá información y podrá hacer peticiones, sencillamente estamos trabajando en C#, ya sea un app Winform, WPF, Xamarin, UWP . También necesitamos la librería Json.Net que la puedes conseguir en Nuget

Volviendo al código tenemos:

public void UploadData(byte[] imagen) //recibimos la imagen como parametro en el metodo
{
  using (var client = new HttpClient())
  {
    var objetoClase1 = new ObjetoClase()
    {
      ID = Guid.NewGuid(),
      MediaStream = imagen, //esta es la imagen representada en Byte[]
      Description = "dummy";
    };
//La magia esta aqui
    var response = await client.PostAsync(new Uri("URL del WebAPI"), new HttpStringContent(JsonConvert.SerializeObject(objetoClase1), UnicodeEncoding.Utf8, "application/json"));

    if (response.IsSuccessStatusCode)
    {
    //Al entrar aqui es porque el POST hacia el webAPI fue exitoso (Codigo 200:OK)
    }
}
}

Espero les sea de utilidad.
Enjoy….

PHPLinq!!… una mejor forma de utilizar los datos




Language-Integrated Query (LINQ) es un conjunto de características presentado en Visual Studio 2008 y 2010 que agrega capacidades de consulta eficaces a la sintaxis de los lenguajes C# y Visual Basic. LINQ incluye patrones estándar y de fácil aprendizaje para consultar y actualizar datos, y su tecnología se puede extender para utilizar potencialmente cualquier tipo de almacén de datos.

Tradicionalmente, las consultas con datos se expresan como cadenas sencillas, sin comprobación de tipos en tiempo de compilación ni compatibilidad con IntelliSense. Además, es necesario aprender un lenguaje de consultas diferente para cada tipo de origen de datos: bases de datos SQL, documentos XML, servicios Web diversos, etc. LINQ convierte una consulta en una construcción de lenguaje de primera clase en C# y Visual Basic. Las consultas se escriben para colecciones de objetos fuertemente tipadas, utilizando palabras clave del lenguaje y operadores con los que se está familiarizado. La ilustración siguiente muestra una consulta LINQ parcialmente completada en una base de datos SQL Server en C#, con comprobación de tipos completa y compatibilidad con IntelliSense.

Ahora bien PHPLinq nos ofrece la oportunidad de ahorrar código PHP para nuestros ciclos o bucles de lenguaje como un while o un foreach. Es difícil contarlo con palabras, voy a comentarlo mejor con un ejemplo.

Ejemplo:

Digamos que tenemos una matriz de cadenas y deseamos seleccionar sólo las cadenas cuya longitud es < 5. Con PHPLinq la manera de lograr esto sería el siguiente:

$nombres = array(“John”, “Peter”, “Joe”, “Patrick”, “Donald”, “Eric”);

$resultado = from(‘$nombre‘)->in($nombres)

->where(‘$nombre => strlen($nombre) < 5‘)

->select(‘$nombre‘);

Lo ves familiar a SQL verdad? No escribirá un bucle más de esta serie, el control de la cadena de longitud, y añadiendo una variable temporal todo solucionado. Se entiende fácilmente con el ejemplo.

De todos modos acá les muestro como es la arquitectura de capas de esta librería de datos muy potente para mostrar los forma mas sencilla y dinámica.