Noodl 2.0β기능 프레젠테이션을 제작해 보았습니다(실장편 4: 1페이지 응용 프로그램)

개요
Noodl 버전0β이것은 사용판으로 제작된 기능 시연이다.
Noodl이 뭘 할 수 있는지 파악해.
목적은 각 기능을 어떻게 실현하는지 참고하는 것이다.
이번에는 지금까지 제작된 구성 요소를 응용프로그램으로 공개한다.
카탈로그
기능 소개
1. Noodl 2.0β기능 프레젠테이션을 해봤어요.
실장편
1. 시각적 상호작용
2. 비주얼 인터랙티브2
3. 탐색 및 구성 요소
4. 단일 애플리케이션 ← 이번 보도
샘플 샘플 데이터의 이용
・GiitHub의 [장비] https://macole.github.io/Noodl2_LibDemo/index.html
・GiitHub의 샘플 데이터 및 구축 절차

Github ~/Noodl2libDemo 이하의 PC를 Clone하십시오.

프로젝트 >Import exsisting 프로젝트에서 Noodl2로 Noodl2 시작libDemo를 선택하십시오.

Library Add Material UI Kit에서 시작하십시오.

주의 사항
• 이번 시위는 Ver2입니다.0β판으로 제작 중입니다.Ver1.3 움직이지 않는다.
1. 사용자 인터페이스 구성
지금까지 제작된 구성 요소를 화면에 배치하다.응용 프로그램의 UI 섹션을 구성합니다.
그림 화면에 생성된 탐색 구성 이미지

1-1. 사용할 노드
노트
설명
MuiTheme
전체 페이지의 디자인.주제 색상 통일 설정
Group
페이지 루트로 사용
02_Header
페이지 머리글을 표시하는 데 사용되는 자체 제작 구성 요소
MuiButtonNavigation
페이지 내비게이션용 노드. ※미리 보기와 Depoly 파일에 다른 사용 방법을 표시하는 데 익숙해짐1
MuiButtonNavigationAction
항목 노드 탐색
MuiIcon
두 가지 이상의 색을 혼합한 노드
String Selector
색인 내보내기 문자열
1-2. 노드 구성 및 연결
우선 노선으로 그룹을 만들고 내비게이션 부분을 하위 노드로 구성한다.
또한 전체 페이지의 디자인을 통일시키기 위해 무이템을 루트 그룹에 모노드로 구성한다.MuiTheme: Other: type이 "Dark"로 설정되면 페이지 전체가 어두운 색조입니다.
노드 연결에서 TabIndex에서 MuiBottonNavigation에서 선택한 하위 노드를 가져오고 String Selector:Index를 입력하여 표시된 페이지의 제목을 제목 부분에 표시합니다.
전체 그림 노드

MuiButon Navigation을 구성 요소로 사용하는 경우 제대로 표시되지 않습니다.따라서 MuiButon Navigation 노드는 구성화되지 않은 페이지 경로에 구성됩니다.
2. 페이지 제작
구성 요소 생성 페이지를 구성합니다.페이지 자체도 구성 요소로 등록됩니다.
2-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드
Text
텍스트를 나타내는 노드
12_MuiCard
카드형 콘텐츠를 표시하기 위한 자체 제작 노드
ComponentInputs
어셈블리의 외부 입력입니다.Mounted를 통한 화면 표시 전환
2-2. 노드 구성 및 연결

생성된 페이지는 구성 요소로 등록되어 외부 표시/숨기기 입력을 수락합니다.구체적으로 ComponentInputs:Mounted⇒Group:Mounted와의 연결을 통해 외부에서 그룹을 제어하는 Mounted에서 표시/숨길 수 있다.
2-3. 페이지 스크롤
페이지 스크롤은 Group 노드의 Scroll Behavior에서 설정합니다.
・ None: 스크롤 안 함, Native: 스크롤 바, Noodl: 스크롤 바 없음 스크롤
Scroll Direction을 통해 스크롤 방법을 설정합니다.
・수직 스크롤: Vertical, ・가로 스크롤: Horizontal
3. 화면 이동
화면 이동의 실현은 표시하고자 하는 모든 페이지의 내용을 읽는 것이다.페이지 컨텐트 표시/숨기기(Mounted)를 통해 화면 마이그레이션을 빠르게 수행할 수 있습니다.

