게이츠비 4번, 이성 세계로 가는 굽은 길을 알아라.

내 이전 게시물에서 나는 다음과 같은 토론을 한 적이 있다.

게이츠비 구축

제작 페이지

페이지 스타일 설정

이것은 기본적인 사이트에 있어서는 충분하지만, 만약 우리가 어떤 것들을 더욱 활기차게 하려면 다음과 같은 것이 필요하다.

변경 가능한 데이터를 저장하는 데이터베이스

데이터베이스 컨텐츠 변경 방법

페이지에 데이터베이스 내용을 표시하는 방식.

쿨한 아이들은 백엔드라고 하는데, 이것은 전체 직업 생활을 바쳐 구축할 수 있는 것이다.우리는 이렇게 하지 않을 것이다. 우리는 이성이라는 것을 쓸 것이다.
만약 당신이 다른 데이터를 사용하는 것을 좋아한다면, 이것은 매우 멋있다. 게이츠비는 당신이 무엇을 사용하는지 별로 신경 쓰지 않지만, 내가 구축하고 있는 응용 프로그램에 대해 이것이 바로 내가 사용할 것이다.뒤의 문장에서 이러한 개념들은 옮길 수 있다.

무엇이 이성입니까?

이성은 끝이 없다.머리가 없다는 것은 단지 앞부분이 없다는 것을 의미할 뿐이다. 사용자는 거기에 무엇이 있는지 볼 수 있다. 이것이 바로 우리의 게이츠비이다.CMS는 컨텐트 관리 시스템을 나타냅니다. 컨텐트를 관리하는 시스템입니다.😸... 좋아, 이것은 우리가 데이터를 바꿀 수 있는 모든 방식을 처리할 수 있는 도구야. 주로...작성, 읽기, 업데이트, 삭제일명 CRUD라고도 합니다.
시장에는 머리 없는 CMSE가 무더기로 쌓여 있는데, 어떤 것은 간단하기 위해서이고, 어떤 것은 더욱 잘 통제하기 위해서이다.이성은 둘의 완벽한 결합이다. 이곳의 일반적인 원칙은 당신이 사용하는 모든 것에 많든 적든 적용되어야 한다.
가상의 식당 프로그램에서 우리는 메뉴에 많은 음식이 있고 메뉴가 자주 바뀐다.우리는 이것을 번거로운 일로 만들고 싶지 않다. 우리는 심지어 당신이 없는 상황에서 관리할 수 있는 반숙련된 고객을 원할 수도 있다.이것이 바로 CMS를 매끄럽게 하는 것이 좋은 생각 중의 하나이다.그러나 이것은 그것을 설치하는 것이 그렇게 쉽다는 것을 의미하지 않는다.어디 보자.

나는 어떻게 해야만 이성을 유지할 수 있습니까?

Sanity Website 의 지침에 따라 대부분의 내용을 알 수 있습니다.
나는 명령행을 통해 그것을 어떻게 시작하고 실행하는지에 중점을 둘 것이다.

1단계 - Sanity CLI 설치 및 초기화

이것은 타자처럼 간단하다npm install -g @sanity/cli && sanity init이것은 전 세계에 설치되며, 두 번째 명령은 빈 Sanity 실례를 위치에서 초기화합니다.sanity --version를 사용하여 모든 버전이 예상에 부합되는지 확인할 수 있습니다.
시작 프로그램 파일을 시작하고 실행하면 이상하게 다시 초기화해야 합니다.

2단계 - 재구성

자신에게 이성을 소개할 때가 되었다.
먼저 sanity init --reconfigure를 입력하면 건전한 계정을 만들 수 있음을 알려 줍니다.GitHub이나 구글을 인증 제공자로 사용해 쉽게 할 수 있는 상당히 간단한 과정이다.
둘째, 당신의 프로젝트의 이름을 지어주세요.
셋째, 개인 데이터 집합을 원하십니까, 공공 데이터 집합을 원하십니까, 다른 데이터 집합을 설정하여 테스트를 할 수 있도록 합니다. 처음으로 공공 생산 데이터 집합을 설정하는 기본 설정을 고수했지만, 이것은 현실 생활에 매우 중요합니다.

3단계 - SAnity Studio 소개

