推出“盒装会议应用程序”

2025-06-04

推出“盒装会议应用程序”

在几分钟内为您的下一个活动部署一个可主题化、可定制、全栈和跨平台的移动应用程序。

🛠 使用 React Native、GraphQL、AWS Amplify和AWS AppSync构建。

此应用是开源的。点击此处查看代码库。

上周在Chain React上我做了一个题为“使用 GraphQL 实时召开会议”的演讲。

在演讲中，我谈到了 2019 年 1 月举行的 React Native Amazon 会议，以及我们如何从他们的会议应用程序中获取一些想法并将其应用于 Chain React 会议应用程序。

我们想要添加的主要功能是实时聊天，以便与会者可以讨论每个谈话，甚至向演讲者提出问题，然后由演讲者回答。

在演示中，我展示了我们如何将 Chain React 会议应用的 2018 版本更新为使用 GraphQL 后端来处理每个演讲的评论。我与Infinite Red的Robin Heinze合作了几天来完成这项工作。

我还展示了我们如何通过添加报告评论的功能和构建管理面板来处理身份和滥用问题，该面板允许版主监控报告的评论、阻止设备和删除报告的评论。

在开发这款应用时，我萌生了让这些功能可重复使用的想法，因为我知道现在有很多活动和会议。我想，为什么不尝试创造一个每个人都能用的东西呢？

挑战：这类事情的问题在于，构建包含后端（身份验证、数据库、API）的所有内容通常不容易重现。

解决方案： AWS Amplify 允许您使用基础配置部署整个后端。例如，如果我有一个应用程序，它包含身份验证、数据库、API 和无服务器功能，并且我想在多个应用程序中复现这个后端或与其他人共享，我唯一需要做的就是共享amplify文件夹，任何人都只需在终端上输入几个命令即可启动并运行同一个后端。

我决定构建一个可主题化的会议和活动应用程序，该应用程序易于定制，并且可以使用 Amplify 以这种方式进行部署。



部署应用程序

该应用程序的代码位于此处。在部署应用程序之前，我还想看一下下一部分（工作原理），以便您了解一切工作原理。

要部署该应用程序，您可以按照以下步骤操作：

# 1. Clone the repo & install the dependencies

~ git clone https://github.com/dabit3/conference-app-in-a-box.git

~ cd conference-app-in-a-box

~ npm install

# 2. Initialize and deploy the Amplify project

~ amplify init

? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y

~ amplify push

? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N

# We already have the GraphQL code generated for this project, so generating it here is not necessary.

# 3. Start the app

~ react-native run-ios

# or

~ react-native run-android
Enter fullscreen mode Exit fullscreen mode

现在后端已经部署完毕，您可以打开应用程序，创建帐户并登录。

填充数据库

接下来进入 AppSync 控制台，通过运行以下命令与 API 进行交互：

~ amplify console api
Enter fullscreen mode Exit fullscreen mode

在 AppSync 控制台中，点击“查询”以打开 GraphiQL 编辑器。当系统提示“使用用户池登录”时，您可以使用新用户名登录，并使用aws_user_pools_web_client_id位于aws-exports.js中的 ClientId。

创建突变

创建具有以下变异的新对话：

mutation createTalk {
  createTalk(input: {
    name: "Performance In React Native",
    summary: "In this talk, we will look at the various tips and tricks for taking full advantage of React Native and using the performance attributes of the new architecture.",
    speakerName: "Ram Narasimhan",
    speakerBio: "Software Engineer at Facebook",
    time: "9:00 AM - 9:30 AM",
    timeStamp: "1573491600",
    date: "November 10",
    location: "Armory",
    speakerAvatar: "https://pbs.twimg.com/profile_images/875450414161772544/UjefWmmL_400x400.jpg"
  }) {
    id name speakerBio speakerName speakerAvatar location date time timeStamp
  }
}
Enter fullscreen mode Exit fullscreen mode

查询数据

当您重新加载应用程序时，它应该在启动时列出此谈话。

要查询 AppSync 控制台中的所有对话，您可以运行以下查询：

query listTalks {
  listTalks {
    items {
      id
      name
      summary
      speakerName
      speakerBio
      time
      timeStamp
      date
      location
      speakerAvatar
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

工作原理

该应用程序的代码位于此处。

在项目中，您会注意到一个名为amplify的文件夹。此文件夹包含应用程序的后端，可以在任何人的帐户中重新部署。在amplify文件夹中，您会看到一个backend文件夹。在此文件夹中，您将看到两个主要功能的配置：

  1. 身份验证服务（由 Amazon Cognito 提供支持）
  2. GraphQL API（使用 AWS AppSync 构建）

在backend/api文件夹中，您将看到 GraphQL API 配置以及基本GraphQL Schema。

这是基础的 GraphQL Schema。你会看到基础 Schema 如下所示：

type Talk @model {
  id: ID!
  name: String!
  speakerName: String!
  speakerBio: String!
  time: String
  timeStamp: String
  date: String
  location: String
  summary: String!
  twitter: String
  github: String
  speakerAvatar: String
  comments: [Comment] @connection(name: "TalkComments")
}

type Comment @model {
  id: ID!
  talkId: ID
  talk: Talk @connection(sortField: "createdAt", name: "TalkComments", keyField: "talkId")
  message: String
  createdAt: String
  createdBy: String
  deviceId: ID
}

type Report @model {
    id: ID!
    commentId: ID!
    comment: String!
    talkTitle: String!
    deviceId: ID
}

type ModelCommentConnection {
    items: [Comment]
    nextToken: String
}

type Query {
  listCommentsByTalkId(talkId: ID!): ModelCommentConnection
}
Enter fullscreen mode Exit fullscreen mode

并不是说应用程序中没有实现报告功能，而是它已经存在，所以如果您想添加报告功能和管理仪表板，则无需配置任何其他内容。

如果您以前从未使用过 Amplify，您可能不知道@model和@connection指令。它们是Amplify CLI 的GraphQL Transform库的一部分。

@model - 使用此指令装饰任何基本类型以获取 CRUD 和列表查询和变异定义、DynamoDB 表以及为 GraphQL 操作创建的解析器。

@connection - 使用此指令指定字段之间的关系（一对多，多对多）。

自定义 GraphQL 架构

此架构可编辑。如果您的事件需要其他字段，您可以按照以下步骤更新后端：

  1. 更新模式（位于amplify/backend/api/rnconfinabox/schema.graphql）。

  2. 重新部署后端

~ amplify push
Enter fullscreen mode Exit fullscreen mode

如果您或您认识的任何人需要帮助使用此项目为您的下一个活动启动和运行应用程序，请在 Twitter 上与我联系，我很乐意提供帮助！

我叫Nader Dabit。我是 Amazon Web Services 的开发倡导者，负责AWS AppSync和AWS Amplify等项目。我专注于跨平台和云端应用程序开发。

文章来源：https://dev.to/dabit3/introducing-conference-app-in-a-box-kgj
Devto 翻译
PREV
Lambda 函数 GraphQL 解析器
NEXT
如何构建支持 AI 的自然语言合成 Chrome 扩展程序