DEV Community: apis3445

Herramientas y Frameworks interesantes de programación - Parte 4 - Diseño web

apis3445 — Tue, 07 Jan 2020 04:22:09 +0000

En esta cuarta parte hablaré acerca de software para crear tus prototipos o crear páginas web html/css/javascript sin programación del lado del servidor.

Software para diagramas

Si deseas hacer diagramas de tus aplicaciones puedes utilizar alguno de los siguientes:

Draw.io

Draw.io Es una herramienta en línea que te permite crear diferentes tipos de prototipos y diagramas. Se conecta con google drive, one drive, Dropbox para poder compartir tus diagramas.

Es gratuita y cuenta con una gran variedad de diagramas como diagramas de flujo, gráficas, organigramas, etc.

Gliffy

Gliffy Es otra herramienta web que te permite crear y compartir tus diagramas. Empezó como una aplicación gratuita ahora la edición personal cuesta $7.99 dólares al mes. También cuenta con una gran variedad de formas para crear tus diagramas.

Structurizr

Structurizr Es una herramienta que te permite crear los diagramas de como esta diseñada tu aplicación, basada en C4 Model el cual es una forma de hacer diagramas de como esta tu aplicación como si fuera un mapa de google en la vista de un ciudad donde explicas de forma general quien usa el sistema y los otros software con los que interactúa (diagrama de contexto), luego vas haciendo zoom y se va detallando más y ves las colonias (diagrama de contenedor) aquí explicas de forma general como esta compuesto tu sistema, por ejemplo esta compuesto de una app para celulares, una aplicación web y una base de datos, luego le das zoom al mapa y están las cuadras (diagrama de componentes) donde muestras de forma general como esta construido tu aplicación como su nombre lo dice los principales componentes, por ejemplo los controladores principales de tu aplicación y por último la vista de la calle (diagrama de código) el cual puede ser generado por el IDE en el cual estas desarrollando. Es una forma interesante de definir tu aplicación de lo general a lo particular para que sea entendido más fácilmente.

Software para prototipos

Si deseas crear prototipos de tu aplicación para mostrarlo a los usuarios antes de programas estas son algunas opciones:

Sketch2code

Sketch2code Es para prototipos sencillos, puedes subir una imagen con tu prototipo hecho en pluma y papel y te crea el código html necesario para tu prototipo. Solo funciona con prototipos bastante sencillos, mas por algo se empieza.

PowerPoint

Si instalas Visual Studio desde su versión Community en windows y tienes Office instalado se te agrega a Powerpoint una pestaña StoryBoard Shapes donde cuenta con formas para que crees tus prototipos.

Figma

Figma Es una aplicación web que te permite crear tus prototipos con algunas funciones como simular clicks y que te muestre otra pantalla y compartirlos de forma web, tiene una versión gratuita para un equipo de 2 personas y 3 proyectos y la versión de pago que empieza en 12 dólares por usuario.

Adobe XD

Adobe XD Es una aplicación de escritorio creada por Adobe la cual la puedes usar de forma gratuita en Windows/Mac con un espacio máximo de 2 GB. Al igual que figma te permite exportar tus prototipos para que sean más interactivos. Si estas acostumbrado a los productos de Adobe es una buena herramienta ya que cuenta con funciones para crear de forma fácil una galería de imágenes.

Software para crear tus páginas web

Si deseas crear tus páginas web pero no tienes conocimientos de programación y no quieres buscar y descargar plantillas html, puedes utilizar alguno de estos 2 productos:

Mobirise

Mobirise Aplicación disponible para Windows/Mac/Android, aunque me parece que es difícil diseñar en un celular.

Es un programa el cual cuenta con plantillas prediseñadas que son fáciles de configurar por personas mas enfocadas a diseño. La versión gratuita contiene pocas plantillas y componentes. Por lo general tiene un descuento donde te ofrecen mas plantillas y componentes a un precio de $99 dólares por año. Si tu página no es muy grande es una buena opción, una parte interesante es que ofrece plantillas AMP el cual es un proyecto creado por google el cual busca crear páginas muy rápidas que se vean bien en celulares.

