{"id":332,"date":"2022-04-28T17:32:37","date_gmt":"2022-04-28T17:32:37","guid":{"rendered":"https:\/\/datiasesoria.com\/blog\/?p=332"},"modified":"2022-06-13T20:15:01","modified_gmt":"2022-06-13T20:15:01","slug":"crea-interfaces-hibridas-de-usuario-moviles-y-de-escritorio-con-la-tecnologia-blazor","status":"publish","type":"post","link":"https:\/\/datiasesoria.com\/blog\/2022\/04\/28\/crea-interfaces-hibridas-de-usuario-moviles-y-de-escritorio-con-la-tecnologia-blazor\/","title":{"rendered":"BLAZOR crea interfaces H\u00edbridas de usuario M\u00f3viles y de Escritorio."},"content":{"rendered":"\n

.NET y Blazor acercan los mundos del desarrollo web y las aplicaciones m\u00f3viles<\/strong><\/p>\n\n\n\n

\"windows-tecnologias\"<\/figure>\n\n\n\n

Microsoft se ha comprometido y va en serio con el mundo multiplataforma, despu\u00e9s de d\u00e9cadas de generar tecnolog\u00edas de uso exclusivo para Windows, por fin, se ha abierto al mundo de los sistemas operativos, y es quiz\u00e1s uno de los mayores cambios en su plataforma de desarrollo durante los \u00faltimos a\u00f1os. Desde que compr\u00f3 a Xamarin inici\u00f3 un cambio radical, que poco a poco nos regres\u00f3 al entorno de desarrollo por Visual Studio, y hoy en d\u00eda incluye GitHub en un extremo y .NET 6 multiplataforma en el otro, con aplicaciones que se ejecutan a escala en sistemas Kubernets en la nube y en dispositivos m\u00f3viles. Recientemente analizando el desarrollo del sucesor de las herramientas de interfaz de usuario de formularios multiplataforma de Xamarin: APP UI Multiplatform .NET o MAUI. Relacionado con eso, BLAZOR es otra tecnolog\u00eda de interfaz de usuario de Microsoft dise\u00f1ada para llevar esas aplicaciones web a escala a sus dispositivos y a su escritorio. Sobre la base del marco flexible de interfaz de usuario web de Blazor, Blazor Hybrid combina las dos tecnolog\u00edas para ofrecerle una forma de crear interfaces de usuario que abarquen m\u00e1s que el escritorio y los dispositivos m\u00f3viles, agregando soporte para la web con controles representados de forma nativa en todas las plataformas.<\/p>\n\n\n\n

La web moderna y el desarrollo moderno van de la mano<\/strong>.<\/p>\n\n\n\n

Hay mucho que me gusta de este enfoque de las interfaces de usuario. Por un lado, se basa en lo que considero que es la lecci\u00f3n clave de la \u00faltima d\u00e9cada en la web: primero debemos dise\u00f1ar nuestras API. Eso convierte a la interfaz de usuario en otro cliente de API, que utiliza REST y JSON para comunicarse con los microservicios. Entonces podemos tener muchas interfaces de usuario diferentes trabajando en un mismo back-end, todas usando las mismas llamadas y teniendo el mismo impacto en nuestro servicio. Simplifica el dise\u00f1o y nos permite escalar arquitecturas de aplicaciones de manera predecible. Al mismo tiempo, un conjunto fijo de API significa que los propietarios de servicios pueden actualizar y actualizar su c\u00f3digo sin afectar a los clientes. Ese enfoque condujo al desarrollo de conceptos como Jamstack(Jamstack combina filosof\u00edas de desarrollo modernas inspiradas en devops con p\u00e1ginas HTML est\u00e1ticas de la vieja escuela para permitir a los desarrolladores crear sitios web r\u00e1pidos m\u00e1s r\u00e1pido), que utiliza JavaScript, API y Markup para ofrecer sitios web din\u00e1micos y est\u00e1ticos, lo que simplifica el dise\u00f1o y la publicaci\u00f3n de aplicaciones web. Blazor Hybrid toma esos conceptos y los lleva a su c\u00f3digo mientras omite el navegador e incrusta una superficie de representaci\u00f3n junto con el resto de su aplicaci\u00f3n. Puede trabajar sin conexi\u00f3n cuando sea necesario, un modelo que se vuelve a\u00fan m\u00e1s interesante cuando se trabaja con entornos bloqueados como la plataforma educativa Windows 11 SE.<\/p>\n\n\n\n

Blazor Hybrid en MAUI<\/em><\/strong><\/em><\/strong><\/p>\n\n\n\n

El soporte de MAUI para Blazor Hybrid es una caracter\u00edstica interesante de la nueva plataforma; lo extiende m\u00e1s all\u00e1 de los clientes m\u00f3viles y de escritorio tradicionales para que pueda compartir elementos de la experiencia del usuario con aplicaciones web. Desde el lado web, existe la opci\u00f3n de que las aplicaciones ASP.NET Core compartan c\u00f3digo con otros proyectos, lo que reduce la carga de trabajo del desarrollador y le permite desarrollar una vez y luego distribuirlo en todos sus entornos de destino. Aunque es poco probable que los proyectos de ASP.NET Core sean parte del mismo proyecto que el c\u00f3digo MAUI, a\u00fan pueden ser parte de la misma soluci\u00f3n y el c\u00f3digo se puede copiar entre proyectos seg\u00fan sea necesario. Blazor Hybrid se encuentra actualmente en versi\u00f3n preliminar, pero vale la pena explorarlo si desea ampliar el alcance de las aplicaciones web ASP.NET Core existentes. El primer paso obvio es crear una aplicaci\u00f3n MAUI para hospedar su c\u00f3digo, aunque no est\u00e1 limitado a un enfoque de interfaz de usuario de .NET, especialmente si est\u00e1 enfocado en entregar versiones de escritorio de aplicaciones web empresariales existentes a clientes de Windows.<\/p>\n\n\n\n

Crear una aplicaci\u00f3n Blazor Hybrid MAUI es como crear cualquier otra aplicaci\u00f3n MAUI. El control WebView2 basado en Chromium aloja su c\u00f3digo en Windows. Las plataformas que no son de Windows usan sus propios hosts de aplicaciones web para el contenido de Blazor. En la pr\u00e1ctica, esto no deber\u00eda tener ning\u00fan problema, ya que Android usa un navegador Chromium, y aunque afari alojado de iOS puede no tener todas las funciones de Chrome, deber\u00eda ser compatible con los componentes de Blazor, habr\u00e1 que realizar pruebas de confirmaci\u00f3n.<\/p>\n\n\n\n

Si configur\u00f3 MAUI correctamente en Visual Studio 2022 Preview, deber\u00eda encontrar la opci\u00f3n para crear una aplicaci\u00f3n .NET MAUI Blazor. La creaci\u00f3n de esta soluci\u00f3n configura un nuevo proyecto de C# con las dependencias de plataforma necesarias para todos sus entornos de destino. El proyecto configura una interfaz de usuario b\u00e1sica de Blazor que est\u00e1 lista para ejecutarse y, por supuesto, lista para ser modificada.<\/p>\n\n\n\n

Teniendo mucho c\u00f3digo preconstruido nos ayuda, y muestra c\u00f3mo hospedar un BlazorWebView en el XAML de su aplicaci\u00f3n y c\u00f3mo usar el contenido de Razor en HTML hospedado, sin tanta codificaci\u00f3n por parte del desarrollador o del equipo desarrollador. Como la mayor parte de la l\u00f3gica de la interfaz de usuario de su aplicaci\u00f3n estar\u00e1 en el c\u00f3digo ASP.NET Core Razor alojado en WebView junto con cualquier componente de BLAZOR, no hay mucho m\u00e1s que hacer antes de comenzar a escribir su interfaz de usuario web.<\/p>\n\n\n\n

El valor aqu\u00ed no es tanto en MAUI como en la ejecuci\u00f3n del c\u00f3digo Blazor del lado del cliente. MAUI proporciona un host multiplataforma conveniente para su c\u00f3digo Razor, y si bien sus habilidades de C# funcionar\u00e1n bien en ambos lados de la divisi\u00f3n de WebView, lo m\u00e1s importante es crear una p\u00e1gina Blazor receptiva que pueda escalar entre tel\u00e9fonos y PC de escritorio.<\/p>\n\n\n\n

Blazor Hybrid en Windows .NET<\/strong><\/p>\n\n\n\n

No est\u00e1 limitado a MAUI para Blazor Hybrid. Tambi\u00e9n pretende ser una carga de trabajo compatible con las herramientas est\u00e1ndar de la interfaz de usuario de Windows .NET para que pueda usarla dentro de marcos familiares como Windows Presentation Foundation o Windows Forms. Como est\u00e1 en versi\u00f3n preliminar, deber\u00e1 ejecutar una versi\u00f3n preliminar de Visual Studio 2022 con las herramientas de desarrollo de escritorio de .NET instaladas. Una vez que haya configurado sus herramientas, cree una aplicaci\u00f3n WPF est\u00e1ndar usando .NET 6 o posterior. (Puede usar la versi\u00f3n preliminar actual de .NET 7 si desea estar a la vanguardia del desarrollo de .NET). A continuaci\u00f3n, instale el administrador de paquetes WebView WPF NuGet para hospedar su c\u00f3digo Blazor. Una vez que est\u00e9 instalado, puede comenzar a programar con el SDK de Razor para crear los elementos Blazor de la interfaz de usuario de su aplicaci\u00f3n. Esto ahora le permite usar componentes de Blazor en su aplicaci\u00f3n, usando las mismas t\u00e9cnicas que usamos para agregar HTML y JavaScript a las interfaces de usuario de WebView. Una vez que tenga el marco de una aplicaci\u00f3n web en su lugar, puede comenzar a usar la sintaxis Razor de Blazor para agregar componentes y c\u00f3digo en l\u00ednea en su HTML. Si est\u00e1 familiarizado con la antigua sintaxis anterior a .NET ASP, entonces Razor le resultar\u00e1 muy familiar, usando C# en l\u00ednea en su HTML junto con las directivas de Razor para agregar funcionalidad a los botones y cargar componentes de visualizaci\u00f3n que se controlan desde su c\u00f3digo C#. No olvide editar el XAML de su vista para configurar un BlazorWebView que use la URL local de su contenido como p\u00e1gina de inicio. Entonces deber\u00eda estar listo para compilar y ejecutar cualquier c\u00f3digo Blazor, us\u00e1ndolo para conectarse a servicios back-end o trabajar con contenido local, incorporando aplicaciones web en su c\u00f3digo .NET.<\/p>\n\n\n\n

\u201cBlazor <\/strong>es un framework de c\u00f3digo abierto que incluye herramientas para crear aplicaciones web usando C#, HTML y CSS.1\u200b Esta es una alternativa a otras soluciones como Angular, React o Vue.js, entre otras. Una de sus principales caracter\u00edsticas es la utilizaci\u00f3n del lenguaje C#, dejando en segundo nivel a JavaScript, tanto para el c\u00f3digo del lado del cliente como para el c\u00f3digo del lado del servidor. Blazor forma parte del proyecto ASP.NET, el cual provee herramientas para desarrollar sitios y aplicaciones web (adem\u00e1s de que tambi\u00e9n fue creado por Microsoft).<\/p>\n\n\n\n

A pesar de la confusi\u00f3n que podr\u00edan generar las descripciones de ASP.NET y Blazor, este \u00faltimo se enfoca en la creaci\u00f3n de aplicaciones web con el objetivo de usar el lenguaje de programaci\u00f3n C# en vez del lenguaje JavaScript, com\u00fanmente usado en este tipo de aplicaciones.<\/p>\n\n\n\n

Blazor, al igual que ASP.NET y ASP.NET Core, es uno de los frameworks web m\u00e1s usados.\u201d Wikipedia<\/p>\n\n\n\n

Conclusi\u00f3n<\/strong><\/p>\n\n\n\n

Esta tecnolog\u00eda por parte de Microsoft viene a generar c\u00f3digo embebido, el cual ya es conocido, pero permitiendo no ser exlusivo de una plataforma que se ejecute s\u00f3lo en pocos ambientes operativos, sino que viene a fortalecer el desarrollo ya conocido y poder ejecutar en diferentes ambientes ya sea tanto de escritorio como dispositivos m\u00f3viles.<\/p>\n\n\n\n

Los ambientes multiplataforma est\u00e1n teniendo cada vez m\u00e1s y m\u00e1s adopci\u00f3n entre las casas desarrolladoras por muchos factores entre los que destacan los costos, el tiempo y la f\u00e1cil actualizaci\u00f3n y\/o migraci\u00f3n de los sistemas desarrollados as\u00ed como su mantenimiento, permitiendo tener software de utilidad corriendo en los dispositivos nuevos sin conocer a cada uno por separado para poder implementar y\/o generar soluciones de software tanto en la industria como soluciones particulares.<\/p>\n\n\n\n

\"Logo
DA Desarrollo y Asesor\u00eda<\/figcaption><\/figure>\n\n\n\n

DA Desarrollo y Asesor\u00eda | Tecnolog\u00edas a tu servicio
Marketing Digital, Programaci\u00f3n Web, Programaci\u00f3n de Sistemas a Medida, Sistemas y Herramientas para Recursos Humanos, Implementaci\u00f3n de Sistemas de Contabilidad, Facturaci\u00f3n, N\u00f3minas, Almacenes, Puntos de Venta, ECommerce, WordPress, Casa de Software, Automatizaci\u00f3n de Procesos, Asesor Fiscal, Contabilidad Electr\u00f3nica,Automatizac\u00f3n basada en Mapeo de Procesos con modelo ISO, Cursos de Capacitaci\u00f3n Excel, Word, Power Point, Gesti\u00f3n y Administraci\u00f3n del Tiempo, Inteligencia Emocional.<\/p>\n\n\n\n

Nos encontramos en Le\u00f3n Guanajuato, y damos asesor\u00edas en todo el Baj\u00edo y Corredor Industrial<\/p>\n\n\n\n

Escrito por Jos\u00e9 Hugo Larios<\/p>\n","protected":false},"excerpt":{"rendered":"

Las tecnolog\u00edas h\u00edbridas y\/o multiplataforma cobran m\u00e1s gusto entre el gremio de programadores y desarrolladores, BLAZOR es una soluci\u00f3n por parte de Microsoft <\/p>\n","protected":false},"author":2,"featured_media":333,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32,33],"tags":[34,35,37,36],"class_list":["post-332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion","category-desarrollo-web","tag-desarrollo-web","tag-programacion","tag-programacion-escritorio","tag-programacion-movil"],"_links":{"self":[{"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/posts\/332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/comments?post=332"}],"version-history":[{"count":3,"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/posts\/332\/revisions"}],"predecessor-version":[{"id":337,"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/posts\/332\/revisions\/337"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/media\/333"}],"wp:attachment":[{"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/media?parent=332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/categories?post=332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datiasesoria.com\/blog\/wp-json\/wp\/v2\/tags?post=332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}