sfex tistory blog

현재 자체 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/reference/other/any-component-blocks.html

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

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

예제파일 설명

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

- 실행화면

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

- 처음 화면 설정 코딩

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

관련글 : 앱인벤터 소개

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