새롭고 신나는 일이 생기는 하루(Thank you Lord)

[앱 인벤터2] 기본 1 - 앱 설치파일 만들기

안녕하세요. 이번 강좌에서는 지난 시간에 배웠던 내용을 실제 앱의 형태로 만들어 보겠습니다.

앱은 무엇인가? 우리가 스마트폰 화면에서 보는 것과 같이 Play 스토어, 지도, Google 등과 같이 스마트폰에 설치된 프로그램을 앱이라고 부릅니다.

우리는 앱 인벤터2를 이용해서 화면을 만들었고, 그리고 기능을 블록을 이용해서 작성했죠.

이제 실제로 우리가 만든 앱을 나의 폰에 설치해서 확인해 보죠.

지난 시간 배웠던 내용

[앱 인벤터2] 기본기능 익히기 10(알림-Notifier) 사용자에게 알려주기(경고, 알림메세지)

[앱 인벤터2] ‘종료하시겠어요?’ 알림창 만들기 (알림-Notifier)

이번 내용은 앱 설치 파일을 만드는 것이기 때문에 꼭 전에 시간을 공부하고 하실 필요는 없습니다. 

개인적으로 다른 프로젝트를 동일하게 실습하셨도 아래 내용은 그대로 실습이 가능합니다.

학습내용

(1) 알림 기능을 가진 앱을 apk(폰에 설치되는 파일) 형태의 파일로 만든다.

(2) apk 파일을 실제로 스마트폰에 설치해 본다.

학습목표

(1) 자신이 작성한 앱을 폰에 실제 설치할 수 있도록 한다.

기본 이해하기

Apk란?

Android application package(안드로이드 애플리케이션 패키지)는 일종의 프로그램의 묶음 파일 형태라고

생각해 주세요.

무엇을 위한? 안드로이드 운영체제(우리가 쓰는 폰 운영하는 시스템)에서 설치와

다른 사람들에게 배포를 위한 파일 형태라고 이해해 주세요.

파일이란? 컴퓨터 내에 어떤 정보를 저장을 위한 일반적인 방법의 한가지로 생각해 보죠.

앱인벤터2 에서는 빌드라는 메뉴를 이용하여 내가 만든 내용을 apk 파일로 만들어 줍니다.

QR 코드?

(위키 백과 참조)

이런 형태로 생겼어요. QR 코드 안에 숫자와 문자 데이터 등을 저장할 수 있어요. 또 이를 QR Code를 읽는 앱을 이용하여 해당 정보를 읽고 어떤 것을 실행하게도 할 수 있죠.

앱인벤터 내에서는 MIT AI2 Companion 와 연결하거나 앱 apk 파일 형태로 만들어

자신의 폰에 apk 파일을 설치할 때 사용하게 됩니다.

따라해보기

준비작업

가. http://ai2.appinventor.mit.edu/ 접속하기

나. 언어를 한국어로 설정한다.

다. 기존에 작성했던 프로젝트 중에 내가 폰에 설치하고 싶은 프로젝트를 준비한다.

실습하기

가. 디자이너 화면과 블록 화면의 내용을 작성합니다.

나. 빌드를 선택하고, ‘앱(.apk용 QR코드 제공)’을 선택합니다.

다. QR 코드를 QR리더를 이용하여 읽고, apk 파일을 내 폰에 설치합니다.

(1) APK 파일 만들기

① 빌드를 선택합니다.

② 앱 (.apk용 QR코드 제공)을 선택합니다.

③ 화면 중앙에 apk 파일을 만드는 진행 상황을 보여주는 화면이 보입니다.

④ apk 파일이 완료되면 화면 중앙에 QR코드가 보여집니다.

(2) QR 코드를 읽어, 내 폰에 설치하기

① QR 코드를 읽을 수 있는 앱을 실행합니다. QR코드(바코드)를 읽을 수 있는 어떤 앱이든 사용 가능합니다.

② 앱 인벤트2 홈페이지에서 보여진 QR 코드(바코드)를 QR 코드 앱을 이용하여 QR코드를 읽습니다.

③ ‘다운로드 할까요?’ 라는 메시지가 폰에서 보입니다. 폰에서는 ‘구글 플레이’등에서 다운로드 받지 않을 경우 다음과 같은 메시지를 보여줍니다.

④ 자 그럼 Play스토어가 아닌 곳에서 다운로드 받는 것을 가능하도록 하기 위해 설정을 선택합니다.