우리는 이미 모든 것을 설정했기 때문에 npm start 또는 sanity start 을 입력할 수 있습니다. 만일 모든 것이 순조롭다면,Sanity가 로컬 호스트 3333에서 실행 중이라는 것을 알려 줍니다.만약 브라우저에서 그것을 열면, 시스템은 로그인하고... 을 알릴 것입니다.
그것은 너에게 빈 패턴이 있다는 것을 알려줄 것이다.심심해.
그럼 우리 여기서 뭐 좀 해보는 게 좋을 것 같아.

4단계. - 우리의 첫 번째 모드.

빈 모드 메시지가 guide에 링크됩니다.이것은 내가 여기에 입력한 것보다 더 많은 세부 사항을 제공하는 아주 좋은 단계 안내서이다.하지만 나는 아래에서 내가 한 일을 되돌아볼 것이다.
나는 가설적인 식당 사이트가 있기 때문에, 나는 제공된 요리에 관한 내용을 저장하고 싶다.schemas 폴더에 dish.js라는 새 모드를 만들었습니다.이 파일은 접시의 실제 의미를 정의하는 대상을 내보냅니다.내 댓글이 일리가 있었으면 좋겠다.

export default {
  name: 'dish', // what sanity will know it as
  title: 'Dishes', // what we see it called in Sanity Studio
  type: 'document', // We will get to this later, document will do for now
  fields: [
    // what fields does a dish have?
    {
      name: 'name', // What Sanity will know it as
      title: 'Dish Name', // What we see it called in Sanity Studio
      type: 'string', // The datatype, this could be lots of things.
      description: 'Name of the Dish', // Just explains what the field is.
    },
  ],
};

일단 디스 모드를 구축하면 전체 모드에 추가해야 합니다.js 파일은 다음과 같이 createSchema 객체를 수정합니다.import dish from './dish이런 식으로 여러 모델을 구축하는 방법을 알아보시기 바랍니다.

5단계 - 믿을 수 없는 백엔드 기술 활용

우리 이성 작업실로 돌아가자.만일 모든 것이 순조롭다면, 우리는 왼손 옆에 접시가 있는 것을 볼 수 있다.내용이 없어요.우리는 오른쪽에 있는 새로운 아이콘을 클릭하여 이 문제를 해결하고 우리의 첫 번째 요리를 추가할 수 있습니다!

물론 메뉴 이름만 저장하는 것은 그리 재미있지 않기 때문에 마음에 들면 오른쪽 아래 메뉴를 통해 삭제할 수 있다.

더 잘하라고!

이 점에서 가능성은 무한하다.Sanity docs는 이를 기반으로 어떻게 구축되는지 이해하는 데 매우 도움이 되지만, 다음은 제가 한 일입니다.

import { check } from 'prettier';

export default {
  name: 'dish',
  title: 'Dishes',
  icon: () => '🥣', // Lets give it a cool icon!
  type: 'document', //
  fields: [
    {
      name: 'name',
      title: 'Dish Name',
      type: 'string',
      description: 'Name of the Dish',
    },
    {
      name: 'vegetarian',
      title: 'Vegetarian',
      type: 'boolean',
      description: 'Is it Vegetarian?',
      options: {
        layout: 'checkbox',
      },
    },
    {
      name: 'vegan',
      title: 'Vegan',
      type: 'boolean',
      description: 'Is it Vegan?',
      options: {
        layout: 'checkbox',
      },
    },
    {
      name: 'price',
      title: 'Price',
      type: 'number',
      description: 'Price of dish in pence',
      validation: (Rule) => Rule.min(99).max(10000), // Limits what can be entered for price
    },
    {
      name: 'image',
      title: 'Dish Image',
      type: 'image',
      options: {
        hotspot: true, // clever thing that lets us edit where to focus the picture when resizing
      },
    },
    {
      // Add a slug to deal with pesky spaces in names
      name: 'slug',
      title: 'slug',
      type: 'slug',
      options: {
        source: 'name',
        maxLength: 50,
      },
    },
  ],
  preview: {
    select: {
      name: 'name',
      vegetarian: 'vegetarian',
      vegan: 'vegan',
    },
    prepare: (fields) => ({
      title: `${fields.name} ${
        fields.vegan ? '- 🌱  Ve' : fields.vegetarian ? '-🍆 Veg' : '' //Nesting Ternaries is a naughty thing to do btw.
      }`,
    }),
  },
};

