您的应用自编码系统 —— 适用于 Ionic 的 Alan AI SDK

Alan AI 平台 • Alan AI Studio • 文档 • 常见问题解答 • 博客 • Twitter

借助 Alan AI 平台，您可以快速创建 AI 助手。通过语音命令，在任何应用中实现类人对话并执行操作。

智能应用平台

Alan AI 正在以一种全新方式——应用级 AI——变革企业软件。我们不依赖手动开发或孤立的 AI 工具，而是将智能层嵌入到您的应用中，按需构建功能。

我们的系统基于专有的 三层 AI (3LAI) 架构，可实时生成业务逻辑和用户界面，无需开发人员参与。它贯穿整个应用栈：用户界面、业务逻辑和数据管理。

智能应用平台使企业能够在几天内而非数月内，将 AI 驱动的界面集成到现有应用中。

该平台会从您应用的 API、GUI 和文档中构建一个安全且经过验证的环境，从而实现准确、上下文感知的代码生成。在运行时，AI 就像一个自编码引擎，根据用户需求即时创建新功能。

借助 Alan AI，您的软件将真正具备自适应能力——自动响应、进化和扩展。

本仓库包含 适用于 Ionic 的 Alan AI SDK，使您能够将 Alan 的智能层嵌入到 Android 应用中。

如何开始

要为您的 Ionic 应用创建 AI 助手：

1. 注册 Alan AI Studio，以 JavaScript 编写对话脚本并进行测试。
2. 使用适用于 Ionic 的 Alan AI SDK 将 AI 助手嵌入到您的应用中。详情请参阅 Alan AI 文档。

示例应用

在 Examples 文件夹中，您可以找到已集成 Alan AI SDK for Ionic 的示例应用。启动应用后，点击 Alan AI 按钮，即可开始发出语音命令。例如，您可以问：“你好”或“这个应用是做什么的？”

其他平台

您也可以尝试以下平台的 Alan AI SDK：

• Web
• iOS
• Android
• Flutter
• React Native
• Apache Cordova
• PowerApps

还有疑问吗？

如果您有任何疑问，或者文档中缺少某些内容：

• 加入 Alan AI Slack 社区，获取支持
• 请发送邮件至 support@alan.app 联系我们

Alan AI SDK for Ionic 快速上手指南

本指南帮助中国开发者快速在 Ionic 应用中集成 Alan AI，实现语音交互功能。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS 或 Linux
• Node.js：建议安装 LTS 版本 (v14+)
• Ionic CLI：已全局安装 (npm install -g @ionic/cli)
• Alan AI 账号：需拥有 Alan AI Studio 账号以获取项目密钥 (Project Key)
• 前置依赖：现有的 Ionic 项目或已准备好创建新项目

提示：国内开发者若遇到 npm 下载缓慢问题，可临时切换至淘宝镜像源： npm config set registry https://registry.npmmirror.com

安装步骤

1. 创建或进入 Ionic 项目

如果您尚未创建项目，可使用以下命令生成一个新的空白应用：

ionic start myApp blank --type=angular
cd myApp

2. 安装 Alan AI SDK

在项目根目录下运行以下命令安装官方 SDK：

npm install @alan-ai/alan-sdk-web

注意：Ionic 基于 Web 技术，因此使用 @alan-ai/alan-sdk-web 包即可兼容。

3. 获取 Project Key

1. 登录 Alan AI Studio。
2. 创建一个新项目或使用现有项目。
3. 在左侧菜单栏点击 Integration，复制 Project Key。

基本使用

以下是在 Ionic (Angular) 项目中启用 Alan AI 的最简示例。

1. 初始化 Alan AI

打开 src/app/app.component.ts (或您希望初始化的主组件)，引入 SDK 并在 ngAfterViewInit 生命周期中启动：

import { Component } from '@angular/core';
import { alanBtn } from '@alan-ai/alan-sdk-web';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  ngAfterViewInit() {
    alanBtn({
      key: 'YOUR_PROJECT_KEY_HERE', // 替换为您的 Project Key
      onCommand: (commandData: any) => {
        if (commandData.command === 'goBack') {
          // 处理语音指令逻辑
          console.log('Voice command received:', commandData);
        }
      },
    });
  }
}

2. 运行应用

启动开发服务器并在浏览器或真机上测试：

ionic serve

或在真机上运行：

ionic capacitor run android
# 或
ionic capacitor run ios

3. 测试语音交互

应用启动后，屏幕右下角会出现 Alan AI 按钮。点击按钮并尝试说出：

• "Hello"
• "What does this app do?"

您将在控制台看到相应的日志输出，标志着集成成功。接下来您可以在 Alan AI Studio 中编写更复杂的对话脚本并通过 onCommand 回调控制应用行为。