⑤ 설정 화면으로 들어가면 ‘알 수 없는 출처’ 이 부분을 체크합니다.

⑥ ‘이번에만 설치를 허용합니다.’ 확인하고 확인을 선택합니다.

⑦ 자 이제 설치를 하죠.

⑧ 설치중이군요.

⑨ 자 그럼 내 폰에서 내가 만든 앱이 짜안~~ 보여지게 되죠.^^

이제 처음부터 끝까지 앱설치까지 해 보았네요.

자 다음과 같이 알림 메세지 확인할 수 있는 앱이 실행되고 종료하면 앱이 종료되는 것을 확인해 볼 수 있습니다.

간단한 앱일 수 있지만 앱 개발자라고 말할 수 있지 않을까요? 물론 개발자라 말하기는 부족할 수 있지만...

오늘 하루도 수고하셨습니다~

항상 좋은 일 새로운 일들이 여러분 한 분 한분에게 가득하기를 기원합니다.

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)

[앱 인벤터2] ‘종료하시겠어요?’ 알림창 만들기 (알림-Notifier)

안녕하세요. 우리는 앞에 시간에 알림 요소에 대해 알아봤죠.

[앱 인벤터2] 기본기능 익히기 10(알림-Notifier) 사용자에게 알려주기(경고, 알림 메세지)

그러면 여기서 새롭게 질문이 하나 더 나올 것 같아요.

앱에서 알림 메시지를 화면에 보여주는 것은 하실 수 있겠죠?

그러면 알림 메시지의 버튼을 선택한 이후에 선택한 내용 이후에 앱에서

실행되게 하는 것은 어떻게 할까요?

그렇죠. 이 내용을 이번 시간에 실습해 보도록 하겠습니다.

학습내용

(1) 선택 대화창을 이용하여 알림 메시지를 보여준다.

(2) ‘예’, ‘아니오’ 버튼을 만들고 예를 누르면 앱을 종료, ‘아니오’를 누르면 그대로 화면으로 돌아간다.

학습목표

 (가) 알림 메시지(종료할까요?)에서 ‘예’를 선택했을 때, 앱 종료하기

기본 다지기

이번 수업에 사용할 블록에 대해 알아볼까요?

지난시간에 배웠던 블록 복습과 함께 이번 시간에 새롭게 배워볼 블록에 대해 알아볼까요?

[선택 버튼이 있는 알림 메시지]

[새로운 블록]

준비작업

가. http://ai2.appinventor.mit.edu/ 접속하기

나. 언어를 한국어로 설정한다.

다. '새 프로젝트 시작' 선택 후, 프로젝트 이름 원하는 이름으로 작성하기. 영어로 작성해야 합니다.

실습하기

이번 시간의 내용은 아래 강좌의 추가 내용입니다. 이글이 처음 이신 분은 아래 내용을 학습 후에 어어서 학습을  부탁 드립니다.

[앱 인벤터2] 기본기능 익히기 10(알림-Notifier) 사용자에게 알려주기(경고, 알림 메세지)

실습 단계

가. 디자이너 화면에 구성요소를 추가합니다.

나. 블록 편집 화면에서 블록을 맞춥니다.

다. 스마트폰으로 확인해 보기

디자이너 화면

[구성요소 속성 및 설명]

해당 요소를 마우스 왼쪽 버튼을 이용하여 선택하고 뷰어로 가져옵니다.

  블록 가져오기

  왼쪽에 있는 블록을 선택한 이후에 아래 블록을 뷰어 영역으로 가져옵니다.

다음과 같이 블록을 결합시킵니다.

각각의 블록 결합을 설명해 보면 다음과 같습니다. 

스마트폰으로 연결하여 결과를 확인해 봅니다.

실제로 앱_종료 버튼을 누르면 다음과 같은 알림 창이 뜨고, 알림 창에서 ‘예’을 누르면 앱이 종료되는 것을 확인해 볼 수 있습니다.

여기서 기억해야 할 것이 있어요.

MIT AI 컴패니언 앱을 사용하여 결과 화면을 확인했을 때는 실제로 종료되지 않고, 아래 메시지가 보입니다.

‘Closing forms is not currently supported during development’

내용 : 폼을 닫는 것은 현재 개발하는 동안은 지원되지 않습니다.

