wasmbuilder.app

WebAssembly 구성 요소 빌더

개요

이 프로젝트는 다른 webassembly 구성 요소에서 webAssembly 구성 요소를 구축하기위한 간단한 GUI 도구입니다.

시작하기

전제 조건

이 프로젝트를 구축하려면 다음 도구를 로컬로 설치해야합니다.

• 최신 안정적인 녹 도구 체인
• 방사
• 만들다

설정

프로젝트의 종속성을 설치하려면 다음 명령을 실행하십시오.

$ make setup

또한 cargo component 명령 줄 도구 (아직 설치되지 않은 경우)도 설치합니다.

현지에서 실행

로컬로 응용 프로그램을 실행하려면 다음 명령을 실행하십시오.

$ make run

기본적으로 응용 프로그램은 포트 3000에서 실행됩니다. 웹 브라우저를 열고 http://localhost:3000 으로 이동하여 응용 프로그램을보십시오.

응용 프로그램 세부 사항

응용 프로그램은 소포와 번들로 제공되는 단일 페이지 반응 응용 프로그램입니다.

WebAssembly 구성 요소 (Rust에서 구현)를 사용하는 WebAssembly 구성 요소 파일을 구문 분석하고 구성 그래프 상태를 유지 관리합니다.

RECT 응용 프로그램은 사용자 인터페이스의 상태를 유지하고 내부 그래프 상태가 그래프의 시각적 표현과 동기화되도록합니다.

응용 프로그램의 사용자 인터페이스는 디자이너가 아닌 사람 (또는 기본적인 프론트 엔드 개발 기술을 보유한 사람)이 개발했습니다. 예쁘지는 않지만 ™가 작동합니다. 인터페이스를 개선하기위한 풀 요청이 가장 환영합니다!

응용 프로그램 사용

빌딩 구성 요소

현재 개별 webassembly 구성 요소를 구축하는 가장 쉬운 방법은 녹과화물 구성 요소를 사용하는 것입니다.

앞으로 더 많은 프로그래밍 언어가 지원 될 것이며 WebAssembly 구성 요소는 자체적으로 언어가 없기 때문에이 응용 프로그램에서 사용할 수 있습니다.

구성 요소 추가

처음에 응용 프로그램에는 구성 요소 라이브러리에 webAssembly 구성 요소가 없습니다.

Add Component 버튼을 클릭하여 라이브러리에 새 구성 요소를 추가하고 원하는 webAssembly 구성 요소 ( .wasm ) 파일을 선택하십시오.

또는 WebAssembly 구성 요소 텍스트 표현 파일 ( .wat )을 라이브러리에 추가 할 수 있습니다.

구성 요소에 대한 세부 정보를 보려면 라이브러리의 구성 요소를 클릭하십시오.

인스턴스화 구성 요소

구성 요소를 인스턴스화하려면 구성 요소를 라이브러리에서 설계 표면으로 드래그하십시오.

이렇게하면 그래프의 다른 인스턴스에 연결할 수있는 구성 요소의 인스턴스가 생성됩니다.

인스턴스의 해부학

구성 요소의 각 인스턴스에는 일련의 수입 및 수출이 있습니다. 수출과 수입은 원을 나타내는 원과 사각형 사이의 연결을 드래그하여 연결할 수 있습니다.

예제 :

이 예에서 middleware 구성 요소의 인스턴스는 backend 라는 인스턴스를 가져오고 5 가지 유형과 execute 라는 기능을 내보내고 있습니다.

오른쪽 상단 코너의 원 I 인스턴스 자체를 나타내며 인스턴스 인스턴스 가져 오기를 취하는 다른 인스턴스의 가져 오기와 연결하는 데 사용할 수 있습니다.

마지막으로 왼쪽 상단 코너의 확인란을 사용하여 인스턴스를 내보낼 수 있습니다 (아래 참조).

연결 인스턴스

두 인스턴스를 연결하려면 한 인스턴스의 내보내기 원에서 연결을 다른 인스턴스에서 일치하는 가져 오기의 제곱으로 끌어냅니다.

이름은 일치 할 필요가 없지만 항목의 유형은 서로 호환되어야합니다.

인스턴스를 연결하면 두 인스턴스 간의 종속성 관계가 형성됩니다. 인스턴스 내보내기 인스턴스는 인스턴스 인스턴스 전에 인스턴스화됩니다.

예제 연결 :

이 예에서는 service 구성 요소의 인스턴스가 middleware 구성 요소 인스턴스의 backend 가져 오기에 연결됩니다.

이 그래프에 대한 구성 요소가 작성되면 middleware 인스턴스 전에 service 인스턴스가 인스턴스화되며, 이는 backend 인스턴스화 인수에 대한 service 인스턴스를 수신하게됩니다.

인스턴스 내보내기

현재 그래프의 단일 인스턴스는 내보내기 인스턴스로 지정 될 수 있습니다.

지정된 인스턴스의 모든 내보내기는 결과 구성 요소에서 직접 내보내집니다.

내보내기 인스턴스를 지정하려면 인스턴스의 왼쪽 상단에있는 확인란을 클릭하십시오.

인스턴스를 확인하지 않으면 결과 구성 요소에 내보내기가 없습니다.

구성 요소 다운로드

그래프의 현재 상태를 나타내는 구성 요소를 다운로드하려면 Download Component 버튼을 클릭하십시오.

구성 요소에 이름을 지정하고 Download 버튼을 클릭하십시오. 새 구성 요소 .wasm 파일은 브라우저에서 다운로드됩니다.

define component dependencies 확인란이 확인 된 상태로 유지되면 그래프에 참조 된 모든 구성 요소가 결과 구성 요소에 포함됩니다. 대신 구성 요소를 가져 오려는 확인란을 선택 취소합니다 (참고 : WASMTIME은 현재 구성 요소 가져 오기를 지원하지 않습니다).

기본적으로 결과 구성 요소는 애플리케이션의 구성 요소 라이브러리에 추가되며 라이브러리에서 설계 표면으로 드래그하여 새 인스턴스를 생성 할 수 있습니다.