한국기술교육대학교 아두이노 기반 펌웨어 개발 (기본과정) 5일차 강사: 김영준 목원대학교 겸임교수.

Presentation on theme: "한국기술교육대학교 아두이노 기반 펌웨어 개발 (기본과정) 5일차 강사: 김영준 목원대학교 겸임교수."— Presentation transcript:

1 한국기술교육대학교 아두이노 기반 펌웨어 개발 (기본과정) 5일차 강사: 김영준 목원대학교 겸임교수

2 목차 (5일차) 목차 안드로이드 앱 개발을 위한 앱인벤터 기초 앱인벤터 기본 명령어 배우기 블루투스 통신 실습
블루투스로 아두이노 원격 제어하기 실습

3 준비하기

4 준비물 준비하기 무선인터넷 안드로이드 기반 스마트폰 노트북

5 앱인벤터 소개 소개 구글이 2010년 7월에 개발한 초보자용 안드로이드 앱 개발 툴 2011년 부터 오픈소스로 운영
현재는 MIT에서 확장 개발 및 운영 최근에는 MIT App Inventor2 이름으로 서비스 중

6 화면 둘러보기

7 개발 환경 화면 화면 설계 모드 화면 UI 작업 설계 디자이너 버튼 클릭 코딩 모드 설계된 UI에 기능 반영 블록 버튼 클릭

8 디자이너 모드 화면 디자이너 모드

9 블록 모드 화면 블록 모드

10 코딩 시작하기

11 코딩 시작하기 코딩 시작 블록에 있는 항목을 클릭하면 뷰어에 선택가능한 명령어 블록들이 표시됨

12 코딩 시작하기 코딩 시작 필요한 명령어 블록을 끌어다가 오른쪽에 배치

13 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기 화면(Screen)이 실행되면 (초기화 되면)
레이블에 나의 이름(텍스트)을 표시한다.

14 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기 화면(Screen)이 실행되면 (초기화 되면)
레이블에 나의 이름(텍스트)을 표시한다.

15 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기

16 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기 화면(Screen)이 실행되면 (초기화 되면)
레이블에 나의 이름(텍스트)을 표시한다.

17 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기

18 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기 화면(Screen)이 실행되면 (초기화 되면)
레이블에 나의 이름(텍스트)을 표시한다.

19 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기

20 나의 이름 표시하기 코딩 시작 화면에 나의 이름을 표시하기

21 이름 설명 코딩 시작 화면에 나의 이름을 표시하기 섹션 소켓 플러그

22 나의 이름 표시하기 코딩 시작 실행 결과를 확인해 봅니다.

23 버튼 추가하기

24 버튼 추가하기 코딩 실습 버튼을 추가하여 다음의 기능을 실행해 봅니다. 화면(Screen)이 실행되면 (초기화 되면)
레이블에 나의 이름(텍스트)을 표시한다. 버튼이 클릭되면 레이블에 “안녕하세요”가 표시되게 해 봅니다.

25 버튼 추가하기 코딩 실습 버튼을 추가하여 다음의 기능을 실행해 봅니다. 화면(Screen)이 실행되면 (초기화 되면)
레이블에 나의 이름(텍스트)을 표시한다. 이벤트라고 부릅니다. 버튼이 클릭되면 레이블에 “안녕하세요”가 표시되게 해 봅니다.

26 버튼 추가하기 코딩 실습 버튼을 추가하여 다음의 기능을 실행해 봅니다. 화면(Screen)이 실행되면 (초기화 되면)
레이블에 나의 이름(텍스트)을 표시한다. 이벤트가 발행하고 실행되는 함수를 이벤트핸들러 라고 부릅니다. 버튼이 클릭되면 레이블에 “안녕하세요”가 표시되게 해 봅니다.

27 디자이너: 버튼 추가하기 버튼 추가하기 디자이너 모드에서 버튼 컴포넌트를 마우스로 추가해 봅니다.

28 디자이너: 버튼 추가하기 버튼 추가하기 속성에서 텍스트 내용을 “클릭해 주세요＂로 수정해 봅니다.

29 블록: 코딩 추가하기 버튼 추가하기 블록 모드로 전환해 봅니다.

30 블록: 코딩 추가하기 버튼 추가하기 버튼 클릭 이벤트 블록을 추가해 줍니다.

