Ember Shepherd 项目教程

项目介绍

Ember Shepherd 是一个用于创建网站导览（site tour）的 Ember 插件。它基于 Shepherd 库，提供了额外的功能和 Ember 特定的集成，使得在 Ember 应用中创建交互式导览变得更加简单和高效。Ember Shepherd 适用于需要引导用户熟悉新功能或界面的应用场景，帮助用户快速上手。

项目快速启动

安装

首先，确保你已经安装了 Ember CLI。然后，通过以下命令安装 Ember Shepherd：

ember install ember-shepherd

配置

在 app/router.js 中配置路由：

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function() {
  this.route('demo');
});

在 app/routes/demo.js 中添加导览配置：

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class DemoRoute extends Route {
  @service shepherd;

  activate() {
    this._super(...arguments);
    this.shepherd.defaultStepOptions = {
      scrollTo: true,
      cancelIcon: {
        enabled: true
      }
    };

    this.shepherd.addSteps([
      {
        id: 'intro',
        text: 'Welcome to the demo!',
        attachTo: '.first-element bottom',
        buttons: [
          {
            text: 'Next',
            action: this.shepherd.next
          }
        ]
      },
      {
        id: 'second',
        text: 'This is the second step.',
        attachTo: '.second-element bottom',
        buttons: [
          {
            text: 'Back',
            action: this.shepherd.back
          },
          {
            text: 'Next',
            action: this.shepherd.next
          }
        ]
      }
    ]);

    this.shepherd.start();
  }
}

运行

启动 Ember 服务器：

ember serve

访问 http://localhost:4200/demo，你将看到导览效果。

应用案例和最佳实践

应用案例

1. 新用户引导：在用户首次访问应用时，通过导览介绍主要功能和界面布局。
2. 功能更新说明：当应用有重大更新时，通过导览向用户介绍新功能。
3. 复杂流程引导：在用户进行复杂操作时，通过导览引导用户完成步骤。

最佳实践

1. 简洁明了：导览步骤应简洁明了，避免过多信息导致用户疲劳。
2. 用户控制：提供用户跳过或暂停导览的选项，增强用户体验。
3. 视觉一致性：导览样式应与应用整体风格一致，避免突兀感。

典型生态项目

1. Ember CLI：Ember 的命令行工具，用于创建和管理 Ember 项目。
2. Ember Data：Ember 的数据管理库，用于与后端 API 交互。
3. Ember Inspector：浏览器扩展，用于调试和分析 Ember 应用。

通过这些生态项目的配合，Ember Shepherd 能够更好地融入 Ember 应用的开发流程，提升开发效率和用户体验。