Tutorial de desarrollo de aplicaciones </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#the-goal" class="sidebar-link">Objetivo </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#part-1-the-environment" class="sidebar-link">Primera parte: Entorno </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#part-2-contract" class="sidebar-link">Parte 2: Contratos inteligentes </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#creator-account" class="sidebar-link">Cuenta del fundador </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#new-application" class="sidebar-link">Nueva aplicación </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#new-database-table" class="sidebar-link">Nueva tabla de datos </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#new-contract" class="sidebar-link">Nuevo contrato inteligente. </a></li></ul></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#part-3-page" class="sidebar-link">Parte 3: Página </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#new-field" class="sidebar-link">Nuevo campo </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#update-the-contract" class="sidebar-link">Actualizar el contrato inteligente </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#page" class="sidebar-link">Página </a></li></ul></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#part-4-application" class="sidebar-link">Parte 4: Aplicación </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#menu" class="sidebar-link">Menú </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#send-a-message" class="sidebar-link">Enviar un mensaje </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#form-navigation" class="sidebar-link">Navegación en la tabla </a></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#full-page-code-2" class="sidebar-link">Código de página completa </a></li></ul></li><li class="sidebar-sub-header"><a href="/es/tutorials/app_tutorial.html#conclusions" class="sidebar-link">Conclusiones </a></li></ul></li><li><a href="/es/tutorials/tutorial.html" class="sidebar-link">Tutorial para desarrolladores de redes IBAX </a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="tutorial-for-application-development"><a href="#tutorial-for-application-development" class="header-anchor">#</a> Tutorial de desarrollo de aplicaciones </h1> <p>Este capítulo explica cómo escribir una aplicación simple en la plataforma de blockchain de IBAX Network.</p> <ul><li><a href="#the-goal">Objetivo</a></li> <li><a href="#part-1-the-environment">Parte 1: El entorno</a></li> <li><a href="#part-2-contract">Parte 2: Contrato inteligente</a> <ul><li><a href="#creator-account">Cuenta del fundador</a></li> <li><a href="#new-application">Nueva aplicación</a></li> <li><a href="#new-database-table">Nueva tabla de datos</a></li> <li><a href="#new-contract">Nuevo contrato inteligente</a> <ul><li><a href="#contract-code">Sección de código del contrato</a></li> <li><a href="#create-a-contract">Crear un contrato inteligente</a></li> <li><a href="#contract-name">Nombre del contrato inteligente</a></li> <li><a href="#data">Sección de datos</a></li> <li><a href="#conditions">Sección de condiciones</a></li> <li><a href="#action">Sección de acciones</a></li> <li><a href="#full-contract-code">Código completo del contrato inteligente</a></li> <li><a href="#save-and-run">Guardar y ejecutar</a></li></ul></li></ul></li> <li><a href="#part-3-page">Parte 3: Página</a> <ul><li><a href="#new-field">Nuevo campo</a></li> <li><a href="#update-the-contract">Actualizar el contrato inteligente</a></li> <li><a href="#page">Página</a> <ul><li><a href="#designer-views">Vista de diseño</a></li> <li><a href="#developer-view">Vista de desarrollador</a></li> <li><a href="#fetch-data-from-the-database-table">Obtener datos de la tabla de la base de datos</a></li> <li><a href="#full-page-code-1">Código de página completa</a></li> <li><a href="#save-the-page">Guardar la página</a></li></ul></li></ul></li> <li><a href="#part-4-application">Parte 4: Aplicación</a> <ul><li><a href="#menu">Menú</a> <ul><li><a href="#add-a-menu-item">Agregar un elemento de menú</a></li> <li><a href="#test-the-new-menu-item">Probar el nuevo elemento de menú</a></li></ul></li> <li><a href="#send-a-message">Enviar un mensaje</a> <ul><li><a href="#form">Formulario</a></li></ul></li> <li><a href="#form-navigation">Navegación en la tabla</a> <ul><li><a href="#navigation-buttons">Botones de navegación</a></li> <li><a href="#variables">Variables</a></li> <li><a href="#entry-count">Recuento de entradas</a></li> <li><a href="#table-offset">Desplazamiento de la tabla</a></li> <li><a href="#button-code">Código del botón</a></li> <li><a href="#page-refreshing">Actualizar la página</a></li> <li><a href="#full-page-code-2">Código de página completa</a></li></ul></li></ul></li> <li><a href="#conclusions">Conclusiones</a></li></ul> <h2 id="the-goal"><a href="#the-goal" class="header-anchor">#</a> Objetivo </h2> <p>El inicio de la aplicación es muy simple, pero a medida que se profundiza en el tutorial, su complejidad aumenta.</p> <p>La versión final de la aplicación se almacena en una tabla de datos como un mensaje simple (cadena), que incluye una marca de tiempo y el identificador de cuenta del remitente del mensaje. Los usuarios pueden acceder a esta lista de mensajes y agregar nuevos mensajes desde la página de la aplicación. La página de esta aplicación se puede acceder desde el menú del ecosistema.</p> <h2 id="part-1-the-environment"><a href="#part-1-the-environment" class="header-anchor">#</a> Primera parte: Entorno </h2> <p><strong>Weaver</strong></p> <p>Weaver es el único cliente de la plataforma blockchain IBAX, proporcionando funcionalidad para todos los usuarios y roles del ecosistema. Los desarrolladores de aplicaciones pueden desarrollar y probar aplicaciones en Weaver, los administradores del ecosistema usan Weaver para administrar el ecosistema, y los usuarios pueden interactuar con las aplicaciones del ecosistema a través de Weaver.</p> <p>En este tutorial, escribirás código de contrato inteligente, código de plantilla de página y realizarás todas las demás operaciones en Weaver. Weaver también proporciona una forma de recuperar, guardar y ejecutar código de contrato inteligente, administrar estructuras de datos (tablas), asignar derechos de acceso y crear aplicaciones.</p> <p>Cada nodo tiene su propia instancia de Weaver.</p> <h2 id="part-2-contract"><a href="#part-2-contract" class="header-anchor">#</a> Parte 2: Contratos inteligentes </h2> <p>Su primera aplicación simple es "¡Hola, mundo!"</p> <div class="language- extra-class"><pre class="language-text"><code>La aplicación se almacena como una cadena en una tabla. No tiene ninguna interfaz de usuario. </code></pre></div><h3 id="creator-account"><a href="#creator-account" class="header-anchor">#</a> Cuenta del fundador </h3> <p>Una cuenta con el rol de <em>Developer</em> puede utilizar el privilegio "root" del ecosistema. Por defecto, este rol tiene acceso a todas las operaciones. En el nuevo ecosistema, la cuenta del fundador se asigna al rol de <em>Developer</em>. Debe utilizar esta cuenta para introducir cambios importantes en el ecosistema, como la creación de nuevas aplicaciones y tablas de datos.</p> <p>Inicie sesión en el ecosistema utilizando la cuenta del fundador.</p> <h3 id="new-application"><a href="#new-application" class="header-anchor">#</a> Nueva aplicación </h3> <p>Una vez que inicie sesión como fundador del ecosistema, podrá crear una nueva aplicación.</p> <p>Para crear una nueva aplicación:</p> <blockquote><ol><li><p>Vaya a la pestaña <strong>Develope</strong>;</p></li> <li><p>Seleccione <strong>Aplicaciones</strong> en el menú de la izquierda;</p></li> <li><p>En la página de <strong>Aplicaciones</strong>, seleccione <strong>Crear</strong>;</p></li> <li><p>Especifique el nombre de la aplicación en el campo <strong>Nombre</strong>;</p></li> <li><p>Especifique <code>true</code> en <strong>Cambiar condiciones</strong>:</p> <blockquote><p><code>true</code> significa que cualquier persona puede cambiar la aplicación;</p> <p>Otra opción es especificar <code>ContractConditions("MainCondition")</code>. Esto prohibirá que cualquier persona, excepto el fundador, realice cambios en la aplicación.</p></blockquote></li> <li><p>Su aplicación aparecerá en la lista de aplicaciones. Haga clic en el campo de nombre de la aplicación especificada para activarla.</p> <div class="language- extra-class"><pre class="language-text"><code>Seleccionar una aplicación en la pestaña *Desarrollador* facilita la navegación de los recursos relacionados con la aplicación seleccionada, pero no afecta al ecosistema. Todas las aplicaciones del ecosistema siguen estando disponibles, independientemente de la selección. </code></pre></div></li></ol></blockquote> <h3 id="new-database-table"><a href="#new-database-table" class="header-anchor">#</a> Nueva tabla de datos </h3> <p>Para almacenar datos, la aplicación necesita una tabla de datos. Cree la tabla de datos en Weaver.</p> <p>Creación de una tabla de datos:</p> <blockquote><ol><li><p>En la pestaña <strong>Developer</strong>, seleccione <strong>Aplicaciones</strong> > <strong>APP</strong> > <strong>Tablas de datos</strong>;</p> <blockquote><p>Esto muestra todas las tablas de datos para la aplicación seleccionada. Si la lista está vacía, su aplicación aún no tiene ninguna tabla de datos.</p></blockquote></li> <li><p>Haga clic en <strong>Crear</strong>;</p> <blockquote><p>Weaver mostrará la página de creación de tabla de datos.</p></blockquote></li> <li><p>Especifique el nombre de su tabla de datos en el campo <strong>Nombre</strong>;</p> <blockquote><p>Este tutorial utiliza el nombre de tabla de datos <code>apptable</code>.</p></blockquote></li> <li><p>Agregue una columna llamada <code>message</code> con un tipo de <code>Texto</code>;</p> <blockquote><p>Como resultado, la tabla de datos debe tener dos columnas: <code>id</code> (predefinido) y <code>message</code>. Agregará más columnas más adelante. <img src="/app-tut-table.png" alt="image"></p></blockquote></li> <li><p>Para los permisos de lectura y escritura, especifique <code>true</code> para cada campo;</p> <blockquote><p>Esto permitirá que cualquier persona realice inserciones, actualizaciones, agregue columnas y lea datos de elementos en la tabla de datos;</p> <p>Como opción, puede limitar los permisos de lectura y escritura a la cuenta fundadora, en cuyo caso, especifique <code>ContractConditions("MainCondition")</code> en ese campo.</p></blockquote></li></ol></blockquote> <h3 id="new-contract"><a href="#new-contract" class="header-anchor">#</a> Nuevo contrato inteligente. </h3> <h4 id="contract-code"><a href="#contract-code" class="header-anchor">#</a> Sección de código del contrato </h4> <p>Cada contrato inteligente consta de tres partes. Para obtener más información, consulte: <a href="/es/topics/script.html#contract-structure">Estructura del contrato inteligente</a>.</p> <h4 id="create-a-contract"><a href="#create-a-contract" class="header-anchor">#</a> Crear un contrato inteligente </h4> <ol><li><p>En la pestaña de <strong>Developer</strong>, selecciona <strong>Aplicaciones</strong> > <strong>APP</strong> > <em>Contratos inteligentes</em>;</p> <blockquote><p>Esto mostrará todos los contratos inteligentes de la aplicación seleccionada. Para una nueva aplicación, esta lista estará vacía.</p></blockquote></li> <li><p>Haz clic en <em>Crear</em>;</p> <blockquote><p>Se abrirá una nueva plantilla de contrato inteligente en el editor.</p></blockquote></li></ol> <p>La plantilla de contrato inteligente vacía se muestra a continuación:</p> <div class="language-js extra-class"><pre class="language-js"><code>contract <span class="token operator">...</span> <span class="token punctuation">{</span> data <span class="token punctuation">{</span> <span class="token punctuation">}</span> conditions <span class="token punctuation">{</span> <span class="token punctuation">}</span> action <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div><h4 id="contract-name"><a href="#contract-name" class="header-anchor">#</a> Nombre del contrato inteligente </h4> <p>Primero, nombra el contrato inteligente.</p> <div class="language-js extra-class"><pre class="language-js"><code>contract AppContract <span class="token punctuation">{</span> </code></pre></div><h4 id="data"><a href="#data" class="header-anchor">#</a> Sección de datos datos </h4> <p>Complete la sección <code>data</code>.</p> <p>En el siguiente ejemplo, <code>Message</code> es el nombre de la variable y <code>string</code> es su tipo.</p> <div class="language-js extra-class"><pre class="language-js"><code>data <span class="token punctuation">{</span> Message string <span class="token punctuation">}</span> </code></pre></div><h4 id="conditions"><a href="#conditions" class="header-anchor">#</a> Sección de condiciones </h4> <p>Complete la sección <code>conditions</code>. La condición de validación simple es especificar que la cadena proporcionada no puede estar vacía. Si la longitud de <code>Message</code> es <code>0</code>, el contrato inteligente generará un mensaje de advertencia con el mensaje definido durante la ejecución.</p> <div class="language-js extra-class"><pre class="language-js"><code>conditions <span class="token punctuation">{</span> <span class="token comment">// avoid writing empty strings</span> <span class="token keyword">if</span> <span class="token function">Size</span><span class="token punctuation">(</span>$Message<span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token punctuation">{</span> error <span class="token string">"Message is empty"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div><h4 id="action"><a href="#action" class="header-anchor">#</a> Sección de acciones </h4> <p>Fill in the <code>action</code> section. The simple action is to write the <code>Message</code> into a database table.</p> <p>(Rellenar la sección <code>action</code>. La acción simple es escribir el <code>Message</code> en una tabla de base de datos.)</p> <div class="language-js extra-class"><pre class="language-js"><code>action <span class="token punctuation">{</span> <span class="token function">DBInsert</span><span class="token punctuation">(</span><span class="token string">"apptable"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">message</span><span class="token operator">:</span> $Message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre></div><h4 id="full-contract-code"><a href="#full-contract-code" class="header-anchor">#</a> Código completo del contrato inteligente </h4> <p>El siguiente fragmento es el código completo del contrato inteligente.</p> <p>Todos los contratos inteligentes en la plataforma de blockchain IBAX están construidos de esta manera, incluyendo las secciones de <code>data</code>, <code>conditions</code> y <code>action</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code>contract AppContract <span class="token punctuation">{</span> data <span class="token punctuation">{</span> Message string <span class="token punctuation">}</span> conditions <span class="token punctuation">{</span> <span class="token comment">// avoid writing empty strings</span> <span class="token keyword">if</span> <span class="token function">Size</span><span class="token punctuation">(</span>$Message<span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token punctuation">{</span> error <span class="token string">"Message is empty"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> action <span class="token punctuation">{</span> <span class="token function">DBInsert</span><span class="token punctuation">(</span><span class="token string">"apptable"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">message</span><span class="token operator">:</span> $Message<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div><h4 id="save-and-run"><a href="#save-and-run" class="header-anchor">#</a> Guardar y ejecutar </h4> <p>Prueba de contrato inteligente en preparación:</p> <blockquote><ol><li><p>En el menú del editor, haga clic en <strong>Guardar</strong>;</p> <blockquote><p>Esto cambiará el código del contrato inteligente y la versión modificada estará disponible para todos los nodos de la red.</p></blockquote></li> <li><p>En el menú del editor, haga clic en <strong>Ejecutar</strong>;</p> <blockquote><p>Esto mostrará la página <strong>Ejecutar contrato inteligente</strong>.</p></blockquote></li> <li><p>En la página <strong>Ejecutar contrato inteligente</strong>, complete los parámetros de entrada del contrato inteligente;</p> <blockquote><p>Este contrato inteligente tiene un parámetro <code>Mensaje</code>, por lo que en <strong>Clave</strong> especifique <code>Mensaje</code> y en <strong>Valor</strong> especifique <code>Hola, mundo</code>.</p> <p><img src="/app-tut-execute.png" alt="image"></p></blockquote></li> <li><p>Haga clic en <strong>Ejecutar</strong>.</p> <blockquote><p>El resultado se mostrará en el lado derecho.</p></blockquote></li></ol></blockquote> <p>Si se ha agregado con éxito una cadena, el resultado contendrá el ID del bloque que introduce el cambio de transacción y el código de resultado.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span> <span class="token string-property property">"block"</span><span class="token operator">:</span> <span class="token string">"31"</span><span class="token punctuation">,</span> <span class="token string-property property">"result"</span><span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span> </code></pre></div><h2 id="part-3-page"><a href="#part-3-page" class="header-anchor">#</a> Parte 3: Página </h2> <p>Después de que el contrato inteligente entre en vigencia, es hora de expandirlo en algo más útil. En esta sección, implementará la interfaz de usuario y otras funciones.</p> <div class="language- extra-class"><pre class="language-text"><code>Esta aplicación almacenará cadenas en una tabla, al igual que las entradas en un registro. Cada cadena tendrá un autor y una marca de tiempo. Los usuarios podrán ver la lista de cadenas almacenadas desde la página de la aplicación, que será una tabla simple. </code></pre></div><h3 id="new-field"><a href="#new-field" class="header-anchor">#</a> Nuevo campo </h3> <p>Como antes, edite la tabla de datos desde la página de la pestaña <strong>Developer</strong> > <strong>Aplicaciones</strong> > <strong>APP</strong> > <strong>Tablas de datos</strong>;</p> <p>Agregue los siguientes campos a la tabla de datos <code>apptable</code>:</p> <ul><li><p>Campo <code>author</code>, tipo <code>Number</code>, <strong>cambiar</strong> configuración a <code>true</code>;</p> <blockquote><p>Este campo almacenará el identificador de la cuenta del autor.</p></blockquote></li> <li><p>Campo <code>timestamp</code>, tipo <code>Date/Time</code>, <strong>cambiar</strong> configuración a <code>true</code>.</p></li></ul> <h3 id="update-the-contract"><a href="#update-the-contract" class="header-anchor">#</a> Actualizar el contrato inteligente </h3> <p>Modificar el código del contrato inteligente para manejar el ID del autor y la marca de tiempo.</p> <p>El ID del autor es la cuenta del sistema en el ecosistema. La marca de tiempo es la fecha y hora en que se ejecuta el contrato inteligente en formato Unix.</p> <p>Ambos valores son proporcionados por una <a href="/es/topics/script.html#variables">variable predefinida</a>. Por lo tanto, no es necesario ingresar o verificar variables predefinidas, solo se cambian en la sección de operaciones.</p> <p>Cambie el contrato inteligente para escribir el ID del autor y la marca de tiempo en la tabla de datos al agregar un mensaje. El ID del autor está definido por <code>$key_id</code> y la marca de tiempo está definida por <code>$time</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code>action <span class="token punctuation">{</span> <span class="token function">DBInsert</span><span class="token punctuation">(</span><span class="token string">"apptable"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">message</span><span class="token operator">:</span> $Message<span class="token punctuation">,</span> <span class="token literal-property property">author</span><span class="token operator">:</span> $key_id<span class="token punctuation">,</span> <span class="token literal-property property">timestamp</span><span class="token operator">:</span> $time<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre></div><h3 id="page"><a href="#page" class="header-anchor">#</a> Página </h3> <p>Para esta sección, la página de la aplicación es una página simple que muestra la información almacenada en una tabla.</p> <p>Al igual que con todos los demás recursos, se puede crear una página de interfaz de usuario en Weaver:</p> <ol><li><p>Navegue a la pestaña <strong>Developer</strong> > <strong>Aplicación</strong> > <strong>APP</strong> > <strong>Página</strong>;</p></li> <li><p>Haga clic en <strong>Crear</strong>;</p> <blockquote><p>El diseñador visual se abrirá en una nueva pestaña.</p></blockquote></li></ol> <h4 id="designer-views"><a href="#designer-views" class="header-anchor">#</a> Vista de diseño </h4> <p>La página predeterminada está vacía. Puede utilizar estructuras predefinidas para llenar rápidamente la página.</p> <blockquote><p><img src="/app-tut-designer.png" alt="image"></p></blockquote> <p>Crear un formulario básico:</p> <ol><li>En el selector de vistas de la derecha, haga clic en <strong>Visualización (Designer)</strong>;</li></ol> <blockquote><p>La vista cambiará al diseñador visual.</p></blockquote> <ol start="2"><li>Desde el menú de la izquierda, seleccione <strong>Búsqueda</strong> > <strong>Tabla con encabezado</strong> y arrástrelo a la página.</li></ol> <blockquote><p>Aparecerá una tabla que contiene varios elementos.</p></blockquote> <h4 id="developer-view"><a href="#developer-view" class="header-anchor">#</a> Vista de desarrollador </h4> <p>La página de usuario de la plataforma de blockchain IBAX está escrita en lenguaje de plantilla. Necesitas escribir código para la página, así que cambia a la vista de desarrollador.</p> <blockquote><p><img src="/app-tut-developer.png" alt="image"></p></blockquote> <p>Cambia a la vista de desarrollador.</p> <ol><li><p>En el selector de vista a la derecha, haz clic en <strong>Developer</strong>.</p> <blockquote><p>La vista cambiará al editor de código que contiene el código de la página.</p></blockquote></li></ol> <h4 id="fetch-data-from-the-database-table"><a href="#fetch-data-from-the-database-table" class="header-anchor">#</a> Obtener datos de la tabla de la base de datos </h4> <p>Hasta ahora, la plantilla de la página no ha hecho nada. A continuación, debes cambiar el código para que la página muestre los datos de la tabla <code>apptable</code>.</p> <ol><li><p>Para solicitar datos de la tabla, utiliza la función <a href="/es/topics/script.html#dbfind">DBFind</a>;</p> <blockquote><p>En el siguiente ejemplo, esta función llama a la tabla <code>apptable</code> para obtener datos y los coloca en la fuente <code>src_table</code>. Luego, los ordena por el campo de marca de tiempo. Esta fuente <code>src_table</code> se utilizará más adelante como fuente de datos para la vista de tabla en la página.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">DBFind</span><span class="token punctuation">(</span>Name<span class="token operator">:</span> apptable<span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Columns</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"author,timestamp,message"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Order</span><span class="token punctuation">(</span>timestamp<span class="token punctuation">)</span> </code></pre></div></blockquote></li> <li><p>Para mostrar los datos de la fuente <code>src_table</code>, especifica la fuente y los títulos de las columnas en la función <code>Table</code>.</p> <blockquote><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">Table</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"AUTHOR=author,TIME=timestamp,MESSAGE=message"</span><span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span> </code></pre></div></blockquote></li> <li><p>Haz clic en <strong>Vista previa</strong> en el selector de vista a la derecha para comprobar si los datos se muestran correctamente.</p></li></ol> <h4 id="full-page-code-1"><a href="#full-page-code-1" class="header-anchor">#</a> Código de página completa </h4> <p>A continuación se muestra el código de página completo para esa sección. Esta página básica se ampliará más adelante.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">DBFind</span><span class="token punctuation">(</span>Name<span class="token operator">:</span> apptable<span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Columns</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"author,timestamp,message"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">Order</span><span class="token punctuation">(</span>timestamp<span class="token punctuation">)</span> <span class="token function">Div</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">Class</span><span class="token operator">:</span> panel panel<span class="token operator">-</span>primary</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Div</span><span class="token punctuation">(</span>Class<span class="token operator">:</span> panel<span class="token operator">-</span>heading<span class="token punctuation">,</span> <span class="token literal-property property">Body</span><span class="token operator">:</span> Table block<span class="token punctuation">)</span> <span class="token function">Table</span><span class="token punctuation">(</span>Columns<span class="token operator">:</span> <span class="token string">"AUTHOR=author,TIME=timestamp,MESSAGE=message"</span><span class="token punctuation">,</span> <span class="token literal-property property">Source</span><span class="token operator">:</span> src_table<span class="token punctuation">)</span> <span class="token function">Div</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">Class</span><span class="token operator">:</span> panel<span class="token operator">-</span>footer text<span class="token operator">-</span>right</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">Button</span><span class="token punctuation">(</span>Class<span class="token operator">:</span> btn btn<span class="token operator">-</span>primary<span class="token punctuation">,</span> <span class="token literal-property property">Contract</span><span class="token operator">:</span> ContractName<span class="token punctuation">,</span> <span class="token literal-property property">Body</span><span class="token operator">:</span> More<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre></div><h4 id="save-the-page"><a href="#save-the-page" class="header-anchor">#</a> Guardar la página </h4> <p>Haz clic en <strong>Guardar</strong> para guardar la página:</p> <ol><li>En el campo <strong>Nombre de la página</strong>, especifica <code>AppPage</code> o cualquier otro nombre para la página;</li> <li>En <strong>Menú</strong>, selecciona <code>default_menu</code>;</li> <li>Especifica la <strong>Condición de cambio</strong> como <code>true</code>;</li> <li>Haz clic en <strong>Confirmar</strong>.</li></ol> <h2 id="part-4-application"><a href="#part-4-application" class="header-anchor">#</a> Parte 4: Aplicación </h2> <p>En la sección anterior, creaste un contrato inteligente, una tabla para almacenar datos y una página de interfaz de usuario básica para mostrar esos datos.</p> <p>En esta sección, determinarás la aplicación final para que tenga una apariencia y operación similar a una aplicación real.</p> <h3 id="menu"><a href="#menu" class="header-anchor">#</a> Menú </h3> <p>La página necesita estar vinculada a un menú, por ejemplo, la página <code>default_page</code> que se muestra en la pestaña <strong>Home</strong> se vincula al menú predeterminado del sistema <code>default_menu</code>.</p> <p>Dado que el tutorial de la aplicación es muy simple (solo tiene una página), no es necesario crear un menú separado para él. Los nuevos elementos de menú en el menú predeterminado son suficientes.</p> <p>Puede definir el menú que se muestra en la página editando las propiedades de la página en <strong>Developer</strong> > <strong>Aplicación</strong> > <strong>APP</strong> > <strong>Página</strong>. Por ejemplo, si su aplicación tiene varias páginas, es posible que necesite crear un menú para navegar entre ellas y asignarlo a todas las páginas de la aplicación.</p> <h4 id="add-a-menu-item"><a href="#add-a-menu-item" class="header-anchor">#</a> Agregar un elemento de menú </h4> <p>En Weaver, al igual que con todos los demás recursos, se pueden crear y editar menús:</p> <ol><li><p>Navega a la pestaña <strong>Developer</strong> > <strong>Menú</strong>;</p> <blockquote><p><img src="/app-tut-menu-list.png" alt="image"></p></blockquote></li> <li><p>Haz clic en el nombre del elemento <code>default_menu</code>;</p> <blockquote><p>El editor se abrirá en una nueva pestaña.</p></blockquote></li> <li><p>Agrega un nuevo elemento de menú al final de la plantilla. Este elemento de menú abrirá una página de la aplicación. El icono proviene del conjunto de iconos <a href="https://fontawesome.com/icons" target="_blank" rel="noopener noreferrer">FontAwesome<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <blockquote><div class="language-js extra-class"><pre class="language-js"><code><span class="token function">MenuItem</span><span class="token punctuation">(</span><span class="token constant">T</span><span class="token literal-property property">ítulo</span><span class="token operator">:</span>Mensajes<span class="token punctuation">,</span> <span class="token constant">P</span><span class="token literal-property property">ágina</span><span class="token operator">:</span><span class="token constant">P</span>áginaDeAplicación<span class="token punctuation">,</span> <span class="token literal-property property">Icono</span><span class="token operator">:</span><span class="token string">"fa fa-envelope"</span><span class="token punctuation">)</span> </code></pre></div></blockquote></li> <li><p>Haz clic en <strong>Guardar</strong>.</p></li></ol> <h4 id="test-the-new-menu-item"><a href="#test-the-new-menu-item" class="header-anchor">#</a> Probar el nuevo elemento de menú </h4> <p>Verificar si la nueva opción de menú es válida:</p> <ol><li><p>Abre la pestaña <strong>Home</strong>;</p></li> <li><p>Haz clic en <strong>Actualizar</strong> en el menú;</p> <blockquote><p>Aparecerá una entrada de elemento con el título <em>Mensajes</em>;</p> <p><img src="/app-tut-menu-messages.png" alt="image"></p></blockquote></li> <li><p>Haz clic en <strong>Mensajes</strong>.</p> <blockquote><p>Se abrirá la página de la aplicación.</p></blockquote></li></ol> <h3 id="send-a-message"><a href="#send-a-message" class="header-anchor">#</a> Enviar un mensaje </h3> <p>Los botones en Logicor pueden ejecutar contratos inteligentes y abrir páginas, dependiendo de los parámetros. La función <a href="/es/topics/templates2.html#button">Button</a> tiene dos parámetros para contratos inteligentes:</p> <ul><li><p><code>Contract</code></p> <blockquote><p>El nombre del contrato inteligente activado.</p></blockquote></li> <li><p><code>Params</code></p> <blockquote><p>Los parámetros de entrada del contrato inteligente.</p></blockquote></li></ul> <h4 id="form"><a href="#form" class="header-anchor">#</a> Formulario </h4> <p>Para enviar datos al contrato inteligente, agregue un formulario a la página de la aplicación. Este formulario debe tener un campo de entrada para el mensaje y un botón que active el contrato AppContract.</p> <p>A continuación se muestra un ejemplo de este tipo de formulario. Está anidado en su propio <a href="/es/topics/templates2.html#div">Div</a>. Colóquelo después del elemento Div que contiene la vista del formulario. El formulario define un campo de entrada <a href="/es/topics/templates2.html#input">Input</a> con un nombre definido <code>message_input</code>. El botón utiliza este nombre para enviar el valor del parámetro <code>Message</code> al contrato. Finalmente, la función <a href="/es/topics/templates2.html#val">Val</a> se utiliza para obtener el valor del campo de entrada.</p> <div class="language-text extra-class"><pre class="language-text"><code>Div(Class: panel panel-primary) { Form() { Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", ) Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)") } } </code></pre></div><p>Es posible que notes que al probar esta nueva función enviando un mensaje, el formulario no se actualiza. Esto se explicará en la sección de <a href="#page-refreshing">actualización de página</a>.</p> <h3 id="form-navigation"><a href="#form-navigation" class="header-anchor">#</a> Navegación en la tabla </h3> <p>En la página, la vista de tabla predeterminada solo muestra 25 entradas en la primera página. Agrega una navegación sencilla que permita al usuario navegar por todas las entradas de la tabla.</p> <h4 id="navigation-buttons"><a href="#navigation-buttons" class="header-anchor">#</a> Botones de navegación </h4> <p>Este navegador utilizará dos botones. Cada botón volverá a cargar la página de la aplicación y pasará parámetros a ella.</p> <blockquote><ul><li>El botón <em>Anterior</em> mostrará los primeros 25 elementos. Si no hay más elementos, el botón no se mostrará;</li> <li>El botón <em>Siguiente</em> mostrará los siguientes 25 elementos. Si no hay más elementos, el botón no se mostrará.</li></ul></blockquote> <h4 id="variables"><a href="#variables" class="header-anchor">#</a> Variables </h4> <p>La navegación requiere dos variables para almacenar el estado de la vista de tabla:</p> <blockquote><ul><li><p><code>#table_view_offset#</code></p> <blockquote><p>Esta variable almacena el desplazamiento actual de la vista de tabla.</p> <p>Los botones de navegación lo pasarán como parámetro al recargar la página.</p></blockquote></li> <li><p><code>#record_count#</code></p> <blockquote><p>Esta variable almacena el número total de entradas en la tabla.</p> <p>Se calculará este valor.</p></blockquote></li></ul></blockquote> <h4 id="entry-count"><a href="#entry-count" class="header-anchor">#</a> Recuento de entradas </h4> <p>Para calcular <code>#record_count#</code>, modifique la llamada existente a la función <a href="/es/topics/templates2.html#dbfind">DBFind</a>. La variable especificada en la llamada <code>.count()</code> almacenará el recuento de entradas.</p> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count) </code></pre></div></blockquote> <h4 id="table-offset"><a href="#table-offset" class="header-anchor">#</a> Desplazamiento de la tabla </h4> <p>Debe pasar el desplazamiento de la vista de tabla a la página al abrir la página. Si <code>#table_view_offset#</code> no tiene un valor, especifíquelo como <code>0</code>.</p> <p>Agregue el siguiente código en la parte superior de la página.</p> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } </code></pre></div></blockquote> <p>Modificar de nuevo la llamada a la función <a href="/es/topics/templates2.html#dbfind">DBFind</a>. Esta vez debe utilizar el nuevo desplazamiento de la vista de tabla.</p> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#) </code></pre></div></blockquote> <h4 id="button-code"><a href="#button-code" class="header-anchor">#</a> Código del botón </h4> <p>Encuentra la llamada a la función <a href="/es/topics/templates2.html#div">Div</a> que define el pie de página: <code>Div(Class:panel-footer text-right)</code>. Agrega el código del botón dentro de ella.</p> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>Div(Class: panel-footer text-right) { } </code></pre></div></blockquote> <p>El botón "Anterior" solo se mostrará si hay al menos un botón "Siguiente" al que volver. Cuando se agrega un botón, se calcula el nuevo desplazamiento de la vista de tabla de la página <code>offset_previous</code>. El parámetro se pasa al parámetro <code>PageParams</code> al volver a abrir la página.</p> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>If(#table_view_offset# >= 25) { SetVar(offset_previous, Calculate(#table_view_offset# - 25)) Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#") } </code></pre></div></blockquote> <p>Solo se mostrará el botón <em>Siguiente</em> si el número total de registros es mayor que la cantidad mostrada en la página. Cuando se agrega un botón, se calculará el nuevo desplazamiento de la vista de tabla de la página <code>offset_next</code>. El parámetro se pasa al parámetro <code>PageParams</code> al volver a abrir la página.</p> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>If(#record_count# >= Calculate(#table_view_offset# + 25)) { SetVar(offset_next, Calculate(#table_view_offset# + 25)) Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#") } </code></pre></div></blockquote> <p><img src="/app-tut-navigation.png" alt="image"></p> <p>Después de agregar el botón, guarda la página y prueba desde el elemento de menú <em>Home</em> > <em>Mensajes</em>.</p> <h4 id="page-refreshing"><a href="#page-refreshing" class="header-anchor">#</a> Actualizar la página </h4> <p>La última funcionalidad implementada es la actualización automática de la tabla en la página, cuando el usuario envía un nuevo mensaje, éste debe mostrarse en la tabla.</p> <p>Además de ejecutar el contrato, también se puede lograr esto al volver a abrir la página actual mediante el botón <em>Send</em>. Se debe pasar el parámetro <code>#table_view_offset#</code> a esa página sin realizar ningún cambio.</p> <p>Agregue los parámetros <code>Page</code> y <code>PageParams</code> al botón <em>Send</em>, como se muestra en el siguiente código:</p> <div class="language-text extra-class"><pre class="language-text"><code>Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#") </code></pre></div><h3 id="full-page-code-2"><a href="#full-page-code-2" class="header-anchor">#</a> Código de página completa </h3> <p>Esta parte describe muchos cambios en la página de la aplicación. Aquí está el código completo de la página de la aplicación.</p> <div class="language-text extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp).Count(record_count).Offset(#table_view_offset#) Div(Class: panel panel-primary) { Div(Class: panel-heading, Body: Table block) Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) Div(Class: panel-footer text-right) { If(#table_view_offset# >= 25) { SetVar(offset_previous, Calculate(#table_view_offset# - 25)) Button(Class: btn btn-primary, Body: Previous, Page: AppPage, PageParams:"table_view_offset=#offset_previous#") } If(#record_count# >= Calculate(#table_view_offset# + 25)) { SetVar(offset_next, Calculate(#table_view_offset# + 25)) Button(Class: btn btn-primary, Body: Next, Page: AppPage, PageParams:"table_view_offset=#offset_next#") } } } Div(Class: panel panel-primary) { Form() { Input(Name: message_input, Class: form-control, Type: text, Placeholder: "Write a message...", ) Button(Class: btn btn-primary, Body: Send, Contract: AppContract, Params: "Message=Val(message_input)", Page:AppPage, PageParams:"table_view_offset=#table_view_offset#") } } </code></pre></div><h2 id="conclusions"><a href="#conclusions" class="header-anchor">#</a> Conclusiones </h2> <p>Este tutorial presentará las aplicaciones básicas del ecosistema. No aborda otros temas importantes para los desarrolladores de aplicaciones, como el diseño de la interfaz, la gestión de permisos de acceso y la interacción entre aplicaciones y recursos. Para obtener más información sobre estos temas avanzados, consulte otros documentos.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/IBAX-io/documentation/edit/master/docs/es/tutorials/app_tutorial.md" target="_blank" rel="noopener noreferrer">Edita esta página en GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Última actualización:</span> <span class="time">4/7/2023, 11:08:51</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/es/tutorials/tutorial.html"> Tutorial para desarrolladores de redes IBAX </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/assets/js/app.d049f7ab.js" defer></script><script src="/assets/js/2.8d94a0db.js" defer></script><script src="/assets/js/47.faa28289.js" defer></script> </body> </html>