31 블록: 코딩 추가하기 버튼 추가하기 “안녕하세요” 가 표시되도록 합니다.

32 블록: 코딩 추가하기 버튼 추가하기 “안녕하세요” 가 표시되도록 합니다.

33 버튼 추가하기 버튼 추가하기 실행 결과를 확인해 봅니다.

34 화면 배치하기

35 화면 배치하기 화면 배치하기 기존 만들어진 컴포넌트를 모두 삭제해 줍니다.

36 화면 배치하기 화면 배치하기 레이아웃 그룹에서 “수직배치“ 컴포넌트를 추가해 줍니다.

37 화면 배치하기 화면 배치하기 속성에서 수평정렬 -> 중앙 너비 -> 부모에 맞추기로 수정

38 화면 배치하기 화면 배치하기 레이블과 버튼을 다시 추가해 줍니다.

39 화면 배치하기 화면 배치하기 실행 결과를 확인해 봅니다.

40 앱인벤터 소개 소개 앱인벤터는 안드로이드 앱 개발 전용 툴임 아이폰을 제외한 국내 대부분의 스마트폰은 안드로이드 계열임
아이폰은 스위프트라는 초보자용 개발 환경을 지원하고 있음

41 안드로이드 앱 개발 소개 일반적인 안드로이드 앱 개발 과정 Android Studio를 APK 파일 생성 이용한 앱 개발
Java Android Studio 구글 Play 스토어 등록

42 안드로이드 앱 개발 소개 앱 인벤터를 이용한 앱 개발 과정 앱인벤터를 APK 파일 생성 이용한 앱 개발 Java
Android Studio 구글 Play 스토어 등록

43 앱인벤터 설치 설치 동일한 무선 공유기에 노트북과 스마트폰 접속 구글 크롬 설치 구글 계정 생성
앱 인벤터 사이트 접속 (구글 크롬 브라우저를 이용해 접속) 구글 계정 로그인 약관동의 Survey 등

44 앱인벤터 실행 준비

45 언어 변경 준비 언어를 한글어로 변경합니다.

46 프로젝트 생성 준비 새 프로젝트 시작하기

47 프로젝트 생성 준비 프로젝트 이름의 첫 글자는 반드시 영문으로 시작

48 프로젝트 생성 준비

49 프로그램의 시작은 HelloWorld

50 Hello World 앱 앱 개발 맛보기 레이블 컴포넌트를 뷰어에 추가

51 Hello World 앱 앱 개발 맛보기

52 안드로이드 스마트폰이 없는 경우 실행 준비

53 앱 실행 방법 실행 준비 스마트폰에서 실행시키는 방법 에뮬레이터에서 실행시키는 방법 1) 무선 네트워크 상에서 실행시키는 방법
2) USB 케이블을 통해 실행시키는 방법 3) apk 파일을 옮겨서 실행시키는 방법 에뮬레이터에서 실행시키는 방법 1) 스마트폰이 없는 경우, PC에서 가상의 스마트폰을 실행시켜 실행

54 에뮬레이터 설치 실행 준비 appinventor.mit.edu 접속

55 에뮬레이터 설치 실행 준비 Setup Instructions 링크 클릭

56 에뮬레이터 설치 실행 준비 Option Two의 링크 클릭

57 에뮬레이터 설치 실행 준비 Step1에서 Windows 선택

58 에뮬레이터 설치 실행 준비 Download the installer 클릭후 실행 선택

59 에뮬레이터 설치 실행 준비 설치 진행

60 에뮬레이터 설치 실행 준비 Desktop Icon 추가 선택

61 에뮬레이터 설치 실행 준비 설치 완료

62 에뮬레이터 설치 실행 준비 설치 완료

63 에뮬레이터 실행 실행 준비 연결 -> 에뮬레이터 선택

64 에뮬레이터 실행 실행 준비 안내 메시지에 따라 기다리면 에뮬레이터가 실행됨

65 에뮬레이터 실행 실행 준비 최신 버전으로 업데이트

66 에뮬레이터 실행 실행 준비 마지막 단계에서 반드시 Done 버튼 클릭

67 안드로이드 스마트폰이 있는 경우 실행 준비

68 MIT AI2 Companion 앱 설치 실행 준비 스마트폰에서 구글 플레이스토어 앱 실행

69 안드로이드 스마트폰이 있는 경우 앱 실행하기

