{"id":229494,"date":"2022-11-03T11:51:00","date_gmt":"2022-11-03T08:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229494"},"modified":"2022-11-09T08:21:40","modified_gmt":"2022-11-09T05:21:40","slug":"prototipagem-rapida-com-wordpress-do-conceito-ao-plugin","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/prototipagem-rapida-com-wordpress-do-conceito-ao-plugin\/","title":{"rendered":"Prototipagem R\u00e1pida com WordPress: Do Conceito ao Plugin"},"content":{"rendered":"\n<p>Eu falei sobre o uso do WordPress como uma ferramenta para <a href=\"https:\/\/tommcfarlin.com\/rapid-application-development\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">desenvolvimento r\u00e1pido de aplicativos<\/a> em um artigo anterior.<\/p>\n<p>Mas quanto mais eu trabalho com o WordPress e quanto mais c\u00f3digo vejo, mais potencial percebo que ele tem tanto como plataforma para prototipagem r\u00e1pida quanto para levar esses prot\u00f3tipos para aplicativos totalmente desenvolvidos.<\/p>\n<p>Esses plugins podem ser aplicativos da web, plugins, temas, sites, o que for. Para os prop\u00f3sitos deste post, n\u00e3o importa. Em vez disso, o que importa \u00e9 que, por exemplo:<\/p>\n<ul>\n<li>voc\u00ea tem uma ideia para um plugin,<\/li>\n<li>voc\u00ea quer ver como isso pode funcionar no WordPress,<\/li>\n<li>voc\u00ea rapidamente monta algo,<\/li>\n<li>voc\u00ea come\u00e7a a refin\u00e1-lo.<\/li>\n<\/ul>\n<p>Para muitos que est\u00e3o se envolvendo em um desenvolvimento mais s\u00e9rio do WordPress, achei que valeria a pena dar uma olhada em como \u00e9 isso. Ou seja, vou pegar uma ideia para um plugin, prototip\u00e1-lo e depois refin\u00e1-lo em um plugin bem organizado e orientado a objetos.<\/p>\n<p>Ent\u00e3o, na pr\u00f3xima s\u00e9rie de artigos, vou percorrer esse processo.<\/p>\n<h2>Prototipagem R\u00e1pida com WordPress: O Conceito<\/h2>\n<p>Embora isso nem sempre seja o caso, os conceitos iniciais para, digamos, um plug-in surgir\u00e3o da necessidade de algo que voc\u00ea pode querer para si mesmo ou para outra pessoa.<\/p>\n<p>Se voc\u00ea \u00e9 como eu, ajuda a esbo\u00e7ar algumas ideias iniciais de como isso pode funcionar e fazer as anota\u00e7\u00f5es necess\u00e1rias que ajudar\u00e3o no desenvolvimento.<\/p>\n<p>Minhas habilidades de design afiadas para o prot\u00f3tipo.<\/p>\n<p>Claro, para outros, eles podem optar por ir direto para o IDE e come\u00e7ar a trabalhar no c\u00f3digo. E como, nesta fase, \u00e9 apenas um prot\u00f3tipo r\u00e1pido, n\u00e3o h\u00e1 nada de errado com isso.<\/p>\n<p>Como voc\u00ea pode ver no esbo\u00e7o acima, estou procurando escrever um pequeno plugin que exibir\u00e1 meus tr\u00eas posts mais recentes em uma meta box.<\/p>\n<p>A ideia por tr\u00e1s do plugin \u00e9 esta:<\/p>\n<ul>\n<li>Quando estou escrevendo uma postagem, ter uma refer\u00eancia f\u00e1cil \u00e0s minhas tr\u00eas postagens mais recentes me dar\u00e1 a capacidade de vincular facilmente a elas quando quiser compartilhar meu conte\u00fado nas redes sociais.<\/li>\n<\/ul>\n<p>Talvez o prop\u00f3sito do plugin pare\u00e7a bobo; talvez n\u00e3o. Lembre-se de que o que quer que voc\u00ea escolha construir deve ser algo ben\u00e9fico tanto para voc\u00ea quanto para o seu p\u00fablico. Se outra pessoa n\u00e3o entender, tudo bem.<\/p>\n<h3>Iniciando o processo<\/h3>\n<p>Agora que temos uma ideia b\u00e1sica, sabemos que vamos precisar de algumas coisas:<\/p>\n<ol>\n<li>O arquivo de plugin para exibi\u00e7\u00e3o na tela WordPress Plugin,<\/li>\n<li>Uma meta box para exibir as postagens,<\/li>\n<li>Uma consulta para recuperar as postagens,<\/li>\n<li>Uma maneira de exibir uma mensagem se n\u00e3o houver postagens para exibir.<\/li>\n<\/ol>\n<p>Atrav\u00e9s do uso de alguns ganchos b\u00e1sicos e APIs do WordPress, podemos montar algo rapidamente. Veja como:<\/p>\n<h4>O cabe\u00e7alho do plug-in<\/h4>\n<p>Lembre-se que <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-00-plugin-header-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o cabe\u00e7alho do plugin<\/a> \u00e9 respons\u00e1vel por exibir o conte\u00fado do plugin \u2013 seu t\u00edtulo, descri\u00e7\u00e3o, vers\u00e3o e autor \u2013 na tela do plugin. Certifique-se de que seja conciso, descritivo e direto ao ponto.<\/p>\n<pre><code>&lt;?php\n\/**\n * Three Recent Posts\n *\n * @package     TRP\n * @author      Tom McFarlin\n * @copyright   2017 Tom McFarlin\n * @license     MIT\n *\n * @wordpress-plugin\n * Plugin Name: Three Recent Posts\n * Plugin URI:  https:\/\/tommcfarlin.com\/rapid-prototyping\/\n * Description: Displays the three mot recent posts in your post editor screen.\n * Version:     0.1.0\n * Author:      Tom McFarlin\n * Author URI:  https:\/\/tommcfarlin.com\n * Text Domain: three-recent-posts\n * License:     MIT\n * License URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.txt\n *\/<\/code><\/pre>\n<p>Depois que isso for escrito, o plugin aparecer\u00e1 na \u00e1rea de administra\u00e7\u00e3o do WordPress, mas na verdade n\u00e3o far\u00e1 nada. Ent\u00e3o vamos dar ao plugin alguma funcionalidade real.<\/p>\n<h4>A Caixa Meta<\/h4>\n<p>Primeiro, precisamos registrar uma meta box. Podemos usar o gancho <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">add_meta_boxes<\/a> para isso. \u00c9 f\u00e1cil definir e conectar em <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-01-register-a-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nossa meta box<\/a>. Anote os coment\u00e1rios para cada um dos argumentos do m\u00e9todo.<\/p>\n<pre><code>&lt;?php\n\nadd_action( 'add_meta_boxes', 'three_recent_posts_meta_box' );\n\/**\n * Registers the Meta Box with WordPress. Defines the ID, title, display function,\n * and the post type on which it will live.\n *\/\nfunction three_recent_posts_meta_box() {\n\n    add_meta_box(\n        'three-recent-posts',     \/\/ Meta Box ID.\n        'Three Recent Posts',     \/\/ Meta Box Title.\n        'three_recent_posts_display', \/\/ Function for rendering the meta box.\n        'post',               \/\/ Post type on which this meta box will live.\n        'side'                \/\/ Where the meta box will be displayed.\n    );\n}<\/code><\/pre>\n<p>Observe quase que temos uma fun\u00e7\u00e3o respons\u00e1vel por exibir informa\u00e7\u00f5es. Temos que definir isso, caso contr\u00e1rio o WordPress tentar\u00e1 disparar uma fun\u00e7\u00e3o que n\u00e3o existe e isso resultar\u00e1 em um erro.<\/p>\n<p>Vamos definir <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-02-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">essa fun\u00e7\u00e3o agora<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * If there are posts to display, renders them in the metabox. Otherwise, displays\n * a note that there are no posts to display.\n *\/\nfunction three_recent_posts_display() {\n\n    $query = _three_recent_posts_get();\n\n    if ($query-&gt;have_posts()) {\n        _three_recent_posts_show_posts( $query );\n    } else {\n        _three_recent_posts_no_posts();\n    }\n\n}\n<\/code><\/pre>\n<p>Agora, se voc\u00ea notar, esta fun\u00e7\u00e3o conta com tr\u00eas fun\u00e7\u00f5es diferentes para ajud\u00e1-la a fazer seu trabalho. Portanto, tamb\u00e9m precisamos definir essas fun\u00e7\u00f5es. Idealmente, cada uma dessas fun\u00e7\u00f5es deve ter um prop\u00f3sito de fun\u00e7\u00e3o, no entanto, como estamos prototipando rapidamente este projeto, podemos ter um pouco mais de trabalho por fun\u00e7\u00e3o do que o normal.<\/p>\n<h5>Consulta de postagens<\/h5>\n<p>Primeiro, precisamos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-03-query-for-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">consultar posts<\/a>. Para fazer isso, vamos aproveitar <a href=\"https:\/\/codex.wordpress.org\/Class_Reference\/WP_Query\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WP_Query<\/a>.<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Defines a query for retrieving the three most recent posts and orders them by\n * descing date (with the most recent being first).\n *\n * @return WP_Query $query The query for retrieving the three most recent posts.\n *\/\nfunction _three_recent_posts_get() {\n\n    $args = array(\n        'post_type'   =&gt; 'post',\n        'post_status' =&gt; 'publish',\n        'orderby'     =&gt; 'date',\n        'order'       =&gt; 'desc',\n    );\n    $query = new WP_Query( $args );\n\n    return $query;\n}\n<\/code><\/pre>\n<p>Observe que retornamos a inst\u00e2ncia do objeto de consulta. Faremos mais com isso momentaneamente.<\/p>\n<h5>Exibindo um resultado<\/h5>\n<p>Se houver postagens para exibir, usaremos uma fun\u00e7\u00e3o para iterar pelas postagens que a inst\u00e2ncia de WP_Query encontrou e renderizar <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-04-display-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o permalink e o t\u00edtulo em uma lista ordenada<\/a>.<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Creates the content for the meta box if there are posts to display. Creates a notice\n * that up to three posts will be displayed, then links to each of the three most recent\n * post.\n *\n * @param WP_Query $query The query that contains results to render in the display.\n *\/\nfunction _three_recent_posts_show_posts( $query) {\n\n    \/\/ There may not always be three posts, so display a message explaining.\n    $html = '&lt;p&gt;';\n        $html .= '&lt;span class=\"description\"&gt;';\n            $html .= 'Displays up to the three most recent posts.';\n        $html .= '&lt;\/span&gt;';\n    $html .= '&lt;\/p&gt;';\n\n    \/\/ Create an ordered lists of the most recent posts.\n    $html .= '&lt;ol&gt;';\n    while ($query-&gt;have_posts()) {\n        $query-&gt;the_post();\n\n        $html .= '&lt;li&gt;';\n            $html .= '&lt;a href=\"'. get_the_permalink(). '\"&gt;';\n                $html .= get_the_title();\n            $html .= '&lt;\/a&gt;';\n        $html .= '&lt;\/li&gt;';\n    }\n    $html .= '&lt;\/ol&gt;';\n\n    echo $html;\n}\n<\/code><\/pre>\n<p>Observe que isso listar\u00e1 at\u00e9 tr\u00eas, mas n\u00e3o necessariamente um total de tr\u00eas.<\/p>\n<h5>Exibindo nenhum resultado<\/h5>\n<p>Se n\u00e3o houver resultados, precisamos exibir uma mensagem ao usu\u00e1rio informando que a consulta n\u00e3o encontrou postagens. O c\u00f3digo pode ser algo <a href=\"https:\/\/gist.github.com\/tommcfarlin\/a78a868ff9203c1ff39365e39a2e4803#file-05-displaying-no-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">assim<\/a> :<\/p>\n<pre><code>&lt;?php\n\n\/**\n * Displays a message in the meta box if there are no recent posts.\n *\/\nfunction _three_recent_posts_no_posts() {\n\n    $html .= '&lt;span class=\"description\"&gt;';\n        $html .= 'There are no recent posts.';\n    $html .= '&lt;\/span&gt;';\n\n    echo $html;\n}\n<\/code><\/pre>\n<p>Claro, voc\u00ea pode personalizar a mensagem para isso por conta pr\u00f3pria.<\/p>\n<h2>Prototipagem R\u00e1pida, Feito.<\/h2>\n<p>Neste ponto, h\u00e1 um plugin totalmente funcional. N\u00e3o \u00e9 sem problemas, no entanto:<\/p>\n<ol>\n<li>Estamos misturando HTML com nosso PHP, o que resulta em um acoplamento mais apertado do que o necess\u00e1rio,<\/li>\n<li>O HTML n\u00e3o \u00e9 higienizado ou seguro de forma alguma,<\/li>\n<li>N\u00e3o h\u00e1 absolutamente nenhuma orienta\u00e7\u00e3o a objetos para essas fun\u00e7\u00f5es que, embora alguns possam argumentar que \u00e9 desnecess\u00e1ria, torna isso altamente n\u00e3o modular.<\/li>\n<\/ol>\n<p>Mas o objetivo desta s\u00e9rie \u00e9 pegar um prot\u00f3tipo r\u00e1pido e mov\u00ea-lo para um plug-in de n\u00edvel mais profissional. Ent\u00e3o n\u00f3s fizemos a primeira parte e agora \u00e9 hora de come\u00e7ar a passar para a segunda fase.<\/p>\n<p>Enquanto isso, voc\u00ea pode acompanhar o desenvolvimento deste plugin <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">no GitHub<\/a>. Estarei marcando cada lan\u00e7amento que corresponde a uma postagem no blog. Portanto, este post em particular pode ser encontrado na tag <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/0.1.0\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">0.1.0 .<\/a><\/p>\n<p>A ramifica\u00e7\u00e3o <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/master\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">master<\/a> tamb\u00e9m incluir\u00e1 a vers\u00e3o mais recente de todo o c\u00f3digo mesclado e a ramifica\u00e7\u00e3o de desenvolvimento incluir\u00e1 o c\u00f3digo em que estou trabalhando, mas n\u00e3o est\u00e1 completo (nem est\u00e1vel).<\/p>\n<p>E vou come\u00e7ar a fazer isso no pr\u00f3ximo post.<\/p>\n<h2>Postagens da s\u00e9rie<\/h2>\n<ol>\n<li><a href=\"https:\/\/tommcfarlin.com\/rapid-prototyping\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Prototipagem R\u00e1pida com WordPress: Do Conceito ao Plugin<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/prototipagem-rapida-com-wordpress-analise-de-conceito\/\" title=\"Prototipagem R\u00e1pida com WordPress: An\u00e1lise de Conceito\">Prototipagem R\u00e1pida com WordPress: An\u00e1lise de Conceito<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/prototipagem-rapida-prototipo-para-codigo-parte-1\/\" title=\"Prototipagem R\u00e1pida: Prot\u00f3tipo para C\u00f3digo, Parte 1\">Prototipagem R\u00e1pida: Prot\u00f3tipo para C\u00f3digo, Parte 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/prototipagem-rapida-prototipo-para-codigo-parte-2\/\" title=\"Prototipagem R\u00e1pida: Prot\u00f3tipo para C\u00f3digo, Parte 2\">Prototipagem R\u00e1pida: Prot\u00f3tipo para C\u00f3digo, Parte 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/prototipagem-rapida-apresentando-o-autoloading\/\" title=\"Prototipagem R\u00e1pida: Apresentando o Autoloading\">Prototipagem R\u00e1pida: Apresentando o Autoloading<\/a><\/li>\n<\/ol>\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>O WordPress funciona como uma plataforma para prototipagem r\u00e1pida e para levar esses prot\u00f3tipos para aplicativos totalmente desenvolvidos.<\/p>\n","protected":false},"author":1,"featured_media":223885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[722,920,846],"tags":[1170],"class_list":["post-229494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-outro","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229494","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=229494"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229494\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=229494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=229494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=229494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}