응용 프로그램 프레임워크 튜토리얼: 사용자 정의 참고 응용 프로그램 구축

나는 나의 Colleague David Fateh을 위해 이 글을 교차 발표했다.Contentful Blog의 원본 게시물을 보십시오.
Shy과 저는 livestream 맞춤형 내용 참고 필드를 사용하기 시작했습니다. App Framework을 사용하여 맞춤형 React 응용 프로그램을 구축하여 우리에게 새로운 기능과 새로운 기능을 제공합니다.비록 우리는 생방송 과정에서 좋은 진전을 거두었지만, 나는 외람되게도 스타일링을 다그쳤고, 추가 기능이 가능하다는 것을 확보했다.이 글은 사용자 정의 참고 필드 프로그램을 만드는 방법을 보여 드리겠습니다. 사용자 정의 기능을 제공합니다.

응용 프로그램 프레임워크 기반 구축

개발자로서 응용 프로그램 프레임워크에서 응용 프로그램을 구축하려면 편집자-내용이 풍부한 웹 응용 프로그램을 사용하는 사람-항목 데이터를 어떻게 조작하고 보기를 원하는지 알아야 한다.우리는 모든 사람이 서로 다른 용례를 가지고 있다는 것을 알고 있기 때문에 이러한 독특한 상황을 해결하는 데 도움이 되는 체험을 창조하려고 할 때 응용 프로그램 프레임워크가 허용하는 맞춤형 제작이 매우 유용하다.
항목에 필드를 정의할 때 데이터의 표시 방식을 정의합니다.다음 화면 캡처와 같이 참조 필드에는 기본적으로 항목 제목과 같은 데이터가 표시됩니다.

우리는 응용 프로그램 프레임워크를 사용하여 시각적으로 유사한 맞춤형 응용 프로그램을 만들어서 이러한 체험을 강화할 수 있다. 이 응용 프로그램 프레임워크는 제목뿐만 아니라 인용 항목에서 더 많은 데이터를 표시할 수 있다.

개시하다

먼저 create-contentful-app CLI 도구를 사용했습니다.개발자들은 이 도구를 무료로 사용할 수 있으며, 그들은 그것을 사용하여 프로그램을 신속하게 시작하고 실행할 수 있다.create contentful app CLI 도구는 Forma 36(저희 디자인 라이브러리)과 open source field editors을 사용하여 React 응용 프로그램 프로젝트를 생성하여 접근을 편리하게 합니다.
우리는 다음 명령을 실행하여 이 모든 것을 실현했다.

npx @contentful/create-contentful-app init reference-field-app
cd reference-field-app
npm start

이 때, 우리 프로그램은 localhost:3000에서 실행 중이지만, AppDefinition을 만들고 표시할 위치를 선택하기 전에는 접근할 수 없습니다.우리 다음에 이거 하자.

AppDefinition 만들기

AppDefinition은 Contentful에서 응용 프로그램의 엔티티를 나타냅니다.응용 프로그램이 체험을 만족시키는 데 어떻게 상호작용을 할 것인지에 대한 청사진으로 볼 수 있다.
당신은 내용이 풍부한 조직에서 관리자나 개발자 계정을 가지고 있어야 합니다.많은 개발자들은 개발자 환경을 위해 자유로운 내용이 풍부한 조직을 만드는 것이 가장 쉽다는 것을 발견한다.만약 당신이 생산을 위한 공간이나 환경에서 응용 프로그램을 개발하는 것을 좋아한다면, 주요 조직에서 응용 프로그램을 개발할 수도 있다.
AppDefinition을 만들려면 조직 설정으로 이동한 다음 위쪽 메뉴 모음에서 Apps를 클릭합니다.AppDefinition 페이지로 이동한 후 버튼을 클릭하여 새 응용 프로그램을 만듭니다.
먼저, 응용 프로그램의 이름을 Custom Reference Field로 지정합니다.그런 다음 응용 프로그램 URL을 http://localhost:3000으로 설정합니다.이것은 우리 로컬 프로그램이 현재 실행 중인 곳입니다.마지막으로 필드 위치를 선택하고 참조 필드(여러 개)를 선택한 다음 확인 버튼을 클릭하여 AppDefinition을 저장합니다.

내장된 참조 필드를 사용자 정의 응용 프로그램으로 바꾸기

