워크플로우

빈 폴더에서 테스트 완료된 화면까지 dApp 만들기

프로젝트 초기화

빈 프로젝트 폴더에서 시작하기

dApp을 만들려면 먼저 자신의 스마트 계약 ABI 파일만 들어 있는 폴더부터 시작하세요. 새 채팅의 작업 폴더로 해당 폴더를 열고 'Ask first'를 선택한 후 원하는 페이지를 설명하세요. 지갑 연결 버튼, 잔액 표시, 트랜잭션 상태 표시줄이 있는 페이지를 원한다면 구체적으로 적으세요. 에이전트는 폴더를 매핑하고 파일 변경 사항을 diff로 제안하며, 각 변경을 승인한 후에만 페이지를 생성합니다. 시작 전에 프로젝트가 구동될 환경을 결정하세요. 처음 시도라면 가치가 없는 코인을 사용하는 로컬 체인이 적합하며, 페이지가 작동하면 다음 단계로 공개 테스트 네트워크를 사용할 수 있습니다. 두 경우 모두 임시 계정을 사용하고 실제 자금이 있는 계정은 피하세요. 개인 키와 시드 구문은 폴더, 채팅, 저장소 어디에도 남기지 마세요. 결과물은 작은 크기의 테스트 완료된 페이지와 다른 사람이 따라 할 수 있는 README 파일입니다.

폴더 열기

새 채팅의 작업 폴더로 프로젝트 폴더를 선택하고 'Ask first'를 선택하세요. 그러면 파일 생성이 필요한 모든 변경 사항이 당신의 결정을 기다리게 됩니다. 시작하기 전에 ABI 파일을 해당 폴더에 넣어 두세요.

화면 설명하기

페이지가 표시해야 할 데이터와 처리해야 할 트랜잭션 상태를 평문으로 적으세요. 호출할 계약 함수와 통신할 네트워크(예: 로컬 체인)를 명시하세요.

각 diff 검토하기

채팅에서 제안된 모든 파일 변경 사항을 읽고, 짧은 메모와 함께 승인하거나 거부하세요. 전체 diff를 보려면 카드를 확장하고, 한 문장으로 설명할 수 없는 변경 사항은 거부하세요.

실행 및 확인

Shell로 빌드 명령어와 테스트 명령어를 실행하고, 각 카드의 종료 코드(exit code)를 확인하세요. 로컬 체인에서 페이지를 열고 표시된 내용과 예상 내용을 비교하세요. 다음 기능을 추가하기 전에 실패한 부분을 수정하세요.

시작을 위한 작은 ABI 파일 예시

AlphaWeft · 잔액 읽기● Ask first

ABI에서 balanceOf를 읽고 결과를 페이지에 표시하세요.

read_filebalance-abi.jsonloaded
write_fileapp.jssaved
edit_fileindex.html+4 lines
Shellyour build commandexit 0

다음 단계 전, 사용자의 승인을 기다리는 중거부수락

balance-abi.json

[
 {
  "type": "function",
  "name": "balanceOf",
  "stateMutability": "view",
  "inputs": [{ "type": "address", "name": "account" }],
  "outputs": [{ "type": "uint256" }]
 }
]

이 JSON 조각은 읽기 전용 함수인 balanceOf, 즉 ERC-20 토큰이 사용하는 잔액 조회 함수를 설명합니다. account라는 주소 인수를 받고 uint256을 반환합니다. 프론트엔드는 이러한 ABI를 사용하여 계약을 호출하며, 이 파일에는 키나 비밀 정보가 포함되지 않습니다. 프로젝트 폴더에 balance-abi.json이라는 이름으로 저장하세요. 페이지가 작동하면 실제 계약에는 더 많은 함수가 많으므로 자신의 계약 전체 ABI로 교체하세요.

첫 번째 dApp을 위한 워크스루

폴더 매핑 및 ABI 읽기

