라즈이노 iOT

【 앱인벤터기초 #07】 앱인벤터 1도 모르고 따라 하기 영상 실습#5 (사진/글자표시/SNS보내기 앱下-완결!)

App-Inventor !

[ 학습 목차 ]  

[지난시간 학습 목차]  -바로가기 클릭-

《응용 예제 #1-1 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 上 편"》

1. 캔버스(Canvas) 컴포넌트를 활용하는 방법을(그리고 지우기 기능) 익힐 수 있다.

2. 수평정렬상자(HorizontalArrangement)를 이용해 버튼 들을 정 렬 할 수 있다.

3. 슬라이더(Slider) 컴포넌트를 활용하여 선의 굵기 값 등을 조절 할 수 있다.

4. 제작앱 확인하기 (에뮬레이터로 확인 및 스마트폰에 설치와 실행 )

4. 버튼을 클릭하여 그리기의 색을 변경 할 수 있다. 

[ 이번시간 학습 목차 ]

《응용 예제 #1-2 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 下 편"》

1. 카메라(Camera) 컴포넌트를 사용하여 폰에서 사진을 찍고, 갤러리에서 찍은 사진을 꺼내어 활용할 수 있다.

2. 사진위에 표시하거나 문자를 입력하여 저장 할 수 있다. 
3. Spinner 컴포넌트를 활용하여 글자(폰트)의 크기를 선택하여 입력할 수 있다.

4. Notifier 컴포넌트를 활용하여 저장할 때의 안내 팝업 버튼을 구성 할 수 있다.

5. MMS 버튼을 구성하여 지인에게 특정표시를 한 사진을 문자메시지와 함께 보낼 수 있다.

6. SNS 버튼을 구성하여 카톡,밴드,페이스북,E메일,구글드라이브 등으로 특정표시를 한 이미지를 전송할 수 있다. 

▶ 선수학습 

( 선수학습이 필요한 경우, 아래 링크를 클릭해서 먼저 보세요 )

【 앱인벤터기초#1】 MIT-구글의 App-인벤터 란? ( App-Inventor !)

【 앱인벤터기초 #02】 앱인벤터 시작하기(설치&셋업) ( App-Inventor !)

【 앱인벤터기초 #03】 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법)

【 앱인벤터기초 #04】 앱인벤터 1도 모르고 따라하기 실습#2(화면이동 예제만들기)

【 앱인벤터기초 #05】 앱인벤터 1도 모르고 따라 하기#3(날짜/시간/체크박스 실습)

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 37분) ]

▶  영상 속 전체 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)

 이번 시간부터는 앱을 하나 만들어 볼 텐데요, 사진을 찍고 그 위에 간단한 표시나 글자를 입력하여 문자나 카톡과 같은 SNS로 지인에게 전송 할 수 있는 앱을 만들어 보겠습니다.

단순히 사진만 보내는 것 보다, 어떤 정보를 표시하면 굉장히 유용할 때가 있어요.

예를 들어, 모임 장소를 찾아오는 친구에게 지도나 캡처한 사진을 보내 줄 때 그냥, 사진만 보내는 것 보다, 사진위에 표시하거나 필요한 안내 문자를 입력 한 후 보내주면 굉장히 편리 하겠죠. 기존에 저장된 갤러리 사진도 되고, 즉석에서 바로 찍어 표시하는 것도 가능한 앱입니다.

이 번 앱 제작 영상에서는 한 번에 완성형으로 가는 것 보다, 앱 인벤터의 주요 기능들을 익힐 수 있도록, 상-하로 2편으로 제작되었습니다.  현재글은 하편 최종 완결편입니다.

최종 앱의 모습은 아래와 같습니다.

【 아래 1편 완성 이후부터 시작합니다.  】

① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.

② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다.  이하 세부적으로 블록별 상세히 설명이 진행됩니다...

③ 캔버스 전체 디자인 참조. 

우선 전체화면을 참고하면서, 지난시간 디자인 완료부분부터 시작하면 됩니다.

그리고 아래와 같은 넌비지어블 컴포넌트(Non visiable Component)가 필요하니 ,  해당 항목들을 찾아서 폰화면위로 드래그해서 놓으면, 폰 화면 바로아래로 추가가 됩니다.

④ 색 바꾸기 영역의 설정

아래에 있는 BLACK, RED, GREEN, BLUE 색버튼에 대해 색 설정을 해주세요~ 

⑤ 사진, 열기, 저장, 지우기, Line SIZE 버튼에 대한 구성 :

대부분 폰트 크기는 15~16으로 하였고, 굵은 폰트의 볼드에 체크 하였어요. 

우선 텍스트칸에, 사진, 열기, 저장과 같은 제목을 써주세요,  하지만 나중에 이부분들은 구글에서 저작권에 문제 없는 이미지로 다운받아 변경하게 됩니다.  그래서 우선, Height와 width는 별다른 설정을 해주지 않아도 됩니다.  나중에 이미지 크기를 조정할 때 이미지에 맞추어 조절해야하기 때문이예요.

