Crear producto usando flexygo como base de la solución

1. Instalar la plantilla de flexygo para VisualStudio 2017

https://marketplace.visualstudio.com/items?itemName=Flexygo.FlexygoTemplate


2. Definir el nombre del producto, para esta demo:

Nombre de producto:


3. Creamos un nuevo proyecto de tipo Flexygo Main Project utilizando el nombre definido para el producto y solución y marcamos el check “Crear directorio para la solución”



4. Agregaremos un nuevo proyecto de tipo Flexygo Custom DLL en la carpeta de la solución y lo llamaremos AhoraFlexy_Processes



5. Agregaremos un nuevo proyecto de tipo SQL Server > Flexygo Config Model BBDD en la carpeta de la solución y lo llamaremos AhoraFlexyBD



6. Agregaremos un nuevo proyecto de tipo SQL Server > Flexygo Data Model BBDD en la carpeta de la solución y lo llamaremos AhoraFlexy_DataBD



7. Iremos al administrador de paquetes NuGet del proyecto principal (botón derecho sobre el proyecto > Administrar paquetes nuget) y añadiremos los dos repositorios de flexygo haciendo click en la rueda de configuración de orígenes.


8. Haremos botón derecho sobre la solución y pulsaremos en restaurar paquetes nuget.

9. Actualizaremos el paquete nuget de flexygo a la última versión

Es un proceso que tarda unos minutos, nos daremos cuenta que ha finalizado porque carga el fichero de readme.html en pantalla.


10. Instalar CrystalReports para VisualStudio

Para solucionar las dependencias de cristal reports instalaremos la versión para desarrolladores CRforVS_13_0_22.exe


11. En el proyecto principal: quitaremos la referencia a flxCustomProcesses y en su lugar agregaremos la referencia a nuestro proyecto de procesos AhoraFlexy_Processes


12. En el proyecto AhoraFlexyBD quitaremos las dos referencias y las volveremos a agregar:

  • FlexygoDB desde el dacpac incluido en la carpeta db del proyecto principal con las siguiente configuración:


  • Y Master como referencia a la BBDD del sistema:

  • 13. Corregiremos las dependencias fallidas del proyecto por las incluidas en el la carpeta packages\Flexygo.x.x.xx.xx\lib\net46 de nuestra solución.



    14. Corregir el script de compilación de BBDD

    En las propiedades del proyecto AhoraFlexyBD, iremos al apartado Eventos de compilación y cambiaremos del comando establecido el nombre flxWeb por el nombre de nuestro producto:

    powershell -ExecutionPolicy Unrestricted -Command "& '$(SolutionDir)AhoraFlexy\db\mergeSSDTScripts.ps1' '$(SolutionDir)' '$(ProjectName)' '$(OutputPath)' '$(TargetPath)'"


    15. Definir nombre de ensamblado y espacio de nombres.

    En las propiedades de cada proyecto estableceremos el nombre correcto de ensamblado y de espacio de nombres poniéndole el mismo valor que el nombre del proyecto. Ej: flxDB_data debería ser AhoraFlexy_DataBD


    16. Publicación

    Publicaremos los dos proyectos de BBDD y modificaremos las cadenas de conexión en el web.config del proyecto principal para que apunten a estas BBDD.


    17. Ejecución

    Si todo ha funcionado correctamente, pulsaremos el botón en visual studio y se iniciará el proyecto con su depurador.


Crear paquete NuGet para el producto

1. Publicación AhoraFlexy

Publicaremos el proyecto principal en una carpeta publish dentro de cualquier directorio externo al proyecto. Ej: C:\Temp\Publish



2. Publicación AhoraFlexyBD

Publicaremos el proyecto de BBDD de configuración y copiaremos el dacpac resultante en la carpeta publish\db



3. Utilidades NuGet

Descargar el fichero nuget.zip y extraer al mismo nivel que la carpeta publish (según el ejemplo c:\Temp)



4. Fichero config.nuspec

Editar el fichero config.nuspec para adaptar los valores a nuestro proyecto.