Una de sus limitantes es que sí agregas muchas páginas se pone bastante lento y aunque tiene su editor html en la versión de pago, es difícil modificar los componentes preestablecidos con funciones que no han agregado aún. También no te permite organizar tus páginas en carpetas, mas si ya tienes una página más grande igual ya sería mejor utilizar un software mas avanzado.

Bootstrap Studio

Boostrap Studio Cuenta con un demo web para que lo pruebes antes de comprarlo, tiene un costo de única ocasión de $60 dólares, también cuenta con plantillas y algunos componentes como galerías de imágenes ya diseñados que solo es cuestión de configurarlo.

Vi el código generado por los 2 y me parece que esta bastante óptimo por lo mismo que son templates ya establecidos.

Si lo que buscas son sitios de templates, me parece que Creative tim cuenta con una gran variedad de templates html/angular/vue/react algunos gratuitos y otros de paga.

Diseño

Si lo que deseas es modificar imágenes

Pixlr

Editor web gratuito, que te permite agregar efectos o retoques a tus imágenes.

Adobe Photoshop Express

Adobe cuenta con una versión gratuita de su programa estrella como es el photoshop

Gimp

Aplicación de escritorio bastante conocida en Linux para editar tus imágenes es gratuita.

Inkscape

Si eres un usuario mas acostumbrado a Corel, Inkscape puede ser una buena opción gratuita.

Sistemas web

Tadabase

Tadabase Si lo que deseas es crear tus aplicaciones web sin tener tantos conocimientos de programación pero si por ejemplo de excel o programas como access donde con asistentes creas tu sistema tadabase es muy buena opción, empezó con una versión gratuita, mas ya tiene costo el cual empieza en $24 dólares al mes. Cuenta con muchas plantillas web ya creadas que puedes personalizar para por ejemplo tener tu sistema web CRM o de Administración de proyectos, etc.

Herramientas y Frameworks interesantes de programación - Parte 3 Pruebas Automáticas

apis3445 — Fri, 03 Jan 2020 23:37:47 +0000

En esta tercera parte hablaré de algunas herramientas para programar código que pruebe nuestras aplicaciones.

Si tu proyecto es mediano y esta en constante crecimiento recomiendo que programes código para revisar que tu código funciona correctamente. Este código se puede ejecutar cuando los programadores suben sus cambios o después de que liberas una nueva versión de tu sistema de forma automática.

Hay diferentes tipos de pruebas las unitarias que como su nombre lo dice prueban una solo función de tu sistema sin conexiones externas como bases de datos, archivos, otros sistemas, servicios, etc.

Las pruebas de integración que prueban tu código ya integrado con bases de datos, otros sistemas, archivos, etc.

Las pruebas de usuario que simulan el comportamiento de los usuarios.

Pruebas unitarias con .NET Core

Si estas utilizando .Net Core con EF Core, puedes utilizar una base de datos en memoria con datos que creas manualmente para probar las reglas de negocio.

Por ejemplo

var options = new DbContextOptionsBuilder<CaducaContext>()
                 .ConfigureWarnings(x => x.Ignore
                  (InMemoryEventId.TransactionIgnoredWarning))
                  .UseInMemoryDatabase(databaseName: "TestCaduca").Options;
var context = new CaducaContext(options);

.Net cuenta con 3 frameworks para testing:

MSTest: Framework desarrollado por Microsoft no necesitas agregar nada adicional al Visual Studio
xUnit: Es un framework mas nuevo, gratis y open source que esta ganando popularidad con algunos conceptos como theory que te permite crear tus pruebas con parámetros y te permite priorizar los casos de forma más fácil. Necesita un paquete adicional para poder correr las pruebas.
nUnit: También es gratis, open source y necesita un paquete adicional para correr las pruebas. Es un framework el cual ya cuenta con muchos años y se integra bien con Selenium que te ayuda a probar tus aplicaciones web como usuario final.