⑤ Text Size , 폰트 픽커, 선택컬러, 컬러표시용 레이블에 대한 구성 :

 아래 이미지를 참고해서 구성해주세요. 폰트를 구성해주는 것만 스피너 콤포넌트로 구성하고 나머지는 Lable을 이용하면 됩니다. 

그리고 스피너를 클릭하게 되면 아래처럼 실행이 됩니다. 

⑥ 메시지(Message) 컴포넌트의 구성 :

 아래 메시지 입력창 컴포넌트를 구성해 주세요.  메시지 입력창은 TextBox 컴포넌트로 구성하면 됩니다.

⑦ Send MMS, MMS, Send SNS, SNS 버튼에 대해 구성 :

멀티 문자를 보낼 수 있는 MMS 보내기 버튼과 카톡이나 네이버 밴드, 페이스북 혹은, 이메일이나 구글 드라이브 등으로 특정표시를 한 사진과 함께 멘트를 달아 보낼 수 있는 컴포넌트 구성입니다. 

제목을 Lable 컴포넌트를 이용하면 되구요,  MMS 와 SNS는 버튼 컴포넌트로 하면 됩니다. 

⑧ 앱 버튼 아이콘 이미지 꾸미기 :

 앱 버튼에 넣어줄 이미지를 위해 보통 구글등에서 검색하실 텐데요,  그냥 보이는 사진을 그 대로 사용하기 보다는, 저작권등에도 신경써서 하시는 것이 좋습니다.  camera png 또는 camera icon 등으로 검색한 다음  도구 메뉴를 클릭하면 나타나는 사용권한 메뉴를 눌러보세요.   

그럼 몇가지 메뉴가 뜨는데요,  수정후 재사용가능 또는 재사용 가능 , 비상업적 용도로 재사용 가능 등의 옵션을 체크해서 나타나는 이미지를 사용하시는 걸 추천해 드려요.

 그리고 앱버튼들의 아이콘용으로 사용할 이미지는 배경이 투명한 PNG 이미지를 사용하면 앱 버튼의 모습이 훨씬 깔끔해 집니다.  다만, PNG라고 하더라도 배경이 모두 투명한 건 아니니, 이때는 포토샵과 같은 편집프로그램으로 배경을 투명 처리해 주면 좋습니다.  ^^;

 그래서 아래와 같이 이미지를 업로드하고 높이와 폭을 적절히 이미지 크기를 고려해서 맞추어 주세요.

그리고 Text 항목에 적혀 있는 사진 이라는 글자는 지워 주세요.

 나머지 아이콘에 대해서도 처리한 아래 이미지를 참고하세요.

⑨ 세부 블록 코딩.

위의 코딩 블록을 참고해서 전체 블록코딩을 완성해 주세요.

⑩ 가로보기 기능

- 만약 폰을 가로로 했을 때 앱 화면이 가로로 바뀌길 원한다면,  Screen1을 클릭하고,  Properties 편집창 아래쪽에 보면  ScreenOrientation 이라는 항목이 있어요, 그 부분에 옵션을 Sensor로 바꾸어 놓으면, 폰에 있는 자이로 센서에 의해 폰이 가로로 기울어 질때 센서에 반응해서 앱로 가로로 바뀌게 해줍니다.

 그럼, 이상으로 "사진에 특정표시하고 MMS, SNS 등으로 보낼 수 있는 앱" 만들기에 대해 설명을 드렸습니다. 

위에 첨부한 유튜브 영상과 함께 보면 훨씬 쉽게 따라하기 쉬울 듯 합니다. 

그럼,  앱인벤터로 , 재미있고 유용한 앱 제작 시간 되세요~

감사합니다~  ^^

#라이즈노IoT 구독을 하시면 새글이 업로드 될 때 마다 바로 받아 보실 수 있으세요~ 

많은 구독 부탁드려요~  ^^; 

【 앱인벤터기초 #06】 앱인벤터 1도 모르고 따라 하기 영상 실습#4 (사진/글자표시/SNS보내기 앱上)

App-Inventor !

[ 학습 목차 ]  

《응용 예제 #1-1 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 上 편"》

1. 캔버스(Canvas) 컴포넌트를 활용하는 방법을(그리고 지우기 기능) 익힐 수 있다.

2. 수평정렬상자(HorizontalArrangement)를 이용해 버튼 들을 정렬 할 수 있다.

3. 슬라이더(Slider) 컴포넌트를 활용하여 선의 굵기 값 등을 조절 할 수 있다.

4. 제작앱 확인하기 (에뮬레이터로 확인 및 스마트폰에 설치와 실행 )

4. 버튼을 클릭하여 그리기의 색을 변경 할 수 있다. 

[ 다음시간 학습 목차 ]

《응용 예제 #1-2 :  "예제3 : 사진 또는 캡쳐 이미지 위에 표시를 하거나 글자를 입력한 후 SNS로 보낼 수 있는 앱 제작 : 下 편"》

1. 카메라(Camera) 컴포넌트를 사용하여 폰에서 사진을 찍고, 갤러리에서 찍은 사진을 꺼내어 활용할 수 있다.

2. 사진위에 표시하거나 문자를 입력하여 저장 할 수 있다. 
3. Spinner 컴포넌트를 활용하여 글자(폰트)의 크기를 선택하여 입력할 수 있다.

