4.28.2017

Configurando Visual Studio para trabajar con Logic Apps

Para trabajar el diseño de flujos de Logic Apps hay que configurar el ambiente de desarrollo instalando un par de componentes. En este post vamos a ver rápidamente como llevar a cabo esta configuración

Azure SDK

El primer componente a utilizar es el SDK de Azure. Este se puede obtener utilizando el Web Platform Installer. Este SDK tiene todos los componentes para programar diferentes funcionalidades de Azure, incluyendo Logic Apps.

image

Azure Logic Apps Tools for VS 2015

Seguidamente procedemos a instalar la extensión para desarrollar Logic Apps en Visual Studio. Para esto vamos al menú de herramientas y seleccionamos la opción extensiones y actualizaciones.

image

En esta ventana seleccionamos la ubicación de la extensión (1 – en línea), seguidamente digitamos logic apps en la caja de búsqueda (2), y por último instalamos la extensión que nos aparece en el cuadro principal como se ve en la siguiente figura.

image

Crear un proyecto para Logic Apps

Ahora procedemos a crear un proyecto de prueba para verificar que todo esté instalado correctamente, primero creamos un nuevo proyecto y seleccionamos la opción Cloud (1), seguidamente procedemos a seleccionar la plantilla Grupo de recursos de Azure (2) – habrá un post posterior detallando el tema de grupos de recurso de Azure o ARM.

image

En la siguiente ventana seleccionamos la plantilla de Logic Apps.

image

Una vez creado el proyecto en el vamos al explorador de soluciones y vemos los archivos json generados(1), los cuales son las plantillas de los flujos de logic apps.

image

Para poder ver el lienzo de diseño de Logic Apps, procedemos a abrir el archivo LogicApp.json con el diseñador tal y como se muestra en la siguiente figura.

image

Seguidamente el VS nos va  a pedir las credenciales de nuestra cuenta de Azure y la cuenta de recursos donde queremos ubicar

image

Luego se nos presenta la pantalla principal para escoger una plantilla a partir de la cual queremos crear nuestro flujo (esta pantalla es la página web del desarrollo en logic Apps)Nosotros escogemos la plantilla vacía(1).

image

Por último, nos aparece el lienzo de diseño con las opciones correspondientes y estamos listos para desarrollar.

image

4.11.2017

Creando un app con Ionic y VS Code–configurando el ambiente

Visual Studio Code es un IDE muy versátil que nos permite desarrollar utilizando muchas tecnologías, y en este caso lo vamos a utilizar para desarrollar un app móvil utilizando Ionic Framework. Ionic es un Framework que permite utilizar los conceptos del desarrollo web para crear aplicaciones para iOS, Android, Windows, etc.  En esta serie de post vamos a aprender como desarrollar estas aplicaciones usando Ionic + VS Code.

Instalando el ambiente

Para iniciar tenemos que instalar node.js en nuestra máquina ya que Ionic necesita de esta librería para poder funcionar. Para llevarlo vamos a la pagina de node.js y descargamos e instalamos la versión de node.js para nuestro sistema operativo, en mi caso, Windows de 64 bits.

image

Utilizamos LTS porque es la versión que es normalmente soportada por Ionic.

Ahora ya podemos utilizar el IDE VS Code para continuar con los siguientes pasos. Primeramente abrimos el terminal integrado de VS Code y procedemos a instalar Ionic utilizando el siguiente comando – utilizando npm de node.js

image

Ahora desde el mismo terminal procedemos a crear una aplicación utilizando el comando ionic start nombredelapp –-version de ionic.

image

Este comando nos crea un aplicativo llamado AccountMe en el folder donde estamos posicionados con una plantilla de “tabs” pre diseñada y lista para funcionar. Si abrimos este folder en VS Code podemos ver a estructura del proyecto generada.

image

El siguiente paso es probar nuestro aplicativo recién generado para comprobar que todo esta listo para iniciar el desarrollo utilizando el Ionic Serve Lab desde donde podemos ver nuestro aplicativo en una página Web y probarlo. El comando para lanzar el app es el siguiente:

image

Si todo salió correctamente veremos el aplicativo web funcionando con las plataformas seleccionadas en el combo de plataformas tal y como se ve en la siguiente figura.

image