[App Inventor] 앱인벤터 다이어리/메모장 만들기 #1


본 포스팅은 학교 과제로 준비했던 프로젝트를 바탕으로 작성한 글입니다.

앱인벤터를 이용해서 다이어리를 제작해보겠습니다.

달력을 만들어 날짜별로 일기를 기록할 수 있는 다이어리와 To Do List, 비밀번호 입력을 해야 접근 가능한 다이어리로 총 3가지를 제작해보겠습니다.

이번 포스팅에서는 스크린 구성과 완성된 결과물을 먼저 보여드리도록 하겠습니다.


1. 스크린 구성

Screen은 총 7개를 사용할 예정입니다.

0123456
전체 Screen 구성

  • Screen1은 시작화면으로, 작성하기 버튼을 누르면 Screen2로 이동합니다.
  • Screen2는 메뉴화면으로, Oneday Record 버튼을 누르면 Screen3(달력을 이용한 다이어리)으로 이동하고, To Do List 버튼을 누르면 Screen4(ToDoList)로 이동합니다. 마지막 Secret Record 버튼을 누르면 Screen6(비밀번호)으로 이동합니다.
  • Screen3은 달력을 이용한 다이어리로, 사진에는 잘려있지만 하단 추가버튼을 통해 일기를 작성할 수 있습니다. 
  • Screen3-day는 달력에 일자를 클릭하면 이동하게 되는 화면으로 해당 일자에 일기가 있어야만 클릭할 수 있습니다.
  • Screen4는 ToDoList로, 입력칸에 텍스트 입력 후 추가 버튼을 누르면 아래 리스트뷰(목록뷰)에 입력이 되고 목록을 클릭후 삭제버튼을 누르면 해당 목록이 삭제됩니다.
  • Screen6은 비밀번호 초기설정 및 입력화면으로, 비밀번호를 눌러야 다이어리에 접근할 수 있습니다.
  • Screen6-secret은 비밀번호가 풀리면 접근할 수 있는 화면으로, 저장, 수정 및 삭제가 가능한 다이어리입니다.

화면구성에 대한 자세한 설명은 이후 포스팅에서 하겠습니다.


2. 실행화면(완성된 결과물)

012345678
실행화면 스크린샷

MIT AI2 Companion을 설치하여 제 스마트폰에서 실행한 화면입니다.

각 다이어리 화면(OnedayRecord, ToDoList, SecretRecord)에서 스마트폰 하단 뒤로가기 버튼을 클릭하면 메뉴화면으로 이동합니다.

메뉴화면에서 뒤로가기 버튼을 클릭하면 앱 종료 알림창이 실행되도록 구현하였습니다.