반응형

SW 배움터/앱인벤터2 83

앱인벤터2 고급 강좌 9 : OpenAI GPT를 이용한 이미지 생성 앱 만들기

이번 시간에는 OpenAI GPT를 이용한 이미지 생성 앱 만들기를 해 보겠다. 이미지를 나타내기 위해서는 웹뷰어 컴포넌트가 하나 필요하다. OpenAI GPT가 이미지를 생성해서 웹뷰어 화면에 뿌려주는 것이다. 아래와 같이 디자이너 에디터를 구성하고 웹뷰어 컴포넌트를 하단에 하나 배치한다. 이번 시간에는 전송버튼이 다시 살아났다. 7강에서와 같이 텍스트를 입력하고 그 텍스트에 맞는 그림을 생성해 웹뷰어 화면에 보여주는 것이기 때문에 전송 버튼을 클릭했을 때 이벤트가 발생한다. 이 전송 버튼 이벤트 블록안에 OpenAI 블록들을 모두 끼워 넣는다. 이 부분이 OpenAI이미지를 생성하는 부분이다. OpenAI 블록서랍에서 '언제 OpenAI.GeneratedImage' 블록을 꺼낸다. '언제 OpenAI..

앱인벤터2 고급 강좌 8 : OpenAI GPT를 이용한 음성인식 챗봇 만들기

이번 시간에는 저번 강좌에서 이어지는 강좌로 OpenAI GPT를 이용한 음성인식 챗봇을 만들어 보겠다. 음성인식을 위해서는 음성인식 컴포넌트와 음성변환 컴포넌트가 필요하다. 디자이너 에디터의 팔레트창에서 미디어부를 열어 음성인식 컴포넌트와 음성변환 컴포넌트를 뷰어 창에 투척하자. 두 컴포넌트 모두 보이지 않는 컴포넌트라서 뷰어창에 투척해야 하단부에 나타난다. 블록에디터 창으로 가서 각각의 블록들을 배치한다. 이번 강좌에서는 음성인식을 이용하는 것이므로 음성인식 컴포넌트와 음성변환 컴포넌트들이 중점적으로 사용될 것이다. '언제 음성인식1.텍스트 가져온 후에' 이벤트 블록안에 지난 7강에서 사용했던 OpenAI 블록들을 그대로 사용한다. 7강에서는 '전송' 버튼을 사용했고 이번 8강에서는 '음성인식' 컴포..

앱인벤터2 고급 강좌 7 : OpenAI GPT를 이용한 챗봇 만들기

OpenAI에서 ChatGPT를 발표한지 8개월여가 지났는데 그동안 ChatGPT를 이용한 수많은 앱과 프로그램들이 나왔다. 이제 앱인벤터2에서도 ChatGPT와 비슷한 앱을 만들 수 있게 되었는데 이번 시간에는 OpenAI GPT를 이용한 챗봇 만들기를 해 보겠다. 앱인벤터2로 AI 챗봇을 만들기 위해서는 사전작업이 몇가지 필요하다. 먼저 OpenAI의 API Key를 받아 두어야 하는 것과 앱인벤터2에서 사용하는 OpenAI 확장 프로그램을 다운받아 두어야 한다는 것이다. 먼저 OpenAI의 API Key를 다운받는 방법을 알아보자. https://platform.openai.com/account/api-keys에 접속해서 회원가입과 몇가지 요구하는 절차를 밟는다. 그리고 아래 그림과 같이 보이는 페..

앱인벤터2 고급 강좌 6 : AI 음성인식 계산기 만들기

이번 시간에는 앱인벤터에 있는 음성 인식 컴포넌트를 이용해 음성으로 두 수의 계산을 하는 앱을 만들어 보자. 먼저 다음과 같이 디자이너 화면을 구성한다. 음성 인식 컴포넌트와 음성 변환 컴포넌트는 보이지 않는 컴포넌트이기 때문에 두 컴포넌트를 뷰어 안에 투척하면 하단에 배치된다. 계산기 이미지 아래에 '여기를 클릭하고 계산식을 말하세요" 란 버튼을 하나 만들고 나머지는 레이블을 배치해 입력한 내용과 결과를 확인할 것이다. 블록에디터로 가서 변수를 설정해 주자. 공통 블록안의 '변수' 항목에서 '전역 변수 만들기 "이름" 초기값' 블록을 이용해 아래와 같은 5가지 변수 초기값을 만들어 준다. 4칙 연산 모두에 대해 계산을 해 볼 예정이기 때문에 4칙 연산 모두에 대해 초기값을 설정해 둔다. 덧셈 연산의 초..

