대디의 IT공방

메뉴-아이콘

프로그래밍/앱 인벤터(App Invertor) (18)

앱인벤터2 에뮬레이터 설치방법

프로그래밍/앱 인벤터(App Invertor) 아빠달 2018. 11. 20. 11:08

앱인벤터2에서 프로그램을 실행하는 방법은 에뮬레이터, 무선랜을 실행해서 실행시키는 방법, USB를 이용하여 실행시키는 방법 총 3가지 방법이 있습니다. 이 3가지 방법중 에뮬레이터를 이용하여 컴퓨터에서 앱인벤터 파일을 실행하는 방법을 알아보겠습니다. 앱인벤터에서 에뮬레이터를 실행하기 위해서는 앱인벤터2 에뮬레이터를 다운받아 설치해야 합니다. 설치 과정부터 알아보도록 하겠습니다. 앱인벤터2 에뮬레이터 설치방법앱인벤터2 에뮬레이터를 설치하기 위해서는 앱인벤터 사이트에 접속을 하셔야 합니다. 사이트 접속 후 상단에 있는 Resources를 클릭 후 Troubleshooting을 클릭합니다. 조금 아래에 있는 USing the Emulator를 클릭합니다. 중간에 "How to update the App Inv..

앱인벤터 데이터 저장 - TinyDB 사용하기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2017. 3. 19. 08:00

앱인벤터 데이터 저장 - TinyDB 사용하기 앱인벤터에서는 기본 저장소를 제공해 주고 있습니다. TinyDB라는 저장소에 데이터를 저장했다가 다시 불러오는 연습을 해보도록 하겠습니다. TinyDB 는 태그라는 이름으로 저장을 시키는데요. 예를 들어 입력 전화번호 앱을 만든다면 이름과 전화번호가 들어가겠지요? 이름을 A, 전화번호가 000 일때 찾을 때도 A로 찾으면 000이 나옴니다. 실제로 한번 보는게 이해하시기가 빠르겠지요? 화면 디자인하기 먼저 버튼과 텍스트 박스 그리고 라벨을 이용하여 아래 그림처럼 배치를 시켜 줍니다. 그리고 버튼의 속성에서 버튼 텍스트를 저장하기와 불러오기로 수정해 줍니다. 그리고 저장소 Storage에서 빈화면에 옮겨 줍니다. 그러면 화면 디자인은 끝이 납니다. 아주 간단하..

앱인벤터 시간 표시 - 시계앱만들기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2017. 3. 17. 01:36

앱인벤터 시간 표시 - 시계 앱만들기 이번에는 간단하게 시간이 계속 출력되는 간단한 시계앱 예제를 만들어 보겠습니다. 시간 관련 컴퍼넌트는 Clock 이라는 컴포넌트를 사용합니다. Clock 컴퍼넌트는 시간을 알려주거나 타이머가 필요할때 사용하는 컴퍼넌트입니다. 시간 표시 앱 디자인하기 먼저 새 프로젝트를 실행 시킨 다음 Label을 컴퍼넌트를 오른쪽 화면에 옮겨 놓습니다. 이번에는 Sensors에 들어 있는 Clock 컴퍼넌트를 화면에 옮겨 놓으면 아래 하단에 보이지 않는 컴퍼넌트로 이동을 합니다. Label 위치를 가운데로 변경하려면 스크린을 선택을 한 다음 AlignHorizontal 속성을 Center:3 으로 변경합니다. 그러면 라벨 위치가 가운데로 이동합니다. 시계 앱 코딩하기 시계는 앱이 보..

앱 인벤터 - 지도검색 만들기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2017. 1. 15. 16:57

