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

[앱 인벤터2] 기본학습(13)_만약.. 그러면(제어블록) [1]

안녕하세요. 새롭고 신나는 일이 생기는 오늘 하루입니다.

한주간도 화이팅하세요~

오늘은 기본 블록 중에 하나인 ‘만약 … 그러면’ 블록에 대해 학습을 해 보도록 하겠습니다.

언제 쓰여요?

예를 들면 내가 어떤 값이 음수인지 아닌지 판단할 때,

또는 Quiz 앱을 만들었는데 내가 선택한 내용이 맞는지 아닌지 판단할 때,

또는 알람 시계 앱을 만들었는데 설정한 시간과 현재 시간이 일치하는 것을 판단할 때,

매우 다양한 프로젝트에 폭 넓게 사용되는 블록입니다.

꼭 알아두어야 하는 블록이죠.

오늘은 기본적인 이론 부분을 설명하고 다음시간에 이에 대한 응용으로 앱을 만들어 보는 시간을 갖도록 하겠습니다.

(1) 조건을 판단하는 ‘만약 그러면’ 블록에 대해 이해할 수 있다.

(1) ‘만약 그러면’ 블록을 학습해 보기

기본 블록 4가지 배우기

만약 옆에 어떤 판단할 조건이나 내용을 넣어 해당 값이 만족(참)일 경우,

그러면 부분의 블록을 실행합니다.

(가) 기본 예제

(나) 블록 설명 

만약 텍스트 상자의 값이 0보다 큰지 판단합니다.

   그러면 (조건이 참일경우 실행) ‘양수입니다.’ 메시지를 보여줍니다.

기본 블록에 파란색 부분을 눌러주고 ‘아니면’ 블록 조각을 끼우면 됩니다.

만약 옆에 어떤 판단할 조건이나 내용을 넣어 해당 값이 판단하여

만약 이 조건이 만족하면 ‘그러면’에 결합된 내용이 실행됩니다.

조건이 만족하지 않으면 ‘아니면’에 있는 내용이 실행됩니다.

(가) 기본 예제

(나) 블록 설명 

만약 텍스트 상자 안의 값이 0보다 큰지 판단합니다.

그러면 ‘양수입니다.’ 메시지 알림 (참일경우)

아니면 ‘양수가 아닙니다’ 메시지 알림 (거짓일 경우)

기본 블록의 파란색 부분을 선택하고 '아니고 .. 만약' 블록 넣어서 만든 블록입니다.

블록 조각의 내용은 아래와 같다.

만약 ~

그러면 ~

아니고 ... 라면 ~

그러면

이 블록은 하나의 내용을 판단하여 비교한 후에 해당 조건이 만족하지 않을 경우, 다시 비교할 경우에 사용합니다.

예를 들어 수, 우, 미, 양, 가 등을 판단할 때, 처음 조건이 만족하지 않았지만 다시 비교해야 할 경우에

위의 블록을 중복으로 사용할 수 있겠죠.

블록을 설명하면,

이 경우는 만약 옆에 있는 블록이 조건이 만족하면

‘그러면’의 부분의 블록을 실행합니다.

아닐 경우는 아니오 ... 라면 이부분을 실행합니다.

~라면 의 조건을 이용하여 하나의 조건을 비교합니다.

비교 후, 참이라면 ‘그러면’의 내용을 실행합니다.

(가) 기본 예제

(나) 블록 설명

만약 텍스트 상자의 값이 0보다 클때는

그러면  ‘양수입니다.’ 라는 알림 메시지 보여주기

아니고.. 라면  만약 아닐 경우 텍스트 상자의 값이 0인지 비교합니다.

그러면 만약 0이라면 ‘0입니다’ 라는 알림 메시지를 보여줍니다.

단, 0이 아닐경우에 대해서는 메시지가 없음. 왜나하면 ‘아니오’라는 블록 조각을 넣어주지 않았기 때문이죠. 그럼 한번 아래에서 넣어볼까요?

기본 블록에 ‘아니고 .. 만약’, ‘아니오’ 블록 조각을 넣어서 만든 블록입니다.

이 블록은 조건을 비교한 후, 아닐 경우,

다시 한번 ‘아니오… 만약’ 부분에 의해서 한번 더 조건을 비교할 수 있습니다.

중복해서 넣을 경우, 중복해서 조건이 만족하지 않는 경우에 한해 조건을 판단 비교할 수 있습니다.

예제를 통해 확인해 볼까요?

(가) 기본 예제

(나) 블록 설명

만약 텍스트 상자 안의 값이 0보다 크면

그러면 ‘양수입니다’ 라는 알림 메시지를 표시합니다.

