본문 바로가기

앱인벤터

[앱인벤터 예제] TO DO LIST 앱 만들기 앱인벤터를 이용해 TO DO LIST를 만들어보도록 하겠습니다. 해야될일이 너무 많을 때나 중요도가 높지 않은 일들이 많을 때 까먹기 쉽습니다. 그럴 때 TO DO LIST 앱을 자주 사용하는데 앱인벤터로 간단하게 만들어보았습니다. 여기에 시간, 날짜와 알림 기능을 추가하면 좀 더 도움이 되는 앱을 완성할 수 있습니다. 먼저 완성된 앱을 사진으로 확인해봅시다. 동작사진 1. 텍스트박스에 해야할일을 입력하고 '추가' 버튼을 누르면 바로 밑 목록뷰에 일이 추가됩니다. 2. 그리고 완료된 일을 터치하면 완료된 내역으로 이동합니다. 이미지 이번 앱에서 사용되는 이미지를 다운받을 수 있는 링크를 걸어두었습니다. 다운로드 받아서 사용하시면 됩니다. 1) 아이콘 : www.flaticon.com/free-icon/c.. 더보기
[앱인벤터 기초] 레이아웃 - 수평배치, 수직배치 이해하기 스크린에 넣는 컴포넌트는 한줄에 하나씩만 들어갈 수 있습니다. 한 줄에 여러개의 컴포넌트들을 넣고 싶을 때에는 레이아웃 요소들을 사용하면 됩니다. 수평배치 블록 수평배치는 컴포넌트들이 왼쪽에서부터 오른쪽으로 가로로 정렬되도록 하는 레이아웃입니다. 수평배치는 기본적으로 수평정렬은 왼쪽에서부터, 수직정렬은 위쪽에서부터 시작됩니다. 화면 안에 컴포넌트들이 정렬되게 할 때 주로 사용합니다. 블록 설명 수평배치 안에 들어있는 컴포넌트들이 가로로 정렬될 때 왼쪽, 가운데, 오른쪽으로 정렬되도록 설정합니다. 수평배치 안에 들어있는 컴포넌트들이 세로로 정렬될 때 위쪽, 가운데, 아래로 정렬되도록 설정합니다. 배경색을 가져오거나 변경할 수 있는 블록입니다. 기본적으로 rgba 배경값을 가지고 있습니다. 세로길이 값을 가.. 더보기
[앱인벤터 기초] 사용자 인터페이스 - 웹뷰어 이해하기 사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다. 그룹안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 웹뷰어 블록 스크린 안에서 웹페이지를 보여주는 컴포넌트입니다. 웹뷰어 안에서 링크를 눌렀을 때 페이지가 변경될 수 있게 설정하거나 쿠키데이터를 삭제하거나 JavaScript 코드와 연동해서 동작하게 할 수 있습니다. 스마트폰 자체 뒤로가기 버튼을 누르면 웹뷰어가 뒤로가는게 아니라 앱이 종료될 수 있습니다. 블록 설명 페이지가 로딩되기 전에 '실행' 안의 블록들을 실행합니다. 오류가 발생하면 이벤트가 실행됩니다. 페이지가 로딩된 후.. 더보기
[앱인벤터 기초] 사용자 인터페이스 - 시간선택버튼 이해하기 사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다. 그룹안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 시간선택버튼 블록 '버튼'과 비슷하게 생겼지만 클릭했을 때 시간을 선택할 수 있는 창이 보이는 컴포넌트입니다. 스마트폰의 시간과 연결되어 있어서 현재 시간이 자동으로 표시됩니다. 블록 설명 시간설정 후에 '실행' 안의 블록들을 실행합니다. (다른 컴포넌트에서)시간선택버튼이 선택되었을 때 '실행' 내부의 명령을 실행합니다. 시간선택버튼에서 다른 컴포넌트가 선택되었을 때 '실행' 내부의 명령을 실행합니다. 시간선택버튼을 누르고 있으면.. 더보기
[앱인벤터 기초] 사용자 인터페이스 - 텍스트박스 이해하기 사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다. 그룹안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 텍스트박스 블록 텍스트박스는 사용자에게 글자(텍스트)를 입력할 수 있게 하는 컴포넌트입니다. 기본적으로 텍스트박스가 비어있을 경우 힌트를 통해 사용자가 어떤 값을 입력해야되는지 제시할 수 있습니다. 여러줄(MultiLine) 속성을 사용하면 두 줄이상 글자를 입력할 수 있으며 한 줄 입력상태 일 때는 완료버튼을 누르면 키보드가 닫히지만 여러줄일 경우 '키보드화면숨기기'를 호출하거나 Back를 눌러야 벗어날 수 있습니다. 블록 설명.. 더보기
[앱인벤터 기초] 사용자 인터페이스 - 스위치 이해하기 사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다. 그룹 안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 스위치 블록 스위치는 사용자가 탭을 하면 불리언 상태를 변경할 수 있는 컴포넌트입니다. 여기서 불리언(Boolean)은 참과 거짓을 나타내는 데이터형입니다. 스위치를 탭하면 참에서 거짓, 거짓에서 참으로 바뀌게 됩니다. 스위치 컴포넌트는 체크박스 컴포넌트와 외형만 다를 뿐 기능은 거의 비슷합니다. 블록 설명 스위치의 상태가 참에서 거짓, 거짓에서 참으로 변경될 때 '실행' 내부의 명령을 실행합니다. (다른 컴포넌트에서)스위치가 .. 더보기
[앱인벤터 기초] 사용자 인터페이스 - 스피너 이해하기 사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다. 그룹 안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 스피너 블록 스피너는 목록뷰, 목록 선택 버튼처럼 여러 항목들을 표시할 때 사용하는 컴포넌트입니다. 스피너는 목록선택버튼과 다르게 팝업창에서 항목을 선택합니다. 스피너를 클릭해야 목록이 보입니다. 컴포넌트에 들어갈 내용은 요소로 지정하면 되는데 이때 ' , ' 기호를 사용해서 구분해서 입력하면 됩니다. 많은 양의 데이터를 표시할 때 주로 사용합니다. 블록 설명 스피너 팝업창에서 항목을 선택한 후에 '실행' 안의 블록들을 실행합니.. 더보기
[앱인벤터 기초] 사용자 인터페이스 - 슬라이더 이해하기 사용자 인터페이스는 화면 구성에 가장 많이 사용되는 컴포넌트들을 모아 놓은 그룹입니다. 그룹안에는 버튼, 체크박스, 날짜선택버튼, 이미지, 레이블, 목록선택버튼, 목록뷰, 알림, 암호텍스트박스, 슬라이더, 스피너, 스위치, 텍스트박스, 시간선택버튼, 웹뷰어가 포함되어 있습니다. 슬라이더 블록 슬라이더는 최소값과 최대값 사이의 값을 섬네일을 움직여서 조정하는 컴포넌트입니다. 섬네일은 손가락으로 움직여서 조정하는 버튼입니다. 기본값으로 최소값은 10, 최대값은 50, 섬네일위치는 30으로 지정되어 있습니다. 슬라이더의 너비를 바꾸어도 디자이너 화면에서는 확인되지 않습니다. 스마트폰에 설치해서 확인했을 때 너비가 변경된 것을 확인할 수 있습니다. 주로 볼륨조절이나 크기 조절 등 사용자가 어떤 값을 조절할 때 .. 더보기

티스토리툴바