4. Notifier 컴포넌트를 활용하여 저장할 때의 안내 팝업 버튼을 구성 할 수 있다.

5. MMS 버튼을 구성하여 지인에게 특정표시를 한 사진을 문자메시지와 함께 보낼 수 있다.

6. SNS 버튼을 구성하여 카톡,밴드,페이스북,E메일,구글드라이브 등으로 특정표시를 한 이미지를 전송할 수 있다. 

▶ 선수학습 

( 선수학습이 필요한 경우, 아래 링크를 클릭해서 먼저 보세요 )

【 앱인벤터기초#1】 MIT-구글의 App-인벤터 란? ( App-Inventor !)

【 앱인벤터기초 #02】 앱인벤터 시작하기(설치&셋업) ( App-Inventor !)

【 앱인벤터기초 #03】 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법)

【 앱인벤터기초 #04】 앱인벤터 1도 모르고 따라하기 실습#2(화면이동 예제만들기)

【 앱인벤터기초 #05】 앱인벤터 1도 모르고 따라 하기#3(날짜/시간/체크박스 실습)

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 19분) ]

▶  영상 속 전체 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)

이번 시간부터는 앱을 하나 만들어 볼 텐데요, 사진을 찍고 그 위에 간단한 표시나 글자를 입력하여 문자나 카톡과 같은 SNS로 지인에게 전송 할 수 있는 앱을 만들어 보겠습니다.

단순히 사진만 보내는 것 보다, 어떤 정보를 표시하면 굉장히 유용할 때가 있어요.

예를 들어, 모임 장소를 찾아오는 친구에게 지도나 캡처한 사진을 보내 줄 때 그냥, 사진만 보내는 것 보다, 사진위에 표시하거나 필요한 안내 문자를 입력 한 후 보내주면 굉장히 편리 하겠죠. 기존에 저장된 갤러리 사진도 되고, 즉석에서 바로 찍어 표시하는 것도 가능한 앱입니다.

이 번 앱 제작 영상에서는 한 번에 완성형으로 가는 것 보다, 앱 인벤터의 주요 기능들을 익힐 수 있도록, 3회로 풀어서 올려 드리려고 합니다.

최종 앱의 모습은 아래와 같습니다.

1회차 에서는 캔버스 컴포넌트의 활용과, 버튼을 이용하여 색을 변경하고 캔버스에 그릴 수 있는 기능에 대해 진행됩니다. 

【 1회차 최종 완성본 】

① 컴포넌트 구성 : 아래 이미지를 참고하여 전체 컴포넌트를 구성해주세요.

② 전체 블록 코딩 : 아래는 블록 코딩의 전체 이미지 입니다.  이하 세부적으로 블록별 상세히 설명이 진행됩니다..

③ 캔버스1(Canvas1) 의 배치와 설정(properties)

화면 위쪽 영역에 이미지를 올려놓고 그리기 할 수 있는 캔버스 컴포넌트를 올려보겠습니다.

캔버스 컴포넌트는 Drawing and animation 항목에 있습니다.

캔버스 컴포넌트를 폰 화면 속으로 이렇게 끌어다 놓으면 됩니다.

그리고 캔버스 영역을 정할 텐데요, 높이는 250 Pixel로 하고 가로 크기는 화면에 최대로 차도로고 Fill parent로 하겠습니다.

④ 수평정렬상자의 설정 (HorizontalArrangement )

그림을 그려줄 여러 색의 버튼들을 배치해야 하는데요,

버튼을 그냥 놓게 되면 가로로 가지런히 배치가 되지 않습니다.

이럴 때는 Layout 메뉴에 있는 수평정렬 상자를 이용하면 됩니다.

그리고 이 수평정렬 상자가 가로로는 꽉 채우도록 Fill parent로 하지만, 높이는 버튼 크기에 따라 자동으로 맞추어 지도록 Automatic 상태 그대로 둡니다.

⑤ 색상 버튼의 구성 :

버튼의 구성은 이렇게 4개로 해보겠습니다.

유저 인터페이스 메뉴로 가서 버튼 컴포넌트를 끌어다 놓습니다.

그리고 텍스트 항목에 BLACK 이라고 입력합니다.

Font Bold에 체크 하고, Font size는 16으로 합니다.

Red, Green, Blue, 버튼에 대해서도 같은 방법으로 작업해줍니다.

》 그리고 버튼의 크기를 정해보겠습니다.

높이는 40 픽셀로 하고, 폭은 70픽셀로 합니다.

만약에 앱화면에서 글자가 모두 보이지 않을 경우 폭을 더 넓혀 주어야 할 수도 있습니다.

다음 버튼들도 같은 방법으로 작업해줍니다.

⑥ 버튼 컴포넌트들의 이름 설정 :

버튼들의 이름을 정해줍니다. Canvas와 같이 하나만 나오는 컴포넌트를 제외하고는 이름을 체계적으로 붙여주는 것이 좋습니다.

제 경우는 버튼의 경우 맨 앞에 button 철자를 줄여서 btn이라 사용하고_ 언더바로 구분한 다음 버튼의 이름을 붙여주는 식으로 합니다. 만약 Lable 컴포넌트를 사용할 때는 약자로 lbl이라고 사용하는 식으로 합니다.