앱인벤터2 고급 강좌 5 : 앱인벤터, 아두이노, 와이파이 그리고 웹으로 LED 제어

앱인벤터와 아두이노, 와이파이 모듈을 이용하여 LED를 제어할 수 있었는데 또 한가지 앱인벤터의 웹뷰어와 웹 브라우저를 통해서도 LED를 제어하는 것이 가능하다. 회로는 지난 시간에 사용했던 회로를 그대로 사용하면 되고 LED는 빨간색 하나만을 사용하는 것으로 하겠다. LED의 R 핀을 아두이노 4번 핀에 연결하고 블루투스는 지난 시간 그대로 사용한다. 웹 브라우저에서도 LED를 제어할 수 있다는 것을 보여 주려고 하는 것이기 때문데 IP 주소 입력창과 LED를 켜고 끄는 버튼 2개, 그리고 웹 뷰어만으로 앱인벤터 디자이너 에디터를 구성한다. 블록 에디터에도 LED를 켜고 끄는 두개의 버튼에 대해서만 코드를 구성한다. 웹뷰어에 IP 주소와 /H, /L 명령만 주는 간단한 코드이다. 나머지 코드는 아두이노..

앱인벤터2 고급 강좌 4 : 웹뷰어와 웹 컴포넌트의 차이

앱인벤터와 아두이노 보드를 이용해 블루투스 & 와이파이 푸시알림 메시지 보내기 강좌를 진행하면서 웹뷰어와 웹 컴포넌트의 차이점이 꽤 있다는 것을 알게 되었다. 이번 시간에는 앱인벤터와 아두이노 보드를 이용해 와이파이 푸시알림 메시지 보낼때 웹뷰어와 웹 컴포넌트에서 어떤 차이가 있는지 알아 보겠다. 먼저 회로도와 아두이노 스케치 프로그램은 앱인벤터2 고급강좌 3편에서 했던 것을 그대로 사용하므로 앱인벤터 고급강좌 3편을 참조하기 바란다. 먼저 앱인벤터와 아두이노 보드를 이용해 와이파이 푸시알림 메시지를 보낼때 웹뷰어에서는 어떻게 나타나는지 살펴보자. 앱인벤터 디자이너 에디터에 아래와 같이 화면을 구성한다. 웹뷰어 컴포넌트를 화면 하단에 배치하고 높이와 너비 속성을 부모요소에 맞추기를 선택해 화면 하단부 전..

앱인벤터2 고급 강좌 3 : 아두이노-와이파이를 이용해서 센서값 읽어 오고 푸시알림으로 보내기

이번 시간은 앱인벤터2 고급 강좌 3번째 시간으로 앱인벤터, 아두이노 보드, 와이파이 ESP8266-01모듈, 광전자 센서를 이용해 스마트폰에 푸시 알림 메시지를 보내는 방법을 알아보도록 하겠다. 이번 강좌는 지난 시간에 했던 아두이노, 블루투스를 이용해서 광센서의 값을 읽어 오고 읽어 온 값을 스마트폰에 푸시알림으로 보냈던 것을 블루투스 대신 와이파이로 똑같이 재현해 보는 강좌이다. 앱인벤터2 고급 강좌 1 : 푸시 알림 메시지 보내기1 앱인벤터2 고급과정으로 3가지의 시리즈를 계획중에 있다. Ⅰ.스마트폰에 기본적인 푸시 알림 메시지 보내기. Ⅱ. 블루투스, 아두이노, 앱인벤터를 이용해 아두이노로 들어오는 센서의 값이나 kusson.tistory.com 앱인벤터2 고급 강좌 2 : 아두이노-블루투스를 ..

앱인벤터2 고급 강좌 2 : 아두이노-블루투스를 이용해서 센서의 값을 푸시 알림 메시지로 보내기2

