{"id":47700,"date":"2023-09-22T15:09:14","date_gmt":"2023-05-03T16:11:46","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%af%95%e7%9d%80%e4%bd%bf%e7%94%a8amplify%e8%bd%bb%e6%9d%be%e5%9c%b0%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aaweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f\/"},"modified":"2024-05-04T01:03:10","modified_gmt":"2024-05-03T17:03:10","slug":"%e8%af%95%e7%9d%80%e4%bd%bf%e7%94%a8amplify%e8%bd%bb%e6%9d%be%e5%9c%b0%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aaweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e8%af%95%e7%9d%80%e4%bd%bf%e7%94%a8amplify%e8%bd%bb%e6%9d%be%e5%9c%b0%e5%88%9b%e5%bb%ba%e4%b8%80%e4%b8%aaweb%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f\/","title":{"rendered":"\u8bd5\u7740\u4f7f\u7528Amplify\u8f7b\u677e\u5730\u521b\u5efa\u4e00\u4e2aWeb\u5e94\u7528\u7a0b\u5e8f"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

\u73b0\u5728\uff0c\u4f4e\u4ee3\u7801\u5f00\u53d1\u5df2\u7ecf\u6210\u4e3a\u4e00\u79cd\u666e\u904d\u73b0\u8c61\uff0c\u4f8b\u5982MS\u7684PowerPlatform\u548cServiceNow\uff0c\u53ef\u4ee5\u5728\u4e0d\u8003\u8651\u57fa\u7840\u67b6\u6784\u7684\u60c5\u51b5\u4e0b\u5f00\u53d1\u5e94\u7528\u7a0b\u5e8f\u3002\u672c\u6b21\u4ecb\u7ecd\u4f7f\u7528AWS Amplify\uff0c\u8fd9\u662f\u4e00\u79cd\u53ef\u5b9e\u73b0\u4f4e\u4ee3\u7801\u5f00\u53d1\u7684AWS\u670d\u52a1\uff0c\u6765\u7b80\u5355\u5730\u521b\u5efaWeb\u5e94\u7528\u7a0b\u5e8f\u7684\u65b9\u6cd5\u3002<\/p>\n

\u901a\u8fc7\u4f7f\u7528AWS Amplify\uff0c\u60a8\u53ef\u4ee5\u5b9e\u73b0\u4ee5\u4e0b\u529f\u80fd\u3002<\/p>\n

    \n
  1. \n
      \u4f7f\u7528AWS Cognito\u8fdb\u884c\u7528\u6237\u8ba4\u8bc1<\/ol>\n<\/li>\n<\/ol>\n

       <\/p>\n

        \u901a\u8fc7AWS AppSync\u4eceDynamoDB\u83b7\u53d6\u6570\u636e<\/ol>\n

        \u53ea\u9700\u4e00\u79cd\u9009\u9879\uff1a\u203b\u5728\u672c\u6587\u4e2d\uff0c\u4e3a\u4e86\u4ecb\u7ecd\u6280\u672f\uff0c\u6211\u4eec\u91c7\u7528\u4e86\u7b80\u5355\u7684\u7ed3\u6784\u3002\u5982\u679c\u60a8\u5728\u5b9e\u9645\u670d\u52a1\u4e2d\u4f7f\u7528\uff0c\u6839\u636e\u9700\u8981\u542f\u7528\u591a\u56e0\u7d20\u9a8c\u8bc1\u548c\u542f\u7528\u4ec5\u7ba1\u7406\u5458\u53ef\u8fdb\u884c\u65b0\u6ce8\u518c\u7684\u8bbe\u7f6e\u3002<\/p>\n

        \u5efa\u7b51\u8bbe\u8ba1<\/h1>\n
        \"amplify.jpg\"<\/div>\n

        Amplify\u7684\u521d\u59cb\u8bbe\u5b9a<\/h1>\n

        \u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u8fdb\u884cAmplify\u7684\u521d\u59cb\u8bbe\u7f6e\u3002<\/p>\n

          \n
        1. \n
            \u4f7f\u7528Amplify Dev Center\u4f5c\u4e3a\u53c2\u8003\uff0c\u5728\u672c\u5730\u5b89\u88c5Amplify CLI\u5e76\u6ce8\u518cAmplify\u5e94\u7528\u3002<\/ol>\n<\/li>\n<\/ol>\n

            Amplify CLI\u5b89\u88c5\u6b65\u9aa4
            \nAmplify\u5e94\u7528\u521b\u5efa\u6b65\u9aa4<\/p>\n

            # \u521b\u5efaNext.js\u7a7a\u9879\u76ee
            \nnpx create-next-app@latest next-amplified –no-app
            \ncd next-amplified<\/p>\n

            # \u6ce8\u518cAmplify\u5e94\u7528\uff08\u9ed8\u8ba4\u9009\u9879\u5373\u53ef\uff0c\u4f46\u9700\u8981\u5148\u8bbe\u7f6eAWS\u914d\u7f6e\u6587\u4ef6\uff09
            \namplify init<\/p>\n

            # \u6dfb\u52a0auth\u7c7b\u522b\u5e76\u6784\u5efaAWS Cognito
            \namplify add auth<\/p>\n

            ## \u9009\u62e9\u4ee5\u4e0b\u9009\u9879
            \n## \u662f\u5426\u4f7f\u7528\u9ed8\u8ba4\u7684\u8ba4\u8bc1\u548c\u5b89\u5168\u914d\u7f6e\uff1f > \u9ed8\u8ba4\u914d\u7f6e
            \n## \u7528\u6237\u5982\u4f55\u767b\u5f55\uff1f > \u7528\u6237\u540d
            \n## \u662f\u5426\u914d\u7f6e\u9ad8\u7ea7\u8bbe\u7f6e\uff1f > \u4e0d\u9700\u8981\uff0c\u5168\u90e8\u5b8c\u6210\u3002<\/p>\n

            # \u6dfb\u52a0api\u7c7b\u522b\u5e76\u6784\u5efaAWS AppSync\u548cDynamoDB\u8868
            \namplify add api<\/p>\n

            ## \u9009\u62e9\u4ee5\u4e0b\u9009\u9879
            \n## \u4ece\u4e0b\u9762\u7684\u670d\u52a1\u4e2d\u9009\u62e9\uff1aGraphQL
            \n## \u6211\u4eec\u5c06\u8981\u521b\u5efa\u7684GraphQL API\u3002\u9009\u62e9\u8981\u7f16\u8f91\u6216\u7ee7\u7eed\u7684\u8bbe\u7f6e\uff1a\u6388\u6743\u6a21\u5f0f\uff1aAPI\u5bc6\u94a5\uff08\u9ed8\u8ba4\uff0c\u8fc7\u671f\u65f6\u95f4\uff1a\u4ece\u73b0\u5728\u8d777\u5929\uff09
            \n## \u4e3aAPI\u9009\u62e9\u9ed8\u8ba4\u7684\u6388\u6743\u7c7b\u578b\uff1aAmazon Cognito\u7528\u6237\u6c60
            \n## \u914d\u7f6e\u5176\u4ed6\u6388\u6743\u7c7b\u578b\u5417\uff1f \u4e0d\u9700\u8981
            \n## \u6211\u4eec\u5c06\u8981\u521b\u5efa\u7684GraphQL API\u3002\u9009\u62e9\u8981\u7f16\u8f91\u6216\u7ee7\u7eed\u7684\u8bbe\u7f6e\uff1a\u7ee7\u7eed
            \n## \u9009\u62e9\u6a21\u5f0f\u6a21\u677f\uff1a\u7a7a\u767d\u6a21\u5f0f
            \n## \u662f\u5426\u8981\u7f16\u8f91\u6a21\u5f0f\uff1f\uff08Y\/n\uff09 \u00b7 \u662f<\/p>\n

            \u6253\u5f00amplify\/backend\/api\/nextamplified\/schema.graphql\u6587\u4ef6\uff0c\u5e76\u5c06\u5176\u4fee\u6539\u4e3a\u4ee5\u4e0b\u5185\u5bb9\u3002
            \n\u6839\u636e\u6b64\u6a21\u578b\u521b\u5efaAppSync\u7684GraphQL API\u5b9a\u4e49\u548cDynamo\u8868\u3002
            \ntype Todo
            \n@model
            \n@auth(rules: [{ allow: private, provider: userPools }]) {
            \nid: ID! @primaryKey
            \ndescription: String!
            \n}<\/p>\n

            \u5c06\u672c\u5730\u66f4\u6539\u5e94\u7528\u5230\u8fdc\u7a0b\u7684Amplify\u5e94\u7528\u3002
            \n\u8fd9\u5c06\u7531AWS Amplify\u521b\u5efaCognito\u3001AppSync\u548cDynamoDB\u8868\u3002
            \namplify push
            \n## \u662f\u5426\u786e\u5b9a\u7ee7\u7eed\uff1f > \u662f<\/p>\n

            ## \u9009\u62e9\u4ee5\u4e0b\u9009\u9879
            \n## \u662f\u5426\u4e3a\u65b0\u521b\u5efa\u7684GraphQL API\u751f\u6210\u4ee3\u7801\uff1f > \u662f
            \n## \u9009\u62e9\u4ee3\u7801\u751f\u6210\u8bed\u8a00\u76ee\u6807 > typescript
            \n## \u8f93\u5165graphql\u67e5\u8be2\u3001\u53d8\u52a8\u548c\u8ba2\u9605\u7684\u6587\u4ef6\u540d\u6a21\u5f0f > src\\graphql\\**\\*.ts
            \n## \u662f\u5426\u751f\u6210\/\u66f4\u65b0\u6240\u6709\u53ef\u80fd\u7684GraphQL\u64cd\u4f5c-\u67e5\u8be2\u3001\u53d8\u52a8\u548c\u8ba2\u9605\uff1f > \u662f
            \n## \u8f93\u5165\u6700\u5927\u8bed\u53e5\u6df1\u5ea6\uff08\u5982\u679c\u6a21\u5f0f\u5d4c\u5957\u8f83\u6df1\uff0c\u8bf7\u589e\u52a0\u9ed8\u8ba4\u503c\uff09 > 2
            \n## \u8f93\u5165\u751f\u6210\u4ee3\u7801\u7684\u6587\u4ef6\u540d > src\\API.ts<\/p>\n

            \u5e94\u7528\u7a0b\u5e8f\u7684\u5b9e\u65bd<\/h1>\n
              \n
            1. \n
                \u5b89\u88c5\u8f6f\u4ef6\u5305<\/ol>\n<\/li>\n<\/ol>\n

                 <\/p>\n

                  \n
                1. \n
                    \u5b89\u88c5\u7528\u4e8e\u5f00\u53d1\u524d\u7aef\u5e94\u7528\u7a0b\u5e8f\u6240\u9700\u7684amplify\u76f8\u5173\u5e93<\/ol>\n<\/li>\n<\/ol>\n

                     <\/p>\n

                      \n
                    1. \n
                        npm install –save amplify @aws-amplify\/ui-react @aws-amplify\/api<\/ol>\n<\/li>\n<\/ol>\n

                        \u5c06pages\/index.tsx\u7684\u5185\u5bb9\u66ff\u6362\u4e3a\u4ee5\u4e0b\u5185\u5bb9\u3002
                        \nimport { API\uff0cAmplify\uff0cgraphqlOperation } from ‘aws-amplify’;
                        \nimport ‘@aws-amplify\/ui-react\/styles.css’;
                        \nimport { Button\uff0cTextField\uff0cuseAuthenticator\uff0cwithAuthenticator } from ‘@aws-amplify\/ui-react’;
                        \nimport { GraphQLQuery } from ‘@aws-amplify\/api’;
                        \nimport { listTodos } from ‘@\/src\/graphql\/queries’;
                        \nimport { Todo\uff0cListTodosQuery\uff0cCreateTodoMutation\uff0cCreateTodoInput } from ‘@\/src\/API’;
                        \nimport { useEffect\uff0cuseState } from ‘react’;
                        \nimport { createTodo } from ‘@\/src\/graphql\/mutations’;<\/p>\n

                        import awsconfig from ‘@\/src\/aws-exports’;
                        \nAmplify.configure(awsconfig);<\/p>\n

                        const HomePage = () => {
                        \nconst { user\uff0csignOut } = useAuthenticator((context) => [context.user]);
                        \nconst [ todos\uff0csetTodos ] = useState<(Todo | null)[] | undefined>();
                        \nconst [ description\uff0csetDescription ] = useState(“”);<\/p>\n

                        const getTodos = async () => {
                        \nconst result = await API.graphql<GraphQLQuery>(graphqlOperation(listTodos));
                        \nconst todos = result.data?.listTodos?.items;
                        \nsetTodos(todos);
                        \n}<\/p>\n

                        useEffect(() => {
                        \ngetTodos();
                        \n}\uff0c [])<\/p>\n

                        const addTodo = async () => {
                        \nconst todo: CreateTodoInput = { description: description };
                        \nawait API.graphql<GraphQLQuery>(graphqlOperation(createTodo\uff0c{ input: todo }));
                        \ngetTodos();
                        \n}<\/p>\n

                        return (
                        \n<><\/p>\n

                        \u4f60\u597d {user?.username}<\/h1>\n