하지만, apk 파일을 만든 이후에 실제 앱에서는 정상적으로 실행됩니다. ^^

자, 마지막으로 간단한 Quiz를 통해 이번 시간에 학습한 내용을 점검해 볼까요?

(가) 알림 요소를 선택한 이후에 선택한 값을 비교할 수 있도록 하는 블록이름은 어느 영역에 있고 어느 블록을 사용할까요? 

답 : (제어, 텍스트, 수학)중 하나, 만약 ~~~ (        ) 입니다.

혹시 잘 기억이 나지 않으신다면 위에 내용 다시 한번만 읽어 볼까요? ^^

다음 시간에는 실제 apk 파일을 만들어 보고, 이를 폰에 설치하여 실행하는 것을 해 보겠습니다.

자 그럼 수고하셨습니다. 화이팅! ^^

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)

이번시간에는 알림 요소에 대해 알아보도록 하겠습니다.

모르는 분들을 위해 그림으로 설명 드리면 다음과 같습니다.

아래와 같은 알림 메시지를 띄울 수가 있어요.

왼쪽이 실제 화면이고 각각의 버튼을 눌렀을 때, 

보여지는 알림 메세지입니다.

학습내용

(1) 앱에서 알림 메세지를 표시하는 알림 요소에 대해 알아본다.

학습목표

 (가) 앱에서 알림 메시지를 보여주기를 위한 블럭을 작성할 수 있다.

자 그럼 한번 배워볼까요?

기본 다지기

알림 요소란?

알림 요소는 우리가 앱을 사용할 때, 무언가의 간단한 메세지를 스마트 폰의 화면에

보여주고 싶을 때, 사용됩니다.

위의 그림과 같이 경고 메세지를 보여주거나 또는 버튼을 표시하여

질문을 선택할 수 있도록 하는 알림을 보여줍니다.

그리고 그 외 기능으로는 안드로이드 로그(앱 사용자에게 보이지는 않아요)를 남기는 기능을 하죠.

좀 더 자세한 내용을 원하시는 분은 영문 페이지를 참고해 주세요.

http://ai2.appinventor.mit.edu/reference/components/userinterface.html#Notifier

이번 시간에 배울 블록에 대해 알아볼까요?

[알림 요소 블록]

호출 알림1.경고창 나타내기

호출 알림1.선택 대화창 나타내기

호출 알림1.메시지창 나타내기

호출 알림1.텍스트 대화창 나타내기

준비작업

가. http://ai2.appinventor.mit.edu/ 접속하기

나. 언어를 한국어로 설정한다.

다. '새 프로젝트 시작' 선택 후, 프로젝트 이름 원하는 이름으로 작성하기. 영어로 작성해야 합니다.

실습하기

실습 단계

가. 디자이너 화면에 구성요소를 추가합니다.

나. 블록 편집 화면에서 블록을 맞춥니다.

다. 스마트폰으로 확인해 보기

디자이너 화면

1번에 해당되는 것을 마우스 왼쪽 버튼으로 선택하고, 뷰어로 드래그하면 뷰어에 해당 구성요소가 위치됩니다.

[구성요소 속성 및 설명]

 빨간색의 메세지 부분은 공통 블록의 텍스트에서 가져오면 되고,

'언제 경고.클릭', '언제 메세지.클릭', '언제 텍스트대화.클릭', '언제 선택대화.클릭' 등의 블록은 각각의 버튼에서 가져오면 됩니다.

그리고 안에 '호출 알림1.oooo 나타내기' 블록은 알림1 요소에서 가져옵니다. 

알림에서 가져온 블록의 공통된 부분을 설명하면 다음과 같습니다.

알림, 메시지 : 알림 창에서 보여지는 메시지를 지정할 수 있습니다.

제목 : 알림창의 제목을 나타냅니다.

버튼 텍스트 [1,2] : 버튼을 생성되고 해당 버튼의 텍스트 내용을 지정합니다.

취소 가능 여부 : 취소 버튼을 표시할지 말지를 지정합니다.

각각의 버튼을 클릭하면 다음과 같이 메세지가 보이게 됩니다.

번호	구분	발생시기	설명
①	버튼1	경고 버튼 클릭 시
②	버튼2	선택 대화 버튼 클릭 시,	선택 대화 버튼 창을 보여줍니다.
③	버튼3	메시지 버튼 클릭 시,	메시지 버튼 창을 보여줍니다.
④	버튼4	텍스트대화 버튼 클릭 시,	텍스트 대화 버튼 창을 보여줍니다. 빈칸에 텍스트를 입력을 할 수 있어요.