구글 지도 서비스를 이용하여 찾고자 하는 곳의 위치를 찾아보는 앱 인벤터 지도검색 앱을 만들어 보겠습니다. 지도 검색 서비스는 간단하게 만들 수 있는데요. 이번 시간에는 ActivityStarter 컴포넌트 활용하여 구글 맵과 연하는 하는 방법을 알아보도록 하겠습니다. 앱 인벤터 지도 검색 앱 만들기화면디자인필요한 것은 찾고자 하는 장소를 입력하는 텍스트 상자와 지도 검색을 할 수 있게 만드는 버튼 하나만 있으면 됩니다. 1. 아래 그림처럼 텍스트 박스와 버튼을 배치합니다. 2. 컴퍼넌트에서 Button1을 선택하고 속성에서 텍스트를 [지도보기]로 변경시켜 줍니다. 3. 연결에서 액티비티 스타터를 스크린에 옮겨 놓으면 아래 보이지 않는 컴포넌트로 이동합니다. 4. 액티비티 스타터를 클릭하고 Ation과 ..

앱인벤터 - 위치센서 사용방법

프로그래밍/앱 인벤터(App Invertor) 아빠달 2017. 1. 14. 09:43

앱인벤터 센서 기능 중 위치 센서 사용방법을 알아보도록 하겠습니다. 앱인벤터 위치 센서는 위도, 경도뿐만 아니라 고도, 현재 위치 주소까지 알려줍니다. 이번 시간에는 앱인벤터 위치 센서를 가지고 현재 위치의 위도, 경도, 현재 주소를 알아보는 예제를 만들어 보도록 하겠습니다. 앱인벤터 위치센서 이용하여 현재 위치 주소 알기 화면 디자인하기 1. 화면 디자인을 하겠습니다. 사용자 인터페이스에서 버튼과 레이블을 옮긴 다음 버튼을 클릭하고 오른쪽에 있는 속성 중 텍스트 속성에서 버튼은 [현재 위치] 나머지 레이블은 [위도 표시], [경도 표시], [주소 표시]로 변경해줍니다. 2. 그리고 컴포넌트에서 각각의 버튼과 레이블 이름도 변경시켜줍니다. 그래야 나중에 헷갈리지 않습니다. 3. 이제는 필요한건 위치센서입..

앱인벤터 강좌 전화걸기 연결 예제

프로그래밍/앱 인벤터(App Invertor) 아빠달 2017. 1. 11. 13:57

이번 시간에는 앱인벤터 강좌 전화번호 연결하는 예제를 만들어 보도록 하겠습니다. 이렇게 예제 하나하나 만들다 보면 제대로 된 앱 하나 만들 수 있겠조? 전화번호 앱은 동작 예제는 텍스트 박스에 전화번호를 입력하고 버튼을 클릭하면 바로 전화를 거는 것과 버튼을 클릭하면 전화번호부 목록이 나타나는 프로그램을 만드는 것입니다. 화면 디자인하기 1. 사용자 인터페이스에서 텍스트 상자와 버튼을 하나씩 가져와 배치를 시켜줍니다. 여기서 텍스트 상자에 전화번호를 넣고 버튼을 누르면 전화통화를 할 수 있게 만들 것입니다. 2. 소셜을 클릭하면 [전화번호 선택]이 있습니다. 선택을 한 다음 끌어 놓습니다. 여기서 [전화번호 선택] 버튼을 클릭하면 전화번호부 앱이 나타나게 할것입니다. 3. [전화]도 컴포넌트에 넣습니다...

앱인벤터 그림그리기 앱만들기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 11. 19. 18:00

엔트리와 스크래치2.0 로 그림판을 아주 간단히 만들어 봤는데요 이번에는 앱인벤터로 그림을 그릴 수 있는 간단한 앱을 만들어보겠습니다. 이번 시간에는 간단하게 손으로 스마트폰 화면을 안에서 손가락으로 드래그하면 선이 그려지는 그림그리기앱을 만들어 보겠습니다. 앱인벤터 그림그리기 앱만들기 화면 디자인 그림을 그리기 위해서는 그림을 그릴 수 있는 스케치북 같음 무언가가 필요한데요 앱을 만들 때에도 그 무언가가 필요합니다. 여기서는 캔버스라는 컴퍼넌트가 필요합니다. [그리기 & 애니메이션]을 클릭한 다음 [캔버스] 를 드래그하여 뷰어에 옮겨 놓습니니다. 이번에는 캔버스의 크기를 맞춰 줄 것입니다. 화면 전체 다 사용을 할 것이기 때문에 화면을 크게 맞춰 줘야합니다. 먼저 컴포넌트에 있는 [캔버스1]을 선택을 ..