이번 시간은 앱인벤터2 고급 강좌 2번째 시간으로 앱인벤터, 아두이노 보드, 블루투스 모듈, 광전자 센서를 이용해 스마트폰에 푸시 알림 메시지를 보내는 방법을 알아보도록 하겠다. 이번 강좌는 푸시 알림 메시지 보내기1편과 이어지므로 1편을 보지 않은 사람은 먼저 1편을 잘 숙지하고 이번 강좌를 보기 바란다. 앱인벤터2 고급 강좌 1 : 푸시 알림 메시지 보내기1 앱인벤터2 고급과정으로 3가지의 시리즈를 계획중에 있다. Ⅰ.스마트폰에 기본적인 푸시 알림 메시지 보내기. Ⅱ. 블루투스, 아두이노, 앱인벤터를 이용해 아두이노로 들어오는 센서의 값이나 kusson.tistory.com 앱인벤터2 고급 강좌 3 : 아두이노-와이파이를 이용해서 센서값 읽어 오고 푸시알림으로 보내기 이번 시간은 앱인벤터2 고급 강좌..

앱인벤터2 고급 강좌 1 : 푸시 알림 메시지 보내기1

앱인벤터2 고급과정으로 3가지의 시리즈를 계획중에 있다. Ⅰ.스마트폰에 기본적인 푸시 알림 메시지 보내기. Ⅱ. 블루투스, 아두이노, 앱인벤터를 이용해 아두이노로 들어오는 센서의 값이나 신호를 스마트폰에 푸시 알림 메시지로 보내기. Ⅲ. 와이파이, 아두이노, 앱인벤터를 이용해 Ⅱ의 과정 반복하기 등이다. 많은 분들이 Ⅱ 와 Ⅲ의 과정을 문의해 와서 포스팅을 하기로 했다. 이번 시간은 앱인벤터2 고급 과정1로서 간단한 푸시 알림 메시지를 스마트폰으로 전송하는 방법을 알아 보겠다. 2, 3편도 준비되어 있으니 참고 하세요. 앱인벤터2 고급 강좌 2 : 아두이노-블루투스를 이용해서 센서의 값을 푸시 알림 메시지로 보내기2 이번 시간은 앱인벤터2 고급 강좌 2번째 시간으로 앱인벤터, 아두이노 보드, 블루투스 모..

앱인벤터2 왕초보 강좌 27 : 스크린의 복사, 이동 방법을 알아보자

앱인벤터2는 스크린 하나에 디자이너 에디터와 블록에디터 2개의 에디터가 같이 묶여 있기 때문에 스크린을 단순히 복사 이동 하는 것이 상당히 어렵다. 스크린을 생성하거나 삭제하는 것은 버튼 하나만 누르면 되는 반면 복사나 이동은 2개의 에디터를 한번에 처리해 줘야 하기 때문에 어려운 것이다. 이 시간에는 스크린을 복사하고 이동하는 방법에 대해 좀 심도있게 살펴보도록 하겠다. 아래 그림과 같이 '스크린2'가 빠지고 '스크린8'번이 '스크린2'의 역할을 하고 있는 앱이 있다고 가정해 보자. 이때는 '스크린8'번의 이름을 '스크린2'로 바꿔 주는 것이 좋을 것이다. 그런데 앱인벤터2 자체에서는 그러한 기능을 제공하지 않는다. 이때는 이 앱인벤터 aia 파일을 추출해서 aia 파일을 변환시켜주는 작업을 해 줘야 ..

'허니비 성경 암송'앱 소개

성경암송을 잘하기 원하는 사람들이 많을 텐데 여기 성경암송에 아주 좋은 앱을 하나 소개한다. 바로 '허니비 성경 암송'앱이라는 것이다. '허니비 성경암송'앱은 꿀벌이 웅웅 거리듯이 성경 한 구절을 몇단락씩 나누어서 꿀벌이 웅웅 거리는 듯한 모습으로 외운다고 하여 붙여진 이름이다. 예를 들어 '너는 마음을 다하고/ 성품을 다하고/ 힘을 다하여/ 네 하나님 여호와를 사랑하라.(신 6:5)' 라는 말씀이 있으면 너는 마음을 다하고, 너는 마음을 다하고, 너는 마음을 다하고, 너는 마음을 다하고, 너는 마음을 다하고, 성품을 다하고, 성품을 다하고, 성품을 다하고, 성품을 다하고, 성품을 다하고, 너는 마음을 다하고 성품을 다하고, 너는 마음을 다하고 성품을 다하고, 너는 마음을 다하고 성품을 다하고, 너는 마..