아니고 … 라면 (0보다 크지 않을 경우) 그렇다면 0인지 다시 확인

그러면 (0일 경우) ‘0입니다’ 라는 메시지를 보여줍니다.

아니면 (0이 아닐경우) 0보다 크지 않고, 0과 같지 않기 때문에 ‘음수입니다’ 라는 메시지를 보여줍니다.

위의 블록은 어떤 조건을 판단 비교하는 경우는 모든 프로젝트에서 꼭 필요한 기능이기 때문에

이 부분은 꼭 이해하고 넘어가시기를 부탁드립니다.

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

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

[앱 인벤터2] 만들어 보기-관심 여행지 앱

1. 앱 인벤터2의 기본내용에 대해 점검을 통해 기본 내용을 더 이해한다.

1. 내가 관심이 있는 관광지 및 도시를 추가하고 삭제하는 앱을 만듭니다.

2. 지도보기 기능을 두어 직접 구글 지도에서 검색을 할 수 있습니다.

3. 목록이 많아질 경우, 검색 기능을 추가할 수도 있습니다.

이번 강좌는 블록 편집 화면의 블록은 없습니다.

앞의 강좌를 이해를 했다는 토대위에 주어진 문제에 따라 순서대로 만들어보는 강좌입니다.

중간 중간 관련 내용에 대한 관련 강좌 링크를 넣었습니다.

전체 만들어진 화면.

기능

목록에 내 관심 여행지를 추가하고 삭제가 가능합니다.

선택하고 지도보기로 구글 지도를 볼 수 있어요.

검색 기능 보이게를 누르면 검색 기능을 넣을 수 있어요.

(숨기는 기능에 대해서는 학습하지 않았기에 넣지 않았습니다.)

목록 뷰에 대해 잘 모를 때 아래 글을 선택해서 목록뷰에 대한 학습 후, 아래 내용 진행을 해 주세요.

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

[앱 인벤터2] 기본 기능 익히기 1 (목록뷰) -목록 삭제

(1) [목록뷰] 아래와 같은 목록을 작성하고, 선택한 목록을 삭제, 

그리고 입력 상자에 내용을 목록에 추가하는 앱을 만들어 보자.

화면 구성은 아래와 같습니다.

[만들기 순서]

1-1 화면을 위와 같이 구성한다.

1-2 블록 화면으로 이동하여 목록뷰 요소를 선택 이후에 선택한 항목을 삭제하는 블록 기능을 넣어보자.

1-3 입력 상자(텍스트 박스)에 관심 관광지와 도시를 입력한 이후에 목록에 추가하는 기능을 넣어보자.

추가를 누르면 목록 뷰에 해당 항목이 추가되게 된다.

[만들기 순서]

2-1 [디자이너 화면] 뷰어 화면에서 지도보기 버튼을 추가한다.

2-2 [블록 화면] 관광지 및 도시를 선택한 이후에 

     지도보기 버튼을 누르면 구글 지도로 연결되는 기능을 추가해 보자.

우리가 등록한 관심 여행지가 목록이 많아질 경우가 있다.

그렇다면 일일이 이를 찾아 삭제하거나 지도보기를 할 수도 없다.

자 이제 관심 여행지에 대한 검색 기능을 추가해 보자.

목록뷰의 검색 기능 추가를 잘 모를 때 아래 글을 참고해서 할 수 있습니다.

[앱 인벤터2] 기본기능 익히기 8-(목록 뷰) 검색 기능 추가

[만들기 순서]

3-1 [디자이너 화면] 관심 여행지에 대한 검색 입력 창을 보이도록 검색 기능 보이게 버튼을 추가하고

3-2 [블록 화면] 이에 대한 기능을 넣어보자.

 앱 인벤터2 사이트의 빌드 기능을 이용하여 앱 apk 파일을 내 폰에 직접 설치해 보기

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

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

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

[앱 인벤터2] 기본학습_스크린 속성에 대해 알아보기(1)

(1) Screen1 : 화면에 보여지는 부분을 말합니다.

(2) Screen1에 대한 속성에 대한 내용을 보여줍니다. 이곳의 값을 변경하는 것을 통해 앱의 화면에 보여지는 다양한 것을 지정할 수가 있습니다.

이번 시간에는 스크린속성에 대해 전반적으로 설명해 보았습니다.

다음 강좌에서는 실습을 통해 좀 더 자세히 알아보도록 하겠습니다.

수고하셨습니다.

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

새롭고 신나는 일이 생기는 오늘 하루입니다.

한주간도 파이팅하세요~

