{"id":230191,"date":"2022-11-30T19:04:00","date_gmt":"2022-11-30T16:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230191"},"modified":"2022-11-09T20:31:19","modified_gmt":"2022-11-09T17:31:19","slug":"una-forma-orientada-a-objetos-de-trabajar-con-modelos-y-aplicaciones-web","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/una-forma-orientada-a-objetos-de-trabajar-con-modelos-y-aplicaciones-web\/","title":{"rendered":"Una forma orientada a objetos de trabajar con modelos y aplicaciones web"},"content":{"rendered":"\n<p>Cuando hablamos del concepto de Modelos en la programaci\u00f3n orientada a objetos, normalmente nos referimos a una clase que es una representaci\u00f3n de los datos almacenados en la base de datos.<\/p>\n<p>Es decir, cuando la informaci\u00f3n se almacena en filas y columnas, completamos una clase, sus atributos, etc. con esa informaci\u00f3n para que podamos pasarla por la aplicaci\u00f3n, manipularla seg\u00fan sea necesario y luego posiblemente serializar la datos de vuelta a la base de datos.<\/p>\n<p>Pero en una aplicaci\u00f3n web, es justo suponer que es posible que el modelo deba ser posible para el front-end para ser utilizado. Es decir, imagine una solicitud de front-end que realiza una llamada al servidor, solicita un modelo (o una colecci\u00f3n de modelos) y luego los representa en el front-end.<\/p>\n<p>Aunque esta publicaci\u00f3n en particular no est\u00e1 orientada al c\u00f3digo, sigo pensando que vale la pena pensar en el proceso de traducir un modelo del servidor y luego representarlo en el front-end de la aplicaci\u00f3n web.<\/p>\n<h2>Trabajar con modelos y aplicaciones web<\/h2>\n<p>Imagine, por un momento, que su aplicaci\u00f3n tiene un modelo de empleado. Este modelo puede incluir una variedad de atributos, pero es seguro asumir que todos los empleados tendr\u00edan:<\/p>\n<ul>\n<li>un primer nombre,<\/li>\n<li>un apellido,<\/li>\n<li>una identificaci\u00f3n de empleado,<\/li>\n<li>y una direcci\u00f3n de correo electr\u00f3nico<\/li>\n<\/ul>\n<p>C\u00f3mo se almacena esta informaci\u00f3n en la base de datos no es del todo irrelevante, pero no es tan importante para esta discusi\u00f3n.<\/p>\n<p>Por ejemplo, tal vez haya un solo registro que contenga toda esta informaci\u00f3n almacenada en una cadena JSON. Por otro lado, quiz\u00e1s haya una tabla de empleados en la que cada fila represente a un empleado y luego cada columna represente un atributo.<\/p>\n<p>Los detalles de c\u00f3mo se traduce la informaci\u00f3n de la base de datos (o, m\u00e1s generalmente, del almac\u00e9n de datos) a la clase no son tan importantes.<\/p>\n<p>Por lo general, sin embargo, veremos algo como esto:<\/p>\n<ol>\n<li>Hay una clase que solicita la informaci\u00f3n,<\/li>\n<li>La informaci\u00f3n se pasa a una <strong>F\u00e1brica Simple<\/strong> ,<\/li>\n<li>La <strong>F\u00e1brica Simple<\/strong> instancia el <strong>Modelo<\/strong> ,<\/li>\n<li>Luego, el <strong>modelo<\/strong> se pasa a la clase de terceros que lo solicit\u00f3.<\/li>\n<\/ol>\n<p>Desde un punto de vista pict\u00f3rico, puede verlo as\u00ed:<\/p>\n<p>A partir de este punto, el <strong>Modelo<\/strong> se pasa por toda la aplicaci\u00f3n. Pero aqu\u00ed es donde entra en juego el punto inicial de esta publicaci\u00f3n: \u00bfC\u00f3mo pasamos una instancia del <strong>Modelo<\/strong> (o una colecci\u00f3n de <strong>Modelos<\/strong>) al front-end de la aplicaci\u00f3n?<\/p>\n<h2>El flujo de la aplicaci\u00f3n web<\/h2>\n<p>En aras de mantenerlo simple, supongamos que vamos a usar un solo modelo y luego, si reviso este concepto desde el punto de vista del c\u00f3digo, podemos profundizar un poco m\u00e1s.<\/p>\n<p>Sin embargo, el flujo general de una aplicaci\u00f3n web ser\u00e1 algo como esto:<\/p>\n<ol>\n<li>Un usuario desencadena una acci\u00f3n que solicita una instancia del modelo,<\/li>\n<li>El front-end hace una llamada a un punto final en el servidor,<\/li>\n<li>El servidor lee las solicitudes y verifica que sea v\u00e1lida,<\/li>\n<li>Luego env\u00eda una representaci\u00f3n del modelo al front-end.<\/li>\n<\/ol>\n<p>Otros desarrolladores pueden no estar de acuerdo (lo cual siempre es bienvenido y vale la pena discutirlo, en mi opini\u00f3n), pero descubr\u00ed que serializar la instancia del modelo en JSON hace que sea mucho m\u00e1s f\u00e1cil trabajar con \u00e9l en el front-end debido a la funcionalidad de JavaScript, ya que se relaciona con, ejem, JSON.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-163595-61e75570192c9.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-163595-61e75570192c9.png\" alt=\"Una forma orientada a objetos de trabajar con modelos y aplicaciones web\" ><\/a><\/p>\n<p>En otras palabras:<\/p>\n<ol>\n<li>tomamos el modelo,<\/li>\n<li>serializarlo en JSON,<\/li>\n<li>enviarlo a trav\u00e9s del cable,<\/li>\n<li>luego deserial\u00edcelo en el front-end en una representaci\u00f3n JavaScript de s\u00ed mismo.<\/li>\n<\/ol>\n<p>Esto nos permite manipularlo tanto como lo har\u00edamos en el lado del servidor; sin embargo, estamos tratando con un objeto JavaScript. Adem\u00e1s, tambi\u00e9n nos permite realizar ciertos cambios y enviar la informaci\u00f3n de vuelta al servidor en un estado diferente al que se envi\u00f3.<\/p>\n<p>En \u00faltima instancia, esto nos permite guardar los datos en la base de datos.<\/p>\n<h2>Una perspectiva de alto nivel<\/h2>\n<p>Y ese es el ciclo de vida de alto nivel de pasar informaci\u00f3n de una base de datos a un modelo al front-end y viceversa.<\/p>\n<p>A menudo, sin embargo, es \u00fatil ver esto en el c\u00f3digo, por lo que quiz\u00e1s en una publicaci\u00f3n futura proporcione una serie de art\u00edculos que pueden explicar c\u00f3mo hacer esto.<\/p>\n<p>Sin embargo, mientras tanto, no deber\u00eda ser dif\u00edcil traducir sus implementaciones en el flujo de trabajo Modelo-Serializaci\u00f3n-Solicitud-Env\u00edo como se describe en esta publicaci\u00f3n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comprender c\u00f3mo pensar en el proceso de trabajar con modelos del lado del servidor y aplicaciones web a trav\u00e9s de modelos, f\u00e1bricas y m\u00e1s.<\/p>\n","protected":false},"author":1,"featured_media":224094,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716,727],"tags":[1172],"class_list":["post-230191","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-javascript-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230191","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=230191"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/230191\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224094"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=230191"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=230191"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=230191"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}