앱인벤터2 왕초보 강좌 26 : 타이니 DB와 타이니 web DB의 차이 비교

저번 시간에는 타이니 DB에 대해서 설명했고 이번 시간에는 타이니 DB와 타이니 web DB의 차이에 대해서 알아보겠다. 타이니 DB는 앱인벤터 내에서 자체 제공하는 DB라서 별다른 저장소를 필요로 하지 않지만 타이니 webDB는 web이라는 말이 붙어 있어서 알겠지만 web 상에 저장소가 따로 있어야 한다. 사용하는 문법은 타이니 DB와 타이니 webDB가 서로 비슷하다. 그러나 한가지 중요한 차이점이 있는데 웹상에 데이터의 저장소가 따로 있느냐 없느냐의 차이이다. 앱인벤터의 타이니WebDB는 구글의 클라우드 DB를 이용한다. 따라서 타이니WebDB를 이용하려면 구글 클라우드에 사용자의 앱엔진 등록이 되어 있어야 한다. 2~3년 전에는 웹상에서 앱엔진 등록을 받아주었는데 요즘은 웹상에서 받아주지 않고 ..

앱인벤터2 왕초보 강좌 25 : 타이니 DB에 대해서 알아보자

앱인벤터2에서 제공하는 DB에는 4가지 종류가 있다. 그중 가장 쉽게 이용할 수 있는 타이니 DB에 대해 알아보자. 타이니 DB는 외부의 DB를 이용하는 것이 아니라 앱인벤터2에서 제공하는 자체 DB이기 때문에 사용법만 조금 익히면 누구나 쉽게 사용할 수 있다. 팔레트 뷰에서 '저장소' 항목을 클릭해 '타이니 DB'를 스마트폰 화면 가운데 가져가 둔다. 화면 가운데 가져다 두어야 '보이지 않은 컴포넌트'에 나타나지 화면 바깥에 가져다 두면 '보이지 않는 '컴포넌트'에는 나타나지 않으니 주의 해야 한다. 컴포넌트를 수평으로 배치하는 방법은 지난 시간에 했으므로 참고하기 바라고 이번시간에 이용할 것은 '텍스트 박스'이다. 첫번째 줄에는 '레이아웃' 안의 '수평배치' 컴포넌트를 가져가 두고 그 안에 '레이블'..

앱인벤터2 왕초보 강좌 24 : 시계(clock)의 사용법을 알려주마

이번 시간에는 앱인벤터를 사용하면서 어쩌면 가장 많이 사용하는 기능인 시계(clock)에 대해서 알아보도록 하겠다. 먼저 팔레트 뷰에 가서 센서항목을 클릭한 후 시계를 스마트폰 화면 가운데에 가져다 놓는다. 스마트폰 바깥에 시계를 놓으면 보이지 않는 컴포넌트 부분에 나타나지 않으므로 꼭 화면 가운데에 가져다 두어야 한다. 두개의 기능을 시험을 해 보기 위해서 두개의 시계가 필요하므로 두개를 가져다 둔다. 그리고 시계의 타이머 간격을 500으로 둔다. 0.5초를 의미한다. 1초는 좀 느리게 움직이는 감이 있고 0.5초 이하는 너무 빠른 느낌이 있다. 이번 강좌에서는 버튼을 클릭하면 공이 위로 움직이는 기능과 또 다른 버튼을 클릭하면 이미지 스프라이트의 그림이 변하는 기능을 구현해 보려고 한다. 팔레트의 '..

앱인벤터2 왕초보 강좌 23 : 이미지 스프라이트를 이용해 슈팅게임을 만들어 보자

