[앱인벤터 예제] 메모장/일기장 앱 만들기

앱인벤터를 이용해 글을 작성해서 저장하는 메모장/일기장 앱을 만들어보도록 하겠습니다.

글을 작성해서 저장하기 때문에 메모장으로 사용해도 되고 혼자 사용하는 일기장으로 사용해도 됩니다.

비밀번호 기능을 추가하면 좀 더 개인적으로 쓸 수 있습니다.

 

먼저 완성된 앱을 사진으로 확인해봅시다.

 

---

동작사진

 

1. 처음화면입니다.

 

 

2. 내용을 클릭해서 글을 입력한 후 저장하기 버튼을 클릭합니다.

 

3.  파일이름을 입력한 후 저장 버튼을 클릭하면 알림창이 뜹니다.

 

 

4. 불러오기 버튼을 클릭하고 파일이름을 입력한 후 열기 버튼을 클릭하면 메모 내용이 화면에 표시됩니다.

 

 

5. 메모를 삭제하고 싶으면 삭제하기 버튼을 클릭한 후 파일이름을 입력한 후 삭제 버튼을 클릭하면 됩니다.

 

---

이미지

 

1) 메모 배경 : www.freepik.com/free-vector/pack-paper-sheets-post-it_1210022.htm#page=1&query=memo&position=48

Download Pack Of Paper Sheets And Post-it for free

 

---

화면구성

 

전체적인 화면구성입니다.  가장 위에는 메모장 앱 제목이 있습니다. 수직배치를 넣고 메모장 이미지를 배경으로 넣습니다. 그리고 그 안에 제목 레이블과 텍스트 박스를 배치합니다. 내용을 입력하는 곳 아래에는 수평배치를 넣어 4개의 버튼을 가로로 넣습니다. 새로만들기, 저장하기, 불러오기, 삭제하기 순으로 배치합니다. 그 아래에는 파일이름을 입력하는 곳을 만들기 위해 수평배치를 하나 더 넣습니다. 그리고 버튼 3개를 넣고 저장, 열기, 삭제 순으로 넣은 후 코딩으로 선택적으로 보이게 합니다.

 

 

---

 

코딩하기

 

디자이너 화면에서 블록 화면으로 들어갑니다. 

 

스크린이 초기화되면 제일 마지막 수평배치의 보이기 여부를 거짓으로 합니다. 새로만들기 버튼을 클릭했을 때도 파일이름의 보이기를 거짓을 합니다. 그리고 텍스트 박스와 제목 레이블을 비웁니다.

 

함수를 하나 만들어서 저장하기, 불러오기, 삭제하기 버튼을 클릭했을 때 가장 아래 버튼이 내용에 맞게 하나만 보이도록 합니다. 

 

각각의 버튼을 클릭할 때마다 버튼이름을 이름으로 넣고 함수를 호출합니다.

 

저장 버튼을 클릭하면 제목이 공백이 아니면 텍스트 파일을 저장합니다. 그리고 메시지창으로 저장이 된 것을 알려줍니다. 열기 버튼, 삭제 버튼도 같은 방식으로 파일을 열거나 삭제합니다. 삭제하고 나서 메시지창으로 알려줍니다. 각 기능을 완료한 후 파일이름 입력란을 비워줍니다.  

 

---

확인하기

 

앱인벤터로 만든 앱을 스마트폰에 설치하기 위해 [빌드] - [앱(APK용 QR코드 제공)] 을 클릭해서 QR 코드를 만듭니다. 

 

설치할 스마트폰에서 네이버 앱을 열어 QR코드를 찍도록 합니다.

 

앱을 설치한 후 완성된 모습을 확인합니다. (완성~ :D )