[Appsmith] 로우코드 기반의 앱스미스 시작하기

안냥하세욥

이번에 우리 회사에서는 관리자 페이지 일부를 로우코드 기반의 오픈소스인
앱스미스를 통해 제작하기로 하였고~ 그걸하는 사람으로 뽑힌 나..!

하지만 앱스미스에 대한 정보는 아주 극소수였고
이미 찾아봤던 정보들은 거의 유일하게 사수께서 정리해두셨던 블로그글 뿐 ㅜ

일단 앱스미스는 제한된 지식으로 누구나 코딩이 가능하도록 해주는 로우 코드 플랫폼으로,
소프트웨어 개발 장벽과 비용을 낮추고 효율을 높이기 위해 사용한다고 보면 좋을 것 같습니당~

그럼 앱스미스 공식 문서를 기반으로 사용하는 방법을 익혀보겠습니당!

처음 https://www.appsmith.com/ 로 들어가보면 요런 메인 페이지가 나옵니당

오른쪽 Login 버튼을 통해 로그인을 먼저 해줍니다!

구글/깃헙으로 로그인할 수 있고
회원가입도 이메일과 패스워드 입력으로 간편한 편입니다
저는 구글 계정으로 로그인하겠습니다!

로그인을 하면 클라우드 환경에서 내가 이용할 수 있는 앱스미스의
workspace와 application을 볼 수 있습니당

여기서 +NEW 버튼을 눌러 새로운 어플리케이션을 만들어보겠습니당~

이렇게 +NEW 버튼을 누르면 편집기로 이동하게 됩니다!

왼쪽 Widgets 코너에서 원하는 위젯을 끌어다가
가운데 Drag and drop a widget here 라고 쓰여있는 캔버스에 놓음으로써 화면을 만들 수 있습니다~

어플리케이션, 페이지, 위젯 등의 이름은 원하는 이름으로 수정 가능하답니다~!

먼저, 테이블에 데이터를 찍어주고 테이블 옆에
이 데이터 정보들을 수정할 수 있는 Form을 만들어보는 작업을 해보겠습니다~

캔버스에 Table 위젯을 Drag and drop 합니다!

그리고 테이블 위젯 오른쪽에 Container 위젯을 놓고
그 안에 Text 위젯으로 'UserInfomation' 이라는 이름을 주고

Input 위젯으로 Name, Email, Phone 입력창을 만들고
DatePicker 위젯으로 Birthday 입력창을 만들어줍니다!

마지막으로 Button 위젯으로 Update라는 버튼을 추가합니다!

다음은 데이터소스 연결을 해보겠습니다!

데이터소스란 데이터가 저장되는 위치입니다. Appsmith를 사용하면 데이터베이스 및 API(RESTful API 플러그인을 통해)를 포함한 많은 데이터 소스에 연결하여 쿼리를 작성하고 데이터를 위젯에 바인딩할 수 있습니다.

아래와 같이 API와 Databases 등 다양한 데이터소스를 연결할 수 있습니다

앱스미스 자체에서 제공해주는 데이터베이스나 API도 있지만
데이터베이스나 API를 잘 사용하기 위해서는 이제 대한
기초지식 또한 필요하기 때문에 이 부분은 다음 편에서 다루겠습니다!

(로우코드/노코드는 개발에 대한 지식이 부족해도 개발을 할 수 있도록 만들어주는 툴이기 때문에 이에 맞춰 작성중입니다~)

그럼 조금 더 이해하기 쉬운 데이터소스를 불러오겠습니다~
액셀과 비슷한 기능을 갖고있는 Google Sheets를 연결해서
데이터를 가져와보도록 하겠습니다!

데이터소스에서 Google Sheets를 선택해주고

이름을 알맞게 수정해주고 오른쪽 아래의 Sava 버튼을 누르면,

불러올 Google Sheets 가 있는 구글 계정의 인증을 요구하는 창이 나옵니당!

앱스미스에 로그인한 계정과 구글의 계정이 같다면
이미 권한이 있으므로 쉽게 연결됩니다~!

만약 다른 계정이라면 다른 액세스 권한 부여가 필요할 것이라 생각됩니당!

연결이 성공적으로 진행됐다면 아래와 같은 화면이 보일 것입니당
이제 데이터를 가져오고, 수정하는 기본적인 CRUD 과정을 해보겠습니다~

CRUD (Create Read Update Delete)

아래 사진의 +NEW API 버튼을 클릭합니다!

그럼 아래와 같은 설정창이 나옵니다!