En lo personal he utilizado los 3, solo cambia un poco la sintaxis entre uno y otro.

Specflow para documentar tus pruebas

Para las pruebas de integración o de usuario final que tienen pasos mas detallados y mas largos puedes utilizar Specflow el cual te permite escribir código como si fueran casos de prueba para los usuarios por ejemplo:

Escenario: Sumar 2 números
Dado que el primer número es 3
Y el segundo número es 4
Cuando realizo la suma de los 2 números
El resultado debe ser 7

Con una extensión que se agrega a Visual Studio te genera un método por cada uno de los pasos que tu escribes, y a veces te detecta los números del ejemplo como variables para los métodos, es fácil cambiarlo por parámetros en caso de que no los detecte automáticamente.

Cuenta con opciones para obtener los datos mediante una tabla.

Solo esta disponible para Visual Studio para windows.

Se integra con Azure Dev Ops el cual es un sistema de administración de proyectos gratuito si tienes menos de 5 programadores, te permite correr tus pruebas automáticas.

Visual Studio te permite ejecutar las pruebas de una forma fácil y si tienes la versión profesional te permite probar el código mientras lo vas tecleando. Para Visual Studio para Mac a mi parecer aún le falta ya que no muestra una información tan detallada o mas visual.

Postman

Postman en un programa open source multiplataforma que te permite probar tus Servicios REST y SOAP. Cuenta con opciones para agregar escenarios de prueba automáticos y que se ejecuten por ejemplo todos los días a las 10 am. También te genera páginas de documentación de tus Servicios.

Pruebas de usuario final

Hay diversos frameworks y herramientas para realizar las pruebas de usuario

Selenium

Es uno de los que tiene mas tiempo y es de los mas conocidos, puedes agregar plugins a chrome o firefox y con una opción grabas los pasos que realizas en tu pantalla y puedes agregar opciones para comprobar los resultados de lo que vas grabando como por ejemplo que te muestre la página de inicio de tu sistema después del login.

También puedes exportar los pasos de tus pruebas a código c# o java, entre otros. Con el código puedes realizar las pruebas en diferentes navegadores. También se puede integrar a azure dev ops para probar tu sistema al terminar de subir las nuevas versiones de tu sistema.

Cypres

Es un framework mas moderno que funciona mas con javascript y también te permite probar con varios navegadores, y te graba un video con los pasos que se realizaron. Me parece mucho más sencillo que selenium.

Puedes ver el video en inglés de la presentación en el evento de ngconf de angular del 2019 el cual esta muy interesante.

Jest

Este no lo he utilizado pero esta ganando mucha popularidad, el cual según su página es utilizado por empresas como Facebook, twitter, spotify, por lo cual valdría la pena darle una revisada.

Frameworks de pago

Existen algunos otros como los desarrollados por DevExpress (Test Café), o Telerik Test Studio los cuales tienen costo, mas me parece que con Cypress y Jest son muy buenas alternativas.

Aplicaciones móviles

Xamarin.UITest

Para aplicaciones móbiles y xamarin esta Xamarin.UITest. En el cual vas programando las acciones que haría un usuario.

Visual Studio App Center

Microsoft también cuenta con Visual Studio app center el cual es de pago y te permite probar tus aplicaciones en dispositivos reales, y puedes distribuir las versiones de tus app a testers o usuarios que deseen probar las versiones beta de tus productos.

TestFlight

Para iOS existe la aplicación TestFlight el cual te permite agregar también usuarios beta para que prueben tus aplicaciones antes de publicarlos en la AppStore.

Puedes ver mi curso sobre .net core y Servicios REST mas a fondo sobre pruebas unitarias:

Servicios REST con ASP.NET Core y Entity Framework Core - Pruebas unitarias