70 Hello World 앱 빌드 앱 실행하기 빌드 메뉴에서 앱 (.apk용 QR 코드 제공) 선택

71 Hello World 앱 빌드 준비 스마트폰에서 AI2 Companion 앱 실행후 SQ Code Scan 선택

72 앱인벤터 기초과정 (3차시) ㈜헬로앱스 강사: 김영준 목원대학교 겸임교수

73 텍스트 상자 버튼을 클릭하면 입력한 텍스트를 레이블에 표시해 봅니다.

74 화면 배치하기 텍스트 상자 기존 만들어진 컴포넌트를 모두 삭제해 줍니다.

75 화면 배치하기 텍스트 상자 텍스트상자 컴포넌트를 추가해 줍니다.

76 화면 배치하기 텍스트 상자 버튼과 레이블을 하나씩 추가해 줍니다.

77 블록 코딩 텍스트 상자 버튼과 레이블을 하나씩 추가해 줍니다.

78 블록 코딩 텍스트 상자 레이블에 값을 지정하는 블록을 추가합니다.

79 블록 코딩 텍스트 상자 레이블에 값을 지정하는 블록을 추가합니다.

80 실행하기 텍스트 상자 실행 결과를 확인해 봅니다.

81 텍스트 상자2 버튼을 클릭하면 “입력한 문자열: “ 문구 뒤에 입력 문자열을 출력합니다.

82 블록 코딩 텍스트 상자2 텍스트의 합치기 컴포넌트를 추가합니다.

83 블록 코딩 텍스트 상자2 텍스트의 문자열 할당 컴포넌트를 추가합니다. 입력문자열: 이라고 입력해 줍니다.

84 블록 코딩 텍스트 상자2 텍스트 상자에서 값을 읽어 옵니다.

85 실행하기 텍스트 상자2 실행 결과를 확인해 봅니다.

86 변수 활용하기 전역변수에 값을 저장하여 활용하기

87 블록 코딩 변수 활용하기 변수 블록 목록에서 전역변수 초기화 블록 추가

88 블록 코딩 변수 활용하기 변수 블록 목록에서 전역변수 초기화 블록 추가

89 블록 코딩 변수 활용하기 변수 블록 목록에서 전역변수 초기화 블록 추가

90 실행하기 변수 활용하기 실행 결과를 확인해 봅니다.

91 전자계산기 만들기

92 새 프로젝트 생성하기 전자계산기 만들기 MyCalc 이름으로 프로젝트 생성

93 화면 배치하기 전자계산기 만들기 디자이너 모드 값1 값2 더하기 결과

94 화면 배치하기 전자계산기 만들기 레이아웃 -> 표배치 추가

95 화면 배치하기 전자계산기 만들기 표배치 레이아웃 속성 수정

96 화면 배치하기 전자계산기 만들기 3개의 레이블을 추가한 후 이름을 변경해 줍니다.

97 화면 배치하기 전자계산기 만들기 3개의 레이블을 추가한 후 이름을 변경해 줍니다.

98 화면 배치하기 전자계산기 만들기 3개의 텍스트 상자를 추가해 줍니다.

99 화면 배치하기 전자계산기 만들기 버튼을 추가해 줍니다.

100 화면 배치하기 전자계산기 만들기 버튼1의 이름을 더하기로 수정해 줍니다.

101 코딩하기 전자계산기 만들기 버튼1이 클릭되면, 값1과 값2의 숫자값을 더한 후 결과 박스에 표시합니다. 버튼 클릭 값1 읽기
값2 읽기 값1과 값2 더하기 결과값에 표시하기

102 코딩하기 전자계산기 만들기 버튼 이벤트 추가

103 코딩하기 전자계산기 만들기 텍스트_상자3에 값 지정하기

104 코딩하기 전자계산기 만들기 텍스트_상자3에 값 지정하기

105 코딩하기 전자계산기 만들기 텍스트_상자1 값 읽어오기

106 코딩하기 전자계산기 만들기 텍스트_상자2 값 읽어오기

107 실행하기 전자계산기 만들기 실행 결과를 확인해 봅니다.

108 실습 전자계산기 만들기 더하기 기능을 전역변수를 활용하는 방식으로 작성해 봅니다.

109 실습 전자계산기 만들기 4칙 연산 기능이 모두 수행되도록 기능을 추가해 봅니다. 값1 값2 + - / * 결과