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

[앱 인벤터2] [실습 프로젝트] 메모 앱 만들기(1)-메모 화면 설계 및 메모 삭제

오늘도 여러분에게 신나고 좋은 일이 생깁니다.

어떤 항목의 내용을 화면에 보여주고 싶다. 그리고 메모 항목을 삭제하고 싶다면 어떻게 해야 할까?

이와 같은 목적이 있을 때, 이 강좌가 도움이 됩니다.

(예제 화면)

(1) 메모 목록을 보여줄 수 있다.

(2) 선택된 메모를 삭제할 수 있다.

(1) 메모 목록을 보여주는 목록뷰에 대해 알아본다.

(2) 메모를 삭제하기 위한 목록뷰의 내용을 학습해 본다.

(가) 화면 및 기능

(나) 사용할 구성요소

TinyDB, 수평배치, 버튼1,2,3, 레이블, 목록뷰

(가) 뷰어, 컴포넌트 화면

(나) 구성요소 속성 변경

(1) 이름을‘메모추가버튼, 메모삭제버튼, 메모확인버튼’으로 변경한다.

(2) 레이블1의 텍스트를 ‘나만의 메모장’으로 변경한다.

(3) 각 버튼의 텍스트를 ‘메모 추가’, ‘메모 삭제’, ‘메모 확인’으로 변경한다.

(다) 디자이너 뷰어화면 설명

메모추가/메모삭제/메모확인 버튼 : 메모를 추가, 삭제, 확인하는 기능을 갖는다.

레이블 : 메모장 목록의 타이틀이다.

목록_뷰1 : 메모의 목록을 보여준다.

TinyDB1 : 내가 원하는 메모 정보를 DB(데이터 저장장소)에 저장해 준다.

(가) 전체화면

(나) 각각의 블록 설명

(1) 메모 목록 초기화

(2) TinyDB에 메모 목록이 있다면 그것을 불러오고, 그렇지 않다면 하나의 샘플메모을 보이게 한다.

(3) 목록을 선택 후, ‘메모삭제’를 누르면 해당 목록이 삭제되도록 한다. 

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

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

카카오톡이나 네이버 밴드을 보면 자신의 사진을 프로필 사진을 변경할 수 있죠.

앱 인벤터에서도 이 기능을 만들어 보겠습니다.

우리는 프로필 사진을 설정할 때, 카메라 기능을 이용하여 사진을 찍기도 하고, 

자신의 폰속에 갤러리라는 장소에 저장된 사진을 사용하기도 합니다.

자 우리는 앞에서 카메라를 이용해서 이미지를 변경해 보는 것을 만들어보았죠.

이번시간에는 나의 장치(폰, 태블릿)에 저장된(갤러리) 사진 이미지를 불러와서 

프로필로 변경하는 기능을 만들어 보도록 할께요.

1. 나의 앱에서 프로필 사진을 변경하는 기능을 만들수 있다.

1. 이미지 선택 요소를 사용해서 갤러리 사진을 열 수 있다.

2. 갤러리에 선택된 사진을 프로필 사진으로 변경할 수 있다.

이번 시간에 학습할 구성요소

이미지 선택(ImagePicker)

이미지 선택(ImagePicker) 요소는 무엇인가?

(1) 팔레트-미디어에 위치하고 있음.

(2) 이미지 선택을 누르면 이미지 갤러리가 나타나고 사용자는 이미지(사진 포함)을 선택할 수 있습니다.

(3) 이미지를 선택 후, SD카드에 저장됩니다.

이번 시간에 배울 블록들

(1) ‘호출 이미지_선택1.열기’ : 갤러리을 화면에 보여줍니다.

(2) ‘언제 이미지_선택1.터치다운’ : 해당 버튼이 선택되면 실행됩니다.

(3) ‘언제 이미지_선택1.선택 후’  : 갤러리에서 이미지를 선택하면 실행됩니다.

(4) ‘이미지_선택1.선택된 항목’   : 선택된 항목이 저장된 위치를 가르킵니다.

(그림 이미지_선택1 블록)

준비

새 프로젝트를 생성합니다.

한국어로 작업할 경우, 메뉴 위쪽에 언어를 한국어로 설정합니다.

실습 단계

1. 디자이너 화면에서 뷰어로 구성요소를 가져옵니다.

2. 블록 화면에서 관련 기능 블록을 가져와 카메라 기능을 이용할 수 있도록 합니다.

3. 위에 작성한 내용에 대해 결과를 확인해 봅니다.

추가할 구성요소

캔버스 : 갤러리에서 선택한 사진을 배경이미지로 화면에 표시합니다.

이미지_선택 : 갤러리에서 사진을 선택할 수 있도록 갤러리 화면을 여는 기능을 갖습니다.

레이블1 : 선택된 이미지가 저장된 위치를 보여줍니다.

뷰어 화면 및 구성요소

