アプリケーションフレームワークのチュートリアル

私は、私のためにこの記事を転載していますColleague David Fateh . 上のポストをチェックアウトContentful Blog .
Shy そして私はlivestream を使用して、満足している参照フィールドをカスタマイズするにはApp Framework いくつかの新しい新しい機能を提供するカスタム反応アプリを構築する.ライブストリームの間の我々の進歩がよかった間、私はスタイルを締めて、追加機能性が可能であることを確認する自由をとりました.このポストでは、私はどのようにカスタム機能を提供するカスタムリファレンスフィールドのアプリを作成する方法を示します.

アプリケーションフレームワークの構築

開発者としてアプリケーションフレームワーク上のアプリケーションを構築するには、エディタを理解する必要があります--- contentful Webアプリケーションを使用する人々---操作し、入力データを表示することがあります.我々は、誰もが異なるユースケースを持っているので、アプリケーションのフレームワークによって許可されるカスタマイズは、これらのユニークなケースを解決するための経験を作成しようとするときに有用であることができることを知っている.
フィールドにエントリを定義するときは、データの表示方法を定義します.参照フィールドの場合、下のスクリーンショットのように、エントリのタイトルなどのデータがデフォルトで表示されます.

我々だけでなく、タイトルの本文などの参照されたエントリからより多くのデータを表示することができますアプリケーションフレームワークを使用して視覚的に似たカスタムアプリケーションを作成することによって、この経験を強化することができます.

始める

出発するにはcreate-contentful-app CLIツール.ツールは無料で開発者に利用可能であり、彼らはすぐにアプリを実行して実行するためにそれを使用することができます.作成ContentfulアプリケーションCLIツールを使用して反応アプリのプロジェクトを作成しますForma 36 デザインライブラリーとopen source field editors 簡単にアクセスできます.
以下のコマンドを実行して、これをすべて取得します.

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

この時点で我々のアプリを実行しているlocalhost:3000 しかし、我々が作成するまで、アクセスできませんAppDefinition と私たちはそれを表示する場所を選択します.これをしましょう.

appdefineの作成

安AppDefinition Contentfulでアプリケーションを表すエンティティです.あなたのアプリは、contentful経験の中で対話する方法の青写真の並べ替えとして考えることができます.
管理者アカウントまたは開発者アカウントをあなたのcontentful組織にある必要があります.多くの開発者は、開発者環境のための無料のContentful組織を作成する最も簡単です.また、あなたのプライマリ組織でアプリケーションを開発することができます場合は、スペースや環境には、生産直面していない開発することを好む.
AppDefinitionを作成するには、上部のメニューバーのアプリをクリックして組織の設定をクリックします.一度AppDefinitionページで、新しいアプリケーションを作成するボタンをクリックします.
まず、我々のアプリに名前を付けるつもりです:カスタムリファレンスフィールド.次に、我々はそのアプリのURLを作成しますhttp://localhost:3000 . これは、我々のローカルアプリケーションが現在実行されているところです.最後に、フィールドの場所を選択し、参照フィールドを選択し、確認ボタンをクリックしてこのAppDefinitionを保存します.

組み込みの参照フィールドをカスタムアプリケーションと置き換える

今、我々は我々のアプリが表示さを見たいスペースに頭を聞かせてみましょう.我々のスペースや環境のトップメニューでアプリをクリックしてアプリをクリックします.ここから我々は新しく作成されたカスタムフィールドアプリケーションを見つけることができますし、私たちのスペースにインストールします.
我々は、参照フィールドを引き継ぐアプリを構築しているので、我々はまた、参照フィールドを使用するコンテンツタイプを持っている必要があります.私たちの目的のために、私たちはブログポストリストコンテンツタイプを例として使用するつもりです.
我々のコンテンツモデルでは、我々は、参照フィールドの設定を編集し、外観を選択して我々のアプリを使用して私たちのブログのポストのリストのフィールドを調整する予定です.新しく作成されたカスタムリファレンスフィールドのアプリを選択してみましょう.

カスタム機能のアプリケーションをコーディング

アプリがフィールドに割り当てられたら、我々は我々のエントリのセクションに頭をすることができますし、エントリがどのようにアプリケーションが表示されるかを確認して下さい.この例では、別のブログ記事にリンクする参照フィールドがあります.各ブログのポストは、我々はいくつかのより多くのカスタム情報を表示するために使用するリッチテキストフィールドを持っている---何かは、デフォルトの参照フィールドの経験よりも少し多くの機能を提供します.
カスタム機能を作りましょう.第一に、私たちは、Hello World ComponentをForm 36からのコンポーネントと置き換えます、そして、反応からのユーティリティとContentfulrich 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';

次に、フィールドコンポーネントをカスタムコードに置き換えます.このマークアップは非常に複雑ではないが、私たちは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 .

ラッピング

我々の目的のために、エントリーの中でフィールドを変えることは非常に強力なツールでありえます.なぜあなたが少し既存の機能を変更するか、完全に自分自身を再作成したい場合があります.単純にWebアプリケーションを変更したい場合は、我々のオープンソースエディタライブラリ内の反応コンポーネントとしてデフォルトのフィールドを提供します.ケースでは、あなた自身の経験を作成したい場合は、forma 36は非常に流体の外観を達成するための貴重なツールとすることができますあなたのUIの感じを自分でレイアウトを散らかす時間を費やすことなく.
それは、開発者が一緒に来て、彼らのユーザーのために想像するUI/UXのために彼ら自身の構成要素を構築した異なった方法を見るのはいつもおもしろいです.多くの開発者が我々を利用するSlack Community ヘルプとアイデアが簡単に共有されるところ.私はチャネル上でアクティブであり、常にアイデアを探るか、アプリケーションの作成プロセスを介して他の開発者を導くために満足している.
あなたが我々のコミュニティに加わりたいならば、あなたは我々がしているクールなもののいくらかを利用して、そこで議論することができます.あなたがより多くのビデオチュートリアルを見ることに興味があるならば、我々の毎週のストリームをチェックしてくださいTwitch そしてどこで我々はコードを生きて、その場で問題を解決する!
あなたがまだ無料のcontentfulアカウントのためにサインアップしないならば、コミュニティ版のために登録してください!