스마트폰으로 연결하여 결과를 확인해 봅니다.

결과 화면

마지막으로 간단한 퀴즈를 내 볼까요?

(1) 이번 시간에 배운 알림 요소를 이용하여 알림 창을 띄울 수 있는 종류는 몇가지일까요? ~~~^^

(2) 취소버튼이 보이게 안보이게 하려면 '알림1.선택 대화창 나타내기' 에 취소가능여부에 어떤 값을 넣으면 될까요?

(가)  참  (나)  거짓

오늘 하루도 수고하셨습니다. 열공하세요. 화이팅! ^^

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)

앱을 만들게 되면 앱에 대한 데이터를 저장해야 합니다.

예를 들면 게임 앱을 만들었어요. 게임 점수를 기록해 두고 게임 등수를 기록하고 싶습니다.

앱을 다시 실행해도 기존의 정보를 저장해서 보고 싶습니다.

어떻게 할 수 있을까요?

인벤터에서는 TinyDB를 이용하여 정보를 저장해 두고 다시 앱을 시작했을 때,

TinyDB를 이용하여 정보를 불러올 수 있습니다.

자 그럼 한번 배워볼까요?

TinyDB란?

TinyDB는 말그대로 작은 DB입니다. 

앱 인벤터 환경에서 데이터를 저장하기 위한 작은 DB라 보면 될 것 같습니다.

TinyDB의 구성요소를 뷰어로 가져오면 보이지 않는 요소로 표시됩니다.

데이터를 저장할 때, 태그(이름표)를 사용하여 데이터를 저장하고, 

태그를 이용하여 데이터의 값을 불러올 수 있습니다.

하나의 앱에서 정보를 공유할 때 사용합니다. 다른 앱과 정보를 공유하는 것은 할 수 없습니다.

하나의 앱에서 여러 화면을 사용할 경우 정보를 공유하고 저장하고 읽어올 수 있습니다.

인벤터 2에서는 MIT AI Companion 앱을 사용하여 실제 화면을 단말에서 확인할 수 있습니다.

* MIT AI Companion 에서 앱의 TinyDB 태그 리스트를 보면 여러 앱을 테스트 하기 때문에 TinyDB의 여러 앱의 정보가 보여질 수 있습니다.

이 부분 때문에 개발을 하기 전에 TinyDB를 초기화 를 하고 난 이후에 앱 만들기를 할 수 있습니다.

단, 실제 단말에 설치되는 apk를 파일 만들어 실행을 하게 되면 이 때는 각 앱별로 TinyDB가 구분되게 됩니다.

TinyDB 블록 종류

준비작업

가. http://ai2.appinventor.mit.edu/ 접속하기

나. 언어를 한국어로 설정한다.

다. '새 프로젝트 시작' 선택 후, 프로젝트 이름 원하는 이름으로 작성하기. 영어로 작성해야 합니다.

학습내용

(1) TinyDB에 값 저장하기

(2) 앱이 시작될 때, TinyDB의 모든 태그 리스트를 불러 오기

(3) TinyDB에 선택된 사용자(태그명)로 데이터 읽어 오기

(결과 화면)

실습하기

실습 단계

가. 디자이너 화면에 구성요소를 추가합니다.

나. 블록 편집 화면에서 블록을 맞춥니다.

다. 스마트폰으로 확인해 보기

디자이너 화면

[구성요소 속성 및 설명]

사용자 정보 저장

사용자 정보를 저장할 변수를 선언합니다. 데이터 추가를 할 때마다 user의 변수에 추가로 해당 사용자가 추가 됩니다. 목록 뷰에 문자열을 지정하기 위해 다음과 같은 값으로 저장되게 됩니다.

(예) 사용자1, 사용자 2, 사용자 3

목록에 있는 사용자 정보를 선택하면 화면에 있는 텍스트 상자에 사용자 정보와 취미 및 기타정보를 불러와 표시하게 됩니다.

데이터 추가 버튼을 누르면 화면에 입력한 ‘사용자 정보’, ‘취미 및 기타’ 정보를 TinyDB에 저장합니다.

여기에서 목록 뷰에 데이터를 표시하는 방법은 

