开始使用Bloomreach无头体验管理器。第一部分

后端之巅
198 阅读8分钟

DZone>Web Dev Zone>开始使用Bloomreach Headless Experience Manager。第一部分

开始使用Bloomreach无头体验管理器。第1部分

这本逐步的综合指南帮助新的开发人员开始使用Bloomreach无头体验管理器开发网站。

Kenan Salic user avatar通过

冯晓明（Kenan Salic

-

1月31日，22 - Web Dev Zone -教程

喜欢 (1)

评论

保存

鸣谢

320次浏览

加入DZone社区，获得完整的会员体验。

免费加入

Bloomreach Headless Experience Manager是一个无头的内容管理系统，它的API和灵活性可以支持任何前端，同时保留了强大的个性化和创作能力。

本指南帮助新的开发人员开始使用该平台。通过一系列循序渐进的里程碑，您将学会使用无头体验管理器开发网站的第一步。

第一部分。

  • 里程碑1:创建一个频道
  • 里程碑2：创建一个频道创建一个前端应用程序

第二部分。

  • 里程碑3:建立一个开发项目
  • 里程碑4:创建一个组件

在你开始之前

前提条件

在你开始本教程之前，请确保

  • 你有HTML、CSS和Javascript的基本知识。
  • 你能熟练使用计算机的命令行和文本或代码编辑器。
  • 你已经安装了最新的LTS版本的Node.js，并熟悉使用Node包管理器。
  • 您有一个Bloomreach Headless Experience Manager开发者试用账户。

登录并熟悉无头体验管理器

您应该已经收到了一封来自Bloomreach的电子邮件，其中包含您的Headless Experience Manager开发者试用账户的URL以及您的登录信息。

该URL应该是这样的，其中account_name 是您的试用账户的名称。

https://[account_name].bloomreach.io/cms

点击 "登录"，在下一个屏幕上输入你的用户名和密码。

一旦你登录了，就可以随意查看，并打开左侧导航中的不同应用程序。

在本教程中，你将主要使用体验管理器应用程序。观看下面的视频，了解体验管理器应用程序如何工作的简短演示。

里程碑1:创建一个频道

在这个里程碑中，你将使用体验管理器应用程序创建一个非常简约的新频道，只有一个页面，并向该页面添加一个组件。这将作为你将在下一个里程碑中创建的前端应用程序的后台。

不太会看书？我们为你准备了一个视频。

创建一个频道

首先，让我们来创建通道。打开体验管理器的应用程序。在频道概览中，点击右上方的*+频道*按钮。

在弹出的选择蓝图对话框中，选择网站并点击下一步。

接下来，为你的频道输入一个名字（例如，"入门"），然后点击创建频道。

新的频道现在将被列在频道概览中。

点击新频道，打开它的预览!

你现在是在主页上。目前，一个标准的骨架前台应用程序被用来渲染预览。在里程碑2中，你将创建你自己的前端应用程序，在里程碑3中，你将完成配置体验管理器的步骤，使用你的应用程序来渲染频道预览。

添加一个组件

注意页面上的黑色边框区域（如果你没有看到这个区域，请点击右上方的显示组件按钮）。这就是我们所说的容器。

A 容器 是一个组件的占位符。一个容器内可以放置多个组件。一个页面可以有多个容器。请参见 管理页面上的组件 用户指南和 网站配置 开发者文档以获得更多信息。

用左上角的按钮打开左边的抽屉，并打开组件标签。这个频道的组件库目前只包含一个组件。内容。

点击左侧抽屉里的Content组件来选择它，然后点击页面上的容器内来添加该组件。它将显示存储在页面对象中的标准 "Hello World "内容。

如果你想编辑内容，打开页面菜单，选择内容。

右侧的抽屉将滑开，显示一个编辑器，你可以在那里编辑不同的内容字段。在你编辑内容的时候，页面预览会自动更新。

点击 "保存"来保存你的改变。

在这一点上，你的修改仍然是未发布的，只在预览中可见。要发布页面并使其通过交付API可用，再次打开页面菜单并选择发布。

现在你已经创建了频道，你已经准备好进入下一个里程碑，创建你自己的前端应用程序，它将消费交付API并渲染频道

里程碑2:创建一个前端应用程序

在这个里程碑中，你将使用你在上一个里程碑中创建的频道的交付API输出，并使用Bloomreach SPA SDK来创建你自己的前端应用程序，以消费API输出并将该频道渲染成一个网站。

