Noodl의 프로토타입 제작과 마이크로CMOS의 콘텐츠 관리의 조합은 폭발속도입니다.

Noodl 및 MicrocMOS란 무엇입니까?
폭발 속도로 UI/UX 입력을 할 수 있는 누드와 국산 HeadlessCMS의 마이크로CMOS의 조합
프로토타입 제작과 콘텐츠 관리가 간단하고 통용된다고 한다.
그림: 이런 느낌

요컨대
- UI/UX를 모델로 하는 도구: Noodl
- API를 통해 콘텐츠를 얻을 수 있는 국산 관리 시스템: 마이크로CMS
상세한 상황은 아래와 같이 소개한다.
- Noodl2.0β버전이 공개돼서 썼어요!
- 국산 헤드리스 CMS'미크로 CMS'를 시도했습니다.
계기.
작년 말부터 사용된 누들입니다.얼마 전에 동네 사람들이 밀가루 책1을 만들어 줬어요.이번에는 이 기술서적전 응원제에서 받은'면서'를 읽었는데 내용이 명쾌하다.
여기에 소개된 미스 접대(청수) 퍼레이드에서는 참가자 명단으로 CSV의 정적 데이터를 사용했다.이 정적 데이터 부분에서HeadlessCMS를 사용하면 화면 관리도 비프로그래밍의 폭발 속도가 될 것이라고 생각합니다.

바로 해봤어요.
원래 계획은'면서'의 샘플Github로 공개됐다.
그중의 uketuke 접대 아가씨(시스템)를 바탕으로 개조하다.
샘플의 취입 방법, 해설은 읽으세요밀가루 책가 가장 이해하기 쉬우므로 개요와 변경에 관한 부분만 소개합니다.
그림: 완성되면 이런 느낌

주요 기능은 오른쪽 관리 화면에 마이크로CMOS에서 읽은 참가자 목록을 표시하는 것이다
왼쪽 접대아가씨(청수아가씨)가 입력한 이름이 명단에 등록되었는지 확인하세요.
완료된 데이터는 Giithub여기.에 있습니다.
마이크로CMS로 데이터 준비
마이크로CMS이곳을 방문하다는 가능합니다.

이러한 느낌으로 GUI를 컨텐츠로 사용할 데이터 준비
그림: API 모드

그림:데이터 준비

컨텐트를 받은 WebAPI의 URL과 APIKey를 기록합니다.

Noodl 항목 변경 내용
StaticData 노드를 REST 노드로 변경
다음에 샘플 항목을 열고 Kanri 구성 요소에 REST 노드와 단추 그룹 oup, Text 노드를 추가합니다.
그림:REST 노드 설정

위에서 말한 바와 같이 Request:Resourece를'/news'(microcMS 측면에서 스스로 설정한 단점)로 설정하고 Request:Script의 Edit 단추를 누르면 아래의 Fetch 스크립트를 복사합니다.
REST_Script

define({
  inputs:{
      apikey:'string'
  },
  outputs:{
      items:'collection'
  },
  request:function(inputs,request) {
      request.headers = {"X-API-KEY":inputs.apikey};
  },
  response:function(outputs,response) {
      outputs.items = response.content.contents;
  }
})

내용은 다음과 같다.
1. REST 요청 전에 API 키를 머리글로 설정
2. 받은 데이터만 item 출력으로
마지막으로 REST 노드의 설정으로 방금 기록한 URL을 Backend:Endpoint에 추가합니다.API 키를 Inputs:apikey에 추가합니다.
Javascript 노드 수정
받은 이름과 목록을 비교하는 Javascript 노드의 일부를 수정합니다.
노들(StaticData)에서는 라이브 ID에 일본어를 사용했지만, 마이크로CMS에서는 라이브 ID에서 일본어를 사용할 수 없어 표시명을name으로 변경했다.

-if(key === "表示名")
+if(key === "name")

노드 연결

StaticData 노드의 연결을 닫고 준비된 REST 노드(1)를 Collection 노드에 연결합니다.
REST:Items->Collection:Items
또한 리스트 업데이트 버튼(2)이 REST 트리거로 준비되어 있습니다.
Group:Click->Rest:Fetch
목록에 표시된 내용이 증가했기 때문에 표시에 사용할 파트 구성 요소를 수정합니다 (3).Model 노드에 수신된 Port의 name,nickname 및 contents를 추가합니다.Text 노드로 이동하여 표시됩니다.

이상.. 해보세요.아주 간단하게 연결되었습니다.
참고 자료
참고로 웹 API에서 받은 리퀘스트 내용
Noodl의 후면 모드를 보면 다음과 같습니다.

추가: 이미지도 마이크로CMS에서 얻는 방법
마이크로CMS에서 이미지 등록 가능
이미지 URL은 필드 ID의 하위 수준입니다.
REST 노드 Script를 수정하고 수준을 조정합니다.
REST_Script 수정

define({
  inputs:{
      apikey:'string'
  },
  outputs:{
      items:'collection'
  },
  request:function(inputs,request) {
      request.headers = {"X-API-KEY":inputs.apikey};
  },
  response:function(outputs,response) {
      for (i = 0; i < response.content.contents.length; i++) {
        response.content.contents[i].url=response.content.contents[i].icon.url
      }
      outputs.items = response.content.contents;
  }
})

디스플레이 항목이 증가했기 때문에 디스플레이용 parts 구성 요소를 수정합니다.

이렇게 하면 이미지도 목록에 포함할 수 있습니다.

총결산
UI/UX의 입력을 폭발속도로 할 수 있는 누드와 국산 헤드리스CMS의 마이크로CMOS의 조합은 매우 간단하고 통용된다고 한다.
면서기술서적전 응원제는 4월 5일까지 온라인으로 판매된다.  ↩