sfex tistory blog

말하는 톰 앱입니다.

​

- 음성인식 추가 컴포넌트를 사용합니다. 기본으로 지원하는 음성인식은 구글 음식인식화면이 뜨고, 추가 컴포넌트는 화면에 표시 없이 인식...

​

- 텍스트를 음성으로 출력 컴포넌트를 활용합니다.

앱 구상

​

[참고 앱]

https://youtu.be/f8cGYGmMWFQ

기본기능

1. 음성인식

2. 인식한 문장을 음성으로 출력

앱 제작

​

1. 화면 디자인

- 구글 음성인식 대신 사용할 음성인식 컴포넌트를 설치합니다.(귀찮으시면 기본으로 지원하는 음성인식 사용하시면 됩니다.)

https://community.appybuilder.com/t/voice-recognition-extension-without-google-dialogue/21052

첨부파일

​

- 인터넷에서 talking tom animated gif 로 적당한 이미지를 검색하고 webviewer component 의 home url로 설정합니다.

​

​

2. 블록 코딩

- 버튼을 누르면 음성인식 시작

- 음성인식이 완료되면 웹페이지를 말하는 그림으로 바꾸고, 인식된 문장(text)를 음성으로 출력

- 음성출력이 끝나면 1초 뒤 웹페이지를 원래 그림으로 바꿈.

​

3. 실행 화면

4. 소스 파일(aia)

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

현재 자체 component로 구현이 안 된 목록 드래그 위치 변경 기능을 webviewer의 javascript 실행 기능을 활용하여 구현한 것입니다.

- webviewer를 통해 javascript를 실행하실 수 있습니다.

- 간단한 로컬DB 사용법을 알 수 있습니다.

앱 구상

[참고 앱]

http://puravidaapps.com/sortable.php

App Inventor Tutorials and Examples: Sortable | Pura Vida Apps

A Sortable List using Drag-and-Drop with App Inventor and jQuery UI The example displays an App Inventor list in a jQuery UI Sortable . Thank you furf , together with your jQuery UI Touch Punch library we can use drag and drop on the mobile device to order the list items manually. 

기본기능

1. 드래그로 목록 순서를 변경

2. 목록 순서를 휴대폰에 저장

앱 제작

1. 화면 디자인

- 필요한 파일들을 올려주세요.

jquery-ui.css

ui-lightness-jquery-ui.css

ui-icons_ef8c08_256x240.png

jquery-1.7.2.min.js

jquery-ui.min.js

jquery.ui.touch-punch.min.js

2. 블록 코딩

- WebViewer에 띄울 html file을 셋팅하는 루틴

- 로컬 DB를 읽어오기, 자료가 없으면 목록을 초기값으로 설정

- 순서바꾸기를 터치하면 webviewer를 띄우고 html에 전달할 목록을 셋팅 후 web page javascript 실행

- 저장버튼을 터치하면 webviewer를 감추면서 webviewer의 CurrentPageTitle을 통해 결과값 가져오고 로컬DB에 저장

3. 실행 화면

4. 소스 파일(aia)

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

휴대폰 화면보다 큰 이미지를 배경으로 드래그 스크롤 하면서 동작하는 앱을 만들 때 사용하면 좋겠습니다.

​

- 기본 원리는 canvas 위쪽과 왼쪽에 크기 조절용 component (VerticalArrangement, HorizontalArrangement, Image, 등) 을 두고 이것의 크기를 조절하면 canvas 중에서 휴대폰 화면에 보이는 부분이 정해지는 원리입니다.

앱 구상

​

[참고 앱]

https://appinventor.mit.edu/explore/blogs/karen/2018/03.html

Responsive Design: Drag a Canvas larger than screen size

​

기본기능

​

1. 화면보다 큰 이미지를 canvas 배경으로 설정하고 드래그 스크롤 가능하도록 한다.

2. canvas에 image sprite를 추가하고 드래그하여 움직일 수 있도록 한다.

