RTE App Builder快速入门指南

RTE App Builder(测试版)使你无需编写任何代码即可从头开始构建一个完整的、可自定义的视频通话应用!你可以从同一代码库将此应用部署到6个不同的平台(Web、iOS、Android、Windows、Mac、Linux)。

通过访问声网App Builder官方网站开始使用。

你可以从配置RTE App Builder开始。

这里,我们可以输入一些详细信息,例如项目名称,它是一个字母数字标识符。

我们可以给项目一个显示名称。这将显示在App启动器、桌面等中。

此外,我们可以上传图片进行自定义。方形徽标是你的App图标,矩形徽标则显示在主(加入)屏幕上。你还可以根据需要自定义插图或背景。

接下来,你可以配置加入屏幕,并可以选择性添加OAuth。

在这一步,你需要输入Agora App ID和app证书。如果没有App ID,则可以按照本声网注册指南获取一个。

现在,我们可以选择视频通话应用中所需要的功能。

最后,我们可以选择平台并下载源代码。

要想轻松部署后端,你可以使用“部署到Heroku”按钮。这将启动Heroku向导来创建一个新的后端。

向下滚动并单击部署按钮。现在将部署后端,这需要几分钟。完成此操作后,记下部署此后端的heroku URL。

现在,我们可以提取下载完的源代码并导航到agora-app-builder文件夹。在文本编辑器中打开config.json并将获取的后端URL添加到文件中。

config.json

{
    ...
    "backEndURL" : "https://xyz.herokuapp.com/"
    ...
}

确保已安装nodejs和git来构建源代码。在提取的源代码中打开一个终端,然后键入 npm i && npm start. 来下载并安装应用程序。

Web构建

现在,让我们尝试在netlify中部署此Web app。注意,在继续构建其他平台之前,因为其他平台需要前端URL才能创建会议链接,所以应先部署网站。
运行 cd < projectName > 以导航到前端项目目录。现在,你可以运行npm run web来测试开发版本。如果一切正常,你就可以将其部署到CDN。

我们可以通过运行 npm run web:build 部署Web app。这将在 agora-app-builder//dist 目录中生成构建的网站。

该项目使用“反应路由器”执行前端路由。因此,你需要配置你的网站主机(或网络服务器)以将所有请求重定向到index.html。我们已经提供了两个最常用的SPA主机的配置:Vercel和Netlify。

vercel.json

{
    "rewrites": [
        { 
            "source": "/(.*)", 
            "destination": "/index.html" 
        }
    ]
}

_redirects (for netlify)

/* /index.html 200

/* /index.html 200

将适合的重新定向文件复制粘贴到dist(包含index.html和js)中。

将dist文件夹拖放到netlify或使用vercel CLI部署到vercel。

现在,你将获得部署的前端URL。将密钥frontEndURL设置为config.json(在app -builder目录中)中的 < the deployed URL >

config.json

{
    ...
    "frontEndURL" : "https://xyz.netlify.app/"
    ...
}

运行 npm start 在agora-app-builder目录(重建与新的前端URL的源代码)。

现在可以构建任何其他目标版本(iOS、Android、Mac、Windows、Linux)。这是因为这些 App 需要前端URL(通用链接)。

为桌面构建(Mac、Windows、Linux)

导航到终端中的前端目录 agora-app-builder/< projectName >/

在此处创建一个空的 .electron 文件夹。

你可以运行 npm windowsnpm run mac 生成开发版本。如果一切正常,你可以运行 npm run windows:buildnpm run mac:buildnpm run linux:build 发布产品(EXE / DMG / AppImage)。

二进制文件将位于 agora-app-builder/< projectName >/out

有关代码签名,请参阅本AppBuilder代码签名指南

Android版

首先,将你的Android设备连接到系统并进行调试。键入 adb devices 以验证设备是否已连接。现在,在终端中导航到前端目录 agora-app-builder/< projectName >/ 。运行npm start。这将启动开发服务器。

现在,在同一文件夹中打开另一个终端,然后运行npm run android。

这将在Android设备上部署该App。该App将连接到开发服务器。

要生成生产版本(apk文件),请转到该 < projectName >/android 文件夹并运行 ./gradlew build assembleRelease

有关代码签名,请参阅本AppBuilder代码签名指南

iOS版

将iOS设备连接到系统,创建一个Apple开发者帐户,然后注册该设备以进行开发。

导航到终端中的前端目录 agora-app-builder/< projectName >/ ,然后运行 npx pod-install 以安装iOS依赖项。pod安装完成后,使用XCode打开位于 < projectName >/ios 文件夹中的 .xcworkspace 文件。

打开信息标签并添加以下内容:

  • 摄像头权限-隐私摄像头说明
  • 麦克风许可-隐私麦克风说明
  • 添加新的URI方案-将方案设置为的小写版本 projectName (用于深层链接)

将设备设置为物理设备,然后通过单击XCode中的“运行”按钮来运行项目。

注意:由于iOS模拟器无法访问相机,因此模拟器无法使用。

有关代码签名,请参阅本AppBuilder代码签名指南

原文作者 Team Agora in Developer
原文链接 https://www.agora.io/en/blog/rte-app-builder-quickstart-guide/