정보

Size: px

Start display at page:

Download "정보"

병준 두
5 years ago
Views:

1 정보 Sangwook Lee Deogi High School

2 III 문제해결과프로그래밍 1 추상화 2 알고리즘 3 프로그래밍

3 모바일프로그래밍 1. 모바일환경과기술 2. 앱인벤터 (App Inventor) 3. 앱만들기 3

4 1. 모바일환경과기술 학습목표 모바일환경과기술에대해설명할수있다 4

5 모바일디바이스 모바일디바이스란 손에들고이동하면서사용할수있는장치 다양한프로그램의설치및실행이가능한장치 작은컴퓨터 종류 PDA, 스마트폰, 태블릿 PC 등 <Psion Organiser II, 1986> <IBM Simon, 1992> <Aqcess Technologies Qbe, 1999> 5

6 기능면에서 PC와의차이점 무선통신지원 Bluetooth WiFi LTE 센서지원 방향센서 근접센서 빛센서 가속도센서 모바일디바이스 6

7 모바일운영체제란 모바일운영체제 모바일디바이스를관리하는소프트웨어 종류 안드로이드 ios 윈도우폰 7

8 모바일운영체제 모바일운영체제비교 종류안드로이드 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

9 모바일 CPU 종류 ARM 영국 ARM Holdings 에서개발 스마트폰을비롯한모바일 CPU 시장점유율 95% MIPS 미국 MIPS Technologies 에서개발 네트워크장비나공장자동화시스템등에사용 9

10 모바일 CPU 기능 제어부 : 하드웨어동작결정 연산부 : 산술및논리연산수행 <MIPS> 10

11 Mobile AP(Application Processor) 11

12 Mobile AP(Application Processor) 종류 이들제조사에서만드는 AP 에내장된 CPU 는모두 ARM ( 이 ) 다 12

13 모바일앱 모바일앱이란 사용자의필요에의해모바일디바이스에설치된프로그램 ( 응용 ) 프로그램 = 애플리케이션 = 앱 13

14 모바일앱 모바일앱종류 네이티브앱 (Native App) 앱마켓에서다운받아설치하여사용하는앱 웹앱 (Web App) 웹브라우저에서인터넷에접속하여사용하는앱 웹앱 = 모바일홈페이지 14

15 모바일앱 모바일앱종류 네이티브앱 vs 웹앱 15

16 NAVER 네이티브앱 vs 웹앱 모바일앱 <NAVER 네이티브앱 > <NAVER 웹앱 > 16

17 모바일앱 네이티브앱 vs 웹앱 <NAVER 네이티브앱 > 17

18 모바일앱 네이티브앱 vs 웹앱 <NAVER 웹앱 > 18

19 모바일프로그래밍 1. 모바일환경과기술 2. 앱인벤터 (App Inventor) 3. 앱만들기 19

20 2. 앱인벤터 (App Inventor) 학습목표 앱인벤터 (App Inventor) 를이해하고구글 계정을사용하여앱인벤터서버에접속할 수있다. 20

21 앱개발도구 안드로이드폰용앱을개발하는두가지도구 < 안드로이드스튜디오 > < 앱인벤터 > 21

22 앱인벤터 앱인벤터 (App Inventor) 특징 구글과 MIT 가협력하여개발한앱저작도구 무료 개조아 ~ 22

23 앱인벤터 (App Inventor) 란 앱인벤터 누구나쉽게앱을개발할수있도록블록편집기제공 23

24 앱인벤터 (App Inventor) 란 앱인벤터 크롬웹브라우저를통해앱인벤터서버에접속하여사용 앱인벤터서버접속시구글계정필요! 24

25 구글계정만들기 구글계정만들기 1 계성생성웹페이지 (accounts.google.com/signup) 접속 25

26 구글계정만들기 구글계정만들기 2 이름, 이메일, 비밀번호, 생년월일, 성별등입력후계정생성 26

27 앱인벤터서버접속하기 1 크롬실행 27

28 앱인벤터서버접속하기 2 앱인벤터사이트 (appinventor.mit.edu) 접속 28

29 앱인벤터서버접속하기 3 Create apps!( ) 클릭 29

30 앱인벤터서버접속하기 4 구글로그인 30

31 앱인벤터서버접속하기 구글계정접근권한요청시, [ 허용 ] 클릭 31

32 앱인벤터서버접속하기 서비스조건알림시, [I accept the terms of service!] 클릭 32

33 앱인벤터서버접속하기 설문작성메시지가나타나면, [Take Survey Later] 클릭 33

34 앱인벤터서버접속하기 6 상단메뉴에서 [English 한국어 ] 선택

