앱인벤터 알림-예제앱

 앱인벤터-알림-예제앱

 

앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.

이번 시간에는 알림 컴포넌트를 활용하여 알림 컴포넌트에서 제공하는 다양한 알림 창들을 표시해 볼 것이다. 해당하는 버튼을 클릭하면 

 

. 디자인-알림앱

본 예제는 알림 컴포너트를 활용하여 다양한 알림 창을 표시할 것이다. 버튼 컴포넌트를 활용하여 알림창을 표시할 것이다.

 

컴포넌트

 

. 알림 컴포넌트 : 알림 창을 표시하는 컴포넌트

. 6개 버튼 컴포넌트 : 경고창, 선택대화창, 암호입력창, 진행대화창, 텍스트입력창, 메시지창을 실행시키기 위한 버튼 컴포넌트이다.

 

위의 컴포넌트를 팔레트에서 drag&drop하여 배치한 결과의 화면이다.

 

앱인벤터 알림컴포넌트 예제 컴포넌트 디자인 화면

 

설계 아이디어

 

각 버튼을 클릭하면 해당하는 알림창을 표시하는 것이 기본 아이디어이다. 사실 프로그램은 어렵지 않다.

큰 아이디어나 알고리즘이 들어간 것도 아니다. 그러나 이 앱을 작성하는 이유는 알림창의 모양이 어떠한지 어떤 기능과 내용의 알림창이 있는지 확인하는 예제이다.

 

예제로는 목록뷰 컴포넌트를 활용하여 연락처앱을 작성할 때, 추가나, 삭제 혹은 전화를 걸 때, 텍스트박스에 데이터가 비어 있을 때 사용자에게 경고창을 표시하여 해당하는 작업을 정확하게 하도록 안내할 때 사용하였다.

 

>> 연락처 앱<<

 

코딩블럭

 

 

. 경고창 버튼을 클릭했을 때

경고창 버튼을 클릭했을 때 '경고창보이기' 블럭을 호출한다. '알림'에는 예시로 경고창이라고 입력하였다.

 

앱인벤터 알림컴포넌트 경고창보이기 호출 블럭

 

. 선택대화창 버튼을 클릭했을 때

사용자가에 선택을 알려주는 창으로 예시에서는 '좋아요', '나빠요'라는 텍스트를 안내하고 사용자가 둘 중에 하나를 선택하는 예제이다.

 

앱인벤터 알림컴포넌트 선택대화창보이기 블럭

 

. 암호입력창 버튼을 클릭했을 때

사용자에게 암호를 입력하는 창을 제공하는 알림창이다. 

 

앱인벤터 알림컴포넌트 암호입력창보이기 블럭

 

 

. 진행대화창 버튼을 클릭했을 때

사용자에게 임의의 이벤트가 진행중임을 알려주는 알림창이다.

 

앱인벤터 알림컴포넌트 진행대화창보이기 블럭

 

. 텍스트입력창 버튼을 클릭했을 때

사용자에게 관련 안내문에 대한 데이터나 답변을 입력하는 텍스트창을 제공하는 알림창이다.

예제에서는 텍스트입력창에 날씨입력하기 관련 주제로 온도나 날씨에 대해 입력하는 알림창이다.

 

앱인벤터 알림컴포넌트 텍스트입력창보이기

 

. 메시지창 버튼을 클릭했을 때

사용자에게 메시지를 입력하는 기능을 제공하는 알림창이다.

예제에서는 제목으로 '검색'으로 메시지에 검색할 단어를 입력하도록 안내하는 메시지창의 예제이다.

 

 

실행결과 화면

 

앱인벤터의 알림 컴포넌트에 다양한 알림창을 확인하고 테스트하는 예제이다.

 

첫번째 화면은 앱이 처음 구동되었을 때 화면이다. 

 

앱인벤터 알림컴포넌트 실행화면

 

. 경고창 버튼을 클릭했을 때 화면이다.

경고창 알림에는 글자 내용만 알려주고 버튼, 입력창 등이 없다.

 

앱인벤터 알림컴포넌트 경고창 실행화면

 

. 선택대화창 버튼을 클릭했을 때 화면이다.

선택대화창 알림은 둘 중에 하나를 선택하는 기능을 제공한다.

좋아요, 나빠요, 취소 버튼을 제공한다.

 

앱인벤터 알림컴포넌트 선택대화형 실행화면

 

. 암호입력창 버튼을 클릭했을 때 화면이다.

암호를 입력하는 텍스트창을 제공하며 선택하는 버튼을 제공한다.

 

앱인벤터 알림컴포넌트 암호입력 실행화면

 

. 진행대화창 버튼을 클릭했을 때 화면이다.

사용자에게 현재 진행상황임을 알려주며 대기하는 기능을 제공하는 알림창이다.

예제에서는 문자를 보내고 상대방의 문자를 기다리며 현재 진행중임을 사용장에게 알려주는 기능을 제공한다.

 

앱인벤터 알림컴포넌트 진행대화창 실행화면

 

. 텍스트입력창 버튼을 클릭했을 때 화면이다.

온도나 날씨관련 정보를 입력하는 창을 제공한다.

 

앱인벤터 알림컴포넌트 텍스트입력창 실행화면

 

. 메시지창 버튼을 클릭했을 때 화면이다.

메시지창을 보여준다. 본 예제에서는 '검색할 단어를 입력하세요' 라는 메시지를 사용자에게 알려준다.

 

앱인벤터 알림컴포넌트 메시지창 실행화면

 

지금까지 알림 컴포넌트를 활용하여 다양한 알림창 기능을 화면에서 확인하는 앱을 만들어보았다. 앞으로 다양한 상황 가운데 상기의 알림창을 활용하여 사용자와 대화하는 기능을 활용할 것이다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.