앱인벤터2 '그리기 & 애니메이션' 항목에는 공, 캔버스, 이미지 스프라이트 등 3가지의 컴포넌트들이 들어 있다. 이번 강좌에서는 캔버스 위에 이미지 스프라이트를 배치해서 슈팅게임을 만들어보자. 1.먼저 디자이너 화면에 캔버스를 가져다 두고 높이와 넓이를 '부모 요소에 맞추기'를 선택해 최대로 확대한다. 2. 다음은 그 캔버스 위에 이미지 스프라이트를 3개 배치한다. 이미지 스프라이트는 개수에 제한없이 수십개라도 가져다 둘 수 있다. 3. 이미지 스프라이트에는 전투기, 미사일, 적 등을 배치할 것이므로 인터넷에서 적당한 이미지를 미리 다운받아서 준비해 둔다. 가장 하단의 이미지 스프라이트에는 전투기 그림을 불러올 것이므로 이미지 스프라이트의 이름을 'airplane' 으로 수정한다. 그리고 전투기 바로 ..

앱인벤터2 왕초보 강좌 22 : 캔버스(canvas)에 예쁜 그림을 그려보자.

앱인벤터2의 그리기 & 애니메이션 항목에는 공, 캔버스, 이미지 스프라이트등 3개의 컴포넌트가 준비되어 있다. 공과 이미지 스프라이트는 캔버스 위에 배치되는 소품 정도로 이해하면 되고 가장 중요한 것은 캔버스이다. 캔버스는 그림을 그리는 이젤 정도로 생각하면 가장 이해하기 쉬울 것이다. 이제 캔버스에 그림도 그려보고 글자를 써 보는 등 캔버스를 어떻게 사용하는지 그 방법을 알아보자. 먼저 다음과 같이 디자이너 에디터를 구성한다. 화면 상단에 수평배치 레이아웃을 배치하고 그 안에 버튼 세개를 가져다 둔다. 화면 중간에는 팔레트에서 '그리기 & 애니메이션' 항목에 들어가 캔버스 하나를 끌어다 둔다. 캔버스 아래에도 수평배치 레이아웃을 하나 배치하고 그 안에 버튼 세개를 넣는다. 마지막으로 화면 하단부에는 캔..

앱인벤터2 왕초보 강좌 21 : 음성 인식, 음성 변환, 얀덱스 번역 컴포넌트 사용해서 앱 하나 만들기

앱인벤터2의 미디어 팔레트에는 미디어를 다루는 여러가지 컴포넌트가 있는데 이번 시간에는 비슷한 역할을 하는 '음성 인식, 음성 변환, 얀덱스 번역' 3개의 컴포넌트를 모두 모아서 하나의 앱을 만들어 보도록 하겠다. 음성 인식 컴포넌트로 사람의 음성을 인식하고, 음성 변환 컴포넌트로는 인식된 사람의 음성을 소리로 변환한다. 그리고 얀덱스 번역 컴포넌트로는 영어로 발음한 단어나 문장을 한글로 번역해서 발음하는 간단한 앱을 하나 만들어 보자. 먼저 다음과 같이 디자이너 에디터를 구성한다. 버튼 두개를 배치하고 나머지는 모두 레이블로 배치한다. 버튼 하나는 한글 음성 인식용으로 쓰고 다른 버튼 하나는 영어 음성 인식용으로 쓸 것이다. 화면을 보고 버튼의 텍스트와 레이블의 텍스트를 입력한다. 한글과 영어 두개의 ..

앱인벤터2 인공지능 앱 만들기 3(음성 인식 번역 앱)

이번 시간에는 사람의 음성을 인식해서 모르는 영어 단어를 쉽게 찾아주는 앱을 만들어 보자. 또 얀덱스 번역 컴포넌트를 이용해 검색된 결과를 한글로 표시하고 말로 들려주는 것 까지 만들어 볼 것이다. 먼저 다음과 같은 디자이너 에디터를 구성한다. '음성 인식'과 '다시 듣기' 두개의 버튼을 준비하고 나머지는 전부 레이블을 이용해 디자이너 화면을 구성한다. 또한 보이지 않는 컴포넌트로 '음성인식', '음성변환', '얀덱스 번역'등 3개의 컴포넌트도 필요하다. 음성 인식 버튼을 클릭하면 음성 인식 컴포넌트에서 음성을 인식하고 그에 해당하는 텍스트를 가져온다. 그러면 가져온 텍스트를 '영어 단어 레이블'에 표시하고 음성변환 컴포넌트는 소리를 들려준다. '호출 얀덱스 번역1. 번역요청하기' 세부블록을 보면 'en..