이렇게 하면, 나중에 블록코딩을 할 때 헷갈리지 않게 하여 코딩을 하기가 쉬워집니다.

⑦ 지우기 버튼 설정 :

그린 내용을 지울 수 있는 지우기 버튼과 그리기 선의 굵기를 정해줄 슬라이드 컴포넌트를 배치할 텐데요.

나란히 수평으로 배치될 수 있도록 'Layout' 항목에 있는 수평정렬상자를 먼저 배치합니다.

그리고 폭의 옵션만 'Fill parent‘로 바꾸어 줍니다.

여기에 버튼을 하나 끌어다 놓고, text 항목에 ‘지우기’라는 한글 이름을 넣어줍니다.

그리고 폰트 볼드에 체크하고, 폰트 사이즈를 16으로 하여 키워줍니다.

슬라이더의 설정

⑧ 캔버스 화면에 기본 이미지 불러오기 :

 앱을 실행했을 때 기본 배경으로 쓰일 이미지를 캔버스에 올려 주겠습니다.

캔버스 컴포넌트 클릭하고 우측 속성 메뉴 중 Background Image를 선택합니다. 적당한 이미지를 고른 다음 Upload File을 클릭하여 올려줍니다

만약 이미지를 바꾸고 싶으면, 같은 방법으로 다른 이미지를 선택하여 업로드 하면 이미지를 바꿀 수 있습니다.

이미지 업로드를 하고서 OK 버튼를 클릭하면 아래와 같이 기본배경이미지 설정이 완료 된다.

⑨ 세부 블록 코딩.

- 캔버스의 블록 코딩과 라인굵기 선택을 위한 전역변수(size) 선언

- 색상 선택을 위한 버튼들의 블록 코딩

- 지우기 버튼과 슬라이더 컴포넌트의 블록 코딩

- 블록 코딩에 대한 해설은 영상에서 상세하게 설명하고 있으니, 영상을 참고해 주세요. 

- 그럼 재미있는 앱 제작 시간 되세요~ 감사합니다~

【 앱인벤터기초 #05】 앱인벤터 1도 모르고 따라 하기 영상 실습#3 (날짜/시간/체크박스 실습) 

App-Inventor !

[ 학습 목차 ]  

1. 예제 만들기 #2 :  "예제2 : 체크박스, 날짜-시간 선택메뉴 활용하기"

2. 날짜 선택(DatePicker) 블록을 이용하여 날짜를 선택하고 레이블로 표시하기

3. 시간 선택(TimePicker) 블록을 이용하여 시간을 선택하고 레이블로 표시하기

4. 체크박스(CheckBox) 블록을 이용하여 선택 한 내용 표시하기

5. 제작앱 확인하기 (에뮬레이터로 확인 및 스마트폰에 설치와 실행 )

[ 다음시간 학습 목차 ]

1. 예제 만들기 #3 :  "예제3 : 이미지 선택 출력하기, 이미지 컴포넌트 제어!"

2. 봄/여름/가을/겨울 이미지를 버튼선택으로 화면에 출력하기 

3. 출력이미지 확대 축소하기

▶ 선수학습 

   - 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

   - 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

   - 【앱인벤터 기초#03】 앱인벤터 영상실습#1(메뉴소개) ← 클릭 이동

   - 【앱인벤터 기초#04】 앱인벤터 영상실습#2(화면이동). ← 클릭 이동 

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 21분) ]

https://youtu.be/9Ki9grq4BqQ

▶  영상 속 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

(아래 이미지들을 클릭하면 선명하게 확인 가능 합니다)

① 사전준비 : 에뮬레이터 설치와 구동하기 

②  1번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 영상 참조)

③ 날짜와 시간 모듈(Date Picker & Time Picker) 에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. 

④ 체크박스 모듈(Check Box 1 & 2 ) 에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. 

⑤ 최종 완성형 '코드 블록'

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. 

⑥ 시뮬레이션 확인 및 앱 빌드 후 스마트폰으로 전송

 : 에뮬레이터를 통하여 앱의 제대로 동작하는지 확인 후 아래처럼 앱을 PC로 빌드하여, 연결시킨 스마트폰으로 앱을 복사해 넣기

⑦ 스마트기기에서 앱 실행과 테스트 하기!

 : 스마트폰에서 탐색창과 같은 앱을 통해 다운받은 'xxxx.apk' 앱설치 파일을 눌러 앱을 설치하고 실행시켜 본다.

아래는 앱이 실행되는 모습.

※ 이상으로 날짜 모듈/ 시간모듈 /체크박스 모듈을 활용하는 방법에 대해 설명을 드렸습니다. 궁금한 사항은 댓글로 남겨주세요.  감사합니다.  ("메뉴 사용 설명등 설명하지 않은 부분에 대한 이해는 사전학습 부분의 이전 영상을 참고하시면 도움이 되세요~") .

【 앱인벤터기초 #04】 앱인벤터 1도 모르고 따라 하기실습#2(화면 이동 예제만들기) 

App-Inventor !

[ 학습 목차 ]  

