<BEDBC0CEBAA5C5CD2E687770>

Size: px

Start display at page:

Download "<BEDBC0CEBAA5C5CD2E687770>"

시영 장
5 years ago
Views:

1 목차 1. 앱인벤터환경설정 (1) 란? (2) 사용준비 (3) 환경설정 2. 앱인벤터기초실습 (1) HelloKitty (2) PainPot 3. 앱인벤터네트워크실습 (1) 전화걸기 (2) 지도표시하기

1. 앱인벤터환경설정 (1) 란? App Inventor란구글에서개발중인 Android용 App개발입니다. App Inventor는전문적인 Android 개발지식이없는사람도간단히개발할수있도록설계되어있습니다. (2) 사용준비 < 그림 1-1 : About 페이지 (http://appinventor.googlelabs.

2 1. 앱인벤터환경설정 (1) 란? App Inventor란구글에서개발중인 Android용 App개발입니다. App Inventor는전문적인 Android 개발지식이없는사람도간단히개발할수있도록설계되어있습니다. (2) 사용준비 < 그림 1-1 : About 페이지 ( > 초기화면인 About 페이지에는 App Inventor에대한간략한설명과소개동영상이있으니, 이것을한번보시면어떤툴인지감을잡으실수있을것입니다. 그럼이제오른쪽위의 Learn을클릭하여 Learn페이지로이동합니다. < 그림 1-2 : Learn 페이지 ( >

< 그림 1-3 > Learn 페이지에는 App Inventor로안드로이드 App 만들기를따라해볼수있는과정이준비되어있습니다. Setup으로개발환경을셋팅하고나서 Tutorials를따라해보면서개발방법을익힐수있습니다. Reference Documentation 에는사용되는구성요소에대한상세설명이나와있습니다.

3 < 그림 1-3 > Learn 페이지에는 App Inventor로안드로이드 App 만들기를따라해볼수있는과정이준비되어있습니다. Setup으로개발환경을셋팅하고나서 Tutorials를따라해보면서개발방법을익힐수있습니다. Reference Documentation 에는사용되는구성요소에대한상세설명이나와있습니다. User Generated Help Content 에서는구글파워유저들의링크를접할수있습니다. 또한 User FAQ 와 Troubleshooting 을이용해서, 문제해결에도움을받을수있습니다. 다음으로, Forum 페이지로이동합니다. < 그림 1-3 : Forum 페이지 ( >

Forum 페이지에서는세계여러 App Inventor 개발자들이올린질문, 토론등각종토픽들을읽어볼수있습니다. 계속해서가장중요한 My Projects 페이지로이동합니다. < 그림 1-4 : My Projects 페이지 (http://appinventor.googlelabs.com/ode/ya.

4 Forum 페이지에서는세계여러 App Inventor 개발자들이올린질문, 토론등각종토픽들을읽어볼수있습니다. 계속해서가장중요한 My Projects 페이지로이동합니다. < 그림 1-4 : My Projects 페이지 ( > My Projects 페이지에는구글계정이있어야만접근이가능합니다. 일단, 구글계정을마련하시고 < 그림1-5> 와같은약정동의화면이나타납니다. < 그림 1-5 > I accept the terms of service 버튼을클릭하여약정에동의하면다음과같은사이트가나타납니다.

5 < 그림 1-6 > My Projects는여러분이만들안드로이드 app에대한내용이연결됩니다. ( 하나의프로젝트가하나의 app에대응됩니다.) 따라서 App Inventor 가처음이신분들은위처럼아무런내용이없습니다. 여러프로젝트를진행하게되면아래와같이그목록들이이곳에보이게됩니다. < 그림 1-7 >

6 (3) 환경설정 1 시스템요구환경우선다음과같은시스템이필요합니다. ( 참조 : ) Operating system: Macintosh (with Intel processor): Mac OS X 10.5, 10.6 Windows: Windows XP, Windows Vista, Windows 7 GNU/Linux: Ubuntu 8+, Debian 5+ Browser: Mozilla Firefox 3.6 or higher (Note: If you are using Firefox with the No Script extension, you'll need to turn the extension off. See the note on the troubleshooting page.) Apple Safari 5.0 or higher Google Chrome 4.0 or higher Microsoft Internet Explorer 7 or higher 2 소프트웨어설치그리고, App Inventor는자바기반에클라우딩서비스이므로, JRE가설치되어있어야합니다. Sun사의 Java SDK를설치하시면됩니다. 또한결과물을확인해보기위해서 App Inventor Extras Software 라는것을설치해야합니다. JRE는 를통해설치할수있습니다. 혹은 사이트에서 JDK를설치할수있습니다. App Inventor Extras Software 는아래사이트를통해설치할수있습니다. Windows : MacOS : Linux : 3 안드로이드스마트폰연결 ( 앞으로는윈도우기반으로설명합니다.) 자신이만든결과물의확인은기본적으로지원되는가상의스마트폰장치뿐만아니라, 실제안드로이드스마트폰에서도가능합니다. 이를위해서는해당하는스마트폰의드라이버가설치되어있어야합니다. 이과정은해당스마트폰의제조사홈페이지를참고하시기바랍니다. 스마트폰드라이버가정상적으로설치된경우, 해당스마트폰을 PC에 USB케이블로연결하면, 아래그림과같이드라이버를확인할수있습니다.

7 < 그림 1-8 > 다음 < 그림 1-9> 은갤럭시 S 의경우입니다. < 그림 1-9 > 자, 이제약간의스마트폰설정이필요합니다. 스마트폰에 설정 > 응용프로그램 으로들어갑니다. 설치되어있는안드로이드버전에따라위치가약간씩다를수있습니다. 이후, 알수없는소스 와 USB 디버깅 을켜주셔야합니다. ( 저는모의위치허용도체크해두고있습니다만, 이건꼭체크하지않아도괜찮습니다.)

8 2. 앱인벤터기초실습 (1) HelloKitty 1 앱디자이너화면구성하기아래와같은화면에서 My Projects를클릭합니다. < 그림 2-1 > 처음에프로젝트명을입력하는화면이나옵니다. 아무이름으로입력하시면됩니다. HelloKitty라프로젝트명을설정합니다. < 그림 2-2 > 왼쪽, Palette 에서제공되는구성요소들을마우스로끌어서 Viewer 에다놓는방식으로이곳에서여러분이만드실 app의모양새를디자인할수있습니다.

9 일단, 아래와같이 Label 을하나끌어다놓아봅니다. < 그림 2-3 > 오른쪽, Components 와 Properties 는여러분이선택한구성요소들의속성값들을변경하는데사용됩니다. Viewer 에방금끌어다놓은 Label 이선택된상태에서 Properties 에 Text 속성을아래그림과같이 Pet the kitty 라고수정합니다. < 그림 2-4 >

10 다음으로 Label 의바탕색을아래 < 그림 2-5> 와같은방법으로파란색으로변경해봅니다. < 그림 2-5 > 이번엔글자색을노란색으로변경해봅니다. < 그림 2-6 >

11 계속해서폰트에크기를 20 으로키우고, 굵게바꾸어보겠습니다. < 그림 2-7 > < 그림 2-8 >

12 팔레트의도구들을이용하여아래화면을디자인합니다. < 그림 2-9 > 리소스를연결하기위하여아래와같이이미지와 mp3 파일을연결합니다. < 그림 2-10 >

13 2 앱인벤터프로그래밍하기자, 이제여러분께서만드신화면에논리적인흐름을만들어보도록하겠습니다. 오른쪽위, Open the Block Editor 버튼을클릭해봅니다. < 그림 2-11 > Block Editor 는클라우드기반으로동작되기때문에아래와같이자바컴포넌트가다운로드및실행될것입니다. < 그림 2-12 > < 그림 2-13 >

잠시후에아래와같은창이보이시면 Block Editor 가정상적으로실행된것입니다. 간혹 App Inventor Extras Software 가설치된경로를요구하는팝업이뜰때가있습니다. 기본경로로설치했을경우엔문제가없겠지만, 그렇지않은경우라면 App Inventor Extras Software 가설치된경로를입력해주시면됩니다.

14 잠시후에아래와같은창이보이시면 Block Editor 가정상적으로실행된것입니다. 간혹 App Inventor Extras Software 가설치된경로를요구하는팝업이뜰때가있습니다. 기본경로로설치했을경우엔문제가없겠지만, 그렇지않은경우라면 App Inventor Extras Software 가설치된경로를입력해주시면됩니다. 자이제부터, 코딩에들어갑니다. 좀전에띄워놓았던 Block Editor 에서 My Blocks 를클릭하고 Button1 을클릭하면아래그림과같이관련된블록들이나열되게됩니다. 참고로오른쪽아래에쓰레기통은블록을지울때씁니다. < 그림 2-14 > 나열된블록들중에서 when Button1.Click 을아래그림과같이끌어다놓습니다. < 그림 2-15 >

15 같은방식으로 My Blocks 에 Sound1 를누르고 call Sound1.Play 블록을끌어서아래그림과같이블록을맞춥니다. 이렇게하면 'Button1을클릭했을때 Sound1을플레이하라 ' 라는뜻이됩니다. 블록이제대로맞추어지면딸깍하는소리와함께맞아들어갑니다. < 그림 2-16 > 3 실행결과 < 그림 2-17 >

16 자, 그러면아래 < 그림 2-18> 과같이가상에안드로이드폰이실행될것입니다. < 그림 2-18 > (2) PainPot 1 앱디자이너화면구성하기팔렛트에서버튼을마우스로가져와서아래처럼화면을구성합니다. < 그림 2-19 >

17 버튼의배치를 Screen Arragement 를이용해서정렬시켜서정리하도록합니다. < 그림 2-20 > HelloKitty 에서보여준화면을배치하여아래 < 그림 2-21> 과같이구성하도록합니다. < 그림 2-21 >

18 2 앱인벤터프로그래밍하기빨강, 파랑, 녹색버튼이눌러졌을경우처리되는로직을아래와같이구현하도록합니다. < 그림 2-22 > < 그림 2-23 > < 그림 2-24 >

19 3 실행결과아래그림처럼실행하면그림판프로그램이실행됩니다. < 그림 2-25 >

20 3. 앱인벤터네트워크 (1) 전화걸기안드로이드폰의대표적인통신방식인전화걸기에대해서알아봅니다. 1 앱디자이너화면구성하기화면을아래 < 그림3-1> 과같이배치하도록합니다. < 그림 3-1 > 2 앱인벤터프로그래밍하기블록에디터의기능도아래처럼구성하도록합니다. < 그림 3-2 >

21 3 실행결과안드로이드폰에저장된사용자의전화번호를불러와서 로만든프로그램을실행시켜전화를걸수있습니다. < 그림 3-3 > (2) 지도표시하기안드로이드폰의대표적인네트워크방식인 GPS 연동방식을이용하고사용자가찾고자하는위치를찾는어플리케이션을만들어본다. 1 앱디자이너화면구성하기화면을아래처럼배치하도록한다. < 그림 3-4 >

22 지도사용시가져올팔레트의정보는아래와같습니다. < 그림 3-5 > 지도의경우별도의속성값을셋팅해주는데그값은아래와같습니다. < 그림 3-6 > 2 앱인벤터프로그래밍하기블록에디터의기능도아래처럼구성하도록합니다. < 그림 3-7 >

23 3 실행결과 < 그림 3-8 > 4 앱인벤터프로그래밍하기 (2) 구글맵을연동하여직접구글맵의위치값을가져다가적용하는방법을이해합니다. maps.google.com 사이트를통하여링크된값을검색후저장해둡니다. < 그림 3-9 >

24 < 그림 3-10 > 5 실행결과 < 그림 3-11 >

디지털 공학

디지털 공학 캡스톤디자인 App Inventor 디지털전자정보계열 앱 인벤터란? MIT 대학 미디어 랩 연구실에서 만든 안드로 이드용 스마트폰 앱 제작하는 블록 프로그래 밍 기법의 비주얼 프로그래밍 도구이다. 스마트폰의 화면을 디자인하고 블록들을 조 립하면 우리가 원하는 앱을 만들 수 있다. 인터넷이 연결된 곳에서는 어디서라도 접속 하여 앱 화면을 직접 디자인하고 프로그래밍