35 앱인벤터서버접속하기 < 한국어로변경된앱인벤터 > 35

36 모바일프로그래밍 1. 모바일환경과기술 2. 앱인벤터 (App Inventor) 3. 앱만들기 36

37 3. 앱만들기 학습목표 앱인벤터 (App Inventor) 를사용하여사칙 연산, 소리출력기능이있는앱을만들수 있다. 37

38 [ 예제 ] 계산기앱 완성된계산기 38

39 화면설계 [ 예제 ] 계산기앱 1 상단메뉴에서 [ 프로젝트 새프로젝트시작하기 ] 선택

40 화면설계 [ 예제 ] 계산기앱 2 프로젝트이름지정후 [ 확인 ] 버튼클릭 프로젝트이름에한글을사용할수없음 40

41 화면설계 [ 예제 ] 계산기앱 3 팔레트에서텍스트상자 2 개를끌어서스크린에배치 41

42 화면설계 [ 예제 ] 계산기앱 4 팔레트의레이아웃에서표배치를끌어서스크린에배치 42

43 화면설계 [ 예제 ] 계산기앱 5 표배치 1 속성에서열값을 4, 행값을 1 로변경 43

44 화면설계 [ 예제 ] 계산기앱 6 팔레트에서버튼 4 개를끌어서표배치 1 안에나란히배치 44

45 화면설계 [ 예제 ] 계산기앱 7 버튼 1~4 속성에서텍스트값을각각 +, -, *, / 로변경

46 화면설계 [ 예제 ] 계산기앱 8 팔레트에서텍스트상자 1 개를끌어서스크린에배치 46

47 기능구현 [ 예제 ] 계산기앱 1 계산기능을구현하기위해 [ 블록 ] 버튼클릭 클릭시블록코딩화면으로전환 47

48 기능구현 2 블록에서 버튼 1 선택 [ 예제 ] 계산기앱 48

49 기능구현 [ 예제 ] 계산기앱 3 { 버튼 1. 클릭 } 블록을뷰어에배치 49

50 기능구현 [ 예제 ] 계산기앱 4 블록에서 텍스트 _ 상자 3 선택 50

$기능구현 [ 예제 ] 계산기앱 5 { 텍스트 _$

51 기능구현 [ 예제 ] 계산기앱 5 { 텍스트 _ 상자 3. 텍스트값지정하기 } 블록을뷰어에배치 51

52 기능구현 6 블록에서 수학 선택 [ 예제 ] 계산기앱 52

53 기능구현 [ 예제 ] 계산기앱 7 { 더하기 (+) } 블록을뷰어에놓음 53

54 기능구현 [ 예제 ] 계산기앱 8 블록에서 텍스트 _ 상자 1 선택 54

55 기능구현 [ 예제 ] 계산기앱 9 { 텍스트 _ 상자 1. 텍스트 ] 블록을뷰어에놓음 55

56 기능구현 [ 예제 ] 계산기앱 10 블록에서 텍스트 _ 상자 2 선택 56

57 기능구현 [ 예제 ] 계산기앱 11 { 텍스트 _ 상자 2. 텍스트 } 블록을뷰어에놓음 57

58 기능구현 [ 예제 ] 계산기앱 12 버튼 2~4 에대하여각각 -, *, / 기능구현 58

59 컴파일및 QR 코드생성 [ 예제 ] 계산기앱 1 상단메뉴에서 [ 빌드 앱 (.apk 용 QR 코드제공 )] 선택 59

60 컴파일및 QR 코드생성 2 앱파일만드는중 [ 예제 ] 계산기앱 60

61 컴파일및 QR 코드생성 [ 예제 ] 계산기앱 3 앱파일설치를위해생성된 QR 코드 61

62 설치및실행 [ 예제 ] 계산기앱 1 AI Companion 앱으로 QR 코드스캔 62

63 설치및실행 [ 예제 ] 계산기앱 설치차단시, 보안설정에서 알수없는소스 설치허용 63

64 [ 예제 ] 계산기앱 설치및실행 2 앱설치 64

65 [ 예제 ] 계산기앱 설치및실행 3 앱실행 65

66 MIT AI2 Companion 설치 1. Play 스토어에서 MIT AI2 Companion 검색 66

67 MIT AI2 Companion 설치 2. 설치 67

68 3. WiFi 사용하지않고앱실행 MIT AI2 Companion 설치 68

69 화면설계 [ 예제 ] 야옹 소리내는고양이앱 69

70 [ 예제 ] 야옹 소리내는고양이앱 기능구현 70

디지털 공학

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