1. 예제 만들기 #1 :  "예제1 : 두 개의 화면을 버튼 클릭하여 이동하기"

2. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

[ 다음시간 학습 목차 ]

1. 예제 만들기 #2 :  "예제2 : 체크박스, 날짜-시간 선택메뉴 활용하기"

2. 날짜 선택(DatePicker) 블록을 이용하여 날짜를 선택하고 레이블로 표시하기

3. 시간 선택(TimePicker) 블록을 이용하여 시간을 선택하고 레이블로 표시하기

4. 체크박스(CheckBox) 블록을 이용하여 선택 표시하기

5. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

▶ 선수학습 

   - 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

   - 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

   - 【앱인벤터 기초#03】 앱인벤터 영상실습#1 (메뉴소개) ← 클릭 이동

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

▶  오늘의 실습 따라하기 영상 보기 

[ 앱 인벤터 강의 영상 (영상시간: 16분) ]

 : 두 개의 화면을 버튼 클릭하여 이동하기

https://youtu.be/E2ujM5T1HdQ

▶  영상 속 내용 요약 

[ ※ 영상 속에는 앱인벤터에 대한 지식이 없어도 바로 따라 하실 수 있도록 상세히 설명 되어 있으니, 꼭 영상을 보시기 바랍니다 ]

① 1번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 참조)

② 1번 화면에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. (영문 메뉴와 한글메뉴 모두 표시하였음)

③ 2번 화면에 대한 '화면구성요소' 만들기

 : 아래와 같은 화면으로 컴포넌트를 구성하고 배치하세요.(세부 옵션 참조)

④ 2번 화면에 대한 '코드 블록'  만들기

 : 아래와 같은 화면으로 코드 블록을 쌓으세요. (영문 메뉴와 한글메뉴 모두 표시하였음)

⑤ QR 코드 스캔하여 테스트 및 앱 설치 파일 다운 받기 

 : AI Companion 메뉴등을 이용하여 작성한 앱을 테스트 할 수 있다.

⑥ 앱을 스마트폰에 설치하고 실행시키기 

 : 아래처럼 스마트 기기에 앱을 다운받아 설치 한 후 실행시켜보자~!  멋지게 동작 할 것이다!

▶  앱인벤트 프로젝트 파일 고대로~ 다운로드 받기!

[ 직접만든 앱이 실행 에러가 나거나, 앱을 바로 확인하고 싶을 때, 아래 프로젝트 파일을 다운받아 여러분의 앱인벤트 프로젝트에서 열기를 하신다면 본 글에서 작업한 프로젝트 그대로 열릴 것입니다 ] 

: 앱인벤터 새프로젝트 화면에서 아래처럼 프로젝트 메뉴에서 다운받은 파일을 삽입해보세요

Projects 》 Import project (.aia) from my computer ...

[ 프로젝트 파일 ]

【 앱인벤터기초 #03】 앱인벤터 따라하기 실습#1(메뉴화면소개 및 사용법) 

App-Inventor !

[ 학습 목차 ]  

1. 앱-인벤터 저작화면 메뉴 설명 ( Design 화면 & Block 코딩화면)

2. 인벤터 상단 메뉴 설명 ( Project / Connect / Build 메뉴)

3. 갤러리(Gallery) 안내 (앱인벤터 유저들의 앱 공유 공간)

4. 앱인벤터 언어설정 모드 변경 소개(영어, 한글, 중국어 모드 등)

[ 다음시간 학습 목차 ]

1. 예제 만들기 :  "예제1 : 두 개의 화면을 버튼 클릭하여 이동하기"

2. 제작앱 확인하기 (스마트폰에 설치 및 실행 또는 에뮬레이터로 확인)

▶ 선수학습 

  ： 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

  ： 【앱인벤터 기초#02】 앱인벤터 시작하기(설치&셋업)   ← 클릭 이동

▶  실습 준비사항 

  1. 안드로이드가 탑재된 스마트기기(스마트폰, 스마트패드 등) :  안드로이드OS 버전 4.2 이상 권장

  2. 웹브라우저가 구동가능한 PC(노트북) : 구동가능 웹(크롬, 파이어폭스, 사파리, 우분투웹), 익스플로러는 실행불가!

  3. 구글 계정 필요

▶  앱 인벤터 메뉴 소개 

[ 앱 인벤터 강의 영상 보기 (영상시간: 10분) ]

 앱인벤터 화면 및 메뉴 구성에 대해 다루고 있습니다.

https://youtu.be/pIKQM9MUNfU

【 앱인벤터기초 #02】 앱인벤터 시작하기(설치&셋업) ( App-Inventor !)

[ 학습 목차 ]

1. 구글계정 만들기

2. 앱인벤터 가입(로그인)하기

3. AI 컴패니언 설치하기 (제작 앱 다운로드)

4. AI 스타터 설치 (에뮬레이터)

5. USB 연결 설정

[ 다음시간 학습 목차 ]

1. 앱-인벤터 저작화면 메뉴 설명 ( Design 화면 & Block 코딩화면)

2. 인벤터 상단 메뉴 설명 ( Project / Connect / Build 메뉴)

3. 갤러리(Gallery) 안내 (앱인벤터 유저들의 앱 공유 공간)

