정보 Sangwook Lee Deogi High School
III 문제해결과프로그래밍 1 추상화 2 알고리즘 3 프로그래밍
모바일프로그래밍 1. 모바일환경과기술 2. 앱인벤터 (App Inventor) 3. 앱만들기 3
1. 모바일환경과기술 학습목표 모바일환경과기술에대해설명할수있다 4
모바일디바이스 모바일디바이스란 손에들고이동하면서사용할수있는장치 다양한프로그램의설치및실행이가능한장치 작은컴퓨터 종류 PDA, 스마트폰, 태블릿 PC 등 <Psion Organiser II, 1986> <IBM Simon, 1992> <Aqcess Technologies Qbe, 1999> 5
기능면에서 PC와의차이점 무선통신지원 Bluetooth WiFi LTE 센서지원 방향센서 근접센서 빛센서 가속도센서 모바일디바이스 6
모바일운영체제란 모바일운영체제 모바일디바이스를관리하는소프트웨어 종류 안드로이드 ios 윈도우폰 7
모바일운영체제 모바일운영체제비교 종류안드로이드 ios 윈도우폰 제조사 Google Apple Microsoft 개발언어 C/C++, Java C/C++, Objective-C, Swift C/C++, C#, VB 시장점유율 (2015 년기준 ) 80.7% 17.7% 1.1% 플랫폼 ARM, MIPS, x86 ARM ARM 웹사이트 android.com apple.com/ios windowsphone.com 8
모바일 CPU 종류 ARM 영국 ARM Holdings 에서개발 스마트폰을비롯한모바일 CPU 시장점유율 95% MIPS 미국 MIPS Technologies 에서개발 네트워크장비나공장자동화시스템등에사용 9
모바일 CPU 기능 제어부 : 하드웨어동작결정 연산부 : 산술및논리연산수행 <MIPS> 10
Mobile AP(Application Processor) 11
Mobile AP(Application Processor) 종류 이들제조사에서만드는 AP 에내장된 CPU 는모두 ARM ( 이 ) 다 12
모바일앱 모바일앱이란 사용자의필요에의해모바일디바이스에설치된프로그램 ( 응용 ) 프로그램 = 애플리케이션 = 앱 13
모바일앱 모바일앱종류 네이티브앱 (Native App) 앱마켓에서다운받아설치하여사용하는앱 웹앱 (Web App) 웹브라우저에서인터넷에접속하여사용하는앱 웹앱 = 모바일홈페이지 14
모바일앱 모바일앱종류 네이티브앱 vs 웹앱 15
NAVER 네이티브앱 vs 웹앱 모바일앱 <NAVER 네이티브앱 > <NAVER 웹앱 > 16
모바일앱 네이티브앱 vs 웹앱 <NAVER 네이티브앱 > 17
모바일앱 네이티브앱 vs 웹앱 <NAVER 웹앱 > 18
모바일프로그래밍 1. 모바일환경과기술 2. 앱인벤터 (App Inventor) 3. 앱만들기 19
2. 앱인벤터 (App Inventor) 학습목표 앱인벤터 (App Inventor) 를이해하고구글 계정을사용하여앱인벤터서버에접속할 수있다. 20
앱개발도구 안드로이드폰용앱을개발하는두가지도구 < 안드로이드스튜디오 > < 앱인벤터 > 21
앱인벤터 앱인벤터 (App Inventor) 특징 구글과 MIT 가협력하여개발한앱저작도구 무료 개조아 ~ 22
앱인벤터 (App Inventor) 란 앱인벤터 누구나쉽게앱을개발할수있도록블록편집기제공 23
앱인벤터 (App Inventor) 란 앱인벤터 크롬웹브라우저를통해앱인벤터서버에접속하여사용 앱인벤터서버접속시구글계정필요! 24
구글계정만들기 구글계정만들기 1 계성생성웹페이지 (accounts.google.com/signup) 접속 25
구글계정만들기 구글계정만들기 2 이름, 이메일, 비밀번호, 생년월일, 성별등입력후계정생성 26
앱인벤터서버접속하기 1 크롬실행 27
앱인벤터서버접속하기 2 앱인벤터사이트 (appinventor.mit.edu) 접속 28
앱인벤터서버접속하기 3 Create apps!( ) 클릭 29
앱인벤터서버접속하기 4 구글로그인 30
앱인벤터서버접속하기 구글계정접근권한요청시, [ 허용 ] 클릭 31
앱인벤터서버접속하기 서비스조건알림시, [I accept the terms of service!] 클릭 32
앱인벤터서버접속하기 설문작성메시지가나타나면, [Take Survey Later] 클릭 33
앱인벤터서버접속하기 6 상단메뉴에서 [English 한국어 ] 선택 1 2 34
앱인벤터서버접속하기 < 한국어로변경된앱인벤터 > 35
모바일프로그래밍 1. 모바일환경과기술 2. 앱인벤터 (App Inventor) 3. 앱만들기 36
3. 앱만들기 학습목표 앱인벤터 (App Inventor) 를사용하여사칙 연산, 소리출력기능이있는앱을만들수 있다. 37
[ 예제 ] 계산기앱 완성된계산기 38
화면설계 [ 예제 ] 계산기앱 1 상단메뉴에서 [ 프로젝트 새프로젝트시작하기 ] 선택 1 2 39
화면설계 [ 예제 ] 계산기앱 2 프로젝트이름지정후 [ 확인 ] 버튼클릭 프로젝트이름에한글을사용할수없음 40
화면설계 [ 예제 ] 계산기앱 3 팔레트에서텍스트상자 2 개를끌어서스크린에배치 41
화면설계 [ 예제 ] 계산기앱 4 팔레트의레이아웃에서표배치를끌어서스크린에배치 42
화면설계 [ 예제 ] 계산기앱 5 표배치 1 속성에서열값을 4, 행값을 1 로변경 43
화면설계 [ 예제 ] 계산기앱 6 팔레트에서버튼 4 개를끌어서표배치 1 안에나란히배치 44
화면설계 [ 예제 ] 계산기앱 7 버튼 1~4 속성에서텍스트값을각각 +, -, *, / 로변경 1 2 45
화면설계 [ 예제 ] 계산기앱 8 팔레트에서텍스트상자 1 개를끌어서스크린에배치 46
기능구현 [ 예제 ] 계산기앱 1 계산기능을구현하기위해 [ 블록 ] 버튼클릭 클릭시블록코딩화면으로전환 47
기능구현 2 블록에서 버튼 1 선택 [ 예제 ] 계산기앱 48
기능구현 [ 예제 ] 계산기앱 3 { 버튼 1. 클릭 } 블록을뷰어에배치 49
기능구현 [ 예제 ] 계산기앱 4 블록에서 텍스트 _ 상자 3 선택 50
기능구현 [ 예제 ] 계산기앱 5 { 텍스트 _ 상자 3. 텍스트값지정하기 } 블록을뷰어에배치 51
기능구현 6 블록에서 수학 선택 [ 예제 ] 계산기앱 52
기능구현 [ 예제 ] 계산기앱 7 { 더하기 (+) } 블록을뷰어에놓음 53
기능구현 [ 예제 ] 계산기앱 8 블록에서 텍스트 _ 상자 1 선택 54
기능구현 [ 예제 ] 계산기앱 9 { 텍스트 _ 상자 1. 텍스트 ] 블록을뷰어에놓음 55
기능구현 [ 예제 ] 계산기앱 10 블록에서 텍스트 _ 상자 2 선택 56
기능구현 [ 예제 ] 계산기앱 11 { 텍스트 _ 상자 2. 텍스트 } 블록을뷰어에놓음 57
기능구현 [ 예제 ] 계산기앱 12 버튼 2~4 에대하여각각 -, *, / 기능구현 58
컴파일및 QR 코드생성 [ 예제 ] 계산기앱 1 상단메뉴에서 [ 빌드 앱 (.apk 용 QR 코드제공 )] 선택 59
컴파일및 QR 코드생성 2 앱파일만드는중 [ 예제 ] 계산기앱 60
컴파일및 QR 코드생성 [ 예제 ] 계산기앱 3 앱파일설치를위해생성된 QR 코드 61
설치및실행 [ 예제 ] 계산기앱 1 AI Companion 앱으로 QR 코드스캔 62
설치및실행 [ 예제 ] 계산기앱 설치차단시, 보안설정에서 알수없는소스 설치허용 63
[ 예제 ] 계산기앱 설치및실행 2 앱설치 64
[ 예제 ] 계산기앱 설치및실행 3 앱실행 65
MIT AI2 Companion 설치 1. Play 스토어에서 MIT AI2 Companion 검색 66
MIT AI2 Companion 설치 2. 설치 67
3. WiFi 사용하지않고앱실행 MIT AI2 Companion 설치 68
화면설계 [ 예제 ] 야옹 소리내는고양이앱 69
[ 예제 ] 야옹 소리내는고양이앱 기능구현 70