Supabase 및 N8N을 사용한 직원 조사 대시보드 구축

많은 회사들이 설문지를 사용해서 직원들의 건강과 전체적인 복지를 추적한다.하나의 응용 프로그램을 구축하는 데 필요한 시간과 복잡성 때문에 많은 사람들이 기존의 해결 방안을 선택한다. 이런 해결 방안은 곧 구축될 수 있으나 분석 도구는 매우 나쁘다.예를 들어 조직은 조사/설문지 사용에 관한 세부 사항을 이해하는 데 흥미를 느낄 수 있다.예를 들어 (이곳에는 한 개 또는 두 개의 예시가 포함된다) 그러나 기존의 것보다 더 좋은 것이 있으면 Appsmith로 구축할 수 있다.
본고에서 저는 귀하께 맞춤형 직원 조사 계기판을 구축하여 귀하의 특정한 수요를 만족시키는 방법을 가르쳐 드리겠습니다.우리는 업계에서 가장 좋은 개원 도구를 결합시켜 강력한 업무 흐름을 구축함으로써 이 점을 실현할 것이다.
자세한 내용은 다음과 같습니다.

Supabase를 데이터 소스로 사용

데이터베이스 조회에 필터 사용

차트에 데이터 표시

N8N

을 사용한 이메일 자동화
우리가 개발할 응용 프로그램 here 을 앞을 내다볼 수 있습니다.우리 시작합시다!

프로젝트 설정

앞에서 설명한 대로 Supabase를 스토리지 데이터베이스로 사용합니다.Signup for Supabase 세 개의 표를 만들기;직원, 질문, 응답표.이dummy data로 데이터베이스에 피드를 설정할 수 있습니다
N8N도 계속 설정해야 합니다.할 수 있다signup for the cloud version or self-host it.새로운 작업 절차를 만듭니다. 우리는 잠시 후에 돌아와서 토론할 것입니다.
마지막으로 signup for Appsmith 새 응용 프로그램을 만듭니다.Datasources>Create New>PostgreSQL로 이동하여 Supabase 인스턴스에 연결하려면 양식을 작성하십시오.
경탄할 만한!이것으로 우리는 이미 모든 설정을 완성했다.검색어를 작성하기 시작합시다.

데이터베이스 조회에서 필터를 어떻게 사용합니까

우리는 데이터베이스에서 문제를 얻기 위해 조회를 써야 한다.이 검색어 get_questions 를 호출합시다. 이것은 다음과 같습니다.

SELECT * FROM public."questions";

되돌아오는 데이터를 이용하여 우리는 문제 필터를 구축할 수 있다.select 작은 위젯을 드래그하고 Options 속성을 설정합니다. 아래와 같습니다.

The name of the widget has been updated to q_filter

{{
[{label: 'all', value: '%'}]
.concat(get_questions.data.map(q =>({label: q.question, value: q.id})))
}}

마찬가지로 팀 필터를 계속 구축합니다.select 위젯 t_filter 을 명명하고, 속성 Options 은 다음과 같습니다.

[
    {
    "label": "all",
    "value": "%"
  },
    {
    "label": "hr",
    "value": "hr"
  },
  {
    "label": "marketing",
    "value": "marketing"
  },
  {
    "label": "engineering",
    "value": "engineering"
  },
    {
    "label": "logistics",
    "value": "logistics"
  }
]

우리가 방금 구축한 필터를 사용하면 선택한 팀에 따라 직원을 얻고 선택한 문제와 팀에 따라 답장을 받을 수 있습니다.
직원을 위한 새 조회를 만들고 이름을 get_employees로 업데이트합니다.질의는 다음과 같습니다.

SELECT id AS employee, name, email, team FROM public."employees"
WHERE team LIKE "{{t_filter.selectedOptionValue}}";

이와 유사하게 get_responses 응답 질의는 다음과 같아야 합니다.

SELECT r."completedAt", r.employee, r.response, r.comment, e.age, e.sex, e.team
FROM responses r
INNER JOIN employees e ON r.employee=e.id
WHERE
    r.question LIKE "{{q_filter.selectedOptionValue || '%'}}"
    AND e.team LIKE "{{t_filter.selectedOptionValue}}";

테이블 위젯을 사용하여 다음과 같이 직원의 완료 상태를 표시할 수 있습니다.

다음은 Table Data 부동산에 사용된 스크랩입니다.

{{
    get_employees.data.map
    (e => _.omit({
        ...e,
        ...get_responses.data.find(r => r.employee === e.employee)

    }, ['sex', 'age', 'response', 'employee', 'comment'])
    )
}}

어떻게 도표에 데이터를 표시합니까

