Tutoriel pour le développement d'applications </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#the-goal" class="sidebar-link">L'objectif </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#part-1-the-environment" class="sidebar-link">Partie 1 : L'Environnement </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#part-2-contract" class="sidebar-link">Partie 2: Contrat </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#creator-account" class="sidebar-link">Compte créateur </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#new-application" class="sidebar-link">Nouvelle application </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#new-database-table" class="sidebar-link">Nouvelle table de base de données </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#new-contract" class="sidebar-link">Nouveau contrat </a></li></ul></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#part-3-page" class="sidebar-link">Partie 3: Page </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#new-field" class="sidebar-link">Nouveau champ </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#update-the-contract" class="sidebar-link">Mettre à jour le contrat </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#page" class="sidebar-link">Page </a></li></ul></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#part-4-application" class="sidebar-link">Partie 4: Application </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#menu" class="sidebar-link">Menu </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#send-a-message" class="sidebar-link">Envoyer un message </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#form-navigation" class="sidebar-link">Navigation du formulaire </a></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#full-page-code-2" class="sidebar-link">Code de la page complète </a></li></ul></li><li class="sidebar-sub-header"><a href="/fr/tutorials/app_tutorial.html#conclusions" class="sidebar-link">Conclusions (fr: Conclusions) </a></li></ul></li><li><a href="/fr/tutorials/tutorial.html" class="sidebar-link">Tutoriel de développement 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> Tutoriel pour le développement d'applications </h1> <p>In this section, we will show you how to develop a simple application on the IBAX Network.</p> <ul><li><a href="#the-goal">L'objectif</a></li> <li><a href="#part-1-the-environment">Partie 1: L'environnement</a></li> <li><a href="#part-2-contract">Partie 2: Contrat</a> <ul><li><a href="#creator-account">Compte créateur</a></li> <li><a href="#new-application">Nouvelle application</a></li> <li><a href="#new-database-table">Nouvelle table de base de données</a></li> <li><a href="#new-contract">Nouveau contrat</a> <ul><li><a href="#contract-code">Code du contrat</a></li> <li><a href="#create-a-contract">Créer un contrat</a></li> <li><a href="#contract-name">Nom du contrat</a></li> <li><a href="#data">Données</a></li> <li><a href="#conditions">Conditions</a></li> <li><a href="#action">Action</a></li> <li><a href="#full-contract-code">Code complet du contrat</a></li> <li><a href="#save-and-run">Enregistrer et exécuter</a></li></ul></li></ul></li> <li><a href="#part-3-page">Partie 3: Page</a> <ul><li><a href="#new-field">Nouveau champ</a></li> <li><a href="#update-the-contract">Mettre à jour le contrat</a></li> <li><a href="#page">Page</a> <ul><li><a href="#designer-views">Vues du concepteur</a></li> <li><a href="#developer-view">Vue développeur</a></li> <li><a href="#fetch-data-from-the-database-table">Récupérer des données depuis la table de base de données</a></li> <li><a href="#full-page-code-1">Code complet de la page</a></li> <li><a href="#save-the-page">Enregistrer la page</a></li></ul></li></ul></li> <li><a href="#part-4-application">Partie 4: Application</a> <ul><li><a href="#menu">Menu</a> <ul><li><a href="#add-a-menu-item">Ajouter un élément de menu</a></li> <li><a href="#test-the-new-menu-item">Tester le nouvel élément de menu</a></li></ul></li> <li><a href="#send-a-message">Envoyer un message</a> <ul><li><a href="#form">Formulaire</a></li></ul></li> <li><a href="#form-navigation">Navigation du formulaire</a> <ul><li><a href="#navigation-buttons">Boutons de navigation</a></li> <li><a href="#variables">Variables</a></li> <li><a href="#entry-count">Nombre d'entrées</a></li> <li><a href="#table-offset">Décalage de la table</a></li> <li><a href="#button-code">Code du bouton</a></li> <li><a href="#page-refreshing">Actualisation de la page</a></li></ul></li> <li><a href="#full-page-code-2">Code complet de la page</a></li></ul></li> <li><a href="#conclusions">Conclusions</a></li></ul> <h2 id="the-goal"><a href="#the-goal" class="header-anchor">#</a> L'objectif </h2> <p>L'application commence par des fonctions simples mais devient de plus en plus complexe au fur et à mesure du tutoriel.</p> <p>Dans la version finale de l'application, quelques messages simples (chaînes de caractères) sont stockés dans une table de base de données, qui contient les horodatages et les identifiants de compte des expéditeurs. Les utilisateurs peuvent consulter la liste des messages et ajouter un nouveau message depuis la page de l'application, accessible depuis le menu de l'écosystème.</p> <h2 id="part-1-the-environment"><a href="#part-1-the-environment" class="header-anchor">#</a> Partie 1 : L'Environnement </h2> <p><strong>Weaver</strong></p> <p>En tant que seul client d'IBAX, Weaver fournit des fonctions pour tous les utilisateurs et les rôles de l'écosystème. Avec lui, les développeurs d'applications peuvent développer et tester leurs applications, les administrateurs d'écosystème peuvent gérer leurs écosystèmes, tandis que les utilisateurs peuvent interagir avec les écosystèmes.</p> <p>Dans ce tutoriel, vous allez coder des contrats, des modèles de pages et effectuer toutes les autres actions dans Weaver. Weaver offre également un moyen de restaurer, sauvegarder et exécuter des codes de contrat, de gérer les structures de données (tables de base de données), d'attribuer des permissions d'accès et de créer des applications.</p> <p>Chaque nœud a sa propre instance de Weaver.</p> <h2 id="part-2-contract"><a href="#part-2-contract" class="header-anchor">#</a> Partie 2: Contrat </h2> <p>Votre première application simple est "Bonjour, le monde !".</p> <div class="language- extra-class"><pre class="language-text"><code>> In this application, strings will be stored in a database table, and there is not a user page. </code></pre></div><h3 id="creator-account"><a href="#creator-account" class="header-anchor">#</a> Compte créateur </h3> <p>Les comptes avec le rôle de développeur se verront attribuer les privilèges "root" de l'écosystème. Par défaut, ce rôle peut accéder à toutes les actions. Dans un nouvel écosystème, le compte créateur se verra attribuer le rôle d'administrateur, que vous devez utiliser pour apporter des modifications majeures à l'écosystème, telles que la création de nouvelles applications et de nouvelles tables de base de données.</p> <p>Connectez-vous à l'écosystème en utilisant le compte créateur.</p> <h3 id="new-application"><a href="#new-application" class="header-anchor">#</a> Nouvelle application </h3> <p>Une fois connecté en tant que créateur de l'écosystème, vous pouvez créer une nouvelle application.</p> <p>Créer une nouvelle application :</p> <blockquote><ol><li><p>Allez dans l'onglet <strong>Développeur</strong> ;</p></li> <li><p>Sélectionnez <strong>Application</strong> dans le menu à gauche ;</p></li> <li><p>Sélectionnez <strong>Nouveau</strong> sur la page de l'application ;</p></li> <li><p>Spécifiez le nom de l'application dans le champ <strong>APP</strong> ;</p></li> <li><p>Définissez les <strong>Conditions</strong> sur <code>true</code> ;</p> <blockquote><p><code>true</code> signifie que n'importe qui peut apporter des modifications à l'application ;</p> <p>Une autre option est <code>ContractConditions("MainCondition")</code>, ce qui signifie que personne ne peut apporter de modifications à l'application, sauf le créateur.</p></blockquote></li> <li><p>Votre application sera affichée dans la liste des applications. Cliquez sur le champ Nom d'une application spécifique pour l'activer.</p></li></ol> <div class="language- extra-class"><pre class="language-text"><code>Vous pouvez accéder aux ressources pertinentes en cliquant sur une application dans l'onglet Développeur, sans impact sur l'écosystème. Peu importe celle que vous choisissez, toutes les applications de l'écosystème restent disponibles. </code></pre></div></blockquote> <h3 id="new-database-table"><a href="#new-database-table" class="header-anchor">#</a> Nouvelle table de base de données </h3> <p>Pour stocker les données, créez une table de base de données pour l'application dans Weaver.</p> <p>Créez une table de données :</p> <blockquote><ol><li><p>Dans l'onglet <strong>Développeur</strong>, sélectionnez <strong>Application</strong> > <strong>APP</strong> > <strong>Table de base de données</strong> ;</p> <blockquote><p>Toutes les tables de base de données liées à l'application sélectionnée seront affichées ici. Si la liste est vide, cela signifie qu'aucune table de base de données n'a encore été créée pour votre application.</p></blockquote></li> <li><p>Cliquez sur <strong>Nouveau</strong> ;</p> <blockquote><p>Weaver vous montrera la page pour créer une nouvelle table de base de données.</p></blockquote></li> <li><p>Spécifiez le nom dans le champ <strong>Nom</strong> ;</p> <blockquote><p>Dans ce tutoriel, le nom de la table de base de données sera <code>apptable</code>.</p></blockquote></li> <li><p>Ajoutez la colonne <code>message</code>, définissez son type comme <code>Texte</code> ;</p> <blockquote><p>Cette table doit avoir deux colonnes : <code>id</code> (prédéfini) et <code>message</code>. Vous allez ajouter d'autres colonnes plus tard. <img src="/app-tut-table.png" alt="image"></p></blockquote></li></ol></blockquote> <blockquote><ol start="5"><li><p>En ce qui concerne les autorisations de lecture et d'écriture, définissez chaque champ sur <code>true</code> ;</p> <blockquote><p>Cela permettra à n'importe qui d'insérer, de mettre à jour des entrées, d'ajouter des colonnes et de lire les données d'entrée sur la table de base de données ;</p> <p>En option, vous pouvez réserver les autorisations de lecture et d'écriture au compte créateur. Dans ce cas, définissez ce champ sur <code>ContractConditions("MainCondition")</code>.</p></blockquote></li></ol></blockquote> <h3 id="new-contract"><a href="#new-contract" class="header-anchor">#</a> Nouveau contrat </h3> <h4 id="contract-code"><a href="#contract-code" class="header-anchor">#</a> Code de contrat </h4> <p>Chaque contrat se compose de trois parties. Pour plus de détails, veuillez consulter : <a href="/fr/topics/script.html#structure-du-contrat">Structure du contrat</a>.</p> <h4 id="create-a-contract"><a href="#create-a-contract" class="header-anchor">#</a> Créer un contrat </h4> <ol><li><p>Dans l'onglet <strong>Développeur</strong>, sélectionnez <strong>Application</strong> > <strong>APP</strong> > <strong>Contrat</strong>;</p> <blockquote><p>Tous les contrats liés à l'application seront affichés ici. La liste est vide pour les nouvelles applications.</p></blockquote></li> <li><p>Cliquez sur Nouveau;</p> <blockquote><p>Un nouveau modèle de contrat sera affiché dans l'éditeur.</p></blockquote></li></ol> <p>Un modèle de contrat vide est affiché comme suit :</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> Nom du contrat </h4> <p>D'abord, veuillez préciser le nom du contrat.</p> <div class="language-js extra-class"><pre class="language-js"><code>contract AppContract <span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre></div><h4 id="data"><a href="#data" class="header-anchor">#</a> Données </h4> <p>Remplissez la section <code>data</code>.</p> <p>Dans l'exemple suivant, <code>Message</code> fait référence au nom de la variable, tandis que <code>string</code> fait référence au type de variable.</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> Conditions </h4> <p>Remplissez la section <code>conditions</code>. Une condition de vérification simple consiste à éviter les chaînes vides. Si la longueur de <code>Message</code> est <code>0</code>, un message d'avertissement prédéfini sera déclenché lors de la mise en œuvre du contrat.</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> z </h4> <p>Remplissez la section <code>action</code>. Une action simple consiste à écrire <code>Message</code> dans le tableau de données.</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> Code complet du contrat </h4> <p>Le code complet du contrat est présenté ci-dessous.</p> <p>Tous les contrats dans IBAX seront construits de cette manière, y compris les sections <code>data</code>, <code>conditions</code> et <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> Enregistrer et exécuter </h4> <p>Maintenant, nous nous préparons à tester le contrat :</p> <blockquote><ol><li><p>Cliquez sur Enregistrer dans le menu de l'éditeur ;</p> <blockquote><p>Cela mettra à jour le code du contrat et la version mise à jour sera disponible pour tous les nœuds du réseau.</p></blockquote></li> <li><p>Cliquez sur Exécuter dans le menu de l'éditeur ;</p> <blockquote><p>Cela affichera la page Exécuter le contrat.</p></blockquote></li> <li><p>Dans la page Exécuter le contrat, remplissez les paramètres d'entrée du contrat ;</p> <blockquote><p>Comme ce contrat a un paramètre <code>Message</code>, définissez <code>Message</code> dans le champ Clé et <code>Bonjour, le monde</code> dans le champ Valeur.</p> <p><img src="/app-tut-execute.png" alt="image"></p></blockquote></li> <li><p>Cliquez sur Exécuter.</p> <blockquote><p>Le résultat sera affiché à droite.</p></blockquote></li></ol></blockquote> <p>Si vous avez ajouté avec succès des chaînes, alors le résultat contiendra l'ID du bloc et le code de résultat pour présenter le changement des transactions.</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> Partie 3: Page </h2> <p>Lorsque le contrat devient effectif, il est temps de l'étendre à quelque chose d'utile. Dans cette partie, vous allez implémenter l'interface utilisateur et d'autres fonctions.</p> <div class="language- extra-class"><pre class="language-text"><code>Dans cette application, les chaînes de caractères seront stockées dans une table de base de données, comme des entrées dans un journal. Chaque chaîne aura un auteur et une horodatage. Les utilisateurs peuvent consulter la liste des chaînes stockées sur la page de l'application, qui est affichée sous la forme d'un formulaire simple. </code></pre></div><h3 id="new-field"><a href="#new-field" class="header-anchor">#</a> Nouveau champ </h3> <p>Comme précédemment, modifiez la table de la base de données dans l'onglet <strong>Développeur</strong> > <strong>Application</strong> > <strong>APP</strong> > <strong>Table de base de données</strong> ;</p> <p>Ajoutez les champs suivants dans <code>apptable</code> :</p> <ul><li><code>author</code>, type de champ <code>Nombre</code>, définissez <strong>Changer</strong> sur <code>true</code>;</li></ul> <p>Ce champ stockera l'identifiant du compte de l'auteur.</p> <ul><li><code>timestamp</code>, type de champ <code>Date/Heure</code>, définissez <strong>Changer</strong> sur <code>true</code>.</li></ul> <h3 id="update-the-contract"><a href="#update-the-contract" class="header-anchor">#</a> Mettre à jour le contrat </h3> <p>Nous allons mettre à jour le code du contrat pour gérer l'ID de l'auteur et le timestamp.</p> <p>L'ID de l'auteur est l'ID du compte de l'écosystème. Le timestamp est la date et l'heure d'exécution du contrat au format Unix.</p> <p>Étant donné que les deux valeurs sont fournies par les <a href="/fr/topics/script.html#variables">Variables prédéfinies</a> et qu'il n'est pas nécessaire de les saisir ou de les vérifier, elles ne peuvent être mises à jour que dans la partie action.</p> <p>Mettez à jour le contrat pour écrire l'ID de l'auteur et le timestamp dans la table de la base de données lors de l'ajout d'un message, où l'ID de l'auteur est défini par <code>$key_id</code>, tandis que le timestamp est défini par <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> Page </h3> <p>Pour la page d'application, c'est une page simple qui affiche les messages stockés dans la table de la base de données.</p> <p>Comme pour toutes les autres ressources, vous pouvez créer la page UI dans Weaver :</p> <ol><li><p>Accédez à l'onglet <strong>Développeur</strong>, cliquez sur <strong>Application</strong> > <strong>APP</strong> > <strong>Page</strong> ;</p></li> <li><p>Cliquez sur <strong>Nouveau</strong> ;</p> <blockquote><p>Le concepteur visuel s'ouvrira dans un nouvel onglet.</p></blockquote></li></ol> <h4 id="designer-views"><a href="#designer-views" class="header-anchor">#</a> Vues du concepteur </h4> <p>La page par défaut est vide. Vous pouvez utiliser la structure prédéfinie pour remplir rapidement la page.</p> <blockquote><p><img src="/app-tut-designer.png" alt="image"></p></blockquote> <p>Créez une table de base :</p> <ol><li><p>Dans le sélecteur de vue à droite, cliquez sur Concepteur ;</p> <blockquote><p>La vue sera basculée vers le concepteur visuel.</p></blockquote></li> <li><p>Dans le menu à gauche, sélectionnez Tableau avec en-tête et faites-le glisser sur la page.</p> <blockquote><p>Un tableau avec plusieurs éléments s'affichera sur la page.</p></blockquote></li></ol> <h4 id="developer-view"><a href="#developer-view" class="header-anchor">#</a> Vue du développeur </h4> <p>Comme la page utilisateur d'IBAX est codée avec un <a href="/fr/topics/templates2.html">langage de modèle</a>, veuillez passer en mode Développeur lorsque vous écrivez le code de la page.</p> <blockquote><p><img src="/app-tut-developer.png" alt="image"></p></blockquote> <p>Passer à la vue Développeur.</p> <ol><li><p>Dans le sélecteur de vue à droite, cliquez sur <strong>Développeur</strong>.</p> <blockquote><p>La vue sera basculée vers l'éditeur avec un onglet contenant le code de la page.</p></blockquote></li></ol> <h4 id="fetch-data-from-the-database-table"><a href="#fetch-data-from-the-database-table" class="header-anchor">#</a> Récupérer des données à partir de la table de la base de données </h4> <p>Jusqu'à présent, rien n'a été fait avec le modèle de page. Dans la suite, nous mettrons à jour le code pour permettre à la page d'afficher les données de <code>apptable</code>.</p> <ol><li><p>Pour demander des données à partir de la table de la base de données avec la fonction <a href="/fr/topics/script.html#dbfind">DBFind</a> ;</p> <blockquote><p>Dans l'exemple suivant, cet appel de fonction est utilisé pour récupérer des données à partir de <code>apptable</code>. Les données seront placées dans la source <code>src_table</code> et triées par le champ de timestamp. <code>src_table</code> sera ensuite utilisée comme source de données pour la page en vue tableau.</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>Pour afficher les données de <code>src_table</code>, spécifiez-le en tant que source de données et en-tête dans la fonction <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>Dans le sélecteur de vue à droite, cliquez sur <strong>Aperçu</strong> pour vérifier si les données sont affichées correctement.</p></li></ol> <h4 id="full-page-code-1"><a href="#full-page-code-1" class="header-anchor">#</a> Code de la page complète </h4> <p>Le code complet de cette partie est le suivant. Cette page de base sera développée ultérieurement.</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> Enregistrer la page </h4> <p>Cliquez sur <strong>Enregistrer</strong> pour sauvegarder la page :</p> <ol><li>Spécifiez <code>AppPage</code> ou tout autre nom pour la page dans le champ <strong>Nom de la page</strong> ;</li> <li>Sélectionnez <code>default_menu</code> dans le <strong>Menu</strong> ;</li> <li>Définissez les <strong>Conditions</strong> à <code>true</code> ;</li> <li>Cliquez sur <strong>OK</strong>.</li></ol> <h2 id="part-4-application"><a href="#part-4-application" class="header-anchor">#</a> Partie 4: Application </h2> <p>Dans les sections précédentes, vous avez créé un contrat, une table pour stocker des données et une page d'interface utilisateur de base pour afficher ces données.</p> <p>Dans cette partie, vous allez finaliser l'application pour que son apparence et ses actions soient similaires à celles d'une application réelle.</p> <h3 id="menu"><a href="#menu" class="header-anchor">#</a> Menu </h3> <p>La page doit être liée à un menu, par exemple, la page <code>default_page</code> affichée dans l'onglet <strong>Accueil</strong> est liée au menu par défaut de l'écosystème <code>default_menu</code>.</p> <p>Comme ce tutoriel d'application est très simple (n'ayant qu'une seule page), il n'est pas nécessaire de créer un menu séparé pour cela. Le nouvel élément de menu dans le menu par défaut est suffisant.</p> <blockquote><p>Vous pouvez définir le menu de la page en modifiant les propriétés de la page dans l'onglet <strong>Développeur</strong> > <strong>Application</strong> > <strong>APP</strong> > <strong>Page</strong>. Par exemple, si votre application comporte plusieurs pages, vous devrez peut-être créer un menu pour naviguer entre ces pages et l'assigner à toutes les pages de l'application.</p></blockquote> <h4 id="add-a-menu-item"><a href="#add-a-menu-item" class="header-anchor">#</a> Ajouter un élément de menu </h4> <p>Comme toutes les autres ressources, les menus peuvent être créés et modifiés dans Weaver :</p> <ol><li><p>Accédez à l'onglet <strong>Développeur</strong> > <strong>Menu</strong> ;</p> <blockquote><p><img src="/app-tut-menu-list.png" alt="image"></p></blockquote></li> <li><p>Cliquez sur le nom de l'entrée <code>default_menu</code> ;</p> <blockquote><p>Un nouvel onglet s'ouvrira dans l'éditeur.</p></blockquote></li> <li><p>Ajoutez un nouvel élément de menu à la fin du modèle, qui sera lié à la page de l'application et dont l'icône provient de l'ensemble d'icônes <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>Title<span class="token operator">:</span>Messages<span class="token punctuation">,</span> <span class="token literal-property property">Page</span><span class="token operator">:</span>AppPage<span class="token punctuation">,</span> <span class="token literal-property property">Icon</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>Cliquez sur <strong>Enregistrer</strong>.</p></li></ol> <h4 id="test-the-new-menu-item"><a href="#test-the-new-menu-item" class="header-anchor">#</a> Tester le nouveau plat du menu </h4> <p>Vérifiez si le nouvel élément de menu est valide :</p> <ol><li><p>Ouvrez l'onglet <strong>Accueil</strong> ;</p></li> <li><p>Cliquez sur <strong>Actualiser</strong> dans le menu ;</p> <blockquote><p>Une entrée avec un en-tête Messages apparaîtra ;</p> <p><img src="/app-tut-menu-messages.png" alt="image"></p></blockquote></li> <li><p>Cliquez sur <strong>Messages</strong>.</p> <p>La page de l'application s'ouvrira.</p></li></ol> <h3 id="send-a-message"><a href="#send-a-message" class="header-anchor">#</a> Envoyer un message </h3> <p>Les boutons dans Logicor peuvent être utilisés pour implémenter des contrats et ouvrir des pages, en fonction des paramètres.</p> <p>La fonction <a href="/fr/topics/templates2.html#button">Button</a> a deux paramètres de contrat :</p> <ul><li><p><code>Contract</code></p> <p>Nom du contrat activé.</p></li> <li><p><code>Params</code></p> <p>Paramètres d'entrée du contrat.</p></li></ul> <h4 id="form"><a href="#form" class="header-anchor">#</a> Formulaire </h4> <p>Pour envoyer des données au contrat, ajoutez un formulaire sur la page de l'application, qui doit comporter un champ de saisie pour un message et un bouton pour activer le contrat AppContract.</p> <p>Voici un exemple de ce type de formulaire. Il est imbriqué dans sa propre <a href="/fr/topics/templates2.html#div">Div</a>. Placez-le après l'élément Div qui contient la vue du formulaire, qui définit que le champ <a href="/fr/topics/templates2.html#input">Input</a> a un nom prédéfini <code>message_input</code>. Le bouton utilise ce nom pour envoyer la valeur de <code>Message</code> au contrat. Enfin, la fonction <a href="/fr/topics/templates2.html#calling-contracts">Val</a> est utilisée pour obtenir la valeur du champ de saisie.</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>Vous pouvez remarquer que lors de la test de cette nouvelle fonctionnalité en envoyant un message, le formulaire ne se rafraîchit pas. Cela sera introduit dans <a href="#page-refreshing">page refresh</a>.</p> <h3 id="form-navigation"><a href="#form-navigation" class="header-anchor">#</a> Navigation du formulaire </h3> <p>Sous la vue par défaut, le formulaire sur la page ne peut afficher que 25 entrées sur la première page. Par conséquent, vous pouvez ajouter quelques boutons simples pour permettre aux utilisateurs de naviguer vers toutes les entrées du formulaire.</p> <h4 id="navigation-buttons"><a href="#navigation-buttons" class="header-anchor">#</a> Boutons de navigation </h4> <p>Il y aura deux boutons de navigation, et chacun d'eux pourra recharger la page de l'application et lui transmettre les paramètres.</p> <blockquote><ul><li>Le bouton <em>Précédent</em> affichera les 25 premières entrées. S'il n'y a pas d'autres entrées, le bouton ne sera pas affiché ;</li> <li>Le bouton <em>Suivant</em> affichera les 25 entrées suivantes. S'il n'y a pas d'autres entrées, le bouton ne sera pas affiché.</li></ul></blockquote> <h4 id="variables"><a href="#variables" class="header-anchor">#</a> Variables </h4> <p>Les boutons de navigation nécessitent deux variables pour stocker les états de la vue du tableau :</p> <blockquote><ul><li><p><code>#table_view_offset#</code></p> <blockquote><p>Cette variable stocke le décalage de la vue du tableau actuelle.</p> <p>Les boutons de navigation le transmettront en tant que paramètre lors du rechargement de la page.</p></blockquote></li> <li><p><code>#record_count#</code></p> <blockquote><p>Cette variable stocke le nombre total d'entrées dans le tableau.</p></blockquote> <blockquote><p>La valeur sera calculée.</p></blockquote></li></ul></blockquote> <h4 id="entry-count"><a href="#entry-count" class="header-anchor">#</a> Nombre d'entrées </h4> <p>Pour compter <code>#record_count#</code>, veuillez modifier l'appel de la fonction <a href="/fr/topics/script.html#dbfind">DBFind</a> existante. La variable spécifiée dans l'appel <code>.count()</code> stockera le nombre d'entrées.</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> Décalage de la table </h4> <p>La décalage de la vue de la table doit être transmis à la page lors de son ouverture. Si <code>#table_view_offset#</code> n'obtient pas de valeur, définissez-le à 0.</p> <p>Ajoutez le code suivant en haut de la page.</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>Modifiez à nouveau l'appel de la fonction <a href="/fr/topics/script.html#dbfind">DBFind</a>. Cette fois-ci, utilisez le nouvel offset de la vue de table.</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> Code du bouton </h4> <p>Trouvez l'appel de fonction <a href="/fr/topics/templates2.html#div">Div</a> qui définit le pied de page : <code>Div(Class:panel-footer text-right)</code>. Ajoutez le code du bouton à l'intérieur.</p> <blockquote><div class="language-text extra-class"><pre class="language-text"><code>Div(Class: panel-footer text-right) { } </code></pre></div></blockquote> <p>Le bouton <em>Précédent</em> n'apparaîtra que s'il y a au moins un suivant à retourner. Lors de l'ajout d'un bouton, le décalage <code>offset_previous</code> de la nouvelle vue de tableau de la page sera calculé. Les paramètres sont transmis à <code>PageParams</code> de la page réouverte.</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>Le bouton Suivant ne sera affiché que lorsque le nombre total d'enregistrements est supérieur au nombre affiché sur la page. Lorsqu'un bouton est ajouté, le nouvel offset de la vue de tableau <code>offset_next</code> de la page sera calculé. Les paramètres sont transmis à <code>PageParams</code> de la page réouverte.</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>Après avoir ajouté ces boutons, enregistrez la page et testez-la à partir du menu Accueil > Messages.</p> <h4 id="page-refreshing"><a href="#page-refreshing" class="header-anchor">#</a> Actualisation de la page </h4> <p>La dernière fonction à implémenter consiste à mettre à jour automatiquement le tableau sur la page. Lorsque les utilisateurs envoient un nouveau message, il doit être affiché dans le tableau.</p> <p>En plus de mettre en œuvre le contrat, vous pouvez également utiliser le bouton Envoyer pour rouvrir la page actuelle afin d'obtenir le même résultat. <code>#table_view_offset#</code> doit être transmis à la page sans aucun changement.</p> <p>Ajoutez <code>Page</code> et <code>PageParams</code> au bouton Envoyer, le code est le suivant:</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> Code de la page complète </h3> <p>Cette partie décrit de nombreux changements apportés à la page de candidature. Voici le code complet de la page de candidature.</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> Conclusions (fr: Conclusions) </h2> <p>Au lieu de développer d'autres sujets importants pour les développeurs d'applications, tels que les styles de mise en page, la gestion des autorisations d'accès et l'interaction entre les applications et les ressources, ce tutoriel présente comment créer une application de base pour un écosystème. Pour plus d'informations sur ces sujets avancés, consultez d'autres documents pertinents.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/IBAX-io/documentation/edit/master/docs/fr/tutorials/app_tutorial.md" target="_blank" rel="noopener noreferrer">Modifier cette page sur 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">Dernière mise à jour:</span> <span class="time">06/07/2023 18:59:03</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/fr/tutorials/tutorial.html"> Tutoriel de développement 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/65.72ffd13d.js" defer></script> </body> </html>