(1) 레이블1을 선택하고 레이블의 너비를 화면에 꽉 차게 설정해 줍니다.

(그림2. 디자이너 화면 작업)

(1) 이미지_선택 버튼을 누르면 ‘호출 이미지_선택1.열기’블록을 이용하여 갤러리 화면을 열 수 있습니다.

(2) 갤러리에서 원하는 사진을 선택하면 ‘언제 이미지_선택1.선택후’이벤트 블록이 실행됩니다.

‘캔버스1.배경이미지’지정을 통해 선택된 사진이 화면이 보이게 되고,

‘레이블1.텍스트’ 지정에 ‘이미지_선택1.선택된 항목’을 결합을 통해 선택된 이미지의 저장 위치가 레이블에 표시됩니다.

(그림3. 이미지갤러리 열기)

장치와의 연결 – WiFi 이용

(가) 메뉴의 연결을 선택 후, AI 컴패니언 선택

(나) QR 코드가 보이면, 폰 또는 태블릿의 MIT AI2 Companion 앱을 실행

(다) SCAN QR Code를 선택 후, 화면에 QR CODE를 읽는다. 이후, 자동으로 연결된다.

(그림4. 장치와 실제 작업 연결하기)

결과 확인

(가) 프로필사진 변경 을 선택한다.

(나) 갤러리가 열리면 원하는 이미지를 선택한다.

(다) 선택된 사진이 표시되는 것을 확인한다.

(그림5. 장치에서 실행 화면)

(1) 갤러리에 있는 이미지를 선택 가능하도록 하는 요소는 무엇일까요?

(2) ‘이미지_선택1.선택된 항목’이 가르키는 것은 이미지 파일명이다.(O, X)

정답은 위의 내용에 있습니다. 혹시 잘 대답할 수 없다면 다시 한번 복습을 부탁을 드립니다.

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

카메라(Camera)로 사진 찍기

[앱 인벤터2] 기본학습-미디어[1] – 캠코더로 동영상 녹화하기

우리는 가끔 스마트폰을 이용하여 비디오 영상을 녹화합니다. 그렇다면 앱 인벤터에서 이 기능을 사용할 수 있는 방법이 없을까요?

자 함께 배워보도록 하겠습니다.

(1) 캠코더 요소를 이용하여 동영상을 녹화하는 기능을 만들 수 있다.

(1) 동영상 녹화 기능을 불러오는 것을 학습한다.

(2) 녹화 후, 이벤트에 따라 알림 메시지를 이용하여 동영상 파일이 저장된 위치를 화면에 표시하는 것을 학습한다.

(1) 캠코더(Camcoder) 요소는 무엇인가요?

