애플리케이션 개발 튜토리얼 </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#the-goal" class="sidebar-link">목표 (The Goal) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#part-1-the-environment" class="sidebar-link">파트 1: 환경 설정 (Part 1: The Environment) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#part-2-contract" class="sidebar-link">파트 2: 컨트랙트 (Part 2: Contract) </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#creator-account" class="sidebar-link">생성자 계정 (Creator account) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#new-application" class="sidebar-link">새로운 애플리케이션 (New application) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#new-database-table" class="sidebar-link">새로운 데이터베이스 테이블 (New database table) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#new-contract" class="sidebar-link">새로운 컨트랙트 (New contract) </a></li></ul></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#part-3-page" class="sidebar-link">파트 3: 페이지 (Part 3: Page) </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#new-field" class="sidebar-link">새로운 필드 (New field) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#update-the-contract" class="sidebar-link">컨트랙트 업데이트 (Update the contract) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#page" class="sidebar-link">페이지 (Page) </a></li></ul></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#part-4-application" class="sidebar-link">파트 4: 애플리케이션 (Part 4: Application) </a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#menu" class="sidebar-link">메뉴 (Menu) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#send-a-message" class="sidebar-link">메시지 보내기 (Send a message) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#form-navigation" class="sidebar-link">폼 내비게이션 (Form navigation) </a></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#full-page-code-2" class="sidebar-link">전체 페이지 코드 (Full page code) </a></li></ul></li><li class="sidebar-sub-header"><a href="/kr/tutorials/app_tutorial.html#conclusions" class="sidebar-link">결론 (Conclusions) </a></li></ul></li><li><a href="/kr/tutorials/tutorial.html" class="sidebar-link">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> 애플리케이션 개발 튜토리얼 </h1> <p>이 섹션에서는 IBAX 네트워크에서 간단한 애플리케이션을 개발하는 방법을 안내합니다.</p> <ul><li><a href="#the-goal">목표</a></li> <li><a href="#part-1-the-environment">파트 1: 환경 설정</a></li> <li><a href="#part-2-contract">파트 2: 컨트랙트</a> <ul><li><a href="#creator-account">생성자 계정</a></li> <li><a href="#new-application">새로운 애플리케이션</a></li> <li><a href="#new-database-table">새로운 데이터베이스 테이블</a></li> <li><a href="#new-contract">새로운 컨트랙트</a> <ul><li><a href="#contract-code">컨트랙트 코드</a></li> <li><a href="#create-a-contract">컨트랙트 생성</a></li> <li><a href="#contract-name">컨트랙트 이름</a></li> <li><a href="#data">데이터</a></li> <li><a href="#conditions">조건</a></li> <li><a href="#action">액션</a></li> <li><a href="#full-contract-code">전체 컨트랙트 코드</a></li> <li><a href="#save-and-run">저장 및 실행</a></li></ul></li></ul></li> <li><a href="#part-3-page">파트 3: 페이지</a> <ul><li><a href="#new-field">새로운 필드</a></li> <li><a href="#update-the-contract">컨트랙트 업데이트</a></li> <li><a href="#page">페이지</a> <ul><li><a href="#designer-views">디자이너 뷰</a></li> <li><a href="#developer-view">개발자 뷰</a></li> <li><a href="#fetch-data-from-the-database-table">데이터베이스 테이블에서 데이터 가져오기</a></li> <li><a href="#full-page-code-1">Full page code</a></li> <li><a href="#save-the-page">페이지 저장</a></li></ul></li></ul></li> <li><a href="#part-4-application">파트 4: 애플리케이션</a> <ul><li><a href="#menu">메뉴</a> <ul><li><a href="#add-a-menu-item">메뉴 항목 추가</a></li> <li><a href="#test-the-new-menu-item">새로운 메뉴 항목 테스트</a></li></ul></li> <li><a href="#send-a-message">메시지 보내기</a> <ul><li><a href="#form">폼</a></li></ul></li> <li><a href="#form-navigation">폼 내비게이션</a> <ul><li><a href="#navigation-buttons">내비게이션 버튼</a></li> <li><a href="#variables">변수</a></li> <li><a href="#entry-count">항목 개수</a></li> <li><a href="#table-offset">테이블 오프셋</a></li> <li><a href="#button-code">버튼 코드</a></li> <li><a href="#page-refreshing">페이지 새로고침</a></li></ul></li> <li><a href="#full-page-code-2">Full page code</a></li></ul></li> <li><a href="#conclusions">결론</a></li></ul> <h2 id="the-goal"><a href="#the-goal" class="header-anchor">#</a> 목표 (The Goal) </h2> <p>애플리케이션은 간단한 기능으로 시작하지만 튜토리얼이 진행됨에 따라 복잡성이 증가합니다.</p> <p>애플리케이션의 최종 버전에서는 일부 간단한 메시지(문자열)가 데이터베이스 테이블에 저장되며, 해당 테이블에는 발신자의 타임스탬프와 계정 식별자가 포함됩니다. 사용자는 메시지 목록을 확인하고, 생태계의 메뉴에서 접근 가능한 애플리케이션 페이지에서 새로운 메시지를 추가할 수 있습니다.</p> <h2 id="part-1-the-environment"><a href="#part-1-the-environment" class="header-anchor">#</a> 파트 1: 환경 설정 (Part 1: The Environment) </h2> <p><strong>Weaver</strong></p> <p>IBAX의 유일한 클라이언트인 Weaver는 모든 사용자 및 생태계 역할에 대한 기능을 제공합니다. 애플리케이션 개발자는 Weaver를 통해 애플리케이션을 개발하고 테스트할 수 있으며, 생태계 관리자는 생태계를 관리하고 사용자는 생태계와 상호 작용할 수 있습니다.</p> <p>이 튜토리얼에서는 Weaver에서 계약 코드를 작성하고 페이지 템플릿을 작성하며 기타 모든 작업을 수행할 것입니다. Weaver는 또한 계약 코드를 복원, 저장 및 실행하고 데이터 구조(데이터베이스 테이블)를 관리하며, 액세스 권한을 할당하고 애플리케이션을 생성하는 방법을 제공합니다.</p> <p>각 노드는 자체 Weaver 인스턴스를 가지고 있습니다.</p> <h2 id="part-2-contract"><a href="#part-2-contract" class="header-anchor">#</a> 파트 2: 컨트랙트 (Part 2: Contract) </h2> <p>첫 번째 간단한 애플리케이션은 "Hello, World!"입니다.</p> <blockquote><p>참고</p></blockquote> <blockquote><p>이 응용 프로그램에서 문자열은 데이터베이스 테이블에 저장되며 사용자 페이지는 없습니다.</p></blockquote> <h3 id="creator-account"><a href="#creator-account" class="header-anchor">#</a> 생성자 계정 (Creator account) </h3> <p>개발자 역할이 있는 계정에는 생태계의 "루트" (root) 권한이 할당됩니다. 기본적으로 이 역할은 모든 작업에 액세스할 수 있습니다. 새 에코시스템에서 생성자 계정에는 관리자 역할이 할당되며 새 애플리케이션 및 데이터베이스 테이블 생성과 같은 에코시스템에 주요 변경 사항을 도입하려면 이 역할을 사용해야 합니다.</p> <p>작성자 계정을 사용하여 생태계에 로그인합니다.</p> <h3 id="new-application"><a href="#new-application" class="header-anchor">#</a> 새로운 애플리케이션 (New application) </h3> <p>로그인 후 생태계 생성자로서 새로운 애플리케이션을 생성할 수 있습니다.</p> <p>새로운 애플리케이션 생성하기:</p> <ol><li>개발자 탭으로 이동합니다.</li> <li>왼쪽 메뉴에서 애플리케이션을 선택합니다.</li> <li>애플리케이션 페이지에서 '신규'를 선택합니다.</li> <li>이름 필드에 애플리케이션 이름을 지정합니다.</li> <li>조건을 <code>true</code>로 설정합니다. <ul><li><code>true</code>는 누구나 애플리케이션을 변경할 수 있는 것을 의미합니다.</li> <li>다른 옵션으로는 <code>ContractConditions("MainCondition")</code>을 사용할 수 있으며, 이는 생성자를 제외한 다른 사람들은 애플리케이션을 변경할 수 없음을 의미합니다.</li></ul></li> <li>애플리케이션은 애플리케이션 목록에 표시되며, 특정 애플리케이션의 이름 필드를 클릭하여 활성화할 수 있습니다.</li></ol> <blockquote><p>참고</p></blockquote> <blockquote><p>개발자 탭에서 애플리케이션을 클릭하여 관련 리소스에 액세스할 수 있으며, 이는 생태계에 영향을 주지 않습니다. 어떤 애플리케이션을 선택하더라도 모든 생태계 애플리케이션이 여전히 사용 가능합니다.</p></blockquote> <h3 id="new-database-table"><a href="#new-database-table" class="header-anchor">#</a> 새로운 데이터베이스 테이블 (New database table) </h3> <p>데이터를 저장하기 위해 Weaver에서 애플리케이션을 위한 데이터베이스 테이블을 생성하세요.</p> <p>데이터베이스 테이블 생성하기:</p> <ol><li><p>개발자 탭에서 애플리케이션 - 이름 > 데이터베이스 테이블을 선택합니다.</p> <ul><li>선택한 애플리케이션과 관련된 모든 데이터베이스 테이블이 여기에 표시됩니다. 만약 목록이 비어 있다면, 해당 애플리케이션을 위해 아직 데이터베이스 테이블이 생성되지 않았음을 의미합니다.</li></ul></li> <li><p>'신규'를 클릭합니다.</p> <ul><li>Weaver에서는 새로운 데이터베이스 테이블을 생성하기 위한 페이지를 표시합니다.</li></ul></li> <li><p>이름 필드에 이름을 지정합니다.</p> <ul><li>이 튜토리얼에서는 데이터베이스 테이블의 이름을 <code>apptable</code>로 지정합니다.</li></ul></li> <li><p><code>message</code> 열을 추가하고, 타입을 <code>Text</code>로 설정합니다.</p> <ul><li>이 테이블은 <code>id</code> (미리 정의)와 <code>message</code>라는 두 개의 열을 가져야 합니다. 나중에 더 많은 열을 추가할 예정입니다.</li></ul></li> <li><p>읽기 및 쓰기 권한에 대해 각 필드를 <code>true</code>로 설정합니다.</p> <ul><li>이렇게 하면 누구나 데이터베이스 테이블에 엔트리를 삽입하고 업데이트할 수 있으며, 열을 추가하고 엔트리 데이터를 읽을 수 있게 됩니다.</li> <li>선택사항으로 읽기 및 쓰기 권한을 생성자 계정에게 예약할 수도 있습니다. 이 경우에는 해당 필드를 <code>ContractConditions("MainCondition")</code>로 설정합니다.</li></ul></li></ol> <h3 id="new-contract"><a href="#new-contract" class="header-anchor">#</a> 새로운 컨트랙트 (New contract) </h3> <h4 id="contract-code"><a href="#contract-code" class="header-anchor">#</a> 컨트랙트 코드 (Contract code) </h4> <p>각 계약에는 세 부분이 있습니다. 자세한 내용은 <a href="/kr/topics/script.html#contract-structure">계약 구조</a> 를 참조하십시오.</p> <h4 id="create-a-contract"><a href="#create-a-contract" class="header-anchor">#</a> 컨트랙트 생성 (Create a contract) </h4> <ol><li><p>개발자 탭에서 애플리케이션 - 이름 > 계약을 선택합니다.</p> <ul><li>해당 애플리케이션과 관련된 모든 계약이 여기에 표시됩니다. 새로운 애플리케이션의 경우 목록은 비어 있습니다.</li></ul></li> <li><p>'신규'를 클릭합니다.</p> <ul><li>편집기에 새로운 계약 템플릿이 표시됩니다.</li></ul></li></ol> <p>아래와 같이 빈 계약 템플릿이 표시됩니다:</p> <div class="language- extra-class"><pre class="language-text"><code>contract ... { data { } conditions { } action { } } </code></pre></div><h4 id="contract-name"><a href="#contract-name" class="header-anchor">#</a> 컨트랙트 이름 (Contract name) </h4> <p>먼저 스마트 계약 이름을 지정하십시오.</p> <div class="language- extra-class"><pre class="language-text"><code> contract AppContract { } </code></pre></div><h4 id="data"><a href="#data" class="header-anchor">#</a> 데이터 (Data) </h4> <p><code>data</code> 섹션을 작성하세요.</p> <p>다음 예시에서 <code>Message</code>는 변수 이름을 나타내며, <code>string</code>은 변수 타입입니다.</p> <div class="language- extra-class"><pre class="language-text"><code> data { Message string } </code></pre></div><h4 id="conditions"><a href="#conditions" class="header-anchor">#</a> 조건 (Conditions) </h4> <p><code>conditions</code> 섹션을 작성하세요. <code>Message</code>가 빈 문자열인 경우를 방지하기 위한 간단한 검증 조건입니다. 만약 <code>Message</code>의 길이가 <code>0</code>이라면, 미리 정의된 경고 메시지가 실행됩니다.</p> <div class="language- extra-class"><pre class="language-text"><code>conditions { // avoid writing empty strings if Size($Message) == 0 { error "Message is empty" } } </code></pre></div><h4 id="action"><a href="#action" class="header-anchor">#</a> 액션 (Action) </h4> <p><code>action</code> 섹션을 작성하세요. 간단한 작업은 <code>Message</code>를 데이터 테이블에 기록하는 것입니다.</p> <div class="language- extra-class"><pre class="language-text"><code> action { DBInsert("apptable", {message: $Message}) } </code></pre></div><h4 id="full-contract-code"><a href="#full-contract-code" class="header-anchor">#</a> 전체 컨트랙트 코드 (Full contract code) </h4> <p>전체 계약 코드는 다음과 같습니다.</p> <p>IBAX의 모든 계약은 <code>data</code>, <code>conditions</code> 및 <code>action</code> 섹션을 포함하여 이와 같이 구성됩니다.</p> <div class="language- extra-class"><pre class="language-text"><code>contract AppContract { data { Message string } conditions { // avoid writing empty strings if Size($Message) == 0 { error "Message is empty" } } action { DBInsert("apptable", {message: $Message}) } } </code></pre></div><h4 id="save-and-run"><a href="#save-and-run" class="header-anchor">#</a> 저장 및 실행 (Save and run) </h4> <p>이제 계약을 테스트하기 위해 준비합니다:</p> <ol><li><p>에디터 메뉴에서 <code>Save</code>를 클릭합니다.</p> <p>이렇게 하면 계약 코드가 업데이트되며, 업데이트된 버전은 모든 네트워크 노드에서 사용할 수 있게 됩니다.</p></li> <li><p>에디터 메뉴에서 <code>Run</code>을 클릭합니다.</p> <p>이렇게 하면 <code>Run the Contract</code> 페이지가 표시됩니다.</p></li> <li><p><code>Run the Contract</code> 페이지에서 계약의 입력 매개변수를 입력합니다.</p> <p>이 계약은 "Message"라는 하나의 매개변수를 가지고 있으므로, <code>Key</code> 필드에 <code>Message</code>를 설정하고 "Value" 필드에 "Hello, World"를 설정합니다.</p></li> <li><p><code>Run</code>을 클릭합니다.</p> <p>결과가 오른쪽에 표시됩니다.</p></li></ol> <p>성공적으로 일부 문자열을 추가한 경우, 결과에는 트랜잭션의 변경 사항을 소개하는 블록 ID와 결과 코드가 포함됩니다.</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> 파트 3: 페이지 (Part 3: Page) </h2> <p>계약이 발효되면 유용한 것으로 확장해야 할 때입니다. 이 부분에서는 UI 및 기타 기능을 구현합니다.</p> <p>메모</p> <p>이 애플리케이션에서 문자열은 로그의 항목과 같이 데이터베이스 테이블에 저장됩니다. 각 문자열에는 작성자와 타임스탬프가 있습니다.</p> <p>사용자는 응용 프로그램 페이지에 저장된 문자열 목록을 볼 수 있으며 간단한 형식으로 표시됩니다.</p> <h3 id="new-field"><a href="#new-field" class="header-anchor">#</a> 새로운 필드 (New field) </h3> <p>이전과 같이 "개발자" 탭에서 데이터베이스 테이블을 편집합니다. "애플리케이션 - 이름 - 데이터베이스 테이블" (Developer tab > Application - Name > Database table page) 페이지에서 다음 필드를 <code>apptable</code>에 추가합니다:</p> <ul><li><p><code>author</code>: 필드 유형 <code>Number</code>, "Change"를 <code>true</code>로 설정합니다.</p> <p>이 필드는 작성자 계정의 식별자를 저장합니다.</p></li> <li><p><code>timestamp</code>: 필드 유형 <code>Date/Time</code>, "Change"를 <code>true</code>로 설정합니다.</p></li></ul> <h3 id="update-the-contract"><a href="#update-the-contract" class="header-anchor">#</a> 컨트랙트 업데이트 (Update the contract) </h3> <p>계약 코드를 업데이트하여 작성자 ID와 타임스탬프를 처리합니다.</p> <p>작성자 ID는 생태계의 계정 ID이며, 타임스탬프는 Unix 시간 형식으로 계약을 실행하는 날짜와 시간입니다.</p> <p>두 값 모두 <a href="/kr/topics/script.html#variables">사전 정의된 변수</a>에서 제공되므로 입력이나 확인 과정이 필요하지 않으며, 이 값들은 액션 부분에서만 업데이트될 수 있습니다.</p> <p>계약을 업데이트하여 메시지를 추가할 때 작성자 ID와 타임스탬프를 데이터베이스 테이블에 작성하도록 합니다. 여기서 작성자 ID는 <code>$key_id</code>로 정의되고, 타임스탬프는 <code>$time</code>으로 정의됩니다.</p> <div class="language- extra-class"><pre class="language-text"><code>action { DBInsert("apptable", {message: $Message, author: $key_id, timestamp: $time}) } </code></pre></div><h3 id="page"><a href="#page" class="header-anchor">#</a> 페이지 (Page) </h3> <p>응용 프로그램 페이지의 경우 데이터베이스 테이블에 저장된 메시지를 표시하는 간단한 페이지입니다.</p> <p>다른 모든 리소스와 마찬가지로 Weaver에서 UI 페이지를 만들 수 있습니다.</p> <ol><li><p>개발자 탭으로 이동하여 애플리케이션 - 이름 > 페이지 (Application - Name > Page)를 클릭합니다.</p></li> <li><p>새로 만들기를 클릭합니다. 비주얼 디자이너가 새 탭에서 열립니다.</p></li></ol> <h4 id="designer-views"><a href="#designer-views" class="header-anchor">#</a> Designer views </h4> <p>The default page is empty. You can use the predefine structure to quickly fill in the page.</p> <p>Create a basic table:</p> <ol><li><p>In the view selector at the right, click Designer; The view will be switched to the visual designer.</p></li> <li><p>In the menu at the left, select Table With Header and drag it on to the page. A table with multiple elements will be displayed on the page.</p></li></ol> <h4 id="developer-view"><a href="#developer-view" class="header-anchor">#</a> 디자이너 뷰 (Developer view) </h4> <p>IBAX의 사용자 페이지는 <a href="/kr/topics/templates2.html">템플릿 언어</a> 로 작성되므로, 페이지 코드를 작성할 때는 개발자 보기로 전환해야 합니다.</p> <p>개발자 보기로 전환합니다.</p> <ol><li>오른쪽의 보기 선택기에서 "개발자"를 클릭합니다.</li></ol> <p>이렇게 하면 페이지 코드가 있는 탭이 있는 편집기로 보기가 전환됩니다.</p> <h4 id="fetch-data-from-the-database-table"><a href="#fetch-data-from-the-database-table" class="header-anchor">#</a> 데이터베이스 테이블에서 데이터 가져오기 (Fetch data from the database table) </h4> <p>지금까지 페이지 템플릿에는 아무 작업도 이루어지지 않았습니다. 다음 단계에서는 코드를 업데이트하여 페이지가 <code>apptable</code>에서 데이터를 표시할 수 있도록 합니다.</p> <ol><li><a href="/kr/topics/script.html#dbfind">DBFind</a> 함수를 사용하여 데이터베이스 테이블에서 데이터를 요청합니다.</li></ol> <p>다음 예제에서는 이 함수 호출을 사용하여 <code>apptable</code>에서 데이터를 가져옵니다. 데이터는 <code>src_table</code>에 저장되며 타임스탬프 필드를 기준으로 정렬됩니다. <code>src_table</code>은 나중에 테이블 뷰에서 페이지의 데이터 원본으로 사용됩니다.</p> <div class="language- extra-class"><pre class="language-text"><code> DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp) </code></pre></div><ol start="2"><li><code>src_table</code>의 데이터를 표시하려면 <code>Table</code> 함수에서 데이터 소스 및 헤더로 지정하십시오.</li></ol> <div class="language- extra-class"><pre class="language-text"><code> Table(Columns: "AUTHOR=author,TIME=timestamp,MESSAGE=message", Source: src_table) </code></pre></div><ol start="3"><li>오른쪽의 보기 선택기에서 미리 보기를 클릭하여 데이터가 올바르게 표시되는지 확인합니다.</li></ol> <h4 id="full-page-code-1"><a href="#full-page-code-1" class="header-anchor">#</a> 전체 페이지 코드 (Full page code) </h4> <p>다음은 이 부분의 전체 페이지 코드입니다. 이 기본 페이지는 나중에 확장됩니다.</p> <div class="language- extra-class"><pre class="language-text"><code>DBFind(Name: apptable, Source: src_table).Columns(Columns: "author,timestamp,message").Order(timestamp) 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) { Button(Class: btn btn-primary, Contract: ContractName, Body: More) } } </code></pre></div><h4 id="save-the-page"><a href="#save-the-page" class="header-anchor">#</a> 페이지 저장 (Save the page) </h4> <p>페이지를 저장하려면 "저장"을 클릭하세요:</p> <ol><li><p>페이지 이름 필드에 <code>AppPage</code> 또는 다른 이름을 지정합니다.</p></li> <li><p>메뉴에서 <code>default_menu</code>를 선택합니다.</p></li> <li><p>조건을 <code>true</code>로 설정합니다.</p></li> <li><p>확인을 클릭합니다.</p></li></ol> <h2 id="part-4-application"><a href="#part-4-application" class="header-anchor">#</a> 파트 4: 애플리케이션 (Part 4: Application) </h2> <p>이전 섹션에서는 계약서, 데이터를 저장할 테이블, 해당 데이터를 표시하는 기본 UI 페이지를 만들었습니다.</p> <p>이 부분에서는 응용 프로그램을 마무리하여 모양과 작업이 실제와 유사하도록 합니다.</p> <h3 id="menu"><a href="#menu" class="header-anchor">#</a> 메뉴 (Menu) </h3> <p>페이지는 메뉴에 연결되어야 합니다. 예를 들어, "default_page"는 홈 탭에 표시되며 기본 생태계 메뉴 "default_menu"에 연결됩니다.</p> <p>이 애플리케이션 튜토리얼은 매우 간단하므로(한 개의 페이지만 있는) 별도의 메뉴를 생성할 필요가 없습니다. 기본 메뉴에 새로운 메뉴 항목을 추가하는 것으로 충분합니다.</p> <blockquote><p>참고</p></blockquote> <blockquote><p>페이지 속성을 편집하여 페이지 메뉴를 정의할 수 있습니다. 개발자 탭 > 애플리케이션 - 이름 > 페이지로 이동하여 페이지 속성을 편집할 수 있습니다. 예를 들어, 앱에 여러 페이지가 있는 경우 이러한 페이지 간에 이동할 수 있는 메뉴를 생성하고 해당 앱의 모든 페이지에 할당해야 할 수 있습니다.</p></blockquote> <h4 id="add-a-menu-item"><a href="#add-a-menu-item" class="header-anchor">#</a> 메뉴 항목 추가 (Add a menu item) </h4> <p>메뉴와 마찬가지로 메뉴를 Weaver에서 생성하고 편집할 수 있습니다:</p> <ol><li><p>개발자 탭 > 메뉴로 이동합니다.</p></li> <li><p><code>default_menu</code> 항목의 이름을 클릭합니다.</p> <p>에디터에서 새 탭이 열립니다.</p></li> <li><p>템플릿의 끝에 애플리케이션 페이지를 열 수 있도록 연결된 새로운 메뉴 항목을 추가합니다. 아이콘은 <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></li></ol> <div class="language- extra-class"><pre class="language-text"><code> MenuItem(Title:Messages, Page:AppPage, Icon:"fa fa-envelope") </code></pre></div><ol start="4"><li>저장을 클릭합니다.</li></ol> <h4 id="test-the-new-menu-item"><a href="#test-the-new-menu-item" class="header-anchor">#</a> 새로운 메뉴 항목 테스트 (Test the new menu item) </h4> <ol><li>홈 탭을 엽니다.</li> <li>메뉴에서 새로고침을 클릭합니다. 메시지라는 제목의 항목이 표시됩니다.</li> <li>메시지를 클릭합니다. 애플리케이션 페이지가 열립니다.</li></ol> <h3 id="send-a-message"><a href="#send-a-message" class="header-anchor">#</a> 메시지 보내기 (Send a message) </h3> <p>Logicor의 버튼은 매개변수에 따라 계약을 실행하거나 페이지를 열 수 있습니다.</p> <p><a href="/kr/topics/templates2.html#button">Button</a> 함수에는 두 가지 계약 매개변수가 있습니다:</p> <ul><li><p><code>Contract</code></p> <p>실행할 계약의 이름입니다.</p></li> <li><p><code>Params</code></p> <p>계약의 입력 매개변수입니다.</p></li></ul> <h4 id="form"><a href="#form" class="header-anchor">#</a> 폼 (Form) </h4> <p>계약에 데이터를 전송하려면 양식을 추가해야 합니다. 이 양식은 메시지를 입력하는 입력 필드와 AppContract 계약을 실행하는 버튼이 있어야 합니다.</p> <p>다음은 이러한 유형의 양식의 예시입니다. 이 양식은 자체 <a href="/kr/topics/templates2.html#div">Div</a> 에 중첩되어 있습니다. 양식 뷰를 포함하는 Div 요소 다음에 배치되어야 하며, <a href="/kr/topics/templates2.html#input">Input</a> 필드에는 미리 정의된 이름 <code>message_input</code>이 있음을 나타냅니다. 버튼은 이 이름을 사용하여 <code>Message</code>의 값을 계약으로 전송합니다. 마지막으로, <a href="/kr/topics/templates2.html#calling-contracts">Val</a> 함수를 사용하여 입력 필드의 값을 가져옵니다.</p> <div class="language- 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>메시지를 보내서 이 새로운 기능을 테스트할 때 양식이 새로 고쳐지지 않는다는 것을 알 수 있습니다. <a href="#page-refreshing">페이지 새로고침</a>에서 소개합니다.</p> <h3 id="form-navigation"><a href="#form-navigation" class="header-anchor">#</a> 폼 내비게이션 (Form navigation) </h3> <p>기본 보기에서 페이지의 양식은 첫 페이지에 25개 항목만 표시할 수 있습니다. 따라서 사용자를 모든 양식 항목으로 이동하는 몇 가지 간단한 버튼을 추가할 수 있습니다.</p> <h4 id="navigation-buttons"><a href="#navigation-buttons" class="header-anchor">#</a> 내비게이션 버튼 (Navigation buttons) </h4> <p>두 개의 탐색 버튼이 있으며 각각 애플리케이션 페이지를 다시 로드하고 매개변수를 전달할 수 있습니다.</p> <ul><li><p>이전 버튼은 처음 25개 항목을 표시합니다. 다른 항목이 없으면 버튼이 표시되지 않습니다.</p></li> <li><p>다음 버튼은 다음 25개 항목을 표시합니다. 다른 항목이 없으면 버튼이 표시되지 않습니다.</p></li></ul> <h4 id="variables"><a href="#variables" class="header-anchor">#</a> 변수 (Variables) </h4> <p>탐색 버튼을 사용하려면 두 개의 변수가 필요합니다. 이 변수는 테이블 뷰 상태를 저장하는 데 사용됩니다.</p> <ul><li><code>#table_view_offset#</code></li></ul> <p>현재 테이블 뷰의 오프셋을 저장하는 변수입니다.</p> <p>페이지가 다시로드될 때 이 변수가 매개변수로 전달됩니다.</p> <ul><li><code>#record_count#</code></li></ul> <p>이 변수는 테이블에 있는 항목의 총 개수를 저장합니다.</p> <p>이 값은 계산됩니다.</p> <h4 id="entry-count"><a href="#entry-count" class="header-anchor">#</a> 항목 개수 (Entry count) </h4> <p><code>#record_count#</code>를 계산하려면 기존 <a href="/kr/topics/script.html#dbfind">DBFind</a> 함수 호출을 수정하세요. <code>.count()</code> 호출에 지정된 변수는 항목 수를 저장합니다.</p> <div class="language- 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><h4 id="table-offset"><a href="#table-offset" class="header-anchor">#</a> 테이블 오프셋 (Table offset) </h4> <p>페이지가 열릴 때 테이블 보기 오프셋이 페이지로 전달되어야 합니다. <code>#table_view_offset#</code>이 값을 가져오지 않으면 0으로 설정합니다.</p> <p>페이지 상단에 다음 코드를 추가합니다.</p> <div class="language- extra-class"><pre class="language-text"><code>If(GetVar(table_view_offset)){ }.Else{ SetVar(table_view_offset, 0) } </code></pre></div><p><a href="/kr/topics/script.html#dbfind">DBFind</a> 함수 호출을 다시 수정합니다. 이번에는 새 테이블 보기 오프셋을 사용해야 합니다.</p> <div class="language- 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><h4 id="button-code"><a href="#button-code" class="header-anchor">#</a> 버튼 코드 (Button code) </h4> <p>바닥글을 정의하는 <a href="/kr/topics/templates2.html#div">Div</a> 함수 호출을 찾습니다. <code>Div(Class:panel-footer text-right)</code>. 버튼 코드를 추가하십시오.</p> <div class="language- extra-class"><pre class="language-text"><code>Div(Class: panel-footer text-right) { } </code></pre></div><p>만약 이전에 돌아갈 항목이 적어도 하나 있는 경우에만 <em>이전</em> <em>(Previous)</em> 버튼이 나타납니다. 버튼을 추가할 때, 페이지의 새로운 테이블 뷰 오프셋 <code>offset_previous</code>가 계산됩니다. 매개변수는 다시 열린 페이지의 <code>PageParams</code>로 전달됩니다.</p> <div class="language- 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><p>다음 버튼은 총 레코드 수가 페이지에 표시된 수보다 큰 경우에만 표시됩니다. 버튼이 추가되면 페이지의 새로운 테이블 뷰 오프셋 <code>offset_next</code>가 계산됩니다. 매개변수는 다시 열린 페이지의 <code>PageParams</code>로 전달됩니다.</p> <div class="language- 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><p>이 버튼을 추가한 후 페이지를 저장하고 홈 > 메시지 메뉴 항목에서 테스트합니다.</p> <h4 id="page-refreshing"><a href="#page-refreshing" class="header-anchor">#</a> 페이지 새로고침 (Page refreshing) </h4> <p>사용자가 새로운 메시지를 보내면, 테이블에 자동으로 업데이트되는 기능을 구현해야 합니다. 계약을 실행하는 것 외에도, Send 버튼을 사용하여 현재 페이지를 다시 열어 같은 결과를 얻을 수 있습니다. <code>#table_view_offset#</code>는 변경 없이 페이지로 전달되어야 합니다.</p> <p>Send 버튼에 <code>Page</code>와 <code>PageParams</code>를 추가하고, 코드는 다음과 같습니다.</p> <div class="language- 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> 전체 페이지 코드 (Full page code) </h3> <p>이 부분은 응용 프로그램 페이지에 대한 많은 변경 사항을 설명합니다. 다음은 애플리케이션 페이지의 전체 코드입니다.</p> <div class="language- 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) </h2> <p>레이아웃 스타일, 액세스 권한 관리, 애플리케이션과 리소스 간의 상호 작용과 같은 중요한 주제에 대해 설명하기보다, 이 튜토리얼은 생태계를 위한 기본적인 애플리케이션 생성 방법을 소개합니다. 이러한 고급 주제에 대한 자세한 정보는 다른 관련 문서를 참조하십시오.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/IBAX-io/documentation/edit/master/docs/kr/tutorials/app_tutorial.md" target="_blank" rel="noopener noreferrer">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">마지막 업데이트:</span> <span class="time">2023/7/4 11:08:51</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/kr/tutorials/tutorial.html"> 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/120.38fec048.js" defer></script> </body> </html>