마지막 절에서, 우리는 선택한 문제와 팀의 응답을 얻기 위해 검색어를 작성했다.현재, 우리는 도표에 데이터를 표시하는 데 중점을 둘 것이다.
widgets 옵션 카드에서 그림% 1개의 캡션을 편집했습니다.우리는 이 도표에 특정 등급 등급의 응답 총수, 즉 5등급 직원 26명을 보여 주기를 바란다.따라서 차트 위젯의 Series Data 속성에 대해 다음 코드 세그먼트를 사용합니다.

[
  {
    "x": "5",
    "y": {{get_responses.data.filter(r => r.response === 5).length}}
  },
  {
    "x": "4",
    "y": {{get_responses.data.filter(r => r.response === 4).length}}
  },
  {
    "x": "3",
    "y": {{get_responses.data.filter(r => r.response === 3).length}}
  },
  {
    "x": "2",
    "y": {{get_responses.data.filter(r => r.response === 2).length}}
  },
  {
    "x": "1",
    "y": {{get_responses.data.filter(r => r.response === 1).length}}
  }
]

당신의 도표는 다음과 같습니다.

우리는 또 성별에 따라 반응을 나타낼 수 있다.이를 위해서는 성별 필터가 필요하다.너는 어떻게 해야 할지 알고 있으니 가서 하나 해라.이것은 제 것입니다 (이름 f_sex:

현재, 우리는 a Pie Chart Chart Type 로 설정된 도표 소위젯으로 데이터를 표시할 수 있습니다.세그먼트는 다음과 같습니다.

[
  {
    "x": "5",
    "y": {{get_responses.data.filter(r => r.response === 5 && r.sex === f_sex.selectedOptionValue).length}}
  },
  {
    "x": "4",
    "y": {{get_responses.data.filter(r => r.response === 4 && r.sex === f_sex.selectedOptionValue).length}}
  },
  {
    "x": "3",
    "y": {{get_responses.data.filter(r => r.response === 3 && r.sex === f_sex.selectedOptionValue).length}}
  },
  {
    "x": "2",
    "y": {{get_responses.data.filter(r => r.response === 2 && r.sex === f_sex.selectedOptionValue).length}}
  },
  {
    "x": "1",
    "y": {{get_responses.data.filter(r => r.response === 1 && r.sex === f_sex.selectedOptionValue).length}}
  }
]

일부 추가 학점에 대해 상술한 원칙을 이용하여 필터 그래프를 구축하여 연령대별로 대답을 나타낸다.이것은 나의 것이다.

N8N을 사용한 이메일 자동화 방법

이 섹션에서는 대시보드에서 N8N을 사용하여 전자 메일을 보내는 방법을 살펴봅니다.
설문 조사를 완료하지 않은 직원에게는 이메일로 다시 보내는 방법이 필요합니다.이를 위해 N8N 워크플로우를 구축합니다.
작업 흐름은 두 개의 노드로 구성됩니다. 하나는 웹hook이post 요청을 받아들이고, 다른 하나는 Gmail 노드입니다.다음은 워크플로의 스냅샷입니다.

Gmail 노드는 Resource를 Message로 설정하고 Operation를 Send로 설정하여 이메일을 보내도록 구성해야 합니다.테마는 설문지 폼에 대한 링크를 포함해야 하며 수신자의 이메일은 표현식이어야 한다. 이 표현식은 웹훅의 유효 부하를 평가한다. 아래와 같다.

대시보드로 돌아가면 워크플로우를 트리거할 새 API를 만들 수 있습니다.Datasources>Create New>Create New API로 이동하여 N8N 웹훅의 URL을 입력합니다.요청의 이름, 즉 send_email을 입력하고 요청 유형을 POST로 설정합니다. 본문은 테이블에서 선택한 직원의 이메일입니다.

이제 테이블 위젯으로 돌아가면 사용자 정의 열 Column Type Button 을 만들 수 있습니다.클릭하면 실행되는 APIsend_email로 이 열을 구성합니다.따라서 특정 직원의 버튼을 누르면 해당 직원에게 이메일로 설문지를 다시 보낸다.

마무리

경탄할 만한!우리는 이미 직원 조사 계기판을 구축할 수 있다.응용 프로그램 보기 https://app.appsmith.com/applications/61281a99695af65b46d75843/pages/61281a99695af65b46d75845
이를 바탕으로 확장하고 응용 프로그램에 더 많은 기능을 추가할 수 있습니다.바닥은 다 니 거야!우리는 네가 다음에 무엇을 보충하는지 매우 보고 싶다.그나저나 give us a star any time you visit github.