앱인벤터 강좌 - 스크린 이동하기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 9. 27. 15:57

입인벤터 강좌 - 스크린이동 프로그램을 작성하다가 보면 하나의 스크린에만 작업을 하는 것이 아니라 여러 스크린을 이용하여 결과 값을 전달하거나 화면 전환이 필요할 때가 있는데요 이번에는 앱인벤터에서 스크린 이동하는 방법에 대해 알아보도록 하겠습니다. 앱 인벤터 스크린 이동하기 화면 디자인하기 1. 사용자 인터페이스에서 [버튼]을 클릭하여 호면 처럼 이동을 시켜 줍니다. 2. 옮겨 놓은 버튼을 클릭한 다음 오른쪽 하단에 있는 속성 중 [텍스트]에 있는 내용을 "스크린 2로 이동"변경해 줍니다. 3. 이번에는 스크린을 추가 시켜 보겠습니다. 메뉴에서 [스크린 추가] 버튼을 클릭합니다. 메세지 창이 나타는데 스크린 이름은 원하는 이름으로 입력하시면 됩니다. 그리고 확인 버튼을 눌러줍니다. 4. 아래 그림 처럼..

앱인벤터 강좌 - MP3 음악 재생 앱 만들기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 9. 1. 16:35

이번 앱인벤터 강좌에서는 mp3 음악 파일을 재생시켜 보도록하겠습니다. 앱 인벤터의 player 컴퍼넌트를 이용하여 간단한 음악 파일을 재생시켜 보도록 하겠습니다. 앱 인벤터 MP3 음악 재생 앱 화면 구성하기 팔레트에서 버튼 버튼 3개를 가져다가 화면에 그림과 같이 배치를 먼저 하도록 하겠습니다 Media에 들어가서 Player를 클릭한 다음 드래그하여 화면에 옮겨 놓으면 [보이지 않는 컴포넌트]로 이동됩니다. 배치가 완료 되고 나면 각 버튼을 클릭하여 속성에서 텍스트 글자를 재생, 일시정지, 멈춤으로 텍스트를 변경해 주시고 컴퍼넌트에서 버튼의 이름도 Button1_R, Button1_P, Button1_S로 변경을 해주세요 이제 재생할 음악 파일을 업로드 해야 합니다. 컴포넌트 밑에 있는 Media에..

앱인벤터 강좌 - 카메라 이용하여 사진찍기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 7. 30. 08:00

앱인벤터 강좌- 카메라 이용하여 사진찍기 앱인벤터에 있는 카메라 컴포넌트를 이용하여 사진찍는 앱을 만들어 보겠습니다. 앱인벤터 카메라 - 사진찍기 사진을 찍는 앱을 만들 때 사진을 찍는 블럭과 찍은 후 그 이미지를 가지고 스마트폰 화면에 보여지게하는 부분을 만들어야합니다. 화면구성▲ 화면 구성은 버튼과 이미지 카메라 컨퍼넌트를 가져다 놓고 그림과 같이 배치를 합니다.그리고 버튼의 이름을 변경해 줍니다. 블럭 구성▲ 버튼과 카메라1 에서 블럭을 가져와 넣습니다.버튼을 클릭하면 카메라를 호출하게 됩니다. ▲ 카메라에서 사진을 찍으면 화면에 보여줘야하는 부분을 만드는 것입니다.카메라에서 사진을 찍은 후 사진을 이미지에 넣으라는 뜻입니다. ▲ 이미지1에 카메라1에서 찍은 사진을 가져와 넣으라는 명령입니다. ▲ ..

앱인벤터 강좌 - 캔버스 이용하여 그림그리기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 7. 29. 14:19