결과:

맛있어 보이기 시작했어!참고:

채식주의자와 채식주의자의 선택을 증가시켰다

미리 보기 속성을 추가하여 일부 정보를 얻을 필요가 없습니다.

하지만 더 똑똑해지기 시작해 관련 자료를 살펴보자.

두 번째 내용 유형을 가진 관계 데이터

네, 멋있습니다. 저희 식당에는 음식이 좀 있습니다. 그러나 특별한 음식 요구가 있는 고객들이 저희가 제공하는 음식을 걱정하게 하고 싶지 않습니다. 그래서 유제품, 견과류, 밀기울 사용에 관한 데이터를 수집하고 싶습니다.이와 같은 일들.
여러 가지 요리에서 유제품을 사용하는데, 아마도 이후에 우리는 메뉴에서 유제품을 여과할 수 있을 것이다.장기적으로 보면 이렇게 하면 정력을 절약할 수 있다.그것은 모든 요리에 숨겨진 하나의 정보가 아니라 하나의 단독 내용 유형으로 존재해야 한다.
한 가지 요리는 밀기울과 조개를 함유할 수 있는 많은 불내증을 충족시킬 수 있다.그래서 우리는 일대다 관계라고 부른다. 왜냐하면 한 가지 요리에는 우리가 관심을 가지는 성분이 많을 수 있기 때문이다.
좋습니다. 우선, 우리는 새로운 모델이 필요합니다. types: schemaTypes.concat([dish]),. 우리는 우선 그것을 상당히 간단하게 유지하기를 바랍니다.

export default {
  name: 'intolerance',
  title: 'Dietary Intolerances',
  icon: () => '⚠️',
  type: 'document',
  fields: [
    {
      name: 'name',
      title: 'Name',
      type: 'string',
      description: 'Name of the Dietary Tolerance',
    },
  ],
};

모드에 추가하는 것을 잊지 마세요.js 파일은 이전과 같습니다.intolerance.js

잇다

기왕 우리가 이 점을 해냈으니, 우리는 요리와 그들의 불내증을 연결시켜야 한다.피자 모드에 다음과 같은 내용을 추가해야 합니다.

  {
      name: 'Intolerences',
      title: 'Contains',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'intolerance' }] }],
    },

그럼 우리 여기서 뭐 해요?디스 모드에 그룹을 추가한 다음, 이 그룹은 용납할 수 없는 인용을 포함할 것이라고 말합니다.결과는 다음과 같습니다.

UI에서는 좀 복잡하지만 이전에 만든 불용인을 우리 상품과 연결할 수 있습니다.짧은 블로그 글에 대해 말하자면, 이것은 유사 이래 가장 복잡한 데이터가 아니지만, 어떻게 발전했는지 쉽게 알 수 있다.
나의 마지막 요리는 (적어도 지금은 이렇다) 이렇다.

export default {
  name: 'dish',
  title: 'Dishes',
  icon: () => '🥣', // Lets give it a cool icon!
  type: 'document', //
  fields: [
    {
      name: 'name',
      title: 'Dish Name',
      type: 'string',
      description: 'Name of the Dish',
    },
    {
      name: 'vegetarian',
      title: 'Vegetarian',
      type: 'boolean',
      description: 'Is it Vegetarian?',
      options: {
        layout: 'checkbox',
      },
    },
    {
      name: 'vegan',
      title: 'Vegan',
      type: 'boolean',
      description: 'Is it Vegan?',
      options: {
        layout: 'checkbox',
      },
    },
    {
      name: 'price',
      title: 'Price',
      type: 'number',
      description: 'Price of dish in pence',
      validation: (Rule) => Rule.min(99).max(10000), // Limits what can be entered for price
    },
    {
      name: 'image',
      title: 'Dish Image',
      type: 'image',
      options: {
        hotspot: true, // clever thing that lets us edit where to focus the picture when resizing
      },
    },
    {
      // Add a slug to deal with pesky spaces in names
      name: 'slug',
      title: 'slug',
      type: 'slug',
      options: {
        source: 'name',
        maxLength: 50,
      },
    },

    {
      name: 'Intolerences',
      title: 'Contains',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'intolerance' }] }],
    },
  ],
  preview: {
    select: {
      name: 'name',
      vegetarian: 'vegetarian',
      vegan: 'vegan',
    },
    prepare: (fields) => ({
      title: `${fields.name} ${
        // eslint-disable-next-line no-nested-ternary, naughty naughty
        fields.vegan ? '- 🌱  Ve' : fields.vegetarian ? '-🍆  Veg' : ''
      }`,
    }),
  },
};