4. 앱인벤터 언어설정 모드 변경 소개(영어, 한글, 중국어 모드 등)

▶ 선수학습 

  ： 【앱인벤터 기초#01】 앱 인벤터란?       ← 클릭 이동

▶ 1. 구글 계정 만들기 

  ：앱인벤터는 구글 계정이 필요하며, 만약 기존의 구글 계정이 있다면 그 계정으로 로그인이 가능하다.

(구글 계정 만들기)

  -  크롬과 같은 웹브라우저를 열고 아래 '구글계정 만들기' 사이트로 이동하여 절차대로 진행한다.

  -  단, "앱 인벤터"는 '인터넷 익스플로러' 웹브라우저를 전혀 지원하지 않으니,  처음부터 구글 '크롬' 웹브라우저를 다운받아 설치후 진행하는 것을 권장한다

  - 아래 계정만들기 링크  https://accounts.google.com/signup/v2/webcreateaccount?flowName=GlifWebSignIn&flowEntry=SignUp

▶ 2. 앱 인벤터 가입(로그인) 하기

  ： 구글 계정으로 아래 앱인벤터 접속사이트로 접속하여 로그인한다.   앱 인벤터는 PC에 따로 프로그램을 설치 할 필요 없이 웹상에서 저작할 수 있게 만들어 졌다. 따라서 인터넷만 연결되어 있다면, 집에서건 회사에서건 카페 노트북에서건 기존 제작하던 프로젝트를 열어 편집을 이어나갈 수 있는 큰 장점이 있다.  물론 PC설치버전과 USB에서 실행할 수 있는 무설치 포터블 버전도 제공한다. 

  [앱 인벤터 접속 사이트 :  http://appinventor.mit.edu/ ]   로그인 창이 뜨면 앞서 가입한 구글 아이디로 로그인한다.

【 제작한 앱을 테스트 하기 위한 3가지 방법! 】
   1. 앱파일('xxx.apk')을 출력하고 폰을 PC와 USB연결이나 QR코드로 xxx.apk파일을 다운받아 직접 APK파일을 설치후 테스트 하는 방법. (파일을 설치하는 게 번거롭지만, 제일 정확하고 확실한 테스트 방법)

   2. 가상 폰 시뮬레이터인 "ai starter"를 통해서 확인하는 방법. (안드로이드 기기가 없어도 테스트 할 수 있지만 스마트폰의 가속도, 기울기, GPS센서 등을 테스트해볼 수 없는 단점이 있다)

   3. 앱 다운로드 및 설치 없이, 앱 편집중인 상태에서도 실시간 연결되어 확인해볼 수 있는 방법으로 2가지가 있다.

       - AI Companion 이용법 :  앱 제작중인 상태에서 WiFi를 통해 실시간으로 스마트폰과 연결되어 테스트가 가능한 방법으로, 편집화면을 수정하면 수정된 내용이 그 즉시, 스마트폰 화면에도 적용되는 장점이 있다. (단, 같은 공유기(WiFi)에 연결되어 있어야 하며, 종종 접속이 끊기는 단점이 있다. 그리고 사전에 애래와 같은 방법으로  AI Companion 앱을 스마트폰에 설치하면 이용할 수 있다)

       - PC와 USB 직접 연결 법 :  역시 실시간 편집과 테스트가 가능한 방법으로 AI Companion 방법보다는 연결이 안정적이다.  단,  스마트폰 설정에서 개발자모드 처리와 스마트폰 제조사별로 PC용 통합 드라이버를 다운받아 설치해야 한다.

▶ 3. AI 컴패니언 설치하기 (① wifi로 연결하여 앱 테스트 하는 방법)  

 → 위 방법중에서 가장 확실하고 편리한 3번째 AI COMPANION 을 이용한 방법을 이용해보자.

 스마트폰에서 플레이스토어에 접속한 후 AI2 companion 을 검색하여 설치한다. 

앱 인벤터 툴에서 앱제작이 완료되면  아래처럼 메뉴에서 AI Companion 메뉴를 클릭 하면 QR 코드창이 뜬다.( 메뉴 : Connect 》 AI Companion )  

그런 다음 스마트폰에 설치한 "MIT AI2 Companion" 앱을 실행시킨다.  

- QR 코드상에 있는 "lzsifj" 를 아래화면처럼 빈칸에 직접입력하고 "connect with code"버튼을 클릭하거나,

 "scan QR code" 버튼으로 위 QR코드를 스캔후 기다리면 된다.(길면 1분 까지도 기다려야 함)

- 아래처럼 QR코드가 스캔된후 스마트폰과 연결되는 과정이 진행된다. 

- 연결이 완료되면 아래처럼 앱이 스마트폰에서 실시간으로 실행되는 것을 볼 수 있다.

(앱이 설치된 것은 아니며, 종종 커넥션이 끈기는 경우가 발생한다)

- 만약 연결 에러가 날경우 아래처럼 Reset Connection을 클릭하고 AI Compainon으로 재연결 시도를 한다.

▶ 4. AI Starter 설치 

  ：AI Starter를 설치하면, 안드로이드 기기가 없어도 제작한 앱을 'AI Starter'라는 에뮬레이터를 통해 PC에서 테스트 해볼 수 있다. 다만, 구동 속도가 느리고, 스마트폰에 들어 있는 GPS, 기울기센서, 가속도센서, 음성인식기능 등을 테스트 할 수 없다. 

 설치경로 : http://appinventor.mit.edu/explore/ai2/windows.html

 설치가 완료되면 바탕화면 혹은 설치된 프로그램 중에 'aiStarter' 라는 실행파일이 보일 것이다. 

이를 실행시킨다.(상황에 따라, 마우스 우클릭 하여 관리자 모드로 실행해야 되는 경우도 있음.)

실행 후 아래 창이 뜨면 OK!

- 에뮬레이터 실행을 위해서는아래 그림처럼 앱 인벤터 메뉴에서 "Emulator"를 클릭 한다.

- 아래 이미지 처럼, 에뮬레이터가 실행되며, #1~#4 와 같은 순서로 작동이 된다.  이 과정에서 에뮬레이터 화면상에 설치 옵션 같은 것이 뜨면 클릭하여 설치해 주어야 한다. (다소 시간이 걸린다)

- 설치된 후 아래처럼 앱 인벤터 메뉴에서 'Emulator'를 클릭하면 에뮬레이터 상에서 작성한 앱이 구현되는 것을 볼 수 있다.

▶ 5. USB 연결

- 스마트폰을 USB로 PC와 연결하면, AI Companion처럼 실시간으로 앱을 테스트 해볼 수 있다.  다만, 처음에 연결을 위해 처음에 조금 복잡한 과정이 필요하다.  USB 연결의 장점은 테스트를 위해 많으면 수십, 수백번에 이르는 번거로운 앱 설치 과정을 생략할 수 있으며,  WiFi를 이용한 접속방법 보다 훨씬 안정적으로 실시간 테스트가 가능하다는 장점이 있다.    (아래 셋업 상의 메뉴는 삼성 갤럭시 노트2를 예시로 설명)

 ① USB 연결제어를 위해 스마트폰을 개발자 모드로 변경 :

   - 스마트폰 설정 메뉴 》 개발자 옵션 》 "USB 디버깅" 모드  V체크(ON)

   - 스마트폰 설정 메뉴 》 개발자 옵션 》 "USB 디버깅 권한 승인"  V체크(ON)

   - 스마트폰 설정 메뉴 》 디바이스 정보 》 빌드 번호를 7회 이상 터치한다. 

 ② 모바일 통합 USB 드라이버 실치 :  (삼성 갤러시 예시)

http://local.sec.samsung.com/comLocal/support/down/kies_main.do?kind=usb

위 링크 주소를 통해 드라이버를 다운받아 설치한다.

 ③ 위 프로그램이 설치되고 USB를 스마트폰과 연결하면 "..... 연결 허용하시겠습니까?"  메시지가 뜨면 항상연결 체크박스에 체크하고 허용 버튼을 터치한다.

【 앱인벤터기초 #01】 MIT-구글의 App-인벤터란? ( App-Inventor !)

 앱인벤터는 그 유명한 MIT(메사추세츠 공과대학교)와 구글(google)이 협력하여 개발한 App 저작도구입니다.

[ App inventor 특징 ]

《 앱 인벤터는 코딩을 잘 몰라도 쉽게 스마트폰 앱을 만들 수 있게 해 준다 》 

  ： 일반적으로 안드로이드 앱을 만들기 위해서는 자바나 코틀린 프로그래밍 언어를 익혀 Android studio 툴 상에서 복잡한 코딩을 통해 구현하게 됩니다. Android studio 툴 익히는 것도 만만치 않죠. (아이폰용 IOS 앱은 오브젝트-C 나 스위프트 언어를 익혀 X-Code 툴에서 구현함-이건 더 어려움)

  그래서 프로그래밍 비전공자들에겐 쉽게 엄두를 내지 못합니다. 하지만, 앱 인벤터를 이용하면, 전공의 구분 없이 누구나 쉽게 시작해서 단기간에 간단한 건 몇 분도 안되어 뚝딱 앱을 만들어 내는 놀라움을 선사합니다.

  바로 스크래치를 개발했던 MIT의 블록 코딩 기술을 적용했기 때문입니다. 스크래치는 저학년 초등생들도 프로그래밍의 개념을 배우고 쉽게 프로그램을 짤 수 있게 한 툴로서, 마치 아이들이 블록을 조립하듯 쉽게 코드를 구성해 줍니다.   

 스크래치와 아두이노 에뮬레이터를 연결하면 아두이노 제어도 가능합니다.  물론 앱인벤터도 가능합니다 - 이는 앱 인벤터 응용 카테고리에서 다룰 예정입니다.

《 한글 메뉴를 지원합니다. 》

 코딩을 자동으로 해주는 툴이라도 툴 자체가 영문이면 배울 때 어려움을 느낄 수 있습니다.
하지만 이런 툴의 메뉴를 영어가 아닌 한국어로 바로 설정할 수 있어 접근성을 더욱 높였습니다.

(개인적으로는, 영문 메뉴가 익숙하지 않더라도 처음부터 영어 메뉴 모드로 익히시는 것을 추천합니다. 포토샵 등과 같은 툴도 처음엔 한글 버전으로 배웠다가 직장 등에서 영문 버전 사용에 당황함을 느꼈다는 사례도 있듯이, 만국 능통어로 제작된 영어로 익혀두면, 추후에 인벤터 관련하여 영어 메뉴로 된 학습자료나 최신 자료를 접할 때 바로 습득할 수 있는 장점이 있습니다. )

《 앱 인벤터로 제작 가능한 구체적인 예시 》 

 앱 인벤터로 충분히 제작 가능한 기능 앱 유형은 :

 사진 보기, 웹페이지 뷰, 음성인식과 출력, 음악 재생, 동영상 재생, 음성 변환, 번역, 사진&동영상 촬영

문자 메시지, 전화, 공유하기 기능 앱, 데이터 읽기 및 저장 기능 앱, 블루투스 통신 활용 앱, 

그림 그리기, 애니메이션 만들기, 타이머 기능 이용하기, 자이로 센서 활용 앱, 바코드&QR 코드 스캔, 위치센서 활용앱, 방향센서 활용앱, NFC 기능 활용, 가속도 센서, GPS, 근접센서 등을 활용한 앱과 블루투스, WIFI 통신을 이용하면 아두이노/라즈베리파이 등을 제어할 수 있습니다.  

《 안드로이드 폰&태블릿 없어도 에뮬레이터 활용 제작 가능 》

 앱 인벤터로 앱을 제작하기 위해서는 후 테스트

《 앱 인벤터 실행 저작 방식 》

 특별한 프로그램의 설치가 필요 없다. 기존 웹브라우저를 통하여 앱인벤터 사이트에 접속&회원가입&로그인 후 웹상에서 제작 가능! 
(단, 인터넷 익스플로러에서는 실행되지 않고, 아래 구글의 크롬, 애플의 사파리, 모질라의 파이어폭스에서 실행 가능)

 인터넷이 연결된 웹상에서만 가능한 것은 아니며 오프라인 버전(설치 및 무설치버전)을 다운 받아 설치하여 앱을 만들 수도 있다.  다만 프로그램을 실행하고 처음 구글 아이디로 로그인 과정에서는 인터넷 연결이 필요하다. 

《 앱 인벤터 구동 조건(시스템 환경)  》

[PC]  

  - Windows :  Windows XP, Windows Vista, Windows 7 이상 모두 가능

  - Macintosh(Intel CPU) : Mac OS X 10.5, 10.6 이상 모두 가능

  - GNU/Linux :  Ubuntu 8 이상, Debian 5 이상 모두 가능  (일부 기능은 조건 필요)

[Browser]

 - Google Chrome 4.0 (구글 크롬 4.0) 이상 모두 가능

 - Apple Safari 5.0 (애플 사파리 5.0) 이상 모두 가능

 - Mozilla Firefox 3.6 (모질라 파이어폭스 3.6) 이상 모두 가능  (일부 기능은 조건 필요)

[Android 폰&태블릿]

 - Android Operating System 2.3 (Gingerbread) 이상 모두 가능  : 안드로이드 OS 2.3 진저브레드 버전 이상은 모두 가능

《 앱 인벤터 제작 과정-프로세스  》

 1.  웹브라우저를 선택하여 열기(구글 크롬 예시)

 2.  구글의 크롬 브라우저를 다운로드하여 설치한다. 

 3.  구글(www.google.co.kr)에 접속하여 구글 계정을 만들고 로그인한다.(구글계정으로만 앱-인벤터 실행가능)

 4.  MIT 앱-인벤터 사이트에 접속한다.  http://appinventor.mit.edu   접속 후  Create apps!  를 클릭!

 5.  구글 아이디로 로그인(가입) 후 허용 버튼 클릭!  (동의 절차 거침)

 6.  앱 제작 가능한 화면이 열리며 앱 제작 시작!   ( 언제든 인벤터 사이트에 접속 후  Create apps!  를 클릭! 하면 제작 화면으로 이동)

 7.  앱 블록(코딩) 작업 후 에뮬레이터에서 확인하거나,  App 실행파일(.Apk)을 만들어 폰이나 태블릿으로 설치 후 구동 확인!

 --------------- 앱 정식 등록 및 출시 -----------------

 8. 구글(플레이 스토어)에 개발자 등록하기(등록비25$)  : https://play.google.com/apps/publish/signup

 9. 구글 플레이 스토어에 앱 등록하기

    - ① 앱 버전 APK파일 등록하기  ② 스토어 등록정보 입력하기  ③ 콘텐츠 등급 선택하기  ④ 가격 및 배포 설정하기

 여러분!  이렇게 쉽게 원하는 앱을 제작할 수 있으며 게다가 정식으로 앱스토어에 등록하여 수익도 낼 수 있으니,  

빨리 배우지 않을 수 없겠죠?  ^^

《 라즈이노에서는 앞으로 다양한 예제를 통해 앱 제작 학습에 도움이 될 수 있는 자료를 올릴 예정이며, 앱을 정식 등록하는 절차까지 내용을 제작해서 올릴 예정이니 많은 기대와 방문 부탁드립니다 ^^ 》