앱인벤터 강좌 캔버스 - 그림그리기 앱인벤터 이번 시간에는 캔버스를 이용하여 스마트폰 화면에 그림을 그려 보도록 하겠습니다. 앱인벤터 캔버스 - 그림그리기 화면구성 ▲ 팔레트에서 [그리기&애니메이션]에 들어 있는 캔버스를 뷰어 화면에 옮겨 놓습니다. ▲ 캔버스 속성에서 높이와 너비를 부모에 맞추기를 선택하여 캔버스가 화면에 꽉 차게 합니다. 블록설정하기 ▲ 블록으로 이동한 뒤 [캔버스1]을 클릭하여 위 블록을 가져와 배치를 합니다. ▲ 캔버스에서 우리가 할 일은 선을 그리는 일이기 때문에 [호출 캔버스1. 선그리기]블록을 가져옵니다. ▲ 블럭을 위 그림 처럼 두개를 맞춰 줍니다. ▲ 이전X 위에 마우스를 올려 놓으면 위 그림 처럼 [가져오기 이전 X]와 [지정하기 이전X]값이 나타납니다. [가져오기 이전..

앱인벤터 강좌 - 음성인식 컴포넌트 활용하기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 7. 2. 07:49

앱인벤터 강좌 - 음성인식 컴포넌트 활용하기 첫 시간에 텍스트를 음성으로 변환시겨 보았는데요이번에는 반대로 음성인식 컴포넌트를 이용하여 텍스트로 출력해보겠습니다. 앱인벤터 음성인식 컴포넌트 실행 동영상 어플리케이션 실행 조건1. 버튼을 클릭하면 음석인식 컴포넌트를 실행시킨다.2. 음성인식 컴포넌트가 실행 되어 음성인식을 시작합니다.3. 음성 인식이 끝나면 레이블에 텍스트가 표시된다. 화면 구성▲ 위 그림 처럼 버튼과 레이블을 배치하고 버튼의 이름과 텍스트를 변경시겨 주세요 ▲ 미디어에서 [음성인식] 컴포넌트를 뷰어 화면에 옮겨 놓으면 3번 보이지 않는 컴포넌트 안에 [음성 인식] 컴포넌트가 자동으로 들어갑니다. 블록 설정하기▲ 음성인식 버튼을 클릭하여 실행 블록을 옮겨 놓습니다. ▲ 음성인식 컴포넌트를 ..

앱인벤터 강좌 - 합치기 블록 사용하기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 6. 28. 10:34

앱인벤터 강좌 - 합치기 블록 사용하기 지난 시간에는 텍스트 박스를 하나 만들어 봤는데요이번에는 두개의 텍스트 박스를 만들어 가각 내용을 하나로 합쳐음성으로 변환하는 예제를 만들어 보겠습니다. 앱인벤터 합치기 블록 실행 동영상 꼭 알아두기앱인벤터에는 여러가지 블록들이 있지만 그 중 합치기 블럭도많이 사용합니다. 꼭 사용방법을 익혀 두는게 좋습니다. 어플리케이션 실행 조건1. 두개의 텍스트 상자에 문자를 입력한다2. 버튼을 클릭하면 두개의 텍스트 상자에 내용을 음성으로 변환한다. 화면 구성▲ 텍스트 상자를 두개 배치를 시키고 버튼 1개를 그림처럼 배치합니다.그리고 텍스트 상자와 버튼 컴퍼넌트의 이름을 하나 하나 변경해 줍니다. 블록 설정하기▲ 버튼에서 "언제 실행~" 블록과 음성_변환에서 "호출 음성_변환..

앱인벤터 강좌 - 텍스트 음성으로 변환하기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 6. 26. 23:23

앱인벤터 강좌 - 텍스트 음성으로 변환하기 앱인벤터로 간단한 예제를 한번 만들어보겠습니다.텍스트 상자에 글씨를 입력하고 버튼을 누르면 텍스트 상자에 있는 문자를 음성으로 변화하여 읽어주는 앱을 만들어 보겠습니다. 앱인벤터 텍스트 음성으로 변환 실행 동영상 꼭 알아두기컴퍼넌트를 추가하는 방법과 이름을 변경하는 방법블록 사용하는 방법을 꼭 알아두시기 바랍니다. 어플리케이션 실행 조건1. 텍스트 상자에 문자를 입력한다.2. 버튼을 클릭하면 텍스트 상자에 있는 문자를 음성으로 변환시켜 준다. 화면 구성하기▲ 먼저 새로운 프로젝트를 생성해 줍니다.파일이름은 꼭 시작을 영문으로 시작해야합니다. ▲ 사용자 인터페이스에 있는 텍스트 상자와 버튼 상자를 클릭하여 위에 그림 처럼 배치를 시켜 줍니다. ▲ 컴포넌트에서 텍스..

앱인벤터 강좌 - AI 컴패니언 설정하기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 6. 16. 15:08

앱인벤터에서 앱을 제작하는 동안 실제 앱이 제대로 동작을 하는지 보려는 작업을 [라이브 테이트]라고 합니다. 연결을 클릭해 보면 라이브테스트 설정하는 방법은 AI companion, Emulator, USB 방법 3가지가 있습니다. ▲AI companion, Emulator, USB 각각의 연결 방법을 알아보도록 하겠습니다. ▲ AI컴패니언(AI companion) AI컴패니언(AI companion) 방법은 앱인벤터에서 권장하는 방법으로실시간으로 앱 동작을 확인 할 수 있는 방법입니다.전제 조건은 안드로이드 기기와 컴퓨터가같은 망으로 연결이 되어 있어야 한다는 것입니다. ▲ 에뮬레이터 이 방법은 안드로이드 기기가 없을 경우 사용하면 좋은 방법입니다. 단점은 속도가 많이 느립니다. ▲ USB와 스마트폰을..

앱인벤터 강좌 - 언어 설정 한국어로 선택하는 방법

프로그래밍/앱 인벤터(App Invertor) 아빠달 2016. 6. 14. 11:06

앱 인벤터에 한국어 버전이 있습니다. 기본은 영어로 되어 있는데요 영어가 편하신 분들은 영어로 작성하셔도 됩니다. 그래도 저는 영어보다는 한글을 좋아해서 한글 버전으로 작성을 합니다 ^^; 그럼 앱 인벤터 언어 설정을 변경해 보겠습니다. 언어 설정 변경은 아주 간단합니다. ▲ Create apps로 들어갑니다. ▲ English를 클릭합니다. 그러면 다른 나라의 언어들이 나오는데요 그 중에 한국어가 있다는 정말 자랑스럽습니다. ^^ 한국어를 선택해 주세요 ▲ 각 항목별로 클릭해 보면 사용자 인터페이스 부분도 한글로 변경이 되었고요 ▲ 코드 블록도 모두 한글로 변경이 되었습니다. 옛날 대학에서 프로그래밍 언어를 배울 때 왜 언어들은 모두 영어로 되어 있을까? 한글로 되어 있으면 얼마나 좋을까? 하고 생각을..

앱인벤터 강좌 02 - 첫 어플리케이션 만들기

프로그래밍/앱 인벤터(App Invertor) 아빠달 2015. 7. 22. 14:16

앱 인번터로 첫 애플리케이션을 만들어 보겠습니다. 스크래치 처럼 블럭을 이용하여 프로그래밍을 할 수 있는데요 첫 프로그램을 버튼을 클릭하면 " 안녕!!! 앱 인벤터!!" 라는 단어가 나오게 한번 만들어 보고 스마트폰에서 실행까지 해 보도록하겠습니다. 팔레트와 컴포넌트 속성 디자이너 및 블록 에디터를 설명을 먼저 알려드려야 겠지만 내가 작업하는게 먼지 만들어봐야 형태가 잡힌다고 생각되어서 우선 만들어 보고 프로그램을 만들어 보면서 그때 그때 설명을 하도록 하겠습니다. 첫 애플리케이션 만들기 " 안녕!!! 앱 인벤터 !!" 첫 애플리케이션 만들기에서는 버튼을 클릭하면 반응을 하는 앱을 만들어 보겠습니다. 버튼을 클릭하면 " 안녕!!! 앱 인벤터 " 입니다. ▣ [Start new project] 버튼을 클릭..

Copyright © 대디의 IT공방 All Rights Reserved
Designed by JB FACTORY

티스토리툴바