Noodl 내에서 데이터 정렬 처리

개요
Noodl2.1의공식 문서에 따르면 모델과Collection은 새로워지고 지속적인 데이터는 처리하기 쉽다.
다음은 데이터 처리에 사용되는 노드의 작용과 사용 방법을 정리하고 설명한다.
마지막으로 간단한 작업 표시줄 시스템을 만들어 이해를 깊이 있게 하자.
1. 데이터 데이터 배열을 처리하는 노드와 그 역할
노들(Noodl)은 데이터 처리를 위해 다양한 노드를 준비했다.여기 있다
설명과Model、Collection、Array、Object、StaticArray의 작용이 다르다.

Noodl에서 데이터를 처리하는 노드는 노란색과 녹색의 노드입니다.
1-1. 정적 데이터를 처리하는 Statica ArayStaticArray 노드는 변화가 없는 표와 같은 정적 데이터 배열을 나타낸다.
정의는 CSV 형식, JSON 형식으로 노드에 직접 정의됩니다.데이터 배열은items 출력으로 사용할 수 있으며 각 데이터에 대한 접근 이용ForEach 노드입니다.
JSON의 정의 예

[
    {
        "Text": "Noodlの勉強",
        "Completed": "false",
        "id": "ID001"
    },
    {
        "Text": "Javascriptの勉強",
        "Completed": "false",
        "id": "ID002"
    },
    {
        "Text": "Reactの勉強",
        "Completed": "truee",
        "id": "ID003"
    }
]

CSV의 정의 예

Text,Completed,id
Noodlの勉強,false,ID001
Javascriptの勉強,false,ID002
Reactの勉強,true,ID003

1-2. 데이터 및 데이터 배열을 저장하는 Object 및 Aray
현재까지 Model (데이터) 와 Collection (데이터 배열) 세션이 변경되고 (다시 불러오기) 수치가 원상태로 회복되었습니다.
이러한 명칭 변경Model→Object、Collection}
즉 Array와 Object의 배열Obect은 세션에서 사용하는 데이터만 처리한다.
1-3. 지속적인 데이터 및 데이터 시퀀스를 저장하는 모델 및 Collection
이에 비해 지속적인 데이터를 처리하고 싶을 때.다른 사용자와 데이터를 공유하고 싶을 때.
외부 클라우드, DB, CMS와 실시간으로 동기화되는 노드로서 Array(데이터) 및 Model(데이터 정렬)
또한 Collection Collection 편집기에서 통합 관리 가능
Collection 설정 방법
왼쪽 Noodl 메뉴 맨 아래에 있습니다.플로피 아이콘에서 Collection을 정의합니다.
콜렉션은 정식 용도의 클라우드와 원형 용도의 로컬에서 제작할 수 있다.
Cloud/Local을 중간에 전환할 수도 있습니다.
패턴 정의도 진행한다.데이터를 찾거나 등록하거나 편집하거나 삭제할 수 있습니다.

모델 및 Collection 정리
앞서 설명한 데이터와 관련된 노드를 정리합니다.
데이터 지속성
레코드(행)
테이블(테이블)
임시(세션에만 해당)
Object
Array
영구(다른 세션에서도 공통)
Model
Collection
변경하지 않음
-
StaticArray
중복 데이터의 ForEach 표시
ForEach는 중복 데이터(배열)를 표시하는 노드입니다.
ForEach의 Propoties에서 반복적으로 표시할 Component를 설정합니다.
그리고 데이터 배열을 순서대로 전달하고 Component를 반복해서 표시합니다.
예를 들어 ForEach에 3개의 데이터를 배열로 입력할 때 설정된Component는 3개의 이미지를 반복해서 표시합니다.

Collection 노드 사용 시 고려 사항
Collection에 데이터를 반영하려면 먼저 실행해야 합니다Collection.
예컨대 상술한 예에서Fetch(Group 마운트 시)를 트리거로 실행Group：Did Mount합니다.
Fetch를 한 번도 실행하지 않으면 Collection에 아무 것도 포함되지 않습니다.
Component 측면의 반복 설정
중복된 Component에서 객체 모델 값에 액세스하는 사람은 2가지입니다.

Collection:Fetch 노드를 사용하여 ForEachItem에서 모델 Id를 얻고 대상 모델에 직접 접근하는 방법

ForEach에서 Port를 설정하여 ComponentInput로부터 값을 받는 방법

작업 표시줄 시스템 만들기
그럼 마지막으로 구체적인 사례를 통해 데이터를 처리하는 노드의 역할을 이해합시다.
공식 페이지 샘플 항목의 작업 시스템을 사용하여 설명합니다.
이번에 제작된 미션 시스템은 다음과 같은 기능이 있다.

등록 작업 목록 표시 및 완료/미완성 상태의 표시/전환 기능

신규 퀘스트 추가 기능

작업의 수정/삭제 기능

demosite는 여기.입니다.
프로젝트 파일은 GiitHub여기.에 있습니다.

1. 먼저 작업을 대표하는 모델 및 Collection 만들기
프로젝트를 가져올 때 Parts 폴더와 Screens 폴더에 구성 요소가 저장됩니다.
2. 필요한 부품을 먼저 어셈블리로 만들기
프로젝트를 가져올 때 Parts 폴더와 Screens 폴더에 구성 요소가 저장됩니다.각각 설명하다.
Parts 폴더의 구성 요소

Button: 버튼을 나타내는 구성 요소

Add Buton: 작업 표시줄에 있는 추가 버튼 구성 요소

헤더: 작업 이름을 나타내는 헤더 구성 요소

Check Mark: 완료/미완료를 나타내는 체크 표시 구성 요소

Task Item: 작업 표시줄에 표시되는 작업 구성 요소

구성 요소와 노드의 연결은 다음과 같다.어셈블리 설정은 프로젝트 파일에서 확인합니다.


요점은 ForEach 구성 요소입니다.이 구성 요소 Task Item 는 노드에서 반복적으로 호출되어 각자의 임무를 표시합니다.
내부ForEach는 노드에서 ItemID를 가져오고 ForEachItem의 Id를 입력합니다.이렇게 하면 모델을 대상 작업으로 사용할 수 있습니다.Model:Save에 Save 버튼의 Click 신호를 입력하여 확인 표시의 상태를 저장합니다.
또한 를 사용하여 Text에 작업 이름을 표시합니다.Model 퀘스트를 클릭하여 외부로 출력합니다.클릭한 작업에 대한 작업 편집 화면을 표시할 수 있습니다.
3. 화면 만들기
Screens 폴더의 화면 구성 요소 설명

Tasks Screen: 작업 표시

New Task Screen: 신규 작업

Edit Task Screen: 작업 편집/삭제

우선 퀘스트 표시Component Inputs입니다.Component Outputs 노드를 통해 Collection 내의 작업을 반복적으로 표시합니다.또한 퀘스트 추가 버튼의 클릭을 터치하여 퀘스트 추가 화면으로 이동합니다.

후속 신규 작업Tasks Screen
마지막 편집/삭제 작업ForEach
간단한 작업 목록 시스템을 만들 수 있습니다.
총결산
Noodl2.1에서는 Model 및 Collection을 포함한 새 데이터 정렬이 정리되어 있습니다.
정식으로 운용된 콜렉션 노드와 외부 시스템의 연합을 고려한 데는 또 다른 기회가 있다.
그럼 즐겁게 누들 살자!