화면에 표시하려는 모든 요소인 Component를 읽습니다.

사용자 인터페이스를 사용하여 각 Component의 표시/숨기기(Mounted)를 전환합니다.

도면 이동 이미지

생성된 페이지는 구성 요소로 등록되어 외부 표시/숨기기 입력을 수락합니다.구체적으로 ComponentInputs:Mounted⇒Group:Mounted와의 연결을 통해 외부에서 그룹을 제어하는 Mounted에서 표시/숨길 수 있다.
3-1. 사용할 노드
노트
설명
Group
그룹 노드에 사용되는 노드
MuiButtonNavigationAction
탐색 항목의 자체 노드
Expression
간단한 공식으로 독자적인 계산을 하다.여기에 "==="공식을 사용하여tab의 값을 판단합니다
3-2. 노드 구성 및 연결
전체 그림 노드

노드가 연결된 점은 MuiButtonNavigation:TabIndex를 통해 얻은 색인 값을 각 Expression식에 입력하는 것입니다.
Expression을 통해 tab의 값을 판정하고, 결과적으로 Result를 페이지 내용의 Mounted에 입력합니다.
따라서 선택한 NavigationButon에 따라 페이지 내용의 표시/숨기기를 전환합니다.
4.depro·성과물
Noodl은 성과 SPA(한 페이지 응용 프로그램)2로 HTML과 JavaScript 파일을 출력합니다.
그림 설계의 방법과 성과

화면 오른쪽 위 모서리에 정렬된 아이콘의 화살표를 선택하고 Pick Folder를 통해 출력 대상 폴더를 선택하여 프로그램을 실행할 수 있습니다.
디버그 후에 방금 선택한 폴더는 다음 파일 그룹을 만들 것입니다.

그림 결과물의 배치
내보낸 폴더를 모두 웹 서버로 복사하는 경우 외부에서 만든 응용 프로그램을 사용할 수 있습니다.방문 장소는 index입니다.).
또 코도바 등 웹 애플리케이션을 개발할 수 있는 프레임워크를 활용해 크로스플랫폼을 지원하는 앱을 제작할 수 있다.공식 홈페이지Noodl 설명서에 설명이 있습니다.
총결산
이번에는 실장편으로 지금까지 제작된 구성품을 접목해 응용화한 해설을 선보인다.
Noodl에서는 MQTT와 웹 API 외부의 실제 데이터도 활용할 수 있다.또한 기능을 추가하기 위해 JavaScript를 가져올 수도 있습니다.
참고 문헌
공식.
- Noodl 공식
- Noodl 문서
Noodl2 관련 문서
- Noodl 2.0 베타 버전에 참가하세요!
- Qitta:Noodl 2.0β버전이 공개되었으니 사용해 봤습니다!자습서> 구성 요소 추가
- Noodl 및 Micro:bit 연결, 정보 교환> 마이크로:bit와의 공동 작업
- Noodl과 Obniz로 간단하게 몸무게계를 해볼게요.>obniz의 통신
- Noodl에서 웹 Speech API Speech Recognition 사용!Noodl Javascript 노드의 사용 방법도 설명합니다.> 비동기식 통신, 웹 API와의 통신
관련 비디오
- YouTube:Noodl
- 유튜브: 테크노북스 응원제 청수를 주제로 한 면서 소개
화면 아래쪽에 위치하기 때문에 페이지 내용에 설정해도 깊이를 잘 반영하지 못하거나 구성 요소가 녹아내리면 내비게이션 부분도 정확하게 표시하지 못한다↩
한 번의 다운로드에서 여러 개의 페이지 요소를 가진 구조로 실현하는 방법.페이지 전환은 사용자가 다운로드를 기다리지 않아도 신속하게 사용할 수 있기 때문에 UI/UX 개선에 효과적이다.  ↩