我目前正在帮助客户进行为期一年的营销活动，因此我们决定使用Contentful作为管理数据和内容的基础架构。 对于没有经验的人，Contentful是一个内容管理系统，具有非常直观的在线界面和API库。 您可以像设置任何数据库一样设置数据模型，然后使用创建的内容来制作任意数量的应用程序和服务。 老实说，我什至不知道几个月前就已经存在无头CMS，现在发现自己将其添加到几乎所有提案中。 让我的客户轻松访问他们自己的数据感觉更加专业，并节省了我的时间。

在这个特定项目中，我们有一个歌曲内容模型，其中包含名称（歌曲名称）字段和相关艺术家列表。 除了显示我们的歌曲，我们还意识到，如果我们在Apple Music和Spotify上链接到歌曲，这将对我们的Web应用程序用户有所帮助。 一个快速的想法是为每个字段简单添加另一个文本字段，以便我们可以手动提供相关的url。 这将需要我的客户打开每个流应用程序，搜索歌曲，复制链接，然后返回到Contentful进行输入。 我认为尝试将搜索构建到Contentful UI中以节省客户几步并扩展我们将存储在每个轨道上的数据是明智的。

• Ecferus的Pangea（2016）
• 小孩子在钢琴上演奏迈克尔·杰克逊（Michael Jackson）的《 Bad的惊人安排》。 怎么样！？
• Tetseo姐妹展示印度东北地区的民谣调
• 安塔拉·迪伦（Dan Mixtape）
• Nipsey Hussle：洛杉矶传奇

因此，当我开始阅读有关Contentful的UI扩展的文章时，您可以想象我的惊讶。 令人惊讶的是，Contentful提供了一个SDK，用于滚动您自己的自定义界面组件，并且整个iframe 。 我对组件的愿景很简单。 客户端应该能够输入歌曲的名称，并从Apple Music API接收到结果列表。 如果客户找到了他们想要的东西，他们只需要单击结果，它将相应地更新该字段。 该字段本身就是JSON，因此我们可以存储一个不错的歌曲数据对象，而不仅仅是URL。

这是我们将要构建的视频。 准备建造？ 我们要做的第一件事是建立一个Apple Music搜索，我将使用Vue.js和CodePen.IO进行构建。

苹果音乐搜索

为了使用Apple Music API进行开发，您首先需要一个有效的开发人员令牌。 我在这里写了有关该过程的一些文章。 获得令牌后，便可以使用MusicKit JS框架开始调用Apple Music API。 这是有史以来最简单的Vue应用程序。 首先在您的HTML中使用扩展名ID创建一个元素。 然后，同时包含Vue脚本和MusicKit JS脚本。 然后输入您的简单Vue应用。

  const app = new Vue（{ 
  el：“＃extension”， 
 模板： 
   
   
   
  `， 
  data（）{ 
 返回{ 
 音乐：null， 
 查询：“” 
  } 
  }， 
 方法： { 
  search（）{ 
  this.music.api.search（this.query，{ 
 限制：5 
 类型：“歌曲” 
  }） 
  .then（data => { 
  console.log（数据） 
  }） 
  .catch（控制台。错误） 
  } 
  }， 
  Mounted（）{ 
  document.addEventListener（'musickitloaded'，（）=> { 
  MusicKit.configure（{ 
  developerToken：“ YOUR_DEVELOPER_TOKEN” 
  }） 

  this.music = MusicKit.getInstance（） 
  }） 
  } 
  }） 

让我们分解一下。 一旦安装了Vue应用程序，MusicKit框架就会使用您的开发人员令牌对其进行配置。 视图本身就是一个接受歌曲查询的单一输入。 当您按键盘上的Enter键时，将调用搜索方法。 然后，此方法使用您之前配置的MusicKit实例在Apple Music API中查询与条件匹配的前5首歌曲。 目前，这些结果仅记录在控制台中，但是您可以轻松地将其列出来。

下一步是将搜索添加为扩展，并开始将其与Contentful连接在一起。

添加扩展

您可以通过转到设置>扩展名，然后单击“添加扩展名”将扩展名添加到您的内容空间。首先，给扩展名起一个好名字。 我们将其称为“ Apple Music Search”。然后，为您的用例选择适当的字段类型。 我们将选择对象，因为我们计划使用它来构建JSON对象。 最后，指向扩展的托管位置，或者将扩展代码（如果大小小于200kb）直接放入Contentful的托管编辑器中。 由于我是在Codepen上构建扩展程序的，因此我添加了指向Codepen调试URL的链接。 单击“保存”，您将成功添加扩展。

现在，您必须将字段添加到将使用此扩展程序的模型中。 对于我们来说，这涉及到在我们的Song模型中添加一个名为Apple的新JSON对象字段。 在配置此新字段时，选择选项卡“外观”，然后选择新创建的扩展作为显示选项。 保存所有内容后，创建新乐曲时，您应该会看到新的搜索输入。 辛苦了 输入一些内容，单击Enter，然后在控制台中查找搜索结果。 现在该引入Contentful的UI扩展SDK。

集成UI扩展SDK

让我们将sdk库脚本与Vue和MusicKit一起添加到您的应用程序中。 如果您想模仿他们的美学，您可能还想包括“内容丰富”的样式表。 然后，我们将开始开发Vue应用程序。 首先，让我们在已安装事件中连同MusicKit配置一起初始化SDK，并将其与我们的数据对象相关联以便于访问。

  data（）{ 
 返回{ 
 扩展名：null， 
  ... 
  } 
  }， 
  ... 
  Mounted（）{ 
  window.contentfulExtension.init（extension => { 
  this.extension =扩展名 

  this.extension.window.startAutoResizer（） 
  }） 

  ... 
  } 

接下来，我们将为歌曲结果创建一个额外的Vue组件。 这将使我们可以将布局重新用于搜索结果和搜索选择。

  Vue.component（'song'，{ 
 道具：['song'，'set']， 
 模板： 
  
 
  
 
   
  
 

  
 
  
 {{song.name}} 
 
  
 {{song.artist}}