[Power Apps] 출퇴근 관리 앱(1) - 간단한 앱 만들기

안녕하세요 😊

이번시간에는 Power Apps를 활용하여 간단한 직원 출퇴근 관리 앱을 만들어 보겠습니다. 

 

---

This image is made by deltaww.com

 

Power Apps 에 접속하여 Microsoft 계정으로 로그인합니다.

1. 새 캔버스 앱 만들기

1. "만들기" >  "빈 앱"을 선택합니다.
2. 앱 이름: "출퇴근 관리"로 설정

 

---

 

2. 앱 화면 구성

 "직원 이름" 입력란 추가 
ⓛ 텍스트 입력 컨트롤 추가 ( 삽입 > 입력 > 텍스트 입력 )
② 이름을 "Name"으로 변경
③ 힌트 텍스트에 " 직원 이름 입력" 으로 설정

 출/퇴근 버튼 추가 
출근 버튼 ⓛ 버튼 컨트롤을 추가 ( 삽입 > 입력 > 버튼 )
                   ②  이름을 "CheckIn" 으로 변경
                   ③  텍스트를 "출근"으로 변경

출근 버튼 ⓛ  버튼 컨트롤을 추가 ( 삽입 > 입력 > 버튼 )
                  ②  이름을 "CheckOut" 으로 변경
                  ③  텍스트를 "퇴근"으로 변경

 

---

 

3. 로직 구현

👉 컬렉션(Collection) : 데이터 저장 및 관리에 사용되는임시 테이블
👉 OnSelect : 특정 컨트롤을 클릭했을 때 실행되는 동작을 정의

출근 시간 기록
CheckIn 버튼의 OnSelect 속성에 다음 코드를 추가합니다.

// 입력된 이름과 현재 시간을 "AttendanceRecords"라는 컬렉션에 저장합니다.
Collect(AttendanceRecords,{이름: Name.Text,출근: Now(),퇴근: ""});

// Name 입력란을 초기화 합니다.
Reset(Name);

퇴근 시간 기록
Check Out  버튼의 OnSelect 속성에 다음 코드를 추가합니다. 

// AttendanceRecords 컬렉션에서 해당 직원의 출근 기록을 찾아 퇴근 시간을 업데이트합니다.
Patch(AttendanceRecords, First(Filter(AttendanceRecords, 이름 = Name.Text && IsBlank(퇴근))), {퇴근: Now()}); 

// Name 입력란을 초기화 합니다.
Reset(Name);

 

---

 

4. 앱 동작 확인

출근, 퇴근 버튼이 올바르게 작동하는지 확인해볼까요?

① 우측 상단의 "앱 미리보기" 버튼을 클릭해줍니다.(클릭하면 사용자의 화면이 보입니다.)
② 직원이름 "홍길동"을 입력해줍니다.
③ "출근" 버튼 클릭

"AttendanceRecords" 컬렉션에 데이터가 잘 저장되었는지 확인해봅시다.

① 코드 부분에 "AttendanceRecords" 을 클릭해줍니다.
②  "AttendanceRecords" 컬렉션의 테이블 데이터를 확인합니다.
③ 입력한 출근 데이터가 저장되었는지 확인합니다.

 

 

---

이제 기본적인 출퇴근 관리 앱이 완성되었습니다. 🎉

다음 시간에는 오늘 사용한 컬렉션(Collection)과 OnSelect 속성을 더 자세히 다뤄보겠습니다.

감사합니다 😁