앱인벤터-목록뷰-연락처앱
앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.
이번 시간에는 목록뷰 컴포넌트를 활용하여 스마트폰의 연락처를 관리하는 앱을 만들어 보자. 주요 기능으로는 이름과 전화번호를 추가, 삭제, 전화거는 것까지 프로그램을 작성할 것이다.
. 디자인-연락처
본 예제는 목록뷰 컴포너트를 활용하여 연락처를 관리하는 앱을 만들 것이다.
연락처 디자인으로는 이름과 전화번호를 입력하는 텍스트박스와 추가, 삭제, 전화 등의 버튼 그리고 연락처를 목록뷰에 표시할 것이다.
컴포넌트
. 목록뷰 컴포넌트 : 연락처로 이름과 전화번호를 사용자에게 보여주는 컴포넌트이다.
* 이름 입력
. 수평배치 컴포넌트 : 레이블과 텍스트박스를 수평하게 배치하는 목적으로 사용한다.
. 레이블 컴포넌트 : "이름"을 화면에 표시하는 것을 목적으로 한다.
. 텍스트박스 컴포넌트: 이름을 입력받는 텍스트박스이다. 힌트로 "이름을 입력하시오"를 설정한다.
* 전화번호 입력
. 수평배치 컴포넌트 : 레이블과 텍스트박스를 수평하게 배치하는 목적으로 사용한다.
. 레이블 컴포넌트 : "전화번호"을 화면에 표시하는 것을 목적으로 한다.
. 텍스트박스 컴포넌트: 전화번호를 입력받는 텍스트박스이다. 힌트로 "전화번호를 입력하시오"를 설정한다.
* 버튼
. 수평배치 컴포넌트 : 연락처 추가, 삭제, 전화 버튼을 수평하게 배치하는 목적으로 사용한다.
. 버튼 컴포넌트 : "추가"를 텍스트에 설정하고, 텍스트박스에 입력된 이름과 전화번호를 연락처에 추가한다.
. 버튼 컴포넌트 : "삭제"를 텍스트에 설정하고, 텍스트박스에 입력된 이름과 전화번호를 연락처에서 삭제한다.
. 버튼 컴포넌트 : "전화"를 텍스트에 설정하고, 목록뷰에 선택한 연락처의 전화번호를 활용하여 전화 앱을 실행시킨다.
전화 컴포넌트 : 전화를 거는 기능을 제공하는 컴포넌트이다. 사용자가 '전화' 버튼을 클릭하면 전화를 거는 기능을 제공한다.
알림 컴포넌트 : 추가하거나 삭제할 때 텍스트박스에 아무것도 없을 경우 사용자에게 알림창을 띄워주는 기능을 제공한다.
위의 컴포넌트를 팔레트에서 drag&drop하여 배치한 결과의 화면이다.
설계 아이디어
크게 세가지 기능을 한다.
첫번째는 이름과 전화번호를 입력하고 연락처에 추가하는 기능이다. 연락처에 추가하면 목록뷰에 추가한 이름과 전화번호를 추가하여 보여준다.
이를 위해 'phonebook' 리스트 변수를 정의하고 텍스트박스에 추가한 이름과 전화번호를 조합하여 리스트에 추가한다.
목록뷰 요소값에 'phonebook' 리스트를 추가하면 된다.
두번째는 연락처를 삭제하는 것이다. 목록뷰에서 특정 항목을 선택하면 이름/전화번호 텍스트박스에 표시하고 삭제버튼을 클릭하면 삭제한다.
세번째는 목록뷰의 연락처 항목을 선택하여 전화를 거는 기능이다. 목록뷰에 연락처 항목을 선택하면 이름/전화번호 텍스트박스에 표시하고 '전화'버튼을 클릭하면 전화앱이 구동된다.
이 앱을 통해 추가적으로 도움이 되는 것은 문자열을 분리하여 리스트에 각각 하나의 항목에 추가하는 방법을 소개할 것이다.
코딩블럭
. 변수
코딩을 하면서 가장 중요한 것이 변수를 정의하는 것이다. 코딩은 데이터를 얼마나 효율적으로 처리하느냐에 따라 좋은 코딩 혹은 나쁜 코딩으로 분류한다.
그래서 변수를 잘 정의하는 것이 매우 중요하다.
. phonebook 리스트변수 : 목록뷰에 연락처를 표시하는데 사용하는 변수이다. 모양은 "이름/전화번호" 문자열이 하나의 값으로 저장된다. 이름과 전화번호를 별도 리스트로 관리하지 않고 하나의 문자열로 표시한 것을 염두에 두기 바란다.
. namecall 리스트변수 : 임시 리스트 변수이다. 이는 phonebook 리스트 변수에서 "이름/전화번호"로 구성된 문자열을 분리해서 받아내는 임시 리스트변수이다.
. '텍스트모두분할하기' 블럭을 활용하여 "이름/전화번호" 문자열과 구분자 '/'를 활용하여 분할하여 리스트에 임시 저장하는 변수이다.
. 분할하면 namecall 리스트 첫번째에는 이름이 두번째에는 전화번호가 분할되어 저장되어 있다.
. 이를 이름/전화번호 텍스트박스에 할당하면 화면에 표시된다.
. 연락처 추가
단순하게는 이름과 전화번호 텍스트박스에 입력한 문자열을 목록뷰에 저장하면 된다.
* 문제1
. 저장할 때 목록뷰 요소값은 리스트 값을 받는다는 것이다.
. 그래서 'phonebook' 리스트를 정의하고 이름과 전화번호를 리스트에 저장한다.
* 문제2
. 이름과 전화번호를 별도로 관리할 것인가? 어떻게 할 것인가?
. 여기서는 목록뷰에 "이름/전화번호"가 하나의 요소값의 형태로 정의하였다.
. 따라서 리스트의 하나의 항목값의 형태는 "이름/전화번호" 형태이어야 한다.
- 그래서 phonebook 리스트에 추가할 때 이름과 전화번호를 '합치기' 블럭을 활용하여 하나의 문자열을 만든다.
| 문자열 |  |
phonebook 리스트 |
| "홍길동" "010-1234-1234 |
"홍길동/010-1234-1234" |
* 문제3
. 텍스트박스가 비어있다면?
- 조건문을 확인하여 사용자아게 알림창을 띄운다.
. phonebook 리스트를 목록뷰 요소값에 설정하면 목록뷰에 추가된 항목이 보일 것이다.
. 연락처 삭제
연락처를 삭제하기 위해서는 목록뷰에서 연락처를 선택하고 선택한 연락처를 이름과 전화번호 텍스트박스에 표시하고 삭제 버튼을 클릭하면 삭제하는 시나리오이다.
첫번째 목록뷰에서 연락처를 선택한다.
목록뷰에서 연락처를 선택한다. 목록뷰 블럭들 중에서 '선택한후에' 블럭을 활용하여 선택후에 처리할 작업들을 해주면 된다.
처리할 작업은 선택한 연락처 항목을 이름과 전화번호 텍스트박스에 표시하는 것이다.
두번째는 목록뷰에서 항목을 선택하면 목록이 선택이 되고 이름/전화번호 텍스트박스에 선택한 이름과 전화번호를 표시하는 것이다.
먼저 생각해야 할 것은 목록뷰에서 보여지는 문자열이 "이름/전화번호" 예로 "홍길동/010-1234-1234"이다. 문자열을 이름과 전화번호로 분할해야 한다. 앱인벤터에서는 문자열 블럭에서 "텍스트모두분할하기" 블럭을 제공하고 문자열과 구분자를 입력하면 해당 문자열이 분할된다. 여기서는 구분자로 '/'를 사용하였고, 분할되면 리스트로 반환된다. 그래서 우리는 namecall이란 리스트 변수를 임시로 활용한다. namecall 리스트변수 첫번째 항목에는 이름이 두번째 항목에서는 전화번호가 저장된다.
| 목록뷰의 선택된항목 |  |
namecall 리스트변수 |
| "홍길동/010-1234-1234" | 첫번째항목 : 홍길동 두번째항목 : 010-1234-1234 |
이제 목록뷰에서 선택된항목을 분할하였고, 이름/전화번호 텍스트박스에 목록뷰의 선택된항목의 이름과 전화번호를 설정한다. 그러면 텍스트박스에 이름과 전화번호가 표시된다.
네번째 삭제하는 절차이다.
삭제하는 절차는 몇가지 고려해야 할 조건이 있다.
첫째 사용자가 삭제 버튼을 클릭하였을 때, 텍스트박스가 비어 있으면 삭제되지 않고 사용자에게 알림창을 띄워준다.
이제 목록뷰에서 선택한 항목이 있다면 삭제 버튼을 클릭할 경우에 목록뷰에서 삭제하면 된다.
삭제하는 절차는 두단계를 거친다.
- 연락처를 관리하는 phonebook 리스트에서 선택한 항목을 삭제하는 것이다.
- 이를 위해서 목록뷰에서 선택한 항목번호를 저장해 놓는다. 이는 phonebook 리스트의 선택한 항목의 위치를 의미한다.
삭제하려면 phonebook의 항목 위치를 알아야 한다. (매우 중요!!!)
=> 이를 위해 목록뷰에서 선택한후에 블럭에서 선택번호 변수에 선택한항목번호를 저장해준다.
- 리스트에서 phonebook과 위치값을 넣어주어야 리스트에서 항목을 삭제할 수 있다.
phonebook 리스트에서 항목을 삭제하고 다시 목록뷰 요소값을 저장해주고 refresh하면 목록뷰에서는 삭제된 항목이 보이지 않게 될 것이다.
아래는 삭제버튼을 클릭했을 때, 실행되는 전체 블럭들이다.
. 전화 버튼을 클릭했을 때
목록뷰에서 연락처 항목을 선택한 후에 선택한 항목을 이름/전화번호 텍스트박스에 표시하고 전화버튼을 클릭하면 전화앱이 구동이 된다.
첫번째 단계, 목록뷰에서 항목을 선택한다.
. 이는 위에서 설명하였다. 위에 내용을 참조하기 바란다.
두번째 전화버튼을 클릭했을 때 이다.
. 여기서도 예외처리를 해야 한다. 이름과 전화번호 텍스트박스가 비어있다면 알림창을 띄워준다.
세번째는 전화를 거는 작업을 한다.
전화 컴포넌트의 전화번호 속성값에 텍스트박스2의 텍스트, 즉 전화번호를 설정한다.
그리고 전화걸기 호출 블럭을 통해 전화앱을 구동한다.
아래는 전화 버튼을 클릭하였을 때 전체 블럭이다.
실행결과 화면
앱인벤터의 목록뷰 컴포넌트를 활용하여 연락처앱을 만들어보았다. 아래는 실행결과 화면이다.
첫번째 앱이 구동되면 실행되는 화면이다.
3명의 연락처를 추가하였다. 홍길동, 김철수, 이영희 3명을 추가하였다.
아래는 전화걸기 실행화면이다.
전화를 걸기 위해 목록뷰에서 '김철수/01023456789'를 선택하였다.
전화 버튼을 클릭하면 아래와 같은 화면이 실행이 된다.
김철수를 선택하여 삭제해 보자. 김철수를 선택하고 '연락처삭제' 버튼을 클릭한 후의 화면이 아래 화면이다.
지금까지 목록뷰 컴포넌트를 활용하여 스마트폰의 연락처앱을 간단하게 만들어보았다. 사실 보기에는 쉽지만 연락처를 저장하기 위해 리스트 변수를 활용하였고, 리스트에 저장된 문자열을 변환하는 작업 등은 프로그램 작성하는데 또다른 장애물이다. 하나씩 문제를 해결해 나가면 어느새 실력이 쭈~~욱 늘어나 있는 변해있는 자신을 발견할 것이다.
여기서 한가자 더 살펴본 것은 텍스트분할하기 블럭이다. 필자는 함수를 만들어서 구분자를 통해 텍스트를 분할하여 리스트에 추가하려고 했는데, 앱인벤터 기본 텍스트 블럭에서 제공하여 활용하였다. 매우 유용하니까 잘 활용하기를 바란다.
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 코딩따라하기' 카테고리의 다른 글
| 앱인벤터 헬로우 코디(Hello Codi) (0) | 2022.09.30 |
|---|---|
| 앱인벤터 알림-예제앱 (0) | 2022.09.18 |
| 앱인벤터-목록선택버튼 컴포넌트 활용 예제2 (1) | 2022.09.16 |
| 앱인벤터-목록선택버튼을 활용하는 예제 (0) | 2022.09.15 |
| 내 맘대로 검색하기-웹뷰어 컴포넌트 예제 (0) | 2022.01.03 |
댓글