AWS Amplify 관리 인터페이스 소개: 클릭하여 애플리케이션 백엔드 생성

새로운 Amplify Admin UI에 매우 흥분했습니다. 제가 속한 팀은 이번 주에 UI를 발표했습니다.응용 프로그램의 백엔드를 몇 분 안에 만들고 설정할 수 있습니다. AWS 계정을 사용하지 않은 상태에서 구축을 시작하고, 클릭 한 번에 구조를 만들고, 인증을 추가하며, AWS에 쉽게 배치할 수 있습니다.백엔드 개발이나 AWS에 대해 알 필요가 없으면 그것을 사용할 수 있다. 나는 이 분야에서 시작하고자 하는 새로운 개발자들에게 아주 좋은 도구라고 생각한다.이 강좌에서 우리는 평론이 있는 블로그를 위해 백엔드를 구축하고 사용자 신분 검증을 추가할 것이다.
먼저 Amplify Admin UI homepage으로 가세요.그런 다음 애플리케이션 백엔드 생성 에서 시작 을 클릭합니다.

데이터 모델 생성

다음 페이지에서 '데이터' 를 선택한 다음 '공백 모드' 를 선택하십시오.만약 당신이 원한다면 장래에도 하나의 예시 모델에서 시작할 수 있지만, 본 강좌에 대해 우리는 처음부터 시작할 것입니다.백그라운드에서 데이터 모델은 DataStore을 사용합니다. 이로써 오프라인과 온라인, 응용 프로그램의 사용자 사이에서 데이터를 사용할 수 있습니다.

그런 다음 새 모드 만들기를 클릭합니다.Post와 Comment 두 모델을 추가합니다.
추가 버튼을 클릭하고 모델을 추가합니다.

모델을 'Comment' 으로 명명한 다음 두 개의 필드를 추가합니다: text와 author.둘 다 줄이야.

Post 모델을 추가합니다.여기에 두 개의 필드가 있습니다: 제목과 내용.

모든 게시물에 댓글이 달릴 수 있도록 관계도 추가할 것입니다.
게시 모델에서 관계식 추가를 클릭합니다.귀하의 관련 모델로'평론'을 선택하고'한 편의 문장이 여러 편의 평론에 대하여'를 선택하십시오. 왜냐하면 우리는 모든 문장에 여러 개의 평론이 있기를 희망하기 때문입니다.

나는 또 모든 필요한 필드를 만들었다.만약 당신이 한 분야에 전념한다면, 화면 오른쪽에 패널이 나타날 것입니다. 거기에 필요한 영역을 설정할 수 있습니다.이 보기에서, 당신은 또한 그룹 필드를 만들 수 있습니다. 만약 당신의 블로그 글에 탭 그룹을 추가하고 싶다면, 이것은 매우 도움이 될 것입니다.

그리고 주황색의 "다음: 프로그램에서 로컬 테스트"단추를 누르십시오.

데이터 테스트

그리고 응용 프로그램에서 데이터 모델을 테스트해서 원하는 방식으로 작업을 할 수 있도록 합니다.
이 화면에서는 웹, iOS, 안드로이드 프로그램을 선택할 수 있는 어떤 종류의 프로그램을 설정하고 어떻게 설정하는지 볼 수 있습니다.이 강좌를 위해 저는 웹을 제 플랫폼으로 선택하고 이를 제 프레임워크로 삼을 것입니다.일단 선택하면 프로그램을 만드는 설명이 있습니다.
만약 당신이 React를 사용하기 시작한다면 here's은 입문 강좌가 될 것입니다!나는 이 부분을 빠르게 훑어볼 것이다. 왜냐하면 나는 이 문장의 중점을 사용자 인터페이스를 관리하는 데 두고 싶기 때문이다.
다음 명령을 실행하여 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

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>
  )
}

그리고 데이터를 저장할 때 사용할 확대 코드를 추가할 것입니다.

// 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>

  )
}

마지막으로 응용 프로그램 구성 요소에서 두 구성 요소를 링크합니다.

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 계정을 등록할 수 있습니다.