앱 제작

​

1. 화면 디자인

​

​

2. 블록 코딩

​

- 변수 설정

- canvas 크기를 결정할 배경 이미지 크기

- 처음 휴대폰 화면크기

- 위치 조절용 component의 최대 크기

- 시작하면 init 함수 호출

​

- canvas 크기와 배경 이미지 설정

- 전체 화면크기는 배경 이미지 * 2

- 보이는 부분을 결정하는 크기 조절용 component (sH, sW) 크기 설정

- 크기 조절용 component (sH, sW) 최대 크기 저장

​

- canvas를 드래그했을 때 image sprite를 드래그한 것이 아니라면 (빨간 box)

- 드래그한 만큼 크기 조절용 compnent 크기 변경

​

- image sprite 드래그하여 위치 변경

​

3. 실행 화면

​

4. 프로그램 소스(aia)

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

[make app] app inventor 소개

​

canvas -> image sprite -> drage 이용하여 단어와 그림을 잇는 게임입니다.

​

앱인벤터 (한글 화면)에서 작성하였습니다.

http://ai2.appinventor.mit.edu/?locale=ko_KR

앱 구상

​

[참고 앱]

https://youtu.be/dkUkH9D1JrY

기본기능

​

1. canvas에 있는 이미지를 드래그하여 움직일 수 있도록 한다.

2. 서로 충돌할 경우 연결된 이미지이면 정답 처리한다.

3. 전체 성공시 축하 메시지와 함께 음성도 출력한다.

앱 제작

​

1. 화면 디자인

​

​

2. 블록 코딩

​

​

3. 실행 화면

​

4. 프로그램 소스

관련 글

​

앱인벤터 소개

https://blog.naver.com/sfex/221994450104

기억 퍼즐게임

https://blog.naver.com/sfex/222011042941

이미지 카드 위치를 기억했다가 같은 이미지끼리 뒤집는 퍼즐 게임입니다.

​앱인벤터 (한글 화면)에서 작성하였습니다.

http://ai2.appinventor.mit.edu/?locale=ko_KR

앱 구상

​

[참고 앱]

https://youtu.be/sEPxqpFZit8

기본기능

​

1. 카드 랜덤 배열

2. 같은 카드면 OK

3. 타이머를 이용하여 잠깐만 보여주기

앱 제작

​

1. 화면 디자인

​

- 타이머 간격을 700 (0.7초)로 설정하였습니다. (타이머(시계1)을 활성화하면 설정 타이머간격마다 '타이머가 작동할때'를 실행합니다.)

​

2. 블록 코딩

- 전역변수 설정 및 화면 처음시 실행 부분입니다.

- 첫 번째 선택, 두 번째 선택에는 게임 진행하는 동안 첫 번째, 두 번째 선택한 버튼을 저장합니다.

- 매칭카운터는 매칭에 성공한 횟수를 저장합니다. 3이 되면 게임 성공입니다.

- 게임판에는 임의로 선택한 버튼과 그림을 저장합니다. (버튼으로 검색하여 그림을 불러올 수 있습니다.)

- 매칭완료에는 매칭에 성공한 버튼들을 저장합니다.

- 버튼들은 게임 버튼들을 리스트로 저장하여 일괄로 처리할 수 있도록 합니다.

- Sreen1 이 처음 시작되면 초기화 함수를 실행합니다.

- 초기화 함수입니다.(게임을 새로 세팅합니다.)

- 버튼 활성화를 (마우스 오른 버튼 -> 메뉴 -> 일반만들기) 일반화하여 모든 게임 버튼을 일괄로 처리합니다.

- 그림 3개를 각 2개씩 랜덤 한 위치에 배치합니다.

​

​- 버튼 클릭 했을 때 실행

- '버튼 클릭시'를 역시 일반화(버튼 클릭시 -> 마우스 오른 버튼 -> 메뉴 -> 일반만들기) 하여 모든 버튼에 대해 동작을 일괄 설정합니다.

