AWS Amplify Studio 정식 출시 | 시도해 볼 수 있는 5가지 새로운 기능

지난 주에 AWS Amplify Studio가 general availability에 들어갔고 그 발표와 함께 몇 가지 정말 흥미로운 새로운 기능이 나왔습니다. 이 기회를 통해 Amplify Studio로 할 수 있는 5가지 새로운 작업을 보여드리고 싶었습니다.

저는 AWS Amplify Studio를 구축하는 팀에서 일하고 있으며 이를 사용하여 구축할 때 피드백을 주시면 감사하겠습니다!

1. 워크플로 바인딩

Amplify Studio를 사용하여 UI 구성 요소에 다양한 작업을 추가할 수 있습니다. 호버에서 카드 색상을 약간 변경하거나 데이터 모델에서 CRUD 작업을 수행하거나 로그아웃과 같은 인증 작업을 수행할 수도 있습니다.

작업을 추가하려는 요소를 선택한 다음 수신하려는 이벤트로 소품을 설정합니다. 이는 React에서와 동일합니다. 그런 다음 해당 작업을 수행하는 사용자에 대해 수행할 작업을 선택합니다.

2. 사용자 속성 바인딩

자주 UI에 사용자 정보를 표시하고 싶을 것입니다. 예를 들어 누군가가 로그인할 때 "환영합니다, 사용자 이름"을 표시하거나 각 페이지에 사용자 정보를 표시하여 사용자가 로그인한 계정을 알 수 있도록 합니다. 다음에서 이 작업을 수행할 수 있습니다. 인증을 활성화한 다음 UI 빌더에서 표시할 사용자 속성을 선택하여 Studio를 증폭합니다.

3. 컬렉션 검색, 페이지 매김 및 필터링

Amplify Studio 내에서 컬렉션을 생성하여 데이터의 목록 보기를 만들 수 있습니다. 이제 표시되는 데이터와 방법을 추가로 제어할 수 있습니다. 필터 및 정렬을 추가하여 데이터를 하위 집합으로 만들고 정렬 조건을 설정할 수 있습니다.



사용자가 필요한 것을 찾고 UI를 관리할 수 있도록 페이지 매김 및 검색 구성 요소를 추가할 수도 있습니다.

4. 오버라이드 경험

재정의에 대한 개발자 경험이 다시 작성되었습니다. Amplify Studio를 사용하면 사람이 읽을 수 있는 React 코드가 생성되며 개발자가 코드에서 필요한 사항을 변경할 수 있다는 것이 중요합니다. overrides 객체를 Studio 생성 구성요소에 전달하고 Figma 구성요소 이름을 사용하여 수정하려는 정확한 하위 요소에 액세스할 수 있습니다.

<CardB overrides={{"Text Group": { fontWeight: 'bold' }}} />

컬렉션 내의 항목을 수정하려는 경우 그렇게 할 수도 있습니다. 컬렉션에 prop overrideItems를 추가하고 구성 요소에 대한 데이터 모델 인스턴스를 포함하는 item 및 index라는 두 개의 인수가 있는 함수를 전달합니다.

<Hikes overrideItems={(item, index) => {
  if (item.difficulty === 'easy') {
    return { overrides: { 'Button' : { backgroundColor: 'green' }}}
  } else if (item.difficulty === 'difficult') {
    return { overrides: { 'Button' : { backgroundColor: 'darkGrey' }}}
  }
}}/>

5. Figma 테마 플러그인

AWS Amplify Theme Editor을 사용하여 애플리케이션의 테마를 지정할 수 있습니다. 클릭 한 번으로 브랜드에 맞는 색상 팔레트, 간격, 글꼴 크기를 모든 구성 요소에 추가하세요.

결론

Amplify Console에서 Amplify Studio를 시작할 수 있습니다. 엔드투엔드 튜토리얼을 확인하려면 다음 중에서 선택할 수 있습니다.

Studio로 빌드할 때 피드백을 듣고 싶습니다!