앱인벤터2 왕초보 강좌 20 : 녹음기(Recorder)로 소리 녹음하기

앱인벤터2에는 다양한 미디어 컴포넌트가 준비되어 있어 여러가지 미디어를 다룰 수 있도록 하고 있다. 이번시간에는 녹음기로 소리를 저장하고 재생하는 방법에 대해서 알아보겠다. 먼저 다음과 같이 디자이너 에디터를 구성하자. 좌측 미디어 팔레트에 들어가서 녹음기와 소리 컴포넌트를 화면에 끌어다 두자. 이 두 컴포넌트는 보이지 않는 컴포넌트이기 때문에 화면 하단에 나타난다. 그리고 버튼 3개를 화면에 배치해서 소리를 녹음, 중지, 재생할 수 있도록 한다. 블록 에디터에 들어가서 녹음 버튼과 중지 버튼의 이벤트 블록을 채워주자. 녹음 버튼과 중지 버튼은 '녹음기'에서 소리 녹음을 시작하고 중지 하는 블록을 필요로 하기 때문에 '녹음기' 컴포넌트의 세부블록에서 '녹음기 시작하기'와 '정지' 블록을 끌어와 각각 끼워..

앱인벤터2 왕초보 강좌 19 : 플레이어(Player)와 소리(Sound) 컴포넌트의 차이

이번 시간에는 앱인벤터2 왕초보 강좌 19번째 시간으로 플레이어와 소리 컴포넌트의 차이에 대해서 알아보겠다. 먼저 다음과 같은 디자이너 화면을 구성한다. 플레이어와 소리 컴포넌트의 차이점을 알아보기 위해 각 컴포넌트의 재생과 중지 두개씩의 버튼을 준비한다. 수평배치 레이아웃을 두개 배치하고 그 안에 재생, 중지 두개씩의 버튼을 가져다 둔다. 속성은 알아보기 편한대로 적당히 수정한다. 먼저 플레이어 컴포넌트의 사용법에 대해서 알아보자. 플레이어 컴포넌트의 도움말을 보면 '오디오를 재생하고 전화 진동을 제어하는 멀티미디어 구성 요소. 멀티미디어 필드의 이름은 디자이너 또는 블록 편집기에서 설정할 수있는 소스 속성에 지정됩니다. 진동의 시간 길이는 밀리 초 (천분의 1 초) 단위로 블록 편집기에 지정됩니다. ..

앱인벤터2 인공지능 앱 만들기 1(사물 인식 인공지능 앱)

앱인벤터2에는 인공지능을 이용할 수 있는 확장 기능이 있어 여러가지 인공지능 앱을 만들어 볼 수 있다. 이번 시간에는 앱인벤터2 인공지능 만들기 1 시간으로 여러 확장기능중 사물 인식 기능이 있는 LookExtension을 import해 보고 앱인벤터2에 적용하는 방법을 알아보자. 앱인벤터2에서 새로운 프로젝트를 하나 시작한다. '도움말'에 들어가서 '확장기능'을 선택한다. 그러면 'MIT App Inventor Extensions'페이지로 들어간다. 여기에는 앱인벤터에서 제공하는 여러가지 '확장기능'이 있다. 이 중에서 'LookExtension.aix' 파일을 클릭해 보자. 그러면 'LookExtension.aix' 파일이 사용자의 컴퓨터 다운로드 디렉토리에 다운이 될 것이다. 팔레트에서 '확장기능'..

앱인벤터2 왕초보 강좌 18 : 이미지 선택 버튼(imagePicker)으로 사진넣기