Si deseas que escriba un artículo mas detallado sobre pruebas automáticas y alguna de las herramientas mencionadas puedes solicitarla agregando en un comentario el tema que desees que explique de forma individual

Herramientas y Frameworks interesantes de programación - Parte 2 Software Ecommerce

apis3445 — Tue, 31 Dec 2019 03:40:49 +0000

En esta segunda parte mencionaré algunos sistemas web de tiendas en línea:

Nopcommerce

Es Open Source y es gratuito, el código esta disponible en GitHub. Fue creado en .Net en 2008, en 2017 se cambio a .Net Core, es de los mas populares para .Net.

Esta disponible en varios idiomas y aunque no tiene un diseño demasiado vistoso cuenta con todo lo necesario y es responsivo por lo cual se adapta ya sea un celular, tablet o laptop.

Como ya tiene varios años incluye varios funciones como pagos en línea, envíos de productos. Cuenta con extensiones para agregar más funciones algunas son gratuitas y otras tienen costo.

Puedes visitar el Demo

Me parece muy completo y lo mejor es gratis.

SimplCommerce

Fue presentado en el evento dotnetconf del 2018, creado con .NET Core, se enseña como puedes separar tus aplicaciones de .NET Core en varios proyectos y luego tener un proyecto principal donde vas incluyendo los módulos que desees. El código fuente también esta en GitHub.

Puedes ver aquí la presentación en inglés Modular Web Applications with ASP.NET Core

Puedes ver el DEMO

Aunque es bastante sencillo esta interesante la forma en que divide el código en varios proyectos y la forma en que se unen.

WooCommerce

Me parece que es la tienda en línea más popular para Wordpress. Aunque bastante sencillo en funciones y diseño al menos con las versiones gratuitas cumple con las funciones básicas.

Puedes ver mas info aquí

Me parece que la versión gratuita esta limitada en diseño y deberás ya sea comprar un buen diseño o crearlo tú mismo.

Avored

Me parece que para PHP utilizaría alguno de los laravel, en lugar de los tradicionales de PHP como Magento, OsCommerce.

Avored se me hace interesante aunque aún no es tan conocido. Puedes consultar su Github

Puedes ver el demo https://demo.avored.com

Shopify

Si lo que deseas es tener una tienda en línea sin el código puedes probar con Shopify el cual es bastante popular

Al ser un producto genérico no es tan fácil adaptarlo a tu gusto, el soporte es bueno.

Puedes obtener mas informes aquí

El precio inicia en $29 dólares al mes.

Kichink

Otra opción similar a Shopify pero si cuenta con una opción gratuita mas cobra una comisión del 9.5%

Puedes ver mas información aquí

Mi recomendación es que aunque no seas programador puedes probar algunas de las versiones gratuitas ya que no son complicadas de instalar o utilizar y cuentan con soporte para dudas en GitHub, o al menos nopcommerce cuenta con opciones de pago si no deseas batallar.

Me parece que una parte importante de una tienda en línea es una adecuada promoción, el que comprar sea muy fácil permitiendo o no el registro de los usuarios, un buen diseño y fotos de tus productos. Pero sobre todo el tener buenos productos y precios.

Si deseas que haga un artículo más detallado de alguno de estos sistemas deja en un comentario con el nombre de cual deseas a excepción de avored y kichink que un cliente si lo utilizo, si utilice los demás.

También si deseas que incluya mi review de otros sistemas/herramientas puedes comentarlo

Actualizando de .Net Core 2.2 a 3.1

apis3445 — Mon, 23 Dec 2019 04:33:17 +0000

He trabajado varias veces con .Net desde el framework 3.5, y aunque .Net Core cambio drásticamente en web se ha cambiado de WebForms a MVC y a .Net Core Razor, Blazor, en escritorio de Winforms, WPF, UWP, creo había actualizado sin problemas entre versiones.