이번 강좌에서는 목록 뷰 속성인 목록 문자열 이용하여 추가했습니다.

일반적으로 전에 블로그에 공유했던 목록 뷰의 목록 요소를 이용하는 것이 좋습니다.

(블로그 글) [앱 인벤터2] 기본 기능 익히기 1 (목록뷰)

([앱 인벤터2] 기본 기능 익히기 1 (목록뷰) 참조)

데이터 초기화 버튼을 선택하면, 현재 DB의 내용을 초기화 시키고, 목록 뷰의 내용도 삭제하고 초기화 합니다.

스마트폰으로 연결하여 결과를 확인해 봅니다.

[화면 1]

[화면 2]

정리해 보겠습니다. 

앱 내에서 정보를 공유하기 위해 사용하는 구성 요소가 뭘까요? 

앱이 실행될 때마다 기존의 정보를 저장할 수 있게 하는 것을 가능케 하는 구성요소는 뭘까요?

...

그렇습니다 .TinyDB입니다.

그렇다면 왜 TinyDB을 초기화 할까요? 

TinyDB는 어떤 정보를 이용하여 저장하고 값을 불러올까요?

... 이 부분이 기억이 안나세요... 음 한번 더 위의 내용을 보는 것이 어떨까요? ^^

화이팅입니다. 오늘 하루도 수고하셨습니다.

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)

지난 시간에 이어 큐에 대해 알아보는 첫번째 시간을 갖도록 하겠습니다.

큐 이야기

(가) 연말입니다. 오늘은 최근에 은행에 사람들이 많네요. 줄이 끝나지 않습니다. 한사람이 업무를 처리하고 빠지면 뒤에 또 다른 사람이 업무를 보기 위해 다시 줄을 서게 됩니다.

(나) 출력을 위한 프린터를 테스트하기 위해서 여러가지 작업을 한꺼번에 출력을 했습니다.

대기문서에 몇개의 작업이 있네요.

테스트 페이지가 2개가 있네요. 큐에 2개 문서가 있다고 합니다.

큐(Queue) 란 무엇인가?

컴퓨터에서 기본적인 자료를 처리하는 구조 중의 하나를 말합니다.

큐는 이런 형태를 가졌습니다.

큐는 데이터나 나오는 전방과 그리고 데이터가 들어오는 후방이 있습니다.

스택이 데이터가 들어가고 나오는 곳이 같은 곳이었다면 큐는 다른 형태를 가지고 있습니다.

큐는 들어오는 곳과 나오는 곳이 다릅니다.

줄의 앞쪽 부분 큐에 있던 데이터가 나오는 부분을 Front(프론트)이라 하고,

줄의 뒤쪽 부분 큐에 데이터가 들어가는 쪽 부분을 REAR(레어)라 합니다.

영어로 Front는 앞쪽 REAR는 뒤쪽이라는 뜻을 가지고 있어요.

큐에서의 삽입과 삭제

은행에 창구 앞에 10명의 사람이 서 있습니다.

한명이 업무를 마치면 기다리는 사람은 9명이 됩니다.

큐에서의 삭제

큐의 데이터를 처리하는 곳에서 업무가 끝나 큐의 가장 앞에 FRONT에서 하나의 데이터가 빠져나갑니다.

데이터가 10개가 있었다면 이제 큐의 내의 데이터는 9개가 됩니다.

큐에서는 이를 전문 용어로 dequeue(디큐)라고 부릅니다.

큐에서의 삽입

큐의 데이터를 처리하는 곳에 9개의 데이터가 있습니다. 또 다른 곳에서 처리를 요청하는 데이터가 후방(REAR)로 들어옵니다. 이제 큐에 데이터는 10개가 되었습니다.

큐에서는 데이터가 들어오는 것을 이를 enqueue(인큐)라고 부릅니다.

데이터가 꽉 차 있거나? 데이터가 비어 있는 경우

오버플로우(Overflow)

데이터를 후방(REAR)에 넣으려고 하는데 큐가 꽉 차서 넣을 수 없을 때, 이때 우린 이를 Overflow(오버 플로우)라고 할께요.

언더플로우(Underflow)

큐에 데이터가 비어 있어 큐에서 데이터를 꺼낼 수 없을 때, 이때는 언더플로우(Underflow)라고 할께요.

오늘 하루도 수고하셨습니다. 열공하세요. 화이팅!!! ^^

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)