두근두근 누가 뒤에서 따라오는 것 같아.

이번에 만들어 볼 앱은 바로 SOS!! 입니다.
위급상황에서 앱을 누르면 자동으로 연락이 가는 앱 이죠.
울 애긔~ 옵하가 SOS앱으로 지켜줄게!!! 그럼 이제 본격적으로 앱을 만들어 볼까요??

이 튜토리얼을 시작하기 전에

  • # 안드로이드 폰(앱인벤터로 만든 앱은 안드로이드 스마트폰에서만 작동합니다.)
  • # 스마트폰과 PC가 공유하는 WiFi 네트워크 또는
      스마트폰과 PC를 연결하는 케이블
  • # 드림코드에서 제공하는 배포파일 (그림파일, 소리파일, 완성된 소스코드)

    • 준비 됐나요~? 그럼, 설명 시작합니다!ㅋㅋ

미리 보기

이번 앱의 완성된 모습은 다음과 같습니다.
어랏?!?! 화면이 두 개?! 연락도 할 수 있네!! 빨리 만들어 봅시다!

이번에 만들 앱은 지금까지 앱과는 다르게 화면이 2개 입니다.
처음 화면에서 3초가 흐른 후 자동으로 전화가 걸리거나, 설정버튼을 누르면 시간 흐름이 멈추고 전화번호 설정 창이 뜹니다.

배울 수 있는 기능

이번 앱 만들기를 통해서 배울 수 있는 기능들은 다음과 같습니다. 짜잔~

  • # 화면의 갯수를 늘리는 방법
  • # Clock을 사용한 카운트 다운(CountDown)
  • # 위치정보 활용
  • # 전화 걸기, 문자 메시지 전송
  • # TinyDB를 사용한 설정(전화번호) 저장

Screen1 구성요소 배치하기

이번에 만들 앱은 아까 본 바와 같이 화면이 두 개입니다.
첫 번째 화면을 Screen1이라고 할게요.(원래 첫번째 화면은 무조건 Screen1이여야 해요)
그럼 당연히 두 번째 화면은 Screen2가 되겠죠!
화면 두 개는 어떻게 만드냐고요? 조금 있다가 알아봅시다. 일단 screen1에 집중해주세요!
이제 Screen1에서 필요한 구성요소들을 배치해 볼게요.

왼쪽의 [Palette] 구역에서,
[Layout] -> [Horizontal Arrangement]를 드래그하여 Viewer 구역에 두 개 배치합니다.
Horizontal Arrangement는 전체적인 구성 틀을 잡아줍니다.
[User Interface] -> [Clock]을 Viewer 구역에 배치합니다. Clock은 보이지 않는 구성요소 입니다. 따라서 Viewer 구역
아래쪽 Non-Visible components 구역에 표시 됩니다.
아참! Clock은 3초 카운트 다운에 사용됩니다.

[User Interface] -> [Label]을 위쪽에 배치되어있는 Layout에 넣어 줍니다.
Label은 문자를 표시하는 역할을 하고요 그 역할을 이용하여 카운트 다운 숫자를 보여주도록 하겠습니다.
[User Interface] -> [button]을 아래쪽에 배치되어 있는 layout 안으로 쏙! 넣어줄게요.
이 버튼은 카운트 다운을 중지하고 전화번호를 지정할 페이지로 이동시키는 역할을 합니다.

[Social] -> [PhoneCall]과 [Texting]을 차례차례 Viewer 구역에 드래그 하여 놓습니다.
PhoneCall 구성요소는 전화 연결 기능, Texting 구성요소는 문자 전송 기능을 합니다.
이 두 구성요소는 눈에 보이는 것이 아니죠! 따라서 Non-Visible components라고 써있는 곳에 표시 됩니다.

[Sensors] -> [LocationSensor]와 [Storage] -> [TinyDB]를 지금까지 했던 방식과 같이 차례차례 드래그 하여
Viewer영역에 갖다 놓습니다.
LacationSensor는 현재 위치를 제공하는 기능, TinyDB의 사용 목적은 저장되어 있는 전화번호를 불러오는 것 입니다.

배치가 끝났으면, 나중에 구분하기 쉽도록 이름을 변경하겠습니다.(이름을 바꾸는 방법은 아래 사진을 참고하세요~)

Component 형태

우리가 붙일 이름

HorizontalArrangement1 Section1_A
Label LeftSecLabel
HorizontalArrangement2 Section1_B
Button OptionButton
Clock EverySecClock
LocationSensor MyLocationSensor
PhoneCall EmergencyPhoneCall
Texting EmergencyTexting
TinyDB1 PhoneNumberTinyDB1

다음은 연락처 설정을 도와주는 화면으로 넘어가겠습니다. 새로운 Screen을 만들어야 하는데요. 처음 시도해보는 기능입니다! 따라 오시죠!

Screen2 만들기 + 구성요소 배치하기

Screen을 하나 더 만들어 봅시다.
[Add Screen] 클릭 -> 새로 뜨는 창에서 “OptionScreen”을 입력하고 [OK] 클릭.
너무 불친절했나요? 아래 사진을 참고하면 어렵지 않을 겁니다. 계속 따라와 주세요~

드디어 새로운 화면이 생겼네요~ 이 새로운 화면은 위급상황에 연락이 갈 연락처를 설정하는 화면입니다.
그러면 무엇이 필요할까요? 아래 사진을 참고해 주세요.

이번에는 방금 해본 것들이니 완성된 사진 위주로 설명 갑니다. 왼쪽 [Palette]부분에서,
[Layout] -> [Horizontal Arrangement] (4개): 전체적인 구성 틀을 잡아줍니다.

[User Interface] -> [label]: 저장된 전화번호의 정보를 보여줍니다. 가장 위쪽에 배치되어있는 Layout box에 넣어 줍니다.
[User Interface] -> [Textbox]: 저장할 전화번호를 입력하기 위한 textbox입니다. 위에서 두 번째에 배치되어있는 Layout box에 넣어 줍니다.
[User Interface] -> [Button]: 전화번호를 입력한 후 저장을 할 때 누르는 버튼입니다. 위에서 두 번째에 배치되어있는 Layout box에서 textbox의 오른쪽에 위치시켜 줍니다.
[User Interface] -> [Button]: screen1로 넘어가게 해줍니다. 가장 아래쪽에 배치되어 있는 layout box 안으로
쏙! 넣어줄게요.
{Storage]-> [TinyDB]: 정보를 저장하고 불러오는 기능을 합니다. Screen2에서는 전화번호를 저장하고 불러오는데
사용됩니다.

이름 변경은 다음 표와 같이 하겠습니다.

Component 형태 우리가 붙일 이름
HorizontalArrangement1 Section2_A
Label SavedPhoneNumLabel
HorizontalArrangement2 Section2_B
TextBox PhoneNumberTextBox
Button SaveButton
HorizontalArrangement3 Section2_C
HorizontalArrangement4 Section2_D
Button QuitButton
TinyDB PhoneNumberTinyDB2

댓글