De .Net Core 1.1 al 2 no cambio tanto, mas del 2.2 al 3.0 me parece hay varios cambios y algunas librerías como Swagger, OData, la de MySQL tanto la de Oracle como la de Pomelo, para poder actualizar mi proyecto tuve que instalar Packages que están en versión beta aún, se me hace raro de OData ya que el paquete es de Microsoft y hasta hace apenas unos días logre hacer funcionar el proyecto con una nueva versión beta.

Aquí agrego los cambios que tuve que realizar:

Instale los siguientes paquetes en modo beta/release

Install-Package Microsoft.AspNetCore.OData -Version 7.3.0-beta
Install-Package Swashbuckle.AspNetCore -Version 5.0.0-rc5

Actualmente ya salieron las versiones finales de los paquetes que son compatibles

Tuve que cambiar el archivo csproject para remover el siguiente código

<PackageReference Include="Microsoft.AspNetCore.App">
       <PrivateAssets Condition="'%(PackageReference.Version)' == ''">all</PrivateAssets>
       <Publish Condition="'%(PackageReference.Version)' == ''">true</Publish>
</PackageReference>

Ahora se separa para que si solo usas Servicios REST utilices solo la parte de Controller y no todo el mvc y para regresar los Json con la primer letra en mayúscula, tuve que cambiar CamelCasePropertyNamesContractResolver() por JsonOptions.JsonSerializerOptions.PropertyNamingPolicy = null

//services.AddMvc()
// .AddJsonOptions(JsonOptions => JsonOptions.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver())
services.AddControllers()
.SetCompatibilityVersion(CompatibilityVersion.Version_3_0)
                 .AddJsonOptions(JsonOptions =>
                     JsonOptions.JsonSerializerOptions.PropertyNamingPolicy = null)

También se cambio la autenticación y esta separado en 2

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

Otro de los cambios es que ya crearon su propia librería para trabajar con json System.Text.Json por lo tanto ya no usan mas Newtonsoft

Como mis servicios están documentados en Swagger aparte de instalar la versión rc4 y luego la rc5, en lugar de usar Info se utiliza ahora OpenApiInfo y agregar el import Microsoft.OpenApi.Models, como utilizo OData tuve que cambiar el código para habilitar OData como Operation y ** NonBodyParameter** por OpenApiParameter

using Microsoft.OpenApi.Models;
// new Info()  Anterior
new OpenApiInfo()
//public void Apply(Operation operation, OperationFilterContext context)
public void Apply(OpenApiOperation operation, OperationFilterContext context)
//foreach (var parameter in operation.Parameters.OfType<NonBodyParameter>())
foreach (var parameter in operation.Parameters.OfType<OpenApiParameter>())

Como el proyecto incluye pruebas automáticas según el Environment utilizo un base de datos en memoria o la de SQL, cambiando ** IHostingEnvironment** por IWebHostEnvironment agregando el siguiente namespace Microsoft.Extensions.Hosting

//IHostingEnvironment _hostingEnvironment;
IWebHostEnvironment _hostingEnvironment;

Para GraphQL lo único que tuve que realizar fue agregar una configuración para permitir funciones asincronas

services.Configure<KestrelServerOptions>(options =>
             {
                 options.AllowSynchronousIO = true;
             });

Lo más tardado fue esperar por las versiones beta, sobre todo la de OData que por lo general tarda mucho en estar lista, junto con la de MySQL que la versión de Oracle tarda demasiado y la de Pomelo tarda menos y suele tener menos bugs que la de Oracle.

Pensé que el que podría fallar más seria GraphQL ya que no es muy común para .net, es más común con NodeJS, mas con GraphQL no tuve en realidad problemas.

Puedes ver la lista completa de breaking changes

https://docs.microsoft.com/en-us/dotnet/core/compatibility/2.2-3.1

Herramientas y Frameworks interesantes de programación - Parte 1 ORM

apis3445 — Mon, 23 Dec 2019 00:04:23 +0000

Este es mi primer post en esta página y voy a compartir algunos frameworks y herramientas que he utilizado o visto para programar. Puedes preguntarme acerca de .Net, pruebas automáticas, bases de datos. Puedo escribir una entrada acerca de algún tema de tu interés. Lo dividiré por categorías:

