AI+速度：30天构建并发布您的生成式移动应用程序！

type

status

slug

summary

date

我如何使用 AI 在短短 30 天内构建并发布了由 AI 驱动的生成式移动应用程序。

如果我告诉你，我只用了 30 天就把这个应用程序从纸上设计变成了 Apple 和 Google Play 商店上的成熟应用程序！您可以利用人工智能的力量在不到一个月的时间内开发自己的功能齐全的移动应用程序。听起来很不真实，对吧？

好吧，我就是这样做的。今天我想分享我在短短 30 天内设计、编码和发布一个由大语言 AI 模型支持的非常强大的移动应用程序的旅程，所有这一切都得到了 AI 的一点帮助。

让我们首先深入了解这些工具以及我如何使用它们。

问题陈述

在我们住在一个屋檐下的大家庭中，包括四个成人和两个孩子，我们发现食物浪费和膳食计划是一个重大问题。几乎每天，食物都会被浪费，而且很多时间都花在弄清楚要煮什么饭菜上。这个问题让我产生了创建一个应用程序的想法，它可以为你提供强大的膳食计划和你需要购买的确切比例，这样食物就不会浪费。

通过市场调查，我意识到目前市场上的应用程序不够强大或不够灵活。考虑到这些突出的问题，我开始创建一个应用程序，它可以超越任何食品和膳食计划应用程序，并且以简单的方式完成它。

为了实现这一目标，我使用了三个功能强大的 AI 工具：FlutterFlow、OpenAI GPT3/4 和 GitHub Copilot。

工具选择

我想要一个可以一次性构建并部署在 iPhone 和 Android 上的解决方案。我希望进行最少的基础设施规划和服务器端规划。我的目标也是快速有效地完成这件事。因此，Flutter 成为我选择的编程语言，并选择 Firebase 作为我的后端服务。（Firebase 是一项 Google 服务，提供后端即服务，在一个易于使用的平台中提供所有必要的后端组件）

对于神奇的成分——人工智能组件；我选择 OpenAI 的 GPT 模型作为我的应用程序的大脑和推理引擎。然后，为了一个易于使用的前端界面构建器，我选择了 FlutterFlow。最后，为了帮助我编写应用程序的某些部分，尤其是因为我对编码有点生疏并且之前没有在 Flutter 中进行过编程，我利用了 Microsoft 的 GitHub Copilot。

第一阶段：设计

设计应用程序涉及概念化用户界面 (UI) 和用户体验 (UX) 以及流程原型设计。

概念化 UI/UX

在任何编码之前，我布置了应用程序的功能。我设想了一种自然语言处理应用程序，允许用户提出问题并接收人工智能生成的答复。然后，我为界面创建了线框。

我使用 FlutterFlow 的 UI/UX 功能来创建线框并对用户流程进行原型设计。它让我直观地了解用户如何与我的应用程序交互。我保持流程简单并不断迭代设计。

使用 AI 构建流程原型

线框图就位后，我使用 OpenAI 的 Playground 制作了不同版本的提示（提示工程）和输入输出映射的原型。API Playground 也是调整模型不同设置的好地方。这种方法帮助我快速迭代应用程序的不同功能。该界面甚至允许您下载正在设计的流程的代码版本，从而节省大量时间。

概述 — OpenAI API（https://platform.openai.com/）

OpenAI API 游乐场是提示工程师的好地方

API Playground 还允许您下载代码

此外，我还使用 midjourney 等图像生成工具来创建我将在工具中使用的图像和assets。无论是看起来像戈登拉姆齐的表情符号还是看起来像罗恩斯旺森的胡萝卜，人工智能都使这个过程变得无缝。

Midjourney 非常擅长为前端和 UI 元素创建自定义内容和图像

第二阶段：构建

完成设计后，我就开始了编码之旅。使用 Flutterflow，我能够立即将所有 UI/UX 设计转换为入门代码。Flutterfow 是少数允许您下载 DART 代码并使用的无代码工具之一。然后，我将其导入到本地笔记本电脑上，并使用 Copilot 来微调我的代码。

什么是 Github Copilot？

GitHub Copilot 是 GitHub 与 OpenAI 合作开发的人工智能代码助手。它提供有用的建议并在您键入时自动完成您的代码，这对开发人员非常有益。

如何安装 GitHub Copilot

将其视为结对程序员，不断从 GitHub 公共存储库中的数十亿行代码中学习。它旨在了解您正在编写的代码的上下文和您提供的注释，因此它可以提供相关的代码建议。

这是我整理的一个快速教程，用于在您的计算机上安装 github copilot。

要添加 GitHub Copilot，请前往GitHub（https://github.com/），登录，然后转到“设置”>“尝试 Copilot”。

选择免费试用（请注意，您必须添加付款详细信息）。穿过屏幕。

选择允许，然后单击“保存”按钮。

单击 Visual Studio Code 后，您将被重定向到此页面。

GitHub Copilot 入门 — GitHub 文档（https://docs.github.com/en/copilot/getting-started-with-github-copilot）

copilot x Vscode 的 Github 文档

现在打开 Visual Studio Code（注意：请使用您购买副驾驶的 ID 登录 github）并转到Extensions。在搜索栏中搜索 GitHub Copilot。

安装 Github Copilot 并重新启动 Visual Studio Code。

Github Copilot 扩展

安装 Github Copilot 扩展

在底部，您将看到 GitHub Copilot 已被激活。

Github Copilot 安装成功

目前我们只有试用版。而且有效期只有30天。试用结束后，我们必须购买完整版本。

为此，请转到您在 github 上的个人资料中的以下区域并取消试用。

如果您想继续使用它，每月将花费 10 美元，或者每年 100 美元。

使用 AI 配对编码进行前端开发

使用 GitHub 的 Copilot 微调前端变得轻而易举。这种由人工智能驱动的代码完成工具会在您键入代码时提供实时建议，几乎就像程序员内心的良知一样，不断提供见解和解决方案。

Copilot 有助于快速前端微调

使用 Firestore 和 OpenAI 进行后端开发

前端界面准备就绪后，我开始进入后端，这就是 OpenAI 发挥作用的地方。我的应用程序的关键 USP（独特卖点）之一是它能够接受任何类型的输入并从膳食计划的角度理解它。这个用例是法学硕士/基础模型的最大优势。模型现在可以获取输入并理解它，并以可以理解和推断数据的方式将其传递给推荐引擎。在我的应用程序中，OpenAI 的 GPT-3/4 API 支持膳食计划请求的推理功能。

将 OpenAI API 与后端集成涉及使用从我的应用程序到 OpenAI API 的 POST 请求创建自定义函数，并将用户的问题作为参数传递。然后 API 返回人工智能生成的响应。最耗时的部分是微调响应以确保一致性并过滤掉不准确或不合格的结果。

[我正在努力在我的存储库中公开我的大部分非专有代码。关注我的仓库以获取更多信息]

theailifestyle/theailifestyle：我的 GitHub 个人资料的配置文件。（https://github.com/theailifestyle/theailifestyle）

存储请求和结果：

该应用程序的另一个重要部分是存储并允许用户检索他们的信息（膳食计划、购物清单等）。为了实现这一点，我们使用 Firebase 后端平台，更具体地说，使用 firestore 数据库。Firebase 平台的优势在于，它在您的应用程序背后创建了一个完整的 Google Cloud 项目，并负责所有集成。这使得建立基础设施变得轻而易举，几乎是一种无代码的方式。