# 개요 **알레오 블록체인을 활용해서 Leo로 zkNFT를 만들어봅시다.** 간단한 이미지를 추가해서 컬렉션과 NFT를 만들어보자 Leo란 알레오의 프로그래밍 언어로 블록체인 상에서 자동으로 조건을 만족하면 동작하는 프로그램을 작성한다. 이더리움 개발을 해봤다면 Leo는 솔리디티에 비교하면 되고 알레오 NFT는 이더리움의 ERC721과 비교할 수 있는 개념이다. 그러면 환경설정부터 진행한 뒤 단계별로 알레오 블록체인 NFT를 만들어 보자. # 사전 준비 * **사전 지식** * **ERC721** 개념 : [EIP721](https://eips.ethereum.org/EIPS/eip-721) * **알레오 NFT** 표준 코드 : [ARC-721](https://github.com/AleoHQ/ARCs/discussions/36) * **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-aleo-nft : [[🔗](https://github.com/hex-aragon/simple-aleo-nft/tree/main)] * 결과물을 참고하고 싶다면, 위 깃헙 링크를 통해 `git clone` 해보길 권장한다 # 프론트엔드 제작 설정하기 알레오 SDK를 이용해서 프론트엔드 + Leo 구조로 프로젝트 만들기 React Javascript 코드와 Leo를 이용해서 다음과 같은 프로젝트를 만들어보자. **공식 문서 참고 링크 [https://developer.aleo.org/sdk/create-aleo-app/installation](https://developer.aleo.org/sdk/create-aleo-app/installation)** **프로젝트 생성 명령어** ``` npm create aleo-app@latest ``` **프로젝트 이름 설정 : simple-aleo-nft** **프레임워크 설정** : **React** **기술 스택 선택** : **React + Javascript (타입스크립트, 바닐라 자바스크립트 등 옵션에 따라 선택 가능)**
![스크린샷 2024-02-03 01-02-17.png](https://i.ibb.co/80LkkF3/2024-02-03-01-02-17.png) **프로그램 설치 및 셋팅** ``` cd simple-aleo-nft npm install npm run install-leo npm run dev ``` # 프론트엔드 구조 React Javascript + Leo ##### ##### src/App.jsx 코드 화면에 표시되는 자바스크립트 코드를 구성하는 파일이다. 각 컴포넌트의 구성을 볼 수 있다. ``` import { useState } from "react"; import reactLogo from "./assets/react.svg"; import aleoLogo from "./assets/aleo.svg"; import "./App.css"; import simple_arc721 from "../simple_arc721/build/main.aleo?raw"; import { AleoWorker } from "./workers/AleoWorker.js"; const aleoWorker = AleoWorker(); function App() { const [count, setCount] = useState(0); const [executing, setExecuting] = useState(false); const [executingCreCol, setExecutingCreCol] = useState(false); const [executingMint, setExecutingMint] = useState(false); const [deploying, setDeploying] = useState(false); async function create_collection() { const inputValue = prompt("Enter a address value (e.g., aleo1~~~):"); const inputValue2 = prompt("Enter a u128 value (e.g., 0u128):"); console.log("inputValue", inputValue); console.log("inputValue2", inputValue2); // Check if inputValue is not null (user clicked Cancel) or empty if ( inputValue !== null && inputValue !== "" && inputValue2 !== null && inputValue2 !== "" ) { setExecutingCreCol(true); const result = await aleoWorker.localProgramExecution( simple_arc721, "create_collection", [inputValue, inputValue2] // You can use inputValue here ); console.log("result", result); setExecutingCreCol(false); alert(JSON.stringify(result)); } else { alert("Invalid input. Please enter a value."); } } async function mint() { const inputValue = prompt("Enter a address value (e.g., aleo1~~~):"); const inputValue2 = prompt( "Enter a TokenID Object value (e.g., token_number : 0u128, collection_number:0u128):" ); const inputValue3 = prompt( "Enter a NFT Meta_DATA value (e.g., { part0: 140152554740597502496524452237299901250u128, part1: 133324194421918155921132289162654938981u128, part2: 93509703548909910993375653557521895508u128, part3: 147831289382731815962129268963868147712u128" ); console.log("inputValue", inputValue); console.log("inputValue2", inputValue2); console.log("inputValue3", inputValue3); // Check if inputValue is not null (user clicked Cancel) or empty if ( inputValue !== null && inputValue !== "" && inputValue2 !== null && inputValue2 !== "" && inputValue3 !== null && inputValue3 !== "" ) { setExecutingMint(true); const result = await aleoWorker.localProgramExecution( simple_arc721, "mint", [inputValue, inputValue2, inputValue3] // You can use inputValue here ); console.log("result", result); setExecutingMint(false); alert(JSON.stringify(result)); } else { alert("Invalid input. Please enter a value."); } } async function deploy() { setDeploying(true); try { const result = await aleoWorker.deployProgram(simple_arc721); 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

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; ``` *** ##### src/Worker.js **실제 프로그램 실행 및 배포를 담당하는 자바스크립트 파일** ``` import { Account, ProgramManager, PrivateKey, initThreadPool, AleoKeyProvider, AleoNetworkClient, NetworkRecordProvider, } from "@aleohq/sdk"; import { expose, proxy } from "comlink"; await initThreadPool(); async function localProgramExecution( program, aleoFunction, inputs) { const programManager = new ProgramManager(); console.log("programManager", programManager); const account = new Account(); console.log("account", account); programManager.setAccount(account); console.log( "program", program, "aleoFunction", aleoFunction, "inputs", inputs ); const executionResponse = await programManager.run( program, aleoFunction, inputs, false ); console.log("executionResponse", executionResponse); return executionResponse.getOutputs(); } async function getPrivateKey() { // const key = import.meta.env.VITE_APP_PRIVATE_KEY; const key = new PrivateKey() return proxy(key); } async function deployProgram(program) { const keyProvider = new AleoKeyProvider(); keyProvider.useCache(true); // Create a record provider that will be used to find records and transaction data for Aleo programs const networkClient = new AleoNetworkClient( "https://api.explorer.aleo.org/v1" ); const account = import.meta.env.VITE_APP_ACCOUNT; const recordProvider = new NetworkRecordProvider(account, networkClient); // Initialize a program manager to talk to the Aleo network with the configured key and record providers const programManager = new ProgramManager( "https://api.explorer.aleo.org/v1", keyProvider, recordProvider ); programManager.setAccount(account); // Define a fee to pay to deploy the program const fee = 16; // 1.9 Aleo credits // Deploy the program to the Aleo network const tx_id = await programManager.deploy(program, fee); // Optional: Pass in fee record manually to avoid long scan times // const feeRecord = "{ owner: aleo1xxx...xxx.private, microcredits: 2000000u64.private, _nonce: 123...789group.public}"; // const tx_id = await programManager.deploy(program, fee, undefined, feeRecord); return tx_id; } const workerMethods = { localProgramExecution, getPrivateKey, deployProgram }; expose(workerMethods); ``` # 로컬에서 create\_collection을 프론트엔드로 실행시켜보자. **첫 번째 입력인자로 owner로 입력될 인자값 aleo address를 입력한다.**
![스크린샷 2024-02-03 01-17-05.png](https://i.ibb.co/7zfRq9h/2024-02-03-01-17-05.png)
**두 번째 입력인자로 collection id로 입력될 인자값 0u128를 입력한다.** ![스크린샷 2024-02-03 01-17-12.png](https://i.ibb.co/02sh3p1/2024-02-03-01-17-12.png) **로컬에서 컬렉션 실행 결과를 볼 수 있다.** ![스크린샷 2024-02-03 01-25-46.png](https://i.ibb.co/rmV5fKc/2024-02-03-01-25-46.png)

# 로컬에서 mint를 프론트엔드로 실행시켜보자. 첫 번째 입력인자로 aleo address를 입력해준다. ![스크린샷 2024-02-03 01-34-04.png](https://i.ibb.co/DM8DgWy/2024-02-03-01-34-04.png)
**두 번째 인자로 컬렉션 아이디와 토큰 아이디를 입력해준다.** 예시는 다음과 같다. ``` { token_number: 0u128, collection_number : 0u128} ``` ![스크린샷 2024-02-03 01-34-04.png](https://i.ibb.co/DM8DgWy/2024-02-03-01-34-04.png) 세 번째 입력인자는 위에서 설명했던 문자열을 비트로 바꿨었던 4개의 BaseUri (String64) 값이다. ``` { part0: 140152554740597502496524452237299901250u128, part1: 133324194421918155921132289162654938981u128, part2: 93509703548909910993375653557521895508u128, part3: 147831289382731815962129268963868147712u128} ``` ![스크린샷 2024-02-03 01-34-16.png](https://i.ibb.co/VvvQP8k/2024-02-03-01-34-16.png) **4번째는 민팅된 결과다.** ![스크린샷 2024-02-03 01-37-35.png](https://i.ibb.co/Z1t8PGp/2024-02-03-01-37-35.png)
**그리고 NFT의 ipfs 메타데이터를 확인해보자!** 위에서 3번째에 입력했던 메타데이터의 입력값들을 "arc721\_convert\_128bit\_to\_string.js"코드에 u128Value1,2,3,4에 입력한 뒤 실행시키면 하단과 같은 ipfs 메타데이터 URL을 볼 수 있다. ![스크린샷 2024-02-03 01-39-05.png](https://i.ibb.co/LvFCKC1/2024-02-03-01-39-05.png) ipfs://bafybeiaiywvp3ifqhdvkltcycktdtwwwjsf65lxxpsc2mzsaujfossjfwq/ ![스크린샷 2024-02-03 01-41-50.png](https://i.ibb.co/zVDBRK7/2024-02-03-01-41-50.png) 그러면 위와 같이 nft 메타데이터를 포함하고 있는 ipfs url이 보이는데 여기서 icon\_url이 이미지 url인데 이 url에 nft storage 링크를 합치면 다음과 같은 url에서 이미지를 확인할 수 있다. [https://nftstorage.link/ipfs/QmQ58AMQGv8vQb6uvbb745aDQU416nEuaFa1mTMUNdRNhW](https://nftstorage.link/ipfs/QmQ58AMQGv8vQb6uvbb745aDQU416nEuaFa1mTMUNdRNhW)
![스크린샷 2024-02-03 01-44-38.png](https://i.ibb.co/6cK9MFt/2024-02-03-01-44-38.png) (출처 : 드래곤볼 손오공)

그리고 위에 이미지와 달리 이번에는 다음 URL에 있는 사진으로 돌 NFT를 만들 것이다. ![rock.png](https://i.ibb.co/7QLF4HC/rock.png) **ipfs full url :** [https://bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri.ipfs.nftstorage.link/](https://bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri.ipfs.nftstorage.link/) **ipfs cid는 다음과 같으며 초기에 설명했던 "arc721\_convert\_string\_to\_128bit.js" 코드를 실행해서 NFT의 메타데이터에 넣을 수 있게 변환하면 다음과 같다.** 문자열 데이터 : ``` bafkreibjfoldku25lppuc2eqyrxw23ld7ljk24a3bxk5zlrs2f4xrxdzri ``` uint128 배열 데이터 4개 ``` Padded Ascii URL: [ 67071076695897266103407469202885730658n, 143822454270464304483759572449217244213n, 152095238266526860543658138094332032868n, 127477818581022457062634099n ] ``` 변환한 메타데이터 배열 ``` META_DATA="{ part0: 67071076695897266103407469202885730658u128, part1: 143822454270464304483759572449217244213u128, part2: 152095238266526860543658138094332032868u128, part3: 127477818581022457062634099u128 }" ``` **첫 번째인자로 Owner Address를 입력한다.** ![스크린샷 2024-02-03 15-32-40.png](https://i.ibb.co/hCgz9qT/2024-02-03-15-32-40.png) **두 번째 인자로 컬렉션 넘버와 토큰넘버를 입력한다.** ![스크린샷 2024-02-03 15-32-54.png](https://i.ibb.co/HgGz8ST/2024-02-03-15-32-54.png)

**세 번째인자로 NFT 메타데이터 uint128 비트 배열을 입력한다.** ![스크린샷 2024-02-03 15-33-19.png](https://i.ibb.co/rdB8YbN/2024-02-03-15-33-19.png)
이후 민팅결과를 화면에서 볼 수 있다. 해당 과정은 전부 로컬에 있는 Leo 프로그램에서 진행됐다. ![스크린샷 2024-02-03 15-35-10.png](https://i.ibb.co/yFtcdK5/2024-02-03-15-35-10.png)

NFT 민팅 페이지 만들기