모바일 어플리케이션
모바일 앱 만들기 1강
앱인벤터의 텍스트 코딩
14강
프로젝트와 함께 코드 보기 자바로 코드 변형
블록코딩과 텍스트 코딩
1 차시
2 차시 3 차시
2. 자바스크립트로 바꿔서 출력하는 방법을 실습해 본다.
3. 기존 블록 코딩 예제를 변형해서 비교하며 코딩해 본다.
1. 블록코딩과 텍스트 코딩의 개념을 이해하여 활용할 수 있다.
학 습 목 표
블록코딩과 텍스트 코딩
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
1차시
교육 목적의 프로그래밍 언어 1
교육용 언어는 왜 필요하게 되었을까요?
1
프로그램 언어는 보통 텍스트형으로 구성
§
교육 목적의 프로그래밍 언어 1
교육용 프로그래밍 언어
2
목적 : 프로그래밍 학습용
문법이 간단하고 텍스트보다는 시각적(블록) 방법을 사용함
구분 일반 프로그래밍(텍스트형) 교육용 프로그래밍(블록형) 종류 C, Java등 스크래치, 앱인벤터 등
사용목적 소프트웨어 개발 프로그래밍 교육
문법구조 복잡 간단
인터페이스 대부분 텍스트 기반 대부분 비주얼(블록) 기반
출처: 김대수. 소프트웨어와 컴퓨팅 사고. 2018. 생능출판. P107
§
§
2 블록코딩
스크래치와 블록클리
1
2 블록코딩
앱 인벤터
2
블록코딩의 특징
3
이미지(디자인)과 코딩의 화면이 나뉘어져 있음
2 블록코딩
§
블록코딩의 특징
3
코딩의 단위는 블록으로 되어 있음 블록들은 기능이 유사한 블록끼리 묶여 있음
2 블록코딩
블록코딩의 특징
3
블록은 서로 끼울 수, 혹은 끼울 수 없게 홈이 있음
2 블록코딩
§
텍스트 코딩과 비교
4
2 블록코딩
이미지(디자인)과 코딩이 화면이 나뉘어져 있음
텍스트 코딩 작업에도 이미지와 프로그래밍 작업이 나뉨
코딩의 단위는 블록으로 되어 있음
텍스트 코딩 작업에도 변수와 명령어(함수)단위로 작업함
텍스트 코딩과 비교
4
2 블록코딩
블록들은 기능이 유사한 블록끼리 묶여 있음
변수 외에 명령어(함수)는 기능이 유사한 몇몇의 단위로 작업됨
블록은 서로 끼울 수, 혹은 끼울 수 없게 홈이 있음
명령어와 변수도 서로 연결할 수 있는 것이 있고 없는 것이 있음
텍스트 코딩 3
텍스트 코딩의 정의
1
인터페이스적으로 텍스트 형태로 되어 있는 것은 모두 텍스트 코딩 텍스트 코딩이라는 용어는 블록코딩과 구분하기 위해 사용한 용어로 보통은 일반 프로그램 언어라고 부름
보편적으로는 C, C++, 자바, 자바 스크립트, HTML 등 무수히 다양한 언어가 있음
§
§
본 수업에서는 자바를 사용
자바 : 오라클에서 만든 객체지향형 언어
§
텍스트 코딩 3
텍스트 코딩과 블록 코딩의 비교
2
자바스크립트는 컴파일 없이도 간단히 실행해 볼 수 있는 자바 기반의 언어
웹 프로그램부터 어플 개발에 이르기까지 범용적으로 사용 변수 지정이나 명령어가 단순해서 파이썬과 더불어
초보용 텍스트 코딩 언어로 주목받고 있음
§
§
§
자바스크립트를 예제로 블록코딩 언어와 간단히 비교해 볼 예정
텍스트 코딩 3
텍스트 코딩과 블록 코딩의 비교
2
세 개의 주사위를 만듬
주사위는 최소수 1, 최대수 6 주사위는 랜덤으로 작성
주사위의 결과는 팝업창(Alert)에 나옴
만일 합계가 25 이상이면 Lucky라고 출력됨
주사위 예제
§
§
§
§
§
텍스트 코딩
3
텍스트 코딩 3
텍스트 코딩
3
텍스트 코딩 3
텍스트 코딩
3
텍스트 코딩 3
참고 자료
§ http://appinventor.mit.edu
자바로 코드 변형
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
2차시
자바브릿지 1
앱인벤터의 블록 코딩을 자바로 코드 전환할 수 있게 만듦
앱입벤터 내에 버튼 제공하여 작업 중에도 자바 코드를 생성해서 비교 가능 자바와 앱인벤터 동시 개발
자바는 오라클에서 만든 객체지향형 언어
§
§
§
§
자바브릿지 설치하기 2
자바 브릿지 사이트 이동
1
구글 아이디로 로그인
2
구글 아이디 권한 요청
3
자바브릿지 설치하기 2
Generator JAVA 버튼 생김
4
자바브릿지 설치하기 2
Generator JAVA 버튼 생김
5
자바브릿지 설치하기 2
java 코드 생김
6
자바코드와 블록 잠깐 비교 3
자바코드와 블록 잠깐 비교
3
자바코드와 블록 잠깐 비교 3
참고 자료
§ http://appinventor.mit.edu
§ http://www.appinventor.org/jbridge
프로젝트와 함께 코드보기
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
3차시
프로젝트에서 자바 코드 추출 1
샘플 프로젝트
가위바위보 프로젝트블록코드와 자바코드 같이 보기 2
전역변수 초기화
1
전역변수: 전체적으로 영향을 주는 변수 초기화: 값을 초기로 변경
“ ” : 문장형이고 빈 값(null) 실제 자바에서의 구현
private String rsp;
rsp = “ ”;
§
§
§
§
§
§
블록코드와 자바코드 같이 보기 2
버튼 이벤트
2
언제 실행
Button1과 클릭이 조건임
즉 Button1이 클릭 된 순간 프로그램이 시작됨 버튼 이벤트라고 부름
§
블록코드와 자바코드 같이 보기 2
실제 자바에서의 구현
if( component.equals(Button1) &&
eventName.equals("Click") ){
Button1Click();
return true; }
public void Button1Click(){
}
버튼 이벤트
2
§
블록코드와 자바코드 같이 보기 2
rsp 변수를 리스트로 바꾸기
3
지정하기: rsp라는 변수를 리스트로 만듦
그러니까 이제부터 rsp는 세 개의 방을 갖는 리스트 rsp = [1.png], [2.png], [3.png]
단 자바에서는 일반 배열이 아닌 리스트라는 독특한 시스템을 사용. 리스트는 [ ]가 아닌 < >로 표시
§
§
§
블록코드와 자바코드 같이 보기 2
rspSubList = new ArrayList<Object>(); //rsp를 리스트로 선언 public void Button1Click(){
rspSubList.add("1.png");
rspSubList.add("2.png");
rspSubList.add("3.png");
}
rsp 변수를 리스트로 바꾸기
3
블록코드와 자바코드 같이 보기 2
가위바위보 이미지값 지정
4
Image1(가위바위보 그림이 나타날 곳)의 값을 방금 만든 리스트에서 가져옴
Image1은 리스트의 그림 3장 중 하나가 나타나도록
§
§
블록코드와 자바코드 같이 보기 2
가위바위보 이미지값 지정
4
Image1 = new Image(HorizontalArrangement1);
public void Button1Click(){
rspSubList.add("1.png");
rspSubList.add("2.png");
rspSubList.add("3.png");
Image1.Picture(rsp);
}
블록코드와 자바코드 같이 보기 2
가위바위보 리스트와 실제 이미지 연결
5
중첩 if문을 통해서 총 세 개의 결과값으로 가는 분기작성 if(rsp == “1.png”) //만일 rsp가 “1.png”이면
Label1 = “보” //Label1은 “보”
가위, 바위, 보의 이미지와 라벨의 글 연결
§
§
블록코드와 자바코드 같이 보기 2
가위바위보 리스트와 실제 이미지 연결
5
if(Integer.valueOf(rsp)==Integer.valueOf("1.png")){
Label1.Text(“보”);
} else
if(Integer.valueOf(rsp)==Integer.valueOf("2.png")){
Label1.Text(“바위”);
} else {
Label1.Text(“가위”);
} } }
참고 자료
§ 쉽고 재미있게 만드는 앱 프로그래밍 앱 인벤터, 이종원 저, 한빛아카데미
§ 스마트폰 이미지 http://bitly.kr/9cFC
학 습 정 리
자바
오라클에서 만든 객체지향형 프로그래밍 언어
텍스트코딩
앱인벤터와 같은 블록코딩과 비교하기 위해 사용하는 말로, 텍스트형 코딩 방법을 지칭함
자바브릿지
앱인벤터로 작성한 코드를 자바로 출력하기 위해 사용하는 프로그램
