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

【 앱인벤터기초 #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 구독을 하시면 새글이 업로드 될 때 마다 바로 받아 보실 수 있으세요~ 

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