이번 시간에는 이미지 선택 버튼의 사용법에 대해서 알아보고 작성한 앱을 직접 실행해 어떻게 적용되는지 알아보자. 먼저 다음과 같이 디자이너 에디터를 구성한다. 미디어 섹션에서 이미지 선택 버튼(imagePicker)을 드래그해 화면 상단에 배치하자. 레이블 하나는 이미지 선택버튼이 제대로 작동하는지를 알아보기 위해 텍스트를 보여 줄 것이다. 다음으로 '그리기 & 애니메이션'에서 '캔버스'를 하나 꺼내서 화면 하단부에 배치하고 높이와 너비를 '부모 요소에 맞추기'로 설정한다. 이미지 선택버튼의 이벤트 블록안에 이미지1 컴포넌트의 '지정하기 이미지1. 사진 값' 블록을 끼워넣자. 이미지 선택 버튼의 세부 블록을 보면 'imagePicker1. 선택된 항목' 블록이 있다. 이 블록을 이미지1 컴포넌트의 '지정..

앱인벤터2 왕초보 강좌 17 : 카메라(Camera)로 사진 촬영하기

이번 시간에는 미디어 섹션에 있는 '카메라'로 사진 촬영하는 법을 알아보자. 카메라로 사진을 찍기 위해서는 사진을 보이기 위한 '이미지'나 '캔버스'가 있어야 한다. 먼저 다음과 같이 디자이너 에디터를 준비하자. 팔레트의 '그리기 & 에니메이션' 파트에서 캔버스를 화면 중앙에 배치한다. 처음 캔버스를 가져가 두면 작은 크기의 캔버스가 나타난다. 속성창에 가서 캔버스의 높이와 너비를 '부모 요소에 맞추기'로 설정한다. 하단부에 버튼을 하나 가져다 두고 이름과 텍스트를 적당히 입력한다. 미디어섹션에서 카메라를 하나 드래그해서 화면 중앙에 드랍해 보자. 카메라는 보이지 않는 컴포넌트이기 때문에 스마트폰 화면에 나타나지 않고 스마트폰 하단부에 표시된다. 이제 블록 에디터에 가서 블록들을 배치해 보자. 먼저 버튼..

앱인벤터2 왕초보 강좌 16 : 캠코더(Camcoder)로 동영상 촬영하기

앱인벤터2에는 미디어섹션에 캠코더를 비롯한 카메라, 녹음기, 비디오 플레이어등 미디어에 관련된 여러가지 컴포넌트들이 준비되어 있다. 시간나는 대로 캠코더 부터 시작해 하나하나 강좌를 준비해 보도록 하겠다. 이번 시간에는 '캠코더의 사용법' 시간으로 캠코더로 동영상을 촬영하고 재생하는 것 까지 배워보도록 하자. 먼저 다음과 같이 디자이너 에디터를 준비하자. 상단에 버튼 두개 배치해서 '녹음 시작'과 '재생'이라고 글자를 입력하자. 버튼의 이름도 'start', 'replay'등으로 변경시켜 준다. 하단부에는 '비디오 플레이어'를 끌어다 두고 비디오 플레이어가 하단부 전체를 차지하도록 크기도 조정한다. 높이와 너비를 '부모 요소에 맞추기'로 설정하면 된다. '캠코더' 컴포넌트는 화면에 직접 나타나는 요소가 ..

앱인벤터2 강좌 37 : 숫자 정렬(sorting)을 배워보자.

앱인벤터로 앱을 .여러개 만들다 보면 어느 순간 숫자 정렬에 관한 문제에 마주치게 된다. 점수를 계산한다든지, 돈을 누가 많이 내야 하는지 등등 여러가지 상황에서 숫자를 정렬해야 하는 문제에 마주치게 되는 것이다. 오름차순으로 정렬하건, 내림차순으로 정렬하건 상관없이 숫자를 정렬해야 하는 문제에 마주치게 되면 골머리를 썩히게 된다. 숫자정렬(sorting)에 관한 문제는 앱인벤터 뿐만 아니라 다른 랭귀지에서도 중요한 문제로 부각되는데 이는 정렬 알고리즘이라는 한 부분의 챕터가 마련되어 있을 정도로 중요한 파트이기 때문이다. 주요 정렬 방법론으로는 비교정렬, 제자리 정렬, 온라인 정렬등 3가지 방법론이 존재하는데 각 방법론 마다 따로 저명한 정렬 알고리즘이 존재한다. 일반 스크립트 코딩에서는 반복문이나 루..

반응형