참고: MIT 캠코더 요소 설명(http://appinventor.mit.edu/explore/content/media.html)

간단하면 말하면 장치(폰)의 비디오 녹화 기능을 사용하여 비디오를 녹화하는 것을 가능하게 해 주는 요소입니다.

그림을 통해 살펴보면 다음과 같습니다.

① 디자이너 화면의 팔레트 – 요소는 미디어에 찾을 수 있습니다. 뷰어로 가져오게 되면 보이지 않는 구성요소로 구분됩니다.

사용되는 블록들

② 호출 캠코더1.비디오 녹화하기 : 스마트폰의 비디오 녹화하기 기능을 불러옵니다.

③ ‘언제 캠코더1.녹화 후’ 블록은 동영상 녹화 후, 저장했을 때 발생되는 블록입니다. 여기서‘클립’은 저장된 동영상의 위치의 값을 가르킵니다.

간단한 순서

(1) 디자이너 화면에 요소를 추가합니다. (버튼, 알림, 캠코더)

(2) 블록 화면에서 기능을 추가합니다.

  가. 버튼을 누르면 동영상 녹화를 시작합니다.

  나. 동영상 녹화를 저장 후에 알림 메시지를 이용하여 저장된 위치를 보여줍니다.

(1) 사용할 구성요소

① 버튼

② 알림

③ 캠코더

(2) 뷰어로 구성요소 가져오기

(그림) 팔레트 – 뷰어 화면

가. 뷰어 구성요소 설명

① 버튼   : 버튼을 선택하면 캠코더를 이용하여 비디오 녹화 기능을 불러옵니다. 

② 알림   : 비디오를 녹화, 저장 후에 저장된 장소를 알려줍니다.

③ 캠코더 : 비디오 녹화 기능을 사용할 수 있게 해 주는 요소입니다.

(1) 사용되는 블록

① 언제 버튼1.클릭 : 버튼이 선택되면 발생되는 블록입니다.

② 호출 캠코더1.비디오 녹화하기 : 캠코더의 비디오 녹화하기 기능을 불러와서 비디오 녹화를 합니다.

③ 언제 캠코더1.녹화 후 : 비디오 녹화한 이후 동영상이 저장 된 후에 실행되는 블록입니다. 실행 안에 있는 블록들을 실행합니다.

④ 호출 알림1.경고창 나타내기 : 알림 부분에 결합된 블록 조각의 내용을 경고창으로 보여줍니다.

⑤ 가져오기 클립 : ‘언제 캠코더1.녹화 후’블록의 클립에서 발생된 블록으로 동영상이 저장된 위치를 가르킵니다.

(2) 뷰어로 블록 가져오기

(그림) 블록 - 뷰어 화면

각각의 번호에서 블록을 가져옵니다.

버튼1을 선택하면 비디오 녹화 기능을 불러와서 녹화를 시작하고,

녹화가 끝난이후 저장을 선택하면 2번 블록이 실행됩니다.

따라서 3번 부분인 알림 메시지 경고창이 표시됩니다.

(3) 블록 상세 설명

(가) 화면에서 버튼1이 선택되면 실행 부분에 있는 블록이 실행됩니다.

(나) 스마트폰의 동영상 녹화하기 기능을 불러옵니다.

(가) 동영상 녹화 이후에 저장 된 이후에 위의 블록이 실행됩니다.

(나) 알림 메시지를 이용해서 동영상이 저장된 위치를 보여줍니다.

(1) 결과 화면

(그림) 결과 화면

(1) 버튼1 텍스트가 선택되면 1번의 비디오 녹화 기능이 호출됩니다.

(2) 그리고 이후 비디오를 녹화 후에 완료 후, 저장 버튼을 누릅니다.

(3)‘언제 캠코더1.녹화후’블록이  이벤트가 실행되고 따라서 화면에 동영상의 저장 위치가 보여집니다.

간단하게 동영상을 녹화하는 방법에 대해 알아보았습니다.

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

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

[앱 인벤터2] 제어 블록_만약 그러면 (2)- 음수/양수 판단하기

(1) 만약 그러면(if ~ else)에 대한 블록을 이해한다.

(1) 입력 상자에 숫자를 입력하고, 이에 대한 값이 음수인지, 양수인지 판단한다.

간단한 순서

(1) 디자이너 화면에서 구성요소(텍스트 박스, 버튼, 알림)를 추가한다.

(2) 블록 화면에서 버튼이 클릭 되었을 때, 동작을 추가한다.

(1) 사용할 구성요소

① 텍스트 상자

② 버튼

③ 알림(보이지 않는 요소로 분류됨)

(2) 뷰어로 구성요소 가져오기

(그림) 팔레트 – 뷰어 화면

가. 뷰어 구성요소 설명

① 버튼 : 버튼을 누를 때, 입력 상자안의 숫자를 판단하여 양수, 음수를 판단한다.

   속성 값 설정 : 텍스트를 ‘양수/음수 판단’으로 변경

② 텍스트 박스 : 이곳에 숫자를 입력한다. 그리고 버튼을 누르면 이곳에 입력된 숫자의 값을 양수인지 음수인지 판단한다.

③ 알림 : 버튼을 선택한 이후에 판단 후, 양수인지 음수인지 또는 0인지 값을 알림 메시지로 보여준다.

(1) 사용되는 블록

  ① 알림1.경고창 나타내기 : 경고 메시지를 표시합니다.

  ② 수학 비교 블록 (____ = ____ ) : 숫자의 값을 비교한느 블록입니다.

  ③ 만약 … 그러면 … : 컴퓨터의 개발 언어의 if ~ else ~ 과 같은 역할을 하는 만약 어떤                          조건이 만족하면 그러면에 있는 내용을 실행하는 블록입니다.

                         여기서는 기본형 블록을 확장시킨 형태가 사용됩니다.

(2) 뷰어로 블록 가져오기

① 언제 버튼1.클릭 : 버튼이 클릭되면 실행부분의 내용을 실행합니다.

② 만약 .. 아니고 ..라면 : 컴퓨터에서 이를 if~else if라고 합니다. 하나의 조건을 비교하고 만족하지 않을 경우, 다시 조건을 비교하는 구조가 됩니다.

③ ‘___ > 0 ‘ : 수학의 블록으로 숫자를 비교할 때 사용합니다.

④ 텍스트 상자1. 텍스트 : 입력 상자에 입력된 숫자의 값을 가르킵니다.

⑤ 알림1.경고창 나타내기 : 알림에 있는 내용을 스마트폰의 화면에 표시합니다.

⑥ “ “ 텍스트 블록 : 쌍 따옴표 안에 있는 값을 어딘가에 저장하거나 결합시킵니다. 여기서는 알림 메시지를 텍스트 블록 안에 있는 내용을 표시합니다.

(3) 블록 상세 설명

‘만약 그러면’ 블록의 판단에 의해 양수가 입력되면 ‘양수입니다.’가 표시

음수가 입력되면 ‘양수가 아닙니다.’가 표시 됩니다.

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

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