반응형

말하는 톰 앱입니다.

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

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


앱 구상

[참고 앱]

https://youtu.be/f8cGYGmMWFQ

 

기본기능

1. 음성인식

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


앱 제작

1. 화면 디자인

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

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

첨부파일

ScSpeechRecognizerV8.aix
0.02MB

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

2. 블록 코딩

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

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

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

3. 실행 화면

4. 소스 파일(aia)

talking_tom_20200715.aia
0.03MB


관련글 : 앱인벤터 소개

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

 


 

반응형
반응형

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

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

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 파일

memory_puzzle.aia
0.02MB


관련 글 : 앱인벤터 소개

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

 


 

반응형
반응형

[참고 앱]

https://youtu.be/RtbCqZvhkUU

 

wallpaper.aia
0.04MB

 
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/

 

 

 

 

wallpaper1.aia
0.04MB

 


관련글 : 앱인벤터 소개

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

 

 

 


 

 

 

반응형
반응형


[참고] https://youtu.be/FNqo62zsNeQ




1. 구글에서 (app design) 좋은 디자인 검색



2. 필요한 이미지 찾기

Unsplash: https://unsplash.com/https://unsplash.com/

4. 아이콘 준비

Icons8:https://icons8.com/ https://icons8.com/

5. 앱 개발 시작

https://x.thunkable.com/




반응형

+ Recent posts