-
Appsmith 도입기카테고리 없음 2023. 6. 28. 00:01728x90
Appsmith란?
오픈소스 로우코드 소프트웨어입니다.
미리 빌드된 UI 위젯을 활용하여 API 및 데이터베이스에 연결할 수 있습니다.
리툴(retool)과 같이 프런트엔드단을 만들 수 있는 툴 정도로 이해하면 좋습니다.
목표
QA분들을 위해 Database 조회기능과 토큰생성기능을 제공한다
New 버튼 눌러 생성
워크스페이스에 새로운 애플리케이션을 생성합니다.
왼쪽의 Widgets 코너에 원하는 위젯을 끌어서 가운데의 Drag and drop a widget here 캔버스에 놓음으로써 화면을 만들 수 있습니다.
데이터베이스 연결
좌측에 Datasources를 통해 데이터베이스를 연결할 수 있습니다.
데이터베이스의 Host, port, name, username, password만 입력하면 손쉽게 연결이 됩니다.
Queries/JS로 데이터베이스 read 테스트
SELECT * FROM database_table LIMIT 10;
10건의 정보가 Response에 잘 보입니다.
Widget으로 페이지 구성 및 Query와 연동
Container(배경)을 구성합니다.
그리고 내부적으로 text(제목 겸 설명), input(사용자 데이터 input), button(이벤트 발생용)을 구성합니다.
그리고 버튼에서는 onClick -> Execute a query -> 위에서 만든 쿼리 선택
그리고 Widget으로 Table을 생성해줍니다.
Query에 input연결하기
SELECT user_id FROM member.account WHERE email = {{sns_email_input.inputText}}
위와 같은 형식으로 input의 이름을 넣어주고 inputText로 inputText에 입력한 값을 넣어줍니다.
그리고 우측에 보면 Connect Widget에서 SELECT WIDGET -> 위에서 만든 Table 클릭하면 자동으로 테이블과 쿼리가 연동됩니다.
API와 연동하여 token 생성하기
Datasources부분에서 RestAPI를 선택합니다.
https://mock-api.appsmith.com/users
위의 url을 입력하고 run을 하면 json이 반환됩니다.
만약 param에 값을 넣고 싶다면 param을 선택하고 key, value를 입력합니다.
이후 우측의 Add new widget의 Text를 추가합니다.
{{JSON.stringify(get_user_token_api.data.users, null, 2)}}
text에는 자동으로 값이 세팅되며, 이후 다음과 같이 파싱 할 수 있습니다.
{{JSON.stringify(get_user_token_api.data.users[0].address, null, 2)}}
참고자료
https://velog.io/@keembogeul/Appsmith-로우코드-기반의-앱스미스-시작하기