{"id":229124,"date":"2022-11-03T12:41:00","date_gmt":"2022-11-03T09:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229124"},"modified":"2022-11-09T05:42:45","modified_gmt":"2022-11-09T02:42:45","slug":"creacion-rapida-de-prototipos-prototipo-a-codigo-parte-1","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-prototipo-a-codigo-parte-1\/","title":{"rendered":"Creaci\u00f3n r\u00e1pida de prototipos: Prototipo a c\u00f3digo, Parte 1"},"content":{"rendered":"\n<p>En lo que respecta a los prototipos r\u00e1pidos y WordPress, hemos hecho dos cosas hasta ahora:<\/p>\n<ol>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-con-wordpress-del-concepto-al-complemento\/\" title=\"plane\u00f3 el complemento\" >plane\u00f3 el complemento<\/a> ,<\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/prototipos-rapidos-con-wordpress-analisis-de-concepto\/\" title=\"dibuj\u00f3 un diagrama de c\u00f3mo se puede organizar el c\u00f3digo\" >dibuj\u00f3 un diagrama de c\u00f3mo se puede organizar el c\u00f3digo<\/a><\/li>\n<\/ol>\n<p>En este punto, hemos trabajado lo suficiente como para justificar comenzar a refactorizar nuestro c\u00f3digo. Es decir, vamos a empezar a convertir el prototipo en c\u00f3digo. Pero esto es algo que tendr\u00e1 que hacerse en dos fases.<\/p>\n<p>Primero, simplemente vamos a presentar clases que representan los diagramas de la publicaci\u00f3n anterior y que encapsulan la responsabilidad de cada proyecto.<\/p>\n<p>Despu\u00e9s de eso, veremos c\u00f3mo organizar el c\u00f3digo en espacios de nombres y paquetes. Sin embargo, antes de que podamos hacer eso, debemos asegurarnos de que el c\u00f3digo est\u00e9 orientado a objetos y siga siendo funcional. As\u00ed que eso es lo que va a pasar en este post.<\/p>\n<h2>Prototipo a c\u00f3digo<\/h2>\n<p>Si ha estado leyendo las publicaciones anteriores, tenga en cuenta que planeo seguir la organizaci\u00f3n que esboc\u00e9 en la \u00faltima publicaci\u00f3n. Por supuesto, no tienes que seguir este dise\u00f1o en particular.<\/p>\n<h3>Una palabra sobre el control de c\u00f3digo fuente<\/h3>\n<p>Si est\u00e1 utilizando el control de c\u00f3digo fuente, aqu\u00ed es donde recomiendo crear una <a href=\"https:\/\/git-scm.com\/book\/en\/v1\/Git-Branching\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">rama<\/a> a partir de la rama maestra (si est\u00e1 utilizando Git) para que pueda hacer su trabajo sin afectar la versi\u00f3n estable del c\u00f3digo.<\/p>\n<p>Esto est\u00e1 un poco m\u00e1s all\u00e1 del alcance de la serie, por lo que si no est\u00e1 utilizando el control de fuente, no se preocupe. Si es as\u00ed, optar\u00e9 por <strong>desarrollar<\/strong> como el nombre de esta rama. Lo fusionar\u00e9 de nuevo en <strong>maestro\u00a0<\/strong> una vez que est\u00e9 seguro de que es funcional.<\/p>\n<h3>C\u00f3digo de escritura<\/h3>\n<p>Seg\u00fan el trabajo esbozado ayer, voy a crear dos clases:<\/p>\n<ol>\n<li>la clase de caja meta,<\/li>\n<li>la clase de visualizaci\u00f3n de cuadro meta.<\/li>\n<\/ol>\n<p>Habr\u00e1 algo de reutilizaci\u00f3n de c\u00f3digo de lo que ya hemos visto, como ver\u00e1 en el siguiente c\u00f3digo.<\/p>\n<h4>El c\u00f3digo<\/h4>\n<p>Primero, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-00-class-meta-box-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nuestro cuadro meta<\/a> :<\/p>\n<pre><code>&lt;?php\n\/**\n * Registers the Meta Box with WordPress.\n *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\n\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 *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\nclass Meta_Box {\n\n    \/**\n     * A reference to the class that will display the contents in the meta box.\n     *\n     * @access private\n     * @var    Meta_Box_Display\n     *\/\n    private $meta_box_display;\n\n    \/**\n     * Instantiates the class by setting its property equal to a reference to its display.\n     *\/\n    public function __construct() {\n        $this-&gt;meta_box_display = new Meta_Box_Display();\n    }\n\n    \/**\n     * The function responsible for hooking into the WordPress API.\n     *\/\n    public function init() {\n\n        add_meta_box(\n            'three-recent-posts',\n            'Three Recent Posts',\n            array( $this-&gt;meta_box_display, 'display' ),\n            'post',\n            'side'\n        );\n    }\n}\n<\/code><\/pre>\n<p>Y a continuaci\u00f3n, <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-01-class-meta-box-display-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">nuestra pantalla<\/a> :<\/p>\n<pre><code>&lt;?php\n\/**\n * Defines the display for the meta box.\n *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\n\n\/**\n * Defines the display for the meta box that will render the content in the\n * context of its meta box.\n *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\nclass Meta_Box_Display {\n\n    \/**\n     * A reference to the class that will display the contents in the meta box.\n     *\n     * @access private\n     * @var    Post_Messenger\n     *\/\n    private $messenger;\n\n    \/**\n     * Instantiates the object by setting a property equal to that of the class\n     * responsible for rendering the messages from the post query.\n     *\/\n    public function __construct() {\n        $this-&gt;messenger = new Post_Messenger( $this );\n    }\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     *\/\n    public function display( $message) {\n        $this-&gt;messenger-&gt;get_message();\n    }\n}\n<\/code><\/pre>\n<p>Que en el c\u00f3digo del cuadro meta, en el c\u00f3digo del cuadro meta estamos instanciando expl\u00edcitamente la visualizaci\u00f3n para que podamos llamar a su m\u00e9todo de visualizaci\u00f3n cuando sea necesario.<\/p>\n<p>Otra alternativa ser\u00eda crear una instancia de los dos objetos por separado y luego inyectar la pantalla en el cuadro meta a trav\u00e9s de la inyecci\u00f3n del constructor o algo similar. Esto tendr\u00eda que hacerse en una clase de terceros.<\/p>\n<p>Las ventajas de esto provienen de desacoplar un poco m\u00e1s las dos clases. Quiz\u00e1s revisemos c\u00f3mo hacer esto en la pr\u00f3xima publicaci\u00f3n.<\/p>\n<p>Despu\u00e9s de eso, debemos continuar y definir la clase responsable de mostrar los mensajes dentro del contexto de Meta Box Display. Esto es lo que llamaremos <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-02-class-post-messenger-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Post Messenger<\/a> :<\/p>\n<pre><code>&lt;?php\n\/**\n * Display content for the meta box when requested.\n *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\n\n\/**\n * Retrieves information from the class responsible for querying the database and\n * renders it in the context of our meta box when called via the Meta Box Display.\n *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\nclass Post_Messenger {\n\n    \/**\n     * A reference to the query resonsible for retrieving post information from\n     * the database.\n     *\n     * @access private\n     * @var    WP_Query\n     *\/\n    private $query;\n\n    \/**\n     * A reference to the message that's displayed in the view of the\n     * meta box.\n     *\n     * @access private\n     *\/\n    private $message;\n\n    \/**\n     * Instantiates the class by setting a reference to the query.\n     *\/\n    public function __construct() {\n        $this-&gt;query = new Post_Query();\n    }\n\n    \/**\n     * Retrieves the content to be displayed in the meta box.\n     *\/\n    public function get_message() {\n\n        $this-&gt;get_description();\n\n        if ($this-&gt;query-&gt;has_posts()) {\n            $this-&gt;get_post_message();\n        } else {\n            $this-&gt;get_no_posts_message();\n        }\n    }\n\n    \/**\n     * Displays the description of the content of the meta box.\n     *\n     * @access private\n     *\/\n    private function get_post_message() {\n        include_once 'post-list.php';\n    }\n\n    \/**\n     * Displays the description of the content of the meta box.\n     *\n     * @access private\n     *\/\n    private function get_description() {\n        include_once 'message-description.php';\n    }\n\n    \/**\n     * Displays a message of there are no recent posts.\n     *\n     * @access private\n     *\/\n    private function get_no_posts_message() {\n        include_once 'no-post-list.php';\n    }\n}\n<\/code><\/pre>\n<p>Observe aqu\u00ed que Post Messenger tambi\u00e9n hace referencia a <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-03-post-query-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Post Query<\/a>. Esta es la clase donde ocurre la comunicaci\u00f3n con la base de datos. Tambi\u00e9n he incluido algunas funciones auxiliares para simplificar un poco el c\u00f3digo de la vista, como veremos en un momento.<\/p>\n<pre><code>&lt;?php\n\/**\n * Queries the database for three most recent posts.\n *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\n\n\/**\n * Queries the database for three most recent posts. Returns the query to the\n * caller so that it can be interrogates for posts or not.\n *\n * @author Tom McFarlin\n * @since  0.2.0\n *\/\nclass Post_Query {\n\n    \/**\n     * A reference to the WP_Query this class wraps.\n     *\n     * @access private\n     * @var    WP_Query\n     *\/\n    private $query;\n\n    \/**\n     * Instantiates the class by preparing instance data and executing the\n     * query so the display can render the contents.\n     *\/\n    public function __construct() {\n\n        $this-&gt;query = null;\n        $this-&gt;get_posts();\n    }\n\n    \/**\n     * Executes the query for returning the post recent posts ordered by date.\n     *\n     * @access private\n     *\/\n    private function get_posts() {\n\n        $args = array(\n            'post_type'   =&gt; 'post',\n            'post_status' =&gt; 'publish',\n            'orderby'     =&gt; 'date',\n            'order'       =&gt; 'desc',\n        );\n        $this-&gt;query = new WP_Query( $args );\n\n        return $this-&gt;query;\n    }\n\n    \/**\n     * A helper function to determine if the query has any posts.\n     *\/\n    public function has_posts() {\n        return! $this-&gt;query-&gt;have_posts();\n    }\n\n    \/**\n     * A helper function for retrieving the next post in the list of\n     * posts\n     *\/\n    public function the_post() {\n        return $this-&gt;query-&gt;the_post();\n    }\n}\n<\/code><\/pre>\n<p>Y eso es todo para las clases principales. Por supuesto, todav\u00eda tenemos que hablar de las vistas.<\/p>\n<h4>Las vistas<\/h4>\n<p>Las vistas son responsables de representar el HTML en el contexto del cuadro meta. No me gusta escribir HTML en el contexto de PHP (tampoco me gusta mezclar PHP en el contexto de HTML, pero esto es inevitable en este proyecto).<\/p>\n<p>Hay algunos grandes proyectos de plantillas para hacer esto m\u00e1s f\u00e1cil, pero estoy divagando. De todos modos, notar\u00e1 que en el\u00a0 archivo <strong>post-list.php<\/strong>, hay referencias a funciones auxiliares en la clase Post Query. Esto es para asegurarme de que no estoy exponiendo demasiadas propiedades y violando la Ley de Dem\u00e9ter.<\/p>\n<p>Echemos un vistazo a ese archivo primero, ya <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-04-post-list-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">que es el m\u00e1s complicado<\/a> :<\/p>\n<pre><code>&lt;ol&gt;\n    &lt;?php while ($this-&gt;query-&gt;has_posts()) {  ?&gt;\n        &lt;?php $this-&gt;query-&gt;the_post(); ?&gt;\n        &lt;li&gt;\n            &lt;a href=\"&lt;?php get_the_permalink(); ?&gt;\" target=\"_blank\"&gt;\n                &lt;?php echo get_the_title(); ?&gt;\n            &lt;\/a&gt;\n        &lt;\/li&gt;\n    &lt;?php } ?&gt;\n&lt;\/ol&gt;<\/code><\/pre>\n<p>Se parece al c\u00f3digo est\u00e1ndar de WordPress, pero recuerda que dado que este archivo se llama dentro de <strong>Post Messenger<\/strong>, se referir\u00e1 a la consulta como la consulta envuelta por esa clase.<\/p>\n<p>Los dos \u00faltimos archivos son bastante sencillos. Uno de ellos proporciona <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-06-message-description-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">una descripci\u00f3n<\/a> :<\/p>\n<pre><code>&lt;p&gt;\n    &lt;span class=\"description\"&gt;\n        Displays up to the three most recent posts.\n    &lt;\/span&gt;&lt;!-- .description --&gt;\n&lt;\/p&gt;<\/code><\/pre>\n<p>El otro proporciona un mensaje cuando no <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-07-no-post-list-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">hay publicaciones<\/a> :<\/p>\n<pre><code>&lt;p&gt;There are no recent posts.&lt;\/p&gt;<\/code><\/pre>\n<p>Aparte de eso, la funcionalidad b\u00e1sica est\u00e1 hecha.<\/p>\n<h3>Arrancando el complemento<\/h3>\n<p>Lo \u00faltimo que debemos hacer es iniciar el complemento. Para hacer esto, modificamos el c\u00f3digo en el archivo del complemento principal para que se vea <a href=\"https:\/\/gist.github.com\/tommcfarlin\/1876be773467946ec2972ae32e0c97a3#file-08-three-recent-posts-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">as\u00ed<\/a> :<\/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\/three-recent-posts\/\n * Description: Displays the three mot recent posts in your post editor screen.\n * Version:     0.2.0\n * Author:      Tom McFarlin\n * Author URI:  https:\/\/tommcfarlin.com\n * Text Domain: three-recent-posts\n * License:     GPL\n * License URI: http:\/\/www.gnu.org\/licenses\/gpl-3.0.txt\n *\/\n\ninclude 'class-meta-box.php';\ninclude 'class-meta-box-display.php';\ninclude 'class-post-messenger.php';\ninclude 'class-post-query.php';\n\nadd_action( 'add_meta_boxes', 'trp_start' );\n\/**\n * Starts the plugin.\n *\/\nfunction trp_start() {\n\n    $meta_box = new Meta_Box();\n    $meta_box-&gt;init();\n}\n<\/code><\/pre>\n<p>Eso se conectar\u00e1 a WordPress, crear\u00e1 una instancia de nuestro complemento y luego lo pondr\u00e1 en marcha. Cuando lo ejecuta dentro de su instalaci\u00f3n de WordPress, deber\u00eda verse exactamente como lo hizo durante la primera versi\u00f3n.<\/p>\n<p>La \u00fanica diferencia es que ahora tenemos las cosas organizadas en clases en lugar de funciones individuales.<\/p>\n<h2>notas<\/h2>\n<p>Primero, hay oportunidades para la refactorizaci\u00f3n aqu\u00ed que reducir\u00edan a\u00fan m\u00e1s el desacoplamiento (como diferentes tipos de <a href=\"https:\/\/en.wikipedia.org\/wiki\/Dependency_injection\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">inyecci\u00f3n de dependencia<\/a>, etc.), pero el prop\u00f3sito de esta serie no es cubrir eso.<\/p>\n<p>En cambio, es tomar la idea de ver complementos escritos por muchas funciones de procedimiento y luego dividirlos en clases m\u00e1s conceptuales que encapsulen sus responsabilidades.<\/p>\n<p>En segundo lugar, si revisa el c\u00f3digo fuente en el repositorio de esta versi\u00f3n del proyecto, ver\u00e1 que tambi\u00e9n present\u00e9 composer.json. Esto es para que pueda aprovechar <a href=\"https:\/\/tommcfarlin.com\/php-codesniffer-with-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PHP CodeSniffer<\/a> y los <a href=\"https:\/\/tommcfarlin.com\/following-the-wordpress-coding-standards\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">est\u00e1ndares de codificaci\u00f3n de WordPress<\/a> al escribir c\u00f3digo.<\/p>\n<p>En la \u00faltima parte de la serie, repasaremos el espacio de <a href=\"https:\/\/wordpress.mediadoma.com\/es\/espacios-de-nombres-y-carga-automatica-en-wordpress\/\" title=\"nombres\">nombres<\/a> y reorganizaremos los archivos. Si el tiempo lo permite, incluiremos un cargador autom\u00e1tico para que no tengamos que incluir archivos manualmente en la parte superior de nuestro archivo de complemento.<\/p>\n<p>Finalmente, fusion\u00e9 este c\u00f3digo <a href=\"https:\/\/github.com\/tommcfarlin\/three-recent-posts\/tree\/0.2.1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">en maestro y lo etiquet\u00e9 como 0.2.1<\/a> (ya que tuve que hacer una peque\u00f1a revisi\u00f3n) ya que todav\u00eda es un trabajo en progreso.<\/p>\n<h2>Publicaciones de la serie<\/h2>\n<ol>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-con-wordpress-del-concepto-al-complemento\/\" title=\"Creaci\u00f3n r\u00e1pida de prototipos con WordPress: del concepto al complemento\">Creaci\u00f3n r\u00e1pida de prototipos con WordPress: del concepto al complemento<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/prototipos-rapidos-con-wordpress-analisis-de-concepto\/\" title=\"Prototipos R\u00e1pidos con WordPress: An\u00e1lisis de Concepto\">Prototipos R\u00e1pidos con WordPress: An\u00e1lisis de Concepto<\/a><\/li>\n<li><a href=\"https:\/\/tommcfarlin.com\/prototype-to-code-1\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Creaci\u00f3n r\u00e1pida de prototipos: Prototipo a c\u00f3digo, Parte 1<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-de-prototipo-a-codigo-parte-2\/\" title=\"Creaci\u00f3n r\u00e1pida de prototipos: de prototipo a c\u00f3digo, parte 2\">Creaci\u00f3n r\u00e1pida de prototipos: de prototipo a c\u00f3digo, parte 2<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.mediadoma.com\/es\/creacion-rapida-de-prototipos-introduccion-a-la-carga-automatica\/\" title=\"Creaci\u00f3n r\u00e1pida de prototipos: Introducci\u00f3n a la carga autom\u00e1tica\">Creaci\u00f3n r\u00e1pida de prototipos: Introducci\u00f3n a la carga autom\u00e1tica<\/a><\/li>\n<\/ol>\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>Aqu\u00ed es donde comenzamos a convertir nuestro prototipo en c\u00f3digo. Deber\u00eda mostrar por qu\u00e9 es \u00fatil poner previsi\u00f3n en un proyecto.<\/p>\n","protected":false},"author":1,"featured_media":223902,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[716,914,840],"tags":[1172],"class_list":["post-229124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollador","category-otro","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229124","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=229124"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229124\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223902"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}