{"id":230585,"date":"2022-11-30T19:09:00","date_gmt":"2022-11-30T16:09:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230585"},"modified":"2022-11-09T23:05:16","modified_gmt":"2022-11-09T20:05:16","slug":"uma-maneira-orientada-a-objetos-de-trabalhar-com-modelos-e-aplicativos-da-web","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/uma-maneira-orientada-a-objetos-de-trabalhar-com-modelos-e-aplicativos-da-web\/","title":{"rendered":"Uma maneira orientada a objetos de trabalhar com modelos e aplicativos da Web"},"content":{"rendered":"\n<p>Quando falamos sobre o conceito de Modelos em programa\u00e7\u00e3o orientada a objetos, geralmente estamos nos referindo a uma classe que \u00e9 uma representa\u00e7\u00e3o dos dados armazenados no banco de dados.<\/p>\n<p>Ou seja, quando as informa\u00e7\u00f5es s\u00e3o armazenadas em linhas e colunas, preenchemos uma classe, seus atributos e assim por diante com essas informa\u00e7\u00f5es para que possamos pass\u00e1-las pelo aplicativo, manipul\u00e1-las conforme necess\u00e1rio e, possivelmente, serializar a dados de volta ao banco de dados.<\/p>\n<p>Mas em um aplicativo da Web, \u00e9 justo supor que o modelo pode precisar ser poss\u00edvel para o front-end ser usado. Ou seja, imagine uma solicita\u00e7\u00e3o de front-end fazendo uma chamada para o servidor, solicitando um modelo (ou uma cole\u00e7\u00e3o de modelos) e, em seguida, renderizando-os no front-end.<\/p>\n<p>Embora este post em particular n\u00e3o seja orientado a c\u00f3digo, ainda acho que vale a pena pensar no processo de traduzir um modelo do servidor e renderiz\u00e1-lo no front-end do aplicativo da web.<\/p>\n<h2>Trabalhando com modelos e aplicativos da Web<\/h2>\n<p>Imagine, por um momento, que sua aplica\u00e7\u00e3o tenha um modelo Employee. Esse modelo pode incluir uma variedade de atributos, mas \u00e9 seguro supor que todos os funcion\u00e1rios teriam:<\/p>\n<ul>\n<li>um primeiro nome,<\/li>\n<li>um sobrenome,<\/li>\n<li>um ID de funcion\u00e1rio,<\/li>\n<li>e um endere\u00e7o de e-mail<\/li>\n<\/ul>\n<p>Como essas informa\u00e7\u00f5es s\u00e3o armazenadas no banco de dados n\u00e3o \u00e9 totalmente irrelevante, mas n\u00e3o \u00e9 t\u00e3o importante para esta discuss\u00e3o.<\/p>\n<p>Por exemplo, talvez haja um \u00fanico registro que contenha todas essas informa\u00e7\u00f5es armazenadas em uma string JSON. Por outro lado, talvez haja uma tabela de funcion\u00e1rios onde cada linha representa um funcion\u00e1rio e, em seguida, cada coluna representa um atributo.<\/p>\n<p>Os detalhes de como as informa\u00e7\u00f5es s\u00e3o traduzidas do banco de dados (ou, mais geralmente, do armazenamento de dados) para a classe n\u00e3o s\u00e3o t\u00e3o importantes.<\/p>\n<p>Normalmente, no entanto, veremos algo assim:<\/p>\n<ol>\n<li>Existe uma classe que solicita as informa\u00e7\u00f5es,<\/li>\n<li>As informa\u00e7\u00f5es s\u00e3o passadas para uma <strong>Simple Factory<\/strong> ,<\/li>\n<li>A <strong>Simple Factory<\/strong> instancia o <strong>Model<\/strong> ,<\/li>\n<li>O <strong>modelo<\/strong> \u00e9 ent\u00e3o passado para a classe de terceiros que o solicitou.<\/li>\n<\/ol>\n<p>Do ponto de vista pict\u00f3rico, voc\u00ea pode v\u00ea-lo assim:<\/p>\n<p>A partir deste ponto, o <strong>Modelo<\/strong> \u00e9 passado por toda a aplica\u00e7\u00e3o. Mas \u00e9 a\u00ed que entra o ponto inicial deste post: Como passamos uma inst\u00e2ncia do <strong>Model<\/strong> (ou uma cole\u00e7\u00e3o de <strong>Models<\/strong>) para o front-end do aplicativo?<\/p>\n<h2>O fluxo do aplicativo da Web<\/h2>\n<p>Para simplificar, vamos supor que usaremos um \u00fanico modelo e, se eu revisitar esse conceito do ponto de vista do c\u00f3digo, podemos mergulhar um pouco mais.<\/p>\n<p>O fluxo geral de um aplicativo da Web ser\u00e1 algo assim:<\/p>\n<ol>\n<li>Um usu\u00e1rio aciona uma a\u00e7\u00e3o que solicita uma inst\u00e2ncia do modelo,<\/li>\n<li>O front-end faz uma chamada para um endpoint no servidor,<\/li>\n<li>O servidor l\u00ea as solicita\u00e7\u00f5es e verifica se s\u00e3o v\u00e1lidas,<\/li>\n<li>Em seguida, envia uma representa\u00e7\u00e3o do modelo para o front-end.<\/li>\n<\/ol>\n<p>Outros desenvolvedores podem discordar (o que \u00e9 sempre bem-vindo e vale a discuss\u00e3o, na minha opini\u00e3o), mas descobri que serializar a inst\u00e2ncia do modelo em JSON torna muito mais f\u00e1cil trabalhar no front-end devido \u00e0 funcionalidade JavaScript, pois refere-se a, ahem, 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=\"Uma maneira orientada a objetos de trabalhar com modelos e aplicativos da Web\" ><\/a><\/p>\n<p>Em outras palavras:<\/p>\n<ol>\n<li>pegamos o modelo,<\/li>\n<li>serialize-o para JSON,<\/li>\n<li>envi\u00e1-lo atrav\u00e9s do fio,<\/li>\n<li>em seguida, deserialize-o no front-end em uma representa\u00e7\u00e3o JavaScript de si mesmo.<\/li>\n<\/ol>\n<p>Isso nos permite manipul\u00e1-lo como far\u00edamos no lado do servidor; no entanto, estamos lidando com um objeto JavaScript. Al\u00e9m disso, tamb\u00e9m nos permite fazer algumas altera\u00e7\u00f5es e enviar as informa\u00e7\u00f5es de volta ao servidor em um estado diferente do qual foram enviadas.<\/p>\n<p>Em \u00faltima an\u00e1lise, isso nos permite salvar os dados de volta no banco de dados.<\/p>\n<h2>Uma perspectiva de alto n\u00edvel<\/h2>\n<p>E esse \u00e9 o ciclo de vida de alto n\u00edvel de passar informa\u00e7\u00f5es de um banco de dados para um modelo para o front-end e vice-versa.<\/p>\n<p>Muitas vezes, por\u00e9m, ajuda ver isso no c\u00f3digo, ent\u00e3o talvez em uma postagem futura, fornecerei uma s\u00e9rie de artigos que podem explicar como fazer isso.<\/p>\n<p>Enquanto isso, no entanto, n\u00e3o deve ser dif\u00edcil traduzir suas implementa\u00e7\u00f5es para o fluxo de trabalho Model-Serialization-Request-Send, conforme descrito nesta postagem.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Entender como pensar no processo de trabalhar com modelos do lado do servidor e aplicativos da Web por meio de modelos, f\u00e1bricas e muito mais.<\/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":[722,733],"tags":[1170],"class_list":["post-230585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-javascript-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230585"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224094"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}