Contenido

Frameworks ORM para .NET
- Softluent
- XPO
- Entity Developer
ECommerce
- Nopcommerce
- SimplCommerce
- WooCommerce
- Avored
- Shopify
- Kichink
Pruebas automáticas
- Pruebas unitarias
- Specflow
- Postman
- Selenium
- Cypress
- Jest
- Aplicaciones móviles
  - Xamarin.UITest
  - Visual Studio App Center
  - TestFlight

Frameworks ORM para .NET

Antes de utilizar EF Core, revise algunos ORM (Object-Relational Mapper), los cuales te ayudan a conectarte o crear tus bases de datos a partir de un objeto o viceversa.

Softluent

Uno que me pareció interesante fue Softfluent Code Modeler el cual se instala en Visual Studio y al parecer es desarrollado en 2005 por veteranos de Microsoft, es muy parecido a lo que es Entity Framework.

Creas tus tablas de forma Visual y te genera los scripts para crear/modificar tu base de datos en SQL Server, MySQL y PostgreSQL, para poder hacer los selects, inserts o updates te crea stored procedures. También te crea el código en C# o Visual Basic para acceder a tus tablas.

Además te permite escribir tus propios métodos con código CFQL (CodeFluent Query Language) el cual es parecido a SQL. Internamente se transforma a SQL Server, MySQL o PostgreSQL. Por ejemplo:

LOAD(Title, Position)
WHERE Title = @Title AND Position = @Position

Esta consulta te permite seleccionar el título y posición recibidos como parámetros en la tabla en la cual agregas la función.

Cuando yo lo utilice daban códigos gratis por un año en la revista MSDN y luego tuvieron una versión gratuita que solo te generaba código para SQL, actualmente ya cambio de nombre a Code Modeler y la licencia cuesta $699 dólares por programador al año.

XPO

Es la opción de Devexpress la cual es una compañía que ofrece componentes para .NET, tiene poco tiempo que cambiaron la suscripción y ahora es gratuita. Lo único que venden es el soporte el cual tiene un costo de $399.99 dólares al año.

Cuenta también con la opción de crear tus tablas de forma visual, y en sus blog indican que según sus benchmarks tiene mejor rendimiento que EF y EF Core. Debido a que no tiene tanto tiempo la versión gratuita no he tenido tiempo de descargarlo y realizar algunas pruebas.

Mi experiencia con los componentes de .Net tanto para Winforms, WPF, Devextreme es que tienen buena calidad, buena documentación, solo el soporte me parece que a veces no es tan bueno, ya que a mi parecer a veces le faltan ejemplos complejos y es difícil que te den ejemplos de código, el tiempo de respuesta de bugs es regular. También creo que a veces algunos componentes como el generador de Reportes están un poco lentos si no cuentas con una computadora con un buen procesador y memoria. Creo vale la pena darle una revisada.

Si deseas que haga una revisión mas a fondo puedes pedirla como comentario

Entity Developer

Creado por Devart, ofrece un editor visual para EF Core, el cual no ha sido incluid por parte de Microsoft, en EF Core tu tienes que crear tus clases, el DBContext y en base a eso te genera la base de datos, mas no te genera el diagrama visual de tu base de datos.

Incluye una versión gratuita Express y ediciones con costo de $99.95 hasta $299.95 dólares.

Este producto tampoco lo he probado, solo he probado el DB Forge for MySQL la versión gratuita, el cual me parece bastante bueno aunque algo limitado para backups.

Como verás hay varios ORM además del Entity Framework incluido en .Net. EF Core me ha parecido bien y funciona bien en Visual Studio for Mac, por lo cual no he tenido mucha oportunidad de probar los demás.

Cree un curso donde explico mas a fondo EF Core y Servicios REST, pruebas automáticas, instalación, Azure Dev Ops en EF Core y Servicios REST