Hostinger AI Builder 智能体模式创建 Web 应用教程
在 Hostinger AI Builder 智能体模式下，无需编写代码，即可通过 AI 提示词创建 Web 应用。本指南将介绍如何创建你的第一个项目、优化提示词，以及发布应用供公众访问。
创建 Web 应用
按照以下步骤，使用 Hostinger AI Builder 智能体模式开始创建你的第一个 Web 应用。
步骤 1 – 注册并开始新项目
首先访问 Hostinger AI Builder 官方页面，选择适合你的方案。
完成付款后，进入 Hostinger 控制面板，在左侧边栏选择网站 → 网站列表。然后，点击创建网站并选择 AI Builder。
想看看 Hostinger AI Builder 智能体模式的实际效果吗？观看我们仅用一小时就通过 AI 构建出完整 Web 应用的视频——全程无需编写代码。
步骤 2 – 熟悉工具界面
接下来是开始使用 Hostinger AI Builder 智能体模式。
你会看到一个文本框，可以用 80 多种语言编写提示词。你还可以在提示词之外附加图片、PDF 或 HTML 文件来引导 AI，例如线框图、设计参考或包含网站内容的文档。Hostinger AI Builder 会读取附加的 HTML 文件并基于它生成网站。描述完你的 Web 应用后，按回车键，也可以直接选择模板。
接下来，为你的网站选择域名，或选择“使用临时域名”稍后再设置，然后继续。
Hostinger AI Builder 需要一些时间来处理你的提示词。处理完成后，控制面板会分为两个窗格：
- 左侧窗格 – 在这里输入补充提示词，为你的 Web 应用添加更多功能或进行优化。提示词输入框下方会显示套餐中剩余的消息额度。
- 右侧窗格 – 在你调整应用时实时显示预览效果。你可以与各个元素交互以测试其功能。
在控制面板右上角，你可以找到发布按钮，用于启动你的 Web 应用并使其公开可访问。
步骤 3 – 明确 Web 应用的用途
Hostinger AI Builder 依赖于结构清晰的提示词来生成你设想中的 Web 应用。因此，提示词越精确，效果就越好。
在定义 Web 应用的用途时，请包含以下关键信息，以便 Hostinger AI Builder 理解你的想法：
- 应用用途 – 明确说明你的 Web 应用解决的问题，例如“帮助用户追踪健身进度”。
- 核心功能 – 列出你想要包含的基本功能，如用户登录、表单、控制面板或报告。
- 界面偏好 – 具体说明设计元素，如布局、配色方案和整体美学风格。
以下是一个健身平台的提示词示例，用于生成个性化的锻炼和饮食计划：
创建一个健身平台，根据用户数据提供个性化的锻炼和饮食计划。应用应允许用户输入年龄、身高、体重、活动水平和健康状况。基于这些数据，应用应生成量身定制的健身计划和膳食建议。包含一个用户友好的控制面板，带有输入表单和进度追踪器，界面美观，采用简洁现代的布局和蓝绿色与紫色的配色方案。
与其他 AI 工具一样，无论你的初始提示词多么详细，Hostinger AI Builder 的首次输出都可能不尽完美。我们可以在应用的第一次迭代基础上继续完善，方法是输入后续提示词。
步骤 4 – 自定义项目设计
下一步是自定义应用的设计。除了让应用更具视觉吸引力之外，这一过程还涉及添加用于导航和功能的重要元素。
以下是一些应包含在应用中的重要前端组件：
- 菜单 – 侧边栏、标签页或下拉菜单等区域，包含指向不同页面的快捷方式。
- 表单 – 允许用户输入数据的字段，例如电子邮箱或图片。
- 页面 – 包含不同设置和信息的全屏窗口。
- 按钮 – 执行特定操作的元素，例如提交数据或跳转到另一个页面。
如果你有详细说明应用布局和元素位置的线框图，可以将其作为提示词上传到 Hostinger AI Builder，这样会获得更精确的输出。
如果没有线框图，则可以使用基于文本的提示词，例如以下示例：
创建一个登录页面，让用户可以访问自己的账户。在此页面中包含一个按钮，将没有账户的用户引导至注册页面以创建新账户。
记得为应用设计添加更多细节，例如颜色、文字大小和字体样式。如需灵感和指导，请查看我们的网页设计技巧教程。
步骤 5 – 完善逻辑和结构
设计布局完成后，我们来完善应用的功能。流程保持不变：你只需针对想要改进的方面输入后续提示词。
在这个阶段，需要改进的方面通常与应用的逻辑和功能相关。最常见的一些方面包括：
- 业务逻辑 – 应用的底层规则。例如，你的健身应用应根据输入的健康数据给出不同的建议。
- 决策树 – 基于用户决策的应用流程。例如，如果用户选择某个菜单，应弹出预先确定的页面。
- 事件处理 – 对用户操作（如点击、滑动和按键）的响应。例如，切换开关在被点击时应切换状态。
- 数据流 – 用户数据在通过表单传递、验证或上传时的处理方式。例如，用户密码必须是与其数据库条目相匹配的文本字符串。
在为 Hostinger AI Builder 编写提示词时，务必清晰描述你想要改进的逻辑或功能。为 AI 提供更多上下文有助于它产出更准确的结果。
以下是完善数据流的提示词示例：
检查登录页面上的电子邮箱和密码字段。确保它们只接受与现有数据库条目相对应的文本字符串。
如果输入的数据与任何数据库条目不匹配，返回错误消息“电子邮箱或密码无效”。如果信息有效，则将用户重定向到主控制面板。
然后，在预览中测试 Hostinger AI Builder 是否正确配置了应用的逻辑和功能。这也有助于你发现是否有功能缺失。
为了获得最佳、最准确的结果，请每次只完善应用的一个方面。
步骤 6 – 测试并发布你的 Web 应用
至此，你的应用应该已经完全开发完毕并可正常运行。在最终定稿之前，请检查所有功能和导航，确保它们正常工作。
在 Hostinger AI Builder 中，你可以直接在右侧窗格的预览菜单中查看应用并与之交互。
以下是Web 应用测试期间应检查的内容清单：
- 功能 – 所有功能在线上环境中都应正常运行，包括执行 CRUD 数据库操作和业务逻辑的能力。
- 导航 – 应用的流程以及导航元素的功能。例如，点击登录后，应被重定向到主控制面板。
- 可见性 – 你的 Web 应用在移动设备和桌面设备上的外观。确保所有元素都正确缩放且可用。
现在，让我们来发布你的项目。点击右上角的发布按钮。
如果你在设置过程中连接了域名，Hostinger AI Builder 会将你的项目发布到该域名。否则，它将使用临时域名，直到你连接域名为止。在连接或更改域名之前，让我们先完成几项额外的测试。
首先验证跨浏览器兼容性。为此，请在不同的网页浏览器和设备上访问你的应用，看看是否会出现问题。
然后，使用 GTMetrix 等基准测试工具检查应用的性能和加载速度。如果结果不理想，可以让 Hostinger AI Builder 优化代码。
如果一切正常，返回 Hostinger 控制面板中的网站菜单，将你的域名连接到该 Web 应用。
就是这样！恭喜你，你已经使用 Hostinger AI Builder 创建并发布了一个 Web 应用。
其他资源
如果你想了解如何构建特定类型的 Web 应用，请查看我们关于同事如何构建以下应用的详细指南：
很简单，对吧？现在就动手尝试使用 Hostinger AI Builder 开发你自己的 Web 应用吧。