이제 우리는 응용 프로그램이 나타나는 것을 보고 싶은 공간으로 들어간다.공간이나 환경의 맨 위 메뉴에서 프로그램을 클릭하고 관리 프로그램을 누르십시오.여기서, 우리는 우리가 새로 만든 사용자 정의 참고 필드 프로그램을 찾을 수 있으며, 이를 우리의 공간에 설치할 수 있다.
참고 필드를 연결하는 프로그램을 구축하고 있기 때문에 참고 필드를 사용하는 내용 유형이 있어야 합니다.Google은 블로그 게시물 목록의 내용 유형을 예로 들겠습니다.
Google 콘텐츠 모델에서 인용 필드의 설정을 편집하고 외관을 선택해서 블로그 게시물 목록의 필드를 조정해서 Google 프로그램을 사용할 것입니다.새로 만든 사용자 정의 참고 필드 프로그램을 선택하십시오.

응용 프로그램의 사용자 정의 기능 코드 작성

프로그램이 한 필드에 분배되면, 우리는 프로그램의 표시 방식을 보기 위해 항목 부분으로 이동할 수 있습니다.우리 블로그에는 서로 다른 링크가 있다.모든 블로그 게시물에는 풍부한 텍스트 필드가 있습니다. 사용자 정의 정보를 더 많이 보여주고 싶습니다. 기본 참고 필드보다 더 많은 기능을 체험할 수 있습니다.
사용자 정의 기능을 만듭니다.우선, Hello World 구성 요소를 Forma 36 구성 요소, React 유틸리티, 디스플레이에 사용할 내용 rich text renderer으로 교체합니다.우리는 또한 편리한 MultipleEntryReferenceEditor을 사용할 것이다. 이것은 우리의 open source editor package의 일부분이다.이런 상황에서 우리는 풍부한 텍스트 렌더링기를 사용한다. 왜냐하면 블로그 게시물의 인용 내용 모델의 주체는 풍부한 텍스트 필드를 사용하기 때문이다.내용 형식에 따라 사용자 정의 인용 필드 프로그램에서 인용하고 있습니다. 사용자 정의 또는 소스 구성 요소를 통해 이 데이터를 표시할 수 있습니다.

import React, { useEffect } from 'react';
import {
    Card,
    Typography,
    Heading,
    CardActions,
    DropdownList,
    DropdownListItem,
} from '@contentful/forma-36-react-components';
import { MultipleEntryReferenceEditor } from '@contentful/field-editor-reference';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { FieldExtensionSDK } from '@contentful/app-sdk';

다음은 필드 구성 요소를 사용자 정의 코드로 바꾸기 위해MultipleEntryReference Editor를 사용합니다.이 표시는 복잡하지는 않지만, Multiple Entry Reference Editor가 정확하게 보일 수 있도록 customRenderer을 실행해야 합니다.

const Field = (props: FieldProps) => {
    useEffect(() => {
        props.sdk.window.startAutoResizer();
    });

    return (
        <MultipleEntryReferenceEditor
            renderCustomCard={customRenderer}
            viewType="link"
            sdk={props.sdk}
            isInitiallyDisabled
            hasCardEditActions
            parameters={{
                instance: {
                    showCreateEntityAction: true,
                    showLinkEntityAction: true,
                },
            }}
        />
    );
};

추가 어셈블리를 렌더링하는 사용자 렌더 함수를 작성합니다.

 const customRenderer = (props: any) => {
    if (props.contentType.sys.id !== 'blogPost') {
        return false;
    }
    const title = props.entity.fields?.title?.[props.localeCode] || 'Untitled';

    return (
        <Card style={{ flexGrow: 1 }} padding="none">
            <div style={{ display: 'flex' }}>
                <div>{props.cardDragHandle}</div>
                <div style={{ flexGrow: 1, padding: '1em' }}>
                    <Typography style={{ marginBottom: '20px' }}>
                        <Heading style={{ borderBottom: '1px solid gray' }}>
                            {title}
                        </Heading>
                        {props.entity.fields.body &&
                            documentToReactComponents(
                                props.entity.fields.body[props.localeCode]
                            )}
                    </Typography>
                </div>
                <div style={{ padding: '1em' }}>
                    <CardActions>
                        <DropdownList>
                            <DropdownListItem onClick={props.onEdit}>
                                Edit
                            </DropdownListItem>
                            <DropdownListItem onClick={props.onRemove}>
                                Remove
                            </DropdownListItem>
                        </DropdownList>
                    </CardActions>
                </div>
            </div>
        </Card>
    );
};

