# 개요 Aleo 블록체인을 활용해서 프라이빗 뱅크를 만들어보자 여기서 우리는 토큰을 발행하고, 예금하고, 인출하고 이자율을 계산할 수 있는 코드를 만들 것이다. 각 함수에 따라 aleo 코드의 결과값을 확인할 수 있다. # 사전 준비 * **LEO 개발 환경 설치하기** * [맥 전용 개발 환경 설치 문서 참고](https://provider.bth.builders/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/3f170b1f-0761-455e-b700-e62253310770) * [윈도우 전용 개발 환경 설치 문서 참고](https://provider.bth.builders/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/c75e6405-9da9-4f3d-8f52-56ab3f02bd79) * **LEO 계정 설치 및 크레딧 받기** * LEO 익스텐션 지갑을 설치하고 테스트넷에서 LEO 배포 수수료를 지급하기 위한 크레딧(Credit)을 받는다 * 상세 방법은 [첫 트랜젝션 보내기를 참고](https://ludium.world/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/f5706392-c547-48da-bdaf-9ff93dce604d/mission/e72e3a89-ea25-44a4-9f0a-60e4df84ae7b)한다 * 배포를 위해서는 **30 크레딧 이상**이 필요하다 * **미션 결과물 참고하기** * 미션 진행 참고용 simple-private-bank: [[🔗](https://github.com/hex-aragon/simple-private-bank)] * 결과물을 참고하고 싶다면, 위 깃헙 링크를 통해 `git clone` 해보길 권장한다 # 미션 설명 하단의 코드는 위에서 설명한 프라이빗 뱅크 기능에서 통화를 발행하는 함수인 issue와 대출을 하는 함수인 withdraw 함수를 포함한 React + Javascript + Leo 코드다. **React Javascript + Leo 프로그램 (로컬 실행) 코드로** **prompt에서 입력받은 뒤 로컬에서 실행할 수 있는 코드다.** 스크린샷을 캡처하면서 확인할 수 있다. # React Javascript + Leo 코드 App.jsx ``` import { useState } from "react"; import reactLogo from "./assets/react.svg"; import aleoLogo from "./assets/aleo.svg"; import "./App.css"; import helloworld_program from "../helloworld/build/main.aleo?raw"; import private_aleo from "../private_aleo/build/main.aleo?raw"; import { AleoWorker } from "./workers/AleoWorker.js"; const aleoWorker = AleoWorker(); function App() { const [count, setCount] = useState(0); const [account, setAccount] = useState(null); const [executing, setExecuting] = useState(false); const [executing2, setExecuting2] = useState(false); const [executing3, setExecuting3] = useState(false); const [deploying, setDeploying] = useState(false); const [executionResult, setExecutionResult] = useState(null); const [executionResult2, setExecutionResult2] = useState(null); const [executionResult3, setExecutionResult3] = useState(null); const generateAccount = async () => { const key = await aleoWorker.getPrivateKey(); setAccount(await key.to_string()); }; async function execute() { const inputValue = prompt("enter address (e.g, aleo1~~~)") const inputValue2 = prompt("enter amount (e.g., 100u64)") setExecuting(true); try{ const result = await aleoWorker.localProgramExecution( private_aleo, "issue", [inputValue, inputValue2], ); alert(JSON.stringify(result)); setExecutionResult(JSON.stringify(result)); // 결과를 상태에 저장 } catch (error){ console.error(error); setExecutionResult({ error: "Error executing the program." }); } setExecuting(false); } async function execute2() { const inputValue = prompt("enter record (e.g, record { owner: aleo1~~~, amount : 100u64.private, _nonce: 23424~group.public)") const inputValue2 = prompt("enter amount (e.g., 30u64)") setExecuting2(true); console.log("type check inputValue") console.log(typeof inputValue) console.log(inputValue) console.log(inputValue2) try{ const result = await aleoWorker.localProgramExecution2( private_aleo, "deposit", [inputValue, inputValue2], ); console.log("result",result) alert(JSON.stringify(result)); setExecutionResult2(JSON.stringify(result)); // 결과를 상태에 저장 } catch (error){ console.error(error); setExecutionResult2({ error: "Error executing the program." }); } setExecuting2(false); } async function execute3() { const inputValue = prompt("enter address (e.g, aleo1~~~)") const inputValue2 = prompt("enter amount (e.g., 50u64 amount )") const inputValue3 = prompt("enter rate (e.g., 1234u64 12.34%)") const inputValue4 = prompt("enter period (e.g., 15u64 15 month)") setExecuting3(true); console.log("type check inputValue") console.log(typeof inputValue) console.log(inputValue) console.log(inputValue2) console.log(inputValue3) console.log(inputValue4) try{ const result = await aleoWorker.localProgramExecution( private_aleo, "withdraw", [inputValue, inputValue2, inputValue3, inputValue4], ); console.log("result",result) alert(JSON.stringify(result)); setExecutionResult3(JSON.stringify(result)); // 결과를 상태에 저장 } catch (error){ console.error(error); setExecutionResult3({ error: "Error executing the program." }); } setExecuting3(false); } async function deploy() { setDeploying(true); try { const result = await aleoWorker.deployProgram(helloworld_program); console.log("Transaction:") console.log("https://explorer.hamp.app/transaction?id=" + result) alert("Transaction ID: " + result); } catch (e) { console.log(e) alert("Error with deployment, please check console for details"); } setDeploying(false); } return ( <>

Aleo + React

{/* 결과를 표시하는 부분 추가 */} {executionResult && (

Execution Result

{/*

{JSON.stringify(executionResult, null, 2)}

*/}

{JSON.stringify(executionResult, null, 2)}

)}

{/* 결과를 표시하는 부분 추가 */} {executionResult2 && (

Execution Result

{/*

{JSON.stringify(executionResult, null, 2)}

*/}

{JSON.stringify(executionResult2, null, 2)}

)}

{/* 결과를 표시하는 부분 추가 */} {executionResult3 && (

Execution Result

{/*

{JSON.stringify(executionResult, null, 2)}

*/}

{JSON.stringify(executionResult3, null, 2)}

)}

Edit src/App.jsx and save to test HMR

{/* Advanced Section */}

Advanced Actions

Deployment on Aleo requires certain prerequisites like seeding your wallet with credits and retrieving a fee record. Check README for more details.

Click on the Aleo and React logos to learn more

); } export default App; ``` 토큰을 발행하는 Issue 함수를 프론트엔드에서 입력했다. 첫 번째 파라미터는 account 주소고 두 번째 파리미터는 발행할 총 토큰량이다. ![21.png](https://i.ibb.co/T1BYvGT/21.png) 다음은 위의 Issue 토큰 함수의 결과값이다. ![22.png](https://i.ibb.co/dQqSCmB/22.png) 다음은 withdraw 함수의 입력값을 입력하는 화면이다. ![23.png](https://i.ibb.co/vVHT3FX/23.png) 다음은 withdraw 함수를 프론트엔드에서 실행한 결과값이다. ![24.png](https://i.ibb.co/KDRvX64/24.png)

프라이빗 뱅크 디앱 만들기