本页的代码示例是一个基于React的前端应用程序。

简要了解一下交付API的响应

Bloomreach无头体验管理器为前端应用程序提供了一个交付API，以检索频道和页面数据。该API的Pages端点提供了渲染特定页面所需的所有数据，包括该页面上的任何容器、组件和内容项。

你的频道单页的Pages端点可以通过以下格式的URL访问，其中[account_name]和[channel_name]应该被替换成适当的值。

https://[account_name].bloomreach.io/delivery/site/v1/channels/[channel_name]/pages

例如，如果你的账户被命名为 "trial-1234abcd"，你将你的频道命名为 "开始"，那么URL将是。

https://trial-1234abcd.bloomreach.io/delivery/site/v1/channels/getting-started/pages

在你的浏览器中输入API网址，并简单看一下JSON响应。它包含了很多对象，包括页面和页面上的容器和组件的扁平化层次结构。在这一点上，你还不需要理解所有的东西，但是你能将JSON数据中的一些对象与你在体验管理器预览中看到的页面元素相匹配吗？

参见 页面的JSON表示法 交付API参考文档中的数据格式的完整描述。

创建一个前端应用程序

现在你已经创建了一个通道，并且可以从交付的API中检索到一个页面，现在是时候创建一个可以消费API响应并渲染页面的前端应用程序了。

使用以下命令创建一个新的React应用程序。

npx create-react-app my-react-content-app

为了简化与基于Javascript的前端应用程序的集成，Bloomreach提供了一个SPA SDK，它可以与Delivery API透明地互动，并为API的数据模型提供一个简化的、与框架无关的接口。你将使用SDK来建立你的前端应用程序。

使用下面的命令来安装SDK库和Axios库。

cd my-react-content-app
npm install @bloomreach/spa-sdk @bloomreach/react-sdk axios

在你喜欢的编辑器中打开src/App.js，将其内容改为如下。

src/App.js

JSON

import logo from './logo.svg';
import './App.css';
import axios from "axios";
import { BrPage } from "@bloomreach/react-sdk";
import { Content } from "./components/Content";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <BrPage configuration={{
          endpoint: 'https://trial-1234abcd.bloomreach.io/delivery/site/v1/channels/getting-started/pages',
          httpClient: axios
        }} mapping={{ Content }}>
        </BrPage>
      </header>
    </div>
  );
}

export default App;

研究上面的代码，注意以下几点。

  • BrPage元素（从SDK中导入）是你前端应用程序中的一个占位符，它将在页面的JSON表示中渲染由交付API返回的组件。
  • 端点属性指定了交付API的页面端点的URL（确保更新URL以反映你的Headless Experience Manager账户）。
  • 映射属性将你的React组件映射到JSON表示中的对等物。
  • 一个内容组件（你将在稍后实现）被导入并被映射。

请确保修改代码中的端点URL，以反映你的Headless Experience Manager账户。

在 src 文件夹中，创建一个名为 components 的子文件夹，并在其中创建一个 Content.jsx 文件，内容如下。这将是你在上一个里程碑中添加到页面中的 "内容 "组件的前端实现。

src/components/Content.jsx

JSON

export function Content({ component, page }) { 
  
  const document = page.getDocument(); 
  const { title, content, introduction } = document.getData(); 

  return (
    <div>
      <h1>{title}</h1>
      <p>{introduction}</p>
      <div dangerouslySetInnerHTML={{ __html: content.value }} />
    </div>
  );

在这一点上，你已经准备好使用以下命令来启动你的应用程序。

npm start

这将在你的浏览器中加载该应用（在http://localhost:3000/），如果一切顺利，你应该看到以下页面。

祝贺你，你为Headless Experience Manager创建了第一个前端应用程序。

现在回到体验管理器应用程序中，对内容进行一些修改（别忘了发布！），然后刷新前端应用程序以看到更新的内容。

完整的代码

在Github上找到React、Angular和Vue的里程碑2的完整代码。

主题。

cms, react, 内容管理, 商务, 无头, api, 网络开发, bloomreach

由Kenan Salic授权发布于DZone。点击这里查看原文。

DZone贡献者所表达的观点属于他们自己。

DZone上的热门文章

评论

网络开发 合作伙伴资源

avatar
文章
阅读
粉丝