我对全新的Amplify管理界面感到非常、非常兴奋，我所在的团队在本周推出了这一界面。你可以在几分钟内为一个应用程序创建和配置一个后台，在没有AWS账户的情况下开始构建它，在点击中创建一个模式，添加认证，并轻松部署到AWS。你不需要了解后台开发或AWS来使用它--我认为对于希望在这些领域起步的新开发者来说，这是一个了不起的工具。在本教程中，我们将为一个带有评论的博客建立一个后台，并添加用户认证。
首先进入Amplify管理界面的主页。然后，点击 "创建一个应用程序后台 "下的 "开始"。
创建一个数据模型
在下一页中选择 "数据"，然后选择 "空白模式"。如果你想的话，你也可以从一个样本模式开始，但在本教程中，我们将从头开始!在引擎盖下，数据模型利用了DataStore，这将使你的数据在离线和在线以及跨你的应用程序的用户中都可用。
然后，点击 "创建新模式"。我们将添加两个模型。帖子和评论。
点击添加按钮，然后添加模型。
将你的模型命名为 "评论"，然后添加两个字段：文本和作者。两者都将是字符串。
添加 "帖子 "模型。这个模型将有另外两个字段：标题和内容。
我们还将添加一个关系，以便每个帖子都有评论附加到它。
点击 "帖子 "模型下的 "添加关系"。选择 "评论 "作为你的相关模型，并选择 "一个帖子到多个评论"，因为我们希望每个帖子能够有多个评论。
我还让所有的字段都是必填的。如果你把注意力放在一个字段上，屏幕右侧就会出现一个面板，你可以把一个字段变成必填项。在这个视图中，你还可以创建数组字段，如果你想在你的博客文章中添加数组标签，这将会有所帮助
然后点击橙色的 "下一步。在你的应用程序中进行本地测试 "按钮。
测试你的数据
然后，你可以在一个应用程序中测试你的数据模型，以确保它以你想要的方式工作。
在这个屏幕上，你会看到关于你要设置的应用程序类型和如何设置的选项--你可以选择一个网络、iOS或Android应用程序。在本教程中，我将选择网络作为我的平台，React作为我的框架。一旦你选择了，就会有创建你的应用程序的说明。
如果你刚开始使用React，这里有一个关于开始使用它的教程!因为我想把这篇文章的重点放在管理界面上，所以我将快速浏览这部分内容。
运行下面的命令，创建一个React应用程序，并移动到其目录中。
$ npx create-react-app blog
$ cd blog
然后，安装Amplify CLI。
$ curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL
同时，拉下你新创建的后端，以便在本地进行测试。
amplify pull --sandboxId your-app-id
我们需要安装几个包，首先是typescript，因为DataStore使用它来生成模型，还有Amplify库，它将为我们提供使用和扩展后端的工具。
npm install aws-amplify typescript
然后，打开你的index.js 文件，添加以下代码来配置你的项目中的Amplify。
import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
然后，我们就可以写我们的React代码了!在本教程中，我们将创建一个帖子，并在页面上列出我们所有的帖子。让我们为每一个创建组件。
touch src/PostList.js
touch src/CreatePost.js
首先，我们将创建一个标准的React表单来创建一个新的博客文章。
// CreatePost.js
import { useState } from 'react'
export default function CreatePost () {
const [title, setTitle] = useState('')
const [content, setContent] = useState('')
const handleSubmit = async e => {
// When the form is submitted, prevent the default form behavior (don't refresh the page)
e.preventDefault()
// set the tile and content back to empty strings
setTitle('')
setContent('')
}
return (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor='title'>Title</label>
{/* Update the title in state every time the title field is changed */}
<input type='text' name='title' id='title' value={title} onChange={e => setTitle(e.target.value)} />
</div>
<div>
<label htmlFor='content'>Content</label>
{/* Update the content in state every time the content field is changed */}
<textarea id='content' name='content' type='text' value={content} onChange={e => setContent(e.target.value)} />
</div>
<input type='submit' value='create' />
</form>
)
}
然后，我们将添加Amplify代码，将我们的数据保存到DataStore。
// Import data store and the Post model
+ import { DataStore } from '@aws-amplify/datastore'
+ import { Post } from './models'
...diff
const handleSubmit = async e => {
e.preventDefault()
// Save our Post using the title and content the user inputted.
+ await DataStore.save(
+ new Post({
+ title,
+ content
+ })
+ )
setTitle('')
setContent('')
}
...
然后，我们将创建一个组件来显示每个帖子。
// PostList.js
import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { DataStore } from '@aws-amplify/datastore'
import { Post } from './models'
export default function PostList () {
const [posts, setPosts] = useState([])
useEffect(() => {
const getData = async () => {
// Get all of our posts and update state with them
const postData = await DataStore.query(Post)
setPosts(postData)
}
getData()
}, [])
// Loop through
return (
<div>
{posts.map(post => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content.substring(0, 300)}...</p>
</div>
))}
</div>
)
}
最后，在App组件中链接这两个组件。
import CreatePost from './CreatePost'
import PostList from './PostList'
function App () {
return (
<div>
<CreatePost />
<PostList />
</div>
)
}
export default App
出于教程长度的考虑，我将跳过其余的组件，因为这显示了如何获取数据和添加数据，但我的完整应用代码将在教程的最后链接。
你应该能够创建帖子，然后在页面上看到它们
如果你想对你的模式做任何改变，你可以点击 "模型 "标签并进行编辑。然后，你将需要通过重新运行amplify pull --sandboxId your-sandbox-id 命令来提取你的修改。
另外，如果你不想在部署前测试你的应用程序，你可以跳过测试页面，转到 "部署 "页面。
部署
现在，你的数据只在本地。我们需要将我们的后端部署到AWS，以便让更多的用户可以使用它。
在deploy ，你可以注册一个新的AWS账户，或者登录你已经有的账户。
选择一个，你将被带到一个 "创建应用程序后台 "的页面。为你的应用程序输入任何名称，并选择一个AWS区域来部署。你通常想选择一个最接近你大多数用户的地区。我将选择us-east-1 ，因为我在美国的东海岸。在未来，你可以使你的应用程序成为多区域，以更好地支持世界各地的用户。如果你想了解更多，这里有一张所有地区的地图!
初始化你的后台环境需要几分钟时间，但一旦它完成，你可以点击 "后台环境 "标签，然后 "打开管理界面"。
在这个视图中，你将能够编辑你的模式，管理你的应用程序内容，为你的应用程序添加认证，并使用任何其他Amplify服务扩展你的应用程序。
首先，点击右上方的 "本地设置说明"，查看另一个amplify拉动命令--这个命令将把你的应用程序连接到你部署的API，而不是沙盒的API。
$ amplify pull --appId your-live-app-id --envName staging
管理应用程序的内容
如果你点击 "管理应用程序内容 "按钮，你会被带到一个仪表板，在那里你可以创建、编辑和删除你的应用程序的数据。切换到你的 "帖子 "表，点击 "创建帖子"。然后你可以添加一个标题和内容 -- 点击 "以markdown编辑"，为你的博客文章启动一个markdown预览工具
你还可以直接在你的文章中添加评论。这是一个向你的应用程序添加初始数据的好方法，它使你不需要自己为你的应用程序写一个管理面板!
管理界面访问
你可以让没有AWS账户的人访问Admin UI -- 你可以让非技术团队成员只是与应用程序的内容互动，而让你的开发人员完全访问。要做到这一点，回到AWS控制台中你的应用程序的主页。你可以进入这个链接，然后点击你的应用程序，如果你从该页面移开的话
点击 "管理员界面管理"，然后你可以点击 "邀请用户 "按钮，通过电子邮件邀请用户进入管理员界面。
添加认证
回到管理界面，你可以在点击中为你的应用程序初始化认证。你可以为你的用户配置注册和登录要求，包括社交和多因素认证。点击 "启用认证 "即可开始。
一旦你部署了你的认证，你可以在 "管理组 "页面上管理用户和创建用户组，所以如果你愿意的话。
然后，回到数据模型页面，你可以为你的表添加授权角色。把授权模式改为Cognito用户池，然后只有签到的用户才能访问和操作数据，你可以让只有某些组或所有者才能对数据执行操作。
如果你想允许公众阅读访问，但只允许签入的用户操作数据，你也可以使用IAM用户。
你可以使用Amplify UI React组件来将你配置的认证添加到你的应用程序。
首先，安装React组件。
$ npm i @aws-amplify/ui-react
然后，我们可以通过将你的组件包裹在withAuthenticator 高阶组件中，将认证添加到整个应用程序中。
import { withAuthenticator } from '@aws-amplify/ui-react'
...
export default withAuthenticator(App)
使用现有的Amplify命令
你可以将Amplify的命令行界面与Amplify UI串联起来使用--所以你仍然可以利用GraphQL APIs、S3存储、Lambda函数等。你可以通过点击左侧菜单中的项目或通过文档查看添加这些的说明。
部署前台
一旦你写好了你的前端代码，你也可以通过Amplify部署它。这里有一个关于如何部署的教程。
总结
我已经迫不及待地想让你试试这个工具了。如果你尝试了，请随时给我留言，告诉我你的任何反馈或对未来教程的要求。
这里有一个链接，可以看到我的完整代码!