web3를 배우는 좋은 시작 방법은 아무것도 작성하기 전에 작은 ABI 파일 하나를 읽는 것입니다. 에이전트에게 balance-abi.json을 열라고 요청하세요. read_file은 파일을 표시하고, list_dir은 폴더 내 다른 항목을 보여주며, grep은 함수의 정확한 이름을 확인해 줍니다. 에이전트는 채팅에서 balanceOf가 view 함수임을 설명합니다. 즉, 데이터를 읽지만 트랜잭션을 보내지 않으므로 호출해도 체인에 변경이 생기지 않습니다. 아직 아무것도 쓰여지지 않았습니다. 에이전트는 페이지에 필요한 항목인 노드 연결, 배포된 계약 주소, 조회할 계정 목록도 제시합니다. 카드의 JSON과 각 진술을 대조해 보세요. 모델이 타입을 잘못 읽거나 파일에 없는 함수 이름을 붙일 수 있으므로, 계속하기 전에 수정을 요청하세요.

페이지를 로컬 체인에 연결하기

임시 테스트 계정의 잔액을 읽는 페이지를 요청하세요. write_file은 JSON-RPC를 통해 로컬 체인에 호출하는 app.js를 생성하고, edit_file은 index.html에 스크립트 라인을 추가합니다. dApp이 여러 체인과 통신할 때만 크로스 체인 도구가 필요합니다. 하나의 로컬 체인에서만 작업하는 첫 번째 프로젝트에는 필요 없으므로 생략하세요. 'Ask first' 모드에서는 두 변경 사항이 diff로 대기합니다. 읽고 승인하세요. Shell이 빌드 명령어를 실행하면 카드에 실제 종료 코드가 표시됩니다. 페이지를 열고 표시된 숫자와 로컬 체인이 같은 계정에 대해 보고하는 숫자를 비교하세요. 두 값이 다르면 에이전트에게 페이지 수정을 요청하세요. 체인 주소는 한 곳에 보관해 두세요. 나중에 네트워크를 변경할 때 한 줄만 수정하면 됩니다.

트랜잭션 상태 처리하기

개발자로서 web2에서 web3로 전환하는 것은 주로 이미 만드는 방법을 아는 화면에 지갑, 네트워크, 트랜잭션 상태를 추가하는 것을 의미합니다. 에이전트에게 5가지 상태(전송 전, 지갑 대기 중, 보류 중, 확인됨, 실패)의 상태 표시줄을 추가하라고 요청하세요. edit_file은 스크립트와 스타일 시트를 변경하고, grep은 아직 누락된 상태가 있는 모든 위치를 찾아줍니다. 지갑이 서명하지만 코드는 개인 키나 시드 구문에 접근하지 않습니다. 지갑이 없을 때, 잘못된 네트워크일 때, 서명이 거부되었을 때의 메시지도 요청하세요. 실제 사용자는迟早 이러한 상황에 직면할 것입니다. 테스트 네트워크에서 임시 계정으로 페이지를 실행하고, 의도적으로 서명을 거부한 후 실패 상태가 명확한 메시지와 함께 나타나는지 확인하세요.

테스트 후 프로젝트 문서화하기

에이전트에게 각 상태에 대한 프론트엔드 테스트와 프로젝트 실행 방법을 설명하는 짧은 README를 작성하라고 요청하세요. write_file은 두 파일을 생성하고, Shell이 테스트 명령어를 실행하면 카드에 실제 종료 코드가 표시됩니다. 한 달 후에도 프로젝트를 다시 방문할 개발자를 위해 README를 먼저 읽게 되므로, README에 실제로 사용하는 명령어만 명시되어 있고 페이지가 기대하는 네트워크가 명시되어 있는지 확인하세요. 파일이 생성되기 전에 단계 목록을 보고 싶다면 먼저 'Plan only' 모드를 사용하고, 실행하려면 'Ask first'로 전환하세요. 각 diff를 읽고, 테스트 네트워크에서 임시 계정으로 한 번 테스트를 직접 실행하세요. README와 ABI 파일을 함께 보관하여 두 파일이 항상 동기화되도록 하세요.

Windows용 AlphaWeft

첫 번째 프로젝트 폴더 시작하기

AlphaWeft 다운로드 ↗