5. Generar paquete NuGet

Abriremos una ventana de comandos y ejecutaremos la siguiente instrucción:

nuget pack config.nuspec



6. Instalación

Copiaremos el fichero nupkg a una carpeta junto al instalable del flexygo, este nos detectará que existe un paquete distinto a flexygo y nos preguntará si deseamos instalarlo en su lugar.
Tras ello seguiremos los pasos habituales y si todo ha funcionado correctamente tendremos nuestro producto instalado.



Crear un WebComponent propio

1. Typescript

Instalaremos TypeScript y lo configuraremos con las siguientes características:



2. Estrucutrar el proyecto

Crearemos dentro del proyecto una carpeta para albergar nuestros componentes del proyecto y dentro generaremos la estrucutra "controllers", "plugins" y "wc"



3. Crear Webcomponent

Añadiremos un fichero TS a nuestra carpeta de módulos con el siguiente código:



4. Ponemos las BBDD en modo producto e insertamos el tipo de módulo y el enlace con el fichero js

update origins set active=case originid when 1 then 1 else 0 end

Insert into Interfaces_Types_JS (InterfaceTypeId,TypeId,FilePath,Description,[Order],OriginId)
values (NEWID(),-1,'~/AhoraFlexy/wc/afl-carousel.js','Carousel WebComponent',999,1)

Insert into Modules_Types (TypeId,Descrip,IconName,WebComponent,OriginId)
values ('afl-carousel','Carousel','fighter-jet','afl-carousel',1)


5. Creamos un nuevo módulo y lo incluimos en la página de inicio.



6. Creamos una tabla para alojar los registros de las imágenes.

Añadimos un fichero Carousel.sql en la carpeta dbo/tables de nuestro modelo de datos

Añadimos los datos estáticos al fichero data.sql en la carpeta scripts/data de nuestro modelo de datos


7. Añadir un controlador de servidor

Para este caso crearemos un controller llamado CarouselController.vb con el siguiente código:


8. Añadir el plugin y referenciarlo en la BBDD de configuración

Descargar el fichero jR3DCarousel.min.js y dejarlo en la carpeta AhoraFlexy/plugins


9. Llamar al controller desde el Webcomponent

Añadimos a nuestro webcomponent la función loadData() y la invocamos desde el render()


10. Recargamos la caché y la página, el resultado debería ser este:

11. Generamos los scripts de configuración de producto:

Borramos todos los ficheros de la carpeta scripts/data de nuestra BBDD de configuración.

Si es la primera vez que trabajamos con esta BBDD activar el cmd_shell ejecutando el siguiente comando:

Ejecutamos el siguiente script en la BBDD para generar los datos estáticos:

Incluimos los nuevos ficheros que hayan aparecido, asignamos la opción de compilación de sus propiedades a Ninguno y los referenciamos en el fichero scripts/Script.PostDeployment.sql:






12. Publicamos la BBDD y nos aseguramos que todo sigue correcto.

Agregar un test unitario

1. Agregamos un nuevo proyecto AhoraFlexyUnitTest


2. Agregamos las referencias necesarias

System.web la agregaremos de los ensamblados y el resto del paquete nuget de flexygo



3. Añadiremos los datos de configuración necesarios

Si Visual Studio nos añade un espacio de nombres en el nombre de la cadena de conexión lo elimiaremos.



4. Añadiremos el código del test a la clase.


5. Abrimos el explorador de pruebas y ejecutamos las pruebas para comprobar que todo está OK.


Agregar un test de interfaz

1. Agregamos un nuevo proyecto AhoraFlexyInterfaceTest


2. Añadimos los paquetes NuGet Selenium.WebDriver y Selenium.Chrome.WebDriver


3. Añadiremos los datos de configuración necesarios

Ojo, revisad que exista un sitio en el IIS con la dirección establecida.



4. Añadiremos el código del test a la clase.

5. Abrimos el explorador de pruebas y ejecutamos las pruebas para comprobar que todo está OK.