사용자 정의 입력

마지막 일은 기본적으로 선택할 수 있는 것이다.Sanity가 기본적으로 입력하는 방식에 국한되지 않습니다.우리는 React 구성 요소를 사용하여 자신의 버전의 입력을 만들 수 있으며, 우리는 Sanity에게 알려주기만 하면 된다.

토대

우선, 우리는components 폴더를 만들고, 그 중에서 우리가 사용할 구성 요소를 만들어야 한다.
간단한 React 구성 요소를 만들어서 React에서처럼 모드로 가져옵니다.관련 필드 객체에 다음과 같은 속성을 추가하여 어셈블리를 사용하여 입력할 수 있음을 알려줍니다.types: schemaTypes.concat([dish, intolerence]),기본 구성 요소에 기본적인 것을 보여주는 것은 좋은 생각이며, 계속하기 전에 작업 상황을 검사하는 것이 좋다.

실제 사용자 정의 입력

몇 가지는 특별하다. 왜냐하면 우리는 이성을 사용하여 우리의 입력을 정확하게 대화하게 하기 때문이다.

1. 이성으로부터 아이템 얻기

이것은 우리가 Sanity에게 이 구성 요소를 입력에 사용하기를 희망한다고 말했기 때문이다. 이것은 우리에게Sanity의 데이터와 관련된 일련의 도구를 제공하기 때문이다.몇 가지 주요 문제는 다음과 같습니다.

유형, 제목, 설명 및 기타 내용을 포함하는 아카이브 객체

값, 입력 내용

일단 바뀌면 어떻게 해야 하나

inputComponent, 입력 자체의 인용이기 때문에 이성은 무엇을 보아야 하는지 안다.

2. 하네스 기능 설정

Sanity는 다음과 같은 Santy 마법이 필요한 자체 데이터 업데이트 방법을 가지고 있습니다.
우리는 다음과 같은 제품을 수입한다: inputComponent: nameOfComponent

다음 함수를 구성합니다.

function createPatchFrom(value){
  PatchEvent.from(value === '' ? unset() : set(value))
}

기본적으로 값을 입력하면 Sanity가 설정되고 그렇지 않으면 설정이 취소됩니다.

3. 우리의 투입을 구축하고 우리의 구성 요소를 완성한다

그러므로 저는 여기서 직원들의 나이를 입력하는 것을 구축하는데 이것은 현실 생활에 있어서 나쁜 생각이지만 전체 구성 요소를 보여주기 위해서입니다.

import React from 'react'
import PatchEvent, {set, unset} from 'part:@sanity/form-builder/patch-event'

function createPatchFrom(value){
  PatchEvent.from(value === '' ? unset() : set(value))
}

export default function AgeInput({ type, value, onChange, inputComponent }){
  return (
    <div>
      <h2>{type.title} {value ? value : ''</h2> 
      <p>{type.description}</p>
      <input
        type={type.title}
        value={value}
        onChange={event => onChange(createPatchFrom(event.target.value)})
        ref={inputComponent}
      />
    </div>
  )
}

결론

아이고, 만약 네가 이성에 관심이 없다면, 이것은 무미건조할 것이다. 그러나 게이츠비는 백엔드와 관련이 없기 때문에, 우리는 우리의 데이터를 처리할 뭔가가 필요하다.'이성'은 사용하기 쉽고 내 앞으로의 댓글에 사용될 수 있기 때문에 좋은 선택이다.
다음에 우리는 게이츠비를 우리의 이성과 어떻게 연결시키는지 계속 연구할 것이다. 그러면 우리는 무대 뒤에서 우리가 부지런히 일한 성과를 볼 수 있을 것이다.