앱개발로배우는 SW with 앱인벤터 (AppInventor) 고려대학교 SW 교육봉사단 고려대학교정보 컴퓨팅교육연구실 (InC Lab) 마지막갱신일 : 2016 년 7 월 30 일 이저작물은크리에이티브커먼즈저작자표시 - 비영리 4.0 국제라이선스에따라이용할수있습니다. 본교재는미래창조과학부및정보통신기술진흥센터의실전적 SW 교육사업 (SW 중심대학 ) 의결과로수행되었음. (R-20150902-002161)
목차 1. 앱인벤터 1.1 앱인벤터란? 1.2 앱인벤터지원기능 1.3 디자이너화면 1.4 블록조합화면 6. 앱등록하기 7. 참고자료 8. 별첨 2. 앱인벤터사용하기 2.1 크롬설치 2.2 구글가입 2.3 에뮬레이터설치 2.4 에뮬레이터실행 3. 앱인벤터시작하기 3.1 앱만들기 3.2 한글설정하기 3.3 디자이너화면구성하기 3.4 블록화면구성하기 3.5 에뮬레이터실행하기 3.6 결과확인하기 4. 앱개발절차 4.1 앱구상하기 4.2 설계하기 4.3 개발하기 4.4 테스트하기 4.5 개발완료 5. 다양한앱개발하기 5.1 입력텍스트발음하기 5.2 구글지도와길찾기 5.3 아마존에서도서찾기 5.4 공공데이터사용하기 학교 : 학년 : 반 : 이름 : - 1 -
1. 앱인벤터 1.1 앱인벤터란? Ÿ 구글과 MIT가함께만든앱인벤터는블록을활용해안드로이드스마트폰앱을만들수있는도구입니다. Ÿ 웹브라우저를통해실행되는앱인벤터도구들을이용해프로그래밍에대한지식이없이도쉽게앱을만들수있도록도와줍니다. Ÿ 블록프로그래밍기법입니다. Ÿ 스마트폰의화면을디자인하여원하는앱을만들수있습니다. 1.2 앱인벤터지원기능 Ÿ 구글지도와연동하여사용할수있습니다. Ÿ 안드로이드스마트폰의진동을이용할수있습니다. Ÿ 전화번호부 ( 연락처 ), 메시지등을이용하여연락을할수있습니다. Ÿ 카메라를제어할수있습니다. Ÿ 스피커를사용할수있습니다. Ÿ 스마트폰에내장된 GPS( 위치센서 ), 방향센서, 가속도센서등다양한센서를활용할수있습니다. - 2 -
1.3 디자이너화면 Ÿ 디자이너화면은우리가볼스마트폰화면을바로보이도록디자인할수있습니다. Ÿ 디자이너화면의구성은다음과같습니다. 이름 1. 사용자 인터페이스 2. 뷰어 3. 컴포넌트 내용 앱을만들때필요한컴포넌트모음 ( 버튼, 센서등 ) 만드는앱의화면으로실제앱실행시핸드폰에나타나는화면을의미하 며사용자인터페이스의컴포넌트들의위치를나타냄앱을만들때사용한컴포넌트의모음으로컴포넌트간의구조를볼수 있으며, 컴포넌트의이름을바꾸거나컴포넌트를삭제가능 4. 미디어 이미지, 음악, 동영상, 문서등만드는앱에필요한파일을앱인벤터서버에업로드 5. 속성 사용한각컴포넌트들의크기, 색상, 정렬상태등컴포넌트속성설정 - 3 -
1.4 블록조합화면 Ÿ 블록조합화면은명령어블록을조립하여사용자가요청하는행동에반응하도록작업하는 공간입니다. Ÿ 블록조합화면의구성은다음과같습니다. 이름 내용 1. 블록 프로젝트에서사용가능한컴포넌트목록컴포넌트클릭시, 오른쪽에사용가능한블록목록이나타남 2. 뷰어 블록에서선정한블록들을조립하기위한공간 - 4 -
2. 앱인벤터사용하기 2.1 크롬설치 Ÿ 구글 (http://google.com/) 에접속합니다. Ÿ Chrome 다운로드하기 를클릭합니다. Ÿ 앱인벤터는 Internet Explore 에서실행되지않습니다. 2.2 구글가입 Ÿ 구글회원가입 (http://accounts.google.com/) 을합니다. - 5 -
2.3 에뮬레이터설치 Ÿ 구글로그인후앱인벤터홈페이지 (http://appinventor.mit.edu/) 에접속합니다. Ÿ 앱인벤터에서만든앱을안드로이드핸드폰이아닌컴퓨터에서실행할수있는가상실행기 ( 에뮬레이터 ) 를다운로드받아야합니다. Ÿ Download the installer 설치를진행합니다. 2.4 에뮬레이터실행 Ÿ 다운로드완료된파일의설치까지진행합니다. 설치후바탕화면에생성된 aistarter 아이콘을실행합니다. Ÿ 다음과같은화면이나타나면정상적으로설치가완료된것입니다. - 6 -
3. 앱인벤터시작하기 3.1 앱만들기 Ÿ 앱인벤터첫화면에서다음과같이 Create apps!( 앱만들기 ) 버튼을클릭합니다. Ÿ 앱인벤터화면좌측상단에 새프로젝트시작하기, 를클릭합니다. Ÿ 새프로젝트이름을입력합니다. 3.2 한글설정 Ÿ 우측상단에 English 버튼을눌러한국어로언어설정을합니다. - 7 -
3.3 디자이너화면구성 Ÿ 뷰어화면에다음과같이컴포넌트를배치합니다. Ÿ 배치한컴포넌트를눌러화면우측의속성을변경합니다. Ÿ 체크 _ 상자 1 의속성에서글꼴크기를변경합니다. Ÿ 텍스트는체크상자로변경합니다. - 8 -
3.4 블록화면구성 Ÿ 우측상단의 블록 을클릭하여블록을조립하여프로그래밍을합니다. Ÿ 다음과같이블록을조립해보세요. 3.5 애뮬레이터실행하기 Ÿ 를실행합니다. Ÿ 연결 - 에뮬레이터 를눌러가상실행기를실행해봅니다. - 9 -
3.6 결과확인하기 Ÿ 에뮬레이터가실행완료될때까지기다리면앱이자동으로실행됩니다. - 10 -
4. 앱개발절차 4.1 구상하기 Ÿ 무엇을만들고자하는지시나리오를작성합니다. Ÿ 개발하기위한필요한조건을고려하여능력을체계적으로정리합니다. 4.2 설계하기 Ÿ 구상된사항을기반으로콤포넌트의구체적인기능및역할을작성합니다. - 11 -
4.3 개발하기 Ÿ 설계사항에따라 GUI 를구성하고, 코드를작성합니다. 4.4 테스트하기 Ÿ 개발된모든요소를다양한방법으로작동시켜정상동작유무를확인합니다. Ÿ 버그발생시, 개발단계로돌아가다시진행합니다. - 12 -
4.5 개발완료 Ÿ 나만의앱개발완료. Ÿ 앱스토어에개발자등록하여앱을출시할수있습니다. - 13 -
5. 다양한앱개발하기 5.1 입력테스트발음하기 Ÿ 뷰어에아래와같이컴포넌트들을배치합니다. Ÿ 우측상단의 블록 을클릭한후아래와같이블록을조립하여프로그래밍합니다. Ÿ 에뮬레이터나안드로이드핸드폰에서실행해봅니다. - 14 -
5.2 구글지도와길찾기 Ÿ 뷰어에아래와같이컴포넌트들을배치합니다. Ÿ 우측상단의 블록 을클릭한후아래와같이블록을조립하여프로그래밍합니다. Ÿ 데이터 URI 설정값에목적지상자에입력한장소를추가하여구글맵어플리케이션을실행하여검색을합니다. - 15 -
Ÿ 구글지도사이트를이용해서출발지에서목적지까지길을찾는 URL 형식은 http://maps.google.com/maps?saddr=, 출발지, &daddr=, 목적지를연결한것입니다. Ÿ 출발지는현재위치이므로위치센서. 현재주소를이용하면되고목적지는목적지상자에입력한장소이므로목적지상자텍스트를이용하면됩니다. Ÿ 에뮬레이터나안드로이드핸드폰에서실행해봅니다. Ÿ 완성된블록을분석해봅시다. - 16 -
5.3 아마존에서도서찾기 Ÿ 뷰어에아래와같이컴포넌트들을배치합니다. Ÿ TinyWebDB1 의 URL 을 http://aiamazonapi2.appspot.com/ 로설정합니다. Ÿ 우측상단의 블록 을클릭한후아래와같이블록을조립하여프로그래밍합니다. Ÿ 결과를담을변수 title, cost 및리스트 resultlist 선언합니다. Ÿ 버튼클릭시 TinyWebDB 를호출합니다. - 17 -
Ÿ 제목과가격을 TinyWebDB 에서가져와텍스트상자에셋팅합니다. Ÿ 에뮬레이터나안드로이드핸드폰에서실행해봅니다. Ÿ 완성된블록을분석해봅시다. - 18 -
5.4 공공데이터사용하기 Ÿ 뷰어에아래와같이컴포넌트들을배치합니다. Ÿ 우측상단의 블록 을클릭한후아래와같이블록을조립하여프로그래밍합니다. Ÿ 전역변수로 xml 을통해정보를가져올빈리스트를추가합니다.. Ÿ 웹에 URL 을지정합니다. Ÿ 기상청 URL 은 http://www.kma.go.kr/wid/querydfsrss.jsp?zone=4277035000-19 -
Ÿ xmlparser 를정의하고, 원하는 xml 의태그를호출합니다. Ÿ 에뮬레이터나안드로이드핸드폰에서실행해봅니다. - 20 -
6. 앱스토어에앱등록하기 Ÿ 개발자등록을합니다. Ÿ 준비물은컴파일된어플 (APK) 과 25 달러신용카드결제입니다. Ÿ URL 은 https://play.google.com/apps/publish/ 입니다. Ÿ 새어플리케이션을추가합니다. Ÿ APK 를업로드합니다. - 21 -
Ÿ 프로덕션으로 APK 업로드를합니다. Ÿ 스토어목록에들어가빈칸작성을합니다. Ÿ 왼쪽세가지영역에초록색체크표시가되면업로드가완료됩니다. Ÿ 이앱을출시를클릭합니다. - 22 -
7. 참고자료 Ÿ Ÿ Ÿ Ÿ Ÿ Ÿ Ÿ Ÿ 앱인벤터공식사이트 http://appinventor.mit.edu 앱인벤터교육사이트 http://appinventor.org 앱인벤터교재교육사이트 http://cafe.naver.com/scratchprogramming 앱인벤터 2 교재교육사이트 http://appinventor.chonbuk.ac.kr 앱인벤터 2 교육사이트 http://www.imagnity.com/tutorial-index/ 앱인벤터 2 교육사이트2 http://m.blog.naver.com/acttoz/166585449 나만의앱만들기! 구글과 MIT 기술로배우는컴퓨팅사고력앱인벤터, 한빛미디어앱인벤터2 구글과 MIT 앱인벤터개발팀이안내하는안드로이드프로그래밍, 한빛아카데미 앱개발과앱인벤터관련하여궁금한사항등은 sw_camp@inc.korea.ac.kr 로문의하시면답변해드립니다. 감사합니다. 고려대학교 SW 교육봉사단 - 23 -
8. 별첨 컴포넌트이름속성비고 - 24 -
컴포넌트이름속성비고 - 25 -
컴포넌트이름속성비고 - 26 -
컴포넌트이름속성비고 - 27 -
컴포넌트이름속성비고 - 28 -
컴포넌트이름속성비고 - 29 -
컴포넌트이름속성비고 - 30 -