Amplify Studio 살펴보기
14831 단어 AWSAmplifyamplifystudiotech
지난주에 나는 Tec의 보도를 보고 AWS Amplify Studio라는 저디지털 응용 개발 도구를 발견했다.
figma에서 만든 UI를 가져오면 자동으로 React 코드를 생성할 수 있습니다!에이~ 재밌네.
그래서 나는 실제적으로'figma를 만들고 React 구성 요소를 가져오고 표시하기'를 시도했다.
또한 AWS와 React는 모두 슈퍼 문외한이니 탓하지 마세요...
대략적인 작업 절차
이번에 진행된 일은 대체로 다음과 같다
Amplify pull에서 React 코드 가져오기절차.
AWS Amplify Studio 시작
우선 AWS에서 프로그램을 만들어야 한다.
AWS 및 Amplify 검색
새 응용 프로그램에서 응용 프로그램 작성을 선택합니다.
응용 프로그램 이름을 입력하고 "Comfirm deployment"를 클릭합니다.
조금만 기다려...
설정이 완료되면 화면은 다음과 같습니다.Studio 시작 을 선택합니다.
정의 데이터 모델
응용 프로그램에서 처리되는 정보를 정의하는 데이터 모델입니다.
여기에 정의된 내용은 다음 공정에서 화면 위젯과 비추어집니다.
그리고 이 데이터 모델을 바탕으로 DynamoDB의 테이블 정의와Graphiql의 API 정의도 자동으로 만들어진다.(대단해)
측면 메뉴에서 Set up>Data 를 선택합니다.
"Add model"을 클릭하여 모델을 정의하고 "Save and deploy"를 클릭합니다.이번에는 갤러리 앱에 나타난 내용을 인상으로'Gallery Item'모델을 정의했다.
디자인이 몇 분 걸려요.
UI 라이브러리 만들기
figma와 연합하여 UI 라이브러리를 가져오면 다음 절차에서React 코드로 변환할 수 있습니다.
figma 계정 만들기figma에 웹 위젯 그리기
Amplify Studio에 들어가고 싶은 것은 "마우스 오른쪽 버튼"인 Create Component로 구성됩니다.
Amplify Studio의 UI Library 를 클릭하십시오."Get started"를 클릭합니다.
아까 만든 figma URL 붙여넣기.
Accept에서 Amplify Studio에서 가져올 figma 구성 요소 계속
UI 구성 요소 및 데이터 모델 매핑
UI 구성 요소의 요소 및 데이터 모델의 항목을 연관시킵니다.
어셈블리를 가져온 후 Configure 버튼을 클릭합니다.
다음과 같은 화면이 나오기 때문에 데이터 모델 프로젝트에 비추고 싶은 화면 요소를 클릭하여 속성을 설정합니다.(이번에는 갤러리 Item의 이미지 Url과 이미지 요소를 매핑합니다.)
정의된 UI 구성 요소를 React 코드로 사용
figma에서 UI 구성 요소를 가져오면 React 코드를 생성해야 합니다!실제 코드를 보세요.
react 프로젝트를 만듭니다.
npx create-react-app .
npm install aws-amplify @aws-amplify/ui-react
amplify에서 원본 파일을 가져옵니다.
# amplify cliをインストール
npm install -g @aws-amplify/cli
# amplify studioページ右上の「Local setup instrucitons」に書かれているコマンド
amplify pull --appId ***** --envName staging
콘솔로 질문에 대답하다.
% amplify pull --appId *** --envName staging
Opening link: https://****.amplifyapp.com/admin/****/staging/verify/
✔ Successfully received Amplify Studio tokens.
Amplify AppID found: ***. Amplify App name is: ****
Backend environment staging found in Amplify Console app: ***
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
✔ Synced UI components.
GraphQL schema compiled successfully.
...
Successfully pulled backend environment staging from the cloud.
Run 'amplify pull' to sync future upstream changes.
화면에 자동으로 생성된 구성 요소 보이기
실제 제작된 갤러리 아이템 구성품을 화면에 띄워 보세요.
GalleryItem 구성 요소의 원본 파일을 보면 src={GalleryItem?.imageUrl}이기 때문에 모 구성 요소에서 GalleryItem의prop에 건네주면 됩니다.<Image
padding="0px 0px 0px 0px"
top="0px"
left="0px"
src={GalleryItem?.imageUrl}
width="200px"
position="absolute"
height="157px"
{...getOverrideProps(overrides, "View.Image[0]")}
></Image>
App.js는 다음과 같다.import "./App.css";
import GalleryItem from "./ui-components/GalleryItem";
function App() {
const item = {
title: "キャットタワーにて",
imageUrl:
"https://images.unsplash.com/photo-1636543132856-8e2d31a79082?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzODYwNDY1OQ&ixlib=rb-1.2.1&q=80&w=1080",
category: "cute",
};
return (
<div className="App">
<GalleryItem GalleryItem={item}></GalleryItem>
</div>
);
}
export default App;
그럼 Amplify에서 자동으로 생성한 GraphiQL의 API로 콘텐츠를 얻어 Galleery Item을 일렬로 만들면 앨범처럼 될 수 있어요~~!!!
여기까지만 해도 데이터를 얻는 방법, 시간과 체력을 다 써버렸다.
누가 친절한 사람한테 말 좀 해줄래요?
실제로 사용해볼게요.
나는 React 코드가 자동으로 생성되는 것이 매우 편리하다고 생각하지만 생성된 코드에 논리를 추가할 수 없기 때문에 (figma와 동기화되면 덮어쓰이기 때문에) 나는 매우 힘들다고 생각한다.실제로 이 개발을 사용해서 지속적으로 유지보수한다는 인상은 그다지 뜨겁지 않다.
진짜 작은 앱을 만들 때나 서비스 시작 단계에서 빠르게 움직일 수 있는 무언가를 만들고 싶을 때 가능할까...?
어쩔 수 없이 앰플리파이의 지식이 부족해 앞으로 자주 접하고 아는 것이 있다면 기사를 업데이트하고 싶습니다.
Reference
이 문제에 관하여(Amplify Studio 살펴보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/qnaiv/articles/4d5a5526aa403d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