'응용 프로그램 백엔드 만들기' 페이지로 가져갈 것을 선택하십시오.응용 프로그램의 이름을 입력하고 배치할 AWS 영역을 선택합니다.너는 보통 대부분의 사용자에게 가장 가까운 지역을 선택한다.나는 미국 동해안에 있기 때문에 us-east-1을 선택할 것이다.미래에, 당신은 세계 각지의 사용자를 더욱 잘 지원하기 위해 당신의 응용 프로그램을 지역을 뛰어넘어 실행할 수 있습니다.Here's 모든 지역의 지도를 알고 싶으시다면!
백엔드 환경을 초기화하는 데 몇 분 정도 걸리지만 초기화하면 백엔드 환경 탭을 클릭한 다음 관리 UI 열기 를 클릭합니다.
이 보기에서는 모드를 편집하고 애플리케이션 컨텐츠를 관리하며 애플리케이션에 인증을 추가하고 다른 Amplify 서비스로 애플리케이션을 확장할 수 있습니다.
우선 오른쪽 상단의 '로컬 설정 설명' 을 누르면 다른 확대 명령을 얻을 수 있습니다. 이 명령은 샌드박스 API가 아닌 응용 프로그램을 배치한 API에 연결합니다.

$ amplify pull --appId your-live-app-id --envName staging

애플리케이션 컨텐츠 관리

'프로그램 내용 관리' 단추를 누르면 프로그램의 데이터를 만들고 편집하고 삭제할 수 있는 계기판에 가져옵니다.게시물 테이블로 전환하고 게시물 작성을 클릭합니다.그리고 제목과 내용을 추가할 수 있습니다. "태그에서 편집"을 누르면 블로그 글에 태그 미리 보기 도구를 시작합니다.

너도 직접 댓글에 댓글을 추가할 수 있다.이것은 응용 프로그램에 초기 데이터를 추가하는 좋은 방법입니다. 응용 프로그램에 대한 관리 패널을 직접 작성할 필요가 없습니다.

사용자 인터페이스 액세스 관리

AWS 계정이 없는 사람이 관리 UI에 접근하도록 할 수 있다. 비기술팀 구성원이 응용 프로그램 내용과 상호작용만 하고 개발자가 완전히 접근하도록 할 수 있다.그러려면 AWS 콘솔의 애플리케이션 홈 페이지로 돌아가십시오.이 페이지를 떠나면 this link으로 돌아가서 프로그램을 클릭하십시오.

"관리자 인터페이스 관리"를 누르면 "초대 사용자"단추를 누르고 이메일로 관리자 인터페이스에 사용자를 초대할 수 있습니다.

인증 추가

관리 인터페이스로 돌아가면 클릭을 통해 응용 프로그램의 인증을 초기화할 수 있습니다.사용자는 사교와 다중 요소 인증을 포함한 가입과 로그인 요구를 설정할 수 있습니다.인증 사용 을 클릭하여 시작합니다.


인증을 배치하면 '관리팀' 페이지에서 사용자를 관리하고 사용자 그룹을 만들 수 있기 때문에 필요하면

그리고 데이터 모델 페이지로 돌아가면 테이블에 권한 부여 역할을 추가할 수 있습니다.인증 모드를 Cognito 사용자 풀로 변경한 다음 로그인한 사용자만 데이터를 액세스하고 조작할 수 있으며 특정 그룹 또는 소유자만 데이터를 조작할 수 있도록 설정할 수 있습니다.

공용 읽기 액세스를 허용하고 싶지만 로그인한 사용자만 데이터를 조작할 수 있고 IAM 사용자도 사용할 수 있습니다.
Amplify UI React Components을 사용하여 구성된 인증을 응용 프로그램에 추가할 수 있습니다.
먼저 React 구성 요소를 설치합니다.

$ npm i @aws-amplify/ui-react

그런 다음 withAuthenticator 고급 구성 요소로 패키지를 구성하여 전체 애플리케이션에 인증을 추가할 수 있습니다.

import { withAuthenticator } from '@aws-amplify/ui-react'
...
export default withAuthenticator(App)

기존 확대 명령 사용

Amplify의 명령줄 인터페이스를 Amplify UI와 함께 사용할 수 있습니다. 따라서 GraphQL API, S3 저장소, Lambda 함수 등을 사용할 수 있습니다. 왼쪽 메뉴의 항목을 클릭하거나 documentation을 통해 이 내용을 추가하는 설명을 볼 수 있습니다.

배포 프런트엔드

프런트엔드 코드를 작성한 후 Amplify를 통해 배포할 수도 있습니다.어떻게 하는지에 관한 강좌

결론

나는 너에게 이 공구를 시험해 보라고 기다릴 겨를이 없다.만약 당신이 원한다면, 언제든지 저에게 피드백 의견이나 미래 강좌의 요구를 제공해 주십시오.
Here은 나의 전체 코드의 링크입니다!