맨 위에서 이름을 수정할 수 있습니다
일단 user에 대한 데이터를 가져오는 과정을 먼저 해볼 것이기 때문에 이름을 getUser라고 하겠습니다!

또한 아래와 같은 설정들을 해줄 수 있습니다!

Operation - Google 스프레드시트(스프레드시트 또는 스프레드시트에서 사용 가능한 개별 시트)에서 수행하려는 작업 유형을 정의할 수 있습니다
ex) 하나만 가져오기, 하나만 추가하기,, 여러개 가져오기, 여러개 추가하기 등

Entity - 작업을 수행하려는 엔터티 유형을 선택할 수 있습니다.
ex) 스프레드 시트 전체에 대한 작업인지 각 시트에 대한 작업인지 시트 내의 각 행에 대한 작업인지

Spreadsheet - 작업을 수행할 스프레드시트의 이름을 제공
ex) 사용할 스프레드 시트의 이름

Columns - 필요한 컬럼을 선택하여 보여줄 수 있습니다

이제 설정을 마쳤다면 오른쪽 위의 RUN 버튼을 눌러 데이터가 잘 불러와지는지 확인합니다!

잘 되었네요~~
그럼 이제 getUser라는 user의 정보에 대한 데이터를 가져오는 쿼리가 만들어졌습니다!

쿼리란? 쉽게 이야기해서 데이터베이스에 정보를 요청하는 것입니다. 쿼리(Query)는 웹 서버에 특정한 정보를 보여달라는 웹 클라이언트 요청(주로 문자열을 기반으로 한 요청)에 의한 처리입니다.

이제 아까 만들어둔 페이지 내의 테이블에 user 데이터를 찍어보겠습니다!

테이블 위젯을 클릭해주고 Table Data 속성에
{{getUser.data}} 를 작성하여 테이블에 getUser 쿼리의 결과를 바인딩해줍니당

템플릿 {{ }} 은 위젯 및 쿼리 내부에 자바스크립트라는 언어를 작성하는 데 사용됩니다.

{{getUser.data}} - getUser 쿼리의 data를 가져오겠다는 의미입니다

마찬가지로 테이블에서 선택된 행의 정보를 표시하려면 아래와 같이 작성해주어
해당 데이터를 Container 내부의 위젯에 바인딩해줍니다!

이름	위젯	값
Name	Input	{{userInfoTable.selectedRow.name}}
Email	Input	{{userInfoTable.selectedRow.email}}
Birthday	DatePicker	{{userInfoTable.selectedRow.dob}}
Phone	Input	{{userInfoTable.selectedRow.phone}}

기본 날짜 속성에 대한 데이터를 바인딩하려면 JS 토글을 눌러서 입력해줍니다.

이제 이렇게 가져온 데이터를 업데이트 해보겠습니다~!

아까 getUser 쿼리를 만들어준 것과 마찬가지로 업데이트 쿼리를 만들어보겠습니당

쿼리 이름은 updateUser로 해주고 우리는 선택한 행의 데이터를 수정할 예정이기 때문에 아래와 같이 작성해줍니다!

Update Row Object
아까 보았듯이 {{ }} 를 통해 앱스미스 내에 작성한 위젯 등의 데이터에 접근할 수 있습니다.
"rowIndex"의 값에는 테이블에서 클릭하여 선택한 행을 알려주고,
"name", "email", "dob", "phone" 의 값에는
각 입력창에 입력한 내용을 가져온다는 뜻입니다!

가져오기와 마찬가지로Run 버튼을 통해 제대로 실행되는지 확인하여봅니다!

{
  "message": "Updated sheet successfully!"
}

성공적으로 업데이트가 되었다는 메세지가 뜹니다!

이제 페이지 내의 update 버튼에 클릭 이벤트를 걸어주겠습니다!

클릭했을 시에 데이터를 수정하는 updateUser 쿼리를 실행시켜주고 성공하면 데이터를 가져오는 getUser 쿼리까지 한번 더 실행 시켜서 업데이트된 내용이 테이블에 찍히도록 해줍니당!

이렇게 모든 과정을 해주셨다면~
이렇게 테이블에서 데이터를 볼 수 있고 수정까지 가능한 페이지가 하나 완성되었습니당!

이렇게 조회와 수정이 가능한 페이지 하나를 뚝딱! 만들 수 있도록해주는 것이
앱스미스의 매력이지 않을까 싶습니당!
앞으로도 앱스미스에 대한 내용 자주 가져올게요~~!

그럼 이만~