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

【 앱인벤터기초 #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) 선언

 

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

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

 

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

 

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