개발자 관점에서 Builder.io 배우기
28860 단어 javascriptbeginnerspodcastwebdev
주요 테이크 아웃
내가 지원하고 인지도를 높이고 있는 제품에 대해 Tim과 이야기하는 것은 큰 도움이 되었습니다.
개발자가 알아야 할 사항
내가 배운 것
몇 달 동안 제품을 배워왔기 때문에 당연하게 여기는 부분이 많았습니다. 사람들에게 제품을 보여줄 때 개발자와 콘텐츠 제작자 모두에게 유용하다고 생각할 매우 핵심 항목을 언급하는 것이 중요할 것입니다. 예를 들어 상태에 대한 데이터 바인딩 중 하나를 입력할 때 Tim은 편집자를 보고 놀랐습니다.
내가 언급하는 것을 잊은 것은 이것이 유일한 편집자가 아니라는 사실입니다. 구성 요소를 사용하고 동적 데이터를 바인딩할 수 있을 뿐만 아니라 내장 편집기를 통해 전역 스타일 지정 및 JavaScript에 액세스할 수 있는 기능도 있습니다. 아래 이미지에서 Builder.isServer를 통해 서버에서 뿐만 아니라 Builder.isBrowser를 통해 클라이언트에서만 JavaScript를 실행할 수 있음을 알 수 있습니다.
자세한 내용은
아래는 동영상에서 누락되었을 수 있는 몇 가지 자세한 내용입니다. 더 많이 배우면서 CodingCat.dev 및 Builder.io에서 더 많은 비디오를 공개할 것이라고 확신합니다.
이것은 아마도 빌더에서 이해해야 할 가장 큰 영역 중 하나일 것입니다. 오늘날 우리가 사용하는 대부분의 공통 프레임워크에는 매우 구체적이고 잘 정의된 API 호출 방법이 있습니다. 프레임워크는 사이트에 대한 페이지 및 구조를 생성하기 위한 필수 사례에서 이 작업을 수행하는 데 가장 적합하다고 설명합니다. 예를 들어 Next.js에서 페이지를 만드는 방법을 살펴볼 때 게시 페이지를 구축하기 위해 CMS를 호출하는 것이 중요합니다(빌더든 다른 것이든).
다음은 CodingCat.dev가 Next.js에서 페이지를 생성하는 방법입니다. 이는 Nuxt, SvelteKit, Gatsby 또는 SSG 페이지를 생성하는 모든 항목에서 동일합니다.
export async function getStaticPaths() {
const paths: string[] = [];
for (const postType of [
ModelType.page,
ModelType.post,
ModelType.tutorial,
ModelType.podcast,
ModelType.course,
ModelType.authors,
]) {
const pages = (await getAllBuilder({
model: postType,
fields: `data.url`,
startEnd: true,
})) as CodingCatBuilderContent[];
pages
.filter(
(page) => !['/blog', '/courses', '/podcasts', '/tutorials'].includes(
`${page?.data?.url}` )
)
.map((page) => paths.push(`${page?.data?.url}`));
}
return {
paths,
fallback: true,
};
}
그런 다음 페이지가 생성되면 해당 특정 페이지에 대해 CMS를 호출하고 시각적 페이지를 생성하는 데 필요한 데이터를 전달해야 합니다.
getAllBuilder({
preview,
model: slug ? type : 'page',
limit: 1,
userAttributes: {
urlPath: '/' + (params?.page?.join('/') || ''),
},
startEnd: true,
}),
그런 다음 이 데이터가 시스템으로 전달되면 BuilderComponent의 서로 다른 두 영역인 콘텐츠와 데이터에 있게 됩니다.
<BuilderComponent
options={{ includeRefs: true }}
model={model}
content={modelData}
data={{
recentPosts,
modelData,
courseData,
}}
/>
아래는
BuilderComponent의 모든 소품이 실제로 무엇을 하는지 이해할 수 있도록 내가 만든 분류입니다. 보시다시피 데이터는 동적으로 변화하는 상태 데이터를 포함하기 위한 것이며 콘텐츠는 Builder.io JSON에서 설명한 대로 페이지 데이터가 됩니다.
빌더 JSON
시각적 편집기를 사용할 때 개발자는 이 모든 것이 결국 HTML 및 CSS로 끝나야 한다는 것을 알고 있습니다. Builder.io는 특별한 직렬화된 JSON을 생성하기 때문에 Builder.io의 오픈 소스 프로젝트Mitosis를 사용하여 모든 프레임워크로 변환할 수 있습니다.
다음은 JSON이 어떻게 생겼는지에 대한 예입니다(비주얼 편집기 데이터 섹션 내에서 직접 사용 가능).
{
"ownerId": "303fa35cceca49e6ab548071602c8ebd",
"lastUpdateBy": null,
"createdDate": 1649885165355,
"id": "df677f1d384f4c708cf2e64d41038d33",
"@version": 3,
"name": "Learning Builder.io from a Developers Perspective",
"modelId": "3346f48bd7cf4337aa99627827b24b4a",
"published": "draft",
"meta": {
"kind": "page",
"hasLinks": false },
"priority": -1853.5,
"query": [
{
"@type": "@builder.io/core:Query",
"property": "urlPath",
"operator": "is",
"value": "/post/learning-builder-io-from-a-developers-perspective" }
],
"data": {
"page": {
"title": "Learning Builder.io from a Developers Perspective",
"authors": [
{
"author": {
"@type": "@builder.io/core:Reference",
"id": "d4652e9fa73543dc8a422e20608fc7d2",
"model": "author" }
}
],
"frameworks": [],
"excerpt": "I sat down with Tim Benniks who is a developer advocate, for his first time ever checking out Builder.io. It was great to hear what questions a developer might have about creating pages with a Visual Editor.",
"coverPhoto": {
"created_by": {
"id": "dbfd615dfc7e1b5d5a6d1427802862",
"type": "user" },
"url": "http://media.codingcat.dev/image/upload/v1649885350/main-codingcatdev-photo/Learning_Builder.io_from_a_Developers_Perspective.jpg",
"uploaded_by": {
"id": "dbfd615dfc7e1b5d5a6d1427802862",
"type": "user" },
"resource_type": "image",
"access_mode": "public",
"bytes": 699229,
"format": "jpg",
"metadata": {},
"type": "upload",
"version": 1649885350,
"height": 1080,
"tags": [],
"width": 1920,
"duration": null,
"secure_url": "https://media.codingcat.dev/image/upload/v1649885350/main-codingcatdev-photo/Learning_Builder.io_from_a_Developers_Perspective.jpg",
"created_at": "2022-04-13T21:29:10Z",
"public_id": "main-codingcatdev-photo/Learning_Builder.io_from_a_Developers_Perspective" }
},
"title": "Learning Builder.io from a Developers Perspective",
"inputs": [],
"blocks": [
"/* @ref:block:builder-ad4ccd18b8fb48869d2af8910c217787 */" ]
},
"metrics": {
"clicks": 0,
"impressions": 0 },
"variations": {},
"lastUpdated": 1649897478865,
"testRatio": 1,
"screenshot": "https://cdn.builder.io/api/v1/image/assets%2F303fa35cceca49e6ab548071602c8ebd%2F78aab7136e5d44ba878113dc279fa6a5",
"createdBy": "HYxMkZFRmMTuS5LD6DoM9GlsuXV2",
"lastUpdatedBy": "HYxMkZFRmMTuS5LD6DoM9GlsuXV2"}
"블록"항목은 레이어 패널에 있는 단일 항목이 고유한 블록 구성 요소로 설명되는 위치입니다. 모든 것을 보여주기에는 너무 큽니다. 다음은 이러한 블록 중 하나의 예입니다. 이 경우에는 NextImage라는 사용자 지정 Next.js 구성 요소입니다.
{
"@type": "@builder.io/sdk:Element",
"@version": 2,
"id": "builder-a882c6d717364475be6dc0cef0f178a0",
"component": {
"name": "NextImage",
"options": {
"layout": "responsive",
"width": 1920,
"height": 1080,
"alt": "An image description",
"className": "rounded-xl",
"cloudinaryImage": {
"public_id": "main-codingcatdev-photo/BuilderComponent",
"resource_type": "image",
"type": "upload",
"format": "png",
"version": 1649896683,
"url": "http://media.codingcat.dev/image/upload/v1649896683/main-codingcatdev-photo/BuilderComponent.png",
"secure_url": "https://media.codingcat.dev/image/upload/v1649896683/main-codingcatdev-photo/BuilderComponent.png",
"width": 1920,
"height": 1080,
"bytes": 317529,
"duration": null,
"tags": [],
"metadata": {},
"created_at": "2022-04-14T00:38:03Z",
"access_mode": "public",
"created_by": {
"type": "user",
"id": "dbfd615dfc7e1b5d5a6d1427802862" },
"uploaded_by": {
"type": "user",
"id": "dbfd615dfc7e1b5d5a6d1427802862" }
}
}
},
"responsiveStyles": {
"large": {
"borderRadius": "20px",
"boxShadow": "-webkit-box-shadow: 5px 5px 15px 5px #000000; box-shadow: 5px 5px 15px 5px #000000;" }
}
}
하나의 게시물에서 Builder.io에 대한 모든 것을 알려드릴 수는 없지만 저희 팀은 개발자의 성공을 돕기 위해 문서, 과정 및 비디오를 구축하고 있습니다!
Reference
이 문제에 관하여(개발자 관점에서 Builder.io 배우기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codingcatdev/learning-builderio-from-a-developers-perspective-c69텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