이제 이 모든 것을 함께 놓아두자.

import React, { useEffect } from 'react';
import {
    Card,
    Typography,
    Heading,
    CardActions,
    DropdownList,
    DropdownListItem,
} from '@contentful/forma-36-react-components';
import { MultipleEntryReferenceEditor } from '@contentful/field-editor-reference';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { FieldExtensionSDK } from '@contentful/app-sdk';

interface FieldProps {
    sdk: FieldExtensionSDK;
}

const customRenderer = (props: any) => {
    if (props.contentType.sys.id !== 'blogPost') {
        return false;
    }
    const title = props.entity.fields?.title?.[props.localeCode] || 'Untitled';

    return (
        <Card style={{ flexGrow: 1 }} padding="none">
            <div style={{ display: 'flex' }}>
                <div>{props.cardDragHandle}</div>
                <div style={{ flexGrow: 1, padding: '1em' }}>
                    <Typography style={{ marginBottom: '20px' }}>
                        <Heading style={{ borderBottom: '1px solid gray' }}>
                            {title}
                        </Heading>
                        {props.entity.fields.body &&
                            documentToReactComponents(
                                props.entity.fields.body[props.localeCode]
                            )}
                    </Typography>
                </div>
                <div style={{ padding: '1em' }}>
                    <CardActions>
                        <DropdownList>
                            <DropdownListItem onClick={props.onEdit}>
                                Edit
                            </DropdownListItem>
                            <DropdownListItem onClick={props.onRemove}>
                                Remove
                            </DropdownListItem>
                        </DropdownList>
                    </CardActions>
                </div>
            </div>
        </Card>
    );
};

const Field = (props: FieldProps) => {
    useEffect(() => {
        props.sdk.window.startAutoResizer();
    });

    return (
        <MultipleEntryReferenceEditor
            renderCustomCard={customRenderer}
            viewType="link"
            sdk={props.sdk}
            isInitiallyDisabled
            hasCardEditActions
            parameters={{
                instance: {
                    showCreateEntityAction: true,
                    showLinkEntityAction: true,
                },
            }}
        />
    );
};

export default Field;

우리는 블로그 글의 제목을 표시할 뿐만 아니라 블로그 글의 첫 줄도 표시하는 작업 구성 요소가 생겼다.우리는 우리의 용례에 더 유리한 데이터를 표시하기 위해 참고 필드의 기본 체험을 성공적으로 바꾸었다.전체 코드를 보고 싶으시면 환매 협의 here을 보십시오.

마무리

우리에게 있어서 항목 내부의 필드를 바꾸는 것은 매우 강력한 도구이다.많은 경우, 기존 기능을 약간 수정하거나, 자신의 기능을 완전히 다시 만들고 싶을 수도 있습니다.웹 프로그램만 수정하면 원본 편집기 라이브러리에서 기본 필드를 React 구성 요소로 제공합니다.만약 당신이 자신의 체험을 창조하고 싶다면Forma36은 매우 귀중한 도구로 당신의 사용자 인터페이스를 매우 유창하게 보일 수 있으며, 시간을 들여 스스로 레이아웃을 흐트러뜨릴 필요가 없다.
개발자들이 서로 다른 방식으로 함께 걸어와 사용자를 위한 UI/UX의 자체 구성 요소를 구축하는 것을 보면 항상 흥미롭다는 것이다.많은 개발자들이 우리 Slack Community을 이용해서 이곳에서 도움과 아이디어를 쉽게 공유할 수 있습니다.나는 이 채널에서 매우 활발하다. 나는 항상 아이디어를 탐색하거나 응용 프로그램 창설 과정에서 다른 개발자를 지도하는 것을 좋아한다.
만약 당신이 우리 지역사회에 가입하고 싶다면, 당신은 우리가 하고 토론하고 있는 멋진 일들을 이용할 수 있습니다.더 많은 동영상 강좌를 보시려면 매주 동영상 흐름을 보십시오. 주소는 Twitch입니다. 저희는 여기서 실시간으로 코드를 작성하고 문제를 해결할 것입니다!
만약 당신이 아직 무료Contentful 계정을 등록하지 않았다면, 커뮤니티 버전을 등록하십시오!