액티비티 스타터를 이용하여 사용자가 특정한 곳을 검색하면 구글지도를 불러와서 해당 위치를 

표시하는 기능을 사용해 보겠습니다.

구글 지도를 사용하는 방법을 알아보죠.

학습목표

(1) 액티비티 스타터를 이용한 구글 맵(지도) 검색을 할 수 있다.

학습내용

(1) 내가 검색하고 싶은 내용을 입력 박스에 입력하고 해당 위치를 구글지도에 보여준다.

기본 다지기

저번시간에 간단한 예제를 통해 액티비티 스타터에 대해 이해할 수 있었죠.

자 그럼 액티비티라는 단어에 대해 조금 알아보고 넘어가겠습니다.

액티비티란(Activity)?

스마트폰에는 전체적인 운영을 담당하는 안드로이드라는 운영체제가 있어요.

액티비티란 안드로이드에서 애플리케이션(프로그램)의 한 구성요소입니다.

특정한 작업을 담당하게되죠.

예를 들면 앱에서의 하나의 화면을 액티비티라고 말할 수 있죠. 그렇다면 하나의 앱은 여러가지 

액티비티를 가질 수 있답니다.

이메일 앱이라면 이메일 목록을 표시하는 화면(액티비티), 이메일을 작성하는 화면(액티비티)이 

액티비티가 될 수 있어요.

이런 액티비티가 모여서 하나의 앱이 되는 거죠. ^^

그렇다면 액티비티 스타터는 액티비티를 시작해 주는 요소라고 이해하면 좀 더 쉬워지겠죠.

앱에서 구글 맵과 연결시키기

앱 인벤터2에서 구글 맵(지도)과 연결시키기 위해서는 액티비티 스타터를 이용합니다.

그리고 연결하고자 하는 서비스에 따라 속성값을 설정해 주어야 합니다.

구글 맵 서비스와 연결하기 위해 사용되는 속성값은 아래와 같습니다.

동작(Action) : android.intent.action.VIEW

액티비티 클래스(ActivityClass) : com.google.android.maps.MapsActivity

액티비티 패키지(ActivityPackage) : com.google.android.apps.maps

디자이너 화면에서 설정이 가능합니다.

여기서 입력 시에 오타가 발생하면 제대로 동작을 하지 않을 수 있습니다. 

대소문자 구분해서 잘 입력해 주세요.

준비작업

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

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

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

실습하기

다음과 같은 단계로 실습이 이루어집니다.

(1) 디자이너 화면에서 액티비티 스타터 , 버튼, 텍스트을 뷰어로 가져옵니다.

(2) 블록 화면에서 뷰어로 블록을 가져오고 결합합니다.

(3) 실제로 실행을 합니다..

디자이너 화면

① 버튼 : 선택하면 구글지도가 연결

속성변경 : 텍스트(“동영상보기”)

② 텍스트박스 : 구글지도에서 검색하고 싶은 지점을 검색.

③ 액티비티 스타터1 : 다른 프로그램을 불러오는 기능을 갖는 구성요소

준비작업

구글 지도 연결을 위한 액티비티 스타터 속성 설정

동작(Action) : android.intent.action.VIEW

액티비티 클래스(ActivityClass) : com.google.android.maps.MapsActivity

액티비티 패키지(ActivityPackage) : com.google.android.apps.maps

블록작업

블록을 가져옵니다.

같은 번호가 같은 쌍입니다.

1번은 1번에서 마우스를 선택해서 가져올 수 있습니다. 

나머지도 동일하게 해당 번호에서 블록을 뷰어로 가져오면 됩니다.

# 블록을 결합시킵니다.

(1) 합치가 블록을 이용하면 두 문자열을 연결시킬 수 있어요.

결과적으로 만약 텍스트 상자에 ‘서울’을 입력하면

‘geo:0,0?q=서울’ 이 됩니다. 구글 지도에서 서울이 검색되게 되죠.

(2) 액티비티_스타터1.데이터 URI를 지정하므로 구글 지도의 위치를 지정할 수 있습니다.

‘geo:0,0?q=서울’ or 다음과 같이 입력이 가능합니다.

http://maps.google.com/?q=’서울’

‘geo:0,0?q=’의 문자열이 의미하는 바는 

구글 지도에서 q= 이후에 입력되는 위치를 검색해 보이라는 뜻입니다.

샌프란시스코를 검색하고 싶다면

geo를 이용하면 위도, 경도의 값을 아래와 같이 설정해 주면 됩니다.

geo:37.7749,-122.4194

그리고 만약 Zoom 확대 기능을 넣고 싶다면 값을 다음과 같이 변경하면 됩니다.