(만약(if) 조건문으로 리셋 버튼은 초기화 호출 나머지 게임 버튼은 뒤집기 함수를 호출합니다.

​

- 뒤집기 함수입니다.

- 누른 버튼의 설정된 이미지를 보여주고, 다시 클릭하지 못하도록 비활성화합니다.

- 첫 번째 선택이면 누른 버튼을 첫 번째 선택에 저장합니다.

- 두 번째 누른 것이라면(첫 번째 누른 것이 아니면) 저장된 첫 번째 누른 버튼과 비교하여 같으면 (매칭에 성공하면)

- 매칭카운터를 1 증가

- 첫 번째 선택 변수를 초기화

- 첫 번째 선택과 두 번째 선택을 매칭완료에 저장

- 첫 번째 선택과 두 번째 선택이 달라서 매칭에 실패하면

- 전체 게임 버튼을 누르지 못하게 비활성화

- 타이머를 동작시켜 잠시만 보여줍니다.

- 매칭카운터가 3에 도달하면 (다 찾았으면) 성공 메시지를 보여줍니다.

​

- 타이머 활성시 일정 간격마다 실행되는 부분입니다. 

- 매칭에 실패 시 잠시만 보여주기 위한 타이머 내용입니다.

- 타이머가 설정한 시간에 도달하면

- 첫 번째, 두 번째 선택 버튼을 다시 뒤집기

- 전체 게임 버튼에 대해서 찾은 버튼 이외 버튼은 다시 누를 수 있도록 활성화

- 타이머 다시 멈춤

- 첫 번째, 두 번째 선택 변수 초기화

​

3. 실행 화면

​

4. 프로그램 소스 aia 파일

관련 글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

[참고 앱]

​https://youtu.be/RtbCqZvhkUU

 
https://youtu.be/Z9ad_GS5qF8

기본기능

​

1.Firebase 이미지(file) 가져오기

​

2.휴대폰에 이미지(file) 파일로 저장하기

- 이미지 파일 저장은 canvas를 이용하였습니다.

- 읽어들일 때 Image component 사이즈 안맞으면 나타나지 않을 수 있습니다. 오토로 해보세요.

​

앱 제작

​

1. 화면 디자인

​

- Firebase 설정 부분은 동영상 참고하세요.

화면디자인 (firebase 설정)

​

​

2. 블록 코딩

​

화면시작되면 Firebase 에서 이미지를 요청하고 응답이 오면 Image component 에 셋팅하면 됩니다.

​

​

이미지 file로 저장은 Canvas component 를 이용합니다. (TinyDB 는 text만 저장할 수 있습니다.)

3. 앱 실행 화면 및 aia file

​

- 이번 앱은 kodular 에서 만들었습니다. kodular -> https://c.kodular.io/

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104

앱인벤터 처음 접근하기는 쉬우나 조금 복잡해지면 블록코딩 하기 어렵다.

특히 많은 버튼을 이용할 경우 각 버튼별로 같은 루틴을 설정하는 것이 삽질처럼 느껴진다.

이때 적용할 팁을 알려드립니다.

[참고] http://ai2.appinventor.mit.edu/reference/other/any-component-blocks.html

버튼1 에 대해 처리해야 하는 내용을 마우스 오른 버튼 누르면 나타나는 메뉴에서 Make Generic 을 선택하면

when any Button.Click 으로 변환되고 모든 버튼에 대해 동일한 처리를 한꺼번에 설정할 수 있다.

예제파일 설명

첨부된 aia 파일은 지뢰 찾기나 단어 퍼즐 같은 게임에 사용할만한 기본 화면과 코딩을 예제로 작성한 것입니다.

- 실행화면

- 모든 버튼을 하나로 묶어서 변수로 선언 코딩

- 처음 화면 설정 코딩

- 버튼이 클릭되었을 때 색깔반전 코딩

관련글 : 앱인벤터 소개

https://blog.naver.com/sfex/221994450104