z=숫자의 형태로 들어갑니다. 

geo:37.7749,-122.4194?z=23

어느정도 이해가 되셨으리라 믿고, 결과화면으로 넘어가도록 하겠습니다. 

스마트폰과 연결하여 결과를 확인합니다.

(1) 연결되면 위와 같은 실행화면이 보입니다.

(2) 입력란을 선택하고, 폰의 키보드를 이용하여 찾고 싶은 위치를 입력합니다.

     그리고 구글지도로 보기 버튼을 마우스로 선택합니다.

(3) 그러면 액티비티_스타터 구성요소의 기능에 따라구글 지도에서 검색된 위치가 

     새로운 화면으로 보여집니다.

참고

https://developer.android.com/guide/components/activities.html?hl=ko

자 그럼 오늘 하루도 수고하셨습니다. 파이팅!

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

[앱 인벤터2] 기본(12)_Youtube동영상 연결_액티비티스타터(Activity Starter)

여러분 내가 만든 앱에서 Youtube 동영상을 시청할 수 있도록 연결할 수 없을까요?

이번시간에 이를 가능하게 하는 요소에 대해 학습해 보도록 하겠습니다.

바로 액티비티 스타터입니다.

또 구글 지도도 액티비티 스타터를 이용해서 사용할 수 있고, 기타 앱도 불러올 수가 있어요.

학습목표

(1) 예제를 통해 액티비티 스타터(Activity Starter)에 대해 이해한다.

학습내용

(1) Youtube의 주소로 연결하여 동영상 시청하기.

기본 다지기

액티비티 스타터(Activity Starter)란?

간단히 말하면 여러분이 작성한 앱에서 다른 앱을 시작할 수 있도록 해 주는 요소입니다.

다음과 같은 기능을 가지고 있어요.

(가) 카메라 시작하기

(나) 웹 검색 시작하기

(다) 웹 페이지 열기

(라) 위치를 위한 지도를 보여주기

(마) 연락처 연결하기

(바) 유튜브 비디오 연결하기

그리고 위의 기능 이외에 다른 앱을 또한 자신의 앱에서도 호출할 수가 있답니다.

이번 시간에 배워볼 Youtube 비디오 재생하기를 위한 컴포넌트(요소)와 블록을 살펴보도록 하겠습니다.

사용할 컴포넌트

사용할 블록

① 지정하기 액티비티_스타터1.동작 : android.intent.action.VIEW의 값을 지정

② 지정하기 액티비티_스타터1.데이터URI : URI 를 지정합니다. 여기서는 Youtube 비디오 주소 지정

③ 호출 액티비티_스타터1.액티비티 시작 : 지정된 내용으로 액티비티 스타터를 실행

준비작업

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

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

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

실습하기

다음과 같은 단계로 실습이 이루어집니다.

(1) 디자이너 화면에서 액티비티 스타터 요소와 버튼을 뷰어로 가져옵니다.

(2) Youtube에서 원하는 비디오의 링크 주소를 복사합니다.

(3) 블록 화면에서 뷰어로 블록을 가져오고 결합합니다.

(4) 실제로 실행을 합니다..

디자이너 화면

준비작업

유튜브 동영상을 연결하기 위해 동영상 주소 얻기

액티비티 스타터에서 Youtube 동영상 링크를 가져오기 위해서는 다음과 같은 단계를 걸쳐 해당 주소를 가져올 수 있습니다.

구글 또는 네이버에서 유튜브 동영상 사이트에 접속하기 위해 ‘유튜브’라는 단어로 검색합니다.

직접 URL주소를 입력하여 접속할 수도 있습니다.

그리고 원하는 동영상을 검색한 후, 검색이 되면 내가 연결하고자 하는 동영상 제목 위에서 마우스

오른쪽 버튼을 누른 후, 링크 주소 복사를 선택합니다.

그러면 이 동영상의 주소가 복사가 됩니다.

액티비티 스타터1.동작 : android.intent.action.VIEW 를 지정합니다.

액티비티 스타터1.데이터 URI : 위에서 얻은 Youtube 동영상 주소를 지정합니다.

호출 액티비스 스타터1.액티비티 시작 : 위의 지정된 내용으로 액티비티 스타터를 시작합니다.

스마트폰과 연결하여 결과를 확인합니다.

실행을 하면 버튼이 하나 보입니다. 여기서 동영상 보기 버튼을 선택하면,

Youtube 동영상을 연결할 프로그램을 선택할 수 있습니다. 여기서는 Chrome를 선택했습니다.

원하는 것을 선택하면 됩니다.

이후, 내가 지정했던 동영상이 보여지게 됩니다.

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

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